:root{--teal: #26aabd;--teal-soft: rgba(38, 170, 189, .14);--orange: #f58634;--bg: #0b0f16;--card: #151b26;--card-2: #1c2432;--line: #232d3d;--text: #eef3f8;--muted: #7f8ea3;--good: #2fd08f;--bad: #ef5f57;--r: 20px;--r-sm: 14px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Plus Jakarta Sans,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:15px}#root{min-height:100dvh}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.app{display:flex;flex-direction:column;min-height:100dvh;padding-bottom:86px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));background:#0b0f16d9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.topbar .logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--teal),#1d8a9a);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:17px}.topbar .brand{font-weight:800;font-size:16.5px;letter-spacing:.4px;flex:1}.topbar .iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:16px;display:flex;align-items:center;justify-content:center}.content{padding:18px 16px 8px;display:flex;flex-direction:column;gap:14px}.hero h1{margin:2px 0 4px;font-size:24px;font-weight:800;letter-spacing:-.3px}.hero p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:600}.segment{display:flex;gap:6px;padding:5px;background:var(--card);border:1px solid var(--line);border-radius:999px}.segment button{flex:1;border:0;border-radius:999px;padding:11px 10px;background:transparent;color:var(--muted);font-weight:700;font-size:14px}.segment button.active{color:#fff}.segpill{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--teal);border-radius:999px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}.card .cardhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.card .cardhead .t{font-weight:800;font-size:15.5px}.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}.kpi{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;min-height:106px;display:flex;flex-direction:column}.kpi .lbl{font-size:12.5px;color:var(--muted);font-weight:600}.kpi .val{font-size:22px;font-weight:800;margin-top:auto;letter-spacing:-.4px}.kpi .sub{font-size:11px;color:var(--muted);margin-top:4px}.kpi.hero{background:linear-gradient(150deg,var(--teal),#1a7f90);border-color:transparent}.kpi.hero .lbl,.kpi.hero .sub{color:#fffc}.kpi.hero .val{color:#fff}.kpi.orange .val{color:var(--orange)}.kpi.good .val{color:var(--good)}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.menu-item{display:flex;flex-direction:column;gap:10px;padding:18px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-weight:700;font-size:14px}.menu-item .ic{width:42px;height:42px;border-radius:13px;background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:21px}.menu-item.create .ic{background:#f5863424}.menu-item:active{background:var(--card-2)}.field label{display:block;font-size:11.5px;font-weight:800;color:var(--muted);margin:0 2px 6px;text-transform:uppercase;letter-spacing:.7px}.input,select.input,textarea.input{width:100%;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);padding:13px 15px;font-size:16px;outline:none}textarea.input{min-height:84px;resize:vertical;font-family:inherit}.input:focus{border-color:var(--teal)}.btn{border:0;border-radius:var(--r-sm);padding:15px 18px;font-weight:800;font-size:15px;width:100%;background:var(--card-2);color:var(--text)}.btn.primary{background:var(--orange);color:#fff;box-shadow:0 8px 22px #f586344d}.btn.teal{background:var(--teal);color:#fff}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:600}.btn:disabled{opacity:.45;box-shadow:none}.btn.small{width:auto;padding:9px 16px;font-size:13px}.rowitem{display:flex;align-items:center;gap:12px;padding:14px 15px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}.rowitem .main{flex:1;min-width:0}.rowitem .name{font-weight:700;font-size:14.5px}.rowitem .sub{font-size:12px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis}.rowitem .right{text-align:right;font-weight:800;white-space:nowrap}.rowitem .right .sub{font-weight:500}.badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11px;font-weight:800;background:var(--teal-soft);color:var(--teal)}.stepper{display:flex;align-items:center;gap:8px}.stepper button{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card-2);color:var(--text);font-size:19px;font-weight:700}.stepper .q{min-width:32px;text-align:center;font-weight:800;font-size:16px}.muted{color:var(--muted);font-size:12.5px;line-height:1.55}.error{color:var(--bad);font-size:13.5px;font-weight:600}.table{width:100%;border-collapse:collapse;font-size:13px}.table th{text-align:left;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;padding:6px 8px;border-bottom:1px solid var(--line)}.table td{padding:9px 8px;border-bottom:1px solid var(--line)}.table tr:last-child td{border-bottom:0}.table td.num,.table th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.hbar{display:flex;align-items:center;gap:10px;margin:9px 0}.hbar .n{flex:0 0 42%;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hbar .track{flex:1;height:9px;border-radius:999px;background:var(--card-2);overflow:hidden}.hbar .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal),#58c6d6)}.hbar .v{flex:0 0 auto;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}.totalbar{position:sticky;bottom:92px;background:linear-gradient(135deg,var(--teal),#1a7f90);color:#fff;border-radius:var(--r);padding:14px 18px;display:flex;justify-content:space-between;font-weight:800;font-size:16px;box-shadow:0 10px 28px #00000073}.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;align-items:flex-end;background:#11161feb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(8px + env(safe-area-inset-bottom))}.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font-size:10px;font-weight:600;color:var(--muted)}.bottomnav a.active{color:var(--teal)}.bottomnav a{position:relative}.navdot{position:absolute;top:-1px;width:18px;height:3px;border-radius:999px;background:var(--teal)}.bottomnav a .ic{font-size:20px}.bottomnav a.fab-wrap{flex:0 0 76px}.bottomnav .fab{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#e06f1c);color:#fff;font-size:27px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:-26px;box-shadow:0 10px 24px #f5863473;border:4px solid var(--bg)}.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(900px 480px at 50% -8%,rgba(38,170,189,.22),transparent),radial-gradient(600px 400px at 100% 100%,rgba(245,134,52,.08),transparent),var(--bg)}.login-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}.login-logo{text-align:center;font-size:32px;font-weight:900;letter-spacing:5px}.login-logo .dot{color:var(--orange)}.scan-video{width:100%;border-radius:var(--r);background:#000}.suggest{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}.suggest .rowitem{border:0;border-bottom:1px solid var(--line);border-radius:0}.suggest .rowitem:last-child{border-bottom:0}.success-panel{text-align:center;padding:30px 20px}.success-panel .big{font-size:44px}.success-panel .t{font-weight:800;font-size:18px;margin-top:10px}.skeleton{border-radius:var(--r-sm);background:linear-gradient(100deg,var(--card) 40%,var(--card-2) 50%,var(--card) 60%);background-size:200% 100%;animation:shimmer 1.3s infinite linear;border:1px solid var(--line)}@keyframes shimmer{to{background-position:-200% 0}}.skeleton.row{height:62px}.skeleton.kpi{height:106px;border-radius:var(--r)}.skeleton.block{height:160px;border-radius:var(--r)}
