@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800&display=swap');
:root{--blue:#003da5;--yellow:#ffc400;--ink:#10213b;--muted:#64748b;--line:#dfe7f1;--bg:#f4f7fb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Kanit,system-ui,sans-serif}.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:3px solid var(--yellow);display:flex;justify-content:space-between;align-items:center;padding:12px max(16px,calc((100% - 1000px)/2));gap:12px}.top>a{text-decoration:none;color:var(--blue);display:flex;flex-direction:column}.top small{font-size:9px;letter-spacing:1px}.top nav{display:flex;gap:12px}.top nav a{color:var(--ink);font-size:13px;text-decoration:none}.wrap{max-width:1000px;margin:auto;padding:20px 16px 60px;min-height:calc(100vh - 115px)}footer{text-align:center;padding:18px;color:var(--muted);font-size:12px}.hero{background:linear-gradient(135deg,var(--blue),#001f57);color:#fff;border-radius:24px;padding:32px 24px;margin-bottom:28px}.hero span{color:var(--yellow);font-weight:700}.hero h1{font-size:clamp(32px,7vw,56px);line-height:1.05;margin:12px 0}.hero p{max-width:540px;color:#dbeafe}.btn{border:0;border-radius:12px;padding:10px 16px;font:600 14px Kanit;display:inline-block;text-decoration:none;text-align:center;cursor:pointer}.yellow{background:var(--yellow);color:#06295f}.blue{background:var(--blue);color:#fff}.danger{background:#fee2e2;color:#991b1b}.wide{display:block;width:100%;padding:14px}.section-title,.line,.summary{display:flex;justify-content:space-between;align-items:center;gap:14px}.section-title a{color:var(--blue)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;text-decoration:none;color:inherit}.shop .cover{height:130px;border-radius:12px;background:#eef4ff;display:grid;place-items:center;font-size:44px;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover}.shop h3,.menu h3{margin:12px 0 4px}.shop p,.menu p,.note{color:var(--muted);font-size:13px}.shop-head{background:#fff;border-radius:18px;padding:20px;border-left:6px solid var(--yellow)}.menu-list{display:grid;gap:12px}.menu{display:flex;justify-content:space-between;align-items:center;gap:14px}.menu form{display:flex;align-items:center;gap:8px}.qty{width:60px;padding:9px}.summary{background:#fff;border:1px solid var(--line);padding:18px;border-radius:16px;margin:16px 0}.form{display:grid;gap:14px}.form label{display:grid;gap:6px;font-size:13px;font-weight:600}.form input,.form textarea,.form select,.edit input,.edit textarea,.search input{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:11px;font:inherit;background:#fff}.form textarea,.edit textarea{min-height:80px}.check{display:flex!important}.check input{width:auto}.alert{background:#fff4cc;border:1px solid #f4cf48;padding:12px;border-radius:12px;margin:12px 0}.alert.ok{background:#dcfce7}.empty{grid-column:1/-1;text-align:center;background:#fff;border:1px dashed #b8c6d9;border-radius:18px;padding:32px}.pill{background:#e8f0ff;color:var(--blue);padding:4px 9px;border-radius:999px;font-size:12px;display:inline-block}.line{padding:9px 0;border-bottom:1px solid #edf1f6}.line.total{font-size:18px;border:0}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.stats div{background:#fff;border-radius:16px;padding:18px}.stats b{display:block;font-size:26px;color:var(--blue)}.actions{display:flex;flex-wrap:wrap;gap:10px}.order-row{display:flex;justify-content:space-between}.order-row small{display:block;color:var(--muted)}.order-row>div:last-child{text-align:right}.search{display:flex;gap:8px;margin-bottom:18px}.edit{display:grid;grid-template-columns:2fr 1fr;align-items:start}.edit textarea,.edit>label,.edit>div{grid-column:1/-1}@media(max-width:520px){.top{align-items:flex-start}.top nav{gap:8px;flex-wrap:wrap;justify-content:flex-end}.top nav a{font-size:11px}.wrap{padding:16px 12px 50px}.hero{padding:26px 18px;border-radius:18px}.grid{grid-template-columns:1fr 1fr}.shop .cover{height:100px}.menu{align-items:flex-start}.order-row{flex-direction:column}.order-row>div:last-child{text-align:left;margin-top:8px}}@media(max-width:370px){.grid{grid-template-columns:1fr}.top nav a:nth-child(1){display:none}}