/* ============================================================
   Go Go Korea — v53 «гэрэлтсэн хөх» загвар
   styles.css-ийн дараа ачаална. Хуучин загварыг даран бичнэ.
   Суурь: гүн navy · Ирмэг: цэнхэр→ягаан туяа · Аксент: cyan→blue
   ============================================================ */
:root {
  --bg:   #030A24;
  --bg-2: #06123A;
  --bg-3: #0B1D57;
  --surface:   rgba(18, 36, 104, 0.42);
  --surface-2: rgba(16, 32, 96, 0.55);
  --line:   rgba(96, 140, 255, 0.18);
  --line-2: rgba(110, 150, 255, 0.34);
  --glow:   rgba(59, 107, 255, 0.45);
  --edge: linear-gradient(135deg, #4FA8FF, #5B6BFF 45%, #A98BFF);
  --grad: linear-gradient(90deg, #22D3EE, #3B6BFF 55%, #7C6BFF);
  --ic-cut: #18205E;
}
html, body { background: var(--bg); }
#app {
  background:
    radial-gradient(420px 320px at 12% -4%, rgba(59,107,255,.30), transparent 62%),
    radial-gradient(380px 340px at 100% 38%, rgba(124,107,255,.16), transparent 62%),
    radial-gradient(120% 60% at 50% -8%, var(--bg-3) 0%, var(--bg-2) 42%, var(--bg) 100%);
}

/* ---------- Гэрэлтсэн ирмэг (нийтлэг) ---------- */
.e53 { position: relative; }
.e53::before, .block::before, .acc-item::before, .g-list::before, .detail-header::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px;
  background: var(--edge); opacity: .7; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.block { position: relative; background: linear-gradient(160deg, rgba(34,62,170,.30), rgba(8,18,64,.55)); border-color: transparent; box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 24px rgba(59,107,255,.10); }
.acc-item { position: relative; border-color: transparent !important; background: rgba(10,22,74,.5); box-shadow: 0 10px 26px rgba(0,0,0,.3), 0 0 20px rgba(59,107,255,.10); }
.detail-body .acc-summary, .sub-body .acc-summary { background: linear-gradient(160deg, rgba(40,70,190,.30), rgba(10,20,70,.45)); }
.detail-header { background: rgba(4,12,44,.72); border-bottom: 0; }
.detail-header::after { inset: auto 0 0 0; height: 1.3px; padding: 0; -webkit-mask: none; mask: none; border-radius: 0; opacity: .55; }
.back-btn { background: rgba(10,24,80,.6); border-color: var(--line-2); color: #8FC0FF; box-shadow: 0 0 14px rgba(59,107,255,.25); }
.detail-body, .sub-body { --sg1: #12256A; --sg2: #1B3190; }

/* ---------- Гэрэлтдэг icon ---------- */
.gi { --s: 44px; font-style: normal; position: relative; width: var(--s); height: var(--s); flex: 0 0 auto;
  border-radius: calc(var(--s) * .3); display: grid; place-items: center;
  background: radial-gradient(120% 90% at 28% 12%, rgba(140,170,255,.55), transparent 55%), linear-gradient(160deg, #22307F, #0C1440 70%);
  box-shadow: 0 6px 18px rgba(40,90,255,.35), 0 0 22px rgba(110,120,255,.22), inset 0 1px 0 rgba(255,255,255,.22); }
.gi::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.gi svg { width: 58%; height: 58%; color: #ECEAFF; filter: drop-shadow(0 0 5px rgba(180,190,255,.75)); position: relative; }
.gi svg .c { fill: var(--ic-cut); }
.gi.lg { --s: 56px; } .gi.sm { --s: 36px; } .gi.xl { --s: 72px; }
/* v56 — нэгдсэн нимгэн шугаман icon (үндсэн цэс, хэрэгслийн карт) */
.gi.ln svg { width: 56%; height: 56%; stroke-width: 1.7; filter: drop-shadow(0 0 6px rgba(180,190,255,.55)); }
.gi.ln.lg svg { stroke-width: 1.6; }
.gi.ln { background: radial-gradient(120% 90% at 30% 10%, rgba(150,178,255,.42), transparent 58%), linear-gradient(160deg, #1D2A72, #0A1236 72%); }
.gi.red { background: radial-gradient(120% 90% at 28% 12%, rgba(255,160,180,.5), transparent 55%), linear-gradient(160deg, #7A1F45, #2A0A22 70%);
  box-shadow: 0 6px 18px rgba(255,80,120,.35), 0 0 22px rgba(255,95,122,.25), inset 0 1px 0 rgba(255,255,255,.2); }
.gi.red::before { background: linear-gradient(135deg, #FF8FA8, #FF5F7A 50%, #C08BFF); }
.gi.red svg .c { fill: #4A0F2A; }

/* ---------- Дэд хэсгийн жагсаалт (бүлэглэсэн) ---------- */
.g-grp { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #BCC9EA; margin: 10px 6px -4px; }
.g-list { position: relative; border-radius: 20px; background: rgba(10,22,74,.5); box-shadow: 0 12px 30px rgba(0,0,0,.3), 0 0 24px rgba(59,107,255,.10); display: flex; flex-direction: column; overflow: hidden; }
.g-list .g-row { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 11px 14px; cursor: pointer; background: none; border: 0; border-radius: 0; box-shadow: none; transition: background .15s; }
.g-list .g-row::after { display: none; }
.g-list .g-row + .g-row { border-top: 1px solid var(--line); }
.g-list .g-row:active { background: rgba(59,107,255,.14); transform: none; }
.g-list .g-row .nav-title { font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.35; }
.g-list .g-row .nav-arrow { color: #B4C3E6; font-size: 20px; }
.acc-summary .gi { margin-right: 2px; }

/* Хэрэгслийн холбоос (tool) */
.t53 { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; width: 100%; padding: 13px 14px; border-radius: 20px; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text);
  background: linear-gradient(135deg, rgba(47,107,255,.38), rgba(109,91,255,.18)); box-shadow: 0 0 30px rgba(59,107,255,.22); }
.t53 b { display: block; font-size: 15px; line-height: 1.25; }
.t53 small { display: block; font-size: 12px; color: #BFD2F7; margin-top: 2px; }
.t53 .ar { color: #9FB8EE; font-size: 20px; }

/* ---------- Нүүр ---------- */
#homeScreen .home-header { padding: calc(16px + env(safe-area-inset-top)) 18px 6px; text-align: left; }
#homeScreen .home-header > :not(.h53) { display: none !important; }
.h53 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h53-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.h53 .globe { width: 44px !important; height: 44px !important; flex: 0 0 auto; }
.h53 .globe .globe-halo { inset: -30%; }
.h53-name { font-family: var(--wordmark); font-size: 23px; font-weight: 800; line-height: 1; color: #fff; }
.h53-greet { font-size: 12.5px; color: #CAD6F0; font-weight: 700; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.h53-sos { display: flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer; color: #FFB3C0; font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
#homeScreen .sections { margin-top: 12px; padding: 0 16px; gap: 12px; }
#homeScreen .sections > .section-card, #homeScreen .sections > .sections-duo, #homeScreen .promo-bar, #ggkTools { display: none !important; }
.g53grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.g53tile { position: relative; border-radius: 22px; padding: 14px 13px 13px; min-height: 156px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; text-align: left; font: inherit; color: var(--text); border: 0;
  background: linear-gradient(160deg, rgba(40,70,190,.38), rgba(10,20,70,.58)); box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 26px rgba(59,107,255,.12); transition: transform .15s; }
.g53tile:active { transform: scale(.97); }
.g53tile b { display: block; font-size: 15px; line-height: 1.22; margin-top: 12px; }
.g53tile .tx > span { display: block; font-size: 11.5px; color: #CAD6F0; line-height: 1.35; margin-top: 4px; }
.g53tile.wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 13px; justify-content: flex-start; }
.g53tile.wide b { margin-top: 0; }
.f53 { display: flex; justify-content: space-between; align-items: center; margin: 18px 18px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.f53 button { background: none; border: 0; color: #C2CEEC; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 2px; }
#homeScreen .user-bar { display: none; }
#homeScreen .copyright { opacity: .6; }

/* Имэйл холбох карт (өмнө нэвтэрсэн хэрэглэгчид) */
.m53 { position: relative; border-radius: 20px; padding: 14px; background: rgba(10,22,74,.55); box-shadow: 0 0 24px rgba(59,107,255,.12); }
.m53 b { display: block; font-size: 14px; } .m53 p { font-size: 12.5px; color: #CAD6F0; margin: 3px 0 10px; }
.m53 .row { display: flex; gap: 8px; }
.m53 input[type=email] { flex: 1; min-width: 0; background: rgba(6,16,58,.8); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 12px; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.m53 .go { border: 0; border-radius: 12px; padding: 0 14px; font: inherit; font-weight: 800; color: #fff; background: linear-gradient(120deg, #2F6BFF, #6D5BFF); cursor: pointer; }
.m53 label { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #CAD6F0; margin-top: 9px; }
.m53 .x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: #B4C3E6; font-size: 16px; cursor: pointer; }

/* Визийн зам ба хугацааны баннер — «дараагийн алхам» карт */
.vz-entry { background: linear-gradient(135deg, rgba(47,107,255,.40), rgba(109,91,255,.20)) !important; border: 0 !important; position: relative; box-shadow: 0 0 30px rgba(59,107,255,.25) !important; }
.vz-entry::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; background: var(--edge); opacity: .75; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- Нэвтрэх: имэйл ---------- */
.login-form .mk53 { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-soft); margin: 2px 2px 14px; cursor: pointer; }
.login-form .mk53 input { width: 17px; height: 17px; accent-color: #3B6BFF; flex: 0 0 auto; }
.btn-primary { background: linear-gradient(120deg, #2F6BFF, #6D5BFF) !important; box-shadow: 0 8px 26px rgba(59,107,255,.45) !important; }

/* ---------- Тавтай морил (1.3 сек) ---------- */
.w53 { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .3s;
  background: radial-gradient(380px 320px at 50% 32%, rgba(59,107,255,.36), transparent 66%), #030A24; }
.w53.on { opacity: 1; pointer-events: auto; }
.w53-in { width: 100%; max-width: 380px; text-align: center; }
.w53 .globe { width: 150px; height: 150px; margin: 0 auto 26px; }
.w53.on .globe .globe-media { animation: w53hue 1.3s linear forwards; }
@keyframes w53hue { 0% { filter: drop-shadow(0 0 20px var(--glow)) hue-rotate(0); } 55% { filter: drop-shadow(0 0 28px rgba(34,211,238,.7)) hue-rotate(-45deg) saturate(1.3); } 100% { filter: drop-shadow(0 0 30px rgba(169,139,255,.8)) hue-rotate(35deg) brightness(1.12); } }
.w53-card { position: relative; border-radius: 24px; padding: 22px 20px; background: rgba(18,36,104,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 44px rgba(59,107,255,.32); }
.w53-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--edge); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.w53-card small { font-size: 12px; color: #CAD6F0; font-weight: 700; }
.w53-card h3 { font-family: var(--wordmark); font-size: 31px; margin: 4px 0 2px; line-height: 1.1; color: #fff; }
.w53-card p { font-size: 13.5px; color: #CAD6F0; margin: 0 0 16px; }
.w53-bar { height: 12px; border-radius: 12px; background: rgba(10,24,80,.85); border: 1px solid var(--line-2); overflow: hidden; }
.w53-bar i { display: block; height: 100%; width: 0; border-radius: 12px; background: var(--grad); box-shadow: 0 0 14px rgba(34,211,238,.6); }
.w53-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-top: 8px; color: #DCE6FF; }
.w53-row b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .w53.on .globe .globe-media { animation: none; } }
.login-form #emailInput { letter-spacing: 0; font-size: 16px; padding: 15px 18px; margin-bottom: 16px; }
.login-form #emailInput::placeholder { letter-spacing: 0; }
.login-form #codeInput { margin-bottom: 12px; }
.login-form label.mk53 { display: flex; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12.5px; margin: 0 2px 14px; }
.login-form label.mk53 input { width: 17px; height: 17px; padding: 0; margin: 0; border-radius: 4px; flex: 0 0 auto; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* v58 — нэвтрэх дэлгэцийн багцын мөр */
.plan-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 10px}
.plan-strip a{position:relative;display:block;text-align:center;padding:13px 4px 11px;border-radius:14px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line-2)}
.plan-strip a.best{border-color:#22D3EE;box-shadow:0 0 18px rgba(34,211,238,.28)}
.plan-strip i{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-style:normal;font-size:9.5px;font-weight:800;
  padding:2px 8px;border-radius:99px;background:#22D3EE;color:#03122e;white-space:nowrap}
.plan-strip b{display:block;font-size:12.5px;font-weight:700;opacity:.85}
.plan-strip span{display:block;margin-top:3px;font-size:16px;font-weight:800;color:#7FE3FF}