@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
:root{
    --panel-bg: rgba(11,16,38,0.6);
    --neon: linear-gradient(90deg,#ff6b6b,#7c4dff);
}

body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

.panel{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    border: 1px solid rgba(255,255,255,0.03);
}

.neon-border{
    position: relative;
    overflow: visible;
}
.neon-border::after{
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
}

/* subtle neon outline */
.neon-border{
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 4px 18px rgba(0,0,0,0.6);
}

.neon-border::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: conic-gradient(from 120deg, rgba(255,45,85,0.08), rgba(125,77,255,0.06), rgba(0,200,255,0.05));
    mix-blend-mode: overlay;
    pointer-events: none;
}

.input{
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    color: #e6eef8;
    outline: none;
}
.input:focus{ box-shadow: 0 6px 18px rgba(0,0,0,0.5); border-color: rgba(0,200,255,0.2); }

.btn-primary{
    padding: 12px 16px; border-radius: 10px; font-weight: 700; background: linear-gradient(90deg,#06b6d4,#3b82f6); color: white; border: none;
}
.btn-primary:hover{ transform: translateY(-2px); }

.btn-danger{
    padding: 12px 16px; border-radius: 10px; font-weight: 700; background: linear-gradient(90deg,#ff7b7b,#ff6b9f); color: white; border: none;
}

/* table styles */
table{ border-collapse: collapse; }
table thead th{ padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
tbody tr td{ padding: 10px 6px; border-bottom: 1px dashed rgba(255,255,255,0.02); }

.color-box{ width: 28px; height: 18px; border-radius: 4px; display:inline-block; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid rgba(0,0,0,0.3); }

/* small screens */
@media (max-width: 768px){
    canvas#wheel{ width: 100% !important; height: auto !important; }
}