/* =====================================================================
   Life OS · نظام التصميم «مِحْوَر» — lifeos.css  v1.0 (2026-10)
   Order: tokens → base → icons → shell → controls → data → overlays →
          states → patterns → phone (iOS/Android) → widgets → utilities
   Fonts: IBM Plex Sans Arabic (UI/body, OFL 1.1) · Markazi Text (display, OFL 1.1)
   Every color pair below meets ≥4.5:1 for text (≥3:1 for ≥24px display).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
.lo{
  --font-ui:"IBM Plex Sans Arabic","Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif;
  --font-display:"Markazi Text","Noto Naskh Arabic","Times New Roman",serif;

  --bg:#F5F5F3; --surface:#FFFFFF; --surface-2:#F0F0ED; --surface-3:#E7E7E3;
  --line:#E3E3DE; --line-2:#CBCBC4;
  --ink:#16181D; --ink-2:#4B5058; --ink-3:#6A707A;
  --accent:#2B4BB8; --accent-hover:#233E9C; --on-accent:#FFFFFF;
  --accent-soft:#E7ECFA; --accent-soft-ink:#1F3A95;
  --ok:#1B7A5A; --ok-soft:#E1F3EA; --ok-ink:#135C44;
  --warn:#9A5B00; --warn-soft:#FBEFD8; --warn-ink:#7A4800;
  --danger:#B3261E; --danger-soft:#FCE8E6; --danger-ink:#8E1C15;
  --scrim:rgba(16,18,22,.45);
  --shadow-1:0 1px 2px rgba(22,24,29,.06),0 0 0 1px rgba(22,24,29,.03);
  --shadow-2:0 6px 20px rgba(22,24,29,.10);
  --shadow-pop:0 16px 48px rgba(22,24,29,.18);
  --r-s:7px; --r-m:10px; --r-l:14px; --r-xl:20px;
  --dur:160ms; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
.lo[data-theme="dark"]{
  --bg:#0F1114; --surface:#171A1F; --surface-2:#1F232A; --surface-3:#272C34;
  --line:#2A2F38; --line-2:#3B414C;
  --ink:#ECEEF1; --ink-2:#B7BCC6; --ink-3:#8E95A1;
  --accent:#8FA5F7; --accent-hover:#A7B8FA; --on-accent:#0F1114;
  --accent-soft:#1E2A4F; --accent-soft-ink:#C5D0FF;
  --ok:#5FCB9F; --ok-soft:#163127; --ok-ink:#9FE3C6;
  --warn:#E3B04F; --warn-soft:#3A2C10; --warn-ink:#F3CF85;
  --danger:#F08C84; --danger-soft:#3E1F1D; --danger-ink:#F6B3AD;
  --scrim:rgba(0,0,0,.62);
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);
  --shadow-2:0 6px 20px rgba(0,0,0,.45);
  --shadow-pop:0 16px 48px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
.lo{direction:rtl;font-family:var(--font-ui);font-size:15px;line-height:1.6;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-align:start;position:relative;min-width:0;width:100%;
  font-variant-numeric:lining-nums;}
.lo *,.lo *::before,.lo *::after{box-sizing:border-box}
.lo h1,.lo h2,.lo h3,.lo h4,.lo p,.lo ul,.lo ol,.lo figure,.lo dl,.lo dd{margin:0}
.lo ul,.lo ol{padding:0;list-style:none}
.lo a{color:inherit;text-decoration:none}
.lo button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.lo input,.lo textarea,.lo select{font:inherit;color:inherit}
.lo :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.lo .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.lo .num{font-variant-numeric:tabular-nums lining-nums}
.lo bdi{unicode-bidi:isolate}
.lo .display{font-family:var(--font-display);font-weight:500;letter-spacing:-.005em;line-height:1.15}
.lo .muted{color:var(--ink-3)} .lo .ink2{color:var(--ink-2)}
.lo .small{font-size:13px} .lo .xs{font-size:12px}
.lo .strong{font-weight:600}
.lo .link{color:var(--accent-soft-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);text-underline-offset:3px}
.lo[data-theme="dark"] .link{color:var(--accent)}
.lo .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lo hr.rule{border:0;border-top:1px solid var(--line);margin:0}
@media (prefers-reduced-motion:reduce){.lo *{animation:none!important;transition:none!important}}

/* ---------- 3. Icon family (24-grid, stroke 1.75, round) ---------- */
.ic{display:inline-block;width:20px;height:20px;flex:none;background:currentColor;vertical-align:-4px;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-16{width:16px;height:16px;vertical-align:-3px} .ic-18{width:18px;height:18px;vertical-align:-3px}
.ic-24{width:24px;height:24px;vertical-align:-6px} .ic-28{width:28px;height:28px}
.ic-today{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.ic-tasks{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E")}
.ic-projects{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='5' height='16' rx='1.5'/%3E%3Crect x='9.5' y='4' width='5' height='11' rx='1.5'/%3E%3Crect x='15.5' y='4' width='5' height='7' rx='1.5'/%3E%3C/svg%3E")}
.ic-goals{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000'/%3E%3C/svg%3E")}
.ic-bigpicture{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E")}
.ic-habits{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l3 3-3 3'/%3E%3Cpath d='M4 11V9a4 4 0 0 1 4-4h12'/%3E%3Cpath d='M7 22l-3-3 3-3'/%3E%3Cpath d='M20 13v2a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E")}
.ic-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.ic-planner{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2.5'/%3E%3Cpath d='M9 4a3 3 0 0 1 6 0'/%3E%3Cpath d='M9 11h6M9 15h4'/%3E%3C/svg%3E")}
.ic-reviews{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3Cpath d='M9 12.5l2 2 4-4'/%3E%3C/svg%3E")}
.ic-inbox{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13h5l1.5 2.5h4L15.5 13h5'/%3E%3Cpath d='M5.5 5h13l2 8v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 19v-6z'/%3E%3C/svg%3E")}
.ic-search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E")}
.ic-knowledge{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5c-1.5-1.5-4-2-8-2v14c4 0 6.5.5 8 2 1.5-1.5 4-2 8-2v-14c-4 0-6.5.5-8 2z'/%3E%3Cpath d='M12 6.5v14'/%3E%3C/svg%3E")}
.ic-content{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4-1 11-11a2.1 2.1 0 0 0-3-3L5 16z'/%3E%3Cpath d='M14 7l3 3'/%3E%3C/svg%3E")}
.ic-library{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='4' height='16' rx='1'/%3E%3Crect x='9.5' y='4' width='4' height='16' rx='1'/%3E%3Cpath d='M15 5l3.6-1 3.4 14.6-3.6 1z'/%3E%3C/svg%3E")}
.ic-notes{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v9l-5 5h-8a2 2 0 0 1-2-2z'/%3E%3Cpath d='M14.5 19.5v-5h5'/%3E%3Cpath d='M8 9h8M8 12.5h4'/%3E%3C/svg%3E")}
.ic-files{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5l-8.5 8.5a5 5 0 0 1-7-7l9-9a3.2 3.2 0 0 1 4.5 4.5l-9 9a1.4 1.4 0 0 1-2-2l8.3-8.3'/%3E%3C/svg%3E")}
.ic-journals{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4c-5 0-9 3-11 8l-4 8'/%3E%3Cpath d='M20 4c0 5-3 9-8 11H8'/%3E%3Cpath d='M9 15h4'/%3E%3C/svg%3E")}
.ic-health{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9-10A4.8 4.8 0 0 1 12 6.7a4.8 4.8 0 0 1 9 3.8c-1.5 5.4-9 10-9 10z'/%3E%3Cpath d='M4 13h4l1.5-3 3 6 1.5-3h6'/%3E%3C/svg%3E")}
.ic-finance{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6.5' width='18' height='13' rx='3'/%3E%3Cpath d='M3 10.5h18'/%3E%3Cpath d='M16 15h1.5'/%3E%3C/svg%3E")}
.ic-relationships{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7'/%3E%3Cpath d='M18 13.5a6 6 0 0 1 3.5 6.5'/%3E%3C/svg%3E")}
.ic-automation{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5' r='2.5'/%3E%3Ccircle cx='6' cy='19' r='2.5'/%3E%3Ccircle cx='18' cy='9' r='2.5'/%3E%3Cpath d='M6 7.5v9'/%3E%3Cpath d='M18 11.5c0 3-3 4-6 4.5-2.3.4-4 1-4 2.5'/%3E%3C/svg%3E")}
.ic-reports{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z'/%3E%3Cpath d='M14 3.5v5h5'/%3E%3Cpath d='M9 17v-3M12 17v-6M15 17v-2'/%3E%3C/svg%3E")}
.ic-sessions{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 10v3.5l2.5 1.5'/%3E%3Cpath d='M10 2.5h4M12 2.5V6'/%3E%3C/svg%3E")}
.ic-settings{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 12h3M11 12h9M4 17h12M20 17h.01'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='18' cy='17' r='2'/%3E%3C/svg%3E")}
.ic-data{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E")}
.ic-advanced{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.5c-2 0-3 1-3 3V9c0 1.5-1 3-2.5 3C4 12 5 13.5 5 15v2.5c0 2 1 3 3 3'/%3E%3Cpath d='M16 3.5c2 0 3 1 3 3V9c0 1.5 1 3 2.5 3-1.5 0-2.5 1.5-2.5 3v2.5c0 2-1 3-3 3'/%3E%3C/svg%3E")}
.ic-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.ic-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.ic-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.ic-chev-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.ic-chev-up{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
.ic-back{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
.ic-next{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E")}
.ic-arrow-next{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")}
.ic-arrow-back{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.ic-more{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3C/svg%3E")}
.ic-play{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 5v14l11-7z'/%3E%3C/svg%3E")}
.ic-pause{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M8 5v14M16 5v14'/%3E%3C/svg%3E")}
.ic-stop{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E")}
.ic-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
.ic-link{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
.ic-flag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-1.5 4L16 12H5'/%3E%3C/svg%3E")}
.ic-alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5H2.5z'/%3E%3Cpath d='M12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E")}
.ic-info{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")}
.ic-help{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 1-1 1.7M12 17h.01'/%3E%3C/svg%3E")}
.ic-wifi-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20'/%3E%3Cpath d='M8.5 16.5a5 5 0 0 1 7 0'/%3E%3Cpath d='M5 13a10 10 0 0 1 5.3-2.8M14.5 10.5A10 10 0 0 1 19 13'/%3E%3Cpath d='M1.5 9.5A15 15 0 0 1 8 5.8M12 5a15 15 0 0 1 10.5 4.5'/%3E%3Cpath d='M12 20h.01'/%3E%3C/svg%3E")}
.ic-wifi{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 16.5a5 5 0 0 1 7 0'/%3E%3Cpath d='M5 13a10 10 0 0 1 14 0'/%3E%3Cpath d='M1.5 9.5a15 15 0 0 1 21 0'/%3E%3Cpath d='M12 20h.01'/%3E%3C/svg%3E")}
.ic-phone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E")}
.ic-mic{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0'/%3E%3Cpath d='M12 17.5V21M9 21h6'/%3E%3C/svg%3E")}
.ic-mic-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20'/%3E%3Cpath d='M15 9.5V6a3 3 0 0 0-6 0v1'/%3E%3Cpath d='M9 10v1a3 3 0 0 0 5 2.2'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 10.5 5.1M18.5 11a6.5 6.5 0 0 1-.5 2.5'/%3E%3Cpath d='M12 17.5V21M9 21h6'/%3E%3C/svg%3E")}
.ic-camera{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5a2 2 0 0 1 2-2h2l1.5-2.5h5L16 6.5h2a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E")}
.ic-share{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M8 7l4-4 4 4'/%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3C/svg%3E")}
.ic-upload{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E")}
.ic-download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M7 11l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E")}
.ic-refresh{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E")}
.ic-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.ic-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10v-6z'/%3E%3C/svg%3E")}
.ic-eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12c1-3 5-7 10-7s9 4 10 7c-1 3-5 7-10 7S3 15 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.ic-eye-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20'/%3E%3Cpath d='M10.6 10.6a2 2 0 0 0 2.8 2.8'/%3E%3Cpath d='M9.9 5.2A10 10 0 0 1 12 5c5 0 9 4 10 7a13 13 0 0 1-2.6 3.7M6.6 6.6A13 13 0 0 0 2 12c1 3 5 7 10 7a9.6 9.6 0 0 0 4-.9'/%3E%3C/svg%3E")}
.ic-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.8 6.2.9-4.5 4.4 1.1 6.3L12 17.4l-5.6 3 1.1-6.3L3 9.7l6.2-.9z'/%3E%3C/svg%3E")}
.ic-filter{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5h17l-6.5 8v6l-4 2v-8z'/%3E%3C/svg%3E")}
.ic-bell{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 0 1 12 0v5l1.5 2H4.5z'/%3E%3Cpath d='M10 21a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
.ic-bell-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20'/%3E%3Cpath d='M8 8.5A6 6 0 0 1 18 11v5l1.5 2H9'/%3E%3Cpath d='M6 11v5l-1.5 2H5'/%3E%3Cpath d='M10 21a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
.ic-moon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z'/%3E%3C/svg%3E")}
.ic-pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M8 3.5h8l-1 6 3 3.5H6l3-3.5z'/%3E%3C/svg%3E")}
.ic-edit{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4z'/%3E%3C/svg%3E")}
.ic-trash{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4.5h6V7'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E")}
.ic-archive{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4.5' rx='1.5'/%3E%3Cpath d='M4.5 8.5V19a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5V8.5'/%3E%3Cpath d='M10 13h4'/%3E%3C/svg%3E")}
.ic-copy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E")}
.ic-external{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V8a1.5 1.5 0 0 1 1.5-1.5H10'/%3E%3C/svg%3E")}
.ic-grip{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='9' cy='6' r='1.4'/%3E%3Ccircle cx='15' cy='6' r='1.4'/%3E%3Ccircle cx='9' cy='12' r='1.4'/%3E%3Ccircle cx='15' cy='12' r='1.4'/%3E%3Ccircle cx='9' cy='18' r='1.4'/%3E%3Ccircle cx='15' cy='18' r='1.4'/%3E%3C/svg%3E")}
.ic-circle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3C/svg%3E")}
.ic-circle-dash{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-dasharray='3.2 3.2'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3C/svg%3E")}
.ic-circle-minus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E")}
.ic-circle-half{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 1 0 17z' fill='%23000'/%3E%3C/svg%3E")}
.ic-circle-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.ic-circle-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E")}
.ic-hourglass{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10M7 21h10'/%3E%3Cpath d='M8 3v3.5L12 11l4-4.5V3M8 21v-3.5L12 13l4 4.5V21'/%3E%3C/svg%3E")}
.ic-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E")}
.ic-tag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5h8l9 9-8 8-9-9z'/%3E%3Ccircle cx='8' cy='8' r='1.3' fill='%23000'/%3E%3C/svg%3E")}
.ic-globe{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c3 3 3 14 0 17M12 3.5c-3 3-3 14 0 17'/%3E%3C/svg%3E")}
.ic-key{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9'/%3E%3Cpath d='M16 5l3 3M14 7l3 3'/%3E%3C/svg%3E")}
.ic-qr{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Cpath d='M14 14h2v2h-2zM18 14h2M14 18h2M18 18h2v2'/%3E%3C/svg%3E")}
.ic-server{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='6' rx='2'/%3E%3Crect x='3.5' y='14' width='17' height='6' rx='2'/%3E%3Cpath d='M7 7h.01M7 17h.01'/%3E%3C/svg%3E")}
.ic-grid{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.ic-list{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13'/%3E%3Cpath d='M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E")}
.ic-sparkle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3C/svg%3E")}
.ic-energy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5L4.5 13.5h7l-1 8 8.5-11h-7z'/%3E%3C/svg%3E")}
.ic-mappin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.ic-home{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11l8.5-7 8.5 7'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3C/svg%3E")}
.ic-briefcase{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M8.5 7.5V5.5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E")}
.ic-menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
.ic-send{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10.5 13.5'/%3E%3Cpath d='M21 3l-6.5 18-4-7.5L3 9.5z'/%3E%3C/svg%3E")}
.ic-receipt{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3h13v18l-2.5-1.5L13.5 21 12 19.5 10.5 21 8 19.5 5.5 21z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E")}
.ic-history{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E")}
.ic-compare{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 8h4M5 12h4M5 16h4M15 8h4M15 12h4M15 16h4'/%3E%3C/svg%3E")}
.ic-book{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5A2.5 2.5 0 0 1 7.5 2H19v17.5H7.5A2.5 2.5 0 0 0 5 22z'/%3E%3Cpath d='M5 19.5A2.5 2.5 0 0 1 7.5 17H19'/%3E%3C/svg%3E")}
.ic-drop{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5s6.5 7 6.5 12a6.5 6.5 0 0 1-13 0c0-5 6.5-12 6.5-12z'/%3E%3C/svg%3E")}
.ic-sleep{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18V9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9'/%3E%3Cpath d='M3 14h18M6 7V5.5M18 7V5.5'/%3E%3C/svg%3E")}
.ic-pill{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8.5' width='19' height='7' rx='3.5' transform='rotate(-45 12 12)'/%3E%3Cpath d='M8.5 15.5l7-7'/%3E%3C/svg%3E")}
.ic-run{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='4.5' r='2'/%3E%3Cpath d='M6 21l4-7 3 2v5'/%3E%3Cpath d='M10 14l-1-5 5-2 3 4 3 1'/%3E%3C/svg%3E")}
.ic-mood{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 14.5s1.3 2 3.5 2 3.5-2 3.5-2'/%3E%3Cpath d='M9 10h.01M15 10h.01'/%3E%3C/svg%3E")}
.ic-coins{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='M16.5 9.5a6 6 0 1 1-7 7'/%3E%3C/svg%3E")}
.ic-swap{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14M14 4l4 4-4 4'/%3E%3Cpath d='M20 16H6M10 12l-4 4 4 4'/%3E%3C/svg%3E")}
.ic-keyboard{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2.5'/%3E%3Cpath d='M6.5 10h.01M10 10h.01M13.5 10h.01M17 10h.01M7 14h10'/%3E%3C/svg%3E")}
.ic-sun{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}

/* ---------- 4. Shell (desktop web) ---------- */
.shell{display:flex;flex-wrap:wrap;align-items:stretch;min-height:100%;width:100%}
.side{flex:0 0 248px;background:var(--surface);border-inline-end:1px solid var(--line);padding:18px 14px 24px;display:flex;flex-direction:column;gap:18px;min-width:0}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px}
.brand .mark{width:30px;height:30px;color:var(--accent);flex:none}
.brand .name{font-family:var(--font-display);font-size:24px;line-height:1;font-weight:600;letter-spacing:-.01em}
.brand .tag{font-size:11.5px;color:var(--ink-3);line-height:1.2;margin-top:2px}
.nav{display:flex;flex-direction:column;gap:2px}
.navg{display:flex;flex-direction:column;gap:2px;padding-top:8px}
.navg-t{font-size:11.5px;font-weight:600;color:var(--ink-3);padding:8px 10px 4px;letter-spacing:.02em}
.navlink{display:flex;align-items:center;gap:10px;padding:0 10px;min-height:38px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.navlink:hover{background:var(--surface-2);color:var(--ink)}
.navlink.on{background:var(--accent-soft);color:var(--accent-soft-ink);font-weight:600}
.navlink .ic{opacity:.9}
.navlink .cnt{margin-inline-start:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.navmore{display:flex;align-items:center;gap:10px;padding:0 10px;min-height:38px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink-3);width:100%}
.navmore:hover{background:var(--surface-2);color:var(--ink)}
.navmore .ic{margin-inline-start:auto}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:0 6px;font-size:12.5px;color:var(--ink-3)}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 32px;border-bottom:1px solid var(--line);background:var(--surface)}
.topbar .sp{flex:1 1 8px}
.content{padding:28px 32px 56px;display:flex;flex-direction:column;gap:32px;width:100%;max-width:1240px}
.content.wide{max-width:none}
.search{display:flex;align-items:center;gap:10px;flex:1 1 220px;max-width:520px;min-height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);color:var(--ink-3)}
.search input{flex:1 1 60px;min-width:0;border:0;background:transparent;color:var(--ink);font-size:14.5px;outline:none}
.search input::placeholder{color:var(--ink-3)}
.kbd{font-size:11.5px;border:1px solid var(--line-2);border-radius:5px;padding:0 6px;line-height:18px;color:var(--ink-3);background:var(--surface);white-space:nowrap}
.demo{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:999px;padding:0 10px;height:26px;white-space:nowrap}
@media (max-width:1023px){
  .side{flex:1 1 100%;flex-direction:row;align-items:center;gap:6px;padding:8px 12px;border-inline-end:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
  .brand{padding:0 6px;flex:none} .brand .tag{display:none} .brand .name{font-size:20px}
  .nav,.navg{flex-direction:row;padding:0;gap:4px;flex:none}
  .navg-t{display:none}
  .navlink{min-height:36px;padding:0 10px;white-space:nowrap} .navlink .cnt{display:none}
  .navmore{width:auto;white-space:nowrap} .navmore .ic{margin:0}
  .side-foot{display:none}
  .topbar{padding:10px 16px}
  .content{padding:20px 16px 48px;gap:24px}
}
@media (max-width:640px){
  .topbar{gap:8px}
  .search{flex:1 1 140px;max-width:none}
  .search .kbd{display:none}
  .content{padding:16px 16px 40px;gap:20px}
  .hide-sm{display:none!important}
}

/* ---------- 5. Headings & sections ---------- */
.hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.hero .date{font-family:var(--font-display);font-size:46px;line-height:1.05;font-weight:500;letter-spacing:-.01em}
.hero .greet{font-size:15px;color:var(--ink-2);margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.hero .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.h1{font-family:var(--font-display);font-size:38px;line-height:1.1;font-weight:500}
.h2{font-size:18px;font-weight:600;letter-spacing:-.005em;line-height:1.35}
.h3{font-size:15.5px;font-weight:600;line-height:1.4}
.sub{font-size:13px;color:var(--ink-3)}
.section{display:flex;flex-direction:column;gap:14px;min-width:0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.sec-h .cnt{color:var(--ink-3);font-weight:500;font-size:14px;margin-inline-start:6px;font-variant-numeric:tabular-nums}
.sec-h .tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.pagehead .crumbs{font-size:13px;color:var(--ink-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
@media (max-width:640px){.hero .date{font-size:36px}.h1{font-size:30px}}

/* ---------- 6. Controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:500;font-size:14.5px;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-soft{background:var(--accent-soft);border-color:transparent;color:var(--accent-soft-ink)}
.btn-soft:hover{background:color-mix(in srgb,var(--accent-soft) 80%,var(--accent) 20%)}
.btn-quiet{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn-quiet:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger{color:var(--danger-ink);border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:var(--surface)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-danger-solid{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-sm{min-height:32px;padding:0 12px;font-size:13.5px;border-radius:8px;gap:6px}
.btn-lg{min-height:48px;padding:0 22px;font-size:16px;border-radius:11px}
.btn-icon{width:40px;padding:0} .btn-icon.btn-sm{width:32px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn .ic{flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);gap:2px;max-width:100%}
.seg button,.seg a{min-height:32px;padding:0 12px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg .on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1);font-weight:600}
.seg-sm button,.seg-sm a{min-height:28px;padding:0 10px;font-size:12.5px}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:500;background:var(--surface-2);color:var(--ink-2);border:1px solid transparent;white-space:nowrap;max-width:100%}
.chip .ic{width:14px;height:14px;vertical-align:0}
.chip-ok{background:var(--ok-soft);color:var(--ok-ink)}
.chip-warn{background:var(--warn-soft);color:var(--warn-ink)}
.chip-danger{background:var(--danger-soft);color:var(--danger-ink)}
.chip-info{background:var(--accent-soft);color:var(--accent-soft-ink)}
.chip-line{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.chip-ink{background:var(--ink);color:var(--bg)}
.chip.sel{background:var(--accent);color:var(--on-accent)}
.chip.wrap{height:auto;min-height:26px;white-space:normal;padding:3px 10px;line-height:1.4}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip-btn{cursor:pointer} .chip-btn:hover{border-color:var(--line-2);background:var(--surface-3)}
.chip-btn.chip-line:hover{background:var(--surface-2)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--surface-3);color:var(--ink-2);font-variant-numeric:tabular-nums}
.badge-accent{background:var(--accent);color:var(--on-accent)}
.why{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:999px;padding:0 10px;height:26px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.why.direct{border-style:solid;color:var(--accent-soft-ink);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.why .ic{width:13px;height:13px;vertical-align:0}
.why.wrap{height:auto;min-height:26px;white-space:normal;padding:3px 10px;line-height:1.35}

/* checkbox / radio / switch */
.chk{position:relative;width:24px;height:24px;flex:none;display:inline-block}
.chk input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer;z-index:1}
.chk .box{width:24px;height:24px;border:1.5px solid var(--line-2);border-radius:7px;background:var(--surface);display:grid;place-items:center;color:transparent;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.chk input:checked+.box{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chk input:focus-visible+.box{outline:2px solid var(--accent);outline-offset:2px}
.chk.round .box{border-radius:50%}
.chk-lg,.chk-lg .box{width:28px;height:28px}
.sw{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:32px}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw .tr{width:40px;height:24px;border-radius:999px;background:var(--line-2);position:relative;transition:background var(--dur) var(--ease);flex:none}
.sw .tr::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--dur) var(--ease)}
.sw input:checked+.tr{background:var(--accent)}
.sw input:checked+.tr::after{transform:translateX(-16px)}
.sw input:focus-visible+.tr{outline:2px solid var(--accent);outline-offset:2px}
.sw .lab{font-size:14.5px}
.radio{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.radio input{margin:4px 0 0;accent-color:var(--accent);width:18px;height:18px;flex:none}
.radio.on{border-color:var(--accent);background:var(--accent-soft)}
.radio .t{font-weight:600;font-size:14.5px} .radio .d{font-size:13px;color:var(--ink-3)}

/* inputs */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.label .opt{font-weight:400;color:var(--ink-3)}
.input,.select,.textarea{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);font-size:15px;color:var(--ink);outline:none}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.textarea{min-height:96px;resize:vertical;line-height:1.6}
.textarea.big{min-height:160px;font-size:16px}
.select{appearance:none;padding-inline-end:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A707A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 10px center;background-size:18px}
.help{font-size:12.5px;color:var(--ink-3)}
.field.err .input,.field.err .textarea{border-color:var(--danger)}
.field.err .help{color:var(--danger-ink)}
.inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.inline-form .field{flex:1 1 180px}
.inrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.inrow{grid-template-columns:1fr}}
.quickadd{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px dashed var(--line-2);border-radius:12px;color:var(--ink-3);background:var(--surface)}
.quickadd input{flex:1;min-width:0;border:0;background:transparent;font-size:15px;color:var(--ink);outline:none}
.quickadd:focus-within{border-style:solid;border-color:var(--accent)}

/* date / time pickers */
.picker{display:inline-flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-2);width:300px;max-width:100%}
.picker .ph{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:14.5px}
.picker .grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center;font-size:13px}
.picker .grid .wd{color:var(--ink-3);font-size:11.5px;padding:4px 0}
.picker .grid button{height:34px;border-radius:8px;font-variant-numeric:tabular-nums}
.picker .grid button:hover{background:var(--surface-2)}
.picker .grid .out{color:var(--ink-3);opacity:.6}
.picker .grid .today{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.picker .grid .sel{background:var(--accent);color:var(--on-accent);font-weight:600}
.picker .horiz{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.timepick{display:inline-flex;gap:6px;align-items:center}
.timepick .input{width:72px;text-align:center;direction:ltr}

/* ---------- 7. Lists, tasks, tables ---------- */
.list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);min-width:0}
.row .grow{flex:1 1 auto;min-width:0}
.row .t{font-size:15px;font-weight:500;line-height:1.5}
.row .m{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--ink-3);margin-top:2px;align-items:center}
.row.sel{background:var(--accent-soft);margin:0 -8px;padding-inline:12px;border-radius:10px;border-color:transparent}
.row-link{cursor:pointer} .row-link:hover{background:var(--surface-2);margin:0 -8px;padding-inline:12px;border-radius:10px}
.task{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 4px;border-bottom:1px solid var(--line);min-width:0}
.task .t{font-size:17px;font-weight:500;line-height:1.5;color:var(--ink);word-break:break-word}
.task.is-done .t{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1.5px}
.task.is-done .m,.task.is-done .why{opacity:.7}
.task .m{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--ink-3);margin-top:8px;align-items:center}
.task .m .sep{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.task .act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;padding-top:2px}
.task .n{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--ink-3);text-align:center;padding-top:4px;font-variant-numeric:tabular-nums}
.task.compact{padding:12px 4px;gap:12px} .task.compact .t{font-size:15.5px}
@media (max-width:640px){.task{grid-template-columns:28px minmax(0,1fr)}.task .act{grid-column:2;justify-content:flex-start}}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);max-width:100%}
.tbl{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.tbl th{font-weight:600;color:var(--ink-3);font-size:12.5px;text-align:start;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;direction:ltr;unicode-bidi:isolate;color:var(--ink-2)}
.tbl tr.sel td{background:var(--accent-soft)}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 16px;font-size:14px;align-items:baseline}
.kv dt{color:var(--ink-3)} .kv dd{min-width:0;word-break:break-word}
@media (max-width:640px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:8px}}

/* ---------- 8. Panels, cards, notes, empty, skeleton ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel.tight{padding:14px 16px;gap:10px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.panel-h .h3{flex:1 1 auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card.link:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.card.sel{border-color:var(--accent);background:var(--accent-soft)}
.on-dot{background:var(--accent)!important}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1023px){.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start}
.split.narrow{grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:1023px){.split,.split.narrow{grid-template-columns:1fr}}
.note{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font-size:14px;border:1px solid var(--line);line-height:1.55}
.note .ic{margin-top:3px}
.note-info{background:var(--accent-soft);color:var(--accent-soft-ink);border-color:transparent}
.note-ok{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent}
.note-warn{background:var(--warn-soft);color:var(--warn-ink);border-color:transparent}
.note-danger{background:var(--danger-soft);color:var(--danger-ink);border-color:transparent}
.note .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.quiet{font-size:13px;color:var(--ink-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 24px;border:1px dashed var(--line-2);border-radius:14px;color:var(--ink-2);background:var(--surface)}
.empty .t{font-size:16px;font-weight:600;color:var(--ink)}
.empty .d{font-size:14px;color:var(--ink-3);max-width:52ch}
.empty .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.empty.center{align-items:center;text-align:center;padding:40px 24px}
.sk{background:var(--surface-2);border-radius:6px;position:relative;overflow:hidden;color:transparent}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:sk 1.4s infinite}
.lo[data-theme="dark"] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@keyframes sk{to{transform:translateX(100%)}}
.sk-line{height:12px;border-radius:999px}
.spin{width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex:none;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 9. Meters, capacity, timeline ---------- */
.meter{display:flex;flex-direction:column;gap:6px;min-width:0}
.meter .track{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.meter .fill{height:100%;border-radius:999px;background:var(--accent)}
.meter .fill.ok{background:var(--ok)} .meter .fill.warn{background:var(--warn)} .meter .fill.ink{background:var(--ink-3)}
.meter .lbl{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.cap{display:flex;flex-direction:column;gap:8px}
.cap .bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--surface-3);gap:2px}
.cap .bar i{display:block;height:100%;border-radius:2px}
.cap .known{background:var(--accent)}
.cap .buffer{background:var(--warn)}
.cap .unknown{background:repeating-linear-gradient(135deg,var(--ink-3) 0 3px,transparent 3px 7px)}
.cap .free{background:transparent}
.cap .legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-2)}
.cap .legend span{display:inline-flex;align-items:center;gap:6px}
.cap .legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.tl{display:flex;flex-direction:column}
.tl .ev{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:start}
.tl .time{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:13px;padding-top:2px;direction:ltr;text-align:end}
.tl .n{font-weight:500;font-size:14.5px;line-height:1.45}
.tl .k{font-size:12.5px;color:var(--ink-3);margin-top:2px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.tl .ev.now .n{color:var(--accent-soft-ink)}
.lo[data-theme="dark"] .tl .ev.now .n{color:var(--accent)}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .v{font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.15;font-variant-numeric:tabular-nums}
.stat .v.display{font-family:var(--font-display);font-size:32px;font-weight:500}
.stat .k{font-size:12.5px;color:var(--ink-3)}
.stat .s{font-size:12.5px;color:var(--ink-2)}
.stats{display:flex;flex-wrap:wrap;gap:16px 32px}

/* ---------- 10. Tabs, toolbar, filters ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs a,.tabs button{padding:10px 12px;font-size:14.5px;font-weight:500;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tabs .on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs .badge{margin-inline-start:2px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.toolbar .sp{flex:1 1 8px}
.filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filters .lab{font-size:12.5px;color:var(--ink-3);margin-inline-end:2px}

/* ---------- 11. Overlays: dialog, drawer, popover, toast, menu ---------- */
.scrim{position:absolute;inset:0;background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50}
.dialog{width:min(640px,100%);background:var(--surface);border-radius:16px;box-shadow:var(--shadow-pop);border:1px solid var(--line);display:flex;flex-direction:column;max-height:100%;color:var(--ink)}
.dialog.wide{width:min(880px,100%)}
.dialog-h{padding:18px 22px 10px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dialog-h .h2{font-size:19px}
.dialog-b{padding:6px 22px 20px;overflow:auto;display:flex;flex-direction:column;gap:16px}
.dialog-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-start;gap:10px;flex-wrap:wrap;align-items:center}
.dialog-f .sp{flex:1 1 8px}
.drawer{position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(480px,100%);background:var(--surface);border-inline-start:1px solid var(--line);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;z-index:40;color:var(--ink)}
.drawer-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.drawer-b{padding:18px 20px;overflow:auto;display:flex;flex-direction:column;gap:18px;flex:1}
.drawer-f{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.pop{position:absolute;z-index:45;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);padding:16px;display:flex;flex-direction:column;gap:12px;width:min(520px,calc(100% - 32px))}
.menu{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);padding:6px;display:inline-flex;flex-direction:column;min-width:220px}
.menu button,.menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink);min-height:36px;width:100%}
.menu button:hover,.menu a:hover{background:var(--surface-2)}
.menu .sep{height:1px;background:var(--line);margin:4px 2px}
.menu .danger{color:var(--danger-ink)}
.menu .k{margin-inline-start:auto;color:var(--ink-3);font-size:12px}
.toast{position:absolute;bottom:24px;inset-inline-start:24px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow-pop);font-size:14px;z-index:60;max-width:calc(100% - 48px)}
.toast .btn{min-height:30px;padding:0 10px;font-size:13px;background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 35%,transparent)}
.toast .ic{opacity:.9}
.toast.static{position:static}

/* ---------- 12. Save / sync / request states ---------- */
.state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.state .ic{width:14px;height:14px;vertical-align:0}
.state-draft{color:var(--ink-3)} .state-saving{color:var(--ink-2)} .state-saved{color:var(--ok-ink)}
.state-pending{color:var(--warn-ink)} .state-unknown{color:var(--warn-ink)} .state-error{color:var(--danger-ink)}
.state-offline{color:var(--ink-2)} .state-stale{color:var(--warn-ink)} .state-conflict{color:var(--danger-ink)}
.lo[data-theme="dark"] .state-saved{color:var(--ok)} .lo[data-theme="dark"] .state-pending,.lo[data-theme="dark"] .state-unknown,.lo[data-theme="dark"] .state-stale{color:var(--warn)} .lo[data-theme="dark"] .state-error,.lo[data-theme="dark"] .state-conflict{color:var(--danger)}
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.cmp>div{padding:14px 16px;min-width:0}
.cmp>div+div{border-inline-start:1px solid var(--line)}
.cmp .ch{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.diff-add{background:var(--ok-soft);color:var(--ok-ink);border-radius:3px;padding:0 2px}
.diff-del{background:var(--danger-soft);color:var(--danger-ink);text-decoration:line-through;border-radius:3px;padding:0 2px}
@media (max-width:640px){.cmp{grid-template-columns:1fr}.cmp>div+div{border-inline-start:0;border-top:1px solid var(--line)}}
.src{font-size:12.5px;color:var(--ink-3);display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.hist{display:flex;flex-direction:column}
.hist .h{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;align-items:baseline}
.hist .h .d{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:12.5px}
.hist .h.cor .d::after{content:" · تصحيح";color:var(--warn-ink)}
.sess-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--bg)}
.lo[data-theme="dark"] .sess-bar{background:#F2F3F5;color:#121417}
.sess-bar .tm{font-variant-numeric:tabular-nums;font-size:22px;font-weight:600;direction:ltr;unicode-bidi:isolate;letter-spacing:.02em}
.sess-bar .btn{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 35%,transparent)}
.sess-bar .btn-primary{background:var(--bg);color:var(--ink);border-color:transparent}
.lo[data-theme="dark"] .sess-bar .btn-primary{background:#121417;color:#F2F3F5}

/* ---------- 13. Domain patterns ---------- */
.focus{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.focus .fi{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 4px;border-bottom:1px solid var(--line)}
.focus .fi .n{font-family:var(--font-display);font-size:28px;line-height:1;color:var(--accent);padding-top:2px;text-align:center}
.lo[data-theme="dark"] .focus .fi .n{color:var(--accent)}
.focus .fi .t{font-size:16px;font-weight:600;line-height:1.45}
.focus .fi .l{font-size:13px;color:var(--ink-3);margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.focus .fi .p{font-size:13px;color:var(--ink-2);white-space:nowrap;padding-top:4px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.focus .fi{grid-template-columns:34px minmax(0,1fr)}.focus .fi .p{grid-column:2;white-space:normal}}
.habit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}
.habit .t{font-size:15px;font-weight:500}
.habit .k{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.habit .log{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.logbtn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-3);background:var(--surface)}
.logbtn:hover{background:var(--surface-2);color:var(--ink)}
.logbtn.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-soft-ink)}
.logbtn.on-ok{background:var(--ok-soft);border-color:transparent;color:var(--ok-ink)}
.tree{display:flex;flex-direction:column;gap:2px}
.tree .lv1>.tn{font-weight:600;font-size:15px}
.tree .tn{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;border-radius:9px}
.tree .tn:hover{background:var(--surface-2)}
.tree .tn.on{background:var(--accent-soft);color:var(--accent-soft-ink)}
.tree .tn .cnt{margin-inline-start:auto;font-size:12px;color:var(--ink-3)}
.tree .lv2{padding-inline-start:18px} .tree .lv3{padding-inline-start:36px}
.tree .lv2>.tn{font-size:14.5px} .tree .lv3>.tn{font-size:14px;color:var(--ink-2);min-height:34px}
.wk{display:grid;grid-template-columns:48px repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);min-width:0}
.wk .hd{padding:8px 4px;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line);border-inline-start:1px solid var(--line)}
.wk .hd .d{display:block;font-size:17px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.wk .hd.today .d{color:var(--accent-soft-ink)} .lo[data-theme="dark"] .wk .hd.today .d{color:var(--accent)}
.wk .gut{font-size:11.5px;color:var(--ink-3);text-align:center;border-bottom:1px solid var(--line);padding-top:2px;font-variant-numeric:tabular-nums;direction:ltr}
.wk .col{border-inline-start:1px solid var(--line);position:relative;display:grid;grid-auto-rows:28px}
.wk .hr{border-bottom:1px solid var(--line);grid-column:1}
.wk .evt{position:absolute;inset-inline:3px;border-radius:8px;padding:4px 8px;font-size:12px;line-height:1.3;overflow:hidden;border:1px solid transparent}
.evt-appt{background:var(--accent-soft);color:var(--accent-soft-ink)}
.evt-block{background:var(--surface-2);color:var(--ink-2);border-color:var(--line-2)!important;border-style:dashed!important}
.evt-exec{background:var(--ok-soft);color:var(--ok-ink)}
.evt-deadline{background:var(--warn-soft);color:var(--warn-ink)}
.evt-ext{background:var(--surface-3);color:var(--ink-2)}
.evt-session{background:var(--ink);color:var(--bg)} .lo[data-theme="dark"] .evt-session{background:#F2F3F5;color:#121417}
.evt .et{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mo .mh{background:var(--surface-2);font-size:12px;font-weight:600;color:var(--ink-3);text-align:center;padding:6px 0}
.mo .md{background:var(--surface);min-height:84px;padding:6px 8px;font-size:12px;display:flex;flex-direction:column;gap:3px}
.mo .md .dn{font-size:13px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mo .md.out{background:var(--bg);color:var(--ink-3)}
.mo .md.today .dn{color:var(--on-accent);background:var(--accent);width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.mo .pill{font-size:11.5px;padding:1px 6px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pipe .st{display:flex;flex-direction:column;gap:8px;min-width:0}
.pipe .st .sh{font-size:12.5px;font-weight:600;color:var(--ink-3);display:flex;justify-content:space-between;padding:0 4px}
@media (max-width:1023px){.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pipe{grid-template-columns:1fr}}
.dropzone{border:1.5px dashed var(--line-2);border-radius:14px;padding:22px;text-align:center;color:var(--ink-3);font-size:14px;background:var(--surface)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
.pre{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;direction:ltr;unicode-bidi:isolate;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;white-space:pre-wrap;word-break:break-word;color:var(--ink-2);line-height:1.55;max-width:100%}
.lo .mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;direction:ltr;unicode-bidi:isolate}

/* ---------- 14. Phone (native iOS / Android) ---------- */
.phone{width:390px;height:844px;position:relative;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font-ui);direction:rtl;display:flex;flex-direction:column;font-size:15px;line-height:1.5;flex:none}
.phone.w375{width:375px;height:812px} .phone.w360{width:360px;height:800px}
.phone.tall{height:1040px} .phone.tall.w360{height:1000px}
.phone .ptask.is-done .t{text-decoration:line-through;color:var(--ink-3)}
.phone .safe-top{height:54px;flex:none}
.phone.android .safe-top{height:32px}
.phone .pscroll{flex:1;min-height:0;overflow:hidden;padding:0 20px 24px;display:flex;flex-direction:column;gap:18px}
.phone.w360 .pscroll{padding:0 16px 20px}
.phone .tabbar{flex:none;height:84px;padding:8px 6px 26px;border-top:1px solid var(--line);background:var(--surface);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:500;color:var(--ink-3);min-height:44px}
.tabbar a.on{color:var(--accent-soft-ink)} .lo[data-theme="dark"] .tabbar a.on{color:var(--accent)}
.tabbar .ic{width:24px;height:24px}
.phone .lt{font-family:var(--font-display);font-size:38px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.phone .lt-sub{font-size:13.5px;color:var(--ink-3);margin-top:4px}
.phone .nb{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.phone .nb .ttl{font-size:17px;font-weight:600;flex:1;text-align:center}
.ilist{background:var(--surface);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.irow{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 14px;border-bottom:1px solid var(--line);min-width:0}
.irow:last-child{border-bottom:0}
.irow .grow{flex:1;min-width:0}
.irow .t{font-size:15.5px;font-weight:500;line-height:1.4}
.irow .k{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.irow .v{font-size:14px;color:var(--ink-3);white-space:nowrap}
.isec{font-size:13px;font-weight:600;color:var(--ink-3);padding:0 4px;display:flex;justify-content:space-between;align-items:center}
.pill-conn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.pill-conn .dot{width:7px;height:7px}
.pill-conn.ok .dot{background:var(--ok)} .pill-conn.warn .dot{background:var(--warn)} .pill-conn.off .dot{background:var(--ink-3)} .pill-conn.danger .dot{background:var(--danger)}
.phone .btn{min-height:44px}
.phone .btn-sm{min-height:36px}
.phone .ptask{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface);align-items:start}
.phone .ptask:last-child{border-bottom:0}
.phone .ptask .t{font-size:16px;font-weight:500;line-height:1.45}
.phone .ptask .m{font-size:12.5px;color:var(--ink-3);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.phone .pcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.android .appbar{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 8px 0 16px}
.android .appbar .ttl{font-size:22px;font-weight:500;flex:1}
.android .fab{position:absolute;bottom:100px;inset-inline-start:16px;width:56px;height:56px;border-radius:16px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:var(--shadow-2)}
.android .navbar{flex:none;height:80px;padding:12px 8px 16px;background:var(--surface-2);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.android .navbar a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--ink-2)}
.android .navbar a .pi{width:64px;height:32px;border-radius:16px;display:grid;place-items:center}
.android .navbar a.on .pi{background:var(--accent-soft);color:var(--accent-soft-ink)}
.android .navbar a.on{color:var(--ink);font-weight:600}
.android .ilist{border-radius:12px} .android .pcard{border-radius:12px}
.android .btn{border-radius:999px}
.sheet{position:absolute;inset-inline:0;bottom:0;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:var(--shadow-pop);padding:10px 20px 34px;display:flex;flex-direction:column;gap:14px;z-index:30;border-top:1px solid var(--line)}
.sheet .grab{width:36px;height:5px;border-radius:999px;background:var(--line-2);margin:0 auto 4px}
.phone .scrim{padding:0;align-items:flex-end}
.lockscreen{background:#0E1013;color:#F2F3F5;border-radius:0;padding:16px}
.lock-notif{background:rgba(255,255,255,.14);border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;backdrop-filter:blur(10px)}
.lock-notif .app{font-size:12.5px;opacity:.85;display:flex;justify-content:space-between}
.lock-notif .b{font-size:14.5px;font-weight:500;margin-top:2px}
.appicon{width:28px;height:28px;border-radius:7px;background:#2B4BB8;display:grid;place-items:center;color:#fff;flex:none}
.frames{display:flex;gap:80px;align-items:flex-start;padding:0}
.frame{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.frame .cap{display:block;font-size:13px;color:var(--ink-2);padding:0 4px;max-width:390px}
.frame .cap b{display:block;font-size:14px;color:var(--ink)}

/* ---------- 15. Widgets ---------- */
.wgt{border-radius:22px;background:var(--surface);border:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:6px;overflow:hidden;position:relative;color:var(--ink);direction:rtl;font-family:var(--font-ui)}
.wgt.small{width:158px;height:158px} .wgt.medium{width:338px;height:158px}
.wgt.android{border-radius:28px;width:300px;height:160px;background:var(--surface-2)}
.wgt .wh{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--ink-3);font-weight:600}
.wgt .wt{font-size:14.5px;font-weight:600;line-height:1.35}
.wgt .wn{font-family:var(--font-display);font-size:40px;line-height:1;font-weight:500}
.wgt .wf{margin-top:auto;font-size:11px;color:var(--ink-3);display:flex;justify-content:space-between;gap:6px}
.wgt .wrow{display:flex;gap:8px;align-items:center;font-size:13px;line-height:1.35}
.wgt .wrow .sq{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line-2);flex:none}
.wgt .wrow .sq.on{background:var(--accent);border-color:var(--accent)}

/* ---------- 16. Utilities ---------- */
.fx{display:flex} .fxw{display:flex;flex-wrap:wrap} .ai-c{align-items:center} .ai-s{align-items:flex-start} .ai-b{align-items:baseline} .jc-b{justify-content:space-between} .jc-e{justify-content:flex-end}
.col{display:flex;flex-direction:column} .g4{gap:4px} .g6{gap:6px} .g8{gap:8px} .g10{gap:10px} .g12{gap:12px} .g16{gap:16px} .g20{gap:20px} .g24{gap:24px} .g32{gap:32px}
.grow{flex:1 1 auto;min-width:0} .nowrap{white-space:nowrap} .ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wrap{overflow-wrap:anywhere}
.mt4{margin-top:4px} .mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px} .mt24{margin-top:24px}
.p0{padding:0} .pt8{padding-top:8px}
.w100{width:100%} .maxw{max-width:72ch}
.ok-t{color:var(--ok-ink)} .warn-t{color:var(--warn-ink)} .danger-t{color:var(--danger-ink)} .accent-t{color:var(--accent-soft-ink)}
.lo[data-theme="dark"] .ok-t{color:var(--ok)} .lo[data-theme="dark"] .warn-t{color:var(--warn)} .lo[data-theme="dark"] .danger-t{color:var(--danger)} .lo[data-theme="dark"] .accent-t{color:var(--accent)}
.sw-b{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ruled>*+*{border-top:1px solid var(--line)}
.label-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tok{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.tok .swatch{width:44px;height:28px;border-radius:7px;border:1px solid var(--line);flex:none}
.tok .nm{font-weight:600;min-width:160px}
.tok .val{color:var(--ink-3);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;direction:ltr;unicode-bidi:isolate}
.tok .use{color:var(--ink-2);flex:1;min-width:0}
.specimen{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.specimen .meta{font-size:12px;color:var(--ink-3);font-family:ui-monospace,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate;text-align:end}