/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Core palette */
  --bg:       #0c0c0e;
  --bg2:      #141418;
  --bg3:      #1e1e24;
  --bg4:      #26262e;

  /* Surfaces (alias for lora.html compat) */
  --surface1: #141418;
  --surface2: #1e1e24;

  /* Borders */
  --border:   #2a2a34;
  --border1:  #2a2a34;
  --border2:  #3a3a46;

  /* Text */
  --text:     #eeeef2;
  --text1:    #eeeef2;
  --text2:    #8888aa;
  --text3:    #555570;

  /* Brand */
  --accent:   #e63946;
  --accent2:  #ff6b78;
  --gold:     #f4a623;
  --green:    #34d399;

  /* Misc */
  --radius:   12px;
  --panel-w:  460px;
  --shadow:   0 8px 32px rgba(0,0,0,0.7);
  --shadow-sm:0 2px 12px rgba(0,0,0,0.5);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, textarea, select { font-family: inherit; font-size: 1rem; }

/* ── Global Nav ──────────────────────────────────────────────────────────── */

.g-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(12,12,14,0.85);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--border);
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1.5rem;
}

.g-nav-logo {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #fff 0%, var(--accent2) 60%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  flex-shrink: 0;
}
.g-nav-logo:hover { text-decoration: none; }

.g-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.g-nav-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.g-nav-link:hover { color: var(--text); background: var(--bg3); text-decoration: none; }
.g-nav-link.active { color: var(--text); background: var(--bg3); }

.g-nav-cta {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  flex-shrink: 0;
}
.g-nav-cta:hover { background: var(--accent2); text-decoration: none; }

@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse  { 0%,100% { opacity:.3; } 50% { opacity:.9; } }
@keyframes shimmer { to { background-position: 200% center; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Index Page ──────────────────────────────────────────────────────────── */

.index-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  animation: fadeIn 0.4s ease both;
}

/* Hero */
.site-hero {
  text-align: center;
  padding: 3.5rem 0 3rem;
}

.site-title {
  font-size: clamp(2.8rem, 10vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, var(--accent2) 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.site-tagline {
  color: var(--text2);
  margin-top: 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

/* Create card */
.create-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: var(--shadow);
}

.create-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.create-card h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1em;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.form-field { margin-bottom: 1.1rem; }

.field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.field-optional { font-weight: 400; color: var(--text3); font-size: 0.78rem; }

.synopsis-input {
  width: 100%;
  min-height: 120px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  padding: 0.85rem 1rem;
  resize: vertical;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.synopsis-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,57,70,0.12); }
.synopsis-input::placeholder { color: var(--text3); }

/* Settings row */
.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 140px;
}

.setting-group label {
  font-size: 0.72rem;
  color: var(--text2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.setting-group select,
.setting-group input[type="range"] {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s;
}
.setting-group select:focus { outline: none; border-color: var(--accent); }

.range-wrap { display: flex; align-items: center; gap: 0.75rem; }
.range-wrap input[type="range"] { flex:1; padding:0; accent-color: var(--accent); border:none; }
.range-val { font-size:0.9rem; font-weight:700; color:var(--accent2); min-width:2.5rem; text-align:right; }

.toggle-row { display:flex; align-items:center; gap:0.75rem; margin-top:0.25rem; }
.toggle-label { font-size:.72rem; color:var(--text2); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

.toggle { position:relative; width:44px; height:24px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--bg3); border:1px solid var(--border2); border-radius:24px; cursor:pointer; transition:background .2s; }
.toggle-slider::before { content:""; position:absolute; width:16px; height:16px; background:var(--text2); border-radius:50%; top:3px; left:3px; transition:transform .2s, background .2s; }
.toggle input:checked + .toggle-slider { background:var(--accent); border-color:var(--accent); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); background:#fff; }

/* Ref image */
.ref-image-wrap { display:flex; align-items:flex-start; gap:1rem; }
.ref-image-label {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  width:110px; height:110px; border:2px dashed var(--border2); border-radius:10px;
  cursor:pointer; color:var(--text3); font-size:.78rem; text-align:center;
  transition:border-color .2s, color .2s, background .2s; flex-shrink:0;
}
.ref-image-label:hover { border-color:var(--accent); color:var(--accent2); background:rgba(230,57,70,0.05); }
.ref-image-icon { font-size:1.8rem; line-height:1; }
.ref-image-preview { width:110px; height:110px; object-fit:cover; border-radius:10px; border:2px solid var(--border2); }

/* Create button */
.create-btn {
  margin-top:1.25rem; width:100%; padding:1rem;
  background:var(--accent); color:#fff; border:none; border-radius:10px;
  font-size:1rem; font-weight:700; cursor:pointer; letter-spacing:.04em;
  transition:background .2s, transform .1s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(230,57,70,0.35);
}
.create-btn:hover { background:var(--accent2); box-shadow:0 6px 20px rgba(230,57,70,0.5); }
.create-btn:active { transform:scale(0.98); }
.create-btn:disabled { background:var(--text3); box-shadow:none; cursor:not-allowed; }

/* ── Project Library (Grid) ──────────────────────────────────────────────── */

.library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.library-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text2);
}

.library-count {
  font-size: 0.78rem;
  color: var(--text3);
  background: var(--bg3);
  padding: .2rem .6rem;
  border-radius: 20px;
}

/* 未生成コマの一括生成バー */
.backfill-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin-bottom: 1.25rem;
}
.backfill-info { flex: 1 1 240px; min-width: 0; }
.backfill-headline { font-size: .88rem; font-weight: 600; color: var(--text1); }
.backfill-sub {
  font-size: .74rem; color: var(--text2); margin-top: .2rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.backfill-progress {
  flex: 1 1 100%;
  height: 4px;
  background: var(--bg4);
  border-radius: 4px;
  overflow: hidden;
  order: 3;
}
.backfill-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--accent2));
  transition: width .4s ease;
}
.backfill-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.backfill-btn {
  font: inherit; font-size: .8rem; font-weight: 600;
  color: #1a1a1a; background: var(--gold);
  border: none; border-radius: 8px;
  padding: .5rem .9rem; cursor: pointer;
  transition: filter .15s;
}
.backfill-btn:hover:not(:disabled) { filter: brightness(1.1); }
.backfill-btn:disabled { opacity: .55; cursor: not-allowed; }
.backfill-btn.stop { background: var(--bg4); color: var(--text1); }

@media (max-width: 560px) {
  .backfill-bar { gap: .6rem; }
  .backfill-actions { width: 100%; }
  .backfill-btn { flex: 1; padding: .6rem; }
}

/* Grid of manga "book covers" */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.25rem;
}

.project-card {
  position: relative;
  border-radius: 10px;
  overflow: visible;
  cursor: pointer;
  animation: fadeIn 0.4s ease both;
}

.project-card-inner {
  display: block;
  text-decoration: none;
  color: var(--text);
}
.project-card-inner:hover { text-decoration: none; }

.project-card-cover {
  width: 100%;
  aspect-ratio: 2/3;
  background: var(--bg3);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-card:hover .project-card-cover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 36px rgba(0,0,0,0.7);
}

.project-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.5rem;
  color: var(--border2);
}

.project-cover-placeholder span { font-size: 2.5rem; }

/* Generating shimmer */
.project-card.generating .project-card-cover {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}

.project-card-info {
  padding: .55rem .2rem .2rem;
}

.project-card-name {
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.project-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .2rem;
}

/* Status dot */
.status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.complete { background: var(--green); }
.status-dot.generating_story,
.status-dot.generating_images,
.status-dot.pending { background: var(--gold); animation: pulse 1.4s ease-in-out infinite; }
.status-dot.error { background: var(--accent2); }

.project-card-pages {
  font-size: .7rem;
  color: var(--text3);
}

/* Delete button (appears on hover) */
.project-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  background: rgba(12,12,14,0.8);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text3);
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
  z-index: 10;
}
.project-rename-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  background: rgba(12,12,14,0.8);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text3);
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
  z-index: 10;
  right: 2.4rem;
}
.project-card:hover .project-delete-btn { opacity: 1; }
.project-card:hover .project-rename-btn { opacity: 1; }
.project-rename-btn:hover { color: var(--text1); border-color: var(--accent); }
.project-delete-btn:hover { color: var(--accent2); background: #2a1010; border-color: var(--accent); }

/* Legacy list styles (kept for backward compat) */
.project-list { display:flex; flex-direction:column; gap:.5rem; }
.project-row { display:flex; align-items:center; gap:1rem; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:.75rem; transition:border-color .2s; }
.project-row:hover { border-color:var(--border2); }
.project-row-thumb { flex-shrink:0; width:64px; height:88px; border-radius:6px; overflow:hidden; background:var(--bg3); display:flex; align-items:center; justify-content:center; }
.project-row-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.project-thumb-placeholder { font-size:1.8rem; color:var(--border2); }
.project-row-info { flex:1; min-width:0; text-decoration:none; color:var(--text); }
.project-row-info:hover { text-decoration:none; }
.project-name { font-size:.95rem; font-weight:600; margin-bottom:.3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-meta { font-size:.75rem; color:var(--text3); display:flex; align-items:center; gap:.5rem; }
.delete-btn { flex-shrink:0; background:none; border:1px solid var(--border); border-radius:6px; color:var(--text3); cursor:pointer; font-size:1rem; padding:.4rem .6rem; transition:color .15s, border-color .15s, background .15s; }
.delete-btn:hover { color:var(--accent2); border-color:var(--accent); background:#2a1010; }

.status-badge { display:inline-block; padding:.15em .5em; border-radius:4px; font-size:.7rem; font-weight:700; letter-spacing:.04em; }
.status-badge.generating_story,.status-badge.generating_images,.status-badge.pending { background:#1a2a1a; color:var(--green); }
.status-badge.complete { background:#1a2030; color:#7ab4ff; }
.status-badge.error { background:#2a1a1a; color:var(--accent2); }

.empty-state {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--text3);
  font-size: .9rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.empty-state-icon { font-size: 3.5rem; opacity: .5; }

/* Error */
.error-banner { background:#2a1010; border:1px solid var(--accent); color:var(--accent2); padding:.75rem 1rem; border-radius:8px; margin-bottom:1.5rem; font-size:.9rem; }

/* Section */
.section-title { font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); margin-bottom:1rem; }

/* ── Viewer Page ─────────────────────────────────────────────────────────── */

.viewer-layout {
  display: flex;
  min-height: calc(100vh - 52px);
}

.viewer-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1.25rem;
  position: sticky;
  top: 52px;
  height: calc(100vh - 52px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sidebar-back { font-size:.85rem; color:var(--text2); display:flex; align-items:center; gap:.35rem; }
.sidebar-back:hover { color:var(--text); }
.sidebar-title { font-size:1.05rem; font-weight:800; line-height:1.35; cursor:pointer; }
.sidebar-title:hover { color:var(--accent2); }

.sidebar-status { display:flex; flex-direction:column; gap:.5rem; }
.status-label { font-size:.72rem; color:var(--text2); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

.progress-bar-wrap { height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.progress-bar { height:100%; background:linear-gradient(90deg, var(--accent), var(--gold)); border-radius:3px; transition:width .6s ease; }
.progress-text { font-size:.78rem; color:var(--text2); }

.sidebar-chars { border-top:1px solid var(--border); padding-top:1rem; }
.chars-label { font-size:.72rem; color:var(--text3); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.5rem; }
.char-item { font-size:.8rem; color:var(--text2); padding:.25rem 0; border-bottom:1px solid var(--border); }
.char-name { font-weight:600; color:var(--text); }
.char-role { font-size:.7rem; color:var(--text3); margin-left:.4rem; }

.sidebar-actions { padding:.75rem 0; display:flex; flex-direction:column; gap:.5rem; }

.sidebar-btn {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: .83rem;
  padding: .6rem 1rem;
  text-align: left;
  transition: background .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sidebar-btn:hover { background:var(--border); border-color:var(--text3); }
.sidebar-btn:disabled { opacity:.4; cursor:default; }

/* Keep old dl-btn alias */
.dl-btn { width:100%; background:var(--bg3); border:1px solid var(--border2); border-radius:8px; color:var(--text); cursor:pointer; font-size:.85rem; padding:.6rem 1rem; transition:background .15s, border-color .15s; }
.dl-btn:hover { background:var(--border); border-color:var(--text3); }
.dl-btn:disabled { opacity:.5; cursor:default; }

.sidebar-error { background:#2a1010; border-radius:6px; padding:.75rem; font-size:.78rem; color:var(--accent2); }

/* ── Manga Reader ────────────────────────────────────────────────────────── */

.viewer-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1rem 5rem;
}

.manga-strip {
  width: 100%;
  max-width: var(--panel-w);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.manga-page-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #fff;
  border: 3px solid #111;
  box-shadow: 6px 6px 0 #111, 0 4px 24px rgba(0,0,0,.35);
  animation: fadeIn .5s ease both;
}

.page-label { position:absolute; bottom:-1.5rem; right:0; font-size:.68rem; color:var(--text3); letter-spacing:.08em; }

/* 章タイトル区切り */
.chapter-divider {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--text1);
  padding: 1.2rem 0 .6rem;
  margin-top: .5rem;
  margin-bottom: -.3rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.chapter-divider::before,
.chapter-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--border2));
}
.chapter-divider::after {
  background: linear-gradient(90deg, var(--border2), transparent);
}

/* Panels */
.manga-panel { position:absolute; overflow:hidden; background:#d0d0d0; border:2.5px solid #111; }
.manga-panel img { width:100%; height:100%; display:block; object-fit:cover; }


/* Panel button group */
.panel-btn-group {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .15s;
  z-index: 10;
}
.manga-panel:hover .panel-btn-group { opacity: 1; }

.panel-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  line-height: 1;
}
.panel-action-btn:hover { background: rgba(230,57,70,0.85); }

/* Keep alias for regen button referenced elsewhere */
.panel-regen-btn { display: none; }

/* Panel overlays (bubbles / sfx) */
.panel-overlays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.panel-overlay-item {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(8px, 1.8cqw, 13px);
  line-height: 1.4;
  max-width: 55%;
  text-align: center;
  word-break: break-all;
  pointer-events: none;
}

.panel-overlay-item.bubble {
  background: white;
  color: #111;
  border: 2.5px solid #111;
  border-radius: 50% / 40%;
  padding: 6px 14px 7px;
  font-weight: 800;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  white-space: nowrap;
  max-width: 62%;
  min-width: 3em;
  box-shadow: 2px 3px 0 rgba(0,0,0,.22);
  letter-spacing: .03em;
  position: absolute;
  font-size: clamp(8px, 1.8cqw, 13px);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* テール：デフォルトは下向き（吹き出しがパネル上部にある場合） */
.panel-overlay-item.bubble::after {
  content: "";
  position: absolute;
  left: 38%;
  bottom: -11px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 7px solid #111;
  border-bottom: none;
}
.panel-overlay-item.bubble::before {
  content: "";
  position: absolute;
  left: 38%;
  bottom: -7px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top: 6px solid white;
  border-bottom: none;
  z-index: 1;
}
/* テール上向き（吹き出しがパネル下部にある場合） */
.panel-overlay-item.bubble.tail-up::after {
  bottom: auto;
  top: -11px;
  left: 62%;
  border-top: none;
  border-bottom: 7px solid #111;
}
.panel-overlay-item.bubble.tail-up::before {
  bottom: auto;
  top: -7px;
  left: 62%;
  border-top: none;
  border-bottom: 6px solid white;
}

.panel-overlay-item.sfx {
  color: #111;
  font-weight: 900;
  font-size: clamp(14px, 3.5cqw, 28px);
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  text-shadow:
    -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white,
    -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white,
    0 0 8px rgba(255,200,0,.5);
  letter-spacing: .08em;
  font-style: italic;
  transform: translate(-50%,-50%) rotate(-8deg) skew(-5deg);
}

/* Intro page character caption */
.panel-intro-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  color: white;
  font-size: .75rem;
  font-weight: 600;
  padding: 1.5rem .5rem .45rem;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  letter-spacing: .03em;
}

/* Bubble editor modal */
.bubble-editor-modal { max-width: 560px; width: 90vw; }

.bubble-img-wrap {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: .5rem;
  cursor: crosshair;
  max-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bubble-img-wrap img {
  max-height: 280px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

#bubble-editor-overlays {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bubble-click-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #e63946;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

/* Suggested dialogue chips in the bubble editor */
.bubble-suggest-btn {
  background: var(--bg4);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .15rem .6rem;
  margin: 0 .3rem .3rem 0;
  font-size: .75rem;
  cursor: pointer;
}
.bubble-suggest-btn:hover {
  color: var(--text1);
  border-color: var(--accent);
}

/* Panel loading shimmer */
.panel-loading {
  width:100%; height:100%;
  background: linear-gradient(90deg, #ddd 25%, #e8e8e8 50%, #ddd 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  color:#999; font-size:.72rem;
}
.panel-loading-icon { font-size:1.5rem; animation:pulse 1.8s ease-in-out infinite; color:#bbb; }

/* ── Regen Modal ─────────────────────────────────────────────────────────── */

.regen-modal { position:fixed; inset:0; background:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(4px); }
.regen-modal-inner { background:var(--bg2); border:1px solid var(--border2); border-radius:16px; padding:1.75rem; width:min(460px,92vw); display:flex; flex-direction:column; gap:1rem; box-shadow:var(--shadow); }
.regen-modal-title { font-size:1rem; font-weight:700; }
.regen-textarea { background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:.9rem; min-height:80px; padding:.75rem; resize:vertical; width:100%; transition:border-color .2s; }
.regen-textarea:focus { outline:none; border-color:var(--accent); }
.regen-modal-actions { display:flex; gap:.75rem; justify-content:flex-end; }
.regen-cancel-btn { background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text2); cursor:pointer; font-size:.9rem; padding:.55rem 1.2rem; transition:background .15s; }
.regen-cancel-btn:hover { background:var(--bg4); }
.regen-ok-btn { background:var(--accent); border:none; border-radius:8px; color:#fff; cursor:pointer; font-size:.9rem; font-weight:700; padding:.55rem 1.4rem; transition:background .15s; }
.regen-ok-btn:hover { background:var(--accent2); }
.regen-ok-btn:disabled { opacity:.5; cursor:default; }

/* ── Manga Page Layouts ─────────────────────────────────────────────────── */

.layout-T1 .manga-panel:nth-child(1) { top:1.7%; left:2.3%; width:95.4%; height:60.5%; }
.layout-T1 .manga-panel:nth-child(2) { top:63.5%; left:2.3%; width:47%;   height:34.5%; }
.layout-T1 .manga-panel:nth-child(3) { top:63.5%; left:49%;  width:49%;   height:34.5%; }

.layout-T2 .manga-panel:nth-child(1) { top:1.7%; left:2.3%; width:95.4%; height:23%; }
.layout-T2 .manga-panel:nth-child(2) { top:25.5%; left:2%;  width:44%;   height:37%; }
.layout-T2 .manga-panel:nth-child(3) { top:25.5%; left:47%; width:51%;   height:37%; }
.layout-T2 .manga-panel:nth-child(4) { top:63%;   left:2%;  width:48%;   height:35%; }
.layout-T2 .manga-panel:nth-child(5) { top:63%;   left:48%; width:50%;   height:35%; }

.layout-T3 .manga-panel:nth-child(1) { top:2%;  left:2%; width:95%; height:26%; }
.layout-T3 .manga-panel:nth-child(2) { top:29%; left:2%; width:45%; height:30%; }
.layout-T3 .manga-panel:nth-child(3) { top:29%; left:49%; width:49%; height:30%; }
.layout-T3 .manga-panel:nth-child(4) { top:60%; left:2%; width:95%; height:38%; }

.layout-T4 .manga-panel:nth-child(1) { top:2%;  left:2%;  width:44%; height:44%; }
.layout-T4 .manga-panel:nth-child(2) { top:2%;  left:48%; width:49%; height:30%; }
.layout-T4 .manga-panel:nth-child(3) { top:47%; left:2%;  width:44%; height:51%; }
.layout-T4 .manga-panel:nth-child(4) { top:33%; left:48%; width:49%; height:65%; }

.layout-T5 .manga-panel:nth-child(1) { top:2%;  left:2%;  width:95%; height:44%; }
.layout-T5 .manga-panel:nth-child(2) { top:47%; left:2%;  width:46%; height:25%; }
.layout-T5 .manga-panel:nth-child(3) { top:47%; left:50%; width:48%; height:25%; }
.layout-T5 .manga-panel:nth-child(4) { top:73%; left:2%;  width:46%; height:25%; }
.layout-T5 .manga-panel:nth-child(5) { top:73%; left:50%; width:48%; height:25%; }

.layout-T6 .manga-panel:nth-child(1) { top:2%;  left:2%;  width:95%; height:33%; }
.layout-T6 .manga-panel:nth-child(2) { top:36%; left:2%;  width:46%; height:62%; }
.layout-T6 .manga-panel:nth-child(3) { top:36%; left:50%; width:48%; height:62%; }

.layout-T7 .manga-panel:nth-child(1) { top:2%;  left:2%;  width:44%; height:55%; }
.layout-T7 .manga-panel:nth-child(2) { top:2%;  left:48%; width:50%; height:55%; }
.layout-T7 .manga-panel:nth-child(3) { top:58%; left:2%;  width:95%; height:40%; }

/* TA: 左に縦長＋右に2つ積み（ドラマチック左フォーカス） */
.layout-TA .manga-panel:nth-child(1) { top:2%;  left:2%;  width:57%; height:96%; }
.layout-TA .manga-panel:nth-child(2) { top:2%;  left:61%; width:37%; height:47%; }
.layout-TA .manga-panel:nth-child(3) { top:51%; left:61%; width:37%; height:47%; }

/* TB: 右に縦長＋左に2つ積み（逆バージョン） */
.layout-TB .manga-panel:nth-child(1) { top:2%;  left:2%;  width:37%; height:47%; }
.layout-TB .manga-panel:nth-child(2) { top:51%; left:2%;  width:37%; height:47%; }
.layout-TB .manga-panel:nth-child(3) { top:2%;  left:41%; width:57%; height:96%; }

/* TC: 上に広い＋下に中＋下に細い（クライマックス用） */
.layout-TC .manga-panel:nth-child(1) { top:2%;  left:2%;  width:95%; height:50%; }
.layout-TC .manga-panel:nth-child(2) { top:53%; left:2%;  width:55%; height:45%; }
.layout-TC .manga-panel:nth-child(3) { top:53%; left:59%; width:39%; height:45%; }

.layout-T8 .manga-panel:nth-child(1) { top:2%;  left:2%; width:95%; height:47%; }
.layout-T8 .manga-panel:nth-child(2) { top:51%; left:2%; width:95%; height:47%; }

.layout-T9 .manga-panel:nth-child(1) { top:2%; left:2%;  width:46%; height:96%; }
.layout-T9 .manga-panel:nth-child(2) { top:2%; left:50%; width:48%; height:96%; }

/* TD: 上に小＋下に大（クローズアップ→ドーン演出） */
.layout-TD .manga-panel:nth-child(1) { top:2%;  left:2%; width:95%; height:30%; }
.layout-TD .manga-panel:nth-child(2) { top:33%; left:2%; width:95%; height:65%; }

/* TE: 上に大＋下に小（全景→寄り） */
.layout-TE .manga-panel:nth-child(1) { top:2%;  left:2%; width:95%; height:65%; }
.layout-TE .manga-panel:nth-child(2) { top:68%; left:2%; width:95%; height:30%; }

/* TF: 左60%右40%（不均等縦分割） */
.layout-TF .manga-panel:nth-child(1) { top:2%; left:2%;  width:56%; height:96%; }
.layout-TF .manga-panel:nth-child(2) { top:2%; left:60%; width:38%; height:96%; }

/* ── Mobile Viewer Bottom Bar ───────────────────────────────────────────── */

.viewer-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(12,12,14,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: .75rem 1rem;
  gap: .75rem;
}

.mobile-bar-status {
  font-size: .78rem;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  flex: 1;
}

.mobile-bar-title {
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-bar-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}

.mobile-bar-btn {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: .78rem;
  padding: .45rem .75rem;
  white-space: nowrap;
  transition: background .15s;
}
.mobile-bar-btn:hover { background: var(--bg4); }

.mobile-progress-bar {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bg3);
  z-index: 150;
}
.mobile-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transition: width .6s ease;
}

/* ── Editor Page (legacy) ────────────────────────────────────────────────── */

.editor-wrap { max-width:960px; margin:0 auto; padding:1.5rem; }
.editor-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.editor-header h1 { font-size:1.4rem; }
.page-block { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin:1rem 0; }
.panels-grid { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.75rem; }
.panel-card { width:240px; border:1px solid var(--border2); border-radius:8px; padding:.75rem; background:var(--bg3); }
.panel-card textarea { width:100%; background:var(--bg2); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:.5rem; font-size:.8rem; resize:vertical; margin-bottom:.5rem; }
.panel-card textarea::placeholder { color:var(--text3); }
.panel-card .image-preview { margin-top:.5rem; min-height:100px; }
.panel-card .image-preview img { width:100%; border-radius:4px; display:block; }
.error-message { color:var(--accent2); font-size:.8rem; margin-top:.25rem; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border:none; border-radius:6px; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .2s; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent2); }
.btn-secondary { background:var(--bg3); color:var(--text); border:1px solid var(--border2); }
.btn-secondary:hover { background:var(--border); }
.btn-sm { padding:.35rem .75rem; font-size:.78rem; }

/* ── Toast ───────────────────────────────────────────────────────────────── */

.toast-wrap {
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: .7rem 1rem;
  font-size: .85rem;
  color: var(--text);
  box-shadow: var(--shadow);
  animation: fadeIn .25s ease both;
  pointer-events: auto;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.toast.success { border-color: var(--green); }
.toast.error { border-color: var(--accent); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 660px) {
  .viewer-sidebar { display: none !important; }
  .viewer-main { padding: .5rem 0 5rem; }
  .manga-strip { max-width: 100%; gap: 1.2rem; }
  .viewer-mobile-bar { display: flex; align-items: center; }
  .manga-page-card { border-width: 2px; box-shadow: 3px 3px 0 #111; }
  .manga-panel { border-width: 1.5px; }
  .panel-overlay-item.bubble { font-size: clamp(9px, 3vw, 13px); padding: 4px 8px; }
  .panel-overlay-item.sfx { font-size: clamp(13px, 4vw, 20px); }
  .chapter-divider { font-size: .8rem; padding: .35rem 0 .15rem; }
  .page-label { font-size: .6rem; }

  .project-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .85rem;
  }
}

@media (max-width: 480px) {
  .g-nav-cta span { display: none; }
  .viewer-main { padding: .25rem 0 5rem; }
  .manga-strip { gap: .8rem; }
}


/* ── ページ操作バー・編集UI ─────────────────────────────────────────── */
.page-tools {
  display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center;
  margin: -.4rem 0 1.6rem; opacity: 0; transition: opacity .18s;
}
.manga-page-card:hover + .page-tools, .page-tools:hover, .page-tools:focus-within { opacity: 1; }
@media (hover: none) { .page-tools { opacity: .75; } }
.page-tools button {
  background: var(--bg3); color: var(--text2); border: 1px solid var(--border);
  border-radius: 6px; padding: .28rem .7rem; font-size: .74rem; cursor: pointer;
}
.page-tools button:hover { color: var(--text1); border-color: var(--accent); }
.page-tools button.danger:hover { color: #fff; background: #b3352d; border-color: #b3352d; }

.info-body { max-height: 60vh; overflow-y: auto; }
.info-row { margin-bottom: .9rem; }
.info-label {
  font-size: .72rem; font-weight: 700; color: var(--text3);
  letter-spacing: .05em; margin-bottom: .2rem;
}
.info-value { font-size: .85rem; color: var(--text1); line-height: 1.65; }
.info-value.pre { white-space: pre-wrap; }

.layout-group { margin-bottom: .9rem; }
.layout-group-title { font-size: .74rem; color: var(--text3); margin-bottom: .35rem; }
.layout-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.layout-choice {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px; cursor: pointer; line-height: 0;
}
.layout-choice:hover { border-color: var(--accent); background: var(--bg4); }
.layout-thumb {
  position: relative; display: block; width: 42px; height: 56px; background: #fff;
  border-radius: 2px;
}
.layout-thumb span {
  position: absolute; background: #c9c9d6; border: 1px solid #8a8a9c; border-radius: 1px;
  font-size: 7px; line-height: 1; color: #55555f;
  display: flex; align-items: center; justify-content: center;
}

.zoom-stage {
  position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 46vh;
  margin: 0 auto; overflow: hidden; background: #000;
  border: 1px solid var(--border); border-radius: 8px; cursor: grab;
  touch-action: none;
}
.zoom-stage:active { cursor: grabbing; }
.zoom-stage img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center center; user-select: none; -webkit-user-drag: none;
}


/* 生成前チェックのエラー表示 */
.create-error {
  background: #2a1010; border: 1px solid var(--accent); border-radius: 10px;
  padding: .9rem 1.1rem; margin-bottom: 1.5rem;
  color: #ffb4ba; font-size: .88rem; line-height: 1.7;
}
/* 一覧カードの未生成コマ表示 */
.pages-missing { color: var(--gold); }

/* ── LoRA の効き具合の比較 ─────────────────────────────────────────────────── */

.cmp-strengths {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
}
.cmp-strengths label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--text1);
  cursor: pointer;
}
.cmp-strengths input { accent-color: var(--accent); }

.cmp-status {
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--text2);
}

.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem;
  margin-top: .8rem;
}
.cmp-cell { margin: 0; }
.cmp-cell-img {
  aspect-ratio: 1024 / 1344;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-cell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-cell-wait {
  font-size: .74rem;
  color: var(--text3);
  text-align: center;
  padding: .5rem;
}
.cmp-cell-wait.err { color: var(--accent2); }
.cmp-cell-wait span { font-size: .66rem; color: var(--text3); word-break: break-all; }
.cmp-cell figcaption {
  margin-top: .4rem;
  font-size: .76rem;
  color: var(--text2);
  text-align: center;
}

/* ── ログイン画面 ──────────────────────────────────────────────────────────── */

.login-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.6rem;
  text-align: center;
}
.login-logo {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--text1);
}
.login-logo span { color: var(--accent); }
.login-sub {
  font-size: .8rem;
  color: var(--text2);
  margin: .5rem 0 1.5rem;
}
.login-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text1);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: .7rem .9rem;
  text-align: center;
}
.login-input:focus {
  outline: none;
  border-color: var(--accent);
}
.login-input:disabled { opacity: .5; }
.login-error {
  margin-top: .8rem;
  font-size: .8rem;
  color: var(--accent2);
}
.login-btn {
  width: 100%;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: .75rem;
  margin-top: 1rem;
  cursor: pointer;
  transition: filter .15s;
}
.login-btn:hover:not(:disabled) { filter: brightness(1.1); }
.login-btn:disabled { background: var(--text3); cursor: not-allowed; }
.login-hint {
  margin-top: 1rem;
  font-size: .72rem;
  color: var(--text3);
}