/* ================================================================
   SafeNest AI - Premium Pastel Theme
   Playfair Display + Inter + JetBrains Mono
   Light by default; dark via html[data-theme="dark"]
   ================================================================ */

/* ---------- PALETTE ---------- */
:root{
    /* === BRAND === */
    --brand-1:#0ea5e9;
    --brand-2:#2563eb;
    --brand-3:#6366f1;

    /* === SUPPORTING === */
    --ink:#0f172a; --ink-2:#1e293b;
    --muted:#64748b; --muted-2:#94a3b8;
    --line:#e5e7eb; --line-soft:#eef0f4;
    --bg:#fafbff; --bg-card:#ffffff;
    --emerald:#10b981; --amber:#f59e0b; --rose:#ef4444; --violet:#8b5cf6;

    /* === COMPOSED GRADIENTS === */
    --grad:        linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 45%, var(--brand-3) 100%);
    --grad-side:   linear-gradient(180deg, var(--brand-1) 0%, var(--brand-2) 60%, #4f46e5 100%);
    --grad-warm:   linear-gradient(135deg,#38bdf8,#0ea5e9);

    /* === SCALE === */
    --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:24px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.04);
    --shadow-md:0 10px 30px -10px rgba(99,102,241,.12);
    --shadow-lg:0 30px 60px -20px rgba(99,102,241,.18);
    --side-w:256px;  --side-w-collapsed:68px;

    /* ===== Legacy SN_* token aliases (for old pages) ===== */
    --sn-bg-1:#fafbff;
    --sn-bg-2:#f0f4ff;
    --sn-bg-3:#e8eeff;
    --sn-glass:#ffffff;
    --sn-glass-strong:#fafbff;
    --sn-border:var(--line);
    --sn-text:var(--ink);
    --sn-text-muted:var(--muted);
    --sn-accent:var(--brand-2);
    --sn-accent-2:var(--brand-3);
    --sn-success:var(--emerald);
    --sn-warn:var(--amber);
    --sn-danger:var(--rose);
    --sn-shadow:var(--shadow-md);
    --sn-radius:var(--radius-md);
    --sn-radius-sm:var(--radius-sm);
}

/* Dark theme variant - kept so users can opt back in */
html[data-theme="dark"]{
    --ink:#f5f7ff; --ink-2:#dde2ff;
    --muted:#a3aac6; --muted-2:#7d85a8;
    --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.08);
    --bg:#0a0f1e; --bg-card:#111733;
    --sn-bg-1:#0a0f1e; --sn-bg-2:#111733; --sn-bg-3:#1a2148;
    --sn-glass:rgba(255,255,255,.06); --sn-glass-strong:rgba(255,255,255,.10);
}

/* ---------- BASE ---------- */
*{ box-sizing:border-box; }
html,body{
    margin:0; padding:0;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    color:var(--ink);
    background:linear-gradient(135deg,#f8faff 0%,#f0f4ff 50%,#faf8ff 100%);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    min-height:100vh;
}
html[data-theme="dark"] body{
    background:
        radial-gradient(1200px 800px at -10% -10%, rgba(91,140,255,0.22), transparent 60%),
        radial-gradient(1000px 700px at 110% 10%, rgba(155,107,255,0.18), transparent 60%),
        linear-gradient(180deg, var(--sn-bg-1), var(--sn-bg-2));
}
h1,h2,h3,h4,.font-display{
    font-family:'Playfair Display',Georgia,serif; font-weight:800; letter-spacing:-.01em;
}
.font-mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }

/* ---------- SHELL ---------- */
.app-shell,.sn-shell{
    display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100vh;
}
@media(max-width:1024px){
    .app-shell,.sn-shell{ grid-template-columns:1fr; }
}

/* ---------- SIDEBAR ---------- */
.sidebar,.sn-sidebar{
    background:linear-gradient(180deg,#f0f4ff 0%,#e8eeff 40%,#f0edff 100%);
    border-right:1px solid rgba(99,102,241,.1);
    box-shadow:4px 0 30px -8px rgba(99,102,241,.1);
    position:sticky; top:0; height:100vh; overflow:hidden auto;
    display:flex; flex-direction:column; z-index:30;
    padding:0;
}
html[data-theme="dark"] .sidebar,html[data-theme="dark"] .sn-sidebar{
    background:linear-gradient(180deg,#111733 0%,#0e1432 50%,#1a1640 100%);
    border-right:1px solid rgba(255,255,255,.08);
}
@media(max-width:1024px){
    .sidebar,.sn-sidebar{ display:none; }
}

.sidebar > .orb{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.25; pointer-events:none; }
.sidebar > .orb:nth-child(1){ width:120px; height:120px; background:var(--brand-1); top:-20px; right:-30px; animation:orbFloat1 8s ease-in-out infinite; }
.sidebar > .orb:nth-child(2){ width:100px; height:100px; background:var(--brand-3); bottom:60px; left:-20px; animation:orbFloat2 10s ease-in-out infinite; }
@keyframes orbFloat1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-15px,25px); } }
@keyframes orbFloat2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(20px,-20px); } }

.sidebar-header{
    padding:18px 16px 16px; display:flex; align-items:center; gap:12px;
    background:linear-gradient(135deg, rgba(15,23,42,.03), rgba(99,102,241,.06), rgba(14,165,233,.04));
    border-bottom:1px solid rgba(99,102,241,.1);
    position:relative; overflow:hidden;
}
.sidebar-header::after{
    content:""; position:absolute; bottom:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--brand-1),var(--brand-2),var(--brand-3),var(--violet),var(--brand-2),var(--brand-1));
    background-size:200% 100%; animation:headerRainbow 4s linear infinite;
}
@keyframes headerRainbow{ 0%{ background-position:0% 0%; } 100%{ background-position:200% 0%; } }
.sidebar-header::before{
    content:""; position:absolute; top:0; left:-100%; width:200%; height:100%;
    background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.18) 50%,transparent 75%);
    animation:headerShimmer 4s ease-in-out infinite;
}
@keyframes headerShimmer{ 0%{ transform:translateX(-50%); } 100%{ transform:translateX(50%); } }

/* Logo with conic-gradient spinning ring */
.logo,.sn-brand{
    display:flex; align-items:center; gap:12px; text-decoration:none; flex:1; min-width:0;
    color:inherit;
}
.logo-icon,.sn-brand-mark{
    width:48px; height:48px; border-radius:50%; background:#fff;
    position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    color:var(--brand-2); font-weight:800; font-size:18px; box-shadow:0 8px 20px rgba(99,102,241,.2);
}
.logo-icon::before,.sn-brand-mark::before{
    content:""; position:absolute; inset:-3px; border-radius:50%;
    background:conic-gradient(from 0deg,
        var(--brand-1),var(--brand-2),var(--brand-3),var(--violet),
        #ec4899,var(--amber),var(--emerald),var(--brand-1));
    animation:logoSpin 3s linear infinite; z-index:0;
}
.logo-icon::after,.sn-brand-mark::after{
    content:""; position:absolute; inset:2px; border-radius:50%; background:#fff;
    z-index:1; box-shadow:inset 0 0 8px rgba(99,102,241,.08);
}
.logo-icon > *,.sn-brand-mark > *{ position:relative; z-index:2; }
@keyframes logoSpin{ 0%{ transform:rotate(0); } 100%{ transform:rotate(360deg); } }

.logo-text,.sn-brand-name{
    font-family:'Playfair Display',Georgia,serif; font-weight:800; font-size:1.05rem;
    letter-spacing:-.01em; line-height:1.2; color:var(--ink);
}
.logo-text span{
    background:var(--grad-side); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sn-brand-sub,.logo-sub{
    font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    background:linear-gradient(90deg,var(--brand-1),var(--brand-3));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    margin-top:2px;
}
.logo-tagline{ height:16px; overflow:hidden; position:relative; min-width:120px; }
.logo-tagline-item{
    position:absolute; inset:0 auto auto 0; right:0; height:16px;
    font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
    background:linear-gradient(90deg,var(--brand-1),var(--brand-3));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    opacity:0; transform:translateY(100%);
    transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.logo-tagline-item.active{ opacity:1; transform:translateY(0); }
.logo-tagline-item.exit  { opacity:0; transform:translateY(-100%); }

/* ---------- NAV ---------- */
.sidebar-nav,.sn-nav{ padding:12px; flex:1; }
.nav-section,.sn-nav-section-wrap{ margin-bottom:16px; }
.nav-section-title,.sn-nav-section{
    font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted-2); padding:12px 12px 6px; position:relative;
}
.nav-section-title::after,.sn-nav-section::after{
    content:""; display:block; width:28px; height:2px; margin-top:4px; border-radius:2px;
    background:linear-gradient(90deg,var(--brand-1),var(--brand-3)); opacity:.4;
    animation:sectionLine 3s ease-in-out infinite;
}
@keyframes sectionLine{ 0%,100%{ width:28px; opacity:.4; } 50%{ width:48px; opacity:.7; } }

.nav-item,.sn-nav-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; margin:2px 0; border-radius:12px;
    color:var(--ink-2); font-size:.88rem; font-weight:500;
    text-decoration:none; min-height:40px; border:1px solid transparent;
    transition:all .2s cubic-bezier(.2,.9,.3,1); position:relative;
    animation:navSlideIn .4s ease both;
}
.nav-item:hover,.sn-nav-item:hover{
    background:rgba(255,255,255,.65); color:var(--brand-2);
    border-color:rgba(99,102,241,.12); transform:translateX(4px);
    box-shadow:0 4px 16px -4px rgba(99,102,241,.15);
}
html[data-theme="dark"] .nav-item:hover,html[data-theme="dark"] .sn-nav-item:hover{
    background:rgba(255,255,255,.08);
}
.nav-item:hover i,.sn-nav-item:hover i{ animation:navIconBounce .4s cubic-bezier(.2,.9,.3,1.2); }
@keyframes navIconBounce{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.2) rotate(-8deg); }
    70%{ transform:scale(.95) rotate(3deg); }
    100%{ transform:scale(1) rotate(0); }
}
.nav-item.active,.sn-nav-item.active{
    background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.6));
    border-color:rgba(99,102,241,.18);
    color:var(--brand-2); font-weight:700;
    box-shadow:0 4px 18px -4px rgba(99,102,241,.18);
    overflow:hidden;
}
html[data-theme="dark"] .nav-item.active,html[data-theme="dark"] .sn-nav-item.active{
    background:linear-gradient(135deg,rgba(91,140,255,0.22),rgba(155,107,255,0.18));
}
.nav-item.active::before,.sn-nav-item.active::before{
    content:""; position:absolute; left:0; top:8px; bottom:8px; width:3.5px; border-radius:0 3px 3px 0;
    background:var(--grad-side); box-shadow:0 0 12px rgba(37,99,235,.4);
    animation:activeBarGlow 2s ease infinite;
}
@keyframes activeBarGlow{ 0%,100%{ box-shadow:0 0 8px rgba(37,99,235,.3); } 50%{ box-shadow:0 0 16px rgba(37,99,235,.6); } }
.nav-item.active::after,.sn-nav-item.active::after{
    content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    animation:navShimmer 3s ease-in-out infinite;
}
@keyframes navShimmer{ 0%{ left:-75%; } 100%{ left:125%; } }
@keyframes navSlideIn{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:translateX(0); } }
.sn-nav-item i,.nav-item i{ width:18px; text-align:center; }
.nav-badge{ margin-left:auto; padding:2px 8px; border-radius:999px; background:var(--rose); color:#fff; font-size:.68rem; font-weight:800; }

/* ---------- HEADER ---------- */
.sn-main,.main{ display:flex; flex-direction:column; min-width:0; }
.header-wrap{ position:sticky; top:0; z-index:20; }
.header,.sn-topbar{
    height:64px; padding:0 22px; display:flex; align-items:center; gap:14px;
    background:linear-gradient(90deg,#eef2ff,#f0f4ff 50%,#f5f3ff);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(99,102,241,.06);
    position:relative;
}
html[data-theme="dark"] .header,html[data-theme="dark"] .sn-topbar{
    background:linear-gradient(90deg,rgba(15,23,42,.7),rgba(20,30,80,.7),rgba(25,15,80,.7));
    border-bottom:1px solid rgba(255,255,255,.08);
}
.header::after,.sn-topbar::after{
    content:""; position:absolute; bottom:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--brand-1),var(--brand-2),var(--brand-3),var(--violet),var(--brand-2),var(--brand-1));
    background-size:200% 100%; animation:headerRainbow 4s linear infinite;
}

.header-greeting{
    font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1rem; color:var(--ink);
    display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.greet-name{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.greet-wave{ display:inline-block; animation:wave 2s ease-in-out infinite; transform-origin:70% 70%; }
@keyframes wave{
    0%{ transform:rotate(0); } 10%{ transform:rotate(14deg); }
    20%{ transform:rotate(-8deg); } 30%{ transform:rotate(14deg); }
    40%{ transform:rotate(-4deg); } 50%{ transform:rotate(10deg); }
    60%,100%{ transform:rotate(0); }
}

/* Ticker */
.ticker{
    flex:1; min-width:0; height:32px; border-radius:10px; overflow:hidden; position:relative;
    background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(14,165,233,.04));
    border:1px solid rgba(99,102,241,.1);
}
.ticker::before,.ticker::after{ content:""; position:absolute; top:0; bottom:0; width:28px; z-index:2; pointer-events:none; }
.ticker::before{ left:0;  background:linear-gradient(90deg,#f0f4ff,transparent); }
.ticker::after { right:0; background:linear-gradient(270deg,#f5f3ff,transparent); }
html[data-theme="dark"] .ticker::before{ background:linear-gradient(90deg,#1a2148,transparent); }
html[data-theme="dark"] .ticker::after{ background:linear-gradient(270deg,#1a2148,transparent); }
.ticker-track{ display:flex; align-items:center; height:100%; width:max-content; animation:tickerScroll 60s linear infinite; }
.ticker-track:hover{ animation-play-state:paused; }
@keyframes tickerScroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
.ticker-card{ display:inline-flex; align-items:center; gap:7px; padding:0 20px; height:100%; white-space:nowrap; flex-shrink:0; border-right:1px solid rgba(99,102,241,.08); color:var(--ink-2); font-size:.78rem; }
.ticker-tag{ padding:2px 6px; border-radius:5px; font-size:.55rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.ticker-tag.new   { background:linear-gradient(135deg,var(--emerald),#059669); color:#fff; }
.ticker-tag.update{ background:linear-gradient(135deg,#3b82f6,var(--brand-2));   color:#fff; }
.ticker-tag.hot   { background:linear-gradient(135deg,var(--rose),#dc2626);      color:#fff; }
.ticker-tag.event { background:linear-gradient(135deg,var(--amber),#d97706);     color:#fff; }

/* Header buttons */
.hdr-btn,.sn-icon-btn{
    width:38px; height:38px; border-radius:11px;
    border:1px solid rgba(99,102,241,.12); background:rgba(255,255,255,.75);
    color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s cubic-bezier(.2,.9,.3,1);
}
.hdr-btn:hover,.sn-icon-btn:hover{
    background:#fff; color:var(--brand-2);
    border-color:rgba(99,102,241,.25); transform:translateY(-1px);
    box-shadow:0 4px 14px -4px rgba(99,102,241,.22);
}
html[data-theme="dark"] .hdr-btn,html[data-theme="dark"] .sn-icon-btn{
    background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.12); color:var(--ink);
}
.sn-avatar{
    width:38px; height:38px; border-radius:50%;
    background:var(--grad); color:#fff; font-weight:800; font-size:.78rem;
    display:inline-grid; place-items:center; flex-shrink:0;
    box-shadow:0 4px 14px -4px rgba(99,102,241,.4);
    overflow:hidden;
}
.sn-user-wrap{ position:relative; }
#sn-user-menu .sn-nav-item{ margin:0; }

/* Search input (legacy) */
.sn-search{
    flex:1; display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.75); border:1px solid rgba(99,102,241,.12);
    border-radius:11px; padding:8px 14px; max-width:420px; color:var(--muted);
}
.sn-search input{ background:transparent; border:0; outline:0; color:var(--ink); width:100%; font-size:.88rem; font-family:'Inter',sans-serif; }
html[data-theme="dark"] .sn-search{ background:rgba(255,255,255,.06); }

/* ---------- CONTENT ---------- */
.sn-content,.main-content{ padding:22px; display:flex; flex-direction:column; gap:18px; max-width:1480px; width:100%; margin:0 auto; }
.sn-page-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sn-page-title h1{ margin:0; font-family:'Playfair Display',Georgia,serif; font-size:1.7rem; }
.sn-page-title small{ color:var(--muted); font-size:.82rem; }

/* ---------- HERO ---------- */
.page-hero,.sn-hero{
    position:relative; padding:20px 26px; border-radius:18px; overflow:hidden;
    background:var(--grad); color:#fff;
    display:flex; align-items:center; gap:18px;
    box-shadow:0 20px 40px -20px rgba(99,102,241,0.5);
}
.page-hero h1,.sn-hero h1{ margin:0; color:#fff; }
.page-hero p,.sn-hero p{ margin:0; opacity:.92; font-size:.92rem; }
.page-hero::after,.sn-hero::after{
    content:""; position:absolute; right:-100px; top:-100px; width:280px; height:280px;
    border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%);
}
.page-hero::before,.sn-hero::before{
    content:""; position:absolute; left:-80px; bottom:-80px; width:220px; height:220px;
    border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 60%);
}
.page-hero .actions,.sn-hero .actions{ margin-left:auto; display:flex; gap:10px; z-index:2; position:relative; flex-wrap:wrap; }

/* ---------- KPI ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.kpi{
    background:var(--bg-card); border:1px solid var(--line); border-radius:14px;
    padding:14px 16px; position:relative; overflow:hidden;
    box-shadow:var(--shadow-sm);
}
html[data-theme="dark"] .kpi{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
              background:linear-gradient(180deg,var(--brand-1),var(--brand-3)); }
.kpi .lbl{ font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.kpi .val{ font-family:'Playfair Display',serif; font-weight:800; font-size:1.7rem; color:var(--ink); margin-top:4px; line-height:1.1; }
.kpi .sub{ font-size:.7rem; color:var(--muted); margin-top:4px; }
.kpi .ic{ position:absolute; right:14px; top:14px; width:36px; height:36px; border-radius:10px;
          background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(99,102,241,.10));
          color:var(--brand-2); display:grid; place-items:center; }

/* Legacy .sn-kpi maps to .kpi look */
.sn-kpi{ background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
         position:relative; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:6px; }
html[data-theme="dark"] .sn-kpi{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
.sn-kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
                 background:linear-gradient(180deg,var(--brand-1),var(--brand-3)); }
.sn-kpi .label,.sn-kpi .lbl{ font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sn-kpi .value,.sn-kpi .val{ font-family:'Playfair Display',serif; font-weight:800; font-size:1.7rem; color:var(--ink); line-height:1.1; }
.sn-kpi .delta{ font-size:.7rem; color:var(--muted); }
.sn-kpi .delta.up{ color:var(--emerald); } .sn-kpi .delta.down{ color:var(--rose); }
.sn-kpi .icon{ width:38px; height:38px; border-radius:10px;
               background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(99,102,241,.10));
               color:var(--brand-2); display:grid; place-items:center; }

/* ---------- MODULE TILES ---------- */
.mod-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.mod{
    display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px;
    text-decoration:none; color:#fff; background:var(--grad);
    box-shadow:0 10px 24px -14px rgba(14,165,233,.55);
    transition:all .2s; position:relative; overflow:hidden;
}
.mod::after{ content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px;
             border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%); }
.mod:hover{ transform:translateY(-3px); box-shadow:0 18px 30px -12px rgba(14,165,233,.6); }
.mod .ic{ width:42px; height:42px; border-radius:11px; flex-shrink:0;
          background:rgba(255,255,255,.22); backdrop-filter:blur(8px);
          display:grid; place-items:center; font-size:1.05rem; }
.mod .lbl{ font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.9; }
.mod .v  { font-family:'Playfair Display',serif; font-weight:800; font-size:1.5rem; line-height:1; margin:3px 0; }
.mod .ds { font-size:.72rem; opacity:.88; font-weight:500; }
.mod.m-meetings{ background:linear-gradient(135deg,var(--emerald),#059669); box-shadow:0 10px 24px -14px rgba(16,185,129,.55); }
.mod.m-map     { background:linear-gradient(135deg,#3b82f6,var(--brand-2));  box-shadow:0 10px 24px -14px rgba(37,99,235,.55); }
.mod.m-nests   { background:linear-gradient(135deg,var(--violet),#7c3aed);  box-shadow:0 10px 24px -14px rgba(139,92,246,.55); }
.mod.m-places  { background:linear-gradient(135deg,#ec4899,#db2777);         box-shadow:0 10px 24px -14px rgba(236,72,153,.55); }
.mod.m-alerts  { background:linear-gradient(135deg,var(--amber),#d97706);    box-shadow:0 10px 24px -14px rgba(245,158,11,.55); }
.mod.m-ai      { background:linear-gradient(135deg,#0891b2,#0e7490);          box-shadow:0 10px 24px -14px rgba(8,145,178,.55); }
.mod.m-drive   { background:linear-gradient(135deg,var(--rose),#b91c1c);      box-shadow:0 10px 24px -14px rgba(220,38,38,.55); }
.mod.m-chat    { background:linear-gradient(135deg,#a855f7,#7e22ce);          box-shadow:0 10px 24px -14px rgba(168,85,247,.55); }

/* ---------- CARD ---------- */
.card,.sn-card{
    background:var(--bg-card); border:1px solid var(--line); border-radius:16px; padding:18px;
    display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-sm);
    transition:transform .2s ease, box-shadow .2s ease;
}
html[data-theme="dark"] .card,html[data-theme="dark"] .sn-card{
    background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1);
}
.card:hover,.sn-card:hover{ box-shadow:var(--shadow-md); }
.card h3,.sn-card h3{ margin:0; font-size:1rem; font-weight:800; display:flex; align-items:center; gap:8px; font-family:'Playfair Display',Georgia,serif; }
.card h3 i,.sn-card h3 i{ color:var(--brand-1); }
.card h3 .cnt,.sn-card h3 .cnt{ margin-left:auto; font-size:.68rem; color:var(--muted); font-weight:700;
                                 background:var(--line-soft); padding:3px 8px; border-radius:999px; border:1px solid var(--line); }

/* ---------- GRID ---------- */
.sn-grid{ display:grid; gap:14px; }
.sn-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.sn-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.sn-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:1100px){ .sn-grid.cols-4{ grid-template-columns:repeat(2,1fr); } .sn-grid.cols-3{ grid-template-columns:1fr 1fr; } }
@media(max-width:720px){  .sn-grid.cols-4,.sn-grid.cols-3,.sn-grid.cols-2{ grid-template-columns:1fr; } }

/* ---------- BUTTONS ---------- */
.sn-btn,.btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 16px; border-radius:11px; cursor:pointer;
    border:1px solid var(--line); background:var(--bg-card); color:var(--ink);
    font-weight:600; font-size:.86rem; font-family:'Inter',sans-serif;
    transition:all .18s cubic-bezier(.2,.9,.3,1); text-decoration:none;
    line-height:1;
}
.sn-btn:hover,.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); border-color:var(--brand-2); color:var(--brand-2); }
.sn-btn-primary,.btn-primary{
    border:0; background:var(--grad); color:#fff;
    box-shadow:0 10px 26px -8px rgba(99,102,241,.5);
}
.sn-btn-primary:hover,.btn-primary:hover{ color:#fff; box-shadow:0 14px 32px -8px rgba(99,102,241,.6); }
.sn-btn-danger{
    border:0; background:linear-gradient(135deg,#ff5470,#ff2d55); color:#fff;
    box-shadow:0 10px 26px -8px rgba(255,45,85,.5);
}
.sn-btn-danger:hover{ color:#fff; }

/* ---------- INPUTS ---------- */
.sn-input,input.sn-input,select.sn-input,textarea.sn-input{
    width:100%; padding:11px 14px; border-radius:11px;
    background:var(--bg-card); color:var(--ink);
    border:1px solid var(--line); outline:none; font-size:.88rem; font-family:'Inter',sans-serif;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.sn-input:focus{ border-color:var(--brand-2); box-shadow:0 0 0 4px rgba(99,102,241,.16); }
html[data-theme="dark"] .sn-input{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:var(--ink); }
.sn-label{ font-size:.72rem; color:var(--muted); margin-bottom:6px; display:block; font-weight:600; }

/* ---------- CHIPS ---------- */
.sn-chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:600;
    background:var(--line-soft); color:var(--ink-2); border:1px solid var(--line);
}
.sn-chip.success{ background:rgba(16,185,129,0.12); color:#047857; border-color:rgba(16,185,129,.25); }
.sn-chip.warn   { background:rgba(245,158,11,0.12); color:#b45309; border-color:rgba(245,158,11,.25); }
.sn-chip.danger { background:rgba(239,68,68,0.12);  color:#b91c1c; border-color:rgba(239,68,68,.25); }
html[data-theme="dark"] .sn-chip{ background:rgba(255,255,255,.06); color:var(--ink); border-color:rgba(255,255,255,.12); }

/* ---------- SKELETON ---------- */
.sn-skel{
    background:linear-gradient(90deg,var(--line-soft) 0%,var(--line) 50%,var(--line-soft) 100%);
    background-size:200% 100%; animation:snShimmer 1.2s infinite; border-radius:10px;
}
@keyframes snShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ---------- MAP container ---------- */
.sn-map{
    height:540px; border-radius:var(--radius-md); overflow:hidden;
    border:1px solid var(--line); background:var(--line-soft); position:relative;
}
html[data-theme="dark"] .sn-map{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }

/* ---------- AUTH SCREEN ---------- */
.sn-auth-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px;
    background:linear-gradient(135deg,#f8faff 0%,#f0f4ff 50%,#faf8ff 100%);
}
.sn-auth-card{
    width:100%; max-width:440px; padding:32px;
    background:var(--bg-card); border:1px solid var(--line); border-radius:22px;
    box-shadow:var(--shadow-lg);
}
.sn-auth-card h2{ margin:0 0 4px; font-size:1.6rem; }
.sn-auth-card p.sub{ margin:0 0 22px; color:var(--muted); font-size:.88rem; }
.sn-auth-grid{ display:grid; gap:12px; }
.sn-auth-divider{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.72rem; margin:14px 0; }
.sn-auth-divider::before,.sn-auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.sn-social-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

/* ---------- FADE ---------- */
.sn-fade{ animation:snFade .55s ease both; }
@keyframes snFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- SOS button ---------- */
.sn-sos{
    position:fixed; right:24px; bottom:24px; z-index:80;
    width:64px; height:64px; border-radius:50%;
    background:linear-gradient(135deg,#ff5470,#ff2d55);
    color:#fff; font-weight:800; font-size:18px; border:0; cursor:pointer;
    box-shadow:0 20px 40px rgba(255,45,85,0.55);
    animation:snHeartbeat 1.6s ease-in-out infinite;
}
@keyframes snHeartbeat{
    0%,100%{ transform:scale(1);   box-shadow:0 20px 40px rgba(255,45,85,0.55); }
    50%    { transform:scale(1.07); box-shadow:0 26px 60px rgba(255,45,85,0.75); }
}

/* ---------- BIG NUMBER look (Playfair) ---------- */
.num-display{ font-family:'Playfair Display',serif; font-weight:800; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration:0s !important; animation-iteration-count:1 !important; transition-duration:0s !important;
    }
}