/* =========================================================
   NEXA — PREMIUM MOBILE APP
   Original mobile-first UI
   ========================================================= */

/* ---------- Root / Base ---------- */
:root {
  --bg: #0b0b0b;
  --bg-2: #111111;
  --card: #171717;
  --card-2: #1b1b1b;
  --border: #2a2a2a;
  --primary: #ffd54f;
  --secondary: #00c896;
  --danger: #ff5a5f;
  --text: #ffffff;
  --muted: #9e9e9e;
  --muted-2: #6f6f6f;
  --shadow: 0 18px 55px rgba(0, 0, 0, .38);
  --soft-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 213, 79, .09), transparent 28rem),
    radial-gradient(circle at 100% 35%, rgba(0, 200, 150, .055), transparent 22rem),
    var(--bg);
  color: var(--text);
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(255, 213, 79, .22); color: white; }

/* ---------- App Shell / Responsive ---------- */
.app-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
  background: linear-gradient(180deg, rgba(17,17,17,.45), rgba(11,11,11,.9));
}
.page-content { padding: 86px 16px 0; }
.section { padding: 28px 0 0; scroll-margin-top: 86px; }
.page-bottom-space { height: 112px; }

@media (min-width: 431px) {
  body { background-color: #070707; }
  .app-shell {
    box-shadow: 0 0 80px rgba(0,0,0,.65);
    min-height: 100vh;
  }
}

/* ---------- Glass ---------- */
.glass {
  background: rgba(23, 23, 23, .74);
  border: 1px solid rgba(255, 255, 255, .075);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---------- Header ---------- */
.app-header {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 430px);
  height: 70px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  padding: 0 12px;
  border-radius: 0 0 20px 20px;
  border-top: 0;
}
.header-title {
  text-align: center;
  font-size: 14px;
  letter-spacing: .28em;
  font-weight: 700;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.06); transform: translateY(-1px); }
.brand-mark { display: block; width: 38px; height: 38px; }

/* ---------- Drawer ---------- */
.drawer-overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: rgba(0,0,0,.58);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.drawer {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  width: min(88vw, 360px);
  height: 100dvh;
  padding: 22px 18px;
  background: rgba(20,20,20,.96);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 70px rgba(0,0,0,.5);
  transform: translateX(105%);
  transition: transform .42s var(--ease);
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-overlay.open { opacity: 1; visibility: visible; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom: 20px; }
.drawer h2 { margin: 2px 0 0; font-size: 28px; }
.drawer-nav { display: grid; gap: 7px; }
.drawer-nav a {
  display:flex; align-items:center; gap: 14px; padding: 14px 15px;
  border-radius: 15px; color: #ddd; transition: .25s ease;
}
.drawer-nav a:hover, .drawer-nav a.active { background: rgba(255,213,79,.09); color: white; }
.drawer-nav i { width: 20px; color: var(--primary); }
.drawer-actions { display:grid; gap:10px; margin-top:auto; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h2 { font-size: 22px; line-height: 1.25; margin: 5px 0 0; }
h3 { margin-bottom: 0; }
.text-muted { color: var(--muted); font-size: 11px; }
.lead { color: var(--muted); line-height: 1.8; font-size: 13px; margin: 12px 0 0; }

/* ---------- Hero ---------- */
.hero-section { padding-top: 4px; }
.slider {
  position: relative;
  height: 375px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(145deg, #1b1b1b, #101010);
  box-shadow: var(--shadow);
}
.slide {
  position: absolute;
  inset: 0;
  padding: 30px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .65s ease, transform .8s var(--ease);
  overflow: hidden;
}
.slide.active { opacity: 1; transform: scale(1); }
.slide::before {
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 15%, rgba(11,11,11,.1) 35%, rgba(11,11,11,.95) 100%),
    radial-gradient(circle at 85% 15%, rgba(255,213,79,.22), transparent 9rem);
}
.slide:nth-child(2)::before { background: linear-gradient(180deg, transparent 15%, rgba(11,11,11,.1) 35%, rgba(11,11,11,.96) 100%), radial-gradient(circle at 15% 15%, rgba(0,200,150,.2), transparent 10rem); }
.slide:nth-child(3)::before { background: linear-gradient(180deg, transparent 15%, rgba(11,11,11,.1) 35%, rgba(11,11,11,.96) 100%), radial-gradient(circle at 80% 25%, rgba(255,90,95,.18), transparent 10rem); }
.slide > * { position: relative; z-index: 1; }
.slide-glow {
  position:absolute; width: 170px; height:170px; border-radius:50%;
  right:-35px; top:-35px; filter: blur(4px);
  background: radial-gradient(circle, rgba(255,213,79,.18), transparent 65%);
}
.slide:nth-child(2) .slide-glow { background: radial-gradient(circle, rgba(0,200,150,.17), transparent 65%); }
.slide:nth-child(3) .slide-glow { background: radial-gradient(circle, rgba(255,90,95,.15), transparent 65%); }
.badge {
  width: max-content; display:flex; align-items:center; gap:7px;
  padding: 7px 10px; margin-bottom: 13px;
  border-radius: 99px; background: rgba(255,213,79,.1);
  border: 1px solid rgba(255,213,79,.17); color: var(--primary);
  font-size: 10px; font-weight:600;
}
.badge-green { color: var(--secondary); background: rgba(0,200,150,.1); border-color: rgba(0,200,150,.17); }
.badge-red { color: var(--danger); background: rgba(255,90,95,.1); border-color: rgba(255,90,95,.17); }
.slide h1 { font-size: 30px; line-height: 1.12; margin-bottom: 11px; letter-spacing: -.035em; }
.slide h1 span { color: var(--primary); }
.slide:nth-child(2) h1 span { color: var(--secondary); }
.slide:nth-child(3) h1 span { color: var(--danger); }
.slide p { color: #aaa; font-size: 12px; line-height: 1.65; margin-bottom: 17px; max-width: 310px; }
.slider-footer { padding: 12px 4px 0; }
.progress-track { height: 2px; background: #272727; border-radius: 5px; overflow:hidden; }
.progress-track span { display:block; width:0; height:100%; background:var(--primary); transition: width .1s linear; }
.dots { display:flex; justify-content:center; gap:6px; padding-top:10px; }
.dot { width:5px; height:5px; border:0; padding:0; border-radius:99px; background:#444; transition:.3s ease; cursor:pointer; }
.dot.active { width:20px; background:var(--primary); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  width: 100%;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 15px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size: 12px; font-weight:600;
  cursor:pointer;
  transition: transform .3s var(--ease), filter .3s ease, border-color .3s ease, opacity .3s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary {
  color:#0b0b0b;
  background: linear-gradient(135deg, #ffe78a 0%, var(--primary) 45%, #e8bd31 100%);
  box-shadow: 0 12px 30px rgba(255,213,79,.12);
}
.btn-secondary { background: rgba(255,255,255,.055); border-color: var(--border); color:white; }
.btn-ghost { background: transparent; border-color: var(--border); color:#ddd; }
.btn-danger { background: rgba(255,90,95,.11); color:#ff7b7f; border-color:rgba(255,90,95,.2); }
.btn-loader { display:none; }
.btn.loading .btn-text { display:none; }
.btn.loading .btn-loader { display:inline-flex; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.ripple {
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.38); animation:ripple .55s ease-out;
  pointer-events:none;
}
@keyframes ripple { to { transform:scale(4); opacity:0; } }
.text-button { border:0; background:none; color:var(--primary); font-size:11px; cursor:pointer; padding:6px; }

/* ---------- Section / Dashboard ---------- */
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:15px; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat-card { position:relative; min-height:132px; padding:15px; border-radius:20px; overflow:hidden; }
.stat-icon {
  width:34px; height:34px; display:grid; place-items:center; border-radius:11px;
  background:rgba(255,213,79,.1); color:var(--primary); margin-bottom:14px;
}
.stat-icon.green { color:var(--secondary); background:rgba(0,200,150,.1); }
.stat-card small { display:block; color:var(--muted); font-size:10px; }
.stat-card strong { display:block; font-size:25px; line-height:1.2; margin-top:3px; }
.stat-change { display:block; color:#777; font-size:9px; margin-top:3px; }
.quick-menu { margin-top:10px; border-radius:20px; padding:16px; }
.quick-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.quick-head h3 { font-size:13px; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.quick-item { background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px; padding:5px; }
.quick-item span { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:#202020; color:var(--primary); transition:.3s var(--ease); }
.quick-item:hover span { transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.3); }
.quick-item small { color:#aaa; font-size:9px; }

/* ---------- Promo ---------- */
.promo-scroll {
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding:2px 2px 12px;
}
.promo-scroll::-webkit-scrollbar { display:none; }
.promo-card {
  position:relative; flex:0 0 84%; min-height:195px; padding:18px;
  border-radius:20px; overflow:hidden; scroll-snap-align:start;
  border:1px solid rgba(255,255,255,.07); box-shadow:var(--soft-shadow);
}
.promo-card::after { content:""; position:absolute; width:170px; height:170px; border-radius:50%; right:-75px; top:-65px; background:rgba(255,255,255,.07); }
.promo-one { background:linear-gradient(145deg,#2a2412,#171717 65%); }
.promo-two { background:linear-gradient(145deg,#10241f,#171717 65%); }
.promo-three { background:linear-gradient(145deg,#281619,#171717 65%); }
.promo-label { display:inline-block; font-size:8px; font-weight:700; letter-spacing:.14em; color:var(--primary); padding:5px 7px; border-radius:8px; background:rgba(255,213,79,.09); }
.promo-two .promo-label { color:var(--secondary); background:rgba(0,200,150,.09); }
.promo-three .promo-label { color:var(--danger); background:rgba(255,90,95,.09); }
.promo-card h3 { font-size:22px; line-height:1.15; margin:16px 0 7px; position:relative; z-index:1; }
.promo-card p { color:#999; font-size:10px; margin-bottom:18px; }
.promo-link { border:0; background:none; color:white; font-size:10px; font-weight:600; padding:0; cursor:pointer; position:relative; z-index:1; }

/* ---------- Activity ---------- */
.activity-list { border-radius:20px; overflow:hidden; }
.activity-item { display:flex; align-items:center; gap:12px; min-height:67px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.05); }
.activity-item:last-child { border-bottom:0; }
.activity-icon, .notification-icon {
  flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  color:var(--primary); background:rgba(255,213,79,.09);
}
.activity-icon.green, .notification-icon.green { color:var(--secondary); background:rgba(0,200,150,.09); }
.activity-item div { min-width:0; flex:1; }
.activity-item strong, .notification-item strong { display:block; font-size:11px; font-weight:600; }
.activity-item small, .notification-item small { display:block; color:#777; font-size:9px; margin-top:2px; }
.activity-arrow { color:#555; font-size:10px; }

/* ---------- Services ---------- */
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.service-card { border-radius:19px; padding:15px; text-align:left; cursor:pointer; transition:.3s var(--ease); }
.service-card:hover { transform:translateY(-3px); border-color:#3b3b3b; }
.service-card span { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:#222; color:var(--primary); margin-bottom:12px; }
.service-card strong { display:block; font-size:12px; }
.service-card small { display:block; color:#777; font-size:9px; margin-top:3px; }

/* ---------- FAQ / Contact ---------- */
.faq-list { display:grid; gap:8px; margin-top:14px; }
details { border-radius:16px; padding:0 15px; }
summary { list-style:none; cursor:pointer; padding:15px 0; font-size:11px; font-weight:600; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; float:right; color:var(--primary); font-size:16px; line-height:1; }
details[open] summary::after { content:"−"; }
details p { color:#888; font-size:10px; line-height:1.7; margin:0 0 15px; }
.contact-card { padding:20px; border-radius:22px; }
.contact-card h2 { font-size:24px; }
.contact-card p { color:#888; font-size:11px; line-height:1.7; margin:9px 0 16px; }

/* ---------- Settings ---------- */
.settings-card { border-radius:20px; overflow:hidden; margin-top:14px; }
.setting-row { min-height:62px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; }
.setting-row:last-child { border-bottom:0; }
.setting-row > span:first-child { display:flex; align-items:center; gap:12px; font-size:11px; }
.setting-row > span:first-child i { color:var(--primary); width:18px; text-align:center; }
.setting-row input[type="checkbox"] { display:none; }
.switch { width:42px; height:24px; border-radius:99px; background:#333; padding:3px; transition:.3s; position:relative; }
.switch::after { content:""; display:block; width:18px; height:18px; background:#888; border-radius:50%; transition:.3s var(--ease); }
.setting-row input:checked + .switch { background:rgba(0,200,150,.25); }
.setting-row input:checked + .switch::after { transform:translateX(18px); background:var(--secondary); }
.setting-row select { background:transparent; color:#bbb; border:0; font-size:10px; outline:0; }

/* ---------- Profile ---------- */
.profile-card { border-radius:22px; padding:18px; }
.profile-top { display:flex; align-items:center; gap:13px; }
.profile-top h2 { font-size:19px; }
.profile-top p { color:#777; font-size:10px; margin:3px 0 0; }
.avatar { border:0; background:linear-gradient(135deg,#292929,#171717); color:var(--primary); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.avatar-sm { width:42px; height:42px; border-radius:14px; cursor:pointer; }
.avatar-lg { flex:0 0 64px; width:64px; height:64px; border-radius:20px; display:grid; place-items:center; font-size:20px; }
.profile-info { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:18px 0; }
.profile-info > div { padding:11px; border-radius:14px; background:#131313; }
.profile-info small { display:block; color:#666; font-size:8px; }
.profile-info strong { display:block; font-size:10px; margin-top:4px; }
.status-text { color:var(--secondary); }
.status-text i { font-size:6px; }
.profile-actions { display:grid; gap:8px; }

/* ---------- Register Form ---------- */
.form-card { border-radius:24px; padding:20px 16px; }
.form-heading { margin-bottom:20px; }
.form-heading h2 { font-size:27px; letter-spacing:-.03em; }
.form-heading p { color:#777; font-size:10px; margin:7px 0 0; }
.form-grid { display:grid; grid-template-columns:1fr; gap:11px; }
.field { position:relative; min-height:55px; }
.field-icon { position:absolute; z-index:2; left:16px; top:19px; color:#777; font-size:12px; transition:.25s; }
.field input, .field textarea, .field select {
  width:100%; height:55px; padding:19px 42px 7px;
  color:white; background:#111; border:1px solid #292929; border-radius:17px;
  outline:none; transition:border-color .3s, box-shadow .3s, background .3s;
  font-size:11px;
}
.field textarea { min-height:92px; height:92px; resize:vertical; padding-top:24px; }
.field label {
  position:absolute; left:42px; top:18px; color:#777; font-size:10px; pointer-events:none;
  transition:.25s var(--ease); transform-origin:left top;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color:rgba(255,213,79,.45); box-shadow:0 0 0 3px rgba(255,213,79,.06), 0 0 25px rgba(255,213,79,.04);
}
.field input:focus ~ label, .field textarea:focus ~ label, .field select:focus ~ label,
.field input:not(:placeholder-shown) ~ label, .field textarea:not(:placeholder-shown) ~ label,
.field select:valid ~ label {
  transform:translateY(-8px) scale(.78); color:var(--primary);
}
.field:focus-within .field-icon { color:var(--primary); }
.field input.is-invalid, .field textarea.is-invalid, .field select.is-invalid { border-color:rgba(255,90,95,.55); }
.field input.is-valid, .field textarea.is-valid, .field select.is-valid { border-color:rgba(0,200,150,.35); }
.field-error { display:block; min-height:0; color:#ff777b; font-size:8px; margin:3px 8px 0; }
.password-toggle {
  position:absolute; z-index:3; right:11px; top:10px; width:36px; height:36px;
  border:0; border-radius:10px; background:transparent; color:#777; cursor:pointer;
}
.strength-wrap { margin-top:-4px; }
.strength-track { height:3px; background:#292929; border-radius:99px; overflow:hidden; }
.strength-track span { display:block; height:100%; width:0; transition:.35s ease; background:var(--danger); }
.strength-label { color:#666; font-size:8px; margin:4px 5px 0; }
.check-row { display:flex; align-items:flex-start; gap:10px; margin:16px 1px 3px; color:#888; font-size:9px; line-height:1.6; cursor:pointer; }
.check-row input { position:absolute; opacity:0; pointer-events:none; }
.check-box { flex:0 0 19px; width:19px; height:19px; border:1px solid #333; border-radius:6px; display:grid; place-items:center; color:#0b0b0b; font-size:9px; transition:.25s; }
.check-row input:checked + .check-box { background:var(--secondary); border-color:var(--secondary); }
.agreement-error { display:block; color:#ff777b; font-size:8px; margin-left:30px; }
.captcha-box { margin:16px 0; padding:12px; display:grid; grid-template-columns:1fr 38px; gap:9px; align-items:center; border:1px solid #292929; background:#111; border-radius:17px; }
.captcha-box > div:first-child { padding-left:4px; }
.captcha-box strong { display:block; letter-spacing:.24em; color:var(--primary); font-size:17px; margin-top:2px; }
.captcha-refresh { width:38px; height:38px; border:0; border-radius:11px; background:#202020; color:#aaa; cursor:pointer; }
.captcha-input { grid-column:1 / -1; }
.btn-submit { min-height:53px; }

/* ---------- Notification Panel ---------- */
.notification-panel {
  position:fixed; z-index:70; left:50%; bottom:0; transform:translate(-50%, 110%);
  width:min(100%,430px); max-height:75dvh; overflow:auto;
  padding:13px 16px calc(92px + env(safe-area-inset-bottom));
  background:rgba(18,18,18,.98); border:1px solid #2a2a2a; border-bottom:0;
  border-radius:24px 24px 0 0; box-shadow:0 -25px 80px rgba(0,0,0,.55);
  transition:transform .45s var(--ease);
}
.notification-panel.open { transform:translate(-50%, 0); }
.panel-handle { width:42px; height:4px; border-radius:99px; background:#3b3b3b; margin:0 auto 15px; }
.notification-list { display:grid; gap:5px; }
.notification-item { display:flex; align-items:center; gap:12px; padding:11px; border-radius:15px; }
.notification-item.unread { background:rgba(255,213,79,.035); }
.notification-item > div { flex:1; }

/* ---------- Bottom Navigation ---------- */
.bottom-nav {
  position:fixed; z-index:80; left:50%; bottom:0; transform:translateX(-50%);
  width:min(100%,430px); height:70px; padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
  border-radius:20px 20px 0 0; border-bottom:0;
}
.nav-item {
  position:relative; border:0; background:none; border-radius:15px; color:#686868;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:9px; cursor:pointer; transition:.3s var(--ease);
}
.nav-item i { font-size:14px; transition:.3s var(--ease); }
.nav-item.active { color:var(--primary); background:rgba(255,213,79,.055); }
.nav-item.active i { transform:translateY(-1px) scale(1.08); }
.nav-badge { position:absolute; top:7px; right:21%; min-width:14px; height:14px; padding:0 4px; border-radius:99px; display:grid; place-items:center; background:var(--danger); color:white; font-size:7px; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position:fixed; z-index:110; inset:0; background:rgba(0,0,0,.7);
  opacity:0; visibility:hidden; transition:.3s ease; backdrop-filter:blur(4px);
}
.modal {
  position:fixed; z-index:120; left:50%; bottom:0;
  width:min(100%,430px); max-height:92dvh; overflow:auto;
  padding:22px 17px calc(22px + env(safe-area-inset-bottom));
  border:1px solid #2a2a2a; border-bottom:0; border-radius:25px 25px 0 0;
  background:#151515; box-shadow:0 -25px 80px rgba(0,0,0,.6);
  transform:translate(-50%, 105%); transition:transform .45s var(--ease);
}
.modal.open { transform:translate(-50%,0); }
.modal-backdrop.open { opacity:1; visibility:visible; }
.modal-close { position:absolute; top:13px; right:13px; width:38px; height:38px; border:0; border-radius:12px; background:#222; color:#aaa; cursor:pointer; }
.modal-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:rgba(255,213,79,.1); color:var(--primary); margin-bottom:15px; }
.modal h2 { font-size:25px; }
.modal > p { color:#777; font-size:10px; line-height:1.6; margin:7px 0 17px; }
.modal form { display:grid; gap:10px; }
.modal-link { width:100%; border:0; background:none; color:#777; font-size:10px; padding:14px; cursor:pointer; }
.modal-link strong { color:var(--primary); }
.modal-confirm { text-align:center; padding-top:30px; }
.modal-confirm .modal-icon { margin:0 auto 14px; }
.danger-icon { color:var(--danger); background:rgba(255,90,95,.09); }
.confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:20px; }

/* ---------- Toast ---------- */
.toast-container { position:fixed; z-index:200; top:82px; left:50%; width:min(calc(100% - 28px),400px); transform:translateX(-50%); display:grid; gap:8px; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:10px; padding:12px 13px;
  border:1px solid #2d2d2d; border-radius:15px; background:rgba(25,25,25,.96);
  box-shadow:0 14px 35px rgba(0,0,0,.4); pointer-events:auto;
  animation:toastIn .45s var(--ease) both;
}
.toast.out { animation:toastOut .35s ease both; }
.toast-icon { width:32px; height:32px; flex:0 0 32px; border-radius:10px; display:grid; place-items:center; background:#242424; color:var(--primary); }
.toast.success .toast-icon { color:var(--secondary); }
.toast.error .toast-icon { color:var(--danger); }
.toast.warning .toast-icon { color:var(--primary); }
.toast.info .toast-icon { color:#72a9ff; }
.toast div:last-child { min-width:0; }
.toast strong { display:block; font-size:10px; }
.toast p { color:#777; font-size:9px; margin:2px 0 0; }
@keyframes toastIn { from { opacity:0; transform:translateY(-12px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes toastOut { to { opacity:0; transform:translateY(-10px) scale(.97); } }

/* ---------- Skeleton ---------- */
.skeleton { position:relative; overflow:hidden; background:#1b1b1b; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent); animation:shimmer 1.3s infinite; }
@keyframes shimmer { to { transform:translateX(100%); } }

/* ---------- Light Mode ---------- */
body.light-mode {
  --bg:#f1f2f4; --bg-2:#fff; --card:#fff; --card-2:#f8f8f8; --border:#e2e2e2;
  --text:#171717; --muted:#707070; --muted-2:#999; --shadow:0 18px 55px rgba(0,0,0,.10);
  background:linear-gradient(180deg,#f8f8f8,#ececef);
}
body.light-mode .app-shell { background:rgba(255,255,255,.45); }
body.light-mode .glass { background:rgba(255,255,255,.72); border-color:rgba(0,0,0,.06); }
body.light-mode .drawer { background:rgba(250,250,250,.98); }
body.light-mode .field input, body.light-mode .field textarea, body.light-mode .field select,
body.light-mode .captcha-box, body.light-mode .profile-info > div { background:#f5f5f5; color:#171717; border-color:#ddd; }
body.light-mode .setting-row select { color:#555; }
body.light-mode .bottom-nav, body.light-mode .modal { background:rgba(250,250,250,.97); }
body.light-mode .modal { border-color:#ddd; }
body.light-mode .quick-item span, body.light-mode .password-toggle, body.light-mode .captcha-refresh { background:#ededed; color:#555; }
body.light-mode .text-muted, body.light-mode .activity-item small { color:#888; }

/* ---------- Desktop / Tablet ---------- */
@media (min-width: 600px) {
  .page-content { padding-left:20px; padding-right:20px; }
  .form-grid { grid-template-columns:1fr 1fr; }
  .form-grid .full, .form-grid .strength-wrap { grid-column:1 / -1; }
  .promo-card { flex-basis:72%; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}