:root {
  --navy: #0A2647; --ink: #16213E; --blue: #1E6FEB; --cyan: #00B4D8;
  --paper: #F5F8FC; --white: #FFFFFF; --line: #DCE4EE; --success: #178A54; --muted: #5B6B85;
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
  --radius:14px; --shadow-sm:0 1px 2px rgba(10,38,71,.06); --shadow-md:0 8px 24px rgba(10,38,71,.08);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
.setup-banner { background:#EFF6FF; color:#1E4FA8; border-bottom:1px solid #C7DBFA; font-size:.85rem; text-align:center; padding:10px 16px; }
.site-header { background:linear-gradient(135deg,var(--navy),#123566); color:var(--white); }
.header-inner { max-width:1180px; margin:0 auto; padding:28px 24px 32px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.4rem; font-weight:600; letter-spacing:-.01em; text-decoration:none; color:inherit; }
.brand strong { color:var(--cyan); font-weight:700; }
.brand-mark { width:34px; height:34px; flex-shrink:0; border-radius:8px; }
.tagline { margin:10px 0 0; color:#C7D6EC; font-size:.98rem; max-width:50ch; }
.layout { max-width:1180px; margin:-22px auto 64px; padding:0 24px; display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:start; }
.sim-panel { position:sticky; top:24px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:28px 22px 22px; overflow:hidden; max-height:calc(100vh - 48px); overflow-y:auto; }
.sim-notch { position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:64px; height:28px; background:var(--paper); border:1px solid var(--line); border-top:none; border-radius:0 0 10px 10px; }
.sim-title { font-family:var(--font-display); font-size:1.05rem; font-weight:600; margin:6px 0 20px; color:var(--navy); }
.filter-group { border:none; padding:0; margin:0 0 20px; }
.filter-group legend { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px; padding:0; }
.filter-option { display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ink); cursor:pointer; padding:5px 0; user-select:none; }
.filter-option input { position:absolute; opacity:0; width:1px; height:1px; }
.filter-check { width:18px; height:18px; border:1.5px solid var(--line); border-radius:5px; flex-shrink:0; position:relative; transition:border-color .15s,background .15s; }
.filter-check::after { content:""; position:absolute; left:5px; top:1px; width:4px; height:9px; border:solid var(--white); border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0; }
.filter-option input:checked + .filter-check { background:var(--blue); border-color:var(--blue); }
.filter-option input:checked + .filter-check::after { opacity:1; }
.filter-option input:focus-visible + .filter-check { outline:2px solid var(--cyan); outline-offset:2px; }
.clear-btn { width:100%; background:none; border:1.5px solid var(--line); color:var(--muted); font-family:var(--font-body); font-size:.85rem; font-weight:600; padding:9px 12px; border-radius:8px; cursor:pointer; transition:border-color .15s,color .15s; }
.clear-btn:hover { border-color:var(--blue); color:var(--blue); }
.result-count { margin:16px 0 0; font-size:.8rem; color:var(--muted); text-align:center; }
.result-count span { font-family:var(--font-mono); font-weight:600; color:var(--navy); }

.table-wrap { min-width:0; }
.table-scroll { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
thead th { text-align:left; font-family:var(--font-body); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--white); background:var(--navy); padding:13px 16px; white-space:nowrap; }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { background:#0d2f57; }
th .arrow { opacity:.5; margin-left:4px; font-size:.65rem; }
th.active .arrow { opacity:1; color:var(--cyan); }
.plan-row { border-bottom:1px solid var(--line); transition:background .12s; }
.plan-row:last-child { border-bottom:none; }
.plan-row:hover { background:#F0F6FF; }
.plan-row.is-popular { background:#F7FBFF; }
.plan-row td { padding:15px 16px; vertical-align:middle; font-size:.9rem; }
.badge { display:inline-block; background:var(--cyan); color:var(--navy); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:999px; margin-right:6px; }
.badge.value { background:var(--success); color:var(--white); }
.operator-chip { font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--navy); }
.price-figure { font-family:var(--font-mono); font-size:1.05rem; font-weight:600; color:var(--navy); }
.data-figure { font-family:var(--font-mono); font-weight:600; }
.validity-figure, .cost-figure { font-family:var(--font-mono); }
.compare-checkbox { transform:scale(1.15); cursor:pointer; }
.empty-state { text-align:center; color:var(--muted); padding:20px; font-size:.92rem; }

.fiveg-badge { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-body); font-size:.68rem; font-weight:700; padding:2px 7px 2px 6px; border-radius:999px; margin-top:5px; cursor:default; }
.fiveg-badge.included { background:#E4F7EC; color:var(--success); }
.fiveg-badge.topup { background:#FFF3DA; color:#9A6B00; }
.fiveg-badge .dot { width:5px; height:5px; border-radius:50%; background:currentColor; }

.compare-tray { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(120%); background:var(--navy); color:var(--white); padding:12px 14px 12px 20px; border-radius:12px; box-shadow:0 12px 32px rgba(10,38,71,.35); display:flex; align-items:center; gap:16px; transition:transform .2s ease; z-index:50; }
.compare-tray.visible { transform:translateX(-50%) translateY(0); }
.compare-tray span { font-size:.85rem; font-family:var(--font-mono); }
.compare-tray button { font-family:var(--font-body); font-weight:600; font-size:.85rem; border:none; border-radius:8px; padding:9px 16px; cursor:pointer; }
.compare-tray .go-btn { background:var(--cyan); color:var(--navy); }
.compare-tray .clear-link { background:none; color:#C7D6EC; text-decoration:underline; padding:9px 4px; }

.modal-overlay { position:fixed; inset:0; background:rgba(10,38,71,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:100; opacity:0; pointer-events:none; transition:opacity .15s; }
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal-box { background:var(--white); border-radius:var(--radius); max-width:900px; width:100%; max-height:85vh; overflow:auto; padding:24px; }
.modal-box h3 { font-family:var(--font-display); color:var(--navy); margin-top:0; }
.modal-close { float:right; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--muted); }
.compare-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:12px; }
.compare-card { border:1px solid var(--line); border-radius:10px; padding:14px; }
.compare-card .op { font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:.95rem; }
.compare-card dl { margin:10px 0 0; font-size:.82rem; }
.compare-card dt { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; margin-top:8px; }
.compare-card dd { margin:2px 0 0; font-family:var(--font-mono); }

.site-footer { text-align:center; padding:28px 16px 40px; color:var(--muted); font-size:.8rem; }
.site-footer a { color:var(--blue); text-decoration:none; }

@media (max-width:860px) {
  .layout { grid-template-columns:1fr; }
  .sim-panel { position:static; max-height:none; }
  .sim-notch { display:none; }
}
@media (max-width:620px) {
  .header-inner { padding:24px 18px 28px; }
  .layout { padding:0 14px; margin-top:-18px; }
  .table-scroll { overflow-x:auto; }
  table { min-width:640px; }
}