:root{--bg: #eff0f5;--surface: #ffffff;--surface-2: #e6e8f0;--surface-3: #dbdeea;--border: #d2d5e2;--border-strong: #b9bdd1;--text: #1b1d27;--text-muted: #5b5f76;--text-faint: #8b8fa5;--topbar-bg: #ffffff;--accent: #4a3fde;--accent-hover: #3b31b8;--accent-ink: #ffffff;--accent-tint: #e9e7fb;--success: #1c7a52;--success-tint: #dff3e9;--danger: #bc3b3b;--danger-tint: #f8e1e1;--warning: #a46a08;--warning-tint: #f8ebd3;--info: #2a63bd;--info-tint: #e2ecfa;--radius-sm: 6px;--radius: 10px;--radius-lg: 14px;--shadow-sm: 0 1px 2px rgba(24, 26, 38, .06);--shadow: 0 2px 8px -2px rgba(24, 26, 38, .1), 0 10px 30px -14px rgba(24, 26, 38, .28);--shadow-lg: 0 16px 40px -18px rgba(24, 26, 38, .35), 0 2px 10px -2px rgba(24, 26, 38, .15);--font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace}@media (prefers-color-scheme: dark){:root{--bg: #14151c;--surface: #1b1d27;--surface-2: #232634;--surface-3: #2b2f40;--border: #333748;--border-strong: #454a60;--text: #e8e9f0;--text-muted: #9ca0b8;--text-faint: #6e7288;--topbar-bg: #1b1d27;--accent: #8478ff;--accent-hover: #9a90ff;--accent-ink: #14121f;--accent-tint: #2a2650;--success: #3fbe87;--success-tint: #173327;--danger: #e27069;--danger-tint: #3a1f1e;--warning: #e0a83d;--warning-tint: #332708;--info: #5fa0f2;--info-tint: #1c2c42;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow: 0 2px 10px -2px rgba(0, 0, 0, .4), 0 12px 30px -14px rgba(0, 0, 0, .5);--shadow-lg: 0 16px 40px -18px rgba(0, 0, 0, .6), 0 2px 10px -2px rgba(0, 0, 0, .45)}}*{box-sizing:border-box}body{font-family:var(--font-body);margin:0;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::selection{background:var(--accent-tint)}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;margin:0 0 .35rem;color:var(--text);text-wrap:balance}h1{font-size:1.4rem}h2{font-size:1.3rem}h3{font-size:1.05rem}p{margin:0 0 .75rem}a{color:var(--accent-hover)}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.eyebrow{font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)}form{display:flex;flex-direction:column;gap:.85rem;max-width:440px}label{display:flex;flex-direction:column;gap:.35rem;font-size:.78rem;font-weight:600;color:var(--text-muted)}input,textarea,select{font:inherit;font-weight:400;color:var(--text);padding:.55rem .7rem;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg);transition:border-color .12s ease,box-shadow .12s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}.row{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}.row>label{flex:1;min-width:140px}button,.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;width:fit-content;padding:.5rem .9rem;border-radius:var(--radius-sm);border:1.5px solid var(--border-strong);background:var(--surface);color:var(--text);box-shadow:none;line-height:1.2;white-space:nowrap;transition:background .12s ease,border-color .12s ease,transform .05s ease}button svg,.btn svg{width:.9rem;height:.9rem;flex:none}button:hover,.btn:hover{background:var(--surface-2)}button:active,.btn:active{transform:translateY(1px)}button:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}button[type=submit],.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}button[type=submit]:hover,.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-danger{color:var(--danger)}.btn-danger:hover{background:var(--danger-tint);border-color:var(--danger)}.btn-secondary{color:var(--text-muted)}.btn-ghost{border-color:transparent;background:transparent;box-shadow:none}.btn-ghost:hover{background:var(--surface-2)}.btn-sm{padding:.32rem .65rem;font-size:.75rem}.btn-icon{padding:.4rem;width:1.9rem;height:1.9rem;justify-content:center}#topbar:empty{display:none}#topbar{background:var(--topbar-bg);border-bottom:1px solid var(--border);padding:0 1.25rem;display:flex;align-items:center;gap:1.5rem;height:3.5rem;position:sticky;top:0;z-index:10}#topbar .wordmark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);flex:none}.badge-mark{width:1.75rem;height:1.75rem;border-radius:7px;background:var(--text);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:.72rem;flex:none}#topbar .wordmark .name{font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:-.01em}#topbar nav{display:flex;gap:.15rem;height:100%}#topbar a.nav-tab{display:flex;align-items:center;color:var(--text-muted);text-decoration:none;padding:0 .15rem;height:100%;font-size:.85rem;font-weight:600;border-bottom:2px solid transparent;transition:color .12s ease,border-color .12s ease}#topbar a.nav-tab span{padding:0 .6rem}#topbar a.nav-tab:hover{color:var(--text)}#topbar a.nav-tab.active{color:var(--accent);border-bottom-color:var(--accent)}#topbar .spacer{flex:1}#topbar .who{display:flex;align-items:center;gap:.65rem}#topbar .who-info{text-align:right;line-height:1.2}#topbar .who-name{font-size:.82rem;font-weight:600;font-family:var(--font-mono)}#topbar .who-role{font-size:.7rem;color:var(--text-faint)}.avatar{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;font-family:var(--font-display);flex:none}#app{max-width:1180px;margin:0 auto;padding:1.75rem 1.5rem 4rem}body:has(#topbar:empty) #app{max-width:none;padding:0}.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;background:radial-gradient(1200px 600px at 15% -10%,var(--accent-tint),transparent 60%),var(--bg)}.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:2rem 1.75rem 1.6rem;animation:rise .3s ease both}.login-mark{display:flex;align-items:center;gap:.65rem;margin-bottom:1.4rem}.login-mark .badge-mark{width:2.2rem;height:2.2rem;font-size:.85rem}.login-mark .name{font-family:var(--font-display);font-weight:700;font-size:1rem}.login-mark .sub{font-family:var(--font-mono);font-size:.68rem;color:var(--text-faint)}.login-card h1{font-size:1.3rem;margin-bottom:.25rem}.login-card .lede{color:var(--text-muted);font-size:.85rem;margin-bottom:1.4rem}.login-card form{max-width:none}.login-card button[type=submit]{width:100%;justify-content:center;padding:.65rem .9rem;margin-top:.25rem;font-size:.9rem}.login-note{margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--border);font-size:.76rem;color:var(--text-faint);display:flex;gap:.5rem;align-items:flex-start}.login-note svg{width:.9rem;height:.9rem;flex:none;margin-top:.1rem;color:var(--text-faint)}.notice{background:var(--warning-tint);color:var(--warning);border-radius:var(--radius-sm);padding:.55rem .8rem;font-size:.85rem}.error{color:var(--danger);background:var(--danger-tint);border-radius:var(--radius-sm);padding:.55rem .75rem;white-space:pre-wrap;font-size:.85rem}.muted{color:var(--text-muted);font-size:.85rem}.empty-state{display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--text-muted);font-size:.9rem;border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-2);padding:2.5rem 1.5rem;text-align:center;grid-column:1 / -1}.empty-state svg{width:2rem;height:2rem;stroke:var(--text-muted);opacity:.6}.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}.panel-head .sub{color:var(--text-muted);font-size:.82rem;margin-top:.2rem}.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.cat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;animation:rise .25s ease both}.cat-thumb{aspect-ratio:16 / 10;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--text-faint);position:relative;overflow:hidden}.cat-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;right:0;bottom:0;left:0}.cat-thumb svg{width:2rem;height:2rem}.cat-body{padding:.7rem .8rem .8rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cat-name{font-weight:700;font-size:.86rem}.cat-actions{display:flex;gap:.2rem;flex:none}.new-cat-tile{border:1.5px dashed var(--border-strong);border-radius:var(--radius);aspect-ratio:16 / 10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--text-faint);cursor:pointer;background:var(--surface-2);font-size:.8rem;font-weight:600}.new-cat-tile:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:560px}thead th{text-align:left;font-family:var(--font-display);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);padding:.65rem .9rem;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}tbody td{padding:.7rem .9rem;border-bottom:1px solid var(--border);vertical-align:middle}tbody tr:last-child td{border-bottom:none}tbody tr:hover{background:var(--surface-2)}.cell-user{display:flex;align-items:center;gap:.55rem}.cell-user .username{font-weight:600;font-family:var(--font-mono);font-size:.78rem}.protected-tag{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);border:1px solid var(--border-strong);padding:.05rem .3rem;border-radius:4px;margin-left:.35rem}.role-chip-row{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;padding:.18rem .5rem;border-radius:999px;background:var(--surface-3);color:var(--text);border:1px solid var(--border)}.chip button{background:none;border:none;padding:0;margin:0;display:flex;color:var(--text-faint);cursor:pointer;width:auto}.chip button:hover{color:var(--danger);background:none}.chip button svg{width:.6rem;height:.6rem}.chip-add-select{font-family:var(--font-body);font-size:.68rem;border:1px dashed var(--border-strong);background:transparent;color:var(--text-faint);border-radius:999px;padding:.18rem .4rem;cursor:pointer}.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:700;padding:.18rem .55rem;border-radius:999px}.pill:before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:currentColor}.pill-active{background:var(--success-tint);color:var(--success)}.pill-disabled{background:var(--danger-tint);color:var(--danger)}.date-cell{color:var(--text-muted);font-family:var(--font-mono);font-size:.74rem;white-space:nowrap}.actions-cell{display:flex;gap:.4rem;justify-content:flex-end}.roles-layout{display:grid;grid-template-columns:280px 1fr;gap:1.1rem;align-items:start}.roles-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}.role-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem .9rem;border-bottom:1px solid var(--border);cursor:pointer;background:none;border-left:3px solid transparent;width:100%;text-align:left}.role-row:last-child{border-bottom:none}.role-row:hover{background:var(--surface-2)}.role-row.active{background:var(--accent-tint);border-left-color:var(--accent)}.role-row .r-name{font-weight:700;font-size:.85rem}.role-row .r-desc{font-size:.72rem;color:var(--text-muted);margin-top:.1rem;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.roles-list-foot{padding:.6rem}.roles-list-foot .btn{width:100%;justify-content:center}.role-detail{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.4rem 1.5rem 1.6rem}.role-detail-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:.35rem;flex-wrap:wrap}.role-title-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.role-title-row h3{font-size:1.15rem}.badge-protected{display:inline-flex;align-items:center;gap:.25rem;font-size:.64rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--warning);background:var(--warning-tint);padding:.15rem .5rem;border-radius:999px}.badge-protected svg{width:.65rem;height:.65rem}.role-desc{color:var(--text-muted);font-size:.82rem;margin-top:.35rem;max-width:60ch}.role-detail-actions{display:flex;gap:.4rem;flex:none;flex-wrap:wrap}.note-banner{display:flex;gap:.6rem;align-items:flex-start;background:var(--warning-tint);color:var(--warning);border-radius:var(--radius-sm);padding:.6rem .75rem;margin:1rem 0 .25rem;font-size:.78rem;font-weight:500}.note-banner svg{width:.95rem;height:.95rem;flex:none;margin-top:.05rem}.assigned-block{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--border)}.assigned-block .lbl{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.5rem;display:block}.assigned-chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.perm-groups{margin-top:1.25rem;display:flex;flex-direction:column;gap:1.1rem}.perm-group-title{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.perm-group-title .count{font-family:var(--font-mono);font-weight:500;color:var(--text-faint);text-transform:none;letter-spacing:0;font-size:.68rem}.perm-list{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.perm-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .85rem;background:var(--surface);border-bottom:1px solid var(--border)}.perm-row:last-child{border-bottom:none}.perm-main .k{font-family:var(--font-mono);font-size:.74rem;color:var(--text)}.perm-main .d{font-size:.74rem;color:var(--text-muted);margin-top:.1rem}.switch{position:relative;display:inline-block;width:2.2rem;height:1.25rem;flex:none}.switch input{opacity:0;width:0;height:0;position:absolute}.switch .track{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--surface-3);border:1px solid var(--border-strong);border-radius:20px;transition:background .15s ease,border-color .15s ease;cursor:pointer}.switch .knob{position:absolute;top:.11rem;left:.11rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px #0000004d;transition:transform .15s ease}.switch input:checked+.track{background:var(--accent);border-color:var(--accent)}.switch input:checked+.track .knob{transform:translate(1rem);background:#fff}.switch input:disabled+.track{opacity:.55;cursor:not-allowed}.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14151c73;display:none;align-items:center;justify-content:center;padding:1.25rem;z-index:100}.overlay.open{display:flex}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:440px;max-height:90vh;overflow-y:auto;animation:rise .2s ease both}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem .7rem}.modal-head h3{font-size:1.02rem}.modal-head button{background:none;border:none;color:var(--text-faint);cursor:pointer;padding:.25rem;width:auto}.modal-body{padding:.25rem 1.25rem 1.25rem}.modal-body form{max-width:none}.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:.85rem 1.25rem 1.25rem}.modal.small{max-width:380px}.modal-body p.confirm-text{font-size:.84rem;color:var(--text-muted);line-height:1.55}.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.25rem;cursor:pointer;text-align:center;background:var(--surface-2)}.dropzone:hover{border-color:var(--accent)}.dropzone input[type=file]{display:none}.dropzone .preview{width:4.5rem;height:3.4rem;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:var(--surface-3);color:var(--text-faint)}.dropzone .preview img{width:100%;height:100%;object-fit:cover}.dropzone .hint{font-size:.72rem;color:var(--text-faint)}.dropzone .hint strong{color:var(--accent)}#toasts{position:fixed;bottom:1.25rem;right:1.25rem;display:flex;flex-direction:column-reverse;gap:.5rem;z-index:200}.toast{background:var(--text);color:var(--bg);font-size:.82rem;font-weight:600;padding:.6rem .9rem;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);animation:toast-in .18s ease}.toast-out{opacity:0;transition:opacity .25s ease}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 860px){.roles-layout{grid-template-columns:1fr}}@media (max-width: 700px){#topbar{padding:0 .85rem;gap:.85rem}#topbar nav{gap:0}#topbar .who-info{display:none}#app{padding:1.25rem .9rem 3rem}.cat-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.panel-head{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}