@font-face{font-family:Unixel;src:url(../fonts/unixel.woff2) format("woff2");font-display:swap}

:root{
  --bg:#030a05;--card:#07160b;--ln:#0f3b1c;--ink:#c9f7d2;--mut:#5fae73;
  --acc:#22e06b;--gold:#e3b34e;--crit:#ff5d6c;--rain:#1f7a3d;--glow:rgba(34,224,107,.25);
  --navh:64px;color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{--bg:#f3f8f2;--card:#fff;--ln:#cfe5d2;--ink:#0d2a14;--mut:#4d7a57;
    --acc:#0f8a3c;--gold:#9a6a00;--crit:#c42b3a;--rain:#9fd1ae;--glow:rgba(15,138,60,.18);color-scheme:light}
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:-apple-system,"SF Arabic","Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;font-size:15px;line-height:1.6;
  min-height:100vh;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
a{color:var(--acc)}
.u{font-family:Unixel,monospace;-webkit-font-smoothing:none;font-weight:normal;letter-spacing:0}
.s16{font-size:16px}.s24{font-size:24px;line-height:1.2}.s32{font-size:32px;line-height:1.15}.s48{font-size:48px;line-height:1}
.mut{color:var(--mut)}.acc{color:var(--acc)}.gold{color:var(--gold)}.crit{color:var(--crit)}
.ltr{direction:ltr;unicode-bidi:isolate}
.hidden{display:none!important}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh}
.side{width:92px;border-left:1px solid var(--ln);display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:16px 0;position:sticky;top:0;height:100vh}
.logo{font-size:32px;color:var(--acc);direction:ltr}
.main{flex:1;min-width:0;padding-bottom:30px}
.nav-i{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mut);text-decoration:none;font-size:16px;
  background:none;border:0;cursor:pointer;padding:4px 6px}
.nav-i .ic{width:22px;height:22px;fill:currentColor}
.nav-i.on{color:var(--acc)}
.nav-i.on .ic{filter:drop-shadow(0 0 4px var(--acc))}
.bottom{display:none}

@media (max-width:820px){
  .side{display:none}
  .bottom{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:30;background:var(--bg);border-top:1px solid var(--ln);
    justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
  .main{padding-bottom:calc(var(--navh) + 30px + env(safe-area-inset-bottom))}
}

/* ---------- header ---------- */
.hero{position:relative;height:calc(130px + env(safe-area-inset-top));border-bottom:1px solid var(--ln);overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.hero-in{position:absolute;inset:0;top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:10px}
.hero-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.cursor::after{content:"_";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.clock{color:var(--acc)}
@media (max-width:820px){.hero{height:calc(120px + env(safe-area-inset-top))}.hero .clock{display:none}.hero .s32{font-size:28px}}

.wrap{padding:14px;display:flex;flex-direction:column;gap:12px;max-width:1180px}
.grid{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;align-items:start}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:820px){.grid{grid-template-columns:1fr}}

.cd{background:var(--card);border:1px solid var(--ln);border-radius:4px;padding:12px 14px;transition:box-shadow .4s,border-color .4s}
.cd.flash{border-color:var(--acc);box-shadow:0 0 0 2px var(--glow)}
.cd.urg{border-color:var(--crit)}
.cd-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.tag{font-size:12px;padding:0 6px;border:1px solid currentColor;border-radius:2px;white-space:nowrap;line-height:1.7}
.row{display:flex;gap:8px;align-items:flex-start;line-height:1.6;padding:4px 0}
.row+.row{border-top:1px dashed var(--ln)}
.row .sum{font-size:13px;color:var(--mut)}
.row a{color:inherit;text-decoration:none}
.empty{color:var(--mut);font-size:14px}
.btn{background:transparent;border:1px solid var(--acc);color:var(--acc);border-radius:3px;padding:6px 14px;cursor:pointer}
.btn:hover{background:var(--glow)}
.btn.sm{padding:2px 10px;font-size:13px}
.btn.del{border-color:var(--crit);color:var(--crit)}
.in{background:var(--bg);border:1px solid var(--ln);border-radius:3px;padding:7px 10px;width:100%}
.in:focus{outline:none;border-color:var(--acc)}

/* ---------- robots ---------- */
.bots{display:flex;gap:10px}
.bot{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--ln);border-radius:4px;padding:8px 10px;
  background:var(--card);cursor:pointer;text-align:start}
.bot svg{flex:none}
.bot .st{font-size:12px}
@media (max-width:820px){
  .bots{gap:6px}
  .bot{flex-direction:column;gap:2px;padding:8px 2px;text-align:center}
  .bot .s24{font-size:16px}
}
.eye{animation:eye 4s infinite}
@keyframes eye{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.eye{transform-box:fill-box;transform-origin:center}
.lamp{animation:lamp 1.4s steps(1) infinite}
@keyframes lamp{50%{opacity:.25}}
.busy svg{animation:bob .9s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-2px)}}

/* ---------- weather ---------- */
.wx{display:flex;align-items:center;gap:12px}
.days{display:flex;justify-content:space-between;color:var(--mut);margin-top:8px;border-top:1px dashed var(--ln);padding-top:6px}

/* ---------- reminders ---------- */
.rem{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0}
.rem+.rem{border-top:1px dashed var(--ln)}
.form{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:8px;align-items:center}
@media (max-width:820px){.form{grid-template-columns:1fr 1fr}.form .btn{grid-column:span 2}}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:relative;overflow:hidden;padding:20px;text-align:center}
.login canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.login>*:not(canvas){position:relative}

/* ---------- assistant ---------- */
.asst{position:fixed;left:calc(18px + env(safe-area-inset-left));bottom:18px;z-index:40;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none;direction:ltr}
.asst .bubble,.asst .ask{direction:rtl}
.asst>*{pointer-events:auto}
@media (max-width:820px){.asst{left:12px;bottom:calc(var(--navh) + 14px + env(safe-area-inset-bottom))}}
.abot{background:none;border:0;cursor:pointer;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 6px var(--glow))}
@keyframes float{50%{transform:translateY(-6px)}}
.zzz{position:absolute;left:46px;top:-6px;color:var(--mut);animation:zz 2s infinite}
@keyframes zz{0%{opacity:0;transform:translate(0,4px)}50%{opacity:1}100%{opacity:0;transform:translate(6px,-8px)}}
.bubble{position:relative;width:min(340px,calc(100vw - 30px));background:var(--card);border:2px solid var(--acc);border-radius:6px;
  padding:10px 12px;box-shadow:0 0 14px var(--glow)}
.bubble::after{content:"";position:absolute;left:22px;bottom:-10px;width:16px;height:16px;background:var(--card);
  border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg)}
.bubble .txt{max-height:45vh;overflow:auto;white-space:pre-wrap;font-size:14px}
.bubble .x{position:absolute;top:4px;left:6px;background:none;border:0;color:var(--mut);cursor:pointer;font-size:16px}
.ask{display:flex;gap:6px;width:min(340px,calc(100vw - 30px))}
.dots span{animation:blink 1s steps(1) infinite}.dots span:nth-child(2){animation-delay:.33s}.dots span:nth-child(3){animation-delay:.66s}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}