:root{
  --green:#0F3D2E; --green-2:#1E6B4A; --deep:#08251C; --gold:#C9A04A; --gold-2:#E9CC86;
  --ivory:#FBF8F1; --sand:#F1ECE0; --card:#FFFFFF; --line:#E2D9C6; --ink:#17221D; --muted:#5C6B63;
  --danger:#9A2F22; --ok:#1E6B4A; --warn:#9A6A12; --r:16px;
  --font:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif; --head:"El Messiri","Alexandria",serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6}
body{min-height:100vh}
a{color:var(--green-2)}
button,input,select,textarea{font:inherit;color:inherit}
.boot{display:grid;place-items:center;height:100vh;color:var(--muted)}

/* top bar */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--green);color:#F2ECDF}
.top .brand{font-family:var(--head);font-size:20px;letter-spacing:.3px;display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.top .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(201,160,74,.25)}
.top .sp{flex:1}
.top .who{font-size:13px;opacity:.85}
.top button{background:transparent;border:1px solid rgba(233,204,134,.4);color:#F2ECDF;border-radius:10px;padding:6px 10px;cursor:pointer}
.top .back{font-size:18px;padding:4px 10px}

main{max-width:1100px;margin:0 auto;padding:18px 16px 60px}
h1{font-family:var(--head);font-size:26px;margin:4px 0 14px;color:var(--green)}
h2{font-family:var(--head);font-size:19px;margin:18px 0 10px;color:var(--green)}
.muted{color:var(--muted)} .small{font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp{flex:1}

/* launcher */
.hello{margin:6px 0 18px}
.hello b{font-family:var(--head);font-size:24px;color:var(--green)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.app{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px;background:var(--card);border:1px solid var(--line);border-radius:20px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s;text-align:center}
.app:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,61,46,.10)}
.app .ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--green-2),var(--green));color:var(--gold-2)}
.app .ic svg{width:28px;height:28px}
.app .nm{font-weight:600}
.app .ds{font-size:12px;color:var(--muted);line-height:1.4}
.app.soon{opacity:.5;pointer-events:none}
.app.soon .ic{background:#cfc8b8;color:#fff}
.app .badge{font-size:11px;background:var(--sand);border-radius:99px;padding:1px 8px;color:var(--muted)}
.app.brain .ic{background:radial-gradient(circle at 30% 30%,#2a8a60,var(--deep));color:var(--gold-2);box-shadow:0 0 0 3px rgba(201,160,74,.35)}

/* cards, tables, forms */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.kpi .l{font-size:12px;color:var(--muted)} .kpi .v{font-size:24px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums} .kpi .s{font-size:12px;color:var(--muted)}
.kpi .v.neg{color:var(--danger)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-weight:500;color:var(--muted);text-align:right;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 6px;border-bottom:1px solid #EFE8DA;vertical-align:top}
.tbl tr.click{cursor:pointer} .tbl tr.click:hover td{background:#FAF6EC}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;text-align:right}
.scroll{overflow-x:auto}
.btn{background:var(--green);color:#F7F1E3;border:0;border-radius:12px;padding:9px 16px;cursor:pointer;font-weight:500}
.btn:hover{background:var(--green-2)}
.btn.ghost{background:transparent;color:var(--green);border:1px solid var(--line)}
.btn.gold{background:var(--gold);color:var(--deep)}
.btn.red{background:transparent;color:var(--danger);border:1px solid #e5c7c2}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:default}
input,select,textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 11px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 4px}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-items:end}
.form .full{grid-column:1/-1}
.pill{display:inline-block;font-size:12px;border-radius:99px;padding:1px 9px;background:var(--sand);color:var(--muted);white-space:nowrap}
.pill.ok{background:#E3F1E8;color:var(--ok)} .pill.warn{background:#FBF0D9;color:var(--warn)} .pill.bad{background:#F6E1DD;color:var(--danger)} .pill.gold{background:#F6ECCF;color:#7a5a12}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 14px;cursor:pointer}
.tabs button.on{background:var(--green);color:#F7F1E3;border-color:var(--green)}
.empty{padding:26px;text-align:center;color:var(--muted)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--deep);color:#F2ECDF;padding:10px 16px;border-radius:12px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.bars{display:flex;gap:6px;align-items:flex-end;height:140px;padding-top:10px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.bars .b i{display:block;width:100%;max-width:34px;background:linear-gradient(180deg,var(--green-2),var(--green));border-radius:6px 6px 2px 2px}
.bars .b span{font-size:10px;color:var(--muted);direction:ltr}

/* login */
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at top,#164a37,var(--deep));color:#F2ECDF;padding:16px}
.login .box{text-align:center;max-width:360px}
.login h1{color:#F2ECDF;font-size:34px;margin:10px 0 4px}
.login .mark{width:76px;height:76px;margin:0 auto;border-radius:24px;display:grid;place-items:center;background:rgba(201,160,74,.15);border:1px solid rgba(233,204,134,.4);color:var(--gold-2)}
.login .mark svg{width:38px;height:38px}
.login p{opacity:.8}
#gbtn{display:flex;justify-content:center;margin-top:22px;min-height:44px}
.login .err{color:#F3B3A8;margin-top:12px}

/* brain chat */
.chat{display:grid;grid-template-columns:220px 1fr;gap:14px;height:calc(100vh - 150px);min-height:420px}
.threads{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;overflow:auto}
.threads button{display:block;width:100%;text-align:right;background:transparent;border:0;border-radius:10px;padding:8px;cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.threads button.on,.threads button:hover{background:var(--sand)}
.conv{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:85%;padding:10px 14px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-start;background:var(--green);color:#F7F1E3;border-bottom-right-radius:4px}
.msg.assistant{align-self:flex-end;background:var(--sand);border-bottom-left-radius:4px}
.msg .used{display:block;margin-top:6px;font-size:11px;color:var(--muted)}
.msg ul{margin:4px 0;padding-inline-start:18px}
.act{align-self:flex-end;background:#FFF9EA;border:1px solid var(--gold-2);border-radius:14px;padding:10px 12px;max-width:85%}
.act .row{margin-top:6px}
.composer{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.composer textarea{resize:none;height:46px}
.thinking{align-self:flex-end;color:var(--muted);font-size:13px}
.suggest{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.suggest button{background:#fff;border:1px dashed var(--line);border-radius:99px;padding:4px 12px;font-size:12px;cursor:pointer}
@media (max-width:760px){
  .chat{grid-template-columns:1fr;height:calc(100vh - 120px)} .threads{display:none}
  .grid{grid-template-columns:repeat(3,1fr);gap:10px} .app{padding:14px 6px;border-radius:16px} .app .ic{width:50px;height:50px;border-radius:15px} .app .ds{display:none}
  main{padding:14px 16px 60px} .top .who{display:none}
}