/* AI Gate mobile prototype — Direction A "Sand Glass". Tokens first, then components. */
:root{
  /* brand */
  --navy:#202a44; --navy-dk:#161d30; --crimson:#a4243b; --sand:#f3efe6; --teal:#5f8a90; --ochre:#b67233; --slate:#445d5c; --violet:#5e5390;
  /* spacing (4pt grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  /* radius */
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  /* type */
  --f-latin:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --f-arabic:"IBM Plex Sans Arabic",-apple-system,"Segoe UI",Tahoma,sans-serif;
  --t-large:32px; --t-title:24px; --t-head:17px; --t-body:15px; --t-sub:13px; --t-cap:11.5px;
  /* motion */
  --spring:cubic-bezier(.2,.9,.25,1.05); --ease:cubic-bezier(.2,.7,.2,1); --d-fast:160ms; --d-med:320ms; --d-slow:480ms;
}
.light{
  --bg:#f3efe6; --surface:rgba(255,255,255,.62); --solid:#fbf9f4; --line:rgba(32,42,68,.10); --ink:#1b2338; --ink2:#566078; --link:#a4243b;
  --btn:#202a44; --on-btn:#fff; --tile:rgba(255,255,255,.74); --field:rgba(255,255,255,.7); --glassbar:rgba(255,255,255,.76); --actbg:rgba(246,243,236,.82);
  --blur:blur(22px) saturate(1.5); --e1:0 8px 24px -14px rgba(32,42,68,.25); --e2:0 14px 34px -12px rgba(22,29,48,.40); --e3:0 -10px 50px -10px rgba(22,29,48,.45);
  --ok:#2f6b4c; --ok-bg:#e3efe7; --wait:#8a5d12; --wait-bg:#f6ebd3; --prog:#55468f; --prog-bg:#eae7f5; --late:#a13d45; --late-bg:#f6e4e4; --neu-bg:rgba(32,42,68,.08);
  --bar1:#3c5a86; --bar2:#202a44; --scrim:rgba(22,29,48,.38);
  --c1:#202a44; --c2:#a4243b; --c3:#5f8a90; --c4:#b67233; --c5:#5e5390; --c6:#8b93a7;
}
.dark{
  --bg:#0c111e; --surface:rgba(255,255,255,.07); --solid:#151b2c; --line:rgba(255,255,255,.12); --ink:#eef1f7; --ink2:#a0a9bd; --link:#e58c9b;
  --btn:#e9edf6; --on-btn:#161d30; --tile:rgba(255,255,255,.08); --field:rgba(255,255,255,.07); --glassbar:rgba(26,33,54,.76); --actbg:rgba(14,19,33,.84);
  --blur:blur(22px) saturate(1.4); --e1:none; --e2:0 14px 34px -12px rgba(0,0,0,.6); --e3:0 -10px 50px -10px rgba(0,0,0,.7);
  --ok:#8fcfab; --ok-bg:rgba(95,170,130,.16); --wait:#e3bd77; --wait-bg:rgba(214,160,60,.16); --prog:#b9aef0; --prog-bg:rgba(140,125,220,.18); --late:#ee9aa0; --late-bg:rgba(210,90,100,.17); --neu-bg:rgba(255,255,255,.10);
  --bar1:#7f93c4; --bar2:#b9aef0; --scrim:rgba(0,0,0,.55);
  --c1:#8ea3d6; --c2:#e58c9b; --c3:#8fbcc2; --c4:#dba56b; --c5:#b9aef0; --c6:#6f7890;
}
.no-glass{--blur:none}
.no-glass.light{--surface:#fbf9f4;--tile:#fbf9f4;--glassbar:#fbf9f4;--actbg:#f3efe6}
.no-glass.dark{--surface:#171d2f;--tile:#171d2f;--glassbar:#171d2f;--actbg:#0c111e}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#e6e3dc;color:#1b2338;font:14px/1.5 var(--f-latin);overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,textarea,select{font:inherit;color:inherit}

/* ---------- page chrome around the phone ---------- */
.stage{display:grid;grid-template-columns:300px 1fr 320px;height:100vh}
.side{overflow-y:auto;padding:22px 20px;background:#f4f2ec;border-inline-end:1px solid #d9d5ca}
.side.r{border-inline-end:0;border-inline-start:1px solid #d9d5ca}
.side h1{font-size:15px;margin:14px 0 2px}
.side p{color:#5d667a;font-size:12.5px;margin:0 0 14px}
.side h2{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#7a8296;margin:20px 0 8px}
.side .logos{display:flex;align-items:center;gap:14px}
.side .logos img{height:30px}
.pseg{display:flex;background:#dedad0;border-radius:10px;padding:3px;margin-bottom:8px}
.pseg button{flex:1;text-align:center;font-weight:600;font-size:12.5px;padding:7px 4px;border-radius:8px;color:#4a5368}
.pseg button[aria-pressed=true]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.plist button{display:flex;width:100%;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:500}
.plist button:hover{background:#e9e6dd}
.plist button[aria-current=true]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.plist small{display:block;color:#6a7386;font-size:11.5px;font-weight:400}
.plist .n{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.hint{background:#fff;border:1px solid #dedad0;border-inline-start:3px solid var(--crimson);border-radius:10px;padding:10px 12px;font-size:12.5px;color:#333c50;margin-top:10px}
.hint b{display:block;margin-bottom:2px}
.hint ol{margin:4px 0 0;padding-inline-start:18px}
.notes code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;background:#e9e6dd;padding:2px 6px;border-radius:6px;display:inline-block;margin:2px 0;word-break:break-all}
.notes .sid{font:600 12px ui-monospace,Menlo,monospace;color:var(--crimson)}
.notes ul{padding-inline-start:16px;margin:6px 0;font-size:12.5px;color:#333c50}
.notes li{margin:4px 0}
.mid{display:grid;place-items:center;overflow:hidden;position:relative}
.mid .links{position:absolute;top:14px;inset-inline:0;text-align:center;font-size:12px}
.mid .links a{color:#5d667a;margin:0 8px}
@media(max-width:1180px){.stage{grid-template-columns:260px 1fr}.side.r{display:none}}
@media(max-width:760px){.stage{grid-template-columns:1fr}.side{display:none}}

/* ---------- phone ---------- */
.phone{width:393px;height:852px;border-radius:56px;padding:10px;background:#0b0d12;box-shadow:0 40px 80px -30px rgba(22,29,48,.55),0 0 0 1px #2b2f3a inset;transform-origin:center;flex:none}
.screen{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--f-latin);font-size:var(--t-body);line-height:1.35;-webkit-font-smoothing:antialiased;user-select:none}
.screen[dir=rtl]{font-family:var(--f-arabic);line-height:1.5}
.screen[dir=rtl] .flip{transform:scaleX(-1)}
.field-bg{position:absolute;inset:0;pointer-events:none}
.light .field-bg{background:radial-gradient(420px 300px at 88% -4%,rgba(164,36,59,.15),transparent 70%),radial-gradient(460px 380px at -10% 22%,rgba(95,138,144,.26),transparent 70%),radial-gradient(520px 420px at 110% 78%,rgba(32,42,68,.16),transparent 70%)}
.dark .field-bg{background:radial-gradient(420px 300px at 88% -4%,rgba(164,36,59,.32),transparent 70%),radial-gradient(460px 380px at -10% 24%,rgba(60,90,134,.42),transparent 70%),radial-gradient(520px 420px at 110% 80%,rgba(95,138,144,.20),transparent 70%)}
.sb{position:absolute;inset:0 0 auto 0;height:52px;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:16px 32px 0;font:600 15px var(--f-latin);direction:ltr;pointer-events:none}
.sb::after{content:"";position:absolute;left:50%;top:11px;width:118px;height:34px;margin-left:-59px;border-radius:20px;background:#000}
.sb .r{display:flex;gap:5px;align-items:center}
.sb .bat{width:24px;height:11.5px;border-radius:3.5px;border:1.2px solid currentColor;opacity:.9;position:relative}
.sb .bat::after{content:"";position:absolute;inset:1.3px;border-radius:1.5px;background:currentColor;width:70%}
.homebar{position:absolute;bottom:7px;left:50%;width:138px;height:5px;margin-left:-69px;border-radius:3px;background:var(--ink);opacity:.8;z-index:90;pointer-events:none}

/* ---------- views ---------- */
.view{position:absolute;inset:0;display:flex;flex-direction:column}
.view.in{animation:push var(--d-med) var(--spring)}
.view.in-back{animation:pop var(--d-med) var(--ease)}
.view.in-fade{animation:fade var(--d-med) var(--ease)}
@keyframes push{from{transform:translateX(calc(var(--dirx,1)*36px));opacity:0}}
@keyframes pop{from{transform:translateX(calc(var(--dirx,1)*-24px));opacity:0}}
@keyframes fade{from{opacity:0;transform:scale(.985)}}
[dir=rtl]{--dirx:-1}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:0 16px 130px;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{display:none}
.view.has-bar .scroll{padding-bottom:120px}
.view.no-tab .scroll{padding-bottom:50px}
.nav{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:56px 12px 6px;min-height:100px}
.nav .bk{display:flex;align-items:center;gap:1px;font-size:16px;font-weight:500;color:var(--link);min-height:44px;padding-inline-end:8px;max-width:45%}
.nav .bk span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .nt{position:absolute;inset-inline:110px;text-align:center;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.nav .acts{display:flex;gap:4px;align-items:center;margin-inline-start:auto}
.ib{width:40px;height:44px;display:grid;place-items:center;border-radius:12px;position:relative;color:var(--ink)}
.ib:active{background:var(--neu-bg)}
.ib .dot{position:absolute;top:9px;inset-inline-end:8px;min-width:8px;height:8px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 2px var(--bg)}
.lt{font-size:var(--t-large);line-height:1.1;letter-spacing:-.03em;font-weight:700;margin:2px 4px 14px}
[dir=rtl] .lt,[dir=rtl] .tt1{letter-spacing:0;line-height:1.35}
.lt-sub{font-size:var(--t-sub);font-weight:600;color:var(--ink2);margin:0 4px}
.tt1{font-size:25px;line-height:1.18;letter-spacing:-.02em;font-weight:700;margin:12px 2px 14px}
.muted{color:var(--ink2)} .sm{font-size:var(--t-sub)} .xs{font-size:var(--t-cap)} .b{font-weight:600} .num{font-feature-settings:"tnum"}
.grow{flex:1;min-width:0} .hstack{display:flex;align-items:center;gap:8px} .wrap{flex-wrap:wrap} .mt{margin-top:12px} .mt2{margin-top:20px} .ctr{text-align:center}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pad{padding:14px 16px}

svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.s{width:16px;height:16px} svg.i.l{width:28px;height:28px}

/* ---------- avatar, pills, chips ---------- */
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font:600 11.5px var(--f-latin);color:#fff;flex:none}
.av.sm{width:24px;height:24px;font-size:9.5px} .av.lg{width:40px;height:40px;font-size:14px} .av.xl{width:76px;height:76px;font-size:26px}
.av.grp{background:var(--neu-bg)!important;color:var(--ink)}
.av.grp svg{width:55%;height:55%}
.stack{display:inline-flex;padding-inline-start:7px}.stack .av{margin-inline-start:-7px;box-shadow:0 0 0 2px var(--solid)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap;flex:none}
.pill svg{width:13px;height:13px;stroke-width:2}
.pill.prog{background:var(--prog-bg);color:var(--prog)} .pill.late{background:var(--late-bg);color:var(--late)}
.pill.wait{background:var(--wait-bg);color:var(--wait)} .pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.neu{background:var(--neu-bg);color:var(--ink2)}
.pill.navy{background:var(--btn);color:var(--on-btn)}
.pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tagc{font-size:12px;font-weight:600;padding:3px 9px;border-radius:8px;background:var(--neu-bg);color:var(--ink);white-space:nowrap}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);white-space:nowrap}
.chip svg{width:16px;height:16px}
.chip em{font-style:normal;font-weight:600;color:var(--ink2);font-size:12px}
.chip.on{background:var(--btn);color:var(--on-btn);border-color:transparent}
.chip.on em{color:inherit;opacity:.75}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--neu-bg);border-radius:11px;padding:2px;font-size:13px;font-weight:600;text-align:center}
.seg button{padding:8px 4px;border-radius:9px;color:var(--ink2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button.on{background:var(--solid);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}

/* ---------- cards, rows ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--e1);overflow:hidden}
.card+.card{margin-top:12px}
.h-sec{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:22px 4px 10px}
.h-sec b{font-size:var(--t-head);letter-spacing:-.01em}
.h-sec button,.h-sec a{font-size:13px;font-weight:600;color:var(--link);display:inline-flex;align-items:center;gap:4px;min-height:28px}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:56px;width:100%;position:relative}
.row+.row{border-top:1px solid var(--line)}
button.row:active,.row[data-go]:active,.row[data-act]:active{background:var(--neu-bg)}
.row .tx{flex:1;min-width:0}
.row .tx b{font-weight:600;font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .tx span{font-size:12.5px;color:var(--ink2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tx span.w{white-space:normal}
.row .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;font-size:12px;color:var(--ink2)}
.row.unread .tx b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--crimson);margin-inline-end:7px;vertical-align:1px}
.ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.ic svg{width:20px;height:20px}
.ic.sm{width:30px;height:30px;border-radius:9px}.ic.sm svg{width:16px;height:16px}
.tn{background:#202a44}.tc{background:#a4243b}.tt{background:#5f8a90}.to{background:#b67233}.ts{background:#445d5c}.tv{background:#5e5390}.tg{background:#6c7489}
.dark .tn{background:#3a4a78}
.cb{width:24px;height:24px;border-radius:50%;border:1.8px solid var(--ink2);opacity:.75;flex:none;display:grid;place-items:center}
.cb.on{background:var(--ok);border-color:var(--ok);opacity:1}
.cb.on svg{width:14px;height:14px;stroke:var(--bg);stroke-width:3}
.cb.sq{border-radius:7px}
.done-tx{color:var(--ink2);text-decoration:line-through}
.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;min-height:48px;font-size:14.5px;width:100%}
.kv+.kv{border-top:1px solid var(--line)}
.kv>span:first-child{color:var(--ink2);flex:none}
.kv .v{display:flex;align-items:center;gap:7px;font-weight:500;min-width:0;text-align:end;flex-wrap:wrap;justify-content:flex-end}
.kv .v svg{width:15px;height:15px;color:var(--ink2);opacity:.75}
button.kv:active{background:var(--neu-bg)}
.file{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font:700 10px var(--f-latin);color:#fff;flex:none;background:#6c7489}
.file.pdf{background:#a13d45}.file.xls{background:#2f6b4c}.file.doc{background:#3c5a86}.file.img{background:#b67233}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tiles.c2{grid-template-columns:repeat(2,1fr)}
.tile{padding:13px 12px 12px;border-radius:20px;background:var(--tile);border:1px solid var(--line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);position:relative;min-height:98px;display:block}
.tile:active{transform:scale(.97)}
.tile{transition:transform var(--d-fast) var(--ease)}
.tile .ic{margin-bottom:10px;width:36px;height:36px}
.tile b{font-size:13px;font-weight:600;display:block;line-height:1.25}
.tile small{font-size:11.5px;color:var(--ink2);display:block;margin-top:2px;line-height:1.3}
.tile em{position:absolute;top:13px;inset-inline-end:12px;font:700 15px var(--f-latin);font-style:normal}
.tile .fav{position:absolute;bottom:10px;inset-inline-end:10px;color:var(--ochre)}
.tile .fav svg{width:14px;height:14px;fill:currentColor}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi{padding:14px;border-radius:20px;background:var(--tile);border:1px solid var(--line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);display:block}
.kpi b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;font-feature-settings:"tnum";line-height:1.1}
.kpi span{font-size:12.5px;color:var(--ink2)}
.kpi .d{font-size:11.5px;font-weight:600;margin-top:4px;display:block}
.kpi .d.up{color:var(--ok)}.kpi .d.dn{color:var(--late)}
.kpi.late b{color:var(--late)}.kpi.wait b{color:var(--wait)}.kpi.prog b{color:var(--prog)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center}
.g4 b{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;font-feature-settings:"tnum"}
.g4 span{font-size:11.5px;color:var(--ink2)}
.g4>*+*{border-inline-start:1px solid var(--line)}
.track{height:8px;border-radius:4px;background:var(--neu-bg);position:relative}
.track i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:4px;background:linear-gradient(90deg,var(--bar1),var(--bar2))}
.track.ok i{background:var(--ok)}.track.late i{background:var(--late)}.track.wait i{background:var(--wait)}
.track u{position:absolute;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.08)}
.track.thin{height:5px}

/* ---------- banners, empty, states ---------- */
.banner{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:var(--r-lg);margin-bottom:12px;border:1px solid transparent}
.banner.wait{background:var(--wait-bg);color:var(--wait)}.banner.prog{background:var(--prog-bg);color:var(--prog)}.banner.ok{background:var(--ok-bg);color:var(--ok)}.banner.late{background:var(--late-bg);color:var(--late)}.banner.neu{background:var(--neu-bg);color:var(--ink)}
.banner b{display:block;font-size:14.5px}
.banner span{font-size:13px;display:block;color:var(--ink);opacity:.9}
.banner .bbtns{display:flex;gap:8px;margin-top:10px}
.banner .btn{height:38px;border-radius:12px;font-size:13.5px;flex:0 1 auto;padding:0 16px}
.empty{text-align:center;padding:44px 24px;color:var(--ink2)}
.empty .eic{width:64px;height:64px;border-radius:50%;background:var(--neu-bg);display:grid;place-items:center;margin:0 auto 14px;color:var(--ink2)}
.empty b{display:block;font-size:17px;color:var(--ink);margin-bottom:4px}
.empty .btn{display:inline-flex;flex:none;padding:0 20px;margin-top:16px;height:44px}
.skel{border-radius:10px;background:linear-gradient(90deg,var(--neu-bg) 25%,var(--line) 40%,var(--neu-bg) 60%);background-size:300% 100%;animation:shim 1.4s linear infinite;height:14px;margin:8px 0}
@keyframes shim{to{background-position:-150% 0}}
.offline{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12.5px;font-weight:600;padding:6px;background:var(--wait-bg);color:var(--wait);border-radius:10px;margin-bottom:10px}

/* ---------- buttons, fields ---------- */
.btn{flex:1 1 0;min-width:0;padding:0 12px;height:50px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:14.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink);white-space:nowrap;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);transition:transform var(--d-fast) var(--ease)}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--btn);color:var(--on-btn);border-color:transparent}
.btn.ok{background:var(--ok);color:var(--bg);border-color:transparent}
.btn.danger{color:var(--late)}
.btn.sm{height:38px;border-radius:12px;font-size:13.5px;flex:none;padding:0 14px}
.btn.block{display:flex;width:100%;flex:none}
.btn svg{width:17px;height:17px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btns{display:flex;gap:10px}
.lnk{color:var(--link);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:4px;min-height:32px}
.flabel{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin:14px 4px 6px}
.flabel i{color:var(--crimson);font-style:normal}
.finput,.farea{display:block;width:100%;border:1px solid var(--line);background:var(--field);border-radius:var(--r-md);padding:12px 14px;font-size:15px;outline:none;min-height:48px;user-select:text;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.finput:focus,.farea:focus{border-color:var(--ink2);box-shadow:0 0 0 3px var(--neu-bg)}
.farea{resize:none;line-height:1.45}
.finput.lg{font-size:18px;font-weight:600}
button.finput{display:flex;align-items:center;gap:8px;justify-content:space-between}
.ferr{color:var(--late);font-size:12.5px;font-weight:600;margin:6px 4px 0}
.search{display:flex;align-items:center;gap:8px;height:40px;border-radius:12px;background:var(--neu-bg);padding:0 12px;color:var(--ink2);margin-bottom:12px}
.search input{flex:1;border:0;background:none;outline:none;font-size:15px;min-width:0;user-select:text}
.search svg{width:18px;height:18px}
.sw{width:50px;height:30px;border-radius:15px;background:var(--neu-bg);position:relative;flex:none;transition:background var(--d-fast)}
.sw::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:inset-inline-start var(--d-fast) var(--ease)}
.sw.on{background:var(--ok)}.sw.on::after{inset-inline-start:22px}

/* ---------- tab bar, action bar, orb ---------- */
.tab{position:absolute;z-index:60;bottom:22px;left:14px;right:14px;height:66px;border-radius:33px;display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;align-items:center;background:var(--glassbar);border:1px solid var(--line);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);box-shadow:var(--e2);transition:transform var(--d-med) var(--spring),opacity var(--d-fast)}
.tab.hide{transform:translateY(110px);opacity:0;pointer-events:none}
.tabi{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--ink2);height:100%;justify-content:center;position:relative}
.tabi.on{color:var(--ink)}
.tabi .bdg{position:absolute;top:8px;inset-inline-start:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--crimson);color:#fff;font:700 10.5px/17px var(--f-latin);text-align:center}
.orb{position:relative;display:block;border-radius:50%;background:radial-gradient(circle at 32% 28%,#f1d9de 0,#b9475c 26%,#5a2c52 55%,#202a44 82%);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 6px 22px -4px rgba(164,36,59,.55);flex:none}
.orb::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,rgba(164,36,59,.32),transparent 68%);animation:breathe 4.5s ease-in-out infinite;z-index:-1}
.orb svg{position:absolute;inset:0;margin:auto;width:46%;height:46%;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.orb.think::before{animation-duration:1.2s}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.6}50%{transform:scale(1.14);opacity:1}}
.tab .orb{width:58px;height:58px;margin:-22px auto 0}
.orb.s{width:24px;height:24px}.orb.m{width:44px;height:44px}.orb.xl{width:96px;height:96px}
.act{position:absolute;z-index:60;left:0;right:0;bottom:0;padding:12px 16px 30px;display:flex;gap:10px;align-items:center;background:var(--actbg);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);border-top:1px solid var(--line)}
.fab{position:absolute;z-index:55;bottom:104px;inset-inline-end:18px;width:54px;height:54px;border-radius:18px;background:var(--btn);color:var(--on-btn);display:grid;place-items:center;box-shadow:var(--e2)}
.fab:active{transform:scale(.94)}

/* ---------- sheets, toasts ---------- */
.scrim{position:absolute;inset:0;z-index:100;background:var(--scrim);animation:fadeo var(--d-med) var(--ease)}
@keyframes fadeo{from{opacity:0}}
.sheet{position:absolute;z-index:101;left:0;right:0;bottom:0;max-height:92%;display:flex;flex-direction:column;background:var(--solid);border-radius:30px 30px 0 0;box-shadow:var(--e3);animation:up var(--d-slow) var(--spring)}
.sheet.medium{height:58%}.sheet.large{height:92%}.sheet.auto{height:auto}
@keyframes up{from{transform:translateY(100%)}}
.sheet .grab{flex:none;width:38px;height:5px;border-radius:3px;background:var(--ink2);opacity:.35;margin:8px auto 2px}
.sheet .sh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 18px 10px;min-height:48px}
.sheet .sh b{font-size:17px}
.sheet .sbody{flex:1;overflow-y:auto;padding:4px 18px 24px;scrollbar-width:none}
.sheet .sbody::-webkit-scrollbar{display:none}
.sheet .sfoot{flex:none;display:flex;gap:10px;padding:12px 18px 30px;border-top:1px solid var(--line)}
.sheet .card{backdrop-filter:none;-webkit-backdrop-filter:none}
.toast{position:absolute;z-index:200;top:58px;left:16px;right:16px;display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:18px;background:var(--btn);color:var(--on-btn);font-size:14px;font-weight:600;box-shadow:var(--e2);animation:drop var(--d-med) var(--spring)}
.toast.out{opacity:0;transform:translateY(-20px);transition:all var(--d-med)}
.toast .u{margin-inline-start:auto;text-decoration:underline;opacity:.85}
@keyframes drop{from{transform:translateY(-70px);opacity:0}}
.menu{position:absolute;z-index:120;min-width:220px;border-radius:16px;background:var(--solid);box-shadow:var(--e2);border:1px solid var(--line);overflow:hidden;animation:fade var(--d-fast) var(--ease)}
.menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;font-size:15px}
.menu button+button{border-top:1px solid var(--line)}
.menu button.danger{color:var(--late)}

/* ---------- calendar picker ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:14px}
.cal .dow{font-size:11.5px;font-weight:600;color:var(--ink2);padding:6px 0}
.cal button{height:40px;border-radius:50%;text-align:center;font-feature-settings:"tnum"}
.cal button.today{color:var(--link);font-weight:700}
.cal button.sel{background:var(--btn);color:var(--on-btn);font-weight:700}
.cal button.dim{opacity:.3}
.cal button.has::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--crimson);margin:-6px auto 0}

/* ---------- chat ---------- */
.msg{max-width:86%;padding:10px 14px;border-radius:20px;font-size:15px;line-height:1.4;margin:6px 0;user-select:text}
.msg.me{margin-inline-start:auto;background:var(--btn);color:var(--on-btn);border-end-end-radius:6px}
.msg.ai{background:var(--neu-bg);border-end-start-radius:6px}
.aicard{margin:8px 0 12px}
.aihd{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink2);margin:14px 2px 6px}
.composer{flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px 14px 28px;border-top:1px solid var(--line)}
.composer .box{flex:1;display:flex;align-items:center;gap:6px;min-height:44px;border-radius:22px;background:var(--neu-bg);padding:0 6px 0 16px}
[dir=rtl] .composer .box{padding:0 16px 0 6px}
.composer input{flex:1;border:0;background:none;outline:none;font-size:15px;min-width:0;user-select:text}
.composer .send{width:44px;height:44px;border-radius:50%;background:var(--btn);color:var(--on-btn);display:grid;place-items:center;flex:none}
.typing{display:inline-flex;gap:4px;padding:14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink2);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---------- charts ---------- */
.chart{display:block;width:100%;height:auto}
.chart text{font:10px var(--f-latin);fill:var(--ink2)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink2);margin-top:8px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:5px}

/* ---------- document reader ---------- */
.paper{background:#fff;color:#1b2338;border-radius:12px;padding:22px 20px;font-size:13.5px;line-height:1.6;box-shadow:0 6px 24px -10px rgba(0,0,0,.35);user-select:text}
.paper h3{margin:0 0 4px;font-size:16px}.paper h4{margin:16px 0 4px;font-size:13.5px}
.paper hr{border:0;border-top:2px solid #a4243b;width:44px;margin:10px 0}
[dir=rtl] .paper hr{margin-inline-start:0}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.rm *,.rm *::before,.rm *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}