:root{--ground:#f6f7f9;--surface:#ffffff;--soft:#eef0f3;--line:#e4e6ea;--ink:#17181a;--muted:#5f6368;--on-ink:#ffffff;--green:#15803d;--green-bg:#dff3e6;--amber:#92400e;--amber-bg:#fbeccb;--red:#c0262d;--red-bg:#fbe3e3;--scrim:rgba(23,24,26,0.4);--font-body:"Be Vietnam Pro",sans-serif;--font-display:"Lexend","Be Vietnam Pro",sans-serif;--text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:18px;--text-xl:24px;--text-2xl:28px;--radius-xl:8px;--radius-lg:8px;--radius:6px;--radius-sm:4px;--radius-pill:999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--control-h:40px;--icon-btn:36px;--sidebar-w:232px;--page-w:1200px;--drawer-w:420px;--tabbar-h:64px;--row-h:56px;--switch-w:48px;--switch-h:28px;--matrix-col:96px;--sheet-h:90dvh;--tap-min:44px;--topbar-h:56px;--shadow-pop:0 8px 28px rgba(23,24,26,0.1);--shadow-panel:-8px 0 28px rgba(23,24,26,0.08);--ease:cubic-bezier(0.32,0.72,0,1);--ease-in:cubic-bezier(0.4,0,0.8,0.4);--ease-bounce:cubic-bezier(0.34,1.56,0.64,1);--dur-fast:0.2s;--dur:0.32s;--dur-slow:0.48s;--stagger:50ms;--dur-pulse:1.4s;--dur-spin:0.8s;--z-sidebar:20;--z-tabbar:30;--z-dropdown:46;--z-drawer:50;--z-toast:60}@media (min-width:1024px){:root{--row-h:52px}}@media (prefers-reduced-motion:reduce){:root{--dur:0s;--dur-slow:0s;--dur-fast:0s;--stagger:0s;--dur-pulse:0s;--dur-spin:0s}}*,:after,:before{box-sizing:border-box}body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--text-sm) /1.5 var(--font-body);-webkit-font-smoothing:antialiased}.brand,h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.25}dd,dl,p,ul{margin:0;padding:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button{padding:0;background:none;border:0;cursor:pointer;text-align:inherit}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.muted{color:var(--muted)}.small{font-size:var(--text-xs)}.enter,.stack{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}.enter{align-content:start;min-width:0;animation:enter var(--dur-slow) var(--ease)}.spin{animation:spin var(--dur-spin) linear infinite}@keyframes fade{0%{opacity:0}}@keyframes enter{0%{opacity:0;transform:translateY(var(--space-3))}}@keyframes pop{0%{opacity:0;transform:translateY(calc(-1 * var(--space-1))) scale(.98)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes rise{0%{transform:translateY(100%)}}@keyframes drop{to{transform:translateY(100%)}}@keyframes slide-in{0%{transform:translateX(100%)}}@keyframes slide-out{to{transform:translateX(100%)}}@keyframes fade-out{to{opacity:0}}@keyframes pulse{50%{opacity:.5}}.shell{min-height:100dvh}.main{padding:0 var(--space-4) calc(var(--tabbar-h) + var(--space-6) + env(safe-area-inset-bottom))}.page{display:grid;grid-gap:var(--space-4);gap:var(--space-4);align-content:start;max-width:var(--page-w);margin:0 auto}.page>*{min-width:0}.page-head{position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:var(--space-3);min-height:var(--topbar-h);padding:var(--space-2) 0;background:var(--ground)}.page-head h1{flex:1 1;min-width:0;overflow:hidden;font-size:var(--text-xl);text-overflow:ellipsis;white-space:nowrap}.page-head .head-actions{display:flex;align-items:center;gap:var(--space-2)}.tabbar{position:fixed;right:0;bottom:0;left:0;z-index:var(--z-tabbar);display:flex;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line)}.tab-link{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);min-height:var(--tap-min);color:var(--muted);font-size:var(--text-xs);font-weight:500}.tab-link.active{color:var(--ink);font-weight:600}.tab-link.active svg{fill:currentColor}.sidenav{display:none}.side-link{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min);padding:0 var(--space-3);border-radius:var(--radius);color:var(--muted);font-weight:500}.side-link.active{background:var(--soft);color:var(--ink);font-weight:600}.side-link.active svg{fill:currentColor}.side-user{display:flex;align-items:center;gap:var(--space-3);margin-top:auto}.side-user .row-text{flex:1 1}.side-user .row-text b,.side-user .row-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-item,.btn,.chip,.icon-btn,.input,.row-main,.search,.side-link,.tab-link{transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-bounce),opacity var(--dur-fast) var(--ease)}.btn:active:not(:disabled),.chip:active,.icon-btn:active,.tab-link:active{transform:scale(.95)}.action-item:active,a.row-main:active,button.row-main:active{transform:scale(.97)}.list>.perm,.list>.row{animation:enter var(--dur) var(--ease) backwards}.list>:nth-child(2){animation-delay:var(--stagger)}.list>:nth-child(3){animation-delay:calc(var(--stagger) * 2)}.list>:nth-child(4){animation-delay:calc(var(--stagger) * 3)}.list>:nth-child(5){animation-delay:calc(var(--stagger) * 4)}.list>:nth-child(n+6){animation-delay:calc(var(--stagger) * 5)}.stat{transition:transform var(--dur-fast) var(--ease)}.stat:active{transform:scale(.97)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-4);border-radius:var(--radius);background:var(--ink);color:var(--on-ink);font-weight:600;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{border:1px solid var(--line);background:var(--surface);color:var(--ink)}.btn-danger{background:var(--red-bg);color:var(--red)}.btn-block{width:100%}.btn-add{width:var(--tap-min);padding:0}.btn-add span{display:none}.icon-btn{display:inline-grid;flex:none;place-items:center;width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius);background:var(--surface);color:var(--ink)}.icon-btn.soft{background:var(--soft)}.form{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}.field{display:grid;grid-gap:var(--space-1);gap:var(--space-1);font-weight:500}.input{width:100%;min-height:var(--tap-min);padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:var(--text-md)}.input:focus-visible{outline-offset:0}.check{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min)}.check input{width:var(--space-5);height:var(--space-5);accent-color:var(--ink)}.error-text{color:var(--red)}.hint{color:var(--muted);font-size:var(--text-xs)}.switch{position:relative;flex:none;width:var(--switch-w);height:var(--switch-h)}.switch input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.switch input:disabled{cursor:not-allowed}.switch span{position:absolute;inset:0;border-radius:var(--radius-pill);background:var(--line);transition:background var(--dur-fast)}.switch span:after{content:"";position:absolute;top:var(--space-1);left:var(--space-1);width:calc(var(--switch-h) - 2 * var(--space-1));height:calc(var(--switch-h) - 2 * var(--space-1));border-radius:50%;background:var(--surface);transition:transform var(--dur-fast)}.switch input:checked+span{background:var(--ink)}.switch input:checked+span:after{transform:translateX(calc(var(--switch-w) - var(--switch-h)))}.switch input:disabled+span{opacity:.5}.switch input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}.card{padding:var(--space-4)}.card,.empty{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface)}.empty{padding:var(--space-8) var(--space-4);color:var(--muted);text-align:center}.toolbar{display:flex;align-items:center;gap:var(--space-2)}.toolbar>.btn-add:only-child{margin-left:auto}.search{flex:1 1;display:flex;align-items:center;gap:var(--space-2);min-width:0;min-height:var(--tap-min);padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--muted)}.search:focus-within{outline:2px solid var(--ink)}.search input{flex:1 1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font-size:var(--text-md)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.section-head h2{font-size:var(--text-md)}.group-label{padding:0 var(--space-1);color:var(--muted);font-size:var(--text-sm);font-weight:500}.group-label span{font-size:var(--text-xs)}.list{display:grid;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);list-style:none}.list>*+*{border-top:1px solid var(--line)}.row{position:relative;background:var(--surface)}.row,.row-main{display:flex;align-items:center;min-height:var(--row-h)}.row-main{gap:var(--space-3);padding:var(--space-2) var(--space-4);color:inherit}.row-main,.row-text{flex:1 1;min-width:0}.row-text{display:grid}.row-text b{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.row-text small{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.row-meta,.row-text small{color:var(--muted);font-size:var(--text-xs)}.row-meta{display:grid;flex:none;justify-items:end;grid-gap:var(--space-1);gap:var(--space-1)}.row-actions{flex:none;padding-right:var(--space-2)}.row .icon-btn{background:none}.row.danger .row-main{color:var(--red)}.list-grid{gap:var(--space-3);overflow:visible;border:0;background:none}.list-grid>*+*{border-top:0}.list-grid>.row{border:1px solid var(--line);border-radius:var(--radius-xl)}.avatar{display:inline-grid;flex:none;place-items:center;width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius);font-family:var(--font-display);font-size:var(--text-sm);font-weight:600}.avatar,.pill{background:var(--soft);color:var(--ink)}.pill{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);line-height:1;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500;white-space:nowrap}.pill.green{background:var(--green-bg);color:var(--green)}.pill.amber{background:var(--amber-bg);color:var(--amber)}.pill.red{background:var(--red-bg);color:var(--red)}.pills{flex-wrap:wrap}.chips,.pills{display:flex;gap:var(--space-1)}.chips{margin:0 calc(-1 * var(--space-4));padding:0 var(--space-4);overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{display:inline-flex;flex:none;align-items:center;min-height:var(--tap-min);padding:0 var(--space-3);border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted);font-weight:500;white-space:nowrap}.chip.active{border-bottom-color:var(--ink);color:var(--ink);font-weight:600}.stats{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:var(--space-2);gap:var(--space-2)}.stat{display:grid;grid-gap:var(--space-1);gap:var(--space-1);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);color:var(--muted)}.stat b{color:var(--ink);font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;line-height:1.2}.kv{display:grid;grid-gap:var(--space-1);gap:var(--space-1)}.kv dt{color:var(--muted);font-size:var(--text-xs)}.kv dd{margin-bottom:var(--space-3);overflow-wrap:anywhere}.setting{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--row-h);padding:var(--space-3) 0}.setting+.setting{border-top:1px solid var(--line)}.setting p{color:var(--muted);font-size:var(--text-xs)}.setting .btn{min-height:var(--control-h);padding:0 var(--space-4)}.secret{border-radius:var(--radius);background:var(--amber-bg);color:var(--amber);overflow-wrap:anywhere}.perm,.secret{padding:var(--space-3) var(--space-4)}.perm{display:grid;grid-gap:var(--space-1);gap:var(--space-1);background:var(--surface)}.perm>.row-text{align-content:center;min-height:var(--tap-min)}.perm-head{display:none}.perm-roles,.toggle{display:grid}.toggle-row{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min);border-top:1px solid var(--line);cursor:pointer}.toggle-name{flex:1 0 auto}.toggle-note{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--muted);font-size:var(--text-xs)}.skeleton{min-height:var(--row-h);background:var(--soft);animation:pulse var(--dur-pulse) ease-in-out infinite}.state{display:grid;justify-items:center;grid-gap:var(--space-3);gap:var(--space-3);padding:var(--space-8) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);text-align:center}.sheet-backdrop{position:fixed;inset:0;z-index:var(--z-drawer);display:flex;align-items:flex-end}.dropdown-backdrop:before,.sheet-backdrop:before{content:"";position:absolute;inset:0;background:var(--scrim);animation:fade var(--dur-slow) var(--ease)}.dropdown-backdrop.leaving:before,.sheet-backdrop.leaving:before{opacity:0;transition:opacity var(--dur) var(--ease-in)}.sheet{position:relative;display:grid;align-content:start;grid-gap:var(--space-4);gap:var(--space-4);width:100%;max-height:var(--sheet-h);padding:var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));overflow-y:auto;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--surface);animation:rise var(--dur-slow) var(--ease)}.sheet.leaving{animation:drop var(--dur) var(--ease-in) forwards}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.sheet-head h3{font-size:var(--text-lg);overflow-wrap:anywhere}.dropdown-backdrop{inset:0}.dropdown,.dropdown-backdrop{position:fixed;z-index:var(--z-dropdown)}.dropdown{right:0;bottom:0;left:0;display:grid;grid-gap:var(--space-1);gap:var(--space-1);padding:var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--surface);animation:rise var(--dur-slow) var(--ease)}.dropdown.leaving{animation:drop var(--dur) var(--ease-in) forwards}.sheet-title{padding:0 var(--space-3) var(--space-2);color:var(--muted);font-size:var(--text-xs)}.action-item{display:flex;align-items:center;width:100%;min-height:var(--tap-min);padding:0 var(--space-3);border-radius:var(--radius);color:var(--ink)}.action-item.danger{color:var(--red)}.toast{animation:enter var(--dur) var(--ease);position:fixed;right:var(--space-4);bottom:calc(var(--tabbar-h) + var(--space-4) + env(safe-area-inset-bottom));left:var(--space-4);z-index:var(--z-toast);padding:var(--space-3) var(--space-4);border-radius:var(--radius);background:var(--ink);color:var(--on-ink)}.auth{display:grid;place-items:center;min-height:100dvh;padding:var(--space-4)}.auth-box{display:grid;grid-gap:var(--space-4);gap:var(--space-4);width:100%;max-width:400px;padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface)}.auth-box h1{font-size:var(--text-xl)}.brand{font-size:var(--text-lg);font-weight:700}.sub{color:var(--muted)}.auth-link{display:grid;place-items:center;min-height:var(--tap-min);color:var(--muted)}.auth-link b{color:var(--ink)}@media (hover:hover){.action-item:hover,.icon-btn:hover,.side-link:hover{background:var(--soft)}.chip:hover{color:var(--ink)}.row.clickable:hover{background:var(--soft)}.row.clickable:hover .avatar,.row:hover .icon-btn:hover{background:var(--line)}}@media (min-width:768px){.main{padding-right:var(--space-8);padding-left:var(--space-8)}.chips{margin:0;padding:0;flex-wrap:wrap;overflow:visible}.btn-add{width:auto;padding:0 var(--space-5)}.btn-add span{display:inline}.stats{grid-template-columns:repeat(4,1fr)}.list-grid{grid-template-columns:repeat(2,1fr)}.toast{right:var(--space-6);bottom:var(--space-6);left:auto;width:var(--drawer-w)}}@media (min-width:1024px){.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr}.tabbar{display:none}.main{padding-top:var(--space-4);padding-bottom:var(--space-10)}.btn,.chip,.input,.search{min-height:var(--control-h)}.sidenav{position:-webkit-sticky;position:sticky;top:0;display:flex;flex-direction:column;gap:var(--space-6);height:100dvh;padding:var(--space-5) var(--space-3);border-right:1px solid var(--line);background:var(--surface)}.sidenav nav{display:grid;grid-gap:var(--space-1);gap:var(--space-1)}.list-grid{grid-template-columns:repeat(3,1fr)}.sheet-backdrop{align-items:stretch;justify-content:flex-end}.sheet{width:var(--drawer-w);max-height:none;height:100%;padding-bottom:var(--space-6);border-left:1px solid var(--line);border-radius:0;animation:slide-in var(--dur-slow) var(--ease)}.sheet.leaving{animation:slide-out var(--dur) var(--ease-in) forwards}.dropdown-backdrop:before{display:none}.dropdown{top:var(--dd-top);right:var(--dd-right);bottom:auto;left:auto;min-width:200px;padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);transform-origin:top right;animation:pop var(--dur) var(--ease)}.dropdown.leaving{animation:fade-out var(--dur-fast) var(--ease-in) forwards}.sheet-title{display:none}.perm,.perm-head{grid-template-columns:minmax(0,1fr) repeat(var(--n),var(--matrix-col));align-items:center;gap:0 var(--space-2)}.perm-head{display:grid;padding:0 var(--space-4);color:var(--muted);font-size:var(--text-xs);font-weight:500}.perm-head span{text-align:center}.perm-roles{display:contents}.toggle{justify-items:center}.toggle-row{justify-content:center;border-top:0}.toggle-name,.toggle-note span{display:none}}