/* HUG Project AI — shared tokens and components
   Light is the default. Dark is opt-in via [data-theme="dark"]. */

@font-face{font-family:"Anuphan";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("../fonts/anuphan-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anuphan";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("../fonts/anuphan-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Anuphan";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("../fonts/anuphan-thai-wght-normal.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}

:root{
  --paper:#F6F5F2; --surface:#FFFFFF; --sunken:#EFEEEA;
  --ink:#1C1F1E; --ink-2:#5B615F; --ink-3:#6A716D;
  --line:#E6E4DF; --line-2:#D6D3CC;
  --accent:#0F7593; --accent-ink:#0B5A71; --accent-soft:#E6F1F4;
  --danger:#C8232B; --danger-soft:#FBE9EA;
  --ok:#2F7D4F;
  --font:"Anuphan",system-ui,-apple-system,"Segoe UI","Noto Sans Thai",sans-serif;
  --radius-input:14px; --radius:6px;
  --col:680px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#131514; --surface:#1B1E1D; --sunken:#171A19;
  --ink:#ECEDEA; --ink-2:#A9AFAC; --ink-3:#8A918D;
  --line:#2A2E2C; --line-2:#383D3A;
  --accent:#5CB8D2; --accent-ink:#8ED0E3; --accent-soft:#17303A;
  --danger:#F0616A; --danger-soft:#3A1D1F;
  --ok:#6FBF8A;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100%;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body:lang(th){line-height:1.7;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--ink)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Top bar */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1080px;margin:0 auto;padding:0 24px;height:74px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:42px;width:auto}
.brand img.dark{display:none}
[data-theme="dark"] .brand img.light{display:none}
[data-theme="dark"] .brand img.dark{display:block}
.brand-name{font-weight:600;letter-spacing:-.01em;font-size:16px}
.top-spacer{flex:1}
.top-nav{display:flex;align-items:center;gap:6px}
.lang{display:flex;gap:2px;margin-right:6px}
.lang button{padding:6px 8px;font-size:13px;font-weight:600;color:var(--ink-3);border-radius:var(--radius);letter-spacing:.02em}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;text-decoration-color:var(--accent)}
.icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);color:var(--ink-2)}
.icon-btn:hover{background:var(--sunken);color:var(--ink)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.text-btn{padding:8px 12px;font-size:14px;font-weight:500;color:var(--ink-2);border-radius:var(--radius)}
.text-btn:hover{background:var(--sunken);color:var(--ink)}

/* Account menu */
.menu{position:relative}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 32px -12px rgba(0,0,0,.25);padding:6px;display:none;z-index:60}
.menu-panel.open{display:block}
.menu-head{padding:10px 12px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu-head b{display:block;font-weight:600;font-size:14px}
.menu-head span{display:block;font-size:12px;color:var(--ink-3)}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;border-radius:var(--radius);font-size:14px;color:var(--ink)}
.menu-item:hover{background:var(--sunken)}
.menu-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-3)}
.menu-item.danger{color:var(--danger)}
.menu-item.danger svg{color:var(--danger)}

/* Page column */
.page{max-width:calc(var(--col) + 48px);margin:0 auto;padding:0 24px 96px}

/* Announcement: full-width band under the top bar */
.banner{display:none;border-bottom:1px solid var(--line);background:var(--accent-soft)}
.banner.show{display:block}
.banner-in{max-width:1080px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--accent-ink);font-weight:500}
.banner-in svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.banner-in .grow{flex:1}
.banner-in button{color:inherit;opacity:.7;padding:4px;border-radius:4px}
.banner-in button:hover{opacity:1;background:rgba(0,0,0,.06)}
.banner.warning{background:#FFF3D6;border-color:#E7C77A}.banner.warning .banner-in{color:#6B4E00}
.banner.urgent{background:var(--danger);border-color:var(--danger)}.banner.urgent .banner-in{color:#fff}
[data-theme="dark"] .banner.warning{background:#33290F;border-color:#7A6220}[data-theme="dark"] .banner.warning .banner-in{color:#F2D98A}
@media(max-width:640px){.banner-in{padding:10px 16px;font-size:14px}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:var(--radius);
  font-size:14px;font-weight:600;border:1px solid transparent;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
[data-theme="dark"] .btn-primary{color:#0F1B1F}
.btn-quiet{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn-quiet:hover{color:var(--ink);border-color:var(--ink-3)}
.btn-danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.btn-danger:hover{background:var(--danger-soft)}
.btn[disabled]{opacity:.5;cursor:default}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Fields */
.field{display:block;margin-bottom:18px}
.field > span:not(.seg){display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px}
.input,.select,.textarea{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:10px 12px;font-size:15px;outline:none;transition:border-color .15s var(--ease)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent)}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AA09D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.msg{font-size:13.5px;margin-top:10px;min-height:1em}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--danger)}

/* Hairline sections */
.rule{height:1px;background:var(--line);border:0;margin:0}
.section{padding:28px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}
.section h2{font-size:15px;font-weight:600;margin:0 0 16px;letter-spacing:-.005em}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:500;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:90}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(20,22,21,.5);display:none;align-items:flex-end;justify-content:center;z-index:80;padding:16px}
.modal.open{display:flex}
.modal-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.4)}
.modal-card h3{margin:0 0 4px;font-size:17px;font-weight:600}
.modal-card p{margin:0 0 18px;font-size:14px;color:var(--ink-2)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
@media(min-width:640px){.modal{align-items:center}}

/* Footer */
.foot{max-width:1080px;margin:0 auto;padding:24px 24px 40px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:12.5px;color:var(--ink-3)}
.foot .grow{flex:1}
.foot a:hover{color:var(--ink)}

/* Mobile */
/* Language items inside the account menu exist only on phones */
.menu-panel .mobile-only{display:none}
/* Section navigation as a native dropdown on small screens */
.secnav{display:none;margin:16px 0 4px}
.secnav select{font-weight:600}
/* Tables that stack into cards on phones */
@media(max-width:640px){
  .top-in{padding:0 16px;height:62px;gap:10px}
  .brand img{height:34px}
  .brand-name{display:none}
  .top-nav .lang,.top-nav .text-btn{display:none}
  .menu-panel .mobile-only{display:flex}
  .page{padding:0 16px 80px}
  .foot{padding:20px 16px 32px}
  .secnav{display:block}
  .modal-card{padding:20px}
  .tbl.stack thead{display:none}
  .tbl.stack,.tbl.stack tbody{display:block}
  .tbl.stack tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .tbl.stack tr.detail{padding:0;border:0}
  .tbl.stack td{display:block;padding:2px 0;border:0;white-space:normal}
  .tbl.stack td.dim{font-size:12.5px}
  .tbl.stack td[data-l]::before{content:attr(data-l) " ";color:var(--ink-3);font-size:12px}
}
@media(min-width:641px){.menu-panel .mobile-only{display:none!important}}