/* ═══════════════════════════════════════════════════════════════════════════
   FIFTH FLEET — الأسطول الخامس
   Brand colors from logo: deep purple, vibrant orange, magenta accent
   Design language: layered depth, soft 3D, professional dark interface
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ─── Base surfaces (warm purple-black instead of navy) ─── */
  --bg:#0a0414;
  --s1:#13091e;
  --s2:#1a0e2a;
  --s3:#22143a;
  --s4:#2c1a4a;
  --border:#33215a;
  --b2:#432a76;

  /* ─── Brand accents (from logo) ─── */
  --a1:#6B3FE0;        /* primary purple */
  --a1d:#5128c9;       /* darker purple — for gradients */
  --a1l:#8a64ee;       /* lighter purple — highlights */
  --a2:#FF7A1A;        /* logo orange */
  --a2d:#e25c00;       /* deeper orange */
  --a2l:#ff9a4a;       /* lighter orange */
  --a3:#22c55e;        /* success green (kept) */
  --a4:#ef4444;        /* danger red (kept) */
  --a5:#f59e0b;        /* warning amber */
  --a6:#C44CE8;        /* magenta highlight (from logo subtitle) */
  --a7:#06b6d4;        /* cyan (kept, used sparingly) */

  /* ─── Text scale (warm tinted whites) ─── */
  --text:#f1e6ff;
  --t2:#b9a8d8;
  --t3:#8775a8;
  --t4:#5a4d75;

  /* ─── Role colors ─── */
  --mgr:#fbbf24;
  --sup:#A78BFA;
  --vis:#86efac;

  /* ─── Shadows (3D depth layers) ─── */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 4px 6px rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02);
  --shadow-lg:0 12px 28px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-xl:0 24px 80px rgba(0,0,0,.65), 0 8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  --glow-purple:0 0 24px rgba(107,63,224,.4), 0 0 6px rgba(107,63,224,.6);
  --glow-orange:0 0 24px rgba(255,122,26,.4), 0 0 6px rgba(255,122,26,.6);

  /* ─── Brand gradients ─── */
  --grad-brand:linear-gradient(135deg,#6B3FE0 0%,#9B4DD8 45%,#FF7A1A 100%);
  --grad-purple:linear-gradient(135deg,#6B3FE0 0%,#3B1B8A 100%);
  --grad-orange:linear-gradient(135deg,#FF9A4A 0%,#FF7A1A 50%,#e25c00 100%);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{font-family:'Cairo',sans-serif;color:var(--text);min-height:100vh;direction:rtl;}
body{
  background:var(--bg);
  background-image:
    radial-gradient(circle at 12% -8%, rgba(107,63,224,.18) 0%, transparent 35%),
    radial-gradient(circle at 92% 105%, rgba(255,122,26,.13) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(196,76,232,.05) 0%, transparent 60%);
  background-attachment:fixed;
}
body.en{direction:ltr;}

/* ─── Animations ─── */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes slideIn{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes float3d{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(.5deg)}}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar{
  height:62px;
  background:linear-gradient(180deg, rgba(26,14,42,.95) 0%, rgba(19,9,30,.95) 100%);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(107,63,224,.18);
  display:flex;align-items:center;padding:0 22px;gap:12px;
  position:sticky;top:0;z-index:200;
  box-shadow:0 2px 24px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.02);
}
.tb-logo{display:flex;align-items:center;gap:11px;margin-left:auto;}
body.en .tb-logo{margin-left:0;margin-right:auto;}
.tb-icon{
  width:42px;height:42px;border-radius:11px;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
  border:1px solid rgba(107,63,224,.4);
  box-shadow:
    0 6px 14px rgba(107,63,224,.35),
    0 2px 4px rgba(255,122,26,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .2s, box-shadow .2s;
}
.tb-icon img{width:100%;height:100%;object-fit:contain;}
.tb-icon:hover{transform:translateY(-1px) scale(1.04);box-shadow:0 8px 20px rgba(107,63,224,.5),0 3px 8px rgba(255,122,26,.3),inset 0 1px 0 rgba(255,255,255,.12);}
.tb-title{font-size:.92rem;font-weight:900;letter-spacing:.01em;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.15;}
.tb-title small{display:block;font-size:.6rem;font-weight:600;color:var(--t3);margin-top:0;background:none;-webkit-text-fill-color:var(--t3);}
.tb-spacer{flex:1;}
.tb-lang{display:flex;gap:3px;background:var(--s2);padding:3px;border-radius:9px;border:1px solid var(--border);}
.tlb{padding:5px 10px;border-radius:7px;border:none;background:transparent;
  color:var(--t2);cursor:pointer;font-size:.72rem;font-family:'Cairo',sans-serif;font-weight:700;transition:all .18s;}
.tlb.act{background:var(--grad-purple);color:#fff;box-shadow:0 2px 6px rgba(107,63,224,.4), inset 0 1px 0 rgba(255,255,255,.15);}
.tlb:hover:not(.act){color:var(--text);}

.role-badge{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;font-size:.72rem;font-weight:700;border:1px solid;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.role-badge.mgr{background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(251,191,36,.08));border-color:rgba(251,191,36,.4);color:var(--mgr);}
.role-badge.sup{background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(167,139,250,.08));border-color:rgba(167,139,250,.4);color:var(--sup);}
.role-badge.vis{background:linear-gradient(135deg,rgba(134,239,172,.15),rgba(134,239,172,.07));border-color:rgba(134,239,172,.35);color:var(--vis);}

#tb-user{font-size:.8rem;font-weight:700;color:var(--t2);}
.tb-btn{
  padding:7px 14px;border-radius:9px;border:1px solid var(--b2);
  background:linear-gradient(180deg,var(--s3),var(--s2));
  color:var(--t2);cursor:pointer;font-size:.78rem;font-family:'Cairo',sans-serif;font-weight:600;transition:all .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
}
.tb-btn:hover{border-color:var(--a1);color:var(--a1l);transform:translateY(-1px);box-shadow:0 3px 8px rgba(107,63,224,.25),inset 0 1px 0 rgba(255,255,255,.05);}
#btn-login{background:linear-gradient(135deg,rgba(107,63,224,.22),rgba(196,76,232,.18));border-color:rgba(107,63,224,.5);color:var(--a1l);font-weight:700;}
#btn-login:hover{background:linear-gradient(135deg,rgba(107,63,224,.32),rgba(196,76,232,.26));}

.tb-pulse{width:8px;height:8px;border-radius:50%;background:var(--a3);box-shadow:0 0 8px var(--a3), 0 0 2px var(--a3);animation:pulse 2s infinite;flex-shrink:0;}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.layout{display:flex;min-height:calc(100vh - 62px);}

/* ─── SIDEBAR ─── */
.sidebar{
  width:218px;
  background:linear-gradient(180deg, rgba(19,9,30,.92) 0%, rgba(10,4,20,.92) 100%);
  backdrop-filter:blur(8px);
  border-left:1px solid rgba(107,63,224,.15);
  position:sticky;top:62px;height:calc(100vh - 62px);
  overflow-y:auto;padding:14px 0;flex-shrink:0;
  transition:right .3s ease, left .3s ease;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.02);
}
body.en .sidebar{border-left:none;border-right:1px solid rgba(107,63,224,.15);}
.sg-label{
  font-size:.6rem;font-weight:800;color:var(--t4);
  padding:0 18px;margin:18px 0 6px;letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.sg-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent);}
body.en .sg-label::after{background:linear-gradient(-90deg,var(--border),transparent);}

.si{
  display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;
  color:var(--t2);font-size:.84rem;font-weight:600;transition:all .2s;
  border-right:3px solid transparent;
  position:relative;
}
body.en .si{border-right:none;border-left:3px solid transparent;}
.si:hover{color:var(--text);background:linear-gradient(90deg,rgba(107,63,224,.08),transparent);}
body.en .si:hover{background:linear-gradient(-90deg,rgba(107,63,224,.08),transparent);}
.si.act{
  color:var(--a1l);
  background:linear-gradient(90deg,rgba(107,63,224,.22),rgba(107,63,224,.04));
  border-right-color:var(--a1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset -3px 0 12px rgba(107,63,224,.15);
}
body.en .si.act{
  background:linear-gradient(-90deg,rgba(107,63,224,.22),rgba(107,63,224,.04));
  border-right-color:transparent;border-left-color:var(--a1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 3px 0 12px rgba(107,63,224,.15);
}
.si.locked{opacity:.35;cursor:not-allowed;}
.si-icon{font-size:.95rem;min-width:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}

/* ─── CONTENT ─── */
.content{flex:1;padding:24px;overflow-y:auto;max-height:calc(100vh - 62px);}
.page{display:block;animation:fadeIn .35s ease;}
.page.act{display:block;}

/* ─── PAGE HEADER ─── */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
.ph h2{font-size:1.32rem;font-weight:900;letter-spacing:-.01em;}
.ph p{font-size:.78rem;color:var(--t3);margin-top:3px;}
.ph-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS (3D depth)
   ═══════════════════════════════════════════════════════════════════════════ */
.card{
  background:linear-gradient(180deg, var(--s2) 0%, var(--s1) 100%);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;margin-bottom:16px;
  box-shadow:var(--shadow-md);
  position:relative;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  border-radius:14px 14px 0 0;pointer-events:none;
}
.card-h{
  font-size:.88rem;font-weight:800;display:flex;align-items:center;gap:7px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--border);
  color:var(--text);
}

/* ─── GRIDS ─── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px;}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px;}
@media(max-width:1100px){.g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   STATS (3D feel with colored glow)
   ═══════════════════════════════════════════════════════════════════════════ */
.stat{
  background:linear-gradient(180deg, var(--s3) 0%, var(--s2) 100%);
  border:1px solid var(--border);
  border-radius:12px;padding:15px;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:transform .25s ease, box-shadow .25s ease;
}
.stat::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(255,255,255,.04), transparent 50%);
  pointer-events:none;border-radius:12px;
}
.stat::after{
  content:'';position:absolute;bottom:0;left:10%;right:10%;height:2px;
  background:currentColor;opacity:.15;filter:blur(6px);
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.stat-val{font-size:1.85rem;font-weight:900;line-height:1;letter-spacing:-.02em;}
.stat-lbl{font-size:.74rem;color:var(--t2);margin-top:5px;font-weight:600;}
.stat-sub{font-size:.66rem;color:var(--t3);margin-top:2px;}
.s-bl{color:var(--a1l)}.s-bl .stat-val{color:var(--a1l)}
.s-gr{color:var(--a3)}.s-gr .stat-val{color:var(--a3)}
.s-rd{color:var(--a4)}.s-rd .stat-val{color:var(--a4)}
.s-yl{color:var(--a5)}.s-yl .stat-val{color:var(--a5)}
.s-or{color:var(--a2)}.s-or .stat-val{color:var(--a2l)}
.s-cy{color:var(--a7)}.s-cy .stat-val{color:var(--a7)}

/* ─── CHART BOXES ─── */
.chbox{
  background:linear-gradient(180deg, var(--s2) 0%, var(--s1) 100%);
  border:1px solid var(--border);border-radius:13px;padding:16px;
  box-shadow:var(--shadow-md);position:relative;
}
.chbox::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  border-radius:13px 13px 0 0;pointer-events:none;
}
.ch-title{font-size:.82rem;font-weight:700;color:var(--t2);margin-bottom:11px;display:flex;align-items:center;gap:7px;}
.ch-wrap{position:relative;width:100%;}
.ch-sm{height:200px;}.ch-md{height:260px;}.ch-lg{height:320px;}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS (raised, gradient, 3D)
   ═══════════════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9px;
  border:none;font-family:'Cairo',sans-serif;font-size:.81rem;font-weight:700;
  cursor:pointer;transition:all .2s;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
  position:relative;letter-spacing:.01em;
}
.btn:active{transform:translateY(1px);}
.btn-p{background:var(--grad-purple);color:#fff;box-shadow:0 4px 10px rgba(107,63,224,.35), inset 0 1px 0 rgba(255,255,255,.18);}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(107,63,224,.5), inset 0 1px 0 rgba(255,255,255,.22);}
.btn-s{background:linear-gradient(180deg,#34d176,#22c55e);color:#06280f;box-shadow:0 4px 10px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.25);}
.btn-s:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(34,197,94,.5);}
.btn-d{background:linear-gradient(180deg,#f87171,#ef4444);color:#fff;box-shadow:0 4px 10px rgba(239,68,68,.35), inset 0 1px 0 rgba(255,255,255,.18);}
.btn-d:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(239,68,68,.5);}
.btn-g{background:linear-gradient(180deg,var(--s3),var(--s2));border:1px solid var(--b2);color:var(--t2);box-shadow:0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);}
.btn-g:hover{border-color:var(--a1);color:var(--a1l);transform:translateY(-1px);box-shadow:0 4px 10px rgba(107,63,224,.18), inset 0 1px 0 rgba(255,255,255,.06);}
.btn-o{background:var(--grad-orange);color:#fff;box-shadow:0 4px 10px rgba(255,122,26,.4), inset 0 1px 0 rgba(255,255,255,.22);}
.btn-o:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,122,26,.55);}
.btn-sm{padding:6px 11px;font-size:.74rem;}
.btn-xs{padding:4px 8px;font-size:.68rem;}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:0 1px 2px rgba(0,0,0,.3)!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════════ */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fgf{grid-column:1/-1;}
.fld{display:flex;flex-direction:column;gap:5px;}
.fld label{font-size:.74rem;font-weight:700;color:var(--t2);}
.fld input,.fld select,.fld textarea{
  background:linear-gradient(180deg, var(--s3), rgba(34,20,58,.85));
  border:1px solid var(--b2);border-radius:9px;
  padding:9px 12px;color:var(--text);font-family:'Cairo',sans-serif;font-size:.84rem;
  transition:border-color .2s, box-shadow .2s;direction:inherit;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--a1);
  box-shadow:0 0 0 3px rgba(107,63,224,.15), inset 0 1px 2px rgba(0,0,0,.25);
}
.fld select option{background:var(--s2);}
.fld textarea{resize:vertical;min-height:65px;}

/* ─── TABLES ─── */
.tw{overflow-x:auto;border-radius:11px;border:1px solid var(--border);box-shadow:var(--shadow-md);}
table{width:100%;border-collapse:collapse;font-size:.81rem;background:var(--s1);}
thead th{
  background:linear-gradient(180deg, var(--s3), var(--s2));
  padding:10px 12px;text-align:right;color:var(--t2);
  font-size:.73rem;font-weight:800;white-space:nowrap;letter-spacing:.02em;
  border-bottom:1px solid var(--border);
}
body.en thead th{text-align:left;}
tbody td{padding:9px 12px;border-bottom:1px solid rgba(51,33,90,.4);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background .15s;}
tbody tr:hover td{background:rgba(107,63,224,.06);}

/* ─── BADGES ─── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;font-size:.68rem;font-weight:700;letter-spacing:.01em;}
.b-gr{background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,197,94,.08));color:#4ade80;border:1px solid rgba(34,197,94,.25);}
.b-rd{background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(239,68,68,.08));color:#f87171;border:1px solid rgba(239,68,68,.25);}
.b-yl{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(245,158,11,.08));color:#fbbf24;border:1px solid rgba(245,158,11,.25);}
.b-bl{background:linear-gradient(135deg,rgba(107,63,224,.2),rgba(107,63,224,.1));color:var(--a1l);border:1px solid rgba(107,63,224,.3);}
.b-gy{background:rgba(122,111,150,.16);color:var(--t3);border:1px solid rgba(122,111,150,.18);}
.b-or{background:linear-gradient(135deg,rgba(255,122,26,.2),rgba(255,122,26,.08));color:var(--a2l);border:1px solid rgba(255,122,26,.3);}
.b-cy{background:rgba(6,182,212,.13);color:var(--a7);border:1px solid rgba(6,182,212,.22);}
.b-pu{background:linear-gradient(135deg,rgba(196,76,232,.2),rgba(196,76,232,.08));color:var(--a6);border:1px solid rgba(196,76,232,.3);}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL (glass + 3D)
   ═══════════════════════════════════════════════════════════════════════════ */
.ov{
  position:fixed;inset:0;
  background:radial-gradient(circle at center, rgba(10,4,20,.7) 0%, rgba(0,0,0,.85) 100%);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  z-index:800;display:none;align-items:center;justify-content:center;padding:16px;
}
.ov.open{display:flex;}
.modal{
  background:linear-gradient(180deg, var(--s2) 0%, var(--s1) 100%);
  border:1px solid var(--b2);
  border-radius:17px;
  width:100%;max-width:620px;max-height:92vh;overflow-y:auto;
  box-shadow:var(--shadow-xl), 0 0 60px rgba(107,63,224,.15);
  animation:slideIn .28s ease;
  position:relative;
}
.modal::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  border-radius:17px 17px 0 0;pointer-events:none;
}
.modal-xl{max-width:940px;}
.modal-sm{max-width:440px;}
.mh{
  padding:18px 22px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg, rgba(107,63,224,.12), rgba(196,76,232,.06), transparent);
  border-radius:17px 17px 0 0;
}
.mh-t{font-size:.96rem;font-weight:800;}
.mb{padding:20px 22px;}
.mf{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:9px;justify-content:flex-end;background:rgba(10,4,20,.4);border-radius:0 0 17px 17px;}
.mx{
  background:var(--s3);border:1px solid var(--border);border-radius:8px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.9rem;color:var(--t2);transition:all .18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.mx:hover{background:rgba(239,68,68,.22);color:#f87171;border-color:rgba(239,68,68,.4);}

/* ─── TOAST ─── */
#toast-container{position:fixed;bottom:20px;left:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
body.en #toast-container{left:auto;right:20px;}
.toast{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg, var(--s2), var(--s1));
  border:1px solid var(--b2);
  border-radius:11px;padding:12px 16px;font-size:.82rem;font-weight:600;
  box-shadow:var(--shadow-lg);
  animation:fadeIn .3s ease;min-width:230px;
}
.toast.t-gr{border-color:rgba(34,197,94,.45);box-shadow:var(--shadow-lg), 0 0 20px rgba(34,197,94,.18);}
.toast.t-rd{border-color:rgba(239,68,68,.45);box-shadow:var(--shadow-lg), 0 0 20px rgba(239,68,68,.18);}
.toast.t-bl{border-color:rgba(107,63,224,.45);box-shadow:var(--shadow-lg), 0 0 20px rgba(107,63,224,.18);}
.toast.t-or{border-color:rgba(255,122,26,.45);box-shadow:var(--shadow-lg), 0 0 20px rgba(255,122,26,.18);}

/* ─── PROGRESS BAR ─── */
.pb{height:5px;background:rgba(0,0,0,.4);border-radius:3px;overflow:hidden;margin-top:4px;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);}
.pb-f{height:100%;border-radius:3px;transition:width .6s ease;box-shadow:0 0 8px currentColor;}

/* ─── TIMELINE ─── */
.tl{position:relative;padding-right:16px;}
body.en .tl{padding-right:0;padding-left:16px;}
.tl::before{content:'';position:absolute;right:4px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--a1),var(--border),transparent);}
body.en .tl::before{right:auto;left:4px;}
.tli{position:relative;margin-bottom:12px;padding-right:16px;}
body.en .tli{padding-right:0;padding-left:16px;}
.tl-dot{position:absolute;right:-12px;top:5px;width:11px;height:11px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 8px currentColor;}
body.en .tl-dot{right:auto;left:-12px;}
.tl-card{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--border);border-radius:10px;padding:11px 13px;box-shadow:var(--shadow-sm);}

/* ─── RIDER CARD ─── */
.rcard{
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--border);border-radius:11px;
  padding:13px 15px;display:flex;align-items:center;gap:12px;
  margin-bottom:8px;transition:all .22s;
  box-shadow:var(--shadow-sm);
}
.rcard:hover{border-color:var(--a1);transform:translateX(-2px);box-shadow:var(--shadow-md), 0 0 20px rgba(107,63,224,.12);}
body.en .rcard:hover{transform:translateX(2px);}
.ravatar{
  width:40px;height:40px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:1.05rem;font-weight:900;flex-shrink:0;
  background:linear-gradient(135deg, rgba(107,63,224,.25), rgba(196,76,232,.18));
  color:var(--a1l);border:1.5px solid rgba(107,63,224,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 2px 4px rgba(0,0,0,.3);
}
.rinfo{flex:1;min-width:0;}
.rname{font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rmeta{font-size:.71rem;color:var(--t3);display:flex;gap:8px;flex-wrap:wrap;margin-top:3px;}

/* ─── DAILY CALENDAR ─── */
.cal-section{margin-bottom:20px;}
.cal-section-title{font-size:.9rem;font-weight:800;color:var(--text);margin-bottom:7px;display:flex;align-items:center;gap:8px;}
.cal-month-selector{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px;}
.cal-month-btn{
  padding:6px 14px;border-radius:18px;font-size:.73rem;font-weight:700;cursor:pointer;
  border:1px solid var(--border);color:var(--t2);
  background:linear-gradient(180deg,var(--s3),var(--s2));transition:all .18s;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.cal-month-btn.act{background:var(--grad-purple);color:#fff;border-color:transparent;box-shadow:0 3px 8px rgba(107,63,224,.35),inset 0 1px 0 rgba(255,255,255,.15);}
.cal-month-btn:hover:not(.act){border-color:var(--a1);color:var(--a1l);}
.cal-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;direction:rtl;}
.cal-day{
  border-radius:10px;padding:9px 6px;text-align:center;cursor:pointer;
  transition:all .2s;border:1px solid transparent;position:relative;
  min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.cal-day:hover{transform:scale(1.08);z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);}
.cal-day-num{font-size:.62rem;color:rgba(255,255,255,.5);font-weight:600;}
.cal-day-orders{font-size:1.05rem;font-weight:900;}
.cal-day-time{font-size:.58rem;color:rgba(255,255,255,.45);margin-top:1px;}
.cd-great{background:linear-gradient(145deg,#0d3b25,#0f4a2e);border-color:#22c55e40;}
.cd-great .cal-day-orders{color:#4ade80;}
.cd-good{background:linear-gradient(145deg,#3a3415,#4a3a18);border-color:#f59e0b40;}
.cd-good .cal-day-orders{color:#fbbf24;}
.cd-low{background:linear-gradient(145deg,#3b1a0a,#4a200d);border-color:#FF7A1A40;}
.cd-low .cal-day-orders{color:#fb923c;}
.cd-poor{background:linear-gradient(145deg,#2d0d0d,#3d1010);border-color:#ef444440;}
.cd-poor .cal-day-orders{color:#f87171;}
.cd-absent{background:linear-gradient(145deg,#1a1422,#221a2c);border-color:#33333380;}
.cd-absent .cal-day-orders{color:#6a5d80;}
.cd-off{background:rgba(19,9,30,.5);border-color:transparent;}
.cd-off .cal-day-orders{color:var(--t4);}
.cd-today{border-color:var(--a1)!important;box-shadow:0 0 0 2px rgba(107,63,224,.4), 0 0 16px rgba(107,63,224,.3)!important;}

.cal-tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--s1);border:1px solid var(--b2);border-radius:9px;
  padding:9px 13px;font-size:.72rem;min-width:130px;z-index:100;
  box-shadow:var(--shadow-lg);pointer-events:none;white-space:nowrap;
  display:none;direction:rtl;
}
.cal-day:hover .cal-tooltip{display:block;}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;margin-bottom:2px;}
.cl-item{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--t2);}
.cl-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}

/* ─── EMPLOYEE PHOTO ─── */
.emp-photo-modal{
  width:88px;height:100px;border-radius:13px;overflow:hidden;
  background:var(--s3);border:2px solid var(--b2);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;cursor:pointer;position:relative;flex-shrink:0;
  transition:all .2s;box-shadow:var(--shadow-md);
}
.emp-photo-modal:hover{border-color:var(--a1);}
.emp-photo-modal img{width:100%;height:100%;object-fit:cover;}
.emp-photo-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;font-size:.65rem;color:#fff;font-weight:700;gap:3px;
}
.emp-photo-modal:hover .emp-photo-overlay{opacity:1;}
.ph-cam{font-size:1.3rem;}
.emp-photo{width:40px;height:40px;border-radius:10px;object-fit:cover;border:1.5px solid var(--border);flex-shrink:0;}
.emp-photo-lg{width:80px;height:80px;border-radius:15px;object-fit:cover;border:2px solid var(--b2);box-shadow:var(--shadow-md);}
.emp-avatar-wrap{position:relative;width:40px;height:40px;flex-shrink:0;}
.emp-avatar-lg-wrap{position:relative;width:80px;height:80px;flex-shrink:0;}
.modal-photo{width:88px;height:100px;border-radius:13px;object-fit:cover;border:2px solid var(--b2);box-shadow:var(--shadow-md);}

/* ─── PLATFORM BADGES ─── */
.platform-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-size:.68rem;font-weight:700;}
.plat-hs{background:rgba(255,209,0,.14);color:#FFD100;border:1px solid rgba(255,209,0,.22);}
.plat-kt{background:rgba(0,181,164,.14);color:#00B5A4;border:1px solid rgba(0,181,164,.22);}
.plat-jz{background:rgba(227,6,19,.13);color:#ff5a6e;border:1px solid rgba(227,6,19,.22);}
.plat-logo{width:14px;height:14px;object-fit:contain;vertical-align:middle;border-radius:3px;}
.plat-none{background:rgba(122,111,150,.12);color:var(--t3);}

/* ─── DEPT TAG ─── */
.dept-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-size:.68rem;font-weight:700;background:linear-gradient(135deg,rgba(196,76,232,.2),rgba(196,76,232,.08));color:var(--a6);border:1px solid rgba(196,76,232,.25);}

/* ─── UPLOAD ZONE ─── */
.uz{
  border:2px dashed var(--b2);border-radius:12px;padding:30px 18px;text-align:center;
  cursor:pointer;transition:all .25s;
  background:linear-gradient(180deg,var(--s2),var(--s1));
}
.uz:hover,.uz.drag{border-color:var(--a1);background:linear-gradient(180deg,rgba(107,63,224,.08),rgba(107,63,224,.03));box-shadow:inset 0 0 30px rgba(107,63,224,.08);}
.uz-icon{font-size:2.2rem;margin-bottom:8px;}
.uz-title{font-size:.9rem;font-weight:700;margin-bottom:5px;}
.uz-sub{font-size:.72rem;color:var(--t3);}

/* ─── TABS ─── */
.tabs{
  display:flex;gap:3px;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  padding:4px;border-radius:10px;
  border:1px solid var(--border);margin-bottom:15px;width:fit-content;flex-wrap:wrap;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.tab{padding:7px 14px;border-radius:7px;font-size:.79rem;font-weight:700;cursor:pointer;
  color:var(--t2);border:none;background:none;font-family:'Cairo',sans-serif;transition:all .2s;}
.tab.act{background:var(--grad-purple);color:#fff;box-shadow:0 2px 6px rgba(107,63,224,.4), inset 0 1px 0 rgba(255,255,255,.18);}
.tab:hover:not(.act){color:var(--text);background:rgba(107,63,224,.08);}

/* ─── MONTH CHIPS ─── */
.mchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:17px;}
.mchip{
  padding:7px 15px;border-radius:20px;font-size:.77rem;font-weight:700;cursor:pointer;
  border:1px solid var(--border);color:var(--t2);
  background:linear-gradient(180deg,var(--s3),var(--s2));transition:all .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.mchip.act{background:var(--grad-purple);color:#fff;border-color:transparent;box-shadow:0 3px 8px rgba(107,63,224,.4),inset 0 1px 0 rgba(255,255,255,.18);}
.mchip:hover:not(.act){border-color:var(--a1);color:var(--a1l);transform:translateY(-1px);}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:rgba(10,4,20,.5);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--a1d),var(--border));border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--a1);}

/* ─── LOGIN MODAL ROLE PICKER ─── */
.lm-role{
  flex:1;text-align:center;padding:14px 10px;border-radius:11px;
  border:2px solid var(--border);cursor:pointer;transition:all .25s;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  box-shadow:var(--shadow-sm);
}
.lm-role:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.lm-role.sel-mgr{border-color:rgba(251,191,36,.55);background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(251,191,36,.03));box-shadow:0 4px 14px rgba(251,191,36,.18);}
.lm-role.sel-sup{border-color:rgba(107,63,224,.55);background:linear-gradient(135deg,rgba(107,63,224,.12),rgba(196,76,232,.04));box-shadow:0 4px 14px rgba(107,63,224,.22);}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
.hamburger{
  display:none;flex-direction:column;justify-content:center;
  gap:5px;width:38px;height:38px;cursor:pointer;padding:4px;
  border-radius:9px;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--s3),var(--s2));flex-shrink:0;
  box-shadow:var(--shadow-sm);
}
.hamburger span{display:block;height:2px;background:var(--t2);border-radius:2px;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:150;backdrop-filter:blur(4px);}
.sidebar-overlay.open{display:block;}

@media(max-width:1024px){
  .sidebar{width:194px;}
  .content{padding:18px;}
  .g5{grid-template-columns:repeat(3,1fr);}
  .g4{grid-template-columns:repeat(2,1fr);}
  .stat-val{font-size:1.55rem;}
  .topbar{padding:0 14px;gap:8px;}
  .tb-title{font-size:.84rem;}
  #page-dash .g2[style*="grid-template-columns:1fr 1fr 1.3fr"]{display:grid!important;grid-template-columns:1fr 1fr!important;}
}
@media(max-width:768px){
  .topbar{height:54px;padding:0 11px;gap:6px;position:sticky;top:0;z-index:200;}
  .tb-title{display:none;}
  .tb-icon{width:36px;height:36px;border-radius:9px;}
  .tb-lang .tlb{padding:4px 7px;font-size:.67rem;}
  #tb-user{display:none;}
  .hamburger{display:flex;}
  .tb-btn{padding:5px 9px;font-size:.72rem;}
  #btn-login{font-size:.72rem;padding:5px 9px;}
  .sidebar{position:fixed;top:54px;right:-228px;height:calc(100vh - 54px);width:228px;z-index:160;transition:right .3s ease;border-left:1px solid var(--border);}
  body.en .sidebar{right:auto;left:-228px;transition:left .3s ease;}
  .sidebar.mobile-open{right:0;}
  body.en .sidebar.mobile-open{right:auto;left:0;}
  .layout{display:block;}
  .content{padding:13px;max-height:none;min-height:calc(100vh - 54px);}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr!important;}
  #page-dash > div[style*="grid-template-columns"]{display:grid!important;grid-template-columns:1fr!important;}
  .ch-lg{height:230px!important;}.ch-md{height:210px!important;}.ch-sm{height:175px!important;}
  .g5{grid-template-columns:1fr 1fr!important;}
  .stat-val{font-size:1.35rem;}.stat-lbl{font-size:.68rem;}
  .ph{flex-direction:column;gap:8px;}
  .ph h2{font-size:1.1rem;}
  .ph-r{flex-wrap:wrap;gap:6px;}
  .ph-r input{width:140px!important;}
  .card{padding:13px 11px;}
  .card-h{font-size:.82rem;}
  .mb{padding:15px 14px;}
  .fg{grid-template-columns:1fr!important;}
  .fgf{grid-column:1/-1;}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{font-size:.74rem;}
  thead th{padding:7px 8px;font-size:.66rem;}
  tbody td{padding:7px 8px;}
  .btn{font-size:.76rem;padding:6px 12px;}
  .btn-sm{font-size:.7rem;padding:4px 8px;}
  .btn-xs{font-size:.64rem;padding:3px 6px;}
  .modal{max-width:100%!important;border-radius:14px;}
  .modal-xl{max-width:100%!important;}
  .ov{padding:10px!important;align-items:flex-end!important;}
  .modal{border-radius:17px 17px 0 0!important;max-height:96vh!important;}
  .cal-grid{grid-template-columns:repeat(6,1fr)!important;}
  .cal-day{min-height:54px;padding:6px 3px;}
  .cal-day-orders{font-size:.88rem;}
  .cal-day-num{font-size:.55rem;}
  .tabs{flex-wrap:wrap;}
  .tab{font-size:.72rem;padding:5px 10px;}
  .mchips{gap:6px;}
  .mchip{padding:5px 11px;font-size:.71rem;}
  #page-daily .card > div[style*="flex"]{flex-direction:column!important;gap:8px!important;}
  #toast-container{bottom:12px;left:10px!important;right:10px!important;}
  body.en #toast-container{left:10px!important;right:10px!important;}
  .toast{min-width:unset;width:100%;font-size:.76rem;}
  .si{padding:12px 17px;font-size:.87rem;}
  #emp-search,#monthly-search{width:100%!important;}
  .g5{grid-template-columns:repeat(2,1fr)!important;}
  .rcard{padding:11px 13px;}.rname{font-size:.79rem;}
  ::-webkit-scrollbar{width:3px;height:3px;}
}
@media(max-width:400px){
  .g5{grid-template-columns:1fr 1fr!important;}
  .stat-val{font-size:1.18rem;}
  .cal-grid{grid-template-columns:repeat(5,1fr)!important;}
  .topbar{gap:4px;padding:0 8px;}
  .tb-lang .tlb{padding:3px 6px;font-size:.63rem;}
  .tb-btn{font-size:.67rem;padding:4px 7px;}
  .content{padding:9px;}
}
@media(max-width:768px) and (orientation:landscape){
  .sidebar{top:54px;height:calc(100vh - 54px);}
  .ch-md{height:165px!important;}.ch-lg{height:185px!important;}.ch-sm{height:145px!important;}
}
@media print{
  .topbar,.sidebar,.hamburger,.sidebar-overlay{display:none!important;}
  .layout{display:block!important;}
  .content{padding:0!important;max-height:none!important;overflow:visible!important;}
  .page.act{display:block!important;}
  .card{break-inside:avoid;}
  body{background:#fff!important;color:#000!important;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM 3D / MODERN BRAND LAYER — Fifth Fleet (purple + orange)
   Appended override layer: deepens depth, gloss & brand identity.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --grad-accent-line:linear-gradient(90deg,transparent 0%,var(--a1) 22%,var(--a6) 50%,var(--a2) 78%,transparent 100%);
  --glass-blur:saturate(170%) blur(13px);
}
@keyframes ffSheen{0%{transform:translateX(-130%) skewX(-18deg)}60%,100%{transform:translateX(230%) skewX(-18deg)}}
@keyframes ffRise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ffAccentFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ── Branded scrollbars ── */
*{scrollbar-width:thin;scrollbar-color:var(--a1) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:rgba(10,4,20,.4);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--a1),var(--a1d));border-radius:6px;border:2px solid rgba(10,4,20,.6);}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--a1l),var(--a1));}

/* ── Richer ambient brand backdrop ── */
body{
  background-image:
    radial-gradient(circle at 10% -10%, rgba(107,63,224,.22) 0%, transparent 38%),
    radial-gradient(circle at 95% 108%, rgba(255,122,26,.16) 0%, transparent 42%),
    radial-gradient(circle at 78% 8%, rgba(196,76,232,.10) 0%, transparent 46%),
    radial-gradient(circle at 50% 50%, rgba(196,76,232,.045) 0%, transparent 65%);
}

/* ── Glass + deep 3D on primary surfaces ── */
.stat,.card,.chbox,.modal{
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 -18px 32px rgba(0,0,0,.28) inset,
    0 2px 4px rgba(0,0,0,.34),
    0 12px 24px rgba(0,0,0,.40),
    0 26px 56px rgba(8,3,18,.5);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
/* Animated brand accent line at top of cards/charts */
.card::before,.chbox::before{
  height:2px;left:0;right:0;border-radius:14px 14px 0 0;
  background:var(--grad-accent-line);background-size:200% 100%;
  animation:ffAccentFlow 5s linear infinite;opacity:.85;
}
/* Diagonal gloss sweep on hover */
.stat,.chbox{overflow:hidden;}
.stat::after{
  content:'';position:absolute;top:0;bottom:0;left:0;right:auto;height:auto;width:42%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.12),transparent);
  filter:blur(3px);opacity:0;transform:translateX(-130%) skewX(-18deg);pointer-events:none;
}
.stat:hover::after{opacity:1;animation:ffSheen 1.1s ease forwards;}

/* 3D lift with perspective tilt */
.stat:hover,.chbox:hover{
  transform:perspective(900px) translateY(-6px) rotateX(3.2deg) scale(1.018);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -18px 34px rgba(0,0,0,.30) inset,
    0 10px 20px rgba(0,0,0,.42),
    0 30px 60px rgba(8,3,18,.62),
    0 0 36px rgba(107,63,224,.22);
}
.card:hover{transform:translateY(-3px);}
/* Per-accent colored ambient glow */
.s-bl:hover{box-shadow:0 26px 56px rgba(8,3,18,.55),0 0 40px rgba(107,63,224,.34)!important;}
.s-or:hover{box-shadow:0 26px 56px rgba(8,3,18,.55),0 0 40px rgba(255,122,26,.34)!important;}
.s-gr:hover{box-shadow:0 26px 56px rgba(8,3,18,.55),0 0 40px rgba(34,197,94,.30)!important;}
.s-rd:hover{box-shadow:0 26px 56px rgba(8,3,18,.55),0 0 40px rgba(239,68,68,.30)!important;}
.s-yl:hover{box-shadow:0 26px 56px rgba(8,3,18,.55),0 0 40px rgba(245,158,11,.30)!important;}
.s-cy:hover{box-shadow:0 26px 56px rgba(8,3,18,.55),0 0 40px rgba(6,182,212,.30)!important;}

/* ── Report numbers: crisp 3D depth ── */
.stat-val{
  text-shadow:0 1px 0 rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}

/* ── Staggered "build up" entrance for report grids ── */
.g3>*,.g4>*,.g5>*{animation:ffRise .5s cubic-bezier(.22,1,.36,1) both;}
.g3>*:nth-child(2),.g4>*:nth-child(2),.g5>*:nth-child(2){animation-delay:.05s;}
.g3>*:nth-child(3),.g4>*:nth-child(3),.g5>*:nth-child(3){animation-delay:.10s;}
.g4>*:nth-child(4),.g5>*:nth-child(4){animation-delay:.15s;}
.g5>*:nth-child(5){animation-delay:.20s;}

/* ── Tables: sticky header, zebra, lift on hover ── */
.tw{border-radius:13px;}
thead th{position:sticky;top:0;z-index:5;backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(0,0,0,.4);}
tbody tr:nth-child(even) td{background:rgba(107,63,224,.035);}
tbody tr{transition:transform .14s ease, background .14s ease;}
tbody tr:hover td{background:rgba(107,63,224,.12)!important;}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--a2);}
body.en tbody tr:hover td:first-child{box-shadow:none;}
body.en tbody tr:hover td:last-child{box-shadow:inset -3px 0 0 var(--a2);}

/* ── Buttons: deeper tactile 3D ── */
.btn{transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, filter .2s;}
.btn:hover{filter:saturate(115%) brightness(1.05);}
.btn:active{transform:translateY(2px) scale(.985);filter:brightness(.96);}
.btn-p,.btn-o{position:relative;}

/* ── Topbar / sidebar: premium glass ── */
.topbar{backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(107,63,224,.28);
  box-shadow:0 4px 30px rgba(0,0,0,.6), 0 1px 0 rgba(196,76,232,.12);}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--grad-accent-line);background-size:200% 100%;animation:ffAccentFlow 6s linear infinite;opacity:.6;}
.si.act{box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset -4px 0 16px rgba(107,63,224,.28), 0 0 18px rgba(107,63,224,.12);}
.ravatar{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 4px 10px rgba(107,63,224,.32);}

/* ── Page header: brand underline ── */
.ph h2{position:relative;padding-bottom:8px;}
.ph h2::after{content:'';position:absolute;bottom:0;right:0;width:54px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--a2),var(--a1));box-shadow:0 0 12px rgba(107,63,224,.5);}
body.en .ph h2::after{right:auto;left:0;}

/* ── Modal: stronger float ── */
.modal{box-shadow:0 40px 90px rgba(0,0,0,.7), 0 12px 30px rgba(0,0,0,.55), 0 0 70px rgba(107,63,224,.20), inset 0 1px 0 rgba(255,255,255,.07);}
.badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.3);}

/* ── Respect reduced motion ── */
@media(prefers-reduced-motion:reduce){
  .card::before,.chbox::before,.topbar::after{animation:none;}
  .g3>*,.g4>*,.g5>*{animation:none;}
  .stat:hover,.chbox:hover{transform:translateY(-3px);}
  .stat:hover::after{animation:none;opacity:0;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — toggled via body.light (brand purple/orange kept)
   ═══════════════════════════════════════════════════════════════════════════ */
body.light{
  --bg:#f0edf9; --s1:#ffffff; --s2:#f8f6fd; --s3:#f0ecfa; --s4:#e8e3f5;
  --border:#ddd6f0; --b2:#c4b8e0;
  --text:#1a1030; --t2:#3d2f66; --t3:#6b5b90; --t4:#9585b5;
  --a1:#5b30d0; --a1l:#4a24b8; --a1d:#3818a0;
  --shadow-sm:0 1px 3px rgba(80,40,160,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 14px rgba(80,40,160,.09), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:0 10px 30px rgba(80,40,160,.13), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:0 20px 60px rgba(80,40,160,.18), 0 8px 22px rgba(0,0,0,.08);
  color:var(--text);
}
body.light{
  background:#f0edf9;
  background-image:
    radial-gradient(ellipse at 8% 0%, rgba(107,63,224,.12) 0%, transparent 40%),
    radial-gradient(ellipse at 96% 100%, rgba(255,122,26,.09) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(196,76,232,.04) 0%, transparent 60%);
}
body.light .topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,246,253,.97));
  border-bottom:2px solid #e0d8f2;
  box-shadow:0 2px 16px rgba(80,40,160,.09), 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:saturate(160%) blur(12px);
}
body.light .sidebar{
  background:linear-gradient(180deg,#ffffff 0%,#f8f6fd 100%);
  border-left-color:#e0d8f2;
  border-right-color:#e0d8f2;
  box-shadow:2px 0 20px rgba(80,40,160,.07);
}
body.light .sg-label{color:#9585b5;}
body.light .si{color:#3d2f66;}
body.light .si:hover{color:#1a1030;background:linear-gradient(90deg,rgba(91,48,208,.07),transparent);}
body.light .si.act{color:#5b30d0;background:linear-gradient(90deg,rgba(91,48,208,.12),rgba(91,48,208,.02));border-right-color:#5b30d0;}
body.light .card{
  background:linear-gradient(180deg,#ffffff,#fdfcff);
  border:1px solid #e4ddf4;
  box-shadow:0 2px 12px rgba(80,40,160,.07), 0 1px 3px rgba(0,0,0,.04);
}
body.light .card::before{opacity:.5;}
body.light .stat{
  background:linear-gradient(145deg,#ffffff,#f8f5fe);
  border:1px solid #e4ddf4;
  box-shadow:0 3px 12px rgba(80,40,160,.08), 0 1px 4px rgba(0,0,0,.04);
}
body.light .chbox{
  background:linear-gradient(180deg,#ffffff,#fdfcff);
  border:1px solid #e4ddf4;
  box-shadow:0 2px 10px rgba(80,40,160,.07);
}
body.light .modal{
  background:linear-gradient(180deg,#ffffff,#fdfcff);
  border:1px solid #d6cdf0;
  box-shadow:0 20px 60px rgba(80,40,160,.2), 0 8px 24px rgba(0,0,0,.08);
}
body.light table{background:#fff;}
body.light thead th{
  background:linear-gradient(180deg,#f2eef9,#ebe4f6);
  color:#3d2f66;
  border-bottom:2px solid #ddd6f0;
}
body.light tbody tr:nth-child(even) td{background:rgba(91,48,208,.03);}
body.light tbody tr:hover td{background:rgba(91,48,208,.07)!important;}
body.light .tb-btn{background:linear-gradient(180deg,#f8f6fd,#eee8f8);color:#3d2f66;border-color:#cec4e8;}
body.light .tb-btn:hover{border-color:#5b30d0;color:#5b30d0;}
body.light .btn-g{background:linear-gradient(180deg,#f8f6fd,#eee8f8);color:#3d2f66;border-color:#cec4e8;}
body.light .btn-g:hover{border-color:#5b30d0;color:#5b30d0;}
body.light .fld label{color:#3d2f66;}
body.light .fld input,body.light .fld select,body.light .fld textarea{
  background:linear-gradient(180deg,#ffffff,#f8f6fd);
  color:#1a1030;border-color:#cec4e8;
  box-shadow:inset 0 1px 3px rgba(80,40,160,.06);
}
body.light .fld input:focus,body.light .fld select:focus,body.light .fld textarea:focus{
  border-color:#5b30d0;
  box-shadow:0 0 0 3px rgba(91,48,208,.10), inset 0 1px 3px rgba(80,40,160,.06);
}
body.light .fld select option{background:#fff;color:#1a1030;}
body.light .tabs{background:linear-gradient(180deg,#f2eef9,#ebe4f6);border-color:#ddd6f0;}
body.light .tab{color:#3d2f66;}
body.light .tab:hover:not(.act){background:rgba(91,48,208,.07);color:#1a1030;}
body.light .mchip{background:linear-gradient(180deg,#f8f6fd,#ede8f8);color:#3d2f66;border-color:#cec4e8;}
body.light .mchip:hover:not(.act){border-color:#5b30d0;color:#5b30d0;}
body.light .badge{box-shadow:0 1px 3px rgba(0,0,0,.07);}
body.light .ov{background:rgba(30,10,70,.35);backdrop-filter:blur(8px);}
body.light .mh{background:linear-gradient(135deg,rgba(91,48,208,.08),rgba(196,76,232,.04),transparent);}
body.light .toast{background:linear-gradient(180deg,#ffffff,#f8f6fd);border-color:#d0c8ea;color:#1a1030;box-shadow:0 8px 24px rgba(80,40,160,.14);}
body.light ::-webkit-scrollbar-track{background:rgba(240,237,249,.6);}
body.light ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c4b8e0,#b0a0d0);}
body.light ::-webkit-scrollbar-thumb:hover{background:#a090c8;}
body.light .cal-day-num{color:rgba(30,10,70,.5);}
body.light .cd-off{background:rgba(240,237,249,.6);}
body.light .cd-today{box-shadow:0 0 0 2px rgba(91,48,208,.5), 0 0 14px rgba(91,48,208,.25)!important;}
body.light .tb-title{color:#1a1030;}
body.light .card-h{color:#1a1030;}
body.light .ch-title{color:#3d2f66;}
body.light .rcard{background:linear-gradient(180deg,#ffffff,#f8f6fd);border-color:#e0d8f0;}
body.light .rcard:hover{border-color:#5b30d0;}
body.light #notif-panel,body.light #tb-tools select,body.light #tb-tools button{background:#fff;color:var(--text);border-color:#d0c8ea;}
body.light .tl-card{background:linear-gradient(180deg,#ffffff,#f8f6fd);border-color:#e0d8f0;}