@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#060b16;
  --bg2:#0a1224;
  --panel:rgba(17,25,40,.72);
  --panel-solid:#111928;
  --panel2:rgba(23,32,51,.55);
  --text:#eef2ff;
  --muted:#93a4c3;
  --accent:#38bdf8;
  --accent2:#818cf8;
  --green:#22c55e;
  --green-soft:#4ade80;
  --red:#f43f5e;
  --amber:#fbbf24;
  --border:rgba(148,163,184,.14);
  --glow:0 0 0 1px rgba(56,189,248,.12), 0 18px 50px rgba(0,0,0,.35);
  --radius:20px;
  --radius-sm:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.16), transparent 55%),
    radial-gradient(900px 500px at 95% 0%, rgba(129,140,248,.14), transparent 50%),
    radial-gradient(700px 400px at 50% 100%, rgba(34,197,94,.06), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2) 45%, #070d1a);
  background-attachment:fixed;
}

body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, black 20%, transparent 75%);
  opacity:.5;
}

.topbar,.container{position:relative;z-index:1}

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; gap:20px; align-items:center;
  padding:14px 28px;
  background:rgba(6,11,22,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; color:#fff; text-decoration:none; letter-spacing:-.02em;
}
.brand::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--green));
  box-shadow:0 0 16px rgba(56,189,248,.8);
}
.topbar nav{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.topbar a{
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:8px 12px; border-radius:999px; transition:.18s ease;
}
.topbar a:hover{color:#fff; background:rgba(255,255,255,.05)}
.topbar nav form.inline button{
  background:transparent; color:var(--muted); border:1px solid var(--border);
  border-radius:999px; padding:8px 12px; font-size:13px;
}
.topbar nav form.inline button:hover{color:#fff; border-color:rgba(244,63,94,.4); background:rgba(244,63,94,.1)}

.container{width:min(1240px,94vw); margin:28px auto 72px}

.hero{
  display:flex; justify-content:space-between; gap:18px; align-items:flex-end;
  margin-bottom:24px; padding:8px 2px 4px;
}
.hero h1,h1{
  margin:0 0 8px; font-size:clamp(28px, 3.4vw, 38px); font-weight:800;
  letter-spacing:-.03em; line-height:1.1;
  background:linear-gradient(135deg, #fff 20%, #93c5fd 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p,p{color:var(--muted); margin:0; line-height:1.55}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}

.grid{display:grid; gap:18px; margin:18px 0}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, rgba(22,32,52,.88), rgba(12,18,32,.92));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--glow);
  backdrop-filter:blur(12px);
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity:.7;
}
.card h2,.card h3{margin:0 0 10px; letter-spacing:-.02em}
.card h2{font-size:18px}
.card h3{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}
.narrow{max-width:680px}

.metric{
  font-size:30px; color:#fff; font-weight:800; letter-spacing:-.03em;
  font-family:"JetBrains Mono", ui-monospace, monospace;
}
.metric.green{color:var(--green-soft)}
.metric.red{color:var(--red)}

table{width:100%; border-collapse:separate; border-spacing:0}
th,td{padding:12px 10px; border-bottom:1px solid var(--border); text-align:left; font-size:13.5px}
th{color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:rgba(255,255,255,.025)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
.green{color:var(--green-soft)}
.red{color:var(--red)}

.alert{padding:12px 14px; border-radius:var(--radius-sm); margin:12px 0; border:1px solid transparent; font-size:13.5px}
.alert.error{background:rgba(244,63,94,.1); color:#fecdd3; border-color:rgba(244,63,94,.25)}
.alert.success{background:rgba(34,197,94,.1); color:#bbf7d0; border-color:rgba(34,197,94,.25)}

.button,button{
  border:0; border-radius:12px; padding:10px 16px;
  background:linear-gradient(180deg, #2a3954, #1c273b);
  color:#fff; cursor:pointer; text-decoration:none;
  font-weight:600; font-size:13.5px;
  border:1px solid rgba(255,255,255,.06);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.button:hover,button:hover{filter:brightness(1.08); transform:translateY(-1px)}
.button:active,button:active{transform:translateY(0)}
.primary{
  background:linear-gradient(135deg, #0ea5e9, #22c55e);
  border:0; box-shadow:0 8px 24px rgba(14,165,233,.28); font-weight:700;
}
.danger{background:linear-gradient(180deg, #9f1239, #7f1d1d); border-color:rgba(244,63,94,.2)}
.inline{display:inline}
.stack{display:grid; gap:14px}
label{display:grid; gap:6px; color:var(--muted); font-size:13px}
input,select{
  width:100%; padding:11px 12px; border-radius:12px;
  border:1px solid var(--border); background:rgba(8,14,26,.9); color:#fff;
  font-family:inherit; outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus{border-color:rgba(56,189,248,.45); box-shadow:0 0 0 3px rgba(56,189,248,.12)}

.login-body{min-height:100vh; display:grid; place-items:center; position:relative; z-index:1}
.login-card{
  width:min(420px,92vw);
  background:linear-gradient(165deg, rgba(22,32,52,.95), rgba(12,18,32,.98));
  border:1px solid var(--border); border-radius:24px; padding:32px;
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(56,189,248,.08);
}
.login-card h1{margin-top:0; color:#fff; background:none; -webkit-text-fill-color:initial}

.actions{display:flex; gap:6px; flex-wrap:wrap}
.actions form{display:inline}
.hint{font-size:13px; color:var(--muted); line-height:1.5}

.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
  border:1px solid transparent;
}
td .badge{font-size:10.5px; padding:3px 8px}
.badge.bias-long{background:rgba(34,197,94,.12); color:var(--green-soft); border-color:rgba(34,197,94,.28)}
.badge.bias-short{background:rgba(244,63,94,.12); color:#fb7185; border-color:rgba(244,63,94,.28)}
.badge.bias-hold,.badge.bias-neutral{background:rgba(148,163,184,.1); color:#cbd5e1; border-color:rgba(148,163,184,.2)}
.badge.risk-rendah{background:rgba(34,197,94,.12); color:var(--green-soft); border-color:rgba(34,197,94,.28)}
.badge.risk-sedang{background:rgba(251,191,36,.12); color:var(--amber); border-color:rgba(251,191,36,.28)}
.badge.risk-tinggi{background:rgba(244,63,94,.12); color:#fb7185; border-color:rgba(244,63,94,.28)}

.inline-form{display:inline}
.button.small,button.small{padding:6px 11px; font-size:12px; border-radius:10px}

.reco-table{font-size:13px}
.reco-table td{vertical-align:middle}
.reco-table .reason{font-size:12px; color:var(--muted); max-width:320px}
.search-results{display:grid; gap:8px; margin-bottom:16px}
#chart{height:300px; overflow:auto; color:var(--muted); font-family:"JetBrains Mono", monospace; font-size:12px}

/* Premium bot summary */
.bot-summary{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.sum-item{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--border); border-radius:16px; padding:16px 16px 14px;
}
.sum-item::after{
  content:""; position:absolute; right:-20px; top:-20px; width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle, rgba(56,189,248,.15), transparent 70%);
}
.sum-label{display:block; color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px}
.sum-item strong{font-size:22px; font-weight:800; letter-spacing:-.02em; font-family:"JetBrains Mono", monospace}

.live-dot{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted); font-weight:500;
}
.live-dot::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* Notification cards */
.alert-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px}
.notify-card{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:18px; padding:16px;
  background:linear-gradient(165deg, rgba(18,26,42,.9), rgba(10,15,28,.95));
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  transition:transform .15s ease, border-color .15s ease;
}
.notify-card:hover{transform:translateY(-2px); border-color:rgba(148,163,184,.28)}
.notify-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent), var(--accent2));
}
.notify-card.level-success::before{background:linear-gradient(180deg, #22c55e, #16a34a)}
.notify-card.level-danger::before{background:linear-gradient(180deg, #f43f5e, #e11d48)}
.notify-card.level-warn::before{background:linear-gradient(180deg, #fbbf24, #f59e0b)}
.notify-card.level-muted::before{background:linear-gradient(180deg, #64748b, #475569)}
.notify-card.level-success{border-color:rgba(34,197,94,.22); background:linear-gradient(165deg, rgba(16,38,26,.55), rgba(10,15,28,.95))}
.notify-card.level-danger{border-color:rgba(244,63,94,.22); background:linear-gradient(165deg, rgba(42,20,24,.55), rgba(10,15,28,.95))}
.notify-card.level-warn{border-color:rgba(251,191,36,.22); background:linear-gradient(165deg, rgba(42,33,15,.5), rgba(10,15,28,.95))}

.notify-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; padding-left:6px}
.notify-head > div:first-child{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.notify-head a strong{font-size:15px; color:#fff; letter-spacing:-.01em}
.notify-title{
  font-weight:700; color:#fff; font-size:12px; letter-spacing:.02em;
  padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}
.notify-text{margin:12px 0 12px; font-size:13px; color:var(--muted); line-height:1.5; padding-left:6px}
.notify-metrics{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-left:6px;
}
.notify-metrics div{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.04);
  border-radius:12px; padding:10px 10px 9px;
}
.notify-metrics span{
  display:block; font-size:10px; color:var(--muted); margin-bottom:4px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:600;
}
.notify-metrics strong{
  font-size:13px; font-family:"JetBrains Mono", monospace; font-weight:600;
}

.section-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:4px}
.section-head h2{margin:0}
.table-wrap{overflow-x:auto; border-radius:14px}
.mode-form select{
  width:auto; min-width:130px; background:rgba(8,14,26,.9); color:#fff;
  border:1px solid var(--border); border-radius:10px; padding:7px 10px; font-size:12.5px;
}

.stat-card .metric{margin-top:4px}
.chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.empty-state{
  text-align:center; padding:28px 16px; color:var(--muted);
  border:1px dashed rgba(148,163,184,.2); border-radius:16px; background:rgba(255,255,255,.015);
}
.empty-state strong{display:block; color:#fff; margin-bottom:6px; font-size:15px}

@media(max-width:900px){
  .topbar,.hero{align-items:flex-start; flex-direction:column}
  .grid.two,.grid.three,.bot-summary,.alert-grid{grid-template-columns:1fr}
  .notify-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  th,td{font-size:12px; padding:8px}
  .topbar{padding:12px 16px}
  .reco-table-wrapper{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .reco-table{min-width:900px}
  .reco-table .reason{display:none}
  .reco-table th:nth-child(5),.reco-table td:nth-child(5){display:none}
  .reco-table .actions{flex-direction:column; gap:4px}
  .button.small{white-space:nowrap}
  .sum-item strong{font-size:18px}
}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px}
.history-table td{vertical-align:middle}
.history-table .hint{font-size:12px}