:root { --ink:#10231f; --muted:#687873; --line:#d5dfdb; --paper:#f5f8f6; --surface:#fff; --teal:#087d70; --teal-dark:#09645b; --teal-pale:#e3f2ef; --yellow:#f0c84b; --yellow-pale:#fff7d8; --red:#b84238; --red-pale:#fff0ee; --shadow:0 18px 50px rgba(16,35,31,.12); --sans:"Noto Sans TC",sans-serif; --thai:"Noto Sans Thai Looped",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; letter-spacing:0; }
button,input,select,textarea { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.eyebrow { margin:0 0 7px; color:var(--teal); font-size:11px; font-weight:700; text-transform:uppercase; }
.auth-screen { min-height:100dvh; display:grid; place-items:center; padding:24px; background:linear-gradient(90deg,var(--ink) 0 34%,var(--paper) 34%); }
.auth-panel { width:min(440px,100%); padding:42px; border-left:5px solid var(--teal); background:var(--surface); box-shadow:var(--shadow); }
.auth-brand,.admin-brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.auth-brand { margin-bottom:45px; }
.auth-brand span,.admin-brand>span { display:grid; width:42px; height:42px; place-items:center; background:var(--teal); color:#fff; font-family:var(--thai); font-size:24px; }
.auth-panel h1 { margin:0; font-size:32px; }
.auth-panel>p:not(.eyebrow) { margin:10px 0 28px; color:var(--muted); }
label { display:grid; gap:8px; margin-bottom:16px; color:var(--muted); font-size:12px; font-weight:600; }
input,select,textarea { width:100%; min-height:43px; padding:9px 11px; border:1px solid var(--line); border-radius:3px; background:var(--surface); color:var(--ink); }
textarea { resize:vertical; }
input:focus,select:focus,textarea:focus { outline:2px solid rgba(8,125,112,.2); border-color:var(--teal); }
.primary-button,.secondary-button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; border:1px solid var(--ink); border-radius:3px; font-weight:700; }
.primary-button { background:var(--ink); color:#fff; }
.primary-button:hover { background:var(--teal-dark); border-color:var(--teal-dark); }
.secondary-button { background:var(--surface); color:var(--ink); }
.primary-button svg,.secondary-button svg { width:17px; }
.auth-panel .primary-button { width:100%; min-height:48px; }
.back-link { display:block; margin-top:22px; color:var(--muted); text-align:center; }
.form-status { min-height:20px; margin:4px 0 12px; color:var(--red); font-size:12px; }
.admin-app { min-height:100dvh; display:grid; grid-template-columns:230px minmax(0,1fr); }
.admin-sidebar { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; padding:24px 16px 18px; background:var(--ink); color:#fff; }
.admin-brand { padding:0 8px 25px; border-bottom:1px solid rgba(255,255,255,.12); }
.admin-brand>span { background:var(--yellow); color:var(--ink); }
.admin-brand div { display:grid; }
.admin-brand strong { font-size:17px; }
.admin-brand small { color:#aebbb7; font-size:10px; }
.admin-sidebar nav { display:grid; gap:4px; margin-top:24px; }
.nav-button { min-height:44px; display:flex; align-items:center; gap:12px; padding:0 12px; border:0; border-left:3px solid transparent; background:transparent; color:#b9c5c1; text-align:left; }
.nav-button svg { width:18px; }
.nav-button:hover,.nav-button.is-active { border-left-color:var(--yellow); background:rgba(255,255,255,.08); color:#fff; }
.sidebar-user { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-top:auto; padding:16px 8px 0; border-top:1px solid rgba(255,255,255,.12); }
.sidebar-user div { min-width:0; display:grid; }
.sidebar-user strong,.sidebar-user small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user small { color:#aebbb7; font-size:9px; }
.avatar { display:grid; width:34px; height:34px; place-items:center; background:var(--teal); font-weight:700; }
.sidebar-user button { display:grid; width:34px; height:34px; place-items:center; border:0; background:transparent; color:#b9c5c1; }
.sidebar-user button svg { width:17px; }
.admin-main { min-width:0; padding:28px clamp(20px,4vw,56px) 60px; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:22px; border-bottom:3px solid var(--ink); }
.admin-header h1 { margin:0; font-size:26px; }
.header-actions { display:flex; align-items:center; gap:12px; }
.system-state { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.system-state span { width:8px; height:8px; border-radius:50%; background:#27a06f; }
.icon-action { display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.icon-action svg { width:18px; }
.notice { margin-top:16px; padding:11px 14px; border-left:3px solid var(--teal); background:var(--teal-pale); }
.notice.is-error { border-color:var(--red); background:var(--red-pale); }
.admin-view { display:none; padding-top:28px; }
.admin-view.is-active { display:block; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.metric-grid article { padding:23px 20px; border-right:1px solid var(--line); }
.metric-grid article:last-child { border-right:0; }
.metric-grid span,.metric-grid small { display:block; color:var(--muted); }
.metric-grid span { font-size:11px; font-weight:600; }
.metric-grid strong { display:block; margin:8px 0 4px; font-size:34px; line-height:1; }
.metric-grid small { font-size:9px; }
.overview-columns { display:grid; grid-template-columns:1.35fr 1fr; gap:42px; margin-top:42px; }
.work-section { min-width:0; }
.section-title { display:flex; justify-content:space-between; margin-bottom:15px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.section-title h2 { margin:0; font-size:17px; }
.attention-list { display:grid; }
.attention-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.attention-item>span:first-child { display:grid; width:31px; height:31px; place-items:center; background:var(--yellow-pale); color:#725c0c; }
.attention-item strong,.attention-item small { display:block; }
.attention-item small { color:var(--muted); font-size:10px; }
.attention-item button { border:0; background:transparent; color:var(--teal-dark); font-weight:700; }
.role-breakdown { display:grid; gap:13px; }
.role-row { display:grid; grid-template-columns:100px 1fr 30px; align-items:center; gap:12px; }
.role-row span { font-size:11px; }
.role-row i { height:8px; display:block; background:var(--line); }
.role-row i b { height:100%; display:block; background:var(--teal); }
.role-row strong { text-align:right; }
.section-toolbar { min-height:54px; display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.section-toolbar .primary-button { margin-left:auto; }
.toolbar-copy { display:grid; margin-right:auto; }
.toolbar-copy span { color:var(--muted); font-size:10px; }
.search-field { width:min(360px,100%); min-height:42px; display:flex; align-items:center; gap:8px; margin:0; padding:0 11px; border:1px solid var(--line); background:var(--surface); }
.search-field svg { width:17px; color:var(--muted); }
.search-field input { min-height:40px; padding:0; border:0; outline:0; }
.section-toolbar select { width:auto; min-width:125px; }
.table-shell { overflow-x:auto; border-top:2px solid var(--ink); }
table { width:100%; border-collapse:collapse; background:rgba(255,255,255,.55); }
th,td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { color:var(--muted); font-size:10px; font-weight:600; text-transform:uppercase; }
td { font-size:12px; }
.member-cell { display:grid; }
.member-cell small { color:var(--muted); }
.role-pill,.status-pill { display:inline-flex; align-items:center; min-height:25px; padding:3px 8px; border-radius:999px; font-size:10px; }
.role-pill { background:var(--teal-pale); color:var(--teal-dark); }
.status-pill { background:#edf1ef; color:var(--muted); }
.status-pill.suspended { background:var(--red-pale); color:var(--red); }
.row-action { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.row-action svg { width:16px; }
.table-empty { padding:40px; color:var(--muted); text-align:center; }
.groups-layout { min-height:520px; display:grid; grid-template-columns:minmax(260px,.75fr) minmax(380px,1.25fr); border-top:2px solid var(--ink); border-bottom:1px solid var(--line); }
.group-list { border-right:1px solid var(--line); }
.group-item { width:100%; display:grid; grid-template-columns:1fr auto; gap:8px; padding:17px 14px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }
.group-item:hover,.group-item.is-active { background:var(--surface); box-shadow:inset 4px 0 var(--teal); }
.group-item strong,.group-item small { display:block; }
.group-item small { margin-top:4px; color:var(--muted); }
.group-item span { align-self:center; color:var(--muted); font-size:11px; }
.group-detail { padding:24px; background:rgba(255,255,255,.45); }
.empty-selection { min-height:420px; display:grid; place-items:center; align-content:center; gap:8px; color:var(--muted); }
.empty-selection svg { width:30px; }
.group-detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.group-detail-header h2 { margin:0 0 6px; }
.group-detail-header p { margin:0; color:var(--muted); }
.group-code { padding:5px 8px; background:var(--yellow-pale); font-family:monospace; font-weight:700; }
.member-list { margin-top:20px; }
.member-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.member-row small { display:block; color:var(--muted); }
.member-row button { border:0; background:transparent; color:var(--red); }
dialog { width:min(540px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:4px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(16,35,31,.58); }
dialog form { padding:24px; overflow-y:auto; }
dialog header { display:flex; justify-content:space-between; gap:20px; margin-bottom:22px; padding-bottom:16px; border-bottom:3px solid var(--ink); }
dialog h2 { margin:0; font-size:20px; }
.dialog-close { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); }
.dialog-close svg { width:17px; }
dialog footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.danger-actions { display:flex; gap:4px; margin-right:auto; }
.danger-actions button { min-height:36px; border:0; background:transparent; color:var(--red); font-size:11px; }

@media (max-width:900px) {
  .admin-app { grid-template-columns:72px minmax(0,1fr); }
  .admin-sidebar { padding:18px 10px; }
  .admin-brand { justify-content:center; padding:0 0 20px; }
  .admin-brand div,.nav-button span,.sidebar-user div { display:none; }
  .nav-button { justify-content:center; padding:0; }
  .sidebar-user { grid-template-columns:1fr; justify-items:center; padding:14px 0 0; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .metric-grid article:nth-child(2) { border-right:0; }
  .metric-grid article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .overview-columns { grid-template-columns:1fr; }
  .groups-layout { grid-template-columns:1fr; }
  .group-list { border-right:0; border-bottom:1px solid var(--line); }
}

@media (max-width:620px) {
  .auth-screen { background:var(--paper); }
  .auth-panel { padding:28px 22px; }
  .admin-app { display:block; padding-bottom:67px; }
  .admin-sidebar { position:fixed; z-index:20; top:auto; bottom:0; width:100%; height:67px; display:block; padding:0; border-top:1px solid var(--line); background:var(--surface); color:var(--ink); }
  .admin-brand,.sidebar-user { display:none; }
  .admin-sidebar nav { height:100%; grid-template-columns:repeat(4,1fr); gap:0; margin:0; }
  .nav-button { min-height:67px; display:grid; place-items:center; align-content:center; gap:3px; border-left:0; border-top:3px solid transparent; color:var(--muted); }
  .nav-button span { display:block; font-size:9px; }
  .nav-button:hover,.nav-button.is-active { border-left:0; border-top-color:var(--teal); background:var(--teal-pale); color:var(--teal-dark); }
  .admin-main { padding:18px 14px 36px; }
  .admin-header { align-items:flex-end; }
  .admin-header h1 { font-size:22px; }
  .system-state { display:none; }
  .metric-grid article { padding:18px 13px; }
  .metric-grid strong { font-size:29px; }
  .section-toolbar { align-items:stretch; flex-wrap:wrap; }
  .search-field { width:100%; }
  .section-toolbar select { flex:1; min-width:0; }
  .section-toolbar .primary-button { width:100%; margin-left:0; }
  .groups-layout { display:block; }
  .group-detail { padding:18px 12px; }
  .group-detail-header { display:grid; }
  dialog form { padding:18px; }
  dialog footer { flex-wrap:wrap; }
  .danger-actions { width:100%; margin:0 0 6px; justify-content:space-between; }
}