:root {
      --bg-gradient-start: #0a0a0b;
      --bg-gradient-end: #111827;
      --bg-page: linear-gradient(165deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
      --surface: rgba(255, 255, 255, 0.03);
      --surface-elevated: rgba(255, 255, 255, 0.06);
      --border: rgba(255, 255, 255, 0.08);
      --border-strong: rgba(255, 255, 255, 0.14);
      --text: #f4f4f5;
      --text-muted: #a1a1aa;
      --text-subtle: #71717a;
      --accent: #3b82f6;
      --accent-hover: #2563eb;
      --accent-soft: rgba(59, 130, 246, 0.12);
      --success: #22c55e;
      --success-bg: rgba(34, 197, 94, 0.1);
      --error: #ef4444;
      --error-bg: rgba(239, 68, 68, 0.1);
      --warning: #eab308;
      --warning-bg: rgba(234, 179, 8, 0.12);
      --code-bg: rgba(0, 0, 0, 0.35);
      --shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 40px rgba(0,0,0,0.45);
      --radius: 12px;
      --radius-sm: 8px;
      --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
      --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-theme="light"] {
      --bg-gradient-start: #fafafa;
      --bg-gradient-end: #f4f4f5;
      --surface: #ffffff;
      --surface-elevated: #ffffff;
      --border: #e4e4e7;
      --border-strong: #d4d4d8;
      --text: #18181b;
      --text-muted: #52525b;
      --text-subtle: #71717a;
      --accent: #2563eb;
      --accent-hover: #1d4ed8;
      --accent-soft: rgba(37, 99, 235, 0.08);
      --code-bg: #f4f4f5;
      --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font);
      padding: 24px 20px 48px;
      background: var(--bg-page);
      color: var(--text);
      min-height: 100vh;
      transition: background var(--transition-slow), color var(--transition-slow);
    }

    .container {
      max-width: 1120px;
      margin: 0 auto;
    }

    header {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 28px;
      padding: 24px 28px;
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      transition: border-color var(--transition), background var(--transition-slow);
    }

    .header-main {
      flex: 1;
      min-width: 220px;
    }

    h1 {
      font-size: clamp(1.35rem, 3vw, 1.75rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
      color: var(--text);
    }

    h1 span.accent {
      color: var(--accent);
    }

    .subtitle {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .creator {
      font-size: 12px;
      color: var(--text-subtle);
      margin-top: 10px;
    }

    .creator strong {
      color: var(--accent);
    }

    .theme-toggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-elevated);
      font-size: 13px;
      color: var(--text-muted);
      cursor: pointer;
      user-select: none;
      transition: border-color var(--transition), background var(--transition), color var(--transition);
    }

    .theme-toggle:hover {
      border-color: var(--border-strong);
      color: var(--text);
    }

    .theme-toggle .thumb {
      width: 40px;
      height: 22px;
      border-radius: 999px;
      background: var(--code-bg);
      position: relative;
      border: 1px solid var(--border);
      transition: background var(--transition);
    }

    .theme-toggle .thumb::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--accent);
      transition: transform var(--transition-slow);
    }

    [data-theme="light"] .theme-toggle .thumb::after {
      transform: translateX(18px);
    }

    .tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 24px;
      padding: 4px;
      border-radius: var(--radius);
      background: var(--surface);
      border: 1px solid var(--border);
      flex-wrap: wrap;
      box-shadow: var(--shadow);
    }

    .tab {
      padding: 10px 16px;
      background: transparent;
      border: none;
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      transition: color var(--transition), background var(--transition), transform var(--transition);
    }

    .tab:hover {
      color: var(--text);
      background: var(--accent-soft);
    }

    .tab.active {
      color: var(--text);
      background: var(--surface-elevated);
      box-shadow: 0 0 0 1px var(--border-strong);
    }

    .tab-panels {
      position: relative;
    }

    .tab-content {
      display: none;
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
      transition: opacity var(--transition-slow), transform var(--transition-slow);
    }

    .tab-content.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .card {
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      padding: 22px 24px;
      margin-bottom: 20px;
      box-shadow: var(--shadow);
      transition: border-color var(--transition), background var(--transition-slow);
    }

    .card-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* Sticky seed bar: read-only display of the current mnemonic, pinned above the tabs
       so it stays visible on scroll no matter which tab or feature is in use. */
    .seed-bar {
      position: sticky;
      top: 12px;
      z-index: 100;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 16px;
      margin-bottom: 20px;
      background: var(--surface-elevated);
      border: 1px solid var(--accent);
      border-radius: var(--radius-sm);
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow), 0 0 0 1px var(--accent-soft);
      max-height: 40vh;
      overflow-y: auto;
    }
    .seed-bar-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--accent);
      flex-shrink: 0;
      padding-top: 2px;
    }
    .seed-bar-value {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--text);
      white-space: normal;
      word-break: break-word;
      flex: 1;
      min-width: 0;
    }
    .seed-bar-value.seed-bar-empty {
      color: var(--text-subtle);
      font-style: italic;
      font-family: var(--font);
      font-size: 12px;
    }

    .dev-mode-toggle {
      margin-left: auto;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      user-select: none;
    }

    .dev-mode-toggle input {
      cursor: pointer;
    }

    .dev-panel {
      display: none;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px dashed var(--border-strong);
    }

    .dev-panel.active {
      display: block;
    }

    .dev-panel h4 {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      margin: 16px 0 10px;
      font-weight: 600;
    }

    .dev-panel h4:first-child {
      margin-top: 0;
    }

    .dev-table-wrap {
      overflow-x: auto;
      max-height: 280px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      margin-top: 8px;
    }

    .dev-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
      font-family: var(--mono);
    }

    .dev-table th,
    .dev-table td {
      padding: 8px 10px;
      text-align: left;
      border-bottom: 1px solid var(--border);
      word-break: break-all;
    }

    .dev-table th {
      background: var(--code-bg);
      color: var(--text-muted);
      font-weight: 600;
      position: sticky;
      top: 0;
    }

    .dev-out-grid {
      display: grid;
      gap: 8px;
      font-size: 11px;
      font-family: var(--mono);
    }

    .dev-out-row {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 8px;
      align-items: start;
    }

    .dev-out-row span:first-child {
      color: var(--text-muted);
      font-family: var(--font);
      font-size: 11px;
    }

    .badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      background: var(--accent-soft);
      color: var(--accent);
      border: 1px solid var(--border);
    }

    label {
      font-size: 12px;
      color: var(--text-muted);
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
    }

    input[type="text"],
    input[type="number"],
    textarea,
    select {
      width: 100%;
      padding: 11px 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--code-bg);
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    textarea {
      min-height: 88px;
      resize: vertical;
      font-family: var(--mono);
      font-size: 13px;
      line-height: 1.5;
    }

    input:focus,
    textarea:focus,
    select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    .row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 14px;
    }

    /* Each cell in a .row stretches to full cell height; the label sits at the
       top and the input is pushed to the bottom so all inputs align on the
       same baseline even when label text wraps to different heights. */
    .row > div {
      display: flex;
      flex-direction: column;
    }

    .row > div > label {
      flex: 1;
      margin-bottom: 6px;
    }

    .row > div > input {
      margin-top: auto;
    }

    /* Two sub-rows for BIP44 step - prevents all 5 fields cramming one line */
    .row-bip44-top {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 14px;
    }

    .row-bip44-top > div,
    .row-bip44-bot > div {
      display: flex;
      flex-direction: column;
    }

    .row-bip44-top > div > label,
    .row-bip44-bot > div > label {
      flex: 1;
      margin-bottom: 6px;
    }

    .row-bip44-bot {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    @media (max-width: 680px) {
      .row-bip44-top {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 480px) {
      .row-bip44-top,
      .row-bip44-bot {
        grid-template-columns: 1fr;
      }
    }


    .preset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    button {
      padding: 10px 18px;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    button:active {
      transform: scale(0.98);
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
    }

    .btn-primary:hover {
      background: var(--accent-hover);
      box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
    }

    .btn-secondary {
      background: var(--surface-elevated);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-secondary:hover {
      border-color: var(--border-strong);
      background: var(--accent-soft);
    }

    .btn-danger {
      background: var(--error);
      color: #fff;
    }

    .btn-danger:hover {
      filter: brightness(1.05);
    }

    .btn-preset {
      background: var(--code-bg);
      color: var(--text);
      border: 1px solid var(--border);
      padding: 14px;
      text-align: left;
      font-size: 12px;
      font-weight: 500;
    }

    .btn-preset:hover {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent-soft);
    }

    .preset-name {
      font-weight: 600;
      color: var(--accent);
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
    }

    .preset-path {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-muted);
    }

    .label-chip {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--accent-soft);
      border: 1px solid var(--border);
      font-size: 10px;
      color: var(--text-muted);
      margin-left: 6px;
      font-weight: 500;
      vertical-align: middle;
      max-width: 100%;
      white-space: normal;
      word-break: break-word;
    }

    .output-label {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 600;
      margin-bottom: 8px;
    }

    .output-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: flex-start;
    }

    .output-value {
      font-family: var(--mono);
      font-size: 13px;
      word-break: break-all;
      color: var(--text);
      background: var(--code-bg);
      padding: 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      flex: 1;
      min-width: 200px;
      line-height: 1.55;
    }

    .qr-wrap {
      flex-shrink: 0;
      padding: 10px;
      background: #fff;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      transition: box-shadow var(--transition);
    }

    .qr-wrap:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }

    .qr-wrap canvas,
    .qr-wrap img {
      display: block;
      width: 120px !important;
      height: 120px !important;
    }

    .error {
      color: var(--error);
      font-size: 13px;
      margin-top: 12px;
      padding: 12px 14px;
      background: var(--error-bg);
      border-radius: var(--radius-sm);
      border: 1px solid rgba(239, 68, 68, 0.25);
    }

    .success {
      color: var(--success);
      font-size: 13px;
      margin-top: 12px;
      padding: 12px 14px;
      background: var(--success-bg);
      border-radius: var(--radius-sm);
      border: 1px solid rgba(34, 197, 94, 0.25);
    }

    .path-preview {
      font-family: var(--mono);
      font-size: 14px;
      color: var(--warning);
      background: var(--code-bg);
      padding: 14px;
      border-radius: var(--radius-sm);
      margin-top: 10px;
      border: 1px solid var(--border);
      font-weight: 600;
    }

    .hint {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 12px;
      line-height: 1.65;
    }

    .loading {
      color: var(--accent);
      font-size: 13px;
      margin-top: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .guide-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 12px;
      font-size: 13px;
    }

    .guide-table th,
    .guide-table td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid var(--border);
    }

    .guide-table th {
      background: var(--code-bg);
      color: var(--accent);
      font-weight: 600;
    }

    .guide-table code {
      background: var(--code-bg);
      padding: 2px 8px;
      border-radius: 6px;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--warning);
    }

    .action-buttons {
      display: flex;
      gap: 10px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .warning-box {
      background: var(--warning-bg);
      border: 1px solid rgba(234, 179, 8, 0.35);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      margin-top: 12px;
    }

    .warning-box p {
      font-size: 13px;
      color: var(--text);
      line-height: 1.65;
    }

    .danger-zone {
      background: var(--error-bg);
      border: 2px solid rgba(239, 68, 68, 0.5);
      border-radius: var(--radius);
      padding: 20px 22px;
      margin-bottom: 20px;
    }

    .danger-zone h2 {
      font-size: 18px;
      color: var(--error);
      margin-bottom: 12px;
      font-weight: 800;
    }

    .danger-zone p {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text);
      margin-bottom: 10px;
    }

    .vanity-stats {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 12px;
    }

    .list-plain {
      list-style: none;
      padding: 0;
    }

    .list-plain li {
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
      line-height: 1.55;
    }

    .list-plain li:last-child {
      border-bottom: none;
    }

    @media (max-width: 640px) {
      header {
        flex-direction: column;
      }
    }

    @media (max-width: 768px) {
      /* Sticky seed bar is a good desktop affordance but eats too much of a small
         screen (especially with a full 24-word mnemonic wrapped across lines). */
      .seed-bar {
        position: static;
        max-height: none;
      }
      .preset-grid {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
      }
      .dev-out-row {
        grid-template-columns: 1fr;
      }
      .guide-table {
        font-size: 12px;
      }
      .guide-table th,
      .guide-table td {
        padding: 8px;
      }
    }

    @media (max-width: 480px) {
      body {
        padding: 14px 10px 28px;
      }
      header {
        padding: 14px;
      }
      h1 {
        font-size: 1.1rem;
      }
      .subtitle {
        font-size: 11px;
      }

    .tabs {
        gap: 2px;
        padding: 3px;
      }
      .tab {
        padding: 7px 10px;
        font-size: 11px;
      }
      .card {
        padding: 14px;
      }
      .card-title {
        font-size: 13px;
      }
      label {
        font-size: 11px;
      }
      .badge {
        font-size: 10px;
        padding: 2px 7px;
      }
      .label-chip {
        font-size: 9px;
        padding: 1px 5px;
      }
      .preset-grid {
        grid-template-columns: 1fr;
      }
      .btn-preset {
        padding: 11px;
      }
      .preset-name {
        font-size: 12px;
      }
      .preset-path {
        font-size: 10px;
      }
      .output-value {
        font-size: 11px;
        padding: 10px;
        word-break: break-all;
      }
      .qr-wrap canvas,
      .qr-wrap img {
        width: 80px !important;
        height: 80px !important;
      }
      .row-bip44-top {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .row-bip44-bot {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .dev-out-grid {
        font-size: 10px;
      }
      .dev-out-row {
        grid-template-columns: 1fr;
        gap: 3px;
      }
      .dev-table {
        font-size: 10px;
      }
      .dev-table th,
      .dev-table td {
        padding: 5px 6px;
      }
      .path-preview {
        font-size: 12px;
        padding: 10px;
      }
      .hint {
        font-size: 12px;
      }
      input[type="text"],
      input[type="number"],
      textarea,
      select {
        font-size: 13px;
        padding: 9px 11px;
      }
      textarea {
        min-height: 72px;
      }
      .guide-table {
        font-size: 11px;
      }
      .guide-table th,
      .guide-table td {
        padding: 6px;
        word-break: break-word;
      }
      .action-buttons {
        gap: 6px;
      }
      .action-buttons button {
        padding: 8px 12px;
        font-size: 12px;
        flex: 1;
      }
      .vanity-stats {
        font-size: 11px;
      }
      .list-plain li {
        font-size: 12px;
        padding: 8px 0;
      }
      .danger-zone {
        padding: 14px 16px;
      }
      .danger-zone h2 {
        font-size: 15px;
      }
      .danger-zone p {
        font-size: 12px;
      }
    }

    /* Learning Path */
    .learn-steps {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      padding: 0 4px;
    }
    .learn-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      opacity: 0.4;
      transition: opacity 0.2s;
    }
    .learn-step.active {
      opacity: 1;
    }
    .learn-step.completed .step-dot {
      background: var(--accent);
      color: #fff;
    }
    .step-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--border);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      transition: background 0.2s, color 0.2s;
    }
    .learn-step.active .step-dot {
      background: var(--accent);
      color: #fff;
    }
    .step-label {
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
      font-weight: 600;
    }
    .learn-step.active .step-label {
      color: var(--text);
    }
    .learn-connector {
      flex: 1;
      height: 2px;
      background: var(--border);
      margin: 0 6px;
      margin-bottom: 24px;
    }
    .learn-content h3.learn-heading {
      margin: 0 0 10px;
      font-size: 16px;
      color: var(--accent);
    }
    .learn-segment {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 12px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      align-items: baseline;
    }
    .learn-segment:last-child {
      border-bottom: none;
    }
    .learn-seg-label {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--warning);
      min-width: 100px;
    }
    .learn-seg-desc {
      font-size: 13px;
      color: var(--text-muted);
    }
    .learn-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .learn-progress {
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 600;
    }
    @media (max-width: 480px) {
      .step-label {
        font-size: 9px;
      }
      .step-dot {
        width: 26px;
        height: 26px;
        font-size: 11px;
      }
    }

    /* ── Phase 2 UI micro-polish ─────────────────────────────────────── */
    .offline-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      color: var(--success);
      background: var(--success-bg);
      border: 1px solid var(--success);
      white-space: nowrap;
      cursor: default;
    }
    .offline-badge::before { content: "\2022"; color: var(--success); }

    /* Toast notification */
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--text);
      color: var(--bg-page);
      padding: 10px 18px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s, transform 0.25s;
      z-index: 1000;
    }
    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* Tooltip on label-chip (hover) - pure CSS */
    .label-chip {
      position: relative;
      cursor: help;
    }
    .label-chip:hover::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 130%;
      left: 50%;
      transform: translateX(-50%);
      background: var(--code-bg);
      color: var(--text);
      border: 1px solid var(--border-strong);
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      font-size: 11px;
      font-weight: 400;
      white-space: nowrap;
      box-shadow: var(--shadow);
      z-index: 50;
    }

    /* ── HD Tree Inspector ───────────────────────────────────────────── */
    .tree-container {
      font-size: 13px;
      max-height: 480px;
      overflow-y: auto;
      padding: 4px;
    }
    .tree-node {
      margin: 2px 0 2px 14px;
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      border: 1px solid transparent;
      transition: background var(--transition);
      user-select: none;
    }
    .tree-node:hover { background: var(--surface-elevated); }
    .tree-node.selected {
      background: var(--accent-soft);
      border-color: var(--accent);
      color: var(--text);
    }
    .tree-node.leaf { color: var(--text-muted); }
    .tree-children { margin-left: 6px; border-left: 1px dashed var(--border); padding-left: 4px; display: none; }
    .tree-node.expanded > .tree-children { display: block; }
    .tree-chevron { display: inline-block; width: 14px; color: var(--text-subtle); transition: transform var(--transition); }
    .tree-node.expanded > .tree-chevron { transform: rotate(90deg); color: var(--accent); }
    .tree-node.leaf .tree-chevron { visibility: hidden; }
    .tree-label { display: inline-block; padding: 3px 8px; border-radius: var(--radius-sm); cursor: pointer; }
    .tree-label:hover { background: var(--surface-elevated); }
    .tree-node.selected > .tree-label { background: var(--accent-soft); color: var(--text); font-weight: 600; }

    /* ── Paper wallet print ──────────────────────────────────────────── */
    .paper-wallet-print {
      display: none;
      position: absolute;
      left: -9999px;
      top: -9999px;
      width: 800px;
      padding: 32px;
      font-family: var(--font);
      color: #000;
      background: #fff;
    }
    .pw-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; text-align: center; }
    .pw-branding { text-align: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid #2563eb; }
    .pw-branding > div:first-child { font-size: 12px; font-weight: 600; color: #2563eb; margin-bottom: 4px; }
    .pw-links { font-size: 10px; color: #666; }
    .pw-section { margin-bottom: 14px; }
    .pw-row { display: flex; gap: 24px; }
    .pw-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #666; margin-bottom: 4px; }
    .pw-mono { font-family: var(--mono); font-size: 12px; word-break: break-all; color: #000; }
    .pw-qr { margin: 18px 0; text-align: center; }
    .pw-qr canvas { border: 1px solid #ddd; padding: 8px; }
    .pw-footer { margin-top: 28px; padding-top: 14px; border-top: 1px dashed #ccc; font-size: 10px; color: #999; text-align: center; }
    .pw-word-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .pw-slot { border: 1px solid #999; padding: 10px 6px; border-radius: 4px; text-align: center; }
    .pw-num { display: block; font-size: 10px; color: #999; margin-bottom: 2px; }
    .pw-word { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; color: #000; }

    /* Print mode: show ONLY the paper wallet */
    @media print {
      body * { visibility: hidden; }
      .paper-wallet-print, .paper-wallet-print * { visibility: visible; }
      .paper-wallet-print {
        display: block;
        position: static;
        left: 0; top: 0;
      }
      body.print-active .paper-wallet-print { display: block; }
    }

    /* ── Entropy lab visuals ─────────────────────────────────────────── */
    .entropy-stage {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 96px;
      padding: 12px;
      background: var(--code-bg);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      margin-bottom: 4px;
      perspective: 600px;
    }

    /* Dice face: a square with pip dots laid out via a 3x3 grid */
    .dice-face {
      width: 72px;
      height: 72px;
      border-radius: 14px;
      background: var(--surface-elevated);
      border: 1px solid var(--border-strong);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      padding: 10px;
      gap: 4px;
      box-shadow: var(--shadow);
      transform-style: preserve-3d;
    }
    .dice-face.rolling {
      animation: diceRoll 0.5s ease-out;
    }
    @keyframes diceRoll {
      0%   { transform: rotateX(0deg) rotateY(0deg) translateY(0); }
      30%  { transform: rotateX(180deg) rotateY(90deg) translateY(-22px); }
      70%  { transform: rotateX(360deg) rotateY(270deg) translateY(-10px); }
      100% { transform: rotateX(360deg) rotateY(360deg) translateY(0); }
    }
    .dice-pip {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--text);
      align-self: center;
      justify-self: center;
      visibility: hidden;
    }
    /* Pip positions per face value (1-6) using the 3x3 grid cells */
    .dice-face[data-val="1"] .pip-c { visibility: visible; }
    .dice-face[data-val="2"] .pip-tl,
    .dice-face[data-val="2"] .pip-br { visibility: visible; }
    .dice-face[data-val="3"] .pip-tl,
    .dice-face[data-val="3"] .pip-c,
    .dice-face[data-val="3"] .pip-br { visibility: visible; }
    .dice-face[data-val="4"] .pip-tl,
    .dice-face[data-val="4"] .pip-tr,
    .dice-face[data-val="4"] .pip-bl,
    .dice-face[data-val="4"] .pip-br { visibility: visible; }
    .dice-face[data-val="5"] .pip-tl,
    .dice-face[data-val="5"] .pip-tr,
    .dice-face[data-val="5"] .pip-c,
    .dice-face[data-val="5"] .pip-bl,
    .dice-face[data-val="5"] .pip-br { visibility: visible; }
    .dice-face[data-val="6"] .pip-tl,
    .dice-face[data-val="6"] .pip-tr,
    .dice-face[data-val="6"] .pip-ml,
    .dice-face[data-val="6"] .pip-mr,
    .dice-face[data-val="6"] .pip-bl,
    .dice-face[data-val="6"] .pip-br { visibility: visible; }

    /* Coin face */
    .coin-face {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, var(--warning), var(--warning-bg));
      border: 2px solid var(--warning);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 800;
      color: var(--text);
      box-shadow: var(--shadow);
      transform-style: preserve-3d;
    }
    .coin-face.flipping {
      animation: coinFlip 0.6s ease-out;
    }
    @keyframes coinFlip {
      0%   { transform: rotateY(0deg) translateY(0); }
      50%  { transform: rotateY(720deg) translateY(-40px); }
      100% { transform: rotateY(1080deg) translateY(0); }
    }

    /* Progress bar */
    .entropy-bar-wrap {
      width: 100%;
      height: 8px;
      background: var(--border);
      border-radius: 4px;
      overflow: hidden;
    }
    .entropy-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--error), var(--warning), var(--success));
      background-size: 200% 100%;
      border-radius: 4px;
      transition: width 0.3s ease;
      animation: barShimmer 1.5s linear infinite;
    }
    .entropy-bar.full { animation: none; background: var(--success); }
    @keyframes barShimmer {
      0%   { background-position: 0% 0; }
      100% { background-position: 200% 0; }
    }

    /* Sound toggle helper */
    .entropy-mute {
      font-size: 11px;
      color: var(--text-muted);
      cursor: pointer;
      user-select: none;
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
    }
    .entropy-mute.muted { opacity: 0.5; }

    /* ── Accordion (collapsible sub-panels) ───────────────────────────── */
    .acc-wrap { margin-top: 12px; }
    .acc-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      user-select: none;
      transition: background var(--transition), border-color var(--transition);
      border-left: 3px solid transparent;
    }
    .acc-header:hover { background: var(--surface-elevated); }
    .acc-header.open {
      border-left-color: var(--accent);
      background: var(--accent-soft);
    }
    .acc-chevron {
      display: inline-block;
      font-size: 10px;
      color: var(--text-muted);
      transition: transform var(--transition);
      flex-shrink: 0;
    }
    .acc-header.open .acc-chevron {
      transform: rotate(90deg);
      color: var(--accent);
    }
    .acc-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.4;
    }
    .acc-body {
      overflow: hidden;
      transition: max-height var(--transition-slow);
    }
    .acc-body.acc-closed { display: none; }