:root{
  --bg:#0b1020; --bg2:#111831; --card:#162143; --muted:#9aa6b2; --text:#e6eef7;
  --accent:#6aa6ff; --ok:#10b981; --warn:#f59e0b; --bad:#ef4444; --border:#243155;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans";
  background:linear-gradient(180deg,var(--bg),#0c1326 60%, var(--bg2)); color:var(--text);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.app{display:grid; grid-template-columns: 280px 1fr; min-height:100vh}
aside{background:linear-gradient(180deg,#0e1731,var(--bg2)); border-right:1px solid var(--border); padding:20px; position:sticky; top:0; height:100vh; overflow:auto}
main{padding:24px 28px}

/* Typography */
h1{font-size:clamp(20px,2.6vw,34px); margin:0 0 18px}
h2{font-size:clamp(18px,2.2vw,26px); margin:24px 0 12px}
h3{font-size:clamp(16px,1.8vw,20px); margin:18px 0 8px}
.muted{color:var(--muted)}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}

/* Chips & tags */
.chip{display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted)}
.pill{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); padding:6px 10px; border-radius:999px}
.tag{font-size:12px; color:var(--muted)}

/* Nav + Search */
.nav{margin-top:18px; display:flex; flex-direction:column; gap:6px}
.nav a{padding:8px 10px; border-radius:10px; color:var(--text)}
.nav a:hover{background:#0f1a39}
.search{display:flex; align-items:center; gap:8px; padding:8px 10px; background:#0f1a39; border:1px solid var(--border); border-radius:10px; margin-top:14px}
.search input{all:unset; width:100%}

/* Grid & Cards */
.grid{display:grid; gap:16px}
@media(min-width:860px){ .grid{grid-template-columns: repeat(12,1fr)} }
.card{grid-column: span 12; background:linear-gradient(180deg,#121b39 0%, #101831 100%); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 6px 24px rgba(0,0,0,.35)}
.card.tight{padding:14px}
.card h3{margin-top:0}
.section-header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 12px}
.status{font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted)}

/* Buttons (coexist with Bootstrap .btn) */
.btn.primary{background:linear-gradient(180deg,#2446a6,#173172); border-color:#29438c; color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; border-color:var(--border)}

/* Tables */
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{border-bottom:1px solid var(--border); padding:10px 8px; vertical-align:top}
th{color:var(--muted); font-weight:600; text-align:left}

/* Code/KBD */
code, pre{background:#0c152f; border:1px solid var(--border); border-radius:12px; color:#d7e7ff}
pre{padding:12px; overflow:auto}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#0a1330; border:1px solid var(--border); padding:1px 6px; border-radius:6px}

/* Utils */
.row{display:flex; gap:12px; flex-wrap:wrap}
.two-col{display:grid; gap:16px}
@media(min-width:860px){ .two-col{grid-template-columns:1fr 1fr} }
.hidden{display:none !important}
.footer{margin-top:28px; color:var(--muted); font-size:12px}

/* Print styles */
@media print{
  aside, .row .btn, .search, #exportJson, #importJson, #resetData, [data-open], .badge, .footer, #exportCsvAll, #printView, #langSel, #profileSel, #addProfile, #delProfile{ display:none !important; }
  main{ padding:0; }
  body{ background:#fff; color:#000 }
  .card{ box-shadow:none; border-color:#ccc; background:#fff }
  a{ color:#000; text-decoration:none }
}