:root{
    --bg: #0a0e14;
    --bg-radial-1: rgba(94,234,212,0.10);
    --bg-radial-2: rgba(167,139,250,0.10);
    --grid-line: rgba(148,197,255,0.05);
    --dot: rgba(148,197,255,0.09);

    --panel: rgba(17,24,34,0.62);
    --panel-solid: #10161f;
    --border: rgba(148,197,255,0.14);
    --border-strong: rgba(148,197,255,0.34);

    --ink: #e9eef5;
    --ink-soft: #8b97a8;
    --ink-faint: #4c5765;

    --accent: #5eead4;
    --accent-2: #a78bfa;
    --accent-glow: rgba(94,234,212,0.35);
    --danger: #fb7185;
    --ok: #34d399;
    --warn: #fbbf24;

    --c-holiday: #fb7185;
    --c-vacation: #fbbf24;
    --c-nonworking: #64748b;

    --radius: 10px;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --sans: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  }

  * { box-sizing: border-box; }

  body{
    margin:0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    position: relative;
  }

  body::before{
    content:"";
    position: fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(circle at 15% -10%, var(--bg-radial-1), transparent 45%),
      radial-gradient(circle at 88% 4%, var(--bg-radial-2), transparent 42%),
      radial-gradient(var(--dot) 1px, transparent 1px);
    background-size: auto, auto, 26px 26px;
  }

  .app{ max-width: 1240px; margin: 0 auto; padding: 28px 20px 80px; position:relative; z-index:1; }

  /* ---------- MASTHEAD ---------- */
  .masthead{
    display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
    flex-wrap:wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 18px; margin-bottom: 26px;
  }
  .masthead h1{
    font-family: var(--sans); font-weight:600; letter-spacing:-0.01em;
    font-size: clamp(24px, 3.4vw, 36px); margin:0; color:#fff;
    display:flex; align-items:center; gap:12px;
  }
  .masthead h1 .dot{
    width:9px; height:9px; border-radius:50%; background: var(--accent);
    box-shadow: 0 0 10px 2px var(--accent-glow);
    display:inline-block; animation: pulse 2.4s ease-in-out infinite;
  }
  .masthead .subtitle{
    font-family: var(--mono); font-size:12px; color: var(--ink-soft); margin-top:6px; letter-spacing:.01em;
  }
  .masthead .subtitle::before{ content:"// "; color: var(--ink-faint); }

  .year-stamp{
    display:flex; align-items:center; gap:10px;
    font-family: var(--mono);
    border: 1px solid var(--border-strong); border-radius: 8px;
    padding: 8px 10px 8px 16px; background: var(--panel);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset;
  }
  .year-stamp label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); }
  .year-stamp input{
    width: 74px; font-family: var(--mono); font-size:20px; font-weight:600;
    border:none; background:transparent; color: var(--accent); text-align:right;
    text-shadow: 0 0 14px var(--accent-glow);
  }
  .year-stamp input:focus{ outline: none; }
  .refresh-btn{
    border: 1px solid var(--border-strong); background: transparent; color: var(--accent);
    font-family: var(--mono); font-size:11.5px; padding:7px 12px; border-radius: 8px;
    cursor:pointer; transition: all .15s ease;
  }
  .refresh-btn:hover{ background: var(--accent); color:#06231d; box-shadow: 0 0 18px var(--accent-glow); border-color: var(--accent); }

  /* ---------- LAYOUT ---------- */
  .layout{ display:grid; grid-template-columns: 300px 1fr; gap: 22px; align-items:start; }
  @media (max-width: 880px){ .layout{ grid-template-columns: 1fr; } }

  /* ---------- SETTINGS ---------- */
  .settings-panel details{
    background: var(--panel); backdrop-filter: blur(10px);
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 10px; overflow:hidden; transition: border-color .15s ease;
  }
  .settings-panel details[open]{ border-color: var(--border-strong); box-shadow: 0 0 24px -8px var(--accent-glow); }
  .settings-panel summary{
    font-family: var(--mono); font-size: 11.5px; font-weight:500; text-transform: uppercase;
    letter-spacing: .08em; padding: 13px 14px; cursor: pointer; list-style: none;
    display:flex; align-items:center; justify-content:space-between; color: var(--ink-soft);
  }
  .settings-panel summary::before{ content:"❯ "; color: var(--accent); }
  .settings-panel summary::-webkit-details-marker{ display:none; }
  .settings-panel summary::after{ content:"+"; font-size:15px; color: var(--ink-faint); }
  .settings-panel details[open] summary::after{ content:"–"; color: var(--accent); }
  .settings-body{ padding: 4px 14px 16px; display:flex; flex-direction:column; gap:11px; border-top:1px solid var(--border); padding-top:12px; }
  .field{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; }
  .field label{ color: var(--ink-soft); }
  .field input[type=number], .field input[type=text]{
    width: 108px; font-family: var(--mono); font-size:12.5px; padding:5px 7px;
    border:1px solid var(--border); border-radius: 6px; background:#0c1119; color: var(--ink);
  }
  .field input:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94,234,212,0.14); }
  .field.checkbox{ justify-content: flex-start; }
  .field.checkbox input{ margin-right:8px; accent-color: var(--accent); }
  .helptext{ font-family: var(--mono); font-size: 11px; color: var(--ink-faint); line-height:1.5; margin: -2px 0 4px; }
  .reset-btn{
    width:100%; margin-top:2px; padding:9px; border-radius:8px; border:1px dashed var(--border-strong);
    background:transparent; font-family: var(--mono); font-size:11.5px; cursor:pointer; color: var(--ink-soft);
    transition: all .15s ease;
  }
  .reset-btn:hover{ border-color: var(--danger); color: var(--danger); border-style: solid; }

  /* ---------- HOLIDAYS ---------- */
  .holidays-box{
    background: var(--panel); backdrop-filter: blur(10px);
    border:1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px; margin-bottom: 24px;
  }
  .holidays-box h2, .content h2{
    font-family: var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em;
    margin: 0 0 8px; color: var(--ink-soft); font-weight:500;
  }
  .holidays-box h2::before, .content h2::before{ content:"❯ "; color: var(--accent); }
  .chip-row{ display:flex; flex-wrap:wrap; gap:7px; margin: 12px 0; min-height: 22px; }
  .chip{
    display:inline-flex; align-items:center; gap:7px; font-family: var(--mono); font-size:12px;
    background:#0c1119; border:1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 12px;
    color: var(--ink-soft);
  }
  .chip button{
    border:none; background: rgba(251,113,133,0.12); color: var(--danger); width:17px; height:17px;
    border-radius:50%; cursor:pointer; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center;
    transition: all .15s ease;
  }
  .chip button:hover{ background: var(--danger); color:#1a0508; }
  .holiday-add{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .holiday-add input[type=text]{
    font-family: var(--mono); padding:6px 8px; border:1px solid var(--border); border-radius:6px;
    background:#0c1119; color: var(--ink); width:120px;
  }
  .holiday-add button{
    font-family: var(--mono); font-size:11.5px; padding:7px 13px; border-radius:6px;
    border:1px solid var(--border-strong); background:transparent; color: var(--accent); cursor:pointer;
    transition: all .15s ease;
  }
  .holiday-add button:hover{ background: var(--accent); color:#06231d; box-shadow: 0 0 18px var(--accent-glow); }
  .status-line{ font-family: var(--mono); font-size:11.5px; color: var(--ink-faint); margin-top:6px; }
  .status-line.error{ color: var(--danger); }

  /* ---------- CALENDAR ---------- */
  .legend{ display:flex; flex-wrap:wrap; gap:10px; font-size:11.5px; margin-bottom:16px; }
  .legend span{
    display:inline-flex; align-items:center; gap:6px; font-family: var(--mono); color: var(--ink-soft);
    background: var(--panel); border:1px solid var(--border); border-radius:999px; padding:4px 10px 4px 8px;
  }
  .legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; box-shadow: 0 0 6px currentColor; }

  .months-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  @media (max-width: 900px){ .months-grid{ grid-template-columns: repeat(2, 1fr);} }
  @media (max-width: 560px){ .months-grid{ grid-template-columns: 1fr;} }

  .month{
    background: var(--panel); backdrop-filter: blur(10px);
    border:1px solid var(--border); border-radius: var(--radius); padding: 12px;
    transition: border-color .15s ease;
  }
  .month:hover{ border-color: var(--border-strong); }
  .month h3{
    font-family: var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
    margin: 0 0 10px; text-align:center; color: var(--ink-soft); font-weight:500;
  }
  .week-header, .day-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
  .week-header span{ font-size:9px; text-align:center; color: var(--ink-faint); font-family: var(--mono); }
  .day{
    aspect-ratio: 1; display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size:11px; font-weight:500; border-radius: 5px;
    border: 1px solid var(--border); cursor:pointer;
    color: var(--ink-soft); background: var(--panel-solid); padding:0;
    transition: transform .1s ease, box-shadow .15s ease;
  }
  .day.empty{ visibility:hidden; cursor:default; border:none; }
  .day:focus-visible{ outline: 2px solid var(--accent); outline-offset:1px; }
  .day.type-hours{ color:#06131a; font-weight:600; border-color: transparent; }
  .day.type-holiday{ background: rgba(251,113,133,0.14); color: var(--c-holiday); border-color: rgba(251,113,133,0.3); cursor:default; }
  .day.type-vacation{ background: rgba(251,191,36,0.16); color: var(--c-vacation); border-color: rgba(251,191,36,0.35); }
  .day.type-nonworking{ background: rgba(100,116,139,0.18); color: var(--c-nonworking); border-color: rgba(100,116,139,0.4); }
  .day.type-before_start{
    background: repeating-linear-gradient(45deg, #0c1119 0 4px, #0f1520 4px 8px);
    color: var(--ink-faint); border-color: var(--border); cursor:default;
  }
  .day:not(.type-holiday):not(.type-before_start):not(.empty):hover{
    transform: translateY(-1px); box-shadow: 0 4px 16px -4px rgba(94,234,212,0.35);
  }

  /* ---------- SUMMARY ---------- */
  .summary-wrap{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px; margin-top:28px; }
  .stamp-card{
    background: var(--panel); backdrop-filter: blur(10px);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; position:relative; overflow:hidden;
  }
  .stamp-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
  }
  .stamp-card h3{
    font-family: var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
    margin:0 0 14px; color: var(--ink-faint); font-weight:500;
  }
  .stamp-total{
    font-family: var(--mono); font-size: 42px; font-weight:600; color:#fff; line-height:1;
    text-shadow: 0 0 24px rgba(94,234,212,0.25);
  }
  .stamp-total small{ font-size:13px; font-weight:400; color: var(--ink-faint); }
  .diff-badge{
    display:inline-block; margin-top:12px; font-family: var(--mono); font-size:12.5px;
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--danger); color: var(--danger);
    background: rgba(251,113,133,0.08);
  }
  .diff-badge.ok{ border-color: var(--ok); color: var(--ok); background: rgba(52,211,153,0.08); }
  .mini-stats{ display:flex; gap:20px; margin-top:16px; font-size:11.5px; color: var(--ink-faint); flex-wrap:wrap; font-family: var(--mono); }
  .mini-stats b{ display:block; font-family: var(--mono); font-size:17px; color: var(--ink); font-weight:600; }

  footer{
    margin-top: 44px; font-family: var(--mono); font-size:11px; color: var(--ink-faint); text-align:center;
  }
  footer::before{ content:"// "; }

  @keyframes pulse{
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
  }

  @media (prefers-reduced-motion: reduce){
    * { transition:none !important; animation:none !important; }
  }