:root{--r:16px;--r-sm:12px }.theme-dark{--bg:#000;--bg2:#0c0c0c;--panel:#121212;--panel2:#1a1a1a;--line:#262626;--accent:#fff;--accent-contrast:#000;--accent-soft:rgba(255,255,255,.08);--accent-line:rgba(255,255,255,.22);--text:#f4f4f4;--muted:#9a9a9a;--dim:#5f5f5f;--green:#4fbc85;--red:#e46161;--blue:#5c9de0;--shadow:none;--shadow-lg:0 18px 50px rgba(0,0,0,.6);--input-bg:#0a0a0a }.theme-light{--bg:#f6f6f6;--bg2:#fff;--panel:#fff;--panel2:#f4f4f4;--line:#e4e4e4;--accent:#000;--accent-contrast:#fff;--accent-soft:rgba(0,0,0,.055);--accent-line:rgba(0,0,0,.22);--text:#111;--muted:#6d6d6d;--dim:#a6a6a6;--green:#2e9d68;--red:#d64545;--blue:#3d7fc4;--shadow:0 1px 3px rgba(0,0,0,.06);--shadow-lg:0 24px 60px rgba(0,0,0,.16);--input-bg:#f6f6f6 }*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{font-family:IBM Plex Sans Thai,-apple-system,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}.theme-dark,.theme-light{background:var(--bg);color:var(--text);min-height:100%}h1,h2,h3{font-family:Kanit,sans-serif;letter-spacing:-.01em}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select{font-family:inherit;font-size:16px;background:var(--input-bg);border:1px solid var(--line);color:var(--text);border-radius:var(--r-sm);padding:11px 13px;outline:none;width:100%;transition:.15s}input:focus,select:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}input::placeholder{color:var(--dim)}@media (min-width:861px){input,select{font-size:14px}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:500;transition:.15s;white-space:nowrap;min-height:44px}.btn-gold{background:var(--accent);color:var(--accent-contrast)}.btn-gold:hover{filter:brightness(.92)}.btn-ghost{border:1px solid var(--line);color:var(--muted);background:var(--bg2)}.btn-ghost:hover{border-color:var(--accent-line);color:var(--text)}.btn-danger{color:var(--red);border:1px solid transparent}.btn-danger:hover{background:#d645451a}.btn-sm{padding:7px 13px;font-size:12.5px;min-height:36px}.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}.seg button{padding:7px 15px;border-radius:999px;font-size:12.5px;color:var(--muted);font-weight:500}.seg button.on{background:var(--accent);color:var(--accent-contrast)}.field{margin-bottom:14px}.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}.mut{color:var(--muted)}.dim{color:var(--dim)}.small{font-size:12.5px}.red{color:var(--red)}.green{color:var(--green)}.auth-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}.auth-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:34px 30px}.auth-logo{width:64px;height:40px;margin:0 auto 14px;background:url(/logo/mark-black.png) center/contain no-repeat}.theme-dark .auth-logo{background-image:url(/logo/mark-white.png)}.auth-title{text-align:center;font-size:23px;font-weight:600;margin-bottom:4px}.auth-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:22px}.auth-card .btn{width:100%;margin-top:6px}.linkbtn{background:none;color:var(--blue);font-size:13px;width:100%;text-align:center;margin-top:12px;padding:8px}.err{color:var(--red);font-size:13px;text-align:center;margin-top:10px}.pshell{max-width:1080px;margin:0 auto;padding:22px 20px 60px}.ptop{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}.ptop .brand{display:flex;align-items:center;gap:11px}.pmark{width:40px;height:26px;background:url(/logo/mark-black.png) center/contain no-repeat}.theme-dark .pmark{background-image:url(/logo/mark-white.png)}.pname{font-family:Kanit;font-weight:600;font-size:17px;line-height:1.05}.pname small{display:block;font-weight:300;color:var(--muted);font-size:10px;letter-spacing:.18em;text-transform:uppercase}.ptop .spacer{flex:1}.iconbtn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--bg2);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:16px}.iconbtn:hover{color:var(--text);border-color:var(--accent-line)}.phead{margin:26px 0 18px}.phead h1{font-size:26px;font-weight:600}.phead .s{color:var(--muted);font-size:14px;margin-top:4px}.me-chip{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 12px}.me-chip .nm{font-size:13px;font-weight:500;line-height:1.1}.me-chip .rl{font-size:11px;color:var(--muted)}.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-line);display:flex;align-items:center;justify-content:center;font-family:Kanit;font-size:14px}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}.tile{display:flex;flex-direction:column;gap:10px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);transition:.15s;min-height:150px}.tile:hover{transform:translateY(-2px);border-color:var(--accent-line);box-shadow:var(--shadow-lg)}.tile.locked{opacity:.5;cursor:not-allowed}.tile.locked:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)}.tile .ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--accent-soft);border:1px solid var(--accent-line)}.tile .tt{font-family:Kanit;font-weight:600;font-size:16px}.tile .td{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1}.tile .go{font-size:12.5px;color:var(--blue);font-weight:500}.tile .lock{font-size:11.5px;color:var(--dim)}.empty{text-align:center;color:var(--muted);padding:44px;border:1px dashed var(--line);border-radius:var(--r)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}.panel h3{font-size:15px;font-weight:600;margin-bottom:14px}.tablewrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th{text-align:left;font-size:11px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:11px 10px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}.badge{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;border:1px solid var(--line)}.bd-green{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent)}.bd-red{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}.bd-gray{color:var(--muted)}.bd-gold{color:var(--accent);border-color:var(--accent-line)}.appchecks{display:flex;gap:14px;flex-wrap:wrap}.appchecks label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}.appchecks input{width:auto;min-width:0}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.flexrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.chk{display:flex;align-items:flex-start;gap:10px;font-size:13px;cursor:pointer;line-height:1.5}.chk input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}.toaster{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:100}.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:10px;padding:10px 16px;font-size:13px;box-shadow:var(--shadow-lg)}.toast-ok{border-left-color:var(--green)}.toast-err{border-left-color:var(--red)}.toast-info{border-left-color:var(--blue)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}.modal{width:100%;max-width:460px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-lg);max-height:92vh;overflow:auto}.modal h3{margin-bottom:14px}.modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}@media (max-width:640px){.grid3{grid-template-columns:1fr}.phead h1{font-size:22px}.overlay{align-items:flex-end;padding:0}.modal{max-width:100%;border-radius:18px 18px 0 0;max-height:94vh}.modal-foot .btn{flex:1}}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}