/*
 * FutComp theme layer – loaded LAST on every page, so it wins over page styles.
 * Flat, crisp look: near-black surfaces, 1px borders, solid brand colours (no gradients),
 * Inter up to weight 700 (heavier weights aren't loaded, so 800/900 render as 700).
 */
:root {
    --bg-primary: #0f0f12;
    --bg-secondary: #17171b;
    --bg-tertiary: #212127;
    --bg-card: #17171b;
    --menu-bg: #0b0b0d;
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-accent: #f4f4f5;
    --border-color: #2a2a31;
    --border-hover: #3f3f48;
    --shadow-light: rgba(0, 0, 0, 0.25);
    --shadow-medium: rgba(0, 0, 0, 0.35);
    --accent-primary: #7c3aed;        /* FutComp purple (from the logo) */
    --accent-primary-hover: #6d28d9;
    --accent-link: #a78bfa;
    --accent-secondary: #22c55e;      /* good / cheaper */
    --accent-danger: #ef4444;         /* dearer */
    --accent-warning: #f5b301;        /* coins / stars */
    --accent-similar: #7c3aed;
    --hover-bg: rgba(124, 58, 237, 0.10);
    --radius: 8px;
}

html, body { background: var(--bg-primary); }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
    letter-spacing: -0.005em;
}
h1, h2, h3, .logo, .main-title, .section-title { letter-spacing: -0.02em; }
a { color: var(--accent-link); }
a:hover { color: #c4b5fd; }

/* ---------- navigation ---------- */
.top-nav, .site-nav { background: var(--menu-bg) !important; border-bottom: 1px solid var(--border-color) !important; box-shadow: none !important; }
.site-nav-links { background: var(--menu-bg) !important; border-color: var(--border-color) !important; }
.nav-item, .site-nav-links a { font-weight: 500 !important; border-radius: 6px !important; color: var(--text-secondary) !important; background-image: none !important; }
.nav-item:hover, .site-nav-links a:hover { color: #fff !important; background: var(--bg-tertiary) !important; }
.nav-item.active, .site-nav-links a.active { color: #fff !important; background: var(--bg-tertiary) !important; box-shadow: inset 0 -2px 0 var(--accent-primary) !important; }

/* ---------- surfaces ---------- */
.panel, .card, .gal-card, .grade-block, .table-wrap, .squad-row, .saved-row, .evo-row, .my-evos, .result,
.selection-area, .comparison-container, .player-section, .stat-block, .chart-container, .search-container,
.page-info, .sorting-container, .faq-ext details, .steps-ext li, .contact-info, .section, .feature-card,
.evo-modal, .similar-container, .note, .fo-item, .gcard {
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}
.card:hover, .gal-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--border-hover) !important; }
.card.selected { background: rgba(34, 197, 94, 0.08) !important; border-color: var(--accent-secondary) !important; transform: none !important; }
.card.similar { background: rgba(124, 58, 237, 0.08) !important; border-color: var(--accent-primary) !important; }
.card.selected::before, .card.similar::before { display: none; }

/* ---------- buttons: solid fills, no gradients, no lift ---------- */
.compare-button, .btn.primary, .chrome-btn, .install-btn, .send-btn, .run-btn, .save-evo-btn, .cta, .cta-button,
.evo-modal .actions button.primary, .send-btn, button.primary {
    background: var(--accent-primary) !important;
    background-image: none !important;
    border: 1px solid var(--accent-primary) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}
.compare-button:hover, .btn.primary:hover, .chrome-btn:hover, .install-btn:hover, .send-btn:hover, .run-btn:hover,
.save-evo-btn:hover, .cta:hover, .cta-button:hover, .evo-modal .actions button.primary:hover {
    background: var(--accent-primary-hover) !important; border-color: var(--accent-primary-hover) !important;
}
.compare-button:disabled, .btn.primary:disabled, .run-btn:disabled { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }
.find-similar-button, .clear-button, .btn, .pagination button, .formation-tabs button, .plat button, .platform-toggle button {
    background-image: none !important; border-radius: 6px !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; transform: none !important;
}
.find-similar-button { background: var(--bg-tertiary) !important; border: 1px solid var(--border-hover) !important; color: var(--text-primary) !important; }
.find-similar-button:enabled:hover { border-color: var(--accent-primary) !important; }
.pagination button.active, .formation-tabs button.active, .plat button.active, .price-platform button.active {
    background: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: #fff !important;
}

/* ---------- badges, bars, banners ---------- */
.accelerate-info { background: var(--bg-tertiary) !important; background-image: none !important; color: var(--text-primary) !important; border: 1px solid var(--border-color); border-radius: 6px !important; }
.evo-indicator, .evo-badge { background: var(--accent-primary) !important; background-image: none !important; }
.stat-progress-fill { background: var(--accent-primary) !important; background-image: none !important; }
.ext-promo, .ext-banner {
    background: var(--bg-secondary) !important; background-image: none !important;
    border: 1px solid var(--border-color) !important; border-left: 3px solid var(--accent-primary) !important; border-radius: 6px !important;
}
.price-badge { border-radius: 5px; }
.price-saving.save, .save { color: var(--accent-secondary); }

/* ---------- How To / Privacy / Terms page headers ---------- */
.header { background: var(--bg-secondary) !important; background-image: none !important; border: 1px solid var(--border-color); box-shadow: none !important; border-radius: var(--radius) !important; }
.header::before, .feature-card::before, .step-item::before { display: none !important; }
.main-title { background: none !important; -webkit-text-fill-color: var(--text-primary) !important; color: var(--text-primary) !important; }
.section-title::after { background: var(--accent-primary) !important; background-image: none !important; }
.highlight { background: none !important; -webkit-text-fill-color: var(--accent-link) !important; color: var(--accent-link) !important; }
.badge { background: var(--bg-tertiary) !important; background-image: none !important; border: 1px solid var(--border-color); }

/* ---------- tables ---------- */
th { font-weight: 600 !important; letter-spacing: 0.02em; }
table td, table th { border-bottom-color: var(--border-color) !important; }

/* ---------- quick compare panel ---------- */
html.qc-open { overflow: hidden; }
.qc-bg { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.7); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.qc-bg[hidden] { display: none; }
.qc { width: 100%; max-width: 560px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 1rem; }
.qc-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.qc-head strong { flex: 1; font-size: 1.05rem; }
.qc-plat { display: flex; gap: 0.3rem; }
.qc-plat button { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 6px; padding: 0.3rem 0.65rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.qc-plat button.active { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.qc-x { background: none; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; padding: 0.2rem 0.4rem; }
.qc-slots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.qc-vs { color: var(--text-secondary); font-weight: 700; padding-top: 2.4rem; }
.qc-slot { position: relative; min-height: 132px; background: var(--bg-primary); border: 1px dashed var(--border-hover); border-radius: 8px; padding: 0.6rem; text-align: center; }
.qc-slot.filled { border-style: solid; }
.qc-slot[data-slot="0"].filled { border-color: #ff6b6b; }
.qc-slot[data-slot="1"].filled { border-color: #4ecdc4; }
.qc-slot img { width: 58px; height: 81px; object-fit: contain; display: block; margin: 0 auto 0.3rem; }
.qc-n { font-weight: 600; font-size: 0.9rem; }
.qc-v { color: var(--text-secondary); font-size: 0.75rem; }
.qc-price { margin-top: 0.25rem; font-weight: 600; font-size: 0.85rem; color: var(--accent-warning); }
.qc-clear { position: absolute; top: 0.3rem; right: 0.4rem; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.95rem; }
.qc-search { position: relative; padding-top: 1.6rem; }
.qc-plus { width: 34px; height: 34px; margin: -1rem auto 0.6rem; border-radius: 50%; border: 1px solid var(--border-hover); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--accent-link); }
.qc-search input { width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; padding: 0.55rem; font: inherit; font-size: 0.9rem; outline: none; }
.qc-search input:focus { border-color: var(--accent-primary); }
.qc-sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin-top: 4px; background: var(--menu-bg); border: 1px solid var(--border-color); border-radius: 8px; max-height: 260px; overflow-y: auto; text-align: left; }
.qc-sugg div { display: flex; gap: 0.45rem; align-items: center; padding: 0.35rem 0.5rem; cursor: pointer; font-size: 0.82rem; }
.qc-sugg div:hover { background: var(--bg-tertiary); }
.qc-sugg img { width: 24px; height: 34px; object-fit: contain; }
.qc-result { margin-top: 0.9rem; }
.qc-hint { text-align: center; color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0; }
.qc-table { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.qc-row { display: grid; grid-template-columns: 1fr 100px 1fr; align-items: center; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--border-color); font-size: 0.88rem; }
.qc-row:last-child { border-bottom: none; }
.qc-label { text-align: center; color: var(--text-secondary); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.qc-cell { font-weight: 600; }
.qc-cell.r { text-align: right; }
.qc-cell.win { color: var(--accent-secondary); }
.qc-bar { height: 3px; background: var(--bg-tertiary); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.qc-bar span { display: block; height: 100%; }
.qc-cell.l .qc-bar span { background: #ff6b6b; }
.qc-cell.r .qc-bar span { background: #4ecdc4; margin-left: auto; }
.qc-save { text-align: center; font-size: 0.9rem; margin: 0.7rem 0 0; color: var(--text-secondary); }
.qc-save b { color: var(--accent-secondary); }
.qc-full { display: block; text-align: center; margin-top: 0.8rem; background: var(--accent-primary); color: #fff !important; border-radius: 6px; padding: 0.7rem; font-weight: 600; }
.qc-full:hover { background: var(--accent-primary-hover); text-decoration: none; }
.qc-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--border-hover); background: var(--bg-tertiary); color: var(--text-primary); font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.qc-add:hover { border-color: var(--accent-primary); color: #fff; background: var(--accent-primary); }
@media (max-width: 520px) { .qc-row { grid-template-columns: 1fr 80px 1fr; } .qc { padding: 0.8rem; } }
.qc-add.on { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.qc-tray { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 999; width: calc(100% - 32px); max-width: 480px; display: flex; align-items: center; gap: 0.7rem; background: var(--bg-secondary); border: 1px solid var(--accent-primary); border-radius: 10px; padding: 0.5rem 0.7rem; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.qc-tray[hidden] { display: none; }
.qc-tray img { width: 32px; height: 45px; object-fit: contain; }
.qc-tray-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.85rem; }
.qc-tray-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-tray-t span { color: var(--text-secondary); font-size: 0.78rem; }
.qc-tray-s { background: var(--accent-primary); color: #fff; border: none; border-radius: 6px; padding: 0.45rem 0.8rem; font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; }

/* ---------- community: head-to-head votes + player ratings ---------- */
.h2h-vote { max-width: 640px; margin: 1.25rem auto; }
.qc-vote { margin-top: 0.9rem; }
.cv-h2h { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.8rem; }
.cv-h2h-q { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.cv-h2h-q span { color: var(--text-secondary); font-size: 0.8rem; }
.cv-h2h-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cv-pick { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; min-height: 44px;
  background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; padding: 0.55rem 0.75rem;
  font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; text-align: left; }
.cv-pick:not(.shown) { justify-content: center; }
.cv-pick:hover { border-color: var(--accent-primary); }
.cv-pick.l:not(.shown):hover { border-color: #ff6b6b; } .cv-pick.r:not(.shown):hover { border-color: #4ecdc4; }
.cv-pick .cv-fill { position: absolute; left: 0; top: 0; bottom: 0; opacity: 0.22; transition: width 0.4s ease; }
.cv-pick.l .cv-fill { background: #ff6b6b; } .cv-pick.r .cv-fill { background: #4ecdc4; }
.cv-pick > span:not(.cv-fill) { position: relative; }
.cv-pick .cv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cv-pick .cv-pct { font-weight: 700; }
.cv-pick.mine { border-color: var(--accent-primary); }
.cv-msg { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--text-secondary); text-align: center; }
.cv-msg.err { color: #f87171; }
.cv-panel { padding: 1rem; }
.cv-rating-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.cv-score { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--accent-link); }
.cv-score small { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; }
.cv-score-meta { color: var(--text-secondary); font-size: 0.9rem; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; width: 100%; }
.cv-tag { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary);
  border-radius: 999px; padding: 0.25rem 0.65rem; font: inherit; font-size: 0.8rem; font-weight: 500; }
.cv-tag b { color: var(--text-secondary); font-weight: 600; }
.cv-tags.pick .cv-tag { cursor: pointer; }
.cv-tags.pick .cv-tag:hover { border-color: var(--accent-primary); }
.cv-tag.on { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.cv-form { margin-top: 0.9rem; border-top: 1px solid var(--border-color); padding-top: 0.9rem; }
.cv-label { font-size: 0.85rem; font-weight: 600; margin: 0.2rem 0 0.45rem; }
.cv-scores { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.3rem; margin-bottom: 0.8rem; }
.cv-scores button { min-height: 40px; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.cv-scores button:hover { border-color: var(--accent-primary); }
.cv-scores button.on { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.cv-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; }
.cv-submit { background: var(--accent-primary); color: #fff; border: none; border-radius: 6px; padding: 0.6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; }
.cv-submit:hover { background: var(--accent-primary-hover); }
.cv-submit:disabled { opacity: 0.6; }
.cv-link { background: none; border: none; color: var(--accent-link); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.cv-mine { margin: 0.8rem 0 0; font-size: 0.9rem; color: var(--text-secondary); }
.cv-mine b { color: var(--text-primary); }
.cv-win { color: var(--accent-secondary); } .cv-lose { color: #f87171; }
@media (max-width: 520px) { .cv-scores { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cv-pick.shown { flex-direction: column; align-items: flex-start; gap: 0.1rem; } .cv-pick .cv-name { white-space: normal; } }

/* ---------- adjustable Find Similar ---------- */
.sim-controls { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.9rem; margin: 1rem 0 1.5rem; display: grid; gap: 0.75rem; }
.sim-controls:empty { display: none; }
.sim-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.sim-row label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); }
.sim-controls select { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; padding: 0.4rem 0.5rem; font: inherit; font-size: 0.85rem; min-height: 36px; }
.sim-controls select:focus { border-color: var(--accent-primary); outline: none; }
.sim-check input { accent-color: var(--accent-primary); width: 16px; height: 16px; }
.sim-stats-list { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.sim-stat { display: flex; align-items: center; gap: 0.4rem; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.35rem 0.5rem; }
.sim-name { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-name b { color: var(--accent-link); margin-left: 0.15rem; }
.sim-name small { display: block; color: var(--text-secondary); font-weight: 500; font-size: 0.7rem; }
.sim-remove { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.95rem; padding: 0.3rem; }
.sim-remove:hover { color: #f87171; }
.sim-chip { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.sim-chip:hover { border-color: var(--accent-primary); }
.sim-note { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.sim-stats { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.15rem; }
.sim-stats b { color: var(--text-primary); }
.sim-empty { grid-column: 1 / -1; text-align: center; padding: 1.5rem; color: var(--text-secondary); }
.sim-loose, .sim-loosen { margin-top: 0.5rem; }
@media (max-width: 520px) { .sim-stats-list { grid-template-columns: 1fr; } .sim-controls { padding: 0.75rem; } }
.sim-empty { background: var(--bg-secondary); border: 1px dashed var(--border-hover); border-radius: 8px; }
.sim-empty p { margin: 0 0 0.75rem; }
.sim-chip.sim-loosen { margin-top: 0; background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; padding: 0.5rem 1.1rem; font-size: 0.85rem; }
.sim-chip.sim-loosen:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); }

/* ---------- X (Twitter) follow + share prompts ---------- */
.x-follow { display: flex; align-items: center; gap: 0.85rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.8rem 1rem; margin: 1.25rem 0; }
.x-logo { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #000; border: 1px solid var(--border-hover); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.x-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.x-text strong { font-size: 0.95rem; }
.x-text span { color: var(--text-secondary); font-size: 0.85rem; }
.x-btn { flex-shrink: 0; background: #fff; color: #000 !important; border-radius: 999px; padding: 0.5rem 1rem; font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.x-btn:hover { background: #e5e5e5; text-decoration: none; }
.x-share-row { margin: 0.75rem 0 0; }
.x-post { display: inline-flex; align-items: center; gap: 0.4rem; background: #000; color: #fff !important; border: 1px solid var(--border-hover); border-radius: 999px; padding: 0.45rem 0.95rem; font-weight: 600; font-size: 0.85rem; }
.x-post:hover { border-color: #fff; text-decoration: none; }
@media (max-width: 520px) { .x-follow { flex-wrap: wrap; } .x-btn { width: 100%; text-align: center; } }

/* ---------- tool pages: compact top, explanations below the tool ---------- */
.breadcrumbs { margin-bottom: 0.75rem !important; font-size: 0.8rem !important; }
.tool-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
.tool-head h1 { font-size: 1.55rem; margin: 0; line-height: 1.2; }
.tool-head .tool-sub { flex-basis: 100%; color: var(--text-secondary); font-size: 0.85rem; margin: -0.2rem 0 0; }
.about-tool { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
.about-tool h2 { font-size: 1.05rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.about-tool p { margin: 0 0 0.6rem; }
@media (max-width: 640px) { .tool-head h1 { font-size: 1.3rem; } main { padding-top: 0.9rem !important; } }

/* ---------- inside the FutComp store apps: no "get the app" or desktop extension prompts ---------- */
html.in-app .get-app-link, html.in-app #ext-promo, html.in-app .ext-banner, html.in-app .pwa-install, html.in-app [data-app-install] { display: none !important; }
/* in the store apps: no site footer (its links live in the app's menu / More screen) */
html.in-app footer.footer, html.in-app body > footer, html.in-app .site-footer { display: none !important; }
html.in-app main, html.in-app .main-content { padding-bottom: 1.5rem; }
/* Contact / Privacy / Terms in the menu: only inside the Android app (iOS has a native More screen) */
.app-menu-only { display: none !important; }
html.in-app:not(.in-ios-app):not(.in-native-app) .app-menu-only { display: block !important; }

/* ---------- inside the store apps: tool only, no website-style writing ---------- */
html.in-app .breadcrumbs, html.in-app .tool-sub, html.in-app .about-tool, html.in-app .seo-prose,
html.in-app .x-follow, html.in-app .home-sub, html.in-app .swipe-hint { display: none !important; }
html.in-app .tool-head { margin-bottom: 0.5rem; }
html.in-app main { padding-top: 0.9rem !important; }
/* native iOS / Android apps: their tab bar and More screen replace the site's header and menu */
html.in-ios-app nav.top-nav, html.in-ios-app .site-nav,
html.in-native-app nav.top-nav, html.in-native-app .site-nav { display: none !important; }
html.in-ios-app body { padding-top: env(safe-area-inset-top, 0); }
/* menu button: force light lines (some Android Chrome setups drew them dark on dark) */
.nav-toggle, .site-nav .toggle { -webkit-appearance: none; appearance: none; color: #f4f4f5 !important; background-color: transparent; }
.nav-toggle span, .site-nav .toggle span { background-color: #f4f4f5 !important; min-height: 2px; }
/* store apps: the Chrome extension doesn't apply on phones */
html.in-app .ext-banner, html.in-app .ext-promo, html.in-app .ext-tip { display: none !important; }