@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800&family=Share+Tech+Mono&display=swap');

:root {
    --color-panel-bg: #d7ddea;
    --color-panel-bg-2: #eef3fb;
    --color-panel-border: #7c8ba8;
    --color-panel-border-dark: #4a556d;
    --color-text-amber: #fff7d6;
    --color-text-green: #39ffb6;
    --color-bg-dark: #7ac4ff;
    --color-hot-pink: #ff2fb2;
    --color-cyan: #00d9ff;
    --color-violet: #8a5cff;
    --color-orange: #ffb000;
    
    --font-main: 'Inter', Arial, sans-serif;
    --font-mono: 'Share Tech Mono', 'Courier New', Courier, monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg-dark);
    background-image:
        linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px),
        linear-gradient(160deg, rgba(255, 47, 178, 0.22), transparent 36%),
        linear-gradient(25deg, transparent 48%, rgba(0, 217, 255, 0.3)),
        linear-gradient(180deg, #8bd7ff 0%, #f5d8ff 42%, #281f5c 100%);
    background-size: 32px 32px, 32px 32px, auto, auto, auto;
    color: var(--color-text-amber);
    font-family: var(--font-main);
    overflow-x: hidden;
    min-height: 100vh;
}



/* Base Industrial Panel Style */
.industrial-panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.76), transparent 28%),
        linear-gradient(135deg, var(--color-panel-bg-2), var(--color-panel-bg));
    border-radius: 6px;
    border: 1px solid var(--color-panel-border);
    border-bottom-color: var(--color-panel-border-dark);
    border-right-color: var(--color-panel-border-dark);
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.56),
        inset 0 0 18px rgba(16, 25, 45, 0.18),
        0 0 0 1px rgba(255, 47, 178, 0.16),
        0 16px 32px rgba(24, 18, 55, 0.32);
    padding: 10px;
    position: relative;
}

h1, h2, h3, h4 {
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

button {
    background: transparent;
    border: none;
    font-family: var(--font-main);
    cursor: pointer;
    text-transform: uppercase;
}

/* Utility to add inner border to panels */
.inner-border {
    border: 1px solid rgba(0, 217, 255, 0.24);
    border-radius: 4px;
    padding: 10px;
    height: 100%;
}