:root{
      /* iOS-light inspired */
      --bg:#F2F2F7;
      --card:#FFFFFF;
      --card-muted:#F7F7FA;
      --card-soft:#FAFAFC;
      --separator:#E5E5EA;
      --separator-strong:#D1D1D6;
      --text:#1C1C1E;
      --text-secondary:#636366;
      --text-tertiary:#8E8E93;

      --green:#10A37F;
      --green-dark:#08775D;
      --green-soft:rgba(16,163,127,.12);

      --orange:#D18427;
      --orange-dark:#9A5E14;
      --orange-soft:rgba(209,132,39,.13);

      --red:#F04361;
      --red-dark:#B72A43;
      --red-soft:rgba(240,67,97,.12);

      --blue:#007AFF;
      --blue-soft:rgba(0,122,255,.10);

      --radius:18px;
      --radius-small:14px;
    }

    *{box-sizing:border-box}

    html{
      font-size:20px;
      background:var(--bg);
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      -webkit-text-size-adjust:100%;
    }

    body{
      margin:0;
      min-height:100svh;
      background:var(--bg);
    }

    button,input,select{font:inherit}

    button{
      min-height:48px;
      border:0;
      border-radius:15px;
      color:var(--text);
      background:var(--card);
      border:1px solid var(--separator);
      cursor:pointer;
      -webkit-tap-highlight-color:transparent;
    }

    input,select{
      width:100%;
      min-height:50px;
      border-radius:14px;
      border:1px solid var(--separator);
      background:var(--card-soft);
      color:var(--text);
      padding:11px 12px;
      outline:none;
    }

    input.amount{text-align:right;font-weight:760}

    input:focus,select:focus{
      border-color:rgba(0,122,255,.7);
      box-shadow:0 0 0 4px rgba(0,122,255,.10);
      background:#FFFFFF;
    }

    label{
      color:var(--text-secondary);
      font-size:.82rem;
      display:block;
      margin-bottom:7px;
      font-weight:650;
    }

    .app{
      width:min(100%, 500px);
      margin:0 auto;
      min-height:100svh;
      padding:calc(14px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));
    }

    .hidden{display:none !important}

    .topbar{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      padding:6px 2px 14px;
    }

    .title{
      margin:0;
      font-size:1.56rem;
      line-height:1.08;
      letter-spacing:-.045em;
    }

    .subtitle{
      margin:7px 0 0;
      color:var(--text-secondary);
      font-size:.94rem;
      line-height:1.25;
    }

    .version{
      color:var(--text-tertiary);
      font-size:.7rem;
      margin-top:7px;
    }

    .icon-btn{
      width:50px;
      height:50px;
      display:grid;
      place-items:center;
      font-size:1.12rem;
      background:var(--card);
      border-color:transparent;
      box-shadow:none;
    }

    .screen-head{
      position:sticky;
      top:0;
      z-index:5;
      /*margin:-14px -14px 14px;*/
      /*padding:calc(14px + env(safe-area-inset-top)) 14px 12px;*/
      
      margin: 0 0 14px;
      padding: 0 0 12px;
      background: var(--bg);
      border: none;
      
      background:rgba(242,242,247,.94);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(229,229,234,.86);
    }

    .back-row{display:flex;align-items:center;gap:11px}

    .back-btn{
      min-width:50px;
      height:50px;
      padding:0 13px;
      font-weight:850;
      background:var(--card);
      border-color:transparent;
    }

    .screen-title{
      margin:0;
      font-size:1.22rem;
      letter-spacing:-.035em;
      line-height:1.1;
    }

    .screen-subtitle{
      margin:5px 0 0;
      color:var(--text-secondary);
      font-size:.86rem;
      line-height:1.18;
    }

    .card{
      background:var(--card);
      border:1px solid transparent;
      border-radius:var(--radius);
      box-shadow:none;
      overflow:hidden;
    }

    .card + .card{margin-top:14px}

    .card-inner{padding:15px}

    .card-title{
      margin:0 0 12px;
      font-size:1rem;
      letter-spacing:-.02em;
      line-height:1.15;
    }

    .card-title-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
    }

    .card-title-row .card-title{margin:0}

    .section-heading{
      margin:20px 5px 8px;
      color:var(--text-tertiary);
      font-size:.70rem;
      text-transform:uppercase;
      letter-spacing:.07em;
      font-weight:860;
      line-height:1.15;
    }

    .section-heading:first-child{margin-top:4px}
    .section-heading + .card{margin-top:0}

    .toast{
      position:fixed;
      left:50%;
      bottom:calc(22px + env(safe-area-inset-bottom));
      transform:translate(-50%, 16px);
      opacity:0;
      pointer-events:none;
      z-index:20;
      padding:11px 16px;
      border-radius:999px;
      background:rgba(28,28,30,.92);
      color:white;
      font-weight:800;
      font-size:.84rem;
      letter-spacing:-.01em;
      transition:opacity .18s ease, transform .18s ease;
    }

    .toast.show{
      opacity:1;
      transform:translate(-50%, 0);
    }

    .summary-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin:8px 0 17px;
    }

    .metric{
      padding:14px;
      background:var(--card);
      border-radius:var(--radius);
      border:1px solid transparent;
    }

    .metric.wide{grid-column:1 / -1}

    .metric-label{
      color:var(--text-tertiary);
      font-size:.68rem;
      text-transform:uppercase;
      letter-spacing:.06em;
      margin-bottom:7px;
      font-weight:850;
    }

    .metric-value{
      font-size:1.28rem;
      font-weight:880;
      letter-spacing:-.045em;
      line-height:1.08;
    }

    .metric-note{
      color:var(--text-tertiary);
      font-size:.8rem;
      margin-top:7px;
      line-height:1.28;
    }

    .good{color:var(--green-dark)}
    .warn{color:var(--orange-dark)}
    .bad{color:var(--red-dark)}

    .section-title{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:10px;
      margin:18px 3px 10px;
    }

    .section-title h2{margin:0;font-size:1.08rem;letter-spacing:-.025em}
    .section-title span{color:var(--text-tertiary);font-size:.83rem;white-space:nowrap}

    .forecast-list{
      display:flex;
      flex-direction:column;
      gap:15px;
      padding-bottom:22px;
    }

    .week-row{
      width:100%;
      text-align:left;
      padding:0;
      background:var(--card);
      border:1px solid transparent;
      border-radius:20px;
      overflow:hidden;
      box-shadow:none;
    }

    .week-main{
      padding:15px 14px 13px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      align-items:start;
    }

    .week-date{font-weight:880;letter-spacing:-.035em;font-size:1.06rem;line-height:1.12}
    .week-payday{color:var(--text-secondary);font-size:.84rem;margin-top:5px;line-height:1.2}
    .week-before{text-align:right;font-weight:900;font-size:1.12rem;letter-spacing:-.045em;line-height:1.12}

    .week-subgrid{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      border-top:1px solid var(--separator);
      background:var(--card-muted);
    }

    .week-subcell{padding:11px 10px;border-right:1px solid var(--separator);min-width:0}
    .week-subcell:last-child{border-right:0}

    .sub-label{
      color:var(--text-tertiary);
      font-size:.62rem;
      text-transform:uppercase;
      letter-spacing:.055em;
      margin-bottom:5px;
      font-weight:850;
      white-space:nowrap;
    }

    .sub-value{color:var(--text);font-weight:820;font-size:.86rem;letter-spacing:-.025em;white-space:nowrap}

    .tabs{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:7px;
      margin:10px 0 14px;
      background:#E9E9EF;
      padding:4px;
      border-radius:16px;
    }

    .tab{
      min-height:44px;
      border-radius:12px;
      background:transparent;
      border:0;
      color:var(--text-secondary);
      font-weight:850;
      font-size:.88rem;
    }

    .tab.active{background:var(--card);color:var(--text)}

    .balance-list,.list{display:flex;flex-direction:column}

    .balance-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      padding:13px 0;
      border-bottom:1px solid var(--separator);
    }

    .balance-row:first-child{padding-top:0}
    .balance-row:last-child{padding-bottom:0;border-bottom:0}

    .balance-row strong{font-size:1.08rem;letter-spacing:-.035em;white-space:nowrap}
    .balance-row span:first-child{color:var(--text-secondary);font-weight:650;line-height:1.2}

    .balance-row.highlight{margin:0 -10px;padding:13px 10px;border-radius:14px;background:var(--green-soft);border-bottom:0}
    .balance-row.warning{margin:0 -10px;padding:13px 10px;border-radius:14px;background:var(--orange-soft);border-bottom:0}
    .balance-row.danger{margin:0 -10px;padding:13px 10px;border-radius:14px;background:var(--red-soft);border-bottom:0}

    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}

    .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
    .field-grid.single{grid-template-columns:1fr}

    .setting-list{display:flex;flex-direction:column}

    .setting-row{
      display:grid;
      grid-template-columns:1fr;
      gap:7px;
      padding:13px 0;
      border-bottom:1px solid var(--separator);
    }

    .setting-row:first-child{padding-top:0}
    .setting-row:last-child{padding-bottom:0;border-bottom:0}

    .settings-pair{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:11px;
      padding:13px 0;
      border-bottom:1px solid var(--separator);
      align-items:start;
    }

    .field-block{
      display:grid;
      grid-template-rows:auto auto;
      align-content:start;
      gap:7px;
    }

    .field-block label{margin-bottom:0}

    .btn-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}

    .btn{padding:0 10px;font-weight:850;background:var(--card);min-height:48px;font-size:.9rem}
    
    .btn.primary {
      background: var(--blue);
      border-color: var(--blue);
      color: white
    }
    .btn.warning{color:var(--orange-dark);background:var(--orange-soft);border-color:transparent}
    .btn.danger{color:var(--red-dark);background:var(--red-soft);border-color:transparent}

    .small-note{color:var(--text-secondary);line-height:1.42;font-size:.83rem;margin:11px 0 0}

    .item{
      display:grid;
      grid-template-columns:34px 1fr auto;
      align-items:center;
      gap:11px;
      padding:13px 0;
      border-bottom:1px solid var(--separator);
      min-width:0;
    }

    .item:first-child{padding-top:0}
    .item:last-child{padding-bottom:0;border-bottom:0}

    .item.not-due{opacity:.56}
    .item.not-due .money{color:var(--text-tertiary)}

    .item input[type="checkbox"]{width:27px;height:27px;min-height:27px;accent-color:var(--green)}

    .item-title{font-weight:860;letter-spacing:-.025em;line-height:1.16}
    .item-sub{color:var(--text-secondary);font-size:.78rem;margin-top:5px;line-height:1.22}
    .money{font-weight:900;white-space:nowrap;letter-spacing:-.035em}

    .badge{
      display:inline-flex;
      align-items:center;
      min-height:24px;
      padding:3px 8px;
      border-radius:999px;
      font-size:.66rem;
      font-weight:860;
      letter-spacing:.01em;
      margin-right:5px;
      margin-top:7px;
    }

    .badge.due{color:var(--green-dark);background:var(--green-soft)}
    .badge.manual{color:var(--blue);background:var(--blue-soft)}
    .badge.off{color:var(--text-tertiary);background:#EFEFF4}

    .switch-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:0 0 13px;
      margin-bottom:0;
      border-bottom:1px solid var(--separator);
    }

    .switch-row span{color:var(--text-secondary);font-size:.88rem;font-weight:750;line-height:1.22}

    .ios-switch{position:relative;display:inline-block;width:52px;height:32px;flex:0 0 auto}
    .ios-switch input{opacity:0;width:0;height:0;min-height:0;padding:0}
    .slider{position:absolute;cursor:pointer;inset:0;background:#D1D1D6;border-radius:999px;transition:.18s}
    .slider:before{content:"";position:absolute;height:28px;width:28px;left:2px;top:2px;background:white;border-radius:50%;transition:.18s;box-shadow:0 2px 5px rgba(0,0,0,.18)}
    .ios-switch input:checked + .slider{background:var(--green)}
    .ios-switch input:checked + .slider:before{transform:translateX(20px)}

    .edit-card{
      padding:13px 0;
      border-bottom:1px solid var(--separator);
    }

    .edit-card:first-of-type{padding-top:0}
    .edit-card:last-child{padding-bottom:0;border-bottom:0}

    .edit-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
    .edit-include{display:flex;align-items:center;gap:9px;color:var(--text-secondary);font-size:.86rem;font-weight:760}
    .edit-include input{width:26px;height:26px;min-height:26px;accent-color:var(--green)}

    .edit-card-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:9px;margin-bottom:9px}
    .edit-card-grid.wide{grid-template-columns:1fr 1fr;margin-bottom:0}

    .delete-btn{
      width:48px;height:48px;min-height:48px;color:var(--red-dark);background:var(--red-soft);border-color:transparent;font-weight:900;font-size:1.15rem
    }

    .expense-row{
      display:grid;
      grid-template-columns:1fr .72fr 48px;
      align-items:end;
      gap:8px;
      padding:13px 0;
      border-bottom:1px solid var(--separator);
    }

    .expense-row:first-child{padding-top:0}
    .expense-row:last-child{padding-bottom:0;border-bottom:0}

    .add-form{display:grid;grid-template-columns:1fr;gap:9px}
    .add-form-grid{display:grid;grid-template-columns:1fr .72fr;gap:8px}
    .add-form-grid.second{grid-template-columns:1fr 1fr 50px;align-items:end}
    .expense-add-grid{display:grid;grid-template-columns:1fr .72fr 50px;gap:8px;align-items:end}

    .add-btn{
      width:50px;height:50px;min-height:50px;background:var(--green-soft);border-color:transparent;color:var(--green-dark);font-weight:900;font-size:1.2rem
    }

    .empty{
      color:var(--text-secondary);
      text-align:center;
      border:1px dashed var(--separator-strong);
      border-radius:16px;
      padding:20px 14px;
      background:var(--card-soft);
      line-height:1.42;
      font-size:.88rem;
    }

    .about-row{
      width:100%;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:13px 0;
      border:0;
      border-bottom:1px solid var(--separator);
      border-radius:0;
      background:transparent;
      color:var(--text-secondary);
      font-weight:750;
      text-align:left;
    }

    .about-row:last-child{border-bottom:0;padding-bottom:0}
    .about-row:first-child{padding-top:0}
    .about-row strong{color:var(--text);font-weight:850}
    .chev{color:var(--text-tertiary);font-size:1.1rem}

    .about-hero{
      text-align:center;
      padding:22px 16px 18px;
    }

    .app-icon {
      width:72px;
      height:72px;
      margin:0 auto 13px;
      border-radius:22px;
      display:grid;
      place-items:center;
      background-image: url("assets/icons/favicon-192x192.png");
      background-color: transparent;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      position: relative;
      border: none;
    }

    .about-hero h2{
      margin:0;
      font-size:1.35rem;
      line-height:1.1;
      letter-spacing:-.045em;
    }

    .about-hero p{
      margin:8px auto 0;
      max-width:18rem;
      color:var(--text-secondary);
      font-size:.9rem;
      line-height:1.38;
    }

    .info-row{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      padding:13px 0;
      border-bottom:1px solid var(--separator);
      color:var(--text-secondary);
      font-weight:700;
      line-height:1.28;
    }

    .info-row:first-child{padding-top:0}
    .info-row:last-child{padding-bottom:0;border-bottom:0}
    .info-row span:last-child{color:var(--text);font-weight:850;text-align:right}

    .about-copy{
      color:var(--text-secondary);
      font-size:.9rem;
      line-height:1.46;
      margin:0;
    }

    .about-copy + .about-copy{margin-top:11px}

    @media (max-width:390px){
      html{font-size:19px}
      .week-subcell{padding-left:8px;padding-right:8px}
      .sub-value{font-size:.8rem}
      .btn{font-size:.82rem}
      .expense-row{grid-template-columns:1fr .62fr 48px}
      .expense-add-grid{grid-template-columns:1fr .62fr 50px}
    }

    @media (hover:hover) and (pointer:fine){
      button:hover{background:#FAFAFC}
      .btn.primary:hover{background:#0071EB}
    }
  

    /* Final polish overrides */
    :root{
      --bg:#E6EBF2;
      --card:#FFFFFF;
      --card-muted:#F5F7FA;
      --card-soft:#F8FAFC;
      --separator:rgba(60,72,88,.08);
      --separator-strong:rgba(60,72,88,.14);
      --text:#161A22;
      --text-secondary:#66707E;
      --text-tertiary:#8A93A0;
      --green:#10A37F;
      --green-dark:#0C8A68;
      --green-soft:rgba(16,163,127,.14);
      --orange:#D18427;
      --orange-dark:#B66A10;
      --orange-soft:rgba(209,132,39,.16);
      --red:#F04361;
      --red-dark:#D73453;
      --red-soft:rgba(240,67,97,.15);
      --blue:#007AFF;
      --blue-soft:rgba(0,122,255,.14);
    }
    :root[data-theme="dark"]{
      --bg:#0F1115;
      --card:#1A1D23;
      --card-muted:#171A20;
      --card-soft:#15181D;
      --separator:rgba(255,255,255,.06);
      --separator-strong:rgba(255,255,255,.11);
      --text:#F2F3F5;
      --text-secondary:#A3ABB7;
      --text-tertiary:#7B8491;
      --green:#2BCB9B;
      --green-dark:#5BE4B7;
      --green-soft:rgba(43,203,155,.18);
      --orange:#F0A542;
      --orange-dark:#FFBD68;
      --orange-soft:rgba(240,165,66,.18);
      --red:#FF5A75;
      --red-dark:#FF8BA0;
      --red-soft:rgba(255,90,117,.18);
      --blue:#4A94FF;
      --blue-soft:rgba(74,148,255,.18);
    }
    html, body{background:var(--bg);color:var(--text);}
    body{transition:background .18s ease,color .18s ease;}
    
    .topbar .icon-btn,
    .back-btn {
      background:var(--card);
      border-color:var(--separator);
    }
    
    .screen-head {
      margin: 0 0 14px;
      padding: 0 0 12px;
      background: var(--bg);
      border: none;
    }
    .screen-subtitle,.subtitle,.version,.detail-subtitle,.screen-title+.screen-subtitle{color:var(--text-secondary);}
    .week-row,.card,.metric{background:var(--card);border:1px solid var(--separator);box-shadow:none;}
    .metric{box-shadow:none;}
    .tabs{background:var(--card-muted);}
    .tab.active{background:var(--card);}
    .week-subgrid{background:var(--card-soft);border-top:1px solid var(--separator);}
    .week-subcell{border-right:1px solid var(--separator);}
    .balance-row,.info-row,.item,.expense-row,.switch-row,.setting-row,.settings-pair,.about-row{border-color:var(--separator);}
    .summary-grid{margin-bottom:18px;}
    .forecast-list{gap:14px;}
    .week-row{border-radius:20px;}
    .btn.warning{background:var(--orange);border-color:var(--orange);color:#fff;}
    .btn.danger{background:var(--red);border-color:var(--red);color:#fff;}
    .good{color:var(--green-dark);}
    .warn{color:var(--orange-dark);}
    .bad{color:var(--red-dark);}
    .card-note{margin:8px 4px 18px;color:var(--text-secondary);font-size:.82rem;line-height:1.42;}
    .section-heading{margin:18px 6px 8px;font-size:.82rem;text-transform:none;letter-spacing:0;color:var(--text-secondary);font-weight:700;}
    .settings-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
    .setting-list{display:flex;flex-direction:column;gap:14px;}
    .field-block{min-width:0;}
    .settings-note{margin:8px 4px 16px;color:var(--text-secondary);font-size:.82rem;line-height:1.42;}
    .theme-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 0;}
    .theme-row .theme-copy{min-width:0;}
    .theme-row strong{display:block;font-size:.9rem;}
    .theme-row span{display:block;color:var(--text-secondary);font-size:.78rem;margin-top:3px;line-height:1.28;}
    .brand-hero{display:flex;align-items:center;gap:12px;}
    .icon-btn svg,.back-btn svg,.about-row svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
    .settings-gear svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
    .icon-btn{color:var(--text);}
    
    .header-brand {
      display: flex;
      align-items: top;
      gap: 12px;
    }
    
    .header-brand .app-icon {
      width: 42px;
      height: 42px;
      border-radius: 11px;
      display: block;
      margin-top:0;
      padding-top:0;
    }
    
    .setting-actions {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      margin-top: 18px;
    }
    .manage-copy{font-size:.9rem;font-weight:650;color:var(--text);}
    .item.not-due{background:var(--card-soft);opacity:.72;}
    .item-actions{display:flex;align-items:center;gap:8px;}
    .inline-delete{width:42px;height:42px;min-height:42px;font-size:1.08rem;}
    .full-add-btn{width:100%;}
    .add-form-grid.second{grid-template-columns:1fr 1fr;}
    .add-form .full-add-btn{margin-top:10px;}
    .expense-add-grid{display:grid;grid-template-columns:1fr .7fr;gap:10px;}
    .expense-add-grid .full-add-btn{grid-column:1 / -1;}
    .switch-row{background:var(--card);}
    .toast{background:var(--text);color:var(--card);}
    @media (max-width:430px){
      .settings-pair{grid-template-columns:1fr 1fr;}
      .setting-actions {grid-template-columns: 1fr 1fr 1fr;}
    }

  
    /* Final style polish */
    :root{color-scheme:light;}
    :root[data-theme="dark"]{color-scheme:dark;}
    input,select,button,.tab,.about-row,.week-row,.icon-btn,.back-btn{transition:background .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease;}
    input:focus,select:focus{background:var(--card);}
    .tabs{background:var(--card-muted);}
    .tab{background:transparent;color:var(--text-secondary);}
    .tab.active{background:var(--card);color:var(--text);}
    .about-row{background:transparent;}
    :root[data-theme="dark"] input,
    :root[data-theme="dark"] select{background:var(--card-soft);color:var(--text);border-color:var(--separator);}
    :root[data-theme="dark"] input:focus,
    :root[data-theme="dark"] select:focus{background:var(--card);border-color:rgba(74,148,255,.72);box-shadow:0 0 0 4px rgba(74,148,255,.16);}
    :root[data-theme="dark"] .tabs{background:var(--card-muted);}
    :root[data-theme="dark"] .tab.active{background:var(--card);color:var(--text);}
    :root[data-theme="dark"] .week-row,
    :root[data-theme="dark"] .card,
    :root[data-theme="dark"] .metric,
    :root[data-theme="dark"] .icon-btn,
    :root[data-theme="dark"] .back-btn{background:var(--card);}
    :root[data-theme="dark"] .about-row:hover,
    :root[data-theme="dark"] .icon-btn:hover,
    :root[data-theme="dark"] .back-btn:hover{background:var(--card-soft);}
    :root[data-theme="dark"] .week-row:hover{background:var(--card);border-color:var(--separator-strong);}
    :root[data-theme="dark"] .btn.warning:hover{background:var(--orange);}
    :root[data-theme="dark"] .btn.danger:hover{background:var(--red);}
    :root[data-theme="dark"] .btn.primary:hover{background:var(--blue);}
    @media (hover:hover) and (pointer:fine){
      button:hover{background:var(--card-soft);}
      .week-row:hover{background:var(--card);border-color:var(--separator-strong);}
      .icon-btn:hover,.back-btn:hover,.about-row:hover{background:var(--card-soft);}
      .tab:hover{background:color-mix(in srgb, var(--card) 70%, transparent);}
      .btn.primary:hover{background:var(--blue);filter:brightness(.96);}
      .btn.warning:hover{background:var(--orange);filter:brightness(.96);}
      .btn.danger:hover{background:var(--red);filter:brightness(.96);}
    }

:root {
  --input-bg: #EEF2F7;
  --input-border: rgba(60, 72, 88, 0.22);
  --input-focus: rgba(0, 122, 255, 0.75);
}

:root[data-theme="dark"] {
  --input-bg: #11151B;
  --input-border: rgba(255, 255, 255, 0.16);
  --input-focus: rgba(74, 148, 255, 0.75);
}

:root[data-theme="dark"] {
  --bg: #0B0D11;
  --card: #181B21;
  --card-muted: #12151A;
  --card-soft: #20242C;

  --input-bg: #20242C;
  --input-border: rgba(255, 255, 255, 0.18);

  --input-card-bg: #171B22;
  --input-card-border: rgba(74, 148, 255, 0.22);
}

input,
select {
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--text);
}

input:focus,
select:focus {
  background: var(--card);
  border-color: var(--input-focus);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus {
  background: #252A33;
  border-color: rgba(74, 148, 255, 0.75);
  box-shadow: 0 0 0 4px rgba(74, 148, 255, 0.18);
}

.input-card {
  border-color: var(--input-card-border);
  background: var(--input-card-bg);
}

:root {
  --input-card-bg: #F9FBFE;
  --input-card-border: rgba(0, 122, 255, 0.16);
}

:root[data-theme="dark"] {
  --input-card-bg: #171B22;
  --input-card-border: rgba(74, 148, 255, 0.18);
}

.field-block,
.setting-row,
.add-form-grid > div,
.settings-pair > div {
  min-width: 0;
}

input,
select {
  max-width: 100%;
}

input[type="date"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.settings-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.add-form-grid.second {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

input[type="date"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  -webkit-appearance: none;
  appearance: none;

  background: var(--input-bg);
  color: var(--text);
  border: 1.5px solid var(--input-border);
  border-radius: 14px;

  padding: 11px 12px;
  line-height: 1.2;
}