/* ===========================================================================
   MapKlad · Cabinet — LIGHT PAPER RESKIN
   Перекрашивает тёмный «neon glass» кабинет под бренд лендинга:
   кремовая бумага + жжёно-оранжевый акцент, шрифты Onest/Prata.
   Слой-переопределение: грузится ПОСЛЕ инлайновых стилей cabinet.php.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Prata&display=swap');

/* --- Токены: переопределяем переменные тёмной темы на палитру лендинга --- */
:root {
    --bg-body: #f2efe8;
    --bg-card: #fbf9f4;
    --text-main: #25241f;
    --text-muted: #6f6b62;
    --accent: #bc6b24;
    --accent-glow: rgba(188, 107, 36, 0.18);
    --border: rgba(37, 36, 31, 0.14);
    --radius: 16px;
    --success-color: #3f7d57;
    --fire-gradient: linear-gradient(135deg, #d97706 0%, #c0392b 100%);
    --ice-gradient: linear-gradient(135deg, #2b7a8c 0%, #2563eb 100%);
}

body {
    font-family: 'Onest', sans-serif;
    color: var(--text-main);
}
input, button, select, textarea { font-family: 'Onest', sans-serif; }
body {
    background:
        radial-gradient(circle at 11% 7%, rgba(188, 107, 36, 0.08), transparent 24rem),
        radial-gradient(circle at 89% 92%, rgba(150, 81, 26, 0.06), transparent 26rem),
        #f2efe8;
}

/* Бумажная фактура-шум, как на лендинге */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
.top-nav, .dashboard-content, .auth-wrapper { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ AUTH -- */
.auth-wrapper {
    background: radial-gradient(ellipse at 50% 40%, rgba(188, 107, 36, 0.10) 0%, transparent 55%);
}
.auth-wrapper::before { background: rgba(188, 107, 36, 0.16); }
.auth-wrapper::after  { background: rgba(150, 81, 26, 0.13); }

.auth-card {
    background: rgba(251, 249, 244, 0.92);
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(61, 51, 38, 0.12), 0 2px 8px rgba(61, 51, 38, 0.05);
}
.auth-card::before {
    background: linear-gradient(90deg, transparent, rgba(188, 107, 36, 0.35), transparent);
}

.auth-logo {
    background: linear-gradient(135deg, var(--accent) 0%, #96511a 100%);
    box-shadow: 0 10px 34px rgba(188, 107, 36, 0.35);
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 10px 34px rgba(188, 107, 36, 0.32); }
    50%      { box-shadow: 0 12px 52px rgba(188, 107, 36, 0.5); }
}
.auth-logo i { color: #fffaf1; }

/* ------------------------------------------------------------ TOP NAV --- */
.top-nav {
    background: rgba(251, 249, 244, 0.85);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.brand { color: var(--text-main); font-family: 'Prata', serif; letter-spacing: -0.01em; }
.brand i { color: var(--accent); }
.user-nick { color: var(--text-main); }

/* ------------------------------------------------------------ STAT CARDS - */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 6px 20px -10px rgba(61, 51, 38, 0.14);
}
.stat-card:hover { border-color: rgba(37, 36, 31, 0.22); }
.stat-card i.bg-icon { color: rgba(37, 36, 31, 0.05); }
.stat-val { color: var(--text-main); }

.luck-fire { border-color: rgba(192, 57, 43, 0.35); box-shadow: inset 0 0 22px rgba(192, 57, 43, 0.07); }
.luck-ice  { border-color: rgba(37, 99, 235, 0.32);  box-shadow: inset 0 0 22px rgba(37, 99, 235, 0.07); }
.luck-norm { border-color: rgba(63, 125, 87, 0.32);  box-shadow: inset 0 0 22px rgba(63, 125, 87, 0.07); }

/* ----------------------------------------------------------- SWITCHES ---- */
.switch-container { border-top: 1px solid rgba(37, 36, 31, 0.08); }
.slider { background-color: #cfcabf; }
.slider:before { box-shadow: 0 1px 3px rgba(37, 36, 31, 0.25); }

/* ------------------------------------------------------------ FEATURES --- */
.feature-item {
    background: rgba(37, 36, 31, 0.02);
    border: 1px solid var(--border);
}
.feature-title { color: var(--text-main); }
.feature-log th, .feature-log td { border-top: 1px solid rgba(37, 36, 31, 0.08); }
.feature-state-on  { color: #2f7d54; }
.feature-state-off { color: #b03a2e; }

/* ------------------------------------------------------------- CHARTS ---- */
.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 6px 20px -10px rgba(61, 51, 38, 0.14);
}
.chart-header h3 { color: var(--text-main); font-family: 'Prata', serif; font-weight: 400; }

.text-green { color: #2f7d54; }
.text-red   { color: #b03a2e; }
.text-cyan  { color: #2b7a8c; }
.text-accent { color: var(--accent); }

/* ------------------------------------------------------------- FROZEN ---- */
.frozen-card { border-color: rgba(43, 122, 140, 0.35); box-shadow: inset 0 0 22px rgba(43, 122, 140, 0.08); }
.frozen-card i.bg-icon { color: rgba(43, 122, 140, 0.12); }
.frozen-slider,
input:checked + .frozen-slider { background-color: #2b7a8c !important; }

/* ------------------------------------------------------- INPUTS / BTNS --- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
    background: #fffdf8;
    border: 1px solid var(--border);
    color: var(--text-main);
}
input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-glow); }

.btn { background: var(--accent); color: #fffaf1; }
.btn:hover { background: #96511a; box-shadow: 0 6px 18px var(--accent-glow); }
.btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.btn-secondary:hover { border-color: var(--text-main); color: var(--text-main); }
.btn-logout { background: rgba(37, 36, 31, 0.05); color: var(--text-muted); }
.btn-logout:hover { background: rgba(176, 58, 46, 0.1); color: #b03a2e; border-color: rgba(176, 58, 46, 0.22); }

/* -------------------------------------------------------------- ALERTS --- */
.alert-error   { background: rgba(176, 58, 46, 0.09); color: #b03a2e; border: 1px solid rgba(176, 58, 46, 0.22); }
.alert-success { background: rgba(63, 125, 87, 0.10); color: #2f7d54; border: 1px solid rgba(63, 125, 87, 0.22); }

/* -------------------------------------------------------- MODAL / TOAST -- */
.modal-overlay { background: rgba(37, 36, 31, 0.5); }
.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(61, 51, 38, 0.22);
}
.toast { background: #3f7d57; color: #fff; box-shadow: 0 12px 30px rgba(61, 51, 38, 0.2); }

/* --------------------------------------------------------- TABS (dash) --- */
.cab-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 22px; padding: 6px;
    background: rgba(251, 249, 244, 0.75);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 6px 18px -12px rgba(61, 51, 38, 0.18);
    backdrop-filter: blur(8px);
    position: sticky; top: 78px; z-index: 40;
}
.cab-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border: 1px solid transparent; border-radius: 10px;
    background: transparent; color: var(--text-muted);
    font-family: 'Onest', sans-serif; font-weight: 600; font-size: 0.9rem;
    cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.cab-tab i { font-size: 0.95em; opacity: 0.85; }
.cab-tab:hover { background: rgba(37, 36, 31, 0.05); color: var(--text-main); }
.cab-tab.active {
    background: var(--accent); color: #fffaf1; border-color: transparent;
    box-shadow: 0 6px 16px -6px rgba(188, 107, 36, 0.5);
}
.cab-tab.active i { opacity: 1; }
@media (max-width: 560px) {
    .cab-tabs { top: 66px; }
    .cab-tab { flex: 1 1 auto; justify-content: center; padding: 9px 10px; }
    .cab-tab span { font-size: 0.82rem; }
}

/* -------------------------------------------------------------- MISC ----- */
.key-card:active { background: rgba(37, 36, 31, 0.06); }
.custom-scroll { scrollbar-color: #aaa294 transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background-color: #aaa294; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background-color: #8f887b; }