:root { --bg:#f5f6f8; --fg:#1d2330; --muted:#6b7385; --card:#fff; --line:#dde1e8; --primary:#2456c9; --danger:#c62f2f; --ok:#1d7a46; --warn:#a86a00; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 system-ui,-apple-system,"Segoe UI","Hiragino Sans",sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--primary); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 20px; background:#16203a; color:#fff; flex-wrap:wrap; }
.topbar a, .topbar .link { color:#cfe0ff; }
.brand a { color:#fff; font-weight:700; font-size:18px; text-decoration:none; }
.env-badge { display:inline-block; margin-left:10px; padding:2px 8px; border-radius:4px; font-size:12px; font-weight:700; letter-spacing:.05em; }
.env-sit .env-badge, .env-badge.env-sit { background:#f0b400; color:#231a00; }
.env-uat .env-badge, .env-badge.env-uat { background:#8a3ffc; color:#fff; }
body.env-sit .topbar { border-bottom:4px solid #f0b400; }
body.env-uat .topbar { border-bottom:4px solid #8a3ffc; }
.topbar-right { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.small { font-size:12px; }
.shell { display:flex; min-height:calc(100vh - 56px); }
.sidenav { width:200px; background:#fff; border-right:1px solid var(--line); padding:16px 0; flex-shrink:0; }
.sidenav ul { list-style:none; margin:0; padding:0; }
.sidenav a { display:block; padding:8px 20px; color:var(--fg); text-decoration:none; }
.sidenav a.active { background:#e8eefc; color:var(--primary); font-weight:600; border-left:3px solid var(--primary); }
main { flex:1; padding:20px 28px; max-width:1200px; min-width:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:20px; }
.narrow { max-width:420px; margin:40px auto; }
.form-card { max-width:900px; }
.field { margin-bottom:14px; }
.field label, .field .label { display:block; font-weight:600; margin-bottom:4px; }
.field .inline-label { display:inline; font-weight:normal; margin-right:14px; }
input, select, textarea { font:inherit; padding:7px 9px; border:1px solid #b9c0cc; border-radius:5px; width:100%; max-width:420px; background:#fff; }
input[type=radio] { width:auto; }
.lines input { max-width:none; }
.req { color:var(--danger); }
.btn { display:inline-block; font:inherit; padding:7px 14px; border-radius:5px; border:1px solid #b9c0cc; background:#fff; color:var(--fg); cursor:pointer; text-decoration:none; }
.btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-ghost { background:transparent; border-color:transparent; }
.btn-sm { padding:3px 8px; font-size:12px; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
button.link { background:none; border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline; }
form.inline { display:inline; }
.actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.page-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.page-head .actions { margin-top:0; }
.searchbar { display:flex; gap:8px; align-items:center; margin:12px 0; }
.searchbar input { max-width:320px; }
.searchbar select { width:auto; }
table.grid { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); }
.grid th, .grid td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.grid th { background:#f0f2f6; font-weight:600; }
.num { text-align:right !important; }
.empty { color:var(--muted); text-align:center; padding:18px; }
.pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:600; }
.pill-active, .pill-approved { background:#dff3e7; color:var(--ok); }
.pill-inactive { background:#eceef2; color:var(--muted); }
.pill-draft { background:#eef2fb; color:var(--primary); }
.pill-submitted { background:#fff2d6; color:var(--warn); }
.pager { display:flex; gap:14px; align-items:center; justify-content:flex-end; margin:10px 0; }
.pager .disabled { color:var(--muted); }
.alert { padding:10px 14px; border-radius:6px; margin-bottom:14px; }
.alert ul { margin:4px 0 0; padding-left:20px; }
.alert p { margin:0; font-weight:600; }
.alert-error { background:#fde8e8; border:1px solid #f3b4b4; color:#8a1c1c; }
.alert-success { background:#e3f5ea; border:1px solid #a9dcbc; color:#14532d; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0 24px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px; text-decoration:none; color:var(--fg); display:flex; flex-direction:column; }
.tile-num { font-size:28px; font-weight:700; }
.tile-label { color:var(--muted); }
.summary { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px; }
.summary dt { color:var(--muted); font-size:12px; }
.summary dd { margin:0; font-weight:600; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 20px; }
.company-list { border:0; padding:0; margin:0 0 14px; }
.radio-card { display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:6px; padding:10px 12px; margin-bottom:8px; }
.radio-card label { cursor:pointer; flex:1; }
.muted { color:var(--muted); }
.history { color:var(--muted); }
dialog { border:0; border-radius:10px; padding:22px; width:min(520px, 92vw); box-shadow:0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(10,20,40,.45); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
@media (max-width: 720px) { .shell { flex-direction:column; } .sidenav { width:auto; border-right:0; border-bottom:1px solid var(--line); } .sidenav ul { display:flex; flex-wrap:wrap; } main { padding:16px; } }
.hint { color:var(--muted); font-size:12px; margin-top:3px; }
.field-error { color:var(--danger); font-size:12px; margin-top:3px; font-weight:600; }
[aria-invalid="true"] { border-color:var(--danger); outline-color:var(--danger); }
.row-actions { white-space:nowrap; }
.row-actions .btn + .btn { margin-left:4px; }
.pill-system { background:#e8eefc; color:var(--primary); }
.pill-custom { background:#f3e8ff; color:#6b2bb8; }
fieldset.checks, fieldset.perm-group { border:1px solid var(--line); border-radius:6px; padding:8px 12px; margin:0 0 8px; }
fieldset.checks legend, fieldset.perm-group legend { font-weight:600; padding:0 4px; }
.matrix .center, .grid .center { text-align:center; }
.matrix tr.group th { background:#e9edf5; }
.matrix .perm-name { font-weight:normal; }
dialog[aria-busy="true"] form, dialog[aria-busy="true"] { cursor:progress; }
dialog form[aria-busy="true"] { opacity:.8; }