/* ZyroDevv V1.7.2-HF6 — Store-inspired professional UI + Telegram-bound role flow */
:root{
  --hf6-ink:#131b25;
  --hf6-line:#1f2d3a;
  --hf6-cyan:#10b8c9;
  --hf6-blue:#326cf4;
  --hf6-mint:#60dfbd;
  --hf6-paper:#ffffff;
  --hf6-soft:#f3fbfc;
}
html:not([data-theme="mono"]) body{
  background:
    linear-gradient(rgba(20,184,201,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,184,201,.035) 1px,transparent 1px),
    radial-gradient(circle at 8% 8%,rgba(16,184,201,.12),transparent 28%),
    radial-gradient(circle at 94% 3%,rgba(50,108,244,.11),transparent 26%),
    #f8fcfd;
  background-size:32px 32px,32px 32px,auto,auto,auto;
}
html:not([data-theme="mono"]) .topbar{
  background:rgba(255,255,255,.94)!important;
  border-bottom:2px solid var(--hf6-line)!important;
  box-shadow:0 5px 0 rgba(19,27,37,.06);
}
html:not([data-theme="mono"]) .menu-btn,
html:not([data-theme="mono"]) .icon-btn,
html:not([data-theme="mono"]) .avatar-btn{
  border:2px solid var(--hf6-line)!important;
  box-shadow:0 4px 0 var(--hf6-line)!important;
}
html:not([data-theme="mono"]) .card,
html:not([data-theme="mono"]) .auth-card,
html:not([data-theme="mono"]) .modal{
  background:rgba(255,255,255,.96)!important;
  border:2px solid var(--hf6-line)!important;
  box-shadow:0 8px 0 var(--hf6-line),0 20px 45px rgba(30,50,70,.10)!important;
}
html:not([data-theme="mono"]) .card:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 0 var(--hf6-line),0 22px 48px rgba(30,50,70,.12)!important;
}
html:not([data-theme="mono"]) .btn{
  border:2px solid var(--hf6-line)!important;
  box-shadow:0 4px 0 var(--hf6-line)!important;
  border-radius:14px!important;
  font-weight:900!important;
}
html:not([data-theme="mono"]) .btn:active{
  transform:translateY(3px)!important;
  box-shadow:0 1px 0 var(--hf6-line)!important;
}
html:not([data-theme="mono"]) .btn-primary{
  color:#fff!important;
  background:linear-gradient(105deg,var(--hf6-cyan),var(--hf6-blue))!important;
}
html:not([data-theme="mono"]) .btn-outline{
  background:#fff!important;
  color:var(--hf6-ink)!important;
}
html:not([data-theme="mono"]) .input-wrap,
html:not([data-theme="mono"]) .smart-select-trigger{
  background:#fff!important;
  border:2px solid #2a4050!important;
  box-shadow:none!important;
  border-radius:14px!important;
}
html:not([data-theme="mono"]) .input-wrap:focus-within{
  border-color:var(--hf6-blue)!important;
  box-shadow:0 0 0 4px rgba(50,108,244,.14)!important;
}
html:not([data-theme="mono"]) .chip{
  border:1.5px solid var(--hf6-line)!important;
  font-weight:900!important;
}
html:not([data-theme="mono"]) .sidebar{
  background:linear-gradient(160deg,#0b1722,#132b3a 62%,#103c43)!important;
  border-right:2px solid #0b1118!important;
}
html:not([data-theme="mono"]) .role-banner,
html:not([data-theme="mono"]) .server-target-row,
html:not([data-theme="mono"]) .runtime-option,
html:not([data-theme="mono"]) .account-mode-option,
html:not([data-theme="mono"]) .dashboard-quick-actions button{
  border:2px solid var(--hf6-line)!important;
  box-shadow:0 5px 0 var(--hf6-line)!important;
  background:#fff!important;
}
html:not([data-theme="mono"]) .dashboard-kicker,
html:not([data-theme="mono"]) .eyebrow{
  color:#087f8c!important;
  background:#e6fbfd!important;
  border:1.5px solid #8bdde5!important;
}

/* Auth flow */
.auth-store-ui{padding:24px;gap:24px}
.auth-store-ui .auth-brand{
  background:linear-gradient(145deg,#eaffff,#f7fbff 52%,#e8eeff)!important;
  color:var(--hf6-ink)!important;
  border:2px solid var(--hf6-line)!important;
  box-shadow:0 9px 0 var(--hf6-line)!important;
}
.auth-store-ui .auth-brand:before{background:radial-gradient(circle,rgba(16,184,201,.26),transparent 68%)}
.auth-store-ui .auth-brand:after{background:radial-gradient(circle,rgba(50,108,244,.18),transparent 68%)}
.auth-store-ui .brand-lockup img,
.auth-mini-brand img{
  border:2px solid var(--hf6-line);
  box-shadow:0 4px 0 var(--hf6-line);
}
.auth-store-ui .brand-lockup p,
.auth-store-ui .auth-copy p,
.auth-store-ui .auth-benefit span{color:#5e6c7e!important}
.auth-store-ui .auth-copy .eyebrow{background:#66e4c2!important;color:#102a2d!important;border:2px solid var(--hf6-line)!important}
.auth-store-ui .auth-benefits{gap:16px}
.auth-store-ui .auth-benefit{
  background:#fff!important;
  border:2px solid var(--hf6-line)!important;
  box-shadow:0 5px 0 var(--hf6-line);
  border-radius:18px;
}
.auth-store-ui .auth-card{max-width:620px;border-radius:28px!important}
.auth-mini-brand{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:18px;border:2px solid var(--hf6-line);border-radius:18px;background:linear-gradient(110deg,#f0ffff,#eef3ff);box-shadow:0 4px 0 var(--hf6-line)}
.auth-mini-brand img{width:48px;height:48px;border-radius:14px;object-fit:cover}
.auth-mini-brand div{display:grid;gap:2px;flex:1}.auth-mini-brand small{color:#687587}.auth-mini-brand>span{font-size:10px;font-weight:900;color:#06775e;background:#72e5bf;border:1.5px solid var(--hf6-line);border-radius:999px;padding:6px 9px}
.auth-store-ui .auth-tabs{border:2px solid var(--hf6-line);background:#edf3f6;padding:5px;box-shadow:0 4px 0 var(--hf6-line)}
.auth-store-ui .auth-tab.active{background:#fff;border:1.5px solid var(--hf6-line);box-shadow:none}
.auth-security-note{display:grid;gap:3px;background:#effffd!important;color:#155e63!important;border:2px solid #94ddd8!important}
.auth-security-note small{color:#52737a}
.telegram-id-field label b{font-size:10px;color:#fff;background:#ef4444;padding:3px 7px;border-radius:999px;margin-left:5px}

/* Admin add buyer / codes */
.admin-role-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;padding:18px!important;background:linear-gradient(110deg,#eaffff,#f4f7ff)!important}
.admin-role-flow>div{display:grid;grid-template-columns:42px 1fr;column-gap:10px;align-items:center;padding:12px;border:1.5px solid #9fb2bf;border-radius:16px;background:#fff}
.admin-role-flow small{grid-column:2;color:#6c7888}
.admin-flow-step{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--hf6-cyan),var(--hf6-blue));color:white;font-weight:900;border:1.5px solid var(--hf6-line)}
.admin-code-maker{position:sticky;top:20px;height:max-content}
.admin-code-telegram{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:12px 14px;border:1.5px dashed #5f7a89;border-radius:14px;background:#f1fcfd;margin:12px 0}
.admin-code-telegram span{font-size:11px;color:#64748b;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.admin-code-telegram b{font-family:ui-monospace,SFMono-Regular,monospace}.admin-code-telegram small{grid-column:1/-1;color:#087f8c}.admin-code-telegram.unbound{background:#f8fafc;color:#64748b}
.admin-code-card{overflow:hidden}
.admin-code-card:before{content:"";position:absolute;inset:0 auto 0 0;width:7px;background:linear-gradient(var(--hf6-cyan),var(--hf6-blue))}

@media(max-width:900px){
  .admin-role-flow{grid-template-columns:1fr}
  .admin-code-maker{position:relative;top:auto}
}
@media(max-width:780px){
  .auth-store-ui{padding:0;display:block}
  .auth-store-ui .auth-brand{min-height:360px;border-width:0 0 2px!important;border-radius:0!important;box-shadow:0 7px 0 var(--hf6-line)!important;padding:28px 22px 54px}
  .auth-store-ui .auth-panel{margin-top:-38px;padding:18px 14px 100px}
  .auth-store-ui .auth-card{padding:22px 18px;border-radius:24px!important}
  .auth-store-ui .auth-copy h2{font-size:38px}
  html:not([data-theme="mono"]) .card{box-shadow:0 6px 0 var(--hf6-line),0 14px 30px rgba(30,50,70,.09)!important}
  html:not([data-theme="mono"]) .btn{box-shadow:0 3px 0 var(--hf6-line)!important}
  .admin-role-flow{padding:12px!important}
}