:root{--blue-50: #EEF4FF;--blue-100: #DCE7FF;--blue-200: #B6CCFF;--blue-300: #7FA5FB;--blue-400: #4A7AF0;--blue-500: #2B5BE0;--blue-600: #1E40AF;--blue-700: #1A348C;--blue-800: #15296E;--blue-900: #0E1D52;--orange-500: #F97316;--orange-600: #E25A0A;--orange-700: #B94506;--ink-900: #14172B;--ink-800: #1F2340;--ink-700: #353A5B;--ink-600: #5A6080;--ink-500: #8189A6;--ink-400: #ACB2C8;--ink-300: #CFD3E3;--ink-200: #E5E8F2;--ink-100: #EEF0F7;--ink-50: #F6F7FB;--paper: #FAFAF5;--card: #FFFFFF;--success: #1F8A5B;--success-soft: #E5F4EC;--warn: #E25A0A;--warn-50: #FFF7ED;--warn-300: #FFD54F;--warn-soft: #FFF1E6;--danger: #D94343;--danger-soft: #FCEAEA;--shadow-sm: 0 1px 2px rgba(20,23,43,.06), 0 1px 1px rgba(20,23,43,.04);--shadow-md: 0 4px 12px rgba(20,23,43,.08), 0 1px 3px rgba(20,23,43,.04);--shadow-lg: 0 24px 60px rgba(20,23,43,.18), 0 8px 24px rgba(20,23,43,.1);--r-sm: 8px;--r-md: 12px;--r-lg: 18px;--r-xl: 24px;--r-pill: 999px;--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--sidebar-w: 252px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-sans);background:var(--paper);color:var(--ink-900);-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}input,textarea,select{font-family:inherit}a{color:inherit;text-decoration:none}h1,h2,h3{margin:0}.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}.sidebar{background:var(--card);border-right:1px solid var(--ink-100);display:flex;flex-direction:column;padding:20px 14px;gap:4px;position:sticky;top:0;height:100vh;overflow:hidden}.sidebar .brand{flex:none}.sidebar-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:4px;margin-right:-6px;padding-right:6px;scrollbar-width:thin}.sidebar-nav::-webkit-scrollbar{width:6px}.sidebar-nav::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:3px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar .brand{display:flex;align-items:center;gap:10px;padding:8px 10px 18px}.sidebar .brand .logo{width:38px;height:38px;border-radius:11px;flex:none;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;font-weight:800;display:grid;place-items:center;font-size:17px}.sidebar .brand .name{font-weight:800;font-size:16px;letter-spacing:-.02em;line-height:1.1}.sidebar .brand .sub{font-size:11px;color:var(--ink-500);font-weight:600}.nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-md);color:var(--ink-600);font-weight:600;font-size:14px;border:none;background:transparent;width:100%;text-align:left}.nav-item:hover{background:var(--ink-50);color:var(--ink-800)}.nav-item.active{background:var(--blue-50);color:var(--blue-700)}.nav-item .dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7;flex:none}.sidebar-foot{flex:none;margin-top:auto;border-top:1px solid var(--ink-100);padding-top:14px}.user-chip{display:flex;align-items:center;gap:10px;padding:8px 10px}.avatar{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--blue-600);color:#fff;font-weight:700;font-size:13px}.main{padding:30px 38px 60px;max-width:1180px;width:100%}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}.page-head h1{font-size:25px;font-weight:800;letter-spacing:-.02em}.page-head p{margin:4px 0 0;color:var(--ink-600);font-size:14px}.card{background:var(--card);border:1px solid var(--ink-100);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:var(--r-md);font-weight:700;font-size:14px;border:1px solid transparent;transition:background .12s,transform .05s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 2px 0 var(--blue-800)}.btn-primary:not(:disabled):hover{background:var(--blue-500)}.btn-primary:not(:disabled):active{transform:translateY(1px);box-shadow:0 1px 0 var(--blue-800)}.btn-ghost{background:transparent;color:var(--ink-700);border:1px solid var(--ink-200)}.btn-ghost:not(:disabled):hover{background:var(--ink-50)}.btn-danger{background:var(--danger-soft);color:var(--danger)}.btn-danger:not(:disabled):hover{background:#f7dcdc}.btn-soft{background:var(--blue-50);color:var(--blue-700)}.btn-soft:not(:disabled):hover{background:var(--blue-100)}.btn-sm{padding:7px 12px;font-size:13px}.btn-block{width:100%}.field{margin-bottom:16px}.field-label{display:block;font-weight:700;font-size:13px;color:var(--ink-800);margin-bottom:6px}.field-hint{font-size:12px;color:var(--ink-500);margin-top:6px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.input,.textarea,.select-input{width:100%;padding:11px 13px;border:1.5px solid var(--ink-200);border-radius:var(--r-md);font-size:14px;color:var(--ink-900);background:#fff;outline:none;transition:border-color .12s,box-shadow .12s}.input:focus,.textarea:focus,.select-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 4px var(--blue-50)}.textarea{resize:vertical;min-height:84px}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}.search{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;padding:9px 13px;background:#fff;border:1.5px solid var(--ink-200);border-radius:var(--r-pill)}.search input{border:none;outline:none;width:100%;font-size:14px;background:transparent}.table-wrap{overflow:auto;border-radius:var(--r-lg)}table.tbl{width:100%;border-collapse:collapse;background:#fff}table.tbl th{text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);padding:13px 16px;border-bottom:1px solid var(--ink-100);white-space:nowrap}table.tbl td{padding:13px 16px;border-bottom:1px solid var(--ink-100);font-size:14px;vertical-align:middle}table.tbl tr:last-child td{border-bottom:none}table.tbl tr:hover td{background:var(--ink-50)}.cell-name{font-weight:700;color:var(--ink-900)}.cell-sub{font-size:12.5px;color:var(--ink-500)}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700}.badge-success{background:var(--success-soft);color:var(--success)}.badge-muted{background:var(--ink-100);color:var(--ink-600)}.badge-blue{background:var(--blue-50);color:var(--blue-700)}.badge-orange{background:#fff1e6;color:var(--orange-700)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14172b6b;display:grid;place-items:center;z-index:50;padding:20px}.modal{background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:100%;max-width:460px;padding:26px}.modal h2{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}.modal .sub{color:var(--ink-600);font-size:13.5px;margin-bottom:18px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}.empty{text-align:center;padding:54px 20px;color:var(--ink-500)}.empty .big{font-size:40px;margin-bottom:10px}.spinner{width:18px;height:18px;border:2.5px solid var(--blue-200);border-top-color:var(--blue-600);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.center-screen{min-height:100vh;display:grid;place-items:center;background:var(--paper)}.pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:16px;font-size:13px;color:var(--ink-600)}.mc{display:flex;flex-direction:column;gap:8px}.mc-chips{display:flex;flex-wrap:wrap;gap:7px}.mc-chip{padding:7px 12px;border-radius:999px;background:var(--card, #fff);border:1.5px solid var(--ink-200, #d9dbe6);font-size:12.5px;font-weight:600;color:var(--ink-700, #444);cursor:pointer}.mc-chip.on{background:var(--blue-600, #2b5be4);border-color:var(--blue-600, #2b5be4);color:#fff}.mc-chip .mc-x{margin-left:4px;opacity:.8}.mc-add{display:flex;gap:8px}.mc-add .input{flex:1}:root[data-theme=dark]{--ink-900: #F5F6FA;--ink-800: #E8EAF2;--ink-700: #D3D6E2;--ink-600: #AEB3C7;--ink-500: #8C92A8;--ink-400: #6F7592;--ink-300: #565C72;--ink-200: #474D61;--ink-100: #3C4051;--ink-50: #343949;--paper: #23262F;--card: #2E313D;--blue-600: #4E7AEE;--blue-500: #6C92F0;--blue-100: #2A3A64;--blue-50: #243056;--blue-700: #93B0F6;--blue-800: #1B2A4E;--success: #52CE93;--success-soft: #173D2A;--danger: #F27878;--danger-soft: #44242C;--warn: #F79F5C;--warn-50: #3C2F18;--warn-300: #6B5326;--warn-soft: #3C2F18;--orange-500: #F79F5C;--orange-600: #E6863E;--orange-700: #F7B98A;--shadow-sm: 0 1px 2px rgba(0,0,0,.3);--shadow-md: 0 6px 18px rgba(0,0,0,.36);--shadow-lg: 0 24px 60px rgba(0,0,0,.48);--glass-bg: rgba(48,52,68,.38);--glass-border: rgba(255,255,255,.16);--glass-highlight: rgba(255,255,255,.16);color-scheme:dark}:root[data-theme=dark] .input,:root[data-theme=dark] .textarea,:root[data-theme=dark] .select-input,:root[data-theme=dark] .search{background:var(--ink-50)}:root[data-theme=dark] table.tbl{background:var(--card)}:root[data-theme=dark] .modal{background:var(--card)}:root[data-theme=dark] .badge-orange{background:#3c2f18;color:var(--orange-500)}:root[data-theme=dark] .overlay{background:#0009}:root[data-theme=dark] .card{border-color:var(--ink-200)}:root{--glass-bg: rgba(255,255,255,.34);--glass-border: rgba(255,255,255,.55);--glass-highlight: rgba(255,255,255,.8);--glass-blur: 24px}:root[data-glass=on] body{background:radial-gradient(1100px 620px at 12% -8%,rgba(94,132,236,.22),transparent 60%),radial-gradient(950px 680px at 105% 108%,rgba(158,110,240,.18),transparent 55%),var(--paper);background-attachment:fixed}:root[data-glass=on] .card,:root[data-glass=on] .sidebar,:root[data-glass=on] .modal,:root[data-glass=on] .rte{background:linear-gradient(150deg,#ffffff29,#ffffff05 55%),var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);backdrop-filter:blur(var(--glass-blur)) saturate(180%);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 0 var(--glass-highlight),inset 0 0 0 1px #ffffff0a,0 12px 40px #00000038}:root[data-glass=on] .input,:root[data-glass=on] .textarea,:root[data-glass=on] .select-input,:root[data-glass=on] .search{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 0 var(--glass-highlight)}:root[data-glass=on] table.tbl{background:transparent}:root[data-glass=on] .nav-item.active{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 0 var(--glass-highlight)}
