/* Huna Tracker v0.17 — темы (dark / light + акцент) и новый главный экран.
   Подключается после styles.css: новые токены раскладываются на старые переменные,
   поэтому остальные экраны перекрашиваются без изменения их разметки. */

/* Manrope (OFL, fonts/OFL.txt) — локально, чтобы шрифт работал офлайн */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root,
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A1220;--card:#131E31;--bg2:#1A2740;--soft:#1A2740;--line:#24324D;--line-strong:#3A4A68;
  --ink:#EEF3FB;--muted:#9AA8BF;
  --hairline:#24324D;--glass:#131E31;--glass-strong:#131E31;--nav:#131E31;--top:rgba(10,18,32,.94);
  --shadow:rgba(0,0,0,.28);--ambient:transparent;--hero1:#13233D;--hero2:#1C3254;--danger:#FF9A9A;
  --strong-bg:#EEF3FB;--strong-fg:#0A1220;
  --tab-active-bg:#1C2C48;--tab-active-fg:#EEF3FB;
  --hero-card:#13233D;--hero-border:#22385C;--hero-chip:#1C3254;
  --streak:#F0C46A;
  --tone-gold-bg:#2B2A20;--tone-gold:#F0C46A;
  --tone-blue-bg:#1E2E4A;--tone-blue:#8FB8FF;
  --tone-violet-bg:#2A2240;--tone-violet:#C3A6FF;
  --tone-mint-bg:#1A3330;--tone-mint:#5ED6A5;
  --card-shadow:none;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#EDF4FF;--card:#FFFFFF;--bg2:#E3ECF9;--soft:#E3ECF9;--line:#D3DFEF;--line-strong:#8597B3;
  --ink:#0D1B2E;--muted:#4C5B72;
  --hairline:#DCE6F4;--glass:#FFFFFF;--glass-strong:#FFFFFF;--nav:#FFFFFF;--top:rgba(237,244,255,.94);
  --shadow:rgba(18,38,74,.10);--ambient:transparent;--hero1:#12264A;--hero2:#1E3763;--danger:#B3261E;
  --strong-bg:#12264A;--strong-fg:#FFFFFF;
  --tab-active-bg:#12264A;--tab-active-fg:#FFFFFF;
  --hero-card:#12264A;--hero-border:#12264A;--hero-chip:#1E3763;
  --streak:#8A5A00;
  --tone-gold-bg:#FFF1D6;--tone-gold:#8A5A00;
  --tone-blue-bg:#E4EEFF;--tone-blue:#1F4E9C;
  --tone-violet-bg:#EEE6FF;--tone-violet:#5B3BB0;
  --tone-mint-bg:#DDF5EC;--tone-mint:#0E6B50;
  --card-shadow:0 2px 10px rgba(18,38,74,.06);
}

/* Акцент: --accent — для текста, галочек и заливок на фоне темы;
   --accent-bright — для тёмной карточки намаза (она тёмная в обеих темах). */
:root,
:root[data-theme="dark"][data-accent="mint"]{--accent:#5ED6A5;--accent-bright:#5ED6A5;--on-accent:#0A1220}
:root[data-theme="dark"][data-accent="blue"]{--accent:#8FB8FF;--accent-bright:#8FB8FF;--on-accent:#0A1220}
:root[data-theme="dark"][data-accent="gold"]{--accent:#F0C46A;--accent-bright:#F0C46A;--on-accent:#0A1220}
:root[data-theme="light"][data-accent="mint"]{--accent:#0E6B50;--accent-bright:#5ED6A5;--on-accent:#FFFFFF}
:root[data-theme="light"][data-accent="blue"]{--accent:#1F4E9C;--accent-bright:#8FB8FF;--on-accent:#FFFFFF}
:root[data-theme="light"][data-accent="gold"]{--accent:#8A5A00;--accent-bright:#F0C46A;--on-accent:#FFFFFF}
:root{--good:var(--accent);--safe-bottom:calc(max(env(safe-area-inset-bottom),var(--tg-safe-area-inset-bottom,0px)) + var(--tg-content-safe-area-inset-bottom,0px));--safe-top:calc(max(env(safe-area-inset-top),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px))}

html,body{background:var(--bg)!important;color:var(--ink)}
body,button,input,select,textarea{font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{-webkit-font-smoothing:antialiased;overflow-x:hidden}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Старые элементы, где текст на акценте был захардкожен белым */
.soft-add-button,.adhkar-row-check.done{color:var(--on-accent)!important}

/* ---------- Нижняя навигация ---------- */
#app{padding-bottom:0!important}
.page main{padding-bottom:calc(112px + var(--safe-bottom))!important}
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);z-index:40;
  bottom:calc(10px + var(--safe-bottom));
  width:min(calc(100% - 24px),596px);height:68px;padding:0 4px;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;
  background:var(--nav);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 10px 30px var(--shadow);
}
.tabbar-item{
  min-width:44px;height:56px;border:0;border-radius:16px;background:transparent;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:11px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;
}
.tabbar-item svg{width:22px;height:22px;stroke-width:2;flex:none}
.tabbar-item.active{color:var(--accent);font-weight:800}
.tabbar-add{
  justify-self:center;width:52px;height:52px;border-radius:26px;border:0;
  display:grid;place-items:center;background:var(--accent);color:var(--on-accent);
  box-shadow:0 6px 18px var(--shadow);
}
:root[data-theme="light"] .tabbar{border-color:transparent}
:root[data-theme="light"] .tabbar-add{background:#12264A;color:#FFFFFF}
.tabbar-add svg{width:24px;height:24px;stroke-width:2.4}
@media(max-width:374px){.tabbar-item{font-size:10px}}

/* ---------- Главный экран ---------- */
.nh{min-height:100vh}
.nh-header{position:relative;height:calc(260px + var(--safe-top));overflow:hidden;color:#F4F7FD;--h-muted:#D3DCEC}
.nh-header.phase-day{color:#0D1B2E;--h-muted:#1E3048}
.nh-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.nh-ground{fill:var(--bg)}
.nh-header-row{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:calc(16px + var(--safe-top)) 20px 0}
.nh-header-copy{min-width:0}
.nh-date{margin:0;font-size:13px;font-weight:600;color:var(--h-muted);line-height:1.35}
.nh-greeting{margin:3px 0 4px;font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.nh-city{margin:0;display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--h-muted)}
.nh-city svg{width:14px;height:14px;flex:none;stroke-width:2}
.nh-settings{
  flex:0 0 44px;width:44px;height:44px;border-radius:14px;border:0;color:inherit;
  display:grid;place-items:center;background:rgba(6,12,24,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.phase-day .nh-settings{background:rgba(255,255,255,.6)}
.nh-settings svg{width:20px;height:20px;stroke-width:2}

.page main.nh-main{padding:0 16px calc(112px + var(--safe-bottom))!important;display:flex;flex-direction:column;gap:24px}

.nh-next{
  /* Цвета карточки намаза: тёмные по умолчанию, светлые — в светлой теме (ниже) */
  --hn-bg:var(--hero-card);--hn-border:var(--hero-border);--hn-text:#EEF3FB;--hn-muted:#A9B7CC;
  --hn-kicker:var(--accent-bright);--hn-chip:var(--hero-chip);--hn-check-bg:var(--accent-bright);--hn-check-fg:#0A1220;
  --hn-ring:#4A6088;--hn-future-border:#2C4064;--hn-future-ring:#2F4468;
  --hn-gold:#F0C46A;--hn-gold-text:#F0C46A;--hn-current-bg:#2A2B2F;--hn-shadow:0 14px 34px rgba(4,10,22,.28);
  position:relative;z-index:2;margin-top:-56px;
  background:var(--hn-bg);border:1px solid var(--hn-border);border-radius:26px;
  padding:18px 16px 16px;color:var(--hn-text);box-shadow:var(--hn-shadow);
  display:flex;flex-direction:column;gap:18px;
}
:root[data-theme="light"] .nh-next{
  --hn-bg:#FFFFFF;--hn-border:transparent;--hn-text:#0D1B2E;--hn-muted:#4C5B72;
  --hn-kicker:var(--accent);--hn-chip:#EDF4FF;--hn-check-bg:var(--accent);--hn-check-fg:#FFFFFF;
  --hn-ring:#8597B3;--hn-future-border:#D3DFEF;--hn-future-ring:#B8C6DA;
  --hn-gold:#C28A1A;--hn-gold-text:#8A5A00;--hn-current-bg:#FFF6E0;--hn-shadow:0 14px 34px rgba(18,38,74,.14);
}
.nh-next-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.nh-next-copy{min-width:0}
.nh-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hn-kicker)}
.nh-next h2{margin:4px 0 0;font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.nh-next-time{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.nh-next-time strong{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nh-next-time span{font-size:14px;font-weight:600;color:var(--hn-muted);white-space:nowrap}

.nh-prayer-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.nh-prayer{
  min-width:0;min-height:76px;border:2px solid transparent;border-radius:16px;background:var(--hn-chip);color:var(--hn-text);
  padding:8px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:transform 140ms ease,background-color 200ms ease;
}
.nh-prayer:active{transform:scale(.96)}
.nh-p-mark{width:26px;height:26px;border-radius:13px;border:2px solid var(--hn-ring);display:grid;place-items:center;box-sizing:border-box}
.nh-p-mark svg{width:14px;height:14px;stroke:var(--hn-check-fg);stroke-width:3}
.nh-p-name{font-size:12px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nh-p-time{font-size:11px;font-weight:600;color:var(--hn-muted);font-variant-numeric:tabular-nums}
.nh-prayer.is-done .nh-p-mark{background:var(--hn-check-bg);border-color:var(--hn-check-bg)}
.nh-prayer.is-current{border-color:var(--hn-gold);background:var(--hn-current-bg)}
.nh-prayer.is-current .nh-p-mark{border:2px dashed var(--hn-gold)}
.nh-prayer.is-current .nh-p-time{color:var(--hn-gold-text);font-weight:800}
.nh-prayer.is-future{background:transparent;border-color:var(--hn-future-border)}
.nh-prayer.is-future .nh-p-name{color:var(--hn-muted);font-weight:600}
.nh-prayer.is-future .nh-p-mark{border-color:var(--hn-future-ring)}

.nh-section{display:flex;flex-direction:column;gap:12px}
.nh-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.nh-section-head h2{margin:0;font-size:17px;font-weight:800}
.nh-streak{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--streak);white-space:nowrap}
.nh-streak svg{width:16px;height:16px;stroke-width:2}

.nh-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.nh-tab{
  min-height:44px;border:0;border-radius:22px;background:transparent;color:var(--muted);
  font-size:14px;font-weight:700;white-space:nowrap;padding:0 6px;transition:background-color 200ms ease,color 200ms ease;
}
.nh-tab.active{background:var(--tab-active-bg);color:var(--tab-active-fg);font-weight:800}

.nh-cards{display:flex;flex-direction:column;gap:10px}
.nh-card{display:flex;align-items:center;gap:6px;background:var(--card);border-radius:20px;padding:6px 12px 6px 6px;box-shadow:var(--card-shadow)}
.nh-card-main{
  flex:1;min-width:0;min-height:60px;display:flex;align-items:center;gap:12px;
  border:0;border-radius:16px;background:transparent;color:inherit;text-align:left;padding:6px 8px;
}
.nh-card-main:active{background:var(--bg2)}
.nh-ico{flex:0 0 44px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--tone-bg);color:var(--tone)}
.nh-ico svg{width:22px;height:22px;stroke-width:2}
.tone-gold{--tone-bg:var(--tone-gold-bg);--tone:var(--tone-gold)}
.tone-blue{--tone-bg:var(--tone-blue-bg);--tone:var(--tone-blue)}
.tone-violet{--tone-bg:var(--tone-violet-bg);--tone:var(--tone-violet)}
.tone-mint{--tone-bg:var(--tone-mint-bg);--tone:var(--tone-mint)}
.tone-text-gold{--tone:var(--tone-gold)}
.tone-text-blue{--tone:var(--tone-blue)}
.tone-text-violet{--tone:var(--tone-violet)}
.tone-text-mint{--tone:var(--tone-mint)}
.nh-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.nh-card-body b{font-size:15px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nh-card-body small{font-size:13px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nh-bar-row{display:flex;align-items:center;gap:10px}
.nh-bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.nh-bar i{display:block;height:100%;border-radius:3px;background:var(--tone-blue);transition:width 300ms ease}
.nh-bar-row em{font-style:normal;font-size:13px;font-weight:700;color:var(--tone);white-space:nowrap;font-variant-numeric:tabular-nums}
.nh-count{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.nh-count b{font-size:18px;font-weight:800;color:var(--tone);font-variant-numeric:tabular-nums}
.nh-count b span{color:var(--muted);font-weight:700}
.nh-count small{font-size:12px;color:var(--muted)}
.nh-check{flex:0 0 30px;width:30px;height:30px;border-radius:15px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-sizing:border-box}
.nh-check svg{width:15px;height:15px;stroke-width:3}
.nh-check.is-open{background:transparent;border:2px solid var(--line-strong)}
.nh-action{flex:none;min-height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--strong-bg);color:var(--strong-fg);font-size:13px;font-weight:800}
.nh-plus{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:14px;background:var(--bg2);color:var(--ink);display:grid;place-items:center}
.nh-plus svg{width:20px;height:20px;stroke-width:2.2}
.nh-link{align-self:flex-start;min-height:44px;border:0;background:transparent;color:var(--accent);font-size:14px;font-weight:700;padding:0 2px}

.nh-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.nh-day{display:flex;flex-direction:column;align-items:center;gap:6px}
.nh-day-name{font-size:11px;font-weight:600;color:var(--muted)}
.nh-day-num{width:36px;height:36px;border-radius:18px;display:grid;place-items:center;box-sizing:border-box;background:var(--card);color:var(--ink);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:var(--card-shadow)}
.nh-day.is-partial .nh-day-num{border:2px dashed var(--accent)}
.nh-day.is-full .nh-day-num{background:var(--accent);color:var(--on-accent)}
.nh-day.is-today .nh-day-name{color:var(--ink);font-weight:800}
.nh-day.is-today .nh-day-num{outline:2px solid var(--accent);outline-offset:2px}
.nh-reminder .reminder-card{margin:0}

/* ---------- Профиль: оформление и хранение данных ---------- */
.appearance-card{background:var(--card);border:1px solid var(--hairline);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:14px;margin-bottom:10px}
.appearance-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.appearance-label{font-size:15px;font-weight:700}
.seg-control{display:grid;grid-template-columns:repeat(3,auto);gap:2px;padding:3px;border-radius:15px;background:var(--bg2)}
.seg-control button{min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:14px;font-weight:700}
.seg-control button.active{background:var(--tab-active-bg);color:var(--tab-active-fg);font-weight:800}
.accent-swatches{display:flex;gap:8px}
.accent-swatch{width:44px;height:44px;border-radius:22px;border:2px solid transparent;background:transparent;padding:0;display:grid;place-items:center}
.accent-swatch span{width:32px;height:32px;border-radius:16px;display:grid;place-items:center;color:#0A1220}
.accent-swatch span svg{width:16px;height:16px;stroke-width:3}
.swatch-mint span{background:#5ED6A5}
.swatch-blue span{background:#8FB8FF}
.swatch-gold span{background:#F0C46A}
.accent-swatch.active{border-color:var(--ink)}
.appearance-hint{margin:0;font-size:13px;color:var(--muted);line-height:1.4}
.storage-note{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:12px 14px;margin-bottom:10px;color:var(--muted);font-size:13px;line-height:1.45}
.storage-note svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--accent);stroke-width:2}
.storage-note p{margin:0}

@media(prefers-reduced-motion:reduce){
  .nh-prayer,.nh-tab,.nh-bar i{transition:none}
}

@media(max-width:400px){
  .nh-next{padding:16px 12px 12px}
  .nh-prayer-row{gap:4px}
  .nh-p-name{font-size:11px}
  .nh-p-time{font-size:10.5px}
  .nh-prayer.is-current .nh-p-time{font-size:10px;letter-spacing:-.02em}
}

/* Старые экраны: убираем захардкоженные светлые градиенты, которые не читались в тёмной теме */
.compact-prayer-hero{background:var(--card)!important;color:var(--ink)}
.compact-profile-card .avatar{background:var(--tone-mint-bg)!important;color:var(--tone-mint)!important}

/* Без зума по двойному тапу (iOS Safari игнорирует user-scalable=no) */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------- Остальные экраны: приводим к языку главной ---------- */
/* Шапка экрана */
.page .top.soft-top{padding:calc(14px + var(--safe-top)) 16px 10px;background:var(--top)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.page .soft-top .brand{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.page .soft-top .top-sub{font-size:13px!important;font-weight:600;color:var(--muted);margin-top:2px}
.page .iconbtn{width:44px;height:44px;min-width:44px;border:0!important;border-radius:14px;background:var(--card)!important;color:var(--ink)!important;display:grid;place-items:center;box-shadow:var(--card-shadow)}
.page .iconbtn svg{width:20px;height:20px;stroke-width:2}

/* Карточки и строки — без рамок, как на главной */
.page main .card,.page .item-row,.page .menu,.page .settings-group,.page .prayer-row,.page .adhkar-row-main,.page .setting,.page .data-box,.page .compact-metric-strip button,.page .compact-profile-stats button{
  border:0!important;background:var(--card);box-shadow:var(--card-shadow)!important
}
.page main .card{border-radius:24px}
.page .item-row,.page .prayer-row,.page .adhkar-row-main{border-radius:20px}
.page .notice{border-radius:16px}

/* Сегменты (Утро/Вечер, 7/14/30, мазхаб) — как вкладки на главной */
.page .tabs,.page .seg,.page .apple-segment{background:transparent!important;border:0!important;box-shadow:none!important;padding:0;gap:6px}
.page .tabs button,.page .seg button,.page .apple-segment button{min-height:44px;height:auto;border:0!important;border-radius:22px;background:transparent!important;color:var(--muted)!important;font-size:14px;font-weight:700;box-shadow:none!important}
.page .tabs button.active,.page .seg button.active,.page .apple-segment button.active{background:var(--tab-active-bg)!important;color:var(--tab-active-fg)!important;font-weight:800}

/* Кнопки */
.page .primary,.page .readbtn{background:var(--strong-bg)!important;color:var(--strong-fg)!important;border:0!important;border-radius:16px;min-height:52px;font-weight:800;box-shadow:none!important}
.page .readbtn.done{background:var(--bg2)!important;color:var(--accent)!important}
.page .readbtn{display:flex;align-items:center;justify-content:center;gap:8px}
.page .readbtn svg,.page .remaining svg{width:18px;height:18px;stroke-width:2.6}
.page .secondary,.page .ghost{border:0!important;background:var(--bg2)!important;color:var(--ink)!important;border-radius:16px;min-height:48px;font-weight:700}
.page .ghost svg{width:20px;height:20px;stroke-width:2.2}
.page .reader-nav .ghost{min-width:52px;display:grid;place-items:center}
.page .remaining{border:0!important;background:var(--bg2)!important;color:var(--ink)}

/* Иконки вместо символов */
.page .prayer-symbol{display:grid;place-items:center;box-sizing:border-box;background:transparent!important;border:2px solid var(--line-strong)!important;color:var(--accent)!important}
.page .prayer-symbol svg{width:16px;height:16px;stroke-width:2.6}
.page .prayer-row.done .prayer-symbol{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important}
.page .prayer-row.next .prayer-symbol{border-color:var(--accent)!important}
.page .prayer-row.next{box-shadow:inset 0 0 0 2px var(--accent)!important}
.page .prayer-row.done{background:var(--card)!important}
.page .mini-check{width:32px;height:32px;border-radius:16px;border:2px solid var(--line-strong);background:transparent;display:grid;place-items:center;position:relative}
.page .mini-check::after{content:"";position:absolute;inset:-6px}
.page .item-row.done .mini-check{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.page .mini-check svg{width:16px;height:16px;stroke-width:3}
.page .row-actions{gap:0}
.page .tiny{width:44px!important;min-width:44px!important;height:44px!important;border:0!important;border-radius:12px;background:transparent!important;color:var(--muted)!important;display:grid;place-items:center;padding:0}
.page .tiny svg{width:18px;height:18px;stroke-width:2.2}
.page .tiny:active{background:var(--bg2)!important}
.page .adhkar-row-check{min-width:48px;border:0!important;background:var(--bg2)!important;color:var(--accent)!important;font-size:14px;font-weight:800;display:grid;place-items:center;border-radius:16px}
.page .adhkar-row-check.done{background:var(--accent)!important;color:var(--on-accent)!important}
.page .adhkar-row-check svg{width:18px;height:18px;stroke-width:2.6}
.page .compact-chevron,.page .chevron{display:grid;place-items:center;color:var(--muted)}
.page .compact-chevron svg,.page .chevron svg{width:18px;height:18px;stroke-width:2.2}
.page .favorite-round,.page .reminder-star{width:44px;height:44px;min-width:44px;border:0!important;border-radius:22px;background:var(--bg2)!important;color:var(--muted)!important;display:grid;place-items:center}
.page .favorite-round svg,.page .reminder-star svg{width:20px;height:20px;stroke-width:2}
.page .favorite-round.is-on,.page .reminder-star.is-on{color:var(--tone-gold)!important}
.page .favorite-round.is-on svg,.page .reminder-star.is-on svg{fill:currentColor}
.page .soft-circle-link{width:44px;height:44px;display:grid;place-items:center;background:var(--bg2);color:var(--accent)}
.page .soft-circle-link svg{width:20px;height:20px;stroke-width:2.2}
.page .soft-add-button,.page .addbtn{width:44px;height:44px;min-width:44px;border-radius:14px;background:var(--strong-bg)!important;color:var(--strong-fg)!important;display:grid;place-items:center;padding:0;box-shadow:none}
.page .soft-add-button svg,.page .addbtn svg{width:20px;height:20px;stroke-width:2.4}
.badge-icon svg{width:14px;height:14px;stroke-width:2;fill:currentColor}
.city-suggestion em{display:grid;place-items:center;color:var(--muted)}
.city-suggestion em svg{width:16px;height:16px}

/* Зикр: пресеты как вкладки */
.page .preset{border:0!important;background:var(--card)!important;color:var(--ink)!important;min-height:44px;border-radius:22px;box-shadow:var(--card-shadow)}
.page .preset.active{background:var(--tab-active-bg)!important;color:var(--tab-active-fg)!important}
.page .preset.active small{color:inherit;opacity:.8}

/* Тост с действием (отмена отметки) */
.toast{border-radius:16px}
.toast-action{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 16px;pointer-events:auto;animation:toastIn 260ms var(--ease-out,ease)!important}
.toast-action button{min-height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--accent-bright);font-size:14px;font-weight:800}
:root[data-theme="dark"] .toast-action button{color:#0E6B50}
:root[data-theme="dark"][data-accent="blue"] .toast-action button{color:#1F4E9C}
:root[data-theme="dark"][data-accent="gold"] .toast-action button{color:#8A5A00}

@media(max-width:400px){.tabbar-item{font-size:10px}}
.appearance-card,.storage-note{border:0!important;box-shadow:var(--card-shadow)}
.toast{background:var(--ink)!important;color:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important}

/* В Telegram свайп вниз не должен тянуть страницу и сворачивать приложение */
html,body{overscroll-behavior-y:none}
/* Варианты выбора (мазхаб): невыбранные — карточкой, чтобы было видно, что это кнопки */
.page .seg button:not(.active){background:var(--card)!important;color:var(--ink)!important;box-shadow:var(--card-shadow)!important}
.page .seg button{border-radius:16px}
.page .seg button.active{background:var(--accent)!important;color:var(--on-accent)!important}

/* ---------- Кибла ---------- */
.qb-card{display:flex;flex-direction:column;align-items:stretch;gap:14px;text-align:center}
.qb-compass{width:min(100%,300px);aspect-ratio:1;margin:4px auto 0}
.qb-svg{width:100%;height:100%;display:block;overflow:visible}
.qb-face{fill:var(--bg2);stroke:var(--line);stroke-width:2}
.qb-tick{stroke:var(--line-strong);stroke-width:1.5;stroke-linecap:round}
.qb-tick.big{stroke:var(--muted);stroke-width:2.5}
.qb-letter{fill:var(--muted);font-size:17px;font-weight:800;font-family:Manrope,system-ui,sans-serif}
.qb-letter.north{fill:var(--danger)}
.qb-needle{stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.qb-kaaba{fill:#0D1117;stroke:var(--muted);stroke-width:1.5}
.qb-kaaba-band{fill:var(--tone-gold)}
.qb-hub{fill:var(--card);stroke:var(--accent);stroke-width:3}
.qb-pointer{fill:var(--ink)}
.qb-compass.is-aligned .qb-face{stroke:var(--accent);stroke-width:4}
.qb-compass.is-aligned .qb-pointer{fill:var(--accent)}
.qb-status{margin:0;font-size:14px;font-weight:600;color:var(--muted);min-height:20px}
.qb-compass.is-aligned + .qb-status{color:var(--accent);font-weight:800}
.qb-bearing{display:flex;flex-direction:column;gap:2px}
.qb-bearing strong{font-size:40px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.qb-bearing span{font-size:13px;color:var(--muted)}
.qb-card .secondary{margin-top:-4px}
.page .seg.seg-3{grid-template-columns:repeat(3,1fr)}

/* ---------- Сура аль-Мульк ---------- */
@font-face{font-family:'Amiri Quran';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/amiri-quran.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
.mulk-main{display:flex;flex-direction:column;gap:12px}
.mulk-head{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.mulk-title-ar{font-family:'Amiri Quran','Noto Naskh Arabic','Geeza Pro',serif;font-size:30px;line-height:1.6}
.mulk-meta{font-size:13px;color:var(--muted);font-weight:600}
.page .seg.seg-2{grid-template-columns:1fr 1fr;width:100%;margin-top:6px}
.mulk-bismillah{font-family:'Amiri Quran','Noto Naskh Arabic','Geeza Pro',serif;font-size:26px;line-height:2;text-align:center;padding:4px 0}
.mulk-list{display:flex;flex-direction:column;gap:10px}
.mulk-ayah{background:var(--card);border-radius:20px;padding:16px 16px 14px;box-shadow:var(--card-shadow)}
.mulk-ar{font-family:'Amiri Quran','Noto Naskh Arabic','Geeza Pro',serif;font-size:var(--arabic-size,30px);line-height:2.1;text-align:right;color:var(--ink);word-spacing:2px}
.mulk-num{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:15px;border:1.5px solid var(--accent);color:var(--accent);font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:800;line-height:1;vertical-align:middle;margin-inline-start:4px}
.mulk-ru{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--ink)}
.mulk-ru b{color:var(--accent);font-weight:800}
.page .mulk-done{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.page .mulk-done svg{width:18px;height:18px;stroke-width:2.6}
.mulk-source{margin:4px 2px 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}

/* Шапка: мерцание звёзд и дрейф облаков (выключаются при «уменьшении движения») */
.sky-star{animation:skyTwinkle 4s ease-in-out infinite}
.sky-cloud{animation:skyDrift 90s linear infinite alternate}
@keyframes skyTwinkle{0%,100%{opacity:.9}50%{opacity:.3}}
@keyframes skyDrift{from{transform:translateX(-12px)}to{transform:translateX(18px)}}
@media(prefers-reduced-motion:reduce){.sky-star,.sky-cloud{animation:none}}

/* ---------- Палитры поверх базовой схемы (data-theme задаёт dark/light, data-palette — вариант) ---------- */
:root[data-theme="dark"][data-palette="black"]{
  --bg:#000000;--card:#111418;--bg2:#1A1E24;--soft:#1A1E24;--line:#262B33;--line-strong:#3A414C;--hairline:#262B33;
  --ink:#F2F4F7;--muted:#A3ABB8;--glass:#111418;--glass-strong:#111418;--nav:#0B0D10;--top:rgba(0,0,0,.92);
  --hero-card:#0F1318;--hero-border:#262B33;--hero-chip:#1A1E24;--tab-active-bg:#20252D;
  --tone-gold-bg:#221F14;--tone-blue-bg:#141C2A;--tone-violet-bg:#1E1830;--tone-mint-bg:#10221C;
}
:root[data-theme="dark"][data-palette="emerald"]{
  --bg:#06140F;--card:#0D241C;--bg2:#133126;--soft:#133126;--line:#1D4135;--line-strong:#2E5C4B;--hairline:#1D4135;
  --ink:#EEF6F1;--muted:#A2BDB1;--glass:#0D241C;--glass-strong:#0D241C;--nav:#0B1F18;--top:rgba(6,20,15,.94);
  --hero-card:#0F2E23;--hero-border:#1E4A3A;--hero-chip:#163E30;--tab-active-bg:#17473A;
  --tone-gold-bg:#2A2716;--tone-blue-bg:#13303A;--tone-violet-bg:#272237;--tone-mint-bg:#123629;
}
:root[data-theme="light"][data-palette="sand"]{
  --bg:#F6F0E4;--card:#FFFDF8;--bg2:#EFE6D4;--soft:#EFE6D4;--line:#E2D6BE;--line-strong:#A08E70;--hairline:#E8DDC8;
  --ink:#2A2216;--muted:#66594A;--glass:#FFFDF8;--glass-strong:#FFFDF8;--nav:#FFFDF8;--top:rgba(246,240,228,.94);
  --strong-bg:#1F4D3A;--strong-fg:#FFFFFF;--tab-active-bg:#1F4D3A;--tab-active-fg:#FFFFFF;
  --tone-gold-bg:#F6E8C8;--tone-blue-bg:#E4EAF0;--tone-violet-bg:#ECE4F1;--tone-mint-bg:#DCEEE2;
  --card-shadow:0 2px 10px rgba(70,50,20,.07);--shadow:rgba(70,50,20,.10);
}
:root[data-theme="light"][data-palette="sand"] .nh-next{--hn-bg:#FFFDF8;--hn-chip:#F3EBDB;--hn-future-border:#E2D6BE;--hn-future-ring:#C9B998;--hn-shadow:0 14px 34px rgba(70,50,20,.12)}
:root[data-theme="light"][data-palette="sand"] .tabbar-add{background:#1F4D3A}

/* Новые акценты: яркий — для тёмных тем, тёмный — для текста и заливок в светлых */
:root[data-theme="dark"][data-accent="emerald"]{--accent:#3CCB82;--accent-bright:#3CCB82;--on-accent:#0A1220}
:root[data-theme="dark"][data-accent="turquoise"]{--accent:#4FD1D9;--accent-bright:#4FD1D9;--on-accent:#0A1220}
:root[data-theme="dark"][data-accent="lilac"]{--accent:#B79CFF;--accent-bright:#B79CFF;--on-accent:#0A1220}
:root[data-theme="dark"][data-accent="coral"]{--accent:#FF8F7A;--accent-bright:#FF8F7A;--on-accent:#0A1220}
:root[data-theme="light"][data-accent="emerald"]{--accent:#17693F;--accent-bright:#3CCB82;--on-accent:#FFFFFF}
:root[data-theme="light"][data-accent="turquoise"]{--accent:#0B6670;--accent-bright:#4FD1D9;--on-accent:#FFFFFF}
:root[data-theme="light"][data-accent="lilac"]{--accent:#5B3BB0;--accent-bright:#B79CFF;--on-accent:#FFFFFF}
:root[data-theme="light"][data-accent="coral"]{--accent:#A3392A;--accent-bright:#FF8F7A;--on-accent:#FFFFFF}
:root[data-theme="dark"][data-accent="emerald"] .toast-action button{color:#17693F}
:root[data-theme="dark"][data-accent="turquoise"] .toast-action button{color:#0B6670}
:root[data-theme="dark"][data-accent="lilac"] .toast-action button{color:#5B3BB0}
:root[data-theme="dark"][data-accent="coral"] .toast-action button{color:#A3392A}

/* Блок «Внешний вид» */
.appearance-block{display:flex;flex-direction:column;gap:10px}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mode-grid button{min-height:44px;border:0;border-radius:14px;background:var(--bg2);color:var(--ink);font-size:14px;font-weight:700}
.mode-grid button.active{background:var(--tab-active-bg);color:var(--tab-active-fg);font-weight:800}
.theme-picks{display:grid;gap:8px}
.theme-picks.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.theme-picks.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.theme-pick{border:2px solid transparent;border-radius:16px;background:var(--bg2);padding:6px 6px 8px;display:flex;flex-direction:column;gap:6px;color:var(--ink);min-height:44px}
.theme-pick.active{border-color:var(--accent)}
.theme-pick-preview{height:52px;border-radius:11px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:8px;border:1px solid rgba(127,140,160,.25)}
.theme-pick-preview i{display:block;border-radius:5px}
.theme-pick-preview i:first-child{height:14px}
.theme-pick-preview i:last-child{height:5px;width:55%}
.theme-pick-name{font-size:13px;font-weight:700}
.accent-swatches{flex-wrap:wrap}
.swatch-emerald span{background:#3CCB82}
.swatch-turquoise span{background:#4FD1D9}
.swatch-lilac span{background:#B79CFF}
.swatch-coral span{background:#FF8F7A}
.accent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.accent-pick{min-height:64px;border:2px solid transparent;border-radius:14px;background:var(--bg2);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:6px 2px}
.accent-pick span{width:28px;height:28px;border-radius:14px;display:grid;place-items:center;color:#0A1220}
.accent-pick span svg{width:15px;height:15px;stroke-width:3}
.accent-pick em{font-style:normal;font-size:11px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accent-pick.active{border-color:var(--accent)}
.swatch-mint span{background:#5ED6A5}.swatch-blue span{background:#8FB8FF}.swatch-gold span{background:#F0C46A}
.mode-grid button.active{background:var(--accent);color:var(--on-accent)}

/* Зона нажатия переключателя 44px при визуальном размере 48×28. */
.switch{position:relative}
.switch:before{content:"";position:absolute;inset:-8px -2px}


/* Dedicated, compact appearance settings. */
.appearance-settings .appearance-card{padding:16px;gap:20px}
.appearance-mode-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.appearance-mode-select{max-width:65%;min-height:44px;padding:8px 30px 8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);color:var(--ink);font:inherit;font-size:16px}
.appearance-settings .theme-pick-preview{height:36px;padding:6px;gap:4px}
.appearance-settings .theme-pick-preview i:first-child{height:10px}
.appearance-settings .theme-pick-name{font-size:12px;overflow-wrap:anywhere}
.appearance-settings .accent-grid{display:flex;gap:2px;overflow-x:auto;padding:2px 0 6px}
.appearance-settings .accent-pick{flex:0 0 44px;min-width:44px;min-height:44px;padding:4px;border-radius:50%;background:transparent}
.appearance-settings .accent-pick span{width:30px;height:30px;border-radius:50%}
.appearance-settings .accent-pick em{display:none}
.appearance-settings :is(button,select):focus-visible{outline:2px solid var(--accent);outline-offset:3px}