:root {
      --bg: #f5f6fa;
      --panel: #ffffff;
      --text: #202433;
      --muted: #737b8c;
      --line: #e7e9ef;
      --accent: #5267d9;
      --shadow: 0 8px 28px rgba(27, 36, 66, .07);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0; min-height: 100vh; padding: 28px 16px 48px;
      background: var(--bg); color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .app { width: min(720px, 100%); margin: 0 auto; }
    header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
    h1 { font-size: clamp(25px, 5vw, 34px); margin:0; letter-spacing:-1px; }
    .subtitle { margin:6px 0 0; color:var(--muted); font-size:14px; }
    button { font:inherit; cursor:pointer; border:0; }
    .primary {
      background:var(--accent); color:white; border-radius:13px; padding:12px 16px;
      font-weight:650; box-shadow:0 5px 14px rgba(82,103,217,.2);
    }
    .primary:active, .step:active { transform:scale(.97); }
    .tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
    .tab {
      display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:12px;
      color:#51596a; background:#e9ebf2; font-weight:600; border:2px solid transparent;
      max-width:100%;
    }
    .tab.active { background:var(--panel); color:var(--text); border-color:var(--tab-color, var(--accent)); box-shadow:var(--shadow); }
    .dot { width:10px; height:10px; border-radius:50%; flex:none; background:var(--tab-color); }
    .panel {
      background:var(--panel); border:1px solid var(--line); border-radius:22px;
      padding:clamp(18px, 5vw, 30px); box-shadow:var(--shadow);
    }
    .counter-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
    .counter-title { margin:0; font-size:23px; font-weight:750; overflow-wrap:anywhere; }
    .counter-color { width:13px; height:13px; border-radius:50%; margin-top:7px; flex:none; }
    .count {
      text-align:center; font-size:clamp(76px, 20vw, 112px); line-height:1.1;
      font-weight:750; letter-spacing:-5px; padding:24px 0 28px;
      font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
    }
    .controls { display:flex; align-items:center; justify-content:center; gap:16px; }
    .step {
      width: min(31vw, 100px); height:min(31vw, 100px); max-height:100px;
      border-radius:24px; color:white; font-size:48px; font-weight:500;
      display:grid; place-items:center; box-shadow:0 7px 18px rgba(0,0,0,.12);
      transition:transform .08s ease;
    }
    .step.minus { background:#727b8d; }
    .step.plus { background:var(--counter-color, var(--accent)); }
    .hint { text-align:center; color:var(--muted); font-size:13px; margin:20px 0 0; }
    .tools { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
    .quiet {
      background:transparent; color:#697184; padding:9px 11px; border-radius:10px;
      font-size:13px; font-weight:600;
    }
    .quiet:hover { background:#f0f1f6; }
    .empty { text-align:center; padding:45px 15px; color:var(--muted); }
    .modal-backdrop {
      position:fixed; inset:0; z-index:5; background:rgba(20,25,40,.42);
      display:none; align-items:center; justify-content:center; padding:18px;
    }
    .modal-backdrop.open { display:flex; }
    .modal {
      width:min(410px,100%); background:var(--panel); border-radius:20px;
      padding:23px; box-shadow:0 18px 60px rgba(0,0,0,.2);
    }
    .modal h2 { margin:0 0 18px; font-size:21px; }
    label { display:block; font-size:13px; font-weight:650; margin:14px 0 7px; color:#535c6e; }
    input[type="text"] {
      width:100%; border:1px solid #dfe2ea; border-radius:11px; padding:12px;
      font:inherit; outline:none; background:var(--panel); color:var(--text);
    }
    input[type="text"]:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(82,103,217,.12); }
    input[type="color"] { width:52px; height:42px; border:0; background:none; padding:0; cursor:pointer; }
    .modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
    .secondary { background:#eef0f5; color:#51596a; border-radius:11px; padding:11px 14px; font-weight:650; }
    @media (max-width:480px) {
      body { padding:20px 13px 35px; }
      header { align-items:flex-start; }
      .primary { padding:11px 12px; font-size:14px; }
      .tab { padding:9px 11px; font-size:14px; }
      .panel { border-radius:18px; }
      .step { border-radius:20px; }
    }