@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#20222b;background:#f3f4f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}#app{min-height:100vh}.shell{display:flex;min-height:100vh}.sidebar{width:262px;background:#111318;color:white;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:30px 18px;z-index:5}.brand{font:900 27px Outfit,Arial;letter-spacing:-1.2px;padding:0 13px 30px;white-space:nowrap}.brand b{color:#fa253b}.brand small{display:block;font:600 9px 'DM Sans';letter-spacing:3px;color:#a2a6b0;margin-top:1px}.nav{display:flex;flex-direction:column;gap:6px}.nav button{border:0;background:transparent;color:#b9bdc8;text-align:left;padding:13px 16px;border-radius:12px;font-weight:700;display:flex;gap:13px;align-items:center}.nav button.active,.nav button:hover{background:#ef263d;color:#fff}.nav .ico{font-size:19px;width:24px;text-align:center}.sidefoot{margin-top:auto;border-top:1px solid #333640;padding:20px 12px 0;color:#afb3be;font-size:12px;line-height:1.7}.main{margin-left:262px;width:calc(100% - 262px);padding:29px 36px 90px;max-width:1600px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px;gap:16px}.eyebrow{color:#8e93a0;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.topbar h1{font:800 clamp(26px,3vw,37px) Outfit;margin:5px 0 0;letter-spacing:-1.1px}.topright{display:flex;align-items:center;gap:12px}.tag{display:inline-flex;align-items:center;border-radius:999px;background:#eaf8ef;color:#198447;padding:7px 11px;font-size:11px;font-weight:800}.userpick{background:white;border:1px solid #e0e2e8;padding:11px 13px;border-radius:12px;font-weight:800;max-width:175px}.grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}.card{background:#fff;border:1px solid #e9eaf0;border-radius:19px;box-shadow:0 7px 28px rgba(29,35,49,.035);padding:22px;min-width:0}.stat{display:flex;align-items:center;gap:14px}.stat .bubble{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:22px;flex:none}.green{background:#e4f8e9;color:#169b52}.blue{background:#e8f1ff;color:#2479db}.orange{background:#fff0e1;color:#e78924}.purple{background:#f1eaff;color:#8b4de5}.stat small,.muted{color:#848995}.stat small{display:block;font-size:12px;font-weight:700}.stat strong{font:800 26px Outfit;display:block;margin-top:4px}.cols{grid-template-columns:1.35fr 1fr}.sectiontitle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.sectiontitle h2{font:800 20px Outfit;margin:0}.sectiontitle p{margin:5px 0 0;color:#8a8f9a;font-size:13px}.btn{border:0;border-radius:11px;padding:12px 17px;background:#f0f1f5;color:#30323b;font-weight:800}.btn.red{background:#ef233c;color:white}.btn.dark{background:#161820;color:#fff}.btn.light{background:#fff;border:1px solid #e2e3e8}.btn.small{font-size:12px;padding:9px 11px}.btn.full{width:100%}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.field label{font-size:12px;font-weight:800;color:#515662}.field input,.field select,.field textarea{border:1px solid #e1e3e9;background:#f9fafb;padding:12px 13px;border-radius:10px;width:100%;outline:none;min-width:0}.field input:focus,.field select:focus,.field textarea:focus{border-color:#f12b43;background:white}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.wide{grid-column:1/-1}.pillrow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}.pill{border:1px solid #e4e6eb;background:#f5f6f8;color:#666b76;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:800}.pill.active{background:#ef233c;color:#fff;border-color:#ef233c}.tablewrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#8a8f9a;padding:13px 10px;border-bottom:1px solid #e9eaf0;white-space:nowrap}td{padding:15px 10px;border-bottom:1px solid #eff0f3;vertical-align:middle}tr:last-child td{border-bottom:0}.strong{font-weight:800}.chip{font-size:11px;font-weight:800;border-radius:7px;padding:6px 8px;display:inline-block;white-space:nowrap}.chip.ok{background:#e3f8e9;color:#178448}.chip.wait{background:#fff1db;color:#bd7917}.chip.red{background:#ffe9ed;color:#d72b45}.empty{color:#969aa5;text-align:center;padding:34px 10px;font-size:13px}.hero{background:linear-gradient(110deg,#17191f,#2b171e);color:white;padding:27px 30px;border-radius:19px;margin-bottom:21px;display:flex;justify-content:space-between;align-items:center;gap:15px;overflow:hidden;position:relative}.hero:after{content:'M';position:absolute;right:24%;top:-63px;font:900 240px Outfit;color:#ffffff09;pointer-events:none}.hero h2{font:800 27px Outfit;margin:0 0 7px}.hero p{color:#c6c6cd;font-size:13px;margin:0}.hero .btn{z-index:1}.mechanics{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:20px}.mech{display:flex;align-items:center;gap:12px}.avatar{height:44px;width:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:#fce5e8;color:#e9223c;font:900 20px Outfit}.mech strong{display:block}.mech small{color:#9296a1}.mech .money{margin-left:auto;font:800 21px Outfit}.divider{height:1px;background:#eceef2;margin:18px 0}.bar{height:9px;background:#eef0f4;border-radius:12px;overflow:hidden}.bar>span{height:100%;display:block;background:linear-gradient(90deg,#fc6b77,#ee233c);border-radius:12px}.minirow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #eff0f3;font-size:13px}.minirow:last-child{border:0}.note{font-size:12px;color:#858b96;line-height:1.7}.notice{background:#fff7e9;border:1px solid #f6e6c6;border-radius:12px;padding:12px 15px;color:#96651d;font-size:12px;line-height:1.6}.actionrow{display:flex;flex-wrap:wrap;gap:8px}.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#111318}.loginart{padding:8vw;display:flex;flex-direction:column;justify-content:center;color:white;background:radial-gradient(circle at 25% 75%,#932037 0,transparent 36%),linear-gradient(140deg,#111318,#25232b)}.loginart .brand{padding:0;font-size:45px}.loginart h1{font:900 clamp(35px,5vw,65px) Outfit;line-height:1.02;max-width:570px;letter-spacing:-2px}.loginart p{color:#bdc0c9;line-height:1.8;max-width:420px}.loginform{display:grid;place-items:center;background:#f6f7f9;padding:30px}.loginbox{max-width:410px;width:100%}.loginbox h2{font:800 32px Outfit;margin:0 0 8px}.loginbox p{color:#878c97;font-size:14px;margin-bottom:25px}.loginbox .field{margin-bottom:18px}.loginbox .field input,.loginbox .field select{background:white}.mobilebar{display:none}.smallprint{font-size:11px;color:#989da7;margin-top:18px;line-height:1.6}.redtext{color:#ee233c}.filterline{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.filterline input{border:1px solid #e3e4e9;border-radius:10px;padding:10px;background:#fff;min-width:190px}.bigamount{font:900 37px Outfit;letter-spacing:-1px}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.split>div{background:#f5f6f9;border-radius:12px;padding:15px}.split small{color:#8b909b;display:block}.split strong{font:800 24px Outfit}.listcards{display:grid;gap:12px}.listitem{border:1px solid #e8eaf0;border-radius:13px;padding:16px;background:#fff}.listitem .head{display:flex;align-items:center;justify-content:space-between;gap:10px}.listitem h3{margin:0;font:800 17px Outfit}.listitem p{font-size:12px;color:#858a96;margin:6px 0}.footspace{height:20px}@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.cols{grid-template-columns:1fr}.mechanics{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:750px){.sidebar{display:none}.main{margin:0;width:100%;padding:19px 14px 90px}.topbar{align-items:flex-start}.topright{flex-direction:column;align-items:flex-end;gap:6px}.topbar h1{font-size:28px}.stats{gap:9px}.card{padding:16px;border-radius:15px}.stat{gap:9px}.stat .bubble{width:38px;height:38px;font-size:18px}.stat strong{font-size:21px}.stat small{font-size:10px}.mechanics{grid-template-columns:1fr;gap:9px}.hero{padding:22px}.hero h2{font-size:22px}.hero .btn{font-size:11px}.mobilebar{display:flex;position:fixed;bottom:0;left:0;right:0;background:#111318;z-index:6;padding:9px 7px max(9px,env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -5px 20px #0002}.mobilebar button{background:transparent;color:#adb0bb;border:0;font-size:10px;display:grid;gap:4px;justify-items:center;min-width:55px}.mobilebar button.active{color:#fa3046}.mobilebar .ico{font-size:22px}.login{grid-template-columns:1fr}.loginart{min-height:250px;padding:40px 25px}.loginart .brand{font-size:30px}.loginart h1{font-size:35px;margin:22px 0 0}.loginart p{font-size:12px}.loginform{padding:40px 20px;align-items:start}.formgrid{grid-template-columns:1fr}.wide{grid-column:auto}.split{grid-template-columns:1fr 1fr}}#toast{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);background:#1e2028;color:#fff;border-radius:12px;padding:12px 18px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20;box-shadow:0 8px 25px #0003}#toast.show{opacity:1}

/* V4: mobile-first compatibility refinements for phones and tablets */
html{min-width:0;-webkit-text-size-adjust:100%;scroll-padding-bottom:90px}
body,#app,.shell,.main{min-width:0;max-width:100%}
button,input,select,textarea{max-width:100%}
button{touch-action:manipulation}
.card,.listitem,.hero,.sectiontitle,.topbar,.topright,.minirow{min-width:0}
.card,.listitem{overflow-wrap:anywhere}
input,select,textarea{font-size:16px}
button,.btn,.nav button{min-height:42px}
@media (min-width:751px) and (max-width:1180px){
 .sidebar{width:215px;padding:22px 11px}
 .sidebar .brand{font-size:23px;padding:0 8px 24px}
 .nav button{padding:12px 9px;gap:8px;font-size:12px}
 .main{margin-left:215px;width:calc(100% - 215px);padding:24px 20px 65px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cols{grid-template-columns:1fr}
 .mechanics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:750px){
 .main{padding:18px 12px calc(104px + env(safe-area-inset-bottom));overflow-x:hidden}
 .topbar{flex-wrap:wrap;gap:12px;margin-bottom:17px}
 .topbar h1{font-size:clamp(23px,6vw,30px);overflow-wrap:anywhere}
 .topright{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:flex-start;width:100%}
 .userpick{max-width:100%;flex:1;min-width:145px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .stat{flex-direction:column;align-items:flex-start;gap:7px}
 .stat strong{font-size:clamp(19px,5vw,26px)}
 .stat small{font-size:11px;overflow-wrap:anywhere}
 .sectiontitle{align-items:flex-start;flex-wrap:wrap}
 .sectiontitle h2{font-size:18px}
 .cols,.mechanics{grid-template-columns:minmax(0,1fr)}
 .hero{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
 .hero .btn{width:100%}
 .formgrid{grid-template-columns:minmax(0,1fr)}
 .split{grid-template-columns:repeat(2,minmax(0,1fr))}
 .split strong{font-size:19px}
 .actionrow{gap:8px}
 .actionrow .btn{flex:1 1 auto}
 .filterline{align-items:stretch}
 .filterline input,.filterline select{min-width:0;width:100%}
 .mobilebar{overflow-x:auto;overscroll-behavior-x:contain;gap:2px;justify-content:space-between}
 .mobilebar button{min-width:0;flex:1;padding:5px 2px;font-size:10px;overflow-wrap:anywhere}
 .mobilebar .ico{font-size:20px}
 .login{min-height:100dvh;grid-template-columns:minmax(0,1fr)}
 .loginart{min-height:190px;padding:25px 20px}
 .loginart h1{font-size:clamp(29px,8vw,40px);margin:12px 0 0}
 .loginform{padding:25px 16px 45px}
 .loginbox h2{font-size:26px}
 .listitem .head{flex-wrap:wrap}
}
@media (max-width:390px){
 .main{padding-left:10px;padding-right:10px}
 .card{padding:12px}
 .stat .bubble{width:34px;height:34px}
 .stats{gap:7px}
 .split{grid-template-columns:1fr}
 .mobilebar button{font-size:9px}
}
@media print{.sidebar,.mobilebar,.topright,.btn{display:none!important}.main{margin:0;width:100%;padding:0}.card{box-shadow:none}}