:root{
    --bg:#fafafa;
    --card:#ffffff;
    --border:#e4e4e7;
    --border-strong:#d4d4d8;
    --text:#18181b;
    --text-muted:#71717a;
    --text-faint:#a1a1aa;
    --accent:#18181b;
    --accent-fg:#fafafa;
    --danger:#ef4444;
    --danger-fg:#fef2f2;
    --active-bg:#ecfdf5;
    --active-border:#10b981;
    --active-dot:#10b981;
    --active-text:#047857;
    --radius:10px;
    --radius-sm:7px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.18);
    --mono: 'SF Mono', 'Roboto Mono', ui-monospace, Menlo, monospace;
    --input-bg:#fafafa;
    --input-bg-focus:#ffffff;
    --hover-bg:#f4f4f5;
    --danger-bg:#fef2f2;
    --label-color:#3f3f46;
    --badge-bg:#d1fae5;
    --btn-primary-hover:#27272a;
    --overlay-bg:rgba(24,24,27,0.45);
  }
  html{ color-scheme:light; }
  html[data-theme="dark"]{ color-scheme:dark; }
  html[data-theme="dark"]{
    --bg:#0a0a0b;
    --card:#161618;
    --border:#28282b;
    --border-strong:#3a3a3e;
    --text:#f1f1f2;
    --text-muted:#9a9aa0;
    --text-faint:#6b6b70;
    --accent:#f1f1f2;
    --accent-fg:#111113;
    --danger:#f87171;
    --danger-fg:#2a1516;
    --active-bg:rgba(16,185,129,0.12);
    --active-border:#34d399;
    --active-dot:#34d399;
    --active-text:#6ee7b7;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
    --input-bg:#1c1c1f;
    --input-bg-focus:#222225;
    --hover-bg:#212124;
    --danger-bg:rgba(248,113,113,0.12);
    --label-color:#d4d4d8;
    --badge-bg:rgba(16,185,129,0.16);
    --btn-primary-hover:#e4e4e5;
    --overlay-bg:rgba(0,0,0,0.6);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    transition:background .18s ease, color .18s ease;
  }
  .app{
    max-width:880px;
    margin:0 auto;
    padding:32px 20px 80px;
  }
  header.topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:22px;
    gap:12px;
  }
  .title-row{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .title-block h1{
    font-size:22px;
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0;
  }
  .title-input{
    font-family:inherit;
    font-size:22px;
    font-weight:800;
    letter-spacing:-0.02em;
    border:1px solid var(--border);
    border-radius:8px;
    padding:3px 8px;
    background:var(--input-bg);
    color:var(--text);
    max-width:340px;
  }
  .title-input:focus{outline:none;border-color:var(--text-faint);background:var(--input-bg-focus);}
  .clock{
    font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
    font-size:13px;
    color:var(--text-muted);
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:4px;
  }
  .btn{
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    border-radius:var(--radius-sm);
    padding:8px 14px;
    border:1px solid var(--border-strong);
    background:var(--card);
    color:var(--text);
    cursor:pointer;
    transition:background .12s ease, transform .06s ease, border-color .12s ease;
    white-space:nowrap;
  }
  .btn:hover{background:var(--hover-bg);}
  .btn:active{transform:scale(0.97);}
  .btn-primary{
    background:var(--accent);
    color:var(--accent-fg);
    border-color:var(--accent);
  }
  .btn-primary:hover{background:var(--btn-primary-hover);}
  .btn-ghost{
    border-color:transparent;
    background:transparent;
    color:var(--text-muted);
  }
  .btn-ghost:hover{background:var(--hover-bg);color:var(--text);}
  .btn-danger{
    background:var(--danger);
    color:#fff;
    border-color:var(--danger);
  }
  .btn-danger:hover{background:var(--danger);filter:brightness(1.1);}

  .header-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .icon-btn{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-sm);
    border:1px solid var(--border-strong);
    background:var(--card);
    color:var(--text);
    cursor:pointer;
    padding:0;
    flex-shrink:0;
  }
  .icon-btn:hover{background:var(--hover-bg);}
  .icon-btn:active{transform:scale(0.94);}
  .icon-btn svg{display:block;}
  .icon-btn .icon-moon{display:none;}
  .icon-btn[hidden]{display:none;}
  .back-btn{
    width:28px;
    height:28px;
    min-width:28px;
    min-height:28px;
  }

  html[data-theme="dark"] .icon-btn .icon-sun{display:none;}
  html[data-theme="dark"] .icon-btn .icon-moon{display:block;}

  .icon-btn-plain{
    border-color:transparent;
    background:transparent;
    color:var(--text-muted);
  }
  .icon-btn-plain:hover{background:var(--hover-bg);color:var(--text);border-color:transparent;}

  main{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
  }
  #listView{overflow:visible;}

  /* ---------- Table list view ---------- */
  .table-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 16px;
    border-bottom:1px solid var(--border);
    cursor:pointer;
    transition:background .12s ease;
    position:relative;
  }
  .list-cards .table-row:last-child{border-bottom:none;}
  .table-row:hover{background:var(--hover-bg);}
  .table-row.dragging{opacity:0.45;}
  .table-row-icon{
    width:36px;height:36px;
    border-radius:9px;
    background:var(--active-bg);
    color:var(--active-text);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .table-row-main{flex:1;min-width:0;}
  .table-row-name{
    font-size:14px;
    font-weight:700;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:flex;
    align-items:center;
  }
  .table-badge-now {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--active-bg);
    color:var(--active-text);
    padding:3px 6px;
    border-radius:5px;
    font-size:9px;
    font-weight:700;
    margin-left:8px;
    text-transform:uppercase;
    line-height:1;
  }
  .table-row-meta{
    font-size:12px;
    color:var(--text-muted);
    margin-top:2px;
  }
  .table-row-days {
    display:flex;
    align-items:center;
    gap:6px;
    margin-right: 8px;
  }
  .row-day-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    padding:3px 6px;
    border-radius:5px;
    font-size:10px;
    font-weight:600;
    color:var(--text);
    background:var(--input-bg);
    border:1px solid var(--border);
  }
  .table-row-actions{
    display:flex;
    align-items:center;
    gap:2px;
    flex-shrink:0;
  }
  .table-row-actions .delete-btn{padding:8px;}
  .chevron{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-faint);
    flex-shrink:0;
  }

  /* ---------- View mode rows (slots) ---------- */
  .list{display:flex;flex-direction:column;}
  .row{
    display:grid;
    grid-template-columns:150px 1fr auto;
    align-items:start;
    gap:14px;
    padding:13px 16px;
    border-bottom:1px solid var(--border);
    position:relative;
    transition:background .2s ease;
  }
  .list .row:last-child{border-bottom:none;}
  .row-time{
    font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
    font-size:13px;
    font-weight:700;
    color:var(--text);
    padding-top:1px;
    letter-spacing:-0.01em;
    white-space:nowrap;
  }
  .row-label{
    font-size:13.5px;
    line-height:1.5;
    color:var(--label-color);
    white-space:pre-wrap;
    word-break:break-word;
  }
  .row.active{
    background:var(--active-bg);
  }

  .row.active .row-time{color:var(--active-text);}
  .status-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:700;
    padding:3px 8px;
    border-radius:99px;
    height:fit-content;
    white-space:nowrap;
  }
  .now-badge{
    color:var(--active-text);
    background:var(--badge-bg);
  }
  .upcoming-badge{
    color:var(--text-muted);
    background:transparent;
    border:1px solid var(--border);
  }
  .now-badge .badge-now,
  .now-badge .badge-remaining,
  .upcoming-badge .badge-upcoming,
  .upcoming-badge .badge-wait{
    display:inline-block;
  }
  .now-badge .badge-remaining,
  .upcoming-badge .badge-wait{display:none;}
  .row.active:hover .now-badge .badge-now{display:none;}
  .row.active:hover .now-badge .badge-remaining{display:inline-block;}
  .row:hover .upcoming-badge .badge-upcoming{display:none;}
  .row:hover .upcoming-badge .badge-wait{display:inline-block;}
  .now-badge .pulse{
    width:6px;height:6px;border-radius:50%;
    background:var(--active-dot);
    animation:pulse 1.6s infinite;
  }
  .row.active:hover .now-badge .pulse{display:none;}
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(16,185,129,0.5);}
    70%{box-shadow:0 0 0 5px rgba(16,185,129,0);}
    100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}
  }

  /* ---------- Empty states ---------- */
  .empty{
    padding:48px 24px;
    text-align:center;
    color:var(--text-muted);
  }
  .empty svg{margin-bottom:10px;opacity:.5;}
  .empty p{margin:0 0 14px;font-size:13.5px;}

  /* ---------- Edit mode rows ---------- */
  .row-edit{
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:10px 10px;
    border-bottom:1px solid var(--border);
    background:var(--card);
  }
  .list .row-edit:last-child{border-bottom:none;}
  .row-edit.dragging{opacity:0.35;}
  .handle{
    cursor:grab;
    color:var(--text-faint);
    background:none;
    border:none;
    padding:6px 2px;
    display:flex;
    align-items:center;
    touch-action:none;
  }
  .handle:active{cursor:grabbing;}
  .time-group{
    display:flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
    flex-wrap:nowrap;
    white-space:nowrap;
  }
  .time-input{
    font-family:var(--mono);
    font-size:12px;
    border:1px solid var(--border);
    border-radius:6px;
    padding:6px 8px;
    width:130px;
    background:var(--input-bg);
    color:var(--text);
  }
  .time-input:focus{outline:none;border-color:var(--text-faint);background:var(--input-bg-focus);}
  .dash{color:var(--text-faint);font-size:12px;}
  .clear-end{
    border:none;background:none;color:var(--text-faint);cursor:pointer;
    font-size:14px;padding:2px 3px;border-radius:5px;
  }
  .clear-end:hover{color:var(--danger);background:var(--danger-bg);}
  .label-input{
    flex:1;
    font-family:'Inter',sans-serif;
    font-size:13px;
    border:1px solid var(--border);
    border-radius:6px;
    padding:7px 9px;
    resize:none;
    background:var(--input-bg);
    color:var(--text);
    line-height:1.45;
    min-width:0;
  }
  .label-input:focus{outline:none;border-color:var(--text-faint);background:var(--input-bg-focus);}
  .delete-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;background:none;color:var(--text-faint);cursor:pointer;
    padding:6px 4px;flex-shrink:0;border-radius:6px;
  }
  .delete-btn:hover{color:var(--danger);background:var(--danger-bg);}

  .add-wrap{
    padding:14px 16px 4px;
  }
  .btn-add{
    width:100%;
    border:1px dashed var(--border-strong);
    background:transparent;
    color:var(--text-muted);
    padding:10px;
    font-weight:600;
    font-size:13px;
    border-radius:var(--radius-sm);
  }
  .btn-add:hover{background:var(--hover-bg);color:var(--text);border-style:dashed;}

  .hint{
    text-align:center;
    font-size:12px;
    color:var(--text-faint);
    margin-top:14px;
  }

  /* ---------- Modal ---------- */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:var(--overlay-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
    padding:20px;
    animation:fadeIn .14s ease;
  }
  .modal-overlay[hidden]{display:none;}
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  .modal-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow-lg);
    width:100%;
    max-width:380px;
    padding:22px;
    animation:popIn .16s cubic-bezier(.2,.9,.3,1.2);
  }
  @keyframes popIn{from{opacity:0;transform:scale(.94) translateY(6px);}to{opacity:1;transform:scale(1) translateY(0);}}
  .modal-icon{
    width:38px;height:38px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:12px;
  }
  .modal-icon.warn{background:var(--danger-bg);color:var(--danger);}
  .modal-icon.info{background:var(--active-bg);color:var(--active-text);}
  .modal-card h3{
    font-size:16px;
    font-weight:700;
    margin:0 0 6px;
    letter-spacing:-0.01em;
  }
  .modal-card p{
    font-size:13px;
    line-height:1.55;
    color:var(--text-muted);
    margin:0 0 16px;
  }
  .modal-input{
    width:100%;
    font-family:inherit;
    font-size:13.5px;
    border:1px solid var(--border);
    border-radius:8px;
    padding:9px 11px;
    background:var(--input-bg);
    color:var(--text);
    margin-bottom:16px;
  }
  .modal-input:focus{outline:none;border-color:var(--text-faint);background:var(--input-bg-focus);}
  .modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
  }

  @media (max-width:560px){
    .row{grid-template-columns:1fr;gap:4px;}
    .row .status-badge{justify-self:start;margin-top:2px;}
    .row-time{padding-top:0;}
    .time-input{width:110px;}
  }

  #persistenceWarning{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:#fffbeb;
    color:#92400e;
    border-bottom:1px solid #fde68a;
    padding:10px 20px;
    font-size:12.5px;
    line-height:1.5;
  }
  html[data-theme="dark"] #persistenceWarning{
    background:#3a2f10;
    color:#fcd34d;
    border-bottom:1px solid #5c4a13;
  }
  #persistenceWarning button{
    border:none;
    background:none;
    color:inherit;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    flex-shrink:0;
    padding:0 2px;
    opacity:.7;
  }
  #persistenceWarning button:hover{opacity:1;}

  .day-selector-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
  }
  .day-selector-wrap[hidden] {
    display: none;
  }
  .day-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  .day-chip input {
    display: none;
  }
  .day-chip span {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--hover-bg);
    border: 1px solid transparent;
    transition: all 0.2s;
  }
  .day-chip:hover span {
    color: var(--text);
  }
  .day-chip input:checked + span {
    background: var(--accent);
    color: var(--accent-fg);
  }