/* ==========================================================================
   QUOTARIDER — APP SHELL
   Modal · toast · sidebar · tables · auth screens
   Load AFTER theme.css + viz.css
   ========================================================================== */

/* ── MODAL ─────────────────────────────────── */
.qr-modal{
  position:fixed; inset:0; z-index:900;
  display:grid; place-items:center; padding:24px;
  background:rgba(4,2,10,.78);
  backdrop-filter:blur(10px);
  opacity:0; transition:opacity .26s var(--ease);
}
.qr-modal.on{ opacity:1; }
.qr-modal-card{
  position:relative; width:100%; max-width:480px;
  padding:32px;
  border:1px solid var(--line-violet); border-radius:var(--r-lg);
  background:linear-gradient(160deg, #16112c, #0d0a1a);
  box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 0 1px var(--line-violet);
  transform:translateY(16px) scale(.97);
  transition:transform .3s var(--ease);
}
.qr-modal.on .qr-modal-card{ transform:none; }
.qr-modal-x{
  position:absolute; top:14px; right:16px;
  width:32px; height:32px; border-radius:9px;
  font-size:1.35rem; line-height:1; color:var(--text-3);
  transition:var(--t);
}
.qr-modal-x:hover{ background:var(--surface-2); color:var(--text); }

/* ── TOAST ─────────────────────────────────── */
.qr-toast{
  position:fixed; bottom:26px; left:50%;
  transform:translate(-50%, 20px);
  z-index:950; padding:13px 22px;
  border:1px solid var(--line-violet); border-radius:var(--r-pill);
  background:rgba(18,14,34,.97); backdrop-filter:blur(14px);
  font-size:.87rem; font-weight:600; color:var(--text);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0; transition:var(--t);
}
.qr-toast.on{ opacity:1; transform:translate(-50%, 0); }
.qr-toast.g{ border-color:rgba(52,211,153,.45); }
.qr-toast.r{ border-color:rgba(248,113,113,.45); }

/* ── AUTH SCREENS ──────────────────────────── */
.auth-wrap{
  min-height:100vh; display:grid;
  grid-template-columns:1fr 1fr;
}
@media(max-width:900px){ .auth-wrap{ grid-template-columns:1fr; } }

.auth-side{
  padding:48px; display:flex; flex-direction:column; justify-content:space-between;
  border-right:1px solid var(--line);
  background:
    radial-gradient(700px 500px at 20% 20%, rgba(109,40,217,.22), transparent 60%),
    rgba(0,0,0,.25);
}
@media(max-width:900px){ .auth-side{ display:none; } }

.auth-main{
  padding:48px 32px; display:grid; place-items:center;
}
.auth-card{ width:100%; max-width:400px; }
.auth-card h1{ font-size:1.9rem; letter-spacing:-.03em; }
.auth-card .lead{ font-size:.95rem; margin-top:10px; }

.auth-err{
  padding:12px 15px; border-radius:11px;
  border:1px solid rgba(248,113,113,.3);
  background:rgba(248,113,113,.08);
  font-size:.85rem; color:var(--red);
  margin-bottom:16px; display:none;
}
.auth-err.on{ display:block; }
.auth-ok{
  padding:12px 15px; border-radius:11px;
  border:1px solid rgba(52,211,153,.3);
  background:rgba(52,211,153,.08);
  font-size:.85rem; color:var(--green);
  margin-bottom:16px; display:none;
}
.auth-ok.on{ display:block; }

.auth-alt{
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line);
  font-size:.87rem; color:var(--text-2); text-align:center;
}
.auth-alt a{ color:var(--violet-2); font-weight:600; }

.auth-check{
  display:flex; align-items:center; gap:9px;
  font-size:.85rem; color:var(--text-2); cursor:pointer;
}
.auth-check input{ width:16px; height:16px; accent-color:var(--violet); cursor:pointer; }

/* ── APP SHELL ─────────────────────────────── */
.app{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
@media(max-width:900px){ .app{ grid-template-columns:1fr; } }

.app-side{
  border-right:1px solid var(--line);
  background:rgba(0,0,0,.3);
  padding:22px 16px;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
@media(max-width:900px){
  .app-side{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); }
}

.app-nav{ display:flex; flex-direction:column; gap:2px; margin-top:26px; }
.app-nav a{
  display:flex; align-items:center; gap:11px;
  padding:10px 13px; border-radius:11px;
  font-size:.88rem; font-weight:500; color:var(--text-2);
  transition:var(--t);
}
.app-nav a:hover{ background:var(--surface); color:var(--text); }
.app-nav a.on{
  background:rgba(139,92,246,.14);
  color:var(--text); font-weight:600;
  box-shadow:inset 2px 0 0 var(--violet);
}
.app-nav a i{ font-style:normal; width:18px; text-align:center; opacity:.85; }
.app-nav-h{
  font-size:.62rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-3);
  padding:14px 13px 7px;
}

.app-main{ padding:32px; max-width:1280px; }
@media(max-width:640px){ .app-main{ padding:20px 16px; } }

.app-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap; margin-bottom:28px;
}
.app-head h1{ font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-.03em; }
.app-head p{ font-size:.9rem; margin-top:6px; }

/* trial banner */
.trial-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:14px 20px; margin-bottom:24px;
  border:1px solid rgba(251,191,36,.28); border-radius:var(--r);
  background:linear-gradient(135deg, rgba(251,191,36,.1), transparent);
}
.trial-bar p{ font-size:.87rem; color:var(--text-2); }
.trial-bar strong{ color:var(--amber); }

/* ── TABLE ─────────────────────────────────── */
.tbl-wrap{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface);
}
.tbl{ width:100%; border-collapse:collapse; font-size:.88rem; }
.tbl thead th{
  text-align:left; padding:14px 18px;
  font-size:.68rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3);
  border-bottom:1px solid var(--line-2);
  background:rgba(255,255,255,.02);
  white-space:nowrap;
}
.tbl tbody td{
  padding:14px 18px; border-bottom:1px solid var(--line);
  color:var(--text-2); vertical-align:middle;
}
.tbl tbody tr{ transition:background .2s; }
.tbl tbody tr:hover{ background:var(--surface); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl .num{ font-variant-numeric:tabular-nums; text-align:right; }
@media(max-width:760px){ .tbl-wrap{ overflow-x:auto; } .tbl{ min-width:620px; } }

.tbl-empty{
  padding:56px 24px; text-align:center;
}
.tbl-empty h4{ margin-bottom:8px; }
.tbl-empty p{ font-size:.88rem; margin-bottom:20px; }

/* icon button */
.ibtn{
  width:32px; height:32px; border-radius:9px;
  display:inline-grid; place-items:center;
  border:1px solid var(--line); color:var(--text-3);
  transition:var(--t); font-size:.85rem;
}
.ibtn:hover{ border-color:var(--line-violet); color:var(--text); background:var(--surface-2); }
.ibtn.r:hover{ border-color:rgba(248,113,113,.4); color:var(--red); }

/* skeleton */
.skel{
  background:linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface));
  background-size:200% 100%;
  animation:skel 1.4s ease-in-out infinite;
  border-radius:8px;
}
@keyframes skel{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }