/* ============================================================
   OSON SUG'URTAM — Premium dizayn tizimi
   Display: Sora · Body: Inter · Brand: deep green
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;450;500;600;700&display=swap');

:root {
  /* Yashil palitra — chuqurlik bilan */
  --green-900: #0A4734;
  --green-800: #0B543F;
  --green-700: #0F6E56;
  --green-600: #14856A;
  --green-500: #1A8C70;
  --green-300: #7BC6AF;
  --green-100: #E1F5EE;
  --green-50:  #F0FAF6;

  /* Neytral */
  --ink:    #0E1A16;
  --ink-2:  #38524A;
  --muted:  #6E867D;
  --line:   #E4EEE9;
  --line-2: #D3E3DC;
  --paper:  #F6FAF8;
  --card:   #FFFFFF;

  /* Premium urg'u — oltin */
  --gold:   #C9A227;
  --gold-l: #F6EFD6;

  /* Holat */
  --danger: #DC2626;
  --danger-l: #FEE2E2;

  /* O'lchamlar */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 3px rgba(11,84,63,.06), 0 1px 2px rgba(11,84,63,.04);
  --shadow:    0 4px 24px rgba(11,84,63,.08), 0 1px 4px rgba(11,84,63,.04);
  --shadow-lg: 0 16px 48px rgba(11,84,63,.14), 0 4px 12px rgba(11,84,63,.06);
  --shadow-green: 0 8px 28px rgba(15,110,86,.28);

  --maxw: 1180px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family:'Inter', system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:16px;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5 { font-family:'Sora', sans-serif; font-weight:700; line-height:1.15; letter-spacing:-.02em; color:var(--ink); }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font-family:inherit; font-size:inherit; }
img, svg { display:block; max-width:100%; }
::selection { background:var(--green-100); color:var(--green-800); }

/* ---------- Layout ---------- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.hidden { display:none !important; }
.spacer { flex:1; }

/* ---------- Tugmalar ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:var(--r-sm); border:none; cursor:pointer;
  font-weight:600; font-size:15px; letter-spacing:-.01em;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  white-space:nowrap; user-select:none;
}
.btn:active { transform:translateY(1px) scale(.99); }
.btn-primary { background:var(--green-700); color:#fff; box-shadow:var(--shadow-green); }
.btn-primary:hover { background:var(--green-600); box-shadow:0 10px 32px rgba(15,110,86,.34); }
.btn-ghost { background:var(--green-50); color:var(--green-800); }
.btn-ghost:hover { background:var(--green-100); }
.btn-outline { background:transparent; color:var(--green-800); border:1.5px solid var(--line-2); }
.btn-outline:hover { border-color:var(--green-500); background:var(--green-50); }
.btn-white { background:#fff; color:var(--green-800); box-shadow:var(--shadow); }
.btn-white:hover { box-shadow:var(--shadow-lg); }
.btn-danger { background:#FEF2F2; color:var(--danger); }
.btn-danger:hover { background:#FEE2E2; }
.btn-block { width:100%; }
.btn-lg { padding:17px 32px; font-size:16px; border-radius:var(--r); }
.btn-sm { padding:9px 16px; font-size:13.5px; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- Logo ---------- */
.logo { display:inline-flex; align-items:center; gap:12px; font-family:'Sora'; font-weight:800; font-size:20px; letter-spacing:-.02em; }
.logo-mark {
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg, var(--green-600), var(--green-800));
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(15,110,86,.3);
  flex-shrink:0;
}
.logo-mark svg { width:24px; height:24px; }

/* ---------- Kartochka ---------- */
.card { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); border:1px solid var(--line); }
.card-pad { padding:28px; }

/* ---------- Forma ---------- */
.field { margin-bottom:18px; }
.label { display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:8px; letter-spacing:-.01em; }
.input, .select, .textarea {
  width:100%; padding:15px 16px; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); transition:border .18s, box-shadow .18s;
  font-size:15.5px;
}
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color:var(--green-500); box-shadow:0 0 0 4px var(--green-100);
}
.input::placeholder { color:#9DB3AB; }
.textarea { resize:vertical; min-height:96px; }
.hint { font-size:13px; color:var(--muted); margin-top:6px; }

/* ---------- Toast ---------- */
#toasts { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:10px; width:min(420px, calc(100vw - 32px)); }
.toast {
  background:var(--ink); color:#fff; padding:14px 18px; border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg); font-size:14.5px; font-weight:500;
  display:flex; align-items:center; gap:12px;
  animation:toastIn .3s cubic-bezier(.2,.8,.2,1);
}
.toast.success { background:var(--green-700); }
.toast.error { background:var(--danger); }
.toast svg { width:20px; height:20px; flex-shrink:0; }
@keyframes toastIn { from{opacity:0; transform:translateY(-12px) scale(.96);} to{opacity:1; transform:none;} }

/* ---------- Yuklanish ---------- */
.spinner { width:22px; height:22px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.spinner.dark { border-color:var(--green-100); border-top-color:var(--green-700); }
@keyframes spin { to{ transform:rotate(360deg);} }
.loading-screen { min-height:60vh; display:grid; place-items:center; }

/* ---------- Badge ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600; letter-spacing:-.01em; }
.badge-dot { width:7px; height:7px; border-radius:50%; }

/* ---------- Skeleton ---------- */
.skel { background:linear-gradient(90deg, #eef5f2 25%, #f7faf9 50%, #eef5f2 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px; }
@keyframes shimmer { to{ background-position:-200% 0; } }

/* ============================================================
   LANDING (mehmon)
   ============================================================ */
.nav { position:sticky; top:0; z-index:100; background:rgba(246,250,248,.8); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a { font-size:14.5px; font-weight:500; color:var(--ink-2); transition:color .2s; }
.nav-links a:hover { color:var(--green-700); }

.hero { position:relative; overflow:hidden; padding:96px 0 80px; }
.hero-bg { position:absolute; inset:0; z-index:-1; background:
  radial-gradient(900px 500px at 80% -10%, var(--green-100), transparent 60%),
  radial-gradient(700px 400px at 0% 100%, #EAF6F1, transparent 55%); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; background:#fff; border:1px solid var(--line-2); border-radius:999px; font-size:13px; font-weight:600; color:var(--green-700); margin-bottom:24px; box-shadow:var(--shadow-sm); }
.hero h1 { font-size:clamp(38px, 5vw, 60px); font-weight:800; line-height:1.05; margin-bottom:22px; }
.hero h1 .accent { color:var(--green-700); position:relative; }
.hero-sub { font-size:19px; color:var(--ink-2); max-width:520px; margin-bottom:36px; line-height:1.5; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero-trust { display:flex; gap:28px; margin-top:40px; }
.hero-trust .t-num { font-family:'Sora'; font-size:26px; font-weight:800; color:var(--green-800); }
.hero-trust .t-lab { font-size:13px; color:var(--muted); }

/* Hero visual — telefon mokap */
.hero-visual { position:relative; display:grid; place-items:center; }
.phone {
  width:300px; height:600px; background:#fff; border-radius:42px; padding:14px;
  box-shadow:var(--shadow-lg), 0 0 0 10px #fff, 0 0 0 11px var(--line);
  position:relative;
}
.phone-screen { width:100%; height:100%; border-radius:30px; overflow:hidden; background:linear-gradient(160deg,var(--green-500),var(--green-800)); position:relative; }
.phone-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#fff; border-radius:0 0 16px 16px; z-index:3; }
.phone-float {
  position:absolute; background:#fff; border-radius:16px; padding:14px 18px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:12px; font-size:13.5px; font-weight:600;
  animation:float 4s ease-in-out infinite;
}
.phone-float .pf-ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; }
.float-1 { top:90px; left:-46px; animation-delay:0s; }
.float-2 { bottom:120px; right:-54px; animation-delay:1.2s; }
.float-3 { bottom:40px; left:-30px; animation-delay:.6s; }
@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

/* Bo'limlar */
.section { padding:88px 0; }
.section-head { text-align:center; max-width:640px; margin:0 auto 56px; }
.section-eyebrow { font-size:13px; font-weight:700; color:var(--green-600); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.section-head h2 { font-size:clamp(28px,3.4vw,42px); font-weight:800; margin-bottom:16px; }
.section-head p { font-size:17.5px; color:var(--ink-2); }

.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.feature:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--green-300); }
.feature-ic { width:56px; height:56px; border-radius:16px; background:var(--green-100); display:grid; place-items:center; margin-bottom:20px; }
.feature-ic svg { width:28px; height:28px; color:var(--green-700); }
.feature h3 { font-size:19px; margin-bottom:10px; }
.feature p { color:var(--ink-2); font-size:15px; line-height:1.55; }

/* Bosqichlar (process) */
.steps-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.step-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; position:relative; }
.step-num { font-family:'Sora'; font-size:14px; font-weight:800; color:#fff; background:var(--green-700); width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:18px; }
.step-card h3 { font-size:17px; margin-bottom:8px; }
.step-card p { color:var(--ink-2); font-size:14px; }

/* CTA banner */
.cta-banner { background:linear-gradient(135deg,var(--green-700),var(--green-900)); border-radius:var(--r-xl); padding:64px; text-align:center; position:relative; overflow:hidden; }
.cta-banner::before { content:''; position:absolute; top:-40%; right:-10%; width:400px; height:400px; background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%); }
.cta-banner h2 { color:#fff; font-size:clamp(26px,3.4vw,40px); margin-bottom:16px; }
.cta-banner p { color:rgba(255,255,255,.85); font-size:18px; margin-bottom:32px; max-width:560px; margin-left:auto; margin-right:auto; }

/* Footer */
.footer { background:var(--ink); color:#fff; padding:60px 0 32px; margin-top:40px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer .logo { color:#fff; margin-bottom:16px; }
.footer p { color:rgba(255,255,255,.6); font-size:14.5px; line-height:1.7; }
.footer h4 { color:#fff; font-size:14px; margin-bottom:16px; font-family:'Inter'; font-weight:700; }
.footer-links a { display:block; color:rgba(255,255,255,.6); font-size:14px; padding:6px 0; transition:color .2s; }
.footer-links a:hover { color:#fff; }
.footer-bottom { padding-top:28px; display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.5); font-size:13.5px; }

/* ============================================================
   AUTH (login modal/page)
   ============================================================ */
.auth-page { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-visual { background:linear-gradient(160deg,var(--green-600),var(--green-900)); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:56px; color:#fff; }
.auth-visual::before { content:''; position:absolute; top:-20%; right:-15%; width:500px; height:500px; background:radial-gradient(circle,rgba(255,255,255,.07),transparent 65%); }
.auth-visual .logo { color:#fff; }
.auth-visual-mid { position:relative; z-index:2; }
.auth-visual-mid h2 { color:#fff; font-size:38px; line-height:1.15; margin-bottom:20px; }
.auth-visual-mid p { color:rgba(255,255,255,.8); font-size:17px; max-width:380px; }
.auth-shield { width:200px; opacity:.16; position:absolute; bottom:-20px; right:40px; }
.auth-form-side { display:grid; place-items:center; padding:40px; }
.auth-box { width:100%; max-width:400px; min-width:0; }
.auth-box h1 { font-size:30px; margin-bottom:8px; }
.auth-box .sub { color:var(--ink-2); margin-bottom:32px; font-size:15.5px; }

/* OTP inputlar */
.otp-row { display:flex; gap:10px; justify-content:space-between; margin-bottom:8px; }
.otp-cell { flex:1 1 0; min-width:0; width:auto; height:64px; text-align:center; font-size:26px; font-weight:700; font-family:'Sora'; border:1.5px solid var(--line-2); border-radius:var(--r-sm); transition:border .18s, box-shadow .18s; }
.otp-cell:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 4px var(--green-100); }

/* Telefon input prefiks */
.phone-input { display:flex; align-items:center; border:1.5px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; transition:border .18s, box-shadow .18s; }
.phone-input:focus-within { border-color:var(--green-500); box-shadow:0 0 0 4px var(--green-100); }
.phone-prefix { padding:15px 14px; background:var(--green-50); color:var(--ink-2); font-weight:600; border-right:1.5px solid var(--line-2); }
.phone-input input { flex:1; border:none; padding:15px 16px; font-size:16px; letter-spacing:.5px; }
.phone-input input:focus { outline:none; }

/* ============================================================
   MIJOZ APP (ichki)
   ============================================================ */
.app-shell { min-height:100vh; padding-bottom:90px; }
.app-topbar { position:sticky; top:0; z-index:50; background:rgba(246,250,248,.85); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.app-topbar-inner { height:64px; display:flex; align-items:center; justify-content:space-between; }
.app-back { display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-weight:600; font-size:15px; cursor:pointer; padding:8px 12px; border-radius:10px; transition:background .2s; }
.app-back:hover { background:var(--green-50); }
.app-title { font-family:'Sora'; font-weight:700; font-size:17px; }
.app-main { padding:24px 0 40px; }
.app-view { animation:viewIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes viewIn { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* Pastki navigatsiya (mobil) */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:60; background:#fff; border-top:1px solid var(--line); display:flex; padding:8px 0 calc(8px + env(safe-area-inset-bottom)); }
.bn-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px; color:var(--muted); cursor:pointer; transition:color .2s; }
.bn-item svg { width:24px; height:24px; }
.bn-item.active { color:var(--green-700); }
.bn-item .bn-lab { font-size:11px; font-weight:600; }
.bn-badge { position:absolute; top:2px; margin-left:18px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:grid; place-items:center; padding:0 4px; }

/* Dashboard */
.greeting { font-size:14px; color:var(--muted); }
.greeting-name { font-family:'Sora'; font-size:26px; font-weight:800; margin-top:2px; }
.hero-card {
  background:linear-gradient(135deg,var(--green-600),var(--green-800)); border-radius:var(--r-lg);
  padding:28px; color:#fff; position:relative; overflow:hidden; margin:20px 0;
}
.hero-card::before { content:''; position:absolute; top:-30%; right:-10%; width:240px; height:240px; background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%); }
.hero-card h2 { color:#fff; font-size:22px; margin-bottom:6px; position:relative; }
.hero-card p { color:rgba(255,255,255,.82); font-size:14.5px; position:relative; max-width:70%; }
.hero-card .hc-shield { position:absolute; right:18px; top:50%; transform:translateY(-50%); width:90px; opacity:.9; }

.action-card {
  display:flex; align-items:center; gap:18px; background:var(--green-700); border-radius:var(--r);
  padding:20px 24px; color:#fff; cursor:pointer; box-shadow:var(--shadow-green);
  transition:transform .2s, box-shadow .2s; margin-bottom:20px;
}
.action-card:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(15,110,86,.32); }
.action-card .ac-plus { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex-shrink:0; }
.action-card .ac-plus svg { width:26px; height:26px; }
.action-card h3 { color:#fff; font-size:18px; margin-bottom:2px; }
.action-card p { color:rgba(255,255,255,.8); font-size:13.5px; }
.action-card .ac-arrow { margin-left:auto; }

.tiles { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s; position:relative; }
.tile:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--green-300); }
.tile-ic { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:14px; }
.tile-ic svg { width:24px; height:24px; }
.tile h4 { font-size:16px; margin-bottom:3px; }
.tile p { font-size:13px; color:var(--muted); }
.tile-badge { position:absolute; top:16px; right:16px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:10px; display:grid; place-items:center; padding:0 6px; }

/* ============================================================
   ARIZA OQIMI (multi-step)
   ============================================================ */
.flow-progress { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.fp-seg { height:6px; flex:1; background:var(--line); border-radius:3px; overflow:hidden; transition:background .3s; }
.fp-seg.done { background:var(--green-700); }
.fp-seg.active { background:var(--green-400, var(--green-500)); }
.fp-label { font-size:13px; color:var(--muted); margin-bottom:24px; }

.flow-title { font-size:24px; font-weight:800; margin-bottom:6px; }
.flow-desc { color:var(--ink-2); font-size:15px; margin-bottom:24px; }

/* Tanlov kartochkalari */
.choice { display:flex; align-items:center; gap:16px; background:#fff; border:1.5px solid var(--line-2); border-radius:var(--r); padding:18px 20px; cursor:pointer; transition:border .2s, background .2s, transform .15s; margin-bottom:12px; }
.choice:hover { border-color:var(--green-400, var(--green-500)); transform:translateX(2px); }
.choice.sel { border-color:var(--green-700); background:var(--green-50); }
.choice-ic { width:52px; height:52px; border-radius:14px; background:var(--green-100); display:grid; place-items:center; flex-shrink:0; }
.choice-ic svg { width:26px; height:26px; color:var(--green-700); }
.choice-body h4 { font-size:16.5px; margin-bottom:2px; }
.choice-body p { font-size:13.5px; color:var(--muted); }
.choice-check { margin-left:auto; width:28px; height:28px; border-radius:50%; border:2px solid var(--line-2); display:grid; place-items:center; flex-shrink:0; transition:all .2s; }
.choice.sel .choice-check { background:var(--green-700); border-color:var(--green-700); }
.choice.sel .choice-check svg { color:#fff; opacity:1; }
.choice-check svg { width:16px; height:16px; opacity:0; }

/* Grid choices (region, duration) */
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choice-mini { background:#fff; border:1.5px solid var(--line-2); border-radius:var(--r); padding:18px; cursor:pointer; transition:all .2s; text-align:center; position:relative; }
.choice-mini:hover { border-color:var(--green-400,var(--green-500)); }
.choice-mini.sel { border-color:var(--green-700); background:var(--green-50); }
.choice-mini .cm-main { font-family:'Sora'; font-weight:700; font-size:18px; }
.choice-mini .cm-sub { font-size:12.5px; color:var(--muted); margin-top:2px; }
.choice-mini .cm-price { font-size:13px; color:var(--green-700); font-weight:600; margin-top:8px; }
.cm-pop { position:absolute; top:-8px; right:10px; background:var(--gold); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px; }

/* Upload zonasi */
.upload-zone { border:2px dashed var(--line-2); border-radius:var(--r); padding:28px; text-align:center; cursor:pointer; transition:border .2s, background .2s; background:#fff; margin-bottom:14px; }
.upload-zone:hover { border-color:var(--green-500); background:var(--green-50); }
.upload-zone.has { border-style:solid; border-color:var(--green-500); background:var(--green-50); }
.uz-ic { width:56px; height:56px; border-radius:16px; background:var(--green-100); display:grid; place-items:center; margin:0 auto 14px; }
.uz-ic svg { width:28px; height:28px; color:var(--green-700); }
.uz-title { font-weight:600; font-size:15px; margin-bottom:4px; }
.uz-hint { font-size:13px; color:var(--muted); }
.uz-preview { width:100%; max-height:200px; object-fit:contain; border-radius:10px; margin-top:8px; }

/* Sticky pastki tugma */
.flow-footer { position:sticky; bottom:0; background:linear-gradient(transparent, var(--paper) 30%); padding:20px 0; margin-top:24px; }

/* Narx xulosa */
.price-summary { background:linear-gradient(135deg,var(--green-700),var(--green-900)); border-radius:var(--r-lg); padding:24px; color:#fff; margin-bottom:20px; }
.price-summary .ps-label { font-size:13px; color:rgba(255,255,255,.7); }
.price-summary .ps-amount { font-family:'Sora'; font-size:34px; font-weight:800; margin:4px 0 16px; }
.ps-row { display:flex; justify-content:space-between; font-size:14px; padding:8px 0; border-top:1px solid rgba(255,255,255,.14); }
.ps-row span:first-child { color:rgba(255,255,255,.75); }

/* Haydovchi kartochka */
.driver-item { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:12px; display:flex; align-items:center; gap:14px; }
.driver-num { width:40px; height:40px; border-radius:11px; background:var(--green-100); color:var(--green-700); font-family:'Sora'; font-weight:700; display:grid; place-items:center; flex-shrink:0; }

/* ============================================================
   STATUS / KUZATISH
   ============================================================ */
.status-hero { border-radius:var(--r-lg); padding:24px; margin-bottom:24px; }
.status-hero.ok { background:var(--green-100); }
.timeline { position:relative; padding-left:8px; }
.tl-step { display:flex; gap:18px; padding-bottom:8px; }
.tl-marker { display:flex; flex-direction:column; align-items:center; }
.tl-dot { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:#fff; border:3px solid var(--line); transition:all .3s; }
.tl-dot.done { background:var(--green-700); border-color:var(--green-700); }
.tl-dot.done svg { color:#fff; }
.tl-dot.current { border-color:var(--green-700); background:var(--green-50); }
.tl-dot.current .tl-pulse { width:14px; height:14px; border-radius:50%; background:var(--green-700); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(.6); opacity:.5;} }
.tl-line { width:3px; flex:1; min-height:28px; background:var(--line); margin:4px 0; transition:background .3s; }
.tl-line.done { background:var(--green-700); }
.tl-body { padding-top:7px; padding-bottom:20px; }
.tl-body h4 { font-size:16px; margin-bottom:2px; }
.tl-body .tl-time { font-size:13px; color:var(--muted); }

/* PDF kartochka */
.pdf-card { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; margin:20px 0; }
.pdf-ic { width:52px; height:52px; border-radius:13px; background:var(--danger-l); display:grid; place-items:center; flex-shrink:0; }
.pdf-ic svg { width:26px; height:26px; color:var(--danger); }

/* Ariza ro'yxati kartochka */
.app-list-item { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:12px; cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s; }
.app-list-item:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--green-300); }
.ali-ic { width:48px; height:48px; border-radius:13px; background:var(--green-100); display:grid; place-items:center; flex-shrink:0; }
.ali-ic svg { width:24px; height:24px; color:var(--green-700); }
.ali-body { flex:1; min-width:0; }
.ali-body h4 { font-size:15.5px; margin-bottom:3px; }
.ali-body .ali-meta { font-size:13px; color:var(--muted); }

/* Bo'sh holat */
.empty { text-align:center; padding:60px 24px; }
.empty-ic { width:80px; height:80px; border-radius:24px; background:var(--green-50); display:grid; place-items:center; margin:0 auto 20px; }
.empty-ic svg { width:40px; height:40px; color:var(--green-300); }
.empty h3 { font-size:19px; margin-bottom:8px; }
.empty p { color:var(--muted); font-size:15px; margin-bottom:24px; }

/* Profil */
.profile-head { text-align:center; padding:32px 0; }
.profile-avatar { width:88px; height:88px; border-radius:50%; background:linear-gradient(135deg,var(--green-500),var(--green-800)); display:grid; place-items:center; margin:0 auto 16px; font-family:'Sora'; font-size:34px; font-weight:800; color:#fff; }
.profile-name { font-family:'Sora'; font-size:22px; font-weight:800; }
.profile-phone { color:var(--muted); font-size:15px; margin-top:2px; }
.menu-list { background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.menu-item { display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; transition:background .15s; border-bottom:1px solid var(--line); }
.menu-item:last-child { border-bottom:none; }
.menu-item:hover { background:var(--green-50); }
.menu-item .mi-ic { width:40px; height:40px; border-radius:11px; background:var(--green-100); display:grid; place-items:center; flex-shrink:0; }
.menu-item .mi-ic svg { width:20px; height:20px; color:var(--green-700); }
.menu-item .mi-text { flex:1; }
.menu-item .mi-text h4 { font-size:15px; font-weight:600; }
.menu-item .mi-text p { font-size:12.5px; color:var(--muted); }

/* Xabar (chat) */
.chat-box { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; max-height:340px; overflow-y:auto; margin-bottom:14px; }
.msg { max-width:75%; padding:11px 15px; border-radius:14px; margin-bottom:10px; font-size:14.5px; line-height:1.45; }
.msg.them { background:var(--green-50); border-bottom-left-radius:4px; }
.msg.me { background:var(--green-700); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.msg .msg-time { font-size:11px; opacity:.6; margin-top:3px; }
.chat-input { display:flex; gap:10px; }
.chat-input input { flex:1; }

/* Bildirishnoma */
.notif-item { display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:10px; }
.notif-item.unread { border-left:3px solid var(--green-700); background:var(--green-50); }
.notif-ic { width:42px; height:42px; border-radius:11px; background:var(--green-100); display:grid; place-items:center; flex-shrink:0; }
.notif-ic svg { width:21px; height:21px; color:var(--green-700); }
.notif-body h4 { font-size:14.5px; margin-bottom:2px; }
.notif-body p { font-size:13.5px; color:var(--ink-2); }
.notif-body .notif-time { font-size:12px; color:var(--muted); margin-top:4px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns:1fr; gap:48px; }
  .hero-visual { order:-1; }
  .features-grid { grid-template-columns:1fr; }
  .steps-rail { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .auth-page { grid-template-columns:1fr; }
  .auth-visual { display:none; }
  .nav-links { display:none; }
}
@media (max-width: 560px) {
  .wrap { padding:0 18px; }
  .auth-form-side { padding:24px 18px; }
  .otp-row { gap:8px; }
  .steps-rail { grid-template-columns:1fr; }
  .choice-grid { grid-template-columns:1fr; }
  .tiles { grid-template-columns:1fr 1fr; }
  .hero { padding:56px 0 48px; }
  .section { padding:56px 0; }
  .cta-banner { padding:40px 24px; }
  .phone { width:260px; height:520px; }
  .float-2 { right:-20px; }
  .float-1 { left:-20px; }
}

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

/* ════════════════════════════════════════════════
   YANGI ARIZA OQIMI (FLOW)
   ════════════════════════════════════════════════ */
.flow-back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:16px;background:none;border:none}
.flow-back svg{width:18px;height:18px}
.flow-back:hover{color:var(--green-700)}
.flow-progress{margin-bottom:24px}
.fp-track{height:8px;background:var(--green-100);border-radius:99px;overflow:hidden}
.fp-fill{height:100%;background:linear-gradient(90deg,var(--green-500),var(--green-700));border-radius:99px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.fp-label{font-size:13px;color:var(--muted);margin-top:8px;font-weight:500}
.flow-q{font-family:'Sora',sans-serif;font-size:24px;font-weight:700;color:var(--ink);margin-bottom:6px}
.flow-sub{font-size:15px;color:var(--ink-2);margin-bottom:24px}

/* CHOICE kartalar */
.choice-list{display:flex;flex-direction:column;gap:12px}
.choice{display:flex;align-items:center;gap:16px;padding:18px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);cursor:pointer;transition:.18s}
.choice:hover{border-color:var(--green-300)}
.choice.sel{border-color:var(--green-600);background:var(--green-50)}
.choice-ic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.choice-ic svg{width:28px;height:28px}
.choice-txt{flex:1}
.choice-txt h4{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:3px}
.choice-txt p{font-size:13.5px;color:var(--muted)}
.choice-rad{width:26px;height:26px;border:2px solid var(--line-2);border-radius:50%;flex-shrink:0;position:relative;transition:.18s}
.choice.sel .choice-rad{border-color:var(--green-600);background:var(--green-600)}
.choice.sel .choice-rad::after{content:'';position:absolute;inset:5px;background:#fff;border-radius:50%}

/* HUDUD chiplar */
.region-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.region-chip{padding:16px 14px;background:var(--card);border:2px solid var(--line);border-radius:var(--r);text-align:center;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:.16s}
.region-chip:hover{border-color:var(--green-300)}
.region-chip.sel{border-color:var(--green-600);background:var(--green-600);color:#fff}

/* MUDDAT kartalar */
.dur-list{display:flex;flex-direction:column;gap:12px}
.dur-card{position:relative;display:flex;align-items:center;gap:14px;padding:18px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);cursor:pointer;transition:.18s}
.dur-card:hover{border-color:var(--green-300)}
.dur-card.sel{border-color:var(--green-600);background:var(--green-50)}
.dur-pop{position:absolute;top:-9px;left:18px;background:var(--gold);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px}
.dur-main{flex:1}
.dur-label{font-size:17px;font-weight:700;color:var(--ink)}
.dur-sub{font-size:13px;color:var(--muted)}
.dur-price{font-size:16px;font-weight:700;color:var(--green-700)}

/* UPLOAD zona */
.upload-zone{border:2px dashed var(--line-2);border-radius:var(--r-lg);padding:32px 20px;text-align:center;cursor:pointer;transition:.18s;background:var(--paper)}
.upload-zone:hover{border-color:var(--green-500);background:var(--green-50)}
.uz-ic{width:56px;height:56px;margin:0 auto 14px;color:var(--green-600)}
.uz-ic svg{width:56px;height:56px}
.uz-title{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px}
.uz-hint{font-size:13px;color:var(--muted)}
.uz-img{max-width:100%;max-height:220px;border-radius:var(--r);margin:0 auto;display:block}
.uz-change{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--green-700);font-size:13.5px;font-weight:600}
.uz-change svg{width:16px;height:16px}

/* FORM maydonlar */
.form-grid{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field label .opt{color:var(--muted);font-weight:400}
.inp{width:100%;padding:14px 16px;border:2px solid var(--line);border-radius:var(--r);font-size:15.5px;font-family:inherit;color:var(--ink);background:var(--card);transition:.16s;outline:none}
.inp:focus{border-color:var(--green-500)}
.inp:disabled{background:var(--paper);color:var(--muted)}
.inp::placeholder{color:#A9BCB5}

/* HAYDOVCHI kartalar */
.driver-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;display:flex;flex-direction:column;gap:12px}
.driver-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;color:var(--green-700)}
.driver-del{width:30px;height:30px;border:none;background:var(--danger-l);color:var(--danger);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.driver-del svg{width:16px;height:16px}

/* TASDIQLASH (summary) */
.summary-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:20px}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:14.5px}
.sum-row span{color:var(--muted)}
.sum-row b{color:var(--ink);font-weight:600;text-align:right}
.sum-divider{height:1px;background:var(--line);margin:8px 0}
.sum-total{display:flex;justify-content:space-between;align-items:center;padding-top:12px}
.sum-total span{font-size:16px;font-weight:600;color:var(--ink)}
.sum-total b{font-size:22px;font-weight:800;color:var(--green-700);font-family:'Sora',sans-serif}
.confirm-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:12px}

.info-box{display:flex;gap:12px;align-items:center;padding:16px;background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--r)}
.info-box svg{width:32px;height:32px;color:var(--green-700);flex-shrink:0}
.info-box p{font-size:13.5px;color:var(--ink-2);line-height:1.5}

/* ════════════════════════════════════════════════
   ARIZALARIM ro'yxati
   ════════════════════════════════════════════════ */
.applist-item{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);margin-bottom:12px;cursor:pointer;transition:.16s}
.applist-item:hover{border-color:var(--green-300);box-shadow:var(--shadow-sm)}
.ali-ic{width:50px;height:50px;border-radius:14px;background:var(--green-50);color:var(--green-700);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ali-ic svg{width:26px;height:26px}
.ali-body{flex:1;min-width:0}
.ali-top{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.ali-num{font-size:15px;font-weight:700;color:var(--ink)}
.ali-veh{font-size:13.5px;color:var(--ink-2);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ali-meta{display:flex;gap:14px;font-size:12.5px;color:var(--muted)}
.ali-meta span:first-child{font-weight:600;color:var(--green-700)}
.ali-arrow{color:var(--line-2);flex-shrink:0}
.ali-arrow svg{width:20px;height:20px}

/* ════════════════════════════════════════════════
   ARIZA HOLATI (status + timeline)
   ════════════════════════════════════════════════ */
.status-banner{display:flex;gap:16px;align-items:center;padding:20px;border-radius:var(--r-lg);margin-bottom:18px}
.status-banner.ok{background:var(--green-50);border:1px solid var(--green-100)}
.status-banner.wait{background:var(--gold-l);border:1px solid #FCE7B8}
.status-banner.err{background:var(--danger-l);border:1px solid #F8C9C9}
.sb-ic{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.status-banner.ok .sb-ic{background:var(--green-600)}
.status-banner.wait .sb-ic{background:var(--gold)}
.status-banner.err .sb-ic{background:var(--danger)}
.sb-ic svg{width:30px;height:30px}
.status-banner h3{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:3px}
.status-banner p{font-size:13.5px;color:var(--ink-2)}

.status-meta-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;margin-bottom:16px}
.smc-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14.5px}
.smc-row span{color:var(--muted)}
.smc-row b{color:var(--ink);font-weight:700}

.policy-dl,.pay-link-btn{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r-lg);margin-bottom:16px;text-decoration:none;transition:.16s}
.policy-dl{background:var(--card);border:1.5px solid var(--line)}
.policy-dl:hover{border-color:var(--green-300);box-shadow:var(--shadow-sm)}
.pd-ic{width:48px;height:48px;border-radius:12px;background:var(--danger-l);color:var(--danger);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pd-ic svg{width:26px;height:26px}
.pd-body{flex:1}
.pd-body h4{font-size:15.5px;font-weight:700;color:var(--ink)}
.pd-body p{font-size:12.5px;color:var(--muted)}
.pd-arrow{color:var(--green-600)}
.pd-arrow svg{width:24px;height:24px}
.pay-link-btn{background:var(--green-600);color:#fff;font-size:16px;font-weight:700;justify-content:center}
.pay-link-btn svg{width:24px;height:24px}

.section-h{font-family:'Sora',sans-serif;font-size:17px;font-weight:700;color:var(--ink);margin:8px 0 16px}
.timeline{padding-left:4px;margin-bottom:20px}
.tl-step{display:flex;gap:16px}
.tl-marker{display:flex;flex-direction:column;align-items:center}
.tl-dot{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--line-2);background:var(--card);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;transition:.2s}
.tl-dot.done{background:var(--green-600);border-color:var(--green-600)}
.tl-dot.active{border-color:var(--green-600);box-shadow:0 0 0 4px var(--green-100)}
.tl-dot svg{width:18px;height:18px}
.tl-line{width:3px;flex:1;min-height:28px;background:var(--line);margin:2px 0}
.tl-line.done{background:var(--green-500)}
.tl-content{padding:4px 0 24px;flex:1}
.tl-title{font-size:15px;font-weight:600;color:var(--ink-2)}
.tl-content.active .tl-title{color:var(--green-700);font-weight:700}

/* ════════════════════════════════════════════════
   CHAT
   ════════════════════════════════════════════════ */
.chat-shell{position:fixed;top:64px;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:var(--maxw);margin:0 auto;background:var(--paper)}
.chat-messages{flex:1;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:10px}
.chat-bubble{max-width:78%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.45}
.chat-bubble.mine{align-self:flex-end;background:var(--green-600);color:#fff;border-bottom-right-radius:5px}
.chat-bubble.them{align-self:flex-start;background:var(--card);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px}
.cb-time{font-size:10.5px;opacity:.7;margin-top:4px;text-align:right}
.chat-empty{text-align:center;color:var(--muted);margin:auto;padding:40px}
.chat-empty svg{width:48px;height:48px;margin-bottom:12px;opacity:.5}
.chat-input-bar{display:flex;gap:10px;padding:12px 16px;background:var(--card);border-top:1px solid var(--line)}
.chat-inp{flex:1;padding:13px 16px;border:2px solid var(--line);border-radius:99px;font-size:15px;font-family:inherit;outline:none}
.chat-inp:focus{border-color:var(--green-500)}
.chat-send{width:48px;height:48px;border:none;background:var(--green-600);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-send svg{width:22px;height:22px}

/* ════════════════════════════════════════════════
   BILDIRISHNOMALAR
   ════════════════════════════════════════════════ */
.notif-item{display:flex;gap:14px;padding:16px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);margin-bottom:12px;position:relative;cursor:pointer}
.notif-item.unread{background:var(--green-50);border-color:var(--green-100)}
.ni-ic{width:44px;height:44px;border-radius:12px;background:var(--gold-l);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ni-ic svg{width:22px;height:22px}
.ni-body{flex:1}
.ni-body h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px}
.ni-body p{font-size:13.5px;color:var(--ink-2);line-height:1.45;margin-bottom:6px}
.ni-time{font-size:11.5px;color:var(--muted)}
.ni-dot{width:9px;height:9px;background:var(--green-600);border-radius:50%;position:absolute;top:18px;right:16px}

/* ════════════════════════════════════════════════
   PROFIL
   ════════════════════════════════════════════════ */
.profile-head{text-align:center;padding:20px 0 28px}
.profile-avatar{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--green-500),var(--green-700));color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;font-family:'Sora',sans-serif;margin:0 auto 14px}
.profile-head h3{font-size:21px;font-weight:700;color:var(--ink);margin-bottom:4px}
.profile-head p{font-size:14.5px;color:var(--muted)}
.profile-section{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px}
.ps-item{display:flex;align-items:center;gap:14px;padding:16px;cursor:pointer;transition:.14s;border-bottom:1px solid var(--line)}
.ps-item:last-child{border-bottom:none}
.ps-item:hover{background:var(--paper)}
.psi-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.psi-ic svg{width:22px;height:22px}
.psi-body{flex:1}
.psi-body h4{font-size:15.5px;font-weight:600;color:var(--ink)}
.psi-body p{font-size:12.5px;color:var(--muted)}
.ps-item>svg:last-child{width:20px;height:20px;color:var(--line-2)}

/* ════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════ */
#modal-root{display:none}
#modal-root.show{display:block}
.modal-overlay{position:fixed;inset:0;background:rgba(11,84,63,.4);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;z-index:1000;padding:0;animation:fadeIn .2s}
.modal-box{background:var(--card);border-radius:24px 24px 0 0;padding:28px 22px calc(22px + env(safe-area-inset-bottom));width:100%;max-width:var(--maxw);animation:slideUp .28s cubic-bezier(.4,0,.2,1)}
.modal-title{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:18px}
.modal-actions{display:flex;gap:12px;margin-top:22px}
.modal-actions .btn{flex:1}
.support-link{display:flex;align-items:center;gap:12px;padding:15px;background:var(--paper);border-radius:var(--r);text-decoration:none;color:var(--ink);font-size:15px;font-weight:600;margin-bottom:10px}
.support-link svg{width:22px;height:22px;color:var(--green-700)}
@media(min-width:560px){.modal-overlay{align-items:center}.modal-box{border-radius:24px;margin:20px}}

/* ════════════════════════════════════════════════
   YORDAMCHI bloklar (loading/empty/error)
   ════════════════════════════════════════════════ */
.load-block{display:flex;justify-content:center;padding:60px 0}
.spinner{width:32px;height:32px;border:3px solid var(--green-100);border-top-color:var(--green-600);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.empty-block{text-align:center;padding:50px 20px}
.eb-ic{width:64px;height:64px;margin:0 auto 18px;color:var(--green-300);background:var(--green-50);border-radius:50%;display:flex;align-items:center;justify-content:center}
.eb-ic.err{color:var(--danger);background:var(--danger-l)}
.eb-ic svg{width:32px;height:32px}
.empty-block h3{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:6px}
.empty-block p{font-size:14px;color:var(--muted);margin-bottom:20px}

/* Tugma variantlari (qo'shimcha) */
.btn-block{width:100%;justify-content:center}
.btn-lg{padding:16px;font-size:16.5px}
.btn-danger{color:var(--danger)!important}
.btn-danger-solid{background:var(--danger);color:#fff;flex:1}
.btn-danger-solid:hover{background:#C13B3A}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* Boot spinner */
.boot{display:flex;justify-content:center;align-items:center;min-height:100vh}
.boot-spinner{width:40px;height:40px;border:4px solid var(--green-100);border-top-color:var(--green-600);border-radius:50%;animation:spin .7s linear infinite}
body.no-scroll{overflow:hidden}

/* Tugmalardagi SVG iconlar to'g'ri o'lcham */
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn-lg svg{width:22px;height:22px}

/* ════════════════════════════════════════════════
   TELEGRAM BOT YORDAM (login OTP)
   ════════════════════════════════════════════════ */
.bot-help{margin-top:24px;padding:18px;background:#EAF3FB;border:1px solid #CFE5F7;border-radius:var(--r-lg);text-align:center}
.bot-help>p{font-size:14px;color:var(--ink-2);margin-bottom:12px;font-weight:500}
.btn-tg{background:#229ED9;color:#fff}
.btn-tg:hover{background:#1d8bc0}
.btn-tg svg{width:20px;height:20px}
.bot-help-note{display:block;font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}

/* Juda kichik telefonlar uchun (≤380px) */
@media (max-width:380px){
  .wrap{padding:0 14px}
  .auth-form-side{padding:20px 14px}
  .flow-q{font-size:21px}
  .hero h1{font-size:32px}
  .otp-cell{height:54px;font-size:22px}
  .otp-row{gap:6px}
  .tiles{gap:10px}
  .stat-grid{gap:10px}
  .tg-title{font-size:21px}
}

/* ════════════════════════════════════════════════
   TELEGRAM YETKAZISH — chiroyli animatsiyali (login)
   ════════════════════════════════════════════════ */

/* Telefon qadamidagi info kartasi */
.tg-info{display:flex;align-items:center;gap:14px;padding:16px;margin:20px 0;
  background:linear-gradient(135deg,#EAF6FD,#F0FAFF);border:1px solid #CFE9F9;border-radius:var(--r-lg);
  animation:tgFadeUp .5s ease}
.tg-info-ic{width:48px;height:48px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg,#2AABEE,#229ED9);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(34,158,217,.35)}
.tg-info-ic svg{width:30px;height:30px}
.tg-info-txt b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:2px}
.tg-info-txt span{font-size:12.5px;color:var(--ink-2);line-height:1.45}

/* OTP qadamidagi yetkazish hero */
.tg-deliver{text-align:center;margin-bottom:26px;animation:tgFadeUp .55s ease}
.tg-badge{position:relative;width:104px;height:104px;margin:8px auto 22px}
.tg-logo{position:absolute;inset:4px;border-radius:50%;z-index:2;
  background:linear-gradient(135deg,#2AABEE,#229ED9);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 36px rgba(34,158,217,.45);
  animation:tgFloat 3s ease-in-out infinite}
.tg-logo svg{width:54px;height:54px;margin-left:-3px}
.tg-deliver.sms .tg-logo{background:linear-gradient(135deg,var(--green-500),var(--green-700));
  box-shadow:0 14px 36px rgba(15,110,86,.4)}
/* to'lqin halqalari */
.tg-ring{position:absolute;inset:4px;border-radius:50%;border:2.5px solid #229ED9;opacity:0;
  animation:tgRipple 2.6s ease-out infinite}
.tg-ring:nth-child(2){animation-delay:.85s}
.tg-ring:nth-child(3){animation-delay:1.7s}
.tg-deliver.sms .tg-ring{border-color:var(--green-500)}
/* yetkazildi belgisi */
.tg-check{position:absolute;bottom:0;right:0;width:36px;height:36px;z-index:3;
  background:var(--green-600);border-radius:50%;border:3.5px solid var(--paper);
  display:flex;align-items:center;justify-content:center;color:#fff;
  animation:tgPop .55s .55s both cubic-bezier(.34,1.56,.64,1)}
.tg-check svg{width:18px;height:18px}
.tg-title{font-size:23px;margin-bottom:10px}
.tg-sub{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin-bottom:0}
.tg-sub b{color:var(--ink);font-weight:700}
.tg-deliver.wait .tg-logo{animation:tgFloat 3s ease-in-out infinite,tgWaitPulse 1.5s ease-in-out infinite}

/* OTP kataklari — yaxshilangan */
.otp-cell{background:#fff}
.otp-cell:not(:placeholder-shown),.otp-cell.filled{border-color:var(--green-500);background:var(--green-50);
  animation:otpFill .2s ease}
.resend-hint{margin-bottom:20px;text-align:center}
.resend-hint a{color:var(--green-700);font-weight:600;cursor:pointer}
.resend-hint a:hover{text-decoration:underline}

@keyframes tgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes tgRipple{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
@keyframes tgPop{0%{transform:scale(0) rotate(-45deg)}100%{transform:scale(1) rotate(0)}}
@keyframes tgFadeUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes tgWaitPulse{0%,100%{box-shadow:0 14px 36px rgba(34,158,217,.45)}50%{box-shadow:0 14px 44px rgba(34,158,217,.7)}}
@keyframes otpFill{0%{transform:scale(1.08)}100%{transform:scale(1)}}

/* Reduced motion — animatsiyalarni o'chirish */
@media (prefers-reduced-motion: reduce){
  .tg-logo,.tg-ring,.tg-check,.tg-deliver,.tg-info{animation:none!important}
}

/* ════════════════════════════════════════════════
   TELEGRAM BIR-TUGMA LOGIN
   ════════════════════════════════════════════════ */
.tg-login-hero{text-align:center;padding:24px 20px;margin:8px 0 20px;
  background:linear-gradient(160deg,#EAF6FD,#F2FAFF);border:1px solid #CFE9F9;border-radius:var(--r-lg);
  animation:tgFadeUp .5s ease}
.tg-login-logo{width:72px;height:72px;margin:0 auto 16px;border-radius:22px;
  background:linear-gradient(135deg,#2AABEE,#229ED9);display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(34,158,217,.4);animation:tgFloat 3s ease-in-out infinite}
.tg-login-logo svg{width:42px;height:42px;margin-left:-2px}
.tg-login-hero h3{font-size:19px;color:var(--ink);margin-bottom:8px}
.tg-login-hero p{font-size:14px;color:var(--ink-2);line-height:1.55}

.tg-login-btn{text-decoration:none}
.tg-login-btn svg{width:22px;height:22px}
.tg-login-btn.disabled{opacity:.6;pointer-events:none}
.btn-tg{background:#229ED9;color:#fff}
.btn-tg:hover{background:#1d8bc0}

.login-or{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--muted);font-size:13px}
.login-or::before,.login-or::after{content:'';flex:1;height:1px;background:var(--line)}

/* Kutish ekrani qadamlari */
.tg-steps{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.tg-step{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);font-size:14.5px;color:var(--ink)}
.tg-step b{font-weight:700}
.tg-step-n{width:30px;height:30px;border-radius:50%;background:#229ED9;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.tg-waiting{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;margin-bottom:16px;
  background:#EAF6FD;border-radius:var(--r);color:#1d8bc0;font-size:14px;font-weight:600}
.tg-waiting .spinner{width:18px;height:18px;border-width:2.5px;border-color:#BBDEF5;border-top-color:#229ED9}

/* Login landing — ixcham qadamlar va kichik telefon havolasi */
.tg-steps-compact{gap:8px;margin:18px 0}
.tg-steps-compact .tg-step{padding:11px 14px;font-size:13.5px}
.tg-steps-compact .tg-step-n{width:26px;height:26px;font-size:13px}
.login-alt{text-align:center;margin-top:18px}
.login-alt a{color:var(--muted);font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.login-alt a:hover{color:var(--green-700)}