/*
 * Дизайн «Світлий (mono)» — вмикається в адмінці (html[data-design="mono"]).
 * Світло-сірий фон, фіолетово-синій градієнт угорі, білі картки, чорні кнопки-пігулки, червоний акцент.
 * Основні стилі — у style.css; тут лише те, що відрізняється.
 */
html[data-design="mono"] {
  color-scheme: light;
  --bg: #f2f2f7;
  --card: #ffffff;
  --card-2: #f2f2f7;
  --text: #0b0b0f;
  --muted: #8a8a8e;
  --border: #ececf0;
  --accent: #ef3e4a;
  --accent-2: #5b5bd6;
  --accent-grad: #0b0b0f;
  --accent-text: #ffffff;
  --positive: #1a9e3f;
  --negative: #e5484d;
  --radius: 24px;
  --band: linear-gradient(180deg, #5b50d6 0%, #6674e2 40%, #a4b2f0 72%, #f2f2f7 100%);
}

html[data-design="mono"] body {
  background: var(--band) top / 100% 460px no-repeat, var(--bg);
  background-attachment: scroll;
}

/* Шапка — біла, як у monobusiness; градієнт починається під нею */
html[data-design="mono"] .topbar {
  background: #ffffff;
  box-shadow: 0 1px 0 rgb(16 16 40 / 0.06);
}
html[data-design="mono"] .brand { color: var(--text); letter-spacing: -0.03em; }
html[data-design="mono"] .topbar .me { color: var(--text); }
html[data-design="mono"] .topbar button.secondary { background: #eceef4; color: var(--text); }

/* Заголовок і «назад» стоять на градієнті */
html[data-design="mono"] main > h1,
html[data-design="mono"] .title-row h1 { color: #fff; }
html[data-design="mono"] .title-row button.link { color: rgb(255 255 255 / 0.75); }
html[data-design="mono"] main > p:first-child a { color: rgb(255 255 255 / 0.85); }

/* Картки */
html[data-design="mono"] .card { box-shadow: 0 1px 2px rgb(16 16 40 / 0.04), 0 8px 24px rgb(16 16 40 / 0.05); }
html[data-design="mono"] a:hover { color: var(--accent-2); }
html[data-design="mono"] input::placeholder,
html[data-design="mono"] textarea::placeholder { color: #a5a5ab; }
html[data-design="mono"] .created { color: #8a8a8e; }
html[data-design="mono"] .sub { color: #7c7c83; }

/* Кнопки: основна — чорна пігулка, другорядна — світло-сіра */
html[data-design="mono"] button.secondary { background: #eceef4; color: var(--text); }
html[data-design="mono"] button.link { background: none; color: var(--muted); }
html[data-design="mono"] button.link.edit:hover,
html[data-design="mono"] .title-row button.link:hover { color: var(--accent-2); }
html[data-design="mono"] button.secondary.dirty { background: #0b0b0f; color: #fff; }
html[data-design="mono"] .tabs { background: #eceef4; }
html[data-design="mono"] .tabs button:not(.secondary) { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }

/* Кругла кнопка меню — як чорні кружечки дій у mono */
html[data-design="mono"] .menu-button { background: #1c1c24; color: #fff; }
html[data-design="mono"] .menu-button.open,
html[data-design="mono"] .menu-button.has-active { background: #0b0b0f; color: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / 0.35); }
html[data-design="mono"] .menu-list {
  background: rgb(255 255 255 / 0.96); border-color: var(--border);
  box-shadow: 0 16px 40px rgb(16 16 40 / 0.16);
}
html[data-design="mono"] .menu-item { color: var(--text); background: none; }
html[data-design="mono"] .menu-item:hover { background: var(--card-2); }
html[data-design="mono"] .menu-count.muted { background: var(--card-2); }

/* Загальний баланс — як баланс картки в mono */
html[data-design="mono"] .card.hero {
  color: #fff;
  background: linear-gradient(135deg, #3f37c9 0%, #5b5bd6 45%, #4c8df0 100%);
  box-shadow: 0 12px 32px rgb(63 55 201 / 0.28);
}
html[data-design="mono"] .hero-label { color: rgb(255 255 255 / 0.75); }
html[data-design="mono"] .hero-amount,
html[data-design="mono"] .hero-amount.pos,
html[data-design="mono"] .hero-amount.neg { color: #fff; }
html[data-design="mono"] .hero-sign {
  display: table; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px;
  background: rgb(255 255 255 / 0.18); opacity: 1;
}
html[data-design="mono"] .hero-amount.neg .hero-sign { background: rgb(229 72 77 / 0.9); }
html[data-design="mono"] .hero-amount.pos .hero-sign { background: rgb(26 158 63 / 0.9); }
html[data-design="mono"] .hero-amount { font-size: 40px; letter-spacing: -0.03em; }

/* Нижня панель — біла пігулка, активний розділ червоний */
html[data-design="mono"] .tabbar {
  background: rgb(255 255 255 / 0.82); border-color: rgb(0 0 0 / 0.04);
  box-shadow: 0 10px 30px rgb(16 16 40 / 0.14);
}
html[data-design="mono"] .tab { color: #9a9aa0; }
html[data-design="mono"] .tab:hover { color: var(--text); }
html[data-design="mono"] .tab.active { color: var(--accent); background: none; }

/* Пігулки учасників, витрати, аватари */
html[data-design="mono"] .checks label:has(input:checked) { background: color-mix(in srgb, var(--accent) 12%, #fff); }
html[data-design="mono"] .checks.pick label:not(:has(input:checked)) { color: var(--muted); }
html[data-design="mono"] .pill { background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }
html[data-design="mono"] .avatar { background: #eceef4; color: #3f37c9; }
html[data-design="mono"] .avatar-stack .avatar { box-shadow: 0 0 0 2px #fff !important; }
html[data-design="mono"] ul.list li.is-me { background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
html[data-design="mono"] .avatar-me { box-shadow: 0 0 0 2px var(--accent-2) !important; }
html[data-design="mono"] .badge { background: color-mix(in srgb, var(--accent-2) 12%, transparent); color: var(--accent-2); }
html[data-design="mono"] .badge.muted { background: var(--card-2); color: var(--muted); }
html[data-design="mono"] .shares input.auto { background: color-mix(in srgb, var(--accent-2) 8%, #fff); }
html[data-design="mono"] .card.editing { box-shadow: 0 0 0 2px var(--accent-2); }
html[data-design="mono"] .bar-fill { background: linear-gradient(90deg, #3f37c9, #4c8df0); }
html[data-design="mono"] .archive-bar { box-shadow: 0 1px 2px rgb(16 16 40 / 0.04); }
html[data-design="mono"] .receipt-actions button.secondary { background: #fff; }
html[data-design="mono"] .invite input { background: #fff; }
html[data-design="mono"] .icon-grid { background: #fff; box-shadow: 0 12px 32px rgb(16 16 40 / 0.16); }

/* Сповіщення — чорна пігулка */
html[data-design="mono"] #toast { background: #0b0b0f; color: #fff; }

/* Мініатюри в адмінці */
.design-options { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.design-option {
  display: grid; gap: 4px; justify-items: start; text-align: left;
  padding: 12px; border-radius: 18px; background: var(--card-2); color: var(--text); font-weight: 400;
  box-shadow: inset 0 0 0 2px transparent;
}
.design-option.active { box-shadow: inset 0 0 0 2px var(--accent); }
.design-name { font-weight: 700; }
.design-preview {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; height: 70px; padding: 8px;
  border-radius: 12px; margin-bottom: 6px;
}
.design-preview i { border-radius: 8px; }
.design-preview i:first-child { grid-column: 1 / -1; }
.design-preview-dark { background: #0d0d0f; }
.design-preview-dark i { background: #1c1c20; }
.design-preview-dark i:first-child { background: linear-gradient(135deg, #ff4f6d, #ff8a4c); }
.design-preview-mono { background: linear-gradient(180deg, #5a4fd0, #f2f2f7); }
.design-preview-mono i { background: #fff; }
.design-preview-mono i:last-child { background: #0b0b0f; }
html[data-design="mono"] .carousel-dot { background: #b9b9c2; }
html[data-design="mono"] .carousel-dot.active { background: var(--text); }

/* Звіт у світлому дизайні */
html[data-design="mono"] .segmented button { background: #eceef4; }
html[data-design="mono"] .segmented button.active { background: #0b0b0f; color: #fff; }
html[data-design="mono"] .export-tile { background: #f2f2f7; }
html[data-design="mono"] .export-arrow { background: #fff; }
html[data-design="mono"] .receipt-toggle { background: #f2f2f7; }
.design-preview { height: 56px; }
html[data-design="mono"] ul.list.group-tiles li.group-tile { box-shadow: 0 1px 2px rgb(16 16 40 / 0.04), 0 8px 24px rgb(16 16 40 / 0.05); }
html[data-design="mono"] .filter-panel .segmented button.active { background: #0b0b0f; color: #fff; }
html[data-design="mono"] .filter-panel .segmented button { background: #fff; }