/* CYBERCORE — повна система стилів під Night City */

:root {
  --cyber-cyan-500: #00f0ff;
  --cyber-cyan-400: #54d1db;
  --cyber-magenta-500: #ff2a6d;
  --cyber-yellow-500: #fcee0a;
  --cyber-green-500: #05ffa1;
  --cyber-void-500: #0d0e14;
  --cyber-void-400: #12141d;
  --cyber-void-300: #181a25;
  --cyber-chrome-100: #f0f1f5;
  --cyber-chrome-300: #b2b7c7;
  --cyber-chrome-500: #747d99;

  --color-bg-primary: var(--cyber-void-500);
  --color-bg-secondary: var(--cyber-void-400);
  --color-bg-tertiary: var(--cyber-void-300);
  --color-text-primary: var(--cyber-chrome-100);
  --color-text-secondary: var(--cyber-chrome-300);
  --color-text-muted: var(--cyber-chrome-500);
  --color-border-default: #2a2d3a;

  --glow-text-cyan: 0 0 10px var(--cyber-cyan-500), 0 0 20px rgba(0,240,255,.6);

  --font-display: 'Rajdhani', 'Orbitron', sans-serif;
  --font-body: 'Exo 2', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --space-xs: .75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xs: .5rem; --space-3xs: .25rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
body { font-family: var(--font-body); color: var(--color-text-primary); background: var(--color-bg-primary); line-height: 1.6; }

body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: .04;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.3) 2px, rgba(0,0,0,.3) 4px);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }

.cyber-heading { position: relative; color: var(--cyber-cyan-500); text-shadow: var(--glow-text-cyan); display: inline-block; }
.cyber-heading::before, .cyber-heading::after { content: attr(data-text); position: absolute; left:0; top:0; width:100%; height:100%; opacity:.8; }
.cyber-heading::before { color: var(--cyber-magenta-500); z-index:-1; animation: glitch-1 3s infinite linear alternate-reverse; }
.cyber-heading::after { color: var(--cyber-cyan-400); z-index:-1; animation: glitch-2 2s infinite linear alternate; }
@keyframes glitch-1 { 0%,100%{clip-path:inset(0 0 95% 0);} 50%{clip-path:inset(20% 0 55% 0);} }
@keyframes glitch-2 { 0%,100%{clip-path:inset(95% 0 0 0);} 50%{clip-path:inset(55% 0 20% 0);} }

code { font-family: var(--font-mono); padding:.125em .375em; background: var(--color-bg-tertiary); border:1px solid var(--color-border-default); color: var(--cyber-cyan-400); }

.cyber-nav { position: relative; display:flex; align-items:center; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); background: var(--color-bg-secondary); border-bottom:1px solid var(--color-border-default); position: sticky; top:0; z-index:99990; backdrop-filter: blur(6px); }
.cyber-nav__brand { font-family:'Orbitron',var(--font-display); font-size:1.3rem; font-weight:800; color: var(--cyber-cyan-500); text-transform:uppercase; letter-spacing:.15em; text-decoration:none; text-shadow: var(--glow-text-cyan); }
.cyber-nav__links { display:flex; gap:.5rem; list-style:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.cyber-nav__link { padding: var(--space-xs) var(--space-sm); font-family: var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color: var(--color-text-secondary); text-decoration:none; }
.cyber-nav__link:hover, .cyber-nav__link--active { color: var(--cyber-cyan-500); }

.cyber-nav__burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; }
.cyber-nav__burger span { display:block; width:100%; height:2px; background: var(--cyber-cyan-500); box-shadow: 0 0 6px var(--cyber-cyan-500); transition:.3s; }
.cyber-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cyber-nav__burger.is-open span:nth-child(2) { opacity:0; }
.cyber-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .cyber-nav { justify-content:space-between; }
  .cyber-nav__burger { display:flex; order:2; }
  .cyber-status { order:1; }
  .cyber-nav__links {
    position:absolute; top:100%; left:0; right:0; transform:none;
    flex-direction:column; gap:0; background: var(--color-bg-secondary);
    border-bottom:1px solid var(--color-border-default);
    max-height:0; overflow:hidden; transition:.3s;
  }
  .cyber-nav__links.is-open { max-height:400px; }
  .cyber-nav__link { display:block; padding: var(--space-sm) var(--space-lg); border-bottom:1px solid var(--color-border-default); }
}

.cyber-status { display:flex; align-items:center; gap:.4rem; padding:.2rem .6rem; background: rgba(5,255,161,.15); border:1px solid var(--cyber-green-500); font-family: var(--font-mono); font-size:.75rem; color: var(--cyber-green-500); }
.cyber-status__dot { width:8px; height:8px; background: var(--cyber-green-500); border-radius:50%; animation: pulse-glow 2s infinite; }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 0 0 var(--cyber-green-500);} 50%{box-shadow:0 0 10px 3px var(--cyber-green-500);} }

.cyber-hero { position: static !important; text-align:center; padding: var(--space-xl) var(--space-md); }
.cyber-hero__subtitle { font-family: var(--font-mono); font-size:.85rem; color: var(--color-text-muted); text-transform:uppercase; letter-spacing:.2em; margin-bottom: var(--space-sm); }
.cyber-hero__title { font-size: 3rem; margin-bottom: var(--space-md); }
.cyber-hero__description { max-width:600px; margin:0 auto; color: var(--color-text-secondary); }

.cyber-container { max-width:1200px; margin:0 auto; padding:0 var(--space-md); }
.cyber-section { padding: var(--space-xl) 0; }
.cyber-section__header { margin-bottom: var(--space-lg); }
.cyber-section__title { font-size:1.6rem; color: var(--cyber-cyan-500); margin-bottom: var(--space-xs); }
.cyber-section__subtitle { font-family: var(--font-mono); font-size:.85rem; color: var(--color-text-muted); }

.cyber-grid { display:grid; gap: var(--space-md); }
.cyber-grid--2 { grid-template-columns: repeat(2,1fr); }
.cyber-grid--3 { grid-template-columns: repeat(3,1fr); }
.cyber-grid--4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:900px){ .cyber-grid--2,.cyber-grid--3,.cyber-grid--4{grid-template-columns:1fr;} }

.cyber-card { position:relative; z-index:1; background: var(--color-bg-secondary); border:1px solid var(--color-border-default); padding: var(--space-md); }
.cyber-card--interactive { transition:.3s; }
.cyber-card--interactive:hover { transform: translateY(-2px); box-shadow: 0 0 25px rgba(0,240,255,.25); }
.cyber-card__header { display:flex; align-items:center; gap: var(--space-sm); margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom:1px solid var(--color-border-default); }
.cyber-card__title { font-family: var(--font-display); color: var(--cyber-cyan-500); text-transform:uppercase; letter-spacing:.05em; }
.cyber-card__badge { margin-left:auto; padding:.2rem .5rem; background: var(--cyber-cyan-500); color:#000; font-family: var(--font-mono); font-size:.7rem; font-weight:700; }
.cyber-card--magenta { border-color: var(--cyber-magenta-500); }
.cyber-card--magenta .cyber-card__title { color: var(--cyber-magenta-500); }
.cyber-card--magenta .cyber-card__badge { background: var(--cyber-magenta-500); }
.cyber-card--yellow { border-color: var(--cyber-yellow-500); }
.cyber-card--yellow .cyber-card__title { color: var(--cyber-yellow-500); }
.cyber-card--yellow .cyber-card__badge { background: var(--cyber-yellow-500); }
.cyber-card--green { border-color: var(--cyber-green-500); }
.cyber-card--green .cyber-card__title { color: var(--cyber-green-500); }
.cyber-card--green .cyber-card__badge { background: var(--cyber-green-500); }

.cyber-stat { text-align:center; }
.cyber-stat__value { font-family:'Orbitron',var(--font-display); font-size:2rem; font-weight:700; color: var(--cyber-cyan-500); text-shadow: var(--glow-text-cyan); }
.cyber-stat__label { font-family: var(--font-display); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color: var(--color-text-muted); margin-top: var(--space-2xs); }

.cyber-progress { height:10px; background: var(--color-bg-tertiary); border:1px solid var(--color-border-default); overflow:hidden; }
.cyber-progress__bar { height:100%; width: var(--progress-value,0%); background: linear-gradient(90deg,var(--cyber-cyan-500),#9df); box-shadow:0 0 15px var(--cyber-cyan-500); }
.cyber-progress--magenta .cyber-progress__bar { background: linear-gradient(90deg,var(--cyber-magenta-500),#f9c); box-shadow:0 0 15px var(--cyber-magenta-500); }
.cyber-progress--yellow .cyber-progress__bar { background: linear-gradient(90deg,var(--cyber-yellow-500),#ffd); box-shadow:0 0 15px var(--cyber-yellow-500); }
.cyber-progress--green .cyber-progress__bar { background: linear-gradient(90deg,var(--cyber-green-500),#afd); box-shadow:0 0 15px var(--cyber-green-500); }

.cyber-badge { display:inline-flex; padding:.2rem .5rem; font-family: var(--font-display); font-size:.7rem; font-weight:700; text-transform:uppercase; background: rgba(0,240,255,.2); color: var(--cyber-cyan-500); border:1px solid var(--cyber-cyan-500); }
.cyber-badge--magenta { background: rgba(255,42,109,.2); color: var(--cyber-magenta-500); border-color: var(--cyber-magenta-500); }
.cyber-badge--yellow { background: rgba(252,238,10,.2); color: var(--cyber-yellow-500); border-color: var(--cyber-yellow-500); }
.cyber-badge--green { background: rgba(5,255,161,.2); color: var(--cyber-green-500); border-color: var(--cyber-green-500); }

.cyber-table { width:100%; border-collapse:collapse; font-family: var(--font-mono); font-size:.9rem; }
.cyber-table th { padding: var(--space-sm); font-family: var(--font-display); color: var(--cyber-cyan-500); text-align:left; border-bottom:2px solid var(--cyber-cyan-500); text-transform:uppercase; }
.cyber-table td { padding: var(--space-sm); border-bottom:1px solid var(--color-border-default); }
.cyber-table tbody tr:hover { background: rgba(0,240,255,.05); }

.cyber-divider { height:1px; background: linear-gradient(90deg,transparent,var(--cyber-cyan-500) 20%,var(--cyber-cyan-500) 80%,transparent); margin: var(--space-lg) 0; }

.cyber-mt-lg { margin-top: var(--space-lg); }
.cyber-text-center { text-align:center; }

.finance-card-slot { min-width:0; }
.finance-card-journal { animation: finance-pop .25s ease; }
@keyframes finance-pop { from { opacity:0; transform:scale(.96);} to { opacity:1; transform:scale(1);} }

/* Фінанси — розгортання карток на весь екран при скролі */
#finance-expand-track { position:relative; height:200vh; margin-top: var(--space-lg); }
#finance-expand-sticky { position:sticky; top:70px; z-index:2; max-width:none; }
#finance-cards-grid { grid-auto-rows: minmax(0, auto); }
/* П'ята картка «Останні операції» — весь рядок під чотирма картками */
#finance-slot-list { --hud-c: var(--cyber-cyan-500); }
#finance-slot-list > .cyber-card.cyber-card { justify-content:flex-start; align-items:stretch; overflow-y:auto !important; border-radius:18px; }
#finance-cards-grid { grid-template-rows: minmax(0, 1fr) minmax(0, 1.5fr); }
/* Прибрані заголовки секцій (// Віджети, // Планувальник тощо). У Фінансах залишається рядок тільки з кнопкою «Обнулити» */
.cyber-section__title { display: none !important; }
.cyber-section__header:not(:has(.finance-reset-btn)) { display: none !important; }
#finance-form-toggle .finance-reset-btn { position:absolute; right: var(--space-md); top:50%; transform: translateY(-50%); margin:0; padding:.45rem .9rem; font-size:.72rem; text-align:center; }
#finance-cards-grid { grid-auto-rows: minmax(0, 1fr); }
.finance-card-slot { display:flex; flex-direction:column; min-height:0; }
.finance-card-slot > .cyber-card { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.finance-card-slot > .finance-card-journal { display:block; overflow-y:auto; }
#finance-cards-grid .cyber-stat { transform: scale(var(--fin-scale, 1)); }
#finance-cards-grid.finance-grid--full .finance-journal-list { max-height:none !important; }

/* Фінанси — блок «Останні транзакції» у вигляді котирувань */
.quotes--up { --q-color:#05ffa1; --q-tint:rgba(5,255,161,.16); }
.quotes--down { --q-color:#ff2a6d; --q-tint:rgba(255,42,109,.16); }
.quotes-head { display:flex; align-items:center; justify-content:space-between; gap: var(--space-md); flex-wrap:wrap; padding: var(--space-xs) var(--space-xs) var(--space-md); }
.quotes-head__symbol { font-family: var(--font-mono); font-size:.7rem; letter-spacing:.15em; color: var(--color-text-muted); }
.quotes-head__price { font-family:'Orbitron', var(--font-display); font-size:2rem; font-weight:700; color: var(--color-text-primary); line-height:1.2; }
.quotes-head__change { font-family: var(--font-mono); font-size:.85rem; font-weight:700; color: var(--q-color); }
.quotes-spark { flex:1; min-width:160px; max-width:420px; height:56px; }
.quotes-spark__line { fill:none; stroke: var(--q-color); stroke-width:2; vector-effect: non-scaling-stroke; }
.quotes-spark__area { fill: var(--q-tint); stroke:none; }
.quotes-cols, .quotes-row { display:grid; grid-template-columns: minmax(0,2.2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr); gap: var(--space-sm); align-items:center; padding: .55rem var(--space-xs); }
.quotes-cols { font-family: var(--font-mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color: var(--color-text-muted); border-bottom:1px solid var(--color-border-default); }
.quotes-cols > :not(:first-child), .quotes-row > :not(:first-child) { text-align:right; }
.quotes-row { border-bottom:1px solid rgba(42,45,58,.6); background: linear-gradient(90deg, var(--q-tint) var(--q-w, 0%), transparent var(--q-w, 0%)); transition: box-shadow .2s; }
.quotes-row:hover { box-shadow: inset 0 0 0 1px var(--q-color); }
.quotes-row__name { display:flex; align-items:center; gap: var(--space-xs); min-width:0; }
.quotes-arrow { flex:none; width:1.6rem; height:1.6rem; display:inline-flex; align-items:center; justify-content:center; font-size:.65rem; color: var(--q-color); border:1px solid var(--q-color); background: var(--q-tint); }
.quotes-row__title { display:block; font-family: var(--font-display); font-weight:600; letter-spacing:.03em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quotes-row__date { display:block; font-family: var(--font-mono); font-size:.65rem; color: var(--color-text-muted); }
.quotes-row__price { font-family: var(--font-mono); font-weight:700; font-size:.95rem; color: var(--color-text-primary); }
.quotes-row__change, .quotes-row__pct { font-family: var(--font-mono); font-weight:700; font-size:.85rem; color: var(--q-color); }
@media (max-width:600px) {
  .quotes-cols, .quotes-row { grid-template-columns: minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr); }
  .quotes-cols > :nth-child(4), .quotes-row__pct { display:none; }
  .quotes-head__price { font-size:1.6rem; }
}

/* Фінанси — кнопка зі стрічкою котирувань (згорнутий стан блоку) */
.quotes-toggle { display:flex; align-items:stretch; width:100%; margin-top: var(--space-lg); padding:0; overflow:hidden; cursor:pointer; text-align:left; background: var(--color-bg-secondary); border:1px solid var(--cyber-cyan-500); color: var(--cyber-cyan-500); font-family: var(--font-display); transition: box-shadow .3s; }
.quotes-toggle:hover { box-shadow: 0 0 25px rgba(0,240,255,.25); }
.quotes-toggle__label { flex:none; display:flex; align-items:center; gap:.6rem; padding:.85rem var(--space-md); font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; background: rgba(0,240,255,.12); border-right:1px solid var(--cyber-cyan-500); }
.quotes-toggle__live { width:8px; height:8px; border-radius:50%; background: var(--cyber-green-500); animation: pulse-glow 2s infinite; }
.quotes-ticker { position:relative; flex:1; min-width:0; display:flex; align-items:center; overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.quotes-ticker__track { display:flex; width:max-content; animation: quotes-scroll 40s linear infinite; }
.quotes-ticker__half { display:flex; flex:none; }
@keyframes quotes-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.quotes-tick { flex:none; display:inline-flex; align-items:baseline; gap:.45rem; padding:0 var(--space-md); font-family: var(--font-mono); font-size:.8rem; white-space:nowrap; color: var(--color-text-secondary); }
.quotes-tick b { font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--color-text-primary); }
.quotes-tick i { font-style:normal; font-weight:700; color: var(--q-color); }
.quotes-toggle__arrow { flex:none; display:flex; align-items:center; padding:0 var(--space-md); border-left:1px solid var(--color-border-default); transition: transform .3s; }
.quotes-toggle.is-open .quotes-ticker { display:none; }
.quotes-toggle.is-open .quotes-toggle__arrow { margin-left:auto; transform: rotate(180deg); }

/* Стрічка TX LIVE на всю ширину екрана одразу під хедером */
.quotes-strip { position:sticky; top: var(--nav-h, 0px); z-index:99989; display:flex; align-items:stretch; width:100%; overflow:hidden; background: var(--color-bg-secondary); border-bottom:1px solid var(--color-border-default); font-family: var(--font-display); color: var(--cyber-cyan-500); }
.quotes-strip .quotes-toggle__label { padding:.45rem var(--space-md); font-size:.8rem; }
.quotes-strip .quotes-tick { font-size:.78rem; }
/* Глобальне * { max-width:100% } стискало бігучу доріжку — знімаємо його для стрічки */
.quotes-ticker__track, .quotes-ticker__half, .quotes-tick, .quotes-tick b, .quotes-tick i { max-width: none !important; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 900px) {
  #finance-cards-grid { margin-top: var(--space-md); }
}
@media (max-width: 768px) {
  .quotes-ticker__track { animation-duration: 14s !important; }
}
@media (max-width: 768px) {
  .quotes-tick { padding: 0 .9rem; border-right: 1px solid rgba(255,255,255,.12); }
}

/* Фінанси — кнопка «Обнулити» (утримуй, щоб обнулити лічильники) */
#finance .cyber-section__header { display:flex; align-items:center; justify-content:space-between; gap: var(--space-sm); flex-wrap:wrap; }
.finance-reset-btn { position:relative; overflow:hidden; padding:.55rem 1.1rem; background: var(--color-bg-secondary); border:1px solid var(--cyber-magenta-500); color: var(--cyber-magenta-500); font-family: var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; transition: box-shadow .2s, color .2s; }
.finance-reset-btn:hover { box-shadow: 0 0 18px rgba(255,42,109,.45); }
.finance-reset-btn__fill { position:absolute; left:0; top:0; bottom:0; width:0; background: linear-gradient(90deg, rgba(255,42,109,.35), rgba(255,42,109,.9)); transition: width .25s ease-out; pointer-events:none; }
.finance-reset-btn.is-holding .finance-reset-btn__fill { width:100%; transition: width 1.4s linear; }
.finance-reset-btn.is-holding { color:#fff; box-shadow: 0 0 22px rgba(255,42,109,.7); }
.finance-reset-btn__label { position:relative; z-index:1; display:inline-flex; align-items:center; gap:.5rem; }
.finance-reset-btn.is-undo { border-color: var(--cyber-green-500); color: var(--cyber-green-500); }
.finance-reset-btn.is-undo:hover { box-shadow: 0 0 18px rgba(5,255,161,.45); }
#finance-cards-grid.is-resetting .cyber-stat__value { animation: finance-glitch .16s steps(2) infinite; }
@keyframes finance-glitch { 0% { transform:translate(0,0); filter:none; } 50% { transform:translate(-3px,1px); filter:hue-rotate(60deg); } 100% { transform:translate(3px,-1px); filter:saturate(2); } }

.planner-today-slot { position:relative; min-width:0; }
.planner-today-slot { display:flex; }
.planner-today-slot > .cyber-card--interactive:not([id$="-journal"]) { flex:1; display:flex; flex-direction:column; justify-content:center; }
#planner-today-journal, #planner-deadline-journal, #planner-reminders-journal { position:absolute; top:0; left:0; width:100%; z-index:5; animation: finance-pop .25s ease; }

/* Планувальник — гарніші журнали: рядки з анімацією появи, бейджі, кольори терміновості */
@keyframes pl-row-in { from { opacity:0; transform: translateX(-14px); } to { opacity:1; transform:none; } }
@keyframes pl-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,42,109,.55); } 50% { box-shadow: 0 0 12px 2px rgba(255,42,109,.65); } }
#planner-today-list, #planner-deadline-list, #reminders-list { overflow-x:hidden; }
.pl-yellow { --pl-color: var(--cyber-yellow-500); }
.pl-green { --pl-color: var(--cyber-green-500); }
.pl-urgent { --pl-color: var(--cyber-magenta-500); }
.pl-soon { --pl-color: var(--cyber-yellow-500); }
.pl-row { display:flex; align-items:center; gap: var(--space-xs); padding:.6rem var(--space-xs); margin-bottom:.4rem; background: rgba(255,255,255,.03); border-left:3px solid var(--pl-color, var(--cyber-cyan-500)); animation: pl-row-in .35s ease both; animation-delay: calc(var(--i, 0) * 70ms); transition: background .2s, box-shadow .2s; }
.pl-row:hover { background: rgba(255,255,255,.07); box-shadow: -4px 0 14px -4px var(--pl-color, var(--cyber-cyan-500)); }
.pl-row__main { flex:1; min-width:0; }
.pl-row__title { font-family: var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:.02em; color: var(--color-text-primary); overflow-wrap:anywhere; }
.pl-row__sub { font-family: var(--font-mono); font-size:.7rem; color: var(--color-text-muted); margin-top:.1rem; }
.pl-chip { flex:none; padding:.15rem .55rem; font-family: var(--font-mono); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; color: var(--pl-color, var(--cyber-cyan-500)); border:1px solid var(--pl-color, var(--cyber-cyan-500)); background: rgba(0,0,0,.25); }
.pl-chip--solid { background: var(--pl-color, var(--cyber-cyan-500)); color:#000; }
.pl-chip--pulse { animation: pl-pulse 1.6s ease-in-out infinite; }
.pl-row--done { opacity:.6; }
.pl-row--done .pl-row__title { text-decoration: line-through; color: var(--color-text-muted); }
.pl-empty { padding: var(--space-sm) 0; text-align:center; font-family: var(--font-mono); font-size:.8rem; color: var(--color-text-muted); animation: pl-row-in .4s ease both; }
#reminders-total { font-size:1rem !important; text-shadow: 0 0 10px rgba(5,255,161,.45); }

/* Історія — рядок повернення: стрілка ↺ що крутиться і бейдж «скасовано» */
@keyframes tx-undo-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes tx-undo-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(5,255,161,.5); } 50% { box-shadow: 0 0 8px 2px rgba(5,255,161,.55); } }
.tx-undo { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .5rem; min-width:0; }
.tx-name ~ span { flex:none; white-space:nowrap; }
#finance-cards-grid .finance-journal-list { max-height: var(--fin-list-max, 220px) !important; }
.tx-undo-arrow { flex:none; width:1.5rem; height:1.5rem; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--cyber-green-500); color: var(--cyber-green-500); background: rgba(5,255,161,.12); font-size:1rem; line-height:1; animation: tx-undo-spin 1s ease-out 1, tx-undo-glow 2.4s ease-in-out infinite; }
.tx-undo-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx-undo-badge { flex:none; padding:.1rem .45rem; font-family: var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; color: var(--cyber-green-500); border:1px dashed var(--cyber-green-500); background: rgba(5,255,161,.08); }

.finance-type-toggle { display:flex; gap: var(--space-2xs); }
.finance-type-btn {
  flex:1; padding: var(--space-sm); background: var(--color-bg-tertiary); border:1px solid var(--color-border-default);
  color: var(--color-text-muted); font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; cursor:pointer; transition:.2s;
}
.finance-type-btn--expense.is-active { background: rgba(255,42,109,.15); border-color: var(--cyber-magenta-500); color: var(--cyber-magenta-500); box-shadow: 0 0 15px rgba(255,42,109,.3); }
.finance-type-btn--income.is-active { background: rgba(5,255,161,.15); border-color: var(--cyber-green-500); color: var(--cyber-green-500); box-shadow: 0 0 15px rgba(5,255,161,.3); }

.finance-input-label { display:block; font-family: var(--font-mono); font-size:.7rem; color: var(--color-text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom: var(--space-2xs); }
.finance-input {
  width:100%; background: var(--color-bg-tertiary); border:1px solid var(--color-border-default); color: var(--color-text-primary);
  padding: var(--space-2xs) var(--space-sm); font-family: var(--font-body); transition:.2s;
}
.finance-input:focus { outline:none; border-color: var(--cyber-cyan-500); box-shadow: 0 0 10px rgba(0,240,255,.35); }

.finance-submit-btn {
  background: var(--cyber-cyan-500); color:#000; border:none; padding: .6rem 1.4rem; font-family: var(--font-display);
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; transition:.2s;
}
.finance-submit-btn:hover { box-shadow: 0 0 18px rgba(0,240,255,.6); transform: translateY(-1px); }

html, body {
  margin: 0;
  padding: 0;
}

/* Прибираємо горизонтальний скрол: нічого не виїжджає за межі екрана вбік */
html {
  overflow-x: hidden;
  width: 100%;
}
body {
  max-width: 100vw;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
* {
  max-width: 100%;
}

/* Перехід з меню до розділу: заголовок зупиняється під хедером, а не ховається за ним */
.cyber-section[id] {
  scroll-margin-top: 60px;
}

/* Компактні відступи між блоками + розділювач із діамантом і «променем», що біжить */
.cyber-section { padding: var(--space-md) 0; }
.cyber-section__header { margin-bottom: 1.25rem; }
.cyber-divider { position:relative; margin: var(--space-2xs) 0; opacity:.85; clip-path: inset(-12px 0); }
.cyber-divider::before { content:''; position:absolute; left:50%; top:50%; width:9px; height:9px; background: var(--color-bg-primary); border:1px solid var(--cyber-cyan-500); transform: translate(-50%,-50%) rotate(45deg); animation: divider-pulse 3s ease-in-out infinite; }
.cyber-divider::after { content:''; position:absolute; top:-1px; left:-100px; width:100px; height:3px; background: linear-gradient(90deg, transparent, var(--cyber-magenta-500), transparent); animation: divider-scan 5s linear infinite; }
@keyframes divider-scan { from { left:-100px; } to { left:100%; } }
@keyframes divider-pulse { 0%,100% { box-shadow: 0 0 4px var(--cyber-cyan-500); } 50% { box-shadow: 0 0 14px 2px var(--cyber-cyan-500); } }

/* Віджети під назвою сайту (widgets.js): курс валют */
.widgets { margin-top: calc(var(--space-md) * -1); padding-bottom: var(--space-xs); }
.widgets-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-md); }
.fx-body { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
@media (max-width:560px) { .fx-body { grid-template-columns: 1fr; } }
.fx-item { position:relative; padding: var(--space-xs) var(--space-sm); background: rgba(255,255,255,.03); border-left:3px solid var(--fx-color, var(--cyber-cyan-500)); }
.fx-up { --fx-color: var(--cyber-green-500); --fx-tint: rgba(5,255,161,.16); }
.fx-down { --fx-color: var(--cyber-magenta-500); --fx-tint: rgba(255,42,109,.16); }
.fx-item__top { display:flex; align-items:baseline; gap:.6rem; }
.fx-code { font-family:'Orbitron', var(--font-display); font-weight:700; letter-spacing:.12em; color: var(--fx-color); }
.fx-name { font-family: var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--color-text-muted); }
.fx-rate { font-family:'Orbitron', var(--font-display); font-size:2.2rem; font-weight:700; line-height:1.2; color: var(--color-text-primary); text-shadow: 0 0 14px var(--fx-tint); }
.fx-rate small { font-size:1rem; color: var(--color-text-muted); }
.fx-change { font-family: var(--font-mono); font-size:.8rem; font-weight:700; color: var(--fx-color); }
.fx-chart { position:relative; height:56px; margin-top: var(--space-xs); }
.fx-chart--empty { display:flex; align-items:center; font-family: var(--font-mono); font-size:.75rem; color: var(--color-text-muted); }
.fx-spark { display:block; width:100%; height:100%; clip-path: inset(0 100% 0 0); animation: fx-reveal 1.1s ease-out .2s forwards; }
@keyframes fx-reveal { to { clip-path: inset(0 0 0 0); } }
.fx-spark__line { fill:none; stroke: var(--fx-color); stroke-width:2; vector-effect: non-scaling-stroke; }
.fx-spark__area { fill: var(--fx-tint); stroke:none; }
.fx-dot { position:absolute; right:-4px; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background: var(--fx-color); opacity:0; animation: fx-dot-in .3s ease 1.1s forwards, fx-dot-pulse 1.8s ease-out 1.4s infinite; }
@keyframes fx-dot-in { to { opacity:1; } }
@keyframes fx-dot-pulse { 0% { box-shadow: 0 0 0 0 var(--fx-color); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.fx-range { display:flex; justify-content:space-between; margin-top:.25rem; font-family: var(--font-mono); font-size:.65rem; color: var(--color-text-muted); }
.fx-status { margin-top: var(--space-xs); font-family: var(--font-mono); font-size:.7rem; color: var(--color-text-muted); }
.fx-error { grid-column: 1 / -1; padding: var(--space-sm) 0; font-family: var(--font-mono); font-size:.85rem; color: var(--cyber-magenta-500); }
.fx-refresh { flex:none; width:1.9rem; height:1.9rem; background:none; border:1px solid var(--cyber-cyan-500); color: var(--cyber-cyan-500); font-size:1.05rem; line-height:1; cursor:pointer; transition: box-shadow .2s; }
.fx-refresh:hover { box-shadow: 0 0 12px rgba(0,240,255,.5); }
.fx-refresh.is-loading { animation: fx-spin .8s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.fx-skeleton { height:150px; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.09), rgba(255,255,255,.03)); background-size:200% 100%; animation: fx-shimmer 1.4s linear infinite; }
@keyframes fx-shimmer { to { background-position: -200% 0; } }

/* Компактний вигляд віджетів: вужча картка, менші шрифти й графік */
.widgets { margin-top: calc(var(--space-sm) * -1); padding-bottom: 0; }
.widgets-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 440px)); gap: var(--space-sm); }
.widgets-grid > .cyber-card { padding: var(--space-xs) var(--space-sm); }
.widgets-grid .cyber-card__header { margin-bottom: var(--space-2xs); padding-bottom: var(--space-2xs); }
.widgets-grid .cyber-card__title { font-size:.85rem; letter-spacing:.1em; }
.widgets-grid .cyber-card__badge { font-size:.6rem; }
.fx-body { gap: var(--space-xs); }
@media (max-width:560px) { .fx-body { grid-template-columns: 1fr 1fr; } }
.fx-item { padding: .5rem .65rem; }
.fx-code { font-size:.8rem; }
.fx-name { font-size:.6rem; }
.fx-rate { font-size:1.5rem; line-height:1.15; }
.fx-rate small { font-size:.8rem; }
.fx-change { font-size:.7rem; }
.fx-chart { height:34px; margin-top:.4rem; }
.fx-dot { width:7px; height:7px; margin-top:-3.5px; right:-3px; }
.fx-range { font-size:.58rem; }
.fx-status { margin-top: var(--space-2xs); font-size:.62rem; }
.fx-refresh { width:1.5rem; height:1.5rem; font-size:.9rem; }
.fx-skeleton { height:96px; }

/* Графік курсу з осями: зліва цифри курсу гривні, знизу дати, за лінією тонка сітка */
.fx-plot { display:flex; gap:.35rem; margin-top:.4rem; }
.fx-plot__main { flex:1; min-width:0; }
.fx-plot .fx-chart { margin-top:0; }
.fx-yaxis { flex:none; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; height:34px; font-family: var(--font-mono); font-size:.52rem; line-height:1; color: var(--color-text-muted); }
.fx-xaxis { display:flex; justify-content:space-between; margin-top:.2rem; font-family: var(--font-mono); font-size:.52rem; line-height:1; color: var(--color-text-muted); }
.fx-grid-h, .fx-grid-v { position:absolute; pointer-events:none; background: rgba(255,255,255,.1); }
.fx-grid-h { left:0; right:0; height:1px; }
.fx-grid-v { top:0; bottom:0; width:1px; }
.fx-grid-h:nth-of-type(2), .fx-grid-v:nth-of-type(5) { background: rgba(255,255,255,.06); }
@media (max-width:560px) {
  .fx-plot { gap:.25rem; margin-top:.25rem; }
  .fx-yaxis { height:24px; font-size:.46rem; }
  .fx-xaxis { font-size:.46rem; margin-top:.15rem; }
}

/* Телефонний режим: віджет курсу ще компактніший */
@media (max-width:560px) {
  .widgets-grid > .cyber-card { padding: .5rem .6rem; }
  .widgets-grid .cyber-card__header { margin-bottom:.35rem; padding-bottom:.35rem; gap:.4rem; }
  .widgets-grid .cyber-card__title { font-size:.75rem; letter-spacing:.06em; }
  .widgets-grid .cyber-card__badge { font-size:.55rem; padding:.1rem .35rem; }
  .fx-body { gap:.4rem; }
  .fx-item { padding:.35rem .45rem; }
  .fx-item__top { gap:.35rem; }
  .fx-code { font-size:.7rem; }
  .fx-name { display:none; }
  .fx-rate { font-size:1.15rem; }
  .fx-rate small { font-size:.65rem; }
  .fx-change { font-size:.58rem; }
  .fx-chart { height:24px; margin-top:.25rem; }
  .fx-range { font-size:.52rem; margin-top:.15rem; }
  .fx-range span:nth-child(2) { display:none; }
  .fx-status { font-size:.52rem; margin-top:.3rem; }
  .fx-refresh { width:1.25rem; height:1.25rem; font-size:.75rem; }
  .fx-skeleton { height:70px; }
}

/* Міні-курс валют у шапці сайту (тільки телефон): без графіка */
.fx-mini { display:none; align-items:stretch; text-decoration:none; font-family: var(--font-mono); color: var(--color-text-primary); white-space:nowrap; flex:1; min-width:0; }
.fx-mini__item { position:relative; display:flex; flex-direction:column; justify-content:center; gap:.05rem; padding:.3rem .65rem .45rem; line-height:1.1; flex:1 1 0; align-items:center; }
.fx-mini__item + .fx-mini__item { border-left:1px solid rgba(255,255,255,.12); }
.fx-mini__item::after { content:''; position:absolute; left:1rem; right:1rem; bottom:.1rem; height:2px; border-radius:2px; background: var(--fx-color); box-shadow: 0 0 8px var(--fx-color); opacity:.9; }
.fx-mini__top { display:flex; align-items:center; justify-content:center; gap:.45rem; font-size:.52rem; font-weight:700; letter-spacing:.14em; color: var(--color-text-muted); }
.fx-mini__top i { display:inline-block; font-style:normal; font-size:.55rem; color: var(--fx-color); }
.fx-mini__val { font-size:.95rem; font-weight:700; color:#fff; text-shadow: 0 0 10px var(--fx-color); }
.fx-up .fx-mini__top i { animation: fx-bob-up 1.6s ease-in-out infinite; }
.fx-down .fx-mini__top i { animation: fx-bob-down 1.6s ease-in-out infinite; }
@keyframes fx-bob-up { 0%,100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }
@keyframes fx-bob-down { 0%,100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
.fx-flat { --fx-color: var(--color-text-muted); }
@media (max-width:768px) {
  /* ONLINE і TX LIVE — однакові «вкладки» біля лівого краю: однакова ширина, крапки рівно одна під одною */
  .cyber-nav { gap:.6rem; padding: 0 var(--space-md) 0 0; min-height: 3.75rem; }
  .cyber-status { align-self:stretch; width:6.5rem; padding:0 0 0 var(--space-md); gap:.6rem; border:none; border-right:1px solid var(--cyber-green-500); background: rgba(5,255,161,.12); font-family: var(--font-display); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
  .quotes-strip .quotes-toggle__label { width:6.5rem; padding-left: var(--space-md); padding-right:0; gap:.6rem; justify-content:flex-start; }
  .fx-mini { display:flex; order:2; pointer-events:none; }
  .widgets { display:none; }
  .cyber-nav__burger { order:3; }
}

/* Телефон: гамбургер-меню з ефектною анімацією */
@media (max-width:768px) {
  /* Кнопка: світна рамка, лінії різної довжини; при відкритті перетворюється на X і прокручується */
  .cyber-nav__burger { width:36px; height:36px; padding:0 9px; align-items:stretch; border:1px solid rgba(0,240,255,.35); border-radius:10px; background: rgba(0,240,255,.06); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s, box-shadow .3s; }
  .cyber-nav__burger span { border-radius:2px; transition: transform .4s cubic-bezier(.2,.8,.2,1), width .3s, opacity .25s, background .3s, box-shadow .3s; }
  .cyber-nav__burger span:nth-child(2) { width:60%; align-self:flex-end; }
  .cyber-nav__burger.is-open { transform: rotate(90deg); border-color: var(--cyber-magenta-500); background: rgba(255,42,109,.1); box-shadow: 0 0 16px rgba(255,42,109,.5); }
  .cyber-nav__burger.is-open span { background: var(--cyber-magenta-500); box-shadow: 0 0 6px var(--cyber-magenta-500); }
  .cyber-nav__burger:focus { outline:none; }
  .cyber-nav__burger:focus-visible { outline:2px solid var(--cyber-cyan-500); outline-offset:3px; }

  /* Панель меню: «розкривається» колом від кнопки, зверху вниз пробігає промінь-сканер */
  .cyber-nav__links { max-height:none; overflow:hidden; counter-reset: nav; visibility:hidden; opacity:0; -webkit-clip-path: circle(0% at calc(100% - 42px) 0); clip-path: circle(0% at calc(100% - 42px) 0); background: linear-gradient(180deg, rgba(18,20,29,.97), rgba(13,14,20,.99)); backdrop-filter: blur(10px); border-bottom:1px solid var(--cyber-cyan-500); box-shadow: 0 18px 40px -10px rgba(0,240,255,.35); transition: clip-path .45s cubic-bezier(.4,0,.2,1), opacity .3s .1s, visibility 0s .45s; }
  .cyber-nav__links.is-open { visibility:visible; opacity:1; -webkit-clip-path: circle(150% at calc(100% - 42px) 0); clip-path: circle(150% at calc(100% - 42px) 0); transition: clip-path .65s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility 0s; }
  .cyber-nav__links::after { content:''; position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none; opacity:0; background: linear-gradient(90deg, transparent, var(--cyber-cyan-500), var(--cyber-magenta-500), transparent); box-shadow: 0 0 14px var(--cyber-cyan-500); }
  .cyber-nav__links.is-open::after { animation: nav-scan .9s ease-out .1s 1 both; }
  @keyframes nav-scan { 0% { top:0; opacity:1; } 90% { opacity:.8; } 100% { top: calc(100% - 2px); opacity:0; } }

  /* Пункти: нумерація, вилітають зліва по черзі, підсвітка активного */
  .cyber-nav__link { position:relative; display:flex; align-items:center; gap:.9rem; padding: 1rem var(--space-lg); font-size:1.15rem; letter-spacing:.08em; border-bottom:1px solid rgba(255,255,255,.07); opacity:0; transform: translateX(-26px); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s, background .25s, color .25s, padding-left .25s; }
  .cyber-nav__links.is-open .cyber-nav__link { opacity:1; transform:none; }
  .cyber-nav__links.is-open li:nth-child(1) .cyber-nav__link { transition-delay: .12s; }
  .cyber-nav__links.is-open li:nth-child(2) .cyber-nav__link { transition-delay: .18s; }
  .cyber-nav__links.is-open li:nth-child(3) .cyber-nav__link { transition-delay: .24s; }
  .cyber-nav__links.is-open li:nth-child(4) .cyber-nav__link { transition-delay: .30s; }
  .cyber-nav__link::before { counter-increment: nav; content: counter(nav, decimal-leading-zero); min-width:1.6rem; font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; color: var(--cyber-magenta-500); }
  .cyber-nav__link::after { content:'▸'; margin-left:auto; color: var(--cyber-cyan-500); opacity:0; transform: translateX(-8px); transition: opacity .25s, transform .25s; }
  .cyber-nav__link:hover, .cyber-nav__link:active, .cyber-nav__link--active { background: linear-gradient(90deg, rgba(0,240,255,.16), transparent 75%); padding-left: calc(var(--space-lg) + .4rem); }
  .cyber-nav__link:hover::after, .cyber-nav__link:active::after, .cyber-nav__link--active::after { opacity:1; transform:none; }
  .cyber-nav__link--active { box-shadow: inset 3px 0 0 var(--cyber-cyan-500); text-shadow: 0 0 12px rgba(0,240,255,.6); }
}
@media (prefers-reduced-motion: reduce) {
  .cyber-nav__links, .cyber-nav__link, .cyber-nav__burger, .cyber-nav__burger span { transition:none !important; animation:none !important; }
}

/* Розташування блоків як на макеті (комп'ютер): віджет | планувальник, проєкти | нотатки, фінанси на всю ширину */
.widgets { margin-top:0; padding: var(--space-md) 0; }
main > .widgets .widgets-grid { grid-template-columns: 1fr; }
@media (min-width: 901px) {
  main.cyber-container { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'widgets planner' 'projects notes' 'finance finance'; column-gap: var(--space-lg); row-gap: var(--space-sm); align-items:start; }
  main.cyber-container > .widgets { grid-area: widgets; }
  main.cyber-container > #planner { grid-area: planner; }
  main.cyber-container > #projects { grid-area: projects; }
  main.cyber-container > #notes { grid-area: notes; }
  main.cyber-container > #finance { grid-area: finance; }
  main.cyber-container > .cyber-divider { display:none; }
  #planner .cyber-grid--3 { grid-template-columns: 1fr; }
  /* Блоки першого ряду однакової висоти: нижні краї збігаються, картки планувальника рівні між собою */
  main.cyber-container > .widgets, main.cyber-container > #planner { align-self:stretch; display:flex; flex-direction:column; }
  .widgets .widgets-grid { flex:1; grid-template-rows: auto auto 1fr; }
  #planner .cyber-grid--3 { flex:1; grid-template-rows: repeat(3, 1fr); }
}

/* Планувальник — стильніші картки: іконка-печатка, рамка-рамка, кутові скоби, менше порожнечі */
.planner-today-slot > .cyber-card--interactive:not([id$="-journal"]) { position:relative; overflow:hidden; justify-content:flex-start !important; gap:.5rem; padding: var(--space-sm) var(--space-md); }
.planner-today-slot > .cyber-card--interactive:not([id$="-journal"])::before { content:''; position:absolute; inset:5px; border:1px solid currentColor; opacity:.18; pointer-events:none; }
.planner-today-slot > .cyber-card--interactive:not([id$="-journal"])::after { content: attr(data-glyph); position:absolute; right:-.3rem; bottom:-1.3rem; font-family:'Orbitron', var(--font-display); font-size:5.5rem; font-weight:800; line-height:1; color: currentColor; opacity:.06; pointer-events:none; }
#planner-today-card { color: var(--cyber-cyan-500); }
#planner-deadline-card { color: var(--cyber-yellow-500); }
#planner-reminders-card { color: var(--cyber-green-500); }
.planner-today-slot .cyber-card__header { margin-bottom:.4rem; padding-bottom:.4rem; }
.planner-today-slot .cyber-card__title { display:flex; align-items:center; gap:.5rem; }
.planner-today-slot .cyber-card__title::before { content:''; width:7px; height:7px; border-radius:50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse-glow 2s infinite; }
#planner-today-desc, #planner-deadline-desc { position:relative; z-index:1; }
#reminders-total-preview { position:relative; z-index:1; }
.planner-today-slot .cyber-progress { position:relative; z-index:1; }
@media (min-width: 901px) {
  .planner-today-slot > .cyber-card--interactive:not([id$="-journal"]) { min-height:8.5rem; }
}

/* Віджет «Новини» (RSS) */
.news-groups { display:flex; gap:.4rem; margin-bottom: var(--space-2xs); }
.news-group { flex:1; padding:.3rem .6rem; background:none; border:1px solid var(--color-border-default); color: var(--color-text-muted); font-family: var(--font-display); font-weight:700; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
.news-group:hover { color: var(--cyber-magenta-500); border-color: var(--cyber-magenta-500); }
.news-group.is-active { color: var(--cyber-magenta-500); border-color: var(--cyber-magenta-500); background: rgba(255,42,109,.12); box-shadow: 0 0 12px -4px var(--cyber-magenta-500); }
.news-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom: var(--space-2xs); }
.news-tab { padding:.2rem .6rem; background:none; border:1px solid var(--color-border-default); color: var(--color-text-muted); font-family: var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition: color .2s, border-color .2s, background .2s; }
.news-tab:hover { color: var(--cyber-cyan-500); border-color: var(--cyber-cyan-500); }
.news-tab.is-active { background: var(--cyber-cyan-500); border-color: var(--cyber-cyan-500); color:#000; font-weight:700; }
.news-list { list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.news-item { display:flex; align-items:baseline; gap:.65rem; padding:.4rem .55rem; text-decoration:none; background: rgba(255,255,255,.03); border-left:2px solid var(--cyber-cyan-500); animation: pl-row-in .35s ease both; animation-delay: calc(var(--i, 0) * 60ms); transition: background .2s, box-shadow .2s; }
.news-item:hover { background: rgba(0,240,255,.08); box-shadow: -4px 0 14px -4px var(--cyber-cyan-500); }
.news-time { flex:none; min-width:3.2rem; font-family: var(--font-mono); font-size:.62rem; color: var(--cyber-magenta-500); }
.news-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family: var(--font-display); font-weight:600; font-size:.95rem; line-height:1.25; color: var(--color-text-primary); }
.news-status { margin-top: var(--space-2xs); font-family: var(--font-mono); font-size:.62rem; color: var(--color-text-muted); }
.news-error { padding: var(--space-sm) 0; font-family: var(--font-mono); font-size:.8rem; color: var(--cyber-magenta-500); }
.news-skeleton { height:36px; margin-bottom:.3rem; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.09), rgba(255,255,255,.03)); background-size:200% 100%; animation: fx-shimmer 1.4s linear infinite; list-style:none; }

/* Віджет «Рахунки» (Monobank + Capital One) */
.bank-block { padding:.55rem .65rem; margin-bottom:.4rem; background: rgba(255,255,255,.03); border-left:3px solid var(--bank-c, var(--cyber-cyan-500)); }
.bank-block--mono { --bank-c: var(--cyber-cyan-500); --bank-glow: rgba(0,240,255,.45); }
.bank-block--cap { --bank-c: var(--cyber-magenta-500); --bank-glow: rgba(255,42,109,.45); }
.bank-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.bank-logo { flex:none; padding:.05rem .4rem; font-family: var(--font-mono); font-size:.58rem; font-weight:700; letter-spacing:.1em; color:#000; background: var(--bank-c); }
.bank-name { margin-right:auto; font-family: var(--font-display); font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color: var(--color-text-primary); }
.bank-link { background:none; border:none; padding:0; font-family: var(--font-mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color: var(--color-text-muted); cursor:pointer; transition: color .2s; }
.bank-link:hover { color: var(--bank-c); }
.bank-big { font-family:'Orbitron', var(--font-display); font-size:1.5rem; font-weight:700; line-height:1.2; color: var(--bank-c); text-shadow: 0 0 12px var(--bank-glow); }
.bank-sub { margin-top:.1rem; font-family: var(--font-mono); font-size:.6rem; color: var(--color-text-muted); }
.bank-rows { display:flex; flex-direction:column; gap:.2rem; margin-top:.35rem; }
.bank-row { display:flex; align-items:center; gap:.6rem; font-family: var(--font-mono); font-size:.72rem; color: var(--color-text-secondary); }
.bank-row__label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bank-row .bank-amt { font-weight:700; color: var(--color-text-primary); }
.bank-jarbar { flex:none; width:54px; height:4px; overflow:hidden; background: rgba(255,255,255,.1); }
.bank-jarbar i { display:block; height:100%; background: var(--bank-c); box-shadow: 0 0 6px var(--bank-c); }
.bank-hint { font-family: var(--font-mono); font-size:.65rem; line-height:1.5; color: var(--color-text-muted); }
.bank-hint a { color: var(--cyber-cyan-500); }
.bank-form { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.bank-input { flex:1; min-width:120px; padding:.3rem .5rem; background: var(--color-bg-tertiary); border:1px solid var(--color-border-default); color: var(--color-text-primary); font-family: var(--font-mono); font-size:.75rem; }
.bank-input:focus { outline:none; border-color: var(--bank-c); box-shadow: 0 0 8px -2px var(--bank-c); }
.bank-btn { padding:.3rem .8rem; background: var(--bank-c); color:#000; border:none; font-family: var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.bank-btn--ghost { background:none; color: var(--color-text-muted); border:1px solid var(--color-border-default); }
.bank-error { margin-top:.3rem; font-family: var(--font-mono); font-size:.65rem; color: var(--cyber-magenta-500); }
.bank-status { margin-top: var(--space-2xs); font-family: var(--font-mono); font-size:.62rem; color: var(--color-text-muted); }
.bank-skeleton { height:48px; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.09), rgba(255,255,255,.03)); background-size:200% 100%; animation: fx-shimmer 1.4s linear infinite; }
.bank-amt { transition: filter .25s; }
.bank-card.is-masked .bank-amt { filter: blur(7px); user-select:none; }

/* ===== Хедер (header.js): годинник, ковзний індикатор, смужка прокрутки, ефекти ===== */
.cyber-clock { display:none; }
.cyber-nav__glider { display:none; }
.cyber-nav__progress { position:absolute; left:0; bottom:-1px; width:100%; height:2px; transform-origin:0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--cyber-cyan-500), var(--cyber-magenta-500)); box-shadow: 0 0 10px var(--cyber-cyan-500); pointer-events:none; }
@keyframes nav-sweep { from { left:-220px; } to { left:100%; } }
@keyframes status-ping { 0% { transform: scale(.7); opacity:.9; } 100% { transform: scale(2.6); opacity:0; } }
@keyframes clock-blink { 0%, 49% { opacity:1; } 50%, 100% { opacity:.2; } }
@keyframes clock-tick { from { transform: translateY(-3px); opacity:.45; } to { transform:none; opacity:1; } }
.cyber-status__dot { position:relative; }
.cyber-status__dot::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:1px solid var(--cyber-green-500); animation: status-ping 2s ease-out infinite; }
@media (min-width: 769px) {
  .cyber-nav { transition: padding .3s ease, background .3s ease, box-shadow .3s ease; }
  .cyber-nav::before { content:''; position:absolute; top:0; left:-220px; width:220px; height:1px; pointer-events:none; background: linear-gradient(90deg, transparent, var(--cyber-cyan-500), var(--cyber-magenta-500), transparent); animation: nav-sweep 7s linear infinite; }
  .cyber-nav.is-scrolled { padding-top:.45rem; padding-bottom:.45rem; background: rgba(18,20,29,.82); box-shadow: 0 10px 30px -14px rgba(0,240,255,.4); }
  .cyber-nav__glider { display:block; position:absolute; bottom:2px; left:0; width:0; height:2px; border-radius:2px; opacity:0; pointer-events:none; background: linear-gradient(90deg, var(--cyber-cyan-500), var(--cyber-magenta-500)); box-shadow: 0 0 12px var(--cyber-cyan-500); transition: left .4s cubic-bezier(.2,.8,.2,1), width .4s cubic-bezier(.2,.8,.2,1), opacity .3s; }
  .cyber-nav__link { position:relative; transition: color .25s, text-shadow .25s; }
  .cyber-nav__link:hover, .cyber-nav__link--active { text-shadow: 0 0 12px rgba(0,240,255,.55); }
  .cyber-nav__link::before, .cyber-nav__link::after { position:absolute; top:50%; margin-top:-.7em; opacity:0; color: var(--cyber-magenta-500); font-family: var(--font-mono); transition: opacity .25s, transform .25s; }
  .cyber-nav__link::before { content:'['; left:.2rem; transform: translateX(8px); }
  .cyber-nav__link::after { content:']'; right:.2rem; transform: translateX(-8px); }
  .cyber-nav__link:hover::before, .cyber-nav__link:hover::after, .cyber-nav__link--active::before, .cyber-nav__link--active::after { opacity:1; transform:none; }
  .cyber-clock { display:flex; flex-direction:column; align-items:flex-end; margin-left:auto; padding-left: var(--space-md); line-height:1.1; user-select:none; cursor:default; }
  .cyber-clock__main { display:flex; align-items:baseline; font-family:'Orbitron', var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:.06em; color: var(--cyber-cyan-500); text-shadow: var(--glow-text-cyan); }
  .cyber-clock__main span { display:inline-block; min-width:1.35ch; text-align:center; }
  .cyber-clock__main i { font-style:normal; margin:0 .05rem; animation: clock-blink 1s steps(1) infinite; }
  .cyber-clock__main span[data-k='s'] { color: var(--cyber-magenta-500); text-shadow: 0 0 10px rgba(255,42,109,.7); }
  .cyber-clock__main span.is-tick { animation: clock-tick .35s ease-out; }
  .cyber-clock__sub { display:flex; gap:.8rem; margin-top:.2rem; font-family: var(--font-mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; color: var(--color-text-muted); }
  .cyber-clock__sub b { font-weight:700; color: var(--cyber-green-500); }
}

/* Фінанси — ефектне розгортання карток: нахил у 3D, каскад, HUD-кутики, промінь-сканер, світіння */
.finance-card-slot:nth-child(1) { --hud-c: var(--cyber-cyan-500); }
.finance-card-slot:nth-child(2) { --hud-c: var(--cyber-magenta-500); }
.finance-card-slot:nth-child(3) { --hud-c: var(--cyber-yellow-500); }
.finance-card-slot:nth-child(4) { --hud-c: var(--cyber-green-500); }
#finance-cards-grid { perspective: 1400px; perspective-origin: 50% 100%; }
.finance-card-slot { transform: rotateX(calc((1 - var(--pp, 1)) * 34deg)) translateY(calc((1 - var(--pp, 1)) * 36px)); transform-origin: 50% 100%; user-select:none; -webkit-user-select:none; }
.finance-card-slot > .cyber-card:not(.finance-card-journal) { overflow:hidden; box-shadow: 0 0 calc(var(--pp, 1) * 30px) -8px var(--hud-c); }
/* Скруглені кути як в іконок Apple: радіус ≈ 14% від ширини картки, але не більше 44px (щоб у широких картках кути не з'їдали вміст) */
.finance-card-slot { container-type: inline-size; }
.finance-card-slot > .cyber-card { border-radius: min(14cqw, 44px); }
.finance-card-slot > .cyber-card:not(.finance-card-journal)::after { content:''; position:absolute; left:0; right:0; top: calc(var(--pp, 1) * 100%); height:2px; pointer-events:none; background: linear-gradient(90deg, transparent, var(--hud-c), transparent); box-shadow: 0 0 12px var(--hud-c); opacity: calc((1 - var(--pp, 1)) * 1.2); }
#finance-cards-grid .cyber-stat { align-self:center; }
#finance-cards-grid .cyber-stat__label { letter-spacing: calc(.1em + var(--pp, 1) * .2em); }

/* Хрестик закриття в журналах фінансів прибрано: журнал закривається кліком по ньому */
.finance-journal-close { display:none; }
.finance-card-journal { cursor:pointer; }

#cyber-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: var(--color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease;
}

#cyber-loader.cyber-loader--hidden {
  opacity: 0;
  pointer-events: none;
}

.cyber-loader__inner {
  text-align: center;
  width: 300px;
}

.cyber-loader__label {
  font-family: var(--font-mono);
  color: var(--cyber-cyan-500);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
  margin-bottom: 1rem;
}

.cyber-loader__bar {
  height: 10px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--cyber-cyan-500);
  overflow: hidden;
}

.cyber-loader__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyber-cyan-500), var(--cyber-magenta-500));
  box-shadow: 0 0 15px var(--cyber-cyan-500);
  transition: width .15s linear;
}

.cyber-loader__percent {
  font-family: var(--font-mono);
  color: var(--cyber-yellow-500);
  margin-top: .75rem;
  font-size: 1.2rem;
}

#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* ===== Планувальник: великі неонові написи на трьох картках ===== */
@keyframes pl-neon-flicker { 0%,100% { opacity:1; } 92% { opacity:1; } 93% { opacity:.75; } 94% { opacity:1; } 96% { opacity:.85; } 97% { opacity:1; } }
@keyframes pl-bar-shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Заголовки карток: великі, широкі, з неоновим світінням */
.planner-today-slot .cyber-card__title { font-size:1.35rem; font-weight:800; letter-spacing:.14em; text-shadow: 0 0 10px currentColor, 0 0 24px currentColor; }
.planner-today-slot .cyber-card__title::before { width:10px; height:10px; }

/* Синя картка: велике число завдань */
#planner-today-count { padding:.15rem .9rem; font-family:'Orbitron', var(--font-display); font-size:1.6rem; font-weight:800; line-height:1.3; box-shadow: 0 0 18px var(--cyber-cyan-500); animation: pl-neon-flicker 5s infinite; }
#planner-today-desc { font-family: var(--font-display); font-size:1.2rem !important; font-weight:600; line-height:1.35; letter-spacing:.03em; color: var(--color-text-primary) !important; text-shadow: 0 0 12px rgba(0,240,255,.35); }

/* Жовта картка: назва завдання великими, дні — світним акцентом */
#planner-deadline-title { font-size:1.35rem; }
#planner-deadline-desc { font-family:'Orbitron', var(--font-display); font-size:1.05rem !important; font-weight:700; letter-spacing:.04em; line-height:1.4; color: var(--cyber-yellow-500) !important; text-shadow: 0 0 14px rgba(252,238,10,.55); }
#planner-deadline-bar { height:14px; margin-top: var(--space-xs) !important; }
#planner-deadline-bar .cyber-progress__bar { background: linear-gradient(90deg, var(--cyber-yellow-500), #fff7a8, var(--cyber-yellow-500)); background-size:200% 100%; animation: pl-bar-shine 3s linear infinite; box-shadow: 0 0 20px var(--cyber-yellow-500); }

/* Зелена картка: велика неонова сума */
#reminders-total-preview { font-family:'Orbitron', var(--font-display) !important; font-size:1.7rem !important; font-weight:800; line-height:1.3; letter-spacing:.04em; color: var(--cyber-green-500) !important; text-shadow: 0 0 14px rgba(5,255,161,.7), 0 0 30px rgba(5,255,161,.35); }
#reminders-total { font-family:'Orbitron', var(--font-display) !important; font-size:1.25rem !important; font-weight:700; }

/* Телефон: трохи менші, щоб нічого не вилазило за картку */
@media (max-width: 600px) {
  .planner-today-slot .cyber-card__title { font-size:1.1rem; letter-spacing:.1em; }
  #planner-today-count { font-size:1.3rem; }
  #planner-today-desc { font-size:1rem !important; }
  #planner-deadline-title { font-size:1.1rem; }
  #planner-deadline-desc { font-size:.9rem !important; }
  #reminders-total-preview { font-size:1.35rem !important; }
}