/* source-verification: optimized from user-provided base-ui.css */

:root{
  --accent:#033985;
  --accent2:#0A4FB5;
  --accent3:#1E68E8;
  --accent-rgb:3,57,133;

  --bg:#F6F7FB;
  --bg2:#EEF2F8;
  --card:#fff;
  --text:#0F172A;
  --muted:#64748B;
  --line:#E8ECF3;
  --soft:#F3F5FA;
  --soft2:#F8FAFD;

  --success:#10B981;
  --danger:#EF4444;
  --warning:#F59E0B;

  --r-card:14px;
  --r-lg:18px;

  --shadow:0 14px 30px rgba(17,24,39,.08);
  --shadow2:0 8px 18px rgba(17,24,39,.06);
  --shadow3:0 18px 40px rgba(3,57,133,.12);

  --navH:78px;
  --safeT:env(safe-area-inset-top,0px);
  --safeB:env(safe-area-inset-bottom,0px);
  --fabSize:56px;
  --fabLift:10px;
  --pageBottomSpace:calc(var(--navH) + var(--safeB) + var(--fabLift) + 78px);

  --ring:0 0 0 .20rem rgba(var(--accent-rgb),.18);
  --wrapW:560px;
  --topbarBlur:blur(10px);

  color-scheme:light;
}

@media (min-width:1200px){
  :root{ --wrapW:620px; }
}

[data-theme="dark"]{
  --bg:#070C14;
  --bg2:#0B111C;
  --card:#101827;
  --text:#EAF0FB;
  --muted:#A7B3C7;
  --line:rgba(255,255,255,.09);
  --soft:#0D1523;
  --soft2:#0E1728;

  --shadow:0 16px 34px rgba(0,0,0,.34);
  --shadow2:0 8px 18px rgba(0,0,0,.24);
  --shadow3:0 16px 38px rgba(var(--accent-rgb),.18);
  --ring:0 0 0 .20rem rgba(var(--accent-rgb),.28);

  color-scheme:dark;
}

/* ===== Base ===== */
*{
  box-sizing:border-box;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

*::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}

html,
body{
  min-height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}

html,
body,
main,
.main,
.page,
.site,
.site-wrapper,
.main-wrapper,
.content,
.container{
  background:var(--bg)!important;
}

body{
  margin:0;
  font-family:"Vazirmatn",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 300px at 10% -10%,rgba(var(--accent-rgb),.045),transparent 65%),
    radial-gradient(900px 220px at 100% 0%,rgba(30,104,232,.04),transparent 60%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01" on,"cv02" on;
}

a,
button,
input,
textarea,
select{
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}

a{
  color:inherit;
}

:focus-visible{
  outline:none!important;
  box-shadow:var(--ring)!important;
  border-color:rgba(var(--accent-rgb),.42)!important;
}

.wrap{
  max-width:var(--wrapW);
  margin:0 auto;
  padding:0 14px;
}

.glass{
  background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:var(--topbarBlur);
  -webkit-backdrop-filter:var(--topbarBlur);
}

.txtEll{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== Topbar ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  padding-top:calc(var(--safeT) + 10px);
  padding-bottom:10px;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb,var(--bg) 94%,transparent),
      color-mix(in srgb,var(--bg) 76%,transparent)
    );
  backdrop-filter:var(--topbarBlur);
  -webkit-backdrop-filter:var(--topbarBlur);
  border-bottom:1px solid color-mix(in srgb,var(--line) 64%,transparent);
}

[data-theme="dark"] .topbar{
  background:
    linear-gradient(
      to bottom,
      rgba(7,12,20,.92),
      rgba(7,12,20,.74)
    );
}

.topCard{
  border:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  padding:8px 0 0;
}

.toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brandArea{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}

.brandDot{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  position:relative;
  text-decoration:none;
  background:transparent;
  border:0;
  box-shadow:none;
}

.brandLogo{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
  display:block;
  position:relative;
  z-index:1;
}

.brandFallback{
  font-weight:950;
  font-size:16px;
  color:var(--accent);
}

.brandTxt{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brandTxt .small{
  font-size:10px;
  font-weight:900;
  color:var(--muted);
  line-height:1.1;
  letter-spacing:.1px;
}

.brandTxt .big{
  font-size:13px;
  font-weight:950;
  color:var(--text);
  line-height:1.25;
  max-width:280px;
}

.guestCta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  margin-top:2px;
  padding:6px 9px;
  border-radius:10px;
  border:1px solid rgba(var(--accent-rgb),.16);
  background:rgba(var(--accent-rgb),.06);
  color:var(--accent);
  font-weight:900;
  font-size:10.5px;
  cursor:pointer;
  user-select:none;
}

.guestCta i{
  font-size:13px;
}

.userMeta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}

.metaChip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--soft);
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.metaChip i{
  font-size:11px;
  color:var(--accent);
}

/* Top buttons: icons sit on base, no boxed icon cards */
.topBtns{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.iconBtn{
  width:38px;
  height:38px;
  border:0;
  border-radius:12px;
  display:grid;
  place-items:center;
  position:relative;
  background:transparent;
  color:var(--text);
  box-shadow:none;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  transition:background .16s ease,color .16s ease,transform .12s ease;
}

.iconBtn i{
  font-size:20px;
  line-height:1;
}

.iconBtn:hover{
  background:rgba(var(--accent-rgb),.06);
  color:var(--accent);
}

.iconBtn:active{
  transform:scale(.95);
}

.dotBadge{
  position:absolute;
  top:7px;
  left:8px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--danger);
  box-shadow:0 0 0 2px var(--bg);
}

/* ===== Main ===== */
.app{
  position:relative;
  min-height:calc(100vh - 120px);
  padding-top:8px;
}

.app > .wrap{
  padding-bottom:0!important;
}

.bottomNavSpacer{
  height:var(--pageBottomSpace);
  min-height:var(--pageBottomSpace);
  flex:0 0 auto;
  pointer-events:none;
}

/* ===== Bottom Nav ===== */
.bottomNav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:120;
  height:calc(var(--navH) + var(--safeB));
  padding-bottom:var(--safeB);
  background:transparent;
  border-top:0;
  box-shadow:none;
  pointer-events:none;
}

.navInner{
  height:var(--navH);
  max-width:var(--wrapW);
  margin:0 auto;
  padding:8px 14px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:1;
  pointer-events:auto;
  overflow:hidden;

  background:color-mix(in srgb,var(--card) 62%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  border-radius:24px 24px 0 0;
  box-shadow:0 -10px 28px rgba(17,24,39,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

[data-theme="dark"] .navInner{
  background:rgba(16,24,39,.72);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 -12px 30px rgba(0,0,0,.28);
}

.navItem{
  width:74px;
  min-height:56px;
  padding:6px 4px;
  border:0!important;
  border-radius:16px;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:10px;
  font-weight:900;
  text-decoration:none;
  user-select:none;
  transition:color .16s ease,transform .12s ease,background .16s ease;
}

.navItem i{
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  display:block;
  background:transparent;
  box-shadow:none;
  color:inherit;
  font-size:21px;
  line-height:1;
  transition:color .16s ease,transform .16s ease,text-shadow .16s ease;
}

.navItem span{
  line-height:1.1;
  font-size:10px;
  letter-spacing:-.1px;
}

.navItem:hover{
  color:var(--text);
  background:rgba(var(--accent-rgb),.045)!important;
}

.navItem:active{
  transform:scale(.96);
}

.navItem.active{
  color:var(--accent);
  background:rgba(var(--accent-rgb),.06)!important;
}

.navItem.active i{
  color:var(--accent);
  transform:translateY(-1px) scale(1.14);
  text-shadow:0 8px 18px rgba(var(--accent-rgb),.22);
}

.fab{
  width:56px;
  height:56px;
  border-radius:18px;
  border:0!important;
  background:linear-gradient(180deg,var(--accent3),var(--accent));
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 10px 22px rgba(var(--accent-rgb),.22);
  position:absolute;
  right:50%;
  transform:translateX(50%) translateY(-10px);
  cursor:pointer;
  text-decoration:none;
  transition:transform .14s ease,box-shadow .18s ease,filter .18s ease;
}

.fab i{
  font-size:22px;
}

.fab:hover{
  filter:brightness(1.03);
  box-shadow:0 14px 28px rgba(var(--accent-rgb),.28);
}

.fab:active{
  transform:translateX(50%) translateY(-10px) scale(.96);
}

/* ===== Bootstrap tuning ===== */
.modal-content{
  border-radius:18px;
  border:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--card) 92%,transparent),
      color-mix(in srgb,var(--soft2) 76%,transparent)
    );
  color:var(--text);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.modal-backdrop.show{
  opacity:.28;
}

.offcanvas{
  background:
    radial-gradient(120% 55% at 100% 0%,rgba(var(--accent-rgb),.045),transparent 38%),
    linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 92%,var(--soft)));
  color:var(--text);
  border-left:1px solid color-mix(in srgb,var(--line) 72%,transparent);
}

[data-theme="dark"] .offcanvas{
  background:
    radial-gradient(120% 55% at 100% 0%,rgba(var(--accent-rgb),.08),transparent 36%),
    linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 94%,var(--soft)));
}

.offcanvas.offcanvas-bottom{
  min-height:220px;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  border-left:0;
  border-right:0;
  border-bottom:0;
  box-shadow:0 -14px 28px rgba(17,24,39,.12);
}

/* ===== Search ===== */
.searchBox{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--soft);
  cursor:text;
  transition:box-shadow .15s ease,border-color .15s ease,background .15s ease;
}

.searchBox:focus-within{
  border-color:rgba(var(--accent-rgb),.32);
  box-shadow:var(--ring);
  background:color-mix(in srgb,var(--soft) 88%,rgba(var(--accent-rgb),.05));
}

.searchBox i{
  font-size:18px;
  color:var(--muted);
  line-height:1;
}

.searchBox input{
  width:100%;
  min-width:0;
  border:0;
  outline:none;
  background:transparent;
  color:var(--text);
  font-weight:900;
  font-size:13px;
  padding:0;
  caret-color:var(--accent);
}

.searchBox input::placeholder{
  color:color-mix(in srgb,var(--muted) 88%,transparent);
  font-weight:850;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}

.btnPill{
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  font-size:12px;
  border:1px solid var(--line);
}

.btnAccent{
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  color:#fff;
  border-color:rgba(var(--accent-rgb),.18);
  box-shadow:0 12px 18px rgba(var(--accent-rgb),.16);
}

.btnSoft{
  background:var(--soft);
  color:var(--text);
}

/* ===== Menu ===== */
.menuHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.menuBrand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.menuDot{
  width:40px;
  height:40px;
  border-radius:12px;
  overflow:hidden;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:transparent;
  border:0;
  box-shadow:none;
}

.menuDot img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
  display:block;
}

.menuTitle{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  min-width:0;
}

.menuTitle strong{
  font-size:12px;
  font-weight:950;
}

.menuTitle span{
  font-size:10px;
  font-weight:850;
  color:var(--muted);
}

.menuUserCard{
  margin:10px 0 12px;
  padding:10px;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--line) 68%,transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--card) 56%,transparent),
      color-mix(in srgb,var(--soft) 44%,transparent)
    );
  box-shadow:none;
}

.menuUserRow{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  border-radius:12px;
  color:inherit;
  text-decoration:none;
  transition:background .14s ease;
}

.menuUserRow:hover{
  background:color-mix(in srgb,var(--card) 68%,transparent);
}

.menuAvatar{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--accent);
  flex:0 0 auto;
  font-size:20px;
  background:transparent;
  border:0;
  box-shadow:none;
}

.menuUserInfo{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.menuUserInfo .name{
  font-size:12px;
  font-weight:950;
  color:var(--text);
}

.menuUserInfo .sub{
  font-size:10px;
  font-weight:850;
  color:var(--muted);
  line-height:1.35;
}

.menuUserChips{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.menuUserChip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  background:color-mix(in srgb,var(--card) 58%,transparent);
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
}

.menuUserChip i{
  color:var(--accent);
  font-size:11px;
}

.guestActionBox{
  margin:10px 0 12px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(var(--accent-rgb),.12);
  background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.045),rgba(var(--accent-rgb),.02)),
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--card) 56%,transparent),
      color-mix(in srgb,var(--soft) 44%,transparent)
    );
  box-shadow:none;
}

.guestActionText{
  margin-bottom:8px;
  font-size:11px;
  font-weight:850;
  color:var(--muted);
  line-height:1.7;
}

.guestActionBtns{
  display:flex;
  gap:8px;
}

.guestActionBtns a{
  flex:1;
  text-align:center;
  text-decoration:none;
  border-radius:12px;
  padding:10px 8px;
  font-size:11px;
  font-weight:950;
  border:1px solid color-mix(in srgb,var(--line) 76%,transparent);
  background:color-mix(in srgb,var(--card) 76%,transparent);
  color:var(--text);
}

.guestActionBtns a.primary{
  border-color:rgba(var(--accent-rgb),.16);
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  color:#fff;
  box-shadow:var(--shadow3);
}

.menuGroup{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.menuItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 4px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 58%,transparent);
  border-radius:0;
  background:transparent;
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  user-select:none;
  box-shadow:none;
  transition:background .16s ease,color .16s ease,opacity .16s ease;
}

.menuItem:first-child{
  border-top:1px solid color-mix(in srgb,var(--line) 50%,transparent);
}

.menuItem:hover{
  background:color-mix(in srgb,var(--card) 40%,transparent);
  box-shadow:none;
}

.menuItem:active{
  transform:none;
}

/* Menu icons: colorful but without separate square boxes */
.menuItem .d-flex > i:first-child{
  width:22px;
  min-width:22px;
  height:auto;
  border:0;
  border-radius:0;
  display:inline-grid;
  place-items:center;
  background:transparent;
  color:var(--miColor,var(--accent));
  font-size:18px;
  line-height:1;
}

.menuItem .bi-house{ --miColor:#2563EB; }
.menuItem .bi-grid{ --miColor:#7C3AED; }
.menuItem .bi-receipt,
.menuItem .bi-clipboard-check{ --miColor:#F97316; }
.menuItem .bi-plus-circle{ --miColor:#22C55E; }
.menuItem .bi-person,
.menuItem .bi-person-badge,
.menuItem .bi-person-check,
.menuItem .bi-tools{ --miColor:#10B981; }
.menuItem .bi-geo{ --miColor:#0EA5E9; }
.menuItem .bi-chat-dots{ --miColor:#06B6D4; }
.menuItem .bi-bell{ --miColor:#EF4444; }
.menuItem .bi-journal-text{ --miColor:#8B5CF6; }
.menuItem .bi-trophy{ --miColor:#F59E0B; }
.menuItem .bi-credit-card{ --miColor:#14B8A6; }
.menuItem .bi-info-circle{ --miColor:#3B82F6; }
.menuItem .bi-file-earmark-text{ --miColor:#64748B; }
.menuItem .bi-box-arrow-in-left{ --miColor:#2563EB; }
.menuItem .bi-box-arrow-right{ --miColor:#EF4444; }

/* ===== Toasts ===== */
.toastWrap{
  position:fixed;
  top:calc(var(--safeT) + 10px);
  left:0;
  right:0;
  z-index:99999;
  pointer-events:none;
}

.toastStack{
  max-width:var(--wrapW);
  margin:0 auto;
  padding:0 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.appToast{
  pointer-events:auto;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.toastBodyRow{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
}

.tIco{
  width:30px;
  height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  margin-top:1px;
  border:1px solid rgba(var(--accent-rgb),.18);
  background:rgba(var(--accent-rgb),.10);
  color:var(--accent);
}

.tTxt{
  min-width:0;
  flex:1;
  font-size:11.5px;
  font-weight:900;
  line-height:1.65;
}

.tClose{
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  cursor:pointer;
}

.tClose:hover{
  background:rgba(var(--accent-rgb),.06);
}

.tBar{ height:3px; background:rgba(var(--accent-rgb),.18); }
.tBar.success{ background:rgba(16,185,129,.35); }
.tBar.error{ background:rgba(239,68,68,.35); }
.tBar.warning{ background:rgba(245,158,11,.35); }
.tBar.info{ background:rgba(59,130,246,.35); }

/* ===== Auth Bottom Sheet ===== */
.authOverlay{
  position:fixed;
  inset:0;
  z-index:99990;
  background:rgba(2,6,23,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.authOverlay.show{
  opacity:1;
  pointer-events:auto;
}

.authSheet{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:99991;
  transform:translateY(110%);
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
  padding:0 12px calc(var(--safeB) + 12px);
}

.authSheet.show{
  transform:translateY(0);
}

.authPanel{
  max-width:var(--wrapW);
  margin:0 auto;
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(var(--accent-rgb),.06),transparent 45%),
    var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 22px 46px rgba(2,6,23,.24);
  overflow:hidden;
}

.authHandle{
  width:46px;
  height:5px;
  border-radius:999px;
  background:rgba(0,0,0,.12);
  margin:8px auto 2px;
}

[data-theme="dark"] .authHandle{
  background:rgba(255,255,255,.15);
}

.authHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--card) 90%,var(--soft)),
      color-mix(in srgb,var(--card) 96%,transparent)
    );
}

.authHeadTitle{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  gap:2px;
}

.authHeadTitle strong{
  font-weight:950;
  font-size:12px;
  color:var(--text);
}

.authHeadTitle span{
  font-size:10px;
  font-weight:850;
  color:var(--muted);
}

.authBody{
  padding:12px;
  max-height:min(76vh,720px);
  overflow:auto;
}

.authLoading{
  padding:24px 12px;
  text-align:center;
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}

.authLoading .spinner{
  width:28px;
  height:28px;
  border-radius:999px;
  border:2px solid color-mix(in srgb,var(--line) 65%,transparent);
  border-top-color:var(--accent);
  margin:0 auto 10px;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* ===== Auth injected content ===== */
.authBody form.authForm{
  display:block;
}

.authBody .authTitle,
.authBody h1,
.authBody h2,
.authBody h3{
  font-weight:950!important;
  color:var(--text)!important;
  letter-spacing:-.1px;
}

.authBody .authSub,
.authBody p{
  color:var(--muted);
  font-weight:850;
  line-height:1.7;
  font-size:11.5px;
}

.authBody label{
  display:block;
  margin:10px 0 6px;
  font-weight:900;
  font-size:11px;
  color:var(--muted);
}

.authBody input:not([type="radio"]):not([type="checkbox"]),
.authBody select,
.authBody textarea{
  width:100%;
  border:1px solid var(--line);
  background:var(--soft);
  border-radius:14px;
  padding:12px;
  font-weight:900;
  font-size:13px;
  color:var(--text);
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.authBody input::placeholder,
.authBody textarea::placeholder{
  color:color-mix(in srgb,var(--muted) 85%,transparent);
  font-weight:800;
}

.authBody input:focus,
.authBody select:focus,
.authBody textarea:focus{
  border-color:rgba(var(--accent-rgb),.32);
  box-shadow:var(--ring);
  background:color-mix(in srgb,var(--soft) 88%,rgba(var(--accent-rgb),.05));
}

.authBody .btn,
.authBody button[type="submit"],
.authBody input[type="submit"]{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(var(--accent-rgb),.14);
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  color:#fff;
  font-weight:950;
  font-size:13px;
  padding:11px 12px;
  box-shadow:0 10px 18px rgba(var(--accent-rgb),.14);
  transition:transform .12s ease,box-shadow .16s ease,filter .16s ease;
}

.authBody .btn:hover,
.authBody button[type="submit"]:hover,
.authBody input[type="submit"]:hover{
  filter:brightness(1.02);
  box-shadow:0 14px 20px rgba(var(--accent-rgb),.16);
}

.authBody .btn:active,
.authBody button[type="submit"]:active,
.authBody input[type="submit"]:active{
  transform:scale(.995);
}

.authBody .btn-outline,
.authBody .btn-light,
.authBody .btn-secondary,
.authBody .btn-soft{
  background:var(--soft)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
}

.authBody .helptext,
.authBody small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:800;
  line-height:1.6;
}

.authBody .errorlist,
.authBody .errors{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.authBody .errorlist li,
.authBody .errors li{
  border-radius:12px;
  padding:8px 10px;
  font-size:11px;
  font-weight:900;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.18);
  color:rgba(239,68,68,.95);
}

.authBody .invite-code,
.authBody .referral-code,
.authBody [data-field="invite_code"],
.authBody [data-field="referral_code"],
.authBody input[name="invite_code"],
.authBody input[name="referral_code"]{
  display:none!important;
}

.authBody input[name="invite_code"] + *,
.authBody input[name="referral_code"] + *{
  display:none!important;
}

.authMsg{
  margin-top:10px;
  border-radius:14px;
  padding:10px;
  font-weight:900;
  font-size:11.5px;
  border:1px solid var(--line);
  background:var(--soft);
  color:var(--text);
  line-height:1.6;
}

.authMsg.success{
  background:rgba(16,185,129,.10);
  border-color:rgba(16,185,129,.18);
  color:rgba(16,185,129,.95);
}

.authMsg.error{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.18);
  color:rgba(239,68,68,.95);
}

.authMsg.warning{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.22);
  color:rgba(245,158,11,.95);
}

.authMsg.info{
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.18);
  color:rgba(59,130,246,.95);
}

/* ===== Auth Role Choice ===== */
.authBody .choiceGroupCard{
  margin:10px 0 12px;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--soft2),var(--soft));
  box-shadow:var(--shadow2);
}

.authBody .choiceGroupTitle{
  margin-bottom:8px;
  font-size:11px;
  font-weight:950;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}

.authBody .choiceGroupTitle i{
  color:var(--accent);
  font-size:13px;
}

.authBody .choiceGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.authBody .choiceOption{
  position:relative;
  display:flex!important;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0!important;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  font-weight:900;
  font-size:12px;
  line-height:1.4;
  cursor:pointer;
  user-select:none;
  transition:border-color .16s ease,box-shadow .16s ease,transform .12s ease;
  box-shadow:0 4px 12px rgba(17,24,39,.03);
}

.authBody .choiceOption:hover{
  border-color:color-mix(in srgb,var(--line) 70%,rgba(var(--accent-rgb),.20));
  box-shadow:var(--shadow2);
}

.authBody .choiceOption:active{
  transform:scale(.995);
}

.authBody .choiceOption .choiceIcon{
  width:26px;
  height:26px;
  border-radius:9px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:var(--accent);
  flex:0 0 auto;
  font-size:16px;
}

.authBody .choiceOption .choiceText{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1;
}

.authBody .choiceOption .choiceMain{
  font-size:12px;
  font-weight:950;
  color:var(--text);
}

.authBody .choiceOption .choiceHint{
  font-size:10px;
  font-weight:850;
  color:var(--muted);
  line-height:1.35;
}

.authBody .choiceOption .choiceCheck{
  width:20px;
  height:20px;
  border-radius:999px;
  border:2px solid color-mix(in srgb,var(--line) 80%,var(--muted));
  background:transparent;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}

.authBody .choiceOption .choiceCheck::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#fff;
  transform:scale(0);
  transition:transform .14s ease;
}

.authBody .choiceOption input[type="radio"]{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
  margin:0!important;
}

.authBody .choiceOption.is-checked{
  border-color:rgba(var(--accent-rgb),.28);
  background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.07),rgba(var(--accent-rgb),.03)),
    var(--card);
  box-shadow:0 10px 18px rgba(var(--accent-rgb),.10);
}

.authBody .choiceOption.is-checked .choiceCheck{
  border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow:0 0 0 .18rem rgba(var(--accent-rgb),.12);
}

.authBody .choiceOption.is-checked .choiceCheck::after{
  transform:scale(1);
}

.authBody label.authRadioFallback{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:12px;
  padding:10px 12px;
  margin:6px 0!important;
  cursor:pointer;
  font-weight:900;
  color:var(--text);
}

.authBody label.authRadioFallback input[type="radio"]{
  accent-color:var(--accent);
  margin:0;
  width:16px;
  height:16px;
  flex:0 0 auto;
}

/* ===== Auth secondary actions ===== */
.authBody .authInlineActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:8px;
}

.authBody .editPhoneBtn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto!important;
  min-height:38px;
  padding:8px 12px!important;
  border-radius:12px!important;
  border:1px solid rgba(var(--accent-rgb),.16)!important;
  background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.07),rgba(var(--accent-rgb),.03)),
    var(--card)!important;
  color:var(--accent)!important;
  font-size:11.5px!important;
  font-weight:900!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:0 6px 14px rgba(var(--accent-rgb),.08);
  transition:transform .12s ease,box-shadow .16s ease,border-color .16s ease;
}

.authBody .editPhoneBtn:hover{
  border-color:rgba(var(--accent-rgb),.28)!important;
  box-shadow:0 10px 16px rgba(var(--accent-rgb),.10);
}

.authBody .editPhoneBtn:active{
  transform:scale(.985);
}

.authBody .editPhoneBtn i{
  font-size:13px;
  line-height:1;
}

.authBody .miniActionBtn{
  display:inline-flex!important;
  align-items:center;
  gap:6px;
  width:auto!important;
  min-height:38px;
  padding:8px 10px!important;
  border-radius:10px!important;
  border:1px solid var(--line)!important;
  background:var(--soft)!important;
  color:var(--text)!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:none!important;
}

.authBody a,
.authBody .btn-link,
.authBody button.btn-link{
  color:var(--accent);
  text-decoration:none;
}

/* OTP */
.authBody input[name*="code"],
.authBody input[id*="code"],
.authBody input[name*="otp"],
.authBody input[id*="otp"]{
  text-align:center;
  letter-spacing:.16em;
  font-size:16px;
  font-weight:950;
  direction:ltr;
}

/* ===== Responsive ===== */
@media (min-width:992px){
  .app > .wrap,
  .topbar .wrap{
    padding-left:16px;
    padding-right:16px;
  }

  .toprow{
    gap:14px;
  }

  .brandTxt .big{
    max-width:350px;
    font-size:13.5px;
  }

  .offcanvas.offcanvas-start{
    width:min(420px,92vw);
  }

  .bottomNav{
    left:0;
    right:0;
    width:100%;
    margin-inline:0;
  }
}

@media (max-width:768px){
  .topbar{
    padding-bottom:8px;
  }

  .topCard{
    padding-top:6px;
  }

  .menuItem{
    padding-top:13px;
    padding-bottom:13px;
  }
}

@media (max-width:420px){
  .brandTxt .big{
    max-width:190px;
  }

  .iconBtn{
    width:36px;
    height:36px;
    border-radius:11px;
  }

  .topBtns{
    gap:4px;
  }

  .navItem{
    width:70px;
  }

  .navItem i{
    font-size:20px;
  }

  .authBody .choiceGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width:360px){
  .brandTxt .big{
    max-width:160px;
    font-size:12px;
  }

  .metaChip{
    font-size:9.5px;
    padding:4px 7px;
  }

  .navItem{
    width:64px;
  }

  .fab{
    width:52px;
    height:52px;
  }
}

@media (prefers-reduced-motion:reduce){
  *{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}