* { margin: 0; padding: 0; box-sizing: border-box; }

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,600;0,700;1,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ivory:#FBF6ED;
  --paper:#FFFFFF;
  --ink:#241A30;
  --muted:#8D7F97;
  --muted-2:#B3A8BF;
  --plum:#5B3A99;
  --plum-deep:#402873;
  --plum-soft:#EFE7FA;
  --gold:#C4922F;
  --gold-soft:#F2D9A0;
  --blush:#F6DCE1;
  --blush-ink:#9C4C63;
  --sky:#DCEBF6;
  --sky-ink:#2C6E96;
  --line:rgba(36,26,48,0.10);
  --grad: linear-gradient(135deg, #6D46B8 0%, #4B2E83 100%);
  --danger:#B23A55;
  --radius:14px;
}

body{
  font-family:'Manrope', sans-serif;
  background:
    radial-gradient(circle at 10% 0%, #F1E6FB 0%, transparent 40%),
    radial-gradient(circle at 92% 8%, #FBEBD1 0%, transparent 38%),
    var(--ivory);
  color:var(--ink);
  line-height:1.5;
  padding-bottom:20px;
}
body.has-nav{ padding-bottom:78px; }

a{ text-decoration:none; color:inherit; }

.container{ max-width:480px; margin:0 auto; padding:20px; }

/* ---------- TOPBAR ---------- */
.navbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; background:var(--paper); box-shadow:0 2px 10px rgba(36,26,48,0.05);
}
.navbar .logo{
  font-family:'Fraunces', serif; font-weight:700; font-size:1.3rem; color:var(--ink); display:flex; align-items:center; gap:7px;
}
.navbar .logo .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); }
.navbar .logo .num{ color:var(--plum); }
.navbar .nav-links{ display:flex; gap:14px; font-size:0.85rem; color:var(--muted); font-weight:600; }

/* ---------- paisley signature motif ---------- */
.paisley{
  width:44px; height:44px; margin:0 auto;
  border:2px solid var(--gold); border-radius:50% 50% 50% 6px; transform:rotate(45deg);
  display:flex; align-items:center; justify-content:center;
}
.paisley::after{ content:''; width:16px; height:16px; border:2px solid var(--gold); border-radius:50%; transform:rotate(-45deg); }

/* ---------- CARDS / FORMS ---------- */
.card{
  background:var(--paper); border-radius:var(--radius); padding:24px;
  box-shadow:0 8px 24px rgba(36,26,48,0.06); margin-bottom:18px; border:1px solid var(--line);
}
h1, h2, h3{ margin-bottom:12px; font-family:'Fraunces', serif; font-weight:700; }

.form-group{ margin-bottom:16px; }
.form-group label{ display:block; margin-bottom:6px; font-weight:700; font-size:0.85rem; }
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:12px; border:1px solid var(--line); border-radius:10px;
  font-size:1rem; font-family:inherit; background:var(--ivory); color:var(--ink);
}
.form-group input[type="file"]{ padding:8px; background:transparent; }

.btn{
  display:block; width:100%; padding:14px; border:none; border-radius:12px;
  background:var(--grad); color:#fff; font-size:1rem; font-weight:800; cursor:pointer;
  text-align:center; box-shadow:0 10px 22px rgba(75,46,131,0.25);
}
.btn:hover{ opacity:0.94; }
.btn-secondary{ background:var(--plum-soft); color:var(--plum); box-shadow:none; }
.btn-outline{ background:transparent; border:1px solid var(--plum); color:var(--plum); box-shadow:none; }
.btn-google{ background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:none; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-danger{ background:var(--danger); box-shadow:none; }
.btn-small{ width:auto; padding:8px 14px; font-size:0.85rem; }

.error-box{ background:#FBEAEF; color:var(--danger); padding:10px 14px; border-radius:10px; margin-bottom:16px; font-size:0.9rem; }
.success-box{ background:#E9F6EC; color:#1E8449; padding:10px 14px; border-radius:10px; margin-bottom:16px; font-size:0.9rem; }
.info-box{ background:var(--plum-soft); color:var(--plum); padding:10px 14px; border-radius:10px; margin-bottom:16px; font-size:0.85rem; }

.muted{ color:var(--muted); font-size:0.85rem; }
.link-row{ text-align:center; margin-top:14px; font-size:0.9rem; }
.divider-word{ text-align:center; font-size:0.8rem; color:var(--muted-2); margin:16px 0; }

/* ---------- Bosh sahifa hero ---------- */
.badge-pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft);
  padding:6px 14px; border-radius:20px; font-size:0.75rem; font-weight:800; color:#7A5A17; margin-bottom:16px;
}
.hero h1{ font-size:1.6rem; line-height:1.3; }
.hero h1 .accent{ color:var(--plum); }
.hero p.sub{ font-size:0.9rem; color:var(--muted); margin:12px 0 20px; line-height:1.6; }

/* ---------- TEMPLATE GRID ---------- */
.template-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.template-card{
  background:var(--paper); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 6px 18px rgba(36,26,48,0.08); text-align:center; position:relative; border:1px solid var(--line);
}
.template-card .swatch{ height:110px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; }
.template-card .info{ padding:10px; text-align:left; }
.template-card .info h3{ font-size:0.95rem; margin-bottom:2px; }
.template-card .info p{ font-size:0.78rem; color:var(--muted); margin-bottom:0; font-family:'Manrope',sans-serif; font-weight:500; }
.fav-heart{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; font-size:0.9rem;
}
.fav-heart.active{ color:var(--danger); }

.sw-gold{ background:linear-gradient(160deg,#FBF0DA,#EFD6A0); }
.sw-rose{ background:linear-gradient(160deg,#FBE6EC,#F1BFCF); }
.sw-blue{ background:linear-gradient(160deg,#E4F1FA,#B9DCEF); }
.sw-lilac{ background:linear-gradient(160deg,#EFE6FB,#D7C2F2); }

/* ---------- INVITATION LIST ---------- */
.dash-invite-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin-bottom:12px;
}
.dash-invite-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:12px; }
.dash-invite-top .din{ font-weight:700; font-size:0.92rem; }
.dash-invite-top .dim{ font-size:0.78rem; color:var(--muted); margin-top:2px; word-break:break-all; }
.dash-invite-actions{ display:flex; gap:8px; }
.dash-invite-actions .btn{ flex:1; padding:9px 4px; font-size:0.72rem; }
.tag-pill{ font-size:0.68rem; font-weight:800; padding:4px 10px; border-radius:20px; }
.tag-gold{ background:var(--gold-soft); color:#7A5A17; }
.tag-sky{ background:var(--sky); color:var(--sky-ink); }

.empty-state{ text-align:center; padding:40px 20px; color:var(--muted); }

.stats-row{ display:flex; gap:10px; margin-bottom:16px; }
.stat-chip{ flex:1; background:var(--ivory); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.stat-chip .n{ font-family:'Fraunces', serif; font-size:1.3rem; color:var(--plum); font-weight:700; }
.stat-chip .l{ font-size:0.72rem; color:var(--muted); margin-top:2px; }

/* ---------- BOTTOM NAV ---------- */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around; align-items:center;
  padding:10px 6px 18px; background:rgba(255,255,255,0.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); max-width:480px; margin:0 auto;
}
.nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:0.62rem; color:var(--muted-2); font-weight:700; }
.nav-item.active{ color:var(--plum); }
.nav-item .ic{ font-size:1.15rem; }
.nav-fab{
  width:48px; height:48px; border-radius:50%; background:var(--grad); display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:1.4rem; box-shadow:0 10px 22px rgba(75,46,131,0.4); margin-top:-26px;
}

/* ---------- PROFIL (hero + menu list) ---------- */
.profile-hero{
  background:var(--grad); padding:34px 20px 46px; text-align:center; position:relative; overflow:hidden;
}
.profile-hero::before{ content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; border:2px solid rgba(255,255,255,0.18); border-radius:50% 50% 50% 6px; transform:rotate(30deg); }
.profile-hero::after{ content:''; position:absolute; bottom:-40px; left:-24px; width:100px; height:100px; border:2px solid rgba(255,255,255,0.12); border-radius:50% 50% 6px 50%; }
.profile-avatar{
  width:74px; height:74px; border-radius:50%; margin:0 auto 12px; background:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:700;
  font-size:1.5rem; color:var(--plum); position:relative; z-index:1;
}
.profile-hero h2{ color:#fff; position:relative; z-index:1; font-size:1.2rem; }
.profile-hero p{ font-size:0.8rem; color:rgba(255,255,255,0.75); margin-top:2px; position:relative; z-index:1; }
.profile-stats{ display:flex; justify-content:center; gap:26px; margin-top:16px; position:relative; z-index:1; }
.profile-stats div{ text-align:center; }
.profile-stats .n{ font-family:'Fraunces', serif; font-size:1.1rem; color:#fff; font-weight:700; }
.profile-stats .l{ font-size:0.68rem; color:rgba(255,255,255,0.7); }

.menu-card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 24px rgba(36,26,48,0.06); padding:6px 4px; margin-bottom:14px; position:relative; z-index:2; }
/* ==================================================================
   BOSH SAHIFA (LOGIN QILINMAGAN) — to'liq fon gradientli hero
   ================================================================== */
.hero-full{
  position:relative; padding:44px 22px 70px; text-align:center; overflow:hidden;
  background:
    radial-gradient(circle at 20% -10%, rgba(255,255,255,0.12), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(196,146,47,0.35), transparent 50%),
    var(--grad);
  color:#fff;
}
.hero-full .paisley-big{ border-color:rgba(255,255,255,0.9); }
.hero-full .paisley-big::after{ border-color:rgba(255,255,255,0.9); }
.hero-full .badge-pill{ background:rgba(255,255,255,0.16); color:#F6DFA0; border:1px solid rgba(255,255,255,0.25); }
.hero-full h1{ font-size:1.85rem; line-height:1.28; color:#fff; }
.hero-full h1 .accent{ color:var(--gold-soft); }
.hero-full p.sub{ font-size:0.92rem; color:rgba(255,255,255,0.82); margin:14px auto 26px; line-height:1.65; max-width:340px; }
.hero-full .btn-white{ background:#fff; color:var(--plum); box-shadow:0 12px 26px rgba(0,0,0,0.25); }

.float-card-wrap{ margin-top:-52px; padding:0 22px; position:relative; z-index:3; }
.float-card-wrap .sample-preview{ margin:0 auto; }

.how-section{ padding:60px 22px 10px; text-align:center; }
.how-steps{ display:flex; flex-direction:column; gap:14px; margin-top:20px; text-align:left; }
.how-step{ display:flex; gap:14px; align-items:flex-start; }
.how-step .hn{
  width:34px; height:34px; border-radius:50%; background:var(--plum-soft); color:var(--plum);
  font-family:'Fraunces', serif; font-weight:700; font-size:0.95rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.how-step .ht{ font-size:0.85rem; font-weight:700; margin-bottom:2px; }
.how-step .hd{ font-size:0.76rem; color:var(--muted); }

.cta-band{
  margin:30px 22px 10px; padding:26px 20px; border-radius:20px; text-align:center;
  background:linear-gradient(150deg, var(--gold-soft), #fff 120%); border:1px solid rgba(196,146,47,0.3);
}
.cta-band h3{ font-size:1.05rem; margin-bottom:6px; }
.cta-band p{ font-size:0.78rem; color:var(--muted); margin-bottom:16px; }

.menu-card.hero-overlap{ margin-top:-22px; }
.menu-row{ display:flex; align-items:center; gap:12px; padding:13px 12px; }
.menu-row:not(:last-child){ border-bottom:1px solid var(--line); }
.menu-row .mi{ width:34px; height:34px; border-radius:10px; background:var(--plum-soft); display:flex; align-items:center; justify-content:center; font-size:0.95rem; }
.menu-row .mt{ font-size:0.85rem; font-weight:700; flex:1; }
.menu-row .mv{ font-size:0.75rem; color:var(--muted-2); }
.menu-row.danger .mi{ background:var(--blush); }
.menu-row.danger .mt{ color:var(--blush-ink); }

/* ==================================================================
   PREMIUM SHABLON KARTALARI
   ================================================================== */
.template-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ptpl-card{
  position:relative; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(36,26,48,0.14); border:1px solid rgba(196,146,47,0.25);
  background:var(--paper);
}
.ptpl-swatch{
  height:150px; position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ptpl-swatch::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px);
  background-size:14px 14px; opacity:0.5;
}
.ptpl-swatch::after{
  content:''; position:absolute; inset:8px; border:1px solid rgba(255,255,255,0.45); border-radius:10px; pointer-events:none;
}
.ptpl-ribbon{
  position:absolute; top:10px; left:-28px; transform:rotate(-40deg);
  background:var(--grad); color:#fff; font-size:0.5rem; font-weight:800; letter-spacing:1px;
  padding:3px 32px; box-shadow:0 3px 8px rgba(0,0,0,0.25); z-index:2;
}
.ptpl-monogram{
  width:46px; height:46px; border:1.5px solid rgba(255,255,255,0.8); border-radius:50% 50% 50% 6px;
  transform:rotate(45deg); display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
}
.ptpl-monogram span{ transform:rotate(-45deg); font-family:'Fraunces', serif; font-weight:700; font-size:0.85rem; color:#fff; }
.ptpl-info{ padding:12px 12px 14px; text-align:left; }
.ptpl-info h3{ font-size:0.92rem; margin-bottom:2px; }
.ptpl-info p{ font-size:0.72rem; color:var(--muted); font-family:'Manrope',sans-serif; font-weight:500; }
.ptpl-heart{
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; font-size:0.95rem; z-index:2;
  border:none; box-shadow:0 3px 8px rgba(0,0,0,0.15);
}
.ptpl-heart.active{ color:var(--danger); }

.filter-tabs{ display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; }
.filter-tab{
  flex-shrink:0; font-size:0.78rem; font-weight:700; padding:9px 16px; border-radius:20px;
  background:var(--paper); border:1px solid var(--line); color:var(--muted);
}
.filter-tab.sel{ background:var(--grad); color:#fff; border-color:transparent; }

.ptpl-actions{ display:flex; gap:6px; margin-top:8px; }
.ptpl-actions .btn{ flex:1; padding:9px 4px; font-size:0.68rem; }

.bg-premium-gold{ background:linear-gradient(155deg,#F3DCA0,#C4922F 130%); }
.bg-premium-rose{ background:linear-gradient(155deg,#F3C7D2,#B8496B 130%); }
.bg-premium-blue{ background:linear-gradient(155deg,#AFD8ED,#2C6E96 130%); }
.bg-premium-lilac{ background:linear-gradient(155deg,#D7BEF2,#6D3FA8 130%); }

/* ==================================================================
   BOSH SAHIFA — chiroyli hero
   ================================================================== */
.hero-frame{
  position:relative; padding:38px 22px 30px; text-align:center; overflow:hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(196,146,47,0.16), transparent 45%),
    radial-gradient(circle at 88% 0%, rgba(91,58,153,0.14), transparent 42%);
}
.hero-frame .paisley-big{
  width:64px; height:64px; margin:0 auto 18px; border:2px solid var(--gold);
  border-radius:50% 50% 50% 8px; transform:rotate(45deg); display:flex; align-items:center; justify-content:center;
}
.hero-frame .paisley-big::after{ content:''; width:24px; height:24px; border:2px solid var(--gold); border-radius:50%; transform:rotate(-45deg); }
.hero-frame h1{ font-size:1.75rem; line-height:1.28; }
.hero-frame h1 .accent{ color:var(--plum); position:relative; }
.hero-frame p.sub{ font-size:0.92rem; color:var(--muted); margin:14px auto 22px; line-height:1.65; max-width:340px; }

.sample-preview{
  max-width:220px; margin:0 auto 24px; border-radius:16px; overflow:hidden;
  box-shadow:0 20px 40px rgba(36,26,48,0.2); border:1px solid rgba(196,146,47,0.3);
}
.sample-preview .sp-inner{
  background:linear-gradient(155deg,#F3DCA0,#C4922F 130%); padding:26px 16px; text-align:center; position:relative;
}
.sample-preview .sp-inner::before{
  content:''; position:absolute; inset:8px; border:1px solid rgba(255,255,255,0.5); border-radius:10px;
}
.sample-preview .sp-eyebrow{ font-size:0.55rem; letter-spacing:2px; color:rgba(255,255,255,0.85); font-weight:700; margin-bottom:8px; }
.sample-preview .sp-names{ font-family:'Fraunces', serif; font-weight:700; font-size:1.15rem; color:#fff; margin-bottom:8px; }
.sample-preview .sp-div{ width:26px; height:1.5px; background:rgba(255,255,255,0.7); margin:8px auto; }
.sample-preview .sp-detail{ font-size:0.62rem; color:rgba(255,255,255,0.9); }
.sample-preview .sp-tag{
  display:inline-block; margin-top:10px; background:rgba(255,255,255,0.2); color:#fff;
  font-size:0.5rem; font-weight:800; padding:3px 10px; border-radius:20px; letter-spacing:0.5px;
}

.trust-row{ display:flex; justify-content:center; gap:18px; margin:6px 0 4px; }
.trust-item{ text-align:center; }
.trust-item .n{ font-family:'Fraunces', serif; font-weight:700; color:var(--plum); font-size:1rem; }
.trust-item .l{ font-size:0.6rem; color:var(--muted); }

.section-divider{ display:flex; align-items:center; gap:10px; margin:26px 0 14px; }
.section-divider .ln{ flex:1; height:1px; background:var(--line); }
.section-divider .lb{ font-size:0.6rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); white-space:nowrap; }

.feature-row{ display:flex; gap:10px; margin-bottom:10px; align-items:flex-start; }
.feature-row .fi{ width:38px; height:38px; border-radius:10px; background:var(--plum-soft); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.feature-row .ft{ font-size:0.85rem; font-weight:700; margin-bottom:1px; }
.feature-row .fd{ font-size:0.75rem; color:var(--muted); }

/* ==================================================================
   PROFIL — qo'shimcha bloklar
   ================================================================== */
.profile-preview-card{
  display:flex; justify-content:space-between; align-items:center; padding:12px;
  background:var(--ivory); border-radius:12px; margin-bottom:10px; border:1px solid var(--line);
}
.profile-preview-card .pn{ font-size:0.8rem; font-weight:700; }
.profile-preview-card .pm{ font-size:0.68rem; color:var(--muted); margin-top:2px; }
.quick-link-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick-link{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.quick-link .qi{ font-size:1.1rem; margin-bottom:5px; }
.quick-link .qt{ font-size:0.7rem; font-weight:700; }