:root {
  --bg: #ffffff;
  --fg: #111827;
  --muted: #6b7280;
  --panel: #ffffff;
  --border: #e5e7eb;
  --accent: #2563eb;
  --ok: #16a34a;
  --danger: #dc2626;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
}
:root[data-theme="dark"] {
  --bg: #0b0d12;
  --fg: #e5e7eb;
  --muted: #9aa4b2;
  --panel: #0f1524;
  --border: #223052;
  --accent: #7c9cff;
  --ok: #34d399;
  --danger: #f87171;
  --shadow: 0 10px 16px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d12;
    --fg: #e5e7eb;
    --muted: #9aa4b2;
    --panel: #0f1524;
    --border: #223052;
    --accent: #7c9cff;
    --ok: #34d399;
    --danger: #f87171;
    --shadow: 0 10px 16px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif;
  background: var(--bg);
  color: var(--fg);
}

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

/* Header */
header {
  position: sticky; top: 0;
  display: flex; gap: 12px; align-items: center;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
header h1 { margin: 0; font-size: 1.1rem; }
header .spacer { flex: 1; }
.btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.btn.ok { background: var(--ok); color: #fff; border-color: transparent; }
.btn.danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn.small { padding: 6px 10px; font-size: .9rem; }
.status { color: var(--muted); font-size: .9rem; }

/* Landing (vertical list) */
.landing { padding: 16px; max-width: 980px; margin: 0 auto; }
.landing h2 { margin: 8px 4px 12px; font-size: 1.25rem; }
.list { display: flex; flex-direction: column; gap: 14px; }
.card {
  display: flex; gap: 12px; align-items: center;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.icon {
  width: 72px; height: 72px; border-radius: 16px; overflow: hidden; flex: 0 0 auto;
  border: 1px solid var(--border);
}
.icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meta { flex: 1; min-width: 0; }
.title { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storeRow { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.storeBtn, .goBtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: .9rem; line-height: 1;
}
.goBtn { margin-left: auto; }

/* Screens */
.screen { display: none; }
.screen.active { display: block; }

/* Tracker */
.breadcrumbs { font-size: .9rem; color: var(--muted); margin: 12px 16px 0; }
.collections { margin: 12px auto 24px; padding: 0 16px; max-width: 980px; }
.collectionsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.collection {
  padding: 12px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.collection h3 { margin: 0 0 8px; font-size: 1rem; }
.collection .tools { display:flex; gap: 8px; margin: 6px 0 10px; }
.row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.row input { width: 18px; height: 18px; }
.sendable { color: var(--ok); font-weight: 600; }
#toSend {
  margin: 0 auto 20px; max-width: 980px;
  background: var(--panel); border: 1px solid var(--border); padding: 12px; border-radius: 14px; box-shadow: var(--shadow);
}

/* Export/Import panel */
#toolsPanel { margin: 0 auto 40px; max-width: 980px; padding: 12px 16px; background: var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow: var(--shadow); }
#toolsPanel .rowbtns { display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
#stateArea { width: 100%; min-height: 80px; padding: 8px; border-radius: 8px; border:1px solid var(--border); background: var(--bg); color: var(--fg); }


/* --- Buttons (theme-aware) --- */
.storeBtn, .goBtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  font-size: .9rem; line-height: 1;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: pointer;
  user-select: none;
  transition: transform .05s ease, box-shadow .15s ease, opacity .15s ease;
}
.storeBtn:active, .goBtn:active { transform: translateY(1px); }
.storeBtn:hover, .goBtn:hover { opacity: .95; }

/* Light theme */
:root[data-theme="light"] .goBtn,
:root:not([data-theme="dark"]) .goBtn {
  background: #2563eb;
  color: #ffffff;
  border-color: #1e4fd6;
}
:root[data-theme="light"] .storeBtn,
:root:not([data-theme="dark"]) .storeBtn {
  background: #ffffff;
  color: #111827;
}

/* Dark theme */
:root[data-theme="dark"] .goBtn {
  background: #334155;
  color: #e5e7eb;
  border-color: #475569;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .goBtn {
    background: #334155;
    color: #e5e7eb;
    border-color: #475569;
  }
}

:root[data-theme="dark"] .storeBtn {
  background: #0f1524;
  color: #e5e7eb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .storeBtn {
    background: #0f1524;
    color: #e5e7eb;
  }
}

:root[data-theme="dark"] .storeBtn,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .storeBtn {
  background: #0f1524;
  color: #e5e7eb;
} }


/* --- Suggestion panel buttons --- */
.btn.block { display:block; width:100%; text-align:center; padding:12px 14px; border-radius:12px; font-weight:600; }
.btn.ok    { background:#22c55e; color:#fff; border: none; }
.btn.ok:hover { background:#16a34a; }
.btn.primary { background:#3b82f6; color:#fff; border: none; }
.btn.primary:hover { background:#2563eb; }
.btn.danger { background:#ef4444; color:#fff; border: none; }
.btn.danger:hover { background:#dc2626; }

#toSend pre, #toSend .textlike {
  background: var(--bg);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 8px;
  margin: 8px 0 12px;
  white-space: pre-wrap;
}
.suggestBtns { display:flex; flex-direction:column; gap:10px; margin-top:10px; }

#toSendList{display:none}

/* Карточки, которые нельзя отправить */
.non-sendable {
    color: #FFD700; /* Золотой цвет */
    font-weight: 600;
}

/* Светлая тема: мягкая подсветка */
html[data-theme="light"] .non-sendable {
    color: #B8860B; /* тёмно-золотой для лучшего контраста */
    font-weight: 600;
}


/* --- Фиксированная шапка --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Отступ под фикс-шапку */
.header-spacer {
  height: 72px; /* подстраивается под высоту вашей шапки */
}

/* --- Стили для счетчика прогресса --- */
#progress {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 10px;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
}

#progress .progress-number {
  font-weight: 700;
  color: var(--progress-number-color);
}

:root {
  --progress-number-color: #333;
}

html[data-theme="dark"] {
  --progress-number-color: #9bb6ff;
}


/* Container for title + progress counter */
.header-title-container {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Progress counter styles */
#progress {
  font-size: 0.95em;
  font-weight: normal;
  color: var(--text-secondary-color);
}

#progress .progress-number {
  font-weight: bold;
  color: var(--accent-color);
}

#progress{display:inline-flex;align-items:flex-end;gap:6px;white-space:nowrap;font-size:.95em;line-height:1.1;position:relative;top:var(--progress-nudge)}
#progress .progress-number{font-weight:700;color:var(--progress-number-color) !important}
#progress .progress-sep{opacity:.7;color:var(--muted) !important}
:root{--progress-number-color:#333}
html[data-theme="dark"]{--progress-number-color:#9bb6ff}

:root{--progress-nudge:0.12em}


/* --- Collapsible subcollections --- */
.collection {
  border-radius: 12px;
  padding: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}


.collection .colHeader{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.collection .colHeader .title{
  font-weight:700;
  font-size:1.05rem;
}
.collection .colHeader .doneMark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:#22c55e; /* green */
  color:#fff;
  font-size:.9rem;
}
.collection .colHeader .spacer{flex:1}
.collection .colHeader .toggleBtn{
  cursor:pointer;
  border:none;
  border-radius:8px;
  padding:4px 8px;
  background:var(--panel-2, rgba(255,255,255,0.06));
  color:var(--fg);
}
.collection.collapsed .content{ display:none; }



/* Minimal icon toggle for collections */
.collection .colHeader .toggleBtn{
  cursor:pointer;
  border:none;
  background:transparent;
  color:var(--fg);
  font-size:1.1rem;
  padding:2px 6px;
  line-height:1;
}



/* --- Consistent card sizing + compact collapsed view --- */
.collection{display:flex;flex-direction:column;padding:12px;border-radius:12px;background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--border)}
.collection .content{margin-top:8px}
.collection .colHeader{display:flex;align-items:center;gap:10px;min-height:32px;margin-bottom:0}
.collection .colHeader .title{margin:0;font-weight:700;font-size:1.05rem}
.collection .colHeader .doneMark{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#22c55e;color:#fff;font-size:.9rem}
.collection .colHeader .spacer{flex:1}
.collection .colHeader .toggleBtn{cursor:pointer;border:none;background:transparent;color:var(--fg);font-size:1.1rem;padding:2px 6px;line-height:1}

/* Collapsed: tiny tile */
.collection.collapsed{padding:10px 12px}
.collection.collapsed .colHeader{margin-bottom:0;min-height:28px}
.collection.collapsed .content{display:none}



/* --- Mobile header adjustments: make back button visible and wrap under title --- */
@media (max-width: 768px){
  header{display:flex;flex-wrap:wrap;row-gap:8px}
  header .titleWrap{order:1;flex:1 1 100%;display:flex;align-items:baseline;gap:8px}
  #backBtn{order:3;display:inline-flex !important;align-self:flex-start}
}



/* --- Mobile: controls (lang, theme, back) under title+counter --- */
@media (max-width: 768px){
  header{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px}
  .header-title-container,.titleWrap{order:1;flex:0 0 100%;display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
  /* Move both label and select + buttons to the next line */
  label[for="langSel"], #langSel, #themeBtn, #backBtn{order:2;flex:0 0 auto;display:inline-flex}
}



/* --- Responsive header for narrow viewports (no device sniffing) --- */
@media (max-width: 760px){
  header{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:8px;align-items:center}
  /* Title + progress always on the first row full-width */
  header .header-title-container, header .titleWrap{
    order:1;flex:1 1 100%;
    display:flex;align-items:baseline;gap:8px;
  }
  /* Controls go to the next row(s) and align left */
  header label[for="langSel"], header #langSel, header #themeBtn, header #backBtn{
    order:2;flex:0 0 auto;display:inline-flex;
  }
}
@media (max-width: 420px){
  /* Allow controls to wrap into multiple lines cleanly on very small widths */
  header label[for="langSel"], header #langSel, header #themeBtn, header #backBtn{
    margin-right:6px;
  }
}


/* --- FORCE controls under title for narrow widths --- */
@media (max-width: 760px){
  header{display:flex !important; flex-wrap:wrap !important; column-gap:8px; row-gap:8px; align-items:center}
  /* Title+counter must occupy full row */
  header > .header-title-container,
  header > .titleWrap{
    order:1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  /* Move controls below title; keep them inline */
  header > label[for="langSel"],
  header > #langSel,
  header > #themeBtn,
  header > #backBtn{
    order:2 !important;
    flex: 0 0 auto !important;
    display:inline-flex !important;
  }
}
/* Extra-narrow: reduce spacing a bit */
@media (max-width: 420px){
  header > label[for="langSel"],
  header > #langSel,
  header > #themeBtn,
  header > #backBtn{
    margin-right:6px;
  }
}


/* Narrow viewports: move ALL controls under title+counter */
@media (max-width: 760px){
  header{
    display:flex !important;
    flex-wrap:wrap !important;
    column-gap:8px;
    row-gap:8px;
    align-items:center;
  }
  header > .header-title-container,
  header > .titleWrap{
    order:1 !important;
    flex:0 0 100% !important;
    width:100% !important;
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  header [data-i18n="ui.language"],
  header #langSel,
  header #themeBtn,
  header #backBtn{
    order:2 !important;
    flex:0 0 auto !important;
    display:inline-flex !important;
  }
}
@media (max-width: 420px){
  header [data-i18n="ui.language"],
  header #langSel,
  header #themeBtn,
  header #backBtn{
    margin-right:6px;
  }
}



/* --- Universal narrow viewport header layout (force break after title) --- */
@media (max-width: 760px){
  header{display:flex !important; flex-wrap:wrap !important; align-items:center; gap:8px}
  /* Force a line break after the title area regardless of DOM structure */
  header:after{content:''; order:1; flex-basis:100%; height:0}
  /* Treat title elements as first row */
  header .header-title-container,
  header .titleWrap,
  header #appTitle,
  header #progress{order:0}
  /* Controls go under the break */
  header [data-i18n="ui.language"],
  header #langSel,
  header #themeBtn,
  header #backBtn{order:2; display:inline-flex !important; flex:0 0 auto}
}


:root{--header-height:72px}

/* Ensure back button visible on tracker */
body.in-tracker #backBtn{display:inline-flex !important}


/* --- Back button visibility: CSS-only control --- */
#backBtn{display:none} /* default: hidden */
body.in-tracker #backBtn{display:inline-flex !important} /* visible on tracker only */
body:not(.in-tracker) #backBtn{display:none !important} /* always hide on landing */



/* --- Progress visibility: show only on tracker screen --- */
body:not(.in-tracker) #progress { display: none !important; }
body.in-tracker #progress { display: inline-flex !important; }


/* Coming soon: disabled go button */
.goBtn.disabled, .btn.disabled{opacity:.55; cursor:not-allowed; pointer-events:none}

/* Landing disclaimer spacing */
.disclaimer{margin-top:16px}


/* Disclaimer layout: single-column, readable */
.card.disclaimer, .disclaimer { 
  display: block !important; 
  padding: 16px 18px;
}
.disclaimer h3{ margin: 0 0 8px; line-height: 1.3; }
.disclaimer p{ margin: 0 0 10px; line-height: 1.6; }
.disclaimer ul{ margin: 0 0 8px 1.2rem; padding: 0; }
.disclaimer li{ margin: 4px 0; }

/* Official store badges */
.storeBadge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:none; background:transparent; box-shadow:none;
}
.storeBadge img{
  display:block; height:40px; width:auto; object-fit:contain;
  -webkit-user-drag:none; user-select:none;
}
@media (max-width:480px){
  .storeBadge img{ height:36px; }
}

/* Footer */
.site-footer{
  text-align:center;
  padding:12px 10px;
  font-size:14px;
  color:var(--muted);
}
.site-footer a{
  color:var(--accent);
  text-decoration:none;
}
.site-footer a:hover{ text-decoration:underline; }


/* Layout: sticky footer */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

/* Donate panel styled like cards */
.donate-panel {
  display:flex; align-items:center; gap:14px; margin: 16px auto 0; max-width: 980px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.donate-panel .text { flex: 1 1 auto; color: var(--muted); font-size: .975rem; }
.donate-panel .cta { flex: 0 0 auto; min-width: 240px; display:flex; justify-content:flex-end; }
@media (max-width: 720px) {
  .donate-panel { flex-direction: column; align-items: stretch; }
  .donate-panel .cta { justify-content: flex-start; min-width: 0; }
}


/* Donate card tweaks to reuse .card layout */
.card.donate-card { align-items: center; }
.card.donate-card .muted { color: var(--muted); margin-top: 6px; }
.card.donate-card .actions { margin-left: auto; display:flex; align-items:center; }
.card.donate-card .cta { display:flex; align-items:center; justify-content:flex-end; min-width: 220px; }
.card.donate-card stripe-buy-button { display:block; }
@media (max-width: 720px) {
  .card.donate-card { flex-direction: column; align-items: stretch; }
  .card.donate-card .actions { margin-left: 0; }
  .card.donate-card .cta { justify-content:flex-start; min-width: 0; }
}

/* donate-card layout spacing */
.card.donate-card{ margin: 0 auto 40px; max-width: 980px; }

.landing .donate-card { margin-top: 16px; }

/* Donate card inner formatting */
.card.donate-card .meta { display:flex; flex-direction: column; gap: 6px; }
.card.donate-card .title { font-weight: 700; font-size: 1.05rem; }
.card.donate-card .muted { color: var(--muted); line-height: 1.4; }

/* Tracker spacing: align with panels above */
#tracker .donate-card { margin-top: 12px; }

@media (max-width: 700px) {
  .card.donate-card .title { font-size: 1rem; white-space: normal; align-self: center;  }
  .card.donate-card .muted { font-size: .95rem; align-self: center;  }
  .card.donate-card .icon { justify-self: start; align-self: center; }
  .card.donate-card .actions { align-self: center; }
  .card.donate-card .cta { margin-top: 10px; }
}



/* Unify header behavior (Variant A) */
header { position: sticky !important; top: 0; }
.header-spacer { display: none !important; height: 0 !important; }