/* ═══════════ «Компактный вид» — основной вид с 17.09; «Обычный» — по выбору (Аккаунт → Оформление, или ?skin=classic) ═══════════
   По референсам владелицы (17.09): всё — списками и строками, а не плакатами; иконка в кружке слева, заголовок 16,
   подпись 13 в одну строку, «›» справа; надзаголовки секций — мелкой капителью; карточки плоские с тонкой линией;
   навигация прижата к низу на всю ширину; настрой дня — 21px, без точки, в карточке, а не на полэкрана.
   Всё под html[data-skin=compact]; выключено — ни одно правило не действует. Палитра — токены Лунарио, только структура. */

html[data-skin=compact]{--ck-radius:20px;--ck-row:64px}
html[data-skin=compact] body.inner{font-size:15px;line-height:1.5}
html[data-skin=compact] body.inner .wrap{padding-top:calc(16px + env(safe-area-inset-top));padding-inline:16px;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
@media(min-width:600px){html[data-skin=compact] body.inner .wrap{padding-inline:24px}}

/* ── материал: плоская карточка, тонкая линия, без скоса, блика и тени ── */
html[data-skin=compact] body.inner :is(.wid,.card,.morning-summary,.later-row,.week-top,.day-card,.morning-picker,.wids.list-rows,.day-entry,.timeline-entry,.profile-summary,.wish-card,.tool-card,.rem-summary,#v-account .compact-links,#v-account .rows,#home-sky .moonline,#morning-more .moonline){
  background:var(--surface);border:1px solid var(--line);box-shadow:none;border-radius:var(--ck-radius)}
html[data-skin=compact] body.inner :is(.wid,.rem-summary,.acct,.wg-x,#home-sky .moonline,#morning-more .moonline,.timeline-entry,.profile-summary,.wish-card)::before,
html[data-skin=compact] body.inner :is(.wid,.rem-summary,.acct,.wg-x,#home-sky .moonline,#morning-more .moonline,.timeline-entry,.profile-summary,.wish-card)::after{content:none}
html[data-skin=compact] body.inner .wid:hover,html[data-skin=compact] body.inner .wid:active{transform:none;box-shadow:none}
html[data-theme=dark][data-skin=compact]{--surface:#151327;--line:rgba(245,242,234,.10);--selected:rgba(217,184,104,.14)}
html[data-theme=light][data-skin=compact]{--surface:#fff;--line:rgba(42,33,80,.10)}

/* ── типографика: семь ступеней ── */
html[data-skin=compact] body.inner h1{font-size:24px;line-height:1.2;letter-spacing:-.01em}
html[data-skin=compact] body.inner :is(#v-ask,#v-history,#v-about)>h1{font-size:24px;margin-right:52px}
html[data-skin=compact] body.inner :is(.feature-group,.account-group)>h2{font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html[data-skin=compact] body.inner :is(.feature-group,.account-group){margin-top:24px}
html[data-skin=compact] body.inner :is(.feature-group,.account-group)>.wids{margin-top:10px}
html[data-skin=compact] body.inner .section-caption{font-size:13px;margin-top:2px}
html[data-skin=compact] body.inner .eyebrow{font-size:11px;letter-spacing:.12em}

/* ── строки: иконка в кружке 40px слева, заголовок 16, подпись 13, «›» справа, 64px, разделители ── */
html[data-skin=compact] body.inner :is(.wids.list-rows,#v-account .compact-links,#v-account .rows,#morning-feed,#morning-more){display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--ck-radius);box-shadow:none}
html[data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#v-account .rowbtn,#morning-feed>.wid,#morning-feed>.moonline,#morning-more>.wid,#morning-more>.moonline){
  position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 12px;column-gap:14px;row-gap:1px;align-items:center;align-content:center;
  width:100%;min-height:var(--ck-row);height:auto;margin:0;padding:10px 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;text-align:left;color:var(--text)}
html[data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#v-account .rowbtn,#morning-feed>*,#morning-more>*):last-child{border-bottom:0}
/* кружок под иконкой — псевдоэлемент строки; сама иконка сверху в той же ячейке */
html[data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#morning-feed>.wid,#morning-more>.wid)::before{content:'';display:block;position:static;inset:auto;width:40px;height:40px;border-radius:50%;background:var(--selected);grid-column:1;grid-row:1/span 2;justify-self:center;mask:none;-webkit-mask:none;padding:0;z-index:0;opacity:1;animation:none;transform:none}
html[data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#morning-feed>.wid,#morning-more>.wid) .ico{grid-column:1;grid-row:1/span 2;justify-self:center;align-self:center;width:20px;height:20px;margin:0;z-index:1;background-color:var(--gold-2);filter:none}
html[data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#morning-feed>.wid,#morning-more>.wid) b{grid-column:2;grid-row:1;padding:0;font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
html[data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#morning-feed>.wid,#morning-more>.wid)>span:not(.dot):not(.destination-arrow){grid-column:2;grid-row:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.4;font-weight:500;color:var(--muted);padding:0}
html[data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#morning-feed>.wid,#morning-more>.wid)>span.destination-arrow{display:none}
html[data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#v-account .rowbtn,#morning-feed>*,#morning-more>*)::after{content:'›';display:block;position:static;inset:auto;grid-column:3;grid-row:1/span 2;align-self:center;justify-self:end;width:auto;height:auto;font-size:22px;line-height:1;color:var(--muted);opacity:.7;background:none;border-radius:0;transform:none;animation:none;pointer-events:none}
html[data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#v-account .rowbtn,#morning-feed>*,#morning-more>*):active{background:var(--selected)}
html[data-skin=compact] body.inner #v-account .rowbtn{font-size:16px}
/* плитка Луны — тоже строка: диск в кружке, фаза заголовком, лунный день и совет подписью */
html[data-skin=compact] body.inner :is(#morning-feed,#morning-more)>.moonline{gap:0}
html[data-skin=compact] body.inner :is(#morning-feed,#morning-more)>.moonline .moon-sm{grid-column:1;grid-row:1/span 2;width:40px;height:40px;flex:0 0 40px;justify-self:center}
html[data-skin=compact] body.inner :is(#morning-feed,#morning-more)>.moonline .grow{grid-column:2;grid-row:1/span 2;display:grid;gap:1px;min-width:0}
html[data-skin=compact] body.inner :is(#morning-feed,#morning-more)>.moonline .moon-title{display:none}
html[data-skin=compact] body.inner :is(#morning-feed,#morning-more)>.moonline #h-moon{display:block;font-size:16px;line-height:1.3;font-weight:600}
html[data-skin=compact] body.inner :is(#morning-feed,#morning-more)>.moonline :is(small,.lunar-advice){display:block;font-size:13px;line-height:1.4;color:var(--muted);font-weight:500}
html[data-skin=compact] body.inner :is(#morning-feed,#morning-more)>.moonline .lunar-advice{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-skin=compact] body.inner :is(#morning-feed,#morning-more)>.moonline .lunar-arrow{display:none}
html[data-skin=compact] body.inner #morning-more>.moonline #h-moon{display:block}
html[data-skin=compact] body.inner #morning-feed>:last-child:nth-child(odd){grid-column:auto}
@media(min-width:900px){html[data-skin=compact] body.inner :is(#morning-feed,#morning-more){grid-template-columns:1fr}}

/* ── «Сегодня»: шапка компактная, настрой — карточкой с маленькой луной, а не на полэкрана ── */
html[data-skin=compact] body.inner #v-home .compact-brand{font-size:26px;line-height:1.2}
html[data-skin=compact] body.inner #v-home .hdr{margin-bottom:4px}
html[data-skin=compact] body.inner #h-date{font-size:12px}
html[data-skin=compact] body.inner .home-intro{display:grid;grid-template-columns:minmax(0,1fr) 56px;grid-template-areas:"theme moon" "wish moon" "actions actions";gap:4px 14px;align-items:center;margin:12px 0 0;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--ck-radius)}
html[data-skin=compact] body.inner .home-intro .daily-statement{display:contents}
html[data-skin=compact] body.inner #h-theme{grid-area:theme;margin:0;font-size:11px;letter-spacing:.12em;color:var(--gold)}
html[data-skin=compact] body.inner .home-intro #h-wish{grid-area:wish;font-size:21px;line-height:1.35;font-weight:600;margin:0}
html[data-skin=compact] .home-moon{grid-area:moon;width:56px;height:56px;opacity:1;align-self:start}
html[data-skin=compact] body.inner .hero-actions{grid-area:actions;margin:6px 0 0;gap:2px 16px;justify-content:flex-start}
html[data-skin=compact] body.inner .hero-actions .text-action{min-height:32px;padding:4px 0;font-size:13px}
html[data-skin=compact] body.inner .hero-actions .ico{display:none}
html[data-skin=compact] body.inner .morning-summary{margin-top:10px;padding:12px 16px;grid-template-columns:minmax(0,1fr) auto}
html[data-skin=compact] body.inner .morning-summary .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html[data-skin=compact] body.inner .morning-summary b{font-size:15px}
html[data-skin=compact] body.inner .morning-summary .text-action{font-size:13px;color:var(--gold-2)}
html[data-skin=compact] body.inner .morning-picker{padding:16px 18px}
html[data-skin=compact] body.inner .morning-picker h2{font-size:17px}
html[data-skin=compact] body.inner .morning-picker .hint{font-size:13px;margin:4px 0 10px}
html[data-skin=compact] body.inner .later-row{padding:12px 16px}
html[data-skin=compact] body.inner .later-row .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html[data-skin=compact] body.inner .later-row b{font-size:15px}
html[data-skin=compact] body.inner .later-row .later-go{font-size:13px}
html[data-skin=compact] body.inner .home-later{gap:8px;margin-top:20px}

/* ── контролы: чипы 32px, кнопки 48px пилюлей, активный чип — заливка акцента с тёмным текстом (как в референсе) ── */
html[data-skin=compact] body.inner :is(.chip,.chips .chip,.chips.flow .chip,.timeline-filters .chip){min-height:32px;padding:6px 12px;font-size:13px;font-weight:500;border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:none}
html[data-skin=compact] body.inner :is(.chip.on,.chip[aria-pressed=true],.timeline-filters [aria-pressed=true],.entries-tabs [aria-selected=true]){background:var(--gold-2);border-color:var(--gold-2);color:#1c1430;font-weight:600}
html[data-theme=light][data-skin=compact] body.inner :is(.chip.on,.chip[aria-pressed=true],.timeline-filters [aria-pressed=true],.entries-tabs [aria-selected=true]){background:#d7cff0;border-color:#d7cff0;color:#1d1738}
html[data-skin=compact] body.inner .btn{min-height:48px;border-radius:999px;font-size:15px;font-weight:600;box-shadow:none}
html[data-skin=compact] body.inner .btn.sm{min-height:36px;font-size:13px}
html[data-skin=compact] body.inner .text-action{font-size:14px;min-height:36px}

/* ── Дневник: карточка дня плотнее ── */
html[data-skin=compact] body.inner .day-card{padding:16px 18px}
html[data-skin=compact] body.inner .day-card h2{font-size:19px;margin:2px 0 8px}
html[data-skin=compact] body.inner .day-card .field{margin:12px 0 0;gap:6px}
html[data-skin=compact] body.inner .day-card .field label{font-size:14px;line-height:1.35;font-weight:600}
html[data-skin=compact] body.inner .day-card textarea{min-height:44px;padding:10px 12px;font-size:15px;border-radius:14px}
html[data-skin=compact] body.inner .dc-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
html[data-skin=compact] body.inner .dc-block{margin-top:14px}
html[data-skin=compact] body.inner .day-entry{padding:4px 16px;margin-bottom:10px}
html[data-skin=compact] body.inner .timeline-day{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html[data-skin=compact] body.inner .question-entry .wid{display:grid;grid-template-columns:40px minmax(0,1fr) 12px;column-gap:14px;min-height:72px;padding:14px 16px;align-items:center}
html[data-skin=compact] body.inner .question-entry .wid .ico{grid-row:1/span 2;justify-self:center;width:22px;height:22px;margin:0}
html[data-skin=compact] body.inner .question-entry .wid b{grid-column:2;font-size:17px;padding:0}
html[data-skin=compact] body.inner .question-entry .wid>span:not(.destination-arrow){grid-column:2;font-size:13px;color:var(--muted)}

/* ── навигация: прижата к низу на всю ширину, скруглённый верх, иконки 24 и подписи 11 ── */
html[data-skin=compact] body.inner .app-nav{left:0;right:0;bottom:0;transform:none;width:100%;border-radius:24px 24px 0 0;border:1px solid var(--line);border-bottom:0;padding:8px 6px calc(6px + env(safe-area-inset-bottom));gap:0;background:var(--surface);box-shadow:0 -8px 30px -20px rgba(0,0,0,.5)}
html[data-skin=compact] body.inner .app-nav button{min-height:46px;gap:4px;font-size:11px;font-weight:500;color:var(--muted);border-radius:12px;padding:2px}
html[data-skin=compact] body.inner .app-nav .ico{width:24px;height:24px}
html[data-skin=compact] body.inner .app-nav button.on{color:var(--gold-2);font-weight:600;background:none;box-shadow:none}
html[data-skin=compact] body.inner .app-nav button.on .ico{background-color:var(--gold-2)}
html[data-skin=compact] body.inner .acct{width:38px;height:38px}
html[data-skin=compact] body.inner:has(:is(#v-ask,#v-history,#v-about).on) .section-acct{top:calc(16px + env(safe-area-inset-top));right:16px;width:38px;height:38px}
@media(min-width:600px){html[data-skin=compact] body.inner:has(:is(#v-ask,#v-history,#v-about).on) .section-acct{right:24px}}
html[data-skin=compact] body.inner #v-home #h-acct{margin-top:0}

/* ── Панели-виджеты (карта дня, руна, лунный день, разбор вопроса, «Моя неделя», настройки): та же сетка, что и экраны ── */
html[data-skin=compact] body.inner .wg{padding-inline:16px;font-size:15px;line-height:1.5}
html[data-skin=compact] body.inner .wg-head h2{font-size:20px;line-height:1.25;letter-spacing:-.015em}
html[data-skin=compact] body.inner .wg-head{padding-bottom:14px;margin-bottom:18px}
html[data-skin=compact] body.inner .wg-eb{font-size:11px;letter-spacing:.12em}
html[data-skin=compact] body.inner .wpane .card{padding:16px;border-radius:var(--ck-radius)}
html[data-skin=compact] body.inner :is(.wpane h3,.item b,.histhead b,.rem-lbl b){font-size:16px;line-height:1.35}
html[data-skin=compact] body.inner .wpane .practice-question{font-size:18px!important;line-height:1.4}
html[data-skin=compact] body.inner :is(.wpane p,.wpane li,.entry-text,.wpane .today){font-size:15px;line-height:1.55}
html[data-skin=compact] body.inner :is(.hint,.section-caption,.field label,.saved-state,.wpane small){font-size:13px;line-height:1.5}
html[data-skin=compact] body.inner .title-gold{font-size:20px}
html[data-skin=compact] body.inner .big{font-size:40px}
html[data-skin=compact] body.inner .kw{font-size:12px;letter-spacing:.1em}
html[data-skin=compact] body.inner .wpane textarea,html[data-skin=compact] body.inner .wpane input:not([type=checkbox]):not([type=radio]):not([type=time]){font-size:15px;padding:10px 12px;border-radius:14px}
html[data-skin=compact] body.inner .wpane .item{padding:12px 0}
html[data-skin=compact] body.inner .week-part{padding:16px}
html[data-skin=compact] body.inner .week-part h3{font-size:16px}
html[data-skin=compact] body.inner .week-quote p{font-size:14px}
html[data-skin=compact] body.inner .rem-summary{padding:12px 16px}
html[data-skin=compact] body.inner .theme-option{font-size:13px}
/* Аккаунт: профиль и группы */
html[data-skin=compact] body.inner .profile-summary{padding:16px}
html[data-skin=compact] body.inner .profile-summary h2{font-size:19px;margin-bottom:8px}
html[data-skin=compact] body.inner .profile-summary>p{font-size:13px}
html[data-skin=compact] body.inner .avatar{width:64px;height:64px;font-size:24px}
html[data-skin=compact] body.inner #v-account .compact-links .wid b{font-size:16px}
html[data-skin=compact] body.inner #v-account .compact-links .wid>span:not(.dot):not(.destination-arrow){font-size:13px}

/* ── Онбординг, вход и экран трёх напоминаний: та же типографика ── */
html[data-skin=compact] :is(#v-hello,#v-onb,#v-login,#v-rhythm) h1:not(.wordmark){font-size:26px;line-height:1.2}
html[data-skin=compact] :is(#v-hello,#v-onb,#v-login,#v-rhythm) :is(p,li,label){font-size:15px;line-height:1.5}
html[data-skin=compact] :is(#v-hello,#v-onb,#v-login,#v-rhythm) .hint{font-size:13px}
html[data-skin=compact] :is(#v-hello,#v-onb,#v-login,#v-rhythm) .btn{min-height:48px;font-size:15px;border-radius:999px}
html[data-skin=compact] :is(#v-hello,#v-onb,#v-login,#v-rhythm) .card{padding:16px;border-radius:var(--ck-radius);border:1px solid var(--line);box-shadow:none}
html[data-skin=compact] .rhythm-row{padding:10px 0}
html[data-skin=compact] .rhythm-row b{font-size:15px}
html[data-skin=compact] .rhythm-row small{font-size:13px}
html[data-skin=compact] .rhythm-row input[type=time]{padding:6px 8px;font-size:15px}
html[data-skin=compact] .onb-head p{font-size:15px}
html[data-skin=compact] :is(#v-hello,#v-onb,#v-login,#v-rhythm) .compact-brand{font-size:28px}

/* ── Навигация: «Свериться с собой» в одну строку — колонка шире, подписи не переносятся ── */
html[data-skin=compact] body.inner .app-nav{grid-template-columns:1fr 1fr 1.5fr 1fr}
@media(min-width:360px){html[data-skin=compact] body.inner .app-nav button{white-space:nowrap}}

/* ── Пустая лента Дневника — подсказка строкой, не карточка ── */
html[data-skin=compact] body.inner #timeline-list .timeline-empty,html[data-skin=compact] body.inner :is(#timeline-list) .timeline-empty::before{background:none;border:0;box-shadow:none;padding:6px 4px;margin:0;font-size:14px;line-height:1.5;color:var(--muted);content:none}   /* специфичность с ID — как у блока стекла, позже в каскаде */

/* ── Светлая тема: активный чип — мягкое золото (как голубой в референсе, но в палитре Лунарио) ── */
html[data-theme=light][data-skin=compact] body.inner :is(.chip.on,.chip[aria-pressed=true],.timeline-filters [aria-pressed=true],.entries-tabs [aria-selected=true]){background:#efe0b3;border-color:#e4cf95;color:#2a2150}
html[data-theme=light][data-skin=compact]{--selected:rgba(217,184,104,.22)}
html[data-theme=light][data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#morning-feed>.wid,#morning-more>.wid)::before{background:#f4ecd6}
html[data-theme=light][data-skin=compact] body.inner :is(.list-rows .wid,#v-account .compact-links .wid,#morning-feed>.wid,#morning-more>.wid) .ico{background-color:#8a6d2a}
html[data-theme=light][data-skin=compact] body.inner .app-nav button.on{color:#2a2150}
/* строки «Управление аккаунтом» — с тем же кружком под иконкой */
html[data-skin=compact] body.inner #v-account .rowbtn::before{content:'';display:block;position:static;inset:auto;width:40px;height:40px;border-radius:50%;background:var(--selected);grid-column:1;grid-row:1/span 2;justify-self:center;mask:none;-webkit-mask:none;padding:0;z-index:0;opacity:1;animation:none;transform:none}
html[data-skin=compact] body.inner #v-account .rowbtn .ico{grid-column:1;grid-row:1/span 2;justify-self:center;align-self:center;width:20px;height:20px;margin:0;z-index:1}
html[data-skin=compact] body.inner #v-account .rowbtn.warn::before{background:rgba(120,90,160,.14)}