/* Apple-style skin for the Aeon hub. Loaded after the hub's own CSS, so it only restyles; no logic changes. */
:root{
  --bg:#f5f5f7; --surface:#ffffff; --sunk:#f0f0f3; --line:rgba(0,0,0,.08);
  --ink:#1d1d1f; --muted:#6e6e73; --accent:#0071e3; --accent-ink:#ffffff; --accent-soft:rgba(0,113,227,.10);
  --brass:#a2782a; --brass-soft:#f6efe1;
  --good:#1a8f4c; --good-soft:#e5f5ec; --warn:#b25d00; --warn-soft:#fdf1e2; --bad:#d70015; --bad-soft:#fde8ea;
  --f-display:-apple-system,"SF Pro Display","SF Arabic","Vazirmatn",system-ui,sans-serif;
  --f-body:-apple-system,"SF Pro Text","SF Arabic","Vazirmatn",system-ui,"Segoe UI",sans-serif;
  --r:18px;
  --glass:rgba(255,255,255,.72);
  --shadow:0 1px 1px rgba(0,0,0,.02),0 4px 14px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.04);
  --shadow-hover:0 2px 4px rgba(0,0,0,.04),0 12px 28px rgba(0,0,0,.08),0 24px 48px rgba(0,0,0,.06);
  --ease:cubic-bezier(.25,.1,.25,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#000000; --surface:#1c1c1e; --sunk:#2c2c2e; --line:rgba(255,255,255,.10);
  --ink:#f5f5f7; --muted:#a1a1a6; --accent:#2997ff; --accent-ink:#ffffff; --accent-soft:rgba(41,151,255,.16);
  --brass:#e0b766; --brass-soft:#2e2717;
  --good:#30d158; --good-soft:rgba(48,209,88,.14); --warn:#ff9f0a; --warn-soft:rgba(255,159,10,.14); --bad:#ff453a; --bad-soft:rgba(255,69,58,.14);
  --glass:rgba(22,22,23,.72);
  --shadow:0 0 0 1px rgba(255,255,255,.06);
  --shadow-hover:0 0 0 1px rgba(255,255,255,.12),0 16px 40px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#1c1c1e; --sunk:#2c2c2e; --line:rgba(255,255,255,.10);
  --ink:#f5f5f7; --muted:#a1a1a6; --accent:#2997ff; --accent-ink:#ffffff; --accent-soft:rgba(41,151,255,.16);
  --brass:#e0b766; --brass-soft:#2e2717;
  --good:#30d158; --good-soft:rgba(48,209,88,.14); --warn:#ff9f0a; --warn-soft:rgba(255,159,10,.14); --bad:#ff453a; --bad-soft:rgba(255,69,58,.14);
  --glass:rgba(22,22,23,.72);
  --shadow:0 0 0 1px rgba(255,255,255,.06);
  --shadow-hover:0 0 0 1px rgba(255,255,255,.12),0 16px 40px rgba(0,0,0,.5);
}

body{font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em}
.num,.kpi .v,.roi-t td.n,td.n{font-variant-numeric:tabular-nums}

/* ---- glass top bar ---- */
.top{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.top-in{padding-block:12px}
.brand,.top .brand b{letter-spacing:-.02em}

/* ---- sidebar ---- */
.side{background:transparent;border-inline-end:0;padding:20px 12px 40px}
@media (max-width: 900px){.side{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}}
.grp-h{border-radius:12px;padding:10px 12px;font-weight:600;transition:background .2s var(--ease)}
.grp-h:hover{background:var(--accent-soft)}
.tabs .grp-b button{border-radius:10px;padding:8px 12px;font-weight:500;transition:background .2s var(--ease),color .2s var(--ease)}
.tabs .grp-b button:hover{background:var(--sunk)}
.tabs .grp-b button[aria-selected="true"]{background:var(--accent);color:#fff}
.side-scrim{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ---- page headings like apple.com ---- */
main{padding-block:28px 80px}
.section-head{margin-bottom:22px}
.section-head h2{font-family:var(--f-display);font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.panel-h h3,.panel h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.015em}
.crumb{color:var(--muted)}

/* ---- cards and panels ---- */
.panel,.card,.kpi,.status-card,.own-k,.ld-card,.task,.cal-cell{border:0 !important;box-shadow:var(--shadow);border-radius:var(--r)}
.panel,.card,.kpi,.status-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover,.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.panel-h{border-bottom:1px solid var(--line);padding:16px 20px}
.panel-b{padding:16px 20px}
.kpis{gap:16px;margin-bottom:28px}
.kpi{padding:20px 22px;background:var(--surface)}
.kpi .l{font-size:13px;font-weight:500;letter-spacing:0}
.kpi .v{font-family:var(--f-display);font-size:clamp(28px,2.6vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:6px}
.kpi .s{font-size:13px}

/* hero status card on the dashboard */
.status-card{padding:24px 26px;border-inline-start:0 !important;position:relative;overflow:hidden}
.status-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--muted)}
.status-card.st-g0::before{background:linear-gradient(#34c759,#1a8f4c)}
.status-card.st-g1::before{background:linear-gradient(#30d158,#4f9e70)}
.status-card.st-g2::before{background:linear-gradient(#ffd60a,#c9a400)}
.status-card.st-g3::before{background:linear-gradient(#ff9f0a,#c86a2c)}
.status-card.st-g4::before{background:linear-gradient(#ff453a,#b3261e)}
.st-big{font-family:var(--f-display);letter-spacing:-.035em}

/* ---- buttons, chips, inputs ---- */
.btn{border-radius:980px;padding:8px 18px;font-weight:500;border-color:var(--line);transition:background .2s var(--ease),transform .15s var(--ease),border-color .2s}
.btn:hover{border-color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.sm{padding:5px 12px}
.pill,.chip,.gchip{border-radius:980px}
input,select,textarea{border-radius:12px !important;border:1px solid var(--line) !important;background:var(--surface);transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent) !important;box-shadow:0 0 0 4px var(--accent-soft)}

/* ---- tables ---- */
.roi-t,.rules-t{border-collapse:separate;border-spacing:0}
.roi-t th,.rules-t th{font-size:12px;font-weight:600;color:var(--muted);text-transform:none;border-bottom:1px solid var(--line);background:transparent}
.roi-t td,.rules-t td{border-bottom:1px solid var(--line)}
.roi-t tr:last-child td{border-bottom:0}
.roi-t tr.click:hover td{background:var(--accent-soft)}

/* side sheets / overlays */
.overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet,.drawer{border-radius:22px 0 0 22px;box-shadow:0 30px 80px rgba(0,0,0,.25)}

/* ---- motion: views glide in when you switch sections ---- */
@keyframes aeonUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.aeon-enter > *{animation:aeonUp .6s var(--ease) both}
.aeon-enter > *:nth-child(2){animation-delay:.06s}
.aeon-enter > *:nth-child(3){animation-delay:.12s}
.aeon-enter > *:nth-child(4){animation-delay:.18s}
.aeon-enter > *:nth-child(5){animation-delay:.24s}
.aeon-enter > *:nth-child(n+6){animation-delay:.3s}
.aeon-enter .kpis > *{animation:aeonUp .6s var(--ease) both}
.aeon-enter .kpis > *:nth-child(2){animation-delay:.08s}
.aeon-enter .kpis > *:nth-child(3){animation-delay:.16s}
.aeon-enter .kpis > *:nth-child(4){animation-delay:.24s}
.aeon-enter .kpis > *:nth-child(5){animation-delay:.32s}
@media (prefers-reduced-motion: reduce){.aeon-enter > *,.aeon-enter .kpis > *{animation:none}.card:hover,.kpi:hover{transform:none}}

/* small bottom bar added by the website */
#aeon-site-bar a{border-radius:980px !important;background:var(--glass) !important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--line) !important;padding:7px 14px !important}
.sheet-h{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.sheet-h h2{font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:-.02em}
@keyframes aeonSheet{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
[dir="ltr"] .sheet{border-radius:0 22px 22px 0}
.overlay .sheet{animation:aeonSheet .45s var(--ease) both}
.overlay.center > *{border-radius:22px;animation:aeonUp .4s var(--ease) both}

/* ================= v3: more life ================= */
/* white by default in this look */
:root[data-theme="light"]{color-scheme:light}

/* top bar gets a soft shadow once you scroll */
.top{transition:box-shadow .3s var(--ease),background .3s var(--ease)}
body.aeon-scrolled .top{box-shadow:0 1px 0 var(--line),0 8px 30px rgba(0,0,0,.06)}

/* big title: blur-in */
@keyframes aeonTitle{from{opacity:0;filter:blur(8px);transform:translateY(10px) scale(.98)}to{opacity:1;filter:none;transform:none}}
.aeon-enter .section-head h2{animation:aeonTitle .8s var(--ease) both}

/* scroll reveal: things below the fold rise in as you scroll */
.rv{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.rv-in{opacity:1;transform:none}

/* bars grow from zero */
@keyframes aeonGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.aeon-grow{animation:aeonGrow 1s cubic-bezier(.16,1,.3,1) both;transform-origin:right center}
[dir="ltr"] .aeon-grow,html[dir="ltr"] .aeon-grow{transform-origin:left center}

/* spotlight that follows the mouse on cards */
.kpi,.card,.panel,.status-card{--mx:50%;--my:50%;--spot:rgba(0,113,227,.07)}
:root[data-theme="dark"] .kpi,:root[data-theme="dark"] .card,:root[data-theme="dark"] .panel,:root[data-theme="dark"] .status-card{--spot:rgba(41,151,255,.12)}
.aeon-spot{background-image:radial-gradient(420px circle at var(--mx) var(--my),var(--spot),transparent 45%)}
.kpi:hover{transform:translateY(-4px) scale(1.012)}

/* living glow behind the status card, coloured by the grade */
.status-card{isolation:isolate}
.status-card::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;inset-inline-end:-160px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,var(--glow,rgba(0,113,227,.18)),transparent 65%);animation:aeonGlow 7s ease-in-out infinite alternate;pointer-events:none}
.status-card.st-g0,.status-card.st-g1{--glow:rgba(52,199,89,.22)}
.status-card.st-g2{--glow:rgba(255,214,10,.22)}
.status-card.st-g3{--glow:rgba(255,159,10,.22)}
.status-card.st-g4{--glow:rgba(255,69,58,.22)}
@keyframes aeonGlow{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.15)}100%{transform:translate(20px,60px) scale(.95)}}

/* score word shimmer */
.status-card .st-big{background:linear-gradient(100deg,currentColor 40%,rgba(255,255,255,.85) 50%,currentColor 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;animation:aeonShine 4.5s ease-in-out infinite}
@keyframes aeonShine{0%,60%{background-position:100% 0}100%{background-position:-50% 0}}
.status-card .st-big *{-webkit-text-fill-color:currentColor}
.status-card .st-big{-webkit-text-fill-color:transparent}

/* numbers that just changed flash softly */
@keyframes aeonPing{0%{color:var(--accent)}100%{color:inherit}}
.aeon-changed{animation:aeonPing 1.4s var(--ease)}

/* active menu item: springy */
.tabs .grp-b button[aria-selected="true"]{box-shadow:0 6px 16px rgba(0,113,227,.28);transform:scale(1.02)}
.tabs .grp-b button{transition:background .25s var(--ease),color .25s var(--ease),transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}

/* live dot breathes */
#conn-dot.on{animation:aeonBreathe 2.4s ease-in-out infinite}
@keyframes aeonBreathe{0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}50%{box-shadow:0 0 0 6px rgba(52,199,89,0)}}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}.aeon-grow,.status-card::after,.status-card .st-big,#conn-dot.on,.aeon-changed{animation:none}
}

/* ================= v4: always white + AEON logo ================= */
.brand{font-size:0 !important;gap:14px !important;align-items:center !important}
.brand .aeon-logo{display:inline-flex;align-items:center;line-height:0}
.brand .aeon-logo img{height:34px;width:auto;display:block;transition:opacity .2s}
.brand .aeon-logo:hover img{opacity:.7}
.brand small{font-size:12px !important;font-weight:500;color:var(--muted);padding-inline-start:14px;border-inline-start:1px solid var(--line);line-height:1.6}
@media (max-width:600px){.brand .aeon-logo img{height:28px}.brand small{display:none}}
.aeon-studio-link{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;font-weight:500;font-size:13.5px;color:var(--muted);text-decoration:none;transition:background .2s}
.aeon-studio-link::after{content:"✦";font-size:11px;color:var(--accent)}
.aeon-studio-link:hover{background:var(--sunk);color:var(--ink)}

/* ================= v6: organised sidebar + dashboard sections ================= */
.side{display:flex;flex-direction:column}
.tabs{flex:1;display:flex;flex-direction:column}
.side-foot{margin-top:auto;padding:18px 10px 6px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.side-foot a{padding:8px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:13.5px;transition:background .2s}
.side-foot a:hover{background:var(--sunk);color:var(--ink)}
.aeon-studio-link.calls::after{content:"☎︎";color:#34c759;font-size:12px}
.dash-sec{font-family:var(--f-display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:30px 2px 12px;display:flex;align-items:center;gap:10px}
.dash-sec::after{content:"";flex:1;height:1px;background:var(--line)}
.calls-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;text-decoration:none;color:var(--ink);background:linear-gradient(135deg,#ffffff,#eefaf2) !important}
.calls-card div{display:flex;flex-direction:column;gap:3px}.calls-card b{font-size:16px}.calls-card span{font-size:13px;color:var(--muted)}
.calls-card .btn{color:#fff !important;background:#34c759 !important;border-color:#34c759 !important}
.calls-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}

/* ================= v7: one date range for the whole hub ================= */
.gr{position:relative}
.gr-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:980px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink);transition:all .25s var(--ease)}
.gr-btn:hover{border-color:var(--ink)}.gr-btn.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(0,113,227,.25)}
.gr-pop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:60;width:min(420px,92vw);background:var(--surface);border-radius:18px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.18),0 0 0 1px var(--line);animation:aeonUp .3s var(--ease)}
.gr-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.gr-presets button{border:1px solid var(--line);background:var(--surface);border-radius:980px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.gr-presets button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.gr-custom{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}.gr-custom label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.gr-custom input{width:auto !important;padding:7px 10px}
.gr-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.gr-foot .hint{font-size:12px}