:root{--color-bg: #ffffff;--color-fg: #1a1a2e;--color-border: #d9dce3;--color-accent: #2f6f4f;--color-danger: #b3261e;--color-warning: #ab6400;--color-muted: #6b7280;--space-1: 4px;--space-2: 8px;--space-3: 16px;--space-4: 24px}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-fg);font-family:system-ui,Noto Sans Thai,sans-serif}.nav-shell{display:flex;min-height:100vh}.nav-shell-sidebar{width:220px;flex-shrink:0;border-right:1px solid var(--color-border);padding:var(--space-3)}.nav-shell-sidebar ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.nav-shell-content{flex:1;padding:var(--space-4);min-width:0}.auth-form,.status-page{max-width:360px;margin:var(--space-4) auto;display:flex;flex-direction:column;gap:var(--space-2)}@media (max-width: 640px){.nav-shell{flex-direction:column}.nav-shell-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--color-border)}}.touch-target{min-height:44px;min-width:44px;padding:var(--space-2) var(--space-3)}.add-group-flow.is-mobile{max-width:100%;padding:var(--space-3)}.add-group-flow.is-desktop{max-width:480px;margin:0 auto}.usage-statistics-page{display:flex;flex-direction:column;gap:var(--space-4);max-width:960px}.usage-statistics-page>h1{font-size:1.6rem;margin:0;letter-spacing:-.01em}.stats-loading{color:var(--color-muted)}.stats-section{border-top:3px solid var(--color-accent);padding-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-3)}.stats-section h2{margin:0;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted)}.stats-section h3{margin:0 0 var(--space-2);font-size:.95rem}.stat-tile-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}.stat-tile{border:1px solid var(--color-border);border-radius:10px;padding:var(--space-3);background:var(--color-bg)}.stat-tile-label{margin:0 0 var(--space-1);font-size:.75rem;color:var(--color-muted)}.stat-tile-value{margin:0;font-size:1.85rem;font-weight:700;font-variant-numeric:proportional-nums;line-height:1.15}.meter{display:flex;flex-direction:column;gap:var(--space-1)}.meter-header{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;color:var(--color-muted)}.meter-value{font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-fg)}.meter-value-standalone{font-size:.85rem}.meter-track{height:10px;border-radius:999px;background:var(--color-border);overflow:hidden}.meter-fill{height:100%;border-radius:999px;background:var(--color-accent);transition:width .25s ease}.meter-fill.is-warning{background:var(--color-warning)}.meter-fill.is-critical{background:var(--color-danger)}.meter-note{margin:0;font-size:.78rem}.meter-note.is-warning{color:var(--color-warning)}.meter-note.is-critical{color:var(--color-danger)}.stats-table-wrap{overflow-x:auto}.stats-table{width:100%;border-collapse:collapse;font-size:.9rem}.stats-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);border-bottom:1px solid var(--color-border);padding:var(--space-2)}.stats-table td{padding:var(--space-2);border-bottom:1px solid var(--color-border);font-variant-numeric:tabular-nums}.member-name-cell{font-variant-numeric:normal;font-weight:600}.rank-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-4)}.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.rank-row{display:grid;grid-template-columns:1.4rem 1fr auto;column-gap:var(--space-2);row-gap:var(--space-1);align-items:center}.rank-index{color:var(--color-muted);font-size:.8rem;font-variant-numeric:tabular-nums}.rank-name{font-weight:600}.rank-value{font-size:.8rem;color:var(--color-muted);font-variant-numeric:tabular-nums;justify-self:end}.rank-bar-track{grid-column:1 / -1;height:6px;border-radius:999px;background:var(--color-border);overflow:hidden}.rank-bar-fill{display:block;height:100%;border-radius:999px;background:var(--color-accent)}.viewer-layout{display:flex;min-height:0}.viewer-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3)}.thread-pane{flex:1;min-width:0}