:root{
  --bg:#0B0D12;
  --card:#151821;
  --card2:#10141d;
  --mid:#111827;
  --electric:#6D5DFB;
  --electric2:#8B5CF6;
  --aqua:#20C7B5;
  --text:#F7F8FC;
  --muted:#A7B0C4;
  --line:#28324a;
  --danger:#ff4668;
  --warn:#ff9f1a;
  --success:#25d19a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#06080d}
body{
  color:var(--text);
  font:15px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(circle at 90% 0,#24356e 0,transparent 28%),
    radial-gradient(circle at 10% 100%,#2430a8 0,transparent 25%),
    linear-gradient(160deg,#070a11,#0B0D12 45%,#070912);
}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
.shell{min-height:100vh;display:grid;place-items:center;padding:18px}
.phone{
  width:min(430px,100%);
  min-height:860px;
  background:linear-gradient(180deg,#0d1424 0%,#0B0D12 48%,#080b12 100%);
  border:1px solid #303b59;
  border-radius:34px;
  overflow:hidden;
  box-shadow:0 28px 100px #000a, inset 0 0 0 1px #ffffff08;
  position:relative;
}
.screen{padding:24px 20px 92px}
.glow,.glow2{position:absolute;border-radius:50%;filter:blur(82px);pointer-events:none}
.glow{width:260px;height:260px;background:#663dff50;top:-90px;right:-70px}
.glow2{width:230px;height:230px;background:#20c7b535;bottom:-50px;left:-70px}
.statusbar{display:flex;justify-content:space-between;align-items:center;color:#f8fafc;font-size:12px;margin-bottom:16px;opacity:.92}
.statusicons{letter-spacing:2px}
.brand{font-weight:900;font-size:31px;letter-spacing:-1.2px}
.brand span,.grad{
  background:linear-gradient(90deg,#fff 0%,#65a9ff 46%,#9747ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.logo-mark{
  width:104px;height:104px;margin:auto;display:grid;place-items:center;border-radius:28px;
  background:linear-gradient(145deg,#734dff,#22c4d2);
  box-shadow:0 0 45px #694cff88;
  font-size:48px;font-weight:1000;letter-spacing:-7px;
}
.tag{color:#c7cbe0;letter-spacing:4px;font-size:11px}
.title{font-size:34px;line-height:1.06;margin:28px 0 10px;letter-spacing:-.8px}
.sub{color:var(--muted)}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.iconbtn{
  min-width:42px;height:42px;padding:0 12px;border-radius:50%;
  display:grid;place-items:center;background:#131a29;border:1px solid #2c3854;color:#fff
}
.btn{
  width:100%;border:0;border-radius:18px;padding:15px 18px;color:white;font-weight:800;
  background:linear-gradient(90deg,#5630ff,#7d50ff);
  box-shadow:0 10px 30px #6540ff44;
}
.btn.secondary{background:#171d2a;border:1px solid #2d3850;box-shadow:none}
.btn.ghost{background:transparent;border:1px solid #33405d;box-shadow:none}
.btn.danger{background:linear-gradient(90deg,#ff3f65,#ff6b3d)}
.field{
  width:100%;padding:14px 15px;border-radius:16px;border:1px solid #313c59;
  background:#121827;color:white;margin:7px 0 12px;outline:none;
}
.field:focus{border-color:#735bff;box-shadow:0 0 0 3px #6d5dfb22}
.card{
  background:linear-gradient(180deg,#151b28,#10151e);
  border:1px solid #26314a;border-radius:20px;padding:16px;margin:12px 0;
  box-shadow:0 12px 28px #0002;
}
.hero-card{
  background:
    radial-gradient(circle at 86% 20%,#45d7ff33,transparent 24%),
    radial-gradient(circle at 12% 90%,#673cff55,transparent 32%),
    linear-gradient(145deg,#121a31,#11121d);
  border:1px solid #30406c;border-radius:28px;padding:22px;overflow:hidden;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pill{
  display:inline-flex;padding:8px 12px;border:1px solid #33405f;border-radius:999px;
  color:#cdd5ea;margin:4px 4px 4px 0;align-items:center;gap:6px;background:#121827;
}
.pill.on{background:linear-gradient(90deg,#5d39ff,#7e4bff);border-color:#7d63ff;color:#fff}
.bottom{
  position:absolute;left:0;right:0;bottom:0;height:76px;background:#0c1119f2;
  border-top:1px solid #222b40;display:grid;grid-template-columns:repeat(5,1fr);
  align-items:center;padding:5px 8px;backdrop-filter:blur(16px)
}
.nav{color:#9eabc2;text-align:center;font-size:10px}
.nav b{display:block;font-size:20px;line-height:1.2}
.nav.active{color:#fff}
.hub{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:auto;
  background:linear-gradient(145deg,#6945ff,#9a5dff);box-shadow:0 0 28px #714bffcc;
  border:2px solid #9d86ff;
}
.stories{display:flex;gap:11px;overflow:auto;padding:14px 0 8px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{min-width:64px;text-align:center;font-size:10px;color:#dbe2f0}
.avatar{
  width:58px;height:58px;border-radius:50%;padding:3px;
  background:linear-gradient(135deg,#27d9ff,#8e44ff,#ff3ca6);
  box-shadow:0 0 16px #6d5dfb33
}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #0f1420}
.post{overflow:hidden}
.post img,.vibe img{width:100%;border-radius:16px;object-fit:cover}
.post img{max-height:430px}
.meta{display:flex;justify-content:space-between;align-items:center;color:#c7d0e8;font-size:13px;gap:10px}
.actions{display:flex;gap:11px;padding-top:10px;align-items:center;flex-wrap:wrap}
.small{font-size:12px;color:#9aa6c1}
.chips{display:flex;gap:7px;overflow:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.vibe{position:relative;min-height:620px;border-radius:22px;overflow:hidden}
.vibe img{height:620px;border-radius:22px}
.vibe:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#000b)}
.vibe .overlay{position:absolute;left:16px;right:70px;bottom:22px;z-index:2;text-shadow:0 2px 8px #000}
.sideacts{position:absolute;right:14px;bottom:92px;display:grid;gap:14px;text-align:center;z-index:3;font-size:12px}
.sideacts .act{width:48px;height:48px;border-radius:50%;background:#0b0e16bb;border:1px solid #ffffff22;display:grid;place-items:center}
.modal{position:absolute;inset:0;background:#070a11f2;z-index:10;display:grid;place-items:center;padding:24px;backdrop-filter:blur(18px)}
.orb{width:270px;height:270px;border-radius:50%;display:grid;place-items:center;position:relative}
.orb:before{content:"";position:absolute;inset:20px;border-radius:50%;border:1px solid #705cffaa;box-shadow:0 0 40px #6544ff55}
.orb button{
  position:absolute;width:92px;height:92px;border-radius:50%;border:1px solid #6758ff;
  background:linear-gradient(145deg,#16192a,#1a1531);color:white;box-shadow:0 0 28px #6a4bff55
}
.orb .c{position:static;font-size:32px;background:linear-gradient(145deg,#6d5dfb,#9a62ff);z-index:2}
.orb .a{top:-38px}.orb .b{right:-40px}.orb .d{bottom:-38px}.orb .e{left:-40px}
.hidden{display:none!important}
.metric{padding:14px;border-radius:17px;background:#121827;border:1px solid #25304a}
.metric b{font-size:21px}
.banner{
  height:170px;border-radius:22px;background:url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1000&q=80') center/cover;
  position:relative;overflow:hidden;margin-bottom:14px
}
.banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07101dcc,transparent)}
.banner .copy{position:absolute;z-index:2;left:18px;bottom:18px;width:65%}
.progress{height:6px;border-radius:999px;background:#242c3e;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,#20C7B5,#6D5DFB)}
.otp-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:24px 0}
.otp-box{height:58px;border-radius:14px;background:#141b29;border:1px solid #35415f;color:white;text-align:center;font-size:23px;font-weight:800}
.feature-list{display:grid;gap:10px;margin-top:18px}
.feature{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:15px;background:#121826;border:1px solid #24304a}
.feature .dot{width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,#6846ff,#22c7c0);display:grid;place-items:center}
.admin{width:min(1240px,100%);background:#f7f8fc;color:#101828;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:230px 1fr;min-height:780px;box-shadow:0 30px 100px #0006}
.aside{background:#081626;color:white;padding:22px;overflow:auto}
.aside .brand{font-size:28px}
.aside a{display:block;padding:11px 12px;border-radius:12px;color:#ccd6e7;text-decoration:none;margin:2px 0}
.aside a.on{background:linear-gradient(90deg,#5a30ff,#2975ff);color:white}
.content{padding:24px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{padding:18px;border-radius:18px;color:white;background:linear-gradient(135deg,#2563eb,#5031ff)}
.kpi:nth-child(2){background:linear-gradient(135deg,#10b981,#0ea5a5)}
.kpi:nth-child(3){background:linear-gradient(135deg,#f59e0b,#f97316)}
.kpi:nth-child(4){background:linear-gradient(135deg,#ef4444,#db2777)}
table{width:100%;border-collapse:collapse;background:white;border-radius:16px;overflow:hidden;margin-top:16px}
th,td{padding:12px;border-bottom:1px solid #e6eaf0;text-align:left;font-size:13px}
.admin-card{background:#fff;border:1px solid #e4e8ef;border-radius:18px;padding:18px;margin-top:14px}
.admin-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:700px){
  .admin{display:block}.aside{display:none}.kpis{grid-template-columns:1fr 1fr}
  .phone{min-height:790px}.screen{padding-top:18px}
}


/* --- YB HUB Admin Dashboard V3 --- */
.admin-page{min-height:100vh;background:#eef4f8;color:#0f172a}
.admin-grid{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.admin-sidebar{background:linear-gradient(180deg,#071727,#0a1d31);color:#fff;padding:20px 14px;overflow-y:auto}
.admin-logo{font-size:34px;font-weight:900;letter-spacing:-1px;margin:0 8px 3px}
.admin-logo span{background:linear-gradient(90deg,#fff,#5fa7ff,#9a3cff);-webkit-background-clip:text;color:transparent}
.admin-sub{color:#a7b5c7;margin:0 8px 18px}
.admin-nav-title{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:#6f8aa8;margin:18px 10px 7px}
.admin-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:#d9e4f0;text-decoration:none;margin:2px 0;font-size:14px}
.admin-link:hover{background:#12263e}
.admin-link.active{background:linear-gradient(90deg,#6135ff,#1f6dff);color:#fff;box-shadow:0 10px 24px #442cff33}
.admin-main{min-width:0}
.admin-top{height:68px;background:#fff;border-bottom:1px solid #dde5ed;display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:5}
.admin-searchbox{flex:1;max-width:620px;background:#f1f5f9;border:1px solid #dce5ef;border-radius:12px;padding:12px 15px;color:#334155}
.admin-top-right{margin-left:auto;display:flex;align-items:center;gap:14px;color:#1e293b}
.admin-content{padding:18px 22px 28px}
.admin-headline{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:14px}
.admin-headline h1{margin:0;font-size:31px}
.admin-headline p{margin:4px 0 0;color:#64748b}
.date-pill,.admin-action{border:1px solid #dce5ef;background:#fff;border-radius:10px;padding:10px 12px}
.admin-kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:12px}
.admin-kpi{color:#fff;border-radius:15px;padding:15px;min-height:100px;position:relative;overflow:hidden}
.admin-kpi h2{font-size:27px;margin:7px 0 3px}
.admin-kpi small{opacity:.92}
.admin-kpi:nth-child(1){background:linear-gradient(135deg,#2563eb,#2285ff)}
.admin-kpi:nth-child(2){background:linear-gradient(135deg,#0fbf8f,#0aa86e)}
.admin-kpi:nth-child(3){background:linear-gradient(135deg,#f59e0b,#f97316)}
.admin-kpi:nth-child(4){background:linear-gradient(135deg,#ef4444,#e11d48)}
.admin-kpi:nth-child(5){background:linear-gradient(135deg,#6d28d9,#7c3aed)}
.admin-kpi:nth-child(6){background:linear-gradient(135deg,#0ea5e9,#0d9488)}
.admin-panel-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.admin-card-panel{background:#fff;border:1px solid #dfe7ef;border-radius:14px;padding:15px;box-shadow:0 6px 18px #0f172a08}
.admin-card-panel h3{margin:0 0 10px;font-size:18px}
.line-chart{height:235px;border:1px solid #edf1f5;border-radius:10px;background:linear-gradient(#fff,#fbfdff);overflow:hidden}
.line-chart svg{width:100%;height:100%}
.donut{width:160px;height:160px;border-radius:50%;background:conic-gradient(#8b5cf6 0 32%,#3b82f6 32% 56%,#ef3b7d 56% 74%,#f59e0b 74% 86%,#22c55e 86% 96%,#94a3b8 96% 100%);margin:15px auto;position:relative}
.donut:after{content:"12.5M\A Total Views";white-space:pre;position:absolute;inset:28px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;font-weight:800;color:#0f172a}
.creator-row,.comment-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eef2f6}
.creator-row img,.comment-row img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.mini-follow{margin-left:auto;background:#633cff;color:#fff;border:0;border-radius:999px;padding:6px 10px}
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.video-card{background:#fff;border:1px solid #e4eaf0;border-radius:12px;overflow:hidden}
.video-card img{width:100%;height:130px;object-fit:cover}
.video-card .pad{padding:9px}
.audience-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.audience-box{background:#fff;border:1px solid #e1e7ee;border-radius:12px;padding:12px}
.country-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #eef2f6}
.heat{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-top:8px}
.heat span{height:14px;border-radius:3px;background:#5536b8}
.heat span:nth-child(3n){background:#8b5cf6}.heat span:nth-child(4n){background:#b47cff}
@media(max-width:1180px){.admin-kpi-row{grid-template-columns:repeat(3,1fr)}.admin-panel-grid{grid-template-columns:1fr}.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.admin-grid{display:block}.admin-sidebar{display:none}.admin-kpi-row{grid-template-columns:repeat(2,1fr)}.audience-grid{grid-template-columns:1fr}.admin-content{padding:14px}}

/* --- Responsive web + mobile layout --- */
@media (min-width: 701px){
  body{background:#070a10;}
  .shell{display:block;min-height:100vh;padding:0;}
  .phone{
    width:100%;
    min-height:100vh;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
  }
  .screen{
    min-height:100vh;
    padding:24px 36px 40px 260px;
    max-width:1600px;
    margin:0 auto;
  }
  .statusbar{display:none}
  .bottom{
    position:fixed;
    z-index:30;
    left:0;top:0;bottom:0;right:auto;
    width:220px;height:100vh;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:repeat(5,minmax(58px,auto));
    align-content:start;
    gap:8px;
    padding:92px 14px 20px;
    background:#0b1220f7;
    border-top:0;
    border-right:1px solid #222d44;
    backdrop-filter:blur(18px);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:13px;
    min-height:54px;
    padding:10px 15px;
    border-radius:14px;
    font-size:14px;
    font-weight:700;
    text-align:left;
    color:#aab6ca;
  }
  .nav:hover{background:#172238;color:#fff}
  .nav.active{background:linear-gradient(90deg,#5d39ff,#365ff5);color:#fff}
  .nav b{font-size:22px;display:inline-block;min-width:28px;text-align:center}
  .nav:nth-child(3){order:3;background:transparent;color:#fff}
  .nav:nth-child(3) .hub{width:48px;height:48px;margin:0;display:grid;flex:none}
  .nav:nth-child(3):hover{background:#172238}
  .banner{height:250px}
  .title{font-size:42px}
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .post img{max-height:560px}
  .vibe{min-height:720px}
  .vibe img{height:720px}
  .stories{gap:18px}
  .story{min-width:78px;font-size:12px}
  .avatar{width:68px;height:68px}
  .glow{position:fixed}
  .glow2{position:fixed}
}

@media (min-width: 1100px){
  .screen{padding-right:60px}
  #feed{max-width:1050px;margin:0 auto}
  .screen > .top,
  .screen > .banner,
  .screen > .chips,
  .screen > #discoverContent,
  .screen > .stories,
  .screen > .grid2,
  .screen > .grid3{max-width:1250px;margin-left:auto;margin-right:auto}
}

@media (max-width: 700px){
  .phone{width:min(430px,100%);}
  .screen{padding-bottom:92px}
}

/* --- V12 Smart Hub Modal / viewport-safe UI --- */
.modal{
  position:fixed;
  inset:0;
  padding:clamp(18px,4vh,42px) clamp(16px,4vw,48px);
  overflow-y:auto;
  overscroll-behavior:contain;
  align-items:center;
}
.modal > div{
  width:min(760px,100%);
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  padding:4px;
}
#hubModal > div{
  width:min(680px,100%);
  text-align:center;
}
#hubModal .brand{font-size:clamp(26px,3vw,34px)}
#hubModal .sub{margin:8px 0 28px;position:relative;z-index:3;line-height:1.3}
#hubModal .orb{
  width:clamp(225px,28vw,270px);
  height:clamp(225px,28vw,270px);
  margin:4px auto 0;
}
#hubModal .orb button{width:clamp(78px,8vw,92px);height:clamp(78px,8vw,92px);font-size:clamp(13px,1.5vw,17px)}
#hubModal .orb .c{font-size:30px}
#hubModal .orb .a{top:-24px}
#hubModal .orb .b{right:-28px}
#hubModal .orb .d{bottom:-24px}
#hubModal .orb .e{left:-28px}
#hubModal .grid2{max-width:560px;margin:24px auto 0!important}
#hubModal .btn{min-height:54px;border-radius:16px}
#hubModal > div > .btn.secondary{max-width:560px;margin-left:auto;margin-right:auto}

@media(max-width:700px){
  .modal{padding:14px 12px;align-items:flex-start}
  .modal > div{max-height:calc(100vh - 28px);padding:2px}
  #hubModal > div{padding-top:6px}
  #hubModal .orb{margin-top:2px}
  #hubModal .grid2{margin-top:20px!important}
}

/* --- V13 Profile menu desktop/mobile layout fix --- */
#profileMenu{
  position:fixed !important;
  z-index:1000 !important;
  top:0 !important;
  bottom:0 !important;
  left:220px !important;
  right:0 !important;
  width:auto !important;
  min-height:100vh !important;
  box-sizing:border-box !important;
  display:grid !important;
  place-items:center !important;
  padding:28px !important;
  overflow-y:auto !important;
}
#profileMenu > div{
  width:min(760px,100%) !important;
  max-width:760px !important;
  max-height:calc(100vh - 56px) !important;
  margin:0 auto !important;
  padding:8px !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
}
#profileMenu .feature{
  min-height:64px;
  margin:7px 0;
  box-sizing:border-box;
  border-radius:16px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
#profileMenu .feature:hover{transform:translateX(3px);background:#182033;border-color:#3b4b70}
#profileMenu .top{position:sticky;top:0;z-index:2;background:#070a11ee;padding:8px 0 12px;backdrop-filter:blur(10px)}
#profileMenu .btn{max-width:100%;margin-top:14px}
@media(max-width:700px){
  #profileMenu{left:0 !important;right:0 !important;padding:14px !important;place-items:start center !important}
  #profileMenu > div{width:100% !important;max-height:calc(100vh - 28px) !important}
  #profileMenu .feature{min-height:60px}
}

/* --- YB official logo + profile media --- */
.logo-brand{display:flex;align-items:center;gap:8px}
.logo-brand img{width:34px;height:34px;object-fit:contain;background:transparent;border-radius:7px;padding:0}
.app-logo{display:block;object-fit:contain;background:transparent;border-radius:22px;padding:10px}
.splash-logo{width:120px;height:120px;margin:0 auto;box-shadow:0 0 45px #694cff55}
.login-logo{width:82px;height:82px;margin:0 auto;border-radius:18px}
.profile-cover{height:190px;border-radius:22px;background-position:center;background-size:cover;position:relative;overflow:hidden;border:1px solid #2a3550}
.profile-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#080b12dd)}
.profile-avatar-wrap{position:relative;margin-top:-52px;margin-left:18px;width:106px;height:106px;z-index:2}
.profile-avatar{width:106px;height:106px;border-radius:50%;object-fit:cover;border:5px solid #0b0d12;background:#fff;box-shadow:0 8px 25px #0008}
.edit-cover-preview{height:150px;border-radius:18px;background-size:cover;background-position:center;position:relative;margin-bottom:12px;overflow:hidden;border:1px solid #2d3850}
.edit-cover-preview:after{content:"";position:absolute;inset:0;background:#0004}
.photo-edit-btn{position:absolute;right:12px;bottom:12px;z-index:2;border:1px solid #ffffff44;background:#0b0d12cc;color:#fff;border-radius:12px;padding:10px 12px;font-weight:800}
.edit-avatar-row{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.edit-avatar{width:82px;height:82px;border-radius:50%;object-fit:cover;background:#fff;border:4px solid #27324a}
@media(max-width:700px){.profile-cover{height:155px}.profile-avatar-wrap,.profile-avatar{width:92px;height:92px}.profile-avatar-wrap{margin-top:-46px}}

/* V16 final branding: white YB logo + clean HUB modal spacing */
.admin-brand{display:flex!important;align-items:center;gap:9px}
.admin-brand img{width:38px;height:38px;object-fit:contain;display:block;background:transparent}
.admin-brand span{background:linear-gradient(90deg,#fff,#5fa7ff,#9a3cff);-webkit-background-clip:text;background-clip:text;color:transparent}
#hubModal .logo-brand img{width:40px;height:40px}
#hubModal .logo-brand{justify-content:center}
#hubModal .sub{font-size:16px;color:#aeb8d0}
@media(max-width:700px){
  #hubModal .sub{margin-bottom:24px}
  #hubModal .orb{margin-top:0}
}

/* V18 final viewport safety + password controls */
.password-field{position:relative;width:100%}
.password-field .field{padding-right:54px}
.password-toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:1px solid #34405d;border-radius:11px;background:#171d2a;color:#aeb8d0;display:grid;place-items:center;font-size:16px;z-index:2}
.password-toggle.on{color:#fff;background:#30256f;border-color:#6d5dfb;box-shadow:0 0 14px #6d5dfb44}
.profile-actions{min-width:0}
.edit-profile-panel{width:min(760px,100%);max-height:calc(100vh - 56px);overflow-y:auto;overflow-x:hidden;padding:8px;box-sizing:border-box}
.edit-profile-panel .edit-avatar-row{min-width:0;flex-wrap:wrap}
.edit-profile-panel .photo-edit-btn{white-space:nowrap}
@media (min-width:701px){
  .modal{left:220px;right:0;inset-block:0;padding:28px 40px;box-sizing:border-box;align-items:center;overflow-y:auto}
  .modal>div{max-width:760px;width:min(760px,100%);margin:0 auto;box-sizing:border-box}
  #editProfile{left:220px;right:0}
  #editProfile>.edit-profile-panel{width:min(760px,100%);max-width:760px;margin:0 auto}
  .profile-actions{max-width:100%}
}
@media (max-width:700px){
  .modal{left:0;right:0;padding:14px 12px}
  .edit-profile-panel{max-height:calc(100vh - 28px);width:100%}
  .profile-actions{grid-template-columns:1fr}
}

/* V19 authentication desktop balance + legacy account password recovery */
.auth-page{width:min(820px,100%);margin:0 auto;padding:0 4px 30px}
.auth-top{margin-bottom:18px}
.auth-heading{text-align:center;margin-top:24px}
.auth-heading .title{margin-top:18px}
.auth-heading .sub{max-width:560px;margin:0 auto}
.auth-card{width:100%;max-width:760px;margin:24px auto 0;padding:22px}
.auth-card .btn{margin-top:4px}
.auth-reset-btn{margin-top:10px!important}
.auth-message{min-height:18px;margin-top:10px;color:#ff8aa0}
.auth-footer{text-align:center;margin:16px 0 0}
.dev-code{padding:10px 12px;margin:0 0 10px;border:1px solid #3a4b72;border-radius:12px;background:#101a2c;color:#bcd0ee;text-align:center}
@media(min-width:701px){
  .auth-page{padding-top:6px}
  .auth-card{max-width:760px}
}
@media(max-width:700px){
  .auth-page{width:100%;padding:0 0 20px}
  .auth-card{padding:16px;margin-top:20px}
}