:root{--bg:#0b0d12;--panel:#141822;--panel2:#1b2130;--text:#f4f7fb;--muted:#96a0b4;--line:#273044;--pink:#fe2c55;--cyan:#25f4ee;--green:#3ad57a;--red:#ff5b69;--yellow:#f5c451;--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#090b10,#0d1119);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}.topbar{position:sticky;top:0;z-index:50;background:#0b0e14ee;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:14px max(16px,5vw);min-height:64px}.brand{font-weight:850;font-size:20px;text-decoration:none;white-space:nowrap}.brand span{color:var(--cyan)}.desktop-nav{display:flex;gap:8px;flex-wrap:wrap}.desktop-nav a,.mobile-nav a{color:#dfe6f2;text-decoration:none;font-size:14px;padding:9px 10px;border-radius:9px}.desktop-nav a:hover,.mobile-nav a:hover{background:#171d29}.mobile-nav{display:none;position:relative}.mobile-nav summary{list-style:none;cursor:pointer;background:#1a2130;border:1px solid var(--line);padding:9px 12px;border-radius:10px;font-weight:700}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav>div{position:absolute;right:0;top:46px;width:210px;background:#111722;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 20px 50px #0009}.mobile-nav a{display:block;margin:2px 0}.container{width:min(1240px,calc(100% - 32px));margin:26px auto 76px}.hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:22px}.hero h1{margin:0;font-size:clamp(25px,4vw,34px);line-height:1.1}.hero p{margin:8px 0 0}.muted{color:var(--muted)}.small{font-size:12px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 26px}.stats.six{grid-template-columns:repeat(6,minmax(0,1fr))}.stat,.card,.panel{background:linear-gradient(180deg,var(--panel),#10141d);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 16px 40px #0004}.stat{padding:17px;min-width:0}.stat b{font-size:clamp(20px,3vw,27px);display:block;margin-top:7px;overflow:hidden;text-overflow:ellipsis}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{padding:18px;min-width:0}.profile{display:flex;gap:12px;align-items:center;min-width:0}.profile>div:last-child{min-width:0}.avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;background:var(--panel2);border:2px solid #2e374c;flex:0 0 auto}.avatar.lg{width:86px;height:86px}.avatar.placeholder{display:grid;place-items:center;font-weight:800;color:var(--cyan)}.card h3,.profile h3{margin:0 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.handle{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.metric{background:#0d1119;border:1px solid #222a39;border-radius:12px;padding:11px;min-width:0}.metric span{font-size:12px;color:var(--muted);display:block}.metric b{font-size:18px;overflow:hidden;text-overflow:ellipsis;display:block}.delta{padding:10px 12px;border-radius:12px;font-weight:750}.delta.up{background:#143623;color:#76f3a7}.delta.down{background:#3a171c;color:#ff909a}.delta.flat{background:#272a33;color:#c8ceda}.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#252b39;color:#dbe2ef;font-size:12px;font-weight:700}.badge.pending{background:#3b3115;color:#ffd979}.badge.compensating{background:#30213d;color:#e0adff}.badge.processing{background:#15313b;color:#84e9ff}.badge.completed,.badge.approved{background:#15351f;color:#86f0a4}.badge.rejected{background:#3a171c;color:#ff909a}.badge.tracking{background:#142d34;color:#86f6f0}.note{margin-top:12px;padding:12px;border-left:3px solid var(--pink);background:#10151f;border-radius:8px;color:#d8dfeb;overflow-wrap:anywhere}.panel{padding:20px;margin-bottom:18px}.panel h2,.panel h3{margin-top:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field.full{grid-column:1/-1}label{font-size:13px;color:#b8c2d3}input,select,textarea{width:100%;max-width:100%;background:#0d1119;border:1px solid #30384b;color:#fff;border-radius:10px;padding:12px 13px;outline:none;font:inherit}input:focus,select:focus,textarea:focus{border-color:#4c617e;box-shadow:0 0 0 3px #34476433}input[type=checkbox]{width:auto;accent-color:var(--pink)}input[type=file]{padding:9px}textarea{min-height:100px;resize:vertical}button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(90deg,var(--pink),#ff5273);border:0;color:white;padding:11px 16px;border-radius:10px;font-weight:750;text-decoration:none;cursor:pointer;font:inherit;min-height:42px}.btn.secondary{background:#232a38}.btn.danger{background:#642530}.btn.cyan{background:#123b3b;color:#9bfffb}.btn.green{background:#173d25;color:#a2f5bc}.actions{display:flex;gap:8px;flex-wrap:wrap}.section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:26px 0 12px}.section-title h2{margin:0;font-size:20px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel);-webkit-overflow-scrolling:touch}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}.table th{color:#abb6c9;background:#10141d;position:sticky;top:0}.table tr:last-child td{border-bottom:0}.alert{padding:12px 14px;border-radius:10px;margin:0 0 15px;border:1px solid transparent}.alert.success{background:#163722;border-color:#2d6a42;color:#a4f3bd}.alert.error{background:#3a171c;border-color:#6d2831;color:#ffb0b7}.empty{text-align:center;color:var(--muted);padding:38px 20px}.login-wrap{min-height:calc(100vh - 190px);display:grid;place-items:center}.login-box{width:min(420px,100%)}footer{text-align:center;color:#677187;padding:20px;font-size:13px}.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.kv{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--line)}.kv>div{padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.kv>div:nth-child(odd){color:var(--muted)}.tabs-note{padding:11px 13px;border-radius:12px;background:#0d1119;border:1px solid var(--line);color:var(--muted)}.danger-zone{border-color:#5b2730}.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.w-auto{width:auto!important}.right{text-align:right}.nowrap{white-space:nowrap}
@media(max-width:1050px){.stats.six{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}}
@media(max-width:760px){.desktop-nav{display:none}.mobile-nav{display:block}.topbar{padding:12px 16px}.container{width:min(100% - 22px,1240px);margin-top:18px}.hero{align-items:stretch;flex-direction:column}.hero>.btn{width:100%}.stats,.stats.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{padding:14px}.grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.panel,.card{padding:15px;border-radius:15px}.actions>.btn,.actions>button{flex:1 1 auto}.kv{grid-template-columns:1fr}.kv>div:nth-child(odd){padding-bottom:2px;border-bottom:0}.kv>div:nth-child(even){padding-top:2px}.section-title{align-items:flex-start}.table{min-width:680px}}
@media(max-width:430px){.brand{font-size:18px}.container{width:min(100% - 16px,1240px)}.stats,.stats.six{grid-template-columns:1fr 1fr}.stat b{font-size:21px}.profile{align-items:flex-start}.avatar{width:52px;height:52px}.metrics{gap:8px}.metric{padding:10px}.btn,button{width:100%}.inline-form .btn,.inline-form button{width:auto}.mobile-nav>div{width:min(240px,88vw)}.section-title{flex-direction:column}.login-wrap{align-items:start;padding-top:28px}}