:root {
    --copper-dark: #2d1b0e;
    --copper-base: #b87333;
    --copper-bright: #eb984e;
    --verdigris: #43b39c;
    --oxide-red: #d64045;
    --void: #0a0a0a;
    --blueprint: rgba(184, 115, 51, 0.05);
}

body {
    background-color: var(--void);
    color: #d1d1d1;
    font-family: 'Inter', sans-serif;
    background-image: 
        linear-gradient(var(--blueprint) 1px, transparent 1px),
        linear-gradient(90deg, var(--blueprint) 1px, transparent 1px);
    background-size: 40px 40px;
    overflow-x: hidden;
}

.copper-panel {
    background: linear-gradient(145deg, #161616, #0d0d0d);
    border: 1px solid rgba(184, 115, 51, 0.3);
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.copper-panel::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    border: 1px solid rgba(184, 115, 51, 0.1);
    pointer-events: none;
    clip-path: polygon(0 0, 10% 0, 10% 2px, 0 2px);
}

.tension-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--copper-base), transparent);
    height: 1px;
    opacity: 0.4;
}

.mono { font-family: 'JetBrains Mono', monospace; }

.copper-text {
    color: var(--copper-bright);
    text-shadow: 0 0 10px rgba(235, 152, 78, 0.3);
}

.verdigris-glow {
    color: var(--verdigris);
    text-shadow: 0 0 12px rgba(67, 179, 156, 0.4);
}

.oxide-glow {
    color: var(--oxide-red);
    text-shadow: 0 0 12px rgba(214, 64, 69, 0.4);
}

.btn-copper {
    background: rgba(184, 115, 51, 0.1);
    border: 1px solid var(--copper-base);
    color: var(--copper-bright);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    font-weight: 700;
}

.btn-copper:hover {
    background: var(--copper-base);
    color: var(--void);
    box-shadow: 0 0 20px rgba(184, 115, 51, 0.4);
}

.btn-copper.active {
    background: var(--copper-base);
    color: var(--void);
}

/* Sparkline Animation */
.sparkline-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 3s linear forwards;
}

@keyframes dash {
    to { stroke-dashoffset: 0; }
}

.rivet {
    width: 4px;
    height: 4px;
    background: var(--copper-base);
    border-radius: 50%;
    position: absolute;
    box-shadow: inset -1px -1px 1px rgba(0,0,0,0.5);
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--copper-dark); }
::-webkit-scrollbar-thumb:hover { background: var(--copper-base); }

.status-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    position: relative;
}

.status-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid currentColor;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* Hide scrollbar but keep scrolling */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

[x-cloak] { display: none !important; }

/* Modal specific styles */
.modal-backdrop {
    backdrop-filter: blur(8px);
}

/* Custom checkbox styling */
input[type="checkbox"]:checked {
    background-color: var(--copper-base);
    border-color: var(--copper-base);
}

/* Form input focus states */
input:focus, select:focus {
    box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.2);
}