:root{
    --navy:#083A5C;
    --navy-2:#0A4A73;
    --navy-3:#0F5D8F;
    --teal:#0FB8AE;
    --teal-dark:#0A8F88;
    --teal-light:#5CDCD3;
    --aqua-bg:#EAF7F6;
    --ink:#0E2635;
    --slate:#5D7080;
    --slate-light:#8B9AA6;
    --paper:#F3F7F8;
    --card:#FFFFFF;
    --line:#E2EBED;
    --line-strong:#CBDBDE;
    --danger:#E5484D;
    --danger-bg:#FCE9EA;
    --critical:#B3141F;
    --warning:#E4A62F;
    --warning-bg:#FBF1DD;
    --success:#159C74;
    --success-bg:#E1F3EC;
    --shadow-sm:0 2px 8px rgba(8,58,92,0.06);
    --shadow-md:0 12px 32px rgba(8,58,92,0.10);
    --radius:16px;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{
    font-family:'Tajawal', sans-serif;
    background:var(--paper);
    color:var(--ink);
    min-height:100vh;
  }
  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:8px; }

  .app{ display:flex; min-height:100vh; }

  /* ===================== SIDEBAR ===================== */
  .sidebar{
    width:250px; flex-shrink:0;
    background:linear-gradient(195deg, var(--navy) 0%, #062C46 100%);
    color:#fff;
    display:flex; flex-direction:column;
    padding:26px 16px;
    position:sticky; top:0; height:100vh;
  }
  .brand{ display:flex; align-items:center; gap:11px; padding:0 8px 30px; }
  .brand .mark{
    width:38px; height:38px; border-radius:11px;
    background:linear-gradient(135deg, var(--teal), var(--teal-dark));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(15,184,174,0.45);
    flex-shrink:0;
  }
  .brand .mark svg{ width:20px; height:20px; }
  .brand h2{ font-family:'Cairo',sans-serif; font-weight:800; font-size:18px; color:#fff; }
  .brand span{ display:block; font-size:11px; color:#8FB4C9; font-weight:500; margin-top:1px; }
  .brand .version-tag{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#6D93A8; margin-top:2px; }

  .group-switcher{ position:relative; margin:4px 0 10px; }
  .group-switcher-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#fff; font-weight:700; font-size:12.5px; cursor:pointer; }
  .group-switcher-btn:hover{ background:rgba(255,255,255,0.1); }
  .group-switcher-btn svg{ width:14px; height:14px; flex-shrink:0; opacity:.7; }
  .group-switcher-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .group-switcher-panel{ position:absolute; inset-inline-start:0; top:calc(100% + 6px); width:100%; min-width:220px; background:#fff; border-radius:12px; box-shadow:0 20px 45px rgba(0,0,0,.3); padding:6px; z-index:50; }
  .group-switcher-panel.hidden{ display:none; }
  .group-switcher-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink); }
  .group-switcher-item:hover{ background:var(--paper); }
  .group-switcher-item.active{ background:var(--aqua-bg); color:var(--teal-dark); }
  .group-switcher-item .role-pill{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; background:var(--paper); color:var(--slate); }
  .group-switcher-divider{ height:1px; background:var(--line); margin:5px 2px; }
  .group-switcher-create{ display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:700; color:var(--teal-dark); }
  .group-switcher-create:hover{ background:var(--aqua-bg); }

  .nav-group-label{ font-size:11px; color:#6D93A8; font-weight:700; padding:14px 12px 8px; letter-spacing:.3px; }
  .nav-item{
    display:flex; align-items:center; gap:12px;
    padding:11px 14px; border-radius:11px; margin-bottom:4px;
    cursor:pointer; font-weight:700; font-size:14px; color:#C7DEE9;
    transition:background .15s ease, color .15s ease;
  }
  .nav-item svg{ width:19px; height:19px; flex-shrink:0; opacity:.85; }
  .nav-item.hidden{ display:none; }
  .nav-item:hover{ background:rgba(255,255,255,0.06); color:#fff; }
  .nav-item.active{
    background:linear-gradient(90deg, var(--teal) 0%, var(--teal-dark) 100%);
    color:#fff; box-shadow:0 6px 16px rgba(15,184,174,0.35);
  }
  .nav-item.active svg{ opacity:1; }
  .nav-badge{
    margin-inline-start:auto; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    background:rgba(255,255,255,0.14); padding:2px 8px; border-radius:20px; color:#fff;
  }
  .nav-item.active .nav-badge{ background:rgba(255,255,255,0.25); }

  .sidebar-user{
    margin-top:auto; display:flex; align-items:center; gap:10px;
    padding:12px; border-radius:13px; background:rgba(255,255,255,0.06);
  }
  .sidebar-user .av{
    width:36px; height:36px; border-radius:50%; background:var(--teal-light);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
    color:var(--navy); font-family:'Cairo',sans-serif; flex-shrink:0;
  }
  .sidebar-user .n{ font-size:13px; font-weight:700; color:#fff; }
  .sidebar-user .r{ font-size:11px; color:#8FB4C9; }

  /* ===================== MAIN ===================== */
  .main{ flex:1; min-width:0; display:flex; flex-direction:column; }

  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 34px; background:var(--card); border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:5;
  }
  .topbar h1{ font-family:'Cairo',sans-serif; font-weight:800; font-size:22px; }
  .topbar .sub{ font-size:12.5px; color:var(--slate); margin-top:2px; font-weight:500; }
  .top-right{ display:flex; align-items:center; gap:14px; }
  .search-box{
    display:flex; align-items:center; gap:8px;
    background:var(--paper); border:1px solid var(--line); border-radius:11px;
    padding:9px 14px; width:230px;
  }
  .search-box input{ border:none; background:transparent; outline:none; font-size:13.5px; width:100%; font-family:'Tajawal',sans-serif;}
  .search-box svg{ width:16px; height:16px; color:var(--slate-light); flex-shrink:0; }
  .bell{
    width:38px; height:38px; border-radius:11px; background:var(--paper); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer;
  }
  .bell svg{ width:17px; height:17px; color:var(--slate); }
  .bell .dot{ position:absolute; top:8px; left:9px; width:7px; height:7px; background:var(--danger); border-radius:50%; border:2px solid var(--card); }
  .kbd-hint{
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; color:var(--slate-light);
    background:var(--card); border:1px solid var(--line-strong); border-radius:6px; padding:2px 6px; flex-shrink:0;
  }

  /* ===================== NOTIFICATIONS DROPDOWN ===================== */
  .notif-dropdown{
    display:none; position:absolute; top:48px; inset-inline-end:0; width:330px; max-height:380px;
    background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-md);
    z-index:50; overflow:hidden; flex-direction:column;
  }
  .notif-dropdown.open{ display:flex; }
  .notif-head{ font-family:'Cairo',sans-serif; font-weight:800; font-size:13.5px; padding:14px 16px; border-bottom:1px solid var(--line); }
  #notif-list{ overflow-y:auto; max-height:320px; }
  .notif-item{ display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); cursor:pointer; text-align:start; }
  .notif-item:last-child{ border-bottom:none; }
  .notif-item:hover{ background:var(--paper); }
  .notif-item .ni-ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; }
  .notif-item .ni-txt{ flex:1; min-width:0; font-size:12.5px; }
  .notif-item .ni-txt .t1{ font-weight:700; }
  .notif-item .ni-txt .t2{ font-size:11px; color:var(--slate); margin-top:2px; }
  .notif-empty{ text-align:center; padding:30px 16px; color:var(--slate); font-size:12.5px; }

  .view{ display:none; padding:28px 34px 50px; }
  .view.active{ display:block; }

  /* ===================== HERO / WAVE ===================== */
  .hero{
    background:linear-gradient(120deg, var(--navy-3) 0%, var(--navy) 60%, #062C46 100%);
    border-radius:22px; padding:30px 34px 46px; position:relative; overflow:hidden; margin-bottom:-26px; color:#fff;
  }
  .hero .content{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;}
  .hero h2{ font-family:'Cairo',sans-serif; font-weight:800; font-size:24px; margin-bottom:6px; }
  .hero p{ font-size:13.5px; color:#B9D8E4; max-width:420px; line-height:1.8; }
  .hero .progress-ring{ display:flex; align-items:center; gap:14px; background:rgba(255,255,255,0.08); padding:14px 20px; border-radius:16px; backdrop-filter:blur(4px); }
  .hero .progress-ring .num{ font-family:'Cairo',sans-serif; font-size:26px; font-weight:800; }
  .hero .progress-ring .lbl{ font-size:11.5px; color:#B9D8E4; }
  .hero-wave{ position:absolute; bottom:-2px; left:0; width:100%; height:60px; z-index:1; }

  /* ===================== STAT CARDS ===================== */
  .stats{
    position:relative; z-index:3;
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
    margin-top:26px;
  }
  .stat{
    background:var(--card); border-radius:16px; padding:18px 20px;
    box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:10px;
  }
  .stat .row{ display:flex; align-items:center; justify-content:space-between; }
  .stat .ic{
    width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .stat .ic svg{ width:19px; height:19px; }
  .stat.c1 .ic{ background:var(--aqua-bg); color:var(--teal-dark); }
  .stat.c2 .ic{ background:var(--danger-bg); color:var(--danger); }
  .stat.c4 .ic{ background:#EDE9FE; color:#7C5CE0; }
  .stat .n{ font-family:'Cairo',sans-serif; font-weight:800; font-size:26px; }
  .stat .l{ font-size:12px; color:var(--slate); font-weight:700; }
  .stat .trend{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; }
  .trend.up{ background:var(--success-bg); color:var(--success); }
  .trend.down{ background:var(--danger-bg); color:var(--danger); }

  /* ===================== SECTIONS ===================== */
  .grid-2col{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; margin-top:34px; align-items:start; }
  .card{ background:var(--card); border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
  .card-pad{ padding:22px 24px; }
  .card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .card-head h3{ font-family:'Cairo',sans-serif; font-weight:800; font-size:15.5px; }
  .card-head a{ font-size:12.5px; color:var(--teal-dark); font-weight:700; cursor:pointer; }

  .mini-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
  .mini-row:last-child{ border-bottom:none; }
  .mini-row .dot-ic{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; }
  .mini-row .txt{ flex:1; min-width:0; }
  .mini-row .txt .t1{ font-size:13.5px; font-weight:700; }
  .mini-row .txt .t2{ font-size:11.5px; color:var(--slate); }

  .bar-item{ margin-bottom:14px; }
  .bar-item:last-child{ margin-bottom:0; }
  .bar-item .top{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; margin-bottom:6px; }
  .bar-track{ height:8px; background:var(--paper); border-radius:20px; overflow:hidden; }
  .bar-fill{ height:100%; border-radius:20px; background:linear-gradient(90deg, var(--teal), var(--teal-dark)); }

  /* ===================== BUTTONS / INPUTS ===================== */
  .btn{
    font-family:'Tajawal',sans-serif; font-weight:700; font-size:13.5px;
    border-radius:11px; padding:10px 20px; border:none; cursor:pointer;
    background:linear-gradient(90deg, var(--teal), var(--teal-dark)); color:#fff;
    display:inline-flex; align-items:center; gap:8px; box-shadow:0 6px 16px rgba(15,184,174,0.30);
    transition:transform .1s ease, opacity .15s ease;
  }
  .btn svg{ width:15px; height:15px; }
  .btn:hover{ opacity:.92; }
  .btn:active{ transform:scale(.98); }
  .btn.ghost{ background:var(--card); color:var(--navy); border:1px solid var(--line-strong); box-shadow:none; }
  .btn.danger{ background:var(--danger); box-shadow:0 6px 16px rgba(229,72,77,0.25); }
  .btn.small{ padding:7px 14px; font-size:12.5px; border-radius:9px; }
  input, select, textarea{
    font-family:'Tajawal',sans-serif; font-size:14px;
    border:1.5px solid var(--line); border-radius:11px; padding:10px 13px;
    background:var(--paper); color:var(--ink); width:100%;
  }
  input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--teal); background:#fff; }
  label{ font-size:12px; font-weight:700; color:var(--slate); display:block; margin-bottom:6px; }

  /* ===================== TOOLBAR / CHIPS ===================== */
  .toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
  .filters{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip{
    font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:20px;
    border:1.5px solid var(--line); background:var(--card); cursor:pointer; color:var(--slate);
  }
  .chip.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

  /* ===================== BADGES ===================== */
  .badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 11px; border-radius:20px; }
  .badge.sys-badge{ padding-inline-start:4px; }
  .sys-ic{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; color:#fff; font-size:7.5px; font-weight:800; font-family:'IBM Plex Mono',monospace; flex-shrink:0; }
  .badge.pending{ background:#EEF1F4; color:var(--slate); }
  .badge.progress{ background:#FFF1DE; color:#B4700F; }
  .badge.done{ background:var(--success-bg); color:var(--success); }
  .badge.blocked{ background:var(--danger-bg); color:var(--danger); }
  .badge.late{ background:var(--danger-bg); color:var(--danger); }
  .badge.active{ background:var(--success-bg); color:var(--success); }
  .badge.inactive{ background:#EEF1F4; color:var(--slate); }
  .badge.p-high{ background:var(--danger-bg); color:var(--danger); }
  .badge.p-med{ background:var(--warning-bg); color:#A8720C; }
  .badge.p-low{ background:var(--aqua-bg); color:var(--teal-dark); }
  .badge.p-critical{ background:var(--critical); color:#fff; animation:pulse-critical 1.8s infinite; }
  .badge.cat{ background:var(--aqua-bg); color:var(--teal-dark); }

  /* ===================== TASK CARD ===================== */
  .task-card{
    display:flex; align-items:center; gap:14px; padding:16px 18px;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    margin-bottom:12px; border-inline-start-width:4px; box-shadow:var(--shadow-sm);
  }
  .task-card.p-high{ border-inline-start-color:var(--danger); }
  .task-card.p-med{ border-inline-start-color:var(--warning); }
  .task-card.p-low{ border-inline-start-color:var(--teal); }
  .task-card.p-critical{ border-inline-start-color:var(--critical); }
  .task-card.done-row.p-critical, .task-card.done-row.p-high, .task-card.done-row.p-med, .task-card.done-row.p-low{
    border-inline-start-color:var(--success);
  }
  .task-card.done-row .badge.p-critical{ animation:none; }
  @keyframes pulse-critical{ 0%{ box-shadow:0 0 0 0 rgba(179,20,31,0.45); } 70%{ box-shadow:0 0 0 8px rgba(179,20,31,0); } 100%{ box-shadow:0 0 0 0 rgba(179,20,31,0); } }
  .task-card .chk{
    width:24px; height:24px; border-radius:8px; border:2px solid var(--line-strong);
    flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .task-card .chk.done{ background:var(--success); border-color:var(--success); }
  .task-card .info{ flex:1; min-width:0; }
  .task-card .title-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .task-card .tid{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--slate-light); font-weight:600; }
  .task-card .tid.ext-ref{ color:var(--teal-dark); }
  .task-card .title{ font-weight:700; font-size:14.5px; margin-bottom:5px; }
  .task-card .notes{ font-size:12px; color:var(--slate); margin-bottom:8px; line-height:1.6; }
  .task-card.done-row .title{ text-decoration:line-through; color:var(--slate); }
  .task-card .meta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
  .task-card .meta .m{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--slate); font-weight:600; }
  .task-card .meta svg{ width:13px; height:13px; }
  .task-card .prog-row{ display:flex; align-items:center; gap:10px; }
  .task-card .prog-pct{ font-size:11px; font-weight:700; color:var(--teal-dark); font-family:'IBM Plex Mono',monospace; min-width:32px; }
  .task-card .actions{ display:flex; gap:6px; flex-shrink:0; align-self:flex-start; }
  select.status-pick{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    border:1.5px solid transparent; border-radius:20px; padding:5px 26px 5px 12px; font-size:11px; font-weight:700;
    cursor:pointer; font-family:'Tajawal',sans-serif; width:auto;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%235D7080' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:10px center; background-size:9px 6px;
  }
  select.status-pick:hover{ border-color:var(--line-strong); }
  select.status-pick.pending{ background-color:#EEF1F4; color:var(--slate); }
  select.status-pick.progress{ background-color:#FFF1DE; color:#B4700F; }
  select.status-pick.done{ background-color:var(--success-bg); color:var(--success); }
  select.status-pick.blocked{ background-color:var(--danger-bg); color:var(--danger); }
  .icon-btn{
    width:32px; height:32px; border-radius:9px; border:1px solid var(--line);
    background:var(--paper); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--slate); flex-shrink:0;
  }
  .icon-btn svg{ width:15px; height:15px; }
  .icon-btn:hover{ background:var(--line); color:var(--navy); }
  .icon-btn.danger:hover{ background:var(--danger-bg); color:var(--danger); }
  .icon-btn.pinned{ background:var(--warning-bg); color:#A8720C; border-color:transparent; }

  .empty{ text-align:center; padding:60px 20px; color:var(--slate); }
  .empty .ic{ width:56px; height:56px; border-radius:16px; background:var(--aqua-bg); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
  .empty .ic svg{ width:26px; height:26px; }
  .empty .h{ font-weight:800; color:var(--ink); margin-bottom:4px; font-family:'Cairo',sans-serif; }
  .empty .s{ font-size:13px; }

  /* ===================== PANEL (FORM) ===================== */
  .panel{ background:var(--aqua-bg); border:1.5px dashed var(--teal); border-radius:16px; padding:22px; margin-bottom:22px; display:none; }
  .panel.open{ display:block; }
  .panel-title{ font-family:'Cairo',sans-serif; font-weight:800; font-size:14.5px; margin-bottom:16px; color:var(--navy); }
  .panel-subtitle{ font-family:'Cairo',sans-serif; font-weight:800; font-size:12.5px; color:var(--slate); margin:18px 0 12px; padding-top:14px; border-top:1px dashed var(--line-strong); }
  .req-mark{ color:var(--danger); font-weight:800; }
  .hr-details-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
  .hr-detail-item{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
  .hr-detail-item .hd-lbl{ font-size:10.5px; color:var(--slate); font-weight:700; margin-bottom:2px; }
  .hr-detail-item .hd-val{ font-size:12.5px; font-weight:700; color:var(--ink); overflow-wrap:break-word; }
  input.invalid, select.invalid, .invalid, .assignee-dd-toggle.invalid{ border-color:var(--danger) !important; background:var(--danger-bg) !important; }
  .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px; }
  .grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:14px; }
  .panel-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }

  /* ===================== EMPLOYEES ===================== */
  .emp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .emp-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow-sm); position:relative; }
  .emp-card .avatar{
    width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:16px; font-family:'Cairo',sans-serif; color:#fff;
    background:linear-gradient(135deg, var(--navy-3), var(--navy)); margin-bottom:12px;
  }
  .emp-card .name{ font-weight:800; font-size:15px; font-family:'Cairo',sans-serif; }
  .emp-card .role{ font-size:12.5px; color:var(--slate); margin-top:2px; margin-bottom:14px; }
  .emp-card .row{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--slate); margin-bottom:7px; }
  .emp-card .row svg{ width:14px; height:14px; flex-shrink:0; color:var(--teal-dark); }
  .emp-card .top-row{ display:flex; justify-content:space-between; align-items:flex-start; }
  .emp-card .actions{ display:flex; gap:6px; }
  .emp-table-wrap{ background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:auto; box-shadow:var(--shadow-sm); }
  .emp-table{ width:100%; border-collapse:collapse; font-size:13px; }
  .emp-table th{ text-align:start; font-size:11.5px; font-weight:700; color:var(--slate); padding:12px 16px; border-bottom:1px solid var(--line); background:var(--paper); white-space:nowrap; }
  .emp-table td{ padding:11px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
  .emp-table tr:last-child td{ border-bottom:none; }
  .emp-table tr:hover td{ background:var(--paper); }
  .emp-table .et-name{ display:flex; align-items:center; gap:9px; font-weight:700; }
  .emp-table .et-avatar{ width:28px; height:28px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; font-family:'Cairo',sans-serif; flex-shrink:0; }

  /* ===================== COMMENTS (card) ===================== */
  .comments-btn{ cursor:pointer; }
  .comments-btn:hover{ color:var(--teal-dark); }

  /* ===================== TASK DETAIL MODAL ===================== */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(8,17,25,0.55);
    align-items:center; justify-content:center; z-index:100; padding:24px;
  }
  .modal-overlay.open{ display:flex; }
  .modal-box{
    background:var(--card); border-radius:20px; width:100%; max-width:640px;
    max-height:88vh; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(8,58,92,0.28);
    transition:max-width .2s ease, max-height .2s ease;
  }
  .modal-box.focus-mode{ max-width:900px; max-height:96vh; }
  #md-focus-btn.active{ background:var(--aqua-bg); color:var(--teal-dark); }
  .modal-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    padding:22px 26px; border-bottom:1px solid var(--line); flex-shrink:0;
  }
  .modal-head h3{ font-family:'Cairo',sans-serif; font-weight:800; font-size:16.5px; display:flex; align-items:center; gap:8px; }
  .modal-sub{ font-size:12px; color:var(--slate); margin-top:4px; font-weight:600; }
  .modal-body{ padding:22px 26px; overflow-y:auto; flex:1; }
  .modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding:16px 26px; border-top:1px solid var(--line); flex-shrink:0; }
  .grid1{ margin-bottom:14px; }
  .modal-divider{ height:1px; background:var(--line); margin:22px 0 16px; }
  .comments-head{ font-family:'Cairo',sans-serif; font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
  .comments-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; max-height:220px; overflow-y:auto; }
  .comment-item{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:11px 14px; }
  .comment-item .c-author{ font-size:12px; font-weight:800; color:var(--ink); margin-bottom:3px; font-family:'Cairo',sans-serif; }
  .comment-item .c-text{ font-size:13px; line-height:1.7; }
  .comment-item .c-meta{ display:flex; justify-content:space-between; font-size:11px; color:var(--slate-light); margin-top:6px; font-family:'IBM Plex Mono',monospace; }
  .comment-item .c-del{ cursor:pointer; color:var(--danger); font-family:'Tajawal',sans-serif; font-weight:700; }
  .comment-item .c-del:hover{ text-decoration:underline; }
  .c-empty{ font-size:12.5px; color:var(--slate); text-align:center; padding:16px; }
  .comment-add{ display:flex; gap:8px; }
  .comment-add input{ flex:1; }

  /* ===================== VIEW TOGGLE ===================== */
  .view-toggle{ display:flex; border:1.5px solid var(--line); border-radius:11px; overflow:hidden; }
  .vt-btn{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--card); border:none; cursor:pointer; color:var(--slate); border-inline-start:1px solid var(--line); }
  .vt-btn:first-child{ border-inline-start:none; }
  .vt-btn svg{ width:16px; height:16px; }
  .vt-btn.active{ background:var(--navy); color:#fff; }

  /* ===================== KANBAN BOARD ===================== */
  .kanban-board{ display:none; gap:16px; align-items:flex-start; overflow-x:auto; padding-bottom:8px; }
  .kanban-board.active{ display:flex; }
  .kanban-col{
    flex:1; min-width:280px; background:var(--paper); border-radius:16px; padding:14px;
    display:flex; flex-direction:column; gap:10px; transition:background .15s ease;
  }
  .kanban-col.drag-over{ background:var(--aqua-bg); outline:2px dashed var(--teal); }
  .kanban-col-head{ display:flex; align-items:center; gap:8px; padding:2px 6px 6px; }
  .kanban-col-head .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .kanban-col-head .kt{ font-family:'Cairo',sans-serif; font-weight:800; font-size:13.5px; flex:1; }
  .kanban-col-head .kc{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--slate); background:var(--card); padding:2px 9px; border-radius:20px; }
  .kanban-card{
    background:var(--card); border:1px solid var(--line); border-radius:13px; padding:14px;
    cursor:grab; box-shadow:var(--shadow-sm); border-inline-start-width:4px;
  }
  .kanban-card:active{ cursor:grabbing; }
  .kanban-card.dragging{ opacity:.4; }
  .kanban-card.p-high{ border-inline-start-color:var(--danger); }
  .kanban-card.p-med{ border-inline-start-color:var(--warning); }
  .kanban-card.p-low{ border-inline-start-color:var(--teal); }
  .kanban-card.p-critical{ border-inline-start-color:var(--critical); animation:pulse-critical 1.8s infinite; }
  .kanban-card.done.p-critical, .kanban-card.done.p-high, .kanban-card.done.p-med, .kanban-card.done.p-low{
    border-inline-start-color:var(--success); animation:none;
  }
  .kanban-card.done .badge.p-critical{ animation:none; }
  .kc-pin{ margin-inline-start:auto; color:#A8720C; font-size:13px; line-height:1; }
  .kc-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
  .mini-tag{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; display:inline-block; }
  .kanban-card .kc-top{ display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
  .kanban-card .kc-tid{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--slate-light); }
  .kanban-card .kc-title{ font-weight:700; font-size:13.5px; margin-bottom:8px; line-height:1.5; cursor:pointer; }
  .kanban-card.done .kc-title{ text-decoration:line-through; color:var(--slate); }
  .kanban-card .kc-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .kanban-card .kc-owner{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--slate); font-weight:600; }
  .kanban-card .kc-owner-avatars{ display:flex; }
  .kanban-card .kc-avatar{ width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; font-family:'Cairo',sans-serif; flex-shrink:0; border:2px solid var(--card); margin-inline-start:-8px; }
  .kanban-card .kc-owner-avatars .kc-avatar:first-child{ margin-inline-start:0; }
  .kanban-card .kc-avatar-more{ background:var(--slate-light); font-size:8.5px; }
  .kanban-card .kc-due{ font-size:11px; color:var(--slate); font-family:'IBM Plex Mono',monospace; display:flex; align-items:center; gap:4px; }
  .kanban-card .kc-due.late{ color:var(--danger); font-weight:700; }
  .kanban-card .kc-due.soon{ color:#A8790C; font-weight:700; }
  .kanban-card .kc-foot{ display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:11px; color:var(--slate); }
  .kanban-card .kc-foot span{ display:flex; align-items:center; gap:3px; }
  .kanban-card .kc-foot svg{ width:12px; height:12px; }
  .kanban-empty{ text-align:center; padding:24px 10px; color:var(--slate-light); font-size:12px; }

  /* ===================== SUBTASKS ===================== */
  .subtask-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; max-height:220px; overflow-y:auto; }
  .subtask-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
  .subtask-row .sk-chk{ width:20px; height:20px; border-radius:6px; border:2px solid var(--line-strong); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; }
  .subtask-row .sk-chk.done{ background:var(--success); border-color:var(--success); }
  .subtask-row .sk-avatar{ width:20px; height:20px; border-radius:50%; background:var(--navy); color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'Cairo',sans-serif; }
  .subtask-row .sk-text{ flex:1; font-size:13px; cursor:pointer; }
  .subtask-row.done .sk-text{ text-decoration:line-through; color:var(--slate); }
  .subtask-row .sk-del{ cursor:pointer; color:var(--slate); flex-shrink:0; }
  .subtask-row .sk-del:hover{ color:var(--danger); }
  .subtask-progress-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--teal-dark); }

  /* ===================== TASK HISTORY ===================== */
  .history-list{ display:flex; flex-direction:column; gap:2px; max-height:200px; overflow-y:auto; }
  .history-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 4px; border-bottom:1px dashed var(--line); font-size:12.5px; }
  .history-item:last-child{ border-bottom:none; }
  .history-item .hi-txt{ flex:1; }
  .history-item .hi-time{ font-size:11px; color:var(--slate-light); font-family:'IBM Plex Mono',monospace; flex-shrink:0; }
  .badge.soon{ background:#FFF6DA; color:#A8790C; }

  /* ===================== REMINDER BANNER ===================== */
  #reminder-banner-wrap{ margin-top:26px; position:relative; z-index:3; }
  .reminder-banner{
    display:flex; align-items:center; gap:12px; background:#FFF6DA; border:1px solid #F2D98C;
    border-radius:14px; padding:14px 18px; margin-bottom:20px;
  }
  .reminder-banner .ric{ width:34px; height:34px; border-radius:10px; background:#F2D98C; color:#8A6008; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .reminder-banner .ric svg{ width:17px; height:17px; }
  .reminder-banner .rtxt{ flex:1; font-size:13px; color:#5C4A0A; }
  .reminder-banner .rtxt b{ font-weight:800; }

  /* ===================== TOASTS ===================== */
  .toast-wrap{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
  .toast{
    background:var(--navy); color:#fff; font-size:13px; font-weight:700;
    padding:11px 20px; border-radius:11px; box-shadow:0 10px 26px rgba(8,58,92,0.3);
    display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease;
  }
  .toast.show{ opacity:1; transform:translateY(0); }
  .toast.success{ background:var(--success); }
  .toast.danger{ background:var(--danger); }
  .toast svg{ width:15px; height:15px; flex-shrink:0; }

  /* ===================== ASSIGNEE DROPDOWN ===================== */
  .assignee-dd{ position:relative; }
  .assignee-dd-toggle{
    display:flex; align-items:center; gap:8px; border:1.5px solid var(--line); border-radius:11px;
    padding:10px 13px; background:var(--paper); cursor:pointer; font-size:13.5px; color:var(--ink);
  }
  .assignee-dd-toggle span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .assignee-dd-toggle span.placeholder{ color:var(--slate-light); }
  .assignee-dd-toggle svg{ width:14px; height:14px; color:var(--slate); flex-shrink:0; transition:transform .15s ease; }
  .assignee-dd.open .assignee-dd-toggle{ border-color:var(--teal); }
  .assignee-dd.open .assignee-dd-toggle svg{ transform:rotate(180deg); }
  .assignee-dd .assignee-dd-panel{
    display:none; position:absolute; top:calc(100% + 6px); inset-inline-start:0; inset-inline-end:0;
    background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-md);
    padding:6px; max-height:220px; overflow-y:auto; z-index:20; margin-bottom:0;
  }
  .assignee-dd.open .assignee-dd-panel{ display:flex; }

  /* ===================== ATTACHMENTS ===================== */
  .attach-list{ display:flex; flex-direction:column; gap:6px; max-height:150px; overflow-y:auto; margin-bottom:6px; }
  .attach-row{ display:flex; align-items:center; gap:9px; font-size:12.5px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:var(--paper); cursor:pointer; }
  .attach-row input{ width:auto; flex-shrink:0; }
  .attach-row .fic-mini{ width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; color:#fff; font-family:'IBM Plex Mono',monospace; flex-shrink:0; }
  .attach-empty{ font-size:12px; color:var(--slate); padding:8px 0; }
  .attach-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--teal-dark); }

  /* ===================== SEARCH RESULTS HIGHLIGHT ===================== */
  .search-empty{ text-align:center; padding:40px; color:var(--slate); font-size:13.5px; }

  /* ===================== LOGIN OVERLAY ===================== */
  .login-overlay{
    position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--navy) 0%, #062C46 100%); padding:20px;
  }
  .login-overlay.hidden{ display:none; }
  .login-box{ background:#fff; border-radius:22px; padding:38px 34px; width:100%; max-width:460px; text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.35); }
  .login-box h2{ font-family:'Cairo',sans-serif; font-weight:800; font-size:20px; margin-bottom:8px; }
  .login-box p{ font-size:12.5px; color:var(--slate); margin-bottom:18px; line-height:1.7; }
  .login-box input{ width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); font-family:inherit; font-size:13px; margin-bottom:10px; }
  .login-box input:focus{ outline:none; border-color:var(--teal); }
  .login-box input.invalid{ border-color:var(--danger) !important; }
  #login-name-row.hidden, #login-password-confirm-row.hidden{ display:none; }
  #login-error{ background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger); border-radius:10px; padding:9px 12px; font-size:12px; margin-bottom:12px; text-align:center; }
  #login-error.hidden{ display:none; }
  .login-switch{ margin-top:14px !important; font-size:12.5px; }
  .login-switch a{ color:var(--teal); font-weight:700; text-decoration:none; margin-inline-start:4px; cursor:pointer; }
  .login-switch a:hover{ text-decoration:underline; }

  /* ===================== DARK MODE ===================== */
  body.dark{ --paper:#0F1B24; --card:#182633; --line:#26374A; --line-strong:#324961; --ink:#E7EEF3; --slate:#9FB4C4; --slate-light:#71879A; --paper-2:#101C26; --aqua-bg:#132A32; }
  body.dark .hero{ background:linear-gradient(120deg, #0B4066 0%, #072338 60%, #051826 100%); }
  body.dark .hero-wave path{ fill:var(--paper) !important; }
  body.dark .login-box{ background:var(--card); }
  body.dark input, body.dark select, body.dark textarea{ background:var(--paper-2); color:var(--ink); }
  body.dark .stat, body.dark .card, body.dark .task-card, body.dark .kanban-card, body.dark .emp-card, body.dark .modal-box, body.dark .comment-item, body.dark .subtask-row, body.dark .attach-row, body.dark .notif-dropdown, body.dark .cmdk-box, body.dark .tl-scroll, body.dark .tl-label, body.dark .assignee-dd-panel{ background:var(--card); }
  body.dark .kanban-col{ background:var(--paper-2); }
  body.dark .tl-head, body.dark .tl-head .tl-label{ background:var(--paper-2); }
  body.dark .chip{ background:var(--card); }
  body.dark .topbar{ background:var(--card); }

  /* ===================== CALENDAR ===================== */
  .task-calendar{ display:none; }
  .task-calendar.active{ display:block; }
  .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .cal-head h3{ font-family:'Cairo',sans-serif; font-weight:800; font-size:16px; }
  .cal-nav{ display:flex; gap:8px; }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
  .cal-dow{ text-align:center; font-size:11px; font-weight:700; color:var(--slate); padding-bottom:6px; }
  .cal-cell{ min-height:92px; border:1px solid var(--line); border-radius:11px; padding:7px; background:var(--card); display:flex; flex-direction:column; gap:4px; }
  .cal-cell.empty{ background:transparent; border:none; }
  .cal-cell.today{ border-color:var(--teal); border-width:2px; }
  .cal-cell .cd-num{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; color:var(--slate); }
  .cal-chip{ font-size:10px; padding:2px 6px; border-radius:6px; background:var(--aqua-bg); color:var(--teal-dark); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cal-chip.late{ background:var(--danger-bg); color:var(--danger); }
  .cal-chip.done{ background:var(--success-bg); color:var(--success); text-decoration:line-through; }
  .cal-more{ font-size:10px; color:var(--slate-light); }

  /* ===================== TIMELINE / GANTT ===================== */
  .task-timeline{ display:none; }
  .task-timeline.active{ display:block; }
  .tl-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--card); }
  .tl-row{ display:flex; align-items:stretch; border-bottom:1px solid var(--line); }
  .tl-row:last-child{ border-bottom:none; }
  .tl-row.tl-head{ position:sticky; top:0; background:var(--paper); z-index:2; }
  .tl-label{
    flex:0 0 200px; width:200px; position:sticky; inset-inline-start:0; background:var(--card);
    padding:10px 14px; font-size:12.5px; font-weight:700; z-index:1; border-inline-end:1px solid var(--line);
    cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center;
  }
  .tl-row.tl-head .tl-label{ background:var(--paper); cursor:default; }
  .tl-daycell{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    font-size:10.5px; color:var(--slate); font-family:'IBM Plex Mono',monospace;
    border-inline-start:1px dashed var(--line);
  }
  .tl-daycell.weekend{ background:rgba(0,0,0,0.02); }
  .tl-daycell.today{ color:var(--teal-dark); font-weight:800; background:var(--aqua-bg); }
  .tl-track{ position:relative; height:44px; flex-shrink:0; }
  .tl-bar{
    position:absolute; top:10px; height:24px; border-radius:8px; display:flex; align-items:center;
    padding:0 10px; font-size:11px; font-weight:700; color:#fff; overflow:hidden; white-space:nowrap;
    cursor:pointer; box-shadow:0 2px 6px rgba(8,58,92,0.15);
  }
  .tl-bar.p-high{ background:linear-gradient(90deg, var(--danger), #C93A3E); }
  .tl-bar.p-med{ background:linear-gradient(90deg, var(--warning), #C1890F); }
  .tl-bar.p-low{ background:linear-gradient(90deg, var(--teal), var(--teal-dark)); }
  .tl-bar.p-critical{ background:linear-gradient(90deg, var(--critical), #7A0E16); }
  .tl-bar.done{ opacity:.55; text-decoration:line-through; }

  /* ===================== WORKLOAD ===================== */
  .workload-row{ display:flex; align-items:center; gap:12px; padding:9px 0; }
  .workload-row .avatar{ width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; font-family:'Cairo',sans-serif; flex-shrink:0; }
  .workload-row .wn{ font-size:12.5px; font-weight:700; width:110px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .workload-row .bar-track{ flex:1; }
  .workload-row .wc{ font-size:11px; font-weight:700; color:var(--slate); width:70px; flex-shrink:0; text-align:left; }
  .workload-row .wc.has-late{ color:var(--danger); }

  /* ===================== COMMAND PALETTE ===================== */
  .cmdk-overlay{ display:none; position:fixed; inset:0; background:rgba(8,17,25,0.55); z-index:400; align-items:flex-start; justify-content:center; padding:12vh 20px; }
  .cmdk-overlay.open{ display:flex; }
  .cmdk-box{ width:100%; max-width:560px; background:var(--card); border-radius:18px; box-shadow:0 30px 70px rgba(0,0,0,.35); overflow:hidden; max-height:70vh; display:flex; flex-direction:column; }
  .cmdk-input-row{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); flex-shrink:0; }
  .cmdk-input-row svg{ width:18px; height:18px; color:var(--slate-light); flex-shrink:0; }
  .cmdk-input-row input{ border:none; background:transparent; outline:none; font-size:15px; width:100%; padding:0; font-family:'Tajawal',sans-serif; }
  .cmdk-esc{ font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; color:var(--slate-light); background:var(--paper); border:1px solid var(--line-strong); border-radius:6px; padding:2px 6px; flex-shrink:0; }
  .cmdk-results{ overflow-y:auto; padding:8px; }
  .cmdk-group-label{ font-size:11px; font-weight:700; color:var(--slate-light); padding:10px 10px 4px; }
  .cmdk-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:13.5px; }
  .cmdk-item svg{ width:16px; height:16px; color:var(--slate); flex-shrink:0; }
  .cmdk-item .ci-sub{ font-size:11px; color:var(--slate); margin-inline-start:auto; flex-shrink:0; }
  .cmdk-item:hover, .cmdk-item.active{ background:var(--aqua-bg); }
  .cmdk-empty{ text-align:center; padding:30px 16px; color:var(--slate); font-size:13px; }

  /* ===================== ACTIVITY LOG ===================== */
  .activity-item{ display:flex; align-items:flex-start; gap:12px; padding:14px 4px; border-bottom:1px dashed var(--line); }
  .activity-item .ai-ic{ width:34px; height:34px; border-radius:10px; background:var(--aqua-bg); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .activity-item .ai-ic svg{ width:16px; height:16px; }
  .activity-item .ai-txt{ font-size:13px; }
  .activity-item .ai-txt b{ font-weight:800; }
  .activity-item .ai-time{ font-size:11px; color:var(--slate-light); font-family:'IBM Plex Mono',monospace; margin-top:2px; }
  .activity-group-label{ font-family:'Cairo',sans-serif; font-weight:800; font-size:12.5px; color:var(--teal-dark); padding:16px 4px 6px; }
  .activity-group-label:first-child{ padding-top:4px; }

  /* ===================== SYSTEMS PAGE ===================== */
  .section-title-simple{ font-family:'Cairo',sans-serif; font-weight:800; font-size:15px; margin:22px 0 12px; }
  .sys-header{ display:flex; align-items:center; gap:14px; border-radius:18px; padding:22px 26px; margin-bottom:18px; color:#fff; transition:background .25s ease; }
  .sys-header-ic{ width:46px; height:46px; border-radius:14px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'IBM Plex Mono',monospace; font-size:14px; flex-shrink:0; }
  .sys-header-name{ font-family:'Cairo',sans-serif; font-weight:800; font-size:19px; }

  /* ===================== PERFORMANCE ===================== */
  .perf-row{ display:flex; align-items:center; gap:12px; padding:9px 0; }
  .perf-row .avatar{ width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; font-family:'Cairo',sans-serif; flex-shrink:0; }
  .perf-row .pn{ font-size:12.5px; font-weight:700; width:110px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .perf-row .bar-track{ flex:1; }
  .perf-row .pp{ font-size:12px; font-weight:700; color:var(--teal-dark); width:38px; text-align:left; flex-shrink:0; }

  /* ===================== CELEBRATION ===================== */
  @keyframes celebrate-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.05); } 100%{ transform:scale(1); } }
  .kanban-col.celebrate{ animation:celebrate-pop .4s ease; }

  /* ===================== VIEW TRANSITION ===================== */
  @keyframes view-fade-in{ 0%{ opacity:0; transform:translateY(6px); } 100%{ opacity:1; transform:translateY(0); } }
  .view-fade-in{ animation:view-fade-in .25s ease; }

  /* ===================== DONUT CHART ===================== */
  .donut-wrap{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
  .donut-svg-box{ position:relative; flex-shrink:0; width:132px; height:132px; }
  .donut-svg-box svg{ width:100%; height:100%; }
  .donut-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .donut-center .dc-num{ font-family:'Cairo',sans-serif; font-weight:800; font-size:24px; color:var(--ink); }
  .donut-legend{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:140px; }
  .dl-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; }
  .dl-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .dl-label{ flex:1; color:var(--slate); }
  .dl-val{ color:var(--ink); font-family:'IBM Plex Mono',monospace; }

  /* ===================== TAGS ===================== */
  .tags-input-box{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:11px; padding:8px 10px; background:var(--paper); }
  .tags-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .tag-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
  .tag-chip .tc-x{ cursor:pointer; font-weight:800; opacity:.7; }
  .tag-chip .tc-x:hover{ opacity:1; }
  .tags-input-box input{ border:none; background:transparent; flex:1; min-width:100px; padding:4px 2px; width:auto; }
  .tags-input-box input:focus{ background:transparent; }
  .followup-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1.5px solid var(--line); border-radius:11px; padding:9px 13px; background:var(--paper); }
  .followup-text{ font-size:13px; color:var(--slate); }
  .star-rating{ display:flex; gap:4px; font-size:26px; }
  .star-rating .star{ color:var(--line-strong); cursor:pointer; transition:color .1s ease, transform .1s ease; line-height:1; }
  .star-rating .star:hover{ transform:scale(1.15); }
  .star-rating .star.filled{ color:#E4A62F; }
  .kc-rating{ color:#E4A62F; font-size:11px; letter-spacing:1px; }
  .shortcut-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px dashed var(--line); font-size:13px; }
  .shortcut-row:last-child{ border-bottom:none; }
  .bulk-bar{ display:flex; align-items:center; gap:10px; background:var(--navy); color:#fff; border-radius:13px; padding:12px 16px; margin-bottom:14px; flex-wrap:wrap; }
  .bulk-bar select{ width:auto; padding:7px 12px; font-size:12.5px; }
  .bulk-count{ font-weight:800; font-size:13px; margin-inline-end:auto; }
  .bulk-chk{ width:auto; flex-shrink:0; margin-inline-end:4px; cursor:pointer; }
  .mention{ color:var(--teal-dark); font-weight:800; background:var(--aqua-bg); padding:1px 5px; border-radius:6px; }

  .color-picker-row{ display:flex; align-items:center; gap:12px; }
  .color-picker-row input[type="color"]{ width:44px; height:38px; padding:3px; cursor:pointer; flex-shrink:0; }
  .color-picker-row input[type="color"]:disabled{ opacity:.4; cursor:not-allowed; }
  .color-auto-check{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--slate); font-weight:700; cursor:pointer; margin-bottom:0; }
  .color-auto-check input{ width:auto; }

  /* ===================== MOBILE NAV ===================== */
  .mobile-menu-btn{ display:none; }
  .sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(8,17,25,0.5); z-index:150; }

  @media (max-width:1000px){
    .mobile-menu-btn{ display:flex; }
    .sidebar{
      display:flex; position:fixed; inset-inline-start:0; top:0; height:100vh; z-index:200;
      transform:translateX(-100%); transition:transform .25s ease; width:250px;
    }
    html[dir="rtl"] .sidebar{ transform:translateX(100%); }
    .sidebar.mobile-open{ transform:translateX(0); }
    .sidebar-backdrop.open{ display:block; }
    .stats{ grid-template-columns:repeat(2,1fr); }
    .grid-2col{ grid-template-columns:1fr; }
    .emp-grid{ grid-template-columns:repeat(2,1fr); }
    .grid3, .grid2{ grid-template-columns:1fr; }
  }

  /* group creation + switcher row */
  .group-switcher-row{ display:flex; gap:6px; }
  .group-switcher-row .group-switcher-btn{ flex:1; min-width:0; }
  .group-add-btn{ width:38px; flex-shrink:0; border-radius:10px; border:1px dashed rgba(255,255,255,0.35); background:transparent; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .group-add-btn:hover{ background:var(--teal); border-color:var(--teal); }
  .group-add-btn svg{ width:16px; height:16px; }
  .cg-overlay{ display:none; position:fixed; inset:0; background:rgba(8,17,25,0.55); z-index:500; align-items:center; justify-content:center; padding:20px; }
  .cg-overlay.open{ display:flex; }
  .cg-card{ background:var(--card); border-radius:18px; padding:28px 26px; width:100%; max-width:420px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
  .cg-card.cg-inline{ margin:60px auto; box-shadow:var(--shadow, 0 4px 20px rgba(0,0,0,0.08)); border:1px solid var(--line); }
  .cg-icon{ width:56px; height:56px; border-radius:16px; background:var(--aqua-bg); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
  .cg-icon svg{ width:28px; height:28px; }
  .cg-card h3{ font-family:'Cairo',sans-serif; font-size:20px; margin-bottom:6px; }
  .cg-card p{ color:var(--slate); font-size:13.5px; margin-bottom:16px; }
  .cg-card input{ text-align:center; font-size:15px; }
  .cg-steps{ list-style:none; padding:0; margin:14px 0 18px; text-align:start; font-size:13px; color:var(--slate); display:grid; gap:6px; }
  .cg-steps li::before{ content:'✓'; color:var(--teal-dark); font-weight:800; margin-inline-end:8px; }
  .cg-actions{ display:flex; gap:8px; justify-content:center; }
  .chip-x{ margin-inline-start:8px; opacity:.55; font-weight:800; }
  .chip-x:hover{ opacity:1; color:var(--danger); }

  /* ===================== LOGIN (split layout) ===================== */
  .login-shell{ display:grid; grid-template-columns:1.05fr 1fr; width:100%; max-width:920px; min-height:560px; border-radius:24px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.35); }
  .login-shell .login-box{ border-radius:0; box-shadow:none; max-width:none; display:flex; flex-direction:column; justify-content:center; position:relative; padding:38px 40px; }
  .login-brand{ background:linear-gradient(160deg, var(--navy-2) 0%, #062C46 100%); color:#fff; padding:40px 36px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; text-align:start; }
  .login-brand::after{ content:''; position:absolute; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(15,184,174,.35), transparent 70%); bottom:-120px; inset-inline-end:-100px; pointer-events:none; }
  .lb-top{ display:flex; align-items:center; gap:12px; margin-bottom:34px; }
  .lb-logo{ width:44px; height:44px; border-radius:13px; background:linear-gradient(135deg, var(--teal), var(--teal-dark)); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(15,184,174,.5); }
  .lb-logo svg{ width:23px; height:23px; }
  .lb-name{ font-family:'Cairo',sans-serif; font-weight:900; font-size:24px; }
  .login-brand h1{ font-family:'Cairo',sans-serif; font-weight:800; font-size:26px; line-height:1.5; margin-bottom:12px; }
  .login-brand p{ color:#A9C6D8; font-size:14px; line-height:1.9; margin-bottom:26px; }
  .lb-features{ list-style:none; display:grid; gap:14px; position:relative; z-index:1; }
  .lb-features li{ display:flex; align-items:center; gap:12px; font-size:14px; font-weight:500; }
  .lb-ic{ width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--teal-light); }
  .lb-ic svg{ width:17px; height:17px; }
  .login-lang{ position:absolute; top:16px; inset-inline-end:16px; border:1px solid var(--line); background:transparent; color:var(--slate); border-radius:8px; padding:4px 10px; font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer; }
  .login-lang:hover{ border-color:var(--teal); color:var(--teal-dark); }
  @media (max-width:780px){
    .login-shell{ grid-template-columns:1fr; min-height:0; max-width:460px; }
    .login-brand{ padding:24px 24px 22px; }
    .login-brand p, .lb-features{ display:none; }
    .login-brand h1{ font-size:19px; margin:0; }
    .lb-top{ margin-bottom:14px; }
    .login-shell .login-box{ padding:28px 24px; }
    .login-overlay{ align-items:flex-start; overflow-y:auto; }
  }

  /* ===================== USER MENU ===================== */
  .sidebar-user-wrap{ margin-top:auto; position:relative; }
  .sidebar-user-wrap .sidebar-user{ margin-top:0; transition:background .15s; }
  .sidebar-user:hover{ background:rgba(255,255,255,0.12); }
  .su-text{ flex:1; min-width:0; }
  .su-text .n, .su-text .r{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .su-chev{ width:16px; height:16px; color:#8FB4C9; flex-shrink:0; transition:transform .2s; }
  .sidebar-user-wrap.open .su-chev{ transform:rotate(180deg); }
  .user-menu{ position:absolute; bottom:calc(100% + 8px); inset-inline:0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:0 18px 40px rgba(0,0,0,.35); z-index:60; }
  .user-menu.hidden{ display:none; }
  .um-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; }
  .um-item:hover{ background:var(--aqua-bg); }
  .um-item svg{ width:16px; height:16px; color:var(--slate); flex-shrink:0; }
  .um-item.danger, .um-item.danger svg{ color:var(--danger); }
  .um-item.hidden, .um-sep.hidden{ display:none; }
  .um-sep{ height:1px; background:var(--line); margin:5px 4px; }

  /* ===================== GETTING STARTED ===================== */
  .gs-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
  .gs-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
  .gs-head h3{ font-family:'Cairo',sans-serif; font-size:16px; font-weight:800; }
  .gs-sub{ color:var(--slate); font-size:13px; margin-bottom:14px; }
  .gs-dismiss{ background:none; border:none; color:var(--slate-light); cursor:pointer; font-size:12px; }
  .gs-progress{ height:6px; border-radius:6px; background:var(--line); margin-bottom:16px; overflow:hidden; }
  .gs-progress > div{ height:100%; background:linear-gradient(90deg, var(--teal), var(--teal-dark)); border-radius:6px; transition:width .3s; }
  .gs-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .gs-step{ border:1.5px solid var(--line); border-radius:13px; padding:14px; cursor:pointer; display:flex; gap:12px; align-items:flex-start; transition:border-color .15s, background .15s; }
  .gs-step:hover{ border-color:var(--teal); background:var(--aqua-bg); }
  .gs-step.done{ opacity:.65; }
  .gs-step.done .gs-num{ background:var(--success); color:#fff; }
  .gs-num{ width:28px; height:28px; border-radius:50%; background:var(--aqua-bg); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; }
  .gs-step b{ display:block; font-size:13.5px; margin-bottom:2px; }
  .gs-step span{ font-size:12px; color:var(--slate); }
  .invite-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--aqua-bg); border:1.5px solid var(--teal); border-radius:var(--radius); padding:14px 18px; margin-bottom:20px; }
  .invite-banner b{ color:var(--teal-dark); }
  .invite-banner .ib-actions{ display:flex; gap:8px; }

  /* ===================== WIZARD (create group) ===================== */
  .cg-dots{ display:flex; justify-content:center; gap:6px; margin-bottom:16px; }
  .cg-dots i{ width:22px; height:5px; border-radius:5px; background:var(--line-strong); }
  .cg-dots i.on{ background:var(--teal); }
  .cg-templates{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:6px 0 16px; text-align:start; }
  .cg-tpl{ border:1.5px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; background:var(--card); transition:border-color .15s, background .15s; }
  .cg-tpl:hover{ border-color:var(--teal); }
  .cg-tpl.sel{ border-color:var(--teal); background:var(--aqua-bg); }
  .cg-tpl b{ display:block; font-size:13.5px; margin-bottom:4px; }
  .cg-tpl span{ font-size:11.5px; color:var(--slate); line-height:1.6; }
  .cg-card{ max-height:92vh; overflow-y:auto; }
  .cg-link{ display:flex; gap:6px; margin-top:10px; }
  .cg-link input{ font-size:11.5px; direction:ltr; text-align:left; }

  /* ===================== BOTTOM NAV (mobile) ===================== */
  .bottom-nav{ display:none; }
  @media (max-width:1000px){
    .bottom-nav{ display:flex; position:fixed; bottom:0; inset-inline:0; z-index:140; background:var(--card); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content:space-around; box-shadow:0 -6px 20px rgba(8,58,92,.08); }
    .bn-item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; border-radius:10px; color:var(--slate); font-size:10.5px; font-weight:700; cursor:pointer; }
    .bn-item svg{ width:21px; height:21px; }
    .bn-item.active{ color:var(--teal-dark); background:var(--aqua-bg); }
    .bn-item.hidden{ display:none; }
    .main{ padding-bottom:76px; }
    .gs-steps{ grid-template-columns:1fr; }
  }

  /* ===================== EMPTY STATES / ROLES ===================== */
  .empty{ border:1.5px dashed var(--line-strong); border-radius:var(--radius); background:var(--card); }
  .empty .btn{ margin-top:14px; }
  .role-pill.owner{ background:#FFF1CC; color:#8A6200; }
  body.dark .role-pill.owner{ background:#3a2f10; color:#E4C063; }
  .emp-card.is-owner{ border-top-color:var(--warning) !important; }

  @media (max-width:1000px){ html, body{ overflow-x:hidden; } .sidebar:not(.mobile-open){ visibility:hidden; } .sidebar{ transition:transform .25s ease, visibility .25s; } }

  @media (max-width:700px){ .topbar{ padding:12px 14px; gap:8px; } .topbar h1{ font-size:17px; white-space:nowrap; } .topbar .sub, .search-box, #shortcuts-trigger{ display:none; } .top-right{ gap:8px; } }

  /* ===================== TOP NAVIGATION (replaces the sidebar) ===================== */
  :root{ --topnav-h:64px; }
  .app{ flex-direction:column; }
  .topnav{
    position:sticky; top:0; z-index:100; height:var(--topnav-h); flex-shrink:0;
    display:flex; align-items:center; gap:18px; padding:0 24px;
    background:linear-gradient(95deg, var(--navy) 0%, #062C46 100%); color:#fff;
    box-shadow:0 4px 18px rgba(8,58,92,.25);
  }
  .tn-left{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
  .topnav .brand{ padding:0; gap:10px; }
  .topnav .brand .mark{ width:36px; height:36px; border-radius:11px; }
  .topnav .brand .mark svg{ width:20px; height:20px; }
  .topnav .brand-text{ display:flex; flex-direction:column; line-height:1.1; }
  .topnav .brand h2{ font-size:19px; font-weight:900; }
  .topnav .brand .version-tag{ margin:0; font-size:9px; }
  .topnav .group-switcher{ margin:0; }
  .topnav .group-switcher-row{ width:210px; }
  .topnav .group-switcher-btn{ padding:7px 11px; font-size:13px; }
  .topnav .group-add-btn{ width:34px; }
  .topnav .group-switcher-panel{ min-width:240px; }

  .top-links{ display:flex; align-items:center; gap:4px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
  .top-links::-webkit-scrollbar{ display:none; }
  .topnav .nav-item{ margin:0; padding:8px 13px; gap:8px; font-size:13.5px; white-space:nowrap; border-radius:10px; }
  .topnav .nav-item svg{ width:17px; height:17px; }
  .topnav .nav-item.active{ box-shadow:0 4px 12px rgba(15,184,174,0.35); }

  .topnav .top-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .topnav .search-box{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); width:170px; padding:7px 11px; transition:width .2s; }
  .topnav .search-box:focus-within{ width:240px; }
  .topnav .search-box input{ color:#fff; font-size:13px; }
  .topnav .search-box input::placeholder{ color:#8FB4C9; }
  .topnav .search-box svg{ color:#8FB4C9; }
  .topnav .kbd-hint{ display:none; }
  .topnav .bell{ width:36px; height:36px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
  .topnav .bell svg{ color:#C7DEE9; }
  .topnav .bell .dot{ border-color:var(--navy); }
  .topnav #lang-toggle{ background:transparent; color:#C7DEE9; border:1px solid rgba(255,255,255,.2); padding:6px 11px !important; font-size:12px; }
  .topnav #lang-toggle:hover{ background:rgba(255,255,255,.1); }

  .topnav .sidebar-user-wrap{ margin:0; position:relative; }
  .topnav .sidebar-user{ padding:5px 10px 5px 6px; gap:9px; border-radius:12px; }
  .topnav .sidebar-user .av{ width:32px; height:32px; font-size:12px; }
  .topnav .su-text{ max-width:120px; }
  .topnav .su-text .r{ font-size:10.5px; }
  .topnav .su-chev{ transform:rotate(180deg); }
  .topnav .sidebar-user-wrap.open .su-chev{ transform:rotate(0deg); }
  .topnav .user-menu{ bottom:auto; top:calc(100% + 10px); inset-inline:auto; inset-inline-end:0; width:250px; }
  .topnav .notif-dropdown{ top:46px; }

  .topbar{ top:var(--topnav-h); z-index:60; }
  @media (min-width:1001px){ .topbar{ padding:16px 34px; } }
  .topbar h1{ font-size:20px; }
  .mobile-menu-btn{ display:none !important; }

  @media (max-width:1250px){
    .topnav .nav-item svg{ display:none; }
    .topnav .search-box{ width:120px; }
    .topnav .search-box:focus-within{ width:180px; }
    .topnav .su-text .r{ display:none; }
  }
  @media (max-width:1000px){
    .top-links, .topnav .search-box{ display:none; }
    .topnav{ gap:10px; padding:0 14px; justify-content:space-between; }
    .tn-left{ gap:10px; min-width:0; }
    .topnav .brand-text{ display:none; }
    .topnav .group-switcher-row{ width:auto; max-width:200px; }
    .topnav .su-text, .topnav .su-chev{ display:none; }
    .topnav .sidebar-user{ padding:3px; background:transparent; }
    .topnav .user-menu{ inset-inline-end:-6px; }
    .topbar{ padding:12px 14px; }
  }

  @media (max-width:1250px){
    .topnav .search-box, #shortcuts-trigger, .topnav .brand-text{ display:none; }
    .topnav .group-switcher-row{ width:176px; }
    .topnav .su-text, .topnav .su-chev{ display:none; }
    .topnav .sidebar-user{ padding:3px; background:transparent; }
    .topnav{ gap:12px; padding:0 16px; }
    .topnav .user-menu{ inset-inline-end:-4px; }
  }

  /* ===================== TASKS PAGE ===================== */
  .tasks-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
  .tasks-head-actions{ display:flex; align-items:center; gap:8px; }
  .seg{ display:inline-flex; background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:3px; }
  .seg-btn{ border:none; background:transparent; padding:7px 18px; border-radius:9px; font-family:inherit; font-weight:700; font-size:13px; color:var(--slate); cursor:pointer; }
  .seg-btn.active{ background:var(--navy); color:#fff; }
  .btn.icon-only{ padding:9px 11px; }
  .btn.icon-only svg{ width:18px; height:18px; }
  .more-wrap{ position:relative; }
  .more-menu{ position:absolute; top:calc(100% + 8px); inset-inline-end:0; min-width:200px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:var(--shadow-md); z-index:40; }
  .more-menu.hidden{ display:none; }
  .status-strip{ display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; margin-bottom:14px; }
  .ss-tile{ background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; cursor:pointer; display:flex; flex-direction:column; gap:2px; transition:border-color .15s, transform .15s; border-top:3px solid var(--line-strong); }
  .ss-tile:hover{ transform:translateY(-1px); border-color:var(--teal); }
  .ss-tile b{ font-family:'Cairo',sans-serif; font-size:22px; font-weight:800; line-height:1.1; }
  .ss-tile span{ font-size:12px; color:var(--slate); font-weight:600; }
  .ss-tile.pending{ border-top-color:#8B9AA6; } .ss-tile.progress{ border-top-color:var(--warning); }
  .ss-tile.blocked{ border-top-color:var(--danger); } .ss-tile.late{ border-top-color:var(--critical); }
  .ss-tile.done{ border-top-color:var(--success); }
  .ss-tile.active{ border-color:var(--teal); background:var(--aqua-bg); }
  .filter-bar{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:14px; }
  .fb-field{ display:flex; flex-direction:column; gap:4px; min-width:130px; flex:1; max-width:210px; }
  .fb-field span{ font-size:11px; font-weight:700; color:var(--slate-light); }
  .fb-field select{ padding:8px 10px; font-size:13px; }
  .fb-clear{ border:none; background:none; color:var(--danger); font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer; padding:8px 4px; }
  .fb-clear.hidden{ display:none; }
  .quick-add{ display:none; align-items:center; gap:10px; background:var(--card); border:1.5px dashed var(--line-strong); border-radius:14px; padding:4px 14px; margin-bottom:18px; }
  .quick-add:focus-within{ border-color:var(--teal); border-style:solid; }
  .quick-add svg{ width:16px; height:16px; color:var(--teal-dark); flex-shrink:0; }
  .quick-add input{ border:none !important; background:transparent !important; box-shadow:none !important; flex:1; padding:11px 0; font-size:14px; }
  .qa-hint{ font-size:11.5px; color:var(--slate-light); white-space:nowrap; }
  .panel-backdrop{ display:none; }
  #task-panel.open{ position:fixed; z-index:320; top:50%; left:50%; transform:translate(-50%,-50%); width:min(760px, 94vw); max-height:90vh; overflow-y:auto; background:var(--card); border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.35); margin:0; }
  #task-panel.open ~ .panel-backdrop{ display:block; position:fixed; inset:0; background:rgba(8,17,25,.55); z-index:310; }
  .bulk-bar{ position:sticky; bottom:16px; z-index:30; box-shadow:0 12px 30px rgba(8,58,92,.3); }
  body.is-member .sk-del, body.is-member .bulk-chk{ display:none; }
  @media (max-width:900px){ .status-strip{ grid-template-columns:repeat(3, 1fr); } .qa-hint{ display:none; } .fb-field{ max-width:none; min-width:46%; } }
  @media (max-width:600px){ .tasks-head{ flex-direction:column; align-items:stretch; } .tasks-head-actions{ justify-content:space-between; } .seg{ align-self:flex-start; } }

  /* ===================== TASK LIST (rows) ===================== */
  .tlist{ background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
  .tgroup + .tgroup{ border-top:1px solid var(--line); }
  .tgroup-head{ display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--paper); cursor:pointer; user-select:none; font-family:'Cairo',sans-serif; font-weight:800; font-size:13px; }
  .tg-dot{ width:9px; height:9px; border-radius:50%; background:#8B9AA6; }
  .tgroup.progress .tg-dot{ background:var(--warning); } .tgroup.blocked .tg-dot{ background:var(--danger); } .tgroup.done .tg-dot{ background:var(--success); }
  .tg-count{ font-family:'IBM Plex Mono',monospace; font-size:11px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1px 8px; color:var(--slate); }
  .tg-chev{ width:15px; height:15px; margin-inline-start:auto; color:var(--slate); transform:rotate(90deg); transition:transform .15s; }
  .tg-chev.open{ transform:rotate(0deg); }
  .trow{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-top:1px solid var(--line); cursor:pointer; position:relative; transition:background .12s; border-inline-start:3px solid transparent; }
  .trow:hover{ background:var(--aqua-bg); }
  .trow.p-critical{ border-inline-start-color:var(--critical); } .trow.p-high{ border-inline-start-color:var(--danger); }
  .trow.p-med{ border-inline-start-color:var(--warning); } .trow.p-low{ border-inline-start-color:var(--teal); }
  .trow.done{ border-inline-start-color:transparent; }
  .trow.done .tr-title{ text-decoration:line-through; color:var(--slate); }
  .trow .bulk-chk{ opacity:0; width:16px; margin:0; }
  .trow:hover .bulk-chk, .trow .bulk-chk:checked{ opacity:1; }
  .tr-check{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:800; cursor:pointer; transition:border-color .12s, background .12s; }
  .tr-check:hover{ border-color:var(--success); }
  .tr-check.done{ background:var(--success); border-color:var(--success); }
  .tr-main{ flex:1; min-width:0; }
  .tr-title{ font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tr-pin{ color:var(--warning); font-size:12px; }
  .tr-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
  .tr-code{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--slate-light); font-weight:600; }
  .tr-meta .badge{ font-size:10.5px; padding:2px 8px; }
  .tr-cm{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--slate); font-weight:600; }
  .tr-cm svg{ width:12px; height:12px; }
  .tr-cols{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
  .tr-sub{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--slate); font-family:'IBM Plex Mono',monospace; }
  .tr-sub-bar{ width:38px; height:5px; border-radius:5px; background:var(--line); overflow:hidden; display:inline-block; }
  .tr-sub-bar i{ display:block; height:100%; background:var(--teal); }
  .tr-avs{ display:inline-flex; min-width:34px; }
  .tr-av{ width:26px; height:26px; border-radius:50%; color:#fff; font-size:10px; font-weight:800; font-family:'Cairo',sans-serif; display:flex; align-items:center; justify-content:center; border:2px solid var(--card); margin-inline-start:-8px; }
  .tr-av:first-child{ margin-inline-start:0; }
  .tr-av.more{ background:var(--slate-light); font-size:9.5px; }
  .due-pill{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; background:var(--paper); color:var(--slate); white-space:nowrap; min-width:64px; text-align:center; }
  .due-pill.soon{ background:var(--warning-bg); color:#9A6A08; } .due-pill.late{ background:var(--danger-bg); color:var(--danger); }
  .pr-chip{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap; min-width:58px; text-align:center; background:var(--paper); color:var(--slate); }
  .pr-chip.p-critical{ background:var(--danger-bg); color:var(--critical); } .pr-chip.p-high{ background:#FDE8E0; color:#C1440E; }
  .pr-chip.p-med{ background:var(--warning-bg); color:#9A6A08; } .pr-chip.p-low{ background:var(--aqua-bg); color:var(--teal-dark); }
  .tr-actions{ display:flex; gap:2px; opacity:0; transition:opacity .12s; flex-shrink:0; }
  .trow:hover .tr-actions{ opacity:1; }
  .tr-act{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--slate); }
  .tr-act:hover{ background:var(--card); color:var(--teal-dark); } .tr-act.danger:hover{ color:var(--danger); } .tr-act.on{ color:var(--warning); }
  .tr-act svg{ width:15px; height:15px; }
  @media (max-width:1100px){
    .trow{ flex-wrap:wrap; }
    .tr-cols{ width:100%; padding-inline-start:34px; flex-wrap:wrap; gap:10px; }
    .tr-actions{ opacity:1; position:absolute; top:6px; inset-inline-end:8px; }
    .trow .bulk-chk{ display:none; }
  }

  /* ===================== SUBTASK CHECKLIST ===================== */
  .sk-progress{ height:6px; border-radius:6px; background:var(--line); overflow:hidden; margin-bottom:10px; }
  .sk-progress > div{ height:100%; background:linear-gradient(90deg, var(--teal), var(--success)); border-radius:6px; transition:width .25s; }
  .subtask-list{ display:flex; flex-direction:column; gap:2px; }
  .sk-item{ display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:10px; }
  .sk-item:hover{ background:var(--paper); }
  .sk-circle{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); background:transparent; color:#fff; font-size:11px; font-weight:800; cursor:pointer; flex-shrink:0; padding:0; display:flex; align-items:center; justify-content:center; }
  .sk-circle:hover{ border-color:var(--success); }
  .sk-circle.done{ background:var(--success); border-color:var(--success); }
  .sk-input{ flex:1; min-width:0; border:1.5px solid transparent !important; background:transparent !important; padding:6px 8px !important; font-size:13.5px; border-radius:8px; }
  .sk-input:hover{ border-color:var(--line) !important; }
  .sk-input:focus{ border-color:var(--teal) !important; background:var(--card) !important; outline:none; }
  .sk-item.done .sk-input{ text-decoration:line-through; color:var(--slate); }
  .sk-assignee{ width:auto !important; max-width:110px; padding:3px 8px !important; font-size:11.5px; border-radius:20px !important; border:1px solid var(--line) !important; background:var(--card) !important; color:var(--slate-light); cursor:pointer; appearance:none; -webkit-appearance:none; text-align:center; }
  .sk-assignee.set{ background:var(--aqua-bg) !important; color:var(--teal-dark); border-color:transparent !important; font-weight:700; }
  .sk-del{ border:none; background:none; color:var(--slate-light); cursor:pointer; opacity:0; padding:4px; border-radius:6px; display:flex; }
  .sk-item:hover .sk-del{ opacity:1; } .sk-del:hover{ color:var(--danger); background:var(--danger-bg); }
  .sk-empty{ font-size:12.5px; color:var(--slate-light); padding:6px 8px; }
  .sk-add{ display:flex; align-items:center; gap:8px; border:1.5px dashed var(--line-strong); border-radius:11px; padding:2px 12px; margin-top:8px; }
  .sk-add:focus-within{ border-color:var(--teal); border-style:solid; }
  .sk-add svg{ width:15px; height:15px; color:var(--teal-dark); flex-shrink:0; }
  .sk-add input{ border:none !important; background:transparent !important; box-shadow:none !important; padding:9px 0 !important; font-size:13.5px; flex:1; }
  body.is-member .sk-add{ display:none; }

  @media (max-width:600px){
    .status-strip{ display:flex; overflow-x:auto; gap:8px; padding-bottom:4px; scrollbar-width:none; }
    .status-strip::-webkit-scrollbar{ display:none; }
    .ss-tile{ min-width:92px; flex-shrink:0; padding:10px 12px; }
    .ss-tile b{ font-size:19px; }
    .filter-bar{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px; }
    .fb-field{ min-width:0; }
    .fb-field select{ padding:7px 8px; font-size:12.5px; }
    .fb-clear{ grid-column:1/-1; text-align:center; }
    .tr-cols{ padding-inline-start:0; }
  }

  /* ===================== KANBAN (card redesign) ===================== */
  .kanban-col{ background:var(--paper); border:1px solid var(--line); }
  .kanban-col-head{ padding:4px 6px 8px; }
  .kanban-card.kcard{ border-inline-start-width:1px; border-top-width:3px; border-radius:14px; padding:12px 13px; animation:none; display:flex; flex-direction:column; gap:9px; cursor:grab; transition:box-shadow .15s, transform .15s; }
  .kanban-card.kcard:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
  .kanban-card.kcard.p-critical{ border-top-color:var(--critical); } .kanban-card.kcard.p-high{ border-top-color:var(--danger); }
  .kanban-card.kcard.p-med{ border-top-color:var(--warning); } .kanban-card.kcard.p-low{ border-top-color:var(--teal); }
  .kanban-card.kcard.done{ border-top-color:var(--success); opacity:.78; }
  .kcard .kc-top{ margin:0; }
  .kcard .kc-title{ margin:0; font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .kcard .kc-tags{ margin:0; }
  .kc-sub{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:var(--slate); font-family:'IBM Plex Mono',monospace; }
  .kc-sub .tr-sub-bar{ flex:1; width:auto; }
  .kcard .kc-foot{ margin:0; padding-top:9px; justify-content:space-between; gap:8px; }
  .kcard .kc-foot-end{ display:flex; align-items:center; gap:6px; }
  .kc-cm{ display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--slate); font-weight:600; }
  .kc-cm svg{ width:12px; height:12px; }
  .due-pill.sm, .pr-chip.sm{ font-size:10.5px; padding:3px 8px; min-width:0; }
  .kcard .tr-av{ width:24px; height:24px; font-size:9.5px; }

  /* ===================== SYSTEM ADMIN ===================== */
  .adm-note{ display:flex; gap:10px; align-items:flex-start; background:var(--aqua-bg); border:1px solid var(--teal); color:var(--teal-dark); border-radius:14px; padding:12px 16px; font-size:13px; font-weight:600; margin-bottom:18px; line-height:1.7; }
  .adm-note svg{ width:18px; height:18px; flex-shrink:0; margin-top:3px; }
  #admin-tabs{ margin-bottom:18px; overflow-x:auto; max-width:100%; }
  .adm-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .adm-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:4px; }
  .adm-card b{ font-family:'Cairo',sans-serif; font-size:28px; font-weight:800; }
  .adm-card b small{ font-size:13px; color:var(--slate); font-weight:600; }
  .adm-card span{ font-size:12.5px; color:var(--slate); font-weight:600; }
  .adm-card.warn{ border-color:var(--warning); }
  .adm-bars{ display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:10px; }
  .adm-bar{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; }
  .adm-bar i{ display:block; width:100%; max-width:26px; background:linear-gradient(180deg, var(--teal), var(--teal-dark)); border-radius:6px 6px 0 0; min-height:3px; }
  .adm-bar em{ font-style:normal; font-size:10px; color:var(--slate-light); font-family:'IBM Plex Mono',monospace; }
  .adm-toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .adm-toolbar input{ max-width:340px; }
  .adm-count{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--slate); }
  .adm-email{ font-size:11.5px; color:var(--slate-light); font-weight:500; }
  .adm-actions{ white-space:nowrap; text-align:end; }
  .adm-actions .btn{ margin-inline-start:4px; }
  .adm-you{ font-size:12px; color:var(--slate-light); font-weight:700; }
  .role-pill.adm-bad{ background:var(--danger-bg); color:var(--danger); }
  .adm-setting{ display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:640px; }
  .adm-setting h3{ font-family:'Cairo',sans-serif; font-size:15px; margin-bottom:4px; }
  .adm-setting p{ font-size:13px; color:var(--slate); }
  .switch{ position:relative; width:46px; height:26px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; }
  .slider{ position:absolute; inset:0; background:var(--line-strong); border-radius:26px; cursor:pointer; transition:.2s; }
  .slider::before{ content:''; position:absolute; width:20px; height:20px; inset-inline-start:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
  .switch input:checked + .slider{ background:var(--teal); }
  .switch input:checked + .slider::before{ transform:translateX(20px); }
  html[dir="rtl"] .switch input:checked + .slider::before{ transform:translateX(-20px); }
  .adm-loading{ text-align:center; padding:40px; color:var(--slate-light); }
  #view-admin .activity-item{ display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
  @media (max-width:800px){ .adm-stats{ grid-template-columns:repeat(2,1fr); } .adm-actions{ white-space:normal; } }

  /* ===================== ANNOUNCEMENTS ===================== */
  .ann-banner{ display:flex; align-items:center; gap:12px; padding:11px 34px; font-size:13.5px; font-weight:600; background:var(--aqua-bg); color:var(--teal-dark); border-bottom:1px solid var(--teal); }
  .ann-banner.warning{ background:var(--warning-bg); color:#8A6200; border-bottom-color:var(--warning); }
  .ann-banner svg{ width:18px; height:18px; flex-shrink:0; }
  .ann-banner span{ flex:1; line-height:1.7; }
  .ann-banner button{ border:none; background:none; color:inherit; font-size:20px; cursor:pointer; line-height:1; opacity:.7; }
  .ann-banner button:hover{ opacity:1; }
  .adm-ann{ padding:12px 0; border-bottom:1px solid var(--line); }
  .adm-ann:last-child{ border-bottom:none; }
  .adm-ann.warning .adm-ann-msg{ color:#8A6200; }
  .adm-ann.expired{ opacity:.55; }
  .adm-ann-msg{ font-weight:600; margin-bottom:6px; line-height:1.7; }
  .adm-ann-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--slate-light); }
  .adm-ann-meta .btn{ margin-inline-start:auto; }
  @media (max-width:700px){ .ann-banner{ padding:10px 14px; } }

  /* ===================== PROFILE (redesign) ===================== */
  .pf-hero{ background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:20px; box-shadow:var(--shadow-sm); }
  .pf-banner{ height:96px; background:linear-gradient(110deg, var(--navy) 0%, var(--navy-3) 55%, var(--teal) 100%); }
  .pf-hero-body{ display:flex; align-items:flex-end; gap:20px; padding:0 28px 22px; flex-wrap:wrap; }
  .pf-avatar{ width:92px; height:92px; border-radius:50%; margin-top:-46px; border:5px solid var(--card); font-size:30px; font-family:'Cairo',sans-serif; font-weight:800; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-md); }
  .pf-id{ flex:1; min-width:200px; padding-top:12px; }
  .pf-id h2{ font-family:'Cairo',sans-serif; font-size:22px; font-weight:800; line-height:1.3; }
  .pf-email{ color:var(--slate); font-size:13.5px; margin:2px 0 8px; direction:ltr; text-align:start; }
  .pf-pills{ display:flex; gap:6px; flex-wrap:wrap; }
  .pf-stats{ display:flex; gap:10px; }
  .pf-stats > div{ background:var(--paper); border-radius:14px; padding:10px 18px; text-align:center; min-width:84px; }
  .pf-stats b{ display:block; font-family:'Cairo',sans-serif; font-size:20px; font-weight:800; }
  .pf-stats span{ font-size:11.5px; color:var(--slate); font-weight:600; }
  .pf-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:20px; align-items:start; }
  .pf-col{ display:flex; flex-direction:column; gap:20px; }
  .pf-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm); }
  .pf-card h3{ display:flex; align-items:center; gap:10px; font-family:'Cairo',sans-serif; font-size:15px; font-weight:800; margin-bottom:16px; }
  .pf-card h3 svg{ width:18px; height:18px; color:var(--teal-dark); }
  .pf-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .pf-fields.one{ grid-template-columns:1fr; }
  .pf-fields input:disabled{ opacity:.65; direction:ltr; text-align:start; }
  .pf-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-weight:600; font-size:14px; }
  .pf-row:last-child{ border-bottom:none; padding-bottom:0; }
  .pf-row-col{ flex-direction:column; align-items:flex-start; }
  .pf-colors{ display:flex; gap:10px; flex-wrap:wrap; }
  .pf-swatch{ width:30px; height:30px; border-radius:50%; cursor:pointer; border:3px solid var(--card); box-shadow:0 0 0 1.5px var(--line-strong); transition:transform .12s; }
  .pf-swatch:hover{ transform:scale(1.1); }
  .pf-swatch.sel{ box-shadow:0 0 0 2.5px var(--navy); }
  .pf-group{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; border:1.5px solid var(--line); margin-bottom:8px; }
  .pf-group.current{ border-color:var(--teal); background:var(--aqua-bg); }
  .pf-group-ic{ width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg, var(--teal), var(--teal-dark)); color:#fff; font-family:'Cairo',sans-serif; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .pf-group-name{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .pf-group-name b{ font-size:14px; }
  .pf-group-name em{ font-style:normal; font-size:11px; color:var(--teal-dark); font-weight:700; }
  .pf-group-actions{ display:flex; gap:6px; }
  .danger-text{ color:var(--danger) !important; }
  .pw-meter{ height:5px; background:var(--line); border-radius:5px; margin-top:8px; overflow:hidden; }
  .pw-meter i{ display:block; height:100%; width:0; border-radius:5px; transition:width .2s, background .2s; }
  .pw-meter-txt{ font-size:11.5px; color:var(--slate); margin-top:4px; min-height:16px; font-weight:600; }
  .pf-pw-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap; }
  .pf-show{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate); cursor:pointer; margin:0; }
  .pf-show input{ width:auto; margin:0; }
  .pf-danger{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-color:var(--danger-bg); }
  .pf-danger b{ font-size:14px; }
  .pf-sub{ font-size:12px; color:var(--slate); margin-top:2px; }
  .pf-savebar{ position:sticky; bottom:16px; margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--navy); color:#fff; border-radius:14px; padding:12px 18px; box-shadow:0 14px 34px rgba(8,58,92,.35); font-weight:700; font-size:13.5px; z-index:30; }
  .pf-savebar.hidden{ display:none; }
  @media (max-width:1000px){ .pf-grid{ grid-template-columns:1fr; } .pf-stats{ width:100%; } .pf-stats > div{ flex:1; } .pf-hero-body{ padding:0 18px 18px; } }
  @media (max-width:600px){ .pf-fields{ grid-template-columns:1fr; } .pf-avatar{ width:76px; height:76px; margin-top:-38px; font-size:25px; } }

  .pf-job{ font-size:14.5px; font-weight:600; color:var(--teal-dark); margin-top:2px; }

  /* ===================== WHAT'S NEW ===================== */
  .wn-card{ max-width:480px; text-align:start; }
  .wn-card h3, .wn-card .cg-icon{ text-align:center; }
  .wn-card .cg-icon{ margin-inline:auto; }
  .wn-version{ margin-top:14px; }
  .wn-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
  .wn-badge{ background:var(--navy); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; padding:3px 11px; border-radius:20px; }
  .wn-date{ font-size:12px; color:var(--slate-light); }
  .wn-new{ background:var(--aqua-bg); color:var(--teal-dark); font-size:11px; font-weight:800; padding:2px 9px; border-radius:20px; margin-inline-start:auto; }
  .wn-list{ list-style:none; padding:0; display:grid; gap:9px; }
  .wn-list li{ position:relative; padding-inline-start:26px; font-size:13.5px; line-height:1.7; }
  .wn-list li::before{ content:'✓'; position:absolute; inset-inline-start:0; top:2px; width:18px; height:18px; border-radius:50%; background:var(--aqua-bg); color:var(--teal-dark); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }

  .wn-badge{ font-family:'Cairo',sans-serif; font-weight:700; letter-spacing:0; }

  /* ===================== DASHBOARD (redesign) ===================== */
  .dh{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%); color:#fff; border-radius:20px; padding:26px 30px; margin-bottom:20px; position:relative; overflow:hidden; }
  .dh::after{ content:''; position:absolute; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(15,184,174,.35), transparent 70%); top:-140px; inset-inline-start:-80px; pointer-events:none; }
  .dh-text{ position:relative; z-index:1; }
  .dh h2{ font-family:'Cairo',sans-serif; font-weight:800; font-size:24px; margin-bottom:6px; }
  .dh p{ font-size:13.5px; color:#B9D8E4; max-width:460px; line-height:1.8; }
  .dh-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
  .btn.ghost.light{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25); }
  .btn.ghost.light:hover{ background:rgba(255,255,255,.18); }
  .dh .progress-ring{ position:relative; z-index:1; display:flex; align-items:center; background:rgba(255,255,255,0.1); padding:16px 26px; border-radius:18px; text-align:center; }
  .dh .progress-ring .num{ font-family:'Cairo',sans-serif; font-size:32px; font-weight:800; line-height:1.1; }
  .dh .progress-ring .lbl{ font-size:11.5px; color:#B9D8E4; margin-top:2px; }
  .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
  .kpi{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .15s, border-color .15s; }
  .kpi:hover{ transform:translateY(-2px); border-color:var(--teal); }
  .kpi b{ display:block; font-family:'Cairo',sans-serif; font-size:26px; font-weight:800; line-height:1.1; }
  .kpi span{ font-size:12.5px; color:var(--slate); font-weight:600; }
  .kpi-ic{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .kpi-ic svg{ width:21px; height:21px; }
  .kpi-ic.c1{ background:var(--aqua-bg); color:var(--teal-dark); } .kpi-ic.c2{ background:var(--danger-bg); color:var(--danger); }
  .kpi-ic.c3{ background:var(--warning-bg); color:#9A6A08; } .kpi-ic.c4{ background:var(--success-bg); color:var(--success); }
  .dash-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start; }
  .dash-main, .dash-side{ display:flex; flex-direction:column; gap:20px; min-width:0; }
  .drow{ display:flex; align-items:center; gap:12px; padding:11px 8px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:10px; }
  .drow:last-child{ border-bottom:none; }
  .drow:hover{ background:var(--aqua-bg); }
  .drow-main{ flex:1; min-width:0; }
  .drow-title{ font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .drow-sub{ display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }
  .drow-sub .badge{ font-size:10.5px; padding:2px 8px; }
  .dash-empty{ text-align:center; color:var(--slate-light); font-size:13px; padding:22px 10px; }
  .week-bars{ display:flex; align-items:flex-end; gap:8px; height:140px; }
  .wb{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; }
  .wb-n{ font-size:11px; font-weight:800; color:var(--slate); min-height:14px; font-family:'IBM Plex Mono',monospace; }
  .wb-track{ flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; }
  .wb-track i{ display:block; width:100%; max-width:24px; min-height:4px; background:var(--line-strong); border-radius:6px 6px 2px 2px; transition:height .3s; }
  .wb.today .wb-track i{ background:var(--teal); } .wb.late .wb-track i{ background:var(--danger); }
  .wb em{ font-style:normal; font-size:10.5px; color:var(--slate-light); font-weight:600; white-space:nowrap; }
  @media (max-width:1000px){ .kpis{ grid-template-columns:repeat(2,1fr); } .dash-grid{ grid-template-columns:1fr; } .dh{ padding:20px; } }
  @media (max-width:600px){ .kpi{ padding:12px; gap:10px; } .kpi b{ font-size:22px; } .kpi-ic{ width:38px; height:38px; } .dh .progress-ring{ width:100%; } }

  /* ===================== TASK MODAL (two columns) ===================== */
  .modal-overlay{ z-index:200; }
  .modal-box.md-wide{ max-width:1040px; max-height:92vh; }
  .modal-box.md-wide.focus-mode{ max-width:760px; max-height:96vh; }
  .md-layout{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); gap:26px; align-items:start; }
  .md-title-input{ width:100%; font-family:'Cairo',sans-serif; font-weight:800; font-size:20px; padding:10px 12px; border:1.5px solid transparent; background:transparent; border-radius:12px; margin-bottom:10px; }
  .md-title-input:hover{ border-color:var(--line); }
  .md-title-input:focus{ border-color:var(--teal); background:var(--card); outline:none; }
  .md-field{ margin-bottom:14px; }
  .md-block{ margin:20px 0; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
  .md-side{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px; position:sticky; top:0; }
  .md-prop label{ font-size:11.5px; color:var(--slate); font-weight:700; margin-bottom:5px; display:block; }
  .md-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .md-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin:22px 0 14px; }
  .md-tab{ border:none; background:none; font-family:'Cairo',sans-serif; font-weight:800; font-size:13.5px; color:var(--slate); padding:10px 14px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px; display:inline-flex; gap:8px; align-items:center; }
  .md-tab.active{ color:var(--teal-dark); border-bottom-color:var(--teal); }
  .modal-box.focus-mode .md-layout{ grid-template-columns:1fr; }
  .modal-box.focus-mode .md-side{ display:none; }
  @media (max-width:860px){ .md-layout{ grid-template-columns:1fr; } .md-side{ position:static; } .modal-overlay{ padding:0; align-items:flex-end; } .modal-box.md-wide{ max-height:94vh; border-radius:20px 20px 0 0; } }

  /* ===================== MEMBERS (cards) ===================== */
  .mcard{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px; transition:transform .15s, box-shadow .15s; min-width:0; }
  .mcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
  .mcard.is-owner{ border-color:var(--warning); }
  .mc-top{ display:flex; align-items:center; gap:12px; }
  .mc-avatar{ width:52px; height:52px; border-radius:50%; color:#fff; font-family:'Cairo',sans-serif; font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }
  .mc-id{ flex:1; min-width:0; cursor:pointer; }
  .mc-id b{ display:block; font-family:'Cairo',sans-serif; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mc-id b em{ font-style:normal; font-size:11px; color:var(--teal-dark); background:var(--aqua-bg); padding:1px 8px; border-radius:20px; margin-inline-start:4px; }
  .mc-id span{ font-size:12.5px; color:var(--slate); }
  .mc-actions{ display:flex; gap:4px; opacity:0; transition:opacity .12s; }
  .mcard:hover .mc-actions{ opacity:1; }
  .mc-pills{ display:flex; gap:6px; flex-wrap:wrap; }
  .mc-load-top{ display:flex; justify-content:space-between; font-size:11.5px; font-weight:700; color:var(--slate); margin-bottom:6px; }
  .mc-bar{ height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
  .mc-bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--success)); border-radius:6px; }
  .mc-contact{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--slate-light); border-top:1px dashed var(--line); padding-top:10px; }
  .mc-contact span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:start; }
  @media (max-width:1000px){ .mc-actions{ opacity:1; } }

  /* ===================== ACTIVITY (timeline) ===================== */
  .act-timeline{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:8px 22px 14px; }
  .act-timeline .activity-group-label{ padding-top:18px; }
  .act-timeline .activity-item{ position:relative; border-bottom:none; padding:10px 0 10px 0; }
  .act-timeline .activity-item::before{ content:''; position:absolute; inset-inline-start:16px; top:0; bottom:0; width:2px; background:var(--line); z-index:0; }
  .act-timeline .activity-item .ai-ic{ position:relative; z-index:1; border:3px solid var(--card); box-sizing:content-box; width:32px; height:32px; }

  /* ===================== NOTIFICATIONS ===================== */
  .notif-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .notif-markall{ border:none; background:none; color:var(--teal-dark); font-family:inherit; font-weight:700; font-size:11.5px; cursor:pointer; }
  .notif-group{ font-size:11px; font-weight:800; color:var(--slate-light); padding:10px 16px 4px; text-transform:uppercase; letter-spacing:.3px; background:var(--paper); }
  .notif-item{ position:relative; }
  .notif-item.is-read{ opacity:.6; }
  .ni-dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); flex-shrink:0; align-self:center; }

  /* ===================== CALENDAR / TIMELINE (polish + mobile) ===================== */
  .cal-grid{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:10px; }
  .cal-cell:hover{ border-color:var(--teal); }
  .cal-chip{ font-size:10.5px; padding:3px 7px; font-weight:600; }
  @media (max-width:700px){
    .cal-grid{ gap:3px; padding:6px; }
    .cal-cell{ min-height:56px; padding:3px; border-radius:7px; }
    .cal-cell .cd-num{ font-size:10px; }
    .cal-chip{ font-size:0; width:8px; height:8px; padding:0; border-radius:50%; display:inline-block; margin:1px; background:var(--teal); }
    .cal-chip.late{ background:var(--danger); } .cal-chip.done{ background:var(--success); }
    .cal-dow{ font-size:9.5px; }
  }

  /* ===================== MOTION / A11Y / SKELETON ===================== */
  @keyframes rise-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  .pf-card, .adm-card{ animation:rise-in .28s ease both; }
  :focus-visible{ outline:2.5px solid var(--teal); outline-offset:2px; border-radius:6px; }
  input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none; }
  :root{ --slate-light:#6B7D8C; }
  body.dark{ --slate-light:#8CA0B2; }
  @keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
  .skel-row{ display:flex; align-items:center; gap:12px; padding:12px 8px; }
  .skel-row i, .skel-row b, .skel-row u{ display:block; border-radius:8px; background:linear-gradient(90deg, var(--line) 25%, var(--paper) 50%, var(--line) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite linear; }
  .skel-row i{ width:22px; height:22px; border-radius:50%; flex-shrink:0; }
  .skel-row > div{ flex:1; display:flex; flex-direction:column; gap:7px; }
  .skel-row b{ height:12px; width:60%; } .skel-row u{ height:9px; width:35%; text-decoration:none; }
  @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }

  /* ===================== GUIDED TOUR ===================== */
  #tour-layer{ position:fixed; inset:0; z-index:700; }
  .tour-hl{ position:fixed; border-radius:12px; box-shadow:0 0 0 9999px rgba(8,17,25,.62); border:2px solid var(--teal); transition:all .25s ease; pointer-events:none; }
  .tour-pop{ position:fixed; background:var(--card); color:var(--ink); border-radius:16px; padding:16px 18px; box-shadow:0 20px 50px rgba(0,0,0,.4); transition:top .25s ease, left .25s ease; }
  .tour-pop h4{ font-family:'Cairo',sans-serif; font-size:15px; margin:2px 0 6px; }
  .tour-pop p{ font-size:13px; color:var(--slate); line-height:1.7; margin-bottom:12px; }
  .tour-count{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--slate-light); }
  .tour-actions{ display:flex; justify-content:space-between; gap:8px; }

  /* ===================== DARK MODE / EN fixes ===================== */
  .btn{ white-space:nowrap; }
  body.dark .btn.ghost{ color:var(--ink); border-color:var(--line-strong); background:transparent; }
  body.dark .btn.ghost.light{ color:#fff; }
  body.dark .reminder-banner{ background:#2b2410; border-color:#6b5517; color:#F1D58A; }
  body.dark .reminder-banner .ric{ background:#46391a; color:#E4C063; }
  body.dark .adm-note{ background:#102a2e; }
  body.dark .ann-banner{ background:#102a2e; }
  body.dark .ann-banner.warning{ background:#2b2410; color:#E4C063; }
  body.dark .md-side, body.dark .md-block{ background:var(--paper-2); }
  body.dark .pf-stats > div{ background:var(--paper-2); }
  body.dark .tgroup-head{ background:var(--paper-2); }
  body.dark .due-pill, body.dark .pr-chip{ background:var(--paper-2); }
  body.dark .due-pill.late, body.dark .pr-chip.p-critical{ background:#3a1a1c; color:#FF8D91; }
  body.dark .due-pill.soon, body.dark .pr-chip.p-med{ background:#2b2410; color:#E4C063; }
  body.dark .pr-chip.p-high{ background:#33201a; color:#F29A78; }
  body.dark .pr-chip.p-low{ background:#112a2c; color:var(--teal-light); }
  body.dark .role-pill{ background:#112a2c; color:var(--teal-light); }
  body.dark .role-pill.adm-bad{ background:#3a1a1c; color:#FF8D91; }

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

  /* =====================================================================
     WORKSPACE THEME — formal navy / steel-blue identity (overrides earlier rules)
     ===================================================================== */
  :root{
    --navy:#0B2A45; --navy-2:#123A5E; --navy-3:#1B4F85;
    --teal:#1F5FBF; --teal-dark:#174C99; --teal-light:#8DB6F2; --aqua-bg:#E9F0FC;
    --ink:#0E2236; --slate:#5B7088; --slate-light:#667B92;
    --paper:#EEF2F7; --card:#FFFFFF; --line:#D9E2EC; --line-strong:#C3D0DE;
    --shadow-sm:0 1px 2px rgba(11,42,69,.06), 0 6px 18px rgba(11,42,69,.05);
    --shadow-md:0 2px 4px rgba(11,42,69,.06), 0 14px 32px rgba(11,42,69,.09);
    --radius:14px;
  }
  body.dark{
    --navy:#0F2033; --navy-2:#13283F; --navy-3:#1B3A5C;
    --teal:#5B9BFF; --teal-dark:#8DB6F2; --teal-light:#B7D1F7; --aqua-bg:#12294A;
    --ink:#E7EFF8; --slate:#8CA3BC; --slate-light:#8CA3BC;
    --paper:#08121E; --paper-2:#0C1A2B; --card:#0F2033; --line:#1F3550; --line-strong:#2B4565;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.28);
    --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.35);
  }
  body{ background:var(--paper); }
  body::before{
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
    background:
      radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 70%),
      radial-gradient(700px 380px at 5% 0%, color-mix(in srgb, #0FB8AE 9%, transparent), transparent 70%),
      linear-gradient(var(--line) 1px, transparent 1px) 0 0/48px 48px,
      linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/48px 48px;
    -webkit-mask-image:linear-gradient(#000 0, transparent 60%); mask-image:linear-gradient(#000 0, transparent 60%);
  }
  .app{ position:relative; z-index:1; }
  .card, .stat, .mcard, .kpi, .pf-card, .tlist, .adm-card{ box-shadow:var(--shadow-sm); }
  .card, .kpi, .mcard{ border-radius:18px; }

  /* top navigation: light bar, navy active pill */
  .topnav{ background:color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--ink); box-shadow:0 1px 0 var(--line); border-bottom:1px solid var(--line); }
  .topnav .brand h2{ color:var(--ink); }
  .topnav .brand .mark{ background:linear-gradient(135deg, #0B2A45, #1F5FBF); box-shadow:0 6px 16px rgba(11,42,69,.28); }
  .topnav .brand .version-tag{ color:var(--slate-light); }
  .topnav .group-switcher-btn{ background:var(--card); border:1px solid var(--line); color:var(--ink); }
  .topnav .group-switcher-btn:hover{ border-color:var(--teal); background:var(--card); }
  .topnav .group-add-btn{ border:1px dashed var(--line-strong); color:var(--slate); }
  .topnav .group-add-btn:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }
  .topnav .nav-item{ color:var(--slate); }
  .topnav .nav-item:hover{ background:var(--aqua-bg); color:var(--ink); }
  .topnav .nav-item.active{ background:var(--navy); color:#fff; box-shadow:0 4px 12px rgba(11,42,69,.22); }
  body.dark .topnav .nav-item.active{ background:var(--teal); color:#06101c; }
  .topnav .search-box{ background:var(--paper); border-color:var(--line); }
  .topnav .search-box input{ color:var(--ink); }
  .topnav .search-box input::placeholder, .topnav .search-box svg{ color:var(--slate-light); }
  .topnav .bell{ background:var(--card); border-color:var(--line); }
  .topnav .bell svg{ color:var(--slate); }
  .topnav .bell .dot{ border-color:var(--card); }
  .topnav #lang-toggle{ color:var(--slate); border:1px solid var(--line); background:var(--card); }
  .topnav #lang-toggle:hover{ border-color:var(--teal); background:var(--card); }
  .topnav .sidebar-user{ background:transparent; }
  .topnav .sidebar-user:hover{ background:var(--aqua-bg); }
  .topnav .sidebar-user .n{ color:var(--ink); }
  .topnav .sidebar-user .r, .topnav .su-chev{ color:var(--slate); }
  .topnav .sidebar-user .av{ color:#fff; }
  .topbar{ background:var(--paper); border-bottom:none; }
  .topbar h1{ color:var(--ink); }

  /* hero + command bar */
  .ws-hero{ margin-bottom:18px; }
  .ws-hero h1{ font-family:'Cairo',sans-serif; font-weight:900; font-size:clamp(24px,3.6vw,38px); line-height:1.3; color:var(--ink); }
  .ws-hero h1 em{ font-style:normal; color:var(--teal); }
  .ws-sub{ color:var(--slate); margin:4px 0 16px; }
  .ws-cmd{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:6px 14px; box-shadow:var(--shadow-sm); transition:box-shadow .2s, border-color .2s; }
  .ws-cmd:focus-within{ border-color:var(--teal); box-shadow:0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent), var(--shadow-sm); }
  .ws-cmd > span:first-child{ color:var(--teal); font-size:15px; }
  .ws-cmd input{ flex:1; border:none !important; background:transparent !important; box-shadow:none !important; font-size:16px; padding:12px 4px; color:var(--ink); }
  .ws-kbd{ font:600 11px monospace; color:var(--slate); border:1px solid var(--line); padding:3px 8px; border-radius:7px; background:var(--paper); }
  .ws-chips{ display:flex; gap:8px; flex-wrap:wrap; min-height:34px; margin:10px 2px 4px; }
  .ws-chip{ padding:5px 12px; border-radius:8px; font-size:12.5px; font-weight:700; background:var(--card); border:1px solid var(--line); animation:ws-pop .25s cubic-bezier(.3,1.6,.5,1); }
  .ws-chip.c-due{ background:color-mix(in srgb, #D99A1E 14%, transparent); color:#9A6A08; border-color:color-mix(in srgb, #D99A1E 35%, transparent); }
  .ws-chip.c-who{ background:color-mix(in srgb, var(--teal) 12%, transparent); color:var(--teal-dark); border-color:color-mix(in srgb, var(--teal) 30%, transparent); }
  .ws-chip.c-sec{ background:color-mix(in srgb, #0FB8AE 14%, transparent); color:#0A8F88; border-color:color-mix(in srgb, #0FB8AE 35%, transparent); }
  .ws-chip.c-pr{ background:color-mix(in srgb, #D64545 12%, transparent); color:#D64545; border-color:color-mix(in srgb, #D64545 35%, transparent); }
  body.dark .ws-chip.c-due{ color:#E5AC3B; } body.dark .ws-chip.c-sec{ color:#2CD4C6; }
  @keyframes ws-pop{ from{ transform:scale(.5); opacity:0; } }
  .ws-hint{ color:var(--slate-light); font-size:12.5px; padding:5px 2px; }

  /* sections progress */
  .ws-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:20px; margin:20px 0; }
  .ws-card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px 22px; box-shadow:var(--shadow-sm); min-width:0; }
  .ws-card-t{ font-family:'Cairo',sans-serif; font-weight:800; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
  .ws-card-t small{ color:var(--slate); font-weight:500; font-size:12px; }
  #ws-sections{ display:flex; flex-direction:column; gap:4px; }
  .sp-row{ padding:10px 10px; border-radius:12px; cursor:pointer; transition:background .15s; }
  .sp-row:hover{ background:var(--aqua-bg); }
  .sp-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
  .sp-name{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; min-width:0; }
  .sp-name i{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
  .sp-nums{ font-size:12.5px; color:var(--slate); display:flex; align-items:center; gap:8px; white-space:nowrap; font-family:'IBM Plex Mono',monospace; }
  .sp-nums b{ color:var(--ink); }
  .sp-late{ font-style:normal; font-family:Tajawal,sans-serif; font-size:11px; font-weight:700; color:#D64545; background:color-mix(in srgb, #D64545 12%, transparent); padding:2px 8px; border-radius:20px; }
  .sp-bar{ height:8px; border-radius:8px; background:var(--line); overflow:hidden; }
  .sp-bar i{ display:block; height:100%; border-radius:8px; transition:width .5s; }
  .ws-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:34px 10px; color:var(--slate); text-align:center; }
  .ws-card .week-bars{ height:170px; }
  @media (max-width:1000px){ .ws-grid{ grid-template-columns:1fr; } }
  #ws-spot{ position:fixed; left:0; top:0; width:460px; height:460px; border-radius:50%; pointer-events:none; z-index:0; background:radial-gradient(circle, color-mix(in srgb, var(--teal) 8%, transparent), transparent 65%); will-change:transform; }
  .kpi[data-tilt="1"], .mcard[data-tilt="1"]{ transition:transform .1s ease-out; }
  @media (prefers-reduced-motion:reduce){ #ws-spot{ display:none; } }

  /* ===================== ADMIN (product health, settings, modals) ===================== */
  .adm-two{ display:grid; grid-template-columns:1.1fr 1fr; gap:18px; margin-top:18px; }
  .adm-card small{ font-size:11.5px; color:var(--slate-light); font-weight:500; }
  .adm-help{ font-size:12.5px; color:var(--slate); line-height:1.7; margin-bottom:10px; }
  .adm-funnel{ display:flex; flex-direction:column; gap:14px; margin-top:6px; }
  .af-top{ display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:6px; }
  .af-top em{ font-style:normal; color:var(--slate); font-weight:600; font-size:12px; }
  .af-bar{ height:10px; border-radius:10px; background:var(--line); overflow:hidden; }
  .af-bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--teal-dark)); border-radius:10px; transition:width .5s; }
  .adm-toolbar select{ max-width:190px; }
  .adm-row{ cursor:pointer; }
  .adm-row:hover td{ background:var(--aqua-bg); }
  .adm-modal{ max-width:520px; text-align:start; }
  .adm-modal h3{ font-size:18px; margin-bottom:4px; } .adm-modal h4{ font-family:'Cairo',sans-serif; font-size:13px; margin:16px 0 8px; }
  .adm-modal select{ margin-top:10px; }
  .adm-um-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
  .adm-kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:13px; background:var(--paper); border-radius:12px; padding:12px 14px; }
  .adm-kv span{ color:var(--slate); } .adm-kv b{ font-weight:700; }
  .adm-mgs{ display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; }
  .adm-mg{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; font-size:13px; font-weight:600; }
  .adm-um-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .adm-settings{ max-width:860px; }
  .adm-sec{ font-family:'Cairo',sans-serif; font-size:14px; color:var(--teal-dark); margin:18px 0 4px; padding-bottom:6px; border-bottom:1px solid var(--line); }
  .adm-sec:first-child{ margin-top:0; }
  .adm-set{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); }
  .adm-set:last-of-type{ border-bottom:none; }
  .adm-set h4{ font-size:14px; margin-bottom:3px; } .adm-set p{ font-size:12.5px; color:var(--slate); max-width:420px; line-height:1.6; }
  .adm-set-ctl{ flex-shrink:0; }
  .adm-kvr{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
  .adm-kvr:last-child{ border-bottom:none; } .adm-kvr span{ color:var(--slate); }
  @media (max-width:900px){ .adm-two{ grid-template-columns:1fr; } .adm-set{ flex-direction:column; align-items:flex-start; gap:10px; } .adm-set-ctl input:not([type=checkbox]){ width:100% !important; } }

  /* ===================== FILES ===================== */
  .files-head{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
  .files-head input[type=text], .files-head input:not([type]){ flex:1; min-width:200px; max-width:360px; }
  .files-head select{ max-width:200px; }
  .files-quota{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 16px; margin-bottom:14px; max-width:520px; }
  .fq-top{ display:flex; justify-content:space-between; font-size:13px; color:var(--slate); font-weight:600; }
  .fq-top b{ color:var(--ink); font-family:'IBM Plex Mono',monospace; }
  .fq-bar{ height:7px; border-radius:7px; background:var(--line); margin-top:8px; overflow:hidden; }
  .fq-bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--teal-dark)); border-radius:7px; }
  .dropzone{ border:2px dashed var(--line-strong); border-radius:16px; background:var(--card); padding:22px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; cursor:pointer; margin-bottom:16px; transition:border-color .15s, background .15s; color:var(--slate); }
  .dropzone svg{ width:26px; height:26px; color:var(--teal); }
  .dropzone b{ color:var(--ink); font-size:14px; } .dropzone span{ font-size:12.5px; }
  .dropzone:hover, .dropzone.over, .att-zone-over{ border-color:var(--teal); background:var(--aqua-bg); }
  .frow{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-top:1px solid var(--line); }
  .files-table .frow:first-child{ border-top:none; }
  .f-badge{ width:40px; height:40px; border-radius:11px; color:#fff; font:800 10.5px 'IBM Plex Mono',monospace; display:flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:.3px; }
  .f-main{ flex:1; min-width:0; }
  .f-name{ display:block; font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .f-name:hover{ color:var(--teal-dark); }
  .f-sub{ font-size:12px; color:var(--slate); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .f-task{ color:var(--teal-dark); font-weight:700; text-decoration:none; }
  .f-size{ font-size:12px; color:var(--slate); font-family:'IBM Plex Mono',monospace; white-space:nowrap; }
  .f-actions{ display:flex; gap:4px; }
  .f-actions .icon-btn{ display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--slate); }
  .att-row{ display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:10px; }
  .att-row:hover{ background:var(--card); }
  .att-row .f-badge{ width:32px; height:32px; font-size:9px; border-radius:9px; }
  .att-name{ flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .att-name:hover{ color:var(--teal-dark); }
  .att-size{ font-size:11.5px; color:var(--slate); font-family:'IBM Plex Mono',monospace; }
  .att-del{ border:none; background:none; color:var(--slate-light); font-size:20px; line-height:1; cursor:pointer; padding:0 6px; border-radius:6px; }
  .att-del:hover{ color:var(--danger); background:var(--danger-bg); }
  .att-hint{ font-size:11.5px; color:var(--slate-light); text-align:center; margin-top:8px; }
  #md-attach-zone.over{ border-color:var(--teal); background:var(--aqua-bg); }
  .tr-cm.att{ color:var(--teal-dark); }
  #upload-progress{ position:fixed; bottom:calc(88px + env(safe-area-inset-bottom, 0px)); inset-inline-end:18px; z-index:800; display:flex; flex-direction:column; gap:8px; width:min(300px, calc(100vw - 36px)); }
  .up-item{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow-md); font-size:12.5px; }
  .up-name{ font-weight:700; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .up-bar{ height:5px; border-radius:5px; background:var(--line); overflow:hidden; }
  .up-bar i{ display:block; height:100%; width:0; background:var(--teal); transition:width .15s; }
  .up-item.ok .up-bar i{ background:#159C74; } .up-item.err{ border-color:var(--danger); } .up-item.err .up-name{ color:var(--danger); white-space:normal; }
  @media (max-width:700px){ .f-size{ display:none; } .frow{ padding:10px 12px; } }

  /* ===================== EMAIL / IMPORT UI ===================== */
  .pf-verify{ margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .verify-banner .ib-actions{ align-items:center; }
  .imp-map{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin-top:8px; }
  .imp-col{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--slate); }
  .imp-col span{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .imp-col select{ padding:6px 8px; font-size:12px; }
  #csv-modal .cg-card{ max-width:640px; text-align:start; }
  .adm-mail-list{ margin-top:12px; display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; }
  .adm-mrow{ display:flex; align-items:center; gap:10px; font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--line); }
  .adm-mrow span:nth-child(2){ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .adm-mrow em{ font-style:normal; color:var(--slate-light); direction:ltr; }

/* ================= Batch 2: saved views, dependencies, templates, automations, calendar ================= */
.views-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; }
.view-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 14px; border:1px solid var(--line-strong); border-radius:999px; background:var(--card); color:var(--ink); font-size:13px; cursor:pointer; transition:border-color .15s, background .15s; }
.view-chip:hover{ border-color:var(--navy-3); }
.view-chip.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.view-chip i{ font-style:normal; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; opacity:.55; line-height:1; }
.view-chip i:hover{ opacity:1; background:rgba(127,127,127,.25); }
.view-save{ border:1px dashed var(--line-strong); background:transparent; color:var(--slate); border-radius:999px; padding:6px 14px; font-size:13px; cursor:pointer; font-family:inherit; }
.view-save:hover{ color:var(--ink); border-color:var(--navy-3); }

.dep-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin-bottom:6px; background:var(--card); }
.dep-item a{ flex:1; min-width:0; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dep-item.done a{ text-decoration:line-through; color:var(--slate); }
.dep-item em{ font-style:normal; font-size:12px; color:var(--slate); }
.dep-st{ width:9px; height:9px; border-radius:50%; background:var(--slate-light); flex:none; }
.dep-st.progress{ background:#1F5FBF; } .dep-st.blocked{ background:var(--danger); } .dep-st.done{ background:#2E9E6B; }
.dep-add{ display:flex; gap:8px; margin-top:8px; } .dep-add select{ flex:1; min-width:0; }
.tr-cm.dep{ color:#B7791F; }

.tpl-list{ display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow:auto; margin-top:10px; }
.tpl-row{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; }
.tpl-row > div{ flex:1; min-width:0; display:flex; flex-direction:column; } .tpl-row span{ font-size:12px; color:var(--slate); }

.auto-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.auto-row > div{ display:flex; flex-direction:column; gap:3px; } .auto-row span{ font-size:13px; color:var(--slate); }
.auto-days{ margin-top:8px; display:flex !important; flex-direction:row !important; align-items:center; gap:8px; font-size:13px; }
.auto-days input{ width:70px; }

.cal-url input{ width:100%; font-family:'IBM Plex Mono',monospace; font-size:12px; direction:ltr; text-align:left; }

/* ================= Batch 3: approvals, tokens, webhooks, guests ================= */
.appr-toggle{ display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.appr-state{ margin:10px 0; padding:9px 12px; border-radius:10px; border:1px solid var(--line); display:flex; flex-direction:column; gap:2px; font-size:13px; }
.appr-state.pending{ border-color:#E0B24A; background:rgba(224,178,74,.12); }
.appr-state.approved{ border-color:#2E9E6B; background:rgba(46,158,107,.12); }
.appr-state.rejected{ border-color:var(--danger); background:var(--danger-bg); }
.appr-state span{ color:var(--slate); }
.appr-actions{ display:flex; gap:8px; margin-top:8px; } .appr-actions select{ flex:1; min-width:0; }
.tr-cm.appr.ok{ color:#2E9E6B; } .tr-cm.appr.bad{ color:var(--danger); } .tr-cm.appr.wait{ color:#B7791F; }
.tok-row{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }
.tok-row > div{ flex:1; min-width:0; display:flex; flex-direction:column; } .tok-row span{ font-size:12px; color:var(--slate); }
.wh-events{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:13px; } .wh-events label{ display:flex; align-items:center; gap:5px; }

/* ================= LOGIN — full redesign (split screen) ================= */
.login-overlay{ padding:0; display:block; overflow:auto; background:var(--paper); }
.lx{ min-height:100vh; display:grid; grid-template-columns:minmax(380px, 5fr) 7fr; }
.lx-form{ background:var(--card); display:flex; flex-direction:column; padding:28px clamp(24px, 5vw, 64px); min-width:0; }
.lx-bar{ display:flex; align-items:center; justify-content:space-between; }
.lx-brand{ display:flex; align-items:center; gap:12px; }
.lx-mark{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, var(--navy-3), var(--navy)); box-shadow:0 6px 16px rgba(11,42,69,.25); }
.lx-mark svg{ width:21px; height:21px; }
.lx-wordmark{ font-family:'Cairo',sans-serif; font-weight:900; font-size:22px; color:var(--ink); }
.lx .login-lang{ position:static; }
.lx-card{ margin:auto 0; width:100%; max-width:400px; align-self:center; padding:28px 0; }
.lx-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--paper); border-radius:12px; margin-bottom:26px; }
.lx-tab{ border:0; background:transparent; padding:9px 10px; border-radius:9px; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--slate); cursor:pointer; transition:background .15s, color .15s, box-shadow .15s; }
.lx-tab.active{ background:var(--card); color:var(--navy); box-shadow:var(--shadow-sm); }
.lx-card h2{ font-family:'Cairo',sans-serif; font-weight:800; font-size:26px; color:var(--ink); margin:0 0 6px; text-align:start; }
.lx-sub{ color:var(--slate); font-size:13.5px; line-height:1.8; margin:0 0 22px; text-align:start; }
.lx-field{ margin-bottom:14px; text-align:start; }
.lx-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.lx-field input{ width:100%; padding:12px 14px; border-radius:11px; border:1.5px solid var(--line-strong); background:var(--card); color:var(--ink); font-family:inherit; font-size:14px; transition:border-color .15s, box-shadow .15s; }
.lx-field input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(31,95,191,.14); }
.lx-field.hidden{ display:none; }
.lx-pw{ position:relative; }
.lx-pw input{ padding-inline-end:46px; }
.lx-eye{ position:absolute; inset-block:0; inset-inline-end:6px; width:38px; border:0; background:transparent; color:var(--slate); cursor:pointer; display:grid; place-items:center; border-radius:9px; }
.lx-eye svg{ width:18px; height:18px; } .lx-eye:hover, .lx-eye.on{ color:var(--teal); }
.lx-forgot{ text-align:end; margin:-4px 0 18px; font-size:12.5px; }
.lx-forgot.hidden{ display:none; }
.lx-forgot a{ color:var(--teal); font-weight:700; text-decoration:none; } .lx-forgot a:hover{ text-decoration:underline; }
.lx-submit{ width:100%; justify-content:center; padding:13px; font-size:15px; border-radius:11px; }
.lx-switch{ display:none; }
.lx-foot{ text-align:center; color:var(--slate-light); font-size:12px; margin:0; }
.lx-foot::before{ content:'🔒 '; }
.lx #login-error{ text-align:start; margin-bottom:16px; }

.lx-visual{ position:relative; overflow:hidden; color:#fff; display:flex; align-items:center; padding:56px clamp(28px, 5vw, 80px);
  background:radial-gradient(900px 500px at 85% -10%, rgba(78,140,230,.38), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(31,95,191,.35), transparent 60%), linear-gradient(160deg, #0F3354 0%, #0B2A45 55%, #071C30 100%); }
.lx-visual::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); }
.lx-vcontent{ position:relative; max-width:640px; width:100%; margin-inline:auto; }
.lx-pill{ display:inline-block; padding:6px 14px; border:1px solid rgba(255,255,255,.22); border-radius:999px; font-size:12.5px; font-weight:700; color:#CFE0F6; background:rgba(255,255,255,.06); margin-bottom:18px; }
.lx-visual h1{ font-family:'Cairo',sans-serif; font-weight:900; font-size:clamp(28px, 3.4vw, 42px); line-height:1.35; margin:0 0 14px; text-wrap:balance; }
.lx-visual p{ color:#B5CBE4; font-size:15.5px; line-height:1.9; margin:0 0 30px; max-width:520px; }

.lx-board{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; padding:14px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); box-shadow:0 30px 60px rgba(0,0,0,.35); animation:lxFloat 7s ease-in-out infinite; }
@keyframes lxFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.lx-col{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.lx-ch{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:#DCE9F9; padding:2px 2px 4px; }
.lx-ch b{ margin-inline-start:auto; background:rgba(255,255,255,.14); border-radius:999px; padding:1px 8px; font-size:11px; }
.lx-ch .d{ width:8px; height:8px; border-radius:50%; } .d.pend{ background:#9FB2C8; } .d.prog{ background:#5EA0FF; } .d.done{ background:#45C28C; }
.lx-task{ background:#fff; color:var(--ink); border-radius:12px; padding:11px 12px; display:flex; flex-direction:column; gap:9px; box-shadow:0 6px 16px rgba(0,0,0,.18); }
.lx-t{ font-size:12.5px; font-weight:700; line-height:1.5; display:flex; gap:6px; align-items:flex-start; }
.lx-task.dn{ background:rgba(255,255,255,.92); color:#5B7088; } .lx-task.dn .lx-t svg{ width:14px; height:14px; color:#2E9E6B; flex:none; margin-top:2px; }
.lx-m{ display:flex; align-items:center; justify-content:space-between; }
.lx-m em{ font-style:normal; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:#E9F0FC; color:#1F5FBF; } .lx-m em.hi{ background:#FDE9E9; color:#C23B3B; }
.av{ width:22px; height:22px; border-radius:50%; } .av.a1{ background:#1F5FBF; } .av.a2{ background:#E0A33A; } .av.a3{ background:#2E9E6B; }
.lx-bar2{ height:5px; border-radius:99px; background:#E3EAF3; overflow:hidden; } .lx-bar2 i{ display:block; height:100%; background:linear-gradient(90deg, #1F5FBF, #5EA0FF); border-radius:99px; animation:lxFill 3.2s ease-in-out infinite alternate; }
@keyframes lxFill{ from{ width:40% } to{ width:78% } }

.lx-points{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px; }
.lx-points li{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:#CFE0F6; }
.lx-points svg{ width:16px; height:16px; color:#6FD1A5; flex:none; }

@media (max-width:980px){
  .lx{ grid-template-columns:1fr; }
  .lx-visual{ display:none; }
  .lx-form{ min-height:100vh; padding:22px 20px; }
}
@media (prefers-reduced-motion:reduce){ .lx-board, .lx-bar2 i{ animation:none; } }

/* styled confirm / prompt dialogs */
.ui-dialog{ max-width:420px; text-align:start; }
.ui-dialog h3{ margin:0 0 8px; font-family:'Cairo',sans-serif; }
.ui-dialog .ui-msg{ white-space:pre-line; color:var(--ink); line-height:1.8; margin:0 0 16px; font-size:14.5px; }
.ui-dialog input{ width:100%; margin-bottom:14px; }
.ui-dialog .cg-actions{ display:flex; gap:10px; justify-content:flex-end; }

/* two-step verification */
.tf-qr{ display:grid; place-items:center; margin:12px 0; } .tf-qr img{ border:1px solid var(--line); border-radius:14px; padding:8px; background:#fff; }
.tf-codes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; } .tf-codes code{ background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-family:'IBM Plex Mono',monospace; font-size:13px; text-align:center; }
.tf-on{ color:#2E9E6B; }

/* detailed guided tour */
#tour-layer{ z-index:950; }
.tour-pop{ max-width:calc(100vw - 24px); }
.tour-pop.tour-center{ text-align:start; }
.tour-pop.tour-center h4{ font-size:19px; }
.tour-pop.tour-center p{ font-size:14px; }
.tour-bar{ height:4px; border-radius:99px; background:var(--line); overflow:hidden; margin-bottom:10px; }
.tour-bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--teal-light)); border-radius:99px; transition:width .3s ease; }
.tour-nav{ display:flex; gap:8px; }