/* ===== layout.css ===== */
/* ════════════════════════════════════════════════
   LAYOUT — Shell, Topbar, Nav, Pages, Modals
════════════════════════════════════════════════ */

/* ── LOADER ─────────────────────────────────────── */
.loader {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.loader-inner { text-align:center; animation:fadeIn .5s ease; }
.loader-logo  { font-size:52px; margin-bottom:16px; animation:glow 2.4s ease-in-out infinite; }
.loader-name  { font-size:16px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--g); margin-bottom:5px; }
.loader-tagline { font-size:10px; color:var(--t3); letter-spacing:.26em; text-transform:uppercase; margin-bottom:24px; }
.loader-dots  { display:flex; gap:8px; justify-content:center; }
.loader-dots span {
  width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,var(--g2),var(--g3));
  animation:bounce 1.3s ease-in-out infinite;
  box-shadow:0 0 8px rgba(212,168,67,.4);
}
.loader-dots span:nth-child(2) { animation-delay:.18s; }
.loader-dots span:nth-child(3) { animation-delay:.36s; }

/* ── LOGIN ──────────────────────────────────────── */
.login-screen {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(212,168,67,.07) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 82%, rgba(123,127,245,.05) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 40%, rgba(15,212,125,.03) 0%, transparent 50%),
    var(--bg);
}
.login-card {
  width:100%; max-width:400px;
  background:var(--bg2);
  border:1px solid var(--bd2);
  border-radius:var(--r24);
  padding:34px 26px 28px;
  box-shadow:var(--sh3);
  position:relative; overflow:hidden;
}
.login-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,168,67,.4),transparent);
}
.login-logo  { font-size:44px; text-align:center; margin-bottom:14px; animation:glow 2.4s ease-in-out infinite; }
.login-title {
  font-size:26px; font-weight:900; text-align:center;
  letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--g2) 0%,var(--g) 60%,var(--g3) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:5px;
}
.login-sub { font-size:10px; color:var(--t3); text-align:center; text-transform:uppercase; letter-spacing:.22em; margin-bottom:26px; }
.login-tabs {
  display:flex; gap:3px;
  background:var(--bg3); border-radius:var(--r12);
  padding:3px; margin-bottom:24px;
  border:1px solid var(--bd);
}
.ltab { flex:1; padding:10px; border-radius:var(--r10); font-size:13px; font-weight:700; color:var(--t3); transition:all .2s; letter-spacing:.02em; }
.ltab.active {
  background:linear-gradient(135deg,var(--g2),var(--g3));
  color:#07080D;
  box-shadow:0 2px 10px rgba(212,168,67,.3);
}

/* ── APP SHELL ───────────────────────────────────── */
.app-shell { display:flex; flex-direction:column; min-height:100vh; }

/* ── TOPBAR ──────────────────────────────────────── */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--topH);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px 0 12px;
  background:rgba(7,10,18,0.90);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  border-bottom:1px solid var(--bd);
}
.topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,168,67,.12),transparent);
  pointer-events:none;
}
[data-theme="light"] .topbar { background:rgba(240,242,250,0.90); }
.tb-brand { display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px; border-radius:var(--r10); transition:opacity .2s; flex:1; min-width:0; }
.tb-brand:active { opacity:.72; }
.tb-logo {
  width:36px; height:36px; border-radius:11px;
  background:linear-gradient(135deg,var(--g2),var(--g3));
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
  border:1px solid rgba(212,168,67,.35);
  box-shadow:var(--gsh); overflow:hidden;
}
.tb-brand-text { min-width:0; }
.tb-name { font-size:15px; font-weight:800; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.02em; }
.tb-sub  { font-size:9px; color:var(--t3); letter-spacing:.14em; text-transform:uppercase; margin-top:2px; }
.tb-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tb-btn {
  width:38px; height:38px; border-radius:var(--r10);
  background:var(--bg3); border:1px solid var(--bd2);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; position:relative; transition:all .18s;
}
.tb-btn:active { background:var(--gb); transform:scale(.9); }
.notif-badge {
  position:absolute; top:6px; right:6px;
  width:8px; height:8px; background:var(--er);
  border-radius:50%; border:2px solid var(--bg);
}
.tb-avatar {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--g2),var(--g3));
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:#07080D;
  cursor:pointer;
  border:2px solid rgba(212,168,67,.35);
  box-shadow:var(--gsh); transition:transform .18s; flex-shrink:0;
  overflow:hidden;
}
.tb-avatar:active { transform:scale(.88); }

/* ── PAGES CONTAINER ─────────────────────────────── */
.pages-container {
  flex:1;
  margin-top:var(--topH);
  margin-bottom:calc(var(--botH) + var(--sb));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.page { display:none; animation:fadeUp .25s ease; min-height:calc(100vh - var(--topH) - var(--botH) - var(--sb)); }
.page.active { display:block; }
#pg-ai.active { display:flex!important; flex-direction:column; height:calc(100vh - var(--topH) - var(--botH) - var(--sb)); overflow:hidden; }

/* ── BOTTOM NAV ──────────────────────────────────── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:500;
  height:calc(var(--botH) + var(--sb));
  padding-bottom:var(--sb);
  background:rgba(7,10,18,0.96);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  border-top:1px solid var(--bd);
  display:flex; align-items:stretch;
}
.bottom-nav::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,168,67,.1),transparent);
  pointer-events:none;
}
[data-theme="light"] .bottom-nav { background:rgba(240,242,250,0.96); }
.bnav-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  color:var(--t3); font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  transition:color .2s; position:relative; cursor:pointer;
}
.bnav-item.active { color:var(--g); }
.bnav-item.active::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:28px; height:2.5px;
  background:linear-gradient(90deg,var(--g2),var(--g3));
  border-radius:0 0 4px 4px;
  box-shadow:0 2px 10px rgba(212,168,67,.6);
}
.bnav-item:active { transform:scale(.85); }
.bnav-icon { font-size:22px; line-height:1; transition:transform .2s; }
.bnav-item.active .bnav-icon { transform:translateY(-2px); }

/* ── NOTIFICATION PANEL ──────────────────────────── */
.notif-panel {
  position:fixed; top:calc(var(--topH) + 6px); right:10px;
  width:min(340px, calc(100vw - 20px)); max-height:65vh;
  background:var(--bg2); border:1px solid var(--bd2);
  border-radius:var(--r16); box-shadow:var(--sh3);
  z-index:490; overflow:hidden;
  animation:fadeUp .2s ease;
  display:flex; flex-direction:column;
}
.notif-head { padding:13px 16px; border-bottom:1px solid var(--bd); display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; flex-shrink:0; }
.notif-list { overflow-y:auto; flex:1; }
.notif-item { padding:13px 16px; border-bottom:1px solid var(--bd); }
.notif-item-title { font-size:13px; font-weight:600; color:var(--t1); margin-bottom:3px; }
.notif-item-time  { font-size:10px; color:var(--t3); font-family:var(--fm); }
.notif-empty { padding:30px; text-align:center; color:var(--t3); font-size:13px; }

/* ── TOAST ───────────────────────────────────────── */
.toast-container {
  position:fixed;
  bottom:calc(var(--botH) + var(--sb) + 16px);
  left:14px; right:14px; z-index:9000;
  display:flex; flex-direction:column; gap:9px;
  pointer-events:none; max-width:420px; margin:0 auto;
}
.toast {
  display:flex; align-items:center; gap:11px;
  padding:13px 17px; border-radius:var(--r14);
  font-size:13px; font-weight:600;
  box-shadow:var(--sh3);
  animation:toastIn .32s cubic-bezier(.32,1.25,.6,1);
  pointer-events:auto;
  border:1px solid transparent;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.toast-ok   { background:rgba(15,212,125,.10); border-color:var(--okbd); color:var(--ok); }
.toast-err  { background:rgba(255,77,106,.10);  border-color:var(--erbd); color:var(--er); }
.toast-warn { background:rgba(255,173,31,.10);  border-color:var(--wabd); color:var(--wa); }
.toast-info { background:rgba(123,127,245,.10); border-color:var(--inbd); color:var(--in); }
.toast-gold { background:rgba(212,168,67,.10);  border-color:rgba(212,168,67,.3); color:var(--g); }

/* ── MODAL ───────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:700;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fadeIn .22s ease;
}
.modal {
  background:var(--bg2);
  border-radius:var(--r24) var(--r24) 0 0;
  width:100%; max-width:600px; max-height:92vh;
  display:flex; flex-direction:column; overflow:hidden;
  animation:slideUp .32s cubic-bezier(.32,1.1,.6,1);
  box-shadow:var(--sh3);
  border:1px solid var(--bd2); border-bottom:none;
}
.modal-bar {
  height:3px; flex-shrink:0;
  background:linear-gradient(90deg,var(--g3),var(--g2),var(--g));
}
.modal-head {
  padding:16px 17px 13px;
  border-bottom:1px solid var(--bd);
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-shrink:0;
}
.modal-title { font-size:18px; font-weight:800; color:var(--t1); letter-spacing:-.025em; }
.modal-sub   { font-size:11px; color:var(--t2); margin-top:4px; line-height:1.5; }
.modal-close {
  width:30px; height:30px; border-radius:50%;
  background:var(--bg3); border:1px solid var(--bd2);
  font-size:15px; color:var(--t2);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all .18s; margin-left:10px;
}
.modal-close:active { background:var(--erb); color:var(--er); transform:scale(.88); }
.modal-body { flex:1; overflow-y:auto; padding:17px; }
.modal-foot {
  padding:14px 17px;
  padding-bottom:calc(14px + var(--sb));
  border-top:1px solid var(--bd);
  display:flex; gap:10px; flex-shrink:0;
  background:var(--bg2);
}