:root{--ink: #121613;--ink2: #3b453d;--muted: #5d665f;--faint: #8a938c;--line: #e3e7e2;--line2: #eef0ed;--bg: #f6f7f5;--soft: #f1f3f0;--stripe: #fafbf9;--green: #1f9d55;--green-d: #167a42;--mint: #6fe3a0;--mint-soft: #e7f5ec;--sage: #b8e0c6;--deep-green: #14532d;--forest: #123d27;--forest2: #1a4d33;--forest3: #1f5c3d;--nav-text: #cfe6d7;--nav-label: #7fae90;--nav-sub: #9cc8ad;--amber: #e0a33a;--amber-d: #a8670f;--amber-soft: #fdf4e1;--amber-ink: #7a4a08;--red: #c0392b;--red-soft: #fdeeed;--red-ink: #8a2a22;--blue: #5b8def;--grey: #c9d1ca}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);font-family:Plus Jakarta Sans,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}a{color:var(--green);text-decoration:none}a:hover{color:var(--green-d)}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}input,select{font:inherit;color:inherit}.num{font-variant-numeric:tabular-nums}.ms{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-user-select:none;user-select:none}.app{display:flex;height:100vh;min-width:1200px;overflow:hidden}.main{flex:1;min-width:0;display:flex;flex-direction:column}.sidebar{width:232px;flex:none;background:var(--forest);color:var(--nav-text);display:flex;flex-direction:column;padding:20px 14px;gap:2px;overflow-y:auto}.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 20px}.logo{width:32px;height:32px;border-radius:10px;background:var(--mint);color:var(--forest);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}.brand-name{font-weight:800;font-size:17px;color:#fff;flex:1}.pro{font-size:10px;font-weight:800;padding:3px 7px;border-radius:999px;background:var(--mint);color:var(--forest);letter-spacing:.06em}.nav-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--nav-label);padding:16px 10px 6px}.nav-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--nav-text)}.nav-item:hover{background:var(--forest2);color:#fff}.nav-item.active{background:var(--forest3);color:#fff;font-weight:700}.user-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--forest2);color:var(--nav-text);margin-top:auto}.user-card:hover{color:#fff}.avatar{border-radius:50%;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}.topbar{height:68px;flex:none;display:flex;align-items:center;gap:14px;padding:0 28px;border-bottom:1px solid var(--line);background:#fff}.page-title{font-size:20px;font-weight:800;flex:none}.spacer{flex:1}.search{height:40px;border-radius:12px;background:var(--soft);display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--muted);font-size:14px}.search input{flex:1;border:0;background:transparent;outline:0;color:var(--ink);min-width:0}.search input::placeholder{color:var(--muted)}.kbd{font-size:12px;font-weight:700;padding:2px 6px;border-radius:6px;background:#fff;border:1px solid var(--line);color:var(--ink)}.btn{height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;font-size:14px;font-weight:700;white-space:nowrap}.btn-primary{background:var(--green);color:#fff}.btn-primary:hover{background:var(--green-d)}.btn-outline{border:1px solid var(--line);background:#fff;font-weight:600}.btn-outline:hover{border-color:var(--grey)}.btn-sm{height:32px;padding:0 12px;border-radius:10px;font-size:13px}.btn-xs{height:30px;padding:0 12px;border-radius:8px;font-size:13px}.btn-ghost:hover{background:#1216130f}.btn-kbd{font-size:11px;font-weight:700;padding:1px 5px;border-radius:5px;background:var(--green-d)}.content{flex:1;min-height:0;overflow:auto;padding:24px 28px}.card{background:#fff;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px}.card-title{font-size:16px;font-weight:800}.muted{color:var(--muted)}.small{font-size:13px}.label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em}.th{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em}.chip{height:34px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}.chip.dark{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}.chip.amber{background:var(--amber-soft);color:var(--amber-ink);border-color:var(--amber-soft);font-weight:700}.chip.on{background:var(--mint-soft);border-color:var(--green);color:var(--deep-green);font-weight:700}.pill{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;display:inline-block}.input{height:44px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;padding:0 12px;font-size:14px;font-weight:600;width:100%;background:#fff;outline:0}.input:focus,.input.focus{border:2px solid var(--green);padding:0 11px}.input::placeholder{color:var(--faint);font-weight:500}.seg{display:flex;background:var(--soft);border-radius:12px;padding:3px;gap:3px}.seg-item{height:34px;padding:0 14px;border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);display:flex;align-items:center;justify-content:center}.seg-item.on{background:#fff;color:var(--ink);font-weight:700}.toggle{width:40px;height:24px;border-radius:12px;background:var(--grey);padding:3px;display:flex;flex:none;transition:background .15s}.toggle.on{background:var(--green);justify-content:flex-end}.toggle i{width:18px;height:18px;border-radius:50%;background:#fff}.checkbox{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--grey);display:flex;align-items:center;justify-content:center;background:#fff}.checkbox.on{background:var(--green);border-color:var(--green);color:#fff}.radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--grey);flex:none}.radio.on{border:5px solid var(--green)}.option{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;border:1px solid var(--line);text-align:left;width:100%}.option.on{border:2px solid var(--green);padding:11px}.bar{height:8px;border-radius:4px;background:var(--line2);overflow:hidden}.bar>i{display:block;height:100%;border-radius:4px;background:var(--green)}.row-grid{display:grid;gap:12px;padding:0 16px;align-items:center;font-size:14px;border-bottom:1px solid var(--line2)}.row-click{cursor:pointer}.row-click:hover{background:var(--stripe)}.row-sel{background:var(--mint-soft)!important}.row-active{box-shadow:inset 3px 0 0 var(--green)}.menu-wrap{position:relative}.menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:200px;background:#fff;color:var(--ink);border-radius:12px;border:1px solid var(--line);box-shadow:0 12px 32px #12161324;padding:4px;display:flex;flex-direction:column;max-height:320px;overflow:auto}.menu.right{left:auto;right:0}.menu-item{padding:8px 10px;border-radius:8px;font-size:14px;font-weight:600;text-align:left;display:flex;justify-content:space-between;gap:10px}.menu-item:hover,.menu-item.hl{background:var(--mint-soft)}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#12161366;display:flex;align-items:center;justify-content:center;z-index:50}.modal{width:480px;max-width:calc(100vw - 32px);background:#fff;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 60px #12161340}.modal-title{font-size:20px;font-weight:800;flex:1}.field{display:flex;flex-direction:column;gap:6px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;z-index:60;box-shadow:0 12px 32px #12161340}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes pop-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}@keyframes slide-left{0%{opacity:0;transform:translate(18px)}to{opacity:1;transform:none}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%)}}@keyframes grow-x{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes grow-y{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes draw{0%{stroke-dashoffset:var(--len, 400)}to{stroke-dashoffset:0}}@keyframes pulse-dot{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.page{animation:fade-up .32s cubic-bezier(.2,.7,.2,1) both;display:flex;flex-direction:column;flex:1;min-height:0}.anim-in{animation:fade-up .35s cubic-bezier(.2,.7,.2,1) both}.stagger>*,.stagger-item{animation:fade-up .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i, 0) * 28ms)}.panel-in{animation:slide-left .25s cubic-bezier(.2,.7,.2,1) both}.backdrop{animation:fade-in .18s ease-out both}.modal{animation:pop-in .22s cubic-bezier(.2,.8,.2,1) both}.toast{animation:toast-in .25s cubic-bezier(.2,.8,.2,1) both}.toast.error{background:var(--red)}.menu{animation:pop-in .14s ease-out both;transform-origin:top left}.menu.right{transform-origin:top right}.bar>i{transform-origin:left;animation:grow-x .7s cubic-bezier(.2,.7,.2,1) both;transition:width .5s cubic-bezier(.2,.7,.2,1),background .3s}.col-bar{transform-origin:bottom;animation:grow-y .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i, 0) * 45ms)}.draw{stroke-dasharray:var(--len, 400);animation:draw 1.1s ease-out both}.skeleton{background:linear-gradient(90deg,var(--soft) 25%,#fff 50%,var(--soft) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}.btn,.chip,.nav-item,.seg-item,.row-click,.option{transition:background .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s}.btn:active:not(:disabled),.chip:active{transform:scale(.97)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-outline:hover,.chip:hover{box-shadow:0 2px 8px #1216130f}.nav-item{position:relative}.nav-item.active:before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--mint);animation:grow-y .3s ease-out both}.toggle{transition:background .2s}.toggle i{transition:transform .2s}.checkbox{transition:background .12s,border-color .12s,transform .1s}.checkbox:active{transform:scale(.88)}.row-sel,.row-active{transition:background .15s,box-shadow .15s}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse-dot 1.6s ease-in-out infinite}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.bar-fill{transform-origin:left;animation:grow-x .9s cubic-bezier(.2,.7,.2,1) .15s both}.stagger>:nth-child(1){--i: 0}.stagger>:nth-child(2){--i: 1}.stagger>:nth-child(3){--i: 2}.stagger>:nth-child(4){--i: 3}.stagger>:nth-child(5){--i: 4}.stagger>:nth-child(6){--i: 5}.stagger>:nth-child(7){--i: 6}.stagger>:nth-child(8){--i: 7}.stagger>:nth-child(9){--i: 8}.stagger>:nth-child(10){--i: 9}.stagger>:nth-child(11){--i: 10}.stagger>:nth-child(12){--i: 11}.stagger>:nth-child(13){--i: 12}.stagger>:nth-child(14){--i: 13}
