:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #090b10;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #090b10;
  --surface: #111620;
  --surface-2: #151b27;
  --surface-3: #191f2d;
  --line: #232a37;
  --muted: #7f899c;
  --accent: #7888ff;
  --accent-bright: #91a0ff;
  --violet: #a58aff;
  --good: #72d6a0;
  --text: #f0f2f7;
  --text-secondary: #b5bdcc;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100dvh; margin: 0; background: radial-gradient(circle at 79% -20%, rgba(120,136,255,.12), transparent 34%), var(--bg); }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 300; top: 10px; left: 10px; transform: translateY(-160%); border-radius: 9px; padding: 10px 13px; background: #f9fafb; color: #141922; font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

/* ==== BUTONLAR ==== */
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #535be0, #7454d8);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(116,84,216,.3); }
.primary-button:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ==== HEADER ==== */
.app-frame { min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
.topbar { position: sticky; z-index: 30; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 76px; padding: 0 clamp(16px, 3.5vw, 38px); border-bottom: 1px solid #202b3b; background: rgba(7,13,24,.92); backdrop-filter: blur(16px); }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; }
.brand-mark { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border: 1px solid #525b9e; border-radius: 9px; background: linear-gradient(145deg,#102643,#091221); color: #91a0ff; font: 800 23px/1 Inter, Arial, sans-serif; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font: 800 16px/1 Inter, Arial, sans-serif; }
.brand-copy small { margin-top: 4px; color: #91a0ff; font-size: 10px; }
.topbar-account { display: flex; align-items: center; gap: 10px; }
.icon-button { position: relative; display: grid; width: 40px; height: 40px; flex: none; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: #0d1625; color: #bcc7d9; transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease); }
.icon-button:hover { transform: translateY(-1px); border-color: #4b73b1; background: #141f30; }
.notification-button svg { width: 18px; height: 18px; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 1px solid var(--bg); border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(120,136,255,.7); }
.notification-dot.is-read { display: none; }
.topbar-divider { width: 1px; height: 25px; background: #28354a; }
.avatar { display: grid; flex: none; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#5e6bcc,#172b4a); color: #e9f2ff; font: 800 11px Inter, Arial, sans-serif; }
.avatar--top { width: 36px; height: 36px; border: 1px solid #525b9e; }
.account-copy { min-width: 0; }
.account-copy strong { display: block; max-width: 140px; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { display: block; margin-top: 3px; overflow: hidden; color: #71839e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

/* ==== ANA İÇERİK ==== */
.main-content { width: min(1040px, 100%); flex: 1; margin: 0 auto; padding: 26px clamp(16px, 4vw, 42px) calc(112px + env(safe-area-inset-bottom)); outline: none; }
.page { width: 100%; min-width: 0; animation: page-enter .28s var(--ease) both; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 2px 0 24px; }
.page-kicker { display: inline-flex; align-items: center; gap: 9px; color: #91a0ff; font-size: 9px; font-weight: 800; letter-spacing: .19em; }
.page-kicker i { width: 22px; height: 1px; background: #91a0ff; box-shadow: 0 0 12px rgba(145,160,255,.75); }
.page-heading h1 { margin: 12px 0 7px; color: var(--text); font: 800 clamp(25px, 5vw, 34px)/1.12 Inter, Arial, sans-serif; letter-spacing: -.045em; }
.page-heading h1 span { background: linear-gradient(110deg,#91a0ff 12%,#91a0ff 52%,#a58aff 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.page-code { flex: none; padding-bottom: 4px; color: #71839e; font: 700 9px Inter, Arial, sans-serif; letter-spacing: .12em; }

/* ==== WELCOME / PROFİL / CHECKER / GEÇMİŞ / DESTEK (Aynı kalır) ==== */
.welcome-panel { position: relative; display: flex; min-height: 222px; align-items: center; overflow: hidden; border: 1px solid #273348; border-radius: 18px; padding: 27px clamp(20px, 4vw, 34px); background: linear-gradient(115deg,rgba(13,18,29,.98),rgba(10,15,25,.72)); isolation: isolate; }
.welcome-panel::before { position: absolute; z-index: -1; top: -150px; right: -100px; width: 310px; height: 310px; border: 1px solid rgba(79,142,255,.22); border-radius: 50%; box-shadow: 0 0 90px rgba(60,112,255,.1); content: ''; }
.welcome-panel-copy { position: relative; z-index: 2; width: min(65%, 500px); }
.welcome-label, .section-label { display: block; color: #8fa2be; font: 800 8px Inter, Arial, sans-serif; letter-spacing: .16em; }
.welcome-panel h2 { margin: 10px 0 8px; color: #eef3fb; font: 800 clamp(22px, 4vw, 30px)/1.14 Inter, Arial, sans-serif; letter-spacing: -.04em; }
.welcome-panel h2 span { color: #a4aeff; }
.welcome-panel p { max-width: 400px; margin: 0; color: #9baac0; font-size: 12px; line-height: 1.55; }
.welcome-art { position: absolute; z-index: 1; right: 0; bottom: 0; display: flex; width: 36%; height: 100%; align-items: flex-end; justify-content: center; overflow: hidden; }
.welcome-art img { position: relative; z-index: 1; display: block; width: min(100%, 235px); height: 118%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 15px 24px rgba(0,0,0,.36)); }
.welcome-art-glow { position: absolute; right: 3%; bottom: -15%; width: 92%; height: 90%; border-radius: 50%; background: radial-gradient(ellipse,rgba(120,136,255,.2),rgba(103,66,206,.1) 45%,transparent 72%); filter: blur(18px); }
.welcome-index { position: absolute; z-index: 2; right: 17px; bottom: 13px; color: #8293ad; font: 700 8px Inter, Arial, sans-serif; letter-spacing: .12em; }
.welcome-index i { margin: 0 4px; color: #53647f; font-style: normal; }
.section-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 25px 0 11px; }
.section-row h2 { margin: 4px 0 0; color: #e7edf7; font: 800 17px/1.2 Inter, Arial, sans-serif; letter-spacing: -.02em; }
.section-caption { padding-bottom: 2px; color: #7689a5; font: 700 8px Inter, Arial, sans-serif; letter-spacing: .11em; }
.profile-panel { overflow: hidden; border: 1px solid #232a37; border-radius: 16px; background: linear-gradient(135deg,#0c1422,#101827); }
.profile-identity { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 16px; }
.avatar--profile { width: 50px; height: 50px; border: 1px solid #525b9e; border-radius: 14px; background: linear-gradient(145deg,#102643,#091221); color: #91a0ff; font-size: 18px; }
.profile-name-block { min-width: 0; flex: 1; }
.profile-type, .detail-label { display: block; color: #7788a1; font: 700 8px Inter, Arial, sans-serif; letter-spacing: .12em; }
.profile-name-block h3 { margin: 5px 0 2px; overflow: hidden; color: #e9eff9; font: 700 14px Inter, Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.profile-name-block p { margin: 0; overflow: hidden; color: #8795aa; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-status { display: inline-flex; flex: none; align-items: center; gap: 6px; border: 1px solid #232a37; border-radius: 7px; padding: 6px 8px; background: rgba(255,255,255,.02); color: #7f899c; font-size: 7px; font-weight: 800; letter-spacing: .06em; }
.profile-status i { width: 5px; height: 5px; border-radius: 50%; background: #697386; }
.profile-status.is-connected { border-color: rgba(97,226,189,.22); background: rgba(97,226,189,.05); color: #9bd9b4; }
.profile-status.is-connected i { background: #61e2bd; box-shadow: 0 0 8px rgba(97,226,189,.55); }
.profile-divider { height: 1px; margin: 0 16px; background: rgba(255,255,255,.07); }
.profile-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 13px 16px 15px; }
.detail-item { min-width: 0; padding: 0 10px; border-right: 1px solid rgba(255,255,255,.06); }
.detail-item:first-child { padding-left: 0; }
.detail-item:last-child { padding-right: 0; border: 0; }
.detail-item strong { display: block; margin-top: 5px; overflow: hidden; color: #c7d2e2; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.privacy-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 2px 0; color: #8492a8; font-size: 10px; line-height: 1.5; }
.privacy-icon { display: grid; width: 15px; height: 15px; flex: none; place-items: center; border: 1px solid #31405a; border-radius: 50%; color: #88a9dc; font-size: 9px; }

.quick-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick-tile { position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px; border: 1px solid #273348; border-radius: 14px; background: linear-gradient(135deg, #0c1422, #101827); color: var(--text); text-align: left; transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease); }
.quick-tile:hover { transform: translateY(-1px); border-color: #4b73b1; }
.quick-tile-icon { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 11px; }
.quick-icon-checker { background: rgba(120,136,255,.12); color: #91a0ff; border: 1px solid rgba(120,136,255,.28); }
.quick-icon-coupon  { background: rgba(255,196,84,.10); color: #ffc454; border: 1px solid rgba(255,196,84,.26); }
.quick-icon-history { background: rgba(114,214,160,.10); color: #72d6a0; border: 1px solid rgba(114,214,160,.26); }
.quick-icon-support { background: rgba(165,138,255,.12); color: #a58aff; border: 1px solid rgba(165,138,255,.28); }
.quick-tile-icon svg { width: 20px; height: 20px; }
.quick-tile-copy { flex: 1; min-width: 0; }
.quick-tile-copy strong { display: block; font-size: 12px; color: #eef3fb; }
.quick-tile-copy small  { display: block; margin-top: 3px; font-size: 10px; color: #8795aa; }
.quick-tile-arrow { color: #52688a; font-size: 15px; }
@media (max-width: 420px) { .quick-tiles { gap: 8px; } .quick-tile { min-height: 66px; padding: 11px; gap: 10px; } .quick-tile-icon { width: 34px; height: 34px; } .quick-tile-copy strong { font-size: 11px; } .quick-tile-copy small { font-size: 9px; } }

.workspace-panel { border: 1px solid #273348; border-radius: 16px; padding: 16px; display: grid; gap: 14px; background: linear-gradient(135deg, #0c1422, #101827); }
.workspace-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.workspace-stat { border: 1px solid #232a37; border-radius: 10px; padding: 10px; background: #0a1220; }
.workspace-stat span { display: block; color: #71839e; font: 700 8px Inter, Arial, sans-serif; letter-spacing: .1em; }
.workspace-stat strong { display: block; margin-top: 4px; color: #eef3fb; font: 800 14px Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.workspace-stat--live strong { color: #72d6a0; }
.workspace-stat--dead strong { color: #ff8686; }
.workspace-stat--rate strong { color: #91a0ff; }
@media (max-width: 520px) { .workspace-stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.field-label { display: block; color: #71839e; font: 700 8px Inter, Arial, sans-serif; letter-spacing: .1em; margin-bottom: 5px; }
.gate-select { position: relative; }
.gate-select-trigger { width: 100%; height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #273348; border-radius: 10px; background: #0a1220; color: #eef3fb; font-size: 12px; text-align: left; }
.gate-chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .16s var(--ease); }
.gate-select-trigger[aria-expanded="true"] .gate-chevron { transform: rotate(180deg); }
.gate-select-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow: auto; border: 1px solid #273348; border-radius: 10px; background: #0a1220; padding: 4px; box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.gate-select-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 10px; border-radius: 7px; border: 0; background: transparent; color: #eef3fb; font-size: 11px; text-align: left; }
.gate-select-option:hover { background: #141c30; }
.gate-select-option.is-selected { background: rgba(120,136,255,.12); color: #fff; }
.gate-premium { padding: 2px 6px; font-size: 8px; font-weight: 800; letter-spacing: .08em; border-radius: 4px; background: rgba(255,196,84,.14); color: #ffc454; }

.card-input textarea { width: 100%; min-height: 140px; padding: 10px 12px; border: 1px solid #273348; border-radius: 10px; background: #0a1220; color: #eef3fb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.55; resize: vertical; }
.card-input textarea:focus { outline: none; border-color: #91a0ff; }

.workspace-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-start, .btn-stop { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid transparent; font: 800 10px Inter, Arial, sans-serif; letter-spacing: .08em; }
.btn-start svg, .btn-stop svg { width: 14px; height: 14px; }
.btn-start { background: linear-gradient(110deg, #3c8fdb, #6050d2); color: #fff; }
.btn-start:disabled { opacity: .5; cursor: not-allowed; }
.btn-stop { background: rgba(255,90,90,.12); color: #ff8686; border-color: rgba(255,90,90,.28); }
.btn-stop:disabled { opacity: .45; cursor: not-allowed; }
.progress-mini { flex: 1; min-width: 80px; height: 6px; border-radius: 99px; background: #0b1627; border: 1px solid #1c2c47; overflow: hidden; }
.progress-mini span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #586ce0, #91a0ff); transition: width .2s; }
.progress-text { color: #71839e; font: 700 10px Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; }

.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (max-width: 640px) { .results-grid { grid-template-columns: 1fr; } }
.results-panel { border: 1px solid #232a37; border-radius: 12px; overflow: hidden; background: #0e1625; }
.results-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #232a37; }
.results-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; font: 800 11px Inter, Arial, sans-serif; color: #eef3fb; }
.count-pill { padding: 2px 7px; border-radius: 5px; font: 800 9px Inter, Arial, sans-serif; }
.count-pill.live { background: rgba(114,214,160,.12); color: #72d6a0; }
.count-pill.dead { background: rgba(255,90,90,.12); color: #ff8686; }
.live-dot, .dead-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.live-dot { background: #72d6a0; box-shadow: 0 0 8px rgba(114,214,160,.55); }
.dead-dot { background: #ff8686; box-shadow: 0 0 8px rgba(255,90,90,.55); }
.results-list { max-height: 280px; overflow: auto; }
.results-empty { padding: 18px 12px; text-align: center; color: #71839e; font-size: 10px; }
.results-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.04); }
.results-row:last-child { border-bottom: 0; }
.results-row .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.results-row .dot.live { background: #72d6a0; }
.results-row .dot.dead { background: #ff8686; }
.results-row strong { display: block; font-family: ui-monospace, monospace; font-size: 11px; color: #eef3fb; }
.results-row small  { display: block; margin-top: 2px; font-size: 9px; color: #71839e; }

/* ==== AYARLAR (SETTINGS) - DÜZELTİLDİ ==== */
.settings-card {
  border: 1px solid #232a37; 
  border-radius: 14px;
  padding: 16px; 
  background: linear-gradient(135deg, #0c1422, #101827);
  margin-bottom: 16px;
}
.settings-card-head { margin-bottom: 16px; }
.settings-card-head h2 { margin: 5px 0 3px; font: 800 16px Inter, Arial, sans-serif; color: #eef3fb; }
.settings-card-head p  { margin: 0; font-size: 11px; color: #8795aa; }
.coupon-form { display: flex; gap: 8px; align-items: stretch; }
.coupon-form input {
  flex: 1; height: 40px; padding: 0 12px;
  border: 1px solid #273348; border-radius: 9px;
  background: #0a1220; color: #eef3fb; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
}
.coupon-form input:focus { outline: none; border-color: #91a0ff; }
.invite-box { display: flex; gap: 8px; align-items: stretch; }
.invite-box code {
  flex: 1; display: flex; align-items: center; padding: 0 12px; border-radius: 9px;
  background: #0a1220; border: 1px solid #273348;
  font-family: ui-monospace, monospace; font-size: 11px; color: #c7d2e2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tg-verify { display: grid; gap: 10px; }
.tg-open-btn {
  display: flex; align-items: center; justify-content: center;
  height: 40px; border-radius: 9px;
  border: 1px solid rgba(120,136,255,.35);
  background: rgba(120,136,255,.10); color: #c2c9ff;
  font: 700 12px Inter, Arial, sans-serif;
  transition: background .16s var(--ease);
}
.tg-open-btn:hover { background: rgba(120,136,255,.15); }
.tg-code-form { display: flex; gap: 8px; align-items: stretch; }
.tg-code-form input {
  flex: 1; height: 40px; padding: 0 12px;
  border: 1px solid #273348; border-radius: 9px;
  background: #0a1220; color: #eef3fb;
  font-family: ui-monospace, monospace; font-size: 14px; letter-spacing: .4em; text-align: center;
}
.settings-notice { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 11px; }
.settings-notice.error   { background: rgba(255,90,90,.10); color: #ff8686; border: 1px solid rgba(255,90,90,.28); }
.settings-notice.success { background: rgba(114,214,160,.10); color: #72d6a0; border: 1px solid rgba(114,214,160,.28); }
.tg-verified { padding: 12px; border-radius: 9px; background: rgba(114,214,160,.10); color: #72d6a0; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* ==== GEÇMİŞ (HISTORY) ==== */
.history-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.history-toolbar input, .history-toolbar select {
  flex: 1; min-width: 130px; height: 38px; padding: 0 10px;
  border: 1px solid #273348; border-radius: 9px;
  background: #0a1220; color: #eef3fb; font-size: 11px;
}
.subtle-button { height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid #273348; background: #101827; color: #bcc7d9; font: 700 11px Inter, Arial, sans-serif; transition: background .16s; }
.subtle-button:hover { background: #151f33; }
.history-table-wrap { overflow-x: auto; border: 1px solid #232a37; border-radius: 12px; background: #0e1625; }
.history-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.history-table th, .history-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.04); text-align: left; white-space: nowrap; }
.history-table th { color: #71839e; font: 700 9px Inter, Arial, sans-serif; letter-spacing: .08em; }
.history-table td { color: #c7d2e2; }
.history-table td.mono { font-family: ui-monospace, monospace; font-size: 10px; color: #eef3fb; }
.history-table .history-empty { padding: 24px; text-align: center; color: #71839e; }
.pill { padding: 3px 8px; border-radius: 5px; font: 800 9px Inter, Arial, sans-serif; }
.pill-live { background: rgba(114,214,160,.12); color: #72d6a0; }
.pill-dead { background: rgba(255,90,90,.12); color: #ff8686; }
.row-copy { padding: 5px 8px; border-radius: 6px; border: 1px solid #273348; background: #101827; color: #bcc7d9; font-size: 9px; }

/* ==== DUYURULAR ==== */
.announcements-list { display: grid; gap: 8px; }
.announcement-card { border: 1px solid #232a37; border-radius: 12px; padding: 12px; background: #0e1625; cursor: pointer; transition: border-color .16s var(--ease); }
.announcement-card:hover { border-color: #2e3e5a; }
.announcement-card.is-read { opacity: .6; }
.announcement-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.announcement-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; background: rgba(120,136,255,.12); color: #91a0ff; font: 800 8px Inter, Arial, sans-serif; letter-spacing: .1em; }
.announcement-card-head small { color: #71839e; font-size: 9px; }
.announcement-card h3 { margin: 0 0 4px; font: 700 12px Inter, Arial, sans-serif; color: #eef3fb; }
.announcement-card p  { margin: 0; font-size: 10px; color: #8795aa; line-height: 1.5; }
.empty-announcements { display: flex; min-height: 260px; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #34435b; border-radius: 16px; padding: 28px 20px; background: rgba(12,18,32,.48); text-align: center; }
.empty-icon { position: relative; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #2e3b55; border-radius: 16px; background: linear-gradient(145deg,#111b2c,#101625); color: #9db8e7; }
.empty-icon span { position: absolute; top: 9px; right: 10px; width: 5px; height: 5px; border-radius: 50%; background: #7888ff; box-shadow: 0 0 9px rgba(120,136,255,.7); }
.empty-kicker { margin-top: 15px; color: #7385a0; font: 800 8px Inter, Arial, sans-serif; letter-spacing: .16em; }
.empty-announcements h2 { margin: 7px 0 4px; color: #e9eff9; font: 800 15px Inter, Arial, sans-serif; }
.empty-announcements p { max-width: 300px; margin: 0; color: #7f899c; font-size: 11px; line-height: 1.5; }

/* ==== DESTEK ==== */
.support-panel { position: relative; display: flex; min-height: 220px; align-items: center; overflow: hidden; border: 1px solid rgba(120,136,255,.3); border-radius: 18px; padding: 24px clamp(20px,4vw,30px); background: linear-gradient(145deg,rgba(19,49,87,.68),rgba(13,22,36,.96)); }
.support-panel-copy { position: relative; z-index: 2; width: min(72%, 520px); }
.support-panel-copy h2 { margin: 8px 0 7px; color: #edf4ff; font: 800 22px/1.2 Inter, Arial, sans-serif; }
.support-panel-copy p { max-width: 400px; margin: 0; color: #91a3ba; font-size: 12px; line-height: 1.6; }
.support-link { display: inline-flex; min-height: 40px; align-items: center; gap: 13px; margin-top: 17px; border: 1px solid rgba(122,165,239,.34); border-radius: 10px; padding: 0 13px; background: rgba(120,136,255,.1); color: #c2c9ff; font-size: 11px; font-weight: 700; transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); }
.support-link:hover { transform: translateY(-1px); border-color: rgba(137,177,248,.62); background: rgba(120,136,255,.18); }
.support-link span { font-size: 15px; }
.support-handle { display: block; margin-top: 8px; color: #7288a7; font: 600 9px Inter, Arial, sans-serif; }
.support-panel-art { position: absolute; top: 0; right: 10px; display: grid; width: 190px; height: 100%; place-items: center; }
.support-orbit { position: absolute; width: 138px; height: 138px; border: 1px solid rgba(100,155,255,.16); border-radius: 50%; box-shadow: 0 0 55px rgba(66,126,236,.11),inset 0 0 30px rgba(125,76,255,.06); }
.support-bubble { position: relative; z-index: 1; display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid #525b9e; border-radius: 17px; background: linear-gradient(145deg,#152c4c,#10192b); color: #9dbfff; box-shadow: 0 16px 35px rgba(0,0,0,.25); transform: rotate(-4deg); }
.support-bubble svg { width: 26px; height: 26px; }
.support-spark { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: #91a0ff; box-shadow: 0 0 12px rgba(165,138,255,.65); }
.support-spark--one { top: 27%; right: 26%; }
.support-spark--two { bottom: 25%; left: 28%; width: 4px; height: 4px; background: #a58aff; }

/* ==== ALT MENÜ ==== */
.bottom-nav { position: fixed; z-index: 50; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%; display: grid; width: min(560px, calc(100% - 24px)); grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; transform: translateX(-50%); border: 1px solid rgba(75,96,128,.62); border-radius: 16px; padding: 6px; background: rgba(9,16,29,.94); box-shadow: 0 16px 42px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(18px); }
.bottom-nav-item { display: flex; min-width: 0; min-height: 49px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #7f899c; font-size: 9px; font-weight: 700; white-space: nowrap; transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.bottom-nav-item svg { width: 18px; height: 18px; flex: none; }
.bottom-nav-item:hover { color: #dce8fb; background: #141c30; }
.bottom-nav-item.is-active { border-color: rgba(78,141,255,.25); background: linear-gradient(100deg,#112e60,#301765); color: #fff; box-shadow: inset 0 0 0 1px rgba(78,141,255,.12); }
.bottom-nav-item:active { transform: scale(.97); }
.toast { position: fixed; z-index: 100; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 16px; width: fit-content; max-width: min(440px, calc(100% - 32px)); margin: 0 auto; border: 1px solid #31435e; border-radius: 10px; padding: 10px 13px; background: #111c2d; color: #dce8f7; font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* ==== GİRİŞ EKRANI (INTRO) ==== */
.intro-gate { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 24px; background: #090b10; isolation: isolate; color: #f3f7ff; transition: opacity .35s ease, visibility .35s ease; }
.intro-gate::before, .intro-gate::after { position: absolute; z-index: -1; inset: auto; border-radius: 999px; content: ''; filter: blur(2px); pointer-events: none; }
.intro-gate::before { top: -24vw; right: -18vw; width: 56vw; height: 56vw; background: radial-gradient(circle,rgba(120,136,255,.18),transparent 66%); }
.intro-gate::after { bottom: -22vw; left: -22vw; width: 48vw; height: 48vw; background: radial-gradient(circle,rgba(132,72,255,.16),transparent 66%); }
.intro-gate.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.intro-orbit { position: absolute; border: 1px solid rgba(101,154,255,.13); border-radius: 50%; transform: rotate(-22deg); pointer-events: none; }
.intro-orbit-one { top: -33%; right: -18%; width: min(68vw,820px); height: min(68vw,820px); box-shadow: 0 0 80px rgba(120,136,255,.08),inset 0 0 60px rgba(125,76,255,.06); }
.intro-orbit-two { bottom: -27%; left: -16%; width: min(42vw,520px); height: min(42vw,520px); border-color: rgba(141,100,255,.11); }
.intro-gate-card { position: relative; display: grid; width: min(1120px,100%); min-height: min(660px,calc(100dvh - 48px)); grid-template-columns: minmax(300px,.92fr) minmax(310px,1.08fr); align-items: center; overflow: hidden; border: 1px solid rgba(133,169,232,.22); border-radius: 26px; background: linear-gradient(135deg,rgba(13,28,50,.96),rgba(7,17,32,.98) 58%,rgba(13,19,43,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.48),0 0 0 1px rgba(43,120,255,.06),inset 0 1px 0 rgba(255,255,255,.06); }
.intro-gate-card::before { position: absolute; inset: 0; background: linear-gradient(115deg,transparent 0 42%,rgba(120,136,255,.05) 42.2%,transparent 42.5% 61%,rgba(143,86,255,.04) 61.2%,transparent 61.5%); content: ''; pointer-events: none; }
.intro-copy { position: relative; z-index: 2; grid-column: 1; grid-row: 1; max-width: 520px; padding: 62px 16px 54px 54px; }
.intro-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #91a0ff; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.intro-eyebrow::before { width: 22px; height: 1px; background: #91a0ff; box-shadow: 0 0 13px rgba(145,160,255,.9); content: ''; }
.intro-copy h1 { margin: 19px 0 10px; color: var(--text); font: 800 clamp(42px,5.1vw,70px)/.96 Inter, Arial, sans-serif; letter-spacing: -.065em; }
.intro-copy h1 span { display: block; background: linear-gradient(110deg,#91a0ff 12%,#91a0ff 52%,#a58aff 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro-copy > p { margin: 0; color: #91a7c5; font-size: 13px; line-height: 1.6; }
.intro-status-row { display: flex; align-items: center; gap: 9px; margin-top: 38px; color: #a4b6cf; font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.intro-status-row strong { margin-left: auto; color: #deebff; font-size: 11px; font-variant-numeric: tabular-nums; }
.intro-status-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #6384aa; box-shadow: 0 0 0 4px rgba(99,132,170,.11); animation: intro-pulse 1.25s ease-in-out infinite; }
.intro-status-dot.is-ready { background: #61e2bd; box-shadow: 0 0 0 4px rgba(97,226,189,.12),0 0 15px rgba(97,226,189,.55); animation: none; }
.intro-progress { height: 7px; overflow: hidden; margin-top: 12px; border: 1px solid rgba(121,163,224,.18); border-radius: 99px; background: #0b1627; box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.intro-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#586ce0,#91a0ff 56%,#a58aff); box-shadow: 0 0 20px rgba(120,136,255,.62); transition: width .08s linear; }
.intro-continue { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: space-between; margin-top: 22px; border: 1px solid rgba(126,160,219,.2); border-radius: 12px; padding: 0 15px; background: rgba(25,46,78,.6); color: #617895; font-size: 11px; font-weight: 800; letter-spacing: .02em; cursor: not-allowed; transition: transform .18s var(--ease),border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease; }
.intro-continue span { font-size: 17px; line-height: 1; }
.intro-continue.is-ready { border-color: rgba(120,136,255,.5); background: linear-gradient(110deg,rgba(56,114,214,.65),rgba(99,80,210,.56)); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(35,127,235,.2),inset 0 1px 0 rgba(255,255,255,.14); }
.intro-continue.is-ready:hover { transform: translateY(-2px); border-color: rgba(145,160,255,.78); box-shadow: 0 12px 30px rgba(35,127,235,.3),0 0 0 4px rgba(120,136,255,.08); }
.intro-continue:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #7fe6ff; outline-offset: 3px; }
.intro-copy > small { display: block; margin-top: 10px; color: #647b9e; font-size: 9px; text-align: center; letter-spacing: .04em; }
.intro-art { position: relative; display: flex; min-width: 0; min-height: 560px; grid-column: 2; grid-row: 1; align-self: stretch; align-items: flex-end; justify-content: center; padding: 25px 20px 0; }
.intro-art-glow { position: absolute; right: 7%; bottom: 1%; width: 72%; height: 75%; border-radius: 50%; background: radial-gradient(ellipse,rgba(120,136,255,.2),rgba(103,66,206,.1) 42%,transparent 72%); filter: blur(24px); }
.intro-art img { position: relative; z-index: 1; display: block; width: min(100%,520px); height: 100%; max-height: 660px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 24px 32px rgba(0,0,0,.38)) drop-shadow(0 0 20px rgba(120,136,255,.12)); animation: intro-float 5s ease-in-out infinite; }

@keyframes page-enter { from { opacity: .65; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes intro-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; box-shadow: 0 0 0 5px rgba(99,132,170,.08),0 0 14px rgba(99,132,170,.32); } }

@media (max-width: 820px) {
  .intro-gate { padding: 14px; }
  .intro-gate-card { min-height: calc(100dvh - 28px); grid-template-columns: 1fr; border-radius: 23px; }
  .intro-copy { max-width: none; grid-column: 1; grid-row: 2; padding: 12px 25px 25px; }
  .intro-copy h1 { margin-top: 13px; font-size: clamp(38px,10vw,48px); }
  .intro-copy > p { font-size: 12px; }
  .intro-status-row { margin-top: 22px; }
  .intro-art { min-height: 0; height: 43dvh; max-height: 410px; grid-column: 1; grid-row: 1; padding: 0 14px; }
  .intro-art img { width: min(100%,360px); max-height: 100%; }
  .intro-art-glow { right: 14%; bottom: 0; width: 72%; height: 80%; }
  .intro-gate-card::before { background: linear-gradient(165deg,transparent 0 40%,rgba(120,136,255,.05) 40.2%,transparent 40.5%); }
}
@media (max-width: 520px) {
  .topbar { height: 68px; }
  .main-content { padding: 18px 14px calc(105px + env(safe-area-inset-bottom)); }
  .topbar-account { gap: 7px; }
  .topbar-divider { height: 21px; }
  .account-copy strong { max-width: 90px; font-size: 10px; }
  .account-copy small { font-size: 9px; }
  .avatar--top { width: 33px; height: 33px; }
  .icon-button { width: 36px; height: 36px; }
  .page-heading { margin-bottom: 18px; }
  .page-heading h1 { max-width: 300px; font-size: 26px; }
  .page-heading p { max-width: 290px; font-size: 11px; }
  .page-code { font-size: 8px; }
  .welcome-panel { min-height: 185px; padding: 20px 17px; }
  .welcome-panel-copy { width: 73%; }
  .welcome-panel h2 { font-size: 22px; }
  .welcome-panel p { max-width: 220px; font-size: 10px; }
  .welcome-art { right: -4px; width: 35%; }
  .welcome-art img { width: 135px; height: 112%; }
  .welcome-index { right: 12px; bottom: 8px; font-size: 7px; }
  .section-row { margin-top: 21px; }
  .section-row h2 { font-size: 15px; }
  .section-caption { font-size: 7px; }
  .profile-identity { gap: 10px; padding: 13px; }
  .avatar--profile { width: 44px; height: 44px; }
  .profile-name-block h3 { font-size: 12px; }
  .profile-name-block p { max-width: 160px; font-size: 9px; }
  .profile-status { gap: 4px; padding: 5px 6px; font-size: 6px; }
  .profile-details { padding: 11px 13px 13px; }
  .detail-item { padding: 0 7px; }
  .detail-item strong { font-size: 8px; }
  .privacy-note { font-size: 9px; }
  .empty-announcements { min-height: 235px; }
  .support-panel { min-height: 205px; padding: 19px 16px; }
  .support-panel-copy { width: 78%; }
  .support-panel-copy h2 { font-size: 19px; }
  .support-panel-copy p { font-size: 10px; }
  .support-panel-art { right: -32px; width: 126px; opacity: .7; }
  .support-orbit { width: 102px; height: 102px; }
  .support-bubble { width: 50px; height: 50px; }
  .support-bubble svg { width: 22px; height: 22px; }
  .bottom-nav { bottom: calc(8px + env(safe-area-inset-bottom)); width: calc(100% - 12px); gap: 2px; padding: 5px; }
  .bottom-nav-item { min-height: 47px; gap: 3px; font-size: 8px; }
  .bottom-nav-item svg { width: 17px; height: 17px; }
  .intro-gate { padding: 10px; }
  .intro-gate-card { min-height: calc(100dvh - 20px); border-radius: 20px; }
  .intro-art { height: 41dvh; }
  .intro-copy { padding: 8px 19px 19px; }
  .intro-copy h1 { font-size: 39px; }
  .intro-status-row { margin-top: 17px; }
  .intro-continue { min-height: 43px; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==== MODALLAR & KANAL ONAY ==== */
.captcha-modal-pro {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px);
  padding: 20px;
}
.captcha-modal-content {
  background: #0e1625; border: 1px solid #273348; border-radius: 16px;
  width: 100%; max-width: 380px; padding: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}

.channel-gate-overlay {
  position: fixed; inset: 0; z-index: 9999; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg);
  background-image: radial-gradient(circle at 50% 0%, rgba(120, 136, 255, 0.1), transparent 50%);
  color: var(--text);
}
.channel-gate-overlay.is-visible { display: flex; }
.channel-gate-content { width: 100%; max-width: 360px; text-align: center; animation: page-enter 0.4s var(--ease) both; }
.channel-gate-brand { font-family: Inter, Arial, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.channel-gate-brand span { color: var(--accent); }
.channel-gate-divider { height: 1px; width: 40px; background: var(--line); margin: 0 auto 24px; }
.channel-gate-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.channel-gate-desc { font-size: 13px; color: var(--muted); margin: 0 0 28px; line-height: 1.5; }
.channel-gate-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.channel-gate-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s var(--ease); }
.channel-gate-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.channel-gate-btn svg { width: 18px; height: 18px; color: var(--accent); }
.channel-gate-continue { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; background: var(--accent); border: none; border-radius: 10px; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(120, 136, 255, 0.2); transition: all 0.2s var(--ease); }
.channel-gate-continue:hover { background: var(--accent-bright); transform: translateY(-1px); }
.channel-gate-continue svg { width: 18px; height: 18px; }
.channel-gate-footer { margin-top: 28px; font-size: 9px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }

/* ==== PRIMARY BUTTON ==== */
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #535be0, #7454d8);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(116,84,216,.3); }
.primary-button:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ==== DİL SEÇİM EKRANI (LANGUAGE GATE) ==== */
.language-gate {
  position: fixed; inset: 0; z-index: 5000;
  display: grid; place-items: center;
  background: var(--bg);
  background-image: radial-gradient(circle at 50% 0%, rgba(120,136,255,.1), transparent 50%);
  padding: 24px;
}
.language-gate-card {
  width: min(420px, 100%);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.language-gate-mark {
  display: inline-grid; width: 56px; height: 56px; place-items: center;
  border: 1px solid #525b9e; border-radius: 16px;
  background: linear-gradient(145deg,#102643,#091221);
  color: #91a0ff; font: 800 28px/1 Inter, Arial, sans-serif;
  margin-bottom: 20px;
}
.language-gate .gate-kicker {
  display: block; color: #91a0ff; font-size: 10px; font-weight: 800; letter-spacing: .2em;
  margin-bottom: 12px;
}
.language-gate h1 {
  font-size: 24px; font-weight: 800; color: var(--text); margin: 0 0 8px; letter-spacing: -.03em;
}
.language-gate p {
  font-size: 13px; color: var(--muted); margin: 0 0 32px;
}
.language-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.language-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 0; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); cursor: pointer;
  transition: all .2s var(--ease);
}
.language-card:hover {
  border-color: var(--accent); background: var(--surface-3); transform: translateY(-2px);
}
.language-card strong {
  font-size: 22px; font-weight: 800; color: var(--accent-bright);
}
.language-card span {
  font-size: 11px; color: var(--muted); font-weight: 500;
}

/* ==== ZARİF GATEWAY TASARIMI ==== */
.gate-select-menu {
  padding: 8px;
  border-radius: 14px;
  border: 1px solid #2a3446;
  background: #111620;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.gate-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #eef3fb;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  transition: all .2s var(--ease);
}
.gate-select-option:hover:not(:disabled) {
  background: #1a2233;
}
.gate-select-option.is-selected {
  background: #1a2233;
  border-color: #4b73b1;
}
.gate-select-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.gate-select-option-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gate-select-lock {
  color: #ffc454;
  width: 14px;
  height: 14px;
}
.gate-premium-badge {
  padding: 3px 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  border-radius: 6px;
  background: rgba(255,196,84,.15);
  color: #ffc454;
  border: 1px solid rgba(255,196,84,.3);
}
/* Sadece gerekli olduğunda görünürlüğü ayarla */
.intro-gate { display: grid; }
.language-gate[hidden], .auth-gate[hidden], .app-frame[hidden] { display: none !important; }

/* ==========================================================================
   LİMİT SATIN AL (KOMPAKT 4 SÜTUN) - EK
   ========================================================================== */
.buy-limit-panel {
  background: var(--bg-card, #11151e);
  border: 1px solid var(--border, rgba(120, 130, 145, 0.18));
  border-radius: var(--radius, 14px);
  padding: 16px;
  margin-bottom: 20px;
}

.buy-limit-desc {
  font-size: 12px;
  color: var(--text-soft, #8b95a1);
  margin: 0 0 14px;
  line-height: 1.45;
}

.buy-limit-packages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.buy-limit-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 4px;
  border: 1px solid var(--border, rgba(120, 130, 145, 0.22));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text, #e8edf2);
  transition: all 0.18s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.buy-limit-pack:hover {
  border-color: var(--accent, #0088cc);
  background: rgba(0, 136, 204, 0.1);
}

.buy-limit-pack.is-selected {
  border-color: var(--accent, #0088cc);
  background: rgba(0, 136, 204, 0.2);
  box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.25);
}

.buy-limit-pack-qty {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.buy-limit-pack-price {
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
}

.buy-limit-custom {
  padding-top: 14px;
  border-top: 1px solid var(--border, rgba(120, 130, 145, 0.18));
}

.buy-limit-custom-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.buy-limit-custom-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-strong, rgba(120, 130, 145, 0.32));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  outline: none;
}

.buy-limit-custom-row input:focus {
  border-color: var(--accent, #0088cc);
}

.buy-limit-custom-row .primary-button {
  flex-shrink: 0;
  min-width: 90px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: var(--accent, #0088cc);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.buy-limit-hint {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-dim, #6b7280);
}