:root {
  color-scheme: light;
  --ink: #172b3a;
  --muted: #4c6271;
  --line: #cbd6da;
  --paper: #fff;
  --amber: #f7b338;
  --sky: #176278;
  font-family: "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
  color: var(--ink);
  background: #f3f6f6;
  line-height: 1.65;
}
* {box-sizing: border-box}
body {margin: 0}
button,input,select,textarea {font: inherit}
a {color: var(--sky); text-underline-offset: 3px}
button, .button {cursor: pointer; font-weight: 650; min-height: 44px; color: var(--ink); border: 1px solid #abbac2; padding: .55rem 1rem; background: white; border-radius: 7px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center}
button:hover, .button:hover {border-color: var(--ink); background: #f3f6f6}
button:disabled {cursor: default; opacity: .6}
:focus-visible {outline: 3px solid #0986b0; outline-offset: 3px}
a,button,label,input,select,textarea {touch-action: manipulation}
.skip {position:absolute; transform:translateY(-150%); background:white; padding:.6rem; z-index:3}
.skip:focus {transform:translateY(0)}
header {background: #142332; border-bottom: 3px solid var(--amber); color: white}
.bar {max-width: 1060px; margin: auto; display:flex; justify-content:space-between; align-items:center; min-height: 66px; padding: 0 clamp(16px, 4vw, 46px)}
.brand {display: inline-flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 700; color: white; text-decoration: none}
.back {color: #eff5f7; display: inline-flex; align-items: center; min-height: 44px}
main {max-width: 1060px; margin: auto; padding: 0 clamp(16px, 4vw, 46px) 72px; overflow-wrap: anywhere}
.mast {display: flex; gap: 20px; align-items: center; justify-content:space-between; padding: clamp(21px, 4vw, 44px) 0 22px}
.mast h1 {margin: 0; font-size: clamp(1.85rem, 4vw, 2.8rem); line-height: 1.4}
.mast p {color: var(--muted); margin: 3px 0}
.shop-sign {width: min(19vw,145px); flex-shrink:0}
h2,h3,h4,legend {line-height:1.5}
h2 {font-size: 1.45rem; margin: 0 0 .35rem}
h3 {font-size: 1.12rem; margin: 0}
h4 {font-size: 1rem; margin:0}
p {margin: .4rem 0 .85rem}
.muted, small, .hint {color: var(--muted)}
.hint, small, time {font-size: .875rem}
.panel {background: var(--paper); padding: clamp(17px, 3vw, 32px); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px}
.auth {max-width: 640px; border-top: 4px solid var(--ink)}
.sign-tabs, .nav, .actions, .head, .identity {display: flex; align-items: center; gap: 10px; flex-wrap: wrap}
.sign-tabs {gap: 0; margin: -5px 0 22px; border-bottom:1px solid var(--line)}
.sign-tabs button, .nav button {border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none}
.sign-tabs button[aria-pressed=true], .nav button[aria-pressed=true] {border-bottom-color:#bb7407; color:#1c3443}
.nav {margin-bottom: 16px; border-bottom:1px solid var(--line); gap:3px}
.identity {justify-content: space-between; margin-bottom: 12px}
.head {justify-content:space-between; align-items: baseline; margin-bottom: 12px}
.actions {margin-top: 16px}
.primary {background: var(--amber); border-color: #c68a22}
.primary:hover {background: #ffbf4f}
.secondary {color: #18536a; border-color:#a4bcc5}
.danger {color:#983723; border-color: #cba79d}
.text-btn {color:var(--sky); background:transparent; border:0; text-decoration:underline; text-underline-offset:3px; font-weight:550}
.field {display: grid; align-content:start; gap: 5px; margin:14px 0; font-weight:600}
.field input, .field select, .field textarea {font-weight:400; background: #fff; color: var(--ink); min-height: 46px; width: 100%; min-width:0; border:1px solid #95a8b0; border-radius:6px; padding:8px 10px}
.field textarea {min-height:85px; resize:vertical}
.field small {font-weight: 400}
.grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px}
fieldset {margin: 16px 0; padding: 12px 15px; min-width:0; border:1px solid var(--line); border-radius:8px}
legend {padding:0 5px; font-weight: 650}
.choices {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:14px}
.pick {display:flex; align-items:center; gap:9px; padding:6px 0; min-height:42px; cursor:pointer}
.pick input {width:17px; height:17px; flex-shrink:0; accent-color:#956008}
#notice,.info {border-inline-start:4px solid #26859a; padding:12px 16px; color:#174b5c; background:#e6f1f3; margin:0 0 16px; border-radius:4px}
#notice.error {border-color:#b44227; color:#782714; background:#fff0e9}
.badge {font-size:.8rem; font-weight:650; display:inline-block; color:#2d5865; background:#edf4f5; padding:2px 9px; border-radius:6px}
.record {border-top:1px solid var(--line); padding:16px 0 4px; margin-top:14px}
.record p {margin:3px 0}
.statusline {display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.empty {color:var(--muted); margin: .6rem 0}
.photos {display:grid; grid-template-columns:repeat(auto-fill,minmax(115px,1fr)); gap:10px; margin:.5rem 0}
.photo {min-width:0; position:relative; background:#f3f6f6; border:1px solid var(--line); padding:7px; border-radius:6px}
.photo img,.thumbnail {display:block; width:100%; height:100px; object-fit:cover; border-radius:3px}
.photo .pick {font-size:.83rem}
.photo button {width:100%; min-height:36px; font-size:.85rem}
.mini-photos {display:flex; flex-wrap:wrap; gap:6px}
.mini-photos img {height:64px; width:64px; object-fit:cover}
.logo-row {display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.logo-preview {width:96px; height:80px; object-fit:contain; vertical-align:middle; border:1px solid var(--line); border-radius:6px; background:repeating-conic-gradient(#e2e9eb 0 25%, white 0 50%) 0 0 / 16px 16px}
dl {margin:8px 0}
dt {color:var(--muted); font-size:.85rem}
dd {margin:0 0 6px}
details {margin:.6rem 0}
summary {cursor:pointer; min-height:40px; font-weight:600; padding:.45rem 0}
.compare {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.compare section {padding:10px 14px; background:#f3f6f6; border-radius:5px}
pre {white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:.85rem; margin:0}
[hidden] {display:none!important}
@media(max-width:620px) {
 .grid,.choices,.compare {grid-template-columns:1fr}
 .grid {gap:0}
 .grid .field {margin:7px 0}
 .shop-sign {width:78px}
 .nav button,.sign-tabs button {padding:.5rem .65rem}
 .nav {column-gap:0}
 .actions {gap:8px}
 .brand {font-size:1.1rem}
}

.directory-controls{display:grid;grid-template-columns:2fr 1fr 1.5fr 1fr 1fr;gap:12px;margin:18px 0}
.directory-scroll{max-height:65vh;overflow:auto;border:1px solid #d2d9df;border-radius:10px;background:#fff;color:#243746}
.directory-table{border-collapse:separate;border-spacing:0;width:100%;min-width:1180px;font-size:13px}
.directory-table th{position:sticky;top:0;background:#edf1f4;color:#152c3d;z-index:1;text-align:left;white-space:nowrap}
.directory-table th,.directory-table td{border-bottom:1px solid #e1e7eb;border-right:1px solid #e1e7eb;padding:12px;vertical-align:top}
.directory-table tr:hover td{background:#f0f7fc}.directory-table td:first-child{min-width:235px}
.directory-table small{display:block;font-size:11px;margin-top:5px;color:#647380}
.directory-table a{color:#12558c}.directory .head{flex-wrap:wrap;gap:10px}
.directory-controls .field{margin:0}.directory .actions{align-items:center;margin-top:14px}
@media(max-width:950px){.directory-controls{grid-template-columns:1fr 1fr}.directory-controls .field:first-child{grid-column:1/-1}}
@media(max-width:480px){.directory-controls{grid-template-columns:1fr}.directory-scroll{max-height:58vh}}

body:has(.directory) main{max-width:1540px}
.directory-mobile{display:none}
@media(max-width:620px){
 .directory-scroll{display:none}
 .directory-mobile{display:block}
 .directory-controls{grid-template-columns:1fr 1fr;gap:10px}
 .directory-controls .field:first-child{grid-column:1/-1}
 .directory-controls input,.directory-controls select{font-size:16px}
 .directory{padding:14px}
 .directory-shop{border:1px solid var(--line);border-radius:10px;margin:10px 0;padding:0 12px;background:#fff}
 .directory-shop summary{padding:14px 0;line-height:1.6;list-style:none}
 .directory-shop summary::-webkit-details-marker{display:none}
 .directory-shop summary strong{display:block;font-size:16px}
 .directory-shop summary>span{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:4px}
 .directory-expand{display:block;color:var(--sky);margin-top:8px}
 .directory-shop[open] .directory-expand{display:none}
 .directory-shop[open] summary{border-bottom:1px solid var(--line)}
 .directory-shop .actions{padding-bottom:14px}
 .directory-shop .actions a{flex:1;min-height:48px;white-space:nowrap}
 .directory .actions{justify-content:space-between}
 .directory-shop dd{overflow-wrap:anywhere}
}