:root {
    --bg-color: #0f172a;
    --card-bg: rgba(30, 41, 59, 0.7);
    --accent-primary: #3b82f6;
    --accent-secondary: #2dd4bf;
    --text-main: #f8fafc;
    --text-dim: #94a3b8;
}

body {
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at top right, #1e293b, #0f172a);
    color: var(--text-main);
}

.glass {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

.hidden-view {
    display: none !important;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.region-hit {
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.region-inside { fill: rgba(59, 130, 246, 0.06); }
.region-inside.region-selected { fill: rgba(59, 130, 246, 0.92); }
.region-outside { fill: rgba(148, 163, 184, 0.02); }
.region-outside.region-selected { fill: rgba(148, 163, 184, 0.22); }

.region-correct { fill: rgba(34, 197, 94, 0); }
.region-correct.region-selected { fill: rgba(34, 197, 94, 0.34); }
.region-correct-outside.region-selected { fill: rgba(34, 197, 94, 0.18); }

.expr-overline {
    text-decoration: overline;
    text-decoration-thickness: 3px;
    text-decoration-color: rgba(248, 250, 252, 0.92);
    text-decoration-skip-ink: none;
}

.handbook-title {
    font-weight: 800;
    color: rgba(248, 250, 252, 0.96);
    letter-spacing: 0.02em;
}

.handbook-ops {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.handbook-op {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.35);
}

.handbook-op .sym {
    font-weight: 900;
    font-size: 18px;
    color: rgba(226, 232, 240, 0.95);
    min-width: 42px;
    text-align: center;
}

.handbook-op .desc {
    color: rgba(203, 213, 225, 0.9);
    font-size: 13px;
}

.handbook-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .handbook-grid { grid-template-columns: 1fr; }
}

.handbook-card {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.35);
    padding: 14px;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    align-items: center;
}

@media (max-width: 520px) {
    .handbook-card { grid-template-columns: 1fr; }
}

.handbook-expr {
    font-weight: 900;
    font-size: 26px;
    letter-spacing: 0.02em;
    color: rgba(248, 250, 252, 0.96);
}

.handbook-mini {
    width: 100%;
    max-width: 260px;
    justify-self: end;
}

@media (max-width: 520px) {
    .handbook-mini { justify-self: start; }
}

.handbook-mini svg {
    width: 100%;
    height: auto;
    display: block;
}