:root{--bg: #f3f5f8;--surface: #ffffff;--surface-2: #f8fafc;--border: #e1e5eb;--border-strong: #c9d0da;--line: #eef1f4;--track: #e6eaf0;--text: #111827;--text-2: #374151;--muted: #5b6472;--subtle: #6b7280;--navy: #0e1a2b;--navy-2: #16253a;--navy-hover: #1c2c44;--navy-avatar: #2b3d57;--nav-text: #c9d2de;--nav-label: #8c9aae;--nav-sub: #9aa8ba;--primary: #1d5bd6;--primary-dark: #1747a8;--primary-soft: #e8effc;--primary-tint: #f1f5fe;--green: #16a34a;--green-text: #0b6b3a;--green-soft: #ddf3e6;--green-tint: #f0faf4;--red: #d92d20;--red-text: #b3261e;--red-soft: #fce8e6;--red-tint: #fff6f5;--red-border: #e8a39c;--red-track: #f2d6d3;--amber: #e0a21b;--amber-text: #8a5100;--amber-soft: #fff1d6;--amber-tint: #fff8eb;--amber-border: #f1d49a;--teal: #0e7c86;--slate: #4b5768;--font: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font)}a{color:var(--primary)}a:hover{color:var(--primary-dark)}button{font-family:inherit;cursor:pointer}button:disabled{cursor:default}input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:1px}h1,h2,h3{margin:0}.mono{font-family:var(--font-mono);font-size:13px}.muted{color:var(--muted)}.req{color:var(--red-text)}.app{min-height:100vh;display:flex;flex-wrap:wrap;background:var(--bg)}.sidebar{flex:1 1 248px;background:var(--navy);color:var(--nav-text);padding:24px 16px;display:flex;flex-direction:column;gap:28px}.brand{display:flex;align-items:center;gap:12px;padding:0 8px}.brand-mark{width:36px;height:36px;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}.brand-name{font-weight:700;font-size:16px;color:#fff}.brand-sub{font-size:12px;color:var(--nav-sub)}.nav-group{display:flex;flex-direction:column;gap:4px}.nav-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--nav-label);padding:0 12px 6px}.nav{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--nav-text);text-decoration:none;font-size:14px}.nav:hover{background:var(--navy-hover);color:#fff}.nav.active{background:var(--primary);color:#fff}.nav-note{padding:12px;border-radius:10px;border:1px dashed var(--navy-avatar);font-size:12px;line-height:1.6;color:var(--nav-sub)}.user-box{margin-top:auto;display:flex;align-items:center;gap:12px;padding:10px 8px 10px 12px;border-radius:10px;background:var(--navy-2)}.avatar{flex:none;width:36px;height:36px;border-radius:999px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}.logout{margin-left:auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--nav-text);border-radius:8px;background:transparent;border:0}.logout:hover{background:var(--navy-hover);color:#fff}.main{flex:999 1 560px;min-width:0;padding:28px 32px 48px;display:flex;flex-direction:column;gap:20px}@media (max-width: 600px){.main{padding:20px 16px 40px}.login-hero{padding:32px 20px!important}.login-hero h1{font-size:32px!important}}.page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}.page-header .titles{display:flex;flex-direction:column;gap:4px}.page-sub{font-size:13px;color:var(--muted)}.page-title{font-size:28px;font-weight:700}.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.crumbs{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}.stack{display:flex;flex-direction:column}.row{display:flex;align-items:center}.wrap{flex-wrap:wrap}.grid{display:grid}.split{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}.split>*{min-width:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px}.card-pad{padding:20px}.card-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}.card-title{font-size:17px;font-weight:600}.card-foot{padding:12px 20px;font-size:13px;color:var(--muted)}.card-focus{border-color:var(--primary)}.stat{padding:18px;display:flex;flex-direction:column;gap:6px}.stat-label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}.stat-value{font-size:30px;font-weight:700;line-height:1.15}.stat-value small{font-size:15px;font-weight:500}.stat-note{font-size:12px;color:var(--muted)}.tile{padding:12px 14px;border-radius:10px;display:flex;flex-direction:column;gap:2px}.tile-label{font-size:12px}.tile-value{font-size:26px;font-weight:700}.btn{height:44px;padding:0 16px;border-radius:8px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);white-space:nowrap}.btn:hover{color:var(--text);background:var(--surface-2)}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600;padding:0 18px}.btn-primary:hover{background:var(--primary-dark);color:#fff}.btn-primary:disabled{background:var(--nav-label);border-color:var(--nav-label)}.btn-outline-primary{border-color:var(--primary);color:var(--primary);font-weight:600}.btn-outline-primary:hover{color:var(--primary-dark);background:var(--primary-tint)}.btn-danger{background:var(--red-text);border-color:var(--red-text);color:#fff;font-weight:600}.btn-danger:hover{background:#8f1e18;color:#fff}.btn-danger-outline{border-color:var(--red-border);color:var(--red-text);font-weight:600}.btn-danger-outline:hover{color:var(--red-text);background:var(--red-tint)}.btn-success{background:var(--green-text);border-color:var(--green-text);color:#fff;font-weight:600}.btn-success:hover{color:#fff}.btn-sm{height:auto;min-height:36px;padding:0 12px;font-size:13px}.btn-link{border:0;background:transparent;color:var(--primary);padding:0 8px;min-height:36px;font-size:13px}.icon-btn{width:36px;height:36px;border:0;background:transparent;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2)}.icon-btn:hover{background:var(--line)}.icon-btn.blue{color:var(--primary)}.icon-btn.red{color:var(--red-text)}.f{height:44px;border:1px solid var(--border-strong);border-radius:8px;padding:0 12px;font-family:inherit;font-size:14px;background:var(--surface);width:100%;color:var(--text)}.f.sm{height:38px;font-size:13px;padding:0 10px}.f.mono{font-family:var(--font-mono)}textarea.f{height:auto;padding:10px 12px;resize:vertical}.field{display:flex;flex-direction:column;gap:6px}.field>label,.lbl{font-size:13px;font-weight:600;color:var(--text)}.field-hint{font-size:12px;color:var(--muted)}.filter-label{font-size:12px;color:var(--muted);font-weight:400}.unit{font-size:13px;color:var(--muted);white-space:nowrap}.check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;min-height:40px}.check input{width:18px;height:18px;accent-color:var(--primary)}.search{position:relative;display:flex;align-items:center}.search svg{position:absolute;left:12px;color:var(--muted)}.search .f{padding-left:36px}.option-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);cursor:pointer}.option-card.on{border-color:var(--primary);background:var(--primary-tint)}.option-card input{width:18px;height:18px;margin-top:2px;accent-color:var(--primary)}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);font-size:13px;font-weight:500}.chip.on{background:var(--primary-soft);color:var(--primary-dark);border-color:var(--primary)}.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden}.seg button{min-height:36px;padding:0 12px;border:0;border-right:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);font-size:12px;font-weight:600}.seg button:last-child{border-right:0}.seg button.on-red{background:var(--red);color:#fff}.seg button.on-green{background:var(--green);color:#fff}.seg button.on-blue{background:var(--primary);color:#fff}.seg.soft button{font-size:13px;font-weight:400;padding:0 14px;border-right:0}.seg.soft button.on{background:var(--primary-soft);color:var(--primary-dark);font-weight:600}.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--border)}.tab{min-height:48px;padding:0 14px;border:0;border-bottom:3px solid transparent;background:transparent;font-size:14px;font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:8px}.tab.on{border-bottom-color:var(--primary);color:var(--primary-dark);font-weight:600}.tab .count{font-size:12px;padding:1px 8px;border-radius:999px;background:var(--line);color:var(--muted)}.tab.on .count{background:var(--primary-soft);color:var(--primary-dark)}.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}.pill.green{background:var(--green-soft);color:var(--green-text)}.pill.red{background:var(--red-soft);color:var(--red-text)}.pill.amber{background:var(--amber-soft);color:var(--amber-text)}.pill.blue{background:var(--primary-soft);color:var(--primary-dark)}.pill.gray{background:var(--line);color:var(--text-2)}.role{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;color:#fff;flex:none}.dot{display:inline-block;width:10px;height:10px;border-radius:999px;flex:none}.dot.sq{border-radius:2px}.bar{flex:1;height:8px;border-radius:999px;background:var(--red-track);overflow:hidden}.bar>i{display:block;height:100%;background:var(--green)}.bar.neutral{background:var(--track)}.bar.neutral>i{background:var(--primary);border-radius:999px}.banner{padding:12px 16px;border-radius:10px;font-size:14px;font-weight:500;line-height:1.6;display:flex;align-items:center;gap:10px}.banner.ok{background:var(--green-soft);color:var(--green-text)}.banner.err{background:var(--red-soft);color:var(--red-text)}.banner.info{background:var(--line);color:var(--text-2);font-weight:400;font-size:13px}.tbl-wrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse}.tbl th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2)}.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;color:var(--text);vertical-align:middle}.tbl.compact td{padding:8px 12px}.tbl.dense th{padding:10px}.tbl.dense td{padding:8px 10px;font-size:13px;white-space:nowrap}.tbl .num{text-align:right}.tbl tr.clickable{cursor:pointer}.tbl tr.clickable:hover td{background:var(--primary-tint)}.row-btn{border:0;background:transparent;padding:0;min-height:32px;font-size:14px;font-weight:600;color:var(--text);text-align:left}.dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}.dl dt{font-size:12px;color:var(--muted);margin:0}.dl dd{margin:2px 0 0;font-size:14px;color:var(--text);font-weight:500}.note-box{background:var(--surface-2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.list-link{display:flex;align-items:center;gap:12px;padding:10px 0;min-height:44px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}.list-link:hover{color:var(--text);background:var(--surface-2)}@media print{.sidebar,.no-print{display:none!important}.main{padding:0}body,.app{background:#fff}.print-sheet{border:0!important;padding:0!important;max-width:none!important}}