@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800&display=swap";:root{--navy-950:#0a0e27;--navy-900:#10163a;--navy-800:#171e4d;--indigo-700:#2c3a8f;--indigo-600:#3d4fb0;--emerald-600:#10b981;--emerald-100:#d7f7ea;--amber-500:#f5a623;--amber-100:#fdf0d9;--red-600:#e0454f;--red-100:#fbe3e5;--blue-600:#3568e0;--blue-100:#e7edfd;--bg-app:#f4f6fb;--bg-card:#fff;--bg-soft:#eef1f9;--border:#e2e6f2;--border-soft:#edeff7;--text-900:#0f1430;--text-700:#454b6b;--text-500:#6c7292;--text-400:#9498b3;--radius-lg:12px;--radius-md:10px;--radius-sm:8px;--shadow-sm:0 1px 2px #0f14300d;--shadow-md:0 10px 26px -10px #0f143029;--shadow-lg:0 22px 54px -14px #0f143047;--font-body:"Inter",system-ui,sans-serif;--font-display:"Fraunces",Georgia,serif}:root[data-theme=dark]{--bg-app:#0a0e1f;--bg-card:#121834;--bg-soft:#171e40;--border:#232a52;--border-soft:#1c2347;--text-900:#eef0fb;--text-700:#c2c6e6;--text-500:#8f94bd;--text-400:#6b7099;--emerald-100:#0e3128;--amber-100:#3a2c0f;--red-100:#3a1a1e;--blue-100:#182450}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-body);background:var(--bg-app);color:var(--text-900);-webkit-font-smoothing:antialiased;margin:0;transition:background .2s,color .2s}h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-900);letter-spacing:-.01em;margin:0}p{margin:0}a{color:inherit;text-decoration:none}button{font-family:inherit}ul{margin:0;padding:0;list-style:none}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#c2c6da;border-radius:20px}:root[data-theme=dark] ::-webkit-scrollbar-thumb{background:#2c335e}.app-shell{min-height:100vh;display:flex}.sidebar{background:linear-gradient(190deg, var(--navy-900), var(--navy-950) 85%);color:#c7cbe8;z-index:40;flex-direction:column;flex-shrink:0;width:258px;transition:transform .25s;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-brand{border-bottom:1px solid #ffffff14;align-items:center;gap:12px;padding:22px 20px 18px;display:flex}.sidebar-brand img{object-fit:cover;border-radius:9px;width:36px;height:36px}.sidebar-brand .name{font-family:var(--font-display);color:#fff;font-size:16px;font-weight:700}.sidebar-brand .tag{color:#8890c9;letter-spacing:.04em;font-size:11px}.sidebar-nav{flex:1;padding:14px 12px;overflow-y:auto}.sidebar-section{text-transform:uppercase;letter-spacing:.09em;color:#5d6399;margin:16px 10px 6px;font-size:10.5px}.sidebar-link{color:#aeb2d6;cursor:pointer;border-radius:9px;align-items:center;gap:11px;margin-bottom:2px;padding:10px 12px;font-size:13.4px;font-weight:600;display:flex;position:relative}.sidebar-link svg{flex-shrink:0;width:17px;height:17px}.sidebar-link:hover{color:#fff;background:#ffffff0f}.sidebar-link.active{color:#fff;background:linear-gradient(90deg,#10b98133,#10b98108)}.sidebar-link.active:before{content:"";background:var(--emerald-600);border-radius:6px;width:3px;position:absolute;top:8px;bottom:8px;left:-12px}.sidebar-foot{border-top:1px solid #ffffff14;padding:14px}.main-area{flex-direction:column;flex:1;min-height:100vh;margin-left:258px;display:flex}.topbar{background:var(--bg-card);border-bottom:1px solid var(--border);z-index:30;justify-content:space-between;align-items:center;height:66px;padding:0 26px;display:flex;position:sticky;top:0}.topbar-search{background:var(--bg-soft);border:1px solid var(--border);width:320px;color:var(--text-500);border-radius:9px;align-items:center;gap:9px;padding:9px 14px;display:flex}.topbar-search input{width:100%;color:var(--text-900);background:0 0;border:none;outline:none;font-size:13.5px}.topbar-right{align-items:center;gap:14px;display:flex}.icon-btn{background:var(--bg-soft);border:1px solid var(--border);cursor:pointer;width:37px;height:37px;color:var(--text-700);border-radius:9px;justify-content:center;align-items:center;display:flex;position:relative}.icon-btn:hover{background:var(--border-soft)}.badge-dot{background:var(--red-600);color:#fff;border:2px solid var(--bg-card);border-radius:20px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 3px;font-size:9.5px;font-weight:700;display:flex;position:absolute;top:-3px;right:-3px}.topbar-user{cursor:pointer;border:1px solid #0000;border-radius:10px;align-items:center;gap:10px;padding:6px 10px 6px 6px;display:flex}.topbar-user:hover{background:var(--bg-soft);border-color:var(--border)}.avatar{background:linear-gradient(135deg, var(--indigo-600), var(--emerald-600));color:#fff;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;font-size:13px;font-weight:700;display:flex}.topbar-user .who{line-height:1.2}.topbar-user .who .n{color:var(--text-900);font-size:13px;font-weight:700}.topbar-user .who .r{color:var(--text-500);font-size:11px}.page-wrap{width:100%;max-width:1480px;margin:0 auto;padding:26px 28px 60px}.page-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;display:flex}.page-head h1{font-size:22px;font-weight:700}.page-head .sub{color:var(--text-500);margin-top:4px;font-size:13.5px}.breadcrumbs{color:var(--text-500);align-items:center;gap:6px;margin-bottom:8px;font-size:12.5px;display:flex}.breadcrumbs .cur{color:var(--text-900);font-weight:700}.btn{cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:13.2px;font-weight:700;transition:all .15s;display:inline-flex}.btn svg{width:15px;height:15px}.btn-primary{background:var(--indigo-600);color:#fff}.btn-primary:hover{background:var(--indigo-700)}.btn-dark{background:var(--navy-900);color:#fff}.btn-outline{background:var(--bg-card);border-color:var(--border);color:var(--text-700)}.btn-outline:hover{background:var(--bg-soft)}.btn-ghost{color:var(--text-700);background:0 0}.btn-ghost:hover{background:var(--bg-soft)}.btn-danger{background:var(--red-600);color:#fff}.btn-danger:hover{background:#c73a43}.btn-sm{border-radius:8px;padding:7px 12px;font-size:12.3px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-icon{border-radius:8px;width:36px;height:36px;padding:0}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.card-pad{padding:22px}.card-head{border-bottom:1px solid var(--border-soft);justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.card-head h3{font-size:15px;font-weight:700}.card-head .sub{color:var(--text-500);margin-top:2px;font-size:12px}.stat-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px;transition:transform .15s,box-shadow .15s}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-card .top-row{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.stat-card .icon-wrap{border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.stat-card .icon-wrap svg{width:19px;height:19px}.stat-card .trend{border-radius:20px;align-items:center;gap:3px;padding:3px 8px;font-size:11.5px;font-weight:700;display:flex}.trend.up{color:var(--emerald-600);background:var(--emerald-100)}.trend.down{color:var(--red-600);background:var(--red-100)}.stat-card .value{font-family:var(--font-display);color:var(--text-900);font-size:25px;font-weight:700}.stat-card .label{color:var(--text-500);margin-top:3px;font-size:12.3px;font-weight:600}.table-toolbar{border-bottom:1px solid var(--border-soft);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.table-toolbar-left{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.search-box{background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;align-items:center;gap:8px;min-width:220px;padding:8px 12px;display:flex}.search-box input{width:100%;color:var(--text-900);background:0 0;border:none;outline:none;font-size:13px}.search-box svg{width:15px;height:15px;color:var(--text-500);flex-shrink:0}.select-filter{border:1px solid var(--border);background:var(--bg-card);color:var(--text-700);cursor:pointer;border-radius:8px;padding:8px 12px;font-size:12.6px;font-weight:600}.table-wrap{overflow-x:auto}table.data-table{border-collapse:collapse;width:100%;font-size:13.1px}table.data-table thead th{text-align:left;text-transform:uppercase;letter-spacing:.06em;color:var(--text-500);background:var(--bg-soft);white-space:nowrap;border-bottom:1px solid var(--border);padding:12px 16px;font-size:10.8px;font-weight:700}table.data-table tbody td{border-bottom:1px solid var(--border-soft);color:var(--text-700);white-space:nowrap;vertical-align:middle;padding:14px 16px}table.data-table tbody tr:hover{background:var(--bg-soft)}table.data-table tbody tr:last-child td{border-bottom:none}.cell-primary{color:var(--text-900);font-weight:700}.cell-sub{color:var(--text-500);margin-top:2px;font-size:11.3px}.th-sort{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:4px;display:inline-flex}.th-sort svg{width:12px;height:12px}.row-actions{align-items:center;gap:6px;display:flex}.pagination{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;display:flex}.pagination .info{color:var(--text-500);font-size:12.3px}.pagination .pages{align-items:center;gap:5px;display:flex}.page-btn{border:1px solid var(--border);background:var(--bg-card);cursor:pointer;width:31px;height:31px;color:var(--text-700);border-radius:8px;font-size:12.3px;font-weight:700}.page-btn.active{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.badge{white-space:nowrap;border-radius:7px;align-items:center;gap:5px;padding:4px 10px;font-size:11.3px;font-weight:700;display:inline-flex}.badge-dot-i:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.badge-green{background:var(--emerald-100);color:var(--emerald-600)}.badge-red{background:var(--red-100);color:var(--red-600)}.badge-amber{background:var(--amber-100);color:#a26b00}.badge-blue{background:var(--blue-100);color:var(--blue-600)}.badge-gray{background:var(--bg-soft);color:var(--text-500)}.form-grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.field{flex-direction:column;gap:6px;margin-bottom:2px;display:flex}.field.full{grid-column:1/-1}.field label{color:var(--text-700);font-size:12.3px;font-weight:700}.field label .req{color:var(--red-600)}.field input,.field select,.field textarea{border:1px solid var(--border);background:var(--bg-card);color:var(--text-900);border-radius:8px;outline:none;padding:10px 13px;font-family:inherit;font-size:13.2px;transition:border-color .15s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--indigo-600);box-shadow:0 0 0 3px #3d4fb024}.field .err{color:var(--red-600);font-size:11.3px;font-weight:600}.field input.invalid{border-color:var(--red-600)}.field .hint{color:var(--text-400);font-size:11px}.checkbox-row{color:var(--text-700);align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;background:#0a0e1f8c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-card);width:560px;max-width:92vw;max-height:88vh;box-shadow:var(--shadow-lg);border-radius:14px;overflow:auto}.modal-head{border-bottom:1px solid var(--border-soft);background:var(--bg-card);z-index:2;justify-content:space-between;align-items:center;padding:20px 24px;display:flex;position:sticky;top:0}.modal-head h3{font-size:16px;font-weight:700}.modal-body{padding:22px 24px}.modal-foot{border-top:1px solid var(--border-soft);background:var(--bg-card);justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;display:flex;position:sticky;bottom:0}.drawer-overlay{z-index:100;background:#0a0e1f80;position:fixed;inset:0}.drawer{background:var(--bg-card);z-index:101;flex-direction:column;width:450px;max-width:92vw;display:flex;position:fixed;top:0;bottom:0;right:0;box-shadow:-20px 0 50px #0a0e1f33}.toast-stack{z-index:200;flex-direction:column;gap:10px;width:330px;display:flex;position:fixed;top:20px;right:20px}.toast{background:var(--bg-card);box-shadow:var(--shadow-lg);border-left:4px solid var(--indigo-600);border-radius:11px;align-items:flex-start;gap:10px;padding:13px 15px;display:flex}.toast.success{border-color:var(--emerald-600)}.toast.error{border-color:var(--red-600)}.toast.info{border-color:var(--blue-600)}.toast svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.toast .t{color:var(--text-900);font-size:13px;font-weight:700}.toast .m{color:var(--text-500);margin-top:2px;font-size:12px}.empty-state{text-align:center;color:var(--text-500);flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.empty-state .ic{background:var(--bg-soft);width:60px;height:60px;color:var(--text-400);border-radius:14px;justify-content:center;align-items:center;margin-bottom:16px;display:flex}.empty-state .ic svg{width:26px;height:26px}.empty-state h4{color:var(--text-900);margin-bottom:4px;font-size:14.5px}.skeleton{background:linear-gradient(90deg, var(--bg-soft) 25%, var(--border-soft) 37%, var(--bg-soft) 63%);background-size:400% 100%;border-radius:8px;animation:1.4s infinite sk}@keyframes sk{0%{background-position:100%}to{background-position:0}}.tabs{border-bottom:1px solid var(--border);gap:4px;margin-bottom:20px;display:flex}.tab-btn{color:var(--text-500);cursor:pointer;border-bottom:2px solid #0000;margin-bottom:-1px;padding:11px 16px;font-size:13px;font-weight:700}.tab-btn.active{color:var(--indigo-600);border-color:var(--indigo-600)}.chip{background:var(--bg-soft);border:1px solid var(--border);cursor:pointer;color:var(--text-700);border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:700;display:inline-flex}.chip.active{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}.divider{background:var(--border-soft);height:1px;margin:18px 0}.demo-ribbon{background:var(--navy-900);color:#8ff0c4;text-align:center;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--emerald-600);padding:7px;font-size:11.5px;font-weight:800}.perm-grid{border:1px solid var(--border);border-radius:10px;grid-template-columns:1.4fr repeat(6,.7fr);gap:0;display:grid;overflow:hidden}.perm-grid>div{border-bottom:1px solid var(--border-soft);border-right:1px solid var(--border-soft);align-items:center;padding:12px 14px;font-size:12.3px;display:flex}.perm-grid .ph{background:var(--bg-soft);text-transform:uppercase;letter-spacing:.05em;color:var(--text-500);justify-content:center;font-size:10.8px;font-weight:700}.perm-grid .mod{color:var(--text-900);font-weight:700}.toggle{background:var(--border);cursor:pointer;border-radius:20px;flex-shrink:0;width:38px;height:22px;transition:background .15s;position:relative}.toggle.on{background:var(--emerald-600)}.toggle .dot{background:#fff;border-radius:50%;width:18px;height:18px;transition:left .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0000004d}.toggle.on .dot{left:18px}.progress-bar{background:var(--bg-soft);border-radius:20px;height:7px;overflow:hidden}.progress-bar .fill{background:var(--emerald-600);border-radius:20px;height:100%;transition:width .5s}@media (width<=1080px){.stat-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}}@media (width<=860px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-area{margin-left:0}.topbar-search{display:none}}@media (width<=560px){.stat-grid{grid-template-columns:1fr}.page-wrap{padding:18px 14px 40px}}