: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, .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, .1);--shadow-panel: -8px 0 28px rgba(23, 24, 26, .08);--ease: cubic-bezier(.32, .72, 0, 1);--ease-in: cubic-bezier(.4, 0, .8, .4);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--dur-fast: .2s;--dur: .32s;--dur-slow: .48s;--stagger: 50ms;--dur-pulse: 1.4s;--dur-spin: .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}}*,*:before,*:after{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}h1,h2,h3,.brand{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.25}p,dl,dd,ul{margin:0;padding:0}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)}.stack{display:grid;gap:var(--space-4)}.enter{display:grid;gap:var(--space-4);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(360deg)}}@keyframes rise{0%{transform:translateY(100%)}}@keyframes drop{to{transform:translateY(100%)}}@keyframes slide-in{0%{transform:translate(100%)}}@keyframes slide-out{to{transform:translate(100%)}}@keyframes fade-out{to{opacity:0}}@keyframes pulse{50%{opacity:.5}}.shell{min-height:100dvh}.main{padding:0 var(--space-4) calc(var(--space-10) + env(safe-area-inset-bottom))}.page{display:grid;gap:var(--space-4);align-content:start;max-width:var(--page-w);margin:0 auto}.page>*{min-width:0}.page-head{position:sticky;top:0;z-index:var(--z-sidebar);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;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)}.crumbs{display:none}.account-btn{display:inline-grid;font-family:var(--font-display);font-size:var(--text-sm);font-weight:600}.sidenav{display:none}.side-link{display:flex;align-items:center;gap:var(--space-3);width:100%;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-user{display:grid;gap:var(--space-3);margin-top:auto}.side-user .row-text b,.side-user .row-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-sub{display:block;color:var(--muted);font-family:var(--font-body);font-size:var(--text-xs);font-weight:400}.tree li{min-width:0}.tree{display:grid;min-width:0;gap:var(--space-1);list-style:none}.tree-row{display:flex;align-items:center;border-radius:var(--radius);color:var(--muted);font-weight:500}.tree-row.active{background:var(--soft);color:var(--ink);font-weight:600}.tree-row>.tree-toggle,.tree-row>.tree-name{min-height:var(--control-h)}.tree-toggle{display:grid;flex:none;place-items:center;width:var(--icon-btn);margin-left:calc(var(--space-1) + var(--depth) * var(--space-4))}.tree-name{flex:1;min-width:0;overflow:hidden;padding-right:var(--space-3);text-overflow:ellipsis;white-space:nowrap}.btn,.icon-btn,.side-link,.tree-row,.row-main,.action-item,.input{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),.icon-btn:active{transform:scale(.95)}button.row-main:active,.action-item:active{transform:scale(.97)}.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)}.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 b{font-size:var(--text-xl);line-height:1}.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);font-size:var(--text-xl);line-height:1}.icon-btn.soft{background:var(--soft)}.form{display:grid;gap:var(--space-4)}.field{display:grid;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}.error-text{color:var(--red)}.alert{padding:var(--space-3) var(--space-4);border-radius:var(--radius);background:var(--red-bg);color:var(--red);font-weight:500}.hint{color:var(--muted);font-size:var(--text-xs)}.card{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface)}.empty{padding:var(--space-8) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);color:var(--muted);text-align:center}.group-label{padding:0 var(--space-1);color:var(--muted);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500}.group-label span{font-size:var(--text-xs)}.sub{color:var(--muted)}.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;display:flex;align-items:center;min-height:var(--row-h);background:var(--surface)}.row-main{flex:1;display:flex;align-items:center;gap:var(--space-3);min-width:0;min-height:var(--row-h);padding:var(--space-2) var(--space-4);color:inherit}.row-text{flex:1;display:grid;min-width:0}.row-text b{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.row-text small{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:var(--text-xs);-webkit-box-orient:vertical;-webkit-line-clamp:2}.row-meta{display:grid;flex:none;justify-items:end;gap:var(--space-1);color:var(--muted);font-size:var(--text-xs)}.row-actions{flex:none;padding-right:var(--space-2)}.row .icon-btn{background:none}.avatar{display:inline-grid;flex:none;place-items:center;width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius);background:var(--soft);color:var(--ink);font-family:var(--font-display);font-size:var(--text-sm);font-weight:600}.pill{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);line-height:1;border-radius:var(--radius-sm);background:var(--soft);color:var(--ink);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)}.kv{display:grid;gap:var(--space-1)}.kv dt{color:var(--muted);font-size:var(--text-xs)}.kv dd{margin-bottom:var(--space-3);overflow-wrap:anywhere}.kv dd:last-child{margin-bottom:0}.skeleton{min-height:var(--row-h);background:var(--soft);animation:pulse var(--dur-pulse) ease-in-out infinite}.state{display:grid;justify-items:center;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}.sheet-backdrop:before,.dropdown-backdrop:before{content:"";position:absolute;inset:0;background:var(--scrim);animation:fade var(--dur-slow) var(--ease)}.sheet-backdrop.leaving:before,.dropdown-backdrop.leaving:before{opacity:0;transition:opacity var(--dur) var(--ease-in)}.sheet{position:relative;display:grid;align-content:start;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{position:fixed;inset:0;z-index:var(--z-dropdown)}.dropdown{position:fixed;right:0;bottom:0;left:0;z-index:var(--z-dropdown);display:grid;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(--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;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:600}.auth-link{display:grid;place-items:center;min-height:var(--tap-min);color:var(--muted)}.auth-link b{color:var(--ink)}@media(hover:hover){.side-link:hover,.tree-row:hover,.action-item:hover,.icon-btn:hover,.row.clickable:hover{background:var(--soft)}.row:hover .icon-btn:hover,.row.clickable:hover .avatar{background:var(--line)}}@media(min-width:768px){.main{padding-right:var(--space-8);padding-left:var(--space-8)}.btn-add{width:auto;padding:0 var(--space-5)}.btn-add span{display:inline}.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}.main{padding-top:var(--space-4);padding-bottom:var(--space-10)}.btn,.input{min-height:var(--control-h)}.account-btn,.page-head .back{display:none}.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);color:var(--muted)}.crumbs button:hover{color:var(--ink)}.crumbs b{color:var(--ink);font-weight:500}.sidenav{position:sticky;top:0;display:flex;flex-direction:column;gap:var(--space-4);height:100dvh;padding:var(--space-5) var(--space-3);border-right:1px solid var(--line);background:var(--surface)}.sidenav .brand{padding:0 var(--space-3)}.sidenav nav{display:grid;align-content:start;gap:var(--space-1);min-height:0;overflow-x:hidden;overflow-y:auto}.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}}