*{box-sizing:border-box}body{margin:0;background:#080808;color:#f4f4f4;font-family:Arial,Helvetica,sans-serif}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.brand{display:flex;align-items:center;gap:10px;font-weight:800}.brand img{width:40px;height:40px;object-fit:contain}.public-header{height:76px;display:flex;justify-content:space-between;align-items:center;padding:0 6%;border-bottom:1px solid #222;position:sticky;top:0;background:#090909eF;z-index:5}.public-header nav{display:flex;gap:22px;align-items:center;color:#999;font-size:14px}.btn{display:inline-flex;justify-content:center;align-items:center;padding:12px 18px;border:1px solid #303030;border-radius:10px;font-weight:700;min-height:44px}.light{background:#fff;color:#080808;border-color:#fff}.full{width:100%}.eyebrow{font-size:10px;letter-spacing:.18em;color:#888;font-weight:800}.hero{min-height:650px;padding:90px 7%;display:grid;grid-template-columns:1.2fr .65fr;gap:70px;align-items:center;background:radial-gradient(circle at 70% 25%,#242424,#0b0b0b 50%,#080808)}h1,h2{letter-spacing:-.05em}.hero h1{font-size:clamp(50px,7vw,90px);line-height:.95;margin:18px 0}.hero p{color:#999;font-size:18px;max-width:650px}.actions{display:flex;gap:12px;margin-top:28px}.hero-card{padding:35px;border:1px solid #333;border-radius:22px;background:#151515}.hero-card h2{font-size:32px}.hero-card p{font-size:15px}.section{padding:90px 7%}.dark{background:#101010}.title{margin-bottom:38px}.title.center{text-align:center}.title h1,.title h2{font-size:clamp(36px,5vw,58px);margin:10px 0}.title p,.grid4 p,.steps p{color:#888}.grid4,.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.grid4 article{border:1px solid #292929;background:#111;border-radius:15px;padding:24px}.grid4 h3{margin-top:25px}.steps>div{border-top:1px solid #333;padding-top:20px}.steps h3{margin-top:28px}.faq{max-width:800px;margin:auto}.faq details{padding:20px 0;border-bottom:1px solid #292929}.faq summary{cursor:pointer;font-weight:700}.faq p{color:#888}.footer,footer{padding:40px 7%;border-top:1px solid #222;color:#777;display:flex;justify-content:space-between}.auth{min-height:100vh;background:radial-gradient(circle at 50% 0,#222,#080808 55%)}.authbrand{margin:30px 6%}.authbox{width:min(460px,calc(100% - 28px));margin:70px auto;padding:34px;background:#141414;border:1px solid #303030;border-radius:20px}.authbox h1{font-size:42px;margin:12px 0 4px}.authbox p{color:#888}.authbox label,.formbox label{display:block;font-size:12px;color:#aaa;margin:16px 0 7px}.authbox input,.formbox input,.formbox select,.toolbar input{width:100%;padding:13px 14px;background:#080808;color:#fff;border:1px solid #303030;border-radius:10px;outline:none}.message{min-height:20px;color:#aaa;font-size:13px;margin-top:10px}.page{padding:75px 7%}.toolbar{display:flex;gap:10px;margin-bottom:18px}.toolbar input{max-width:650px}.service{display:grid;grid-template-columns:1fr auto auto;gap:15px;align-items:center;padding:16px;border:1px solid #292929;background:#111;border-radius:13px;margin:9px 0}.service small{display:block;color:#777;margin-top:4px}.smallbtn{padding:8px 12px;min-height:35px}.panel{min-height:100vh;background:#090909}.panel aside{position:fixed;left:0;top:0;bottom:0;width:235px;background:#101010;border-right:1px solid #252525;padding:24px 14px;display:flex;flex-direction:column;z-index:10}.panel aside .brand{padding:0 9px 25px;border-bottom:1px solid #252525}.panel aside nav{display:grid;gap:5px;margin-top:22px}.panel aside nav a{padding:12px;border-radius:9px;color:#888}.panel aside nav a.active,.panel aside nav a:hover{background:#1c1c1c;color:#fff}.panel aside button{margin-top:auto;background:#151515;color:#aaa;border:1px solid #292929;padding:11px;border-radius:9px}.content{margin-left:235px;padding:34px 4.5%;max-width:1500px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.top h1{font-size:36px}.welcome{padding:26px;border:1px solid #292929;background:#151515;border-radius:17px;display:flex;justify-content:space-between;align-items:center}.welcome h2{font-size:30px;margin:8px 0}.welcome p{color:#888}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.stats article{padding:21px;border:1px solid #292929;background:#111;border-radius:14px;color:#777;font-size:12px}.stats strong{display:block;color:#fff;font-size:27px;margin-top:9px}.stats i{font-style:normal}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick a{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid #292929;background:#111;border-radius:14px}.quick b{font-size:22px}.quick span{color:#777;font-size:13px}.panelbox,.formbox,.table{margin-top:30px;padding:25px;border:1px solid #292929;background:#111;border-radius:15px}.formbox{max-width:760px}.formbox.small{max-width:600px}.formbox h2{font-size:30px}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 18px}.amounts button{background:#151515;color:#fff;border:1px solid #292929;padding:11px;border-radius:8px}.thead,.orderrow{display:grid;grid-template-columns:1fr 2fr 1fr 1fr;gap:15px;padding:15px;border-bottom:1px solid #222}.thead{color:#777;font-size:12px}.orderrow{color:#aaa}.orders{border:1px solid #252525;border-radius:10px;overflow:hidden}.empty{text-align:center;color:#666;padding:35px;border:1px dashed #303030;border-radius:10px}@media(max-width:850px){.hero{grid-template-columns:1fr}.grid4,.steps,.stats,.quick{grid-template-columns:repeat(2,1fr)}.panel aside{width:70px}.panel aside .brand span,.panel aside nav span{display:none}.panel aside nav a{text-align:center;font-size:19px}.content{margin-left:70px}.public-header nav a:not(.btn){display:none}}@media(max-width:600px){.hero{padding:60px 6%}.hero h1{font-size:50px}.actions{flex-direction:column}.grid4,.steps,.stats,.quick,.twocol{grid-template-columns:1fr}.service{grid-template-columns:1fr}.toolbar{flex-direction:column}.footer{flex-direction:column;gap:15px}.welcome{flex-direction:column;align-items:flex-start}.top h1{font-size:28px}}
.payment-qr{display:block;width:min(280px,100%);aspect-ratio:1;margin:18px auto;border-radius:16px;background:#fff;padding:10px}.payment-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.payment-actions .btn{display:inline-flex;text-decoration:none}.tx-head,.tx-row,.order-head,.order-row{display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr 2fr;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}.tx-head,.order-head{font-weight:700;color:#aeb7c7}.tx-row:last-child,.order-row:last-child{border-bottom:0}.table{overflow:auto}.table>*{min-width:760px}@media(max-width:700px){.tx-head,.tx-row,.order-head,.order-row{grid-template-columns:1fr 1fr 1fr 1fr 1.6fr;gap:8px;padding:11px;font-size:13px}}

/* Responsive polish: phones, narrow tablets, forms, service cards and payment panels */
html{width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{width:100%;min-width:0;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
button,a,input,select{touch-action:manipulation}
input,select,button{min-width:0;max-width:100%}
.page,.content,.section,.hero,main{min-width:0}
.service{min-width:0}
.service>div{min-width:0;overflow-wrap:anywhere}
.service strong{display:block;line-height:1.35;overflow-wrap:anywhere}
.service b{white-space:nowrap}
.service .btn{white-space:nowrap}
.formbox,.panelbox,.table,.authbox{min-width:0;max-width:100%}
.payment-actions .btn{flex:1 1 145px}
.payment-qr{max-width:100%;height:auto;object-fit:contain}
.toolbar>*{min-width:0}
.public-header .brand{min-width:0}
.public-header .brand img{flex:0 0 40px}
.public-header .brand{font-size:clamp(13px,3.5vw,16px)}

@media(max-width:850px){
  .public-header{height:auto;min-height:64px;padding:10px 16px;gap:12px}
  .public-header nav{gap:8px}
  .public-header nav .btn{padding:9px 12px;min-height:40px}
  .page{padding:42px 18px}
  .section{padding:56px 18px}
  .hero{padding:58px 20px;gap:32px;min-height:auto}
  .hero h1{font-size:clamp(38px,8vw,60px);overflow-wrap:anywhere}
  .hero p{font-size:16px}
  .panel aside{width:72px;padding:18px 8px}
  .panel aside .brand{justify-content:center;padding:0 0 18px}
  .panel aside .brand span,.panel aside nav span{display:none}
  .panel aside nav a{display:flex;justify-content:center;align-items:center;padding:13px 5px;font-size:18px}
  .panel aside button{font-size:0;padding:11px 5px}
  .panel aside button:after{content:'↪';font-size:17px}
  .content{margin-left:72px;padding:25px 18px 35px;width:calc(100% - 72px)}
  .top{gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
  .top h1{font-size:clamp(25px,4vw,34px);margin:0;overflow-wrap:anywhere}
  .welcome{gap:18px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid4,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table{padding:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table>*{min-width:650px}
}
@media(max-width:600px){
  .public-header{padding:9px 12px;gap:8px}
  .public-header .brand{gap:6px;font-size:13px}
  .public-header .brand img{width:32px;height:32px;flex-basis:32px}
  .public-header nav{gap:6px}
  .public-header nav .btn{font-size:12px;padding:8px 10px;min-height:38px}
  .page{padding:30px 13px 42px}
  .section{padding:42px 14px}
  .hero{padding:44px 15px;gap:25px}
  .hero h1{font-size:clamp(34px,10vw,48px);line-height:1.02;letter-spacing:-.04em}
  .hero p{font-size:15px;line-height:1.55}
  .hero-card,.grid4 article,.authbox{padding:22px 18px}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{width:100%}
  .grid4,.steps,.stats,.quick,.twocol{grid-template-columns:minmax(0,1fr)}
  .grid4 article{padding:20px}
  .footer,footer{padding:28px 16px;flex-direction:column;gap:14px}
  .authbox{margin:34px auto;padding:25px 18px}
  .authbox h1{font-size:34px}
  .title{margin-bottom:24px}
  .title h1,.title h2{font-size:clamp(30px,8vw,42px);overflow-wrap:anywhere}
  .title p{font-size:14px;line-height:1.5}
  .toolbar{display:flex;flex-direction:column;gap:9px}
  .toolbar input{max-width:none;width:100%}
  .toolbar .btn{width:100%}
  .service{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:13px;border-radius:12px}
  .service>div{grid-column:1 / -1}
  .service b{grid-column:1;align-self:center;font-size:15px}
  .service .btn{grid-column:2;grid-row:2;min-height:38px;padding:8px 12px}
  .panel aside{left:0;right:0;top:auto;bottom:0;width:100%;height:66px;padding:5px 7px calc(5px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid #252525;flex-direction:row;align-items:center;justify-content:center;background:rgba(16,16,16,.98);overflow:hidden}
  .panel aside .brand{display:none}
  .panel aside nav{display:flex;flex:1;justify-content:space-around;gap:2px;margin:0;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .panel aside nav::-webkit-scrollbar{display:none}
  .panel aside nav a{flex:1 0 39px;min-width:39px;padding:10px 2px;font-size:17px;border-radius:8px}
  .panel aside button{display:none}
  .content{margin:0;width:100%;padding:22px 13px calc(88px + env(safe-area-inset-bottom))}
  .top{margin-bottom:18px;flex-wrap:wrap}
  .top h1{font-size:27px;line-height:1.15}
  .top .btn{padding:9px 11px;font-size:12px;min-height:39px}
  .welcome{padding:19px;align-items:stretch;gap:10px}
  .welcome h2{font-size:25px;overflow-wrap:anywhere}
  .stats{gap:9px;margin:12px 0}
  .stats article{padding:17px}
  .stats strong{font-size:24px}
  .quick{gap:9px}
  .quick a{padding:16px}
  .panelbox,.formbox,.table{margin-top:18px;padding:17px 14px;border-radius:13px}
  .formbox h2{font-size:25px;line-height:1.2}
  .formbox p{font-size:14px;line-height:1.5}
  .formbox label{margin-top:14px}
  .formbox input,.formbox select{font-size:16px;padding:13px 12px}
  .amounts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .amounts button{min-height:43px}
  .payment-qr{width:min(240px,100%);margin:14px auto}
  .payment-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .payment-actions .btn{width:100%}
  .message{overflow-wrap:anywhere;line-height:1.45}
  .table{overflow-x:auto;padding:10px}
  .table>*{min-width:620px}
  .empty{padding:24px 14px;overflow-wrap:anywhere}
}
@media(max-width:360px){
  .public-header .brand{font-size:11px}
  .public-header .brand img{width:27px;height:27px;flex-basis:27px}
  .public-header nav .btn{font-size:11px;padding:7px 8px}
  .content{padding-left:10px;padding-right:10px}
  .service{padding:11px}
  .service .btn{padding:7px 9px;font-size:12px}
  .panel aside nav a{flex-basis:35px;min-width:35px}
}

/* Jou SMM inspired reseller-panel refresh: original purple/navy branding */
:root{--jou-purple:#514477;--jou-purple-dark:#241548;--jou-lilac:#ece9f5;--jou-ink:#27334b;--jou-muted:#69758a;--jou-border:#e7e8f0}
body.panel{background:#f5f5fa;color:var(--jou-ink)}
.panel aside{background:var(--jou-purple);border-right:0;color:#fff;box-shadow:4px 0 22px #1b12301a}
.panel aside .brand{border-bottom:1px solid #ffffff25}
.panel aside .brand span{color:#fff}
.panel aside nav a{color:#e1ddef;border-radius:11px;font-weight:600}
.panel aside nav a.active,.panel aside nav a:hover{background:#fff;color:var(--jou-purple);box-shadow:0 4px 12px #20123824}
.panel aside button{background:#ffffff12;color:#fff;border:1px solid #ffffff30}
.content{max-width:none;padding:30px clamp(16px,3vw,48px)}
.top{background:#fff;border:1px solid var(--jou-border);border-radius:15px;padding:15px 20px;margin-bottom:22px;box-shadow:0 4px 18px #26345408}
.top h1{color:var(--jou-ink)}
.formbox,.panelbox,.table{background:#fff;border:1px solid var(--jou-border);border-radius:18px;box-shadow:0 8px 28px #2634540a;color:var(--jou-ink)}
.formbox{max-width:780px;padding:26px}
.formbox h2{color:var(--jou-ink);margin-top:8px}
.formbox label{color:#40506b;font-weight:700;font-size:13px}
.formbox input,.formbox select,.authbox input,.toolbar input{background:#f5f4fa;color:var(--jou-ink);border:1px solid #e2e0ee;border-radius:10px;min-height:46px}
.formbox input:focus,.formbox select:focus,.toolbar input:focus{outline:2px solid #8e7ac9;outline-offset:1px}
.eyebrow{color:#7b69ad}
.btn.light{background:var(--jou-purple);color:#fff;border-color:var(--jou-purple)}
.btn.light:hover{background:#403363}
.welcome,.stats article,.quick a{background:#fff;border-color:var(--jou-border);color:var(--jou-muted);box-shadow:0 5px 18px #26345408}
.welcome h2,.stats strong,.quick b{color:var(--jou-ink)}
.stats article{border-radius:15px}.quick a{border-radius:15px}
.orders,.thead,.orderrow{border-color:var(--jou-border)}
.thead{color:#69758a}.orderrow{color:#40506b}
.service{background:#fff;border-color:var(--jou-border);color:var(--jou-ink)}
.service small{color:var(--jou-muted)}
@media(max-width:600px){body.panel{padding-bottom:72px}.content{padding:14px 12px 24px}.top{padding:12px 14px;border-radius:12px;margin-bottom:15px}.top h1{font-size:25px}.formbox,.panelbox,.table{padding:19px 14px;margin-top:14px}.formbox h2{font-size:25px}.panel aside{background:var(--jou-purple);box-shadow:0 -4px 18px #1b12301a}.panel aside nav a.active{background:#fff;color:var(--jou-purple)}}

/* Clickable platform picker */
.platform-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:16px 0 20px}
.platform-chip{display:flex;align-items:center;justify-content:center;min-height:48px;background:#fff;color:#40506b;border:1px solid var(--jou-border);border-radius:11px;font-size:20px;cursor:pointer;transition:.15s}
.platform-chip:hover,.platform-chip.active{background:#ece8f7;border-color:#c7b9e8;color:#493777;box-shadow:inset 0 0 0 1px #d5caed}
.order-search{margin:0 0 16px!important}
@media(max-width:600px){.platform-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.platform-chip{min-height:44px}.order-search{margin-bottom:12px!important}}


/* Mobile dashboard header + hamburger drawer */
.mobile-topbar{display:none}
.mobile-menu-toggle{display:none}
.mobile-nav-overlay{display:none}
@media(max-width:600px){
  body.panel{padding-bottom:0;background:#211440}
  .mobile-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-14px -12px 16px;padding:13px 16px;background:#211440;color:#fff;position:relative;z-index:12}
  .mobile-topbar .brand{gap:9px;min-width:0;color:#fff;font-size:16px;font-weight:800}
  .mobile-topbar .brand img{width:36px;height:36px;flex:0 0 36px}
  .mobile-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;background:transparent;border:0;border-radius:9px;cursor:pointer}
  .mobile-menu-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px}
  .content{margin:0;width:100%;padding:14px 12px 30px;background:linear-gradient(180deg,#211440 0,#211440 210px,#f5f5fa 210px,#f5f5fa 100%);min-height:100vh}
  .top{margin:0 0 14px;padding:15px 16px;background:#fff;border:0;border-radius:15px;box-shadow:none}
  .top .eyebrow{color:#7b69ad}
  .welcome{border:0;border-radius:17px;padding:22px 19px;margin-bottom:13px;box-shadow:0 8px 24px #140b2512}
  .stats{gap:10px;margin:12px 0}
  .stats article{padding:17px 15px;border:0;border-radius:15px;box-shadow:0 6px 18px #1b123010}
  .quick a,.panelbox{border:0;box-shadow:0 6px 18px #1b123010}
  .panel aside{position:fixed;left:0;top:0;bottom:0;right:auto;width:min(82vw,310px);height:100dvh;padding:22px 14px calc(22px + env(safe-area-inset-bottom));border:0;border-radius:0 18px 18px 0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow-y:auto;transform:translateX(-105%);transition:transform .24s ease;z-index:30;box-shadow:12px 0 36px #10091d45}
  .panel aside.is-open{transform:translateX(0)}
  .panel aside .brand{display:flex;justify-content:flex-start;padding:0 8px 22px;margin-bottom:2px;border-bottom:1px solid #ffffff25}
  .panel aside .brand span{display:inline!important}
  .panel aside nav{display:grid;flex:none;justify-content:initial;gap:5px;margin-top:18px;overflow:visible}
  .panel aside nav a{display:flex;justify-content:flex-start;align-items:center;gap:12px;flex:none;min-width:0;padding:13px 12px;font-size:16px;text-align:left;color:#e1ddef}
  .panel aside nav span{display:inline!important}
  .panel aside nav a.active{background:#fff;color:var(--jou-purple)}
  .panel aside button{display:block;margin-top:auto;font-size:14px;padding:12px}
  .panel aside button:after{content:none}
  .mobile-nav-overlay{display:block;position:fixed;inset:0;background:#0d0719a8;border:0;padding:0;opacity:0;visibility:hidden;z-index:25;transition:opacity .2s ease}
  .mobile-nav-overlay.is-visible{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
}
@media(max-width:380px){.mobile-topbar .brand{font-size:14px}.mobile-topbar .brand img{width:32px;height:32px;flex-basis:32px}.stats strong{font-size:21px}}