/* =============================================================================
   NAPLOPÓ v4 – style.css
   Redesign: Playfair Display + JetBrains Mono + Lora
   Meleg, intim, romantikus sötét esztétika – borostyán és rózsa akcentusok
   ============================================================================= */


/* =============================================================================
   1. CSS VÁLTOZÓK & ALAP RESET
   ============================================================================= */

:root {
  /* Alap háttér és felszínek */
  --bg:           #080808;
  --surface-1:    rgba(14, 12, 10, 0.97);
  --surface-2:    rgba(20, 17, 14, 0.95);
  --surface-3:    rgba(28, 24, 20, 0.9);
  --glass:        rgba(255, 245, 235, 0.03);

  /* Szöveg */
  --text-1:       #f5ede0;
  --text-2:       #a09080;
  --text-3:       rgba(245, 237, 224, 0.25);
  --text-inv:     #080808;

  /* Akcentus – meleg borostyán + rózsa */
  --amber:        #d4862a;
  --amber-light:  #f0a84e;
  --amber-dim:    rgba(212, 134, 42, 0.15);
  --amber-glow:   rgba(212, 134, 42, 0.08);

  --rose:         #c45c7a;
  --rose-light:   #e07898;
  --rose-dim:     rgba(196, 92, 122, 0.15);
  --rose-glow:    rgba(196, 92, 122, 0.08);

  --sage:         #6b9e7a;
  --sage-light:   #8ec19e;
  --sage-dim:     rgba(107, 158, 122, 0.15);

  /* Hibaszín */
  --error:        #c44a4a;
  --error-dim:    rgba(196, 74, 74, 0.15);

  /* Szegélyek */
  --border:       rgba(245, 237, 224, 0.08);
  --border-mid:   rgba(245, 237, 224, 0.14);
  --border-hi:    rgba(245, 237, 224, 0.25);

  /* Heatmap */
  --cell-empty:     rgba(245, 237, 224, 0.04);
  --cell-meeting:   var(--sage);
  --cell-special:   var(--amber);

  /* Betűkészletek */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-body:    'Lora', Georgia, serif;

  /* Easing */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing */
  --sp-05: 0.25rem;
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-5:  2.5rem;
  --sp-6:  3rem;
  --sp-8:  4rem;

  /* Cellák */
  --cell-size:   clamp(13px, 2vw, 18px);
  --cell-gap:    clamp(3px, 0.4vw, 4px);
  --cell-radius: 3px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:       16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg);
  color:            var(--text-1);
  font-family:      var(--font-body);
  font-weight:      400;
  line-height:      1.65;
  min-height:       100dvh;
  overflow-x:       hidden;
}

ul, ol { list-style: none; }

button {
  cursor:     pointer;
  border:     none;
  background: none;
  font:       inherit;
  color:      inherit;
  -webkit-tap-highlight-color: transparent;
}

textarea {
  font: inherit;
  resize: vertical;
}


/* =============================================================================
   2. GRAIN + AMBIENT BG
   ============================================================================= */

.grain-overlay {
  position:       fixed;
  inset:          0;
  z-index:        9999;
  pointer-events: none;
  opacity:        0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
}

.ambient-bg {
  position:       fixed;
  inset:          0;
  z-index:        0;
  pointer-events: none;
  overflow:       hidden;
}

.ambient-blob {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(120px);
  opacity:       0.06;
  animation:     blobDrift 20s ease-in-out infinite;
}

.ambient-blob--1 {
  width:      600px;
  height:     600px;
  background: var(--amber);
  top:        -200px;
  left:       -100px;
  animation-delay: 0s;
}

.ambient-blob--2 {
  width:      500px;
  height:     500px;
  background: var(--rose);
  bottom:     -100px;
  right:      -100px;
  animation-delay: -7s;
}

.ambient-blob--3 {
  width:      400px;
  height:     400px;
  background: var(--sage);
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -50%);
  animation-delay: -14s;
  opacity:    0.03;
}

@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(40px, -30px) scale(1.05); }
  66%       { transform: translate(-20px, 20px) scale(0.97); }
}


/* =============================================================================
   3. SCROLLBAR
   ============================================================================= */

::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: var(--bg); }
::-webkit-scrollbar-thumb   { background: rgba(245, 237, 224, 0.1); border-radius: 4px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(245, 237, 224, 0.2); }
* { scrollbar-width: thin; scrollbar-color: rgba(245,237,224,0.1) transparent; }


/* =============================================================================
   4. ANIMÁCIÓK
   ============================================================================= */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

@keyframes dotPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

@keyframes cellIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes overlayOut {
  to { opacity: 0; pointer-events: none; }
}

@keyframes appReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(212, 134, 42, 0.15); }
  50%       { box-shadow: 0 0 35px rgba(212, 134, 42, 0.3); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* =============================================================================
   5. PIN OVERLAY
   ============================================================================= */

.pin-overlay {
  position:        fixed;
  inset:           0;
  z-index:         1000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--sp-2);
  background:      radial-gradient(ellipse at 40% 40%, rgba(22, 17, 12, 0.99), rgba(8, 8, 8, 1));
  animation:       fadeIn 0.5s var(--ease-out) both;
}

.pin-overlay--exit {
  animation: overlayOut 0.5s var(--ease-smooth) forwards;
}

.pin-card {
  position:      relative;
  width:         100%;
  max-width:     360px;
  padding:       var(--sp-5) var(--sp-4);
  background:    var(--surface-1);
  border:        1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow:
    0 0 0 1px rgba(255, 245, 235, 0.03),
    0 40px 100px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(212, 134, 42, 0.05);
}

/* 4 sarokdísz */
.corner {
  position:     absolute;
  width:        14px;
  height:       14px;
  border-color: var(--border-mid);
  border-style: solid;
  pointer-events: none;
}
.corner--tl { top: 10px; left: 10px;   border-width: 1px 0 0 1px; }
.corner--tr { top: 10px; right: 10px;  border-width: 1px 1px 0 0; }
.corner--bl { bottom: 10px; left: 10px;  border-width: 0 0 1px 1px; }
.corner--br { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }

.pin-card__ornament {
  display:      flex;
  justify-content: center;
  margin-bottom: var(--sp-3);
  color:        var(--amber);
}

.pin-card__ornament svg {
  width: 80px;
  opacity: 0.6;
}

.pin-card__header {
  text-align:    center;
  margin-bottom: var(--sp-4);
}

.pin-card__eyebrow {
  font-family:    var(--font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--amber);
  opacity:        0.7;
  margin-bottom:  var(--sp-1);
}

.pin-card__title {
  font-family: var(--font-display);
  font-size:   clamp(2rem, 6vw, 2.8rem);
  font-style:  italic;
  font-weight: 500;
  color:       var(--text-1);
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

.pin-card__subtitle {
  font-size: 0.82rem;
  color:     var(--text-2);
  font-style: italic;
}

.pin-dots {
  display:         flex;
  justify-content: center;
  gap:             var(--sp-3);
  margin-bottom:   var(--sp-2);
}

.pin-dot {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  border:        1.5px solid var(--border-mid);
  background:    transparent;
  transition:
    background   0.15s var(--ease-smooth),
    border-color 0.15s,
    transform    0.2s  var(--ease-bounce);
}

.pin-dot--filled {
  background:   var(--amber);
  border-color: var(--amber);
  box-shadow:   0 0 12px rgba(212, 134, 42, 0.5);
  animation:    dotPop 0.2s var(--ease-bounce);
}

.pin-dot--error {
  background:   var(--error);
  border-color: var(--error);
  box-shadow:   0 0 12px rgba(196, 74, 74, 0.5);
}

.pin-error {
  text-align:    center;
  font-family:   var(--font-mono);
  font-size:     0.72rem;
  color:         var(--error);
  min-height:    1.4em;
  margin-bottom: var(--sp-1);
  opacity:       0;
  transition:    opacity 0.2s;
  letter-spacing: 0.05em;
}

.pin-error--visible { opacity: 1; }

.pin-card--shake {
  animation: shake 0.4s var(--ease-smooth);
}

.pin-keypad {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.5rem;
  margin-top:            var(--sp-2);
}

.pin-key {
  aspect-ratio:  1;
  border-radius: var(--radius-md);
  font-family:   var(--font-mono);
  font-size:     clamp(1rem, 3vw, 1.2rem);
  font-weight:   500;
  background:    rgba(245, 237, 224, 0.04);
  border:        1px solid var(--border);
  color:         var(--text-1);
  transition:
    background  0.15s,
    transform   0.1s  var(--ease-bounce),
    box-shadow  0.15s;
  user-select: none;
}

.pin-key:hover {
  background: rgba(245, 237, 224, 0.08);
  border-color: var(--border-mid);
}

.pin-key:active {
  transform:  scale(0.91);
  background: var(--amber-dim);
  border-color: rgba(212, 134, 42, 0.3);
}

.pin-key--empty   { pointer-events: none; background: transparent; border: none; }
.pin-key--action  { font-size: 1.1rem; color: var(--text-2); }
.pin-key--action:hover { color: var(--error); background: var(--error-dim); }


/* =============================================================================
   6. APP WRAPPER
   ============================================================================= */

.app {
  position:       relative;
  z-index:        1;
  min-height:     100dvh;
  display:        flex;
  flex-direction: column;
  animation:      appReveal 0.6s var(--ease-out) both;
}

.app[hidden] { display: none !important; }


/* =============================================================================
   7. HEADER
   ============================================================================= */

.site-header {
  position:        sticky;
  top:             0;
  z-index:         100;
  background:      rgba(8, 8, 8, 0.88);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom:   1px solid var(--border);
}

.site-header__inner {
  max-width:       1200px;
  margin-inline:   auto;
  padding:         var(--sp-2) var(--sp-3);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-2);
  flex-wrap:       wrap;
}

.site-header__title {
  font-family: var(--font-display);
  font-size:   clamp(1.2rem, 3vw, 1.6rem);
  font-style:  italic;
  font-weight: 500;
  color:       var(--text-1);
  letter-spacing: -0.01em;
}

.site-header__tagline {
  font-family:    var(--font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--text-2);
  margin-top:     0.1rem;
  opacity:        0.7;
}

.site-header__right {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  flex-wrap:   wrap;
}


/* =============================================================================
   8. STREAK BADGE
   ============================================================================= */

.streak-badge {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  padding:     0.4rem var(--sp-2);
  background:  var(--amber-glow);
  border:      1px solid rgba(212, 134, 42, 0.2);
  border-radius: 100px;
  white-space: nowrap;
  animation:   pulseGlow 4s ease-in-out infinite;
}

.streak-badge__number {
  font-family: var(--font-mono);
  font-size:   clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  color:       var(--amber-light);
  line-height: 1;
}

.streak-badge__label {
  font-size:   0.62rem;
  color:       var(--text-2);
  line-height: 1.3;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}


/* =============================================================================
   8b. VIEW TOGGLE
   ============================================================================= */

.view-toggle {
  display:       flex;
  background:    rgba(245, 237, 224, 0.04);
  border:        1px solid var(--border);
  border-radius: 100px;
  padding:       3px;
  gap:           2px;
}

.view-toggle__btn {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  padding:     0.28rem 0.75rem;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size:   0.65rem;
  letter-spacing: 0.06em;
  color:       var(--text-2);
  transition:  all 0.2s var(--ease-smooth);
}

.view-toggle__btn:hover { color: var(--text-1); }

.view-toggle__btn--active {
  background:  rgba(212, 134, 42, 0.18);
  border:      1px solid rgba(212, 134, 42, 0.3);
  color:       var(--amber-light);
}

.view-toggle__btn svg { flex-shrink: 0; }


/* =============================================================================
   9. VIEW PANELS
   ============================================================================= */

.view-panel { display: block; }
.view-panel[hidden] { display: none !important; }

.view-panel--active { animation: fadeUp 0.4s var(--ease-out) both; }


/* =============================================================================
   10. LEGEND
   ============================================================================= */

.legend {
  max-width:     1200px;
  margin-inline: auto;
  padding:       var(--sp-3) var(--sp-3) 0;
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           var(--sp-2);
  justify-content: space-between;
}

.legend__items {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--sp-2);
  align-items: center;
}

.legend__item {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
}

.legend__swatch {
  display:       block;
  width:         12px;
  height:        12px;
  border-radius: var(--cell-radius);
  flex-shrink:   0;
}

.legend__swatch--empty   { background: var(--cell-empty); border: 1px solid var(--border-mid); }
.legend__swatch--meeting { background: var(--cell-meeting); box-shadow: 0 0 6px rgba(107,158,122,0.5); }
.legend__swatch--special { background: var(--cell-special); box-shadow: 0 0 6px rgba(212,134,42,0.5); }

.legend__mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  position: relative;
  border: 1px solid var(--border-mid);
  background: var(--cell-empty);
}

.legend__mark--note::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  right: 1px;
  bottom: 1px;
  background: var(--rose-light);
  border: 1px solid rgba(8, 8, 8, 0.9);
}

.legend__mark--description::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  left: 1px;
  top: 1px;
  background: #8ec8ff;
  transform: rotate(45deg);
  border: 1px solid rgba(8, 8, 8, 0.9);
}

.legend__text {
  font-family: var(--font-mono);
  font-size:   0.7rem;
  color:       var(--text-2);
  letter-spacing: 0.03em;
}

.legend__hint {
  font-family:  var(--font-mono);
  font-size:    0.65rem;
  color:        var(--text-3);
  font-style:   italic;
  letter-spacing: 0.02em;
}


/* =============================================================================
   11. ÉV NAV
   ============================================================================= */

.year-nav {
  max-width:     1200px;
  margin-inline: auto;
  padding:       var(--sp-3) var(--sp-3) var(--sp-1);
  display:       flex;
  align-items:   center;
  gap:           var(--sp-2);
}

.year-display {
  font-family:    var(--font-display);
  font-style:     italic;
  font-size:      clamp(1.1rem, 2.5vw, 1.4rem);
  color:          var(--text-1);
  letter-spacing: 0.02em;
  min-width:      4.5ch;
  text-align:     center;
}

.year-btn {
  width:         34px;
  height:        34px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background:    var(--glass);
  border:        1px solid var(--border);
  color:         var(--text-2);
  font-size:     1rem;
  transition:
    background  0.15s,
    color       0.15s,
    transform   0.1s  var(--ease-bounce);
}

.year-btn:hover  { background: rgba(245,237,224,0.08); color: var(--text-1); border-color: var(--border-mid); }
.year-btn:active { transform: scale(0.88); }


/* =============================================================================
   12. HEATMAP
   ============================================================================= */

.heatmap-section {
  max-width:     1200px;
  margin-inline: auto;
  padding:       var(--sp-1) var(--sp-3) var(--sp-3);
  overflow-x:    auto;
  -webkit-overflow-scrolling: touch;
}

.heatmap-inner {
  display:     inline-flex;
  align-items: flex-start;
  gap:         0;
  min-width:   max-content;
}

.heatmap-weekdays {
  display:            grid;
  grid-template-rows: repeat(7, var(--cell-size));
  gap:                var(--cell-gap);
  flex-shrink:        0;
  width:              20px;
  margin-top:         calc(1.1rem + 8px);
  margin-right:       6px;
}

.heatmap-weekdays span {
  font-family:  var(--font-mono);
  font-size:    clamp(0.45rem, 0.85vw, 0.58rem);
  color:        var(--text-2);
  line-height:  var(--cell-size);
  text-align:   right;
  padding-right: 2px;
  opacity:      0;
}

.heatmap-weekdays span:nth-child(odd) { opacity: 0.45; }

.heatmap-right {
  display:        flex;
  flex-direction: column;
}

.heatmap-months {
  position:      relative;
  height:        1.1rem;
  margin-bottom: 8px;
}

.heatmap-month-label {
  position:       absolute;
  top:            0;
  font-family:    var(--font-mono);
  font-size:      0.58rem;
  color:          var(--text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space:    nowrap;
  opacity:        0.65;
}

.heatmap-grid {
  display: flex;
  gap:     var(--cell-gap);
}

.heatmap-week {
  display:               grid;
  grid-template-rows:    repeat(7, var(--cell-size));
  grid-template-columns: var(--cell-size);
  gap:                   var(--cell-gap);
}

.heatmap-cell {
  width:         var(--cell-size);
  height:        var(--cell-size);
  border-radius: var(--cell-radius);
  background:    var(--cell-empty);
  border:        1px solid rgba(245, 237, 224, 0.04);
  cursor:        pointer;
  animation:     cellIn 0.35s var(--ease-out) both;
  transition:
    background  0.2s,
    transform   0.15s var(--ease-bounce),
    box-shadow  0.2s;
  position: relative;
}

.heatmap-cell:hover {
  transform:    scale(1.5);
  z-index:      10;
  border-color: var(--border-hi);
}

.heatmap-cell--future { opacity: 0.2; cursor: default; }
.heatmap-cell--future:hover { transform: none; }

.heatmap-cell--meeting {
  background:   var(--cell-meeting);
  border-color: rgba(107, 158, 122, 0.6);
  box-shadow:   0 0 7px rgba(107, 158, 122, 0.4);
}

.heatmap-cell--special {
  background:   var(--cell-special);
  border-color: rgba(212, 134, 42, 0.6);
  box-shadow:   0 0 10px rgba(212, 134, 42, 0.5);
}

.heatmap-cell--today {
  outline:        2px solid rgba(245, 237, 224, 0.55);
  outline-offset: 1px;
}

.heatmap-cell--has-note::after {
  content:       '';
  position:      absolute;
  bottom:        1px;
  right:         1px;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #ff98bc;
  border:        1px solid rgba(8, 8, 8, 0.9);
  box-shadow:    0 0 0 1px rgba(255, 245, 235, 0.45);
  z-index:       2;
}

.heatmap-cell--has-description::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #8ec8ff;
  transform: rotate(45deg);
  border: 1px solid rgba(8, 8, 8, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 245, 235, 0.45);
  z-index: 2;
}


/* =============================================================================
   13. RICH TOOLTIP
   ============================================================================= */

.rich-tooltip {
  position:       fixed;
  z-index:        800;
  max-width:      220px;
  padding:        10px 14px;
  background:     var(--surface-1);
  border:         1px solid var(--border-mid);
  border-radius:  var(--radius-md);
  box-shadow:     0 12px 40px rgba(0,0,0,0.6);
  pointer-events: none;
  opacity:        0;
  transform:      translateY(6px);
  transition:     opacity 0.15s, transform 0.15s var(--ease-out);
}

.rich-tooltip[hidden] { display: none !important; }

.rich-tooltip--visible { opacity: 1; transform: translateY(0); }

.rich-tooltip__date {
  font-family:    var(--font-mono);
  font-size:      0.65rem;
  color:          var(--text-2);
  letter-spacing: 0.06em;
  margin-bottom:  4px;
}

.rich-tooltip__type {
  font-family: var(--font-body);
  font-style:  italic;
  font-size:   0.78rem;
  margin-top:  3px;
}

.rich-tooltip__type--meeting { color: var(--sage-light); }
.rich-tooltip__type--special { color: var(--amber-light); }

.rich-tooltip__note {
  font-size:   0.72rem;
  color:       var(--text-2);
  margin-top:  5px;
  line-height: 1.4;
  font-style:  italic;
  border-top:  1px solid var(--border);
  padding-top: 5px;
}

.rich-tooltip__description {
  font-size:   0.72rem;
  color:       var(--text-2);
  margin-top:  5px;
  line-height: 1.45;
  white-space: pre-line;
}


/* =============================================================================
   14. STATS
   ============================================================================= */

.stats {
  max-width:     1200px;
  margin-inline: auto;
  padding:       0 var(--sp-3) var(--sp-4);
  display:       grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap:           var(--sp-2);
  margin-top:    var(--sp-2);
}

.stats__card {
  padding:        var(--sp-3) var(--sp-2);
  background:     var(--glass);
  border:         1px solid var(--border);
  border-radius:  var(--radius-md);
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.2rem;
  transition:
    background  0.2s,
    transform   0.2s var(--ease-bounce),
    border-color 0.2s;
}

.stats__card:hover {
  background:   rgba(245, 237, 224, 0.04);
  transform:    translateY(-3px);
  border-color: var(--border-mid);
}

.stats__card--highlight {
  border-color:  rgba(212, 134, 42, 0.2);
  background:    var(--amber-glow);
}

.stats__icon {
  font-size:    1.1rem;
  margin-bottom: 0.1rem;
  opacity:      0.75;
}

.stats__number {
  font-family:    var(--font-mono);
  font-size:      clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight:    700;
  color:          var(--sage-light);
  line-height:    1;
  transition:     color 0.3s;
}

.stats__number--special { color: var(--amber-light); }
.stats__number--streak  { color: var(--rose-light); }

.stats__label {
  font-family:  var(--font-mono);
  font-size:    0.65rem;
  color:        var(--text-2);
  text-align:   center;
  line-height:  1.3;
  letter-spacing: 0.03em;
}

.stats__number--text {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 500;
  color:       var(--amber-light);
}

.stats__card--wide { grid-column: span 2; }


/* =============================================================================
   15. SECTION HEADER (általános)
   ============================================================================= */

.section-header {
  margin-bottom: var(--sp-3);
}

.section-eyebrow {
  font-family:    var(--font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--amber);
  opacity:        0.7;
  margin-bottom:  0.3rem;
}

.section-title {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 500;
  color:       var(--text-1);
  letter-spacing: -0.01em;
}


/* =============================================================================
   16. HAVI BONTÁS
   ============================================================================= */

.monthly-section {
  max-width:     1200px;
  margin-inline: auto;
  padding:       var(--sp-2) var(--sp-3) var(--sp-4);
}

.monthly-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--sp-2);
}

.month-card {
  padding:       var(--sp-2) var(--sp-2);
  background:    var(--glass);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  transition:
    background  0.2s,
    transform   0.2s var(--ease-bounce),
    border-color 0.2s;
  animation:    fadeUp 0.4s var(--ease-out) both;
  cursor:       default;
}

.month-card:hover {
  background:   rgba(245, 237, 224, 0.04);
  transform:    translateY(-2px);
  border-color: var(--border-mid);
}

.month-card__name {
  font-family:    var(--font-mono);
  font-size:      0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-2);
  margin-bottom:  0.5rem;
}

.month-card__bar-track {
  height:        4px;
  background:    var(--border);
  border-radius: 2px;
  margin-bottom: 0.6rem;
  overflow:      hidden;
}

.month-card__bar-fill {
  height:        100%;
  border-radius: 2px;
  background:    var(--sage);
  transition:    width 0.6s var(--ease-out);
  transform-origin: left;
}

.month-card__bar-fill--has-special {
  background: linear-gradient(90deg, var(--sage), var(--amber));
}

.month-card__counts {
  display:     flex;
  gap:         var(--sp-1);
  align-items: baseline;
}

.month-card__total {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size:   1.3rem;
  color:       var(--text-1);
  line-height: 1;
}

.month-card__detail {
  font-family: var(--font-mono);
  font-size:   0.65rem;
  color:       var(--text-2);
}

.month-card__special {
  font-family: var(--font-mono);
  font-size:   0.65rem;
  color:       var(--amber);
  margin-left: auto;
}

.month-card--empty {
  opacity: 0.35;
}


/* =============================================================================
   17. NAPLÓ / LISTA NÉZET
   ============================================================================= */

.diary-section {
  max-width:     900px;
  margin-inline: auto;
  padding:       var(--sp-4) var(--sp-3);
}

.diary-filter {
  display:       flex;
  gap:           0.5rem;
  flex-wrap:     wrap;
  margin-bottom: var(--sp-3);
}

.diary-filter__btn {
  padding:       0.3rem 0.9rem;
  border-radius: 100px;
  font-family:   var(--font-mono);
  font-size:     0.68rem;
  letter-spacing: 0.04em;
  background:    var(--glass);
  border:        1px solid var(--border);
  color:         var(--text-2);
  transition:    all 0.15s;
}

.diary-filter__btn:hover { border-color: var(--border-mid); color: var(--text-1); }

.diary-filter__btn--active {
  background:   var(--amber-dim);
  border-color: rgba(212, 134, 42, 0.3);
  color:        var(--amber-light);
}

.diary-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
}

.diary-entry {
  display:       grid;
  grid-template-columns: 80px 1fr;
  gap:           var(--sp-2);
  padding:       var(--sp-2) var(--sp-3);
  background:    var(--glass);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  transition:    all 0.2s var(--ease-smooth);
  animation:     fadeUp 0.35s var(--ease-out) both;
}

.diary-entry:hover {
  background:   rgba(245, 237, 224, 0.04);
  border-color: var(--border-mid);
}

.diary-entry--special {
  border-color: rgba(212, 134, 42, 0.25);
  background:   var(--amber-glow);
}

.diary-entry__date-block {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  border-right:   1px solid var(--border);
  padding-right:  var(--sp-2);
}

.diary-entry__day {
  font-family:  var(--font-display);
  font-style:   italic;
  font-size:    2rem;
  font-weight:  500;
  color:        var(--text-1);
  line-height:  1;
}

.diary-entry__month {
  font-family:    var(--font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-2);
  margin-top:     2px;
}

.diary-entry__year {
  font-family: var(--font-mono);
  font-size:   0.55rem;
  color:       var(--text-3);
}

.diary-entry__body {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            0.3rem;
}

.diary-entry__type {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  font-family: var(--font-mono);
  font-size:   0.7rem;
  letter-spacing: 0.05em;
}

.diary-entry__type-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
}

.diary-entry__type-dot--meeting { background: var(--sage); }
.diary-entry__type-dot--special { background: var(--amber); box-shadow: 0 0 6px rgba(212,134,42,0.5); }

.diary-entry__type-label--meeting { color: var(--sage-light); }
.diary-entry__type-label--special { color: var(--amber-light); }

.diary-entry__note {
  font-style:  italic;
  font-size:   0.85rem;
  color:       var(--text-2);
  line-height: 1.5;
}

.diary-entry__description {
  font-size: 0.83rem;
  color: var(--text-2);
  line-height: 1.6;
  border-left: 2px solid rgba(212, 134, 42, 0.25);
  padding-left: 0.65rem;
  margin-top: 0.1rem;
  white-space: pre-line;
}

.diary-empty {
  text-align:  center;
  padding:     var(--sp-8) var(--sp-3);
  color:       var(--text-2);
}

.diary-empty__icon {
  font-size:     2.5rem;
  margin-bottom: var(--sp-2);
  opacity:       0.4;
}

.diary-empty__text {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   1.1rem;
  color:       var(--text-3);
}


/* =============================================================================
   18. CONTEXT MENU
   ============================================================================= */

.context-menu {
  position:      fixed;
  z-index:       500;
  min-width:     200px;
  background:    var(--surface-1);
  border:        1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding:       0.4rem;
  box-shadow:    0 20px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,245,235,0.03);
  animation:     fadeIn 0.15s var(--ease-out) both;
}

.context-menu[hidden] { display: none; }

.context-menu__header {
  padding:        0.4rem 0.7rem 0.6rem;
  font-family:    var(--font-mono);
  font-size:      0.65rem;
  letter-spacing: 0.08em;
  color:          var(--amber);
  opacity:        0.75;
  border-bottom:  1px solid var(--border);
  margin-bottom:  0.3rem;
}

.context-menu__item {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  width:         100%;
  padding:       0.48rem 0.7rem;
  border-radius: var(--radius-sm);
  font-family:   var(--font-mono);
  font-size:     0.78rem;
  color:         var(--text-1);
  text-align:    left;
  transition:    background 0.1s;
  letter-spacing: 0.02em;
}

.context-menu__item:hover { background: rgba(245,237,224,0.06); }

.context-menu__item--danger { color: var(--error); }
.context-menu__item--danger:hover { background: var(--error-dim); }

.context-menu__dot {
  display:       block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
}

.context-menu__dot--meeting { background: var(--sage); }
.context-menu__dot--special { background: var(--amber); }

.context-menu__icon {
  font-size:  0.9rem;
  width:      8px;
  text-align: center;
  color:      var(--text-2);
}

.context-menu__separator {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     0.3rem 0;
}


/* =============================================================================
   19. NOTE MODAL
   ============================================================================= */

.note-modal {
  position:        fixed;
  inset:           0;
  z-index:         600;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--sp-2);
  animation:       fadeIn 0.2s var(--ease-out) both;
}

.note-modal[hidden] { display: none !important; }

.note-modal__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(8, 8, 8, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.note-modal__panel {
  position:      relative;
  z-index:       1;
  width:         100%;
  max-width:     480px;
  padding:       var(--sp-4);
  background:    var(--surface-1);
  border:        1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  box-shadow:    0 40px 100px rgba(0,0,0,0.7);
  animation:     fadeUp 0.25s var(--ease-out) both;
}

.note-modal__header {
  margin-bottom: var(--sp-3);
}

.note-modal__eyebrow {
  font-family:    var(--font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--amber);
  opacity:        0.7;
  margin-bottom:  0.3rem;
}

.note-modal__title {
  font-family:  var(--font-display);
  font-style:   italic;
  font-size:    1.6rem;
  font-weight:  500;
  color:        var(--text-1);
}

.note-modal__date {
  font-family:    var(--font-mono);
  font-size:      0.68rem;
  letter-spacing: 0.08em;
  color:          var(--text-2);
  margin-top:     0.3rem;
}

.note-modal__textarea {
  width:         100%;
  background:    rgba(245,237,224,0.03);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  color:         var(--text-1);
  padding:       var(--sp-2);
  font-family:   var(--font-body);
  font-style:    italic;
  font-size:     0.9rem;
  line-height:   1.7;
  outline:       none;
  transition:    border-color 0.15s;
  min-height:    120px;
}

.note-modal__textarea:focus {
  border-color: rgba(212, 134, 42, 0.4);
  box-shadow:   0 0 0 3px rgba(212, 134, 42, 0.08);
}

.note-modal__textarea::placeholder { color: var(--text-3); }

.note-modal__char-count {
  font-family:  var(--font-mono);
  font-size:    0.65rem;
  color:        var(--text-3);
  text-align:   right;
  margin-top:   0.4rem;
  margin-bottom: var(--sp-3);
}

.note-modal__actions {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--sp-1);
}

.note-modal__btn {
  padding:       0.55rem 1.4rem;
  border-radius: var(--radius-sm);
  font-family:   var(--font-mono);
  font-size:     0.78rem;
  font-weight:   500;
  letter-spacing: 0.05em;
  border:        1px solid transparent;
  transition:    all 0.15s;
}

.note-modal__btn:active { transform: scale(0.95); }

.note-modal__btn--cancel {
  background:  var(--glass);
  border-color: var(--border);
  color:       var(--text-2);
}

.note-modal__btn--cancel:hover {
  background:  rgba(245,237,224,0.06);
  color:       var(--text-1);
}

.note-modal__btn--save {
  background:   var(--amber-dim);
  border-color: rgba(212, 134, 42, 0.35);
  color:        var(--amber-light);
}

.note-modal__btn--save:hover {
  background: rgba(212, 134, 42, 0.22);
  box-shadow: 0 0 20px rgba(212, 134, 42, 0.12);
}

/* =============================================================================
   19b. DESCRIPTION MODAL
   ============================================================================= */

.description-modal {
  position: fixed;
  inset: 0;
  z-index: 610;
  display: grid;
  place-items: center;
  padding: 1rem;
  animation: fadeIn 0.2s var(--ease-out) both;
}

.description-modal[hidden] { display: none !important; }

.description-modal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(24, 20, 14, 0.78), rgba(7, 7, 7, 0.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.description-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: min(88vh, 860px);
  padding: var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 100px rgba(0,0,0,0.72);
  animation: fadeUp 0.25s var(--ease-out) both;
  display: grid;
  grid-template-rows: auto auto minmax(250px, 1fr) auto;
  gap: 0.45rem;
  overflow: hidden;
}

.description-modal__header {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.6rem;
}

.description-modal__header-main { min-width: 0; }
.description-modal__header-actions {
  display: flex;
  align-items: flex-start;
  gap: 0.42rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.description-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-light);
  opacity: 0.7;
  margin-bottom: 0.18rem;
}

.description-modal__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.1;
}

.description-modal__date {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  color: var(--text-2);
  margin-top: 0.26rem;
}

.description-modal__status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.description-modal__status,
.description-modal__save-hint {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.description-modal--editing .description-modal__status {
  color: var(--amber-light);
}

.description-modal__editor-shell {
  background: rgba(245,237,224,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  overflow: hidden;
}

.description-modal__textarea {
  width: 100%;
  min-height: 0;
  height: 100%;
  max-height: 55vh;
  background: rgba(245,237,224,0.01);
  border: 1px solid rgba(245, 237, 224, 0.08);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  padding: 0.85rem 0.95rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: 0.01em;
  text-align: left;
  font-style: normal;
  tab-size: 2;
  outline: none;
  resize: none;
  overflow: auto;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.description-modal__textarea:focus {
  border-color: rgba(212, 134, 42, 0.4);
  box-shadow: 0 0 0 3px rgba(212, 134, 42, 0.08);
}

.description-modal__textarea[readonly] {
  color: var(--text-2);
  background: rgba(245, 237, 224, 0.02);
  border-color: rgba(245, 237, 224, 0.06);
}

.description-modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  flex-wrap: wrap;
}

.description-modal__char-count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-3);
}

.description-modal__actions {
  display: flex;
  margin-left: auto;
  gap: var(--sp-1);
}

.description-modal__btn {
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  transition: all 0.14s var(--ease-smooth);
}

.description-modal__btn:active { transform: scale(0.95); }

.description-modal__btn--ghost {
  padding: 0.35rem 0.72rem;
  background: rgba(245, 237, 224, 0.02);
  color: var(--text-2);
}

.description-modal__btn--ghost:hover {
  color: var(--text-1);
  background: rgba(245, 237, 224, 0.06);
}

.description-modal__btn--accent {
  background: rgba(212, 134, 42, 0.12);
  color: var(--amber-light);
  border-color: rgba(212, 134, 42, 0.35);
}

.description-modal__btn--accent:hover {
  background: rgba(212, 134, 42, 0.2);
}

.description-modal__btn--cancel {
  background: rgba(245, 237, 224, 0.03);
  color: var(--text-2);
}

.description-modal__btn--cancel:hover {
  background: rgba(245, 237, 224, 0.09);
  color: var(--text-1);
}

.description-modal__btn--save {
  background: var(--amber-dim);
  border-color: rgba(212, 134, 42, 0.35);
  color: var(--amber-light);
}

.description-modal__btn--save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.description-modal__btn--save:not(:disabled):hover {
  background: rgba(212, 134, 42, 0.22);
  box-shadow: 0 0 20px rgba(212, 134, 42, 0.12);
}

@media (max-width: 700px) {
  .description-modal {
    padding: 0.35rem;
  }

  .description-modal__panel {
    max-height: 92vh;
    border-radius: 12px;
    padding: 0.75rem;
    grid-template-rows: auto auto minmax(170px, 1fr) auto;
  }

  .description-modal__header {
    flex-direction: column;
    gap: 0.55rem;
  }

  .description-modal__header-actions {
    justify-content: flex-start;
  }

  .description-modal__status-row {
    gap: 0.35rem;
  }

  .description-modal__textarea {
    max-height: 52vh;
    font-size: 0.9rem;
  }

  .description-modal__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .description-modal__actions {
    width: 100%;
    margin-left: 0;
  }

  .description-modal__actions .description-modal__btn {
    flex: 1;
  }
}


/* =============================================================================
   20. EXPORT / IMPORT
   ============================================================================= */

.io-section {
  max-width:     1200px;
  margin-inline: auto;
  padding:       var(--sp-2) var(--sp-3) var(--sp-6);
  border-top:    1px solid var(--border);
  margin-top:    var(--sp-2);
}

.io-header { margin-bottom: var(--sp-2); }

.io-eyebrow {
  font-family:    var(--font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--amber);
  opacity:        0.6;
  margin-bottom:  0.3rem;
}

.io-title {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 500;
  color:       var(--text-1);
  margin-bottom: 0.3rem;
}

.io-desc {
  font-size:  0.78rem;
  color:      var(--text-2);
  font-style: italic;
}

.io-buttons {
  display:       flex;
  gap:           var(--sp-2);
  flex-wrap:     wrap;
  margin-bottom: var(--sp-1);
  margin-top:    var(--sp-2);
}

.io-btn {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  padding:     0.55rem 1.3rem;
  border-radius: var(--radius-sm);
  font-family:   var(--font-mono);
  font-size:     0.78rem;
  font-weight:   500;
  letter-spacing: 0.05em;
  border:        1px solid transparent;
  transition:    all 0.15s;
}

.io-btn:active { transform: scale(0.95); }

.io-btn__icon { font-size: 1rem; line-height: 1; }

.io-btn--export {
  background:   var(--sage-dim);
  border-color: rgba(107,158,122,0.3);
  color:        var(--sage-light);
}

.io-btn--export:hover {
  background: rgba(107,158,122,0.22);
  box-shadow: 0 0 20px rgba(107,158,122,0.1);
}

.io-btn--import {
  background:  rgba(245,237,224,0.05);
  border-color: var(--border-mid);
  color:       var(--text-2);
}

.io-btn--import:hover {
  background:  rgba(245,237,224,0.08);
  color:       var(--text-1);
}

.io-note {
  font-size:  0.7rem;
  color:      var(--text-3);
  font-style: italic;
}


/* =============================================================================
   21. TOAST
   ============================================================================= */

.io-toast {
  position:      fixed;
  bottom:        var(--sp-4);
  left:          50%;
  transform:     translateX(-50%) translateY(16px);
  background:    var(--surface-1);
  border:        1px solid rgba(107,158,122,0.35);
  color:         var(--sage-light);
  font-family:   var(--font-mono);
  font-size:     0.75rem;
  letter-spacing: 0.04em;
  padding:       0.6rem 1.6rem;
  border-radius: 100px;
  box-shadow:    0 8px 32px rgba(0,0,0,0.5);
  z-index:       9000;
  opacity:       0;
  transition:    opacity 0.25s, transform 0.3s var(--ease-bounce);
  pointer-events: none;
  white-space:   nowrap;
}

.io-toast--visible {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

.io-toast--error {
  border-color: rgba(196,74,74,0.4);
  color:        var(--error);
}


/* =============================================================================
   22. FOOTER
   ============================================================================= */

.site-footer {
  margin-top:  auto;
  border-top:  1px solid var(--border);
  padding:     var(--sp-3);
}

.site-footer__inner {
  max-width:       1200px;
  margin-inline:   auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-inline:  var(--sp-3);
}

.site-footer__text {
  font-family:    var(--font-display);
  font-style:     italic;
  font-size:      0.85rem;
  color:          var(--text-3);
  letter-spacing: 0.02em;
}

.site-footer__version {
  font-family:    var(--font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.12em;
  color:          var(--text-3);
  text-transform: uppercase;
}


/* =============================================================================
   23. RESZPONZÍV
   ============================================================================= */

@media (min-width: 600px) {
  .pin-card { padding: var(--sp-6) var(--sp-5); }
  .pin-key  { aspect-ratio: 1.15; }
}

@media (min-width: 900px) {
  .site-header__inner,
  .legend,
  .year-nav,
  .heatmap-section,
  .stats,
  .monthly-section { padding-inline: var(--sp-4); }
}

@media (min-width: 1200px) {
  .site-header__inner,
  .legend,
  .year-nav,
  .heatmap-section,
  .stats,
  .monthly-section { padding-inline: var(--sp-6); }
}

@media (max-width: 480px) {
  .stats__card--wide { grid-column: span 1; }
  .view-toggle__btn span:last-child { display: none; }
  .site-header__right { gap: var(--sp-1); }
  .diary-entry { grid-template-columns: 65px 1fr; }
}


/* =============================================================================
   24. PREFERS-REDUCED-MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ambient-blob { animation: none !important; }
}


/* =============================================================================
   26. WEBAUTHN BIOMETRIC BUTTON
   ============================================================================= */

.pin-biometric-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  margin-top:      var(--sp-2);
  padding:         0.75rem 1.25rem;
  background:      transparent;
  border:          1px solid var(--border);
  border-radius:   var(--radius-md);
  color:           var(--text-2);
  font-family:     var(--font-mono);
  font-size:       0.75rem;
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  cursor:          pointer;
  transition:
    border-color 0.2s,
    color        0.2s,
    background   0.2s,
    box-shadow   0.2s;
  -webkit-tap-highlight-color: transparent;
}

.pin-biometric-btn:hover {
  border-color: var(--border-mid);
  color:        var(--text-1);
  background:   var(--glass);
}

.pin-biometric-btn:active {
  transform:  scale(0.97);
  background: rgba(245, 237, 224, 0.06);
}

.pin-biometric-btn svg {
  flex-shrink: 0;
  opacity:     0.55;
  transition:  opacity 0.2s;
}

.pin-biometric-btn:hover svg {
  opacity: 0.85;
}


/* =============================================================================
   25. SYNC INDIKÁTOR – felhő szinkron állapot
   ============================================================================= */

.sync-indicator {
  position: fixed;
  bottom: 72px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  transition: opacity 0.3s, transform 0.3s, background 0.3s;
  z-index: 50;
  user-select: none;
  pointer-events: none;
}

.sync-indicator--synced {
  background: rgba(107, 158, 122, 0.12);
  border-color: rgba(107, 158, 122, 0.25);
  color: var(--sage-light);
  opacity: 0;
  transform: translateY(4px);
  animation: sync-fade-out 3s forwards 1.5s;
}

.sync-indicator--syncing {
  background: rgba(212, 134, 42, 0.10);
  border-color: rgba(212, 134, 42, 0.22);
  color: var(--amber-light);
  opacity: 1;
}

.sync-indicator--offline {
  background: rgba(245, 237, 224, 0.04);
  border-color: var(--border);
  color: var(--text-2);
  opacity: 0.6;
}

.sync-indicator--error {
  background: rgba(196, 74, 74, 0.12);
  border-color: rgba(196, 74, 74, 0.25);
  color: #e07070;
  opacity: 1;
}

.sync-indicator__icon {
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.sync-indicator--syncing .sync-indicator__icon {
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes sync-fade-out {
  0%   { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(4px); }
}

@media (max-width: 480px) {
  .sync-indicator {
    bottom: 16px;
    right: 12px;
    font-size: 0.65rem;
    padding: 5px 10px 5px 8px;
  }
}