:root{--bg:#f4efe4;--ink:#2a2013;--muted:#6b5d4a;--card:#fffdf9;--border:#e8dfcc;--zg-navy:#021d44;--zg-teal:#00c684;--zg-tangerine:#f28500;--zg-sky:#009fe3}*{box-sizing:border-box}body,html{margin:0;padding:0;background:linear-gradient(165deg,#e6f8ef 0,var(--bg) 45%,var(--bg) 60%,#e3f3fb 100%);background-attachment:fixed;color:var(--ink);font-family:Noto Sans Thai,Inter,system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}a{color:var(--zg-tangerine)}.app-header{background:linear-gradient(90deg,#0a6b4d 0,var(--zg-navy) 100%);color:#f3e4c6;padding:12px 16px;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;z-index:10;gap:12px}.app-header,.app-header__brand{display:flex;align-items:center}.app-header__brand{gap:10px;min-width:0}.app-header__brand--button{background:none;border:none;padding:4px;margin:-4px;border-radius:10px;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}.app-header__brand--button:active{background:hsla(40,65%,86%,.12)}.app-header__logo{flex-shrink:0;width:34px;height:34px}.app-header__title{line-height:1.1}.app-header__name{font-weight:700;font-size:15px;letter-spacing:.02em;color:#fff}.app-header__tagline{font-size:10.5px;opacity:.75;margin-top:1px}.app-header__user{display:flex;align-items:center;gap:12px;flex-shrink:0}.app-header__username{font-size:13px;opacity:.9;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-header__signout{background:hsla(40,65%,86%,.12);border:1px solid hsla(40,65%,86%,.3);color:#f3e4c6;border-radius:999px;padding:6px 14px;font-size:12.5px;cursor:pointer;white-space:nowrap}@media (orientation:landscape) and (max-height:500px){.app-header{padding:5px 14px;gap:8px}.app-header__logo{width:22px;height:22px}.app-header__tagline{display:none}.app-header__name{font-size:13px}.app-header__username{display:none}.app-header__signout{padding:4px 10px;font-size:11px}}.app-main{max-width:720px;margin:0 auto;padding:20px 16px 48px}@media (min-width:768px){.app-main{max-width:900px}}@media (min-width:1100px){.app-main{max-width:1200px}}.login-backdrop{position:fixed;inset:0;z-index:0;background-image:url(/images/login-bg-portrait.webp);background-size:cover;background-position:center 30%;saturate:1}@media (orientation:landscape){.login-backdrop{background-image:url(/images/login-bg-landscape.webp);background-position:center 40%}}.login-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,hsla(41,42%,93%,0),hsla(41,42%,93%,.15) 16%,hsla(41,42%,93%,.82) 36%,hsla(41,42%,93%,.82) 68%,hsla(41,42%,93%,.15) 88%,hsla(41,42%,93%,0))}.menu-overlay{position:fixed;inset:0;z-index:20;background:rgba(2,29,68,.35);opacity:0;pointer-events:none;transition:opacity .2s ease}.menu-overlay[data-open=true]{opacity:1;pointer-events:auto}.menu-panel{position:fixed;top:0;bottom:0;left:0;z-index:21;width:min(78vw,300px);background:var(--card);box-shadow:4px 0 24px rgba(2,29,68,.2);transform:translateX(-100%);transition:transform .22s ease;display:flex;flex-direction:column;overflow:hidden}.menu-panel[data-open=true]{transform:translateX(0)}.menu-scroll{flex:1 1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}.menu-panel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-weight:700;font-size:15px;background:linear-gradient(90deg,#0a6b4d 0,var(--zg-navy) 100%);color:#f3e4c6}.menu-close{background:hsla(40,65%,86%,.12);border:1px solid hsla(40,65%,86%,.3);color:#f3e4c6;border-radius:999px;width:28px;height:28px;line-height:1;cursor:pointer}.menu-list{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:2px}.menu-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:600}.menu-item[data-active=true]{background:rgba(10,107,77,.1);color:#0a6b4d}.menu-item__icon{font-size:19px;flex-shrink:0}.menu-list--admin{padding-top:0}.menu-section-label{padding:14px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.menu-item--admin{color:#0a6b4d}.menu-item--admin .menu-item__icon{filter:none}.section-label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}.placeholder-card{border-radius:20px;border:1px solid var(--border);background:var(--card);box-shadow:0 2px 10px rgba(42,32,19,.06);padding:32px 20px;text-align:center;color:var(--muted)}