:root{
    --bg: #0f1210;
    --panel: #171b18;
    --line: #2a2f2b;
    --text: #eef0ec;
    --muted: #8c948d;
    --accent: #d4ff5c;
    --accent-dim: #9cb844;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family: 'Courier New', ui-monospace, monospace;
    display:flex;
    justify-content:center;
    padding:32px 16px;
    position:relative;
  }

  /* --- hamburger --- */
  .burger{
    position:fixed;
    top:24px;
    left:24px;
    width:38px;
    height:38px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:3px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    z-index:20;
  }
  .burger span{
    display:block;
    width:16px;
    height:2px;
    background:var(--muted);
    transition:transform .2s ease, opacity .2s ease, background .2s ease;
  }
  .burger:hover span{ background:var(--accent); }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:15;
  }
  .overlay.show{ opacity:1; pointer-events:auto; }

  .nav-panel{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:260px;
    background:var(--panel);
    border-right:1px solid var(--line);
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:18;
    padding:80px 0 24px;
    overflow-y:auto;
  }
  .nav-panel.show{ transform:translateX(0); }
  .nav-eyebrow{
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    padding:0 24px;
    margin-bottom:14px;
  }
  .nav-list{ display:flex; flex-direction:column; }
  .nav-list a{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:13px 24px;
    color:var(--text);
    text-decoration:none;
    font-size:14px;
    border-left:2px solid transparent;
  }
  .nav-list a .num{
    color:var(--muted);
    font-size:11px;
    min-width:16px;
  }
  .nav-list a:hover{
    background:#0d100e;
    border-left-color:var(--accent);
    color:var(--accent);
  }
  .nav-list a.current{
    border-left-color:var(--accent-dim);
    color:var(--accent);
  }
  .nav-list a.current .num{ color:var(--accent-dim); }

  .card{
    width:100%;
    max-width:460px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    padding:28px 26px 22px;
    margin-top:6px;
  }
  h1{
    font-size:14px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 22px;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
  }
  h1 span{ color:var(--accent); }

  label{
    display:block;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:6px;
  }
  .field{ margin-bottom:16px; }
  .rate-row{ display:flex; gap:8px; }
  .rate-row button{
    flex:1;
    padding:9px 0;
    background:transparent;
    border:1px solid var(--line);
    color:var(--muted);
    font-family:inherit;
    font-size:13px;
    cursor:pointer;
    border-radius:3px;
  }
  .rate-row button.active{
    border-color:var(--accent);
    color:var(--accent);
  }
  input[type=number], input[type=text]{
    width:100%;
    background:#0d100e;
    border:1px solid var(--line);
    color:var(--text);
    font-family:inherit;
    font-size:18px;
    padding:11px 12px;
    border-radius:3px;
  }
  input:focus{ outline:none; border-color:var(--accent-dim); }
  .ops{
    display:flex;
    gap:8px;
    margin:20px 0 4px;
  }
  .ops button{
    flex:1;
    padding:12px 0;
    background:var(--accent);
    color:#0f1210;
    border:none;
    font-family:inherit;
    font-weight:bold;
    font-size:13px;
    letter-spacing:.03em;
    text-transform:uppercase;
    cursor:pointer;
    border-radius:3px;
  }
  .ops button.secondary{
    background:transparent;
    color:var(--accent);
    border:1px solid var(--accent-dim);
  }
  .result{
    margin-top:22px;
    border-top:1px dashed var(--line);
    padding-top:18px;
    display:none;
  }
  .result.show{ display:block; }
  .row{
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    font-size:14px;
  }
  .row .k{ color:var(--muted); }
  .row .v{ font-weight:bold; }
  .row.total .v{ color:var(--accent); font-size:17px; }
  .words{
    margin-top:12px;
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
    font-style:italic;
  }
  .copy{
    margin-top:14px;
    width:100%;
    padding:9px 0;
    background:transparent;
    border:1px solid var(--line);
    color:var(--muted);
    font-family:inherit;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
    border-radius:3px;
  }
  .copy:hover{ border-color:var(--accent-dim); color:var(--accent); }
  .formula{
    margin-top:20px;
    font-size:11px;
    color:var(--muted);
    border-top:1px solid var(--line);
    padding-top:14px;
  }
  .formula code{
    display:block;
    color:var(--text);
    margin-top:4px;
    font-size:12px;
  }

  /* --- tabs --- */
  .tabs{
    display:flex;
    gap:4px;
    margin-bottom:20px;
    border-bottom:1px solid var(--line);
  }
  .tab-btn{
    flex:1;
    background:transparent;
    border:none;
    color:var(--muted);
    padding:10px 2px;
    font-family:inherit;
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    cursor:pointer;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
  }
  .tab-btn.active{ color:var(--accent); border-bottom-color:var(--accent); }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; }

  /* --- label + inline action (e.g. "Сьогодні") --- */
  .label-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:6px;
  }
  .label-row label{ margin-bottom:0; }
  .today-btn{
    background:transparent;
    border:none;
    color:var(--accent-dim);
    font-family:inherit;
    font-size:11px;
    letter-spacing:.04em;
    cursor:pointer;
    padding:0;
  }
  .today-btn:hover{ color:var(--accent); }

  input[type=date]{
    width:100%;
    background:#0d100e;
    border:1px solid var(--line);
    color:var(--text);
    font-family:inherit;
    font-size:15px;
    padding:10px 12px;
    border-radius:3px;
    color-scheme: dark;
  }
  input[type=date]:focus{ outline:none; border-color:var(--accent-dim); }

  /* --- side-by-side fields --- */
  .field-row{ display:flex; gap:10px; }
  .field-row .field{ flex:1; }

  /* --- toggle / checkbox row --- */
  .toggle-row{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:var(--text);
    margin-bottom:14px;
  }
  .toggle-row input[type=checkbox]{
    accent-color:var(--accent);
    width:14px;
    height:14px;
    cursor:pointer;
  }

  .check-grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-top:8px;
  }
  .check-grid label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--text);
    text-transform:none;
    letter-spacing:0;
    margin:0;
    cursor:pointer;
  }
  .check-grid input[type=checkbox]{
    accent-color:var(--accent);
    width:14px;
    height:14px;
    cursor:pointer;
  }

  details.adv{
    margin-bottom:16px;
    border:1px solid var(--line);
    border-radius:3px;
  }
  details.adv summary{
    cursor:pointer;
    padding:9px 12px;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    list-style:none;
  }
  details.adv summary::-webkit-details-marker{ display:none; }
  details.adv summary:hover{ color:var(--accent); }
  details.adv .adv-body{ padding:0 12px 14px; }

  .op-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:18px;
  }
  .op-grid button{
    padding:10px 8px;
    background:transparent;
    border:1px solid var(--line);
    color:var(--muted);
    font-family:inherit;
    font-size:11.5px;
    line-height:1.3;
    cursor:pointer;
    border-radius:3px;
    text-align:left;
  }
  .op-grid button.active{
    border-color:var(--accent);
    color:var(--accent);
    background:#0d100e;
  }

  .result-big{
    font-size:26px;
    font-weight:bold;
    color:var(--accent);
    margin-top:4px;
  }
  .result-sub{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
  }