/* PX Composer v1.3.0 — Design Tokens (Phase C4: Real Lighthouse / Stripe Payment Chip) */
:root {
  /* Base (overridden by tone) */
  --bg: #0d0d0d;
  --surface: #161616;
  --surface-raised: #1c1c1c;
  --ink: #e8e6e1;
  --ink-mid: #b8b5ae;
  --ink-soft: #8a8780;
  --ink-mute: #5a5955;
  --ink-ghost: #3a3935;
  --pass: #2D7A4F;
  --pass-bg: rgba(45, 122, 79, 0.12);
  --fail: #B83232;
  --link: #5B8DEF;
  --border: #2a2a28;
  --border-fine: #222220;

  /* Typography */
  --font-heading: 'Cormorant Garamond', 'Shippori Mincho', serif;
  --font-body: 'DM Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Tone-driven (set by JS) */
  --tone-bg: #0d0d0d;
  --tone-ink: #e8e6e1;
  --tone-radius: 4px;
  --tone-border-w: 1px;
  --tone-spacing-mult: 1;
  --tone-letter-spacing: 0;
}

/* === Tone overrides === */
[data-tone="studio-world"] {
  --bg: #0d0d0d; --surface: #161616; --surface-raised: #1c1c1c;
  --ink: #e8e6e1; --ink-mid: #b8b5ae; --ink-soft: #8a8780;
  --ink-mute: #5a5955; --ink-ghost: #3a3935;
  --border: #2a2a28; --border-fine: #222220;
}
[data-tone="quiet-commerce"] {
  --bg: #f7f6f3; --surface: #f2f0ec; --surface-raised: #eae7e2;
  --ink: #1a1a1a; --ink-mid: #4a4a4a; --ink-soft: #555555;
  --ink-mute: #999999; --ink-ghost: #d4d1cb;
  --border: #e5e2db; --border-fine: #eeece8;
}
[data-tone="protocol-minimal"] {
  --bg: #0a0a0a; --surface: #111111; --surface-raised: #181818;
  --ink: #b8b5ae; --ink-mid: #8a8780; --ink-soft: #6a6860;
  --ink-mute: #4a4945; --ink-ghost: #2a2928;
  --border: #222220; --border-fine: #1a1a18;
}

/* === Reset === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: var(--tone-letter-spacing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

#px-canvas {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  padding-bottom: 32px;
}

::selection {
  background: var(--pass);
  color: #fff;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-ghost); border-radius: 2px; }

/* === PX Mark (fixed point 3 — top left) === */
#px-mark {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-ghost);
  letter-spacing: 0.1em;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
}

/* === Title === */
.px-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 400;
  color: var(--ink);
  padding: var(--space-xl) var(--space-lg) var(--space-md);
  outline: none;
  cursor: text;
  line-height: 1.2;
  display: inline-block;
}

.px-title:focus {
  border-bottom: 1px solid var(--ink-ghost);
}

/* === Elements === */
.px-element {
  position: relative;
  margin: calc(var(--space-md) * var(--tone-spacing-mult)) var(--space-lg);
  border-radius: var(--tone-radius);
  outline: 1px dashed transparent;
  transition: outline-color 0.2s ease;
  cursor: pointer;
}

.px-element:hover {
  outline: 1px dashed var(--ink-ghost);
}

.px-element.selected {
  outline: 1px solid var(--ink-soft);
}

.px-element.dragging {
  opacity: 0.4;
}

.px-element.drag-over {
  outline: 1px dashed var(--pass);
}

.px-element-content {
  border-radius: var(--tone-radius);
  overflow: hidden;
}

/* Resize handle */
.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: ns-resize;
  z-index: 11;
}

.resize-handle::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 8px;
  height: 2px;
  border-top: 2px solid var(--ink-ghost);
  border-bottom: 2px solid var(--ink-ghost);
}

/* Remove button */
.px-remove-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: var(--tone-border-w) solid var(--ink-ghost);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s, color 0.15s;
}

.px-remove-btn:hover {
  background: var(--fail);
  color: #fff;
  border-color: var(--fail);
}

/* === Connection points (modification 9) === */
.conn-point {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--ink-ghost);
  transition: transform 0.2s ease;
  pointer-events: none;
  z-index: 5;
}

.conn-top { top: -3px; }
.conn-bottom { bottom: -3px; }

.px-element:hover .conn-point {
  transform: scale(1.3);
}

/* === Placeholder: Video === */
.placeholder-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--element-bg, var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  border-radius: var(--tone-radius);
}

/* === Placeholder: Generic === */
.placeholder-generic {
  padding: var(--space-lg);
  background: var(--element-bg, var(--surface));
  border-radius: var(--tone-radius);
}

.placeholder-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.placeholder-field {
  height: 36px;
  background: var(--surface-raised);
  border-radius: var(--tone-radius);
  margin-bottom: var(--space-sm);
}
.placeholder-field.short { width: 60%; }

.placeholder-slots { display: flex; gap: var(--space-sm); }
.placeholder-slot {
  flex: 1; height: 60px;
  background: var(--surface-raised);
  border-radius: var(--tone-radius);
}

.placeholder-timeline {
  display: flex; align-items: center;
  padding: var(--space-md) 0;
}
.placeholder-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-ghost); flex-shrink: 0;
}
.placeholder-line { flex: 1; height: 2px; background: var(--ink-ghost); }

.placeholder-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
}
.placeholder-card {
  height: 80px; background: var(--surface-raised);
  border-radius: var(--tone-radius);
}

.placeholder-badge {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-raised);
  border: 2px solid var(--ink-ghost);
}

/* === Tip === */
.tip-amounts { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.tip-btn {
  padding: var(--space-xs) var(--space-md);
  background: var(--surface-raised);
  border-radius: var(--tone-radius);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-mid);
}
.tip-total {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-mute);
}

/* === Funding === */
.placeholder-funding {
  padding: var(--space-lg);
  background: var(--element-bg, var(--surface));
  border-radius: var(--tone-radius);
}
.funding-section { margin-bottom: var(--space-md); }
.funding-section-title {
  font-size: 0.9rem; color: var(--ink-mid);
  margin-bottom: var(--space-sm);
}
.funding-field { margin-bottom: var(--space-sm); }
.funding-field-label {
  display: block; font-size: 0.7rem; color: var(--ink-mute);
  margin-bottom: var(--space-xs);
}
.funding-field-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-raised);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.funding-action-btn {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-raised);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-align: center;
  margin-top: var(--space-sm);
  cursor: default;
}
.funding-note {
  font-size: 0.7rem; color: var(--ink-mute);
  margin-top: var(--space-xs);
}
.funding-free {
  font-size: 0.7rem; color: var(--pass);
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
}
.funding-divider {
  border: none;
  border-top: var(--tone-border-w) solid var(--border);
  margin: var(--space-md) 0;
}
.funding-qr { display: flex; justify-content: center; margin: var(--space-md) 0; }
.qr-placeholder {
  width: 120px; height: 120px;
  background: var(--surface-raised);
  border: 1px dashed var(--ink-ghost);
  border-radius: var(--tone-radius);
}
.funding-declarations { margin-top: var(--space-sm); }

/* =============================================
   Floating Panel
   ============================================= */
.floating-panel {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 180px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--surface);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  z-index: 1000;
  font-size: 0.78rem;
}

.floating-panel::-webkit-scrollbar { width: 3px; }
.floating-panel::-webkit-scrollbar-thumb { background: var(--ink-ghost); border-radius: 2px; }

.panel-header {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: var(--tone-border-w) solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.panel-minimize {
  width: 18px; height: 18px;
  border: none; background: none;
  color: var(--ink-mute); font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--tone-radius);
}
.panel-minimize:hover { background: var(--surface-raised); color: var(--ink); }

.panel-section {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.panel-section:last-child { border-bottom: none; }

.section-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* === Categories (型) === */
.category-btn {
  padding: 3px var(--space-sm);
  margin-bottom: 2px;
  border-radius: var(--tone-radius);
  color: var(--ink-soft);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.15s;
}
.category-btn:hover { color: var(--ink); }
.category-btn.active {
  outline: 1px solid var(--ink-ghost);
  color: var(--ink);
}

/* === Custom toggle === */
.checklist-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.checklist-row:hover { color: var(--ink); }

.checklist-label { flex: 1; }

.custom-toggle {
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--ink-ghost);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
.custom-toggle.on { color: var(--pass); }
.custom-toggle:focus { outline: 1px solid var(--ink-ghost); border-radius: 2px; }

/* === Custom dropdown (replaces native select) === */
.custom-dropdown { position: relative; }

.dropdown-display {
  padding: 3px var(--space-sm);
  background: var(--surface-raised);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink);
  font-size: 0.72rem;
  cursor: pointer;
}
.dropdown-display::after {
  content: ' \25BE';
  color: var(--ink-mute);
}

.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--surface);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  z-index: 1001;
  max-height: 150px;
  overflow-y: auto;
}

.dropdown-item {
  padding: 3px var(--space-sm);
  font-size: 0.72rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.dropdown-item:hover { background: var(--surface-raised); color: var(--ink); }
.dropdown-item.active { color: var(--pass); }

/* === Custom color picker === */
.custom-color-wrap { margin-bottom: var(--space-sm); }

.color-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.palette-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
  border-radius: 2px;
}
.palette-icon:hover { color: var(--ink); background: var(--surface-raised); }

.hex-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.color-preview {
  width: 18px; height: 18px;
  border-radius: 2px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.hex-input {
  flex: 1;
  padding: 2px 4px;
  background: var(--surface-raised);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  outline: none;
  width: 0;
}

.picker-area { margin-top: 4px; }

.gradient-canvas {
  width: 100%;
  height: 56px;
  border-radius: 2px;
  border: 1px solid var(--border);
  cursor: crosshair;
  display: block;
  touch-action: none;
}

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.color-swatch {
  width: 16px; height: 16px;
  border-radius: 2px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.1s;
}
.color-swatch:hover { transform: scale(1.2); }
.color-swatch.active {
  outline: 2px solid var(--pass);
  outline-offset: 1px;
}

/* === Collapsible section === */
.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.collapsible-header:hover { color: var(--ink-soft); }
.collapsible-arrow { font-size: 0.6rem; }
.collapsible-body { padding-top: var(--space-xs); }

/* === Floating minimized icon === */
.floating-icon {
  position: fixed;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: var(--tone-border-w) solid var(--border);
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 1000;
  font-size: 16px;
}
.floating-icon:hover { color: var(--ink); border-color: var(--ink-ghost); }

#tool-icon { top: var(--space-lg); right: var(--space-lg); }

/* CC Panel — bottom-left to avoid title overlap */
#cc-panel {
  top: auto;
  bottom: 40px;
  left: var(--space-lg);
  right: auto;
  width: 220px;
}
#cc-icon {
  top: auto;
  bottom: 40px;
  left: var(--space-lg);
}

.cc-messages {
  max-height: 180px; overflow-y: auto;
  padding: var(--space-xs) var(--space-sm);
}
.cc-msg {
  padding: 3px var(--space-sm);
  margin-bottom: 3px;
  border-radius: var(--tone-radius);
  font-size: 0.72rem;
  line-height: 1.4;
  word-wrap: break-word;
}
.cc-msg-user { background: var(--surface-raised); color: var(--ink); text-align: right; }
.cc-msg-assistant { background: var(--border-fine); color: var(--ink-mid); }

.cc-input-wrap {
  display: flex;
  border-top: var(--tone-border-w) solid var(--border);
}
.cc-input {
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  background: transparent; border: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.75rem;
  outline: none;
}
.cc-send {
  padding: var(--space-xs) var(--space-sm);
  background: none; border: none;
  color: var(--ink-mute); cursor: pointer; font-size: 0.9rem;
}
.cc-send:hover { color: var(--ink); }

/* === Decision Button (modification 7: dashed, muted) === */
#decision-btn {
  position: fixed;
  bottom: 40px;
  right: var(--space-lg);
  padding: var(--space-sm) var(--space-xl);
  background: transparent;
  border: 1px dashed var(--ink-ghost);
  border-radius: var(--tone-radius);
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 999;
  transition: color 0.15s, border-color 0.15s;
}
#decision-btn:hover {
  color: var(--ink-soft);
  border-color: var(--ink-mute);
}

/* === Disclaimer (fixed point 4) === */
#disclaimer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  padding: 6px;
  font-size: 0.55rem;
  color: var(--ink-ghost);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
}

/* === Post-decision overlay & screens === */
.screen-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-xl);
}
.post-screen { width: 100%; max-width: 400px; }

.email-input {
  width: 100%;
  padding: var(--space-md);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-ghost);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  text-align: center;
}
.email-input::placeholder { color: var(--ink-ghost); }

.channel-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
.channel-btn {
  padding: var(--space-md);
  background: var(--surface);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-mid);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer; text-align: left;
  transition: color 0.15s, border-color 0.15s;
}
.channel-btn:hover { color: var(--ink); border-color: var(--ink-ghost); }

.pricing-table { font-family: var(--font-mono); font-size: 0.85rem; }
.pricing-row {
  display: flex; justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.pricing-name { color: var(--ink-mid); }
.pricing-price { color: var(--ink); text-align: right; }
.pricing-separator { height: var(--space-lg); }

/* === Accessibility: focus-visible === */
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.custom-toggle:focus-visible,
.category-btn:focus-visible,
.dropdown-display:focus-visible,
.channel-btn:focus-visible,
#decision-btn:focus-visible,
.panel-minimize:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* === Accessibility: reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Mobile === */
@media (max-width: 600px) {
  #tool-panel, #cc-panel {
    width: calc(100% - 2 * var(--space-md));
    right: auto; left: var(--space-md);
  }
  #cc-panel { top: auto; bottom: 40px; }
  #decision-btn { right: var(--space-md); }
}

/* === Preset buttons === */
.preset-btn {
  display: block;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
  background: transparent;
  border: var(--tone-border-w) dashed var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-mid);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.preset-btn:hover { color: var(--ink); border-color: var(--ink-ghost); }
.preset-btn.active {
  color: var(--ink);
  border-color: var(--ink-soft);
  border-style: solid;
}

/* === External Video block === */
.ext-video-block {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--element-bg, var(--surface));
  border-radius: var(--tone-radius);
}
.ext-video-label-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.ext-video-label-chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-ghost);
  cursor: pointer;
}
.ext-video-label-chip:hover { color: var(--ink-mid); }
.ext-video-label-chip.active {
  color: var(--ink);
  border-color: var(--ink-soft);
}
.ext-video-url-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.ext-video-url {
  flex: 1;
  padding: var(--space-sm);
  background: transparent;
  border: none;
  border-bottom: var(--tone-border-w) solid var(--ink-ghost);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  outline: none;
}
.ext-video-url::placeholder { color: var(--ink-ghost); }
.ext-video-provider-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.ext-video-surface {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-raised);
  border-radius: var(--tone-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ext-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ext-video-surface-empty {
  color: var(--ink-ghost);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.ext-video-loom-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.ext-video-loom-icon {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink-mid);
  letter-spacing: 0.1em;
}
.ext-video-loom-note {
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.ext-video-loom-open {
  padding: 6px 14px;
  color: var(--ink);
  border: var(--tone-border-w) solid var(--ink-ghost);
  border-radius: var(--tone-radius);
  text-decoration: none;
  font-size: 0.8rem;
}
.ext-video-loom-open:hover { border-color: var(--ink-soft); }

/* === Watch actions row === */
.watch-actions-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-top: var(--space-xs);
}
.watch-action {
  padding: 6px 12px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-mid);
  text-decoration: none;
  font-size: 0.78rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.watch-action:hover { color: var(--ink); border-color: var(--ink-ghost); }
.watch-action-px {
  color: var(--ink);
  border-style: dashed;
  border-color: var(--ink-soft);
}

/* === Support block === */
.support-block {
  padding: var(--space-lg);
  background: var(--element-bg, var(--surface));
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.support-heading {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.support-helper {
  font-family: var(--font-body);
  color: var(--ink-mid);
  font-size: 0.85rem;
}
.support-url-row { display: flex; gap: var(--space-sm); }
.support-url-input {
  flex: 1;
  padding: var(--space-sm);
  background: transparent;
  border: none;
  border-bottom: var(--tone-border-w) solid var(--ink-ghost);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  outline: none;
}
.support-url-input::placeholder { color: var(--ink-ghost); }
.support-open-btn {
  align-self: flex-start;
  padding: 8px 18px;
  color: var(--ink);
  border: var(--tone-border-w) solid var(--ink-ghost);
  border-radius: var(--tone-radius);
  text-decoration: none;
  font-size: 0.85rem;
}
.support-open-btn:hover { border-color: var(--ink-soft); }
.support-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.support-note-sep { color: var(--ink-ghost); }

/* === Sponsor slots block === */
.sponsor-slots-block {
  padding: var(--space-md);
  background: var(--element-bg, var(--surface));
  border-radius: var(--tone-radius);
}
.sponsor-slots-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
}
.sponsor-slots-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.sponsor-slot {
  padding: var(--space-md);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sponsor-slot-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}
.sponsor-slot-desc {
  font-size: 0.78rem;
  color: var(--ink-mid);
}
.sponsor-slot-meta {
  display: flex;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.sponsor-slot-mode {
  padding: 1px 6px;
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
}
.sponsor-slot-price { color: var(--ink-mid); }
.sponsor-slot-action {
  align-self: flex-start;
  margin-top: var(--space-xs);
  padding: 4px 12px;
  border: var(--tone-border-w) solid var(--ink-ghost);
  border-radius: var(--tone-radius);
  font-size: 0.78rem;
  color: var(--ink-mid);
  cursor: pointer;
}
.sponsor-slot-action:hover { color: var(--ink); border-color: var(--ink-soft); }

/* === Ticket block === */
.ticket-block {
  padding: var(--space-md);
  background: var(--element-bg, var(--surface));
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.ticket-title-input,
.ticket-date-input,
.ticket-desc-input,
.ticket-url-input {
  padding: var(--space-sm);
  background: transparent;
  border: none;
  border-bottom: var(--tone-border-w) solid var(--ink-ghost);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  outline: none;
}
.ticket-title-input { font-family: var(--font-heading); font-size: 1.1rem; }
.ticket-date-input,
.ticket-url-input { font-family: var(--font-mono); font-size: 0.78rem; }
.ticket-note-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.ticket-note-chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 8px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-ghost);
  cursor: pointer;
}
.ticket-note-chip.active { color: var(--ink); border-color: var(--ink-soft); }
.ticket-sold-row { display: flex; align-items: center; gap: var(--space-sm); }
.ticket-sold-label { font-size: 0.8rem; color: var(--ink-mid); }
.ticket-open-btn {
  align-self: flex-start;
  padding: 8px 18px;
  color: var(--ink);
  border: var(--tone-border-w) solid var(--ink-ghost);
  border-radius: var(--tone-radius);
  text-decoration: none;
  font-size: 0.85rem;
}
.ticket-open-btn.disabled {
  color: var(--ink-ghost);
  border-color: var(--border-fine);
  cursor: default;
}

/* === Archive block — virtualized dense ledger === */
.archive-block {
  padding: var(--space-md);
  background: var(--element-bg, var(--surface));
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.archive-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.archive-scroll {
  position: relative;
  height: 480px;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: var(--tone-border-w) solid var(--border-fine);
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.archive-virt-spacer {
  position: relative;
  width: 100%;
}
.archive-row-virt {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-mid);
}
.archive-row-virt:hover { color: var(--ink); }
.archive-row-idx {
  flex: 0 0 auto;
  color: var(--ink-ghost);
  letter-spacing: 0.04em;
  width: 3em;
  text-align: right;
}
.archive-row-sep { color: var(--ink-ghost); flex: 0 0 auto; }
.archive-row-arrow { color: var(--ink-ghost); flex: 0 0 auto; }
.archive-row-title,
.archive-row-url {
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 0.78rem;
  padding: 0;
  outline: none;
  min-width: 0;
}
.archive-row-title {
  flex: 1 1 45%;
  font-family: var(--font-body);
}
.archive-row-url {
  flex: 1 1 55%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-mid);
}
.archive-row-title::placeholder,
.archive-row-url::placeholder { color: var(--ink-ghost); }
.archive-controls {
  display: flex;
  gap: var(--space-md);
}
.archive-add-btn {
  padding: 4px 10px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  cursor: pointer;
}
.archive-add-btn:hover { color: var(--ink); }
.archive-add-bulk { color: var(--ink-ghost); }

/* === Send-a-pack block === */
.send-pack-block {
  padding: var(--space-lg);
  background: var(--element-bg, var(--surface));
  border: var(--tone-border-w) dashed var(--ink-ghost);
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}
.send-pack-mark {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-ghost);
  letter-spacing: 0.2em;
}
.send-pack-prompt {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--ink);
}
.send-pack-hint {
  font-size: 0.78rem;
  color: var(--ink-mid);
}
.send-pack-btn {
  padding: 8px 18px;
  border: var(--tone-border-w) solid var(--ink-ghost);
  border-radius: var(--tone-radius);
  color: var(--ink);
  font-size: 0.85rem;
  cursor: pointer;
}
.send-pack-btn:hover { border-color: var(--ink-soft); }

/* === Bilingual label pattern (EN primary, JA secondary; both remain legible in fallback fonts) === */
.ext-video-label-chip,
.ticket-note-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.chip-en {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}
.chip-ja {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--ink-soft);
}
.ext-video-label-chip.active .chip-ja,
.ticket-note-chip.active .chip-ja {
  color: var(--ink-mid);
}

.watch-action {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.15;
}
.action-en {
  font-size: 0.8rem;
  font-family: var(--font-body);
}
.action-ja {
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.watch-action:hover .action-ja { color: var(--ink-mid); }

.support-open-btn,
.ticket-open-btn,
.sponsor-slot-action,
.send-pack-btn,
.archive-add-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 1px;
}
.send-pack-btn { align-items: center; }

.sponsor-slot-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.label-en {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}
.label-ja {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.sponsor-slot-mode {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.mode-en { font-family: var(--font-mono); }
.mode-sep { color: var(--ink-ghost); }
.mode-ja { color: var(--ink-mid); font-size: 0.72rem; }

.sponsor-slots-title,
.archive-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.title-en {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--ink);
}
.title-ja {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.ticket-sold-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.ticket-sold-label .label-en { font-size: 0.8rem; }
.ticket-sold-label .label-ja { font-size: 0.72rem; }

.ext-video-surface-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.empty-ratio {
  color: var(--ink-ghost);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.empty-hint {
  color: var(--ink-mid);
  font-size: 0.8rem;
}
.empty-hint-en {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.send-pack-prompt .prompt-ja {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--ink);
}
.send-pack-prompt .prompt-en {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.send-pack-hint {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
}
.send-pack-hint .hint-ja { color: var(--ink-mid); font-size: 0.78rem; }
.send-pack-hint .hint-en { color: var(--ink-soft); font-size: 0.7rem; font-family: var(--font-mono); }

/* =============================================
   Phase B1: Memory Choice UI
   ============================================= */
.memory-choice {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.memory-choice-option {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 8px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-ghost);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.memory-choice-option:hover { color: var(--ink-mid); }
.memory-choice-option.active {
  color: var(--ink);
  border-color: var(--ink-soft);
}
.mem-en {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}
.mem-ja {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--ink-soft);
}
.memory-choice-option.active .mem-ja { color: var(--ink-mid); }

/* =============================================
   Phase B1: Comment block (guestbook / notes)
   ============================================= */
.comment-block {
  padding: var(--space-md);
  background: var(--element-bg, var(--surface));
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.comment-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.comment-entry {
  padding: var(--space-sm) var(--space-md);
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.comment-entry.pinned {
  border-color: var(--ink-ghost);
  border-style: solid;
}
.comment-author {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.comment-text-input {
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  outline: none;
  padding: 0;
}
.comment-text-input::placeholder { color: var(--ink-ghost); }
.comment-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-top: 2px;
}
.comment-pin-btn {
  font-size: 0.7rem;
  color: var(--ink-ghost);
  cursor: pointer;
}
.comment-pin-btn.active { color: var(--ink-mid); }
.comment-pin-btn:hover { color: var(--ink-soft); }
.comment-mem-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 0.6rem;
  color: var(--ink-ghost);
  cursor: pointer;
  padding: 1px 6px;
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
}
.comment-mem-chip:hover { color: var(--ink-mute); }
.mem-label-en { font-family: var(--font-mono); font-size: 0.6rem; }
.mem-label-ja { font-family: var(--font-body); font-size: 0.62rem; color: var(--ink-mute); }

.comment-add-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 1px;
  padding: 4px 10px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  cursor: pointer;
}
.comment-add-btn:hover { color: var(--ink); }

/* =============================================
   Phase B1: Reaction block (aggregate appreciation)
   ============================================= */
.reaction-block {
  padding: var(--space-lg);
  background: var(--element-bg, var(--surface));
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}
.reaction-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.reaction-display {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.reaction-heart {
  font-size: 1.4rem;
  color: var(--ink-mid);
  transition: transform 0.15s;
}
.reaction-count {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.reaction-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.reaction-note .note-ja { color: var(--ink-mid); font-size: 0.78rem; }
.reaction-note .note-en { color: var(--ink-soft); font-size: 0.7rem; font-family: var(--font-mono); }

/* =============================================
   Phase B1: Instant support block (enhanced tip)
   ============================================= */
.instant-support-block {
  padding: var(--space-lg);
  background: var(--element-bg, var(--surface));
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.instant-support-heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.instant-support-helper {
  font-family: var(--font-body);
  color: var(--ink-mid);
  font-size: 0.85rem;
}
.instant-support-url-row { display: flex; gap: var(--space-sm); }
.instant-support-url {
  flex: 1;
  padding: var(--space-sm);
  background: transparent;
  border: none;
  border-bottom: var(--tone-border-w) solid var(--ink-ghost);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  outline: none;
}
.instant-support-url::placeholder { color: var(--ink-ghost); }
.instant-support-note-input {
  padding: var(--space-sm);
  background: transparent;
  border: none;
  border-bottom: var(--tone-border-w) solid var(--border-fine);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.8rem;
  outline: none;
}
.instant-support-note-input::placeholder { color: var(--ink-ghost); }
.instant-support-btn {
  align-self: flex-start;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 1px;
  padding: 8px 18px;
  color: var(--ink);
  border: var(--tone-border-w) solid var(--ink-ghost);
  border-radius: var(--tone-radius);
  text-decoration: none;
  font-size: 0.85rem;
}
.instant-support-btn:hover { border-color: var(--ink-soft); }

/* =============================================
   Phase B1: Sponsor history / archive
   ============================================= */
.sponsor-history {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--tone-border-w) solid var(--border-fine);
}
.sponsor-history-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.sponsor-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.sponsor-history-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}
.sponsor-history-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-ghost);
  flex-shrink: 0;
  margin-top: 6px;
}
.sponsor-history-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
}
.sponsor-history-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
}
.sponsor-history-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-soft);
}
.sponsor-history-status.completed { color: var(--pass); border-color: var(--pass); }
.sponsor-history-status.active { color: var(--ink); border-color: var(--ink-soft); }
.sponsor-history-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
}

/* =============================================
   Phase B1: Ticket status chips
   ============================================= */
.ticket-status-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}
.ticket-status-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 8px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-ghost);
  cursor: pointer;
}
.ticket-status-chip:hover { color: var(--ink-mid); }
.ticket-status-chip.active {
  color: var(--ink);
  border-color: var(--ink-soft);
}

/* =============================================
   Phase B1: Memory strip / quiet timeline
   ============================================= */
.memory-strip {
  margin: calc(var(--space-lg) * var(--tone-spacing-mult)) var(--space-lg);
  padding: var(--space-md);
  border-top: var(--tone-border-w) solid var(--border-fine);
}
.memory-strip-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.memory-strip-empty {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mem-empty-ja { color: var(--ink-mute); font-size: 0.78rem; }
.mem-empty-en { color: var(--ink-ghost); font-size: 0.7rem; font-family: var(--font-mono); }
.memory-strip-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.memory-strip-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}
.memory-strip-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-ghost);
  flex-shrink: 0;
  margin-top: 7px;
}
.memory-strip-content {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
}
.memory-strip-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-mid);
}
.memory-strip-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
}

/* Phase B2: archive-selected memory strip entries */
.memory-strip-entry.archive-selected {
  border-left: 2px solid var(--ink-soft);
  padding-left: var(--space-sm);
}
.memory-strip-dot.archived { background: var(--ink-mid); }
.memory-strip-archive-mark {
  font-size: 0.6rem;
  color: var(--ink-soft);
}

/* =============================================
   Phase B2: Memory Archive Panel
   ============================================= */
#memory-archive-panel {
  top: auto;
  bottom: 40px;
  right: var(--space-lg);
  left: auto;
  width: 260px;
}
#archive-icon {
  top: auto;
  bottom: 80px;
  right: var(--space-lg);
}

.archive-filter-row {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.archive-filter-chip {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 2px 6px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-ghost);
  cursor: pointer;
}
.archive-filter-chip:hover { color: var(--ink-mid); }
.archive-filter-chip.active { color: var(--ink); border-color: var(--ink-soft); }

.archive-group {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.archive-group:last-of-type { border-bottom: none; }
.archive-group-title {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.archive-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 3px 0;
  font-size: 0.72rem;
  color: var(--ink-mid);
}
.archive-item.archive-selected {
  border-left: 2px solid var(--ink-soft);
  padding-left: var(--space-xs);
}
.archive-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.archive-item-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--ink);
}
.archive-item-badges {
  display: flex;
  gap: var(--space-xs);
}
.archive-badge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  padding: 0 4px;
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
  color: var(--ink-mute);
}
.archive-badge.state-show { color: var(--ink-mid); }
.archive-badge.state-keep { color: var(--ink-soft); }
.archive-badge.class-public { color: var(--ink-mid); border-color: var(--ink-ghost); }
.archive-badge.class-memorial { color: var(--pass); border-color: var(--pass); }
.archive-item-date {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
}
.archive-select-btn {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--ink-ghost);
  cursor: pointer;
  border-radius: 2px;
}
.archive-select-btn:hover { color: var(--ink-mid); }
.archive-select-btn.active { color: var(--ink); }

.archive-empty {
  padding: var(--space-md) var(--space-sm);
  text-align: center;
}
.archive-empty-ja { font-size: 0.72rem; color: var(--ink-mute); }
.archive-empty-en { font-size: 0.65rem; color: var(--ink-ghost); font-family: var(--font-mono); }

.archive-export-row {
  padding: var(--space-sm);
  border-top: var(--tone-border-w) solid var(--border-fine);
}
.archive-export-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 1px;
  padding: 4px 10px;
  color: var(--ink-soft);
  font-size: 0.72rem;
  cursor: pointer;
  border: var(--tone-border-w) dashed var(--border);
  border-radius: var(--tone-radius);
}
.archive-export-btn:hover { color: var(--ink); border-color: var(--ink-ghost); }

/* =============================================
   Phase B2: Quiet Trust Surface
   ============================================= */
.trust-surface {
  margin: calc(var(--space-md) * var(--tone-spacing-mult)) var(--space-lg);
  padding: var(--space-md);
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
}
.trust-surface-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.trust-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-mute);
}
.trust-chip-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-ghost);
}
.trust-chip.surface-active .trust-chip-dot { background: var(--pass); }
.trust-chip.sponsor-continuity .trust-chip-dot { background: var(--ink-mid); }
.trust-chip.archive-present .trust-chip-dot { background: var(--ink-soft); }
.trust-chip-text { color: var(--ink-mute); }

/* Phase B2: panel action button (inside collapsible) */
.panel-action-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 1px;
  padding: 4px var(--space-sm);
  margin-bottom: var(--space-xs);
  color: var(--ink-soft);
  font-size: 0.72rem;
  cursor: pointer;
}
.panel-action-btn:hover { color: var(--ink); }

/* Phase B2: mobile adjustments */
@media (max-width: 600px) {
  #memory-archive-panel {
    width: calc(100% - 2 * var(--space-md));
    right: auto; left: var(--space-md);
  }
}

/* =============================================
   Phase B3: Witness Intake Panel
   ============================================= */
#intake-panel {
  top: var(--space-lg);
  right: auto;
  left: var(--space-lg);
  width: 280px;
}
#intake-icon {
  top: var(--space-lg);
  left: var(--space-lg);
}

.intake-tab-row {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.intake-tab-chip {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 2px 8px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-ghost);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.intake-tab-chip:hover { color: var(--ink-mid); }
.intake-tab-chip.active { color: var(--ink); border-color: var(--ink-soft); }

.intake-body { padding: var(--space-sm); }

/* Add tab */
.intake-section {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.intake-section:last-child { border-bottom: none; margin-bottom: 0; }
.intake-section-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.intake-paste {
  display: block;
  width: calc(100% - var(--space-md));
  min-height: 56px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-raised);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  outline: none;
  resize: vertical;
}
.intake-paste::placeholder { color: var(--ink-ghost); }
.intake-file-input {
  color: var(--ink-mute);
  font-size: 0.7rem;
  font-family: var(--font-mono);
  width: 100%;
  padding: 2px 0;
}
.intake-manual-input {
  display: block;
  width: calc(100% - var(--space-md));
  padding: 3px var(--space-sm);
  margin-bottom: 3px;
  background: transparent;
  border: none;
  border-bottom: var(--tone-border-w) solid var(--border-fine);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.72rem;
  outline: none;
}
.intake-manual-input::placeholder { color: var(--ink-ghost); }
.intake-action-btn {
  display: inline-block;
  padding: 3px var(--space-sm);
  margin-top: var(--space-xs);
  border: var(--tone-border-w) dashed var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.intake-action-btn:hover { color: var(--ink); border-color: var(--ink-ghost); }

/* Review tab */
.intake-review { display: flex; flex-direction: column; gap: var(--space-sm); }
.intake-card {
  padding: var(--space-sm);
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intake-card-top {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
}
.intake-card-type {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
}
.intake-card-source {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-soft);
}
.intake-card-summary {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--ink);
  word-break: break-word;
}
.intake-card-target-row,
.intake-card-state-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.intake-card-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
  min-width: 48px;
}
.intake-card-target-row .custom-dropdown,
.intake-card-state-row .custom-dropdown {
  flex: 1;
}
.intake-card-actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.intake-accept-btn,
.intake-reject-btn {
  flex: 1;
  text-align: center;
  padding: 3px var(--space-sm);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.intake-accept-btn {
  color: var(--pass);
  border-color: var(--pass);
}
.intake-accept-btn:hover { background: var(--pass-bg); }
.intake-reject-btn { color: var(--ink-mute); }
.intake-reject-btn:hover { color: var(--ink-soft); border-color: var(--ink-ghost); }

/* Log tab */
.intake-log { display: flex; flex-direction: column; gap: 2px; }
.intake-log-row {
  display: flex;
  gap: var(--space-xs);
  padding: 3px 0;
  border-bottom: var(--tone-border-w) solid var(--border-fine);
  font-size: 0.7rem;
  color: var(--ink-mid);
  align-items: baseline;
}
.intake-log-row:last-child { border-bottom: none; }
.intake-log-left {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 68px; flex-shrink: 0;
}
.intake-log-action {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
}
.intake-log-accepted .intake-log-action { color: var(--pass); }
.intake-log-rejected .intake-log-action { color: var(--ink-mute); }
.intake-log-source {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--ink-mute);
}
.intake-log-mid {
  flex: 1;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.intake-log-summary {
  font-size: 0.7rem;
  color: var(--ink);
  word-break: break-word;
}
.intake-log-target {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--ink-soft);
}
.intake-log-right {
  flex-shrink: 0;
}
.intake-log-time {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
}
.intake-clear-btn {
  margin-top: var(--space-sm);
  align-self: center;
  padding: 3px var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
  cursor: pointer;
  border: var(--tone-border-w) dashed var(--border-fine);
  border-radius: var(--tone-radius);
}
.intake-clear-btn:hover { color: var(--ink-soft); }

.intake-empty {
  padding: var(--space-md) var(--space-sm);
  text-align: center;
}
.intake-empty-ja { font-size: 0.72rem; color: var(--ink-mute); }
.intake-empty-en { font-size: 0.65rem; color: var(--ink-ghost); font-family: var(--font-mono); }

/* Phase B3: witness-backed trust chips */
.trust-chip.witness-sponsor .trust-chip-dot { background: var(--pass); }
.trust-chip.witness-ticket .trust-chip-dot { background: var(--ink-mid); }
.trust-chip.witness-pack .trust-chip-dot { background: var(--ink-soft); }
.trust-chip.witness-payment .trust-chip-dot { background: var(--link); }

/* Phase B3: mobile adjustments */
@media (max-width: 600px) {
  #intake-panel {
    width: calc(100% - 2 * var(--space-md));
    right: auto; left: var(--space-md);
  }
}

/* =============================================
   Phase C0: Surface Switch — Search vs Composer
   ============================================= */

/* Default: search surface is visible, composer hidden */
#search-surface { display: block; }
#px-canvas { display: none; }
#owner-surface { display: none; }

body[data-surface="composer"] #search-surface { display: none; }
body[data-surface="composer"] #px-canvas { display: block; }
body[data-surface="composer"] #owner-surface { display: none; }

body[data-surface="owner"] #search-surface { display: none; }
body[data-surface="owner"] #px-canvas { display: none; }
body[data-surface="owner"] #owner-surface { display: block; }

body[data-surface="search"] #tool-icon,
body[data-surface="search"] #cc-icon,
body[data-surface="search"] #archive-icon,
body[data-surface="search"] #intake-icon,
body[data-surface="search"] #tool-panel,
body[data-surface="search"] #cc-panel,
body[data-surface="search"] #memory-archive-panel,
body[data-surface="search"] #intake-panel,
body[data-surface="search"] #decision-btn,
body[data-surface="owner"] #tool-icon,
body[data-surface="owner"] #cc-icon,
body[data-surface="owner"] #archive-icon,
body[data-surface="owner"] #intake-icon,
body[data-surface="owner"] #tool-panel,
body[data-surface="owner"] #cc-panel,
body[data-surface="owner"] #memory-archive-panel,
body[data-surface="owner"] #intake-panel,
body[data-surface="owner"] #decision-btn,
body[data-surface="owner"] #px-mark,
body[data-surface="owner"] #disclaimer,
body[data-surface="owner"] #surface-switch {
  display: none !important;
}

/* Start surface is jealous of its minimalism — PX mark, disclaimer,
   decision button, all four corner icons, and all four panels recede
   so the visitor sees only the sentence and the button. (Phase 6c.1
   correction — earlier selectors used incorrect IDs.) */
body[data-surface="start"] #px-mark,
body[data-surface="start"] #disclaimer,
body[data-surface="start"] #surface-switch,
body[data-surface="start"] #decision-btn,
body[data-surface="start"] #tool-icon,
body[data-surface="start"] #cc-icon,
body[data-surface="start"] #archive-icon,
body[data-surface="start"] #intake-icon,
body[data-surface="start"] #tool-panel,
body[data-surface="start"] #cc-panel,
body[data-surface="start"] #memory-archive-panel,
body[data-surface="start"] #intake-panel {
  display: none !important;
}

#surface-switch {
  position: fixed;
  bottom: 28px;
  right: 16px;
  z-index: 1500;
  padding: 6px 12px;
  border: 1px dashed var(--ink-ghost);
  border-radius: var(--tone-radius);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  background: var(--bg);
  user-select: none;
  transition: color 0.15s, border-color 0.15s;
}
#surface-switch:hover { color: var(--ink-soft); border-color: var(--ink-mute); }

/* =============================================
   Phase C0: Search Home
   ============================================= */
#search-surface {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
}

.search-home {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--space-xl) * 2) var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.search-home-mark {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-ghost);
  letter-spacing: 0.3em;
}

.search-home-tagline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-home-tagline .tagline-en {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  color: var(--ink);
  line-height: 1.2;
}
.search-home-tagline .tagline-ja {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.search-home-input-wrap {
  border-bottom: var(--tone-border-w) solid var(--ink-ghost);
}
.search-home-input {
  width: calc(100% - var(--space-md));
  padding: var(--space-sm) 0;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
}
.search-home-input::placeholder { color: var(--ink-ghost); }

.search-home-cats {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: var(--tone-border-w) solid var(--border-fine);
}
.search-home-cat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: var(--tone-border-w) solid var(--border-fine);
  cursor: pointer;
  transition: color 0.15s;
}
.search-home-cat-row:hover { color: var(--ink); }
.search-home-cat-row:hover .cat-name-en { color: var(--ink); }
.cat-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-name-en {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--ink-mid);
  transition: color 0.15s;
}
.cat-name-ja {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.cat-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.cat-count-num {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.cat-count-unit {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
}

.search-home-foot {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-home-foot .foot-en {
  font-size: 0.7rem;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.search-home-foot .foot-ja {
  font-size: 0.65rem;
  color: var(--ink-ghost);
}

/* =============================================
   Phase C0: Category Screen
   ============================================= */
.search-category {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.search-cat-head {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.search-cat-home {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 4px 0;
}
.search-cat-home:hover { color: var(--ink); }

.search-cat-tabs {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-left: auto;
}
.search-cat-tab {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.search-cat-tab:hover { color: var(--ink); }
.search-cat-tab.active {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-soft);
}

.search-cat-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.search-cat-input {
  width: calc(100% - var(--space-md));
  padding: var(--space-sm) 0;
  background: transparent;
  border: none;
  border-bottom: var(--tone-border-w) solid var(--ink-ghost);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
}
.search-cat-input::placeholder { color: var(--ink-ghost); }

.search-cat-chip-filter {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.chip-filter-btn {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 3px 10px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-ghost);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 0.15s, border-color 0.15s;
}
.chip-filter-btn:hover { color: var(--ink-mid); }
.chip-filter-btn.active { color: var(--ink); border-color: var(--ink-soft); }

.search-cat-note {
  padding: var(--space-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: var(--tone-border-w) solid var(--border-fine);
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.search-cat-note .note-en {
  font-size: 0.7rem;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.search-cat-note .note-ja {
  font-size: 0.65rem;
  color: var(--ink-ghost);
}

/* Result list */
.search-result-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.search-result-row {
  padding: var(--space-md) 0;
  border-bottom: var(--tone-border-w) solid var(--border-fine);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: color 0.15s;
}
.search-result-row:hover { color: var(--ink); }

.search-result-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.3;
}
.search-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.result-owner { color: var(--ink-mid); }
.result-domain { color: var(--ink-mid); }
.result-sep { color: var(--ink-ghost); }
.result-years { color: var(--ink-mute); }
.search-result-fact {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mid);
  letter-spacing: 0.04em;
}

.search-result-empty {
  padding: var(--space-xl) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-result-empty .empty-en { color: var(--ink-mute); font-family: var(--font-mono); font-size: 0.8rem; }
.search-result-empty .empty-ja { color: var(--ink-ghost); font-size: 0.75rem; }

/* =============================================
   Phase C0: Lighthouse Trust Row
   ============================================= */
.lighthouse-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: 2px;
}
.lighthouse-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 2px 8px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.lighthouse-chip .lh-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-ghost);
}
.lighthouse-publish     .lh-dot { background: var(--link); }
.lighthouse-shipping    .lh-dot { background: var(--ink-mid); }
.lighthouse-payment     .lh-dot { background: var(--link); }
.lighthouse-certificate .lh-dot { background: var(--ink-soft); }
.lighthouse-activity    .lh-dot { background: var(--pass); }
.lighthouse-receipt     .lh-dot { background: var(--ink-mid); }

.lighthouse-row.expanded {
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.lighthouse-row.expanded .lighthouse-chip {
  padding: 4px 10px;
  gap: var(--space-sm);
  font-size: 0.7rem;
}
.lighthouse-row.expanded .lh-desc {
  color: var(--ink-soft);
  font-size: 0.65rem;
  margin-left: auto;
}

/* Phase C4: lighthouse-verified chip — backed by real data */
.lighthouse-chip[data-chip-active="true"] {
  border-color: var(--pass);
  color: var(--ink);
}
.lighthouse-chip[data-chip-active="true"] .lh-dot {
  background: var(--pass);
  width: 6px; height: 6px;
}
/* Owner surface overrides for verified chips */
#owner-surface .lighthouse-chip[data-chip-active="true"] {
  border-color: currentColor;
  opacity: 1;
}
#owner-surface .lighthouse-chip[data-chip-active="true"] .lh-dot {
  opacity: 1;
  width: 6px; height: 6px;
}

/* =============================================
   Phase C0: Entry Detail Overlay
   ============================================= */
.entry-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.entry-overlay-card {
  position: relative;
  background: var(--surface);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.entry-overlay-close {
  position: absolute;
  top: 8px; right: 12px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 4px 8px;
}
.entry-overlay-close:hover { color: var(--ink); }
.entry-overlay-category {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.entry-overlay-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}
.entry-overlay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.overlay-owner { color: var(--ink-mid); }
.overlay-domain { color: var(--ink-mid); }
.overlay-years { color: var(--ink-mute); }
.entry-overlay-fact {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-mid);
  letter-spacing: 0.04em;
}
.entry-overlay-descriptor {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.5;
}
.entry-overlay-continue {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--ink-ghost);
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.15s;
}
.entry-overlay-continue:hover { border-color: var(--ink-soft); }
.entry-overlay-continue.activated {
  border-style: solid;
  color: var(--ink-mid);
  cursor: default;
}
.entry-overlay-continue .continue-en { font-family: var(--font-body); font-size: 0.9rem; }
.entry-overlay-continue .continue-ja { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-soft); }
.entry-overlay-foot {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--tone-border-w) solid var(--border-fine);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.entry-overlay-foot .foot-en { font-size: 0.68rem; color: var(--ink-mute); font-family: var(--font-mono); letter-spacing: 0.04em; }
.entry-overlay-foot .foot-ja { font-size: 0.65rem; color: var(--ink-ghost); }

@media (max-width: 600px) {
  .search-home { padding: var(--space-xl) var(--space-md); }
  .search-category { padding: var(--space-lg) var(--space-md); }
  .search-cat-tabs { margin-left: 0; gap: var(--space-sm); }
  .entry-overlay { padding: var(--space-sm); }
  .entry-overlay-card { padding: var(--space-lg) var(--space-md); }
  #surface-switch { right: 8px; bottom: 24px; }
}

/* =============================================
   Phase C0.5: Owner-Domain Destination Pages
   Each destination is a distinct, quiet place.
   ============================================= */

#owner-surface {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  padding: 0 0 var(--space-xl);
}

/* Per-kind theme attributes (distinct color/typography temperature)
   The owner page container carries data-kind. */

#owner-surface[data-owner-kind="ticketed_live"] {
  background: #1a1511; color: #e9e2d3;
  font-family: 'Shippori Mincho', var(--font-heading);
}
#owner-surface[data-owner-kind="sale"] {
  background: #f3efe6; color: #24201b;
  font-family: var(--font-body);
}
#owner-surface[data-owner-kind="auction"] {
  background: #e9e6df; color: #1c1c1a;
  font-family: var(--font-heading);
}
#owner-surface[data-owner-kind="crowdfund"] {
  background: #eef0e8; color: #1d201a;
  font-family: var(--font-body);
}
#owner-surface[data-owner-kind="digital_hub"] {
  background: #0f1214; color: #d7d4c9;
  font-family: var(--font-heading);
}
#owner-surface[data-owner-kind="video_archive"] {
  background: #161a1a; color: #d0cdbf;
  font-family: var(--font-mono);
}

/* Back-to-PX affordance */
.owner-back {
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 1800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px dashed currentColor;
  opacity: 0.55;
  border-radius: var(--tone-radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  transition: opacity 0.15s;
}
.owner-back:hover { opacity: 1; }
.owner-back-arrow { display: inline-block; }
.owner-back-label { display: inline-block; }

.owner-page {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--space-xl) * 1.5) var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.owner-page-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid currentColor;
  padding-bottom: var(--space-sm);
  opacity: 0.85;
}
.owner-handle {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.owner-domain {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.6;
  letter-spacing: 0.08em;
}

.op-about {
  padding-top: var(--space-md);
  border-top: 1px solid currentColor;
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.op-about-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.op-about-text {
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.meta-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
  display: block;
  margin-bottom: 2px;
}
.meta-value { font-size: 0.95rem; }

/* Primary action button (calm, single per page) */
.op-primary-btn {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-sm) calc(var(--space-md) * 1.5);
  border: 1.5px solid currentColor;
  border-radius: var(--tone-radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
  letter-spacing: 0.02em;
}
.op-primary-btn:hover { background: rgba(127, 127, 127, 0.08); }

.owner-page-foot {
  margin-top: calc(var(--space-xl) * 2);
  padding-top: var(--space-md);
  border-top: 1px solid currentColor;
  opacity: 0.45;
  text-align: center;
}
.owner-foot-text {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

/* --- (1) Ticketed Live: salon-dark, serif, centered emphasis --- */
.op-tl { display: flex; flex-direction: column; gap: var(--space-md); }
.op-tl-title {
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  font-family: 'Shippori Mincho', var(--font-heading);
  font-weight: 400;
  margin: 0;
  line-height: 1.25;
}
.op-tl-desc {
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.9;
  margin: 0;
}
.op-tl-meta {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-md) 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.95;
}
.op-tl-meta > div { min-width: 120px; }
.op-tl-tail {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* --- (2) Sale: studio shop, two-column on wide, single column mobile --- */
.op-sale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.op-sale-gallery {
  display: flex; align-items: flex-start; justify-content: center;
}
.op-sale-img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(150deg, rgba(120,90,60,0.12), rgba(60,40,20,0.22)),
    linear-gradient(30deg, #d4c8b0 0%, #b7a588 100%);
  border: 1px solid rgba(0,0,0,0.1);
}
.op-sale-detail { display: flex; flex-direction: column; gap: var(--space-md); }
.op-sale-title {
  font-family: 'Cormorant Garamond', var(--font-heading);
  font-size: 1.7rem;
  margin: 0;
  font-weight: 400;
  line-height: 1.25;
}
.op-sale-paragraph { font-size: 0.95rem; line-height: 1.7; margin: 0; }
.op-sale-price-row { font-family: var(--font-mono); }
.op-sale-price { font-size: 1.3rem; letter-spacing: 0.04em; }
.op-sale-shipping {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.6;
  letter-spacing: 0.04em;
}
@media (max-width: 600px) {
  .op-sale { grid-template-columns: 1fr; }
}

/* --- (3) Auction: quiet preview house --- */
.op-auc { display: flex; flex-direction: column; gap: var(--space-md); }
.op-auc-title {
  font-family: 'Cormorant Garamond', var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.25;
}
.op-auc-desc { font-size: 0.95rem; line-height: 1.7; margin: 0; opacity: 0.9; }
.op-auc-bid-row {
  display: flex;
  gap: var(--space-xl);
  padding: var(--space-md) 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  flex-wrap: wrap;
}
.op-auc-current-value { font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: 0.04em; }
.op-auc-remaining-value { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.04em; opacity: 0.85; }
.op-auc-bid-form { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.op-auc-bid-input {
  flex: 1;
  min-width: 200px;
  padding: var(--space-sm);
  background: transparent;
  border: none;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  outline: none;
}
.op-auc-history { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-sm); }
.op-auc-history-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--space-xs);
}
.op-auc-history-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(127,127,127,0.15);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.op-auc-history-bidder { opacity: 0.7; }
.op-auc-history-amount { letter-spacing: 0.04em; }

/* --- (4) Crowdfund: soft, maker asking --- */
.op-cf { display: flex; flex-direction: column; gap: var(--space-md); }
.op-cf-title {
  font-family: 'DM Sans', var(--font-body);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.op-cf-paragraph { font-size: 0.95rem; line-height: 1.7; margin: 0; }
.op-cf-progress-wrap { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm) 0; }
.op-cf-bar {
  width: 100%;
  height: 3px;
  background: rgba(60, 80, 50, 0.2);
  position: relative;
  overflow: hidden;
}
.op-cf-bar-fill {
  height: 100%;
  background: #3d4f35;
  transition: width 0.4s ease;
}
.op-cf-pct-label { display: flex; justify-content: space-between; }
.op-cf-pct { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; }
.op-cf-days { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.7; }
.op-cf-tiers { display: flex; flex-direction: column; }
.op-cf-tier {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(60,80,50,0.2);
  cursor: pointer;
  transition: padding-left 0.15s;
}
.op-cf-tier:hover { padding-left: var(--space-xs); }
.op-cf-tier-en { font-size: 0.95rem; }
.op-cf-tier-ja { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.6; letter-spacing: 0.04em; }
.op-cf-tier-right { display: flex; align-items: baseline; gap: var(--space-md); }
.op-cf-tier-price { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.04em; }
.op-cf-tier-back { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; opacity: 0.6; text-transform: uppercase; }

/* --- (5) Digital hub: library, serif, archive list --- */
.op-dh { display: flex; flex-direction: column; gap: var(--space-lg); }
.op-dh-featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid currentColor;
}
.op-dh-featured-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.op-dh-featured-title {
  font-family: 'Cormorant Garamond', var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.25;
}
.op-dh-featured-date { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.55; letter-spacing: 0.06em; }
.op-dh-featured-preview { font-size: 1rem; line-height: 1.8; margin: 0; opacity: 0.9; font-family: 'Cormorant Garamond', var(--font-heading); font-style: italic; }
.op-dh-archive { display: flex; flex-direction: column; }
.op-dh-archive-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; margin-bottom: var(--space-xs); }
.op-dh-archive-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid rgba(127,127,127,0.2);
  font-size: 0.9rem;
}
.op-dh-archive-title { font-family: 'Cormorant Garamond', var(--font-heading); }
.op-dh-archive-date { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.55; letter-spacing: 0.04em; }

/* --- (6) Video archive: artist grid --- */
.op-va { display: flex; flex-direction: column; gap: var(--space-lg); }
.op-va-featured { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-lg); align-items: center; }
.op-va-featured-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(120deg, rgba(80,75,60,0.4), rgba(50,55,50,0.4)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 4px);
  border: 1px solid rgba(255,255,255,0.08);
}
.op-va-featured-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; margin: 0; line-height: 1.25; }
.op-va-featured-meta { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.6; margin-top: 4px; letter-spacing: 0.06em; }
.op-va-featured-paragraph { font-size: 0.92rem; line-height: 1.7; margin: var(--space-sm) 0 0 0; opacity: 0.88; }
.op-va-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.op-va-grid-cell { display: flex; flex-direction: column; gap: 6px; }
.op-va-grid-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(145deg, rgba(80,75,60,0.4), rgba(40,42,38,0.5));
  border: 1px solid rgba(255,255,255,0.06);
}
.op-va-grid-title { font-family: var(--font-heading); font-size: 0.95rem; line-height: 1.25; }
.op-va-grid-meta { font-family: var(--font-mono); font-size: 0.65rem; opacity: 0.55; letter-spacing: 0.05em; }
@media (max-width: 600px) {
  .op-va-featured { grid-template-columns: 1fr; }
  .op-va-grid { grid-template-columns: 1fr 1fr; }
}

/* Lighthouse chips on owner pages inherit base styles from C0 but
   use currentColor for subtle contrast on varying backgrounds. */
#owner-surface .lighthouse-chip {
  border-color: currentColor;
  color: inherit;
  opacity: 0.85;
}
#owner-surface .lighthouse-chip .lh-dot {
  background: currentColor;
  opacity: 0.6;
}

/* Owner-side demo confirmation overlay */
.owner-confirm {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.owner-confirm-card {
  background: #fff;
  color: #1a1a1a;
  border-radius: var(--tone-radius);
  padding: var(--space-lg);
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-family: var(--font-body);
}
body[data-tone="studio-world"] .owner-confirm-card,
body[data-tone="protocol-minimal"] .owner-confirm-card {
  background: #1a1a1a;
  color: #e8e6e1;
}
.owner-confirm-text {
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}
.owner-confirm-close {
  align-self: center;
  padding: 6px 18px;
  border: 1px solid currentColor;
  border-radius: var(--tone-radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
.owner-confirm-close:hover { opacity: 1; }

@media (max-width: 600px) {
  .owner-page { padding: calc(var(--space-xl) * 1.2) var(--space-md) var(--space-xl); }
  .owner-back { top: var(--space-sm); left: var(--space-sm); }
}

/* =============================================
   Phase C1: Composer Templates / Three-Step Publish
   ============================================= */

/* Template section at the top of the Composer canvas */
.composer-template-section {
  margin: calc(var(--space-md) * var(--tone-spacing-mult)) var(--space-lg);
  padding: var(--space-md);
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.composer-template-top {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}
.composer-add-btn,
.composer-publish-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 1px;
  padding: 6px 14px;
  border: var(--tone-border-w) solid var(--ink-ghost);
  border-radius: var(--tone-radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s;
  background: var(--surface);
}
.composer-add-btn:hover,
.composer-publish-btn:hover { border-color: var(--ink-soft); }
.composer-add-en,
.composer-pub-en { font-size: 0.85rem; }
.composer-add-ja,
.composer-pub-ja { font-size: 0.6rem; color: var(--ink-soft); font-family: var(--font-mono); letter-spacing: 0.06em; }
.composer-publish-btn { border-style: dashed; }
.composer-template-clear {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-ghost);
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 2px 8px;
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
}
.composer-template-clear:hover { color: var(--ink-mute); }
.composer-template-hint {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) 0;
  color: var(--ink-soft);
}
.composer-template-hint .hint-en { font-size: 0.85rem; }
.composer-template-hint .hint-ja { font-size: 0.7rem; color: var(--ink-mute); font-family: var(--font-mono); letter-spacing: 0.04em; }

/* Template chooser overlay */
.template-chooser-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.template-chooser-card {
  background: var(--surface);
  color: var(--ink);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  padding: var(--space-lg);
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.template-chooser-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.chooser-head-en { font-family: var(--font-heading); font-size: 1.15rem; }
.chooser-head-ja { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-soft); letter-spacing: 0.06em; }

.template-chooser-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: var(--space-sm);
}
.template-chooser-row {
  padding: var(--space-sm) 0;
  border-bottom: var(--tone-border-w) solid var(--border-fine);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: padding-left 0.15s;
}
.template-chooser-row:hover { padding-left: var(--space-xs); }
.template-chooser-row:last-child { border-bottom: none; }
.chooser-row-label { display: flex; align-items: baseline; gap: var(--space-sm); }
.chooser-row-label .row-en {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--ink);
}
.chooser-row-label .row-ja {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.chooser-row-hint {
  font-size: 0.75rem;
  color: var(--ink-mid);
  line-height: 1.5;
}

.template-chooser-close {
  margin-top: var(--space-md);
  text-align: center;
  padding: 6px 14px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.template-chooser-close:hover { color: var(--ink); }

/* Template edit block */
.template-edit-block {
  padding: var(--space-md);
  background: var(--surface);
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.template-edit-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.template-edit-label-en { font-family: var(--font-heading); font-size: 1rem; color: var(--ink); }
.template-edit-label-ja { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-soft); letter-spacing: 0.06em; }

.template-edit-identity {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.template-edit-identity .template-edit-field {
  flex: 1;
  min-width: 160px;
}

.template-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.template-edit-field-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.template-edit-input,
.template-edit-textarea {
  display: block;
  width: calc(100% - var(--space-md));
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  outline: none;
}
.template-edit-input::placeholder,
.template-edit-textarea::placeholder { color: var(--ink-ghost); }
.template-edit-input:focus,
.template-edit-textarea:focus { border-color: var(--ink-soft); }
.template-edit-input-short { max-width: 140px; }
.template-edit-textarea { min-height: 72px; resize: vertical; }

/* Image slot */
.template-edit-image-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-edit-image-ph {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-ghost);
  letter-spacing: 0.04em;
  padding: var(--space-sm);
  border: 1px dashed var(--border);
  border-radius: var(--tone-radius);
  text-align: center;
}
.template-edit-image-preview {
  max-width: 100%;
  max-height: 260px;
  border-radius: var(--tone-radius);
  object-fit: contain;
  background: var(--surface-raised);
}
.template-edit-file {
  font-size: 0.7rem;
  color: var(--ink-mute);
  font-family: var(--font-mono);
}
.template-edit-image-clear {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink-ghost);
  cursor: pointer;
  padding: 2px 8px;
  border: var(--tone-border-w) solid var(--border-fine);
  border-radius: var(--tone-radius);
}
.template-edit-image-clear:hover { color: var(--ink-mute); }

/* Tier editor */
.template-edit-tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-edit-tier-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.template-edit-tier-row .template-edit-input { flex: 1; min-width: 120px; }

/* List editor (archive + grid) */
.template-edit-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.template-edit-list-row {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}
.template-edit-list-row .template-edit-input { flex: 1; min-width: 120px; }
.template-edit-list-rm {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-ghost);
  cursor: pointer;
  font-size: 1rem;
  border-radius: 2px;
}
.template-edit-list-rm:hover { color: var(--fail); }
.template-edit-list-add {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 10px;
  border: var(--tone-border-w) dashed var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.template-edit-list-add:hover { color: var(--ink); border-color: var(--ink-ghost); }

/* Publish preview footer note */
.owner-foot-preview-note {
  margin-top: 6px;
  font-size: 0.62rem;
  color: inherit;
  opacity: 0.6;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Sale page real image (overrides placeholder) */
.op-sale-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,0.1);
  display: block;
}
.op-va-featured-thumb-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.06);
  display: block;
}
.op-tl-image,
.op-auc-image,
.op-cf-image {
  max-width: 100%;
  max-height: 360px;
  object-fit: cover;
  border: 1px solid rgba(127,127,127,0.2);
  display: block;
  margin: 0 auto;
}

/* =============================================
   Phase C2: 4 new owner-kind themes
   ============================================= */
#owner-surface[data-owner-kind="music"] {
  background: #131520; color: #d1cfc2;
  font-family: var(--font-body);
}
#owner-surface[data-owner-kind="writing"] {
  background: #f9f7f0; color: #1e1d19;
  font-family: 'Cormorant Garamond', var(--font-heading);
}
#owner-surface[data-owner-kind="service"] {
  background: #faf8f4; color: #1a1916;
  font-family: var(--font-body);
}
#owner-surface[data-owner-kind="membership"] {
  background: #121616; color: #cdd2c9;
  font-family: var(--font-body);
}

/* --- Music page --- */
.op-music { display: flex; flex-direction: column; gap: var(--space-md); align-items: center; text-align: center; }
.op-music-art, .op-music-art-ph { width: 240px; height: 240px; object-fit: cover; display: block; margin: 0 auto; }
.op-music-art-ph {
  background: linear-gradient(135deg, rgba(70,60,90,0.5), rgba(40,35,55,0.7));
  border: 1px solid rgba(200,200,200,0.1);
}
.op-music-artist { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.7; letter-spacing: 0.1em; }
.op-music-title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 400; margin: 0; }
.op-music-desc { font-size: 0.92rem; line-height: 1.7; margin: 0; opacity: 0.88; max-width: 480px; }
.op-music-price { font-family: var(--font-mono); font-size: 0.9rem; opacity: 0.8; letter-spacing: 0.04em; }
.op-music-tracks { width: 100%; max-width: 480px; text-align: left; }
.op-music-track { display: flex; gap: var(--space-sm); padding: 6px 0; border-bottom: 1px solid rgba(127,127,127,0.15); font-size: 0.85rem; }
.op-music-track-num { font-family: var(--font-mono); font-size: 0.7rem; width: 24px; opacity: 0.5; text-align: right; flex-shrink: 0; }
.op-music-track-title { flex: 1; }
.op-music-track-dur { font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.6; flex-shrink: 0; }
.op-secondary-btn {
  display: inline-block; padding: 6px 14px;
  border: 1px dashed currentColor; border-radius: var(--tone-radius);
  font-family: var(--font-mono); font-size: 0.7rem; cursor: pointer;
  opacity: 0.65; letter-spacing: 0.06em;
}
.op-secondary-btn:hover { opacity: 1; }

/* --- Writing page --- */
.op-writing { display: flex; flex-direction: column; gap: var(--space-lg); }
.op-writing-author { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.6; letter-spacing: 0.1em; }
.op-writing-pub { font-family: 'Cormorant Garamond', var(--font-heading); font-size: clamp(1.5rem,4vw,2.4rem); font-weight: 400; margin: 0; }
.op-writing-featured { border-bottom: 1px solid currentColor; padding-bottom: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.op-writing-featured-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }
.op-writing-featured-title { font-family: 'Cormorant Garamond', var(--font-heading); font-size: 1.3rem; font-weight: 400; margin: 0; }
.op-writing-featured-excerpt { font-size: 0.95rem; line-height: 1.8; margin: 0; font-style: italic; opacity: 0.88; }
.op-writing-archive { display: flex; flex-direction: column; }
.op-writing-archive-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; margin-bottom: var(--space-xs); }
.op-writing-archive-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(127,127,127,0.2); font-size: 0.9rem; }
.op-writing-archive-title { font-family: 'Cormorant Garamond', var(--font-heading); }
.op-writing-archive-date { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.55; }
.op-writing-model { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.6; letter-spacing: 0.06em; }

/* --- Service page --- */
.op-svc { display: flex; flex-direction: column; gap: var(--space-md); }
.op-svc-title { font-size: clamp(1.4rem,3.5vw,2rem); font-weight: 600; margin: 0; }
.op-svc-desc { font-size: 0.95rem; line-height: 1.7; margin: 0; }
.op-svc-meta { display: flex; gap: var(--space-xl); flex-wrap: wrap; padding: var(--space-md) 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.op-svc-past { display: flex; flex-direction: column; gap: var(--space-xs); }
.op-svc-past-entry { font-size: 0.88rem; padding: 4px 0; border-bottom: 1px solid rgba(127,127,127,0.15); }

/* --- Membership page --- */
.op-mem { display: flex; flex-direction: column; gap: var(--space-md); }
.op-mem-title { font-size: clamp(1.4rem,3.5vw,2rem); font-weight: 600; margin: 0; }
.op-mem-desc { font-size: 0.95rem; line-height: 1.7; margin: 0; }
.op-mem-count { font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.7; letter-spacing: 0.04em; }
.op-mem-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); }
.op-mem-tier {
  padding: var(--space-md);
  border: 1px solid currentColor;
  border-radius: var(--tone-radius);
  display: flex; flex-direction: column; gap: var(--space-xs);
  cursor: pointer; transition: background 0.15s;
}
.op-mem-tier:hover { background: rgba(127,127,127,0.08); }
.op-mem-tier-label { font-size: 1rem; font-weight: 600; }
.op-mem-tier-price { font-family: var(--font-mono); font-size: 0.9rem; opacity: 0.85; }
.op-mem-tier-desc { font-size: 0.8rem; opacity: 0.7; }
.op-mem-benefits { display: flex; flex-direction: column; gap: var(--space-xs); }
.op-mem-benefit { font-size: 0.88rem; padding: 4px 0; border-bottom: 1px solid rgba(127,127,127,0.12); }

/* =============================================
   Phase C2: Search enhancement styles
   ============================================= */

/* Price range filter */
.search-price-filter {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.filter-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  min-width: 36px;
}
.filter-sep { color: var(--ink-ghost); font-size: 0.8rem; }
.search-price-input {
  width: 80px;
  padding: 3px var(--space-sm);
  background: transparent;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  outline: none;
}
.search-price-input::placeholder { color: var(--ink-ghost); }

/* Duration filter */
.search-dur-filter {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* Result entry enhancements */
.search-result-fact-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.result-cat-badge {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-mute);
  text-transform: uppercase;
}
.result-price-display {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mid);
  letter-spacing: 0.04em;
}

/* =============================================
   Phase C3: Publish Action Area
   ============================================= */
.publish-area-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
}
.publish-area-card {
  background: var(--surface);
  color: var(--ink);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  padding: var(--space-lg);
  max-width: 440px;
  width: 100%;
  display: flex; flex-direction: column; gap: var(--space-md);
}
.publish-area-head {
  display: flex; align-items: baseline; gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: var(--tone-border-w) solid var(--border-fine);
}
.publish-area-head-en { font-family: var(--font-heading); font-size: 1.15rem; }
.publish-area-head-ja { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-soft); letter-spacing: 0.06em; }
.publish-area-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; line-height: 1.15;
  padding: var(--space-sm) var(--space-md);
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  cursor: pointer;
  transition: border-color 0.15s;
}
.publish-area-btn:hover { border-color: var(--ink-soft); }
.pub-btn-en { font-family: var(--font-body); font-size: 0.9rem; }
.pub-btn-ja { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-soft); letter-spacing: 0.06em; }
.publish-area-note {
  padding-top: var(--space-sm);
  border-top: var(--tone-border-w) solid var(--border-fine);
  display: flex; flex-direction: column; gap: 2px;
}
.pub-note-en { font-size: 0.7rem; color: var(--ink-mute); font-family: var(--font-mono); letter-spacing: 0.04em; }
.pub-note-ja { font-size: 0.65rem; color: var(--ink-ghost); }
.publish-area-close {
  text-align: center;
  padding: 6px 14px;
  border: var(--tone-border-w) solid var(--border);
  border-radius: var(--tone-radius);
  cursor: pointer;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; color: var(--ink-soft);
}
.publish-area-close:hover { color: var(--ink); }

/* Load button in Composer */
.composer-load-btn {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; gap: 1px;
  padding: 6px 14px;
  border: var(--tone-border-w) dashed var(--border);
  border-radius: var(--tone-radius);
  color: var(--ink-soft);
  font-family: var(--font-body); font-size: 0.78rem;
  cursor: pointer;
  background: transparent;
}
.composer-load-btn:hover { color: var(--ink); border-color: var(--ink-ghost); }
.composer-load-en { font-size: 0.78rem; }
.composer-load-ja { font-size: 0.58rem; color: var(--ink-mute); font-family: var(--font-mono); letter-spacing: 0.06em; }

/* Session indicator on Search surface */
.search-session-indicator {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  padding: var(--space-xs) 0;
  text-align: center;
}

/* =============================================
   Phase C6: AI draft modal + Settings sidepanel
   ============================================= */
.template-chooser-ai-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  border: 1px dashed var(--border);
  border-radius: var(--tone-radius);
  cursor: pointer;
  color: var(--ink);
  background: var(--surface);
}
.template-chooser-ai-btn:hover { border-color: var(--ink-soft); }
.template-chooser-ai-btn .ai-btn-en {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.template-chooser-ai-btn .ai-btn-ja { font-size: 0.88rem; }
.template-chooser-ai-btn .ai-btn-hint {
  font-size: 0.65rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.ai-draft-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2700;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
}
.ai-draft-card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
  width: 100%; max-width: 520px;
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
  max-height: 85vh;
  overflow-y: auto;
}
.ai-draft-head {
  display: flex; flex-direction: column; gap: 2px;
}
.ai-head-en { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.ai-head-ja { font-size: 1.1rem; }
.ai-draft-disclaim { font-size: 0.68rem; color: var(--ink-soft); line-height: 1.5; }
.ai-draft-dropzone {
  border: 1px dashed var(--border);
  border-radius: var(--tone-radius);
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  min-height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.ai-draft-dropzone.dragging { border-color: var(--link); }
.ai-draft-drop-hint { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.5; }
.drop-hint-en { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; }
.drop-hint-ja { font-size: 0.78rem; margin-top: 2px; }
.ai-draft-preview { max-width: 100%; max-height: 200px; object-fit: contain; }
.ai-draft-row { display: flex; flex-direction: column; gap: 4px; }
.ai-draft-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.ai-draft-input {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
  padding: 6px 10px;
  font: inherit; font-size: 0.9rem;
}
.ai-draft-provider { font-family: inherit; }
.ai-draft-status { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-soft); min-height: 1em; }
.ai-draft-actions { display: flex; gap: var(--space-sm); align-items: center; }
.ai-draft-btn {
  padding: 6px 14px;
  border: 1px solid var(--ink-soft);
  border-radius: var(--tone-radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.ai-draft-btn:hover { border-color: var(--ink); }
.ai-draft-close { margin-left: auto; cursor: pointer; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.7rem; }
.ai-draft-close:hover { color: var(--ink); }
.ai-draft-result {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
  background: var(--surface-raised);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.ai-draft-kind { display: flex; gap: var(--space-sm); align-items: baseline; }
.ai-draft-kind-label { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-soft); letter-spacing: 0.06em; }
.ai-draft-kind-value { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); }
.ai-draft-field { display: flex; flex-direction: column; gap: 2px; }
.ai-draft-field-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.ai-draft-field-value { font-size: 0.9rem; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }

.tool-panel-gear {
  align-self: flex-end;
  margin-top: var(--space-md);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1;
}
.tool-panel-gear:hover { color: var(--ink); border-color: var(--ink-soft); }

.ai-settings-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2800;
  display: flex;
  justify-content: flex-end;
}
.ai-settings-panel {
  background: var(--surface);
  color: var(--ink);
  border-left: 1px solid var(--border);
  width: 360px; max-width: 90vw;
  height: 100%;
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
  overflow-y: auto;
}
.ai-settings-head { display: flex; flex-direction: column; gap: 2px; }
.ai-settings-head-en { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.ai-settings-head-ja { font-size: 1.05rem; }
.ai-settings-disclaim { font-size: 0.68rem; color: var(--ink-soft); line-height: 1.5; }
.ai-settings-block {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
}
.ai-settings-block-stub { opacity: 0.55; }
.ai-settings-provider { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink); }
.ai-settings-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-soft); letter-spacing: 0.06em; }
.ai-settings-input {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
  padding: 6px 10px;
  font: inherit; font-size: 0.85rem;
}
.ai-settings-stub-note { font-size: 0.68rem; color: var(--ink-soft); line-height: 1.5; }
.ai-settings-actions { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.ai-settings-btn {
  padding: 6px 12px;
  border: 1px solid var(--ink-soft);
  border-radius: var(--tone-radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.ai-settings-btn:hover { border-color: var(--ink); }
.ai-settings-close { cursor: pointer; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.68rem; margin-left: auto; }
.ai-settings-close:hover { color: var(--ink); }
.ai-settings-status { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); min-height: 1em; }
.ai-settings-status-flash { color: var(--pass); }
.ai-settings-btn-ok {
  border-color: var(--pass);
  color: var(--pass);
}

/* Phase C7: Owner profile + persistence opt-in */
.ai-settings-block-owner .ai-settings-provider { color: var(--ink); }
.ai-settings-help { font-size: 0.66rem; color: var(--ink-soft); line-height: 1.5; }
.ai-settings-profile { font-family: inherit; font-size: 0.85rem; resize: vertical; min-height: 80px; }
.ai-settings-persist {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.ai-settings-persist-tog { font-size: 0.85rem; }
.ai-settings-persist-lbl { font-size: 0.72rem; color: var(--ink); cursor: pointer; }
.ai-settings-persist-warn {
  flex-basis: 100%;
  font-size: 0.62rem; color: var(--ink-soft); line-height: 1.5;
}
.ai-settings-clear-ls { border-color: var(--ink-mute); }

/* Per-entry instruction textarea in the AI draft modal */
.ai-draft-instruction {
  font-family: inherit; font-size: 0.88rem;
  resize: vertical; min-height: 60px;
}

/* =============================================
   Phase C8: Box claim wizard + tool-panel Box entry
   ============================================= */
.tool-panel-worker-pill {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  margin-top: var(--space-sm);
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
}
.tool-panel-worker-pill:hover { color: var(--ink); }
.tool-panel-worker-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-ghost);
}
.tool-panel-worker-pill.state-ok .tool-panel-worker-dot { background: var(--pass); }
.tool-panel-worker-pill.state-ok { color: var(--ink); border-color: var(--pass); }
.tool-panel-worker-pill.state-offline .tool-panel-worker-dot { background: var(--fail, #B83232); }
.tool-panel-worker-pill.state-offline { color: var(--fail, #B83232); border-color: var(--fail, #B83232); }
.tool-panel-worker-pill.state-error .tool-panel-worker-dot { background: var(--fail, #B83232); }
.tool-panel-worker-pill.state-error { color: var(--ink-mid); border-color: var(--ink-mid); }

.tool-panel-box {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border);
}
.tool-panel-box-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.tool-panel-box-handle { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink); }
.tool-panel-box-btn {
  padding: 6px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--tone-radius);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.tool-panel-box-btn:hover { border-color: var(--ink-soft); }
.tool-panel-box-en { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.tool-panel-box-ja { font-size: 0.82rem; color: var(--ink); }

.box-wizard-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2750;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
}
.box-wizard-card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
  width: 100%; max-width: 500px;
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
  max-height: 85vh;
  overflow-y: auto;
}
.box-wizard-head { display: flex; flex-direction: column; gap: 2px; }
.box-head-en { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.box-head-ja { font-size: 1.1rem; }
.box-wizard-body { display: flex; flex-direction: column; gap: var(--space-sm); }
.box-step-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.box-step-hint { font-size: 0.66rem; color: var(--ink-soft); line-height: 1.5; }
.box-step-warn { font-size: 0.72rem; color: var(--ink); line-height: 1.5; padding: var(--space-sm); border: 1px dashed var(--ink-soft); border-radius: var(--tone-radius); }
.box-step-profile {
  padding: var(--space-sm);
  background: var(--surface-raised);
  border-radius: var(--tone-radius);
  font-size: 0.82rem; color: var(--ink); line-height: 1.5;
  white-space: pre-wrap;
}
.box-step-sub-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-soft); letter-spacing: 0.06em; margin-top: 6px; }
.box-step-input {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
  padding: 6px 10px;
  font: inherit; font-size: 0.88rem;
}
.box-step-candidates { display: flex; flex-direction: column; gap: 4px; }
.box-candidate {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink);
}
.box-candidate:hover { border-color: var(--ink-soft); }
.box-candidate.selected { border-color: var(--pass); color: var(--ink); }
.box-step-confirm-url {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink);
  padding: var(--space-sm);
  background: var(--surface-raised);
  border-radius: var(--tone-radius);
}
.box-step-persist {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 6px;
}
.box-step-persist-tog { font-size: 0.85rem; }
.box-step-persist-lbl { font-size: 0.72rem; color: var(--ink); cursor: pointer; }
.box-step-done-handle { font-family: var(--font-mono); font-size: 1rem; color: var(--ink); }
.box-step-done-url { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }
.box-wizard-actions { display: flex; gap: var(--space-sm); align-items: center; }
.box-wizard-btn {
  padding: 6px 14px;
  border: 1px solid var(--ink-soft);
  border-radius: var(--tone-radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.box-wizard-btn:hover { border-color: var(--ink); }
.box-step-ai { align-self: flex-start; }
.box-wizard-close { margin-left: auto; cursor: pointer; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.7rem; }
.box-wizard-close:hover { color: var(--ink); }
.box-wizard-status { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-soft); min-height: 1em; }

/* =============================================
   Phase 6c: start surface + 2-step collapse + post-publish
   ============================================= */

/* Entry lobby — one sentence, one primary button, one quiet secondary.
   Only visible when data-surface="start". All colors are fixed
   literals: the Composer's CSS variables are tuned for its dark theme
   (--ink ≈ #e8e6e1), which would render invisible on this light
   surface. The start lobby deliberately sets its own palette. */
#start-surface { display: none; }
body[data-surface="start"] #start-surface {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0;
  padding: 24px;
  background: #f3efe6;
  color: #24201b;
  z-index: 1;
}
body[data-surface="start"] #px-canvas,
body[data-surface="start"] #search-surface,
body[data-surface="start"] #owner-surface {
  display: none;
}
.start-surface-inner {
  max-width: 420px; width: 100%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.start-line {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 1.05rem; line-height: 1.7; letter-spacing: 0.02em;
  color: #24201b;
  margin: 0;
}
.start-primary {
  display: inline-block;
  padding: 12px 36px;
  background: #24201b;
  color: #f3efe6;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem; letter-spacing: 0.04em;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
}
.start-primary:focus { outline: 2px solid #887f72; outline-offset: 3px; }
.start-secondary {
  margin-top: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  color: #887f72;
}
.start-secondary-link {
  color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Step 1 handle field + candidates (2-step collapse — legacy selectors
   .box-step-candidates / .box-candidate kept). */
.box-step-handle-field {
  font-size: 0.95rem;
  padding: 10px 12px;
}

/* Step 2 fill (title + description). */
.box-step-fill { display: flex; flex-direction: column; gap: 6px; }
.box-step-fill-title { font-size: 0.95rem; }
.box-step-fill-desc {
  font-family: inherit; font-size: 0.9rem; line-height: 1.6;
  padding: 10px 12px;
  border: 1px solid var(--ink-soft);
  border-radius: var(--tone-radius);
  background: transparent; color: var(--ink);
  resize: vertical;
}
.box-step-dest {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 10px;
  word-break: break-all;
}

/* Step 1 secondary "AI を使いたい" link — quiet, below the primary
   path, never competes with the key-free flow. */
.box-step-ai-connect {
  align-self: flex-start;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.box-step-ai-connect:hover { color: var(--ink); }

/* Post-publish view — 自分の面が立った, before chips or URL or security. */
.post-publish-view {
  display: flex; flex-direction: column; gap: 14px;
  padding: 8px 0;
}
.post-publish-chip-row { display: flex; gap: 6px; }
.post-publish-chip {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.06em;
  padding: 2px 8px;
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  color: var(--ink-soft);
}
.post-publish-chip-live {
  color: var(--pass, #4a7a5c);
  border-color: var(--pass, #4a7a5c);
}
.post-publish-handle {
  font-family: var(--font-mono);
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.post-publish-title {
  font-family: "Shippori Mincho", serif;
  font-size: 1.15rem; letter-spacing: 0.02em;
  color: var(--ink);
}
.post-publish-desc {
  font-size: 0.88rem; line-height: 1.6;
  color: var(--ink); white-space: pre-wrap;
}
.post-publish-url-row {
  display: flex; align-items: baseline; gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-soft);
}
.post-publish-url {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
  word-break: break-all;
}
.post-publish-url-copy {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.post-publish-url-copy:hover { color: var(--ink); }
.post-publish-share {
  font-size: 0.74rem; line-height: 1.6;
  color: var(--ink-soft);
}
.post-publish-protect-row {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.post-publish-protect-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
}
.post-publish-protect-link:hover { color: var(--ink); filter: brightness(1.15); }
.post-publish-protect-note {
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* 受けたもの panel — Phase 6c pull-only receipts. */
.ai-settings-receipts { margin-top: 14px; }
.ai-settings-receipts-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  padding: 6px 0;
}
.ai-settings-receipts-title {
  font-size: 0.76rem; color: var(--ink);
}
.ai-settings-receipts-toggle {
  font-family: var(--font-mono);
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.ai-settings-receipts-body {
  padding: 4px 0 2px;
  font-size: 0.72rem;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 4px;
}
.ai-settings-receipts-empty {
  color: var(--ink-soft);
  font-style: italic;
}
.ai-settings-receipt-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-settings-receipt-type {
  color: var(--ink);
}
.ai-settings-receipt-time {
  font-family: var(--font-mono); font-size: 0.66rem;
  color: var(--ink-soft);
}
/* Phase 7d: quiet 完了を記録 link + static "recorded" line. Text link,
   not a button — feed-like quietness by default. */
.ai-settings-receipt-fulfill {
  color: var(--ink-soft);
  font-size: 0.64rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ai-settings-receipt-fulfill:hover { color: var(--ink); }
.ai-settings-receipt-fulfilled {
  color: var(--ink-soft);
  font-size: 0.64rem;
  font-style: italic;
}

.publish-area-box .pub-btn-sub {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--ink-soft); margin-top: 2px;
}

/* =============================================
   Phase 6b: 3-layer Settings + protection flows
   ============================================= */

/* Section wrapper — quiet separation without hard borders. */
.ai-settings-section {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border);
}
.ai-settings-section:first-of-type { border-top: 0; padding-top: 0; }
.ai-settings-section-head {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 2px;
}
.ai-settings-section-title {
  font-size: 0.88rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.ai-settings-section-hint {
  font-size: 0.64rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Box section: quieter-than-provider block, aligned to the handle. */
.ai-settings-block-box {
  gap: 6px;
  border-style: solid;
}
.ai-settings-box-handle-row {
  display: flex; align-items: baseline; gap: 8px;
}
.ai-settings-box-handle-lbl {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; color: var(--ink-soft);
}
.ai-settings-box-handle-val {
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--ink);
}
.ai-settings-box-state {
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.ai-settings-box-state.state-ready { color: var(--pass); }
.ai-settings-box-state.state-pending { color: var(--ink); }
.ai-settings-box-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 0.66rem; color: var(--ink-soft);
  font-family: var(--font-mono);
}
.ai-settings-box-meta-item { white-space: nowrap; }
.ai-settings-box-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-settings-box-note { font-size: 0.72rem; color: var(--ink-soft); line-height: 1.5; }

/* Shared quiet + primary buttons for protection flows. */
.prot-btn {
  padding: 6px 14px;
  border-radius: var(--tone-radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--ink-soft);
  color: var(--ink);
  background: transparent;
}
.prot-btn:hover { border-color: var(--ink); }
.prot-btn-quiet { color: var(--ink-soft); border-color: var(--border); }
.prot-btn-quiet:hover { color: var(--ink); border-color: var(--ink-soft); }
.prot-btn-primary { color: var(--ink); border-color: var(--ink); }
.prot-btn-primary:hover { background: var(--surface-raised); }

/* Post-claim "protect this Box" card. */
.prot-card-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2850;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
}
.prot-card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
  width: 100%; max-width: 440px;
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.prot-card-title { font-size: 1rem; color: var(--ink); }
.prot-card-body { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.6; }
.prot-card-actions { display: flex; gap: 10px; margin-top: 6px; }
.prot-card-status { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-soft); min-height: 1em; }

/* Once-only recovery-code display. */
.prot-code-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2860;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
}
.prot-code-card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--tone-radius);
  width: 100%; max-width: 440px;
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.prot-code-title { font-size: 1rem; color: var(--ink); }
.prot-code-body { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.6; }
.prot-code-value {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  letter-spacing: 0.2em;
  text-align: center;
  padding: var(--space-md);
  background: var(--surface-raised);
  border-radius: var(--tone-radius);
  color: var(--ink);
  user-select: all;
}
.prot-code-actions { display: flex; gap: 10px; justify-content: flex-end; }
.prot-code-status { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-soft); min-height: 1em; }

/* 1-screen re-entry: handle + two parallel paths. */
.prot-reentry-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2840;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
}
.prot-reentry-card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
  width: 100%; max-width: 560px;
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.prot-reentry-title { font-size: 1rem; color: var(--ink); }
.prot-reentry-body { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.6; }
.prot-reentry-lbl {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--ink-soft); letter-spacing: 0.06em;
  margin-top: 4px;
}
.prot-reentry-input {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--tone-radius);
  padding: 6px 10px;
  font: inherit; font-size: 0.88rem;
}
.prot-reentry-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: 6px;
}
.prot-reentry-col {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--space-sm);
  border: 1px dashed var(--border);
  border-radius: var(--tone-radius);
}
.prot-reentry-col-head {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.prot-reentry-status { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-soft); min-height: 1em; }
.prot-reentry-actions { display: flex; justify-content: flex-end; }

/* Tool-panel quiet re-entry link when no local Box. */
.tool-panel-reentry-btn {
  margin-top: 4px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  align-self: flex-start;
  border: 0;
  background: transparent;
}
.tool-panel-reentry-btn:hover { color: var(--ink); }

@media (max-width: 520px) {
  .prot-reentry-columns { grid-template-columns: 1fr; }
}

/* ─── Phase 6d: Pro tier section inside Settings ──────────────────────
   Everything here lives under .ai-settings-pro-section and is rendered
   inside the "あなたの Box" section head. Visual weight intentionally
   matches the 受けたもの panel — quiet sections, no bright tags. */
.ai-settings-pro-section {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.ai-settings-pro-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.ai-settings-pro-plan-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.ai-settings-pro-plan-label { color: var(--ink); }
.ai-settings-pro-plan-hint,
.ai-settings-pro-price-hint {
  color: var(--ink-soft);
  font-size: 0.66rem;
}
.ai-settings-pro-upgrade-link {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-soft);
  text-decoration: none;
  padding-bottom: 1px;
  cursor: pointer;
}
.ai-settings-pro-upgrade-link:hover {
  border-bottom-color: var(--ink);
}

.ai-settings-pro-subblock { }
.ai-settings-pro-block {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--space-sm);
  border: 1px dashed var(--border);
  border-radius: var(--tone-radius);
}
.ai-settings-pro-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.ai-settings-pro-block-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.ai-settings-pro-block-body {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 6px;
}
.ai-settings-pro-block-gated,
.ai-settings-pro-block-empty {
  color: var(--ink-soft);
  font-style: italic;
}

/* Custom domain block */
.ai-settings-pro-domain-form {
  display: flex; gap: 8px; align-items: center;
}
.ai-settings-pro-domain-input { flex: 1 1 auto; }
.ai-settings-pro-domain-bind-btn,
.ai-settings-pro-domain-verify-btn {
  padding: 4px 8px;
  font-size: 0.66rem;
  cursor: pointer;
}
.ai-settings-pro-domain-status {
  font-size: 0.66rem;
  color: var(--ink-soft);
  min-height: 1em;
}
.ai-settings-pro-domain-state-pending,
.ai-settings-pro-domain-state-failed,
.ai-settings-pro-domain-state-bound {
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.ai-settings-pro-domain-state-bound { color: var(--ink); }
.ai-settings-pro-domain-state-pending { color: var(--ink-soft); }
.ai-settings-pro-domain-state-failed { color: var(--ink-soft); }
.ai-settings-pro-domain-txt-instr {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-sm);
  background: var(--background-subtle, transparent);
  border-left: 2px solid var(--border);
}
.ai-settings-pro-domain-txt-head {
  font-size: 0.66rem;
  color: var(--ink-soft);
}
.ai-settings-pro-domain-txt-row {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 0.66rem;
}
.ai-settings-pro-domain-txt-lbl {
  color: var(--ink-soft);
  min-width: 46px;
}
.ai-settings-pro-domain-txt-val {
  font-family: var(--font-mono);
  color: var(--ink);
  word-break: break-all;
}
.ai-settings-pro-domain-unbind-row {
  margin-top: 4px;
}
.ai-settings-pro-domain-unbind-link {
  font-size: 0.66rem;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 1px dashed var(--border);
}
.ai-settings-pro-domain-unbind-link:hover { color: var(--ink); }

/* Sponsor ledger rows */
.ai-settings-pro-sponsor-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: baseline;
  font-size: 0.68rem;
}
.ai-settings-pro-sponsor-who { color: var(--ink); }
.ai-settings-pro-sponsor-count { color: var(--ink-soft); }
.ai-settings-pro-sponsor-since { color: var(--ink-soft); font-size: 0.64rem; }
/* Phase 7d: rhythm label. Italic + soft to stay quiet; never a badge. */
.ai-settings-pro-sponsor-rhythm {
  color: var(--ink-soft);
  font-size: 0.64rem;
  font-style: italic;
}

/* Snapshot history rows */
.ai-settings-pro-snapshot-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 0.68rem;
}
.ai-settings-pro-snapshot-when { color: var(--ink); }
.ai-settings-pro-snapshot-id {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

/* Archive rows */
.ai-settings-pro-archive-cap {
  font-size: 0.66rem;
  color: var(--ink-soft);
}
.ai-settings-pro-archive-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  font-size: 0.68rem;
}
.ai-settings-pro-archive-title { color: var(--ink); }
.ai-settings-pro-archive-when { color: var(--ink-soft); font-size: 0.64rem; }
.ai-settings-pro-archive-del {
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.64rem;
  border-bottom: 1px dashed var(--border);
}
.ai-settings-pro-archive-del:hover { color: var(--ink); }
.ai-settings-pro-archive-add {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.ai-settings-pro-archive-add-btn {
  font-size: 0.66rem;
  color: var(--ink-soft);
  cursor: pointer;
  align-self: flex-start;
  border-bottom: 1px dashed var(--border);
}
.ai-settings-pro-archive-add-btn:hover { color: var(--ink); }
.ai-settings-pro-archive-form {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-sm);
  border: 1px dashed var(--border);
  border-radius: var(--tone-radius);
}
.ai-settings-pro-archive-form-status {
  font-size: 0.64rem; color: var(--ink-soft); min-height: 1em;
}

/* ─── Phase 7a: 連続した記録 (verify trust spine surface) ────────────
   Quiet display, sized to match the receipts panel — never the Pro
   section. The integrity surface is meant to be findable on purpose,
   not noticed by accident. No badge, no icon, no color accent. */
.ai-settings-verify-section {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.ai-settings-verify-title {
  font-size: 0.74rem; color: var(--ink-soft); margin-bottom: 6px;
}
.ai-settings-verify-body {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.72rem; color: var(--ink);
}
.ai-settings-verify-empty {
  color: var(--ink-soft); font-style: italic;
}
.ai-settings-verify-count { color: var(--ink); }
.ai-settings-verify-latest,
.ai-settings-verify-switch {
  font-family: var(--font-mono); font-size: 0.66rem;
  color: var(--ink-soft);
}
.ai-settings-verify-check-btn {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.ai-settings-verify-check-btn:hover { color: var(--ink); }
.ai-settings-verify-result {
  font-size: 0.7rem; color: var(--ink-soft); min-height: 1em;
}