* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--ink-body); font:16px/1.55 var(--font-sans); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:18px 24px;
       border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10; }
.logo { font:600 24px var(--font-serif); color:var(--ink); text-decoration:none; }
.logo-dot { color:var(--amber); }
.nav-links { display:flex; align-items:center; gap:18px; }
.nav-links a { color:var(--ink); text-decoration:none; font-weight:500; font-size:15px; }
.theme-toggle { border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
                border-radius:100px; width:46px; height:26px; cursor:pointer; }
.container { max-width:720px; margin:0 auto; padding:36px 24px 96px; }
.page-title { font:500 32px var(--font-serif); color:var(--ink); margin-bottom:16px; }
.muted { color:var(--ink-soft); }
.footer { text-align:center; color:var(--ink-soft); font-size:13px; padding:24px; border-top:1px solid var(--border); }
.btn { display:inline-block; border-radius:100px; padding:10px 20px; font-weight:600; font-size:15px;
       text-decoration:none; border:1px solid var(--border-strong); background:var(--surface);
       color:var(--ink); cursor:pointer; font-family:var(--font-sans); }
.btn-gradient { background:var(--gradient); border:none; color:#21231F; }
.btn[disabled] { opacity:.45; pointer-events:none; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px;
        padding:28px; box-shadow:0 8px 24px var(--card-shadow); }
.field { margin-bottom:16px; }
.field label { display:block; font-weight:600; font-size:14px; color:var(--ink); margin-bottom:6px; }
.field input, .field textarea { width:100%; padding:10px 12px; border:1px solid var(--border-strong);
        border-radius:8px; background:var(--surface); color:var(--ink); font:15px var(--font-sans); }
.error { color:#B3402E; font-size:14px; margin-bottom:12px; }
.flash { border:1px solid var(--positive); color:var(--positive); border-radius:8px;
         padding:10px 14px; margin-bottom:16px; font-size:14px; }
@media (max-width:600px){ .nav{padding:14px 16px} .container{padding:24px 16px 64px} }
.container-1180 { max-width:1180px; margin:0 auto; padding:36px 24px 96px; }
.container-1080 { max-width:1080px; margin:0 auto; padding:36px 24px 96px; }
@media (max-width:600px){ .container-1180,.container-1080 { padding:24px 16px 64px } }
.admin-shell { display:flex; min-height:100vh; }
.admin-sidebar { width:220px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); padding:24px 20px; }
.admin-nav { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.admin-nav a { color:var(--ink); text-decoration:none; font-weight:500; font-size:14px; }
.admin-main { flex:1; padding:32px 40px; max-width:1100px; }
.table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.table th, .table td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--border); font-size:14px; }
.table th { background:var(--surface-alt); font-weight:600; color:var(--ink); }
.table tr:last-child td { border-bottom:none; }
@media (max-width:700px){ .admin-shell{flex-direction:column} .admin-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border)} .admin-main{padding:20px} }

/* ---- Phase 9 responsive pass (phone-first; Lao users are on low-end phones, spec §6.3) ---- */
@media (max-width:640px){
  .nav-links{ flex-wrap:wrap; gap:10px 12px; justify-content:flex-end; }
  /* 16px inputs stop iOS from zooming on focus; 40px min tap target */
  input, select, textarea, .btn, button{ font-size:16px; }
  .btn, button{ min-height:40px; }
  /* wide admin/data tables scroll inside themselves instead of overflowing the page */
  .table, table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  img{ max-width:100%; height:auto; }
  /* any inline two/three-column grid collapses to a single column */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
}