/* ============================================================
   QAMS — ธีมน้ำเงินกรมท่า + ทราย/ครีม
   ฟอนต์: Pridi (เมนู/หัวเรื่อง) · Niramit (เนื้อหา)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Pridi:wght@400;500;600;700&family=Niramit:wght@300;400;500;600;700&display=swap');

:root{
  /* Palette หลัก: น้ำเงินกรมท่า + ทราย */
  --navy:      #2f3650;   /* น้ำเงินกรมท่าเข้ม (หลัก) */
  --navy-900:  #232a40;
  --navy-700:  #3b4468;
  --navy-600:  #4a5680;
  --steel:     #a9b8c3;   /* ฟ้า-เทา */
  --steel-200: #c7d2da;
  --steel-050: #eef2f5;
  --sand:      #ded9b8;   /* ทราย/คาคิ */
  --sand-deep: #cbc493;
  --sand-050:  #f4f2e4;
  --cream:     #f1f2e8;   /* พื้นหลังหน้า */
  --paper:     #ffffff;
  --ink:       #212639;
  --ink-soft:  #55607a;
  --line:      #e4e6dd;

  /* สถานะ dashboard */
  --st-green:  #3f7d5a;  --st-green-bg:#e4f0e9;
  --st-yellow: #c9a227;  --st-yellow-bg:#faf3d8;
  --st-orange: #d08422;  --st-orange-bg:#fae9d2;
  --st-red:    #c04a45;  --st-red-bg:#f6dfdd;
  --st-grey:   #8a91a3;  --st-grey-bg:#eceef1;

  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 10px 30px rgba(35,42,64,.08);
  --shadow-sm: 0 4px 14px rgba(35,42,64,.06);
  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Niramit', system-ui, -apple-system, sans-serif;
  font-weight:400; line-height:1.65; font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.headline,.brand-title,.nav a,.btn,.section-eyebrow,.sidebar a,.card-title{
  font-family:'Pridi', serif;
}
h1,h2,h3,h4{ color:var(--navy); line-height:1.3; margin:0 0 .5em; font-weight:600; }
a{ color:var(--navy-600); text-decoration:none; }
a:hover{ color:var(--navy); }
img{ max-width:100%; display:block; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.muted{ color:var(--ink-soft); }
.text-center{ text-align:center; }

/* ---------------- ปุ่ม ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  padding:.62em 1.25em; border-radius:999px; border:1.5px solid transparent;
  font-size:.98rem; font-weight:500; cursor:pointer; transition:.18s; line-height:1;
  background:var(--steel-050); color:var(--navy);
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-900); color:#fff; }
.btn-sand{ background:var(--sand); color:var(--navy-900); }
.btn-sand:hover{ background:var(--sand-deep); }
.btn-outline{ background:transparent; border-color:var(--steel); color:var(--navy); }
.btn-outline:hover{ background:var(--steel-050); }
.btn-ghost{ background:transparent; color:var(--navy); }
.btn-danger{ background:var(--st-red); color:#fff; }
.btn-sm{ padding:.42em .85em; font-size:.86rem; }
.btn-block{ width:100%; }

/* ---------------- Badge / pill ---------------- */
.badge{ display:inline-block; padding:.28em .7em; border-radius:999px; font-size:.78rem;
  font-weight:600; font-family:'Niramit'; line-height:1.4; }
.badge-green{ background:var(--st-green-bg); color:var(--st-green); }
.badge-yellow{ background:var(--st-yellow-bg); color:#8a6d12; }
.badge-orange{ background:var(--st-orange-bg); color:#9a5c12; }
.badge-red{ background:var(--st-red-bg); color:var(--st-red); }
.badge-grey{ background:var(--st-grey-bg); color:var(--st-grey); }
.badge-steel{ background:var(--steel-050); color:var(--navy-600); }
.badge-sand{ background:var(--sand-050); color:#8a7f3a; }
.badge-navy{ background:var(--navy); color:#fff; }

/* ---------------- Top utility bar ---------------- */
.topbar{ background:var(--navy-900); color:#dfe4ee; font-size:.86rem; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; height:40px; gap:16px; }
.topbar a{ color:#dfe4ee; }
.topbar a:hover{ color:#fff; }

/* ---------------- Header / nav ---------------- */
.site-header{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.site-header .container{ display:flex; align-items:center; gap:18px; height:84px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand-logo{ width:52px; height:52px; border-radius:12px; object-fit:cover;
  background:var(--navy); display:grid; place-items:center; color:#fff; font-family:'Pridi'; font-size:1.3rem; flex:none; }
.brand-logo-img,.login-logo-img{ width:100%; height:100%; object-fit:contain; border-radius:inherit; }
.brand-title{ font-size:1.22rem; font-weight:600; color:var(--navy); line-height:1.15; }
.brand-sub{ font-size:.76rem; color:var(--ink-soft); font-family:'Niramit'; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.nav a{ padding:.5em .85em; border-radius:999px; font-size:.95rem; color:var(--navy); font-weight:500; }
.nav a:hover{ background:var(--steel-050); }
.nav a.active{ background:var(--navy); color:#fff; }
.nav-toggle{ display:none; }

/* ---------------- Hero ---------------- */
.hero{ position:relative; background:linear-gradient(135deg,var(--navy) 0%, var(--navy-700) 60%, var(--navy-600) 100%);
  color:#fff; overflow:hidden; }
.hero::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 400px at 80% -10%, rgba(222,217,184,.18), transparent 60%); }
.hero .container{ position:relative; z-index:1; padding:74px 20px 82px; text-align:center; }
.hero .eyebrow{ display:inline-block; background:rgba(255,255,255,.14); color:#fff;
  padding:.4em 1.1em; border-radius:999px; font-size:.9rem; margin-bottom:18px; backdrop-filter:blur(4px); }
.hero h1{ color:#fff; font-size:2.9rem; font-weight:700; margin:.1em 0 .25em; letter-spacing:.3px; }
.hero p{ color:#e6ebf5; font-size:1.15rem; max-width:760px; margin:0 auto 8px; }
.hero .hero-actions{ margin-top:26px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-full{ min-height:calc(100vh - 76px); display:grid; place-items:center; background-size:cover; background-position:center; }
.hero-full::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(21,30,55,.86),rgba(21,30,55,.48)); }
.hero-full .container{ padding-top:88px; padding-bottom:94px; }
.hero-full h1{ font-size:clamp(2.2rem,5vw,4.6rem); text-shadow:0 2px 18px rgba(0,0,0,.25); }
.hero-full p{ max-width:880px; }

/* ---------------- Section ---------------- */
section.block{ padding:56px 0; }
.section-eyebrow{ text-align:center; color:var(--sand-deep); font-weight:600; letter-spacing:1px;
  text-transform:uppercase; font-size:.85rem; margin-bottom:6px; }
.section-title{ text-align:center; font-size:2rem; margin-bottom:8px; }
.section-lead{ text-align:center; max-width:720px; margin:0 auto 38px; color:var(--ink-soft); }
.assessment-nav{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 34px; }
.assessment-nav>a{ display:flex; align-items:center; gap:11px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); }
.assessment-nav>a:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.assessment-nav .ui-icon{ width:27px; height:27px; flex:0 0 auto; }
.assessment-nav strong,.assessment-nav small{ display:block; }
.assessment-nav small{ color:var(--ink-soft); font-size:.78rem; margin-top:2px; }

/* ---------------- Cards / grid ---------------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.card-pad{ padding:22px; }
.card-hover{ transition:.2s; }
.card-hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card-title{ font-size:1.18rem; color:var(--navy); margin:.2em 0 .35em; }

/* สถิติ */
.stat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 18px; text-align:center; box-shadow:var(--shadow-sm); }
.stat .num{ font-family:'Pridi'; font-size:2.6rem; font-weight:700; color:var(--navy); line-height:1; }
.stat .lbl{ color:var(--ink-soft); margin-top:8px; font-size:.98rem; }

/* การ์ดไอคอนหัวมุม (แบบเว็บอ้างอิง) */
.feature{ position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); transition:.2s; }
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.feature .ic{ width:56px; height:56px; border-radius:14px; background:var(--steel-050);
  display:grid; place-items:center; color:var(--navy); font-size:1.5rem; margin-bottom:14px; }
.feature .corner{ position:absolute; top:20px; right:20px; width:42px; height:42px; border-radius:50%;
  background:var(--steel-050); color:var(--navy); display:grid; place-items:center; font-size:1.05rem; }
.feature .tag{ display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:var(--ink-soft);
  background:var(--sand-050); padding:.25em .7em; border-radius:999px; margin-bottom:10px; }
.feature .more{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
  display:flex; align-items:center; justify-content:space-between; color:var(--navy); font-weight:600; font-family:'Pridi'; }
.feature .more .arrow{ width:38px; height:38px; border-radius:50%; background:var(--steel-050); color:var(--navy);
  display:grid; place-items:center; transition:.2s; }
.feature:hover .more .arrow{ background:var(--steel-100); color:var(--navy); }

/* มาตรฐานการ์ด */
.std-card{ border-left:3px solid var(--navy); }
.std-card.s2,.std-card.s3{ border-left-color:var(--navy); }
.ui-icon{ width:22px; height:22px; display:block; flex:none; }
.feature .ic .ui-icon{ width:28px; height:28px; }
.feature .corner .ui-icon{ width:21px; height:21px; }
.icon-inline{ width:14px; height:14px; display:inline-block; vertical-align:-2px; }
.btn .icon-inline{ margin-right:4px; }
.minimal-placeholder{ height:150px; background:var(--steel-050); color:var(--navy);
  display:grid; place-items:center; }
.minimal-placeholder .ui-icon{ width:36px; height:36px; stroke-width:1.5; }

/* ---------------- Progress ---------------- */
.progress{ height:9px; background:var(--steel-050); border-radius:999px; overflow:hidden; }
.progress > span{ display:block; height:100%; background:var(--navy); border-radius:999px; }

/* ---------------- Flash ---------------- */
.flash-wrap{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:1000; width:min(560px,92vw); }
.flash{ padding:.85em 1.1em; border-radius:12px; margin-bottom:10px; box-shadow:var(--shadow);
  background:#fff; border-left:5px solid var(--navy); font-size:.96rem; }
.flash.success{ border-left-color:var(--st-green); }
.flash.danger{ border-left-color:var(--st-red); }
.flash.warning{ border-left-color:var(--st-orange); }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--navy-900); color:#c9d0e0; padding:46px 0 26px; margin-top:60px; }
.site-footer h4{ color:#fff; font-size:1.05rem; }
.site-footer a{ color:#c9d0e0; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:18px;
  text-align:center; font-size:.85rem; color:#9aa4bd; }

/* ============================================================
   ระบบจัดการ (back-office)
   ============================================================ */
.admin-body{ display:flex; min-height:100vh; background:var(--cream); }
.sidebar{ width:262px; background:var(--navy-900); color:#cdd4e6; flex:none; position:sticky; top:0;
  height:100vh; overflow-y:auto; }
.sidebar .side-brand{ padding:20px 20px 16px; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar .side-brand .t{ font-family:'Pridi'; color:#fff; font-weight:600; font-size:1.05rem; }
.sidebar .side-brand .s{ font-size:.76rem; color:#95a0c0; }
.sidebar .side-brand .t,.sidebar .side-brand .s{ display:block; }
.side-brand-logo{ width:38px; height:38px; border-radius:10px; background:#fff; padding:3px; flex:none; }
.side-brand-img{ width:100%; height:100%; object-fit:contain; border-radius:7px; }
.sidebar nav{ padding:10px 0 40px; }
.sidebar .grp{ padding:14px 22px 6px; font-size:.72rem; letter-spacing:.5px; text-transform:uppercase; color:#7a86a8; }
.sidebar a{ display:flex; align-items:center; gap:11px; padding:.62em 22px; color:#cdd4e6;
  font-size:.95rem; font-family:'Niramit'; border-left:3px solid transparent; }
.sidebar a .i{ width:20px; display:grid; place-items:center; opacity:.82; }
.sidebar a .i .ui-icon{ width:18px; height:18px; stroke-width:1.7; }
.sidebar a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar a.active{ background:rgba(255,255,255,.09); color:#fff; border-left-color:var(--sand); }

.admin-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.admin-topbar{ background:var(--paper); border-bottom:1px solid var(--line); height:64px;
  display:flex; align-items:center; gap:16px; padding:0 24px; position:sticky; top:0; z-index:20; }
.admin-topbar .page-t{ font-family:'Pridi'; font-weight:600; color:var(--navy); font-size:1.15rem; }
.admin-topbar .spacer{ margin-left:auto; }
.admin-content{ padding:26px 24px 60px; }
.hamb{ display:none; background:none; border:none; font-size:1.4rem; color:var(--navy); cursor:pointer; }

.ay-select{ padding:.4em .8em; border:1.5px solid var(--line); border-radius:999px; font-family:'Niramit';
  background:#fff; color:var(--navy); font-size:.9rem; }

/* Dashboard status tiles */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.tile{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:16px; }
.tile .dot{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:1.3rem; flex:none; }
.tile .dot .ui-icon{ width:21px; height:21px; }
.tile .num{ font-family:'Pridi'; font-size:1.9rem; font-weight:700; line-height:1; color:var(--navy); }
.tile .lbl{ font-size:.9rem; color:var(--ink-soft); }
.dot.green{ background:var(--st-green-bg); color:var(--st-green); }
.dot.yellow{ background:var(--st-yellow-bg); color:#8a6d12; }
.dot.orange{ background:var(--st-orange-bg); color:#9a5c12; }
.dot.red{ background:var(--st-red-bg); color:var(--st-red); }
.dot.grey{ background:var(--st-grey-bg); color:var(--st-grey); }
.dot.navy{ background:var(--navy); color:#fff; }

/* Panel */
.panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); margin-bottom:22px; }
.panel-head{ padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.panel-head h3{ margin:0; font-size:1.1rem; }
.panel-head .spacer{ margin-left:auto; }
.panel-body{ padding:20px; }

/* ตาราง */
.table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.table th,.table td{ padding:.7em .8em; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
.table th{ font-family:'Pridi'; color:var(--navy); font-weight:600; background:var(--steel-050); font-size:.9rem; }
.table tr:hover td{ background:#fbfcfa; }
.table-wrap{ overflow-x:auto; }

/* ฟอร์ม */
.form-row{ margin-bottom:16px; }
.form-row label{ display:block; font-family:'Pridi'; font-weight:500; color:var(--navy); margin-bottom:6px; font-size:.95rem; }
.input,.select,.textarea{ width:100%; padding:.6em .8em; border:1.5px solid var(--line); border-radius:10px;
  font-family:'Niramit'; font-size:1rem; background:#fff; color:var(--ink); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--navy-600); box-shadow:0 0 0 3px rgba(74,86,128,.12); }
.textarea{ min-height:110px; resize:vertical; }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.help{ font-size:.82rem; color:var(--ink-soft); margin-top:4px; }

/* Modal สำหรับฟอร์มเพิ่ม/แก้ไข */
.modal{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:24px; }
.modal.is-open{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(24,29,45,.62); backdrop-filter:blur(3px); }
.modal-dialog{ position:relative; width:min(760px,96vw); max-height:92vh; overflow:auto; background:var(--paper);
  border-radius:18px; box-shadow:0 28px 80px rgba(10,15,30,.3); }
.modal-dialog.modal-lg{ width:min(1120px,96vw); }
.modal-dialog.modal-xl{ width:min(1380px,98vw); }
.modal-head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; padding:16px 20px;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); }
.modal-head h3{ margin:0; font-size:1.15rem; }
.modal-head .spacer{ margin-left:auto; }
.modal-close{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--ink-soft);
  background:var(--steel-050); font-size:1.25rem; line-height:1; }
.modal-close:hover{ background:var(--steel-100); color:var(--navy); }
.modal-body{ padding:20px; }
body.modal-open{ overflow:hidden; }
.choice-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; padding:12px;
  border:1px solid var(--line); border-radius:12px; background:var(--steel-050); }
.choice-item{ display:flex!important; gap:8px; align-items:center; padding:7px 9px; margin:0!important; border-radius:9px;
  background:#fff; border:1px solid transparent; font-family:'Niramit'!important; font-size:.9rem!important; cursor:pointer; }
.choice-item:has(input:checked){ border-color:var(--navy-600); background:#f8f9fc; }

/* Preview หลักฐาน */
.preview-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin:12px 0; }
.evidence-preview{ display:flex; width:100%; min-height:110px; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:var(--steel-050); color:var(--navy); }
.evidence-preview img,.evidence-preview video{ width:100%; height:190px; object-fit:cover; background:#111; }
.evidence-preview.audio{ min-height:auto; padding:14px; align-items:center; }
.evidence-preview audio{ width:100%; }
.evidence-preview.pdf iframe{ width:100%; height:260px; border:0; background:#fff; }
.evidence-preview.file{ min-height:88px; padding:14px; align-items:center; gap:12px; }
.evidence-preview.file .ui-icon{ width:30px; height:30px; }
.evidence-preview.file span{ min-width:0; }
.evidence-preview.file strong,.evidence-preview.file small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.evidence-preview.file small{ color:var(--ink-soft); margin-top:3px; }
.evidence-preview.compact img,.evidence-preview.compact video{ height:130px; }
.evidence-preview.compact.pdf iframe{ height:170px; }
.evidence-preview.media-embed{ aspect-ratio:16/9; min-height:0; background:#111; }
.evidence-preview.media-embed iframe{ width:100%; height:100%; border:0; background:#111; }
.evidence-preview.media-embed.audio,.evidence-preview.media-embed.file{ aspect-ratio:auto; background:var(--steel-050); }
.evidence-preview.media-embed.pdf{ aspect-ratio:auto; min-height:260px; background:#fff; }
.evidence-preview.media-embed.compact.pdf{ min-height:170px; }
.upload-drop{ border:1.5px dashed var(--steel-300); border-radius:14px; padding:18px; background:var(--steel-050); }
.brand-preview{ width:74px; height:74px; object-fit:contain; border:1px solid var(--line); border-radius:14px; background:#fff; padding:6px; }

/* หน้า plain (login / 403) */
.plain-page{ min-height:100vh; display:grid; place-items:center; padding:24px;
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-700) 100%); }
.notice-card,.login-card{ background:#fff; border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,.25);
  padding:40px; width:min(440px,94vw); text-align:center; }
.notice-icon{ font-size:2.6rem; margin-bottom:8px; }
.login-card .login-logo{ width:64px; height:64px; border-radius:16px; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-family:'Pridi'; font-size:1.6rem; margin:0 auto 14px; }
.login-card h1{ font-size:1.4rem; }
.login-card .form-row{ text-align:left; }
.demo-note{ margin-top:18px; font-size:.82rem; color:var(--ink-soft); background:var(--sand-050);
  border-radius:12px; padding:12px 14px; text-align:left; }

/* breadcrumb */
.crumb{ font-size:.86rem; color:var(--ink-soft); margin-bottom:14px; }
.crumb a{ color:var(--navy-600); }

/* empty */
.empty{ text-align:center; padding:40px 20px; color:var(--ink-soft); }
.empty .ic{ font-size:2.4rem; margin-bottom:8px; opacity:.6; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .assessment-nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:2.2rem; }
  .nav{ display:none; position:absolute; top:84px; left:0; right:0; background:#fff; flex-direction:column;
    align-items:stretch; padding:10px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .nav.open{ display:flex; }
  .nav a{ border-radius:10px; }
  .nav-toggle{ display:inline-flex; margin-left:auto; background:none; border:none; font-size:1.5rem; color:var(--navy); cursor:pointer; }
  .sidebar{ position:fixed; left:0; top:0; z-index:100; transform:translateX(-100%); transition:.25s; }
  .sidebar.open{ transform:translateX(0); }
  .hamb{ display:inline-block; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .assessment-nav{ grid-template-columns:1fr; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .hero h1{ font-size:1.85rem; }
  body{ font-size:16px; }
  .modal{ padding:10px; align-items:flex-end; }
  .modal-dialog,.modal-dialog.modal-lg,.modal-dialog.modal-xl{ width:100%; max-height:94vh; border-radius:18px 18px 0 0; }
}