:root{
  --bg:#0b0f17; --panel:#141b26; --panel-2:#1a2331; --stroke:#232d3d; --stroke-2:#2d3a4d;
  --text:#e7ecf6; --muted:#8b97ab; --blue:#22a8f0; --blue-2:#5cc3ff; --green:#57f287;
  --red:#ed4245; --amber:#f5b300; --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
[hidden]{display:none!important}
html,body{overflow-x:hidden;max-width:100%}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.5}
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
a{color:var(--blue-2)}
.muted{color:var(--muted)}
.sm{font-size:12.5px}
b{color:#fff}

.btn{border:none;border-radius:10px;padding:11px 16px;font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;transition:background .15s,transform .05s}
.btn.primary{background:var(--blue);color:#06121c}
.btn.primary:hover{background:var(--blue-2)}
.btn.ghost{background:transparent;border:1px solid var(--stroke-2);color:var(--text)}
.btn.ghost:hover{background:rgba(255,255,255,.05)}
.btn.sm{padding:7px 12px;font-size:12.5px}

.login{position:fixed;inset:0;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--stroke-2);border-radius:var(--radius);padding:32px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px -30px rgba(0,0,0,.85)}
.brand{font-size:20px;font-weight:800}
.hint{color:var(--muted);font-size:14px}
.discord-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#5865F2;color:#fff;text-decoration:none;padding:13px 18px;border-radius:10px;font-weight:700;font-size:15px}
.discord-btn:hover{background:#4752c4}
.err{color:var(--red);font-size:13.5px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 16px;border-bottom:1px solid var(--stroke);position:sticky;top:0;background:rgba(11,15,23,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:5}
.brand-sm{display:flex;align-items:center;gap:8px;font-weight:700;font-size:24px;color:var(--text);text-decoration:none}
.brand-sm img{width:32px;height:32px;border-radius:50%;display:block;flex:none}
.top-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:900px){
  .topbar{flex-wrap:wrap}
  .cab-nav{order:3;width:100%;justify-content:center;overflow-x:auto;gap:22px}
}
.bal-pill{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--stroke-2);border-radius:8px;padding:6px 14px;font-weight:800}
.bal-pill .muted{font-weight:600}

.wrap{max-width:860px;margin:0 auto;padding:28px 20px 60px;display:flex;flex-direction:column;gap:28px}
/* cabinet section tabs */
.p-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--stroke);margin-bottom:-4px}
.p-tab{background:transparent;border:0;color:var(--muted);font:inherit;font-size:14px;font-weight:600;padding:10px 16px;border-radius:8px 8px 0 0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,background .15s}
.p-tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.p-tab.active{color:var(--blue-2);border-bottom-color:var(--blue)}
.p-pane{display:flex;flex-direction:column;gap:28px}
.p-pane:not(.active){display:none}
.p-empty{padding:24px 4px;text-align:center}
h1{font-size:24px;margin-bottom:6px}
h2{font-size:18px;margin-bottom:14px}
.card{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:22px}

.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.pcard{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:16px 18px}
.pcard .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.pcard .v{font-size:22px;font-weight:800;margin-top:6px}
.pcard .n{color:var(--muted);font-size:11.5px;margin-top:6px}
/* owner-only tabs (buyer orders / investments) */
.owner-tab{color:#e0a13c}
.owner-tab:hover{color:#f0b357;background:rgba(240,179,87,.06)}
.owner-tab.active{color:#f5c877;border-bottom-color:#e0a13c}
.owner-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#f0b357;background:rgba(240,179,87,.14);border-radius:6px;padding:3px 8px;vertical-align:middle;margin-left:8px}
.xstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:8px}
.xbal{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.xbal-card{flex:1;min-width:230px;background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:15px 17px}
.xbal-card .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.xbal-card .v{font-size:25px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
.xbal-edit{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.xseg{display:inline-flex;background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:9px;padding:2px;flex:none}
.xseg-b{background:transparent;border:0;color:var(--muted);font:inherit;font-size:15px;font-weight:700;width:36px;height:33px;border-radius:7px;cursor:pointer;line-height:1;transition:background .12s,color .12s}
.xseg-b:hover{color:var(--text)}
.xseg-b.active{background:var(--blue);color:#fff}
.xbal-edit input{flex:1;min-width:80px;background:rgba(255,255,255,.05);border:1px solid var(--stroke);border-radius:9px;color:var(--text);font:inherit;font-size:14px;padding:8px 11px;outline:none}
.xbal-edit input:focus{border-color:var(--blue);background:rgba(255,255,255,.07)}
.xbal-edit input::placeholder{color:var(--muted)}
.xbtn{white-space:nowrap;background:var(--blue);color:#fff;border:0;border-radius:9px;font:inherit;font-size:14px;font-weight:700;padding:8px 17px;cursor:pointer;flex:none;transition:filter .12s,transform .05s}
.xbtn:hover{filter:brightness(1.1)}
.xbtn:active{transform:translateY(1px)}
.xbtn:disabled{opacity:.5;cursor:default}
/* Owner-only "message the user" box */
.xdm-row{display:flex;gap:8px;align-items:flex-end}
.xdm-row textarea{flex:1;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--stroke-2);border-radius:10px;padding:10px 13px;font-size:14px;font-family:inherit;line-height:1.45;resize:vertical;min-height:44px;max-height:260px}
.xdm-row textarea:focus{outline:none;border-color:var(--blue)}
.xdm-status{margin-top:8px;font-size:13px}
.xdm-status.pending{color:var(--muted)}
.xdm-status.ok{color:var(--green)}
.xdm-status.err{color:var(--red)}
.xdm-status.warn{color:var(--amber)}
/* referrals */
.ref-list{display:flex;flex-direction:column;gap:10px}
.ref-card{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:14px 16px}
.ref-card.ref-idle{opacity:.6}
.ref-head{display:flex;align-items:center;gap:12px}
.ref-av{width:38px;height:38px;border-radius:50%;flex:none;background-size:cover;background-position:center;background-color:var(--panel-2);display:inline-flex;align-items:center;justify-content:center;color:var(--text);font-weight:700}
.ref-id{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.ref-id b{color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-earn{color:var(--green,#57f287);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ref-meta{margin-top:8px}

textarea{background:var(--bg);color:var(--text);border:1px solid var(--stroke-2);border-radius:10px;padding:11px 13px;font-size:14px;font-family:inherit;width:100%;min-height:80px;resize:vertical}
textarea:focus{outline:none;border-color:var(--blue)}
.actions-row{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--stroke)}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.left-n{color:#5a6577;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}

/* account burger menu (replaces the inline cabinet nav) */
.cab-menu{position:relative;display:flex;align-items:center;gap:8px;margin-right:-8px}
/* seamless transitions: show the app immediately when the last session was authed */
.pre-auth #login{display:none}
.pre-auth #app[hidden]{display:block}
.cab-burger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--stroke-2);color:var(--muted);cursor:pointer;transition:.15s}
.cab-burger:hover{color:var(--text);background:rgba(255,255,255,.1)}
.cab-av{width:42px;height:42px;border-radius:50%;padding:0;border:1px solid var(--stroke-2);background-size:cover;background-position:center;background-color:var(--panel-2);color:var(--text);font-weight:700;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.cab-av:hover{border-color:var(--blue)}
.nav-menu{position:absolute;top:calc(100% + 12px);right:0;width:262px;background:var(--panel);border:1px solid var(--stroke-2);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(0,0,0,.85);z-index:60}
.nav-menu[hidden]{display:none}
.nm-head{position:relative;height:96px;overflow:hidden}
.nm-banner{position:absolute;inset:0;background:linear-gradient(135deg,var(--blue),var(--blue-2));background-size:cover;background-position:center}
.nm-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.72) 100%)}
.nm-id{position:absolute;left:14px;right:14px;bottom:11px;z-index:1;display:flex;align-items:center;gap:11px}
.nm-av{width:46px;height:46px;border-radius:50%;flex:none;border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.45);background-size:cover;background-position:center;background-color:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
.nm-txt{min-width:0}
.nm-txt b{display:block;color:#fff;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.nm-txt span{display:block;color:rgba(255,255,255,.85);font-size:12.5px;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.nm-items{padding:6px}
.nm-items a,.nm-items .nav-logout{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;color:var(--text);font-size:14px;font-weight:600;background:transparent;border:0;width:100%;text-align:left;cursor:pointer;font-family:inherit;text-decoration:none;white-space:nowrap}
.nm-items a:hover,.nm-items .nav-logout:hover{background:rgba(255,255,255,.06)}
.nm-items a svg,.nm-items .nav-logout svg{width:18px;height:18px;flex:none;color:var(--muted)}
.nm-items a:hover svg{color:var(--text)}
.nm-items a.active{color:var(--blue-2);background:rgba(34,168,240,.14)}
.nm-items a.active svg{color:var(--blue-2)}
.nm-sep{height:1px;background:var(--stroke);margin:6px 8px}
.nm-items .nav-logout,.nm-items .nav-logout svg{color:#ff9a9c}
.nm-items .nav-logout:hover{background:rgba(237,66,69,.14)}
.cab-nav{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.cab-nav .cn-link{font-size:14px;font-weight:500;color:#9ca3af;white-space:nowrap;transition:color .15s}
.cab-nav .cn-link:hover{color:#fff}
.cab-nav .cn-link.active{color:#fff}

.lang-switch{display:inline-flex;gap:2px;background:rgba(255,255,255,.05);border:1px solid var(--stroke-2);border-radius:8px;padding:2px}
.login-card .lang-switch{position:absolute;top:14px;right:14px}
.login-card{position:relative}
.lang-switch button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;padding:3px 9px;border-radius:8px;cursor:pointer}
.lang-switch button.active{background:var(--blue);color:#06121c}
.table-wrap{overflow-x:auto;border:1px solid var(--stroke);border-radius:12px}
.wd-pager{display:flex;align-items:center;gap:12px;margin-top:12px}
.wd-pager .wd-page{font-variant-numeric:tabular-nums}
.wd-pager button:disabled{opacity:.4;cursor:not-allowed}

/* Ad-history: server switcher + summary */
.srv-switch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.sw-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:8px;border:1px solid var(--stroke-2);background:rgba(255,255,255,.03);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.sw-btn:hover{background:rgba(255,255,255,.07)}
.sw-btn.active{background:rgba(34,168,240,.16);border-color:rgba(34,168,240,.4);color:var(--blue-2)}
.sw-ic{width:22px;height:22px;border-radius:50%;flex:none;object-fit:cover;background:rgba(255,255,255,.06)}
.sw-ic-fb{display:inline-flex;align-items:center;justify-content:center;background:rgba(34,168,240,.16);color:var(--blue-2);font-weight:800;font-size:10px}
/* My verification cards */
.vcard{border:1px solid var(--stroke);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:rgba(255,255,255,.02)}
.vcard-head{display:flex;align-items:center;gap:9px;font-size:14px}
.vcard-head a{color:var(--blue-2);text-decoration:none}
.vcard-head a:hover{text-decoration:underline}
.vcard-meta{margin-top:8px;font-size:13px;color:var(--muted)}
.vcard-conv{margin-top:8px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vcard-conv b{color:var(--text,#eef2f8);font-size:14px}
.conv-tag{font-size:11px;font-weight:600;color:var(--amber,#f0b23a);border:1px solid color-mix(in srgb,var(--amber,#f0b23a) 45%,transparent);border-radius:8px;padding:1px 8px}
.vcard-members{margin:3px 0 0 31px;font-size:12px}
.vcard .table-wrap{display:inline-block;min-width:min(100%,360px)}
.vcard table{font-size:12.5px}
.vcard-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn-mini{font-size:12px;padding:5px 11px;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--stroke-2);color:var(--text)}
.btn-mini:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24)}
.btn-mini.off{background:rgba(237,66,69,.14);border-color:rgba(237,66,69,.35);color:#ff9a9c}
.btn-mini.off:hover{background:rgba(237,66,69,.22)}
.btn-mini.on{background:rgba(59,165,93,.16);border-color:rgba(59,165,93,.4);color:#7fe0a0}
.btn-mini.on:hover{background:rgba(59,165,93,.24)}
/* Card body: stacked on mobile; on PC the buttons sit to the right of the stats, 4 per row. */
.vcard-body{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.vcard-body .table-wrap{margin:0}
.vcard-body .vcard-actions{margin-top:0}
@media(min-width:720px){
  .vcard-body{flex-direction:row;align-items:flex-start}
  .vcard-body .table-wrap{flex:none}
  .vcard-body .vcard-actions{flex:1;display:grid;grid-template-columns:repeat(3,max-content);gap:8px;align-content:flex-start;justify-content:start}
}
.ar-inputs{display:flex;gap:12px;margin:4px 0 14px}
.ar-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);flex:1}
.ar-field input{width:100%;box-sizing:border-box;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--stroke-2);color:var(--text);font-size:15px;-moz-appearance:textfield;appearance:textfield}
.ar-field input::-webkit-inner-spin-button,.ar-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.pmodal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.pmodal[hidden]{display:none}
.pmodal-card{background:var(--panel-2);border:1px solid var(--stroke-2);border-radius:14px;padding:20px;max-width:520px;width:100%;box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.pmodal-card h3{margin-bottom:6px}
.pmodal-card textarea{width:100%;box-sizing:border-box;min-height:96px}
.pmodal-lg{max-width:560px}
.pe-field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.pe-field>label{font-size:12px;color:var(--muted)}
.pe-field input[type=text],.pe-field textarea{width:100%;box-sizing:border-box;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--stroke-2);color:var(--text);font:inherit;font-size:14px}
.pe-field textarea{min-height:90px;resize:vertical}
.pe-row{display:flex;gap:16px;flex-wrap:wrap}
.pe-row .pe-field{flex:1;min-width:180px}
.pe-color{display:flex;align-items:center;gap:10px}
.pe-color input[type=color]{width:44px;height:38px;padding:0;border:1px solid var(--stroke-2);border-radius:9px;background:none;cursor:pointer}
.pe-color input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.pe-color input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}
.pe-color span{font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--text)}
.pe-emoji-cur{display:flex;align-items:center;gap:10px}
.pe-emoji-current{width:44px;height:38px;display:grid;place-items:center;font-size:20px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--stroke-2);color:var(--text);cursor:pointer}
.pe-emoji-current:hover{border-color:rgba(255,255,255,.24)}
.pe-emoji-current img{width:24px;height:24px;object-fit:contain}
.pe-emoji-none-lbl{font-size:12px;color:var(--muted)}
.pe-emoji-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;max-height:180px;overflow-y:auto;padding:10px;border:1px solid var(--stroke-2);border-radius:10px;background:rgba(0,0,0,.15)}
.pe-emoji-opt{width:40px;height:40px;display:grid;place-items:center;font-size:20px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid transparent;cursor:pointer}
.pe-emoji-opt:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.pe-emoji-opt img{width:26px;height:26px;object-fit:contain}
.pe-emoji-empty{width:100%;padding:6px 2px}
.pe-check{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:var(--text);cursor:pointer}
.pe-check input{width:16px;height:16px;flex:none;accent-color:var(--blue)}

.adhist-summary{margin-bottom:14px}
.ah-sum-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:12px 16px;border:1px solid var(--stroke);border-radius:12px;background:rgba(255,255,255,.02)}
.ah-sv-name{font-weight:700;margin-right:4px}
.ah-kpi{display:inline-flex;align-items:center;gap:7px}
.ah-kpi b{font-size:15px;font-variant-numeric:tabular-nums}
#adhist-table td .sw-ic{vertical-align:middle;margin-right:8px}
.ah-ad-name{vertical-align:middle}

/* Active ads + priority selection */
#pads-list{display:flex;flex-direction:column;gap:10px}
.pad-row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:12px 16px}
.pad-row.pad-prio{border-color:rgba(245,179,0,.5);background:rgba(245,179,0,.06)}
.pad-row.pad-hidden{opacity:.5}
.pad-row.pad-hidden.pad-prio{opacity:1}
.pad-check{position:relative;flex:none;width:26px;height:26px;cursor:pointer}
.pad-check input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pad-check input:disabled{cursor:default}
.pad-star{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;border:1px solid var(--stroke-2);color:var(--muted);font-size:15px;line-height:1;transition:background .15s,border-color .15s,color .15s}
.pad-check:hover .pad-star{color:var(--amber);border-color:rgba(245,179,0,.5)}
.pad-check input:checked+.pad-star{background:var(--amber);border-color:var(--amber);color:#1a1200}
.pad-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.pad-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pad-badge{flex:none;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--amber);background:rgba(245,179,0,.16);border-radius:8px;padding:2px 9px}
.pad-badge.hid{color:var(--muted);background:rgba(255,255,255,.08)}
.pad-badge.show{color:#37d67a;background:rgba(55,214,122,.15)}
.pad-badge.queue{color:var(--muted);background:rgba(255,255,255,.06);text-transform:none;letter-spacing:0;font-weight:700}
.pad-remain{flex:none;display:inline-flex;align-items:center;gap:6px}
.pad-remain b{font-variant-numeric:tabular-nums}
.pad-row .btn-mini{flex:none}
.chip{display:inline-block;padding:2px 9px;border-radius:8px;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.06)}
.chip.green{background:rgba(87,242,135,.16);color:var(--green)}
.chip.amber{background:rgba(245,179,0,.16);color:var(--amber)}
.chip.blue{background:rgba(34,168,240,.16);color:var(--blue-2)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--stroke-2);border-radius:10px;padding:11px 18px;font-size:13.5px;font-weight:600;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);z-index:50}
.toast.err{border-color:rgba(237,66,69,.5);color:#ffb4b6}
@media (max-width:560px){.wrap{padding:20px 14px 50px}.card{padding:16px}}

/* Activity log (журнал) */
.plog-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.plog-sel,.plog-inp{background:var(--panel-2);color:var(--text);border:1px solid var(--stroke-2);border-radius:9px;padding:8px 11px;font-size:13px;font-family:inherit;font-weight:600}
.plog-sel:focus,.plog-inp:focus{outline:none;border-color:var(--blue-2,#22a8f0)}
/* kill the native (white) dropdown arrow; use a custom chevron */
.plog-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:30px;background-color:var(--panel-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b97ab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px}
.plog-sel::-ms-expand{display:none}
.plog-inp{min-width:150px}
#plog-list{display:flex;flex-direction:column;gap:6px}
.plog-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--stroke);border-radius:11px;padding:11px 14px}
.plog-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted)}
.plog-g .plog-dot{background:var(--green,#57f287)}
.plog-n .plog-dot{background:var(--muted)}
.plog-d .plog-dot{background:var(--red,#ed4245)}
.plog-u .plog-dot{background:var(--amber,#f5b300)}
.plog-main{flex:1;min-width:0}
.plog-title{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plog-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;background:rgba(255,255,255,.07);color:var(--muted)}
.plog-sub{margin-top:3px;font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.plog-sv{color:var(--blue-2)}
.plog-usr{font-variant-numeric:tabular-nums}
.plog-sp{color:var(--muted)}
.plog-sp::before{content:'→ ';opacity:.6}
.plog-d .plog-sp::before,.plog-u .plog-sp::before{content:'← '}
.plog-right{display:flex;align-items:center;gap:12px;flex:none;white-space:nowrap}
.plog-amt{font-weight:800;font-size:14px}
.plog-amt.pos{color:var(--green,#57f287)}
.plog-amt.neg{color:var(--red,#ed4245)}
.plog-time{font-size:12px;color:var(--muted)}
@media (max-width:560px){.plog-right{flex-direction:column;align-items:flex-end;gap:2px}}

/* Alternative login: one-time code */
.alt-login{margin-top:4px;display:flex;flex-direction:column;gap:12px}
.alt-sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.alt-sep::before,.alt-sep::after{content:"";flex:1;height:1px;background:var(--stroke-2)}
.alt-toggle{background:transparent;border:1px solid var(--stroke-2);color:var(--text);border-radius:10px;padding:10px 14px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:background .15s,border-color .15s}
.alt-toggle:hover{background:rgba(255,255,255,.05)}
.alt-toggle.on{border-color:var(--blue);color:var(--blue-2)}
.alt-body{display:flex;flex-direction:column;gap:10px}
.alt-note{color:var(--muted);font-size:12.5px;margin:0;line-height:1.45}
.alt-row{display:flex;gap:8px}
.alt-input{flex:1;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--stroke-2);border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit}
.alt-input:focus{outline:none;border-color:var(--blue)}
#altCode{letter-spacing:.42em;text-align:center;font-weight:700;padding-left:16px}
.alt-row .btn{white-space:nowrap}
.alt-msg{font-size:12.5px;line-height:1.45}
.alt-msg.err{color:var(--red)}
.alt-msg.ok{color:var(--green)}

/* "Your referrer" block (referrals tab) */
.my-referrer:empty{display:none}
.myref-form,.myref-set{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:14px 16px}
.myref-set{display:flex;align-items:center;gap:10px;font-size:14px}
.myref-row{display:flex;gap:10px;flex-wrap:wrap}
.myref-row input{flex:1 1 220px;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--stroke-2);border-radius:8px;padding:9px 12px;font-size:13.5px;font-family:inherit}
.myref-row input:focus{outline:none;border-color:var(--blue)}
#myref-msg{margin-top:8px}

/* referral link block */
.my-reflink:empty{display:none}
.reflink-box{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:14px 16px}
.reflink-head{margin-bottom:10px}
.reflink-row{display:flex;gap:10px;flex-wrap:wrap}
.reflink-row input{flex:1 1 260px;min-width:0;background:var(--bg);color:var(--blue-2);border:1px solid var(--stroke-2);border-radius:8px;padding:9px 12px;font-size:13px;font-family:inherit}
.reflink-row input:focus{outline:none;border-color:var(--blue)}

/* admin "view as" banner + deep-link card flash */
.view-banner{background:rgba(245,179,0,.12);border-bottom:1px solid rgba(245,179,0,.4);color:var(--amber);padding:9px 16px;font-size:13.5px;text-align:center}
.view-banner b{color:#fff}
.view-banner .vb-exit{margin-left:10px;color:var(--blue-2);font-weight:700;text-decoration:none}
.view-banner .vb-exit:hover{text-decoration:underline}
.vcard-flash{outline:2px solid var(--amber);outline-offset:2px;transition:outline .3s;border-radius:12px}

/* ===================================================================
   MOBILE RESPONSIVE — phones 320-430 px
   All visual rules are inside max-width queries — desktop untouched.
   Global rules below are additive properties only (min-width, touch
   scroll) that have zero effect when the container is wide enough.
   =================================================================== */

/* Scrollable table containers: touch momentum + minimum table width so
   narrow phones get a horizontal scroll instead of crushed columns.
   On desktop the table is always width:100% of a wide container so
   min-width never triggers an overflow there. */
.table-wrap{-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:360px}
/* Funnel / stat tables (4 narrower cols) can be a bit tighter */
.vcard .table-wrap table,.ref-card .table-wrap table{min-width:280px}

/* ---- 900 px: start narrowing wrap padding ---- */
@media(max-width:900px){
  .wrap{padding:24px 16px 50px}
}

/* ---- 600 px: phones ---- */
@media(max-width:600px){
  /* wrap & cards */
  .wrap{padding:20px 14px 50px}
  .card{padding:16px}

  /* topbar: compact tokens so brand + right side fit one line */
  .topbar{padding:10px 12px;gap:8px}
  .top-right{gap:6px}
  .bal-pill{padding:5px 10px;font-size:13px;gap:5px}
  .lang-switch button{padding:2px 7px;font-size:11.5px}

  /* nav dropdown: FIXED to the viewport (not the topbar) so it can't slide off the
     right edge even if the sticky topbar is pushed wide — the "menu opens off-screen"
     bug. Right-anchored 8px from the visible edge, opens just below the topbar. */
  .nav-menu{position:fixed;top:58px;right:8px;left:auto;width:min(calc(100vw - 16px),300px);max-height:calc(100vh - 70px);overflow-y:auto}
  .nm-items a,.nm-items .nav-logout{min-height:44px;padding:10px 10px}

  /* section tabs: single horizontal scroll row — no word-wrap */
  .p-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
  .p-tabs::-webkit-scrollbar{display:none}
  .p-tab{white-space:nowrap;flex:none}

  /* touch targets ≥ 40 px */
  .btn{min-height:40px}
  .btn.sm{min-height:36px;padding:9px 13px}
  .btn-mini{min-height:40px;padding:8px 11px;font-size:12.5px}
  .xbtn{min-height:40px}
  .cab-burger{min-width:42px;min-height:42px}
  .cab-av{min-width:42px;min-height:42px}

  /* activity log: right column stacks; filter bar goes 2-per-row */
  .plog-right{flex-direction:column;align-items:flex-end;gap:2px}
  .plog-filters{gap:6px}
  .plog-sel{flex:1 1 calc(50% - 6px);min-width:0;min-height:40px}
  .plog-inp{flex:1 1 100%;min-width:0;min-height:40px}

  /* alternative login: stack fields vertically */
  .alt-row{flex-direction:column;gap:6px}
  .alt-row .btn{width:100%;min-height:44px}

  /* stat card grids: at least 2 per row */
  .pcards{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .xstats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  /* Cards must be shrinkable so a wide value/label can't push the grid past the
     screen edge (the "content cut off on the right" symptom). Long numbers/ids wrap. */
  .pcard,.xstat,.xbal-card,.stat-card,.xbal{min-width:0}
  .pcard .v,.pcard .n,.xbal-card .v,.xstat .v{overflow-wrap:anywhere}

  /* owner balance cards: single column */
  .xbal{flex-direction:column;gap:10px}
  .xbal-card{min-width:0;width:100%}
  .xbal-edit{flex-wrap:wrap}
  .xbal-edit input{flex:1 1 auto;min-height:40px}

  /* modals: near full screen, internal scroll */
  .pmodal{padding:10px;align-items:flex-start;padding-top:20px}
  .pmodal-card{max-width:100%;max-height:88vh;overflow-y:auto;padding:16px}
  /* auto-reset modal: stack day/hour fields */
  .ar-inputs{flex-direction:column;gap:8px}
  .ar-field input{min-height:40px}

  /* referral link & my-referrer: stack on phone */
  .reflink-row{flex-direction:column;gap:6px}
  .reflink-row input{min-width:0;min-height:40px;width:100%}
  .reflink-row .btn{min-height:40px;width:100%}
  .myref-row{flex-direction:column;gap:6px}
  .myref-row input{min-height:40px;flex:none;min-width:0;width:100%}
  .myref-row .btn{min-height:40px;width:100%}

  /* active-ad rows: allow inner elements to wrap */
  .pad-row{flex-wrap:wrap;gap:8px}

  /* server switcher: horizontal scroll, never wrap */
  .srv-switch{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .srv-switch::-webkit-scrollbar{display:none}
  .sw-btn{flex:none}

  /* headings */
  h1{font-size:20px}
  h2{font-size:16px}
}

/* ---- 400 px: very small phones ---- */
@media(max-width:400px){
  .wrap{padding:16px 10px 50px}
  .card{padding:12px}
  .topbar{padding:8px 10px}
  .brand-sm{font-size:20px}
  .brand-sm img{width:26px;height:26px}
  .bal-pill{font-size:12px;padding:4px 8px;gap:4px}
  /* nav dropdown: full edge-to-edge on 320-400 px screens (still fixed to viewport) */
  .nav-menu{left:8px;right:8px;width:auto;max-width:none}
  /* filter selects: one per row */
  .plog-sel{flex:1 1 100%}
  /* tabs: tighter label */
  .p-tab{font-size:12.5px;padding:8px 10px}
}

/* ---- Owner DMALL order history: clickable rows + pager + detail modal ---- */
.xd-row{ cursor:pointer; transition:background .12s; }
.xd-row:hover{ background:var(--panel-2); }
.xd-pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px; }
.xd-pg{ background:var(--panel-2); border:1px solid var(--stroke); color:var(--text); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:16px; }
.xd-pg:disabled{ opacity:.4; cursor:not-allowed; }
.xd-pg-info{ color:var(--muted); font-size:13px; }
.xdo-modal{ position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); padding:18px; }
.xdo-box{ width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--stroke); border-radius:16px; overflow:hidden; }
.xdo-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--stroke); font-size:16px; }
.xdo-x{ background:transparent; border:0; color:var(--muted); font-size:18px; cursor:pointer; line-height:1; }
.xdo-x:hover{ color:var(--text); }
.xdo-body{ padding:14px 16px 18px; overflow-y:auto; }
.xdo-loading,.xdo-none{ color:var(--muted); text-align:center; padding:20px; }
.xdo-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.xdo-av{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center; background:#3a4256; }
.xdo-av img{ width:100%; height:100%; object-fit:cover; }
.xdo-av-txt{ font-weight:700; color:#fff; }
.xdo-srv{ font-weight:700; font-size:15px; }
.xdo-badge{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.xdo-sec{ margin-top:14px; }
.xdo-sec-h{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:7px; }
.xdo-row{ display:flex; justify-content:space-between; gap:14px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:13.5px; }
.xdo-row:last-child{ border-bottom:0; }
.xdo-k{ color:var(--muted); flex:none; }
.xdo-v{ color:var(--text); text-align:right; word-break:break-word; min-width:0; }
.xdo-v a{ color:var(--blue); }
.xdo-v code{ font-size:12px; background:var(--panel-2); padding:2px 6px; border-radius:6px; }
.xdo-user{ display:flex; align-items:center; gap:10px; padding:4px 0 8px; }
.xdo-uname{ font-weight:600; font-size:14px; }
.xdo-uid{ font-size:12px; color:var(--muted); }
.xdo-msg{ background:var(--panel-2); border:1px solid var(--stroke); border-radius:12px; padding:12px; }
.xdo-msg-text{ font-size:14px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.xdo-embed{ border-left:4px solid #4b5563; background:rgba(255,255,255,.03); border-radius:6px; padding:10px 12px; margin-top:10px; }
.xdo-em-author{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; margin-bottom:4px; }
.xdo-em-author img{ width:20px; height:20px; border-radius:50%; }
.xdo-em-title{ font-weight:700; font-size:14px; margin-bottom:4px; }
.xdo-em-desc{ font-size:13px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.xdo-em-fields{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.xdo-em-field{ flex:1 1 100%; }
.xdo-em-fname{ font-weight:700; font-size:12.5px; }
.xdo-em-fval{ font-size:12.5px; color:var(--muted); }
.xdo-em-img{ max-width:100%; border-radius:8px; margin-top:8px; display:block; }
.xdo-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.xdo-btn{ display:inline-block; padding:7px 14px; border-radius:8px; background:var(--blue); color:#fff; text-decoration:none; font-size:13px; font-weight:600; }
@media (max-width:560px){ .xdo-box{ max-height:92vh; } }