/* style.css — 1:1 aus der urspruenglichen 10_pokertimer.html uebernommen, damit Control- und Live-Fenster optisch identisch zum Original bleiben. */
  :root{
    --bg: #000000;
    --font: #ffffff;
    --panel: #1f1f1f;
    --panel2: #2e2e2e;
    --border: #474747;
    --accent: #D4A94A;
    --accent-ink: #2A2107;
    --danger: #C1443C;
    --info: #4C8FC0;
    --radius: 16px;
    --radius-sm: 10px;
    --timer-size: 300px;
    --font-mono: ui-monospace, "Cascadia Mono", "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  *{ box-sizing: border-box; }
  html, body{ height:100%; margin:0; }
  html{ font-size: 16px; }
  body{
    background: var(--bg);
    color: var(--font);
    font-family: var(--font-body);
    transition: background-color .25s ease, color .25s ease;
  }
  body.tab-live-active{ height:100vh; overflow:hidden; }

  button{ font-family: inherit; cursor:pointer; }
  input, select{ font-family: inherit; }
  ::selection{ background: var(--accent); color: var(--accent-ink); }

  /* ---------- Layout ---------- */
  #app{ width:100%; max-width:none; margin: 0 auto; padding: 0 1rem; height:100%; display:flex; flex-direction:column; }

  .topbar{
    display:flex; align-items:center; gap:1rem;
    padding: .85rem 1rem;
    margin: 0 -1rem;
    background: color-mix(in srgb, var(--bg) 88%, black 12%);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    flex-shrink:0;
    transition: opacity .4s ease, transform .4s ease;
  }
  body.idle-hide .topbar{ opacity:0; transform: translateY(-10px); pointer-events:none; }
  .brand{ display:flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:-.01em; margin-right:.5rem; }
  .brand svg{ width:26px; height:26px; flex-shrink:0; }
  .editable-title{
    font-size:1.05rem; outline:none; border-bottom:1px dashed transparent; padding:2px 6px; border-radius:4px; cursor:text;
  }
  .editable-title:hover{ border-bottom-color: var(--border); }
  .editable-title:focus{ border-bottom-color: var(--accent); background: var(--panel2); }

  .tabs{ display:flex; gap:.35rem; flex-wrap:wrap; flex:1; justify-content:center; }
  .tab-btn{
    background: transparent; border: 1px solid transparent; color: var(--font);
    opacity:.65; padding:.5rem .85rem; border-radius: 999px; font-size:.85rem; font-weight:600;
    letter-spacing:.02em; transition: all .15s ease;
  }
  .tab-btn:hover{ opacity:1; background: var(--panel); }
  .tab-btn.active{ opacity:1; background: var(--accent); color: var(--accent-ink); }

  .topbar-actions{ display:flex; gap:.4rem; margin-left:auto; }
  .icon-btn{
    width:38px; height:38px; border-radius:999px; border:1px solid var(--border);
    background: var(--panel); color: var(--font); display:flex; align-items:center; justify-content:center;
    transition: all .15s ease; flex-shrink:0;
  }
  .icon-btn:hover{ background: var(--panel2); }
  .icon-btn svg{ width:18px; height:18px; }
  .icon-btn.active-toggle{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  .popover-wrap{ position:relative; }

  main{ flex:1; min-height:0; display:flex; flex-direction:column; }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:flex; flex-direction:column; flex:1; min-height:0; }
  .tab-panel:not(#tab-live).active{ overflow-y:auto; padding: 1rem 0 2.5rem; display:block; }

  .eyebrow{ text-transform: uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; color: var(--accent); margin: 0 0 .4rem; }
  h2.section-title{ font-size:1.05rem; margin: 0 0 1rem; letter-spacing:-.01em; }
  .card{ background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
  .hint{ font-size:.8rem; opacity:.65; margin:.35rem 0 0; line-height:1.4; }

  .live-controls{
    grid-area:controls; display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; align-items:center; padding-bottom:.15rem;
    overflow:hidden; transition: opacity .4s ease, transform .4s ease;
  }
  body.controls-idle-hide .live-controls{ opacity:0; transform: translateY(10px); pointer-events:none; }
  /* Link unten links neben der Steuerung: absolut positioniert (die Steuerung bleibt zentriert und
     unverändert), feste kleine Schrift unabhängig von der Live-Schriftgröße. live-render.js blendet ihn
     aus, wenn er sich mit einem Bedienelement überschneiden würde (schmales Fenster). */
  .live-controls{ position:relative; }
  .ctrl-brand-link{
    position:absolute; left:calc(.8rem + env(safe-area-inset-left, 0px)); bottom:calc(.35rem + env(safe-area-inset-bottom, 0px));
    font-size:.65rem; line-height:1; font-weight:600; letter-spacing:0; white-space:nowrap;
    color:inherit; text-decoration:none; opacity:.5;
  }
  .ctrl-brand-link:hover, .ctrl-brand-link:focus-visible{ opacity:1; text-decoration:underline; }
  .ctrl-brand-link.no-room{ visibility:hidden; pointer-events:none; }


  .controls{ display:flex; justify-content:center; gap:.6rem; margin: 1rem 0 .2rem; flex-wrap:wrap; }
  .ctrl-btn{
    border:1px solid var(--border); background: var(--panel2); color: var(--font);
    padding:.7rem 1.05rem; border-radius: var(--radius-sm); font-weight:700; font-size:.82rem;
    display:flex; align-items:center; gap:.4rem; transition: transform .1s ease, background .15s ease;
    white-space:nowrap; flex-shrink:0;
  }
  .ctrl-btn svg{ width:15px; height:15px; }
  .ctrl-btn:hover{ transform: translateY(-1px); background: var(--border); }
  .ctrl-btn.primary{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .ctrl-btn.accent{ background: color-mix(in srgb, var(--accent) 22%, var(--panel2)); border-color: var(--accent); }
  .ctrl-btn.danger{ background: color-mix(in srgb, var(--danger) 22%, var(--panel2)); border-color: var(--danger); }
  .ctrl-btn.small{ padding:.7rem .8rem; opacity:.85; }
  .ctrl-btn:disabled{ opacity:.3; cursor:not-allowed; transform:none; }

  .ctrl-group{
    display:flex; flex-direction:column; align-items:center; gap:.4rem;
    background: var(--panel2); border:1px solid var(--border); border-radius: var(--radius-sm);
    padding:.5rem .7rem; transition: opacity .15s ease;
  }
  .ctrl-group-label{ font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; opacity:.7; white-space:nowrap; }
  .ctrl-group-buttons{ display:flex; gap:.4rem; }
  .ctrl-round{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background: var(--panel);
    color: var(--font); font-weight:800; font-size:1.05rem; line-height:1; padding:0;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition: transform .1s ease, background .15s ease;
  }
  .ctrl-round:hover:not(:disabled){ transform: translateY(-1px); background: var(--border); }
  .ctrl-round:disabled{ opacity:.3; cursor:not-allowed; transform:none; }
  .ctrl-group.disabled-group{ opacity:.4; }
  .ctrl-pause{
    width:58px; height:58px; border-radius:50%; border:2px solid var(--accent);
    background: var(--accent); color: var(--accent-ink);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition: transform .1s ease;
  }
  .ctrl-pause svg{ width:24px; height:24px; }
  .ctrl-pause:hover{ transform: scale(1.05); }
  .time-slider{ width:130px; height:27px; box-sizing:border-box; accent-color: var(--accent); }
  #timeGroup{ margin-left: 1.2rem; }


  .action-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top: .25rem; }
  .action-btn{
    flex:1; min-width:150px; border-radius: var(--radius-sm); border:1px solid var(--border);
    padding:.85rem 1rem; font-weight:800; font-size:.9rem; background: var(--panel2); color: var(--font);
    display:flex; align-items:center; justify-content:center; gap:.5rem; transition: transform .1s ease;
  }
  .action-btn svg{ width:17px; height:17px; }
  .action-btn:hover{ transform: translateY(-1px); }
  .action-btn.danger{ background: color-mix(in srgb, var(--danger) 22%, var(--panel)); border-color: var(--danger); }
  .action-btn.accent{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  /* ---------- Forms ---------- */
  .form-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  @media (max-width:700px){ .form-grid{ grid-template-columns: 1fr; } }
  .field{ display:flex; flex-direction:column; gap:.35rem; }
  .field label{ font-size:.8rem; font-weight:700; opacity:.85; }
  .field input[type="number"], .field input[type="text"], .field select{
    background: var(--panel2); border:1px solid var(--border); color: var(--font);
    padding:.6rem .7rem; border-radius: var(--radius-sm); font-size:.95rem; width:100%;
  }
  .spin-wrap{ position:relative; }
  .spin-wrap input{ padding-right:2.2rem !important; }
  .spin-btns{ position:absolute; top:1px; right:1px; bottom:1px; width:1.9rem; display:flex; flex-direction:column; border-left:1px solid var(--border); border-radius:0 var(--radius-sm) var(--radius-sm) 0; overflow:hidden; }
  .spin-btn{ flex:1; padding:0; border:0; background:transparent; color:var(--font); opacity:.7; font-size:.6rem; line-height:1; cursor:pointer; }
  .spin-btn + .spin-btn{ border-top:1px solid var(--border); }
  .spin-btn:hover{ background:var(--panel); opacity:1; }
  .spin-btn:active{ background:var(--accent); color:#fff; opacity:1; }
  .field input:focus, .radio-row input:focus-visible, button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
  .field.readonly input{ opacity:.75; }
  .radio-row{ display:flex; gap:1rem; flex-wrap:wrap; }
  .radio-opt{ display:flex; align-items:flex-start; gap:.5rem; font-size:.88rem; line-height:1.4; }
  .radio-opt input[type="radio"]{ flex-shrink:0; margin-top:.2em; }
  .radio-opt .chip-hint{ display:block; opacity:.7; font-size:.92em; white-space:nowrap; }

  .split-row{ display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; }
  .split-row .field{ flex:1; min-width:130px; }

  .inline-btn{
    background: var(--panel2); border:1px solid var(--border); color: var(--font);
    padding:.5rem .85rem; border-radius: var(--radius-sm); font-size:.8rem; font-weight:700;
  }
  .inline-btn:hover{ background: var(--border); }

  /* ---------- Tables ---------- */
  .table-wrap{ overflow-x:auto; }
  table.editor{ width:100%; border-collapse: collapse; min-width: 640px; }
  table.editor th{ text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; opacity:.6; padding: .4rem .45rem; border-bottom:1px solid var(--border); }
  table.editor td{ padding:.35rem .45rem; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align:middle; }
  table.editor input[type="number"]{ width: 82px; background: var(--panel2); border:1px solid var(--border); color: var(--font); padding:.4rem .5rem; border-radius: 8px; font-size:.85rem; }
  table.editor tr.is-break-row td{ background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .checkbox-cell{ display:flex; align-items:center; gap:.4rem; }

  .drag-handle{
    cursor: grab; opacity:.5; padding:.2rem .3rem; user-select:none; touch-action:none; font-size:1rem; letter-spacing:-2px;
  }
  .drag-handle:hover{ opacity:.9; }
  tr.level-row.dragging{ opacity:.35; }
  tr.level-row.drag-over{ box-shadow: inset 0 2px 0 var(--accent); }
  .pause-add-btn{
    background: var(--panel2); border:1px dashed var(--border); color: var(--font); opacity:.8;
    padding:.4rem .7rem; border-radius: var(--radius-sm); font-size:.78rem; font-weight:700; white-space:nowrap;
  }
  .pause-add-btn:hover{ opacity:1; background: var(--border); }
  .pause-remove-btn{
    background: none; border:none; color: var(--danger); font-size:.75rem; font-weight:700;
    text-decoration: underline; padding:.15rem .3rem; margin-left:.5rem;
  }

  .row-remove{
    background: rgba(0,0,0,.35); border:none; color:#fff; font-size:.95rem;
    width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: background .15s ease, transform .1s ease; flex-shrink:0;
  }
  .row-remove:hover{ background: var(--danger); transform: scale(1.08); }
  .row-remove:disabled{ opacity:.25; cursor:not-allowed; transform:none; }

  .banner{ padding:.7rem 1rem; border-radius: var(--radius-sm); font-size:.85rem; font-weight:700; margin-top: .75rem; display:flex; align-items:center; gap:.5rem; }
  .banner.error{ background: color-mix(in srgb, var(--danger) 25%, var(--panel)); border:1px solid var(--danger); }
  .banner.ok{ background: color-mix(in srgb, #3E9C63 25%, var(--panel)); border:1px solid #3E9C63; }

  /* ---------- Anzeige tab ---------- */
  .range-row{ display:flex; align-items:center; gap:.75rem; }
  .range-row input[type="range"]{ flex:1; accent-color: var(--accent); }
  .range-val{ font-family: var(--font-mono); font-weight:700; min-width:3.2rem; text-align:right; }
  .color-row{ display:flex; align-items:center; gap:.7rem; }
  input[type="color"]{ width:46px; height:34px; border-radius:8px; border:1px solid var(--border); background:none; padding:2px; }
  .switch{ position:relative; display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; }
  .switch input{ position:absolute; opacity:0; width:0; height:0; }
  .switch .track{ width:46px; height:26px; background: var(--panel2); border:1px solid var(--border); border-radius:999px; position:relative; transition:.15s; flex-shrink:0; }
  .switch .track::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background: var(--font); transition:.15s; }
  .switch input:checked + .track{ background: var(--accent); }
  .switch input:checked + .track::after{ transform: translateX(20px); background: var(--accent-ink); }

  /* ---------- Templates ---------- */
  .template-row{
    display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
    background: var(--panel2); border:1px solid var(--border); border-radius: var(--radius-sm); padding:.6rem .8rem;
  }
  .template-name{ font-weight:700; font-size:.9rem; }
  .template-actions{ display:flex; align-items:center; gap:.4rem; }

  /* ---------- Modal ---------- */
  .modal-overlay{ position:fixed; inset:0; background: rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:1rem; }
  .modal-overlay.hidden{ display:none; }
  .modal-card{ background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding:1.5rem; width:100%; max-width:min(90vw, 26rem); }
  .modal-card.settings-card{ max-width:min(92vw, 34rem); max-height:85vh; overflow-y:auto; }
  .modal-card h3{ margin:0 0 1rem; font-size:1.05rem; }
  .modal-actions{ display:flex; gap:.6rem; margin-top:1.25rem; }
  .modal-actions .ctrl-btn{ flex:1; justify-content:center; }

  /* ---------- Toast ---------- */
  #toast{
    position:fixed; bottom:1.25rem; left:50%; transform: translateX(-50%) translateY(20px);
    background: var(--accent); color: var(--accent-ink); padding:.7rem 1.2rem; border-radius:999px;
    font-weight:800; font-size:.85rem; opacity:0; pointer-events:none; transition: all .25s ease; z-index:200;
  }
  #toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

  /* ---------- Account/Testphase: gesperrte Bereiche ---------- */
  .banner.warn{ background: color-mix(in srgb, #e0a020 20%, transparent); color:#e0a020; border:1px solid color-mix(in srgb, #e0a020 40%, transparent); }
  .banner.info{ background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--font); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
  .is-locked{ position: relative; }
  .is-locked > *:not(.lock-overlay){ filter: blur(2px); pointer-events:none; user-select:none; }
  /* Sicherheitsnetz: das Overlay wird per JS erzeugt/entfernt (settings.js), aber falls
     es aus irgendeinem Grund doch mal ohne is-locked-Elternklasse im DOM landet, bleibt
     es trotzdem unsichtbar statt fälschlich alles zu verdecken. */
  .lock-overlay{ display:none; }
  .is-locked > .lock-overlay{
    position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
    background: color-mix(in srgb, var(--panel) 78%, transparent); border-radius: var(--radius-sm);
    cursor:pointer; text-align:center; padding:1rem;
  }
  .lock-overlay-inner{
    display:flex; flex-direction:column; align-items:center; gap:.3rem;
    font-weight:700; font-size:.85rem; color: var(--font); opacity:.95;
  }
  .lock-overlay-inner .lock-icon{ font-size:1.4rem; }
  /* Granulare Sperre für einzelne Buttons (z.B. "Level hinzufügen", Zeile entfernen) -
     bewusst kein Overlay wie bei ganzen Karten, nur deutlich abgeschwächt + weiterhin
     anklickbar (Klick öffnet den Account-Tab, siehe settings.js). */
  .locked-btn{ opacity:.35; }
  .tab-btn{ position:relative; }
  .tab-alert-dot{
    display:inline-block; width:7px; height:7px; border-radius:50%; background:#e0a020;
    margin-left:.35rem; vertical-align:middle;
  }
</style>

  /* Cloud-Vorlagen */
  .cloud-tpl-err{ color:#e0a030; cursor:help; }
  .cloud-state{ margin-bottom:0; }