/* Названия привычек набраны тем же DM Sans, что и весь интерфейс:
     отдельная загрузка Inter ради одного класса не окупалась. */
  .habit-name { letter-spacing: -0.011em; }

:root {
  --bg:#F7F5F0; --surface:#FFF; --surface2:#F0EDE6; --border:rgba(0,0,0,0.08);
  /* text3 — самые мелкие подписи (даты, дни недели, проценты).
     Прежний #A8A49E давал контраст ~2.3:1 при норме WCAG AA 4.5:1. */
  --text:#1A1814; --text2:#6B6760; --text3:#7D7871; --accent:#2D6A4F;
  --quote-bg:#2D6A4F;
  --serif:'Instrument Serif',Georgia,serif; --sans:'DM Sans',sans-serif;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.04);
}
[data-theme="dark"] {
  --bg:#111210; --surface:#1C1C1A; --surface2:#2A2A27; --border:rgba(255,255,255,0.10);
  --text:#F0EDE6; --text2:#C0BCB5; --text3:#A6A29B; --accent:#52B788;
  --quote-bg:#5B9BD5;
  --shadow:0 1px 3px rgba(0,0,0,0.3),0 4px 16px rgba(0,0,0,0.2);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100vh;background:var(--bg);font-family:var(--sans);color:var(--text);transition:background .3s,color .3s}
.app{max-width:680px;margin:0 auto;padding:24px 16px 80px}

/* ── AUTH SCREEN ── */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:40px 32px;width:100%;max-width:400px;box-shadow:0 8px 40px rgba(0,0,0,0.10);text-align:center}
.auth-logo{font-family:var(--serif);font-size:36px;font-style:italic;color:var(--text);margin-bottom:6px}
.auth-sub{font-size:13px;color:var(--text3);margin-bottom:32px}
.auth-tabs{display:flex;background:var(--surface2);border-radius:12px;padding:3px;margin-bottom:24px}
.auth-tab{flex:1;padding:8px;border:none;background:none;border-radius:9px;font-family:var(--sans);font-size:13px;color:var(--text2);cursor:pointer;transition:all .2s}
.auth-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.10);font-weight:500}
.auth-input{width:100%;padding:12px 16px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--sans);font-size:14px;margin-bottom:12px;transition:border .2s;outline:none}
.auth-input:focus{border-color:var(--accent)}
.auth-btn{width:100%;padding:13px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;transition:opacity .2s;margin-bottom:8px}
.auth-btn:hover{opacity:.88}
.auth-btn:disabled{opacity:.5;cursor:default}
.google-btn{width:100%;padding:12px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s}
.google-btn:hover{background:var(--surface2)}
.google-btn svg{flex-shrink:0}
.auth-msg{font-size:13px;margin-top:12px;min-height:20px;color:var(--text3)}
.auth-msg.success{color:var(--accent)}
.auth-msg.error{color:#dc2626}
.magic-sent{text-align:center;padding:8px 0}
.magic-sent .big-emoji{font-size:48px;margin-bottom:12px}
.magic-sent p{color:var(--text2);font-size:14px;line-height:1.6}
.magic-sent .email-highlight{font-weight:500;color:var(--text)}

/* ── MAIN APP HEADER ── */
.header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px}
.header-left h1{font-family:var(--serif);font-size:clamp(26px,5vw,36px);font-weight:400;font-style:italic;line-height:1.1}
.date-sub{font-size:12px;color:var(--text3);margin-top:4px;letter-spacing:.03em;text-transform:uppercase}
.sync-status{font-size:11px;color:var(--text3);margin-top:3px}#sync-status{position:absolute;top:100%;left:0;font-size:11px;color:var(--text3);margin-top:3px;opacity:0;transition:opacity 0.3s;pointer-events:none;white-space:nowrap}.header-left{position:relative}
.header-btns{display:flex;gap:8px;margin-top:4px;flex-shrink:0}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .2s;color:var(--text)}
.icon-btn:hover{background:var(--surface2)}
.user-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;cursor:pointer;border:1px solid var(--border);flex-shrink:0;margin-top:4px;position:relative}
.user-menu{position:absolute;top:48px;right:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);min-width:180px;z-index:100;overflow:hidden;display:none}
.user-menu.open{display:block}
.user-menu-item{padding:12px 16px;font-size:13px;cursor:pointer;color:var(--text);transition:background .15s;display:flex;align-items:center;gap:8px}
.user-menu-item:hover{background:var(--surface2)}
.user-menu-item.danger{color:#dc2626}
.user-email{padding:12px 16px;font-size:11px;color:var(--text3);border-bottom:1px solid var(--border)}

/* ── QUOTE ── */
.quote-card{background:var(--quote-bg);border-radius:var(--radius);padding:24px 20px;margin-bottom:24px;position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:90px}
.quote-card::before{content:'\201C';position:absolute;top:-10px;left:12px;font-family:var(--serif);font-size:80px;color:rgba(255,255,255,0.15);line-height:1}
.quote-text{font-family:var(--serif);font-size:15px;font-style:italic;color:rgba(255,255,255,.95);line-height:1.5;position:relative}
.quote-author{font-size:11px;color:rgba(255,255,255,.6);margin-top:6px;letter-spacing:.05em;text-transform:uppercase}


/* ── STATS ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 10px;text-align:center;box-shadow:var(--shadow)}
.stat-num{font-family:var(--serif);font-size:24px;color:var(--text)}
.stat-label{font-size:10px;color:var(--text3);margin-top:2px;letter-spacing:.04em;text-transform:uppercase}

/* ── NAV ── */
.nav{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.nav-title{font-family:var(--serif);font-size:18px;font-style:italic;flex:1;text-align:center;color:var(--text)}
.nav-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:16px;color:var(--text2);transition:background .2s;display:flex;align-items:center;justify-content:center}
.nav-btn:hover{background:var(--surface2)}
.view-toggle{display:flex;background:var(--surface2);border-radius:20px;padding:3px;gap:2px;margin-left:auto}
.view-btn{padding:5px 12px;border-radius:16px;border:none;background:none;font-size:12px;font-family:var(--sans);color:var(--text2);cursor:pointer;transition:all .2s}
.view-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ── WEEK ── */
.week-grid-header{margin-bottom:6px}
.day-num{font-size:13px;font-weight:500;color:var(--text)}
.day-name{font-size:10px;color:var(--text3);letter-spacing:.04em;text-transform:uppercase}
.habits-list{display:flex;flex-direction:column;gap:8px}
.habit-card-week{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 14px 14px;box-shadow:var(--shadow)}
/* Подложка иконки выводится из цвета привычки, а не задаётся отдельным
   светлым тоном: иначе в тёмной теме девять почти белых плашек становятся
   самым ярким пятном на экране. */
.habit-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
  background:color-mix(in srgb, var(--habit,#7F77DD) 15%, transparent)}
[data-theme="dark"] .habit-icon{background:color-mix(in srgb, var(--habit,#7F77DD) 26%, transparent)}
/* Запасной вариант для браузеров без color-mix — прежние светлые тона. */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .habit-icon{background:var(--habit-bg,#EEEDFE)}
  [data-theme="dark"] .habit-icon{background:var(--habit,#7F77DD);opacity:.85}
}
.habit-name{font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.habit-meta{font-size:11px;color:var(--text3);margin-top:1px}
.dot-btn{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:white;transition:all .15s}
.dot-btn.done{border-color:transparent;transform:scale(1.04)}
.dot-btn.future{opacity:.25;cursor:default;pointer-events:none}
.dot-btn.today-hl:not(.done){border-color:var(--accent)}
.dot-btn:not(.future):not(.done):hover{transform:scale(1.08);background:var(--surface)}
.progress-wrap{margin-top:10px;display:flex;align-items:center;gap:8px}
.progress-bar{flex:1;height:3px;background:var(--surface2);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;border-radius:2px;transition:width .4s ease}
.progress-pct{font-size:11px;color:var(--text3);min-width:28px;text-align:right}

/* ── MONTH ── */
.month-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-bottom:8px}
.month-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.month-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px;cursor:grab}
.month-scroll:active{cursor:grabbing}
.month-scroll::-webkit-scrollbar{height:6px}
.month-scroll::-webkit-scrollbar-track{background:var(--surface2);border-radius:3px}
.month-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.month-scroll::-webkit-scrollbar-thumb:hover{background:var(--text3)}
.month-days-wrap{display:inline-flex;gap:4px;min-width:max-content}
.month-day-col{display:flex;flex-direction:column;align-items:center;gap:3px;width:32px}
.month-day-num{font-size:10px;font-weight:500;color:var(--text3);line-height:1}
.month-day-dow{font-size:10px;color:var(--text3);opacity:.85;line-height:1;text-transform:uppercase}
.month-dot{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;transition:all .12s;flex-shrink:0;position:relative}
/* Точка остаётся маленькой визуально, а зона касания расширена до 36×44.
   По горизонтали ровно до соседа (шаг колонки 36px): больше нельзя,
   иначе зоны перекроются и промахов станет только больше. */
.month-dot::after{content:'';position:absolute;inset:-8px -4px;border-radius:12px}
.month-dot.done{border-color:transparent;transform:scale(1.06)}
.month-dot.future{opacity:.2;cursor:default;pointer-events:none}
.month-dot.today-hl:not(.done){border:1.5px solid var(--accent)}
.month-day-col.today-col .month-day-num{color:var(--accent);font-weight:700}
.month-day-col.today-col .month-day-dow{color:var(--accent);opacity:1}

/* ── EDIT MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:var(--radius);padding:24px;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h2{font-family:var(--serif);font-size:22px;font-style:italic;margin-bottom:16px;color:var(--text)}
.edit-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);transition:background .15s,opacity .15s;cursor:grab}.edit-row:active{cursor:grabbing}.edit-row.dragging{opacity:0.4}.edit-row.drop-target{background:var(--surface2);border-radius:6px}.drag-handle{color:var(--text3);font-size:18px;cursor:grab;user-select:none;padding:0 4px;letter-spacing:-3px;font-weight:700}.drag-handle:active{cursor:grabbing}
.edit-row:last-child{border-bottom:none}
.edit-icon-btn{font-size:20px;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.edit-icon-btn:hover{background:var(--border)}
.edit-input{flex:1;padding:7px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--sans);font-size:13px;outline:none}
.edit-input:focus{border-color:var(--accent)}
.del-btn{width:28px;height:28px;border-radius:6px;border:none;background:none;cursor:pointer;color:var(--text3);font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0}
.del-btn:hover{background:#fee2e2;color:#dc2626}
.add-row{display:flex;gap:8px;margin-top:12px;align-items:center}
.add-input{flex:1;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--sans);font-size:13px;outline:none}
.add-input:focus{border-color:var(--accent)}
.modal-footer{display:flex;gap:8px;margin-top:16px;justify-content:flex-end}
.btn{padding:9px 18px;border-radius:10px;border:none;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:500;transition:opacity .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-secondary{background:var(--surface2);color:var(--text)}
.btn:hover{opacity:.85}
.btn:disabled{opacity:.5;cursor:default}

/* ── EMOJI PICKER ── */
.emoji-picker{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.15);padding:10px;z-index:2000;display:none;width:220px;flex-wrap:wrap;gap:2px}
.emoji-picker.open{display:flex}
.ep-emoji{font-size:22px;width:36px;height:36px;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.ep-emoji:hover{background:var(--surface2)}

#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
@media(max-width:480px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stat-num{font-size:20px}
  .dot-btn{width:32px;height:32px}
  .auth-card{padding:28px 20px}
}

/* ═══════════════ ✨ DISNEY MAGIC ═══════════════ */
body.magic-cursor *, body.magic-cursor{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><defs><radialGradient id='sg' cx='50%25' cy='50%25' r='55%25'><stop offset='0%25' stop-color='%23FFF8DC'/><stop offset='40%25' stop-color='%23FFE680'/><stop offset='80%25' stop-color='%23FFCC33'/><stop offset='100%25' stop-color='%23E6A800'/></radialGradient><radialGradient id='glow' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23FFE680' stop-opacity='0.6'/><stop offset='100%25' stop-color='%23FFE680' stop-opacity='0'/></radialGradient></defs><circle cx='10' cy='10' r='10' fill='url(%23glow)'/><path d='M10 2 L11.8 7.7 L17.6 7.7 L12.9 11.1 L14.7 16.8 L10 13.3 L5.3 16.8 L7.1 11.1 L2.4 7.7 L8.2 7.7 Z' fill='url(%23sg)' stroke='%23B8860B' stroke-width='0.4' stroke-linejoin='round'/><circle cx='22' cy='6' r='1' fill='%23FFF4D0'/><circle cx='25' cy='14' r='0.8' fill='%23FFE680'/><circle cx='21' cy='22' r='1.2' fill='%23FFF4D0'/><circle cx='4' cy='24' r='0.8' fill='%23FFE680'/></svg>") 10 10, auto}
.spark{position:fixed;pointer-events:none;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#FFF4D0 0%,#FFD060 50%,transparent 70%);z-index:9999;animation:sparkFade 1s ease-out forwards}
@keyframes sparkFade{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,calc(-50% + 30px)) scale(0.2);opacity:0}}
/* magic-fade удалён */
.dot-btn:not(.future):not(.done):hover{box-shadow:0 0 12px rgba(255,208,96,0.6),0 0 24px rgba(255,208,96,0.3)}
.dot-btn.done:hover{box-shadow:0 0 16px currentColor,0 0 28px rgba(255,255,255,0.3);filter:brightness(1.1)}
.habit-card-week:hover,.month-card:hover{box-shadow:0 6px 24px rgba(127,119,221,0.18),0 2px 8px rgba(0,0,0,0.06);transform:translateY(-1px);transition:all .3s ease}
.stat:hover{box-shadow:0 4px 18px rgba(255,208,96,0.25);transform:translateY(-2px);transition:all .3s ease}
.app-title{position:relative;display:inline-block}
.app-title::after{content:'✨';position:absolute;top:-8px;right:-18px;font-size:14px;animation:titleSparkle 2.5s ease-in-out infinite;pointer-events:none}
@keyframes titleSparkle{0%,100%{transform:scale(1) rotate(0deg);opacity:0.6}50%{transform:scale(1.3) rotate(20deg);opacity:1}}
/* Тема ставится атрибутом data-theme на <html>; прежние правила ждали
   класс dark на <body>, который никто не назначал, — звёзды не показывались. */
[data-theme="dark"] .night-stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:1}
:root:not([data-theme="dark"]) .night-stars{display:none}
.night-star{position:absolute;background:#FFF;border-radius:50%;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0.15;transform:scale(0.8)}50%{opacity:0.9;transform:scale(1.2)}}

/* ── Уважение к настройке «уменьшить движение» ──
   Системная настройка ОС; её включают люди с вестибулярными нарушениями.
   Гасим декоративные анимации, оставляя интерфейс полностью рабочим. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .night-stars,.spark{display:none!important}
  #confetti-canvas{display:none!important}
}

/* ── Всплывающее уведомление (экспорт/импорт, ошибки) ── */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  background:var(--text);color:var(--bg);padding:11px 18px;border-radius:12px;
  font-size:13px;font-family:var(--sans);z-index:10001;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;max-width:calc(100vw - 32px);text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#B4342A;color:#fff}

/* ── Значок «есть несохранённые изменения» ── */
.pending-dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#D97706;margin-right:5px;vertical-align:middle}

/* ── Видимый фокус для клавиатуры ──
   Раньше не было ни одного правила: человек, идущий табом, не понимал,
   где находится. Мышь фокус не рисует — только :focus-visible. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.dot-btn:focus-visible,.month-dot:focus-visible,.year-dot:focus-visible{outline-offset:3px}

/* ── Баннер демо-режима ──
   Раньше был скрыт правилом display:none!important, и человек не знал,
   что его отметки никуда не сохранятся. */
.demo-banner{position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;background:var(--text);color:var(--bg);
  font-size:13px;font-family:var(--sans);text-align:center;
  box-shadow:0 -4px 20px rgba(0,0,0,.18)}
.demo-banner button{padding:6px 16px;border-radius:100px;border:none;cursor:pointer;
  background:var(--accent);color:#fff;font-family:var(--sans);font-size:13px;font-weight:500}
.demo-banner button:hover{opacity:.9}

/* ── Пустое состояние ── */
.empty{text-align:center;padding:56px 24px;color:var(--text2)}
.empty-emoji{font-size:44px;margin-bottom:14px}
.empty h3{font-family:var(--serif);font-size:23px;font-weight:400;font-style:italic;
  color:var(--text);margin-bottom:8px}
.empty p{font-size:14px;color:var(--text3);margin-bottom:20px;max-width:34ch;
  margin-left:auto;margin-right:auto}

/* ── Годовой вид: плитка по неделям ── */
.year-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 14px;box-shadow:var(--shadow);margin-bottom:8px}
.year-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.year-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.year-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,11px);
  gap:3px;min-width:max-content}
.year-dot{width:11px;height:11px;border-radius:3px;background:var(--surface2);
  border:none;padding:0;cursor:pointer;transition:transform .1s}
.year-dot.out{opacity:.25;cursor:default;pointer-events:none}
.year-dot.done{transform:scale(1.05)}
.year-dot:hover:not(.out){outline:1.5px solid var(--accent);outline-offset:1px}
.year-months{display:grid;grid-auto-flow:column;gap:3px;min-width:max-content;
  font-size:9.5px;color:var(--text3);margin-bottom:4px;letter-spacing:.02em}
.year-legend{display:flex;align-items:center;gap:6px;justify-content:flex-end;
  font-size:11px;color:var(--text3);margin-top:10px}
.year-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ── Частота и цель привычки в редакторе ── */
.edit-row{flex-wrap:wrap}
.edit-extra{display:flex;gap:8px;align-items:center;width:100%;
  padding:0 0 8px 30px;flex-wrap:wrap}
.edit-select,.edit-num{padding:5px 8px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);font-family:var(--sans);font-size:12px;outline:none}
.edit-select:focus,.edit-num:focus{border-color:var(--accent)}
.edit-num{width:64px}
.dow-pick{display:flex;gap:3px}
.dow-btn{width:26px;height:26px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text3);font-family:var(--sans);font-size:11px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.dow-btn.on{background:var(--accent);border-color:transparent;color:#fff;font-weight:500}
.hint{font-size:11.5px;color:var(--text3)}

/* ── День вне графика привычки ── */
.dot-btn.offplan:not(.done),.month-dot.offplan:not(.done){
  border-style:dashed;opacity:.55}

/* ── Частичное выполнение количественной привычки ── */
.dot-btn.partial,.month-dot.partial{position:relative;overflow:hidden}
.dot-btn.partial::before,.month-dot.partial::before{
  content:'';position:absolute;left:0;bottom:0;width:100%;
  height:var(--fill,0%);background:var(--habit,var(--accent));opacity:.55}
.dot-num{position:relative;font-size:10px;font-weight:600;color:var(--text2)}
.dot-btn.done .dot-num,.month-dot.done .dot-num{color:#fff}

/* ── Архив привычек ── */
.arch-head{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text3);margin:18px 0 8px}
.arch-row{display:flex;align-items:center;gap:8px;padding:7px 0;
  border-bottom:1px solid var(--border);font-size:13px;color:var(--text2)}
.arch-row:last-child{border-bottom:none}
.arch-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arch-btn{padding:4px 10px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);font-family:var(--sans);font-size:12px;cursor:pointer}
.arch-btn:hover{background:var(--border)}

/* ── Подпись периода и знаменатель в статистике ── */
.stats-period{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text3);margin-bottom:7px}
.stat-of{font-family:var(--sans);font-size:12px;color:var(--text3);
  letter-spacing:0;text-transform:none}

/* ── Кнопка отмены в уведомлении ── */
.toast .undo{margin-left:12px;background:none;border:1px solid currentColor;
  color:inherit;border-radius:8px;padding:3px 11px;font-family:var(--sans);
  font-size:12px;cursor:pointer;pointer-events:auto}
.toast.act{pointer-events:auto}

/* ═══════════════ РАЗДЕЛЫ И НИЖНЕЕ МЕНЮ ═══════════════ */

/* Скрытая панель именно hidden, а не display:none в стиле: так её
   содержимое недоступно и с клавиатуры, и программе чтения с экрана. */
.tab-panel[hidden]{display:none}

/* Нижнее меню. Пять пунктов — предел, при котором подпись остаётся
   читаемой на экране 360 px. safe-area — чтобы на iPhone панель не
   уезжала под системную полосу. */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:800;display:flex;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 2px;border:none;background:none;cursor:pointer;color:var(--text3);
  font-family:var(--sans);font-size:10px;letter-spacing:.02em;transition:color .2s}
.tab-btn .tab-ico{font-size:19px;line-height:1;filter:grayscale(1) opacity(.75);transition:filter .2s}
.tab-btn.active{color:var(--accent);font-weight:500}
.tab-btn.active .tab-ico{filter:none}
.tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px}

/* Место под меню, чтобы последний элемент списка не прятался за ним. */
.app{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.demo-banner{bottom:calc(64px + env(safe-area-inset-bottom))}

/* На большом экране панель во всю ширину растаскивает пять иконок по краям
   монитора — вместо панели получается редкая цепочка кнопок. Поэтому на
   десктопе меню превращается в плавающий островок по центру. */
@media (min-width:760px){
  .tabbar{left:50%;right:auto;transform:translateX(-50%);width:min(440px,92vw);
    bottom:18px;padding:8px 10px;border:1px solid var(--border);
    border-radius:100px;box-shadow:0 8px 30px rgba(0,0,0,.14)}
  .tab-btn{border-radius:100px}
  /* Баннер демо тоже становится островком: полоса во всю ширину монитора
     кричит громче самого приложения. */
  .demo-banner{bottom:96px;left:50%;right:auto;transform:translateX(-50%);
    width:min(680px,92vw);border-radius:14px;border:1px solid var(--border)}
  .app{padding-bottom:120px}
}

/* Совсем широкие экраны: колонка чуть шире. Правило для сетки целей лежит
   в самом низу файла — иначе его перебивает более позднее .goals-grid. */
@media (min-width:1100px){
  .app{max-width:860px}
}
.signature{text-align:center;margin-top:32px;padding-bottom:8px;font-size:12px;
  color:var(--text3);letter-spacing:0.04em}

.section-actions{display:flex;gap:8px;margin-top:20px}
.section-actions .btn{flex:1}
.back-btn{border:none;background:none;color:var(--text2);font-family:var(--sans);
  font-size:13px;cursor:pointer;padding:4px 0;margin-bottom:12px}
.back-btn:hover{color:var(--text)}

/* Пустое состояние раздела: без него новый раздел выглядит поломкой. */
.empty-section{text-align:center;padding:40px 20px;color:var(--text2)}
.empty-section .empty-emoji{font-size:40px;margin-bottom:12px}
.empty-section h3{font-family:var(--serif);font-size:20px;font-weight:400;
  font-style:italic;margin-bottom:6px;color:var(--text)}
.empty-section p{font-size:13px;line-height:1.6;max-width:320px;margin:0 auto}

/* ═══════════════ FOCUS: цели ═══════════════ */
.goals-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.goal-card{position:relative;border:none;border-radius:var(--radius);padding:16px 14px;
  min-height:132px;display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;text-align:left;font-family:var(--sans);color:#fff;
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;overflow:hidden}
.goal-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.16)}
.goal-card .goal-ico{font-size:22px;line-height:1}
.goal-card .goal-name{font-size:16px;font-weight:500;line-height:1.25;margin-top:auto}
.goal-card .goal-sub{font-size:11px;opacity:.85;margin-top:4px}
.goal-card .goal-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.28)}
.goal-card .goal-bar i{display:block;height:100%;background:rgba(255,255,255,.9)}

/* Карточка списка из ста пунктов — шире остальных, это отдельная сущность. */
.hundred-card{width:100%;border:none;border-radius:var(--radius);padding:18px;
  background:linear-gradient(135deg,#7F77DD,#4338CA);color:#fff;cursor:pointer;
  text-align:left;font-family:var(--sans);box-shadow:var(--shadow);display:block}
.hundred-card h3{font-family:var(--serif);font-size:22px;font-weight:400;font-style:italic}
.hundred-card .hundred-sub{font-size:12px;opacity:.85;margin-top:2px}
/* Сто точек — индикатор, а не сетка для нажатий. Двадцать в ряд и жёсткий
   потолок ширины: без него на телефоне карточка занимала весь экран, а на
   мониторе точки растягивались в кирпичи. */
.hundred-dots{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;
  margin-top:14px;max-width:380px}
.hundred-dots span{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.25)}
.hundred-dots span.done{background:#fff}

/* Задачи внутри цели и пункты списка ста */
.task-row{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;
  margin-bottom:8px;box-shadow:var(--shadow)}
.task-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);
  background:none;cursor:pointer;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:12px;color:#fff;transition:background .2s,border-color .2s}
.task-check[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.task-check:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.task-text{flex:1;font-size:14px;line-height:1.4;color:var(--text);word-break:break-word}
.task-row.done .task-text{color:var(--text3);text-decoration:line-through}
.task-del{border:none;background:none;color:var(--text3);cursor:pointer;font-size:15px;
  padding:2px 4px;line-height:1}
.task-del:hover{color:#dc2626}
.goal-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.goal-head .goal-ico{font-size:30px}
.goal-head h2{font-family:var(--serif);font-size:26px;font-weight:400;font-style:italic}
.goal-head .goal-sub{font-size:12px;color:var(--text3);margin-top:2px}

/* ═══════════════ MONEY ═══════════════ */
.money-line{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;
  margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer;width:100%;
  font-family:var(--sans);text-align:left}
.money-line .m-cat{font-size:19px;width:26px;text-align:center;flex-shrink:0}
.money-line .m-mid{flex:1;min-width:0}
.money-line .m-title{font-size:14px;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.money-line .m-note{font-size:11px;color:var(--text3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.money-line .m-sum{font-size:14px;font-weight:500;white-space:nowrap}
.m-sum.income{color:var(--accent)}
.m-sum.expense{color:var(--text)}
.money-day{font-size:11px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.04em;margin:16px 0 8px}
.btn-income{background:var(--accent);color:#fff;border:none}
.btn-expense{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.chart-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 14px;margin-top:16px;box-shadow:var(--shadow)}
.chart-card h3{font-size:12px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.04em;font-weight:500;margin-bottom:12px}
.cat-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cat-bar .cb-ico{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.cat-bar .cb-name{font-size:12px;color:var(--text2);width:88px;flex-shrink:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-bar .cb-track{flex:1;height:8px;border-radius:4px;background:var(--surface2);overflow:hidden}
/* display:block обязателен: span по умолчанию строчный, и высота с
   шириной у него просто игнорировались бы — полоса оставалась пустой. */
.cat-bar .cb-fill{display:block;height:100%;border-radius:4px;background:var(--accent)}
.cat-bar .cb-sum{font-size:12px;color:var(--text);width:78px;text-align:right;flex-shrink:0}
/* У бюджета в подписи две суммы, поэтому ей нужно больше места. */
.budget-bar .cb-sum{width:118px}
.budget-bar .cb-name{width:76px}
.months-chart{display:flex;align-items:flex-end;gap:8px;height:120px}
.months-chart .mc-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:3px;height:100%}
.months-chart .mc-bars{display:flex;gap:2px;align-items:flex-end;height:100%;width:100%;
  justify-content:center}
.months-chart .mc-bar{width:9px;border-radius:3px 3px 0 0;min-height:2px}
.months-chart .mc-in{background:var(--accent)}
.months-chart .mc-out{background:var(--text3)}
.months-chart .mc-lbl{font-size:10px;color:var(--text3)}
.chart-legend{display:flex;gap:14px;margin-top:12px;font-size:11px;color:var(--text3)}
.chart-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}

/* ═══════════════ CREDO и QUOTES ═══════════════ */
.credo-today{background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);margin-bottom:20px}
.credo-today .ct-label{font-size:11px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:8px}
.credo-today .ct-text{font-family:var(--serif);font-size:20px;line-height:1.4;
  font-style:italic;color:var(--text)}
.credo-row{display:flex;align-items:flex-start;gap:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 14px;
  margin-bottom:8px;box-shadow:var(--shadow)}
.credo-row .cr-text{flex:1;font-size:14px;line-height:1.5;color:var(--text);
  cursor:pointer;word-break:break-word}
.credo-row .cr-streak{font-size:11px;color:var(--text3);white-space:nowrap;margin-top:2px}
.credo-today .ct-week{font-size:12px;color:var(--text2);margin-top:10px}
/* Неделя принципа: семь точек с подписью дня. */
.cr-week{display:flex;gap:5px;margin-top:8px}
.cw-day{display:flex;flex-direction:column;align-items:center;gap:2px}
.cw-day i{width:14px;height:14px;border-radius:4px;background:var(--surface2);
  border:1px solid var(--border);display:block}
.cw-day.on i{background:var(--accent);border-color:var(--accent)}
.cw-day em{font-size:9px;color:var(--text3);font-style:normal}
.cr-habit{font-size:11px;color:var(--text3);margin-top:6px}
.cr-note{font-size:12px;color:var(--text2);margin-top:6px;cursor:pointer;
  white-space:pre-line;border-left:2px solid var(--border);padding-left:8px}
.cr-note-btn{border:none;background:none;color:var(--text3);font-family:var(--sans);
  font-size:11px;cursor:pointer;padding:4px 0;margin-top:4px}
.cr-note-btn:hover{color:var(--accent)}

/* ── Вид «Сегодня» ── */
.today-head{font-size:13px;color:var(--text2);margin-bottom:12px}
.today-head b{font-family:var(--serif);font-size:20px;color:var(--text);font-style:italic}
.today-sep{font-size:11px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.04em;margin:20px 0 10px}
.today-row{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:14px;
  margin-bottom:10px;box-shadow:var(--shadow);transition:opacity .2s}
.today-row.done{opacity:.6}
.today-row.done .habit-name{text-decoration:line-through;color:var(--text3)}
.today-row.offplan{opacity:.75;border-style:dashed}
.today-mid{flex:1;min-width:0}
.today-meta{font-size:11px;color:var(--text3);margin-top:3px}
/* Крупная зона нажатия: этим экраном пользуются на ходу и одной рукой. */
.today-check{width:44px;height:44px;border-radius:14px;flex-shrink:0;cursor:pointer;
  border:2px solid var(--border);background:var(--surface2);color:#fff;
  font-size:18px;display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,transform .1s}
.today-check:active{transform:scale(.94)}
.today-check[aria-checked="true"]{background:var(--habit,var(--accent));
  border-color:var(--habit,var(--accent))}
.today-check:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Деньги: инструменты, бюджеты, сравнение ── */
.money-tools{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;justify-content:center}
.link-btn{border:none;background:none;color:var(--text2);font-family:var(--sans);
  font-size:12px;cursor:pointer;padding:4px 2px;border-bottom:1px dashed var(--border)}
.link-btn:hover{color:var(--accent)}
.stat-delta{margin-top:4px}
.delta{font-size:10px;letter-spacing:.02em}
.delta.up{color:#c2410c}
.delta.down{color:var(--accent)}
.delta.same{color:var(--text3)}
.budget-bar.warn .cb-fill{background:#BA7517}
.budget-bar.over .cb-fill{background:#dc2626}
.budget-bar.over .cb-sum{color:#dc2626}
.budget-edit{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.budget-input{margin:0;width:120px;text-align:right}
.rule-row{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--border)}
.rule-row:last-of-type{border-bottom:none}
.rule-done{color:var(--accent);font-size:15px;padding:0 6px}
.quote-item{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px;margin-bottom:8px;box-shadow:var(--shadow)}
.quote-item .qi-text{font-family:var(--serif);font-size:16px;line-height:1.45;
  font-style:italic;color:var(--text);cursor:pointer}
.quote-item .qi-bottom{display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;gap:10px}
.quote-item .qi-author{font-size:11px;color:var(--text3)}
.fav-btn{border:none;background:none;cursor:pointer;font-size:15px;
  filter:grayscale(1) opacity(.5);transition:filter .2s;padding:2px}
.fav-btn.on{filter:none}

/* ═══════════════ ПОЛЯ В МОДАЛКАХ ═══════════════ */
.field-row{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.field-row .add-input{flex:1;margin:0}
.text-area{width:100%;resize:vertical;line-height:1.5;font-family:var(--sans);
  padding:12px 14px;margin-bottom:12px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface2);color:var(--text);font-size:14px;outline:none}
.text-area:focus{border-color:var(--accent)}
.amount-input{font-size:28px;font-family:var(--serif);text-align:center;padding:14px}
.color-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.color-dot{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.color-dot[aria-pressed="true"]{border-color:var(--text)}
.cat-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.cat-chip{border:1px solid var(--border);background:var(--surface2);color:var(--text2);
  border-radius:100px;padding:7px 12px;font-family:var(--sans);font-size:12px;cursor:pointer;
  display:flex;align-items:center;gap:5px;transition:all .2s}
.cat-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-danger{background:none;border:1px solid var(--border);color:#dc2626;margin-right:auto}

/* Многострочный текст остаётся многострочным. Пользователь набирает
   принцип или цитату в несколько строк, а HTML по умолчанию схлопывает
   переводы строк в пробелы — и запись теряет форму.
   pre-line: переносы уважаем, лишние пробелы схлопываем. */
.task-text, .cr-text, .qi-text, .ct-text, .m-note{white-space:pre-line}

.quote-actions{display:flex;gap:8px;margin-top:12px}
.quote-actions .btn{flex:1}
.quote-actions .btn:disabled{opacity:.55;cursor:default}

/* ── Сроки, привычки цели, категории списка ста ── */
.field-label{display:block;font-size:11px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.04em;margin:4px 0 6px}
.hint{font-size:12px;color:var(--text3);line-height:1.5;margin-bottom:12px}
.habit-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;
  max-height:150px;overflow-y:auto}
.due-ok{color:var(--accent)}
.due-bad{color:#dc2626}
.goal-habits-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.gh-pct{font-family:var(--serif);font-size:20px;color:var(--text)}
.gh-chip{font-size:11px;color:var(--text2);background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--habit,var(--accent));
  border-radius:8px;padding:5px 9px}
.task-mid{flex:1;min-width:0;cursor:pointer;display:block}
.task-meta{display:block;font-size:11px;color:var(--text3);margin-top:3px;white-space:pre-line}
.task-cat{font-size:15px;flex-shrink:0}
.filter-row{margin-bottom:14px}
.hundred-last{font-size:11px;opacity:.9;margin-top:10px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ── Архив целей ── */
.archive-block{margin-top:18px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.archive-block summary{font-size:12px;color:var(--text3);cursor:pointer;
  text-transform:uppercase;letter-spacing:.04em}
.arch-row{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--border)}
.arch-row:last-child{border-bottom:none}
.arch-ico{font-size:17px}
.arch-name{flex:1;font-size:14px;color:var(--text2);cursor:pointer}
.arch-sub{font-size:11px;color:var(--text3)}
.arch-btn{padding:5px 10px;font-size:12px}

/* Широкий экран: цели в три колонки. Правило стоит последним намеренно —
   выше по файлу его перебивало бы обычное .goals-grid с двумя колонками. */
@media (min-width:1100px){
  .goals-grid{grid-template-columns:repeat(3,1fr)}
}