/* Layout: home = two profile cards + joint score; profile = back bar, today checklist, month sheet, personal stats. */
/* Layout: home = two profile cards, joint score, shared feed; profile = back bar, today checklist, month sheet, stats, composer.
   Palette: softened, low-saturation inks so nothing glares; each person keeps one colour, categories keep theirs. */
:root {
  --cell: 26px;}
@media (prefers-color-scheme: dark) {
}
* { box-sizing: border-box; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--f-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: max(20px, env(safe-area-inset-top, 0px));
  padding-bottom: max(64px, env(safe-area-inset-bottom, 0px));
  margin: 0; -webkit-tap-highlight-color: transparent;}
#app { margin: 0 auto; display: grid;}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[data-p="a"] { --pc: var(--pa); --pcs: var(--pa-soft); }
[data-p="b"] { --pc: var(--pb); --pcs: var(--pb-soft); }
.muted { color: var(--muted); }
.notice { padding: 10px 14px; background: var(--pb-soft);}
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pc); flex: none; display: inline-block; }
.btn { background: var(--sheet);}
.btn.pri { background: var(--pc, var(--ink)); border-color: var(--pc, var(--ink));}
.btn.ghost { border-color: transparent; color: var(--muted);}
.card { background: var(--sheet); border-radius: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; align-content: start;}
h1 { font-family: var(--f-display); margin: 0; line-height: 1.1; text-wrap: balance;}
h2 { font-family: var(--f-display); margin: 0;}
h3 { margin: 0; font-size: 15px; font-weight: 600; }
.sync { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--miss); display: inline-block; }
.sync[data-s="live"] i { background: var(--good); }
.sync[data-s="saving"] i { background: var(--pb); }

/* Home */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo { flex: none; width: 52px; height: 52px; background: #17181c; display: inline-flex; align-items: center; justify-content: center; font-family: "Arial Black", var(--f-display); font-size: 19px; letter-spacing: -.02em; line-height: 1;}
.logo b { font-weight: 900; } .logo .r { color: #7c95ff; } .logo .a { color: #ff8a57; }
.logo i { font-style: normal; color: #fff; font-size: 13px; margin: 0 1px; position: relative; top: -2px; }
.people { display: grid;}
.pc { grid-template-columns: minmax(0, 1fr); border-top: 5px solid var(--pc); background: var(--sheet);}
@media (hover: hover) and (pointer: fine) { button.pc:hover { border-color: var(--pc);} }
.pc .row1 { display: flex; align-items: center; gap: 10px; }
.pc .nm { font-weight: 600; font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 11px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--pcs); color: var(--pc); white-space: nowrap;}
.big { font-family: var(--f-display); line-height: 1; color: var(--pc); font-variant-numeric: tabular-nums;}
.big small { font-size: 18px; }
.big-l { font-size: 13px; color: var(--muted); margin-top: 4px; }
.week { display: flex; gap: 4px; }
.week span { flex: 1; height: 26px; background: var(--hair); position: relative; overflow: hidden;}
.week span b { position: absolute; inset: auto 0 0 0; background: var(--pc); }
.pc .go { font-size: 14px; font-weight: 600; color: var(--pc); }
.lock { width: 16px; height: 13px; border: 2px solid currentColor; border-radius: 3px; position: relative; margin-top: 7px; flex: none; }
.lock::before { content: ""; position: absolute; left: 2px; top: -9px; width: 8px; height: 8px; border: 2px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; }
.intro { font-size: 14px; color: var(--muted); max-width: 60ch; margin: 0; }

.duel { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.duel .lead { font-size: 17px; font-weight: 600; flex: 1 1 220px; text-wrap: balance; }
.tug { flex: 1 1 200px; background: var(--pb); display: flex;}
.tug span { display: block; height: 100%; background: var(--pa); transition: width .4s; }
.pair { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile { padding: 12px 14px; display: grid; gap: 2px;}
.tile .n { font-family: var(--f-display); font-variant-numeric: tabular-nums;}
.tile .l { font-size: 12px; color: var(--muted); }
.keys { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.keys span { display: inline-flex; align-items: center; gap: 6px; }
.keys i { width: 12px; border-radius: 2px; display: inline-block;}

/* Profile */
.pbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper);}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.linkbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linkbox input { flex: 1 1 200px; min-width: 0; border: 1.5px solid var(--hair); border-radius: 10px; padding: 9px 12px; font-family: var(--f-mono); font-size: 12px; background: var(--paper); }
.back { display: inline-flex; align-items: center; gap: 6px; border-radius: 10px;}
@media (hover: hover) and (pointer: fine) { .back:hover { border-color: var(--line); } }
.pname { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pname input { font-weight: 700; font-size: 20px; border: 1.5px solid transparent; border-radius: 8px; padding: 4px 8px; background: transparent; min-width: 0; width: 100%; max-width: 280px; }
@media (hover: hover) and (pointer: fine) { .pname input:not(:disabled):hover { border-color: var(--hair); } }
.pname input:focus { border-color: var(--pc); outline: none; background: var(--sheet); }
.pname input:disabled { color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; background: var(--sheet);}
.switch input { appearance: none; background: var(--hair); position: relative; cursor: pointer; margin: 0; transition: background .2s; flex: none;}
.switch input::after { content: ""; position: absolute; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25);}

.today-h { flex-wrap: wrap;}
.today-h .cnt { font-family: var(--f-mono); color: var(--muted);}
.prog { background: var(--hair); overflow: hidden;}
.prog span { display: block; height: 100%; background: var(--pc);}
.prog span.full { background: var(--good); }
.list { display: grid; gap: 8px; }
.item { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--hair); border-radius: 12px; padding: 6px 6px 6px 14px; min-height: 52px; transition: border-color .15s, background .15s; }
.item.v1 { border-color: var(--pc); background: var(--pcs); }
.item .t { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: normal; }
.item.v1 .t { font-weight: 600; }
.item.v2 .t { color: var(--muted); text-decoration: line-through; }
.seg { display: flex; gap: 6px; flex: none; }
.seg button { width: 44px; height: 40px; border-radius: 10px; border: 1.5px solid var(--hair); background: var(--sheet); display: grid; place-items: center; color: var(--muted); }
.seg button svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .seg button:hover { border-color: var(--line); color: var(--ink); } }
.seg button.on.yes { background: var(--pc); border-color: var(--pc); color: #fff; }
.seg button.on.no { background: var(--miss); border-color: var(--miss); color: #fff; }
.ro .seg button { cursor: default; }
.ro .seg button:not(.on) { visibility: hidden; }
.item input.ren { flex: 1; min-width: 0; border: 1.5px solid var(--hair); border-radius: 8px; padding: 7px 10px; background: var(--sheet); }
.item input.ren:focus { border-color: var(--pc); outline: none; }
.item .rm { border: 1.5px solid var(--hair); background: var(--sheet); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.item .rm.arm { background: var(--pb); border-color: var(--pb); color: #fff; }
.add input { flex: 1; min-width: 0; border: 1.5px dashed var(--muted); border-radius: 12px; padding: 12px 14px; background: transparent; }
.add input:focus { border-style: solid; border-color: var(--pc); outline: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--hair); background: var(--sheet); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--pc); color: var(--pc); } }
.empty { color: var(--muted); font-size: 14px; margin: 0; }

.mhead { justify-content: space-between; gap: 12px; flex-wrap: wrap;}
.month { display: flex; align-items: center; gap: 6px; }
.month button { width: 34px; height: 34px; border: 1.5px solid var(--hair); background: var(--sheet); border-radius: 8px; font-size: 18px; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .month button:hover { border-color: var(--line); } }
.month .lbl { font-weight: 600; min-width: 130px; text-align: center; }
.month .now { width: auto; padding-inline: 10px; font-size: 13px; }
.legend { color: var(--muted);}
.legend span { gap: 6px;}
.lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.lg.d { background: var(--pc); }
.lg.m { border: 1px solid var(--hair); background: linear-gradient(45deg, transparent 42%, var(--miss) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--miss) 42% 58%, transparent 58%); }
.grid-wrap { overflow-x: auto;}
table.grid { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; min-width: 100%; }
.grid th, .grid td { padding: 0; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); text-align: center; }
.grid tr > :last-child { border-right: 0; }
.grid tbody tr:last-child > * { border-bottom: 0; }
.grid thead tr:last-child > * { border-bottom: 1.5px solid var(--line); }
.grid .hname { position: sticky; left: 0; z-index: 2; background: var(--sheet); text-align: left; border-right: 1.5px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.grid thead th { font-weight: 600; width: var(--cell); min-width: var(--cell); color: var(--muted); text-transform: uppercase;}
.grid thead .dn th { font-family: var(--f-mono); font-size: 11px; color: var(--ink); text-transform: none; }
.grid thead .hname { font-size: 10px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.grid .we { background: var(--weekend); }
.grid .td { background: var(--today) !important; }
.c { display: block; width: 100%; height: var(--cell); border: 0; background: transparent; padding: 0; position: relative; }
@media (hover: hover) and (pointer: fine) { .grid:not(.ro) .c:hover { background: var(--pcs); } }
.grid.ro .c { cursor: default; }
.c.s1::after { content: ""; position: absolute; inset: 4px; border-radius: 4px; background: var(--pc); }
.c.s2 { background: linear-gradient(45deg, transparent 45%, var(--miss) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--miss) 45% 55%, transparent 55%); background-size: 55% 55%; background-position: center; background-repeat: no-repeat; }
.c.fut { opacity: .5; }
.ghint { color: var(--muted); margin: 0;}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
svg text { fill: var(--muted); font-family: var(--f-mono); font-size: 10px; }
.chart { width: 100%; height: auto; display: block; }
.htable { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.htable th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; padding: 0 8px 6px 0; }
.htable td { padding: 8px 8px 8px 0; border-top: 1px solid var(--hair); }
.htable .num { font-family: var(--f-mono); text-align: right; white-space: nowrap; }
.mbar { display: inline-block; width: 56px; height: 6px; background: var(--hair); border-radius: 3px; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.mbar span { display: block; height: 100%; background: var(--pc); }
.locked { text-align: center; padding: 40px 20px; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.locked b { color: var(--ink); font-size: 16px; }

@media (max-width: 760px) {
  .people, .two { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr 1fr 1fr; }
  :root { --cell: 30px; }
  .grid .hname { min-width: 120px; max-width: 140px; }
  .card { padding: 16px; }
  .big { font-size: 38px; }
  .switch { width: 100%; justify-content: space-between; order: 3; }
  .pbar .sync { display: none; }
  .pname input { font-size: 18px; }
  .item { min-height: 60px; }
  .seg button { width: 50px; height: 46px; }
  .add input { font-size: 16px; }
  .pname input, .item input.ren { font-size: 16px; }
  .pc { padding: 16px; gap: 12px; }
}
@media (max-width: 420px) { .pair { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Sign-in */
.auth { max-width: 420px; margin: 8vh auto 0; display: grid; gap: 18px; }
.auth .brand { justify-content: center; }
.auth form { display: grid; gap: 10px; }
.auth label { font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.auth input { border: 1.5px solid var(--hair); border-radius: 10px; padding: 12px 14px; font-size: 16px; background: var(--sheet); }
.auth input:focus { border-color: var(--ink); outline: none; }
.auth .btn { padding: 12px 16px; font-size: 15px; }
.auth .btn.pri { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.auth .err { color: var(--pb); font-size: 13px; margin: 0; min-height: 1em; }
.linkish { border: 0; background: none; color: var(--ink); text-decoration: underline; padding: 0; font-size: 14px; }

/* ---- today card v2: whole row is the button, colour = category ---- */
.cdot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc, var(--miss)); display: inline-block; flex: none; margin-right: 8px; vertical-align: 1px; }
.star-i { width: 14px; height: 14px; color: var(--star); flex: none; margin-right: 5px; vertical-align: -2px; }
.daynav { display: flex; align-items: center; gap: 10px; }
.daynav .dl { flex: 1; min-width: 0; text-align: center; display: grid; gap: 2px; }
.daynav .dl span { font-size: 13px; color: var(--muted); }
.daynav button { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--hair); background: var(--sheet); font-size: 20px; line-height: 1; flex: none; }
.daynav button:disabled { opacity: .25; cursor: default; }
.today .item { gap: 12px; border-left: 5px solid var(--cc); cursor: pointer; user-select: none; -webkit-user-select: none;}
.today.ro .item { cursor: default; }
.today .item:active { transform: scale(.99); }
.today .item.v1 { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 14%, var(--sheet)); }
.today .item .t { display: grid; gap: 1px; }
.today .item .ct { color: var(--muted); font-weight: 400; text-decoration: none;}
.today .item.v2 .ct { text-decoration: none; }
.tick { border-radius: 50%; border: 2px solid var(--cc); display: grid; place-items: center; flex: none; color: transparent; transition: background .15s;}
.tick svg { width: 18px; height: 18px; }
.item.v1 .tick { background: var(--cc); color: #fff; }
.item.v2 .tick { border-color: var(--hair); }
.today .item .no { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid transparent; background: transparent; color: var(--muted); display: grid; place-items: center; flex: none; }
.today .item .no svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .today .item .no:hover { border-color: var(--hair); } }
.today .item .no.on { background: var(--miss); color: #fff; }
.today.ro .item .no { visibility: visible; }
.alldone { text-align: center; color: var(--good); padding: 6px 0;}
.editbar { display: flex; justify-content: center; }

/* add form: categories appear once something is typed */
.add { display: grid; gap: 10px; }
.addrow { display: flex; gap: 8px; }
.addrow input { flex: 1; min-width: 0; padding: 12px 14px; background: transparent;}
.addrow input:focus { border-style: solid; border-color: var(--pc); outline: none; }
.add .catsel { display: none; }
.add.typing .catsel { display: flex; }
.catsel { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.cchip { display: inline-flex; align-items: center; border: 1.5px solid var(--hair); background: var(--sheet); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.cchip .cdot { margin-right: 6px; }
.cchip.on { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 16%, var(--sheet));}
.chip { display: inline-flex; align-items: center; }
.chip .cdot { margin-right: 6px; }

/* edit mode: grip, name, star, delete; category on its own line */
.item.edit { flex-wrap: wrap; padding: 8px; border-left: 5px solid var(--cc); cursor: default; min-height: 0; background: var(--sheet);}
.handle { height: 44px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: grab; touch-action: none; flex: none; border-radius: 8px;}
.handle svg { width: 20px; height: 20px; }
.handle:focus-visible { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .handle:hover { background: var(--paper); color: var(--ink); } }
.starbtn { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--hair); background: var(--sheet); color: var(--hair); display: grid; place-items: center; flex: none; }
.starbtn .star-i { width: 20px; height: 20px; margin: 0; color: inherit; }
.starbtn.on { color: var(--star); border-color: var(--star); }
.item.edit .rm { width: auto; min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 10px; }
.item.edit .rm svg { width: 18px; height: 18px; }
.catbtn { margin-left: 44px; border: 0; background: transparent; padding: 2px 4px; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; border-radius: 6px; }
.catbtn .caret { margin-left: 6px; font-size: 11px; }
.catbtn.open { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .catbtn:hover { color: var(--ink); } }
.item.edit .catsel { margin-left: 44px;}
.list.sorting .item:not(.dragging) { transition: transform .15s; }
.item.dragging { z-index: 3; box-shadow: 0 10px 28px rgba(0,0,0,.28); background: var(--sheet); cursor: grabbing; }
.item.dragging .handle { cursor: grabbing; color: var(--ink); }

/* month sheet and stats pick up the category colour */
.grid tbody .hname .cdot { margin-right: 6px; }
.htable .cdot { margin-right: 8px; }
.catstats { display: grid; gap: 8px; margin-top: 8px; }
.cs { display: grid; grid-template-columns: 130px 1fr 48px; align-items: center; gap: 10px; font-size: 14px; }
.csn { display: flex; align-items: center; }
.csb { height: 8px; border-radius: 4px; background: var(--hair); overflow: hidden; }
.csb span { display: block; height: 100%; background: var(--cc); border-radius: 4px; }
.cs .num { font-family: var(--f-mono); text-align: right; }
@media (max-width: 760px) {
  .cs { grid-template-columns: 110px 1fr 44px; }
  .today .item { min-height: 64px; }
}
.item.edit { gap: 6px; }
.item.edit .ren { flex: 1 1 0; min-width: 0; padding: 8px; }
.item.edit .starbtn, .item.edit .rm { width: 40px; min-width: 40px; height: 40px; padding: 0; border-color: transparent; }
.item.edit .rm.arm { width: auto; padding: 0 10px; }
.handle { width: 30px; }
.catbtn, .item.edit .catsel { margin-left: 36px; }
.item.edit .catsel { width: calc(100% - 36px); }
.item.edit .catbtn { flex: 0 0 calc(100% - 36px); justify-content: flex-start; }
.add { grid-template-columns: minmax(0, 1fr); }

/* ---- v3: calmer look ---- */
body { -webkit-font-smoothing: antialiased;}
h1 { font-weight: 500; font-size: clamp(20px, 3.4vw, 26px); letter-spacing: 0; text-transform: none; }
h1 b { font-weight: 500; color: var(--muted); }
h2 { font-family: var(--f-display); text-transform: none;}
.card, .pc { border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow); }
.pc { border-top: 1px solid var(--hair);}
.pc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pc); opacity: .75; }
@media (hover: hover) and (pointer: fine) { button.pc:hover { border-color: var(--hair);} }
.big { font-weight: 500; font-size: 42px; letter-spacing: -.01em; }
.tile { border: 0; background: var(--sheet-2);}
.btn { transition: background .15s, border-color .15s, transform .1s;}
.btn:active { transform: scale(.98); }
.back, .daynav button, .month button { border: 1px solid var(--hair); border-radius: 12px; }
.tag { background: color-mix(in srgb, var(--pc) 14%, transparent); font-weight: 500; letter-spacing: .04em; }
.logo { border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.week span { border-radius: 6px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.week span b { opacity: .85; border-radius: 6px 6px 0 0; }
.tug { background: color-mix(in srgb, var(--pb) 70%, transparent);}
.tug span { background: color-mix(in srgb, var(--pa) 80%, transparent); }
.prog { background: color-mix(in srgb, var(--ink) 7%, transparent);}
.today .item { border-left: 4px solid color-mix(in srgb, var(--cc) 70%, transparent); background: var(--sheet);}
.today .item.v1 { border-color: color-mix(in srgb, var(--cc) 30%, var(--hair)); border-left-color: var(--cc); background: color-mix(in srgb, var(--cc) 9%, var(--sheet)); }
.today .item.v1 .nm { font-weight: 500; }
.today .item.v2 { background: transparent;}
.tick { border-width: 1.5px; border-color: color-mix(in srgb, var(--cc) 65%, transparent); }
.item.v1 .tick { background: color-mix(in srgb, var(--cc) 85%, transparent); }
.today .item .no { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.today .item .no.on { background: color-mix(in srgb, var(--miss) 70%, transparent); }
.cchip, .chip { background: var(--sheet-2);}
.cchip.on { background: color-mix(in srgb, var(--cc) 12%, var(--sheet)); border-color: color-mix(in srgb, var(--cc) 50%, transparent); font-weight: 500; }
.item.edit { border-left: 4px solid color-mix(in srgb, var(--cc) 70%, transparent);}
.grid th, .grid td { border-color: var(--hair); }
.grid .hname, .grid thead tr:last-child > * { border-color: var(--line); }
.notice { background: color-mix(in srgb, var(--pb) 12%, var(--sheet));}
.alldone { color: var(--good); font-weight: 500; }

/* ---- splash ---- */
#splash { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--paper); transition: opacity .5s ease, visibility .5s; }
#splash.gone { opacity: 0; visibility: hidden; }
.splash-in { display: grid; justify-items: center; gap: 22px; }
.splash-logo { display: flex; align-items: baseline; font-family: "Arial Black", var(--f-display); font-size: 64px; line-height: 1; letter-spacing: -.02em; }
.splash-logo b { display: inline-block; opacity: 0; }
.splash-logo .r { animation: sp-left .7s cubic-bezier(.2,.8,.2,1) .1s forwards;}
.splash-logo .a { animation: sp-right .7s cubic-bezier(.2,.8,.2,1) .1s forwards;}
.splash-logo i { font-style: normal; color: var(--ink); font-size: 40px; margin: 0 4px; opacity: 0; display: inline-block; animation: sp-plus .5s ease .55s forwards; position: relative; top: -6px; }
.splash-line { width: 120px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; position: relative; }
.splash-line::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 2px; animation: sp-load 1.1s ease-in-out infinite;}
.splash-cap { font-size: 13px; color: var(--muted); letter-spacing: .08em; opacity: 0; animation: sp-fade .6s ease .8s forwards; }
@keyframes sp-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes sp-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes sp-plus { from { opacity: 0; transform: scale(.4) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes sp-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes sp-fade { to { opacity: 1; } }
#app > * { animation: app-in .45s ease both; }
@keyframes app-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#app.settled > * { animation: none; }

/* ---- feed ---- */
.feed { display: grid;}
.post { background: var(--sheet); border-radius: var(--r); box-shadow: var(--shadow); display: grid; min-width: 0;}
.post[data-p="a"] { --pc: var(--pa); } .post[data-p="b"] { --pc: var(--pb); }
.post-h { display: flex; font-size: 14px;}
.ava { width: 32px; height: 32px; font-size: 14px; background: color-mix(in srgb, var(--pc) 85%, transparent);}
.post-h b { font-weight: 600; }
.post-h time { color: var(--muted); font-size: 13px; }
.post-h .del-post { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 13px; padding: 4px 6px; border-radius: 8px; }
.post-h .del-post.arm { background: var(--pb); color: #fff; }
.post-t { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;}
.post-img { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: 14px; background: var(--sheet-2); cursor: zoom-in; border: 0; padding: 0; }
.post-img img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 14px; display: block; }
.feed-empty { text-align: center; color: var(--muted); padding: 22px 16px; border-radius: var(--r); font-size: 14px;}
.preview { position: relative; width: 120px; }
.preview img { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; display: block; }
.preview button { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 1; }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.86); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .splash-logo b, .splash-logo i, .splash-cap { animation: none; opacity: 1; }
  .splash-line::after { animation: none; width: 100%; }
  #app > * { animation: none; }
}

/* ===================== v4: Apple-style ===================== */
:root {
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r: 22px;}
@media (prefers-color-scheme: dark) {
}
[data-p="a"] { --pg: var(--ga); } [data-p="b"] { --pg: var(--gb); }
body { font-family: var(--f-body);}
#app { max-width: 860px; gap: 22px; }
h2 { font-family: var(--f-display); font-weight: 700;}
.card { border: 0; border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.btn { border: 0; background: var(--sheet-2); border-radius: 14px; padding: 11px 18px; font-weight: 600; font-size: 15px; }
.btn.pri { background: var(--pc, var(--pa)); color: #fff; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--pc, var(--pa)); }
.muted, .intro { color: var(--muted); }
.notice { border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); font-size: 14px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sec-h span { color: var(--muted); font-size: 15px; }
/* home header: large title, avatar menu on the right */
.hmenu { position: relative; }
.hava { transition: transform .15s;}
.hava:active { transform: scale(.94); }
.hm-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: color-mix(in srgb, var(--sheet) 88%, transparent); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 12px 40px rgba(0,0,0,.25); border: 1px solid var(--hair); animation: pop-in .18s ease both; transform-origin: top right;}
.hm-who { border-bottom: 1px solid var(--hair); margin-bottom: 4px;}
.hm-who span { display: grid; min-width: 0; } .hm-who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis;}
.hm-item { font-size: 15px; color: var(--ink);}
@media (hover: hover) and (pointer: fine) { .hm-item:hover { background: var(--sheet-2); } }
.hm-item svg { width: 20px; height: 20px; color: var(--muted); }
.hm-item.danger, .hm-item.danger svg { color: #ff3b30; }
.hm-item input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--sheet); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); color: var(--ink); }
.pill svg { width: 16px; height: 16px; }
@keyframes pop-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* avatars */
.ava { width: var(--s); height: var(--s); display: grid; place-items: center; background: var(--pg, var(--sheet-2)); color: #fff; font-weight: 700; font-size: calc(var(--s) * .42); letter-spacing: 0;}
.ava img { display: block;}
/* profile cards on home: gradient glass with the month's success curve behind */
.pc { position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 26px; padding: 18px; color: #fff; background: var(--pg); box-shadow: 0 10px 30px color-mix(in srgb, var(--pc) 28%, transparent); display: grid; gap: 14px; text-align: left; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; min-height: 210px; }
.pc::before { display: none; }
.pc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.22), transparent 55%); }
@media (hover: hover) and (pointer: fine) { button.pc:hover { transform: translateY(-3px); border: 0;} }
button.pc:active { transform: scale(.98); }
.pc.dim { filter: saturate(.7); }
.pc-chart { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 48%; z-index: -1; }
.pc-top { display: flex; align-items: center; gap: 12px; }
.pc-id { flex: 1; min-width: 0; display: grid; }
.pc-id b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.pc-id span { font-size: 13px; opacity: .75; }
.pc .big { color: #fff; font-family: var(--f-display); font-size: 52px; line-height: .95;}
.pc .big small { font-size: 22px; font-weight: 600; opacity: .8; margin-left: 2px; }
.pc .big-l { color: rgba(255,255,255,.75); font-size: 13px; margin-top: 4px; }
.pc-bot { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; border-radius: 14px; padding: 10px 12px;}
.pc-bot svg { width: 16px; height: 16px; opacity: .8; }
.pc-note { margin: 0; font-size: 14px; opacity: .85; display: flex; align-items: center; gap: 8px; }
.pc .lock { color: #fff; }
.pc-btn { background: rgba(255,255,255,.95); color: #111; }
.pc .linkbox input { background: rgba(255,255,255,.16); border: 0; color: #fff; }
.ring .ring-bg { fill: none; stroke: rgba(255,255,255,.22); }
.ring .ring-fg { fill: none; stroke: #fff; stroke-linecap: round; animation: ring-in 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ring-in { from { stroke-dashoffset: var(--c); } }
#app.settled .ring .ring-fg { animation: none; }

/* together + tiles */
.together .lead { font-size: 17px; font-weight: 600; }
.tug { height: 8px; border-radius: 4px; background: var(--pb); }
.tug span { background: var(--pa); border-radius: 4px 0 0 4px; }
.tile { background: var(--sheet-2); border-radius: 16px; }
.tile .n { font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
.keys i { height: 4px; }

/* feed posts */
.post { border: 0; border-radius: var(--r); box-shadow: var(--shadow);}
.post-who { flex: 1; min-width: 0;} .post-who time { color: var(--muted);}
.post-t { font-size: 16px; line-height: 1.45; }
.post-img, .post-img img { border-radius: 16px; }
.feed-empty { border: 0; background: var(--sheet); border-radius: var(--r); box-shadow: var(--shadow); }
.pm { position: relative; margin-left: auto; align-self: flex-start; }
.pm-pop { position: absolute; right: 0; top: 34px; z-index: 15; display: grid; min-width: 170px; padding: 5px; border-radius: 14px; background: color-mix(in srgb, var(--sheet) 90%, transparent); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 12px 36px rgba(0,0,0,.25); border: 1px solid var(--hair); animation: pop-in .16s ease both; transform-origin: top right; }
.pm-pop button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 9px; font-size: 15px; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .pm-pop button:hover { background: var(--sheet-2); } }
.pm-pop .danger { color: #ff3b30; }
.edit-t { width: 100%; min-height: 80px; border: 0; border-radius: 14px; padding: 12px; background: var(--sheet-2); font: inherit; color: inherit;}
.edit-t:focus { outline: 2px solid color-mix(in srgb, var(--pc) 50%, transparent); }
.edit-row { display: flex; justify-content: flex-end; gap: 8px; }
.post-img-s { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }

/* profile page */
.pbar { margin-block: -10px 0; padding-block: 10px; background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); margin-inline: -16px; padding-inline: 16px; gap: 10px; flex-wrap: nowrap; }
body::before { background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.back { border: 0; background: transparent; color: var(--pc, var(--pa)); font-size: 17px; font-weight: 500; padding: 6px 4px; }
.back svg { width: 22px; height: 22px; }
.pbar-t { flex: 1; font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pbar .sync { display: inline-flex; font-size: 0; } .pbar .sync i { width: 8px; height: 8px; }
.phero { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 8px; padding: 26px 18px 16px; border-radius: 28px; background: var(--pg); color: #fff; box-shadow: 0 12px 36px color-mix(in srgb, var(--pc) 28%, transparent); }
.phero-bg { position: absolute; inset: 0; z-index: -1; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.22), transparent 60%); }
.phero .ava { box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.25); }
.ava-edit { position: relative; cursor: pointer; border-radius: 50%; }
.ava-edit input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ava-cam { position: absolute; border-radius: 50%; display: grid; place-items: center;}
.hero-name { font-family: var(--f-display); font-size: 26px; font-weight: 700; letter-spacing: -.03em; text-align: center; color: #fff; background: transparent; border: 0; border-radius: 10px; padding: 2px 8px; width: 100%; max-width: 320px; }
.hero-name:focus { background: rgba(255,255,255,.14); outline: none; }
@media (hover: hover) and (pointer: fine) { .hero-name:not(:disabled):hover { background: rgba(255,255,255,.14); outline: none; } }
.hero-name:disabled { -webkit-text-fill-color: #fff; opacity: 1; }
.hero-sub { display: flex; gap: 8px; align-items: center; font-size: 14px; opacity: .9; }
.phero .tag { background: rgba(255,255,255,.22); color: #fff; }
.seg2 { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; width: 100%; max-width: 340px;}
.seg2 button { border: 0; background: transparent; color: rgba(255,255,255,.85); font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 9px; transition: background .2s, color .2s; }
.seg2 button.on { background: rgba(255,255,255,.95); color: #111; box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.switch { width: 100%; justify-content: space-between; border: 0; border-radius: 16px; background: var(--sheet); box-shadow: var(--shadow); padding: 12px 16px; font-size: 16px; }
.switch input { width: 51px; height: 31px; border-radius: 16px; }
.switch input::after { width: 27px; height: 27px; top: 2px; left: 2px; }
.switch input:checked { background: #34c759; }
.switch input:checked::after { left: 22px; }
.pbody { display: grid; gap: 18px; }

/* today card, Apple-like rows */
.today .item { border: 0; border-radius: 16px; background: var(--sheet-2); min-height: 62px; padding: 8px 8px 8px 14px; position: relative; overflow: hidden; }
.today .item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cc); }
.today .item.v1 { background: color-mix(in srgb, var(--cc) 14%, var(--sheet)); border: 0; }
.today .item.v2 { opacity: .6; }
.tick { width: 30px; height: 30px; border: 2px solid color-mix(in srgb, var(--cc) 75%, transparent); }
.item.v1 .tick { background: var(--cc); border-color: var(--cc); }
.item.pop .tick { animation: tick-pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes tick-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.daynav button, .month button { border: 0; background: var(--sheet-2); border-radius: 12px; }
.daynav .dl h2 { font-size: 22px; }
.prog { height: 6px; border-radius: 3px; background: var(--sheet-2); }
.prog span { background: var(--pc); border-radius: 3px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.addrow input { border: 0; background: var(--sheet-2); border-radius: 14px; }
.addrow input:focus { outline: 2px solid color-mix(in srgb, var(--pc) 45%, transparent); }
.cchip, .chip { border: 0; background: var(--sheet-2); }
.cchip.on { background: color-mix(in srgb, var(--cc) 18%, var(--sheet)); }
.item.edit { border: 0; background: var(--sheet-2); border-radius: 16px; position: relative; }
.item.edit .ren { border: 0; background: var(--sheet); border-radius: 10px; }
.grid-wrap { background: var(--sheet-2);}
.grid .hname { background: var(--sheet-2); border-color: var(--hair); }
.grid th, .grid td { border-color: color-mix(in srgb, var(--ink) 7%, transparent); }
.grid thead tr:last-child > * { border-bottom: 1px solid var(--line); }
.grid .we { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.catstats .csb { background: var(--sheet-2); }
.htable td { border-top: 1px solid var(--hair); }

/* channel: Telegram-like bubbles + input bar */
.channel { display: grid; gap: 8px; padding-bottom: 8px; }
.ch-day { display: flex; justify-content: center; margin: 8px 0 2px; }
.ch-day span { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--sheet); padding: 4px 12px; border-radius: 999px; box-shadow: var(--shadow); }
.bubble { position: relative; justify-self: start; max-width: min(92%, 560px); background: var(--sheet); border-radius: 20px 20px 20px 6px; box-shadow: var(--shadow); display: grid; animation: bub-in .3s ease both;}
.bubble .pm { position: absolute; margin: 0;}
.bubble time { justify-self: end; font-size: 12px; color: var(--muted); }
.bubble .post-img, .bubble .post-img img { border-radius: 14px; max-height: 380px; }
#app.settled .bubble { animation: none; }
@keyframes bub-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.cbar { position: sticky; z-index: 6; margin-inline: -16px; padding: 10px 16px max(10px, env(safe-area-inset-bottom, 0px)); background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--hair); display: grid; gap: 8px;}
.cbar-row { display: flex; align-items: flex-end; gap: 8px; }
.cbar textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 160px; resize: none; border: 1px solid var(--hair); border-radius: 20px; padding: 9px 14px; font: inherit; color: inherit; background: var(--sheet); line-height: 1.35; }
.cbar textarea:focus { outline: none; border-color: color-mix(in srgb, var(--pc) 50%, transparent); }
.cbar-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); cursor: pointer; flex: none; }
.cbar-ic input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cbar-send { width: 40px; height: 40px; border: 0; display: grid; place-items: center; flex: none; transition: transform .15s;}
.cbar-send svg { margin-left: 2px;}
.cbar .preview img { width: 84px; height: 84px; }

/* splash, Apple-like */
#splash { background: var(--paper); }
.splash-logo { font-family: var(--f-display); font-weight: 800; }
.splash-logo .r { color: #3f7bff; } .splash-logo .a { color: #ff3d86; }
.splash-line::after { background: linear-gradient(90deg, #3f7bff, #ff3d86); }

@media (max-width: 760px) {
  .pc { min-height: 196px; }
  .pc .big { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .ring .ring-fg, .bubble, .item.pop .tick, .hm-pop, .pm-pop { animation: none; }
}
/* ===================== v5: strict and gentle ===================== */
@media (prefers-color-scheme: dark) {
}
.pc, .phero { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
@media (hover: hover) and (pointer: fine) { button.pc:hover { box-shadow: 0 12px 30px rgba(0,0,0,.16); } }
.today .item.v1 { background: color-mix(in srgb, var(--cc) 11%, var(--sheet)); }
.tug { opacity: .85; }
/* quote instead of greeting */
.quote p { margin: 0; font-family: var(--f-quote); font-size: clamp(21px, 5.4vw, 26px); line-height: 1.3; letter-spacing: -.005em; font-weight: 500; text-wrap: balance; }
.quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--muted); }

/* priority toggle in the add form */
.starchip { display: inline-flex; align-items: center; gap: 4px; border: 0; background: var(--sheet-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--muted); }
.starchip .star-i { width: 14px; height: 14px; margin: 0; color: inherit; }
.starchip.on { color: var(--ink); background: color-mix(in srgb, var(--star) 22%, var(--sheet)); }
.starchip.on .star-i { color: var(--star); }

/* post tags */
.ptag { justify-self: start; display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; border-radius: 999px; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent);}
.ptag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tc); }
.tagrow { display: flex; gap: 6px;}
.tchip { border: 0; border-radius: 999px; font-size: 13px; background: var(--sheet-2); color: var(--muted); display: inline-flex; align-items: center; gap: 6px;}
.tchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--tc, var(--muted)); }
.tchip.on { color: var(--ink); background: color-mix(in srgb, var(--tc, var(--ink)) 16%, var(--sheet)); font-weight: 600; }
.chfilter { position: sticky; z-index: 4;}

/* long-press drag in the today list */
.today .item.lifting { transform: scale(1.02); box-shadow: 0 10px 28px rgba(0,0,0,.2); z-index: 3; transition: transform .15s, box-shadow .15s; }
.today .list.sorting .item:not(.dragging) { transition: transform .15s; }
.today .item.dragging { background: var(--sheet); }
/* period switch on home */
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.seg3 button { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px; border-radius: 9px; transition: background .2s, color .2s; }
.seg3 button.on { background: var(--sheet); color: var(--ink);}
.seg3 button.on { background: color-mix(in srgb, var(--ink) 12%, var(--sheet)); }
.together .chart text { font-size: 17px; }
.together .pair { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .together .tile { padding: 12px; } .together .tile .n { font-size: 22px; } .together .tile .l { font-size: 12px; line-height: 1.3; }

/* ===================== v6: apple.com colours, glass ===================== */
:root {
  --paper: #f5f5f7; --sheet: #ffffff; --sheet-2: rgba(118, 118, 128, .10); --ink: #1d1d1f; --muted: #6e6e73; --line: rgba(0,0,0,.12); --hair: rgba(0,0,0,.07);
  --weekend: rgba(0,0,0,.025); --pa: #0071e3; --pa-soft: #e3efff; --pb: #ff4f9a; --pb-soft: #ffe5f0; --mint: #3ed3a8; --miss: #aeaeb2; --good: #28cd41;
  --today: rgba(255, 204, 0, .18); --cat-mind: #5e5ce6; --cat-body: #28cd41; --cat-soul: #ff9500; --cat-home: #00a2ff; --star: #ffb800;
  --tag-goal: #0071e3; --tag-wish: #ff4f9a; --tag-habit: #28cd41; --tag-idea: #ff9500;
  --ga: linear-gradient(155deg, #3a8bff 0%, #0b4fd6 38%, #0a2a86 72%, #071447 100%);
  --gb: linear-gradient(155deg, #ffa7cd 0%, #ff6aa9 42%, #ff4f9a 70%, #e0408f 100%);
  --gb-glow: radial-gradient(95% 85% at 105% 105%, rgba(110, 236, 200, .95), rgba(110, 236, 200, .35) 38%, transparent 66%);
  --ga-glow: radial-gradient(80% 70% at 100% 100%, rgba(100, 210, 255, .35), transparent 62%);
  --card: rgba(255, 255, 255, .66); --card-border: rgba(255, 255, 255, .7);
  --shadow: 0 1px 1px rgba(0,0,0,.02), 0 10px 30px rgba(0,0,0,.06);
  --glass: rgba(245, 245, 247, .7);
  --f-ar: "Amiri", "Geeza Pro", "Noto Naskh Arabic", "Times New Roman", serif;
  --f-quote: "Cormorant Garamond", "New York", "Iowan Old Style", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #000000; --sheet: #1c1c1e; --sheet-2: rgba(118, 118, 128, .2); --ink: #f5f5f7; --muted: #a1a1a6; --line: rgba(255,255,255,.14); --hair: rgba(255,255,255,.08);
    --weekend: rgba(255,255,255,.03); --pa: #2997ff; --pa-soft: #0b2445; --pb: #ff6fb0; --pb-soft: #3a1426; --mint: #63e6be; --miss: #636366; --good: #30d158;
    --today: rgba(255, 214, 10, .14); --cat-mind: #7d7aff; --cat-body: #30d158; --cat-soul: #ff9f0a; --cat-home: #40c8ff; --star: #ffd60a;
    --tag-goal: #2997ff; --tag-wish: #ff6fb0; --tag-habit: #30d158; --tag-idea: #ff9f0a; --ga: linear-gradient(155deg, #3a8bff 0%, #0b4fd6 38%, #0a2a86 72%, #061039 100%); --gb: linear-gradient(155deg, #ffa7cd 0%, #ff6aa9 42%, #ff4f9a 70%, #d63a86 100%);
    --card: rgba(28, 28, 30, .62); --card-border: rgba(255, 255, 255, .08);
    --shadow: 0 10px 30px rgba(0,0,0,.35); --glass: rgba(0, 0, 0, .62); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #000000; --sheet: #1c1c1e; --sheet-2: rgba(118, 118, 128, .2); --ink: #f5f5f7; --muted: #a1a1a6; --line: rgba(255,255,255,.14); --hair: rgba(255,255,255,.08);
  --weekend: rgba(255,255,255,.03); --pa: #2997ff; --pa-soft: #0b2445; --pb: #ff6fb0; --pb-soft: #3a1426; --mint: #63e6be; --miss: #636366; --good: #30d158;
  --today: rgba(255, 214, 10, .14); --cat-mind: #7d7aff; --cat-body: #30d158; --cat-soul: #ff9f0a; --cat-home: #40c8ff; --star: #ffd60a;
  --tag-goal: #2997ff; --tag-wish: #ff6fb0; --tag-habit: #30d158; --tag-idea: #ff9f0a; --ga: linear-gradient(155deg, #3a8bff 0%, #0b4fd6 38%, #0a2a86 72%, #061039 100%); --gb: linear-gradient(155deg, #ffa7cd 0%, #ff6aa9 42%, #ff4f9a 70%, #d63a86 100%);
  --card: rgba(28, 28, 30, .62); --card-border: rgba(255, 255, 255, .08);
  --shadow: 0 10px 30px rgba(0,0,0,.35); --glass: rgba(0, 0, 0, .62); color-scheme: dark;
}
[data-p="a"] { --pg: var(--ga); --pglow: var(--ga-glow); } [data-p="b"] { --pg: var(--gb); --pglow: var(--gb-glow); }

/* soft colour light behind everything, so the glass has something to blur */
body {
  background:
    radial-gradient(55% 38% at 0% 0%, color-mix(in srgb, var(--pa) 22%, transparent), transparent 70%),
    radial-gradient(50% 36% at 100% 18%, color-mix(in srgb, var(--pb) 18%, transparent), transparent 70%),
    radial-gradient(60% 40% at 30% 100%, color-mix(in srgb, var(--mint) 16%, transparent), transparent 70%),
    var(--paper);}
.card, .post, .bubble, .feed-empty, .notice, .switch, .ch-day span, .tile {
  background: var(--card); border: 1px solid var(--card-border);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: var(--shadow);
}
.tile { box-shadow: none; background: var(--sheet-2); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.seg3 { background: var(--sheet-2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.seg3 button.on { background: var(--card); color: var(--ink); box-shadow: 0 3px 10px rgba(0,0,0,.12); backdrop-filter: blur(20px); }
.today .item, .item.edit, .grid-wrap, .addrow input, .cchip, .chip, .tchip, .daynav button, .month button, .btn { background: var(--sheet-2); }
.today .item.v1 { background: color-mix(in srgb, var(--cc) 16%, transparent); }
.grid .hname { background: color-mix(in srgb, var(--sheet) 85%, transparent); }
.btn.pri { background: var(--pc, var(--pa)); }

/* person cards: rich gradient + glow + glass strip */
.pc, .phero { background: var(--pglow), var(--pg); box-shadow: 0 18px 40px color-mix(in srgb, var(--pc) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.25); border: 0; }
.pc::after, .phero::after { background: radial-gradient(110% 80% at 0% 0%, rgba(255,255,255,.28), transparent 50%); }
.pc-bot { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
.pc-chart path:last-child { stroke-opacity: .7; }
.ava { box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
.seg2 { background: rgba(0,0,0,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* the verse */
.quote { position: relative; overflow: hidden; text-align: center;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); display: grid; justify-items: center;}
.quote::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--pa) 14%, transparent), transparent 60%), radial-gradient(70% 90% at 100% 100%, color-mix(in srgb, var(--pb) 12%, transparent), transparent 60%); }
.q-ar { margin: 0; font-family: var(--f-ar); font-size: clamp(30px, 8.4vw, 40px); font-weight: 400;
  background: linear-gradient(90deg, var(--pa), color-mix(in srgb, var(--pa) 50%, var(--pb)), var(--pb)); -webkit-background-clip: text; background-clip: text; color: transparent;}
.q-orn { width: 84px; height: 1px; background: linear-gradient(90deg, transparent, var(--muted), transparent); position: relative; opacity: .7; }
.q-orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--muted); background: var(--paper); }
.q-ru { margin: 0; }
.q-ru p { margin: 0; font-family: var(--f-quote); font-style: italic; font-weight: 500; font-size: clamp(22px, 6vw, 27px); letter-spacing: 0; text-wrap: balance; color: var(--ink);}
.quote figcaption { font-weight: 600; text-transform: uppercase; color: var(--muted);}

/* v7: verse scales with its card on any screen; tag icons */
.quote { container-type: inline-size; width: 100%;}
.q-ar { font-size: clamp(28px, 10.5cqi, 72px); width: 100%;}
.q-ru p { font-size: clamp(21px, 6.4cqi, 44px); max-width: none; }
.q-orn { width: clamp(70px, 22cqi, 180px); }
:root { --tag-like: #ff3b30; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tag-like: #ff453a; } }
:root[data-theme="dark"] { --tag-like: #ff453a; }
.ptag::before { display: none; }
.ptag svg, .tchip svg { width: 14px; height: 14px; flex: none; color: var(--tc); }
.ptag { gap: 5px; padding: 4px 10px 4px 8px; }
.tchip { padding: 7px 12px 7px 10px; }
.tchip:not(.on) svg { opacity: .9; }
.tagrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.tagrow::-webkit-scrollbar { display: none; }
.tchip { flex: none; }
.cbar-ic { color: var(--pc, var(--pa)); }
.cbar-ic svg { width: 26px; height: 26px; }
.hm-item svg { color: var(--pa); }
.q-ar { font-size: clamp(28px, 13.5cqi, 96px); line-height: 1.5; } .q-ru p { font-size: clamp(21px, 7cqi, 52px); }
.quote .q-ar { font-family: var(--f-ar); font-size: clamp(28px, 13.5cqi, 96px); letter-spacing: 0; font-weight: 400; max-width: none;}
.quote .q-ar { font-size: clamp(26px, 8.2cqi, 76px);}
.quote .q-ar { font-size: clamp(24px, 10cqi, 92px); }
.cbar .tagrow { flex-wrap: wrap; overflow: visible; }
.quote { max-width: none; margin: 0; justify-self: stretch; }
/* v8: quieter verse */
.quote { padding: clamp(14px, 3vw, 22px) clamp(16px, 4vw, 32px); gap: 6px; border-radius: 22px; }
.quote .q-ar { font-size: clamp(20px, 6cqi, 34px); line-height: 1.6; }
.q-ru p { font-size: clamp(15px, 4cqi, 21px); line-height: 1.3; }
.q-orn { width: clamp(50px, 14cqi, 110px); }
.quote figcaption { font-size: 10px; letter-spacing: .12em; }
/* v9: edit habits straight from the month table */
.gname { display: flex; align-items: center; gap: 0; width: 100%; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.gname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .gname:hover span { text-decoration: underline dotted; text-underline-offset: 3px; } }
.gedit { display: flex; align-items: center; gap: 4px; }
.gren { flex: 1; min-width: 0; border: 0; border-radius: 8px; padding: 5px 7px; font: inherit; font-size: 14px; background: var(--sheet); color: var(--ink); outline: 2px solid color-mix(in srgb, var(--pc) 45%, transparent); }
.gdel { flex: none; height: 28px; min-width: 28px; border: 0; border-radius: 8px; background: transparent; color: #ff3b30; display: grid; place-items: center; padding: 0 6px; font-size: 12px; font-weight: 600; }
.gdel svg { width: 16px; height: 16px; }
.gdel.arm { background: #ff3b30; color: #fff; }
.gadd .hname { padding: 4px 6px 4px 8px; }
.gadd input { width: 100%; border: 0; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 14px; background: transparent; color: var(--ink); }
.gadd input::placeholder { color: var(--pc, var(--pa)); opacity: .9; }
.gadd input:focus { background: var(--sheet); outline: 2px solid color-mix(in srgb, var(--pc) 45%, transparent); }
.gadd td { border-bottom: 0; }
.grid tbody tr.gadd > * { border-bottom: 0; }
.editbtn { display: inline-flex; align-items: center; gap: 8px; color: var(--pc, var(--pa)); font-weight: 600; }
.editbtn svg { width: 16px; height: 16px; }
.editbtn.pri { color: #fff; }
.grid .hname, .grid thead .hname { background: var(--sheet); }

/* ===================== v10: typography, game, theme ===================== */
:root { --f-num: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
html { -webkit-text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.47; letter-spacing: -.011em; font-feature-settings: "kern" 1, "liga" 1;}
p, .post-t, .intro, .ghint, .pc-note { text-wrap: pretty; }
h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.022em; }
.sec-h span { letter-spacing: .01em; }
.big, .tile .n, .lvl-n, .lvl-x, .chip-g, .cnt, .num, .daynav .dl h2 { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.pc .big { font-weight: 700; letter-spacing: -.035em; }
.ghint { font-size: 13px; line-height: 1.4; color: var(--muted); }
.post-t, .bubble .post-t { font-size: 16px; line-height: 1.5; letter-spacing: -.012em; }
.today .item .nm { font-size: 16px; letter-spacing: -.012em; }
.today .item .ct { font-size: 12.5px; letter-spacing: 0; }
.cnt { font-size: 13px; color: var(--muted); }

/* header right side */
.hright { align-items: center;}

/* chips on profile cards */
.pc-chips { display: flex; gap: 6px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.chip-g, .chip-t { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 2px 8px 2px 6px; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; opacity: 1 !important; }
.chip-g svg { width: 13px; height: 13px; }
.chip-t { padding: 2px 8px; background: rgba(0,0,0,.18); }

/* level bar */
.lvl { width: 100%; max-width: 340px; display: grid; gap: 6px; margin-top: 4px; }
.lvl-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.lvl-n { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.lvl-n svg { width: 14px; height: 14px; color: var(--star); }
.lvl-t { opacity: .85; }
.lvl-x { margin-left: auto; opacity: .8; font-size: 12px; }
.lvl-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.lvl-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #fff, rgba(255,255,255,.75)); box-shadow: 0 0 12px rgba(255,255,255,.6); animation: lvl-in 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lvl-in { from { width: 0; } }
#app.settled .lvl-bar span { animation: none; }
/* awards */
/* confetti + toast */
.confetti { position: fixed; left: 50%; top: 60%; z-index: 80; pointer-events: none; }
.confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: conf var(--d) cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes conf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); transform: translateX(-50%); z-index: 90; padding: 11px 18px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--card-border); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 10px 30px rgba(0,0,0,.2); animation: toast-in .3s cubic-bezier(.2,.8,.2,1) both;}
.toast.out { opacity: 0; transform: translate(-50%, 8px); transition: opacity .4s, transform .4s; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* responsive: wider screens get a little more room */
@media (min-width: 900px) { #app { max-width: 960px; } .people { gap: 18px; } }
@media (max-width: 380px) { .pc .big { font-size: 42px; } } .lvl { position: relative; z-index: 1; }
/* rotating verse / hadith */
.quote .q-ar { white-space: normal; text-wrap: balance; }
.quote.long .q-ar { font-size: clamp(18px, 4.6cqi, 28px); line-height: 1.75; }
.q-next { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--sheet-2); color: var(--muted); display: grid; place-items: center; opacity: .75; transition: opacity .2s, transform .3s; }
@media (hover: hover) and (pointer: fine) { .q-next:hover { opacity: 1; } }
.q-next:active { transform: rotate(180deg); }
.q-next svg { width: 15px; height: 15px; }
/* v11: menu above neighbours, likes and comments */
.post, .bubble { position: relative; }
.post.menu-open, .bubble.menu-open { z-index: 40; }
.pact { margin-top: 2px;}
.pa-like, .pa-cm { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--muted); padding: 6px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; font-family: var(--f-num); transition: background .15s, color .15s; }
.pa-like svg, .pa-cm svg { width: 20px; height: 20px; }
.pa-cm.on { background: var(--sheet-2); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .pa-like:hover, .pa-cm:hover { background: var(--sheet-2); color: var(--ink); } }
.pa-like.on { color: #ff375f; }
@keyframes heart-pop { 0% { transform: scale(.5); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
.pa-who { display: inline-flex; margin-right: 4px; }
.pa-who .ava { margin-left: -6px; box-shadow: 0 0 0 2px var(--sheet); }
.pa-who .ava:first-child { margin-left: 0; }
.pa-cm { margin-left: auto; }
.bubble .pact { justify-content: flex-start; }
.cms { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.cm { display: flex; gap: 8px;}
.cm-b { flex: 1; min-width: 0; background: var(--sheet-2); border-radius: 4px 16px 16px 16px; padding: 8px 12px; }
.cm-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.cm-h time { color: var(--muted); font-size: 12px; }
.cm-b p { margin: 2px 0 0; font-size: 15px; line-height: 1.4; overflow-wrap: normal; }
.cm-del { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 2px; }
@media (hover: hover) and (pointer: fine) { .cm-del:hover { color: #ff3b30; } }
.cm-empty { margin: 0; font-size: 13px; color: var(--muted); }
.cm-new { display: flex; gap: 8px; align-items: center; }
.cm-in { flex: 1; min-width: 0; border: 1px solid var(--hair); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 15px; background: var(--sheet-2); color: var(--ink); }
.cm-in:focus { outline: none; border-color: color-mix(in srgb, var(--pc) 50%, transparent); background: var(--sheet); }
.cm-send { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--pc, var(--pa)); color: #fff; display: grid; place-items: center; flex: none; }
.cm-send svg { width: 16px; height: 16px; margin-left: 2px; }

/* ===================== v12: navigation, tab bar, rewards ===================== */
html, body { overscroll-behavior-y: none; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid;
  padding: 6px max(12px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: var(--glass); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-top: 1px solid var(--hair);}
.tabbar button { border: 0; background: none; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .01em; border-radius: 12px; transition: color .2s; }
.tabbar button svg { width: 26px; height: 26px; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.tabbar button.on { color: var(--pc); }
.tabbar button.on svg { transform: scale(1.08); }
.tabbar button:active svg { transform: scale(.9); }
.cbar { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); margin-bottom: 0; border-radius: 18px 18px 0 0; }
.phero { padding-bottom: 20px; }
#app { transition: none; will-change: auto; }

/* pull to refresh */
.ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 4px); z-index: 70; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: 0 6px 18px rgba(0,0,0,.18); opacity: 0; transform: translate(-50%, 0); pointer-events: none; transition: opacity .15s;}
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* rewards tab */
.rw-intro p { margin: 0; font-size: 15px; line-height: 1.45; }
.rw-h .ring .ring-bg { stroke: var(--sheet-2); }
.rw-h .ring .ring-fg { stroke: var(--pc); }
.rw-h span { font-size: 13px; }
.rw { padding: 12px; border-radius: 16px; background: var(--sheet-2); position: relative; overflow: hidden;}
.rw-i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--card); color: var(--muted); }
.rw-i svg { width: 22px; height: 22px; }
.rw-b { flex: 1;}
.rw-b b { font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; overflow-wrap: normal; }
.rw-s { font-size: 12.5px; color: var(--muted); }
.rw-bar { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.rw-bar span { display: block; height: 100%; border-radius: 3px; background: var(--pc); }
.rw.earned { background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 20%, transparent), color-mix(in srgb, var(--mint) 16%, transparent)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--pc) 45%, transparent) inset; }
.rw.earned .rw-i { background: var(--pg); color: #fff; animation: gift-wiggle 2.4s ease-in-out infinite; }
.rw.earned .rw-s { color: var(--pc); font-weight: 600; }
.rw.got { opacity: .62; }
.rw.got .rw-i { color: var(--good); }
.rw.got b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
@keyframes gift-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
.rw-claim { padding: 8px 14px; font-size: 14px; flex: none; }
.rw-del { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 8px; flex: none; }
@media (hover: hover) and (pointer: fine) { .rw-del:hover { color: #ff3b30; } }
.rw-add { grid-template-columns: minmax(0, 1fr) auto;}
.rw-add input { grid-column: 1 / -1; border: 0; border-radius: 14px; padding: 12px 14px; background: var(--sheet-2); font: inherit; color: var(--ink); }
.rw-add input:focus { outline: 2px solid color-mix(in srgb, var(--pc) 45%, transparent); }
.rw-goal { display: flex; gap: 4px; align-items: center; }
.rw-goal button { border: 0; background: var(--sheet-2); color: var(--muted); border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 600; font-family: var(--f-num); }
.rw-goal button.on { background: var(--pc); color: #fff; }
@media (prefers-reduced-motion: reduce) { .rw.earned .rw-i { animation: none; } }

/* rewards add row: goal chips and button never overlap */
.rw-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rw-add input { flex: 1 1 100%; }
.rw-goal { flex: 1 1 auto; flex-wrap: wrap; }
.rw-add .btn { flex: none; margin-left: auto; }
/* ===================== v13: clock + weather header ===================== */
.hclock { font-family: var(--f-num); line-height: 1; font-variant-numeric: tabular-nums;}
.wx { align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--card-border); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow);}
@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes wx-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes wx-drift { from { transform: translateX(-1.5px); } to { transform: translateX(2px); } }
@keyframes wx-fall { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@keyframes wx-snow { 0% { transform: translate(0, -4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(2px, 7px); opacity: 0; } }
@keyframes wx-flash { 0%, 70%, 100% { opacity: 1; } 75%, 85% { opacity: .2; } }
@media (max-width: 400px) { .wx { padding-right: 10px; } }
/* ===================== v14: sun path next to the clock ===================== */
.wx { display: none; }
@keyframes sun-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,204,0,.18), 0 0 14px rgba(255,170,0,.7); } 50% { box-shadow: 0 0 0 7px rgba(255,204,0,.08), 0 0 22px rgba(255,170,0,.9); } }
@media (max-width: 400px) { .hclock { font-size: 34px; } }
/* ===================== v15: Fajr → Isha sun path, sky tint ===================== */
:root { --sky-tint: transparent; --sky-dusk: transparent; }
body {
  background:
    radial-gradient(90% 45% at 50% 0%, var(--sky-dusk), transparent 70%),
    linear-gradient(var(--sky-tint), var(--sky-tint)),
    radial-gradient(55% 38% at 0% 0%, color-mix(in srgb, var(--pa) 22%, transparent), transparent 70%),
    radial-gradient(50% 36% at 100% 18%, color-mix(in srgb, var(--pb) 18%, transparent), transparent 70%),
    radial-gradient(60% 40% at 30% 100%, color-mix(in srgb, var(--mint) 16%, transparent), transparent 70%),
    var(--paper);
  background-attachment: fixed;
  transition: background-color 2s;
} .hright { grid-area: btns; align-self: start; }
.st { display: grid; justify-items: center; gap: 1px; padding: 4px 2px; border-radius: 10px; transition: background .3s; }
.st small { color: var(--muted);}
.st b { font-family: var(--f-num); font-size: 14px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.st.on { background: color-mix(in srgb, #ffb400 14%, transparent); }
.st.on small { color: #e89400; }
@media (max-width: 380px) { .st b { font-size: 13px; } .st small { font-size: 9px; } }
/* ===================== v16: calm sun card ===================== */
.st small { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sun-where { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 2px; }
.hclock { font-size: clamp(40px, 11vw, 54px); font-weight: 700; letter-spacing: -.045em; }
/* ===================== v17: post gestures, sun night colour ===================== */
.post, .bubble { touch-action: pan-y; -webkit-user-select: text; }
.post.swiping, .bubble.swiping { -webkit-user-select: none; user-select: none; }
.post::before, .bubble::before { content: ""; position: absolute; left: -38px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: var(--sheet-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238e8e93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M10 6L4 12l6 6M4 12h10a6 6 0 0 1 6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: var(--rp, 0); transform: scale(calc(.6 + var(--rp, 0) * .4)); pointer-events: none; }
.burst { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 5;}
.burst svg { width: 100%; height: 100%; }
@keyframes burst { 0% { transform: scale(.2); opacity: 0; } 18% { transform: scale(1.15); opacity: 1; } 32% { transform: scale(.95); } 45% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1.1) translateY(-20px); opacity: 0; } }
.post-who time { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .burst { animation-duration: .01s; } }
/* ===================== v18 ===================== *//* header: clock and date centred on every screen, sun card centred under them */
.hright { position: absolute; top: 0; right: 0; display: flex; gap: 8px; }
@media (max-width: 420px) { .hright { gap: 6px; } }

/* profile hero: the success curve stays at the very bottom, under the level bar */
.phero-bg .pc-chart { height: 14%; opacity: .32; }
.phero .lvl { margin-top: 8px; }

/* likes: 3D heart */
.burst { width: 110px; height: 110px; margin: -55px 0 0 -55px; perspective: 500px; filter: none; animation: none; color: inherit; }
.b3d { position: absolute; inset: 0; display: block; transform-style: preserve-3d; animation: heart3d 1s cubic-bezier(.2,.8,.25,1) forwards; filter: drop-shadow(0 10px 18px rgba(255, 55, 95, .5)); }
.b3d svg { width: 100%; height: 100%; }
.burst i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #ff5c8a; opacity: 0;
  animation: heart-p .8s .12s cubic-bezier(.2,.8,.3,1) forwards; transform: rotate(var(--a)) translateY(0); }
.burst i:nth-child(odd) { background: #ffb3c7; width: 7px; height: 7px; }
@keyframes heart3d {
  0% { transform: scale(.1) rotateY(-90deg); opacity: 0; }
  25% { transform: scale(1.18) rotateY(25deg); opacity: 1; }
  40% { transform: scale(.94) rotateY(-12deg); }
  55% { transform: scale(1.04) rotateY(6deg); }
  75% { transform: scale(1) rotateY(0); opacity: 1; }
  100% { transform: scale(1.15) translateY(-28px) rotateX(20deg); opacity: 0; }
}
@keyframes heart-p { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-10px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.3); } }
.pa-like.pop svg { animation: like3d .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes like3d { 0% { transform: perspective(200px) scale(.4) rotateY(-180deg); } 60% { transform: perspective(200px) scale(1.35) rotateY(20deg); } 100% { transform: perspective(200px) scale(1) rotateY(0); } }

/* channel bubble: body, then one tidy footer row (likes · comments · time) */
.bubble { padding: 12px 14px 8px;}
.bubble .pact { margin-top: 0; gap: 2px; }
.bubble .pact time { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bubble .pa-cm { margin-left: 0; }
.bubble .pa-like, .bubble .pa-cm { padding: 4px 8px; }
.bubble .pa-like svg, .bubble .pa-cm svg { width: 18px; height: 18px; }
.bubble .post-img { margin: 2px -4px 0; width: calc(100% + 8px); }
.bubble .post-img img { max-height: 420px; border-radius: 14px; }
.bubble .cms { min-width: 0; }

/* feed: search + tag filter */
.ftools { display: grid; gap: 10px; }
.fsearch { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--muted); }
.fsearch svg { width: 18px; height: 18px; flex: none; }
.fsearch input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 0; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.fsearch:focus-within { border-color: color-mix(in srgb, var(--pa) 50%, transparent); }

/* drag a tag onto a post */
.cbar .tchip { touch-action: manipulation; cursor: pointer; }
/* теги не перетаскиваются — только нажатие */
body.tag-dragging .post, body.tag-dragging .bubble { transition: box-shadow .15s, transform .15s; }

/* rewards with photos */
.rw-photo { padding: 0; border: 0; overflow: hidden; cursor: zoom-in; width: 52px; height: 52px; border-radius: 14px; }
.rw-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw.earned .rw-photo { animation: none; box-shadow: 0 0 0 2px var(--pc); }
.rw-ph { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sheet-2); color: var(--pc, var(--pa)); cursor: pointer; flex: none; }
.rw-ph svg { width: 22px; height: 22px; }
.rw-ph input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rw-prev img { width: 52px; height: 52px; border-radius: 12px; }
.rw-prev { width: 52px; }
.rw-prev button { width: 22px; height: 22px; font-size: 14px; top: 2px; right: 2px; }
.chfilter { background: transparent; top: calc(env(safe-area-inset-top, 0px) + 60px); padding: 4px 0; } .chfilter .tchip { background: var(--card); border: 1px solid var(--card-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ===================== v19 ===================== */
/* top bar: the name sits exactly in the middle, whatever is on the sides */
.pbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.pbar .back { justify-self: start; }
.pbar-t { grid-column: 2; text-align: center; max-width: 60vw; }
.pbar .sync { justify-self: end; grid-column: 3; }

/* one card: clock + date + weather, then the sun / moon arc */
.hcard { position: relative; justify-self: center;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); overflow: hidden; isolation: isolate;}
.hcard::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, #ffb400 calc(var(--hc-sun, 0) * 1%), transparent), transparent 70%); }
.hc-time { min-width: 0; }
.hc-sub { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted);}
.hc-sub span { color: var(--ink); font-family: var(--f-num); }
.hcard .hright { position: static; display: flex;}
/* real moon phase on the night arc */
.moon-dark { fill: color-mix(in srgb, #8f9cff 22%, var(--sheet)); }
.moon-lit { fill: #eef1ff; }
@keyframes moon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
/* comments: like + edit */
.cm { align-items: flex-start; }
.cm-like { flex: none; align-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 0; border: 0; background: none; color: var(--muted); padding: 2px 2px; font-size: 11px; font-weight: 600; font-family: var(--f-num); }
.cm-like svg { width: 16px; height: 16px; }
.cm-like.on { color: #ff375f; }
.cm-like.pop svg { animation: like3d .55s cubic-bezier(.3,1.6,.5,1); }
.cm-ic { border: 0; background: none; color: var(--muted); padding: 0 2px; margin-left: auto; display: grid; place-items: center; }
.cm-ic svg { width: 13px; height: 13px; }
.cm-ic + .cm-del { margin-left: 2px; }
.cm-edit { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cm-ein { flex: 1 1 160px; min-width: 0; border: 1px solid var(--hair); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 15px; background: var(--sheet); color: var(--ink); }
.cm-ein:focus { outline: 2px solid color-mix(in srgb, var(--pc) 45%, transparent); }
.cm-edit .btn { padding: 7px 12px; font-size: 13px; }
.hcard > * { grid-area: auto; grid-column: 1 / -1; } .hcard { grid-template-columns: minmax(0, 1fr); } .hc-sub { text-transform: none; } .hc-sub::first-letter { text-transform: uppercase; }

/* ===================== v20: compose from the feed, file attachments ===================== */
.cbar.inline { position: static; margin: 0; border-radius: var(--r); border: 1px solid var(--card-border); background: var(--card); box-shadow: var(--shadow); padding: 12px 14px; gap: 10px; }
.cbar-who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding-left: 6px; } /* аватар ровно над камерой (40 px) */
.cbar-who b { color: var(--ink); font-weight: 600; }
.cbar.inline .tagrow { flex-wrap: wrap; }
.cbar-att { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.cbar-row .cbar-ic { width: 36px; }
.pfile { display: flex; align-items: center; gap: 10px; max-width: 100%; border: 1px solid var(--hair); background: var(--sheet-2); border-radius: 14px; padding: 8px 12px 8px 8px; text-align: left; color: var(--ink); font: inherit; cursor: pointer; transition: background .15s; }
@media (hover: hover) and (pointer: fine) { .pfile:hover { background: color-mix(in srgb, var(--pc, var(--pa)) 10%, var(--sheet-2)); } }
.pf-ic { position: relative; width: 36px; height: 40px; flex: none; color: var(--pc, var(--pa)); }
.pf-ic svg { width: 100%; height: 100%; }
.pf-ic i { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .02em; color: var(--pc, var(--pa)); }
.pf-b { display: grid; min-width: 0; }
.pf-b b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
.pf-b small { font-size: 12px; color: var(--muted); }
.pf-x { margin-left: 6px; font-size: 18px; color: var(--muted); }
.post .pfile, .bubble .pfile { justify-self: start; }
/* keyboard shortcuts sheet */
.keys-help { cursor: default; }
.kh-card { width: min(440px, 100%); background: var(--sheet); color: var(--ink); border-radius: 22px; padding: 22px 22px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: pop-in .2s ease both; }
.kh-card h2 { margin: 0 0 12px; }
.kh-card dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; align-items: center; }
.kh-card dt { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.kh-card dt span { color: var(--muted); font-size: 12px; }
.kh-card dd { margin: 0; font-size: 14px; color: var(--muted); }
kbd { font-family: var(--f-num); font-size: 12px; font-weight: 700; min-width: 24px; padding: 3px 7px; border-radius: 7px; text-align: center; background: var(--sheet-2); border: 1px solid var(--hair); box-shadow: 0 1px 0 var(--hair); color: var(--ink); }
.kh-card p { margin: 14px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
@media (hover: none) { .keys-hint { display: none; } }

/* ===================== v21: "sent" in 3D ===================== */
.sent-fly { position: fixed; z-index: 85; width: 0; height: 0; pointer-events: none; perspective: 600px; }
.sf-plane { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--pa); transform-style: preserve-3d;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--pa) 45%, transparent)); animation: plane3d .9s cubic-bezier(.3,.1,.2,1) forwards; }
.sf-plane svg { width: 26px; height: 26px; }
.sf-ring { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--pa) 70%, transparent); animation: sent-ring .6s ease-out forwards; }
@keyframes plane3d {
  0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
  25% { transform: translate3d(-6px, 6px, 0) rotateX(25deg) rotateY(-20deg) rotateZ(-8deg) scale(1.15); }
  100% { transform: translate3d(140px, -220px, 120px) rotateX(55deg) rotateY(35deg) rotateZ(-25deg) scale(.35); opacity: 0; }
}
@keyframes sent-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.cbar-send:active { transform: scale(.86); }
/* the new post drops in, tilting into place */
@keyframes post3d {
  0% { opacity: 0; transform: perspective(800px) translateY(-14px) rotateX(-22deg) scale(.96); }
  60% { opacity: 1; transform: perspective(800px) translateY(2px) rotateX(4deg) scale(1.005); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .post.new3d, .bubble.new3d { animation: none; } }

/* ===================== v22: online status ===================== */
.ava { position: relative; overflow: visible; }
.ava.online::after { content: ""; position: absolute; right: calc(var(--s) * .02); bottom: calc(var(--s) * .02); width: max(9px, calc(var(--s) * .26)); height: max(9px, calc(var(--s) * .26)); border-radius: 50%;
  background: #30d158; box-shadow: 0 0 0 2px var(--sheet), 0 0 8px rgba(48, 209, 88, .7); animation: online-pulse 2.4s ease-in-out infinite; }
.pc .ava.online::after, .phero .ava.online::after { box-shadow: 0 0 0 2.5px rgba(255,255,255,.9), 0 0 10px rgba(48, 209, 88, .8); }
@keyframes online-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--sheet), 0 0 6px rgba(48,209,88,.6); } 50% { box-shadow: 0 0 0 2px var(--sheet), 0 0 12px rgba(48,209,88,.95); } }
.chip-on { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.16); color: rgba(255,255,255,.85); white-space: nowrap; }
.chip-on.on { background: rgba(48, 209, 88, .22); color: #eafff0; }
.chip-on i { width: 7px; height: 7px; border-radius: 50%; background: #30d158; box-shadow: 0 0 6px #30d158; }
@media (prefers-reduced-motion: reduce) { .ava.online::after { animation: none; } }
/* edit / delete right on the post */
.pm { display: inline-flex; align-items: center;}
.pm-ic { padding: 0 6px; border: 0; background: transparent; color: var(--muted); display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; transition: background .15s, color .15s;}
@media (hover: hover) and (pointer: fine) { .pm-ic:hover { background: var(--sheet-2); color: var(--ink); } }
@media (hover: hover) and (pointer: fine) { .pm-ic.danger:hover { color: #ff3b30; } }
.pm-ic.arm { background: #ff3b30; color: #fff;}
.bubble .pm { top: 6px; right: 6px; }
.bubble .post-t { padding-right: 62px; }

/* ===================== v23: slim sky header ===================== */
.hcard { display: block; max-width: none; width: 100%; padding: 12px 14px; border-radius: 22px; gap: 0; }
.hcard::before { transition: background 1.5s; }
.hc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.hcard .hclock { font-size: clamp(30px, 8.5vw, 40px); line-height: 1; letter-spacing: -.04em; }
.hcard .hc-sub { margin-top: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.hcard .hright { gap: 6px; }
.hcard .hava .ava { --s: 34px !important; }

.skyline { all: unset; box-sizing: border-box; min-width: 0; cursor: pointer; padding: 2px 0; -webkit-tap-highlight-color: transparent;}
.skyline:focus-visible { outline: 2px solid var(--pa); outline-offset: 4px; border-radius: 8px; }
.sl-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.sl-cap b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-cap em { font-style: normal; font-family: var(--f-num); font-size: 13px; font-weight: 600; color: var(--muted); }
.sl-track { position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.sl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f) * 100%); border-radius: 3px; background: linear-gradient(90deg, #ff9f0a, #ffd60a 50%, #ff7a45); }
.sky-night .sl-fill, .sky-dusk .sl-fill, .sky-dawn .sl-fill { background: linear-gradient(90deg, #5e5ce6, #8f9cff 60%, #c9d2ff); }
.sl-mark { position: absolute; top: 50%; width: 2px; height: 10px; margin: -5px 0 0 -1px; border-radius: 1px; background: color-mix(in srgb, var(--cat-mind) 70%, transparent); }
.sl-dot { position: absolute; top: 50%; width: 0; height: 0; }
.sl-sun { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe0, #ffd60a 45%, #ff9f0a); box-shadow: 0 0 0 4px rgba(255, 204, 0, .18), 0 0 16px rgba(255, 170, 0, .85); animation: sun-pulse 3s ease-in-out infinite; }
.sl-moon { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; filter: drop-shadow(0 0 6px rgba(170, 180, 255, .8)); }
.sl-moon svg { width: 100%; height: 100%; display: block; }
.sl-ends { display: flex; justify-content: space-between; font-family: var(--f-num); font-weight: 600; color: var(--muted);}
.hcard .sun-where { margin-top: 6px; font-size: 11.5px; color: var(--muted); text-align: center; }

/* the card is tinted like the sky right now */
.hcard.sky-dawn::before   { background: linear-gradient(115deg, rgba(255, 140, 170, .20), rgba(140, 120, 255, .10) 55%, transparent); }
.hcard.sky-day::before    { background: linear-gradient(115deg, rgba(90, 170, 255, .18), rgba(120, 210, 255, .08) 60%, transparent); }
.hcard.sky-golden::before { background: linear-gradient(115deg, rgba(255, 170, 60, .22), rgba(255, 110, 90, .10) 60%, transparent); }
.hcard.sky-dusk::before   { background: linear-gradient(115deg, rgba(255, 110, 120, .18), rgba(110, 90, 230, .16) 60%, transparent); }
.hcard.sky-night::before  { background: linear-gradient(115deg, rgba(90, 92, 230, .20), rgba(20, 30, 80, .12) 60%, transparent); }
/* a few stars at night */
.hcard.sky-night::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(1px 1px at 18% 30%, #fff, transparent), radial-gradient(1px 1px at 42% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 66% 40%, #fff, transparent), radial-gradient(1px 1px at 84% 22%, #fff, transparent), radial-gradient(1px 1px at 30% 72%, #fff, transparent), radial-gradient(1px 1px at 76% 78%, #fff, transparent); }
:root[data-theme="light"] .hcard.sky-night::after { opacity: .0; }
@media (max-width: 400px) {
  .hc-row { gap: 10px; }
  .hcard { padding: 10px 12px; }
  .sl-cap em { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sl-sun { animation: none; } }

/* ===================== v24 ===================== */
.hc-row > * { grid-area: auto; grid-column: auto; }
.hcard > .hc-row { grid-column: auto; }

/* new message: rises from below with a soft 3D tilt and a short glow */
.post.new3d, .bubble.new3d { animation: msg-in .65s cubic-bezier(.2,.9,.25,1.1) both; transform-origin: 50% 100%; }
@keyframes msg-in {
  0% { opacity: 0; transform: perspective(900px) translateY(26px) rotateX(18deg) scale(.96); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc, var(--pa)) 0%, transparent); }
  55% { opacity: 1; transform: perspective(900px) translateY(-3px) rotateX(-3deg) scale(1.01); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc, var(--pa)) 25%, transparent); }
  100% { opacity: 1; transform: none; }
}
.cm.cm-in3d { animation: cm-in .5s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes cm-in { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 60% { opacity: 1; transform: translateY(-2px); } 100% { transform: none; } }

/* deleting: tilts away, shrinks and folds the gap closed */
.leaving { pointer-events: none;}
@keyframes msg-out {
  0% { opacity: 1; transform: none; }
  45% { opacity: .55; transform: perspective(900px) translateX(14px) rotateY(-12deg) scale(.96); filter: blur(.5px); }
  100% { opacity: 0; transform: perspective(900px) translateX(60px) rotateY(-24deg) scale(.88); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -8px; border-width: 0; filter: blur(2px); }
}
@media (prefers-reduced-motion: reduce) { .post.new3d, .bubble.new3d, .cm.cm-in3d { animation: none; } }
/* online: a small green dot right after the name */
.ndot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; vertical-align: .12em; background: #30d158;
  box-shadow: 0 0 0 2px color-mix(in srgb, #30d158 22%, transparent), 0 0 8px rgba(48, 209, 88, .75); animation: ndot 2.4s ease-in-out infinite; }
.pc .ndot, .pbar-t .ndot { width: 9px; height: 9px; }
.pc .ndot { box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 10px rgba(48, 209, 88, .9); }
.cm-h .ndot { width: 6px; height: 6px; margin-left: 4px; }
@keyframes ndot { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ndot { animation: none; } }

/* ===================== v25: calmer post layout ===================== */
.post { gap: 0; padding: 16px 18px 10px; }
.post-h { align-items: center; gap: 12px; margin-bottom: 14px; }
.post-who { display: grid; gap: 3px; line-height: 1.2; }
.post-who b { font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; display: inline-flex; align-items: center; }
.post-who time { font-size: 12.5px; line-height: 1.2; color: var(--muted); letter-spacing: 0; }
.post .ptag { margin-bottom: 10px; }
.post .post-t { margin: 0 0 4px; font-size: 16px; line-height: 1.55; letter-spacing: -.01em; }
.post .post-img { margin-top: 8px; }
.post .pfile { margin-top: 8px; }
.post .pact { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hair); }
.post .cms { margin-top: 4px; padding-top: 12px; }
.bubble { gap: 10px; }
.bubble .post-t { line-height: 1.5; }

/* ===================== v26 ===================== */
/* the armed delete button keeps its white "Удалить?" even under the mouse */
.pm-ic.arm { background: #ff3b30; color: #fff; padding: 0 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px rgba(255, 59, 48, .35); }
@media (hover: hover) and (pointer: fine) { .pm-ic.arm:hover, .pm-ic.danger.arm:hover { background: #ff3b30; color: #fff; padding: 0 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px rgba(255, 59, 48, .35); } }
@media (hover: hover) and (pointer: fine) { .rw-del:hover, .cm-del:hover { color: #ff3b30; } }

/* new post in the feed: lifts in from below, tilting in 3D, with a soft glow ring */
.feed .post.new3d { animation: feed-in .75s cubic-bezier(.18,.9,.22,1.12) both; transform-origin: 50% 100%; }
@keyframes feed-in {
  0% { opacity: 0; transform: perspective(900px) translateY(40px) rotateX(24deg) scale(.94); }
  55% { opacity: 1; transform: perspective(900px) translateY(-4px) rotateX(-4deg) scale(1.01); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 45%, transparent), 0 18px 40px color-mix(in srgb, var(--pc) 25%, transparent); }
  100% { opacity: 1; transform: none; }
}
/* deleting: a short shake-free tilt away + fold */
.leaving { animation: msg-out .46s cubic-bezier(.4,0,.6,1) forwards !important; }

/* reduced motion: no movement, but still clearly visible — a fade and a highlight */
@media (prefers-reduced-motion: reduce) {
  .feed .post.new3d, .post.new3d, .bubble.new3d { animation: calm-in .7s ease both !important; }
  .cm.cm-in3d { animation: calm-in .6s ease both !important; }
  .leaving { animation: calm-out .4s ease forwards !important; }
  .sent-fly { display: none; }
}
@keyframes calm-in { 0% { opacity: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, var(--pa)) 60%, transparent); } 60% { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, var(--pa)) 45%, transparent); } 100% { opacity: 1; } }
@keyframes calm-out { to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -8px; border-width: 0; } }
.pm-ic.arm { animation: none !important; opacity: 1 !important;}
.pm-ic.arm svg { width: 14px; height: 14px; color: #fff; }

/* ===================== v27: напоминания, похвала, моушен ===================== */
/* Движение служит смыслу: показать, откуда пришло и куда ушло, подтвердить нажатие. Коротко, мягко, без зацикленных эффектов. */
:root { --spring: cubic-bezier(.2,.9,.25,1.12); --out: cubic-bezier(.22,.8,.3,1); }

/* экран появляется слоями: шапка, карточки, лента — с маленькой задержкой друг за другом */
#app:not(.settled) > * { animation: rise-in .55s var(--out) both; }
#app:not(.settled) > *:nth-child(2) { animation-delay: .04s; }
#app:not(.settled) > *:nth-child(3) { animation-delay: .08s; }
#app:not(.settled) > *:nth-child(4) { animation-delay: .12s; }
#app:not(.settled) > *:nth-child(5) { animation-delay: .16s; }
#app:not(.settled) > *:nth-child(n+6) { animation-delay: .2s; }
#app:not(.settled) .people .pc { animation: rise-in .6s var(--spring) both; }
#app:not(.settled) .people .pc[data-p="b"] { animation-delay: .07s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
/* отклик на нажатие: всё, что нажимается, чуть утапливается */
.btn, .pc, .pr-chip, .rchip, .item:not(.edit), .tabbar button, .cchip { transition: transform .18s var(--out), box-shadow .25s ease, background-color .2s ease; }
.btn:active, .pr-chip:active, .rchip:active, .tabbar button:active, .cchip:active { transform: scale(.95); }
.pc:active { transform: scale(.985); }
@media (hover: hover) { .pc:hover { transform: translateY(-2px); } }

/* --- время напоминания рядом с привычкой --- */
.gcell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gcell .gname { flex: 1; min-width: 0; }
.rchip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 3px; height: 24px; min-width: 24px; padding: 0 6px; border-radius: 999px; background: transparent; color: var(--muted); font: 600 12px/1 var(--f-num, inherit); font-variant-numeric: tabular-nums; cursor: pointer; opacity: .55; }
.rchip svg { width: 13px; height: 13px; flex: none; }
.rchip:focus-within { opacity: 1; background: var(--sheet); }
@media (hover: hover) and (pointer: fine) { .rchip:hover { opacity: 1; background: var(--sheet); } }
.rchip.on { opacity: 1; color: var(--pc, var(--pa)); background: color-mix(in srgb, var(--pc, var(--pa)) 13%, transparent); }
.rchip.on svg { animation: bell-ring 1.1s var(--out) 1 both; transform-origin: 50% 10%; }
#app.settled .rchip.on svg { animation: none; }
.rtime { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer; font-size: 16px; }
.rchip:focus-within { outline: 2px solid color-mix(in srgb, var(--pc, var(--pa)) 55%, transparent); outline-offset: 1px; }
@keyframes bell-ring { 0% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
.grid .gcell .gname span { max-width: 100%; }
.gdel.rclr { color: var(--muted); }
.gdel.rclr svg { width: 15px; height: 15px; }
.item.edit .rchip { align-self: center; }
.item .ct svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 2px; }

/* --- похвалить партнёра --- */
.praise { margin-top: 14px; border-radius: var(--r); background: var(--sheet); box-shadow: var(--shadow);}
.pr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 15px; }
.pr-head b { font-weight: 650; letter-spacing: -.01em; }
.pr-to { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pr-hint { margin-left: auto; font-size: 12px; color: var(--muted); }
.pr-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; scroll-snap-type: x proximity; }
.pr-chips::-webkit-scrollbar { display: none; }
.pr-chip { flex: none; scroll-snap-align: start; border: 0; border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 550; color: var(--ink); background: var(--sheet-2); white-space: nowrap; cursor: pointer; }
@media (hover: hover) { .pr-chip:hover { background: color-mix(in srgb, var(--pb) 14%, var(--sheet-2)); } }
.pr-fly { position: fixed; z-index: 90; font-size: 30px; line-height: 1; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.pc.praised { animation: praised 1.2s var(--out); }
@keyframes praised { 0% { box-shadow: var(--shadow); } 35% { box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 18px 46px color-mix(in srgb, var(--pc) 45%, transparent); transform: scale(1.02); } 100% { box-shadow: var(--shadow); transform: none; } }

/* --- пришла похвала --- */
.praise-in { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 12px 12px 14px; border-radius: var(--r); background: linear-gradient(120deg, color-mix(in srgb, var(--pb) 16%, var(--sheet)), var(--sheet) 70%); box-shadow: var(--shadow); position: relative; }
.praise-in.fresh { animation: praise-in .7s var(--spring) both; }
.pi-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pi-t b { font-size: 14.5px; font-weight: 650; }
.pi-t p { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pi-t small { font-size: 12px; color: var(--muted); }
.pi-thx { flex: none; padding: 8px 12px; font-size: 13.5px; }
.pi-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.praise-in.leaving { animation: calm-out .26s ease forwards !important; }
@keyframes praise-in { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 100% { opacity: 1; transform: none; } }
@media (max-width: 420px) { .pr-hint { display: none; } .pi-thx { padding: 8px 10px; } }

/* меньше движения — по желанию системы: оставляем только плавное появление */
@media (prefers-reduced-motion: reduce) {
  #app:not(.settled) > *, #app:not(.settled) .people .pc, .praise-in.fresh { animation: calm-in .4s ease both !important; }
  .rchip.on svg, .pc.praised { animation: none !important; }
  .btn:active, .pr-chip:active, .rchip:active, .pc:active { transform: none; }
@media (hover: hover) and (pointer: fine) { .pc:hover { transform: none; } }
}
/* в режиме правки строка становится шире, чтобы название было видно целиком */
.grid .hname.gedit-on { max-width: 320px; min-width: 240px; }
.gedit .gren { min-width: 100px; }
/* на компьютере пустые колокольчики показываются только при наведении на строку — меньше шума */
@media (hover: hover) {
  .grid .rchip:not(.on), .item.edit .rchip:not(.on) { opacity: 0; }
  .grid tr:hover .rchip:not(.on), .item.edit:hover .rchip:not(.on), .rchip:focus-within { opacity: .6; }
}

/* ===================== v28: скорость на телефоне ===================== */
/* Размытие под каждой карточкой заставляло телефон пересчитывать фон при каждой прокрутке.
   Оставляем его только у закреплённых панелей и всплывающих меню, а карточки делаем почти непрозрачными — выглядят так же. */
:root { --card-solid: rgba(255, 255, 255, .86); }
:root[data-theme="dark"] { --card-solid: rgba(30, 30, 33, .9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --card-solid: rgba(30, 30, 33, .9); } }
.card, .post, .bubble, .feed-empty, .notice, .switch, .ch-day span, .tile, .fsearch, .wx, .seg3, .seg3 button.on, .praise, .praise-in {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.card, .post, .bubble, .feed-empty, .notice, .switch, .praise { background-color: var(--card-solid); }
/* то, что за экраном, браузер не рисует, пока до него не долистали */
.feed .post, .channel .bubble, .channel .post { content-visibility: auto; contain-intrinsic-size: auto 260px; }
body { text-rendering: auto; }
/* ни один блок не может растянуть страницу шире экрана телефона */
#app > *, .praise, .pr-chips { min-width: 0; }
html, body { overflow-x: clip; }
.feed, .channel, .pbody { grid-template-columns: minmax(0, 1fr); }
.feed > *, .channel > *, .pbody > *, .cbar > * { min-width: 0; }
/* под палец: на сенсорных экранах мелкие кнопки получают зону нажатия не меньше 36–40 px */
@media (pointer: coarse) {
  .pa-like, .pa-cm { min-height: 40px; min-width: 40px; }
  .rw-del { min-width: 36px; min-height: 36px; }
  .rw-ph { min-width: 36px; min-height: 36px; }
  .rchip { height: 32px; min-width: 32px; padding: 0 8px; }
  .gcell { gap: 2px; }
}
/* узкий экран: в таблице место под названия дорого — колокольчик без цифр и только у привычек с напоминанием.
   Время ставится, если нажать на название (строка раскрывается), и видно в списке «Сегодня». */
@media (max-width: 600px) {
  .gcell .rchip:not(.on) { display: none; }
  .gcell .rchip.on { padding: 0 4px; min-width: 22px; height: 22px; }
  .gcell .rchip.on span { display: none; }
}

/* вход через Google */
.auth .gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.auth .gbtn svg { flex: none; background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; }

/* Меню аватара в верхней карточке: не обрезается её краем и не просвечивает.
   Карточке нужен overflow: hidden только для фона-градиента — даём ему те же скруглённые углы,
   а пока меню открыто, разрешаем ему выходить за край и поднимаем карточку над соседними. */
.hcard::before, .hcard::after { border-radius: inherit; }
.hcard:has(.hm-pop) { overflow: visible; z-index: 30; }
.hcard .hm-pop { background: var(--sheet); } /* размытие под меню внутри размытой карточки не работает — фон плотный */

/* Теги записи: тонкая строка под полем ввода, подбираются сами; на записи — внизу, мелко */
.cbar .tagrow.compact { flex-wrap: nowrap; overflow-x: auto; gap: 4px; margin-top: 8px; padding-bottom: 2px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.cbar .tagrow.compact::-webkit-scrollbar { display: none; }
.tagrow.compact .tchip { flex: none; padding: 3px 9px 3px 7px; font-size: 11.5px; gap: 4px; min-height: 0; line-height: 1.3; }
.tagrow.compact .tchip svg { width: 12px; height: 12px; }
.tagrow.compact .tchip.auto { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); }
.post .ptag.bottom { justify-self: start; margin-top: 2px; padding: 2px 8px 2px 6px; font-size: 11px; font-weight: 600; opacity: .85; }
.post .ptag.bottom svg { width: 11px; height: 11px; }

/* Блок профиля: маленький и тонкий, исламский геометрический узор (восьмиконечные звёзды — хатам) и золотистая окантовка */
section.phero { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 12px; row-gap: 1px;
  padding: 10px 14px 10px 10px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 214, 150, .38), 0 8px 22px color-mix(in srgb, var(--pc) 22%, transparent); }
section.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='white' stroke-width='1'%3E%3Crect x='11' y='11' width='18' height='18'/%3E%3Crect x='11' y='11' width='18' height='18' transform='rotate%2845 20 20%29'/%3E%3Ccircle cx='20' cy='20' r='3.2'/%3E%3Cpath d='M0 0l5 5M40 0l-5 5M0 40l5-5M40 40l-5-5M20 0v3M20 40v-3M0 20h3M40 20h-3'/%3E%3C/g%3E%3C/svg%3E"); background-size: 40px 40px; background-position: center; }
section.phero > .ava-edit, section.phero > .ava { grid-row: 1 / span 3; }
section.phero .ava { --s: 54px !important; box-shadow: 0 0 0 2px rgba(255, 214, 150, .55), 0 4px 12px rgba(0,0,0,.22); }
section.phero .ava-cam { transform: scale(.7); transform-origin: bottom right; }
section.phero .hero-name { font-size: 19px; text-align: left; padding: 0 4px; margin-left: -4px; width: 100%; line-height: 1.2; }
section.phero .hero-sub { font-size: 11.5px; gap: 6px; flex-wrap: wrap; }
section.phero .hero-sub .tag { padding: 1px 7px; font-size: 11px; }
section.phero .lvl { margin-top: 4px !important; max-width: none; gap: 3px; }
section.phero .lvl-h { font-size: 11.5px; }
section.phero .lvl-bar { height: 4px; }
section.phero .phero-bg { display: none; }

/* «Похвалить партнёра» — одна заметная кнопка, варианты раскрываются по нажатию */
.praise { padding: 8px; }
.pr-btn { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; padding: 6px 8px; border-radius: 14px; cursor: pointer; }
.pr-btn:active { transform: scale(.98); }
.pr-btn .pr-t { display: grid; flex: 1; min-width: 0; }
.pr-btn b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.pr-btn small { font-size: 11.5px; color: var(--muted); }
.pr-btn i { font-style: normal; font-size: 22px; transition: transform .2s; }
.praise.open .pr-btn i { transform: rotate(-12deg) scale(1.1); }
.praise .pr-chips { margin: 6px -8px 2px; padding: 2px 16px 4px; animation: pop-in .18s ease both; }

/* Печать календаря на А4: на экране страницы печати не видно; при печати — только она, на весь лист */
.printbtn { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--sheet-2); color: var(--muted); cursor: pointer; }
.printbtn:active { transform: scale(.94); }
#print-root { display: none; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  html.print-month body > *:not(#print-root) { display: none !important; }
  html.print-month, html.print-month body { background: #fff !important; margin: 0; }
  html.print-month body::before, html.print-month body::after { display: none !important; }
  html.print-month body { padding: 0 !important; min-height: 0 !important; height: auto !important; overflow: visible !important; }
  html.print-month #print-root { display: block; box-sizing: border-box; width: 297mm; height: 210mm; padding: 8mm; overflow: hidden; break-inside: avoid; background: #fff; color: #111; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
  #print-root .pt-h { display: flex; align-items: baseline; gap: 10px; height: 10mm; }
  #print-root .pt-h b { font-size: 16pt; }
  #print-root .pt-h span { font-size: 13pt; color: #444; }
  #print-root .pt-h small { margin-left: auto; font-size: 8pt; color: #666; }
  #print-root .pt { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9pt; }
  #print-root .pt th, #print-root .pt td { border: .3mm solid #999; text-align: center; padding: 0; }
  #print-root .pt thead tr { height: 6mm; }
  #print-root .pt thead th { font-size: 7.5pt; font-weight: 600; color: #333; }
  #print-root .pt .hn { width: 44mm; text-align: left; padding-left: 2mm; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #print-root .pt .pt-sum { width: 12mm; font-weight: 700; }
  #print-root .pt .we { background: #f0f0f0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-root .pt td.ok { font-weight: 700; color: #0a7a2f; }
  #print-root .pt td.no { color: #b3261e; }
}

/* Личные цели: срок (день … 5 лет), списки, тот же вид, что у ленты */
.goals { display: grid; gap: 10px; }
.goal-lock { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.gper { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--sheet-2); overflow-x: auto; scrollbar-width: none; }
.gper::-webkit-scrollbar { display: none; }
.gper button { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;}
.gper button.on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.gper button i { font-style: normal; font-size: 10.5px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--pc, var(--accent)); color: #fff; line-height: 16px; }
.goal-list { display: grid; gap: 8px; }
.bubble.goal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.goal-ck { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--pc, var(--accent)); background: none; display: grid; place-items: center; color: #fff; padding: 0; cursor: pointer; }
.goal-ck svg { width: 14px; height: 14px; }
.bubble.goal.done .goal-ck { background: var(--pc, var(--accent)); }
.bubble.goal.done .goal-b { opacity: .55; text-decoration: line-through; }
.goal-b { display: grid; gap: 6px; min-width: 0; }
.goal-ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.goal-ul li { line-height: 1.35; }
.goal-empty { text-align: center; }
.goal-bar textarea { min-height: 44px; }

/* Фото профиля фоном карточки на главном: полупрозрачно, в цвет карточки, растворяется к тексту слева */
.pc.has-photo::before { display: block; content: ""; position: absolute; inset: 0; height: auto; z-index: -1; pointer-events: none;
  background: var(--photo) center 30% / cover no-repeat; opacity: .42; mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(100deg, transparent 8%, rgba(0,0,0,.55) 45%, #000 80%); mask-image: linear-gradient(100deg, transparent 8%, rgba(0,0,0,.55) 45%, #000 80%); }

/* «Вы достигли награды» */
.rw-hit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin: 10px 0; padding: 12px 12px 12px 14px; border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, #ffcf5a 26%, var(--sheet)), var(--sheet)); box-shadow: inset 0 0 0 1px rgba(255, 207, 90, .45), var(--shadow); animation: pop-in .25s ease both; }
.rw-hit-ic { font-size: 28px; line-height: 1; }
.rw-hit-b { display: grid; min-width: 0; }
.rw-hit-b b { font-size: 14.5px; }
.rw-hit-b span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-hit-go { padding: 7px 12px; font-size: 13px; }

/* Подсказки новых привычек — всегда под полем «+ Новая привычка» */
.ideas { margin-top: 10px; display: grid; gap: 8px; }
.ideas-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.ideas-h b { font-weight: 600; }
.ideas .chips { display: flex; gap: 6px;}

/* Колокольчик напоминаний в «Сегодня» и окно настройки */
.daynav { position: relative; }
.rbell { position: relative; width: 38px; height: 38px; flex: none; margin-right: 6px; border: 0; border-radius: 12px; display: grid; place-items: center; cursor: pointer;
  background: var(--sheet-2); color: var(--muted); transition: transform .15s, background .2s; }
.rbell svg { width: 19px; height: 19px; }
.rbell.on { color: #fff; background: linear-gradient(135deg, var(--pc, #4b7bff), color-mix(in srgb, var(--pc, #4b7bff) 60%, #ffb347)); box-shadow: 0 6px 16px color-mix(in srgb, var(--pc, #4b7bff) 35%, transparent); }
.rbell:active { transform: scale(.92); }
.rbell i { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; font: 700 10.5px/17px var(--f-body); font-style: normal; background: #ff4d5e; color: #fff; box-shadow: 0 0 0 2px var(--sheet); }
.rs-back { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.45); animation: pop-in .2s ease both; }
.rs-sheet { position: fixed; z-index: 81; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 100%); max-height: 86vh; overflow: auto; box-sizing: border-box;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--sheet); box-shadow: 0 -12px 40px rgba(0,0,0,.35); display: grid; gap: 12px; animation: sheet-up .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sheet-up { from { transform: translate(-50%, 40px); opacity: 0; } }
.rs-h { display: flex; align-items: center; justify-content: space-between; }
.rs-h b { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; }
.rs-h b svg { width: 20px; height: 20px; color: var(--pc, var(--accent)); }
.rs-master { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--sheet-2); cursor: pointer; }
.rs-master span:first-child { display: grid; }
.rs-master small, .rs-nm small, .rs-note { font-size: 12px; color: var(--muted); }
.rs-note { margin: 0; } .rs-note.ok { color: #30d158; }
.rs-allow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.rs-allow svg { width: 17px; height: 17px; }
.rs-list { display: grid; gap: 6px; }
.rs-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--sheet-2); }
.rs-row:not(.on) .rs-time { opacity: .6; }
.rs-nm { display: grid; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-time { font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--sheet); border: 1px solid var(--hair); border-radius: 10px; padding: 5px 8px; }
.rs-sw { position: relative; display: inline-block; width: 42px; height: 26px; flex: none; }
.rs-sw.big { width: 50px; height: 30px; }
.rs-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.rs-sw i { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--muted) 45%, transparent); transition: background .2s; }
.rs-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 50% - 3px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.rs-sw input:checked + i { background: #30d158; }
.rs-sw input:checked + i::after { transform: translateX(calc(100% - 0px)); }
.rs-sw input:disabled + i { opacity: .45; }

/* ===================== календарь: колокольчики стоят ровно в одной колонке ===================== */
/* Раньше чип с временем был шире пустого, и на разных строках колокольчик оказывался в разных местах,
   а при открытии профиля ещё и «звенел». Теперь у каждой строки одинаковое место 22 px, время — в подсказке
   и в списке «Сегодня», анимации в таблице нет. */
.grid .gcell { gap: 4px; }
.grid .gcell .rchip { width: 22px; min-width: 22px; height: 22px; padding: 0; justify-content: center; transition: opacity .15s ease, background-color .15s ease; }
.grid .gcell .rchip span { display: none; }
.grid .gcell .rchip svg, #app .grid .gcell .rchip.on svg { animation: none; transform: none; }
.grid .gcell .rchip:active { transform: none; }
@media (max-width: 600px) {
  .grid .gcell .rchip:not(.on) { display: inline-flex; opacity: 0; pointer-events: none; }
}

/* ===================== фирменная кнопка «Отправить» и голосовые ===================== */
/* Кнопка — мягкая восьмиконечная звезда (два скруглённых квадрата), как узор в шапке профиля. */
.cbar-send { position: relative; isolation: isolate; background: none; color: #fff; border-radius: 0; overflow: visible; }
.cbar-send::before, .cbar-send::after { content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 9px;
  background: linear-gradient(135deg, var(--pc, var(--pa)), color-mix(in srgb, var(--pc, var(--pa)) 55%, #f2b84b)); transition: transform .35s var(--out, ease);}
.cbar-send::after { transform: rotate(45deg); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .cbar-send:hover::before { transform: rotate(-22.5deg); } }
@media (hover: hover) and (pointer: fine) { .cbar-send:hover::after { transform: rotate(22.5deg); } }
.cbar-send svg { width: 21px; height: 21px; margin: 0;}
.cbar-send[disabled] { opacity: .5; }
.cbar.empty.has-mic .cbar-send:not(.cbar-mic) { display: none; }
.cbar:not(.empty) .cbar-mic { display: none; }
.cbar-mic { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.recording .cbar-mic { transform: scale(1.3); }
body.recording .cbar-mic::before, body.recording .cbar-mic::after { animation: rec-spin 3s linear infinite;}
body.recording .cbar-mic::after { animation-direction: reverse; }
@keyframes rec-spin { to { transform: rotate(360deg); } }
@keyframes rec-blink { 50% { opacity: .25; } }
/* полоса записи — поверх строки ввода */
.recbar { position: fixed; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 0 14px; box-sizing: border-box;
  border-radius: 22px; background: var(--sheet, #1e1e21); color: var(--ink); font: 600 15px/1 var(--f-num, inherit); font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); animation: rec-in .18s ease-out; }
@keyframes rec-in { from { opacity: 0; transform: translateY(6px); } }
.recbar.locked { padding: 0 6px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d5e; flex: none; animation: rec-blink 1s infinite; }
.recbar time { min-width: 38px; }
.rec-hint { flex: 1; text-align: center; color: var(--muted); font-weight: 500; font-size: 14px; transform: translateX(var(--dx, 0px)); white-space: nowrap; overflow: hidden; }
.rec-lock { position: absolute; right: -46px; bottom: calc(100% + 14px); width: 40px; padding: 9px 0 7px; border-radius: 20px; display: grid; justify-items: center; gap: 3px;
  background: var(--sheet, #1e1e21); color: var(--muted); box-shadow: 0 4px 16px rgba(0,0,0,.25); transform: translateY(calc(var(--dy, 0px) * -.35)); }
.rec-lock svg { width: 18px; height: 18px; }
.rec-lock b { font-size: 9px; animation: rec-up 1.2s ease-in-out infinite; }
@keyframes rec-up { 50% { transform: translateY(-4px); opacity: .4; } }
.rec-wave, .vm-wave { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; gap: 2px; }
.rec-wave i, .vm-wave i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; height: calc(3px + var(--h, 1) * 2.7px); background: color-mix(in srgb, var(--pc, var(--pa)) 40%, var(--muted)); opacity: .55; }
.rec-wave i:nth-last-child(-n+6) { opacity: 1; background: var(--pc, var(--pa)); }
.rec-del { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: #ff4d5e; display: grid; place-items: center; flex: none; cursor: pointer; }
.rec-del svg { width: 22px; height: 22px; }
.recbar .rec-send { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; cursor: pointer; }
/* плеер голосового в ленте и канале */
.vmsg { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 8px 12px 8px 8px; border-radius: 18px; max-width: 360px;
  background: color-mix(in srgb, var(--pc, var(--pa)) 10%, transparent); }
.vm-play { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--pc, var(--pa)), color-mix(in srgb, var(--pc, var(--pa)) 55%, #f2b84b)); box-shadow: 0 4px 12px color-mix(in srgb, var(--pc, var(--pa)) 30%, transparent); transition: transform .15s; }
.vm-play:active { transform: scale(.92); }
.vm-play svg { width: 20px; height: 20px; }
.vm-wave { cursor: pointer; height: 32px; }
.vm-wave i { transition: background-color .15s, opacity .15s; }
.vm-wave i.on { opacity: 1; background: var(--pc, var(--pa)); }
.vm-meta { display: grid; justify-items: end; gap: 3px; flex: none; }
.vm-t { font: 600 12.5px/1 var(--f-num, inherit); font-variant-numeric: tabular-nums; color: var(--muted); }
.vm-rate { border: 0; border-radius: 8px; padding: 3px 6px; font: 700 11px/1 var(--f-num, inherit); background: var(--pc, var(--pa)); color: #fff; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .rec-dot, .rec-lock b, body.recording .cbar-mic::before, body.recording .cbar-mic::after { animation: none; }
}
body.rec-locked .cbar-mic { visibility: hidden; }

/* подсказки привычек: три идеи в одну строку и круглая кнопка «другие» */
.ideas-h b { display: inline-flex; align-items: center; gap: 6px; }
.ideas-h .spark-i { width: 15px; height: 15px; color: #f2b84b; }
.ideas-more { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--pc, var(--pa)), color-mix(in srgb, var(--pc, var(--pa)) 55%, #f2b84b));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pc, var(--pa)) 30%, transparent); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ideas-more svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) { .ideas-more:hover { transform: rotate(90deg); } }
.ideas-more:active { transform: rotate(180deg) scale(.9); }
.ideas .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 18px; }
.ideas .chips::-webkit-scrollbar { display: none; }
.ideas .chip { flex: none; white-space: nowrap; }
/* принцип дня во вкладке «Цели» — как хадис на главной, но с крупной формулой вместо арабской строки */
.pr-big { margin: 0; font-family: var(--f-quote); font-weight: 600; font-size: clamp(40px, 15cqi, 72px); line-height: 1.05; letter-spacing: -.01em; white-space: nowrap;
  background: linear-gradient(135deg, var(--pc, var(--pa)), color-mix(in srgb, var(--pc, var(--pa)) 45%, #f2b84b)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===================== строка ввода как в Instagram ===================== */
/* слева — камера, в поле — галерея и «+» (файл, местоположение), справа — микрофон / фирменная «Отправить» */
.cbar-row.ig { align-items: flex-end; gap: 8px; }
.cbar-cam { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--pc, var(--pa)), color-mix(in srgb, var(--pc, var(--pa)) 55%, #f2b84b));}
.cbar-cam svg { width: 21px; height: 21px; }
.cbar-cam input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cbar-cam:active { transform: scale(.92); }
.cbar-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; border-radius: 22px; background: var(--sheet-2); border: 1px solid var(--hair); padding: 0 4px 0 0; }
.cbar-field:focus-within { border-color: color-mix(in srgb, var(--pc, var(--pa)) 55%, var(--hair)); }
.cbar-field textarea { flex: 1; min-width: 0; border: 0 !important; background: none !important; box-shadow: none !important; outline: none; }
.cbar-in { display: flex; align-items: center; flex: none; height: 40px; }
.cbar-in .cbar-ic { width: 34px; height: 40px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.cbar-in .cbar-ic svg { width: 22px; height: 22px; }
.cbar-plus svg { transition: transform .25s var(--out, ease); }
.cbar-plus.on { color: var(--pc, var(--pa)); }
.cbar-plus.on svg { transform: rotate(45deg); }
.cbar:not(.empty) .cbar-in { display: none; } /* пока пишут текст, поле шире — как в Instagram */
.plus-pop { display: flex; gap: 10px; padding: 4px 2px; animation: rec-in .18s ease-out; }
.pp-it { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--sheet-2); color: var(--ink); font: 600 14px/1 var(--f-body, inherit); }
.pp-it input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pp-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--ic); }
.pp-ic svg { width: 17px; height: 17px; }
.geo-chip { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding: 6px 12px 6px 9px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: #2fb47c; background: color-mix(in srgb, #2fb47c 13%, transparent); }
.geo-chip svg { width: 16px; height: 16px; }
.geo-chip button { border: 0; background: none; color: inherit; font-size: 17px; line-height: 1; padding: 0 0 0 4px; cursor: pointer; }

/* ===================== истории ===================== */
.stories { display: flex; gap: 16px; padding: 4px 2px 2px; overflow-x: auto; scrollbar-width: none; }
.st-it { position: relative; display: grid; justify-items: center; gap: 5px; flex: none;}
.st-ring { position: relative; width: 74px; height: 74px; border: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--hair); }
.st-ring.new { background: conic-gradient(from 200deg, #f2b84b, var(--pb), #c2457a, var(--pa), #f2b84b); animation: st-glow 3s ease-in-out infinite; }
.st-ring.seen { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.st-ring:active { transform: scale(.94); }
@keyframes st-glow { 50% { filter: saturate(1.4) brightness(1.08); } }
.st-add { position: absolute; right: 2px; border-radius: 50%; border: 3px solid var(--paper); display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--pa), color-mix(in srgb, var(--pa) 55%, #f2b84b));}
.st-it[data-p="b"] .st-add { background: linear-gradient(135deg, var(--pb), color-mix(in srgb, var(--pb) 55%, #f2b84b)); }
.st-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
body.st-open { overflow: hidden; }
.st-view { position: fixed; inset: 0; z-index: 90; color: #fff; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); touch-action: none;}
.st-view.out { animation: st-in .18s ease-in reverse both; }
@keyframes st-in { from { opacity: 0; transform: scale(.96); } }
.st-bars { display: flex; gap: 4px; }
.st-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.st-bars b { display: block; height: 100%; background: #fff; }
.st-h { min-height: 40px;}
.st-h b { font-size: 15px; }
.st-h time, .st-hint { font-size: 13px; color: rgba(255,255,255,.65); flex: 1; }
.st-ic { width: 40px; height: 40px; border: 0; background: none; color: #fff; font-size: 30px; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.st-ic svg { width: 22px; height: 22px; }
.st-body { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 0; background: #111;}
.st-body img { width: 100%; height: 100%; object-fit: contain; }
.st-big { margin: 0; text-align: center; font-family: var(--f-quote); font-size: clamp(26px, 7.5vw, 40px); line-height: 1.25; font-weight: 600; text-shadow: 0 2px 12px rgba(0,0,0,.25);}
.st-cap { position: absolute; left: 12px; right: 12px; bottom: 14px;}
.st-zone { position: absolute; top: 0; bottom: 0; width: 35%; border: 0; background: none; cursor: pointer; }
.st-zone.l { left: 0; } .st-zone.r { right: 0; width: 65%; }
.st-f { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.st-seen { font-size: 14px; color: rgba(255,255,255,.75); }
.st-like { width: 48px; height: 48px; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.st-like svg { width: 30px; height: 30px; }
.st-like.on { color: #ff4d6d; animation: st-pop .35s ease-out; }
@keyframes st-pop { 40% { transform: scale(1.3); } }
.st-new textarea { width: 100%; box-sizing: border-box; border: 0; resize: none; background: none; color: #fff; outline: none; }
.st-new textarea.st-big::placeholder, .st-new textarea.st-cap::placeholder { color: rgba(255,255,255,.6); }
.st-new textarea.st-cap { width: auto; background: rgba(0,0,0,.45); }
.st-tools { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.st-tool { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.14); }
.st-tool input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.st-bg { box-shadow: inset 0 0 0 3px rgba(255,255,255,.8); }
.st-share { margin-left: auto; width: 52px; height: 52px; }
@media (prefers-reduced-motion: reduce) { .st-ring.new, .st-view, .st-like.on { animation: none; } }
/* совет дня в «Целях»: компактно, но чётко — ровные отступы, крупная формула, короткий текст */
.goals .pr-big { font-size: clamp(28px, 9cqi, 42px); line-height: 1.05; white-space: normal; text-wrap: balance; }

.tabbar { grid-template-columns: repeat(4, 1fr); }

/* ===================== Читальня: современная витрина ===================== */
/* тёмное стекло, полки — светящиеся кромки цвета профиля, обложки 2:3 с мягкой тенью и подписью снизу */
.library { --lib: var(--pc, var(--pa)); display: grid; gap: 14px; }
.lib-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lib-h b { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-quote); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.lib-h b svg { width: 22px; height: 22px; color: var(--lib); }
.lib-h span { font-size: 13px; color: var(--muted); }
.lib-add { align-items: center;}
.lib-add input { flex: 1; min-width: 0; border-radius: 22px; border: 1px solid var(--hair); background: var(--sheet-2); color: var(--ink); padding: 0 18px; font: inherit;}
.lib-add input:focus { outline: none; border-color: color-mix(in srgb, var(--lib) 60%, var(--hair)); }
.bookcase { display: grid; gap: 6px; padding: 6px 0; }
.shelf { position: relative; padding: 14px 14px 0; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--lib) 13%, transparent), transparent 70%), var(--sheet);
  border: 1px solid color-mix(in srgb, var(--lib) 14%, var(--hair)); box-shadow: var(--shadow); }
.shelf-plate { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.shelf-ic { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--lib); background: color-mix(in srgb, var(--lib) 15%, transparent); }
.shelf-ic svg { width: 17px; height: 17px; }
.shelf-plate input, .shelf-plate > span:not(.shelf-ic) { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 650 16px/1.2 var(--f-body, inherit); padding: 4px 0; outline: none; }
.shelf-plate input:focus { box-shadow: 0 1px 0 var(--lib); }
.shelf-plate i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: var(--sheet-2); }
.shelf-plate i:empty { display: none; }
.shelf-row { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 150px; padding: 2px 2px 18px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.shelf-row::-webkit-scrollbar { display: none; }
/* светящаяся кромка полки */
.shelf::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 12px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lib) 70%, #fff), transparent); opacity: .55; box-shadow: 0 0 16px color-mix(in srgb, var(--lib) 60%, transparent); }
.shelf.drop { border-color: var(--lib); }
.shelf.drop::after { opacity: 1; }
.shelf-empty { align-self: center; margin: 0 auto; padding: 0 12px 10px; font-size: 13.5px; color: var(--muted); text-align: center; }
.book { position: relative; flex: none; width: 84px; display: grid; gap: 7px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; scroll-snap-align: start;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: transform .25s var(--out, ease); }
@media (hover: hover) and (pointer: fine) { .book:hover { transform: translateY(-4px); } }
.cover { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 4px 9px 9px 4px; overflow: hidden;
  background: linear-gradient(150deg, hsl(var(--bh) 55% 46%), hsl(calc(var(--bh) + 40) 55% 28%));
  box-shadow: 0 10px 20px -8px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.25); }
/* корешок и блик — обложка выглядит как настоящая книга */
.cover::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.18) 4%, transparent 9%), linear-gradient(115deg, rgba(255,255,255,.16), transparent 40%); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.cover.nocover img { display: none; }
.book-gen { position: absolute; inset: 0; display: grid; align-content: center; gap: 6px; padding: 10px 8px 10px 12px; text-align: center; color: #fff; }
.book-gen b { font-family: var(--f-quote); font-size: 13px; line-height: 1.15; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.book-gen i { font-style: normal; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; opacity: .75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-t { font-size: 12px; line-height: 1.25; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book.read .book-t { color: var(--muted); }
.book-ok { position: absolute; z-index: 2; right: 5px; bottom: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #2fb47c; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.book-ok svg { width: 12px; height: 12px; }
.book.loading .cover::after { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%) -84px 0 / 200% 100%; animation: bk-shine 1s linear infinite; }
@keyframes bk-shine { to { background-position: 84px 0; } }
.book-lifted { opacity: .25; }
.book-ghost { position: fixed; z-index: 95; pointer-events: none; transition: none; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.book-gap { flex: none; width: 4px; align-self: stretch; margin: 0 -6px 18px; border-radius: 3px; background: var(--lib); box-shadow: 0 0 12px var(--lib); }
body.book-dragging { -webkit-user-select: none; user-select: none; }
/* карточка книги */
.book-sheet .bk-top { display: flex; gap: 16px; align-items: flex-start; }
.cover.big { width: 104px; flex: none; }
.cover.big .book-gen b { font-size: 15px; }
.book-sheet h3 { margin: 2px 0 4px; font-family: var(--f-quote); font-size: 23px; line-height: 1.2; }
.bk-a { margin: 0; color: var(--muted); font-size: 14px; }
.bk-s { margin: 10px 0 0; font-size: 13px; color: var(--lib, var(--pa)); font-weight: 600; }
.bk-move { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-move .chip.on { background: var(--pc, var(--pa)); color: #fff; border-color: transparent; }
.bk-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-row .btn { flex: 1; }
.btn.danger { color: #e5484d; }
.btn.danger svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .book.loading .cover::after { animation: none; } .book { transition: none; } }
.book-gen b { hyphens: auto; overflow-wrap: normal; }
/* ===================== сабр-дни ===================== */
.chip-g.sabr svg { color: #7ee2b0; }
/* ===================== «Сегодня» по намазам ===================== */
.tgroup { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; padding: 4px 10px 4px 8px; border-radius: 999px; font: 600 12px/1 var(--f-body, inherit);
  color: var(--muted); background: var(--sheet-2); }
.tgroup svg { width: 13px; height: 13px; }
.tgroup.on { color: var(--pc, var(--pa)); background: color-mix(in srgb, var(--pc, var(--pa)) 13%, transparent); }
.today .slot { display: flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--f-body, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);}
.today .slot::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.today .slot span { color: var(--pc, var(--pa)); }
.today .slot time { order: 3; font-variant-numeric: tabular-nums; letter-spacing: 0; font-weight: 600; opacity: .8; }
/* мягкий толчок партнёру */

/* ===================== испытание недели: компактно, векторный фон по теме ===================== */
.chal { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 22px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--pa) 9%, var(--card-solid, var(--sheet))), color-mix(in srgb, var(--pb) 9%, var(--card-solid, var(--sheet))));
  border: 1px solid var(--hair); box-shadow: var(--shadow); }
.chal-bg { position: absolute; z-index: -1; right: -14px; bottom: -22px; width: 128px; height: 128px; color: var(--ink); opacity: .06; transform: rotate(-12deg); }
.chal-h { display: flex; align-items: center; gap: 10px; }
.chal-ic { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--pa), var(--pb)); }
.chal-ic svg { width: 20px; height: 20px; }
.chal-t { flex: 1; min-width: 0; }
.chal-t small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chal-t b { display: block; font-size: 16px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chal-tool { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: var(--sheet-2); }
.chal-tool svg { width: 16px; height: 16px; }
.chal-tool.on { color: #fff; background: linear-gradient(135deg, var(--pa), var(--pb)); }
.chal-rem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.chal-rem input { font: 600 15px/1 var(--f-num, inherit); color: var(--ink); background: var(--sheet); border: 1px solid var(--hair); border-radius: 10px; padding: 6px 8px; }
.chal-rem .btn { padding: 7px 14px; }
.chal-row { display: flex; align-items: center; gap: 10px; }
.chal-week { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cw { display: grid; justify-items: center; gap: 3px; padding: 5px 0 4px; border-radius: 10px; }
.cw i { width: 70%; max-width: 22px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 25%, transparent); }
.cw i[data-p="a"].on { background: var(--pa); }
.cw i[data-p="b"].on { background: var(--pb); }
.cw b { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.cw.td { background: var(--sheet-2); }
.cw.td b { color: var(--ink); }
.cw.fut { opacity: .5; }
.cw.both { background: color-mix(in srgb, #f2b84b 16%, transparent); }
.cw.both b { color: #d9a03a; }
.chal-do { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted);
  background: none; border: 2px dashed color-mix(in srgb, var(--muted) 55%, transparent); transition: transform .15s, background .2s; }
.chal-do svg { width: 22px; height: 22px; }
.chal-do.on { border: 0; color: #fff; background: linear-gradient(135deg, var(--pa), var(--pb)); }
.chal-do:active { transform: scale(.9); }
.chal-win { margin: 0; padding: 8px 10px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 600; background: color-mix(in srgb, #f2b84b 15%, transparent); }

/* ===================== садака джария: компактно ===================== */
.donate { display: grid; margin-top: 6px; border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, #2fb47c 9%, var(--card-solid, var(--sheet))), var(--card-solid, var(--sheet))); border: 1px solid color-mix(in srgb, #2fb47c 20%, var(--hair));}
.dn-h { display: flex; align-items: center; gap: 10px; }
.dn-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #2fb47c, #1f8a63); }
.dn-ic svg { width: 22px; height: 22px; color: #fff; }
.dn-h b { display: block; font-size: 15.5px; line-height: 1.2; }
.dn-h span { display: block; font-size: 12.5px; color: var(--muted); }
.dn-q blockquote { margin: 0; }
.dn-q p { margin: 0; font-family: var(--f-quote); font-style: italic; font-size: 14.5px; line-height: 1.35; }
.donate .dn-btn { justify-self: stretch; text-align: center; padding: 10px 16px; text-decoration: none; border: 0; color: #fff; font-weight: 700; background: linear-gradient(135deg, #f14635, #d6301f); }
.dn-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.dn-thx { justify-content: space-between; border: 0; border-top: 1px solid var(--hair); background: none; color: #2fb47c; font: 700 12px/1 var(--f-body, inherit);}
.dn-thx span { display: inline-flex; align-items: center; gap: 6px; }
.dn-thx svg { width: 14px; height: 14px; }
.dn-thx > svg { color: var(--muted); transition: transform .2s; }
.dn-thx[aria-expanded="true"] > svg { transform: rotate(90deg); }
.dn-list { display: grid; gap: 6px; animation: rec-in .18s ease-out; }
.dn-list ol { margin: 0; padding: 0 0 0 22px; display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.dn-list li::marker { color: #2fb47c; font-weight: 700; }
.dn-priv { margin: 0; color: var(--muted);}
.dn-priv { font-size: 11.5px; }
/* майнд-карта «Благодаря вам» */
.dmap { width: 100%; max-width: 380px; height: auto; justify-self: center; overflow: visible; }
.dm-l { fill: none; stroke: #2fb47c; stroke-width: 1.4; opacity: .55; }
.dm-l.g { stroke-dasharray: 3 4; opacity: .4; }
.dm-orn path { fill: none; stroke: #2fb47c; stroke-width: 1.2; opacity: .35; }
.dm-c { fill: #fff; font: 700 13px/1 var(--f-body, sans-serif); letter-spacing: 0; }
.dm-n rect { fill: var(--sheet, #1b1d22); stroke: color-mix(in srgb, #2fb47c 55%, transparent); stroke-width: 1.2; }
.dm-n text { fill: var(--ink); font: 600 12.5px/1 var(--f-body, sans-serif); }
.dm-n.g rect { stroke-dasharray: 3 3; fill: none; }
.dm-n.g text { fill: var(--muted); }
/* хадис: номер-бейдж, крупная кавычка, тонкая рамка */
.dn-q { position: relative; margin: 0; padding: 12px 14px 10px 34px; border-radius: 14px; background: color-mix(in srgb, #2fb47c 7%, transparent); border: 1px solid color-mix(in srgb, #2fb47c 18%, transparent); }
.dn-qm { position: absolute; left: 10px; top: 4px; font: 400 30px/1 var(--f-quote, serif); color: #2fb47c; opacity: .8; }
.dn-q figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.dn-no { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; color: #2fb47c; background: color-mix(in srgb, #2fb47c 13%, transparent); }
/* дуа — коротко: транслитерация и перевод */
.dn-duas { display: grid; gap: 6px; text-align: center; }
.dn-duas p { margin: 0; display: grid; gap: 1px; }
.dn-duas b { font-family: var(--f-quote); font-style: italic; font-weight: 600; font-size: 14px; color: #2fb47c; }
.dn-duas span { font-size: 12px; line-height: 1.35; color: var(--muted); }
.dn-qrbtn { justify-self: center; border: 0; background: none; padding: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.dn-qrbox { margin: 0; display: grid; gap: 6px;}
.dn-qrbox img { width: 180px; height: 180px; padding: 8px; border-radius: 16px; background: #fff; }
.dn-qrbox figcaption { font-size: 12px; color: var(--muted); text-align: center; }
.dn-thx span { text-align: left; line-height: 1.3; }
.dn-bless { margin: 4px 0 0; text-align: center; font-family: var(--f-quote); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--ink); }
.dn-thx { font-size: 13.5px;}
.dn-trust { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; color: var(--ink);
  background: color-mix(in srgb, #2fb47c 8%, transparent); border: 1px dashed color-mix(in srgb, #2fb47c 35%, transparent); }
.dn-trust svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: #2fb47c; }
.seg3 button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg3 button svg { width: 15px; height: 15px; opacity: .8; }
.seg3 button.on svg { opacity: 1; color: var(--pc, var(--pa)); }
.q-ref { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .q-ref:hover { color: var(--ink); } }

/* ===================== пять молитв ===================== */
.prayers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); animation: pop-in .2s ease both; }
.prayers .pr { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 14px; color: var(--muted); }
.prayers .pr svg { width: 22px; height: 22px; color: var(--ink); opacity: .85; }
.prayers .pr small { font-size: 11px; font-weight: 600; }
.prayers .pr b { font: 700 14px/1 var(--f-num, inherit); font-variant-numeric: tabular-nums; color: var(--ink); }
.prayers .pr.past { opacity: .5; }
.prayers .pr.next { background: color-mix(in srgb, #f2b84b 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f2b84b 45%, transparent); }
.prayers .pr.next svg { color: #f2b84b; opacity: 1; }
.prayers .pr.next small { color: #d9a03a; }

/* ===================== испытание: выбор и согласие партнёра ===================== */
.chal-prop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 10px 12px; border-radius: 16px;
  background: color-mix(in srgb, #f2b84b 11%, var(--sheet)); border: 1px solid color-mix(in srgb, #f2b84b 35%, transparent); }
.cp-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #d9a03a; background: color-mix(in srgb, #f2b84b 18%, transparent); }
.cp-ic svg { width: 18px; height: 18px; }
.cp-t small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #d9a03a; }
.cp-t b { display: block; font-size: 15px; }
.cp-t span { display: block; font-size: 12.5px; color: var(--muted); }
.cp-a { grid-column: 1 / -1; display: flex; gap: 8px; }
.cp-a .btn { flex: 1; padding: 8px 12px; }
.chal-ed { display: grid; gap: 8px; padding-top: 4px; }
.ce-h { display: flex; align-items: center; justify-content: space-between; }
.ce-h b { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ce-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ce-idea { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--hair); background: var(--sheet); color: var(--ink); cursor: pointer; text-align: left; font: 600 12.5px/1.25 var(--f-body, inherit); }
.ce-idea svg { width: 18px; height: 18px; flex: none; color: var(--pa); }
.ce-idea span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ce-idea:active { transform: scale(.97); }
.ce-own { display: grid; gap: 6px; }
.ce-own input { height: 40px; border-radius: 12px; border: 1px solid var(--hair); background: var(--sheet); color: var(--ink); padding: 0 12px; font: inherit; font-size: 14px; }
.ce-own .btn { padding: 9px 14px; }
.ce-note { margin: 0; font-size: 12px; color: var(--muted); }
.toast { white-space: normal; max-width: calc(100vw - 32px); width: max-content; text-align: center; border-radius: 18px; box-sizing: border-box; }
/* добавление книги: название, автор, полка */
.lib-add { display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--hair); }
.lib-add input { height: 42px; }
.la-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.la-sh { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--hair); background: none; color: var(--muted); cursor: pointer; font: 600 11.5px/1.2 var(--f-body, inherit); text-align: center; }
.la-sh svg { width: 18px; height: 18px; }
.la-sh.on { color: var(--pc, var(--pa)); border-color: var(--pc, var(--pa)); background: color-mix(in srgb, var(--pc, var(--pa)) 10%, transparent); }
.la-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; }
.la-go svg { width: 16px; height: 16px; }
/* «Поддержать» свёрнут: строка-заголовок, по нажатию раскрывается */
.donate .dn-h { width: 100%; border: 0; background: none; padding: 0; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.dn-ht { flex: 1; min-width: 0; }
.dn-ht b { display: block; line-height: 1.2;}
.dn-ht span { display: block; font-size: 12.5px; color: var(--muted); }
.dn-h > svg:last-child { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .2s; }
.dn-h[aria-expanded="true"] > svg:last-child { transform: rotate(90deg); }
.dn-body { display: grid; gap: 10px; animation: pop-in .2s ease both; }

/* ===================== поделиться календарём ===================== */
.share-sheet .sh-list { display: grid; gap: 10px; }
.sh-it { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 10px; border-radius: 16px; background: var(--sheet-2); }
.sh-prev { grid-row: 1 / 3; width: 64px; border-radius: 8px; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.sh-prev.story { aspect-ratio: 9 / 16; } .sh-prev.post { aspect-ratio: 4 / 5; } .sh-prev.square { aspect-ratio: 1; }
.sh-t b { display: block; font-size: 15px; } .sh-t b small { font-size: 11px; color: var(--muted); font-weight: 600; }
.sh-t span { display: block; font-size: 12.5px; color: var(--muted); }
.sh-a { display: flex; gap: 6px; }
.sh-a .btn { padding: 8px 14px; } .sh-a .btn:not(.pri) { padding: 8px 10px; display: grid; place-items: center; }
.sh-a svg { width: 18px; height: 18px; }
.printbtn + .printbtn { margin-left: 4px; }
.printbtn svg { width: 18px; height: 18px; }

/* ===================== «Цели»: практика дня ===================== */
.gper button svg { flex: none;}
.gper button.on svg { color: var(--pc, var(--pa));}
.pr-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
.pr-cats::-webkit-scrollbar { display: none; }
.pr-cats button { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--hair); background: none; color: var(--muted); border-radius: 999px; padding: 6px 12px; font: 600 12.5px/1 var(--f-body, inherit); cursor: pointer; }
.pr-cats button svg { width: 14px; height: 14px; }
.pr-cats button.on { color: #fff; border-color: transparent; background: var(--pc, var(--pa)); }
.practice { --tc: var(--pc, var(--pa)); position: relative; overflow: hidden; isolation: isolate; margin: 0 0 12px; padding: 14px 16px 12px; border-radius: 22px; display: grid; gap: 8px;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--tc) 16%, transparent), transparent 60%), var(--card-solid, var(--sheet)); border: 1px solid color-mix(in srgb, var(--tc) 20%, var(--hair)); box-shadow: var(--shadow); }
.practice.cat-habit { --tc: #2fb47c; } .practice.cat-focus { --tc: #f2b84b; } .practice.cat-soul { --tc: #9b8cf0; }
.pr-bg { position: absolute; z-index: -1; right: -18px; top: -14px; width: 150px; height: 150px; color: var(--tc); opacity: .12; }
.pr-top { display: flex; align-items: center; gap: 8px; }
.pr-cat { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; font: 700 11px/1 var(--f-body, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.pr-cat svg { width: 13px; height: 13px; }
.pr-n { flex: 1; font-size: 11.5px; color: var(--muted); }
.practice .q-next { position: static; }
.practice .pr-big { margin: 2px 0 0; font-family: var(--f-quote); line-height: 1.05; color: var(--tc); background: none; -webkit-text-fill-color: currentColor;}
.pr-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.pr-viz { padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.pr-try { margin: 0; display: grid; gap: 2px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.35; border-left: 3px solid var(--tc); background: color-mix(in srgb, var(--tc) 8%, transparent); }
.pr-try b { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tc); }
.practice figcaption { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* инфографика */
.pv-steps { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
.pv-steps span { flex: 1; min-width: 64px; display: grid; gap: 2px; padding: 7px 8px; border-radius: 10px; background: var(--sheet); text-align: center; }
.pv-steps b { font-size: 13px; color: var(--tc); } .pv-steps i { font-style: normal; font-size: 11px; color: var(--muted); }
.pv-steps em, .pv-if em, .pv-loop em, .pv-less em { align-self: center; font-style: normal; color: var(--muted); }
.pv-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; font: 700 11.5px/26px var(--f-body, inherit); color: #fff; text-align: center; }
.pv-bar span:first-child { background: var(--tc); } .pv-bar span:last-child:not(:first-child) { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.pv-bar.res span:first-child { background: color-mix(in srgb, var(--tc) 70%, #000); }
.pv-cap { font-size: 11px; color: var(--muted); margin: 3px 0 7px; } .pv-cap i { font-style: normal; }
.pv-dl .pv-bar + .pv-bar { margin-top: 6px; }
.pv-letters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pv-letters span { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: var(--sheet); }
.pv-letters b { font: 800 20px/1 var(--f-body, inherit); color: var(--tc); } .pv-letters i { font-style: normal; font-size: 10px; color: var(--muted); }
.pv-chart { width: 100%; height: auto; } .pv-t { font: 700 11px var(--f-body, sans-serif); fill: var(--tc); } .pv-t.r { fill: #e5484d; }
.pv-timer { display: flex; align-items: center; gap: 10px; } .pv-timer svg { width: 44px; height: 44px; flex: none; }
.pv-timer span { display: grid; } .pv-timer b { color: var(--tc); } .pv-timer i { font-style: normal; font-size: 12px; color: var(--muted); }
.pv-checks { display: grid; gap: 5px; } .pv-checks span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.pv-checks i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: var(--tc); }
.pv-if { display: flex; align-items: center; gap: 8px; } .pv-if span { flex: 1; display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--sheet); font-size: 13px; font-weight: 600; }
.pv-if small { font-size: 10px; letter-spacing: .1em; color: var(--tc); }
.pv-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .pv-matrix span { display: grid; gap: 1px; padding: 7px 9px; border-radius: 10px; }
.pv-matrix b { font-size: 13px; } .pv-matrix i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.pv-matrix .a { background: color-mix(in srgb, #e5484d 18%, transparent); } .pv-matrix .b { background: color-mix(in srgb, var(--tc) 22%, transparent); }
.pv-matrix .c { background: color-mix(in srgb, #f2b84b 14%, transparent); } .pv-matrix .d { background: var(--sheet); }
.pv-pomo { display: flex; gap: 3px; height: 26px; } .pv-pomo span { display: grid; place-items: center; border-radius: 6px; font: 700 10.5px/1 var(--f-body, inherit); color: #fff; }
.pv-pomo .w { flex: 5; background: var(--tc); } .pv-pomo .r { flex: 1; background: color-mix(in srgb, var(--muted) 45%, transparent); } .pv-pomo .l { flex: 3; background: #2fb47c; }
.pv-chain { display: flex; align-items: center; gap: 4px; } .pv-chain i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--muted) 50%, transparent); }
.pv-chain i.on { background: var(--tc); border-color: var(--tc); } .pv-chain i.td { border-color: var(--tc); border-style: dashed; } .pv-chain span { margin-left: 6px; font-size: 12px; color: var(--muted); }
.pv-loop { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .pv-loop span { flex: 1; min-width: 72px; display: grid; gap: 1px; padding: 7px 8px; border-radius: 10px; background: var(--sheet); text-align: center; }
.pv-loop b { font-size: 12.5px; color: var(--tc); } .pv-loop i { font-style: normal; font-size: 10.5px; color: var(--muted); } .pv-loop .back { font-size: 18px; color: var(--tc); }
.pv-stairs { display: flex; align-items: flex-end; gap: 4px; height: 56px; } .pv-stairs span { flex: 1; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--tc) 75%, transparent); }
.pv-one { display: flex; align-items: center; gap: 12px; } .pv-one b { font: 800 40px/1 var(--f-body, inherit); color: var(--tc); } .pv-one span { font-size: 13px; color: var(--muted); }
.pv-less { display: flex; align-items: center; gap: 10px; } .pv-less span { display: flex; flex-wrap: wrap; gap: 3px; } .pv-less .many { width: 66px; } .pv-less i { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.pv-less .few i { width: 22px; height: 22px; border-radius: 6px; background: var(--tc); }
.practice .pr-big { font-family: var(--f-body, inherit); font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 8.5vw, 40px); }
.gper button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 7px 2px 6px; font-size: 11.5px; position: relative; }
.gper button svg { width: 17px; height: 17px; }
.gper button span { white-space: nowrap; }
.gper button i { position: absolute; top: 3px; right: 4px; }

/* ===================== «Награды»: итог, ровные строки, свёрнутое добавление ===================== */
.rw-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 12px; padding: 16px; border-radius: 22px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, #f2b84b 18%, transparent), transparent 60%), var(--card-solid, var(--sheet)); border: 1px solid color-mix(in srgb, #f2b84b 22%, var(--hair)); box-shadow: var(--shadow); }
.rw-hero-bg { position: absolute; z-index: -1; right: -10px; top: -6px; width: 130px; height: 130px; color: #f2b84b; opacity: .14; }
.rw-hero h2 { margin: 0; font-family: var(--f-quote); font-size: 26px; }
.rw-hero p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted);}
.rw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rw-stats span { display: grid; justify-items: center; gap: 2px; padding: 9px 4px; border-radius: 14px; background: var(--sheet-2); font-size: 11.5px; color: var(--muted); text-align: center; }
.rw-stats b { font: 800 22px/1 var(--f-body, inherit); color: var(--ink); }
.rw-stats .g b { color: #2fb47c; } .rw-stats .r b { color: #f2b84b; }
.rw-h { display: flex; align-items: center; gap: 12px; }
.rw-ring { position: relative; width: 50px; height: 50px; flex: none; display: grid; place-items: center; }
.rw-ring svg { position: absolute; inset: 0; }
.rw-ring b { position: relative; font: 800 14px/1 var(--f-body, inherit); } .rw-ring small { font-size: 9px; }
.rw-h h2 { display: flex; align-items: center; gap: 6px; margin: 0; }
.rw-h h2 svg { width: 18px; height: 18px; color: var(--pc, var(--pa)); }
.rw { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.rw .rw-i { width: 44px; height: 44px; }
.rw-b { min-width: 0; display: grid; gap: 4px; }
.rw-b b { line-height: 1.25; }
.rw-del { align-self: center; }
.rw.earned { box-shadow: 0 0 0 1.5px color-mix(in srgb, #f2b84b 60%, transparent), 0 6px 18px color-mix(in srgb, #f2b84b 18%, transparent); }
.rw.got .rw-b b { color: var(--muted); }
.rw-open { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 11px; cursor: pointer; background: none; color: var(--pc, var(--pa)); font: 600 14px/1 var(--f-body, inherit);}
.rw-open svg { width: 16px; height: 16px; }
.rw-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.rw-ideas .chip { cursor: pointer; }

/* ===================== достижения: компактно, уровни ===================== */
.awards2 { display: grid; gap: 12px; }
.aw2-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.aw2-chips span { align-items: center; justify-content: center; border-radius: 12px; background: var(--sheet-2); font-size: 12px; color: var(--muted);}
.aw2-chips svg { width: 15px; height: 15px; flex: none; }
.aw2-chips span:nth-child(1) svg { color: #ff8a3d; } .aw2-chips span:nth-child(2) svg { color: #2fb47c; } .aw2-chips span:nth-child(3) svg { color: #f2b84b; }
.aw2-chips b { color: var(--ink); font-size: 14px; }
.aw2-next { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--pc, var(--pa)) 8%, var(--sheet-2)); }
.aw2-next > div { flex: 1; min-width: 0; display: grid; gap: 3px; }
.aw2-next small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc, var(--pa)); }
.aw2-next b { font-size: 14.5px; } .aw2-next em { font-style: normal; font-size: 12px; color: var(--muted); }
.aw2-bar { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 22%, transparent); overflow: hidden; }
.aw2-bar span { display: block; height: 100%; border-radius: 3px; background: var(--pc, var(--pa)); }
.aw2-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; font: 600 13px/1 var(--f-body, inherit); }
.aw2-more svg { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .2s; }
.aw2-more[aria-expanded="true"] svg { transform: rotate(-90deg); }
/* статистика: главное сразу, остальное по кнопке */
.st-more { display: grid; gap: 14px; animation: pop-in .2s ease both; }
/* «Поддержать»: красивая строка-заголовок */
.donate { background: linear-gradient(135deg, color-mix(in srgb, #2fb47c 14%, var(--card-solid, var(--sheet))), color-mix(in srgb, #f2b84b 8%, var(--card-solid, var(--sheet)))); border-color: color-mix(in srgb, #2fb47c 26%, var(--hair)); position: relative; overflow: hidden; }
.donate::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, transparent, #f2b84b, transparent); opacity: .6; }
.donate .dn-ic { width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(140deg, #34c48b, #1f8a63 60%, #b8902f); box-shadow: 0 6px 16px color-mix(in srgb, #2fb47c 35%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.donate .dn-ic svg { color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));}
.dn-ht b { font-size: 16px; }
.dn-ht > span { display: flex !important; align-items: center; gap: 4px; flex-wrap: wrap; }
.dn-ar { color: #2fb47c;}
.dn-chev { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #2fb47c 14%, transparent); }
.dn-chev svg { width: 15px; height: 15px; color: #2fb47c; transition: transform .2s; }
.dn-h[aria-expanded="true"] .dn-chev svg { transform: rotate(90deg); }
.dn-h > svg:last-child { display: none; }
.donate .dn-ht { display: grid; gap: 3px; color: var(--ink); font-size: inherit; }
.donate .dn-ht b { color: var(--ink);}
.donate .dn-sub { display: block; font-style: normal; line-height: 1.3; color: var(--muted);}
.donate .dn-chev { display: grid; }
.sharepill { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; font: 600 12.5px/1 var(--f-body, inherit); color: #fff;
  background: linear-gradient(135deg, var(--pc, var(--pa)), color-mix(in srgb, var(--pc, var(--pa)) 60%, #f2b84b));}
.dn-thx { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid color-mix(in srgb, #2fb47c 30%, transparent); border-radius: 16px;
  background: color-mix(in srgb, #2fb47c 9%, transparent); color: var(--ink); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; }
.dt-ic { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #34c48b, #1f8a63 65%, #b8902f); }
.dt-ic svg { width: 24px; height: 24px; }
.dt-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dt-t b { font-size: 13.5px; line-height: 1.3; color: #2fb47c; font-weight: 700; }
.dt-t em { font-style: normal; font-size: 12px; color: var(--muted); }
.dn-thx[aria-expanded="true"] .dn-chev svg { transform: rotate(90deg); }
.dn-thx > span:first-child:not(.dt-ic) { display: none; }
.dn-thx .dt-t { display: grid !important; gap: 2px; text-align: left; } .dn-thx .dt-t b, .dn-thx .dt-t em { display: block; } .dn-thx .dt-ic, .dn-thx .dn-chev { display: grid !important; }
.mhead { position: relative; }
.mtools { right: 0; top: 0; display: flex; align-items: center; gap: 6px; z-index: 1;}
.mtools .printbtn { margin: 0; }
.mhead { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 8px; }
.mhead .month { grid-row: 1; min-width: 0;}
.mtools { position: static;}
.mhead .month .lbl { white-space: nowrap; }
.mhead .month { grid-column: 1 / -1; justify-content: center; }
.mtools { grid-column: 2; grid-row: 2; }
.mhead .legend { grid-column: 1; grid-row: 2; }
.sharepill { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%;}
.sharepill svg { width: 17px; height: 17px; }
.sharepill span { display: none; }
@media (min-width: 420px) { .sharepill { width: auto; padding: 0 14px 0 12px; border-radius: 999px; } .sharepill span { display: inline; } }

/* медали достижений */
.medal { flex: none;}
.aw3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; animation: pop-in .2s ease both; }
.aw3 { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 14px 10px 12px; border-radius: 18px; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.05), transparent 60%), var(--sheet-2); border: 1px solid var(--hair); }
.aw3 b { font-size: 13.5px; line-height: 1.25; min-height: 2.5em; display: grid; place-items: center; }
.aw3-tier { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.aw3.t1 .aw3-tier { color: #d9935e; } .aw3.t2 .aw3-tier { color: #c2cad6; } .aw3.t3 .aw3-tier { color: #f2c46b; }
.aw3.t3 { border-color: color-mix(in srgb, #f2c46b 40%, var(--hair)); }
.aw3 .aw2-bar { width: 80%; } .aw3 small { font-size: 11px; color: var(--muted); }
.aw2-next .medal { margin: -4px 0; }
.aw3 .aw2-bar span, .aw2-next .aw2-bar span { background: linear-gradient(90deg, #d39a2a, #f2c46b); }
/* достижения: шапка, уровень-медаль, ровные плитки */
.aw2-hi { border-radius: 11px; display: grid; place-items: center;}
.aw2-hi svg { width: 19px; height: 19px; }
.aw2-lvl { display: flex; align-items: center; gap: 12px; }
.aw2-lvl > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.aw2-lvl b { font-size: 14.5px; } .aw2-lvl small { font-size: 11.5px; color: var(--muted); }
.lvl-num { font: 800 15px/1 var(--f-num, sans-serif); fill: #fff; }
.aw2-bar.lvl { height: 7px; } .aw2-bar.lvl span { background: linear-gradient(90deg, var(--pc, var(--pa)), #f2c46b); }
.aw2-chips span { display: grid !important; justify-items: center; gap: 3px; padding: 10px 4px 9px !important; white-space: normal; }
.aw2-chips i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.aw2-chips i svg { width: 16px !important; height: 16px !important; color: inherit !important; }
.aw2-chips i.c1 { color: #ff8a3d; background: color-mix(in srgb, #ff8a3d 16%, transparent); }
.aw2-chips i.c2 { color: #2fb47c; background: color-mix(in srgb, #2fb47c 16%, transparent); }
.aw2-chips i.c3 { color: #f2b84b; background: color-mix(in srgb, #f2b84b 16%, transparent); }
.aw2-chips b { font: 800 18px/1 var(--f-num, inherit); color: var(--ink); } .aw2-chips b em { font-style: normal; font-size: 12px; color: var(--muted); }
.aw2-chips small { font-size: 11px; color: var(--muted); }

/* ===================== календарь привычек: «тепловая карта» ===================== */
.grid-wrap { background: var(--sheet-2); border: 0 !important; border-radius: 18px; padding: 6px 6px 8px 0; }
.grid { border-collapse: separate !important; border-spacing: 3px 4px; }
.grid th, .grid td { border: 0 !important; background: none; }
.grid .we, .grid .td { background: none !important; }
.grid .hname { background: var(--sheet-2) !important; border: 0 !important; min-width: 128px; max-width: 150px; padding: 0 8px 0 12px; font-size: 13.5px; font-weight: 600; }
.grid thead th { height: 18px; font-size: 9.5px; letter-spacing: .04em; color: var(--muted); }
.grid thead .dn th { height: 26px; font: 700 11.5px/1 var(--f-num, inherit); color: var(--ink); }
.grid thead th.we { color: #d9a03a; }
.grid thead .dn th.td { color: #fff; }
.grid thead .dn th.td { position: relative; z-index: 0; }
.grid thead .dn th.td::before { content: ""; position: absolute; z-index: -1; inset: 1px 0; border-radius: 9px; background: var(--pc, var(--pa)); box-shadow: 0 3px 10px color-mix(in srgb, var(--pc, var(--pa)) 45%, transparent); }
.grid thead tr:first-child th.td { color: var(--pc, var(--pa)); font-weight: 800; }
.c { height: var(--cell); border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, transparent) !important; transition: transform .12s, background-color .15s; }
@media (hover: hover) and (pointer: fine) { .grid:not(.ro) .c:hover { background: color-mix(in srgb, var(--pc, var(--pa)) 22%, transparent) !important; } }
.grid:not(.ro) .c:active { transform: scale(.88); }
.c.fut { background: color-mix(in srgb, var(--ink) 2.5%, transparent) !important; }
.grid .c.s1 { background: var(--cc, var(--pc)) !important; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.grid .c.s1::after { content: ""; position: absolute; inset: 0; border-radius: 0; opacity: .95;}
.grid .c.s2 { background: color-mix(in srgb, #e5484d 16%, transparent) !important; }
.grid .c.s2::after { content: ""; position: absolute; inset: 0; opacity: .8;}
.grid td.td .c { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc, var(--pa)) 70%, transparent); }
.grid tbody tr.gadd .hname input { background: none; }
.lg.d { border-radius: 4px; } .lg.m { color: #e5484d; }
/* плотный фон под календарём и колонкой названий — клетки не просвечивают при прокрутке */
:root { --grid-base: #f4f4f7; }
:root[data-theme="dark"] { --grid-base: #26272d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grid-base: #26272d; } }
.grid-wrap { background: var(--grid-base) !important; }
.grid .hname, .grid thead .hname { background: var(--grid-base) !important; z-index: 3; box-shadow: 6px 0 8px -6px rgba(0,0,0,.35); }
.c { background: color-mix(in srgb, var(--ink) 9%, transparent) !important; }
.c.fut { background: color-mix(in srgb, var(--ink) 4%, transparent) !important; }
.grid td.td .c { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--pc, var(--pa)) 75%, transparent); }

/* ===================== календарь на точках: «+» сделал, «−» не сделал ===================== */
.grid .c, .grid .c.s1, .grid .c.s2, .grid .c.fut { background: none !important; box-shadow: none !important; border-radius: 50%; }
.grid .c::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--ink) 24%, transparent); transition: width .15s, height .15s, background-color .15s; }
.grid .c.fut::before { width: 4px; height: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
@media (hover: hover) and (pointer: fine) { .grid:not(.ro) .c:hover::before { width: 12px; height: 12px; background: color-mix(in srgb, var(--pc, var(--pa)) 45%, transparent); } }
.grid .c.s1::before, .grid .c.s2::before { width: 21px; height: 21px; }
.grid .c.s1::before { background: var(--cc, var(--pc));}
.grid .c.s2::before { background: color-mix(in srgb, #e5484d 18%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #e5484d 70%, transparent); }
.grid .c.s1::after, .grid .c.s2::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%); inset: auto; opacity: 1; }
.grid .c.s1::after { background: #fff !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.grid .c.s2::after { background: #e5484d !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.grid td.td .c::before { outline: 1.5px solid color-mix(in srgb, var(--pc, var(--pa)) 70%, transparent); outline-offset: 3px; }
.grid:not(.ro) .c:active::before { transform: translate(-50%, -50%) scale(.8); }
.legend .lgp, .legend .lgm { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 13px/1 var(--f-num, inherit); font-style: normal; margin-right: 5px; }
.legend .lgp { color: #fff; background: var(--pc, var(--pa)); }
.legend .lgm { color: #e5484d; background: color-mix(in srgb, #e5484d 18%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #e5484d 70%, transparent); }

/* ===================== спокойные кнопки: мягкий тон вместо яркого градиента и свечения ===================== */
.sharepill { color: var(--pc, var(--pa)) !important; background: color-mix(in srgb, var(--pc, var(--pa)) 15%, transparent) !important; box-shadow: none !important; }
.cbar-send::before, .cbar-send::after { background: color-mix(in srgb, var(--pc, var(--pa)) 18%, transparent) !important; box-shadow: none !important; }
.cbar-send { color: var(--pc, var(--pa)) !important; }
.cbar-send svg { filter: none !important; }
body.recording .cbar-mic::before, body.recording .cbar-mic::after { background: #e5484d !important; }
body.recording .cbar-mic { color: #fff !important; }
.recbar .rec-send::before, .recbar .rec-send::after { background: var(--pc, var(--pa)) !important; }
.recbar .rec-send { color: #fff !important; }
.cbar-cam { box-shadow: none !important; }
.aw2-hi { color: #d9a03a !important; box-shadow: none !important;}
.aw3.t3 { border-color: var(--hair) !important; }
.ideas-more, .chal-tool.on { box-shadow: none !important; }

/* ===================== профили на главной: две одинаковые компактные карточки рядом, векторный узор ===================== */
.people { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: stretch; }
.people .pc { min-height: 0 !important; height: 100%; padding: 14px 12px 12px !important; border-radius: 22px !important; gap: 10px !important; align-content: space-between;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='white' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M24 8l4.6 6.4 7.7-1-1 7.7L42 24l-6.7 4.6 1 7.7-7.7-1L24 42l-4.6-6.7-7.7 1 1-7.7L6 24l6.7-4.6-1-7.7 7.7 1z'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3Cpath d='M0 0l6 6M48 0l-6 6M0 48l6-6M48 48l-6-6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 48px 48px, var(--pg) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--pc) 24%, transparent) !important; }
.people .pc-top { gap: 8px; }
.people .pc .ava { --s: 36px !important; width: 36px; height: 36px; font-size: 15px; }
.people .pc-id { min-width: 0; }
.people .pc-id b { font-size: 15px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people .pc-chips { flex-wrap: nowrap !important; overflow: hidden; gap: 4px; }
.people .pc-chips .chip-on { display: none; }
.people .pc-chips .chip-g { font-size: 10.5px; padding: 2px 6px; }
.people .pc-top > svg.ring { display: none; }
.people .pc .big { font-size: 40px !important; }
.people .pc .big small { font-size: 17px; }
.people .pc .big-l { font-size: 11.5px; margin-top: 2px; }
.people .pc-bot { padding: 8px 10px !important; border-radius: 12px; font-size: 12.5px; }
.people .pc-chart { opacity: .55; }
.people .pc.has-photo::before { opacity: .28 !important; }
.tabbar.five { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.tabbar.five button span { white-space: nowrap;}
/* спокойная кнопка «сменить фото» и «+» у сториз */
.ava-cam { width: 26px !important; height: 26px !important; right: 0 !important; bottom: 0 !important; background: rgba(20,22,28,.55) !important; color: #fff !important; box-shadow: none !important;
  border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ava-cam svg { width: 13px !important; height: 13px !important; }
.st-add { width: 22px !important; height: 22px !important; top: 42px !important; color: var(--pa) !important; background: var(--sheet) !important; border: 2px solid var(--paper) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pa) 55%, transparent); }
.st-it[data-p="b"] .st-add { color: var(--pb) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pb) 55%, transparent); }
.st-add svg { width: 12px !important; height: 12px !important; }
/* «Достижения»: медаль в заголовке, всё на одной линии */
.aw2-h { display: flex !important; align-items: center !important; gap: 10px; }
.aw2-hi { width: auto !important; height: auto !important; background: none !important; padding: 0; }
.aw2-hi .medal { display: block; }
.aw2-h h2 { margin: 0; line-height: 1; }

/* ===================== меню аватара ===================== */
.hava { padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa) 55%, transparent);}
.hm-back { position: fixed; inset: 0;}
.hm-pop { z-index: 71 !important; width: min(300px, calc(100vw - 32px)); padding: 8px !important; border-radius: 20px !important; display: grid; gap: 2px; }
.hm-who { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.hm-who b { display: block; font-size: 15px; } .hm-who small { font-size: 12px; color: var(--muted); }
.hm-sep { height: 1px; margin: 4px 6px; background: var(--hair); }
.hm-item { display: flex !important; align-items: center; gap: 12px; width: 100%; padding: 10px 10px !important; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; font: 500 14.5px/1.2 var(--f-body, inherit); cursor: pointer; position: relative; }
@media (hover: hover) and (pointer: fine) { .hm-item:hover { background: var(--sheet-2); } }
.hm-item > svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.hm-item > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hm-item > span small { font-size: 11.5px; color: var(--muted); }
.hm-item em { font-style: normal; font-size: 12.5px; color: var(--pa); font-weight: 600; }
.hm-item.danger, .hm-item.danger > svg { color: #e5484d; }
.hm-item input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hm-sw { width: 38px; height: 22px; flex: none; border-radius: 999px; background: color-mix(in srgb, var(--muted) 40%, transparent); position: relative; transition: background .2s; }
.hm-sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.hm-sw.on { background: #30d158; } .hm-sw.on i { transform: translateX(16px); }
.hm-lang { cursor: default; } @media (hover: hover) and (pointer: fine) { .hm-lang:hover { background: none; } }
.hm-seg { display: inline-flex !important; flex: none !important; padding: 2px; border-radius: 10px; background: var(--sheet-2); grid-template-columns: none !important; }
.hm-seg button { border: 0; background: none; color: var(--muted); padding: 5px 10px; border-radius: 8px; font: 600 12.5px/1 var(--f-body, inherit); cursor: pointer; }
.hm-seg button.on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.hm-item > span.hm-sw { flex: 0 0 38px; display: block; } .hm-item > span.hm-seg { flex: 0 0 auto; display: inline-flex; }
/* «Поддержать»: плотная ровная строка без пустот */
.donate { padding: 12px 12px 12px 12px !important; gap: 10px !important; }
.donate .dn-h { display: grid !important; grid-template-columns: 46px minmax(0, 1fr) 30px; align-items: center; gap: 12px; }
.donate .dn-ht b { font-size: 15.5px; line-height: 1.25; }
.donate .dn-sub { font-size: 12px; }
.donate .dn-ic svg { width: 28px !important; height: 28px !important; }
.donate .dn-body { gap: 10px; }
/* настройки — панель снизу, как остальные окна: ничего не перекрывает наверху */
.hm-back { background: rgba(0,0,0,.45); animation: pop-in .2s ease both; z-index: 80 !important; }
.hm-pop.hm-sheet { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 0 !important; transform: translateX(-50%); transform-origin: bottom center;
  width: min(560px, 100%) !important; max-height: 86vh; overflow: auto; z-index: 81 !important; border-radius: 26px 26px 0 0 !important;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom)) !important; background: var(--grid-base) !important; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0 !important; box-shadow: 0 -12px 40px rgba(0,0,0,.4) !important; animation: sheet-up .28s cubic-bezier(.2,.8,.2,1) both; }
.hm-sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 2px auto 8px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 50%, transparent); }
.hm-sheet .hm-who { align-items: center; }

.hm-sheet .hm-who > .ava { flex: none !important; width: 40px; height: 40px; } .hm-sheet .hm-who > span:not(.ava) { flex: 1; }

/* ===================== лента: спокойнее и красивее ===================== */
.feed { gap: 10px !important; }
.fday { display: flex; align-items: center; gap: 10px; margin: 8px 4px 0; font: 700 11px/1 var(--f-body, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fday::before, .fday::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.feed article.post { position: relative; padding: 14px 14px 8px 16px !important; border-radius: 20px !important; border: 1px solid var(--hair); overflow: hidden; }
.feed article.post::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pc, var(--pa)); opacity: .85; }
.feed .post-h { gap: 10px; align-items: center; }
.feed .post-h .ava { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px color-mix(in srgb, var(--pc, var(--pa)) 70%, transparent); }
.feed .post-who { display: flex !important; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.feed .post-who b { font-size: 15px; }
.feed .post-who time { font-size: 12px; color: var(--muted); }
.feed .pm { opacity: .55; transition: opacity .2s; }
@media (hover: hover) and (pointer: fine) { .feed article.post:hover .pm { opacity: 1; } }
.feed .pm-ic { width: 32px; height: 32px; }
.feed .post-t { margin: 10px 0 4px; font-size: 15.5px; line-height: 1.5; }
.feed .pact { border-top: 0 !important; margin-top: 6px; padding-top: 2px; }
.feed .pa-like, .feed .pa-cm { border-radius: 999px; padding: 6px 10px; }
@media (hover: hover) and (pointer: fine) { .feed .pa-like:hover, .feed .pa-cm:hover { background: var(--sheet-2); } }
.feed .ptag.bottom { margin-top: 6px; }
.feed .post-img { border-radius: 14px; overflow: hidden; margin-top: 8px; }
.feed .vmsg { margin-top: 10px; }
.feed article.post::before { display: none !important; }
.feed article.post { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pc, var(--pa)) 85%, transparent), var(--shadow) !important; }
/* сунна «Бисмиллях» внизу блока */

/* ===================== нижнее меню: плавающая панель ===================== */
.tabbar.five { left: 10px !important; right: 10px !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; padding: 6px !important; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent) !important;
  background: color-mix(in srgb, var(--grid-base) 94%, transparent) !important; backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) !important; margin: 0 auto;}
.tabbar.five button { position: relative; color: var(--muted); transition: color .2s, background-color .2s;}
.tabbar.five button.on { color: var(--pc, var(--pa)); background: color-mix(in srgb, var(--pc, var(--pa)) 14%, transparent); }
.tabbar.five button.on svg { transform: translateY(-1px) scale(1.06); }
/* колокольчик под каждым намазом */
.prayers .pr { padding-bottom: 6px; }
.pr-bell { width: 28px; height: 24px; margin-top: 2px; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pr-bell svg { width: 14px !important; height: 14px !important; color: inherit !important; opacity: 1 !important; }
.pr-bell.on { color: #fff; background: var(--pa); }
.prayers .pr.next .pr-bell:not(.on) { background: color-mix(in srgb, #f2b84b 22%, transparent); color: #d9a03a; }
/* «Бисмиллях» внизу главной */
.bism { position: relative; overflow: hidden; display: grid; width: 100%; margin-top: 6px; border-radius: 22px; cursor: pointer; color: var(--ink);
  border: 1px solid color-mix(in srgb, #f2b84b 28%, var(--hair)); background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, #f2b84b 14%, transparent), transparent 70%), var(--card-solid, var(--sheet));
  font: inherit; transition: transform .15s;}
.bism::after { content: ""; position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(242,196,107,.18), transparent 70%); pointer-events: none; animation: bism-glow 4s ease-in-out infinite;}
@keyframes bism-glow { 50% { opacity: .4; transform: translateX(-50%) scale(1.15); } }
.bism:active { transform: scale(.99); }
.bism-ar { font-family: var(--f-ar); color: #f2c46b;}
.bism b { font-weight: 600;}
.bism-t { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); animation: pop-in .2s ease both; }
.bism small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #d9a03a; }
@media (prefers-reduced-motion: reduce) { .bism::after { animation: none; } }
/* «Бисмиллях»: одна строка — текст и арабская надпись рядом */
.bism { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; gap: 4px 12px; padding: 10px 16px !important; text-align: left; }
.bism b { font-size: 13.5px; line-height: 1.3; }
.bism-ar { font-size: 21px !important; line-height: 1.5 !important; white-space: nowrap; }
.bism-t, .bism small { grid-column: 1 / -1; text-align: left; }
.bism::after { left: auto; right: -30px; top: -50%; transform: none; width: 140px; height: 140px; }
@keyframes bism-glow { 50% { opacity: .4; } }
/* меню: подсветка плавно переезжает под активную иконку */
.tabbar.five { position: fixed; }
.tab-ind { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); transform: translateX(calc(var(--i) * 100%));}
.tabbar.five button { z-index: 1; background: none !important; }
@media (prefers-reduced-motion: reduce) { }
/* палитра цвета профиля */
.hm-colors { cursor: default; } @media (hover: hover) and (pointer: fine) { .hm-colors:hover { background: none; } }
.hm-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: 0 12px 8px 44px; }
.sw-c { aspect-ratio: 1; width: 100%; max-width: 30px; border: 0; border-radius: 50%; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); transition: transform .15s; }
.sw-c.on { box-shadow: 0 0 0 2px var(--grid-base), 0 0 0 4px var(--c); transform: scale(1.05); }
.sw-c:active { transform: scale(.9); }
.dn-qrbox { justify-items: center; text-align: center; } .dn-qrbox img { display: block; box-sizing: border-box; margin: 0 auto; object-fit: contain; }
span.q-ref { text-decoration: none; color: inherit; }
/* крестик настроек: крупная зона нажатия */
.hm-sheet .pi-x { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 24px; line-height: 1; color: var(--ink); background: var(--sheet-2); border: 0; cursor: pointer; }
.hm-sheet .pi-x:active { transform: scale(.92); }
.grid .c.s2.auto::before { background: color-mix(in srgb, #e5484d 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #e5484d 45%, transparent); }
.grid .c.s2.auto::after { opacity: .7; }
.hm-refresh { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--pa); background: color-mix(in srgb, var(--pa) 14%, transparent); font-style: normal;}
.hm-refresh svg { width: 16px; height: 16px; }
/* заголовки «Достижения» и «Статистика» — по центру, с иконками */
.aw2-h { text-align: center;}
.st-h { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.st-h h2 { margin: 0; line-height: 1; }
.st-hi { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--pc, var(--pa)); background: color-mix(in srgb, var(--pc, var(--pa)) 15%, transparent); }
.st-hi svg { width: 20px; height: 20px; }
.st-m { flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* верхний блок: полоска времени и подписи не слипаются */
.skyline { display: grid !important; gap: 0; align-content: center; }
.sl-cap { margin-bottom: 9px !important; line-height: 1.15; }
.sl-track { margin: 0 !important; }
.sl-ends { margin-top: 10px !important; line-height: 1.2; font-size: 12px; font-variant-numeric: tabular-nums; }
.sl-ends span { opacity: .8; }

/* ===================== текст нельзя выделить и скопировать — как в обычном приложении ===================== */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* ===================== «Сегодня»: ровная шапка и строки ===================== */
.today .daynav { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.today .daynav .dl { text-align: center; }
.today-h { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.today-h .cnt { font-family: var(--f-body, inherit) !important; font-size: 13.5px; color: var(--muted); letter-spacing: 0; }
.today-h .cnt b { color: var(--ink); font-size: 15px; font-weight: 700; }
.th-tools { display: inline-flex; align-items: center; gap: 6px; }
.th-tools .rbell { width: 34px; height: 34px; margin: 0; border-radius: 11px; }
.th-tools .rbell svg { width: 17px; height: 17px; }
.today .item .nm { display: inline-flex; align-items: center; gap: 6px; }
.today .item .nm .star-i { width: 14px; height: 14px; color: var(--star); flex: none; order: 2; }
.today .item .t { min-width: 0; }
.today .slot { margin: 14px 2px 8px; }

/* ---- медали: цвет достижения + эффекты по уровню ---- */
.medal { filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)) !important; overflow: visible; }
.medal.t0 { opacity: .75; filter: grayscale(.4) !important; }
.medal.t2 { filter: drop-shadow(0 3px 10px rgba(190,205,225,.28)) !important; }
.medal.t3 { filter: drop-shadow(0 0 10px rgba(255,205,100,.45)) drop-shadow(0 3px 8px rgba(0,0,0,.3)) !important; }
.medal .md-spark { transform-box: fill-box; transform-origin: center; animation: md-tw 2.6s ease-in-out infinite; }
.medal .md-spark:nth-of-type(2) { animation-delay: .9s; } .medal .md-spark:nth-of-type(3) { animation-delay: 1.7s; }
@keyframes md-tw { 0%, 100% { opacity: .2; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .medal .md-spark { animation: none; opacity: .8; } }
.aw3.t3 { background: radial-gradient(120% 80% at 50% 0%, rgba(255,205,100,.10), transparent 60%), var(--sheet-2); }
.aw3.t2 { background: radial-gradient(120% 80% at 50% 0%, rgba(200,215,235,.07), transparent 60%), var(--sheet-2); }
/* ---- «6 из 24» — кольцо прогресса ---- */
.aw2-score { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: color-mix(in srgb, #f2b84b 12%, transparent); border: 1px solid color-mix(in srgb, #f2b84b 25%, transparent); }
.aw2-score > svg:first-child { flex: none;}
.aw2-score .sc-bg { fill: none; stroke: color-mix(in srgb, #f2b84b 20%, transparent); stroke-width: 3.2; }
.aw2-score .sc-fg { fill: none; stroke: #f2b84b; stroke-width: 3.2; stroke-linecap: round; }
.aw2-score > svg:nth-child(2) { position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: #f2b84b; margin: 0; }
.aw2-score .sc-t { line-height: 1; text-align: left;}
.aw2-score .sc-t b { font: 800 16px/1 var(--f-num, inherit); color: #f6c968; }
.aw2-score .sc-t small { color: var(--muted); letter-spacing: .02em;}

/* ---- кнопка «Изменить список» ---- */
.editbtn:not(.pri) { width: 100%; display: flex; align-items: center; text-align: left;}
.editbtn .eb-i { flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--pc, var(--pa)) 16%, transparent);}
.editbtn .eb-ic { display: flex; color: var(--muted);}
.editbtn.pri { width: 100%; justify-content: center;}

/* ---- ползунок календаря: удобный для пальца ---- */
.grid-wrap { scrollbar-width: none; }
.grid-wrap::-webkit-scrollbar { display: none; }
.gscroll { position: relative; height: 32px; margin: 8px 2px 0; touch-action: none; cursor: pointer; outline: none; }
.gscroll[hidden] { display: none; }
.gscroll::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 99px; background: var(--hair); }
.gs-thumb { position: absolute; left: 0; top: 50%; margin-top: -12px; height: 24px; min-width: 56px; border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: 3px;
  background: var(--pc, var(--pa)); box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: height .15s, margin .15s; cursor: grab; }
.gs-thumb i { width: 2px; height: 10px; border-radius: 2px; background: rgba(255,255,255,.75); }
.gscroll.drag .gs-thumb { cursor: grabbing; height: 28px; margin-top: -14px; }
.gscroll:focus-visible .gs-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- статистика: кольцо месяца + три строки ---- */
.sx-hero { display: grid; align-items: center; margin: 6px 0 4px;}
.sx-ring { position: relative;}
.sx-ring svg { width: 100%; height: 100%; }
.sx-ring .rg-bg { fill: none; stroke: color-mix(in srgb, var(--pc, var(--pa)) 14%, transparent); stroke-width: 9; }
.sx-ring .rg-fg { fill: none; stroke: var(--pc, var(--pa)); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.2,.8,.2,1); }
.sx-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 3px; }
.sx-ring b { font: 800 27px/1 var(--f-num, inherit); letter-spacing: -.02em; }
.sx-ring small { font-size: 11.5px; color: var(--muted); }
.sx-ring em { font: 700 10.5px/1 var(--f-num, inherit); font-style: normal; padding: 3px 6px; border-radius: 99px; justify-self: center; }
.sx-ring em.up { color: #3ccf86; background: rgba(60,207,134,.13); } .sx-ring em.dn { color: #ff7b7b; background: rgba(255,123,123,.12); }
.sx-rows { display: grid;}
.sx-row { display: grid; align-items: center; border-radius: 14px; background: var(--sheet-2);}
.sx-row > i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; grid-row: span 2; }
.sx-row > i svg { width: 17px; height: 17px; margin: 0; }
.sx-row .sx-l { color: var(--muted); line-height: 1.2; min-width: 0;}
.sx-row .sx-who { color: var(--ink); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sx-row b { font: 750 17px/1 var(--f-num, inherit);}
.sx-row:not(.has-bar) > i { grid-row: auto; }
.sx-bar { height: 5px; border-radius: 99px; background: var(--hair); overflow: hidden;}
.sx-bar span { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.sx-row.c7 { color: #5aa9ff; } .sx-row.cp { color: #f2b84b; } .sx-row.cs { color: #ff8a4c; }
.sx-row > i { background: color-mix(in srgb, currentColor 15%, transparent); }
.sx-row .sx-l, .sx-row b { color: var(--ink); } .sx-row .sx-l { color: var(--muted); }
@media (max-width: 360px) { .sx-hero { grid-template-columns: 1fr; justify-items: center; } .sx-rows { width: 100%; } }

.gscroll { margin-top: 4px; }
/* статистика: значение сверху, подпись снизу — без тесноты */
.sx-hero { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
.sx-ring { width: 112px; height: 112px; }
.sx-ring b { font-size: 25px; }
.sx-rows { gap: 6px; }
.sx-row { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; padding: 8px 10px; }
.sx-row > i, .sx-row:not(.has-bar) > i { width: 30px; height: 30px; grid-row: 1 / 3; align-self: center; }
.sx-row b { grid-column: 2; text-align: left; font-size: 16px; }
.sx-row .sx-l { grid-column: 2; font-size: 11.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-row .sx-who { display: inline; font-size: 11.5px; }
.sx-row .sx-who::before { content: " · "; color: var(--muted); }
.sx-bar { grid-column: 1 / 3; grid-row: 3; margin-top: 5px; }
.sx-row.has-bar > i { grid-row: 1 / 3; }
/* заголовок «Достижения» по центру, счёт звёзд — под ним, как месяц у «Статистики» */
.aw2-h { flex-wrap: wrap; justify-content: center !important; row-gap: 8px; }
.aw2-h h2 { flex: 0 0 auto !important; }
.aw2-h .aw2-score { flex-basis: auto; order: 3; }
.aw2-h::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
/* календарь: «+» всегда зелёный — сразу понятно «сделал», независимо от цвета привычки и профиля */
:root { --done: #22b36b; }
.grid .c.s1::before { background: var(--done) !important; box-shadow: 0 2px 6px rgba(34,179,107,.45) !important; }
.legend .lgp { background: var(--done) !important; }
/* истории: подпись «Ваша история» целиком */
.st-it { width: 92px; }
.st-name { max-width: 92px; font-size: 11.5px; }

/* настройки: фото меняется нажатием на сам аватар — значок камеры прямо на картинке */
.hm-ava { position: relative; flex: none; cursor: pointer; border-radius: 50%; }
.hm-ava input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hm-who > .hm-ava > .ava { flex: none; }
.hm-cam { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pc, var(--pa)); color: #fff; border: 2px solid var(--sheet); }
.hm-cam svg { width: 12px; height: 12px; margin: 0; }
.hm-ava:active { transform: scale(.95); }
.hm-ava:focus-within { outline: 2px solid var(--pc, var(--pa)); outline-offset: 2px; }
/* азан: переключатель, а под ним — маленькая кнопка «послушать» */
.hm-azan { cursor: default; }
.hm-az-c { display: grid; justify-items: center; gap: 6px; flex: none; }
.hm-swb { border: 0; background: none; padding: 0; cursor: pointer; display: block; }
.hm-play { width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--pc, var(--pa)) 15%, transparent); color: var(--pc, var(--pa)); }
.hm-play svg { width: 14px; height: 14px; margin: 0; }
.hm-play.on { background: var(--pc, var(--pa)); color: #fff; }

/* истории как в Telegram: кольцо из отрезков, новое — сине-зелёное, просмотренное — тонкое серое */
.st-ring.seg { background: none !important; animation: none !important; }
.st-seg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.st-seg circle { fill: none; stroke-linecap: round; }
.st-seg .sg-new { stroke: url(#stg); stroke-width: 3; }
.st-seg .sg-old { stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 1.6; }
.st-ring .ava { box-shadow: none; }
.st-ring:not(.seg) { background: var(--hair); }
.st-ring.new .ava { animation: st-pop .5s ease-out; }
@keyframes st-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.st-name.fresh { color: var(--ink); font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .st-ring.new .ava { animation: none; } }
/* «Изменить список» — компактная строка-кнопка */
.editbtn:not(.pri) { min-height: 44px; padding: 6px 12px 6px 6px; gap: 10px; border-radius: 14px; }
.editbtn .eb-i { width: 32px; height: 32px; border-radius: 10px; }
.editbtn .eb-i svg { width: 15px; height: 15px; }
.editbtn .eb-b { flex: 1; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.editbtn .eb-ic { gap: 8px; opacity: .55; }
.editbtn .eb-ic svg { width: 15px; height: 15px; }
.editbtn.pri { min-height: 44px; border-radius: 14px; }
.hm-item > span.hm-az-c { flex: 0 0 auto; display: grid; justify-items: center;}
.hm-swb .hm-sw { display: block; }
/* азан: «послушать» слева от переключателя, на одной линии */
.hm-item > span.hm-az-c { grid-template-columns: auto auto; align-items: center; gap: 10px; }
.hm-az-c .hm-play { width: 28px; height: 28px; }
/* қазақша подписи меню длиннее — чуть меньше шрифт, без наложения */
html[lang="kk"] .tabbar button span { font-size: 10px; letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar button { min-width: 0; }
.hm-az-c .hm-play { order: -1; }
/* «Достижения»: медаль + название ровно по центру, счёт звёзд — аккуратное кольцо справа на той же линии */
.awards2 .aw2-h { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center !important; gap: 8px; min-height: 44px; }
.awards2 .aw2-h::after { content: none; }
.awards2 .aw2-h .aw2-hi { grid-column: 2; grid-row: 1; }
.awards2 .aw2-h h2 { grid-column: 3; grid-row: 1; flex: none !important; }
.awards2 .aw2-h .aw2-score { grid-column: 4; grid-row: 1; justify-self: end; order: 0; padding: 0; background: none; border: 0; gap: 0; position: relative; }
.aw2-score > svg:first-child { width: 42px; height: 42px; }
.aw2-score .sc-t { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; place-content: center; gap: 0; }
.aw2-score .sc-t b { font-size: 14px; line-height: 42px; }
.aw2-score .sc-t small { font-size: 9px; line-height: 42px; color: var(--muted); }

/* ===== камера историй, как в Instagram ===== */
.st-new.is-cam { padding: 0; display: block; background: #000; }
.cam { position: absolute; inset: 0; overflow: hidden; background: #000;}
.cam-v { position: absolute;}
.cam-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: rgba(255,255,255,.7); font-size: 14px; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: cam-fl .25s ease-out; }
@keyframes cam-fl { 0% { opacity: .85; } 100% { opacity: 0; } }
.cam-top { position: absolute; display: flex; justify-content: space-between; align-items: center; padding: max(12px, env(safe-area-inset-top)) 14px 10px;}
.cam-top-r { display: flex; gap: 10px; }
.cam-ic { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(0,0,0,.35); font-size: 26px; line-height: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cam-ic svg { width: 22px; height: 22px; }
.cam-ic.on { background: #ffd34d; color: #111; }
.cam-aa { font: 700 17px/1 var(--f-body, system-ui); }
.cam-fx { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; padding: 0 12px; overflow-x: auto; scrollbar-width: none;}
.cam-fx::-webkit-scrollbar { display: none; }
.cam-fx button { flex: none; border: 0; border-radius: 99px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); background: rgba(0,0,0,.3); cursor: pointer; }
.cam-fx button.on { background: #fff; color: #111; }
.cam-bottom { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;}
.cam-gal { justify-self: start; width: 44px; height: 44px; border-radius: 12px; border: 2px solid #fff; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.3); cursor: pointer; }
.cam-gal svg { width: 22px; height: 22px; }
.cam-gal input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cam-flip { justify-self: end; }
.cam-shot { border-radius: 50%; border: 5px solid #fff; background: transparent; padding: 5px; cursor: pointer; display: grid;}
.cam-shot i { border-radius: 50%; background: #fff; transition: transform .12s; }
.cam-shot:active i { transform: scale(.86); }
.cam-shot:disabled { opacity: .5; }

/* ===== «Похвалить партнёра» — компактно: аватар с кольцом дня + эмодзи одним нажатием ===== */
.praise2 { background: var(--sheet); border-radius: 22px;}
.pz-ava { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.pz-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.pz-ring .pz-bg { fill: none; stroke: var(--hair); stroke-width: 3; }
.pz-ring .pz-fg { fill: none; stroke: var(--pb, #e05a8c); stroke-width: 3; stroke-linecap: round; }
.pz-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pz-t b { font-size: 15px; } .pz-t small { font-size: 12px; color: var(--muted); }
@keyframes pz-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-8deg); } 100% { transform: scale(1); } }
/* ===== «Вместе»: дуэль двух игроков вместо «п. п.» ===== */
.together .duel { display: grid; gap: 6px; }
.vs { display: grid; align-items: center;}
.vs-p { position: relative; background: var(--sheet-2); transition: transform .3s;}
.vs-p b { font: 800 24px/1 var(--f-num, inherit); letter-spacing: -.02em; }
.vs-p small { font-size: 12.5px; color: var(--muted); }
.vs-p[data-p="a"] b { color: var(--pa); } .vs-p[data-p="b"] b { color: var(--pb); }
.vs-p.win { background: color-mix(in srgb, #f2b84b 12%, var(--sheet-2)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f2b84b 45%, transparent); }
@keyframes vs-bob { 50% { transform: translateY(-3px) rotate(-6deg); } }
.vs-msg { text-align: center;}
.tug { position: relative; overflow: visible !important; }
.tug-knot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: left .5s cubic-bezier(.2,.8,.2,1); }
.pc-chips .chip-g { white-space: nowrap; }
/* общая полка «Рекомендации от партнёра»: маленький аватар того, кто посоветовал */
.book.rec { position: relative; }
.book-by { position: absolute; z-index: 2; border-radius: 50%; box-shadow: 0 0 0 2px var(--sheet); line-height: 0;}
.shelf-hint { display: flex; gap: 8px; margin: 2px 4px 8px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; color: var(--muted); background: color-mix(in srgb, var(--pc, var(--pa)) 8%, transparent);}
.shelf-hint svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--pc, var(--pa)); }
.book-by { top: 4px; right: 4px; }
.shelf-hint { align-items: center; padding: 6px 10px; }
/* «Подбодрить партнёра» — одна строка: аватар с кольцом дня, имя, одна кнопка */
.praise2 { display: flex !important; align-items: center; gap: 10px; padding: 10px 12px !important; }
.praise2 .pz-ava { width: 42px; height: 42px; }
.praise2 .pz-t { flex: 1; min-width: 0; }
.praise2 .pz-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-go { flex: none; border: 0; border-radius: 99px; padding: 10px 14px; font-size: 14px; font-weight: 650; cursor: pointer; color: #fff;
  background: var(--pb, #e05a8c); box-shadow: none; }
.pz-go:active { transform: scale(.96); }
.pz-done { flex: none; font-size: 13px; font-weight: 600; color: #30d158; padding: 10px 6px; }
/* «Вместе» компактно: две строки игроков рядом, лидер подсвечен, без короны */
.together .sec-h { margin-bottom: 6px; }
.vs { grid-template-columns: 1fr 1fr !important; gap: 8px; }
.vs-p { display: flex !important; align-items: center; gap: 8px; padding: 8px 10px !important; border-radius: 16px; justify-items: initial; }
.vs-p .ava { flex: none; }
.vs-who { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.15; }
.vs-who small { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-who em { font: 600 11.5px/1 var(--f-num, inherit); font-style: normal; color: var(--muted); }
.vs-p b { font-size: 19px !important; flex: none; }
.vs-p.win { background: color-mix(in srgb, var(--pc-w, #f2b84b) 10%, var(--sheet-2)) !important; }
.vs-p.win[data-p="a"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pa) 70%, transparent) !important; background: color-mix(in srgb, var(--pa) 12%, var(--sheet-2)) !important; }
.vs-p.win[data-p="b"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pb) 70%, transparent) !important; background: color-mix(in srgb, var(--pb) 12%, var(--sheet-2)) !important; }
.vs-msg { font-size: 13px !important; font-weight: 500 !important; color: var(--muted); margin: 4px 0 2px !important; }
.together .tug { margin-top: 2px; }
.vs-v { display: flex; align-items: baseline; gap: 6px; }
.vs-p .vs-v b { font-size: 18px !important; }

/* ===== выравнивание (рус/қаз) ===== */
/* легенда календаря не упирается в кнопки */
.legend { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.legend span { display: inline-flex; align-items: center; white-space: nowrap; }
/* SMART: подписи в плитках не слипаются */
.pv-letters small, .pv-letters span { font-size: 10.5px; line-height: 1.2; overflow-wrap: normal; }
/* «Подбодрить» — спокойная кнопка, без яркой заливки */
.pz-go { background: color-mix(in srgb, var(--pb, #e05a8c) 16%, transparent) !important; color: color-mix(in srgb, var(--pb, #e05a8c) 85%, #fff) !important; }
.azan-tap { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 120; border: 0; border-radius: 99px;
  padding: 14px 22px; font-size: 15px; font-weight: 650; color: #fff; background: #1f8f5f; box-shadow: 0 8px 24px rgba(0,0,0,.35); cursor: pointer; animation: pop-in .25s ease both; }
/* свайп к камере: справа выезжает тёмный экран камеры, как в Instagram */
.swipe-cam { position: fixed; inset: 0; z-index: 85; background: #000; display: grid; place-items: center; pointer-events: none;}
.swipe-cam span { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; color: #fff; }
.swipe-cam svg { width: 30px; height: 30px; }
.pbody, #app > * { will-change: auto; }
.lib-ro { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: var(--muted); background: var(--sheet); }
.lib-ro svg { width: 18px; height: 18px; flex: none; color: var(--pc, var(--pa)); }

/* текст нигде не выделяется и не копируется (на iPhone — без меню «Скопировать» при долгом нажатии);
   писать и править можно только в полях ввода */
html, body, body * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; }
img { -webkit-user-drag: none; }

/* свайпы по лучшим практикам: страница отдаёт браузеру только вертикальную прокрутку, вбок ведём сами;
   ленты с прокруткой вбок не «перетекают» прокруткой на страницу и в жест «назад» */
html, body { overscroll-behavior-x: none; }
#app { touch-action: pan-y pinch-zoom; }
.grid-wrap, .tagrow, .stories, .shelf-row, .pr-chips, .gper, .cam-fx, .chips, .pr-cats { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }

/* календарь: столбец с названиями — ширина как удобно (тянуть за край) */
.grid .hname:not(.gedit-on) { width: var(--hw, 132px); min-width: var(--hw, 132px) !important; max-width: var(--hw, 132px) !important; }
.grid thead tr:first-child .hname { overflow: visible; }
.hw-grip { position: absolute; top: 2px; right: -2px; width: 22px; height: 30px; cursor: col-resize; touch-action: none; z-index: 3; display: grid; place-items: center; }
.hw-grip::before { content: ""; width: 4px; height: 20px; border-radius: 4px; background: color-mix(in srgb, var(--pc, var(--pa)) 65%, transparent); box-shadow: 6px 0 0 -0 color-mix(in srgb, var(--pc, var(--pa)) 30%, transparent); }
.hw-grip.drag::before, .hw-grip:focus-visible::before { background: var(--pc, var(--pa)); }
.grid-wrap.hw-drag .hname { box-shadow: inset -2px 0 0 var(--pc, var(--pa)); }
/* меню профиля (аватар) — справа вверху на всех страницах */
.pbar .hmenu { margin-left: auto; flex: none; }
.pbar .hava .ava { width: 34px !important; height: 34px !important; }
.pbar .pill { margin-left: auto; }
.pbar-r { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.pbar-r .hmenu { margin: 0; }
.pbar-r .hava { padding: 0;}
.pbar-r .hava .ava { width: 34px !important; height: 34px !important; font-size: 14px; }

/* ===== скорость и отзывчивость ===== */
/* нажатие срабатывает сразу: без задержки и без увеличения от двойного касания */
a, button, label, [data-act], .c, input, select, textarea { touch-action: manipulation; }
#app [data-act]:not(.c):active { transition-duration: .05s; }
/* то, что ниже экрана, не отрисовывается заранее — прокрутка и переходы легче */
.feed .post { content-visibility: auto; contain-intrinsic-size: auto 320px; }
/* размытие фона на телефонах дорогое при прокрутке — оставляем только в шапке и меню */
@media (max-width: 600px) { .card, .post, .tile { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }

/* ===== 120 Гц: въезд экрана одной CSS-анимацией (transform — только композитор, без layout/paint) ===== */
@keyframes sw-in { from { transform: translate3d(var(--sw-dx, 0), 0, 0); } to { transform: none; } }
/* въезжают только первые блоки — те, что на экране; остальные сразу на месте (меньше работы — быстрее отклик) */
#app.sw-in > :nth-child(-n+8):not(.tabbar):not(.pbar):not(.hm-sheet):not(.hm-back):not(.nav-space):not(.rs-back):not(.rs-sheet):not(.hm-ph):not(.phero-ph), .pbody.sw-in-self { animation: sw-in .3s cubic-bezier(.22,.61,.36,1) both; }
.pbody.sw-in-self { animation: sw-in .24s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { #app.sw-in > *, .pbody.sw-in-self { animation: none !important; } }
/* независимые карточки: изменения внутри одной не заставляют браузер пересчитывать всю страницу */
.post, .donate, .bism, .praise2, .library .shelf, #app > .card, #app > .hcard, #app > .people { contain: layout style; }
/* блоки профиля ниже экрана раскладываются, только когда до них долистали (размер запоминается — без скачков) */
/* ленивая отрисовка блоков профиля убрана: в конце страницы она меняла высоту и мешала прокрутке */
/* камера — слева (как в Instagram); после выезда открывается без своей второй анимации */
.swipe-cam { transform: translate3d(-100%,0,0); }
.st-new.is-cam { animation: none; }
/* мягкие переходы: одна кривая и одно время — не резко, не медленно */

/* ===== касания: кнопки, поля, переключатели, оплата ===== */
/* мгновенный отклик: без задержки касания и без серой вспышки iOS */
button, a, label, select, summary, [role="button"], [role="switch"], [role="tab"], [data-act], input, textarea {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* видимая реакция на нажатие — в тот же кадр (только transform — без перерисовки соседей) */
.btn, .pz-go, .la-go, .la-sh, .chip, .pr-chip, .cbar-send, .dn-btn, .hm-item, .seg3 button, .addrow button, .rw-add, .aw2-more {
  transition: transform .09s ease-out, background-color .15s, color .15s;
}
.btn:active:not(:disabled), .pz-go:active, .la-go:active, .la-sh:active, .chip:active, .pr-chip:active, .cbar-send:active:not(:disabled),
.dn-btn:active, .seg3 button:active, .addrow button:active, .rw-add:active, .aw2-more:active { transform: scale(.97); }
.hm-item:active { background-color: color-mix(in srgb, var(--ink) 6%, transparent); }
button:disabled, .btn[aria-busy="true"] { opacity: .6; }
/* удобные области касания — не меньше 44×44 */
.btn, .pz-go, .la-go, .cbar-send, .dn-btn, .addrow button, .rw-add { min-height: 44px; }
.dn-btn { min-height: 52px; font-size: 16px; }
.hm-item { min-height: 52px; }
.rs-sw, .hm-sw, .hm-swb { position: relative; }
.rs-sw::after, .hm-swb::after { content: ""; position: absolute; inset: -12px -8px; } /* невидимое расширение под палец */
/* поля: шрифт 16 px — iPhone не увеличивает страницу при вводе; удобная высота */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea, select { font-size: max(16px, 1em); }
.lib-add input, .addrow input, .cbar textarea, .cbar input, .fsearch input, #rw-in-day, #rw-in-week, #rw-in-month, .rs-time { min-height: 44px; }
/* пока открыта экранная клавиатура, нижнее меню не закрывает поле ввода */
body.kb-open .tabbar, body.kb-open .nav-space { display: none !important; }
input, textarea { scroll-margin: 96px 0 120px; }

/* шторка настроек: своя прокрутка не утекает на страницу под ней */
.hm-pop.hm-sheet { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

/* ===== окна в правильном месте ===== */
/* шторки: снизу, над клавиатурой, с учётом выреза и «полоски» iPhone; не выше видимой части экрана */
.rs-sheet, .hm-pop.hm-sheet { bottom: var(--kb, 0px) !important; max-height: calc(min(86dvh, var(--vvh, 100dvh)) - 12px) !important; overscroll-behavior: contain; }
.rs-sheet { padding-bottom: max(14px, env(safe-area-inset-bottom)) !important; }
body.modal-open { overflow: hidden; } /* страница под окном не прокручивается */
/* уведомления: над нижним меню и над клавиатурой — не закрывают кнопки */
.toast { bottom: calc(max(24px, env(safe-area-inset-bottom, 0px) + 16px) + var(--kb, 0px)) !important; }
body.has-nav:not(.kb-open) .toast { bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 86px) !important; }
/* выпадающие меню: перевёрнутые открываются вверх от кнопки */
.pm-pop.up { top: auto; bottom: 34px; transform-origin: bottom right; }
.hm-pop.up:not(.hm-sheet) { top: auto; bottom: calc(100% + 8px); transform-origin: bottom right; }
/* полноэкранные окна (просмотр фото, истории, камера) — с учётом выреза экрана */
/* полноэкранные окна — на весь экран; при открытой клавиатуре поднимаются над ней */
.lightbox, .st-view { height: auto !important; top: 0; bottom: var(--kb, 0px); }

/* ===== аватары — всегда идеальный круг (во всех профилях, карточках, списках, окнах) ===== */
.ava { aspect-ratio: 1 / 1; min-width: var(--s); min-height: var(--s); max-width: var(--s); max-height: var(--s); border-radius: 50% !important; flex: none !important; align-self: center; justify-self: center; box-sizing: border-box; }
.ava img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; border-radius: 50% !important; aspect-ratio: 1 / 1; }
.ava-edit, .hm-ava, .hava { align-self: center; justify-self: start; width: max-content; height: max-content; flex: none; line-height: 0; }
.hava { width: 44px; height: 44px; aspect-ratio: 1 / 1; }
.pbar-r .hava { width: 38px; height: 38px; }
.pbar .hava .ava, .pbar-r .hava .ava { --s: 34px; }
.hcard .hava .ava { --s: 34px; }
.hm-sheet .hm-who .ava { --s: 48px; width: 48px; height: 48px; }
/* камера: весь кадр без обрезания и без увеличения; масштаб пальцами показывается подсказкой */
.cam-zoom { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 99px; font: 700 15px/1 var(--f-num, system-ui); font-style: normal; color: #fff; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; pointer-events: none; }
.cam-zoom.on { opacity: 1; }
.cam { touch-action: none; }

/* истории и камера: чёрный фон сразу на весь экран (без уменьшения и прозрачности — страница не просвечивает),
   плавно появляется только содержимое; нижнее меню под окном спрятано */
.st-view { animation: none !important; background: #000 !important; }
.st-view > * { animation: st-in-c .22s cubic-bezier(.22,.61,.36,1) both; }
@keyframes st-in-c { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .st-view > * { animation: none; } }
body.st-open .tabbar { visibility: hidden; }
body.st-open .toast { z-index: 95; }
body.st-open { background: #000; }

/* ===== истории и камера — стандарт Instagram: рамка 9:16 со скруглёнными углами по центру ===== */
.st-view { justify-items: center; }
.st-view > .st-h, .st-view > .st-bars, .st-view > .st-f { width: min(100%, calc((100dvh - 150px) * 9 / 16)); }
.st-body { height: 100%; max-height: 100%; aspect-ratio: 9 / 16; width: auto; max-width: 100%; justify-self: center; border-radius: 14px !important; }
.st-body img:not(.st-blur) { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.st-body .st-blur { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(22px) brightness(.6); transform: scale(1.1); }
.st-body .st-cap, .st-body .st-big, .st-body textarea, .st-body .st-zone { z-index: 2; }
/* камера: живое изображение в рамке 9:16 (без растяжения на весь высокий экран — как в Instagram) */
.cam-v { inset: auto !important; top: calc(env(safe-area-inset-top, 0px) + 8px) !important; left: 50% !important; transform: translateX(-50%);
  height: min(calc(100% - 150px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), calc(100vw * 16 / 9)) !important; width: auto !important;
  aspect-ratio: 9 / 16; object-fit: cover !important; border-radius: 14px; background: #111; }
.cam-v.mirror { transform: translateX(-50%) scaleX(-1); }
.cam-top { top: calc(env(safe-area-inset-top, 0px) + 8px); padding-top: 12px !important; width: min(100%, calc((100dvh - 150px) * 9 / 16)); left: 50% !important; right: auto !important; transform: translateX(-50%); background: none !important; }
.cam-bottom { background: none !important; }
/* аватар-меню вверху справа — без зелёной точки «в сети» (она уже есть рядом с именем) */
.hava .ava::after, .hava .ava.online::after { display: none !important; }
/* значок синхронизации в шапке: когда всё сохранено — не показываем (хватит зелёной точки у имени);
   виден только пока идёт сохранение или нет сети */
.pbar .sync[data-s="live"], .pbar-r .sync[data-s="live"] { display: none !important; }

/* ===== «Что нового?» над клавиатурой ===== */
body.composing .cbar.inline { position: fixed !important; left: 0; right: 0; bottom: var(--kb, 0px) !important; top: auto !important; z-index: 76; margin: 0 !important;
  border-radius: 18px 18px 0 0 !important; padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px)) !important; background: var(--grid-base, var(--sheet)) !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,.35); max-width: none;}
body.composing.kb-open .cbar.inline { padding-bottom: 10px !important; } /* над клавиатурой вырез экрана не нужен */
body.composing .cbar.inline + * { margin-top: calc(var(--cbar-h, 120px) + 12px); } /* место под панелью сохраняется — лента не прыгает */
body.composing .cbar.inline textarea { max-height: 34vh; }
body.composing .tabbar, body.composing .nav-space { display: none !important; }

/* ===== камера: элементы строго по порядку — рамка 9:16, под ней фильтры, ниже кнопки; ничего не пересекается ===== */
.cam { --cam-top: calc(env(safe-area-inset-top, 0px) + 8px);
  --cam-h: min(calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 176px), calc(100vw * 16 / 9)); }
.cam-v { top: var(--cam-top) !important; height: var(--cam-h) !important; }
.cam-top { top: var(--cam-top) !important; }
.cam-zoom { top: calc(var(--cam-top) + var(--cam-h) / 2) !important; }
.cam-wait { top: var(--cam-top); bottom: auto; height: var(--cam-h); inset-inline: 0; }
.cam-fx { top: calc(var(--cam-top) + var(--cam-h) + 10px) !important; bottom: auto !important; height: 36px; align-items: center; }
.cam-bottom { top: auto !important; bottom: 0 !important; padding: 8px 28px max(16px, env(safe-area-inset-bottom)) !important; }
.cam-shot { width: 70px; height: 70px; }

/* ===== текст истории — красивые стили и аккуратные рамки ===== */
.st-big { width: 100%; max-width: 100%; box-sizing: border-box; padding: 28px 22px; text-wrap: balance; overflow-wrap: anywhere; letter-spacing: -.01em; }
.st-big.sz-lg { font-size: clamp(32px, 9vw, 44px); line-height: 1.12; }
.st-big.sz-md { font-size: clamp(24px, 6.6vw, 32px); line-height: 1.2; }
.st-big.sz-sm { font-size: clamp(18px, 5vw, 23px); line-height: 1.32; }
/* Классика — изящный курсив */
.stf0 { font-family: var(--f-quote, "Cormorant Garamond", Georgia, serif) !important; font-style: italic; font-weight: 600; text-shadow: 0 2px 14px rgba(0,0,0,.28); }
/* Модерн — плотный гротеск */
.stf1 { font-family: var(--f-body, system-ui, sans-serif) !important; font-style: normal; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
/* Неон — светящийся */
.stf2 { font-family: var(--f-body, system-ui, sans-serif) !important; font-style: normal; font-weight: 700; color: #fff !important;
  text-shadow: 0 0 6px #fff, 0 0 14px #ff6ad5, 0 0 28px #b56cff, 0 0 44px #6a8bff; }
/* Акцент — текст на аккуратной подложке, как маркер */
.stf3 { font-family: var(--f-body, system-ui, sans-serif) !important; font-style: normal; font-weight: 750; text-shadow: none; }
.st-body p.st-big.stf3, .st-new textarea.st-big.stf3 { color: #111 !important; text-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.st-body p.st-big.stf3 { width: fit-content; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px; background: rgba(255,255,255,.92); line-height: 1.7; }
.st-new textarea.st-big.stf3 { background: rgba(255,255,255,.88); border-radius: 18px; margin: 0 16px; width: calc(100% - 32px); }
.st-new textarea.st-big.stf3::placeholder { color: rgba(0,0,0,.45); }
/* подпись к фото — на мягкой плашке, читается на любом фото */
.st-cap { margin: 0 12px 14px; padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; font-size: 17px; line-height: 1.35; }
/* рамка истории: тонкая светлая обводка и мягкая тень */
.st-body { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.45); }
/* кнопка стиля «Aa» */
.st-font { font: 700 17px/1 var(--f-body, system-ui); color: #fff; }
/* в историях и камере сообщения — сверху, не закрывают кнопки съёмки и редактора */
body.st-open .toast { top: calc(env(safe-area-inset-top, 0px) + 56px) !important; bottom: auto !important; }
/* меню профиля: строка — просто подпись; нажимается только переключатель (или кнопка обновления) */
.hm-item:not(button) { cursor: default; }
.hm-item:not(button):active { background: none !important; }
.hm-refresh { border: 0; padding: 0; cursor: pointer; flex: none; }
button.hm-refresh { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pc, var(--pa)) 14%, transparent); color: var(--pc, var(--pa)); }
button.hm-refresh svg { width: 18px; height: 18px; margin: 0; }
.hm-item > .hm-swb { margin-left: auto; }

/* записи в ленте: кнопки «изменить» и «удалить» — удобные под палец; подтверждение удаления — заметная кнопка */
.pm { gap: 4px !important; }
.pm-ic { height: 40px !important; min-width: 40px !important; border-radius: 12px !important; }
.pm-ic svg { width: 18px !important; height: 18px !important; }
.pm-ic.arm { padding: 0 14px !important; font-size: 13.5px !important; gap: 6px; display: inline-flex !important; align-items: center; }

/* ===== лента как в соцсетях, в нашем стиле ===== */
.pact { display: flex; align-items: center; gap: 4px; }
.pact > button { min-width: 44px; height: 44px; border: 0; background: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--ink); cursor: pointer; }
.pact > button svg { width: 23px; height: 23px; }
.pact .pa-save { margin-left: auto; }
.pact .pa-save.on, .pact .pa-like.on { color: var(--pc, var(--pa)); }
.pact .pa-like.on { color: #ff375f; }
.pact > button:active svg { transform: scale(.88); transition: transform .08s; }
.post-t.clamp { position: relative; }
.post-more { border: 0; background: none; padding: 0; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.feed-more { display: flex; justify-content: center; gap: 6px; padding: 18px 0; }
.feed-more i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; animation: fm-dot 1s ease-in-out infinite; }
.feed-more i:nth-child(2) { animation-delay: .15s; } .feed-more i:nth-child(3) { animation-delay: .3s; }
@keyframes fm-dot { 50% { opacity: 1; transform: translateY(-3px); } }
.post img, .post-img img { decoding: async; }
/* «⋯» у своей записи */
.pm-more { width: 40px; height: 40px; color: var(--muted); }
.pm-more svg { width: 20px !important; height: 20px !important; }
/* шторка действий с записью */
.pm-sheet { display: grid; gap: 8px; padding: 14px 14px max(16px, env(safe-area-inset-bottom)) !important; animation: sheet-up .28s cubic-bezier(.22,.61,.36,1) both; }
.pm-sheet::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 50%, transparent); justify-self: center; margin-bottom: 4px; }
.pms-b { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--sheet-2); color: var(--ink); font: 600 16px/1 var(--f-body, inherit); cursor: pointer; text-align: left; }
.pms-b svg { width: 20px; height: 20px; }
.pms-b.danger { color: #ff453a; }
.pms-cancel { justify-content: center; background: none; color: var(--muted); }
.pms-q { display: grid; gap: 4px; text-align: center; padding: 6px 0 8px; }
.pms-q b { font-size: 17px; } .pms-q span { font-size: 13.5px; color: var(--muted); }
.pm-sheet .pms-b.danger:only-of-type { justify-content: center; }
/* правка записи: «Отмена · Изменение · Готово» сверху, поле — как сам текст */
.ed-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: -2px 0 10px; }
.ed-bar b { font-size: 15px; }
.ed-cancel, .ed-done { border: 0; background: none; min-height: 40px; padding: 0 4px; font: 600 15.5px/1 var(--f-body, inherit); cursor: pointer; }
.ed-cancel { justify-self: start; color: var(--muted); }
.ed-done { justify-self: end; color: var(--pc, var(--pa)); font-weight: 750; }
.edit-t { font-size: 16px !important; line-height: 1.45 !important; resize: none !important; overflow: hidden; transition: height .15s ease; }
/* панель «Что нового?» мягко выезжает к клавиатуре — без рывка */
body.composing .cbar.inline { animation: cb-up .24s cubic-bezier(.22,.61,.36,1) both !important; }
@keyframes cb-up { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.composing .cbar.inline { animation: none !important; } }
/* строка действий: ♥ 💬 ↗ рядом слева, 🔖 справа; аватары оценивших — после сердечка */
.pact > .pa-cm, .pact > .pa-share { margin-left: 0 !important; }
.pact > .pa-who { order: 1; margin: 0 4px 0 -4px; }
.pact > .pa-like { order: 0; } .pact > .pa-cm { order: 2; } .pact > .pa-share { order: 3; } .pact > .pa-save { order: 9; }

/* нижние блоки профиля раскладываются, когда до них долистали; высота запоминается — без прыжков в конце страницы */
.pbody > .awards2, .pbody > .card:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 560px; }

/* видео истории и запись: удерживаете кнопку — вокруг бежит красный круг (до 8 с) */
.st-body .st-vid { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cam-shot { position: relative; }
.cam-shot.rec { border-color: rgba(255,255,255,.35); transform: scale(1.12); transition: transform .2s; }
.cam-shot.rec i { background: #ff3b30; border-radius: 30%; transform: scale(.55); transition: transform .2s, border-radius .2s; }
.cam-shot.rec::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(#ff3b30 var(--rec-p, 0%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: rec-ring var(--rec-ms, 8s) linear forwards; }
@property --rec-p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes rec-ring { to { --rec-p: 100%; } }

/* администратор: «Действую за» — переключатель профиля */
.intro.adm { display: grid; gap: 10px; }
.adm-as { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-as button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 5px; border-radius: 99px; border: 1px solid var(--hair); background: var(--sheet-2); color: var(--ink); font-weight: 600; cursor: pointer; }
.adm-as button.on { border-color: var(--pc, var(--pa)); background: color-mix(in srgb, var(--pc, var(--pa)) 16%, var(--sheet-2)); }

/* дуа внутри «Благодаря Всевышнему…»: арабский — крупно и красиво, ниже чтение и перевод */
.dn-duas-in { margin-top: 12px; }
.dn-duas-in p { display: grid; gap: 6px; text-align: center; }
.dn-ar { font-family: "Amiri", "Noto Naskh Arabic", "Geeza Pro", serif; font-size: 21px; line-height: 1.9; font-weight: 600; color: var(--gold, #e7c27a); }

/* корзина в меню профиля */
.hm-trash { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 14px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.hm-trash > svg:first-child { width: 20px; height: 20px; color: var(--muted); }
.hm-trash > span { flex: 1; display: grid; gap: 2px; } .hm-trash small { font-size: 11.5px; color: var(--muted); }
.hm-trash > svg:last-child { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
.hm-trash[aria-expanded="true"] > svg:last-child { transform: rotate(90deg); }
.hm-trash-list { display: grid; gap: 8px; padding: 0 8px 8px; }
.tr-it { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: var(--sheet-2); }
.tr-it img, .tr-ic { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--sheet); }
.tr-ic svg { width: 18px; height: 18px; color: var(--muted); }
.tr-it span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tr-it b { font-size: 13.5px; } .tr-it small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-it em { font-size: 11px; font-style: normal; color: var(--muted); }
.tr-rs { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--pc, var(--pa)) 16%, transparent); color: var(--pc, var(--pa)); font-weight: 650; cursor: pointer; }
.tr-empty { margin: 0; padding: 8px 4px; font-size: 13px; color: var(--muted); }

/* ===== просмотр фото ===== */
.lightbox.pv { background: rgba(0,0,0,.92); touch-action: none; user-select: none; overflow: hidden; padding: 0 !important; }
.pv-img { max-width: 100vw; max-height: 100%; object-fit: contain; border-radius: 0 !important; will-change: transform; transform-origin: center; }
.pv-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: max(12px, env(safe-area-inset-top)) 14px 10px; background: linear-gradient(rgba(0,0,0,.45), transparent); }
.pv-n { color: rgba(255,255,255,.85); font: 600 14px/1 var(--f-num, system-ui); }
.pv-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.pv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; font-size: 30px; cursor: pointer; display: none; }
.pv-nav.l { left: 10px; } .pv-nav.r { right: 10px; }
@media (hover: hover) and (pointer: fine) { .pv-nav { display: block; } } /* стрелки — для мыши; на телефоне листают пальцем */

/* текст-наклейка на фото/видео истории: двигается пальцем, размер — двумя пальцами */
.st-body .st-drag, .st-body .st-placed { position: absolute; z-index: 3; margin: 0; max-width: 86%; width: max-content; touch-action: none; cursor: grab; transform-origin: center; }
.st-body .st-drag:active { cursor: grabbing; }
.st-body .st-drag { outline: 1.5px dashed rgba(255,255,255,.55); outline-offset: 4px; }
.st-txt svg { width: 18px; height: 18px; color: #fff; }
/* «Готово» при правке текста на фото — как в Instagram, справа сверху */
.st-done { min-height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: rgba(255,255,255,.18); color: #fff; font: 700 15px/1 inherit; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.st-done:active { transform: scale(.96); }
/* Единые окна. Ручка сверху — у всех шторок; на широком экране (компьютер, планшет боком) окно —
   аккуратная карточка по центру, а не полоса внизу: так удобнее мышью и не тянется на всю ширину. */
.rs-sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto -2px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 50%, transparent); }
.pm-sheet::before { margin: -4px auto 0; }
@media (min-width: 900px) and (min-height: 560px) {
  .rs-sheet, .hm-pop.hm-sheet { top: 50% !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: min(520px, 92vw) !important;
    max-height: min(80vh, 760px) !important; border-radius: 24px !important; padding-bottom: 18px !important; animation: win-pop .24s cubic-bezier(.22,.61,.36,1) both !important; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
  .rs-sheet::before, .hm-sheet::before { display: none; }
}
@keyframes win-pop { from { opacity: 0; scale: .96; } }
@media (prefers-reduced-motion: reduce) { .rs-sheet, .hm-pop.hm-sheet { animation-duration: .01s !important; } }

/* ===== Visual Rhythm & Typography System =====
   Одна шкала интервалов (4 · 8 · 12 · 16 · 24 · 32) и одна шкала текста для обоих языков.
   Новые и исправленные места берут размеры только отсюда; оптическая поправка — переменной --opt, а не случайным числом. */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --opt: 0px;
  --t-cap: 11.5px; --t-sm: 13px; --t-body: 15px; --t-lg: clamp(16px, 15px + .3vw, 18px); --t-h: clamp(18px, 16px + .6vw, 22px);
  --lh-tight: 1.2; --lh-body: 1.45; --lh-read: 1.55;
}
/* Текст строится сам: короткие заголовки — ровными строками, абзацы — без «висячих» слов,
   длинные ссылки и слова в записях людей не вылезают за карточку. Ручных переносов в переводах нет. */
h1, h2, h3, .rs-h b, .st-h b, .ed-bar b, .pm-sheet b, .hm-who b { text-wrap: balance; }
p, .muted, small, .hint { text-wrap: pretty; }
textarea { text-wrap: wrap; }
.post p, .post-text, .cm p, .st-cap, .st-big, .hm-who b, .pc-id b, .st-name { overflow-wrap: anywhere; }
/* Русский: переносы по словарю браузера только в длинном тексте записей; казахский длиннее — переносим по слогам там,
   где браузер знает язык, и в любом случае не даём словам выходить за край. */
:lang(ru) .post-text, :lang(ru) .cm p { hyphens: auto; -webkit-hyphens: auto; }
:lang(kk) .hm-item > span, :lang(kk) .rs-sheet, :lang(kk) .tabbar { overflow-wrap: break-word; }
/* Цифры, время и счётчики одной ширины — значения не «пляшут» при изменении */
time, .cnt, .big, .tile .n, .rs-time, .cam-zoom { font-variant-numeric: tabular-nums; }

/* Настройки: все строки на одной вертикали — иконка 20 px, затем текст; подпись — 2 px ниже названия */
.hm-sheet .hm-item, .hm-sheet .hm-trash { padding: 10px var(--s3) !important; gap: var(--s3); min-height: 52px; }
.hm-sheet .hm-item > svg:first-child, .hm-sheet .hm-trash > svg:first-child { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; color: var(--muted); }
.hm-sheet .hm-item > span, .hm-sheet .hm-trash > span { margin: 0; padding: 0; display: grid; gap: 2px; line-height: var(--lh-tight); }
.hm-sheet .hm-trash > span { font: 500 14.5px/1.2 var(--f-body, inherit); }
.hm-sheet .hm-item small, .hm-sheet .hm-trash small { font-size: var(--t-cap); line-height: 1.3; color: var(--muted); margin: 0; }
.hm-sheet .hm-swatches { padding: 0 var(--s3) var(--s2) calc(var(--s3) + 20px + var(--s3)); }
.hm-who + .hm-sep { display: none; } /* под шапкой была двойная линия */
/* Длинное слово в названии книги на узкой обложке переносится с дефисом, а не обрезается (полное название — в карточке книги) */
.book-t { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
/* Редактор по смыслу: правите текст — внизу только инструменты текста */
.st-ttools { gap: var(--s2);}
.st-colors { padding: 0 var(--s1);}
.st-col { background: var(--c);}
@media (max-width: 360px) { }
/* Редактор по смыслу: правите текст — внизу только инструменты текста */
.st-ttools { justify-content: center; gap: var(--s2); }
.st-colors { display: flex; align-items: center; gap: 6px; padding: 0 var(--s1); }
.st-col { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: var(--c); padding: 0; cursor: pointer; transition: transform .15s; }
.st-col.on { border-color: #fff; transform: scale(1.18); box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.st-tool svg { width: 22px; height: 22px; }
@media (max-width: 360px) { .st-col { width: 24px; height: 24px; } .st-ttools .st-tool { width: 40px; height: 40px; } }
/* Направляющие центра при перетаскивании текста на фото */
.st-new .st-body::before, .st-new .st-body::after { content: ""; position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .12s; background: rgba(255,255,255,.75); box-shadow: 0 0 0 .5px rgba(0,0,0,.25); }
.st-new .st-body::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.st-new .st-body::after { top: 50%; left: 0; right: 0; height: 1px; }
.st-new .st-body.snap-x::before, .st-new .st-body.snap-y::after { opacity: 1; }

/* ===== Меню разделов (v94) =====
   Телефон: компактная плавающая панель ~56 px, всегда на месте (не прячется при прокрутке; скрыта только в камере,
   историях и при наборе текста). Активный раздел — небольшая капсула за иконкой и заливка иконки, а не целый блок.
   Компьютер (≥1240 px): вертикальная панель слева — не отнимает высоту у содержимого. */
.tabbar.five { left: var(--s3) !important; right: var(--s3) !important; bottom: max(var(--s2), env(safe-area-inset-bottom)) !important; padding: var(--s1) !important; gap: 0 !important; border-radius: 22px !important; max-width: 520px; }
.tabbar.five button { min-height: 50px; padding: 5px 0 4px !important; gap: 2px !important; border-radius: 16px !important; align-content: center; }
.tabbar.five button svg { width: 22px !important; height: 22px !important; transform: none !important; transition: none !important; position: relative; z-index: 1; }
.tabbar.five button svg .f { fill: currentColor; stroke: none; opacity: 0; transition: opacity .2s ease; }
.tabbar.five button.on svg .f { opacity: .22; }
.tabbar.five button span { font-size: 10.5px !important; line-height: 1.15; font-weight: 600 !important; letter-spacing: 0 !important; position: relative; z-index: 1; max-width: 100%; overflow: visible !important; text-overflow: clip !important; }
.tabbar.five button.on span { font-weight: 700 !important; }
.tabbar.five button:active svg { transform: scale(.88) !important; transition: transform .08s ease !important; }
/* капсула только за иконкой; перемещается между разделами */
.tab-ind { top: var(--s1) !important; bottom: var(--s1) !important; left: var(--s1) !important; width: calc((100% - 2 * var(--s1)) / 5) !important; background: none !important; border-radius: 0 !important;
  transition: transform .32s cubic-bezier(.22,.61,.36,1) !important; }
.tab-ind::before { content: ""; position: absolute; left: 50%; top: 4px; width: 46px; height: 28px; margin-left: -23px; border-radius: 14px; background: color-mix(in srgb, var(--pc, var(--pa)) 18%, transparent); }
.nav-space { height: 74px !important; }
.pbody { padding-bottom: 84px; }
html[lang="kk"] .tabbar.five button span { font-size: 10px !important; letter-spacing: -.01em !important; }
@media (max-width: 350px) { .tabbar.five button span { font-size: 9.5px !important; } .tab-ind::before { width: 40px; margin-left: -20px; } }

@media (min-width: 1240px) and (min-height: 560px) {
  .tabbar.five { left: max(16px, calc((100vw - 1080px) / 2 - 104px)) !important; right: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%);
    width: 84px; max-width: none; margin: 0 !important; display: grid !important; grid-template-columns: 1fr !important; grid-auto-rows: 64px; padding: var(--s2) var(--s1) !important; border-radius: 26px !important; }
  .tabbar.five button { min-height: 64px; gap: 4px !important; }
  .tabbar.five button span { font-size: 11px !important; }
  .tab-ind { left: var(--s1) !important; right: var(--s1) !important; top: var(--s2) !important; bottom: auto !important; width: auto !important; height: 64px; transform: translateY(calc(var(--i) * 100%)) !important; }
  .tab-ind::before { top: 8px; }
  .nav-space { height: 24px !important; }
  .pbody { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { .tab-ind { transition: none !important; } }
/* Кадрирование: рамка по центру тёмного поля, сетка «третей», фото двигается за пальцем (только transform — плавно) */
.cr-h { justify-content: space-between; }
.cr-h b { flex: 1; text-align: center; }
.st-cancel { background: none; }
.cr-body { display: grid; place-items: center; background: #0b0b0d; touch-action: none; }
.cr-frame { position: relative; overflow: hidden; width: 0; height: 0; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 0 0 999px rgba(0,0,0,.55); cursor: grab; touch-action: none; }
.cr-frame:active { cursor: grabbing; }
.cr-img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cr-grid { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255,255,255,.35) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255,255,255,.35) 0 calc(66.66% + .5px), transparent 0),
  linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255,255,255,.35) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255,255,255,.35) 0 calc(66.66% + .5px), transparent 0); }
.cr-tools { justify-content: center; gap: var(--s2); }
.cr-ar { min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px; background: rgba(255,255,255,.12); color: #fff; font: 600 14px/1 inherit; cursor: pointer; }
.cr-ar.on { background: #fff; color: #111; }
.st-view.st-new.cropping { grid-template-rows: auto minmax(0, 1fr) auto; }
.st-new.cropping .cr-body { width: 100%; height: 100%; aspect-ratio: auto; max-width: none; }
.st-new.cropping .cr-body { overflow: hidden; }
/* Цели: поле растёт плавно, выбранный тег не меняет ширину (жирность — тенью, а не толщиной шрифта) */
#goal-text, #post-text { transition: height .12s ease-out; }
.tagrow .tchip.on { font-weight: inherit; text-shadow: 0 0 .5px currentColor, 0 0 .5px currentColor; }
@media (prefers-reduced-motion: reduce) { #goal-text, #post-text { transition: none; } }
/* Цели: у каждого срока свой цвет — иконка всегда цветная, выбранный срок подсвечен своим цветом.
   Оттенки не совпадают с цветами профилей (синий/розовый) и читаются в светлой и тёмной теме. */
:root { --gp-day: #d9932a; --gp-week: #1f9e8f; --gp-month: #7b61d9; --gp-year: #3f9a5a; --gp-5y: #d9603f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gp-day: #f2b84b; --gp-week: #3cc7b6; --gp-month: #a48cf5; --gp-year: #63c27f; --gp-5y: #ff8a66; } }
:root[data-theme="dark"] { --gp-day: #f2b84b; --gp-week: #3cc7b6; --gp-month: #a48cf5; --gp-year: #63c27f; --gp-5y: #ff8a66; }
.gper button svg { color: var(--gc) !important; opacity: .9 !important; }
.gper button.on { color: var(--ink) !important; background: color-mix(in srgb, var(--gc) 18%, var(--sheet)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 45%, transparent) !important; }
.gper button.on svg { opacity: 1 !important; }
.gper button i { background: var(--gc) !important; }
.goals .goal-ck { border-color: color-mix(in srgb, var(--gc-cur, var(--pc)) 70%, transparent); }
.goals .goal.done .goal-ck { background: var(--gc-cur, var(--pc)); border-color: var(--gc-cur, var(--pc)); }
/* Низ страницы: место под меню резервирует только .pbody/.nav-space — у body свой нижний отступ при меню не нужен
   (раньше они складывались, и во всех вкладках внизу было ~80 px пустоты). Панель ввода прилипает ровно над меню. */
body.has-nav { padding-bottom: 0; }
.pbody { padding-bottom: calc(max(var(--s2), env(safe-area-inset-bottom, 0px)) + 60px + var(--s4)); }
.nav-space { height: calc(max(var(--s2), env(safe-area-inset-bottom, 0px)) + 60px + var(--s3)) !important; }
.cbar { bottom: calc(max(var(--s2), env(safe-area-inset-bottom, 0px)) + 60px + var(--s1)); }
body.kb-open .pbody, body.composing .pbody { padding-bottom: var(--s4); }
@media (min-width: 1240px) and (min-height: 560px) { .pbody { padding-bottom: var(--s6); } .nav-space { height: var(--s5) !important; } .cbar { bottom: 0; } }
/* ===== Награды (v97): цвета сроков как в «Целях», спокойный итог без большой «чаши» поверх текста ===== */
.rw-sec .rw-h h2 svg { color: var(--gc); }
.rw-sec .ring-fg { stroke: var(--gc) !important; }
.rw-sec .rw-bar > span { background: var(--gc) !important; }
.rw-sec .rw:not(.earned):not(.got) .rw-i { color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, var(--card, var(--sheet-2))); }
.rw-open { border: 0 !important; min-height: 44px; color: var(--gc) !important; background: color-mix(in srgb, var(--gc) 10%, transparent) !important; border-radius: 14px; }
.rw-open:active { background: color-mix(in srgb, var(--gc) 18%, transparent) !important; }
.rw-del { min-width: 44px !important; min-height: 44px !important; display: grid; place-items: center; }
.rw-hero { gap: var(--s3) !important; padding: var(--s4) !important; }
.rw-hero-bg { display: none; }
.rw-hero-top { display: flex; align-items: center; gap: var(--s3); }
.rw-medal { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 25%, #ffe29a, #f2b84b 55%, #c98a1e); box-shadow: 0 6px 18px rgba(242,184,75,.28), inset 0 1px 0 rgba(255,255,255,.5); }
.rw-medal svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px rgba(120,70,0,.35)); }
.rw-hero h2 { font-size: var(--t-h) !important; line-height: var(--lh-tight); }
.rw-hero p { max-width: none !important; margin-top: 2px !important; }
/* «Потянуть, чтобы обновить»: надпись живёт в месте, которое открывается над страницей (страница едет вниз за пальцем) */
.ptr { width: auto !important; height: auto !important; margin-top: 0 !important; top: 0 !important; padding: 0 !important; border-radius: 0 !important; border: 0 !important; outline: 0 !important;
  background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; display: grid !important; justify-items: center; gap: 2px;
  z-index: 4 !important; /* под верхней полосой профиля (z 5): надпись выезжает из-под неё */ --k: 0; }
.ptr-s, .ptr-ar { display: none; }
.ptr-t { font-family: var(--f-quote, "Cormorant Garamond", serif); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.1; letter-spacing: .02em; white-space: nowrap;
  color: color-mix(in srgb, #f2c46b calc(35% + var(--k) * 65%), var(--muted)); clip-path: inset(-20% calc((1 - var(--k)) * 100%) -20% -2%); /* проявляется слева направо */ }
.ptr-v { font: 600 11px/1.2 var(--f-body, system-ui); letter-spacing: .08em; color: var(--muted); opacity: calc(var(--k) * .9); }
.ptr.ready .ptr-t { color: #f2c46b; text-shadow: 0 0 14px rgba(242,196,107,.5); }
.ptr.spin .ptr-t { clip-path: none; background: linear-gradient(100deg, #c99a3e 30%, #fff3cf 50%, #c99a3e 70%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ptr-shine 1.1s linear infinite; }
@keyframes ptr-shine { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@media (prefers-reduced-motion: reduce) { .ptr.spin .ptr-t { animation: none; -webkit-text-fill-color: #f2c46b; } }
/* Зоны нажатия не меньше ~44 px у маленьких кнопок (аудит на iPhone 16e…17 Pro Max и Android 360…412 px):
   невидимое расширение ::after, внешний вид и раскладка не меняются */
.back, .chal-tool, .hava, .hm-play, .pi-x { position: relative; }
.back::after, .rbell::after, .q-next::after, .chal-tool::after, .hava::after, .hm-play::after { content: ""; position: absolute; inset: -7px; }
.st-add::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.pi-x::after { content: ""; position: absolute; inset: -8px; }
.sw-c { position: relative; } .sw-c::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* между кружками 8 px — зоны не пересекаются */
/* Панель ввода над меню — один сплошной нижний блок: её фон продолжается за меню до края экрана,
   в щели между панелью и меню не просвечивает лента/строка сроков (видно в Safari на iPhone) */
.cbar:not(.inline) { box-shadow: 0 140px 0 140px var(--paper); } /* тень с разлётом начинается ровно от низа панели (без щели при любой её высоте) и закрывает всё до края экрана; высоту страницы не меняет */
@media (min-width: 1240px) and (min-height: 560px) { .cbar:not(.inline) { box-shadow: none; } }
/* Подложка под часами и вырезом (Dynamic Island): выше содержимого (карточки с z-index до 40 и с размытием рисовались поверх неё —
   текст заезжал под часы в Safari), ниже окон и просмотра фото (60+). Почти непрозрачная — надписи под ней не читаются. */
body::before { z-index: 45 !important; background: color-mix(in srgb, var(--paper) 86%, transparent) !important; }

/* Kadamo: значок «шаги» в обновлении свайпом. Ступени проявляются по --k (0…1), «готово» — все яркие,
   обновление — шарик шагает со ступени на ступень. Только transform/opacity; при «уменьшении движения» шарик стоит наверху. */
.ptr-ic { display: block; overflow: visible; margin-bottom: 2px; --qd: #2fb3c7; }
.ptr-ic rect { fill: var(--qd); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .15s, transform .15s; }
.ptr-ic rect:nth-child(1) { opacity: clamp(.18, calc(var(--k) * 3), 1); transform: scaleY(clamp(.4, calc(var(--k) * 3), 1)); }
.ptr-ic rect:nth-child(2) { opacity: clamp(.18, calc(var(--k) * 3 - 1), 1); transform: scaleY(clamp(.4, calc(var(--k) * 3 - 1), 1)); }
.ptr-ic rect:nth-child(3) { opacity: clamp(.18, calc(var(--k) * 3 - 2), 1); transform: scaleY(clamp(.4, calc(var(--k) * 3 - 2), 1)); }
.ptr-ic .ptr-dot { fill: #f2c46b; opacity: calc(var(--k)); }
.ptr.ready .ptr-ic { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--qd) 45%, transparent)); }
.ptr.spin .ptr-ic .ptr-dot { opacity: 1; animation: ptr-step 1.2s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes ptr-step { 0%, 12% { transform: translate(0, 0); } 30%, 45% { transform: translate(15px, -9px); } 63%, 85% { transform: translate(30px, -18px); } 100% { transform: translate(0, 0); opacity: .2; } }
.ptr:has(.ptr-ic) .ptr-t { font: 700 18px/1.1 var(--f-body, system-ui); font-style: normal; letter-spacing: .04em; clip-path: none; opacity: var(--k);
  color: color-mix(in srgb, var(--qd, #2fb3c7) calc(40% + var(--k) * 60%), var(--muted)); }
.ptr.spin:has(.ptr-ic) .ptr-t { animation: none; background: none; -webkit-text-fill-color: currentColor; color: #2fb3c7; }
@media (prefers-reduced-motion: reduce) { .ptr.spin .ptr-ic .ptr-dot { animation: none; transform: translate(30px, -18px); } }