/* Tokens copied from onetostart-office app/globals.css (Grok Design spec) */
:root{--paper:#fff;--paper-2:#f7f6f4;--canvas:#f3f2ef;--ink:#2f2f31;--ink-2:#55555a;--ink-3:#6e6e73;--rule:#e7e6e4;--rule-strong:#cfcecb;--accent:#d3403a;--accent-hover:#b8342f;--accent-soft:rgb(211 64 58/.09);--ok:#2f7a4f;--shadow:0 1px 2px rgb(47 47 49/.06),0 0 0 1px rgb(47 47 49/.04);--brand:#d3403a;--mark:22px;--font:"OTS Sans",Prompt,'Noto Sans Thai',system-ui,sans-serif}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font:14px/1.6 var(--font);color:var(--ink);background:var(--canvas)}
h1{font-size:22px;font-weight:500;margin:0;line-height:1.3}h2{font-size:16px;font-weight:500;margin:0 0 12px}h3{font-size:14px;font-weight:500;margin:20px 0 8px}
a{color:var(--accent)}code{font-size:12px;background:var(--paper-2);padding:1px 4px}
/* sidebar shell (.shell in Office) */
.top{display:none}
body.authed{display:grid;grid-template-columns:228px 1fr;min-height:100vh}
body.authed .top{display:flex;flex-direction:column;gap:20px;background:var(--paper);border-right:1px solid var(--rule);padding:20px 14px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px}.brand i{width:var(--mark);height:var(--mark);background:var(--accent);flex:none}.brand b{font-weight:500;display:block;line-height:1.2}.top small{color:var(--ink-3);font-size:12px;display:block}
.top nav{display:none}body.authed .top nav{display:flex;flex-direction:column;gap:2px}
.navLink{display:block;padding:8px 10px;color:var(--ink-2);text-decoration:none}.navLink:hover{background:var(--paper-2);color:var(--ink)}.navLink.on{background:var(--ink);color:#fff}
.sideFoot{margin-top:auto;border-top:1px solid var(--rule);padding:12px 6px 0;font-size:12px;color:var(--ink-3);word-break:break-all}.sideFoot b{display:block;color:var(--ink);font-weight:500;font-size:13px}.sideFoot .btn{width:100%;margin-top:10px}
main{padding:28px 32px;max-width:1280px;width:100%}
.card{background:var(--paper);box-shadow:var(--shadow);border-radius:0;padding:20px;margin-bottom:16px}
table{width:100%;border-collapse:collapse}th{text-align:left;padding:8px 10px;font-size:12px;font-weight:500;color:var(--ink-3);border-bottom:1px solid var(--rule-strong)}td{text-align:left;padding:10px;border-bottom:1px solid var(--rule);font-size:14px;vertical-align:middle}
.badge{display:inline-block;font-size:12px;padding:1px 8px;margin-right:6px;background:var(--paper-2);color:var(--ink-3)}.badge.on{background:rgb(47 122 79/.1);color:var(--ok)}
.btn{font:500 14px/1.4 var(--font);border:0;border-radius:0;padding:8px 14px;background:var(--accent);color:#fff;cursor:pointer}.btn:hover{background:var(--accent-hover)}.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--rule-strong)}.btn.ghost:hover{border-color:var(--ink);background:var(--paper)}
input,select,textarea{font:inherit;width:100%;padding:8px 10px;border:1px solid var(--rule-strong);border-radius:0;background:var(--paper);color:var(--ink)}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink)}
label{display:block;font-size:12px;color:var(--ink-2);margin:12px 0 4px}
pre{background:var(--ink);color:#f3f2ef;padding:12px;border-radius:0;overflow:auto;white-space:pre-wrap;font-size:12px}
.split{display:grid;grid-template-columns:380px 1fr;gap:16px}.split .card{margin:0}#pv{width:100%;height:640px;border:0;box-shadow:var(--shadow);background:#fff}
.row{display:flex;gap:8px}.row>*{flex:1}.muted{color:var(--ink-3);font-size:13px}.ok{color:var(--ok)}
.seg{display:inline-flex;gap:0;margin-left:8px}.seg .on{background:var(--ink);color:#fff;border-color:var(--ink)}
#pv.mobile{box-sizing:content-box;width:375px;max-width:100%;height:667px;margin:0 auto;display:block;border:8px solid var(--ink);border-radius:24px}
/* errors as .notice.error from Office */
.ferr{display:block;color:var(--accent);font-size:12px;min-height:0;margin-top:2px}.ferr:empty{display:none}[aria-invalid=true]{border-color:var(--accent)!important;outline-color:var(--accent)}
.err{background:var(--accent-soft);border-left:3px solid var(--accent);color:var(--ink);padding:8px 12px;margin:0 0 12px;font-size:13px}.err:empty{display:none}
/* auth card (.authPage/.authCard in Office) */
body:not(.authed) main{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;max-width:none;padding:16px}
#login{width:min(400px,100%);max-width:400px;margin:48px auto;padding:32px;border-top:4px solid var(--accent)}
.authHead{margin-bottom:24px}.authHead .muted{margin:2px 0 0}
#login input{border-color:var(--rule-strong);height:44px}#login .btn{width:100%;height:44px}#login p{margin:16px 0 0}#login .err{margin:0 0 4px}
@media (max-width:899px){body.authed{display:block}body.authed .top{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px;border-right:0;border-bottom:1px solid var(--rule);padding:10px 16px}body.authed .top nav{flex-direction:row}.sideFoot{margin:0 0 0 auto;border:0;padding:0;display:flex;align-items:center;gap:10px}.sideFoot span{display:none}.sideFoot .btn{width:auto;margin:0;padding:6px 10px}main{padding:20px 16px}.split{grid-template-columns:1fr}}
@media (max-width:479px){.top small{display:none}.sideFoot b{display:none}table{display:block;overflow-x:auto}td,th{white-space:nowrap}}