.msk-wrap {
  --c-clay:#8B4513; --c-rust:#A0522D; --c-sand:#E8D5B7; --c-ivory:#FAF5ED; --c-parch:#F0E6D3;
  --c-ink:#2C1810; --c-muted:#7A6352; --c-line:rgba(139,69,19,.18); --c-gold:#B8860B; --c-gold-lt:#D4A853;
  --c-green:#2d6a4f; --c-err:#a3261b;
  display:flex; justify-content:center; padding:32px 16px 48px;
  font-family:'Noto Serif', Georgia, serif; color:var(--c-ink);
  background:var(--c-ivory);
  background-image:radial-gradient(circle at 20% 20%, rgba(168,90,30,.06) 0%, transparent 55%),
                   radial-gradient(circle at 80% 80%, rgba(184,134,11,.05) 0%, transparent 55%);
}
.msk-wrap *, .msk-wrap *::before, .msk-wrap *::after { box-sizing:border-box; }
.msk-hidden { display:none !important; }

.msk-card { width:100%; max-width:440px; background:var(--c-ivory); border:1px solid var(--c-line); border-radius:18px;
  box-shadow:0 2px 4px rgba(44,24,16,.04), 0 12px 40px rgba(44,24,16,.10); overflow:hidden; }
.msk-header { background:var(--c-parch); border-bottom:1px solid var(--c-line); padding:18px 24px; text-align:center; }
.msk-brand { font-size:1.15rem; font-weight:500; color:var(--c-clay); letter-spacing:.04em; }
.msk-hero { display:none; }
.msk-body { padding:24px 28px 30px; }

.msk-ornament { text-align:center; color:var(--c-gold); letter-spacing:6px; margin:10px 0; opacity:.55; }
.msk-title { font-size:1.45rem; text-align:center; line-height:1.3; margin-bottom:6px; }
.msk-subtitle { text-align:center; color:var(--c-muted); font-size:.85rem; margin-bottom:20px; }

.msk-gender-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.msk-gender-btn { border:1px solid var(--c-line); border-radius:12px; background:var(--c-parch); padding:22px 12px 18px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:10px; font:inherit; font-size:1.1rem; font-weight:500; color:var(--c-ink);
  transition:border-color .2s, box-shadow .2s, background .2s; }
.msk-gender-btn:hover { border-color:var(--c-gold-lt); box-shadow:0 4px 16px rgba(139,69,19,.10); }
.msk-gender-btn.is-selected { border-color:var(--c-clay); background:#fff; }

.msk-back { background:none; border:0; padding:0; margin-bottom:14px; color:var(--c-muted); font:inherit; font-size:.85rem; cursor:pointer; }
.msk-back:hover { color:var(--c-clay); }
.msk-label { display:block; font-size:.72rem; font-weight:500; color:var(--c-muted); letter-spacing:.07em; text-transform:uppercase; margin:0 0 6px; }
.msk-input { display:block; width:100%; border:1px solid var(--c-line); border-radius:8px; padding:10px 12px; margin:0 0 14px; background:#fff;
  font:inherit; font-size:16px; color:var(--c-ink); -webkit-appearance:none; appearance:none; }
.msk-input:focus { outline:none; border-color:var(--c-clay); box-shadow:0 0 0 3px rgba(139,69,19,.10); }
.msk-input:disabled { background:var(--c-parch); color:var(--c-muted); }
.msk-dob-row { display:grid; grid-template-columns:1fr 1.3fr 1.2fr; gap:8px; }
.msk-check { display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--c-ink); margin:-6px 0 16px; cursor:pointer; }
.msk-check input { width:18px; height:18px; accent-color:var(--c-clay); }

.msk-ac { position:relative; }
.msk-ac .msk-input { margin-bottom:4px; }
.msk-ac-list { position:absolute; z-index:20; left:0; right:0; top:100%; margin:0; padding:4px 0; list-style:none; background:#fff;
  border:1px solid var(--c-line); border-radius:8px; box-shadow:0 8px 24px rgba(44,24,16,.12); max-height:260px; overflow-y:auto; }
.msk-ac-list li { padding:9px 12px; cursor:pointer; font-size:.95rem; }
.msk-ac-list li small { color:var(--c-muted); margin-left:6px; }
.msk-ac-list li.is-active, .msk-ac-list li:hover { background:var(--c-parch); }
.msk-hint { font-size:.78rem; color:var(--c-muted); margin:0 0 16px; }

.msk-error { background:#fdecea; color:var(--c-err); border-radius:8px; padding:8px 12px; font-size:.88rem; margin-bottom:12px; }
.msk-submit { width:100%; padding:13px; border:0; border-radius:10px; background:var(--c-clay); color:var(--c-sand);
  font:inherit; font-size:1.15rem; font-weight:500; letter-spacing:.03em; cursor:pointer; transition:background .2s; }
.msk-submit:hover { background:var(--c-rust); }
.msk-privacy { font-size:.75rem; color:var(--c-muted); text-align:center; margin-top:10px; }

.msk-loading { text-align:center; padding:20px 0 10px; }
.msk-spinner { width:64px; height:64px; animation:msk-spin 3s linear infinite; }
@keyframes msk-spin { to { transform:rotate(360deg); } }
.msk-loading-msg { font-style:italic; color:var(--c-clay); min-height:3em; margin-top:16px; }

/* ---------- result ---------- */
.msk-result { display:none; padding:28px 24px 32px; text-align:center; }
.msk-card.is-result { max-width:540px; background:var(--c-parch); }
.msk-card.is-result .msk-result { display:block; }
.msk-card.is-result .msk-hide-on-result { display:none !important; }

.msk-r-name { font-size:.95rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-muted); }
.msk-r-head { font-size:1.4rem; line-height:1.3; margin:4px 0 20px; }
.msk-r-window { background:#fff; border:1px solid rgba(139,69,19,.25); border-radius:14px; padding:18px 20px; margin:0 auto 14px; max-width:380px;
  box-shadow:0 4px 20px rgba(139,69,19,.08); }
.msk-r-window-label { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted); }
.msk-r-window-value { font-size:1.75rem; font-weight:700; color:var(--c-clay); line-height:1.25; margin:6px 0 2px; }
.msk-r-badge { display:inline-block; font-size:.78rem; font-weight:500; padding:3px 10px; border-radius:999px; margin-top:6px; }
.msk-r-badge.strong { background:#e3efe8; color:var(--c-green); }
.msk-r-badge.medium { background:#f6ecd8; color:#8a5a00; }
.msk-r-badge.weak { background:#efe7e2; color:var(--c-muted); }

.msk-r-section { text-align:left; background:var(--c-ivory); border:1px solid var(--c-line); border-radius:12px; padding:14px 16px; margin:12px 0 0; }
.msk-r-section h4 { font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); margin:0 0 8px; }
.msk-r-section ul { margin:0; padding-left:18px; } .msk-r-section li { margin:4px 0; font-size:.93rem; line-height:1.45; }
.msk-r-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; font-size:.9rem; }
.msk-r-grid span { display:block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); }
.msk-r-gochar li.is-best { font-weight:700; }
.msk-r-fun { font-size:.9rem; }
.msk-r-fun b { color:var(--c-clay); }
.msk-r-note { font-size:.8rem; color:var(--c-muted); margin-top:6px; }
.msk-r-disclaimer { font-size:.75rem; color:var(--c-muted); margin:16px 0 0; line-height:1.5; }

.msk-r-actions { display:flex; flex-direction:column; gap:10px; max-width:340px; margin:20px auto 0; }
.msk-r-wa { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:9px; background:var(--c-green);
  color:#fff !important; text-decoration:none !important; font-size:.92rem; font-weight:500; }
.msk-r-wa:hover { background:#245a42; }
.msk-r-reset { padding:11px; border-radius:9px; border:1px solid rgba(139,69,19,.25); background:transparent; color:var(--c-muted);
  font:inherit; font-size:.88rem; cursor:pointer; }
.msk-r-reset:hover { border-color:var(--c-clay); color:var(--c-clay); }

@media (min-width:960px) {
  .msk-card { max-width:900px; display:grid; grid-template-columns:42% 58%; grid-template-rows:auto 1fr; }
  .msk-header { grid-column:1 / -1; }
  .msk-hero { display:block; position:relative; overflow:hidden; }
  .msk-hero img { width:100%; height:100%; object-fit:cover; display:block; filter:sepia(15%) saturate(90%); }
  .msk-hero-overlay { position:absolute; inset:0; background:linear-gradient(to right, transparent 60%, var(--c-ivory) 100%); }
  .msk-body { border-left:1px solid var(--c-line); }
  .msk-card.is-result { display:block; max-width:580px; }
}
@media (max-width:300px) { .msk-r-grid { grid-template-columns:1fr; } }

/* theme ke button/link fonts override na karein */
.msk-wrap, .msk-wrap * { font-family:'Noto Serif', Georgia, serif !important; }
.msk-wrap button, .msk-wrap a { letter-spacing:normal; text-transform:none; }

/* mobile: theme ka padding pehle se hai, isliye andar ki parten patli rakho */
@media (max-width:600px) {
  .msk-wrap { padding:12px 0 24px; background:none; }
  .msk-card { border-radius:14px; }
  .msk-header { padding:14px 16px; }
  .msk-body { padding:20px 16px 24px; }
  .msk-result { padding:20px 12px 24px; }
  .msk-r-window { padding:14px 12px; }
  .msk-r-window-value { font-size:1.45rem; }
  .msk-r-section { padding:12px; }
  .msk-r-section ul { padding-left:16px; }
  .msk-r-section li { font-size:.9rem; }
  .msk-r-wa { font-size:.88rem; }
}

/* phone: header ek line mein */
@media (max-width:600px) {
  .msk-brand { font-size:1rem; letter-spacing:.01em; white-space:nowrap; }
}
@media (max-width:340px) { .msk-brand { font-size:.9rem; } }