:root{
  --bg:#f3f6fb;
  --panel:rgba(255,255,255,0.78);
  --text:#0f172a;
  --muted:#475569;
  --accent:#2563eb;
  --danger:#ef4444;
  --warn:#f59e0b;
  --ok:#22c55e;
  --border:rgba(148,163,184,0.25);
  --radius:16px;
}
body.dark{
  --bg:#060b17;
  --panel:rgba(15,23,42,0.75);
  --text:#e2e8f0;
  --muted:#94a3b8;
  --accent:#60a5fa;
  --border:rgba(148,163,184,0.2);
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--text);
  background:radial-gradient(circle at top, #1e293b 0%, var(--bg) 40%);
  font-family:Inter, "Segoe UI", Arial, sans-serif;
}
.app-shell{padding:16px 16px 100px}
.glass{
  backdrop-filter:blur(12px);
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 20px 45px rgba(0,0,0,0.12);
  border-radius:var(--radius);
}
.top-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; margin-bottom:12px;
}
.top-bar h1{margin:0;font-size:1.2rem}
.top-bar p{margin:.2rem 0 0;color:var(--muted)}
.top-actions{display:flex; gap:8px; flex-wrap:wrap}
.chip-btn{
  border:1px solid var(--border);
  background:transparent; color:var(--text);
  border-radius:999px; padding:8px 12px; cursor:pointer;
}
.chip-btn.hidden{display:none}
.app{display:grid; grid-template-columns:320px 1fr; gap:12px; min-height:78vh}
.sidebar,.main{padding:12px; overflow:auto}
.main{display:grid; gap:12px; align-content:start}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
}
.card h3{margin:0 0 10px}
.grid{display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:10px}
.input-field{display:flex; flex-direction:column; gap:6px; position:relative}
.input-field label{font-size:.87rem; color:var(--muted)}
[data-tip]{position:relative}
[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute; top:-2px; right:0; transform:translateY(-100%);
  background:#0f172a; color:#fff; padding:6px 8px; border-radius:8px; font-size:.75rem; width:220px; z-index:20;
}
input,select,button{
  border-radius:12px; border:1px solid var(--border); padding:10px;
  background:rgba(255,255,255,0.6); color:var(--text);
}
body.dark input, body.dark select, body.dark button{background:rgba(2,6,23,0.65)}
input:focus,select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18);
}
button{
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .2s ease;
}
button:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.12)}
.floating-actions{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; gap:8px; padding:8px; z-index:200; flex-wrap:wrap; justify-content:center;
  max-width:calc(100vw - 24px);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:max(8px, env(safe-area-inset-bottom));
}
.floating-actions button{background:linear-gradient(135deg,var(--accent),#1d4ed8); color:#fff; border:none}
.live-metrics{
  display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:8px;
}
.chart-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
canvas{
  width:100%; height:320px !important;
  border-radius:12px; background:rgba(255,255,255,.55);
}
#savedList{display:grid; gap:8px; margin-top:10px}
.saved-item{
  border:1px solid var(--border); border-radius:10px; padding:8px; font-size:.85rem;
}
.saved-item:hover{background:rgba(37,99,235,.08)}
.premium-card{background:linear-gradient(145deg, rgba(37,99,235,.15), rgba(168,85,247,.16))}
.premium-btn{background:linear-gradient(120deg,#f59e0b,#ec4899); color:#fff; border:none}
.hidden{display:none}
.toggle-row{display:flex; justify-content:space-between; align-items:center; margin:8px 0}
.expert-fields{display:grid; gap:8px; margin-top:8px}
.skeleton-line{
  height:10px; margin:8px 0;
  background:linear-gradient(90deg,#dbeafe 15%,#bfdbfe 50%,#dbeafe 85%);
  border-radius:999px; animation:pulse 1.4s infinite;
}
@keyframes pulse{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}
.report-card{border-left:4px solid var(--accent)}
.legal-popup-overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.6);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.legal-popup-box{
  width:min(520px,90vw); padding:20px; text-align:center;
  background:#fff; color:#0f172a; border-radius:20px;
}
.tool-extra-actions{
  display:flex; gap:8px; flex-wrap:wrap; padding:10px 0;
}
.tool-toggle-btn{
  background:linear-gradient(135deg,#fff,#f8fafc);
}
.popup-overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.65); display:none;
  align-items:center; justify-content:center; z-index:9999;
}
.popup-overlay.active{display:flex}
.popup-box{
  width:min(760px,92vw); max-height:85vh; overflow:auto;
  background:#fff; color:#0f172a; border-radius:18px; padding:18px; position:relative;
}
.popup-close{
  position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:50%;
}
.copy-btn{background:#10b981; color:#fff; border:none}
textarea{width:100%; min-height:160px}
body.dark .popup-box{background:#0f172a;color:#e2e8f0}
body.dark .legal-popup-box{background:#0f172a;color:#e2e8f0;border:1px solid var(--border)}
body.dark .legal-popup-box p{color:var(--muted)}
body.dark .tool-toggle-btn{background:linear-gradient(135deg,#0f172a,#111827);color:#e5e7eb;border-color:#1f2937}
body.dark canvas{background:rgba(2,6,23,0.55)!important}
.mobile-only{display:none!important}
.sidebar-backdrop{display:none}
.saved-del{
  float:right;
  width:auto!important;
  min-height:40px;
  padding:6px 10px!important;
  margin:0!important;
  font-size:.8rem;
}
.chart-fallback-msg{color:var(--danger);margin:0 0 8px;font-size:.9rem}
button:active{transform:translateY(0) scale(0.98)}
@media (max-width:1040px){
  .app{grid-template-columns:1fr}
  .live-metrics{grid-template-columns:repeat(2,minmax(140px,1fr))}
}
@media (max-width:900px){
  .mobile-only{display:inline-flex!important;align-items:center;justify-content:center}
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:230;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .sidebar-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
  }
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(90vw,320px);
    z-index:240;
    transform:translateX(-105%);
    transition:transform .25s ease;
    overflow-y:auto;
    max-height:100vh;
  }
  .sidebar.is-open{transform:translateX(0)}
}
@media (max-width:700px){
  .grid{grid-template-columns:1fr}
  .live-metrics{grid-template-columns:1fr}
  .floating-actions{width:95vw}
}