/* =============================================================
   dashboard.css — My Employee Dashboard
   Mobile-first. RTL-safe (logical properties throughout).
   Light / dark / system.
   ============================================================= */

/* -------------------------------------------------------------
   Palette.

   One accent (indigo-blue) carries the brand. Semantic colours
   (good / warn / danger / critical) are separate from it, so an
   urgent iqama never competes with a button for attention.

   Each widget category also gets a quiet tint, used only on the
   small icon square — enough to make the grid scannable without
   turning it into a rainbow.
   ------------------------------------------------------------- */
:root{
  --bg:#f2f5fa;
  --bg-2:#e9eef6;
  --surface:#ffffff;
  --surface-2:#f5f8fc;
  --surface-3:#e8eef7;
  --ink:#111f36;
  --body:#3a4757;
  --muted:#67748a;
  --faint:#94a1b5;
  --line:#e3e9f2;
  --line-soft:#eef2f8;

  --brand:#1b4b91;
  --brand-2:#2c73dd;
  --brand-3:#5ba0f5;
  --brand-deep:#0c1e3c;
  --brand-soft:#e7effc;

  --good:#0f7d54;   --good-bg:#e0f3ea;
  --warn:#9a6a08;   --warn-bg:#fbf0d9;
  --danger:#bd5a17; --danger-bg:#fceadb;
  --crit:#b8302a;   --crit-bg:#fbe7e5;

  /* category tints — icon squares only */
  --t-salary:#2c73dd;     --t-salary-bg:#e7effc;
  --t-eos:#0f7d54;        --t-eos-bg:#e0f3ea;
  --t-docs:#9a6a08;       --t-docs-bg:#fbf0d9;
  --t-leave:#0e7c8a;      --t-leave-bg:#dcf1f4;
  --t-money:#6d47c4;      --t-money-bg:#eee8fb;
  --t-work:#4a5a72;       --t-work-bg:#e9edf4;

  --r-sm:10px; --r:18px; --r-lg:24px;
  --sh-sm:0 1px 2px rgba(17,31,54,.04),0 3px 10px -4px rgba(17,31,54,.10);
  --sh:0 2px 6px rgba(17,31,54,.05),0 16px 38px -20px rgba(17,31,54,.22);
  --sh-lift:0 4px 12px rgba(17,31,54,.07),0 22px 46px -24px rgba(17,31,54,.30);
  --nav-h:66px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic","Noto Nastaliq Urdu",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0f18; --bg-2:#0d1420;
    --surface:#141c2a; --surface-2:#1a2433; --surface-3:#242f42;
    --ink:#eaf0f9; --body:#b2c0d2; --muted:#8492a8; --faint:#67758c;
    --line:#253044; --line-soft:#1b2432;
    --brand:#5ea3ef; --brand-2:#74b2f5; --brand-3:#8dc2fb;
    --brand-deep:#070d17; --brand-soft:#17273e;
    --good:#43c391;   --good-bg:#0f2a20;
    --warn:#dcac52;   --warn-bg:#2a2113;
    --danger:#e8945c; --danger-bg:#2d1e13;
    --crit:#ea8079;   --crit-bg:#2f1917;
    --t-salary:#74b2f5;  --t-salary-bg:#152742;
    --t-eos:#43c391;     --t-eos-bg:#0f2a20;
    --t-docs:#dcac52;    --t-docs-bg:#2a2113;
    --t-leave:#4cc0cf;   --t-leave-bg:#0f2930;
    --t-money:#a68bec;   --t-money-bg:#211c3a;
    --t-work:#8fa2bd;    --t-work-bg:#1d2635;
    --sh-sm:0 1px 2px rgba(0,0,0,.4),0 3px 10px -4px rgba(0,0,0,.55);
    --sh:0 2px 6px rgba(0,0,0,.4),0 16px 38px -20px rgba(0,0,0,.75);
    --sh-lift:0 4px 12px rgba(0,0,0,.45),0 22px 46px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#0a0f18; --bg-2:#0d1420;
  --surface:#141c2a; --surface-2:#1a2433; --surface-3:#242f42;
  --ink:#eaf0f9; --body:#b2c0d2; --muted:#8492a8; --faint:#67758c;
  --line:#253044; --line-soft:#1b2432;
  --brand:#5ea3ef; --brand-2:#74b2f5; --brand-3:#8dc2fb;
  --brand-deep:#070d17; --brand-soft:#17273e;
  --good:#43c391;   --good-bg:#0f2a20;
  --warn:#dcac52;   --warn-bg:#2a2113;
  --danger:#e8945c; --danger-bg:#2d1e13;
  --crit:#ea8079;   --crit-bg:#2f1917;
  --t-salary:#74b2f5;  --t-salary-bg:#152742;
  --t-eos:#43c391;     --t-eos-bg:#0f2a20;
  --t-docs:#dcac52;    --t-docs-bg:#2a2113;
  --t-leave:#4cc0cf;   --t-leave-bg:#0f2930;
  --t-money:#a68bec;   --t-money-bg:#211c3a;
  --t-work:#8fa2bd;    --t-work-bg:#1d2635;
  --sh-sm:0 1px 2px rgba(0,0,0,.4),0 3px 10px -4px rgba(0,0,0,.55);
  --sh:0 2px 6px rgba(0,0,0,.4),0 16px 38px -20px rgba(0,0,0,.75);
  --sh-lift:0 4px 12px rgba(0,0,0,.45),0 22px 46px -24px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--body);
  font-family:var(--font);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:var(--brand);text-decoration:none}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}
.tnum{font-variant-numeric:tabular-nums}

/* ---------------- top bar ---------------- */
.top{
  background:
    radial-gradient(1100px 340px at 82% -30%, rgba(91,160,245,.30), transparent 62%),
    linear-gradient(158deg, #1d5199 0%, #143a70 48%, var(--brand-deep) 100%);
  color:#fff;padding-top:env(safe-area-inset-top);
  position:relative;overflow:hidden;
}
/* soft light spill, keeps the header from reading as a flat slab */
.top::after{
  content:"";position:absolute;inset-block-end:-70%;inset-inline-start:-8%;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 66%);
  pointer-events:none;
}
.top::before{
  content:"";position:absolute;inset-block-end:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.top-in{display:flex;align-items:flex-start;gap:14px;padding:20px 0 24px;position:relative;z-index:1}
.hi{flex:1;min-width:0}
.hi .greet{font-size:13.5px;color:#b9d2f2;font-weight:500}
.hi h1{margin:2px 0 0;font-size:22px;font-weight:750;letter-spacing:-.02em;line-height:1.2}
.hi .stamp{font-size:12px;color:#9fbde4;margin-top:6px;display:flex;align-items:center;gap:6px}
.dot{width:5px;height:5px;border-radius:50%;background:#5ddba0;flex:none}
.top-act{display:flex;gap:8px;flex:none}
.icon-btn{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.13);color:#fff;font-size:16px;
  transition:background .15s;
}
.icon-btn:hover{background:rgba(255,255,255,.24)}

/* progress strip in the header */
.pcomp{position:relative;z-index:1;padding-bottom:20px}
.pcomp-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:#c3d8f4;margin-bottom:7px}
.pcomp-row b{color:#fff;font-weight:700;font-size:13px}
.pbar{height:6px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#5ddba0,#7fe3ba);transition:width .5s ease}
.pcomp-miss{margin-top:9px;display:flex;gap:7px;flex-wrap:wrap}
.miss-chip{
  background:rgba(255,255,255,.14);color:#e2edfb;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:99px;transition:background .15s;
}
.miss-chip:hover{background:rgba(255,255,255,.26)}

/* ---------------- demo banner ---------------- */
.demo{
  background:var(--warn-bg);color:var(--warn);
  border-block-end:1px solid color-mix(in srgb,var(--warn) 25%,transparent);
  font-size:13px;font-weight:600;
}
.demo .wrap{display:flex;align-items:center;gap:10px;padding-block:10px;flex-wrap:wrap}
.demo button{color:var(--warn);text-decoration:underline;font-weight:700;font-size:12.5px}

/* ---------------- layout ---------------- */
main{padding-block:18px 28px}
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .w-wide{grid-column:span 2}
}
@media (min-width:1024px){
  body{padding-bottom:0}
  .grid{grid-template-columns:repeat(3,1fr)}
  .w-wide{grid-column:span 3}
  .w-half{grid-column:span 1}
}

/* ---------------- card ---------------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease;
}
.card:hover{box-shadow:var(--sh);transform:translateY(-1px)}
.card-h{display:flex;align-items:center;gap:11px;padding:16px 18px 0}
.card-h .ic{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-soft);font-size:16px;flex:none;
}
.card-h h2{margin:0;font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.012em;flex:1}
.card-b{padding:14px 18px 18px}
.card-f{
  padding:11px 18px;border-block-start:1px solid var(--line-soft);
  background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.card-f a,.card-f button{font-size:12.5px;font-weight:700;color:var(--brand-2)}
.card-f a:hover,.card-f button:hover{color:var(--brand)}
.card-f .why{color:var(--muted);font-weight:600}

/* category tints, applied by data-cat on the card */
.card[data-cat="salary"]     .card-h .ic{background:var(--t-salary-bg);color:var(--t-salary)}
.card[data-cat="endservice"] .card-h .ic{background:var(--t-eos-bg);color:var(--t-eos)}
.card[data-cat="documents"]  .card-h .ic{background:var(--t-docs-bg);color:var(--t-docs)}
.card[data-cat="leave"]      .card-h .ic{background:var(--t-leave-bg);color:var(--t-leave)}
.card[data-cat="currency"]   .card-h .ic{background:var(--t-money-bg);color:var(--t-money)}
.card[data-cat="employment"] .card-h .ic{background:var(--t-work-bg);color:var(--t-work)}

/* status pill — colour is never the only signal */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;
  letter-spacing:.02em;white-space:nowrap;
}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.warning{background:var(--warn-bg);color:var(--warn)}
.pill.danger{background:var(--danger-bg);color:var(--danger)}
.pill.critical{background:var(--crit-bg);color:var(--crit)}

/* ---------------- salary widget ---------------- */
.sal-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.big{font-size:34px;font-weight:750;color:var(--ink);letter-spacing:-.028em;line-height:1.05}
.big small{font-size:15px;font-weight:600;color:var(--muted);margin-inline-start:5px;letter-spacing:0}
.lbl{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.sal-side{display:flex;gap:20px}
.sal-side div{text-align:end}
.sal-side .v{font-size:17px;font-weight:700;color:var(--ink)}

.stack{margin-top:15px;display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--surface-3)}
.stack i{display:block;height:100%}
.legend{margin-top:11px;display:flex;flex-wrap:wrap;gap:8px 16px}
.legend span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--body)}
.legend em{width:9px;height:9px;border-radius:3px;flex:none}
.legend b{color:var(--ink);font-weight:700}

.rows{margin-top:14px;border-block-start:1px solid var(--line-soft);padding-top:12px;display:grid;gap:9px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px}
.row .k{color:var(--muted)}
.row .v{font-weight:700;color:var(--ink)}
.row.minus .v{color:var(--crit)}

/* ---------------- expiry widget ---------------- */
.exp{display:flex;align-items:center;gap:15px}
.ring{width:74px;height:74px;flex:none;position:relative}
.ring svg{transform:rotate(-90deg);display:block}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring .bg{stroke:var(--surface-3)}
.ring .fg{transition:stroke-dashoffset .6s ease}
.ring .mid{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.05;
}
.ring .mid b{font-size:19px;font-weight:750;color:var(--ink);display:block}
.ring .mid s{font-size:11px;font-weight:700;color:var(--muted);text-decoration:none;letter-spacing:.02em}
.exp-txt{min-width:0;flex:1}
.exp-txt .d{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px}
.exp-txt .h{font-size:12px;color:var(--muted);margin-bottom:7px}

/* ---------------- eosb widget ---------------- */
.milestone{
  margin-top:14px;background:var(--good-bg);border:1px solid color-mix(in srgb,var(--good) 22%,transparent);
  border-radius:var(--r-sm);padding:12px 14px;display:flex;gap:11px;align-items:flex-start;
}
.milestone .m-ic{font-size:17px;flex:none;line-height:1.3}
.milestone p{margin:0;font-size:13px;color:var(--body)}
.milestone b{color:var(--good);font-weight:750}

/* ---------------- leave widget ---------------- */
.lbar{margin-top:13px;height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden;display:flex}
.lbar i{display:block;height:100%;background:var(--brand-2)}
.trio{display:flex;justify-content:space-between;gap:10px;margin-top:12px;text-align:center}
.trio div{flex:1}
.trio .v{font-size:19px;font-weight:750;color:var(--ink)}
.trio .k{font-size:11.5px;color:var(--muted);font-weight:600}

/* ---------------- timeline widget ---------------- */
.tl{display:flex;align-items:flex-start;gap:0;margin-top:4px}
.tl-node{flex:1;text-align:center;position:relative;min-width:0}
.tl-node::before{
  content:"";position:absolute;inset-block-start:9px;inset-inline-start:50%;
  width:100%;height:2px;background:var(--line);z-index:0;
}
.tl-node:last-child::before{display:none}
.tl-dot{
  width:20px;height:20px;border-radius:50%;margin:0 auto 9px;position:relative;z-index:1;
  background:var(--surface);border:3px solid var(--line);
}
.tl-node.on .tl-dot{border-color:var(--brand-2);background:var(--brand-2);box-shadow:0 0 0 4px var(--brand-soft)}
.tl-node .k{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.tl-node .v{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:2px}

/* ---------------- currency widget ---------------- */
.fx-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.flag{font-size:26px;line-height:1}
.fx-rate{font-size:12.5px;color:var(--muted);font-weight:600}
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.fx-cell{background:var(--surface-2);border-radius:var(--r-sm);padding:12px 14px}
.fx-cell .k{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.fx-cell .v{font-size:19px;font-weight:750;color:var(--ink);margin-top:2px;letter-spacing:-.02em}
.fx-cell .s{font-size:12px;color:var(--muted);margin-top:1px}
.note{font-size:11.5px;color:var(--faint);margin-top:11px;line-height:1.45}

/* ---------------- locked widget ---------------- */
.card.locked{border-style:dashed;background:var(--surface-2);box-shadow:none}
.card.locked .card-h .ic{background:var(--surface-3);opacity:.65}
.card.locked .card-h h2{color:var(--muted)}
.lock-b{padding:6px 17px 17px}
.lock-b p{margin:0 0 9px;font-size:13.5px;color:var(--muted)}
.need{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.need span{
  background:var(--surface-3);color:var(--body);font-size:12.5px;font-weight:650;
  padding:4px 11px;border-radius:99px;
}
.btn-add{
  display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;
  font-size:13px;font-weight:700;padding:9px 15px;border-radius:10px;transition:filter .15s;
}
.btn-add:hover{filter:brightness(1.1)}

/* ---------------- bottom nav ---------------- */
.bnav{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:60;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-block-start:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;
}
.bnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 8px;font-size:11.5px;font-weight:600;color:var(--muted);
  min-height:var(--nav-h);justify-content:center;
}
.bnav a i{font-size:19px;font-style:normal;line-height:1}
.bnav a.on{color:var(--brand)}
.bnav a.on i{transform:translateY(-1px)}
@media (min-width:1024px){.bnav{display:none}}

/* desktop side nav — a real sidebar, not a stretched tab bar */
.snav{display:none}
@media (min-width:1024px){
  .shell{
    display:grid;grid-template-columns:224px minmax(0,1fr);gap:26px;
    max-width:1180px;margin:0 auto;padding:22px 16px 40px;align-items:start;
  }
  .snav{
    display:flex;flex-direction:column;gap:3px;position:sticky;top:22px;
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r);padding:9px;box-shadow:var(--sh-sm);
  }
  .snav a{
    display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;
    font-size:14px;font-weight:650;color:var(--muted);
    transition:background .14s,color .14s;position:relative;
  }
  .snav a i{font-size:17px;font-style:normal;width:22px;text-align:center;flex:none}
  .snav a:hover{background:var(--surface-2);color:var(--ink)}
  .snav a.on{
    background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
    box-shadow:0 5px 14px -6px var(--brand-2);
  }
  .snav-sep{height:1px;background:var(--line-soft);margin:7px 4px}
  .snav-foot{
    padding:9px 13px 4px;font-size:11.5px;color:var(--faint);line-height:1.5;
  }
}

/* ---------------- welcome / empty ---------------- */
.welcome{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 24px;text-align:center;box-shadow:var(--sh);margin-top:22px;
}
.welcome .em{font-size:42px;line-height:1;margin-bottom:14px}
.welcome h2{margin:0 0 9px;font-size:22px;font-weight:750;color:var(--ink);letter-spacing:-.02em}
.welcome p{margin:0 auto 20px;font-size:14.5px;color:var(--body);max-width:38ch}
.welcome .btns{display:flex;flex-direction:column;gap:9px;max-width:280px;margin:0 auto}
.btn-p{background:var(--brand);color:#fff;font-weight:700;padding:13px;border-radius:12px;font-size:14.5px}
.btn-s{background:var(--surface-2);color:var(--ink);font-weight:700;padding:13px;border-radius:12px;font-size:14.5px;border:1px solid var(--line)}
.privacy-note{
  margin-top:20px;padding-top:16px;border-block-start:1px solid var(--line-soft);
  font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;justify-content:center;
}

/* ---------------- section failure ---------------- */
.sec-error{
  background:var(--surface);border:1px solid color-mix(in srgb,var(--crit) 30%,var(--line));
  border-radius:var(--r-lg);padding:30px 26px;text-align:center;box-shadow:var(--sh);
}
.sec-error .se-ic{font-size:34px;line-height:1;margin-bottom:12px}
.sec-error h2{margin:0 0 8px;font-size:19px;font-weight:750;color:var(--ink)}
.sec-error p{margin:0 auto 16px;font-size:14.5px;color:var(--body);max-width:44ch;line-height:1.55}
.sec-error .se-detail{
  background:var(--surface-2);border-radius:9px;padding:10px 13px;margin:0 0 18px;
  font-size:12px;color:var(--muted);overflow-x:auto;
}
.sec-error code{font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.sec-error .btn-p{padding-inline:26px}

/* ---------------- boot spinner ---------------- */
.boot{min-height:70vh;display:grid;place-items:center}
.boot-spin{
  width:32px;height:32px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- sign-in page ---------------- */
/* Three rows on a phone: the free-tools strip, then the form, then the
   marketing. Putting the form second means a returning user is not made
   to scroll past a sales pitch to sign in. */
/* auto + 1fr so the strip stays its own height and the columns below take
   up the slack — otherwise the grid stretches the banner to fill 100vh. */
.authpage{min-height:100vh;display:grid;grid-template-columns:1fr;
  grid-template-rows:auto 1fr auto}
.authpage > .auth-free{order:1}
.authpage > .authcol  {order:2}
.authpage > .authaside{order:3}
@media (min-width:940px){
  .authpage{grid-template-columns:1.05fr .95fr}
  /* Desktop: strip across the top, then aside and form side by side. */
  .authpage > .auth-free{grid-column:1 / -1}
  .authpage > .authaside{order:2}
  .authpage > .authcol  {order:3}
}
.authaside{
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(91,160,245,.32), transparent 60%),
    linear-gradient(160deg,#1d5199 0%, #143a70 45%, var(--brand-deep) 100%);
  color:#fff;padding:38px 26px 34px;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.authaside::after{
  content:"";position:absolute;inset-block-end:-30%;inset-inline-end:-14%;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.08),transparent 68%);
}
@media (min-width:940px){ .authaside{padding:52px 54px} }
.authaside > *{position:relative;z-index:1}
.auth-brand{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:26px;
  font-size:16px;font-weight:750;color:#fff;text-decoration:none;letter-spacing:-.01em;
}
.ab-logo{
  width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:19px;
}
/* "you don't need an account" — the first thing on the page, above both
   columns, because the calculators are free and a sign-in form is exactly
   what makes people assume they are not. */
.auth-free{
  display:flex;align-items:center;gap:15px;text-decoration:none;
  background:linear-gradient(135deg,#fff7e6 0%,#ffeecc 100%);
  border-block-end:3px solid #f0b429;
  padding:17px clamp(16px,4vw,54px);
  transition:filter .15s;
}
.auth-free:hover{filter:brightness(.98)}
.af-ic{
  width:50px;height:50px;border-radius:14px;background:#fff;
  display:grid;place-items:center;font-size:25px;flex:none;
  box-shadow:0 2px 8px rgba(120,80,10,.14);
}
.af-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.af-txt b{
  font-size:clamp(17px,2.4vw,21px);font-weight:800;color:#5a3d00;
  letter-spacing:-.015em;line-height:1.2;
}
.af-txt > span{font-size:clamp(13.5px,1.6vw,15px);color:#7a5a1e;line-height:1.45}
.af-go{font-size:23px;color:#8a5a00;font-weight:800;flex:none}
[dir="rtl"] .af-go{transform:scaleX(-1)}
@media (max-width:420px){
  .auth-free{padding:14px 15px;gap:12px}
  .af-ic{width:42px;height:42px;font-size:21px}
}

.authaside h1{
  margin:0;font-size:clamp(25px,4.2vw,36px);line-height:1.14;font-weight:800;
  letter-spacing:-.025em;text-wrap:balance;max-width:15ch;
}
.auth-lede{margin:14px 0 0;font-size:15px;line-height:1.6;color:#c2d8f4;max-width:40ch}
.auth-points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.auth-points li{
  display:flex;align-items:center;gap:12px;font-size:14.5px;color:#dbe8fa;font-weight:550;
}
.auth-points li span{
  width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.13);
  display:grid;place-items:center;font-size:15px;flex:none;
}
.auth-seal{
  margin-top:28px;padding-top:18px;border-block-start:1px solid rgba(255,255,255,.16);
  font-size:12.5px;color:#a8c4e6;line-height:1.55;
}

.authcol{
  display:flex;align-items:center;justify-content:center;
  padding:32px 20px 44px;background:var(--bg);
}
.auth-tools{
  display:block;text-align:center;margin-top:18px;
  font-size:13.5px;font-weight:650;color:var(--brand-2);
}

/* ---------------- CV builder ---------------- */
.cv-head{
  display:flex;align-items:center;gap:17px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:18px;
  box-shadow:var(--sh-sm);margin-bottom:13px;
}
.cv-photo{
  width:82px;height:82px;border-radius:15px;flex:none;cursor:pointer;overflow:hidden;
  background:var(--surface-2);border:2px dashed var(--line);
  display:grid;place-items:center;transition:border-color .15s;
}
.cv-photo.has{border-style:solid;border-color:var(--line)}
.cv-photo:hover{border-color:var(--brand)}
.cv-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cv-photo-ph{font-size:30px;opacity:.4}
.cv-head-txt{flex:1;min-width:0}
.cv-photo-title{font-size:15px;font-weight:750;color:var(--ink);margin-bottom:7px}
.cv-photo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.cv-photo-btn{
  font-size:13.5px;font-weight:750;color:#fff;background:var(--brand);
  padding:8px 16px;border-radius:9px;transition:filter .15s;
}
.cv-photo-btn:hover{filter:brightness(1.12)}
.cv-photo-rm{font-size:13px;font-weight:700;color:var(--crit);padding:8px 2px}
.cv-photo-hint{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.cv-photo-err{font-size:12.5px;color:var(--crit);font-weight:650;margin-top:6px}

.cv-meter{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:13px;box-shadow:var(--sh-sm);
}
.cv-meter-row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--muted);margin-bottom:8px}
.cv-meter-row b{color:var(--ink);font-size:14.5px;font-weight:750}
.pbar.dark{background:var(--surface-3)}
.pbar.dark i{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.cv-missing{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.cv-missing span{
  background:var(--surface-2);color:var(--muted);font-size:11.5px;font-weight:650;
  padding:4px 10px;border-radius:99px;
}
.cv-done{margin-top:10px;font-size:13px;font-weight:700;color:var(--good)}

.fields.one-col{grid-template-columns:1fr}
.field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);font-size:15px;font-family:inherit;line-height:1.55;resize:vertical;
}
.field textarea:focus{outline:none;border-color:var(--brand-2);background:var(--surface)}

.list-body{padding:4px 15px 15px;display:flex;flex-direction:column;gap:11px}
.list-empty{margin:0;padding:14px 2px;font-size:13.5px;color:var(--muted)}
.list-row{
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);padding:13px;
}
.row-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
.row-title{flex:1;min-width:0}
.row-title b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-title span{font-size:12.5px;color:var(--muted)}
.row-rm{
  width:28px;height:28px;border-radius:8px;flex:none;color:var(--muted);font-size:13px;
  display:grid;place-items:center;transition:background .15s,color .15s;
}
.row-rm:hover{background:var(--crit-bg);color:var(--crit)}
.row-fields{display:grid;gap:11px}
@media (min-width:620px){
  .row-fields{grid-template-columns:1fr 1fr}
  .row-fields .span2{grid-column:span 2}
}
.list-row.simple{display:flex;align-items:center;gap:9px;padding:9px 11px}
.list-row.simple input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;background:var(--surface);font-size:14.5px;
}
.list-row.simple input:focus{outline:none;border-color:var(--brand-2)}
.field.check{display:flex;align-items:center}
.chk{display:flex!important;align-items:center;gap:9px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--body);margin:0}
.chk input{width:18px;height:18px;flex:none;accent-color:var(--brand)}
.wide-add{width:100%;justify-content:center;background:var(--surface-2);color:var(--brand);
  border:1px dashed var(--line)}
.wide-add:hover{background:var(--brand-soft);filter:none}

.cv-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.cv-actions button{flex:1;min-width:150px}

/* ---------------- sign in / register ---------------- */
.auth{width:100%;max-width:404px;margin:0 auto}
.auth-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--sh);
}
.auth-seg{width:100%;margin-bottom:20px}
.auth-seg button{flex:1;text-align:center}
.auth-card h2{margin:0 0 6px;font-size:21px;font-weight:750;color:var(--ink);letter-spacing:-.02em}
.auth-sub{margin:0 0 20px;font-size:14px;color:var(--muted);line-height:1.5}
.auth-card .field{margin-bottom:14px}
.auth-msg{
  font-size:13.5px;font-weight:600;line-height:1.5;
  padding:11px 13px;border-radius:10px;margin-bottom:14px;
}
.auth-msg.bad{background:var(--crit-bg);color:var(--crit)}
.auth-msg.ok{background:var(--good-bg);color:var(--good)}
.auth-go{width:100%}
.auth-alt{margin-top:16px;text-align:center}
.auth-alt button{font-size:13.5px;font-weight:650;color:var(--brand);text-decoration:underline}
.auth-note{
  display:flex;gap:11px;align-items:flex-start;
  margin-top:18px;padding:15px 17px;background:var(--surface-2);
  border:1px solid var(--line-soft);border-radius:var(--r);
}
.auth-note span{font-size:16px;line-height:1.3;flex:none}
.auth-note p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55}
.auth-skip{width:100%;margin-top:14px}

/* ---------------- account card ---------------- */
.acct{margin-bottom:14px}
.acct-out{display:flex;align-items:center;gap:15px;padding:20px}
.acct-ic{
  width:44px;height:44px;border-radius:13px;background:var(--brand-soft);
  display:grid;place-items:center;font-size:21px;flex:none;
}
.acct-txt{flex:1;min-width:0}
.acct-txt h3{margin:0 0 3px;font-size:15px;font-weight:700;color:var(--ink)}
.acct-txt p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.btn-sm{padding:8px 15px;border-radius:9px;font-size:13px;flex:none}
@media (max-width:520px){
  .acct-out{flex-wrap:wrap}
  .acct-out .btn-p{width:100%}
}

/* ---------------- tools page ---------------- */
.search{
  display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:13px;padding:12px 15px;box-shadow:var(--sh-sm);
}
.search input{border:0;background:none;flex:1;font-size:15px;outline:none;min-width:0}
.search input::placeholder{color:var(--faint)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-block:14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;background:var(--surface);border:1px solid var(--line);color:var(--body);
  font-size:13px;font-weight:650;padding:8px 14px;border-radius:99px;white-space:nowrap;
}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.sec-t{
  font-size:12px;font-weight:750;color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em;margin:22px 0 11px;
}
.tools{display:grid;grid-template-columns:1fr;gap:11px}
@media (min-width:620px){.tools{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.tools{grid-template-columns:repeat(3,1fr)}}
.tool{
  display:flex;align-items:flex-start;gap:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:15px;
  box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .15s;position:relative;
}
.tool:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.tool .ic{
  width:38px;height:38px;border-radius:11px;background:var(--brand-soft);
  display:grid;place-items:center;font-size:18px;flex:none;
}
.tool .tt{flex:1;min-width:0}
.tool h3{margin:0 0 2px;font-size:14.5px;font-weight:700;color:var(--ink)}
.tool p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.4}
.star{
  position:absolute;inset-block-start:9px;inset-inline-end:9px;
  font-size:15px;padding:4px;border-radius:8px;opacity:.35;transition:opacity .15s;
}
.star.on{opacity:1}
.star:hover{opacity:.8;background:var(--surface-2)}
.empty-msg{text-align:center;color:var(--muted);padding:34px 16px;font-size:14px}

/* ---------------- profile form ---------------- */
.fgroup{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:13px;box-shadow:var(--sh-sm);overflow:hidden;
}
.fgroup > summary{
  display:flex;align-items:center;gap:11px;padding:15px 17px;cursor:pointer;
  font-size:14.5px;font-weight:700;color:var(--ink);list-style:none;
}
.fgroup > summary::-webkit-details-marker{display:none}
.fgroup > summary .ic{
  width:31px;height:31px;border-radius:9px;background:var(--brand-soft);
  display:grid;place-items:center;font-size:15px;flex:none;
}
.fgroup > summary .cnt{margin-inline-start:auto;font-size:12px;color:var(--muted);font-weight:650}
.fgroup > summary .arw{color:var(--muted);transition:transform .2s;font-size:12px}
.fgroup[open] > summary .arw{transform:rotate(90deg)}
.fields{padding:4px 17px 17px;display:grid;gap:13px}
@media (min-width:620px){.fields{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:12.5px;font-weight:650;color:var(--muted);margin-bottom:5px}
.field input,.field select{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);font-size:15px;transition:border-color .15s,background .15s;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand-2);background:var(--surface)}
.field .hint{font-size:11.5px;color:var(--faint);margin-top:4px}
.field.filled label{color:var(--brand)}

.savebar{
  position:sticky;inset-block-end:calc(var(--nav-h) + 10px);z-index:40;
  display:flex;gap:10px;padding:12px;margin-top:16px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);
}
@media (min-width:1024px){.savebar{inset-block-end:16px}}
.savebar .btn-p{flex:1;text-align:center}
.savebar .btn-s{flex:none;padding-inline:18px}

/* ---------------- settings ---------------- */
.setrow{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 17px;border-block-end:1px solid var(--line-soft);
}
.setrow:last-child{border-block-end:0}
.setrow .k{font-size:14px;font-weight:650;color:var(--ink)}
.setrow .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.seg{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:11px;flex:none}
.seg button{padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:650;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.danger-zone{margin-top:16px}
.btn-danger{
  width:100%;background:var(--crit-bg);color:var(--crit);
  font-weight:700;padding:13px;border-radius:12px;font-size:14px;
  border:1px solid color-mix(in srgb,var(--crit) 25%,transparent);
}

/* ---------------- legal ---------------- */
.legal{
  margin-top:22px;padding:15px 17px;background:var(--surface-2);
  border:1px solid var(--line-soft);border-radius:var(--r);
  font-size:12px;color:var(--muted);line-height:1.55;
}
.legal b{color:var(--body);font-weight:650}

/* ---------------- explain sheet ---------------- */
.sheet-bg{
  position:fixed;inset:0;z-index:90;background:rgba(10,20,35,.5);
  display:flex;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
@media (min-width:700px){.sheet-bg{align-items:center}}
.sheet{
  background:var(--surface);width:100%;max-width:560px;max-height:86vh;overflow-y:auto;
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:700px){.sheet{border-radius:var(--r-lg);max-height:80vh}}
.sheet-h{
  position:sticky;inset-block-start:0;background:var(--surface);
  display:flex;align-items:center;gap:12px;padding:17px 19px;
  border-block-end:1px solid var(--line-soft);z-index:1;
}
.sheet-h h3{margin:0;font-size:16px;font-weight:750;color:var(--ink);flex:1}
.sheet-b{padding:17px 19px 24px}
.calc-line{
  display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-block-end:1px solid var(--line-soft);font-size:13.5px;
}
.calc-line:last-of-type{border-block-end:0}
.calc-line .k{color:var(--muted);flex:1}
.calc-line .v{font-weight:700;color:var(--ink);text-align:end}
.calc-line.total{border-block-start:2px solid var(--line);margin-top:6px;padding-top:13px;font-size:15px}
.calc-line.total .v{color:var(--brand);font-size:17px}
.formula{
  background:var(--surface-2);border-radius:var(--r-sm);padding:12px 14px;margin:13px 0;
  font-size:12.5px;color:var(--body);line-height:1.7;
}
.formula code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  color:var(--ink);background:var(--surface-3);padding:1px 5px;border-radius:4px;
}

.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:sk 1.4s infinite;border-radius:6px;color:transparent;
}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}