* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f4f6f9;
    color: #1a1a2e;
}
.topbar {
    background: #1a1a2e;
    color: #fff;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.topbar h1 { font-size: 20px; margin: 0; }
.topbar nav a {
    color: #cbd5e1;
    text-decoration: none;
    margin-left: 18px;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 6px;
}
.topbar nav a:hover, .topbar nav a.active {
    background: #2563eb;
    color: #fff;
}
.topbar nav { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.topbar nav a { margin-left: 8px; }
.nav-form { display:inline; margin-left:8px; }
.nav-form button { background:transparent; color:#fca5a5; border:1px solid #7f1d1d; padding:6px 10px; border-radius:6px; cursor:pointer; }
.nav-form button:hover { background:#7f1d1d; color:#fff; }
.container {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 20px;
}
.card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 18px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.stock-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.stock-table th, .stock-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #eef1f5;
    font-size: 14px;
}
.stock-table.small th, .stock-table.small td { padding: 8px 10px; font-size: 13px; }
.stock-table th { background: #f8fafc; font-weight: 600; color: #475569; }
.stock-table tr:hover { background: #fafbff; }

.up { color: #16a34a; font-weight: 600; }
.down { color: #dc2626; font-weight: 600; }
.muted { color: #94a3b8; }

.btn-small {
    display: inline-block;
    background: #2563eb;
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
}
.btn-small:hover { background: #1d4ed8; }

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin: 14px 0;
    font-size: 14px;
}
.alert-success { background: #dcfce7; color: #166534; }
.alert-error { background: #fee2e2; color: #991b1b; }

.form label {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    color: #334155;
}
.form input {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-top: 6px;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
}
.inline-form { display:inline-block; margin:8px 0; }
.inline-form button, button.btn-small { border:0; cursor:pointer; font-family:inherit; }
.form button {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.form button:hover { background: #1d4ed8; }
.form textarea { display:block; width:100%; margin-top:6px; padding:12px; border:1px solid #cbd5e1; border-radius:8px; font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; resize:vertical; }

.prediction-card { border: 2px solid #2563eb20; }
.prediction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.prediction-grid .label {
    display: block;
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.prediction-grid .value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-top: 4px;
}
.prediction-grid .value.big { font-size: 22px; color: #2563eb; }
.direction-naik { color: #16a34a; }
.direction-turun { color: #dc2626; }
.direction-stabil { color: #64748b; }
.method-note { font-size: 12px; color: #94a3b8; margin-top: 14px; }

.note {
    font-size: 13px;
    color: #64748b;
    background: #fffbeb;
    border: 1px solid #fde68a;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 24px;
}
.sparkline { display: block; }
.auth-body { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top right,#dbeafe,#f8fafc 48%,#e2e8f0); }
.auth-card { width:min(440px,100%); background:#fff; border-radius:18px; padding:32px; box-shadow:0 24px 60px rgba(15,23,42,.16); }
.auth-card h1 { margin:8px 0; }
.auth-card > p { color:#64748b; margin-top:0; }
.auth-brand { width:56px; height:56px; display:grid; place-items:center; border-radius:16px; background:#dbeafe; font-size:28px; }
.auth-card .form input { max-width:none; }
.auth-card .form button { width:100%; }
.signal-card { border-left:5px solid #64748b; }
.signal-positive { border-left-color:#16a34a; background:linear-gradient(135deg,#fff,#f0fdf4); }
.signal-negative { border-left-color:#dc2626; background:linear-gradient(135deg,#fff,#fef2f2); }
.signal-neutral { border-left-color:#d97706; background:linear-gradient(135deg,#fff,#fffbeb); }
.signal-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.signal-heading h3 { margin:4px 0 0; }
.signal-heading .label { color:#64748b; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.score { background:#0f172a; color:#fff; border-radius:999px; padding:6px 10px; font-size:12px; white-space:nowrap; }
.reason-list { padding-left:20px; color:#475569; line-height:1.6; }
.education-links { font-size:12px; color:#64748b; padding-top:10px; border-top:1px solid #e2e8f0; }
.education-links a { color:#2563eb; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.page-heading p { color:#64748b; }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
.mini-stat { background:#fff; border-radius:10px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.mini-stat strong { display:block; font-size:24px; color:#2563eb; }.mini-stat span{font-size:12px;color:#64748b;text-transform:uppercase;}
.filter-form { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.filter-form label { margin:0; }.filter-form input{max-width:180px;}
.table-wrap { overflow-x:auto; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.screener-table { min-width:1400px; box-shadow:none; }.screener-table td small{display:block;color:#94a3b8;margin-top:4px;max-width:200px;white-space:normal;}
.score-pill { display:inline-grid; place-items:center; width:42px;height:42px;border-radius:50%;font-weight:800; }
.score-positive{background:#dcfce7;color:#166534}.score-watch{background:#dbeafe;color:#1d4ed8}.score-neutral{background:#fef3c7;color:#92400e}.score-negative{background:#fee2e2;color:#991b1b}
.text-positive{color:#15803d}.text-watch{color:#1d4ed8}.text-neutral{color:#a16207}.text-negative{color:#b91c1c}
.symbol-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px; }.symbol-grid span{padding:8px 10px;background:#f8fafc;border-radius:6px;font-size:13px}.symbol-grid strong{display:inline-block;min-width:52px;color:#2563eb}
@media (max-width:700px) {
  .topbar { align-items:flex-start; gap:12px; }
  .topbar nav { width:100%; }
  .topbar nav a,.nav-form { margin-left:0; }
  .stock-table { display:block; overflow-x:auto; white-space:nowrap; }
  .page-heading { align-items:flex-start; flex-direction:column; }.stats-row{grid-template-columns:1fr}.filter-form{display:block}.filter-form label{margin-bottom:12px}
}