/* ═══════════════════════════════════════════════════════════════
   "I'm here" — Dark-theme stylesheet
   Sections: Variables · Reset · Auth · Hall · Detail · Story · Chat
             Sleep · Conversations · Personal Center · Commerce · Daily
             Mobile (360/390/430/440/760) · Reduced Motion
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ────────────────────────────────────── */
:root {
  --app-viewport-height:100dvh;
  --bg:#0d1117;
  --bg-soft:#121824;
  --panel:#161b22;
  --card:#1c2333;
  --card-hover:#22293b;
  --text:#e6e1d8;
  --muted:#9b9da3;
  --faint:#666a72;
  --pink:#f0a8d0;
  --pink-soft:#ffd7e9;
  --gold:#e8a850;
  --danger:#d98c9a;
  --line:rgba(255,215,233,.17);
  --line-strong:rgba(255,215,233,.34);
  --shadow:0 24px 64px rgba(0,0,0,.36);
}

.auth-flow-view {
  display:grid;
  place-items:center;
}
.compact-auth-panel {
  width:min(520px,100%);
}

/* ── Reset & Base ──────────────────────────────────────────────── */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
  letter-spacing:0;
  background:
    radial-gradient(circle at 12% 8%, rgba(240,168,208,.14), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(232,168,80,.1), transparent 25%),
    linear-gradient(180deg,#101521,var(--bg) 46%,#090d13);
}
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }

.topbar {
  position:sticky;
  top:0;
  z-index:20;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  border-bottom:1px solid var(--line);
  background:rgba(13,17,23,.86);
  backdrop-filter:blur(18px);
}
.brand {
  display:flex;
  align-items:center;
  padding:0;
  color:var(--text);
  font-weight:800;
  border:0;
  background:transparent;
}
.brand-logo {
  display:block;
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
}
.nav { display:flex; gap:8px; }
.nav button,.back-button {
  min-height:36px;
  padding:0 12px;
  color:var(--muted);
  border:0;
  background:transparent;
}
.nav button:hover,.back-button:hover { color:var(--pink-soft); }

main { width:min(1180px,100%); margin:0 auto; padding:36px 24px 74px; }
.view { min-height:calc(100vh - 170px); }
h1,h2,h3,p,blockquote { margin:0; }
h1 { font-size:42px; line-height:1.12; }
h2 { font-size:22px; }
p { color:var(--muted); line-height:1.72; }
.section-label {
  color:var(--pink-soft);
  font-size:12px;
  text-transform:uppercase;
}

.auth-view {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:50px;
}
.auth-visual {
  min-height:500px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:44px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:radial-gradient(circle at 62% 26%,rgba(240,168,208,.22),transparent 25%),linear-gradient(145deg,#242033,#111722 65%);
  box-shadow:var(--shadow);
}
.auth-visual h1 { max-width:520px; margin:14px 0; }
.auth-visual > p { max-width:520px; font-size:17px; }
.dialogue-preview {
  width:min(470px,90%);
  margin-top:70px;
  display:grid;
  gap:5px;
  padding:18px;
  border:1px solid var(--line-strong);
  border-radius:14px 14px 14px 5px;
  background:rgba(22,27,34,.86);
}
.dialogue-preview strong { color:var(--pink-soft); }
.petal { position:absolute; width:10px; height:16px; border-radius:80% 20%; background:var(--pink); opacity:.62; }
.petal-one { right:18%; top:18%; transform:rotate(28deg); }
.petal-two { right:9%; top:42%; transform:rotate(-18deg); }
.auth-panel {
  display:grid;
  gap:16px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(22,27,34,.88);
  box-shadow:var(--shadow);
}
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:10px; background:rgba(13,17,23,.58); }
.auth-tabs button { min-height:38px; color:var(--muted); border:0; border-radius:8px; background:transparent; }
.auth-tabs button.active { color:var(--text); background:var(--card); }
label { display:grid; gap:7px; color:var(--muted); font-size:14px; }
input,textarea {
  width:100%;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  outline:0;
  background:rgba(28,35,51,.88);
}
input { min-height:44px; padding:0 13px; }
textarea { min-height:48px; max-height:140px; padding:12px 14px; resize:vertical; }
input:focus,textarea:focus { border-color:var(--line-strong); box-shadow:0 0 0 3px rgba(240,168,208,.08); }
.status { min-height:24px; font-size:13px; }
.primary-button,.card-action,.send-button {
  min-height:42px;
  padding:0 18px;
  color:#171119;
  font-weight:800;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--pink));
  box-shadow:0 0 24px rgba(240,168,208,.17);
}
.secondary-button {
  min-height:42px;
  padding:0 18px;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
}
button:disabled { opacity:.42; cursor:not-allowed; }

.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:24px;
}
.page-heading h1 { margin:8px 0; }
.filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.filters button {
  min-height:34px;
  padding:0 12px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(28,35,51,.7);
}
.filters button.active { color:#171119; border-color:transparent; background:linear-gradient(135deg,var(--gold),var(--pink)); }
.inline-status { padding:24px 0; color:var(--muted); }
.character-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.character-card {
  min-height:390px;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(28,35,51,.82);
  box-shadow:0 16px 42px rgba(0,0,0,.2);
  transition:transform .2s ease,border-color .2s ease;
}
.character-card:hover { transform:translateY(-2px); border-color:var(--line-strong); }
.character-card.has-proactive-highlight {
  border-color:rgba(255,143,187,.62);
  box-shadow:0 14px 38px rgba(168,79,119,.16);
}
.character-proactive-note {
  width:100%;
  border:0;
  border-radius:12px;
  padding:9px 12px;
  background:rgba(255,221,235,.74);
  color:#8e3f63;
  text-align:left;
  font-weight:700;
}
.nav-unread-count {
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#c64d7f;
  color:white;
  font-size:11px;
}
.proactive-inbox-list {
  display:grid;
  gap:10px;
}
.proactive-inbox-item {
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:12px;
  align-items:center;
  width:100%;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.72);
  color:var(--text);
  text-align:left;
}
.proactive-inbox-item.is-priority {
  border-color:rgba(255,143,187,.62);
  background:rgba(255,239,246,.86);
}
.proactive-inbox-item span:last-child {
  display:grid;
  gap:4px;
  min-width:0;
}
.proactive-inbox-item small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
}
.proactive-settings-card {
  grid-column:1 / -1;
}
.switch-control,
.proactive-character-setting {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.proactive-character-settings {
  display:grid;
  gap:8px;
  margin-top:14px;
  max-height:min(360px, 48vh);
  overflow:auto;
  padding-right:4px;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* Task 77: heart zone and relationship profile trial */
.heart-zone {
  margin:0 0 18px;
  padding:14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(255,255,255,.72);
  box-shadow:0 12px 32px rgba(48,28,40,.08);
}

.heart-zone-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.heart-zone-heading strong {
  color:var(--ink,#2f2430);
  font-size:15px;
  font-weight:700;
}

.heart-zone-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.heart-zone-list button {
  min-height:52px;
  display:grid;
  justify-items:start;
  gap:4px;
  padding:10px 12px;
  border:1px solid rgba(112,75,92,.18);
  border-radius:8px;
  background:#fff;
  color:var(--ink,#2f2430);
  text-align:left;
}

.heart-zone-list button span { font-weight:700; }
.heart-zone-list button small { color:var(--muted,#766872); }
.heart-zone-list button strong {
  color:var(--accent,#8f4a6a);
  font-size:13px;
  font-weight:700;
}

.relationship-profile-dialog,
.relationship-settings-dialog,
.manual-memory-dialog {
  width:min(520px,calc(100vw - 32px));
  max-height:88dvh;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
}

.relationship-profile-dialog form,
.relationship-settings-dialog form,
.manual-memory-dialog form {
  display:grid;
  gap:14px;
  max-height:88dvh;
  overflow:auto;
  padding:24px;
  border:1px solid rgba(112,75,92,.18);
  border-radius:12px;
  background:#fff;
  color:var(--ink,#2f2430);
  box-shadow:0 24px 70px rgba(26,18,25,.22);
}

.relationship-profile-dialog label,
.relationship-settings-dialog label,
.manual-memory-dialog label {
  display:grid;
  gap:7px;
  font-weight:700;
}

.relationship-profile-dialog input,
.relationship-profile-dialog select,
.relationship-profile-dialog textarea,
.manual-memory-dialog input,
.manual-memory-dialog select,
.manual-memory-dialog textarea {
  min-height:44px;
  border:1px solid rgba(112,75,92,.22);
  border-radius:8px;
  padding:10px 12px;
  background:#fffafc;
  color:var(--ink,#2f2430);
  font-size:16px;
}

.relationship-profile-dialog textarea,
.manual-memory-dialog textarea { resize:vertical; }

.manual-memory-note {
  margin:0;
  color:var(--muted,#766872);
  font-size:13px;
  line-height:1.6;
}

.manual-memory-list {
  display:grid;
  gap:10px;
  max-height:260px;
  overflow:auto;
  padding-right:3px;
}

.manual-memory-empty {
  margin:0;
  color:var(--muted,#766872);
}

.manual-memory-item {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
  padding:12px;
  border:1px solid rgba(112,75,92,.14);
  border-radius:10px;
  background:#fffafc;
}

.manual-memory-type {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 9px;
  color:#7e4d68;
  border:1px solid rgba(181,91,122,.18);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.manual-memory-item strong {
  display:block;
  margin-bottom:4px;
}

.manual-memory-item p {
  margin:0;
  color:var(--muted,#766872);
  font-size:13px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.manual-memory-item button {
  min-height:40px;
  border:1px solid rgba(112,75,92,.2);
  border-radius:8px;
  background:#fff;
  color:var(--ink,#2f2430);
}

.relationship-tone-field,
.relationship-gift-field {
  margin:0;
  padding:0;
  border:0;
  display:grid;
  gap:8px;
}

.relationship-tone-field legend,
.relationship-gift-field legend {
  padding:0;
  font-weight:700;
}

.relationship-tone-options,
.relationship-gift-options {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.relationship-tone-option,
.relationship-gift-option {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 10px;
  border:1px solid rgba(112,75,92,.18);
  border-radius:999px;
  background:#fff7fb;
}

.relationship-tone-option input,
.relationship-gift-option input { width:auto; min-height:0; }

.first-act-panel {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.first-act-panel button {
  min-height:44px;
  border:1px solid rgba(112,75,92,.22);
  border-radius:8px;
  padding:8px 11px;
  background:#fff;
  color:var(--ink,#2f2430);
}

.relationship-settings-body {
  display:grid;
  gap:14px;
}

.relationship-settings-section {
  display:grid;
  gap:10px;
}

.relationship-settings-section h3 {
  margin:0;
  font-size:15px;
}

.relationship-settings-section dl {
  display:grid;
  gap:8px;
  margin:0;
}

.relationship-settings-section dl div {
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:10px;
}

.relationship-settings-section dt { color:var(--muted,#766872); }

.relationship-settings-section dd {
  margin:0;
  min-width:0;
  overflow-wrap:anywhere;
}

.relationship-record {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:52px;
  padding:10px 12px;
  border:1px solid rgba(112,75,92,.14);
  border-radius:8px;
  background:#fffafc;
}

.relationship-record span {
  display:grid;
  gap:3px;
  min-width:0;
}

.relationship-record small {
  color:var(--muted,#766872);
  overflow-wrap:anywhere;
}

.relationship-record button {
  min-height:44px;
  flex:0 0 auto;
}

.relationship-settings-edit-button {
  justify-self:start;
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(112,75,92,.2);
  border-radius:8px;
  background:#fff;
  color:var(--ink,#2f2430);
  font-weight:700;
}

.relationship-settings-empty {
  margin:0;
  color:var(--muted,#766872);
}

.relationship-toast {
  background:#fff7fb;
  color:var(--ink,#2f2430);
}

#affinityToast.has-interactive-toast {
  top:72px;
  z-index:1200;
  pointer-events:auto;
}

.relationship-proposal-toast {
  display:grid;
  gap:8px;
  max-width:min(420px, calc(100vw - 32px));
  pointer-events:auto;
  white-space:normal;
  animation:none;
}

.relationship-toast-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.relationship-toast-actions button {
  min-height:34px;
  border:1px solid var(--border,#eadde6);
  border-radius:8px;
  background:#fff;
  color:var(--ink,#2f2430);
  padding:6px 12px;
  font:inherit;
}

.relationship-toast-actions button:first-child {
  background:var(--accent,#b55b7a);
  border-color:transparent;
  color:#fff;
}

@media (max-width:440px) {
  .heart-zone {
    margin-bottom:12px;
    padding:12px;
  }

  .heart-zone-heading {
    display:grid;
    gap:4px;
  }

  .heart-zone-list {
    grid-template-columns:1fr;
  }

  .relationship-profile-dialog,
  .relationship-settings-dialog,
  .manual-memory-dialog {
    width:100vw;
    max-width:none;
    max-height:92dvh;
    margin:auto 0 0;
  }

  .relationship-profile-dialog form,
  .relationship-settings-dialog form,
  .manual-memory-dialog form {
    max-height:92dvh;
    border-radius:16px 16px 0 0;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  }

  .relationship-tone-options {
    display:grid;
    grid-template-columns:1fr;
  }

  .relationship-settings-section dl div {
    grid-template-columns:1fr;
    gap:3px;
  }

  .relationship-record {
    align-items:flex-start;
  }

  .manual-memory-item {
    grid-template-columns:1fr;
  }

  .first-act-panel {
    display:grid;
    grid-template-columns:1fr;
  }
}
.proactive-character-setting {
  min-height:48px;
  padding:10px 0;
  border-top:1px solid var(--line);
}
.proactive-character-setting span {
  display:grid;
  gap:3px;
  min-width:0;
}
.proactive-character-setting small {
  color:var(--muted);
}
.proactive-character-setting input,
.switch-control input {
  width:22px;
  height:22px;
  flex:0 0 auto;
}
.portrait,.detail-portrait {
  display:grid;
  place-items:center;
  color:#171119;
  border:1px solid var(--line);
  background:linear-gradient(155deg,var(--gold),var(--pink) 52%,#75829e);
}
.portrait { height:132px; border-radius:11px; }
.portrait span,.detail-portrait span { font:700 34px Georgia,serif; }
.portrait-linyan,.portrait-xieyujiu { background:linear-gradient(155deg,#d9b879,#8390aa 60%,#2d3344); }
.portrait-xiahe,.portrait-baizhi { background:linear-gradient(155deg,#ffd5e8,#f0a8d0 48%,#6f82a2); }
.portrait-zhouye,.portrait-hebeichen { background:linear-gradient(155deg,#e8a850,#b57a8a 52%,#283449); }
.portrait-shenlinchuan,.portrait-qiwu { background:linear-gradient(155deg,#8c7fa8,#53617d 52%,#202738); }
.portrait-ache,.portrait-xuqinglan { background:linear-gradient(155deg,#d9c59a,#7ba587 52%,#334052); }
.character-heading { display:flex; justify-content:space-between; gap:8px; }
.character-heading h2 { margin-bottom:3px; }
.character-heading p { font-size:13px; }
.rating-badge {
  width:max-content;
  height:25px;
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  flex:0 0 auto;
  color:var(--pink-soft);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
}
.rating-badge.sensitive { color:#ffd1d9; border-color:rgba(217,140,154,.48); }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; }
.tag-row span { color:var(--muted); font-size:12px; }
.character-card blockquote { min-height:52px; color:#ddd5cc; line-height:1.7; }
.card-action { margin-top:auto; }

.detail-layout {
  display:grid;
  grid-template-columns:360px 1fr;
  gap:28px;
  margin-top:20px;
}
.detail-portrait { min-height:520px; border-radius:14px; box-shadow:var(--shadow); }
.detail-portrait span { font-size:76px; }
.detail-copy {
  display:grid;
  align-content:start;
  gap:18px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(22,27,34,.82);
}
.detail-title { display:flex; justify-content:space-between; align-items:start; gap:18px; }
.detail-title h1 { margin-top:7px; }
.identity-line { color:var(--pink-soft); }
.detail-copy blockquote { padding-left:18px; color:#eee4da; border-left:2px solid var(--pink); font:18px/1.8 Georgia,"Noto Serif SC",serif; }
.detail-copy dl { display:grid; gap:12px; margin:0; }
.detail-copy dl div { display:grid; grid-template-columns:90px 1fr; gap:12px; }
dt { color:var(--pink-soft); }
dd { margin:0; color:var(--muted); line-height:1.65; }

.chat-view { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; }
.chat-shell,.memory-panel {
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(22,27,34,.86);
  box-shadow:var(--shadow);
}
.chat-shell { overflow:hidden; }
.chat-header { min-height:60px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; justify-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.chat-header > .back-button { justify-self:start; }
.chat-header > .chat-header-actions { justify-self:end; }
.chat-header-actions { display:flex; align-items:center; gap:12px; }

.clear-chat-button {
  background:none; border:none; color:var(--muted,#999); font-size:0.85rem; cursor:pointer;
  padding:4px 8px; border-radius:4px; transition:color 0.15s;
}
.clear-chat-button:hover { color:var(--danger,#e53e3e); }

.greeting-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 18px 14px;
  padding:14px 16px;
  border:1px solid rgba(240,168,208,.28);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(240,168,208,.14),rgba(232,168,80,.08));
  box-shadow:0 16px 40px rgba(0,0,0,.22);
}
.greeting-card[hidden] { display:none; }
.greeting-card-copy { display:grid; gap:5px; min-width:0; }
.greeting-label { font-size:12px; color:#ffd1e5; letter-spacing:.02em; }
.greeting-card p { margin:0; line-height:1.55; color:var(--text); overflow-wrap:anywhere; }
.greeting-card button {
  flex:0 0 auto;
  padding:8px 13px;
  border:1px solid rgba(255,209,229,.38);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#ffe7ef;
  cursor:pointer;
}
.daily-card {
  border-color:rgba(155,214,196,.24);
  background:linear-gradient(135deg,rgba(155,214,196,.12),rgba(240,168,208,.08));
}
.daily-card .greeting-label { color:#c9f3e5; }
.chat-identity { display:flex; align-items:center; gap:12px; }
.chat-identity div { display:grid; gap:2px; }
.chat-identity small { color:var(--muted); }
.online-dot { width:9px; height:9px; border-radius:50%; background:var(--pink); box-shadow:0 0 13px var(--pink); }
.messages {
  height:calc(100vh - 245px);
  min-height:430px;
  display:flex;
  flex-direction:column;
  gap:13px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:24px;
  background:radial-gradient(circle at 16% 8%,rgba(240,168,208,.08),transparent 28%),#0f1520;
}
.message { max-width:74%; padding:12px 15px; line-height:1.68; white-space:pre-wrap; box-shadow:0 9px 25px rgba(0,0,0,.18); }
.message-item { display:grid; gap:5px; max-width:74%; }
.message-item .message { max-width:100%; }
.message-item.user { align-self:flex-end; justify-items:end; }
.message-item.assistant { align-self:flex-start; justify-items:start; }
.message-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.message-status button { padding:0; border:0; color:#ffd1d9; background:transparent; font:inherit; cursor:pointer; }
.status-failed .message.user { border-color:rgba(217,140,154,.72); }
.status-pending { opacity:.76; }
.message.assistant { align-self:flex-start; border:1px solid var(--line); border-radius:5px 14px 14px 14px; background:var(--card); }
.message.user { align-self:flex-end; border:1px solid rgba(232,168,80,.2); border-radius:14px 5px 14px 14px; background:rgba(73,55,37,.86); }
.message.streaming::after { content:""; display:inline-block; width:1px; height:1em; margin-left:4px; vertical-align:-2px; background:var(--pink); animation:blink 1s steps(2,end) infinite; }
.message.safety { border-color:rgba(217,140,154,.58); color:#ffe2e7; }
.message.error { border-color:rgba(217,140,154,.58); color:#ffd1d9; }
@keyframes blink { 50% { opacity:0; } }
.chat-form { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; padding:13px; border-top:1px solid var(--line); }
.send-button { min-width:76px; }
.memory-panel { height:max-content; display:grid; gap:12px; padding:20px; }

.hall-create-button { margin:0 0 22px; }
.workspace-view { max-width:1180px; margin:0 auto; padding:36px 24px 72px; }
.workspace-heading,.editor-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.workspace-heading { margin-bottom:28px; }
.workspace-heading h1,.character-generator h1 { margin:6px 0 8px; }
.custom-character-layout { display:grid; grid-template-columns:minmax(240px, .72fr) minmax(0, 1.6fr); gap:24px; align-items:start; }
.character-generator,.character-editor { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px; }
.character-generator { display:grid; gap:16px; position:sticky; top:88px; }
.character-generator label,.character-editor label { display:grid; gap:7px; color:var(--muted); font-size:14px; }
.character-generator textarea,.character-editor input,.character-editor textarea,.character-editor select {
  width:100%; border:1px solid var(--line); border-radius:6px; background:var(--bg-soft); color:var(--text);
  padding:11px 12px; font:inherit; resize:vertical;
}
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.form-grid .wide { grid-column:1 / -1; }
.portrait-upload {
  display:grid;
  gap:12px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg-soft);
}
.portrait-upload-copy h3 {
  margin:5px 0;
}
.portrait-upload-copy p {
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.portrait-upload-zone {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:112px;
  padding:16px;
  border:1px dashed #ca9cb2;
  border-radius:12px;
  background:#fff9fb;
  cursor:pointer;
}
.portrait-upload-zone.dragging {
  border-color:#b65d89;
  background:#fff0f6;
}
.portrait-upload-zone > div:last-of-type {
  display:grid;
  gap:5px;
}
.portrait-upload-zone span,
.portrait-upload-status {
  color:var(--muted);
  font-size:13px;
}
.portrait-preview {
  display:grid;
  flex:0 0 76px;
  width:76px;
  height:92px;
  place-items:center;
  color:#9c5979;
  border-radius:12px;
  background:linear-gradient(145deg,#fce7f0,#f4d1e1);
  font-weight:800;
}
.portrait-preview.is-uploading {
  animation:backup-shimmer 1.4s linear infinite;
}
.portrait-preview.is-error,
.portrait-preview.is-oversize {
  color:#9b4d5d;
  background:#fff0f2;
}
.portrait-preview.is-ready {
  color:#4d745f;
  background:#ecf7f0;
}
.portrait-preview img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
}
.portrait-actions {
  display:flex;
  gap:10px;
}
.portrait-actions button {
  min-height:44px;
  padding:0 14px;
  color:#765f6d;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff7fa;
}
.portrait-upload-status {
  margin:0;
}
.privacy-pill { border:1px solid var(--line); padding:6px 10px; border-radius:999px; color:var(--muted); font-size:13px; }
.editor-actions,.custom-card-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.custom-card-actions { justify-content:flex-start; flex-wrap:wrap; }
.custom-card-actions button { border:1px solid var(--line); background:transparent; color:var(--text); padding:8px 11px; border-radius:6px; cursor:pointer; }
.custom-portrait { display:grid; place-items:center; }
.custom-portrait-fallback { display:grid; place-items:center; width:100%; height:100%; min-height:0; font-size:64px; color:var(--accent); background:linear-gradient(145deg,rgba(235,170,190,.14),rgba(91,126,145,.18)); }
.privacy-note,.runtime-note { padding:13px; color:var(--muted); border:1px solid var(--line); border-radius:10px; font-size:13px; line-height:1.6; background:rgba(240,168,208,.05); }
.runtime-note { display:grid; gap:5px; }
.empty-state { display:flex; min-height:160px; align-items:center; justify-content:center; gap:14px; color:var(--muted); }

.rating-dialog {
  width:min(500px,calc(100% - 32px));
  padding:0;
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:var(--panel);
  box-shadow:0 32px 90px rgba(0,0,0,.58);
}
.rating-dialog::backdrop { background:rgba(4,7,12,.76); backdrop-filter:blur(5px); }
.rating-dialog form { display:grid; gap:16px; padding:25px; }
.confirm-check { display:flex; grid-template-columns:none; align-items:start; gap:10px; }
.confirm-check input { width:18px; min-height:18px; margin-top:3px; }
.dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

@media (max-width:980px) {
  .auth-view,.detail-layout,.chat-view { grid-template-columns:1fr; }
  .auth-visual { min-height:390px; }
  .character-grid { grid-template-columns:repeat(2,1fr); }
  .detail-portrait { min-height:300px; }
  .messages { height:55vh; }
}
@media (max-width:640px) {
  .topbar { padding:0 14px; }
  .nav { gap:2px; }
  .nav button { padding-inline:7px; font-size:12px; }
  main { padding:24px 14px 48px; }
  h1 { font-size:32px; }
  .auth-visual { min-height:340px; padding:25px; }
  .dialogue-preview { margin-top:38px; }
  .page-heading { align-items:start; flex-direction:column; }
  .filters { justify-content:flex-start; }
  .character-grid { grid-template-columns:1fr; }
  .detail-copy { padding:20px; }
  .detail-copy dl div { grid-template-columns:1fr; gap:4px; }
  .chat-header { grid-template-columns:auto 1fr auto; }
  .chat-header .back-button { padding-left:0; font-size:0; }
  .chat-header .back-button::after { content:"返回"; font-size:13px; }

  .chat-header-actions { gap:8px; }
  .message,.message-item { max-width:88%; }
}
@media (max-width: 440px) {
  .proactive-inbox-item {
    grid-template-columns:42px minmax(0,1fr);
    padding:11px;
  }
  .proactive-character-setting,
  .switch-control {
    align-items:flex-start;
  }
  .proactive-character-settings {
    max-height:260px;
    margin-top:12px;
  }
  .character-proactive-note {
    min-height:44px;
  }
  main { padding:10px; }
  .brand span:last-child { display:none; }
  .chat-view {
    height:var(--app-viewport-height, 100dvh);
    min-height:var(--app-viewport-height, 100dvh);
    gap:0;
    overflow:hidden;
  }
  .chat-shell {
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    overflow:hidden;
  }
  .greeting-card {
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    margin:0 10px 10px;
    padding:12px;
  }
  .greeting-card button { width:100%; }
  .messages {
    height:auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:14px;
  }
  .chat-form {
    position:relative;
    z-index:2;
    padding:10px 10px max(10px, env(safe-area-inset-bottom));
  }
  .memory-panel { display:none; }
}

/* Large phone chat fallback: cover 440px and 480px logical widths. */
@media (max-width:480px) {
  html.is-mobile-chat #chatView {
    height:var(--app-viewport-height, 100dvh);
    min-height:var(--app-viewport-height, 100dvh);
    gap:0;
    overflow:hidden;
  }
  html.is-mobile-chat .messages {
    height:auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:14px;
  }
  html.is-mobile-chat .chat-form {
    position:relative;
    z-index:2;
    padding:10px 10px max(10px, env(safe-area-inset-bottom));
  }
  html.is-mobile-chat .memory-panel { display:none; }
}

@media (max-width:760px) {
  .custom-character-layout { grid-template-columns:1fr; }
  .character-generator { position:static; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  .workspace-heading { align-items:stretch; flex-direction:column; }
}

/* 2026 P0 anime hall refresh */
.hall-view {
  position:relative;
  isolation:isolate;
  min-height:calc(100vh - 124px);
  padding:34px;
  overflow:hidden;
  color:#4d3445;
  border:1px solid rgba(221,137,177,.34);
  border-radius:18px;
  background:#fff9fb;
  box-shadow:0 24px 64px rgba(91,55,78,.2);
}
.hall-wallpaper {
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-color:#fff9fb;
  background-image:url("./assets/decor/chibi-twintail-wallpaper.webp");
  background-position:center top;
  background-size:440px 440px;
  opacity:.28;
}
.hall-view::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:rgba(255,249,252,.52);
}
.hall-content {
  position:relative;
  z-index:1;
}
.hall-view .page-heading {
  position:relative;
  padding:18px 20px 22px;
  border:1px solid rgba(224,145,184,.3);
  border-radius:14px;
  background:rgba(255,252,253,.88);
  box-shadow:0 12px 32px rgba(133,78,105,.1);
  animation:hallHeadingIn .32s cubic-bezier(.22,1,.36,1) both;
}
.hall-view .page-heading::before {
  content:"";
  position:absolute;
  left:24px;
  top:-14px;
  width:72px;
  height:30px;
  background:
    radial-gradient(ellipse at 28% 50%,transparent 34%,#e991ba 36% 43%,transparent 45%),
    radial-gradient(ellipse at 72% 50%,transparent 34%,#e991ba 36% 43%,transparent 45%);
  transform:rotate(-4deg);
}
.hall-view h1 {
  color:#4b3042;
  font-size:38px;
}
.hall-view .page-heading p,
.hall-view .inline-status {
  color:#806978;
}
.hall-view .section-label {
  color:#bd638f;
  font-weight:800;
}
.filter-wrap {
  position:relative;
  padding-top:14px;
}
.filter-bow {
  position:absolute;
  right:8px;
  top:-20px;
  width:46px;
  height:30px;
  transform-origin:50% 45%;
  animation:bowSway 6s ease-in-out infinite;
}
.filter-bow::before,
.filter-bow::after {
  content:"";
  position:absolute;
  top:5px;
  width:23px;
  height:18px;
  border:2px solid #df8fb5;
  background:rgba(255,220,235,.72);
}
.filter-bow::before {
  right:21px;
  border-radius:80% 20% 60% 40%;
  transform:rotate(12deg);
}
.filter-bow::after {
  left:21px;
  border-radius:20% 80% 40% 60%;
  transform:rotate(-12deg);
}
.hall-view .filters {
  flex-wrap:nowrap;
}
.hall-view .filters button {
  color:#735a69;
  border-color:rgba(211,123,165,.28);
  background:rgba(255,255,255,.78);
}
.hall-view .filters button:hover {
  color:#9d456f;
  border-color:rgba(211,123,165,.52);
}
.hall-view .filters button.active {
  color:#50323f;
  background:linear-gradient(135deg,#ffd5e7,#f2a8ca);
  box-shadow:0 6px 18px rgba(213,113,159,.2);
}
.hall-ribbon {
  position:absolute;
  z-index:-1;
  top:190px;
  width:34px;
  height:420px;
  pointer-events:none;
  opacity:.65;
  border:2px solid rgba(221,133,174,.64);
  border-top:0;
  background:rgba(255,217,234,.32);
  animation:ribbonDrift 8s ease-in-out infinite;
}
.hall-ribbon::before {
  content:"";
  position:absolute;
  left:-17px;
  top:-22px;
  width:62px;
  height:38px;
  border:2px solid rgba(221,133,174,.7);
  border-radius:50%;
  background:rgba(255,228,239,.76);
}
.hall-ribbon-left {
  left:4px;
  transform:rotate(3deg);
}
.hall-ribbon-right {
  right:4px;
  transform:rotate(-3deg);
  animation-delay:-3s;
}
.hall-view .character-grid {
  position:relative;
  z-index:2;
  gap:18px;
}
.hall-view .character-card {
  min-width:0;
  min-height:520px;
  padding:12px;
  color:#4d3445;
  border-color:rgba(218,132,173,.34);
  border-radius:12px;
  background:rgba(255,252,253,.94);
  box-shadow:0 14px 36px rgba(102,61,83,.14);
  animation:cardReveal .42s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--card-index) * 45ms);
  transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s ease,box-shadow .18s ease;
}
.hall-view .character-card:hover {
  transform:translateY(-3px);
  border-color:rgba(218,105,161,.62);
  box-shadow:0 18px 42px rgba(153,77,113,.2),0 0 0 3px rgba(240,168,208,.09);
}
.portrait {
  position:relative;
  height:auto;
  aspect-ratio:4 / 5;
  padding:0;
  overflow:hidden;
  border-color:rgba(218,132,173,.28);
  border-radius:9px;
  background:#f8dce8;
}
.character-portrait-image,
.detail-portrait-image {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  transition:transform .24s cubic-bezier(.22,1,.36,1);
}
.character-portrait-image.custom-upload-portrait,
.detail-portrait-image.custom-upload-portrait {
  object-fit:contain;
  object-position:center;
  padding:6px;
  background:linear-gradient(145deg,#fff7fb,#f6dce8);
}
.custom-portrait .character-portrait-image.custom-upload-portrait {
  padding:4px;
}
.character-card:hover .character-portrait-image {
  transform:scale(1.025);
}
.character-card:hover .character-portrait-image.custom-upload-portrait {
  transform:none;
}
.portrait-fallback {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#8c5570;
  font:700 34px Georgia,serif;
  background:linear-gradient(155deg,#ffe3ee,#f4b6d2 52%,#d7c8e5);
}
.character-portrait-image:not(.image-error),
.detail-portrait-image:not(.image-error) {
  position:relative;
  z-index:1;
}
.character-portrait-image.image-error,
.detail-portrait-image.image-error {
  display:none;
}
.hall-view .character-heading h2 {
  color:#4b3042;
}
.hall-view .character-heading p,
.hall-view .tag-row span {
  color:#816a78;
}
.hall-view .tag-row span {
  padding:3px 7px;
  border:1px solid rgba(220,139,178,.28);
  border-radius:8px;
  background:#fff2f7;
}
.hall-view .character-card blockquote {
  color:#684d5d;
}
.hall-view .rating-badge {
  color:#9d4e75;
  border-color:rgba(196,99,145,.36);
  background:#fff1f6;
}
.hall-view .rating-badge.sensitive {
  color:#9b5267;
  border-color:rgba(181,122,138,.46);
}
.hall-view .card-action {
  border-radius:8px;
  background:linear-gradient(135deg,#f2b2cf,#ed9dbc 58%,#e7b267);
}
.detail-portrait {
  position:relative;
  min-height:520px;
  padding:0;
  overflow:hidden;
  background:#f8dce8;
}
.detail-portrait-image {
  position:absolute;
  inset:0;
}
.chat-avatar {
  width:80px;
  height:80px;
  flex:0 0 80px;
  object-fit:cover;
  object-position:center top;
  border:2px solid rgba(240,168,208,.58);
  border-radius:50%;
  background:#f8dce8;
}
@keyframes hallHeadingIn {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes cardReveal {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes bowSway {
  0%,90%,100% { transform:rotate(0); }
  94% { transform:rotate(2deg); }
  97% { transform:rotate(-2deg); }
}
@keyframes ribbonDrift {
  0%,100% { margin-top:0; }
  50% { margin-top:2px; }
}
@media (max-width:980px) {
  .hall-view {
    padding:26px 22px;
  }
  .hall-view .character-card {
    min-height:500px;
  }
}
@media (max-width:640px) {
  .hall-view {
    margin:0 -6px;
    padding:18px 12px 24px;
    border-radius:14px;
  }
  .hall-wallpaper {
    background-size:310px 310px;
    opacity:.22;
  }
  .hall-view .page-heading {
    padding:18px 14px;
  }
  .hall-view h1 {
    font-size:27px;
  }
  .filter-wrap {
    width:100%;
    overflow:hidden;
  }
  .hall-view .filters {
    justify-content:flex-start;
    overflow-x:auto;
    padding:3px 0 6px;
    scrollbar-width:none;
  }
  .hall-view .filters::-webkit-scrollbar {
    display:none;
  }
  .hall-view .filters button {
    flex:0 0 auto;
  }
  .hall-ribbon {
    display:none;
  }
  .hall-view .character-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .hall-view .character-card {
    min-height:0;
    gap:9px;
    padding:8px;
  }
  .hall-view .character-heading {
    display:grid;
  }
  .hall-view .character-heading h2 {
    font-size:16px;
  }
  .hall-view .character-heading p {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .hall-view .rating-badge {
    height:22px;
    padding:0 6px;
  }
  .hall-view .tag-row span:nth-child(n+3) {
    display:none;
  }
  .hall-view .character-card blockquote {
    min-height:48px;
    display:-webkit-box;
    overflow:hidden;
    font-size:13px;
    line-height:1.55;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .hall-view .card-action {
    min-height:38px;
    padding:0 8px;
    font-size:13px;
  }
  .detail-portrait {
    min-height:0;
    aspect-ratio:4 / 5;
  }
}
body:has(#hallView:not(.hidden)) {
  background:#f9edf3;
}
body:has(#hallView:not(.hidden)) .topbar {
  color:#4b3042;
  border-bottom-color:rgba(213,126,168,.28);
  background:rgba(255,249,252,.9);
}
body:has(#hallView:not(.hidden)) .brand {
  color:#4b3042;
}
body:has(#hallView:not(.hidden)) .nav button {
  color:#765f6d;
}
body:has(#hallView:not(.hidden)) .nav button:hover {
  color:#a34e78;
}
@media (max-width:360px) {
  .hall-view .character-grid {
    grid-template-columns:1fr;
  }
}
@media (prefers-reduced-motion:reduce) {
  .hall-view .page-heading,
  .hall-view .character-card,
  .filter-bow,
  .hall-ribbon {
    animation:none !important;
  }
  .character-portrait-image,
  .detail-portrait-image {
    transition:none !important;
  }
}

/* P1 unified kawaii theme */
:root {
  --bg:#fff9fb;
  --bg-soft:#fff3f7;
  --panel:#fffdfd;
  --card:#fffafd;
  --card-hover:#fff1f7;
  --text:#4b3042;
  --muted:#806978;
  --faint:#a68d9c;
  --pink:#e991ba;
  --pink-soft:#f7bfd8;
  --gold:#e7b267;
  --danger:#b66b82;
  --line:rgba(218,132,173,.3);
  --line-strong:rgba(207,104,153,.52);
  --shadow:0 18px 48px rgba(102,61,83,.14);
}
body {
  color:var(--text);
  background:#f9edf3;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:url("./assets/decor/chibi-twintail-wallpaper.webp") center top / 420px 420px repeat;
  opacity:.1;
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(255,249,252,.68);
}
.topbar,
body:has(#hallView:not(.hidden)) .topbar {
  color:var(--text);
  border-bottom-color:var(--line);
  background:rgba(255,249,252,.92);
}
.brand,
body:has(#hallView:not(.hidden)) .brand {
  color:var(--text);
}
.nav button,
.back-button,
body:has(#hallView:not(.hidden)) .nav button {
  color:#765f6d;
}
.nav button:hover,
.back-button:hover,
body:has(#hallView:not(.hidden)) .nav button:hover {
  color:#a34e78;
}
.themed-view {
  position:relative;
  isolation:isolate;
  color:var(--text);
}
#loginView,
#detailView,
#chatView,
#myCharactersView,
#customCharacterView,
#conversationsView {
  color:var(--text);
}
.themed-view:not(.hall-view) {
  padding:28px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,249,252,.84);
  box-shadow:var(--shadow);
}
.themed-view:not(.hall-view)::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:url("./assets/decor/chibi-twintail-wallpaper.webp") center top / 430px 430px repeat;
  opacity:.14;
}
.themed-view:not(.hall-view)::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(255,250,252,.76);
}
.themed-view h1,
.themed-view h2,
.themed-dialog h2 {
  color:#4b3042;
}
.themed-view p,
.themed-dialog p {
  color:#806978;
}
.themed-view .section-label {
  color:#b65d89;
  font-weight:800;
}
.primary-button,
.card-action,
.send-button {
  color:#4b3042;
  border-radius:8px;
  background:linear-gradient(135deg,#f4b6d2,#e991ba 62%,#e7b267);
  box-shadow:0 8px 22px rgba(201,103,150,.18);
}
.secondary-button,
.continue-button {
  min-height:42px;
  padding:0 16px;
  color:#8b4c6b;
  font-weight:700;
  border:1px solid rgba(207,104,153,.38);
  border-radius:8px;
  background:rgba(255,255,255,.84);
}
.secondary-button:hover,
.continue-button:hover {
  border-color:#d279a3;
  background:#fff2f7;
}
input,
textarea,
select,
.character-generator textarea,
.character-editor input,
.character-editor textarea,
.character-editor select {
  color:#4b3042;
  border-color:var(--line);
  background:rgba(255,255,255,.88);
}
input::placeholder,
textarea::placeholder {
  color:#aa8e9e;
}
input:focus,
textarea:focus,
select:focus {
  border-color:#d279a3;
  box-shadow:0 0 0 3px rgba(233,145,186,.16);
}
label,
.character-generator label,
.character-editor label {
  color:#765f6d;
}
.rating-badge {
  color:#9d4e75;
  border-color:rgba(196,99,145,.36);
  background:#fff1f6;
}
.rating-badge.sensitive {
  color:#975067;
  border-color:rgba(181,107,130,.44);
}

/* Login */
#loginView {
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.82fr);
  gap:32px;
  align-items:stretch;
}
.auth-visual {
  min-height:560px;
  color:#4b3042;
  border-color:var(--line);
  background:
    linear-gradient(rgba(255,249,252,.46),rgba(255,249,252,.76)),
    url("./assets/decor/chibi-twintail-wallpaper.webp") center / 380px 380px repeat;
  box-shadow:var(--shadow);
}
.auth-visual > p {
  color:#765f6d;
}
.dialogue-preview {
  color:#4b3042;
  border-color:rgba(207,104,153,.35);
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 28px rgba(125,72,99,.12);
}
.dialogue-preview strong {
  color:#a34e78;
}
.auth-panel {
  align-content:center;
  border-color:var(--line);
  background:rgba(255,253,253,.94);
  box-shadow:var(--shadow);
}
.auth-tabs {
  background:#fff1f6;
}
.auth-tabs button {
  color:#856b7a;
}
.auth-tabs button.active {
  color:#4b3042;
  background:#fff;
  box-shadow:0 5px 14px rgba(111,63,87,.1);
}
.consent-stack {
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,245,249,.7);
}
.consent-stack .confirm-check {
  color:#765f6d;
  font-size:13px;
  line-height:1.55;
}
.auth-links {
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.text-button {
  min-height:44px;
  padding:0;
  color:#9d4e75;
  border:0;
  background:transparent;
  cursor:pointer;
}
.privacy-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.privacy-card {
  display:grid;
  align-content:start;
  gap:10px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 28px rgba(102,61,83,.08);
}
.privacy-card h2 {
  margin:0 0 4px;
}
.privacy-card p {
  color:#806978;
  font-size:13px;
  line-height:1.65;
}
.privacy-card button {
  min-height:44px;
  padding:0 12px;
  color:#765f6d;
  text-align:left;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff7fa;
  cursor:pointer;
}
.privacy-card .danger-action {
  color:#a0495b;
  border-color:rgba(160,73,91,.28);
  background:#fff2f4;
}
.personal-center-heading p {
  max-width:560px;
}
.backup-state-switch {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}
.backup-state-switch span {
  margin-right:4px;
  color:#806978;
  font-size:13px;
}
.backup-state-switch button {
  min-height:36px;
  padding:0 14px;
  color:#806978;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  cursor:pointer;
}
.backup-state-switch button.active {
  color:#fff;
  border-color:#c46391;
  background:#c46391;
}
.personal-feature-grid {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(220px,1fr) minmax(220px,1fr);
  gap:18px;
  align-items:stretch;
}
.personal-feature-card {
  display:flex;
  min-width:0;
  min-height:300px;
  padding:24px;
  flex-direction:column;
  gap:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,246,250,.9));
  box-shadow:0 16px 40px rgba(102,61,83,.1);
}
.personal-feature-card h2 {
  margin:6px 0 0;
}
.personal-feature-card p,
.personal-feature-card small {
  color:#806978;
  line-height:1.65;
}
.personal-feature-card p {
  margin:0;
  font-size:14px;
}
.personal-feature-card small {
  font-size:12px;
}
.feature-card-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.feature-status {
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.feature-status.ready {
  color:#4d745f;
  background:#edf8f1;
}
.feature-status.upcoming {
  color:#70698e;
  background:#f1eff8;
}
.backup-state-panel {
  display:grid;
  min-height:78px;
  padding:14px 16px;
  align-content:center;
  gap:5px;
  color:#735e6b;
  border:1px solid rgba(196,99,145,.16);
  border-radius:12px;
  background:#fff8fb;
}
.backup-state-panel span {
  font-size:13px;
}
.backup-state-panel.is-loading {
  background:linear-gradient(90deg,#fff5f9 25%,#fff 50%,#fff5f9 75%);
  background-size:200% 100%;
  animation:backup-shimmer 1.4s linear infinite;
}
.backup-state-panel.is-empty {
  border-style:dashed;
}
.backup-state-panel.is-error {
  color:#9b4d5d;
  border-color:rgba(155,77,93,.25);
  background:#fff2f4;
}
.backup-state-panel.is-complete {
  color:#4d745f;
  border-color:rgba(77,116,95,.2);
  background:#f0f8f3;
}
.backup-actions {
  display:flex;
  gap:10px;
  margin-top:auto;
}
.backup-actions button {
  min-height:44px;
}
.millet-balance {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:auto;
  color:#8a621a;
}
.millet-balance strong {
  font-size:52px;
  line-height:1;
}
.millet-balance span {
  font-weight:700;
}
#openRechargeButton {
  min-height:44px;
  margin-top:auto;
}
.upcoming-button {
  width:100%;
  min-height:44px;
  margin-top:auto;
  cursor:not-allowed;
  opacity:.62;
}
@keyframes backup-shimmer {
  to { background-position:-200% 0; }
}
.recharge-package-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.recharge-package-card {
  display:grid;
  min-height:210px;
  padding:22px;
  align-content:center;
  gap:10px;
  color:#765f6d;
  text-align:left;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.9);
  box-shadow:0 12px 30px rgba(102,61,83,.08);
  cursor:pointer;
}
.recharge-package-card span {
  color:#9d4e75;
  font-size:13px;
  font-weight:800;
}
.recharge-package-card strong {
  color:#5f3f50;
  font-size:34px;
}
.recharge-package-card small {
  font-size:16px;
}
.recharge-package-card.selected {
  border-color:#c46391;
  background:linear-gradient(145deg,#fff,#fff0f6);
  box-shadow:0 16px 36px rgba(196,99,145,.18);
}
.recharge-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:20px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.9);
}
.recharge-summary div {
  display:grid;
  gap:5px;
}
.recharge-summary span,
.recharge-status {
  color:#806978;
  font-size:13px;
}
.recharge-summary button {
  min-height:44px;
}
.recharge-status {
  margin:12px 4px 0;
}
.compact-action {
  width: fit-content;
  min-width: 120px;
}
.grain-pool-list {
  display:grid;
  gap:8px;
  margin:14px 0;
}
.grain-pool-list div,
.invite-stat-grid div,
.recharge-history-item {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(217,196,164,.22);
  border-radius:10px;
  background:rgba(32,24,39,.12);
}
.grain-pool-list span,
.invite-stat-grid span,
.recharge-history-item span,
.recharge-history-item small {
  color:#806978;
}
.recharge-flow {
  display:grid;
  grid-template-columns:minmax(240px,340px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.recharge-qr-card,
.recharge-submit-card,
.invite-code-panel,
.promote-copy-tool {
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.9);
  padding:18px;
}
.recharge-qr-card img {
  display:block;
  width:min(100%,280px);
  aspect-ratio:1;
  object-fit:cover;
  border-radius:12px;
  margin:12px auto;
  background:rgba(255,255,255,.35);
}
.recharge-plan-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.recharge-upload-zone {
  min-height:180px;
  margin:14px 0;
  display:grid;
  place-content:center;
  gap:8px;
  text-align:center;
  border:1px dashed rgba(196,99,145,.45);
  border-radius:14px;
  background:rgba(255,240,246,.52);
  cursor:pointer;
  padding:18px;
}
.recharge-upload-zone.dragging {
  border-color:#c46391;
  background:rgba(196,99,145,.12);
}
.recharge-history-list {
  display:grid;
  gap:10px;
  margin-top:16px;
}
.invite-page {
  max-width:980px;
  margin-inline:auto;
}
.invite-code-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 16px;
  align-items:center;
}
.invite-code-panel span {
  grid-column:1 / -1;
  color:#806978;
}
.invite-code-panel strong {
  font-size:48px;
  line-height:1;
  letter-spacing:0;
  overflow-wrap:anywhere;
}
.invite-stat-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:14px 0;
}
.invite-rule {
  color:#806978;
}
.promote-topic-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
.promote-topic-list button,
.copy-result-card button {
  min-height:44px;
}
.promote-topic-list button.selected,
.recharge-package-card.selected {
  border-color:#c46391;
  background:linear-gradient(145deg,#fff,#fff0f6);
}
.promote-copy-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.copy-result-list {
  display:grid;
  gap:10px;
  margin-top:12px;
}
.copy-result-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.74);
  padding:12px;
}
.copy-result-card p {
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.story-guidance {
  margin:0;
  padding:8px 12px;
  color:#7a5f34;
  background:rgba(217,196,164,.16);
  border:1px solid rgba(217,196,164,.32);
  border-radius:10px;
  font-size:14px;
}
.api-key-card {
  grid-column:1 / -1;
}
.api-key-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.provider-badge {
  flex:0 0 auto;
  padding:6px 10px;
  color:#8f4269;
  border:1px solid rgba(196,99,145,.24);
  border-radius:999px;
  background:#fff2f7;
  font-size:12px;
}
.api-key-field {
  display:grid;
  gap:7px;
}
.api-key-field input {
  width:100%;
}
.api-key-status {
  display:grid;
  gap:3px;
  padding:12px 14px;
  color:#806978;
  border-left:3px solid #b79daa;
  border-radius:8px;
  background:#fff7fa;
  font-size:13px;
}
.api-key-status.pending {
  border-left-color:#c79551;
}
.api-key-status.success {
  border-left-color:#6f9b7d;
}
.api-key-status.error {
  color:#a0495b;
  border-left-color:#a0495b;
  background:#fff2f4;
}
.api-key-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.api-key-actions button {
  min-height:44px;
}
.api-key-card small {
  color:#947b8a;
  line-height:1.55;
}
.service-state-gallery {
  margin-top:28px;
}
.beta-state-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.state-card {
  min-height:96px;
  display:grid;
  place-items:center;
  padding:14px;
  color:#765f6d;
  text-align:center;
  line-height:1.5;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.88);
}
.state-card small {
  color:#9c8191;
}
.state-card.error {
  color:#a0495b;
  border-color:rgba(160,73,91,.28);
  background:#fff2f4;
}
.state-card.limit {
  color:#8e6532;
  border-color:rgba(199,149,81,.3);
  background:#fff8ec;
}

/* Workspaces, detail and dialogs */
.workspace-view {
  max-width:none;
  margin:0;
}
.workspace-heading,
.page-heading {
  position:relative;
  padding:20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 28px rgba(102,61,83,.1);
}
.workspace-heading::before,
.conversation-section-heading::before {
  content:"";
  position:absolute;
  left:22px;
  top:-12px;
  width:64px;
  height:26px;
  border-top:3px solid #df8fb5;
  border-radius:50%;
  transform:rotate(-5deg);
}
.character-generator,
.character-editor,
.detail-copy,
.memory-panel,
.chat-shell {
  color:#4b3042;
  border-color:var(--line);
  background:rgba(255,253,253,.94);
  box-shadow:var(--shadow);
}
.privacy-pill {
  color:#985171;
  border-color:rgba(201,103,150,.35);
  background:#fff1f6;
}
.custom-character-card {
  color:#4b3042;
  border-color:var(--line);
  background:rgba(255,253,253,.94);
}
.custom-card-actions button {
  color:#8b4c6b;
  border-color:var(--line);
  background:#fff7fa;
}
.detail-copy blockquote {
  color:#684d5d;
  border-left-color:#e991ba;
}
.identity-line,
dt {
  color:#a34e78;
}
dd {
  color:#806978;
}
.rating-dialog {
  color:#4b3042;
  border-color:rgba(207,104,153,.42);
  background:#fffafd;
  box-shadow:0 28px 80px rgba(70,35,54,.32);
}
.rating-dialog form {
  position:relative;
}
.rating-dialog form::before {
  content:"";
  position:absolute;
  right:24px;
  top:18px;
  width:44px;
  height:24px;
  border-top:2px solid #df8fb5;
  border-radius:50%;
}

/* Conversations */
.conversation-heading {
  margin-bottom:32px;
}
.conversation-section {
  position:relative;
  margin-top:36px;
}
.conversation-section-heading {
  position:relative;
  margin-bottom:16px;
  padding-left:16px;
}
.conversation-section-heading h2 {
  margin-top:5px;
}
.conversation-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.conversation-list {
  display:grid;
  gap:10px;
}
.pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:16px;
  color:#806978;
  font-size:13px;
}
.pagination button {
  min-height:40px;
  padding:0 14px;
  color:#8b4c6b;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.pagination button:disabled {
  cursor:not-allowed;
  opacity:.45;
}
.conversation-card {
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px;
  text-align:left;
  color:#4b3042;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 26px rgba(102,61,83,.1);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.conversation-card:hover {
  transform:translateY(-2px);
  border-color:rgba(207,104,153,.55);
  box-shadow:0 14px 30px rgba(128,66,96,.15);
}
.conversation-card.compact {
  padding:12px 16px;
  box-shadow:none;
}
.conversation-avatar {
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#985171;
  border:2px solid rgba(233,145,186,.46);
  border-radius:50%;
  background:linear-gradient(145deg,#ffe3ee,#efd5e4);
  font-size:22px;
  font-weight:800;
}
.conversation-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.conversation-copy {
  min-width:0;
  display:grid;
  gap:4px;
}
.conversation-title-row {
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.conversation-title-row strong {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:17px;
}
.conversation-occupation {
  overflow:hidden;
  color:#8a7080;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
.conversation-summary {
  display:-webkit-box;
  overflow:hidden;
  color:#684d5d;
  line-height:1.5;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.conversation-card time {
  align-self:start;
  color:#a08796;
  white-space:nowrap;
  font-size:12px;
}
.conversation-empty-inline,
.conversation-loading,
.conversation-empty {
  min-height:132px;
  border:1px dashed rgba(207,104,153,.36);
  border-radius:12px;
  background:rgba(255,255,255,.58);
}
.conversation-empty-inline {
  display:grid;
  place-items:center;
  color:#927687;
}
.conversation-empty {
  flex-direction:column;
  text-align:center;
}
.conversation-empty button {
  min-height:40px;
  padding:0 16px;
  color:#8b4c6b;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.conversation-loading {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  padding:14px;
}
.conversation-loading span {
  border-radius:10px;
  background:linear-gradient(90deg,#f8e8ef,#fff8fb,#f8e8ef);
  background-size:200% 100%;
  animation:conversationShimmer 1.4s linear infinite;
}
@keyframes conversationShimmer {
  to { background-position:-200% 0; }
}

/* Chat */
#chatView.themed-view {
  padding:18px;
}
.chat-header {
  color:#4b3042;
  border-bottom-color:var(--line);
  background:#fffafd;
}
.chat-identity small {
  color:#8a7080;
}
.messages {
  background:
    linear-gradient(rgba(255,248,251,.78),rgba(255,248,251,.78)),
    url("./assets/decor/chibi-twintail-wallpaper.webp") center top / 430px 430px repeat;
}
.message {
  color:#4b3042;
  box-shadow:0 7px 20px rgba(102,61,83,.1);
}
.message.assistant {
  border-color:rgba(213,130,170,.3);
  background:#fff;
}
.message.user {
  border-color:rgba(218,165,98,.28);
  background:#f8e6cb;
}
.message.safety,
.message.error {
  color:#8c455d;
}
.message-status {
  color:#957989;
}
.message-status button {
  color:#a34e78;
}
.message-nick-label {
  display:block;
  color:var(--faint);
  font-size:11px;
  line-height:1.2;
  padding:0 4px;
}
.generation-mode-label {
  width:max-content;
  padding:3px 7px;
  color:#9b5475;
  border:1px solid rgba(207,104,153,.3);
  border-radius:6px;
  background:#fff1f6;
  font-size:11px;
}
.message-item[data-generation-mode="third_person"] .message.assistant {
  border-color:rgba(139,170,214,.4);
  background:linear-gradient(135deg,rgba(62,79,110,.78),rgba(45,55,79,.9));
  box-shadow:inset 3px 0 0 rgba(155,189,235,.5);
  color:#ffd7e9;
}
.message-context-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:2px;
}
.message-context-actions[hidden] {
  display:none !important;
}
.message-context-actions button {
  min-height:36px;
  padding:0 12px;
  color:#934d6e;
  border:1px solid rgba(207,104,153,.34);
  border-radius:8px;
  background:#fff7fa;
}
.message-context-actions button[data-bedtime-story] {
  border-color:rgba(232,181,111,.45);
  background:rgba(255,248,238,.92);
  color:#6C4C2E;
}
.message-context-actions button[data-bedtime-story]:hover {
  background:#FFF1DD;
  border-color:rgba(232,181,111,.70);
}
.sleep-mode {
  --sleep-bg:#1A1A2E;
  --sleep-bg-deep:#10101F;
  --sleep-text:#E8D5B7;
  --sleep-text-muted:rgba(232,213,183,.68);
  --sleep-border:rgba(232,213,183,.16);
  --sleep-accent:#E8B56F;
  --sleep-control-bg:rgba(25,25,46,.72);
  position:absolute;
  inset:0;
  z-index:20;
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  background:radial-gradient(circle at 50% 0%, rgba(232,181,111,.08), transparent 36%), linear-gradient(180deg, var(--sleep-bg) 0%, #141426 72%, var(--sleep-bg-deep) 100%);
  color:var(--sleep-text);
}
.sleep-mode.hidden { display:none; }
.sleep-dimmer {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:#000;
  opacity:0;
  transition:opacity 120s linear;
}
.sleep-mode.is-reading .sleep-dimmer { opacity:.28; }
.sleep-header,
.sleep-story-form {
  position:relative;
  z-index:1;
  width:min(680px,100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 28px;
  background:var(--sleep-control-bg);
  border-bottom:1px solid var(--sleep-border);
  backdrop-filter:blur(14px);
}
.sleep-story-form {
  border-top:1px solid var(--sleep-border);
  border-bottom:0;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.sleep-identity { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.sleep-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--sleep-border); }
.sleep-identity strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sleep-identity small { display:block; margin-top:3px; color:var(--sleep-text-muted); }
#sleepExitButton,
#sleepStorySendButton {
  min-width:44px;
  min-height:44px;
  border:1px solid var(--sleep-border);
  border-radius:8px;
  background:rgba(232,181,111,.14);
  color:var(--sleep-text);
  cursor:pointer;
}
.sleep-story-body {
  position:relative;
  z-index:1;
  width:min(680px,100%);
  margin:0 auto;
  padding:28px;
  overflow-y:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:19px;
  line-height:1.95;
}
.sleep-story-body::after {
  content:"";
  display:inline-block;
  width:7px;
  height:1em;
  margin-left:3px;
  border-radius:999px;
  background:rgba(232,213,183,.72);
  animation:sleepCursor .9s steps(2,end) infinite;
}
.sleep-error { display:grid; gap:10px; }
.sleep-error span { color:var(--sleep-text-muted); }
.sleep-error button {
  justify-self:start;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--sleep-border);
  border-radius:8px;
  background:rgba(232,181,111,.14);
  color:var(--sleep-text);
}
.sleep-story-form textarea {
  flex:1;
  min-height:44px;
  max-height:120px;
  resize:none;
  border:1px solid var(--sleep-border);
  border-radius:8px;
  background:rgba(16,16,31,.74);
  color:var(--sleep-text);
  padding:12px 14px;
  font:inherit;
}
@keyframes sleepCursor { 50% { opacity:.22; } }
.message-item.assistant.status-completed .message {
  cursor:pointer;
}
.chat-form {
  grid-template-columns:minmax(0,1fr) auto auto;
  border-top-color:var(--line);
  background:#fffafd;
}
.continue-button,
.send-button {
  min-width:72px;
}
.memory-panel .privacy-note,
.memory-panel .runtime-note {
  color:#806978;
  border-color:var(--line);
  background:#fff4f8;
}

/* Dedicated story mode */
.story-entry-card {
  margin-top:18px;
  padding:18px;
  border:1px solid rgba(91,105,125,.22);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(246,248,251,.96),rgba(237,241,246,.9));
}
.story-entry-card h2 {
  margin:6px 0 8px;
  color:#3f4a59;
}
.story-entry-card p {
  margin:0 0 14px;
  color:#687484;
  line-height:1.65;
}
.story-entry-card button {
  min-height:44px;
}
.story-view {
  height:calc(var(--app-viewport-height, 100dvh) - 170px);
  min-height:0;
  padding:18px;
  background:
    radial-gradient(circle at 18% 4%,rgba(175,190,208,.22),transparent 30%),
    linear-gradient(180deg,#e8edf3 0%,#dce3eb 36%,#f7f8fa 100%);
}
.story-shell {
  width:min(860px,100%);
  height:calc(var(--app-viewport-height, 100dvh) - 206px);
  min-height:0;
  margin:0 auto;
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;
  overflow:hidden;
  color:#303a47;
  border:1px solid rgba(78,92,110,.2);
  border-radius:18px;
  background:rgba(249,250,252,.95);
  box-shadow:0 24px 70px rgba(48,58,71,.18);
}
.story-header {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid rgba(78,92,110,.16);
  background:rgba(239,243,247,.94);
}
.story-identity {
  min-width:0;
  display:grid;
  gap:3px;
  text-align:center;
}
.story-identity strong {
  overflow:hidden;
  color:#303a47;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:20px;
}
.story-identity small {
  min-height:18px;
  color:#748090;
}
.story-exit-button {
  min-height:44px;
  padding:0 15px;
  color:#596574;
  border:1px solid rgba(78,92,110,.25);
  border-radius:10px;
  background:rgba(255,255,255,.78);
}
.story-help-button {
  min-height:44px;
  padding:0 15px;
  color:#536274;
  border:1px solid rgba(95,116,141,.28);
  border-radius:10px;
  background:#e4eaf1;
}
.story-progress-row {
  min-height:32px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 20px 0;
}
.story-progress-feedback {
  flex:1;
  min-height:24px;
  margin:0;
  color:#687484;
  font-size:13px;
}
.story-shell > .story-guidance {
  margin:8px 20px 0;
  padding:8px 12px;
  font-size:13px;
}
.story-progress-row button {
  min-height:44px;
  padding:0 14px;
  color:#536274;
  border:1px solid rgba(95,116,141,.28);
  border-radius:10px;
  background:#fff;
}
.story-messages {
  min-height:0;
  padding:18px 20px 28px;
  overflow-y:auto;
  background:
    linear-gradient(rgba(249,250,252,.9),rgba(249,250,252,.9)),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(80,96,115,.035) 31px 32px);
}
.story-message-item {
  width:min(78%,620px);
  display:grid;
  gap:5px;
  margin-bottom:18px;
}
.story-message-item.user {
  margin-left:auto;
}
.story-message-label {
  padding:0 5px;
  color:#7c8795;
  font-size:12px;
}
.story-message-item.user .story-message-label {
  text-align:right;
}
.story-message {
  padding:13px 15px;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  line-height:1.72;
  border:1px solid rgba(78,92,110,.15);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(48,58,71,.08);
}
.story-message.assistant {
  background:#fff;
}
.story-message.user {
  background:#dfe7ef;
}
.story-message-item.pending {
  opacity:.72;
}
.story-message-item.failed .story-message {
  color:#8f5260;
  border-color:rgba(143,82,96,.25);
}
.story-cg-message {
  width:min(100%,560px);
}
.story-cg-card {
  width:100%;
  padding:12px;
  display:grid;
  gap:10px;
  color:#303a47;
  text-align:left;
  border:1px solid rgba(78,92,110,.18);
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 28px rgba(35,45,58,.12);
  cursor:zoom-in;
  animation:story-cg-fade-in 180ms ease-out;
}
.story-cg-card picture {
  display:block;
}
.story-cg-image {
  width:100%;
  height:auto;
  max-height:70vh;
  display:block;
  object-fit:contain;
  border-radius:10px;
  background:#e9edf2;
}
.story-cg-card.is-failed picture {
  display:none;
}
.story-cg-caption,
.story-cg-fallback {
  line-height:1.6;
  font-size:14px;
}
.story-cg-fallback {
  color:#7c8795;
}
html.story-cg-viewer-open,
html.story-cg-viewer-open body {
  overflow:hidden;
  overscroll-behavior:none;
}
.story-cg-viewer {
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  padding:48px;
  border:0;
  background:rgba(12,17,24,.92);
}
.story-cg-viewer::backdrop {
  background:rgba(12,17,24,.72);
}
.story-cg-viewer[open] {
  display:grid;
  place-items:center;
}
.story-cg-viewer picture {
  max-width:calc(100vw - 96px);
  max-height:calc(100vh - 96px);
}
.story-cg-viewer img {
  max-width:100%;
  max-height:calc(100vh - 96px);
  display:block;
  object-fit:contain;
}
.story-cg-viewer-fallback {
  max-width:34rem;
  margin:0;
  padding:20px;
  color:#fff;
  text-align:center;
  line-height:1.7;
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  background:rgba(20,27,36,.82);
}
.story-cg-viewer-close {
  position:fixed;
  top:12px;
  right:12px;
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(20,27,36,.82);
  font-size:28px;
  line-height:1;
}
@keyframes story-cg-fade-in {
  from { opacity:0; }
  to { opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .story-cg-card {
    animation:none;
    transition:none;
  }
}
.story-form {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  padding:14px 20px max(14px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(78,92,110,.16);
  background:rgba(239,243,247,.96);
}
.story-form textarea {
  min-height:44px;
  max-height:140px;
  resize:vertical;
  padding:11px 13px;
  color:#303a47;
  border:1px solid rgba(78,92,110,.24);
  border-radius:10px;
  background:#fff;
  font:inherit;
}
.story-send-button {
  min-width:76px;
  min-height:44px;
  padding:0 18px;
  color:#fff;
  border:0;
  border-radius:10px;
  background:#536579;
}
.story-ending-card {
  margin:0 20px 18px;
  padding:22px;
  color:#354252;
  border:1px solid rgba(95,116,141,.22);
  border-radius:16px;
  background:linear-gradient(145deg,#f4f7fa,#e8edf3);
}
.story-ending-card h2 {
  margin:7px 0;
}
.story-ending-card p {
  margin:0;
  color:#687484;
  line-height:1.65;
}
.story-ending-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.story-ending-actions button {
  min-height:44px;
  padding:0 16px;
  color:#4a5a6d;
  border:1px solid rgba(78,92,110,.22);
  border-radius:10px;
  background:#fff;
}

@media (max-width:900px) {
  .personal-feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .backup-feature-card {
    grid-column:1 / -1;
  }
  .recharge-package-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:760px) {
  .themed-view:not(.hall-view) {
    padding:18px;
    border-radius:14px;
  }
  #loginView {
    grid-template-columns:1fr;
  }
  .auth-visual {
    min-height:340px;
  }
  .conversation-grid {
    grid-template-columns:1fr;
  }
  .privacy-grid {
    grid-template-columns:1fr;
  }
  .beta-state-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:440px) {
  .story-cg-card {
    width:100%;
    padding:8px;
  }
  .story-cg-viewer {
    padding:12px;
  }
  .story-cg-viewer picture,
  .story-cg-viewer img {
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 24px);
  }
  .story-view {
    padding:0;
  }
  .story-shell {
    height:calc(var(--app-viewport-height, 100dvh) - 170px);
    min-height:0;
    border:0;
    border-radius:0;
  }
  .story-header {
    grid-template-columns:auto 1fr;
    padding:12px;
  }
  .story-identity {
    text-align:left;
  }
  .story-help-button {
    grid-column:1 / -1;
    width:100%;
  }
  .story-messages {
    padding:14px 12px 24px;
  }
  .story-shell > .story-guidance {
    margin:6px 12px 0;
  }
  .story-progress-row {
    align-items:stretch;
    flex-direction:column;
    padding:8px 12px 0;
  }
  .story-progress-row button {
    width:100%;
  }
  .story-message-item {
    width:88%;
  }
  .story-form {
    padding:10px 12px max(12px,env(safe-area-inset-bottom));
  }
  .story-ending-card {
    margin:0 12px 12px;
    padding:18px;
  }
  .story-ending-actions {
    display:grid;
    grid-template-columns:1fr;
  }
  .sleep-header,
  .sleep-story-form {
    padding-left:20px;
    padding-right:20px;
  }
  .sleep-story-body {
    padding:18px;
    font-size:16.5px;
    line-height:1.82;
  }
  body::before {
    background-size:300px 300px;
    opacity:.08;
  }
  .themed-view:not(.hall-view) {
    padding:12px;
  }
  .topbar {
    overflow:hidden;
  }
  .personal-center-heading {
    gap:14px;
  }
  .personal-feature-grid {
    grid-template-columns:1fr;
  }
  .personal-feature-card {
    min-height:auto;
    padding:18px;
    border-radius:14px;
  }
  .backup-state-switch {
    justify-content:flex-start;
  }
  .backup-state-switch span {
    width:100%;
  }
  .backup-state-switch button {
    min-height:44px;
    flex:1 1 calc(25% - 8px);
    padding:0 10px;
  }
  .backup-actions {
    flex-direction:column;
  }
  .backup-actions button {
    width:100%;
  }
  .recharge-package-grid {
    grid-template-columns:1fr;
  }
  .recharge-package-card {
    min-height:150px;
  }
  .recharge-summary {
    align-items:stretch;
    flex-direction:column;
  }
  .recharge-summary button {
    width:100%;
  }
  .portrait-upload-zone {
    align-items:flex-start;
    flex-direction:column;
  }
  .portrait-actions {
    flex-direction:column;
  }
  .portrait-actions button {
    width:100%;
  }
  .nav {
    min-width:0;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar {
    display:none;
  }
  .nav button {
    flex:0 0 auto;
  }
  .workspace-heading {
    padding:16px;
  }
  .conversation-card,
  .conversation-card.compact {
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
    padding:12px;
  }
  .conversation-avatar {
    width:46px;
    height:46px;
  }
  .conversation-card time {
    grid-column:2;
    justify-self:start;
  }
  .conversation-title-row {
    align-items:flex-start;
  }
  .conversation-title-row strong {
    white-space:normal;
  }
  .chat-header {
    grid-template-columns:auto 1fr;
    gap:8px;
    padding-block:8px;
  }
  .chat-form {
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:7px;
  }
  .chat-form #chatInput {
    grid-column:auto;
  }
  .chat-form .continue-button {
    grid-column:auto;
  }
  .chat-form .send-button {
    grid-column:auto;
  }
  .continue-button,
  .send-button {
    min-width:58px;
    padding-inline:10px;
  }
  .message-context-actions button {
    min-height:44px;
    min-width:44px;
    padding:10px 16px;
  }
  .auth-visual {
    min-height:260px;
  }
  .auth-panel {
    padding:18px;
  }
  .auth-links {
    align-items:flex-start;
    flex-direction:column;
  }
  .privacy-heading {
    gap:14px;
  }
  .api-key-heading {
    flex-direction:column;
  }
  .api-key-actions {
    display:grid;
    grid-template-columns:1fr;
  }
  .api-key-actions button {
    width:100%;
  }
  .beta-state-grid {
    grid-template-columns:1fr;
  }
  #loginView,
  #privacyCenterView {
    padding-bottom:max(18px, env(safe-area-inset-bottom));
  }
}
@media (max-width:390px) {
  .story-header {
    gap:8px;
  }
  .story-identity strong {
    font-size:18px;
  }
  .sleep-story-body {
    padding-left:16px;
    padding-right:16px;
    font-size:16px;
    line-height:1.78;
  }
  .consent-stack {
    padding:10px;
  }
  .millet-balance strong {
    font-size:46px;
  }
}

.captcha-row {
  min-height:65px;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:360px) {
  .story-form {
    grid-template-columns:1fr;
  }
  .story-send-button {
    width:100%;
  }
  .story-message-item {
    width:94%;
  }
  #sleepExitButton {
    width:44px;
    padding:0;
    font-size:0;
  }
  #sleepExitButton::after {
    content:"结束";
    font-size:14px;
  }
  .sleep-header,
  .sleep-story-form {
    padding-left:16px;
    padding-right:16px;
  }
  .sleep-story-body {
    padding:14px;
    font-size:15.5px;
    line-height:1.74;
  }
  .chat-form {
    grid-template-columns:1fr auto auto;
  }
  .continue-button,
  .send-button {
    min-width:54px;
    padding-inline:8px;
  }
  .personal-feature-card {
    padding:16px;
  }
  .portrait-upload {
    padding:14px;
  }
  .feature-card-heading {
    flex-direction:column;
  }
  .backup-state-switch button {
    flex-basis:calc(50% - 8px);
  }
}
@media (prefers-reduced-motion:reduce) {
  .conversation-loading span {
    animation:none;
  }
}

/* ═══════════════════════════════════════════════
   关系阶段展示 V1.2（2026-06-19）
   ═══════════════════════════════════════════════ */

/* 角色大厅：关系作为轻量文本，不形成卡片底部状态栏。 */
.affinity-row {
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  line-height:18px;
}
.affinity-stage {
  color:#d9c4a4;
  font-weight:400;
}

/* 角色详情：阶段名与当前关系摘要，不显示进度。 */
.affinity-summary {
  margin:18px 0;
  padding:10px 0 10px 14px;
  border-left:2px solid rgba(217,196,164,.58);
  background:transparent;
}
.affinity-summary .affinity-stage {
  display:block;
  font-size:16px;
  font-weight:600;
  line-height:1.4;
}
.affinity-summary-text {
  margin:7px 0 0;
  color:rgba(230,225,216,.72);
  font-size:13px;
  line-height:1.65;
}

/* 聊天头：关系与职业共享次级身份行。 */
#chatMeta {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-relationship {
  color:#d9c4a4;
}

/* 关系变化提示 */
#affinityToast {
  position:fixed;
  top:18px;
  left:50%;
  z-index:100;
  pointer-events:none;
  transform:translateX(-50%);
}
.affinity-toast {
  display:flex;
  align-items:center;
  min-height:38px;
  padding:9px 14px;
  border-left:2px solid #e8a850;
  border-radius:6px;
  background:rgba(28,35,51,.94);
  color:#e6e1d8;
  font-size:13px;
  line-height:20px;
  white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  animation:affinityToastIn 240ms ease-out,
            affinityToastOut 300ms ease-in 2.4s forwards;
}
@keyframes affinityToastIn {
  from { opacity:0; transform:translateY(4px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes affinityToastOut {
  from { opacity:1; transform:translateY(0); }
  to { opacity:0; transform:translateY(-3px); }
}

/* ── 移动端适配 ────────────────────────────────── */
@media (max-width:780px) {
  .detail-shell { grid-template-columns:1fr; }
  .detail-portrait-placeholder { max-width:280px; justify-self:center; }
}
@media (max-width:640px) {
  .hall-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .hall-card { min-height:0; gap:7px; padding:8px; }
  .hall-card-name { font-size:15px; }
  .affinity-row { font-size:11px; line-height:17px; }
  .detail-card { padding:18px; }
  .detail-card h3 { font-size:22px; }
  .affinity-summary { margin:16px 0; }
  .affinity-toast { max-width:calc(100vw - 32px); }
  .chat-header-back { font-size:0; }
  .chat-header-back::after { content:"←"; font-size:16px; }
}
@media (max-width:480px) {
  .hall-grid { gap:8px; }
  .affinity-row { gap:4px; }
  .chat-identity { min-width:0; }
  .chat-identity > div { min-width:0; }
  html.is-mobile-chat .chat-header {
    grid-template-columns:auto minmax(0,1fr) auto;
    justify-items:stretch;
    gap:8px;
  }
  html.is-mobile-chat .chat-identity {
    justify-self:start;
    max-width:100%;
  }
  html.is-mobile-chat #chatMeta {
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.25;
  }
}
@media (max-width:390px) {
  .hall-grid { gap:7px; }
  .hall-card { padding:6px; }
  .affinity-summary { padding-left:12px; }
}
@media (max-width:360px) {
  .hall-grid { grid-template-columns:1fr; gap:8px; }
  .hall-card { min-height:0; }
  .hall-card-portrait { aspect-ratio:3/4; max-height:180px; }
  .detail-portrait-placeholder { max-width:200px; }
  #chatMeta {
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.25;
  }
  .affinity-toast {
    width:calc(100vw - 32px);
    justify-content:center;
    padding:8px 12px;
    font-size:12px;
  }
}

/* 无障碍：减少动效偏好 */
@media (prefers-reduced-motion:reduce) {
  .affinity-toast { animation:none; }
}

/* BLK-19: mobile chat fills the live visual viewport while the keyboard is open. */
@media (max-width:760px), (pointer:coarse) {
  html.is-mobile-chat,
  html.is-mobile-chat body,
  html.is-mobile-story,
  html.is-mobile-story body {
    width:100%;
    height:100%;
    overflow:hidden;
    overscroll-behavior:none;
  }
  html.is-mobile-chat body {
    position:fixed;
    inset:0;
  }
  html.is-mobile-story body {
    position:fixed;
    inset:0;
  }
  html.is-mobile-chat .topbar,
  html.is-mobile-story .topbar {
    display:none;
  }
  html.is-mobile-chat main,
  html.is-mobile-story main {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
  }
  html.is-mobile-chat #chatView {
    position:fixed;
    z-index:30;
    top:var(--visual-viewport-top, 0px);
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:var(--visual-viewport-height, 100dvh);
    min-height:0;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:0;
  }
  html.is-mobile-story #storyView {
    position:fixed;
    z-index:30;
    top:var(--visual-viewport-top, 0px);
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:var(--visual-viewport-height, 100dvh);
    min-height:0;
    padding:0;
    overflow:hidden;
  }
  html.is-mobile-chat .chat-shell {
    width:100%;
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows:auto minmax(0, 1fr) auto;
    overflow:hidden;
    border:0;
    border-radius:0;
  }
  html.is-mobile-chat .chat-header {
    grid-row:1;
  }
  html.is-mobile-chat .chat-avatar {
    width:110px;
    height:110px;
    flex:0 0 110px;
    border-radius:16px;
  }
  html.is-mobile-chat .messages {
    grid-row:2;
  }
  html.is-mobile-chat .chat-form {
    grid-row:3;
  }
  html.is-mobile-chat .greeting-card[hidden] {
    display:none;
  }
  html.is-mobile-chat .messages {
    min-width:0;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  html.is-mobile-chat .chat-form {
    position:relative;
    z-index:2;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
    background:#fffafd;
  }
  html.is-mobile-chat #chatInput {
    resize:none;
  }
  html.is-mobile-chat .memory-panel { display:none; }
  html.is-mobile-story .story-shell {
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    border:0;
    border-radius:0;
  }
  html.is-mobile-story .story-messages {
    min-height:0;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  html.is-mobile-story .story-form {
    position:relative;
    z-index:2;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
  }
  html.is-mobile-story #storyInput {
    resize:none;
  }
}

/* Mobile-first frontend refresh restored (2026-06-22) */
.mobile-nav {
  display:none;
}

.mobile-account-actions {
  display:none;
}

@media (max-width:440px) {
  :root {
    --mobile-nav-height:64px;
  }

  .mobile-account-actions {
    display:block;
  }

  #personalLogoutButton {
    width:100%;
    min-height:44px;
  }

  .topbar {
    min-height:52px;
    padding:6px 12px;
  }

  .topbar .nav {
    display:none;
  }

  .brand-logo {
    width:42px;
    height:42px;
  }

  html.has-mobile-nav .topbar {
    display:none;
  }

  html.has-mobile-nav main {
    padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px);
  }

  .mobile-nav {
    position:fixed;
    z-index:40;
    right:8px;
    bottom:0;
    left:8px;
    min-height:var(--mobile-nav-height);
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    padding:6px 4px max(6px, env(safe-area-inset-bottom));
    border:1px solid rgba(218,132,173,.2);
    border-bottom:0;
    border-radius:10px 10px 0 0;
    background:rgba(255,250,253,.96);
    box-shadow:0 -8px 24px rgba(91,52,72,.08);
    backdrop-filter:blur(14px);
  }

  .mobile-nav.hidden {
    display:none;
  }

  .mobile-nav-item {
    min-width:0;
    min-height:50px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    padding:3px;
    color:#796571;
    border:0;
    border-radius:7px;
    background:transparent;
    font-size:11px;
  }

  .mobile-nav-item svg {
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .mobile-nav-item.active {
    color:#a84f78;
    background:#fff0f6;
  }

  .hall-view {
    margin:0;
    padding:12px 8px 18px;
    border-radius:0;
  }

  .hall-wallpaper {
    opacity:.1;
  }

  .hall-ribbon {
    display:none;
  }

  .hall-content {
    position:relative;
  }

  .hall-view .page-heading {
    display:grid;
    gap:14px;
    margin:0 0 12px;
    padding:14px;
    border-radius:8px;
    box-shadow:0 7px 20px rgba(102,61,83,.07);
  }

  .hall-view .page-heading h1 {
    margin:5px 0 0;
    font-size:25px;
    line-height:1.2;
  }

  .hall-view .filter-wrap,
  .hall-view .filters {
    justify-content:flex-start;
  }

  .hall-view .filter-bow {
    display:none;
  }

  .hall-view .filters button {
    min-height:34px;
    padding:0 12px;
  }

  .hall-create-button {
    width:100%;
    margin:0 0 12px;
    border-radius:7px;
    box-shadow:none;
  }

  .hall-view .character-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .hall-view .character-card {
    min-width:0;
    min-height:0;
    gap:7px;
    padding:7px;
    border-radius:8px;
    box-shadow:0 5px 15px rgba(89,53,71,.08);
  }

  .hall-view .portrait {
    height:auto;
    aspect-ratio:4 / 5;
    border-radius:6px;
  }

  .hall-view .character-heading {
    min-width:0;
    display:block;
  }

  .hall-view .character-heading h2 {
    overflow:hidden;
    margin:0 0 3px;
    font-size:16px;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .hall-view .character-heading p {
    overflow:hidden;
    min-height:18px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .hall-view .rating-badge {
    position:absolute;
    top:12px;
    right:12px;
    height:22px;
    background:rgba(255,249,252,.9);
  }

  .hall-view .tag-row {
    flex-wrap:nowrap;
    overflow:hidden;
  }

  .hall-view .tag-row span {
    flex:0 0 auto;
    padding:2px 5px;
    font-size:10px;
  }

  .hall-view .character-card blockquote {
    min-height:36px;
    display:-webkit-box;
    overflow:hidden;
    font-size:11px;
    line-height:1.55;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .hall-view .card-action {
    min-height:38px;
    width:100%;
    padding:0 10px;
    border-radius:6px;
    box-shadow:none;
  }

  #detailView {
    padding:12px 10px 28px;
  }

  #detailView > .back-button {
    margin-bottom:10px;
  }

  .detail-layout {
    grid-template-columns:1fr;
    gap:12px;
    margin-top:0;
  }

  .detail-portrait {
    min-height:0;
    width:min(76vw, 310px);
    aspect-ratio:4 / 5;
    justify-self:center;
    border-radius:8px;
  }

  .detail-copy {
    gap:14px;
    padding:16px 14px;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(88,52,70,.08);
  }

  .detail-title h1 {
    font-size:28px;
  }

  .detail-copy > .primary-button {
    width:100%;
    min-height:48px;
    border-radius:7px;
  }

  .workspace-view {
    padding:14px 10px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 18px);
  }

  .workspace-heading {
    display:grid;
    gap:14px;
    margin-bottom:16px;
    padding:15px;
    border-radius:8px;
  }

  .workspace-heading .primary-button,
  .workspace-heading .secondary-button {
    width:100%;
  }
}

@media (max-width:360px) {
  .hall-view .character-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
  }

  .hall-view {
    padding-right:6px;
    padding-left:6px;
  }

  .hall-view .character-card {
    padding:6px;
  }

  .hall-view .character-heading h2 {
    font-size:15px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .hall-view .character-card,
  .mobile-nav-item {
    transition:none;
  }
}

.story-interlude-label {
  width:max-content;
  margin-top:5px;
  padding:3px 9px;
  border:1px solid rgba(217,196,164,.36);
  border-radius:999px;
  color:rgba(230,225,216,.7);
  font-size:11px;
  letter-spacing:.08em;
}

.story-choice-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 16px 0;
  background:rgba(255,250,253,.96);
}

.story-choice-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 13px;
  border:1px solid rgba(168,79,120,.2);
  border-radius:999px;
  background:#fff;
  color:#765568;
  line-height:1.35;
}

.story-choice-text {
  min-width:0;
}

.story-choice-action {
  flex:0 0 auto;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(168,79,120,.08);
  color:#9d5c7d;
  font-size:11px;
}

.story-choice-button:hover,
.story-choice-button:focus-visible {
  border-color:rgba(168,79,120,.48);
  background:#fff3f8;
}

.story-cg-unavailable {
  padding:16px;
  border:1px dashed rgba(168,79,120,.2);
  border-radius:10px;
  color:var(--muted);
  background:rgba(255,255,255,.55);
}

@media (max-width:440px) {
  .story-choice-list {
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:8px 12px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .story-choice-list::-webkit-scrollbar {
    display:none;
  }

  .story-choice-button {
    flex:0 0 min(82vw,280px);
    min-height:40px;
    width:auto;
    border-radius:8px;
    text-align:left;
    justify-content:space-between;
  }
}

.button-loading-spinner {
  width:1em;
  height:1em;
  display:inline-block;
  flex:0 0 auto;
  margin-right:.45em;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  vertical-align:-.15em;
  animation:button-loading-spin .7s linear infinite;
}

@keyframes button-loading-spin {
  to { transform:rotate(360deg); }
}

@media (prefers-reduced-motion:reduce) {
  .button-loading-spinner { animation-duration:1.4s; }
}

/* Promotion and recharge MVP responsive additions (2026-06-24) */
@media (max-width:440px) {
  .recharge-flow {
    grid-template-columns:1fr;
  }
  .recharge-plan-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .recharge-upload-zone {
    min-height:140px;
  }
  .invite-code-panel,
  .copy-result-card {
    grid-template-columns:1fr;
  }
  .invite-code-panel strong {
    font-size:40px;
  }
  .promote-topic-list button {
    flex:1 1 42%;
  }
}

@media (max-width:390px) {
  .copy-result-card button {
    width:100%;
  }
}

@media (max-width:360px) {
  .recharge-plan-grid,
  .invite-stat-grid {
    grid-template-columns:1fr;
  }
  .recharge-qr-card img {
    max-width:260px;
  }
  .invite-code-panel strong {
    font-size:34px;
  }
}

.verification-code-row {
  display:flex;
  gap:8px;
  align-items:center;
}
.verification-code-row input {
  flex:1;
  min-width:0;
}
.verification-code-row button {
  flex-shrink:0;
  white-space:nowrap;
  font-size:14px;
  padding:8px 14px;
}
.verification-code-row button:disabled {
  opacity:.6;
  cursor:not-allowed;
}

/* FE-UX-62 visual experience upgrade (2026-06-29)
   Scope: visual tokens, hall/detail/chat/state polish only. */
:root {
  --ih-bg-page:#fff7fb;
  --ih-bg-page-warm:#fffaf2;
  --ih-bg-card:rgba(255,255,255,.84);
  --ih-bg-card-solid:#fffdfb;
  --ih-bg-input:#fffafe;
  --ih-brand-rose:#ff8fc7;
  --ih-brand-rose-soft:#ffe1ee;
  --ih-brand-rose-deep:#a84f78;
  --ih-brand-lavender:#a89bea;
  --ih-brand-lamp:#f0b35d;
  --ih-brand-mint:#8fcfb7;
  --ih-text:#4b3042;
  --ih-text-soft:#765f6d;
  --ih-text-muted:#917887;
  --ih-border:rgba(199,96,145,.22);
  --ih-border-strong:rgba(199,96,145,.42);
  --ih-shadow-soft:0 18px 52px rgba(115,56,88,.14);
  --ih-shadow-card:0 12px 34px rgba(115,56,88,.11);
  --ih-radius-card:18px;
  --ih-radius-panel:24px;
  --ih-radius-control:999px;
  --ih-touch:44px;
  --ih-bubble-third-bg:linear-gradient(135deg,rgba(48,58,87,.94),rgba(65,70,111,.92));
  --ih-bubble-third-text:#fff4fb;
}

body {
  color:var(--ih-text);
  background:
    linear-gradient(rgba(255,247,251,.9), rgba(255,247,251,.92)),
    radial-gradient(circle at 12% 8%, rgba(255,143,199,.24), transparent 26%),
    radial-gradient(circle at 86% 14%, rgba(240,179,93,.16), transparent 24%),
    linear-gradient(180deg,var(--ih-bg-page),var(--ih-bg-page-warm));
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(168,79,120,.035) 1px,transparent 1px),
    linear-gradient(rgba(168,79,120,.028) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 68%);
}

.topbar {
  border-bottom-color:var(--ih-border);
  background:rgba(255,250,253,.86);
  box-shadow:0 8px 28px rgba(115,56,88,.07);
}

.nav button,
.back-button,
.text-button {
  color:var(--ih-text-soft);
}

.nav button:hover,
.back-button:hover,
.text-button:hover {
  color:var(--ih-brand-rose-deep);
}

.section-label {
  color:var(--ih-brand-rose-deep);
  letter-spacing:.08em;
}

h1,h2,h3,
.chat-identity strong,
.story-identity strong {
  color:var(--ih-text);
}

p,
label,
.status,
.inline-status {
  color:var(--ih-text-muted);
}

input,
textarea,
select {
  min-height:var(--ih-touch);
  color:var(--ih-text);
  border-color:var(--ih-border);
  border-radius:14px;
  background:var(--ih-bg-input);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

input:focus,
textarea:focus,
select:focus {
  border-color:var(--ih-border-strong);
  box-shadow:0 0 0 4px rgba(255,143,199,.14);
}

.primary-button,
.card-action,
.send-button,
.story-send-button {
  min-height:var(--ih-touch);
  color:#4d2f3f;
  border:0;
  border-radius:var(--ih-radius-control);
  background:linear-gradient(135deg,#ffd7e8 0%,var(--ih-brand-rose) 58%,#f1ba73 100%);
  box-shadow:0 12px 26px rgba(255,143,199,.22);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.primary-button:hover,
.card-action:hover,
.send-button:hover,
.story-send-button:hover {
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(255,143,199,.28);
}

.secondary-button,
.story-exit-button,
.story-help-button,
.story-progress-row button,
.story-ending-actions button,
.message-context-actions button,
.conversation-empty button {
  min-height:var(--ih-touch);
  color:var(--ih-text-soft);
  border:1px solid var(--ih-border);
  border-radius:var(--ih-radius-control);
  background:rgba(255,255,255,.82);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:3px solid rgba(255,143,199,.28);
  outline-offset:2px;
}

.auth-visual,
.auth-panel,
.compact-auth-panel,
.workspace-heading,
.personal-feature-card,
.character-generator,
.character-editor,
.detail-copy,
.memory-panel,
.chat-shell,
.rating-dialog,
.recharge-qr-card,
.recharge-submit-card,
.promote-copy-tool,
.privacy-card,
.story-entry-card {
  border-color:var(--ih-border);
  border-radius:var(--ih-radius-panel);
  background:var(--ih-bg-card);
  box-shadow:var(--ih-shadow-soft);
  backdrop-filter:blur(18px);
}

.auth-view {
  gap:34px;
}

.auth-visual {
  background:
    linear-gradient(rgba(255,247,251,.68),rgba(255,247,251,.82)),
    radial-gradient(circle at 24% 18%,rgba(255,143,199,.24),transparent 28%),
    radial-gradient(circle at 78% 76%,rgba(240,179,93,.18),transparent 32%),
    linear-gradient(145deg,#fffaf2,#fff1f8 72%);
}

.auth-visual::after {
  content:"";
  position:absolute;
  right:30px;
  bottom:24px;
  width:122px;
  height:82px;
  border:1px solid rgba(168,79,120,.12);
  border-radius:16px;
  background:
    linear-gradient(90deg,rgba(168,79,120,.1) 1px,transparent 1px),
    linear-gradient(#fff9fc,#fff3f8);
  background-size:18px 100%,100%;
  opacity:.72;
}

.dialogue-preview,
.greeting-card,
.daily-card,
.backup-state-panel,
.conversation-card,
.conversation-list-item,
.proactive-inbox-item {
  border-color:var(--ih-border);
  border-radius:18px;
  background:rgba(255,255,255,.84);
  box-shadow:var(--ih-shadow-card);
}

.auth-tabs {
  background:#fff1f7;
}

.auth-tabs button.active {
  color:var(--ih-text);
  background:#fff;
  box-shadow:0 6px 16px rgba(115,56,88,.1);
}

.captcha-row {
  border:1px dashed var(--ih-border);
  border-radius:16px;
  background:rgba(255,255,255,.58);
}

.hall-view {
  overflow:hidden;
  border:1px solid var(--ih-border);
  border-radius:var(--ih-radius-panel);
  background:
    linear-gradient(rgba(255,250,253,.82),rgba(255,250,253,.86)),
    radial-gradient(circle at 12% 0%,rgba(255,143,199,.18),transparent 28%),
    radial-gradient(circle at 92% 8%,rgba(168,155,234,.14),transparent 26%);
  box-shadow:var(--ih-shadow-soft);
}

.hall-wallpaper {
  opacity:.16;
  filter:saturate(.84) brightness(1.08);
}

.hall-view .page-heading,
.workspace-heading {
  border:1px solid rgba(199,96,145,.16);
  background:rgba(255,255,255,.64);
}

.hall-view .character-grid {
  gap:20px;
}

.hall-view .character-card,
.custom-character-card {
  border-color:var(--ih-border);
  border-radius:var(--ih-radius-card);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,248,251,.94));
  box-shadow:var(--ih-shadow-card);
}

.hall-view .character-card:hover {
  transform:translateY(-4px);
  border-color:var(--ih-border-strong);
  box-shadow:0 18px 42px rgba(168,79,120,.17);
}

.portrait,
.detail-portrait,
.portrait-upload-zone {
  border-color:var(--ih-border);
  border-radius:18px;
  background:linear-gradient(145deg,#fff2f8,#f6ddeb);
}

.hall-view .tag-row span,
.rating-badge,
.privacy-pill,
.feature-status,
.story-choice-action {
  border-color:rgba(199,96,145,.22);
  border-radius:999px;
  background:#fff2f7;
  color:var(--ih-brand-rose-deep);
}

.affinity-row,
.affinity-summary {
  color:var(--ih-text-muted);
}

.affinity-stage,
.chat-relationship {
  color:#9f7040;
}

.character-proactive-note,
.proactive-inbox-item.is-priority {
  border:1px solid rgba(255,143,199,.42);
  background:linear-gradient(135deg,#fff2f8,#fffaf2);
  color:var(--ih-brand-rose-deep);
  box-shadow:0 10px 26px rgba(255,143,199,.16);
}

.detail-layout {
  align-items:start;
}

.detail-copy {
  gap:20px;
}

.detail-copy blockquote {
  color:var(--ih-text);
  border-left-color:var(--ih-brand-rose);
  background:linear-gradient(90deg,rgba(255,143,199,.1),transparent);
  border-radius:0 14px 14px 0;
  padding:14px 16px;
}

.privacy-note,
.runtime-note {
  border-color:rgba(199,96,145,.2);
  background:#fff5f9;
}

#chatView.themed-view {
  border:1px solid var(--ih-border);
  border-radius:var(--ih-radius-panel);
  background:rgba(255,250,253,.72);
  box-shadow:var(--ih-shadow-soft);
}

.chat-shell {
  overflow:hidden;
}

.chat-header {
  min-height:76px;
  border-bottom-color:rgba(199,96,145,.18);
  background:rgba(255,250,253,.94);
}

#chatAvatar {
  width:88px;
  height:88px;
  flex-basis:88px;
  border:2px solid rgba(255,143,199,.7);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(168,79,120,.18);
}

.chat-identity small {
  color:var(--ih-text-muted);
}

.clear-chat-button {
  min-height:36px;
  color:var(--ih-text-muted);
  border:1px solid transparent;
  border-radius:999px;
}

.clear-chat-button:hover {
  color:#9b4d5d;
  border-color:rgba(155,77,93,.2);
  background:#fff3f5;
}

.messages {
  background:
    linear-gradient(rgba(255,248,251,.83),rgba(255,248,251,.85)),
    radial-gradient(circle at 18% 12%,rgba(255,143,199,.12),transparent 22%),
    url("./assets/decor/chibi-twintail-wallpaper.webp") center top / 430px 430px repeat;
}

.message {
  border-radius:18px;
  box-shadow:0 10px 26px rgba(115,56,88,.1);
}

.message.assistant {
  border-color:rgba(199,96,145,.22);
  background:rgba(255,255,255,.94);
}

.message.user {
  border-color:rgba(240,179,93,.26);
  background:linear-gradient(135deg,#fff4dd,#fce2bd);
}

.message.safety {
  color:#7f4c5c;
  border-color:rgba(143,82,96,.24);
  background:#fff4f6;
}

.message.error {
  color:#84465a;
  border-color:rgba(143,82,96,.32);
  background:#fff0f4;
}

#messageList [data-generation-mode="third_person"].message-item .message.assistant {
  color:var(--ih-bubble-third-text);
  border-color:rgba(190,205,235,.48);
  background:var(--ih-bubble-third-bg);
  box-shadow:inset 4px 0 0 rgba(190,205,235,.58),0 14px 34px rgba(48,58,87,.16);
}

.generation-mode-label {
  color:#5f678a;
  border-color:rgba(95,103,138,.22);
  background:#eef1ff;
}

.chat-form {
  border-top-color:rgba(199,96,145,.16);
  background:rgba(255,250,253,.96);
}

#chatInput,
#storyInput {
  border-radius:18px;
}

.memory-panel {
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,247,251,.86));
}

.story-view {
  background:
    linear-gradient(rgba(255,250,253,.72),rgba(255,250,253,.78)),
    radial-gradient(circle at 18% 4%,rgba(168,155,234,.22),transparent 28%),
    linear-gradient(180deg,#f6f0fb,#fff8fb);
}

.story-shell,
.story-cg-card,
.story-ending-card {
  border-color:var(--ih-border);
  border-radius:var(--ih-radius-panel);
  background:rgba(255,255,255,.9);
  box-shadow:var(--ih-shadow-soft);
}

.story-header,
.story-form,
.story-choice-list {
  border-color:rgba(199,96,145,.16);
  background:rgba(255,250,253,.94);
}

.story-guidance,
.story-progress-feedback,
.story-message-label,
.story-cg-fallback,
.story-ending-card p {
  color:var(--ih-text-muted);
}

.story-message {
  border-color:rgba(199,96,145,.18);
  border-radius:18px;
}

.story-message.assistant {
  background:#fff;
}

.story-message.user {
  background:#fff1f7;
}

.story-cg-card {
  cursor:zoom-in;
}

.story-cg-image {
  border-radius:16px;
  background:#fff2f7;
}

.story-cg-card.is-failed {
  border-style:dashed;
  background:#fff8fb;
}

.story-cg-viewer-close {
  background:rgba(75,48,66,.82);
}

.empty-state,
.conversation-empty-inline,
.conversation-empty,
.recharge-status,
.api-key-status,
.state-card {
  border:1px solid rgba(199,96,145,.16);
  border-radius:18px;
  background:rgba(255,255,255,.72);
}

.affinity-toast {
  color:var(--ih-text);
  border-left-color:var(--ih-brand-rose);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--ih-shadow-card);
}

.rating-dialog::backdrop,
.story-cg-viewer::backdrop {
  background:rgba(58,39,52,.58);
  backdrop-filter:blur(7px);
}

@media (max-width:760px) {
  main {
    padding:20px 14px 78px;
  }

  .auth-view {
    gap:18px;
  }

  .auth-visual {
    min-height:260px;
    padding:26px;
  }

  .auth-visual h1 {
    font-size:31px;
  }

  .auth-panel,
  .detail-copy,
  .memory-panel,
  .workspace-heading,
  .personal-feature-card {
    border-radius:18px;
  }

  .chat-header {
    grid-template-columns:auto minmax(0,1fr) auto;
  }
}

@media (max-width:480px) {
  .hall-view {
    margin:0;
    padding:12px 8px 18px;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .hall-view .page-heading {
    padding:14px;
    border-radius:18px;
  }

  .hall-view .character-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .hall-view .character-card {
    padding:7px;
    border-radius:14px;
  }

  .hall-view .tag-row span {
    padding:2px 5px;
  }

  #chatAvatar,
  html.is-mobile-chat #chatAvatar {
    width:110px;
    height:110px;
    flex-basis:110px;
    border-radius:16px;
  }

  html.is-mobile-chat .chat-header {
    min-height:126px;
    background:rgba(255,250,253,.98);
  }

  html.is-mobile-chat .chat-form {
    background:rgba(255,250,253,.98);
  }

  html.is-mobile-chat #chatView {
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  html.is-mobile-chat #messageList {
    align-self:stretch;
    height:100%;
    min-height:0;
    padding:14px;
    overflow-y:auto;
  }

  .message,
  .story-message {
    max-width:88%;
  }

  .story-shell {
    border-radius:0;
    box-shadow:none;
  }

  .story-cg-card {
    border-radius:18px;
  }
}

@media (max-width:360px) {
  .hall-view .character-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hall-view .character-heading h2 {
    font-size:15px;
  }

  .hall-view .card-action {
    min-height:40px;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }

  .primary-button:hover,
  .card-action:hover,
  .send-button:hover,
  .story-send-button:hover,
  .hall-view .character-card:hover {
    transform:none;
  }
}

/* FE-UX-62 visible refresh layer and 480px acceptance pass (2026-06-29). */
:root {
  --ih-surface-warm:#fffaf4;
  --ih-surface-petal:#fff1f6;
  --ih-ink-deep:#322330;
  --ih-ink-soft:#715163;
  --ih-line-rose:rgba(196,82,128,.26);
  --ih-accent-plum:#6b4aa2;
  --ih-accent-mint:#6cae9f;
  --ih-card-glow:0 22px 54px rgba(129,70,98,.18);
}

html,
body,
button,
input,
textarea,
select {
  font-family:"LXGW WenKai","YouYuan","Microsoft YaHei UI","Comic Sans MS","Segoe UI",sans-serif;
}

body {
  color:var(--ih-ink-deep);
  background:
    linear-gradient(180deg,rgba(255,248,242,.92),rgba(255,241,248,.96)),
    url("./assets/decor/chibi-twintail-wallpaper.webp") center top / 1120px auto fixed,
    #fff6f0;
}

body::before {
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  content:"";
  background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,250,253,.42) 48%,rgba(255,255,255,.82));
}

.topbar {
  min-height:68px;
  border-bottom:1px solid rgba(255,255,255,.72);
  background:
    linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,242,249,.92)),
    linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
  box-shadow:0 18px 40px rgba(102,55,79,.13);
}

.brand {
  min-width:144px;
  padding:8px 12px;
  border:1px solid var(--ih-line-rose);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 28px rgba(161,74,112,.16);
}

.brand-logo {
  max-height:42px;
}

.nav button {
  border:1px solid rgba(196,82,128,.18);
  border-radius:999px;
  background:rgba(255,255,255,.66);
}

.nav button:hover,
.nav button:focus-visible {
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#c94f88,#7d5ec7);
  box-shadow:0 12px 26px rgba(125,94,199,.22);
}

main {
  max-width:1240px;
  padding-top:32px;
}

.view:not(.hidden) {
  animation:ihViewLift .28s ease-out both;
}

@keyframes ihViewLift {
  from {
    opacity:.82;
    transform:translateY(8px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.auth-view {
  align-items:stretch;
  padding:18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,241,248,.82));
  box-shadow:var(--ih-card-glow);
}

.auth-visual {
  min-height:520px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:26px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,238,246,.9)),
    url("./assets/decor/chibi-twintail-wallpaper.webp") center / cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.52);
}

.auth-visual::before {
  position:absolute;
  inset:24px auto auto 24px;
  width:68px;
  height:68px;
  border-radius:24px;
  content:"";
  background:linear-gradient(135deg,#fff,#ffe2ec);
  box-shadow:0 14px 32px rgba(145,70,103,.18);
}

.auth-visual h1 {
  max-width:520px;
  color:#fff;
  font-size:56px;
  line-height:1.02;
  text-shadow:0 3px 18px rgba(83,45,70,.44);
}

.auth-visual p {
  max-width:520px;
  color:#fffdfd;
  text-shadow:0 2px 10px rgba(83,45,70,.42);
}

.auth-panel {
  border:1px solid rgba(255,255,255,.82);
  border-radius:26px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,247,251,.96)),
    var(--ih-surface-petal);
  box-shadow:0 22px 48px rgba(121,63,92,.15);
}

.auth-panel input,
.auth-panel textarea,
.form-field input,
.form-field textarea,
.form-field select {
  border-color:rgba(196,82,128,.22);
  border-radius:16px;
  background:#fffdfa;
}

.primary-button,
.send-button,
.story-send-button,
.submit-button {
  border:0;
  background:linear-gradient(135deg,#c94f88,#7b59c6 62%,#55a99c);
  box-shadow:0 16px 30px rgba(128,77,151,.26);
}

.hall-view {
  position:relative;
  overflow:hidden;
  padding:28px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:32px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,245,249,.86)),
    radial-gradient(circle at 12% 0%,rgba(124,193,176,.24),transparent 28%),
    radial-gradient(circle at 92% 8%,rgba(201,79,136,.22),transparent 30%);
  box-shadow:var(--ih-card-glow);
}

.hall-view::before {
  display:none;
  content:none;
}

.hall-view > * {
  position:relative;
  z-index:1;
}

.hall-view .page-heading,
.workspace-heading {
  padding:24px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:26px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,238,246,.9)),
    linear-gradient(90deg,rgba(108,174,159,.13),rgba(201,79,136,.13));
  box-shadow:0 18px 36px rgba(120,64,92,.12);
}

.hall-view .page-heading h1,
.workspace-heading h1 {
  color:#3a2635;
  font-size:clamp(28px,4vw,48px);
  line-height:1.06;
}

.hall-view .page-heading h1::after {
  display:block;
  width:92px;
  height:6px;
  margin-top:14px;
  border-radius:999px;
  content:"";
  background:linear-gradient(90deg,#c94f88,#55a99c);
}

.hall-view .page-heading p,
.workspace-heading p,
.hint,
.form-hint,
.small-note {
  color:var(--ih-ink-soft);
}

.hall-view .character-grid {
  gap:18px;
}

.hall-view .character-card {
  overflow:hidden;
  min-height:430px;
  padding:10px;
  border:1px solid rgba(255,255,255,.84);
  border-radius:24px;
  background:
    linear-gradient(180deg,#fff,#fff4f8 64%,#fffaf5),
    var(--ih-surface-warm);
  box-shadow:0 18px 38px rgba(118,65,91,.16);
}

.hall-view .character-card::before {
  display:none;
  content:none;
}

.hall-view .character-card:hover {
  border-color:rgba(201,79,136,.42);
  box-shadow:0 28px 54px rgba(118,65,91,.24);
  transform:translateY(-4px);
}

.hall-view .portrait {
  aspect-ratio:4 / 5;
  height:auto;
  border:1px solid rgba(255,255,255,.88);
  border-radius:18px;
  background:#fff1f6;
  box-shadow:0 12px 26px rgba(120,65,92,.16);
}

.hall-view .character-heading h2 {
  color:#3a2635;
}

.hall-view .character-card blockquote,
.detail-intro blockquote {
  color:#573b4f;
  border-left:4px solid rgba(201,79,136,.42);
  background:#fff7fb;
}

.hall-view .tag-row span,
.detail-tag,
.character-pill,
.generation-mode-label {
  color:#5e4160;
  border:1px solid rgba(196,82,128,.22);
  background:linear-gradient(180deg,#fff,#ffeef5);
}

.hall-view .card-action,
.action-button {
  color:#fff;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,#c94f88,#7b59c6);
  box-shadow:0 14px 28px rgba(125,94,199,.24);
}

.detail-layout,
.chat-view,
.story-shell,
.personal-layout,
.workspace-card,
.modal-panel {
  border:1px solid rgba(255,255,255,.78);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,245,249,.94));
  box-shadow:var(--ih-card-glow);
}

.detail-portrait {
  border-radius:26px;
  background:linear-gradient(180deg,#fff4f8,#fff);
  box-shadow:0 22px 48px rgba(118,65,91,.18);
}

.detail-copy h1,
.chat-name,
.story-title {
  color:#372532;
}

.chat-view {
  overflow:hidden;
  border-radius:30px;
}

.chat-shell {
  border:1px solid rgba(255,255,255,.76);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,245,250,.92));
}

.chat-header {
  border-bottom:1px solid rgba(196,82,128,.16);
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,235,244,.96)),
    radial-gradient(circle at 100% 0%,rgba(108,174,159,.2),transparent 34%);
}

#chatAvatar {
  border:3px solid #fff;
  background:#fff1f6;
  box-shadow:0 18px 34px rgba(118,65,91,.2);
}

.messages {
  background:linear-gradient(180deg,rgba(255,252,249,.9),rgba(255,244,249,.96));
}

.message {
  border-radius:20px;
  box-shadow:0 12px 28px rgba(75,45,61,.1);
}

.message.assistant {
  border:1px solid rgba(196,82,128,.2);
  background:#fff;
}

.message.user {
  color:#fff;
  border:0;
  background:linear-gradient(135deg,#c94f88,#7b59c6);
}

#messageList [data-generation-mode="third_person"].message-item .message.assistant {
  color:#34425d;
  border-color:rgba(108,174,159,.34);
  background:linear-gradient(180deg,#eefbf8,#fff);
  box-shadow:inset 5px 0 0 rgba(108,174,159,.58),0 14px 30px rgba(68,96,112,.14);
}

.chat-form {
  border-top:1px solid rgba(196,82,128,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,241,248,.98));
}

#chatInput,
#storyInput {
  border:1px solid rgba(196,82,128,.22);
  background:#fffdfa;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.story-cg-card,
.story-ending-card,
.state-card,
.empty-state {
  border:1px solid rgba(196,82,128,.18);
  background:linear-gradient(180deg,#fff,#fff7fb);
  box-shadow:0 16px 34px rgba(118,65,91,.12);
}

.hall-pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:20px auto 0;
  padding:10px 12px;
  border:1px solid rgba(196,82,128,.16);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  box-shadow:0 14px 28px rgba(118,65,91,.12);
}

.hall-pagination button {
  min-width:86px;
  min-height:42px;
  color:#fff;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#c94f88,#7b59c6);
  box-shadow:0 10px 20px rgba(125,94,199,.2);
  cursor:pointer;
}

.hall-pagination button:disabled {
  color:#9b7f90;
  background:#f3e8ef;
  box-shadow:none;
  cursor:not-allowed;
}

.hall-pagination span {
  min-width:62px;
  color:#5e4160;
  font-weight:700;
  text-align:center;
}

@media (min-width:761px) {
  .hall-view .character-grid {
    grid-template-columns:repeat(auto-fit,minmax(214px,1fr));
  }

  .chat-shell {
    min-height:min(760px,calc(var(--app-viewport-height) - 160px));
  }
}

@media (max-width:760px) {
  body {
    background-attachment:scroll;
    background-size:760px auto;
  }

  main {
    padding:16px 12px 76px;
  }

  .auth-view {
    padding:10px;
    border-radius:22px;
  }

  .auth-visual {
    min-height:300px;
  }

  .auth-visual h1 {
    font-size:38px;
  }

  .hall-view {
    padding:16px 12px 20px;
    border-radius:24px;
  }

  .hall-view .page-heading,
  .workspace-heading {
    padding:18px;
    border-radius:20px;
  }

  .hall-view .character-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .hall-view .character-card {
    min-height:360px;
    border-radius:18px;
  }

  .chat-view,
  .chat-shell {
    border-radius:22px;
  }
}

@media (max-width:480px) {
  main {
    width:100%;
    padding:10px 8px 68px;
  }

  .topbar {
    min-height:58px;
    padding:8px;
  }

  .brand {
    min-width:118px;
    border-radius:16px;
  }

  .brand-logo {
    max-height:34px;
  }

  .auth-view,
  .hall-view {
    margin:0;
    border-radius:18px;
  }

  .auth-visual {
    min-height:260px;
    border-radius:18px;
  }

  .auth-visual h1 {
    font-size:32px;
  }

  .auth-panel {
    border-radius:18px;
  }

  .hall-view .page-heading h1,
  .workspace-heading h1 {
    font-size:28px;
  }

  .hall-view .character-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .hall-view .character-card {
    min-width:0;
    min-height:318px;
    padding:8px;
    border-radius:16px;
  }

  .hall-view .portrait {
    border-radius:14px;
  }

  .hall-view .character-heading h2 {
    font-size:15px;
  }

  .hall-view .character-card blockquote {
    font-size:12px;
    line-height:1.5;
  }

  .hall-view .tag-row {
    gap:5px;
  }

  .hall-view .tag-row span {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  html.is-mobile-chat #chatView {
    height:calc(var(--app-viewport-height) - 76px);
    min-height:0;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  html.is-mobile-chat .chat-shell {
    height:100%;
    min-height:0;
    border:0;
    border-radius:0;
  }

  html.is-mobile-chat .chat-header {
    min-height:122px;
    padding:10px;
  }

  #chatAvatar,
  html.is-mobile-chat #chatAvatar {
    width:110px;
    height:110px;
    flex-basis:110px;
    border-radius:18px;
  }

  html.is-mobile-chat #messageList {
    flex:1 1 auto;
    height:auto;
    min-height:0;
    padding:14px 12px;
  }

  html.is-mobile-chat .chat-form {
    flex:0 0 auto;
    margin:0;
    padding:10px;
  }

  .message,
  .story-message {
    max-width:90%;
  }

  .hall-pagination {
    width:100%;
    gap:8px;
    margin-top:14px;
    border-radius:18px;
  }

  .hall-pagination button {
    min-width:74px;
  }
}

@media (max-width:360px) {
  .hall-view .character-card {
    min-height:318px;
    padding:7px;
  }
}

/* Date mode MVP */
.chat-form {
  position:relative;
}

.chat-more-button {
  min-width:44px;
  min-height:44px;
  padding:0 13px;
  color:#ffdbe8;
  border:1px solid rgba(240,168,208,.28);
  border-radius:10px;
  background:rgba(255,255,255,.06);
  font-size:22px;
  line-height:1;
}

.chat-more-button:hover,
.chat-more-button:focus-visible {
  border-color:rgba(240,168,208,.52);
  background:rgba(240,168,208,.12);
}

.chat-interaction-popover {
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  z-index:20;
  width:min(430px,calc(100vw - 24px));
  padding:14px;
  color:#4b3042;
  border:1px solid rgba(199,96,145,.2);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,247,251,.94));
  box-shadow:0 18px 42px rgba(118,65,91,.16);
  backdrop-filter:blur(14px);
}

.chat-more-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:12px;
}

.chat-more-tile {
  width:100%;
  min-width:0;
  min-height:104px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:6px;
  padding:12px 8px;
  color:#4b3042;
  text-align:center;
  border:1px solid rgba(199,96,145,.16);
  border-radius:18px;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 28px rgba(118,65,91,.1);
}

.chat-more-tile[hidden] {
  display:none !important;
}

.chat-more-tile:hover,
.chat-more-tile:focus-visible {
  border-color:rgba(198,164,238,.38);
  background:rgba(255,255,255,.98);
}

.chat-more-tile:disabled,
.chat-more-tile[aria-disabled="true"] {
  cursor:not-allowed;
  opacity:.62;
}

.chat-more-tile span:not(.chat-more-icon) {
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  font-weight:700;
}

.chat-more-tile small {
  max-width:100%;
  color:#8a7080;
  font-size:12px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.chat-more-icon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:#7e5f8f;
  border:1px solid rgba(167,143,210,.18);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(242,234,255,.82));
  box-shadow:0 10px 22px rgba(126,104,177,.1);
  font-weight:800;
}

.date-entry-button {
  width:100%;
  min-height:54px;
  display:grid;
  gap:2px;
  justify-items:start;
  padding:10px 12px;
  color:#4b3042;
  text-align:left;
  border:1px solid rgba(199,96,145,.22);
  border-radius:8px;
  background:#fff;
}

.chat-more-tile.date-entry-button {
  min-height:104px;
  justify-items:center;
  text-align:center;
}

.date-entry-button small {
  color:#8a7080;
}

.date-view {
  height:calc(var(--app-viewport-height, 100dvh) - 170px);
  min-height:0;
  padding:18px;
  background:
    radial-gradient(circle at 16% 6%,rgba(240,168,208,.2),transparent 28%),
    linear-gradient(180deg,#f4eef3 0%,#e8edf3 42%,#f8f8fa 100%);
}

.date-shell {
  width:min(900px,100%);
  height:calc(var(--app-viewport-height, 100dvh) - 206px);
  min-height:0;
  margin:0 auto;
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto auto auto;
  overflow:hidden;
  color:#303a47;
  border:1px solid rgba(142,102,128,.22);
  border-radius:18px;
  background:rgba(250,250,252,.96);
  box-shadow:0 24px 70px rgba(48,58,71,.18);
}

.date-shell.date-scenario-mode {
  align-content:start;
  grid-template-rows:auto auto auto auto;
}

.date-header {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid rgba(142,102,128,.16);
  background:rgba(247,239,245,.96);
}

.date-identity {
  min-width:0;
  display:grid;
  gap:3px;
  text-align:center;
}

.date-identity strong {
  overflow:hidden;
  color:#303a47;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:20px;
}

.date-identity small {
  min-height:18px;
  color:#7c6f7b;
}

.date-back-button,
.date-exit-button,
.date-end-button,
.date-summary-actions button,
.date-send-button {
  min-height:44px;
  padding:0 15px;
  color:#6e5364;
  border:1px solid rgba(142,102,128,.24);
  border-radius:10px;
  background:#fff;
}

.date-exit-button {
  color:#8b5362;
}

.date-status-row {
  display:grid;
  gap:10px;
  padding:12px 20px 0;
}

.date-timeline {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}

.date-timeline-step {
  min-width:0;
  display:grid;
  gap:2px;
  padding:8px 6px;
  color:#81727e;
  text-align:center;
  border:1px solid rgba(142,102,128,.16);
  border-radius:8px;
  background:#fff;
}

.date-timeline-step span {
  font-size:13px;
}

.date-timeline-step small {
  overflow:hidden;
  color:#9a8b97;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}

.date-timeline-step.completed {
  color:#6d5b67;
  background:#f1e7ee;
}

.date-timeline-step.active {
  color:#503746;
  border-color:rgba(168,79,120,.4);
  background:#ffeef6;
}

.date-scene-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.date-scene-tags span {
  padding:4px 9px;
  color:#765568;
  border:1px solid rgba(168,79,120,.18);
  border-radius:999px;
  background:#fff;
  font-size:12px;
}

.date-guidance {
  min-height:30px;
  margin:0;
  padding:10px 20px 4px;
  color:#6e7784;
  line-height:1.55;
  font-size:13px;
}

.date-scenario-panel {
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  align-items:start;
  gap:9px;
  padding:10px 14px 14px;
  overflow-y:auto;
}

.date-scenario-card {
  min-height:96px;
  display:grid;
  align-content:start;
  gap:5px;
  padding:11px 12px;
  color:#354252;
  text-align:left;
  border:1px solid rgba(142,102,128,.18);
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 28px rgba(48,58,71,.08);
}

.date-scenario-card strong {
  font-size:16px;
}

.date-scenario-card span {
  color:#687484;
  display:-webkit-box;
  overflow:hidden;
  line-height:1.45;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.date-scenario-card small {
  color:#9b6b86;
  font-size:11px;
}

.date-messages {
  min-height:0;
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
  background:
    linear-gradient(rgba(250,250,252,.92),rgba(250,250,252,.92)),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(168,79,120,.035) 31px 32px);
}

.date-message {
  width:min(78%,620px);
  display:grid;
  gap:5px;
}

.date-message-user {
  align-self:flex-end;
  justify-items:end;
}

.date-message-assistant {
  align-self:flex-start;
  justify-items:start;
}

.date-message-bubble {
  padding:13px 15px;
  overflow-wrap:anywhere;
  line-height:1.72;
  border:1px solid rgba(142,102,128,.15);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(48,58,71,.08);
  background:#fff;
}

.date-message-user .date-message-bubble {
  background:#eadfe8;
}

.date-action-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 16px 0;
  background:rgba(255,250,253,.96);
}

.date-action-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 16px 0;
  background:rgba(255,250,253,.96);
}

.date-action-bar.hidden {
  display:none;
}

.date-custom-action-button,
.date-action-toggle-button {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  color:#765568;
  border:1px solid rgba(168,79,120,.2);
  border-radius:999px;
  background:#fff;
}

.date-custom-action-button {
  color:#fff;
  border-color:transparent;
  background:#8d6278;
}

.date-action-button {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:8px 13px;
  color:#765568;
  border:1px solid rgba(168,79,120,.2);
  border-radius:999px;
  background:#fff;
  line-height:1.35;
}

.date-action-button:hover,
.date-action-button:focus-visible {
  border-color:rgba(168,79,120,.48);
  background:#fff3f8;
}

.date-control-row {
  display:flex;
  justify-content:flex-end;
  padding:10px 20px 0;
  background:rgba(255,250,253,.96);
}

.date-end-button {
  background:#f7ecf3;
}

.date-form {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  padding:14px 20px max(14px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(142,102,128,.16);
  background:rgba(247,239,245,.96);
}

.date-form textarea {
  min-height:44px;
  max-height:140px;
  resize:vertical;
  padding:11px 13px;
  color:#303a47;
  border:1px solid rgba(142,102,128,.24);
  border-radius:10px;
  background:#fff;
  font:inherit;
}

.date-send-button {
  min-width:76px;
  color:#fff;
  border:0;
  background:#7b5d70;
}

.date-summary-card {
  margin:0 20px 12px;
  padding:18px;
  color:#354252;
  border:1px solid rgba(142,102,128,.18);
  border-radius:12px;
  background:linear-gradient(145deg,#fff,#f2eaf0);
}

.date-summary-card p {
  margin:8px 0 0;
  color:#687484;
  line-height:1.65;
}

.date-reward-feedback {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.date-reward-feedback span {
  min-height:32px;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  color:#765568;
  border:1px solid rgba(168,79,120,.16);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:700;
}

.date-summary-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

html.is-mobile-date,
html.is-mobile-date body {
  width:100%;
  height:var(--app-viewport-height, 100dvh);
  overflow:hidden;
  overscroll-behavior:none;
}

html.is-mobile-date body {
  position:fixed;
  inset:0;
  min-height:0;
}

html.is-mobile-date .topbar {
  display:none;
}

html.is-mobile-date main {
  width:100vw;
  height:var(--visual-viewport-height,var(--app-viewport-height));
  padding:0;
  overflow:hidden;
  transform:none;
}

html.is-mobile-date #dateView {
  position:fixed;
  inset:0;
  width:100vw;
  height:var(--visual-viewport-height,var(--app-viewport-height));
  min-height:0;
  padding:0;
  overflow:hidden;
}

html.is-mobile-date .date-shell {
  width:100%;
  height:100%;
  min-height:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
}

html.is-mobile-date .date-header {
  padding:10px 12px;
  gap:8px;
}

html.is-mobile-date .date-back-button,
html.is-mobile-date .date-exit-button {
  padding:0 10px;
}

html.is-mobile-date .date-status-row {
  padding:10px 12px 0;
}

html.is-mobile-date .date-timeline {
  gap:5px;
}

html.is-mobile-date .date-timeline-step {
  padding:7px 4px;
}

html.is-mobile-date .date-timeline-step small {
  display:none;
}

html.is-mobile-date .date-guidance {
  padding:8px 12px 2px;
}

html.is-mobile-date .date-scenario-panel {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:8px;
}

html.is-mobile-date .date-scenario-card {
  min-height:78px;
  gap:3px;
  padding:9px;
}

html.is-mobile-date .date-scenario-card strong {
  font-size:14px;
}

html.is-mobile-date .date-scenario-card span {
  font-size:12px;
  line-height:1.35;
  -webkit-line-clamp:2;
}

html.is-mobile-date .date-scenario-card small {
  display:none;
}

html.is-mobile-date .date-messages {
  padding:14px 12px;
}

html.is-mobile-date .date-message {
  width:min(92%,620px);
}

html.is-mobile-date .date-action-list {
  display:flex;
  flex-wrap:nowrap;
  gap:7px;
  overflow-x:auto;
  padding:7px 12px 0;
  scrollbar-width:none;
}

html.is-mobile-date .date-action-list::-webkit-scrollbar {
  display:none;
}

html.is-mobile-date .date-action-bar {
  padding:7px 12px 0;
}

html.is-mobile-date.is-keyboard-open .date-action-bar {
  padding:4px 12px 0;
}

html.is-mobile-date .date-action-button {
  flex:0 0 auto;
  width:auto;
  min-height:38px;
  padding:7px 10px;
  border-radius:999px;
  justify-content:center;
  white-space:nowrap;
}

html.is-mobile-date .date-control-row {
  padding:8px 12px 0;
}

html.is-mobile-date.is-keyboard-open .date-control-row {
  display:none;
}

html.is-mobile-date .date-end-button {
  width:100%;
}

html.is-mobile-date .date-form {
  padding:10px 12px max(10px,env(safe-area-inset-bottom));
}

@media (max-width:520px) {
  .chat-interaction-popover {
    left:10px;
    right:10px;
    width:auto;
  }

  .chat-form {
    gap:8px;
  }

  .send-button {
    min-width:68px;
  }
}

/* Task 67: VD-02 live frontend visual integration layer */
:root {
  --vd02-ink:#514b78;
  --vd02-muted:#918bb0;
  --vd02-line:rgba(151,134,210,.18);
  --vd02-line-strong:rgba(151,134,210,.32);
  --vd02-panel:rgba(255,255,255,.82);
  --vd02-panel-solid:#fffafe;
  --vd02-lilac:#b875ff;
  --vd02-pink:#f19bed;
  --vd02-blue:#72b7ff;
  --vd02-mint:#8dded6;
  --vd02-shadow:0 18px 44px rgba(120,96,178,.18);
  --vd02-soft-shadow:0 10px 24px rgba(120,96,178,.12);
}

body {
  color:var(--vd02-ink);
  font-family:"Microsoft YaHei UI","PingFang SC","Hiragino Sans GB","Noto Sans SC","Nunito",Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(246,175,231,.26), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(112,183,255,.22), transparent 26%),
    radial-gradient(circle at 50% 92%, rgba(141,222,214,.16), transparent 32%),
    linear-gradient(180deg,#fffaff 0%,#f7f3ff 48%,#eff7ff 100%);
  overflow-x:hidden;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:url("./assets/vd02/chibi-twintail-wallpaper.webp");
  background-repeat:repeat;
  background-size:230px auto;
  opacity:.24;
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.32));
}

.topbar {
  border-bottom:1px solid rgba(255,255,255,.58);
  background:rgba(255,255,255,.74);
  box-shadow:0 10px 28px rgba(132,112,190,.12);
  backdrop-filter:blur(24px);
}

.brand-logo {
  border-radius:16px;
  box-shadow:0 8px 22px rgba(123,96,176,.18);
}

.nav button,
.text-button,
.secondary-button,
.primary-button,
.back-button {
  border-radius:999px;
  letter-spacing:0;
}

.primary-button,
.card-action,
.custom-card-actions button:first-child,
.filters button.active,
.pagination button.active {
  color:#fff;
  border:0;
  background:linear-gradient(135deg,var(--vd02-pink),var(--vd02-lilac) 48%,var(--vd02-blue));
  box-shadow:0 12px 24px rgba(154,114,232,.26);
}

.secondary-button,
.back-button,
.text-button {
  color:var(--vd02-ink);
  border:1px solid rgba(151,134,210,.2);
  background:rgba(255,255,255,.74);
  box-shadow:var(--vd02-soft-shadow);
}

.themed-view,
.workspace-view {
  color:var(--vd02-ink);
}

.themed-view:not(.chat-view),
.workspace-view {
  background:transparent;
}

.hall-view {
  isolation:isolate;
  color:var(--vd02-ink);
  background:transparent;
}

.hall-view::before,
.hall-view::after,
.hall-view .page-heading::before,
.hall-view .page-heading::after,
.themed-view:not(.hall-view)::before,
.themed-view:not(.hall-view)::after,
.hall-wallpaper,
.hall-ribbon,
.filter-bow {
  display:none !important;
}

.hall-content,
.workspace-view {
  position:relative;
  width:min(1120px,100%);
  margin:0 auto;
  padding:24px clamp(16px,4vw,34px) 36px;
}

.hall-view .page-heading {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:16px;
  margin:0 0 18px;
  padding:14px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:28px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--vd02-shadow);
  backdrop-filter:blur(20px);
}

.hall-view .page-heading > div:first-child {
  min-width:0;
}

.hall-view .section-label,
.workspace-heading .section-label,
.conversation-section-heading .section-label,
.character-generator .section-label,
.editor-heading .section-label,
.feature-card-heading .section-label {
  color:#8b64dc;
  font-size:13px;
  font-weight:800;
}

.hall-view h1,
.workspace-heading h1 {
  color:var(--vd02-ink);
  font-size:clamp(26px,4vw,40px);
  line-height:1.18;
}

.hall-view .page-heading p,
#conversationsView .workspace-heading p {
  display:none;
}

.filter-wrap {
  width:100%;
}

.hall-view .filters {
  display:flex;
  gap:8px;
  min-width:min(360px,100%);
  padding:6px;
  border:1px solid rgba(151,134,210,.13);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74);
}

.hall-view .filters button {
  flex:1 1 0;
  min-width:72px;
  min-height:42px;
  color:var(--vd02-muted);
  border:0;
  border-radius:999px;
  background:transparent;
  font-weight:800;
}

.hall-create-button {
  margin:0 0 18px;
}

.hall-view .character-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}

.hall-view .character-card {
  position:relative;
  display:flex;
  min-height:318px;
  overflow:hidden;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  padding:18px;
  color:#fff;
  border:1px solid rgba(255,255,255,.46);
  border-radius:24px;
  background:#655b82;
  box-shadow:0 22px 46px rgba(83,71,122,.24);
  transform:none;
}

.hall-view .character-card::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(21,17,35,.04) 22%,rgba(24,18,38,.58) 64%,rgba(19,15,32,.82) 100%);
}

.hall-view .portrait {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:24px;
  background:transparent;
}

.hall-view .character-portrait-image,
.hall-view .portrait-fallback,
.hall-view .custom-portrait-fallback {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:24px;
}

.hall-view .character-card > :not(.portrait) {
  position:relative;
  z-index:1;
}

.hall-view .character-heading {
  display:block;
}

.hall-view .character-heading h2 {
  margin:0;
  color:#fff;
  font-size:28px;
  line-height:1.08;
  text-shadow:0 2px 12px rgba(0,0,0,.36);
}

.hall-view .character-heading p,
.hall-view .rating-badge,
.hall-view .character-card blockquote,
.hall-view .affinity-row,
.hall-view .character-proactive-note {
  display:none !important;
}

.hall-view .tag-row {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.hall-view .tag-row span {
  max-width:100%;
  color:#fff;
  border:0;
  border-radius:999px;
  background:rgba(22,18,38,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  font-size:13px;
  font-weight:800;
}

.hall-view .card-action {
  width:100%;
  min-height:46px;
  margin-top:4px;
  border-radius:999px;
  font-size:17px;
  font-weight:900;
}

.hall-pagination,
.pagination {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}

.hall-pagination button,
.pagination button {
  min-width:38px;
  min-height:38px;
  color:var(--vd02-ink);
  border:1px solid rgba(151,134,210,.2);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--vd02-soft-shadow);
}

.workspace-heading,
.conversation-section,
.personal-feature-card,
.character-generator,
.character-editor,
.custom-character-card,
.date-prep-panel,
.story-panel,
.memory-panel {
  border:1px solid rgba(255,255,255,.72);
  border-radius:28px;
  background:rgba(255,255,255,.76);
  box-shadow:var(--vd02-shadow);
  backdrop-filter:blur(22px);
}

.workspace-heading {
  padding:20px;
  margin-bottom:18px;
}

.workspace-heading p,
.personal-feature-card p,
.personal-feature-card small {
  color:var(--vd02-muted);
}

.conversation-section {
  padding:18px;
  margin-bottom:18px;
}

.conversation-section-heading h2,
.personal-feature-card h2,
.character-generator h1,
.editor-heading h2 {
  color:var(--vd02-ink);
}

.conversation-card,
.conversation-card.compact {
  color:var(--vd02-ink);
  border:1px solid rgba(151,134,210,.18);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--vd02-soft-shadow);
}

.conversation-card .rating-badge {
  display:none !important;
}

.conversation-card time,
.conversation-card small,
.conversation-preview {
  color:var(--vd02-muted);
}

.custom-character-card {
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  align-items:center;
  gap:16px;
  min-height:unset;
  padding:16px;
  color:var(--vd02-ink);
}

.custom-character-card .portrait {
  width:96px;
  height:96px;
  overflow:hidden;
  border:0;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(241,155,237,.22),rgba(114,183,255,.2));
}

.custom-character-card .character-portrait-image,
.custom-character-card .portrait-fallback,
.custom-character-card .custom-portrait-fallback {
  width:100%;
  height:100%;
  object-fit:cover;
}

.custom-character-card .character-heading h2 {
  color:var(--vd02-ink);
}

.custom-character-card .character-heading p,
.custom-character-card blockquote {
  color:var(--vd02-muted);
}

.custom-card-actions {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.custom-card-actions button {
  min-height:40px;
  color:var(--vd02-ink);
  border:1px solid rgba(151,134,210,.18);
  border-radius:999px;
  background:rgba(255,255,255,.78);
}

.character-generator,
.character-editor {
  padding:20px;
}

input,
select,
textarea,
.backup-state-panel,
.portrait-upload-zone,
.proactive-character-settings > *,
.grain-pool-list > * {
  color:var(--vd02-ink);
  border-color:rgba(151,134,210,.2);
  border-radius:18px;
  background:rgba(255,255,255,.78);
}

input::placeholder,
textarea::placeholder {
  color:#b1aac9;
}

.mobile-nav-item img {
  display:block;
  width:34px;
  height:34px;
  object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(127,97,190,.24));
}

@media (max-width:760px) {
  :root {
    --mobile-nav-height:82px;
  }

  html.has-mobile-nav .topbar {
    display:none;
  }

  html.has-mobile-nav main {
    padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 18px);
  }

  .hall-content,
  .workspace-view {
    width:100%;
    padding:20px 16px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 22px);
  }

  .hall-view .page-heading {
    display:block;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }

  .hall-view .page-heading > div:first-child {
    display:none;
  }

  .hall-view .filters {
    min-width:0;
    width:100%;
    padding:7px;
    border-radius:26px;
    background:rgba(255,255,255,.78);
    box-shadow:0 12px 26px rgba(125,104,184,.14);
  }

  .hall-view .filters button {
    min-width:0;
    min-height:48px;
    font-size:16px;
  }

  .hall-create-button {
    width:100%;
    min-height:48px;
  }

  .hall-view .character-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .hall-view .character-card {
    min-height:248px;
    padding:13px;
    border-radius:20px;
  }

  .hall-view .portrait,
  .hall-view .character-portrait-image,
  .hall-view .portrait-fallback,
  .hall-view .custom-portrait-fallback {
    border-radius:20px;
  }

  .hall-view .character-heading h2 {
    font-size:25px;
  }

  .hall-view .tag-row {
    gap:5px;
  }

  .hall-view .tag-row span {
    padding:4px 8px;
    font-size:12px;
  }

  .hall-view .card-action {
    min-height:42px;
    font-size:15px;
  }

  .workspace-heading {
    padding:18px;
    border-radius:24px;
  }

  .workspace-heading h1 {
    font-size:26px;
  }

  .conversation-section,
  .personal-feature-card,
  .character-generator,
  .character-editor {
    padding:16px;
    border-radius:24px;
  }

  .custom-character-layout {
    grid-template-columns:1fr;
    gap:16px;
  }

  .custom-character-card {
    grid-template-columns:82px minmax(0,1fr);
    border-radius:24px;
  }

  .custom-character-card .portrait {
    width:82px;
    height:82px;
    border-radius:20px;
  }

  .custom-card-actions {
    grid-template-columns:1fr 1fr 1fr;
  }

  .mobile-nav {
    position:fixed;
    z-index:50;
    left:16px;
    right:16px;
    bottom:max(12px,env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    min-height:var(--mobile-nav-height);
    padding:10px 8px;
    border:1px solid rgba(255,255,255,.78);
    border-radius:28px;
    background:rgba(255,255,255,.82);
    box-shadow:0 16px 36px rgba(112,91,168,.22);
    backdrop-filter:blur(24px);
  }

  .mobile-nav.hidden {
    display:none !important;
  }

  .mobile-nav-item {
    min-width:0;
    min-height:60px;
    gap:3px;
    color:#77709b;
    border:0;
    border-radius:20px;
    background:transparent;
    font-size:13px;
    font-weight:900;
  }

  .mobile-nav-item img {
    width:31px;
    height:31px;
  }

  .mobile-nav-item.active {
    color:#9c63ff;
    background:linear-gradient(180deg,rgba(184,117,255,.12),rgba(114,183,255,.08));
  }
}

@media (max-width:390px) {
  .hall-content,
  .workspace-view {
    padding-left:12px;
    padding-right:12px;
  }

  .hall-view .character-grid {
    gap:10px;
  }

  .hall-view .character-card {
    min-height:234px;
    padding:11px;
  }

  .hall-view .character-heading h2 {
    font-size:22px;
  }

  .mobile-nav {
    left:10px;
    right:10px;
    padding:9px 6px;
  }
}

@media (min-width:761px) {
  .mobile-nav {
    display:none !important;
  }
}

/* Task 68: personal center entry-grid layout inspired by reference image */
#personalCenterView.workspace-view {
  width:min(980px,100%);
}

.personal-overview {
  display:grid;
  gap:18px;
}

.personal-profile-card,
.personal-stat-strip,
.personal-reminder-card,
.personal-entry-grid,
.personal-detail-heading {
  border:1px solid rgba(255,255,255,.76);
  border-radius:28px;
  background:rgba(255,255,255,.74);
  box-shadow:0 18px 42px rgba(112,91,168,.16);
  backdrop-filter:blur(24px);
}

.personal-profile-card {
  position:relative;
  display:grid;
  grid-template-columns:118px minmax(0,1fr) auto;
  align-items:center;
  min-height:210px;
  overflow:hidden;
  gap:22px;
  padding:26px;
}

.personal-profile-card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 28%, rgba(184,117,255,.22), transparent 28%),
    radial-gradient(circle at 72% 74%, rgba(114,183,255,.18), transparent 24%),
    linear-gradient(135deg,rgba(255,255,255,.44),rgba(244,235,255,.44));
}

.personal-avatar,
.personal-profile-copy,
.personal-edit-button,
.personal-orbit-icon {
  position:relative;
  z-index:1;
}

.personal-avatar {
  width:118px;
  height:118px;
  object-fit:cover;
  border:4px solid rgba(255,255,255,.86);
  border-radius:34px;
  box-shadow:0 14px 32px rgba(120,92,184,.18);
}

.personal-profile-copy h1 {
  margin:4px 0 8px;
  color:var(--vd02-ink);
  font-size:30px;
  line-height:1.18;
}

.personal-profile-copy p {
  margin:0;
  color:var(--vd02-muted);
  font-weight:700;
  line-height:1.55;
}

.personal-edit-button {
  align-self:start;
  min-height:40px;
  padding:0 16px;
  color:var(--vd02-ink);
  border:1px solid rgba(151,134,210,.2);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--vd02-soft-shadow);
  font-weight:800;
}

.personal-orbit-icon {
  position:absolute;
  right:34px;
  bottom:22px;
  width:78px;
  height:78px;
  object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(151,113,220,.24));
}

.personal-stat-strip {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
}

.personal-stat-strip div {
  min-width:0;
  padding:20px 16px;
  text-align:center;
}

.personal-stat-strip div + div {
  border-left:1px solid rgba(151,134,210,.14);
}

.personal-stat-strip span,
.personal-stat-strip small {
  display:block;
  color:var(--vd02-muted);
  font-weight:700;
}

.personal-stat-strip strong {
  display:block;
  margin:8px 0 4px;
  color:var(--vd02-ink);
  font-size:34px;
  line-height:1;
}

.personal-reminder-card {
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  width:100%;
  padding:18px 22px;
  color:var(--vd02-ink);
  text-align:left;
}

.personal-reminder-card strong,
.personal-entry-grid strong {
  display:block;
  color:var(--vd02-ink);
  font-size:18px;
  line-height:1.25;
}

.personal-reminder-card small,
.personal-entry-grid small {
  display:block;
  margin-top:5px;
  color:var(--vd02-muted);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}

.personal-entry-arrow {
  color:#9087b8;
  font-size:34px;
  line-height:1;
}

.personal-entry-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
}

.personal-entry-grid button {
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:112px;
  min-width:0;
  padding:18px;
  color:var(--vd02-ink);
  text-align:left;
  border:0;
  border-radius:0;
  background:transparent;
}

.personal-entry-grid button:nth-child(3n+2),
.personal-entry-grid button:nth-child(3n+3) {
  border-left:1px solid rgba(151,134,210,.14);
}

.personal-entry-grid button:nth-child(n+4) {
  border-top:1px solid rgba(151,134,210,.14);
}

.personal-entry-grid button:hover,
.personal-reminder-card:hover,
.personal-edit-button:hover {
  background:rgba(255,255,255,.88);
}

.personal-entry-icon {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:18px;
  background:rgba(255,255,255,.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 18px rgba(127,97,190,.14);
  overflow:hidden;
}

.personal-entry-icon img {
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:18px;
  filter:drop-shadow(0 5px 8px rgba(127,97,190,.12));
}

.personal-detail-view {
  display:grid;
  gap:18px;
}

.personal-detail-heading {
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
}

.personal-detail-heading h1 {
  margin:4px 0 0;
  color:var(--vd02-ink);
  font-size:28px;
  line-height:1.18;
}

#personalDetailView .personal-feature-grid {
  display:block;
}

#personalDetailView .personal-feature-card {
  min-height:auto;
  margin:0;
}

#personalDetailView .personal-feature-card.hidden {
  display:none !important;
}

@media (max-width:760px) {
  #personalCenterView.workspace-view {
    padding-top:16px;
  }

  .personal-overview {
    gap:14px;
  }

  .personal-profile-card {
    grid-template-columns:88px minmax(0,1fr);
    min-height:172px;
    gap:16px;
    padding:20px;
    border-radius:24px;
  }

  .personal-avatar {
    width:88px;
    height:88px;
    border-radius:28px;
  }

  .personal-profile-copy h1 {
    font-size:25px;
  }

  .personal-profile-copy p {
    font-size:14px;
  }

  .personal-edit-button {
    position:absolute;
    top:18px;
    right:18px;
    min-height:34px;
    padding:0 12px;
    font-size:13px;
  }

  .personal-orbit-icon {
    right:18px;
    bottom:16px;
    width:58px;
    height:58px;
    opacity:.82;
  }

  .personal-stat-strip {
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-radius:24px;
  }

  .personal-stat-strip div {
    padding:15px 8px;
  }

  .personal-stat-strip span,
  .personal-stat-strip small {
    font-size:11px;
  }

  .personal-stat-strip strong {
    font-size:26px;
  }

  .personal-reminder-card {
    grid-template-columns:50px minmax(0,1fr) auto;
    gap:12px;
    padding:15px;
    border-radius:22px;
  }

  .personal-entry-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-radius:24px;
  }

  .personal-entry-grid button {
    grid-template-columns:1fr;
    justify-items:center;
    align-content:center;
    gap:8px;
    min-height:112px;
    padding:12px 8px;
    text-align:center;
  }

  .personal-entry-icon {
    width:48px;
    height:48px;
    border-radius:17px;
  }

  .personal-entry-icon img {
    width:48px;
    height:48px;
    border-radius:17px;
  }

  .personal-entry-grid strong {
    font-size:15px;
  }

  .personal-entry-grid small {
    font-size:11px;
  }

  .personal-detail-heading {
    align-items:flex-start;
    flex-direction:column;
    padding:16px;
    border-radius:24px;
  }
}

@media (max-width:390px) {
  .personal-profile-card {
    grid-template-columns:76px minmax(0,1fr);
    padding:16px;
  }

  .personal-avatar {
    width:76px;
    height:76px;
    border-radius:24px;
  }

  .personal-profile-copy h1 {
    font-size:22px;
  }

  .personal-orbit-icon {
    display:none;
  }

  .personal-entry-grid button {
    min-height:104px;
    padding:10px 6px;
  }

  .personal-entry-grid strong {
    font-size:14px;
  }
}

/* Task 69: 440px login and registration entry UX refinement */
html.is-auth-screen .topbar {
  display:none;
}

html.is-auth-screen main {
  padding-top:14px;
}

#loginView.auth-view {
  width:min(920px,100%);
  min-height:auto;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(330px,1fr);
  align-items:start;
  gap:16px;
  margin:0 auto;
  padding:14px;
  border-radius:28px;
}

#loginView .auth-visual {
  min-height:unset;
  display:grid;
  align-content:end;
  gap:14px;
  padding:22px;
  color:var(--vd02-ink);
  border-radius:24px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.9),rgba(255,239,247,.78)),
    url("./assets/vd02/chibi-twintail-wallpaper.webp") center / 260px auto;
}

#loginView .auth-visual::before,
#loginView .auth-visual::after,
#loginView .petal {
  display:none;
  content:none;
}

#loginView .auth-logo-mark {
  width:68px;
  height:68px;
  object-fit:cover;
  border:3px solid rgba(255,255,255,.88);
  border-radius:22px;
  box-shadow:0 14px 28px rgba(132,112,190,.16);
}

.auth-hero-copy {
  display:grid;
  gap:6px;
}

#loginView .auth-visual h1 {
  max-width:360px;
  margin:0;
  color:var(--vd02-ink);
  font-size:34px;
  line-height:1.12;
  text-shadow:none;
}

#loginView .auth-visual p {
  max-width:340px;
  color:var(--vd02-muted);
  font-weight:700;
  line-height:1.55;
  text-shadow:none;
}

#loginView .dialogue-preview {
  width:100%;
  margin:0;
  gap:4px;
  padding:14px 16px;
  color:var(--vd02-ink);
  border:1px solid rgba(151,134,210,.16);
  border-radius:18px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--vd02-soft-shadow);
}

#loginView .dialogue-preview strong {
  color:#7f5bd4;
}

#loginView .dialogue-preview span {
  color:var(--vd02-ink);
  font-weight:700;
}

#loginView .auth-panel {
  gap:12px;
  padding:20px;
  border-radius:24px;
}

.auth-panel-heading {
  display:grid;
  gap:5px;
}

.auth-panel-heading h2 {
  color:var(--vd02-ink);
  font-size:24px;
  line-height:1.2;
}

.auth-panel-heading p {
  color:var(--vd02-muted);
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}

#loginView .auth-tabs {
  gap:6px;
  padding:6px;
  border-radius:20px;
  background:rgba(255,255,255,.6);
}

#loginView .auth-tabs button {
  min-height:42px;
  border-radius:16px;
  font-weight:900;
}

#loginView label.auth-field,
.auth-dialog label.auth-field {
  gap:7px;
  color:var(--vd02-ink);
  font-size:14px;
  font-weight:800;
}

#loginView .auth-panel input,
.auth-dialog input {
  min-height:48px;
  color:var(--vd02-ink);
  border:1px solid rgba(151,134,210,.18);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84);
}

#loginView .auth-panel input::placeholder,
.auth-dialog input::placeholder {
  color:#b5adc9;
}

.field-error {
  min-height:17px;
  color:#b6406a;
  font-size:12px;
  font-weight:800;
  line-height:1.35;
}

.field-invalid {
  border-color:rgba(198,50,92,.5) !important;
  box-shadow:0 0 0 3px rgba(198,50,92,.12) !important;
}

#loginView .verification-code-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.register-note {
  display:grid;
  gap:4px;
  padding:12px 14px;
  color:var(--vd02-ink);
  border:1px solid rgba(151,134,210,.16);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(246,239,255,.66));
}

.register-note strong {
  font-size:14px;
}

.register-note p {
  color:var(--vd02-muted);
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}

#loginView .consent-stack {
  gap:8px;
  padding:12px;
  border:1px solid rgba(151,134,210,.16);
  border-radius:18px;
  background:rgba(255,255,255,.64);
}

#loginView .confirm-check {
  gap:9px;
  min-height:42px;
  padding:8px 0;
  color:var(--vd02-ink);
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}

#loginView .confirm-check input {
  width:18px;
  min-width:18px;
  min-height:18px;
  margin-top:1px;
}

#loginView .auth-links {
  display:flex;
  justify-content:space-between;
  gap:8px;
}

#loginView .auth-links .hidden {
  display:none !important;
}

#loginView .text-button {
  min-height:34px;
  padding:0 12px;
  color:#786d9e;
  border:1px solid rgba(151,134,210,.14);
  background:rgba(255,255,255,.62);
  box-shadow:none;
  font-weight:800;
}

#loginView .status,
.auth-dialog .status {
  min-height:auto;
  padding:10px 12px;
  color:#655c84;
  border:1px solid rgba(151,134,210,.14);
  border-radius:16px;
  background:rgba(255,255,255,.62);
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}

#loginView .status[data-status="error"],
.auth-dialog .status[data-status="error"] {
  color:#963654;
  border-color:rgba(198,50,92,.2);
  background:rgba(255,232,238,.86);
}

#loginView .status[data-status="success"],
.auth-dialog .status[data-status="success"] {
  color:#36756d;
  border-color:rgba(74,159,145,.22);
  background:rgba(231,250,247,.9);
}

#loginView .primary-button {
  min-height:52px;
  font-size:16px;
}

#loginView[data-auth-mode="register"] .dialogue-preview {
  display:none;
}

#loginView[data-auth-mode="register"] .auth-visual {
  align-content:center;
}

.auth-dialog::backdrop {
  background:rgba(45,34,54,.48);
  backdrop-filter:blur(10px);
}

.auth-dialog form {
  position:relative;
  width:min(390px,calc(100vw - 32px));
  display:grid;
  gap:14px;
  padding:24px;
  border-radius:24px;
}

.dialog-close-button {
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  min-height:36px;
  color:#786d9e;
  border:1px solid rgba(151,134,210,.14);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:none;
  font-size:20px;
  line-height:1;
}

.auth-dialog h2 {
  padding-right:36px;
}

.dialog-lead {
  color:var(--vd02-muted);
  font-size:14px;
  font-weight:700;
  line-height:1.55;
}

@media (max-width:760px) {
  html.is-auth-screen main {
    padding:12px 8px 22px;
  }

  #loginView.auth-view {
    grid-template-columns:1fr;
    gap:12px;
    padding:10px;
    border-radius:22px;
  }

  #loginView .auth-visual {
    min-height:168px;
    grid-template-columns:68px minmax(0,1fr);
    align-items:center;
    align-content:center;
    padding:18px;
  }

  #loginView .auth-logo-mark {
    grid-row:1 / span 2;
  }

  #loginView .auth-visual h1 {
    font-size:29px;
  }

  #loginView .auth-visual p {
    font-size:13px;
  }

  #loginView .dialogue-preview {
    grid-column:1 / -1;
  }

  #loginView[data-auth-mode="register"] .auth-visual {
    min-height:118px;
  }

  #loginView .auth-panel {
    padding:18px;
    border-radius:22px;
  }
}

@media (max-width:480px) {
  #loginView .auth-visual {
    min-height:154px;
    gap:10px 12px;
    padding:16px;
    border-radius:18px;
  }

  #loginView .auth-logo-mark {
    width:58px;
    height:58px;
    border-radius:18px;
  }

  #loginView .auth-visual h1 {
    font-size:26px;
  }

  #loginView .auth-panel {
    gap:10px;
    padding:16px;
  }

  #loginView .auth-panel-heading h2 {
    font-size:22px;
  }

  #loginView .auth-tabs button,
  #loginView .auth-panel input,
  .auth-dialog input {
    min-height:46px;
  }

  #loginView .primary-button {
    min-height:50px;
  }
}

/* Task 70: softer mobile auth rhythm and rounded Chinese type */
#loginView,
.auth-dialog {
  --auth-font:"YouYuan","Microsoft YaHei UI","PingFang SC","Hiragino Sans GB","Noto Sans SC",Arial,sans-serif;
  --auth-ink:#51456f;
  --auth-soft:#82789b;
  --auth-line:rgba(168,140,214,.18);
  --auth-fill:rgba(255,255,255,.82);
  --auth-fill-strong:rgba(255,255,255,.94);
  --auth-shadow:0 18px 48px rgba(126,104,177,.14);
  font-family:var(--auth-font);
}

html.is-auth-screen body {
  background:
    linear-gradient(180deg,#fffafd 0%,#f7f5ff 46%,#eff8ff 100%);
}

#loginView.auth-view {
  border:1px solid rgba(255,255,255,.76);
  background:linear-gradient(180deg,rgba(255,255,255,.64),rgba(255,247,253,.78));
  box-shadow:0 24px 72px rgba(151,126,201,.14);
}

#loginView .section-label {
  color:#9c75d7;
  text-transform:none;
  letter-spacing:.02em;
  font-family:var(--auth-font);
  font-weight:900;
}

#loginView .auth-visual {
  border:1px solid rgba(255,255,255,.72);
  background:
    linear-gradient(115deg,rgba(255,255,255,.92),rgba(255,238,248,.76)),
    url("./assets/vd02/chibi-twintail-wallpaper.webp") center / 230px auto;
  box-shadow:var(--auth-shadow);
}

#loginView .auth-logo-mark {
  border-radius:20px;
  transform:rotate(-3deg);
}

#loginView .auth-visual h1,
#loginView .auth-panel-heading h2 {
  color:var(--auth-ink);
  font-family:var(--auth-font);
  font-weight:900;
  letter-spacing:0;
}

#loginView .auth-visual p,
#loginView .auth-panel-heading p {
  color:var(--auth-soft);
}

#loginView .dialogue-preview {
  border-color:rgba(255,255,255,.84);
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,246,252,.82));
}

#loginView .dialogue-preview strong {
  color:#8f68d6;
}

#loginView .dialogue-preview span {
  color:#5f5479;
}

#loginView .auth-panel {
  border:1px solid rgba(255,255,255,.78);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,248,253,.9));
  box-shadow:var(--auth-shadow);
}

#loginView .auth-panel-heading .section-label {
  width:max-content;
  padding:3px 9px;
  border:1px solid rgba(170,132,226,.18);
  border-radius:999px;
  background:rgba(249,240,255,.72);
  font-size:12px;
}

#loginView .auth-tabs {
  border:1px solid rgba(255,255,255,.78);
  background:linear-gradient(135deg,rgba(255,241,249,.92),rgba(243,246,255,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

#loginView .auth-tabs button {
  color:#8a7b9f;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

#loginView .auth-tabs button.active {
  color:#5b457b;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 24px rgba(151,126,201,.14);
}

#loginView .auth-tabs button:active,
#loginView .primary-button:active,
#loginView .secondary-button:active,
#loginView .text-button:active {
  transform:translateY(1px) scale(.99);
}

#loginView label.auth-field,
.auth-dialog label.auth-field {
  color:var(--auth-ink);
}

#loginView .auth-panel input,
.auth-dialog input {
  color:var(--auth-ink);
  border-color:var(--auth-line);
  background:var(--auth-fill-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 8px 18px rgba(130,112,168,.06);
}

#loginView .auth-panel input:focus,
.auth-dialog input:focus {
  border-color:rgba(175,119,220,.42);
  box-shadow:0 0 0 4px rgba(206,155,241,.16),0 10px 22px rgba(130,112,168,.08);
}

#loginView .secondary-button {
  min-height:46px;
  color:#6d5a8c;
  border:1px solid rgba(168,140,214,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,241,255,.86));
  box-shadow:0 8px 18px rgba(130,112,168,.08);
  font-weight:900;
}

#loginView .register-note {
  border-color:rgba(181,148,222,.18);
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(248,239,255,.82));
}

#loginView .consent-stack {
  background:rgba(255,255,255,.7);
}

#loginView .confirm-check {
  border:1px solid transparent;
  border-radius:16px;
}

#loginView .confirm-check:has(input:checked) {
  border-color:rgba(175,119,220,.22);
  background:rgba(249,241,255,.82);
}

#loginView .text-button {
  color:#7e669e;
  border-color:rgba(168,140,214,.14);
  background:rgba(255,255,255,.72);
}

#loginView .status,
.auth-dialog .status {
  color:#6e6387;
  border-color:rgba(168,140,214,.14);
  background:rgba(255,255,255,.76);
}

#loginView .primary-button {
  color:#fff;
  border:1px solid rgba(255,255,255,.62);
  background:linear-gradient(135deg,#d981ff 0%,#9b83ff 48%,#69b8ff 100%);
  box-shadow:0 16px 30px rgba(151,126,201,.24);
  font-family:var(--auth-font);
  font-weight:900;
}

@media (max-width:760px) {
  html.is-auth-screen main {
    padding:10px 8px 18px;
  }

  #loginView.auth-view {
    width:min(100%,440px);
    gap:10px;
    padding:9px;
    border-radius:30px;
  }

  #loginView .auth-visual {
    min-height:132px;
    grid-template-columns:58px minmax(0,1fr);
    gap:8px 12px;
    padding:15px 16px;
    border-radius:26px;
    background-size:205px auto;
  }

  #loginView .auth-logo-mark {
    width:54px;
    height:54px;
    border-radius:18px;
  }

  #loginView .auth-hero-copy {
    min-width:0;
    gap:3px;
  }

  #loginView .auth-visual .section-label {
    font-size:11px;
  }

  #loginView .auth-visual h1 {
    max-width:100%;
    font-size:23px;
    line-height:1.18;
  }

  #loginView .auth-visual p {
    max-width:100%;
    font-size:12px;
    line-height:1.45;
  }

  #loginView .dialogue-preview {
    gap:2px;
    padding:10px 12px;
    border-radius:18px;
  }

  #loginView .dialogue-preview span {
    font-size:13px;
    line-height:1.4;
  }

  #loginView[data-auth-mode="register"] .auth-visual {
    min-height:74px;
    grid-template-columns:44px minmax(0,1fr);
    padding:10px 12px;
  }

  #loginView[data-auth-mode="register"] .auth-visual p {
    display:none;
  }

  #loginView[data-auth-mode="register"] .auth-logo-mark {
    width:42px;
    height:42px;
    border-radius:14px;
  }

  #loginView[data-auth-mode="register"] .auth-visual .section-label {
    font-size:10px;
  }

  #loginView[data-auth-mode="register"] .auth-visual h1 {
    font-size:18px;
    line-height:1.12;
  }

  #loginView .auth-panel {
    gap:9px;
    padding:15px;
    border-radius:28px;
  }

  #loginView[data-auth-mode="register"] .auth-panel {
    gap:7px;
    padding:12px;
  }

  #loginView .auth-panel-heading {
    gap:4px;
  }

  #loginView .auth-panel-heading h2 {
    font-size:22px;
    line-height:1.18;
  }

  #loginView[data-auth-mode="register"] .auth-panel-heading h2 {
    font-size:20px;
  }

  #loginView .auth-panel-heading p {
    font-size:12.5px;
    line-height:1.45;
  }

  #loginView[data-auth-mode="register"] .auth-panel-heading p {
    font-size:11.5px;
  }

  #loginView .auth-tabs {
    padding:5px;
    border-radius:19px;
  }

  #loginView .auth-tabs button {
    min-height:40px;
    border-radius:15px;
  }

  #loginView[data-auth-mode="register"] .auth-tabs button {
    min-height:38px;
  }

  #loginView label.auth-field {
    gap:5px;
    font-size:13px;
  }

  #loginView[data-auth-mode="register"] label.auth-field {
    gap:4px;
    font-size:12.5px;
  }

  #loginView .auth-panel input {
    min-height:44px;
    padding:0 13px;
    border-radius:16px;
    font-size:14px;
  }

  #loginView[data-auth-mode="register"] .auth-panel input {
    min-height:40px;
    font-size:13px;
  }

  #loginView[data-auth-mode="register"] .secondary-button {
    min-height:40px;
  }

  #loginView .verification-code-row {
    grid-template-columns:minmax(0,1fr) 68px;
    gap:7px;
  }

  #loginView .verification-code-row button {
    min-width:68px;
    padding:0 8px;
    border-radius:16px;
    white-space:nowrap;
  }

  #loginView .register-note {
    gap:3px;
    padding:10px 12px;
    border-radius:17px;
  }

  #loginView[data-auth-mode="register"] .register-note {
    padding:8px 10px;
  }

  #loginView .register-note p {
    font-size:11.5px;
  }

  #loginView[data-auth-mode="register"] .register-note p {
    font-size:10.8px;
    line-height:1.38;
  }

  #loginView .consent-stack {
    gap:6px;
    padding:9px;
    border-radius:18px;
  }

  #loginView[data-auth-mode="register"] .consent-stack {
    gap:5px;
    padding:7px;
  }

  #loginView .confirm-check {
    min-height:auto;
    gap:8px;
    padding:8px 9px;
    font-size:11.5px;
    line-height:1.42;
  }

  #loginView[data-auth-mode="register"] .confirm-check {
    padding:7px 8px;
    font-size:10.8px;
    line-height:1.36;
  }

  #loginView[data-auth-mode="register"] #authStatus {
    display:none;
  }

  #loginView[data-auth-mode="register"] #authSubmit {
    order:20;
  }

  #loginView[data-auth-mode="register"] .auth-links {
    order:21;
    justify-content:center;
  }

  #loginView .confirm-check input {
    width:17px;
    min-width:17px;
    min-height:17px;
  }

  #loginView .auth-links {
    align-items:center;
    flex-direction:row;
    justify-content:center;
    gap:8px;
  }

  #loginView .text-button {
    min-height:32px;
    padding:0 10px;
    border-radius:999px;
    font-size:12.5px;
  }

  #loginView .status {
    padding:9px 11px;
    border-radius:16px;
    font-size:12.5px;
  }

  #loginView .primary-button {
    min-height:48px;
    border-radius:18px;
    font-size:15px;
  }
}

@media (max-width:440px) {
  #loginView.auth-view {
    padding:8px;
    border-radius:28px;
  }

  #loginView .auth-visual {
    min-height:122px;
    padding:13px 14px;
  }

  #loginView .auth-logo-mark {
    width:50px;
    height:50px;
  }

  #loginView .auth-visual h1 {
    font-size:21px;
  }

  #loginView .auth-panel {
    padding:14px;
  }

  #loginView .auth-panel-heading h2 {
    font-size:21px;
  }

  #loginView .auth-panel input {
    min-height:43px;
  }
}

/* Task 71: global mobile-first visual polish across product pages */
:root {
  --ih-cute-font:"YouYuan","Microsoft YaHei UI","PingFang SC","Hiragino Sans GB","Noto Sans SC",Arial,sans-serif;
  --ih-cute-ink:#4f4569;
  --ih-cute-text:#625979;
  --ih-cute-muted:#9187aa;
  --ih-cute-line:rgba(167,143,210,.18);
  --ih-cute-line-strong:rgba(167,143,210,.28);
  --ih-cute-card:rgba(255,255,255,.86);
  --ih-cute-card-strong:rgba(255,255,255,.95);
  --ih-cute-glass:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,248,253,.82));
  --ih-cute-page:linear-gradient(180deg,#fffafd 0%,#f7f5ff 46%,#edf8ff 100%);
  --ih-cute-primary:linear-gradient(135deg,#d981ff 0%,#9b83ff 48%,#69b8ff 100%);
  --ih-cute-shadow:0 18px 46px rgba(126,104,177,.13);
  --ih-cute-shadow-soft:0 10px 28px rgba(126,104,177,.09);
  --ih-cute-radius:24px;
  --ih-cute-radius-sm:17px;
}

body {
  color:var(--ih-cute-text);
  font-family:var(--ih-cute-font);
  background:
    radial-gradient(circle at 18% 4%,rgba(255,220,240,.68),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(218,238,255,.7),transparent 24%),
    var(--ih-cute-page);
}

.view.themed-view:not(#loginView),
.topbar,
.mobile-nav,
.themed-dialog {
  font-family:var(--ih-cute-font);
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.18)),
    url("./assets/vd02/chibi-twintail-wallpaper.webp") center top / 280px auto repeat;
  opacity:.18;
}

h1,
h2,
h3,
.chat-name,
.story-title,
.date-identity strong {
  color:var(--ih-cute-ink);
  letter-spacing:0;
}

p,
small,
.inline-status,
.status {
  color:var(--ih-cute-muted);
}

.section-label {
  color:#9c75d7;
  letter-spacing:.02em;
  text-transform:none;
  font-family:var(--ih-cute-font);
  font-weight:900;
}

.topbar {
  height:58px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:0 0 24px 24px;
  background:rgba(255,255,255,.78);
  box-shadow:0 12px 30px rgba(126,104,177,.1);
  backdrop-filter:blur(20px);
}

.brand-logo {
  border-radius:14px;
  box-shadow:0 8px 18px rgba(126,104,177,.12);
}

.nav {
  align-items:center;
}

.nav button,
.back-button,
.secondary-button,
.text-button,
.clear-chat-button,
.story-exit-button,
.story-help-button,
.date-back-button,
.date-exit-button,
.date-end-button,
.story-ending-actions button,
.date-summary-actions button,
.message-context-actions button,
.custom-card-actions button {
  color:#74658f;
  border:1px solid rgba(167,143,210,.16);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:none;
  font-family:var(--ih-cute-font);
  font-weight:800;
}

.nav button:hover,
.back-button:hover,
.secondary-button:hover,
.text-button:hover,
.custom-card-actions button:hover {
  color:#62478d;
  background:rgba(255,255,255,.92);
}

.primary-button,
.card-action,
.send-button,
.story-send-button,
.date-send-button,
.conversation-empty button,
.story-entry-card button,
.personal-feature-card .compact-action {
  color:#fff;
  border:1px solid rgba(255,255,255,.62);
  border-radius:18px;
  background:var(--ih-cute-primary);
  box-shadow:0 14px 28px rgba(151,126,201,.22);
  font-family:var(--ih-cute-font);
  font-weight:900;
}

.primary-button:active,
.card-action:active,
.send-button:active,
.story-send-button:active,
.date-send-button:active,
.secondary-button:active,
.back-button:active,
.mobile-nav-item:active {
  transform:translateY(1px) scale(.99);
}

input,
textarea,
select {
  color:var(--ih-cute-ink);
  border-color:var(--ih-cute-line);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 8px 20px rgba(126,104,177,.05);
}

input::placeholder,
textarea::placeholder {
  color:#b7aec9;
}

input:focus,
textarea:focus,
select:focus {
  border-color:rgba(175,119,220,.42);
  box-shadow:0 0 0 4px rgba(206,155,241,.16),0 10px 22px rgba(130,112,168,.08);
}

.workspace-view,
.hall-content,
.detail-copy,
.chat-shell,
.memory-panel,
.conversation-section,
.personal-profile-card,
.personal-stat-strip,
.personal-reminder-card,
.personal-entry-grid,
.personal-detail-heading,
.personal-feature-card,
.character-generator,
.character-editor,
.custom-character-card,
.privacy-card,
.recharge-qr-card,
.recharge-submit-card,
.promote-copy-tool,
.story-entry-card,
.story-shell,
.story-cg-card,
.story-ending-card,
.date-shell,
.date-summary-card,
.rating-dialog {
  border-color:rgba(255,255,255,.72);
  border-radius:var(--ih-cute-radius);
  background:var(--ih-cute-glass);
  box-shadow:var(--ih-cute-shadow);
  backdrop-filter:blur(18px);
}

.workspace-heading,
.hall-view .page-heading,
.conversation-section-heading,
.feature-card-heading,
.editor-heading,
.recharge-heading {
  color:var(--ih-cute-ink);
}

.workspace-heading h1,
.hall-view h1,
.conversation-section-heading h2,
.personal-profile-copy h1,
.personal-feature-card h2,
.character-generator h1,
.detail-copy h1 {
  color:var(--ih-cute-ink);
  line-height:1.18;
}

.workspace-heading p,
.hall-view .page-heading p,
.conversation-section-heading p,
.personal-profile-copy p,
.personal-feature-card p,
.character-generator p,
.detail-copy p {
  color:var(--ih-cute-muted);
}

.hall-view {
  background:transparent;
}

.hall-wallpaper,
.hall-ribbon,
.hall-view::before,
.hall-view::after,
.hall-view .page-heading::before,
.hall-view .page-heading::after {
  opacity:.42;
}

.hall-content {
  border:0;
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,249,253,.32));
  box-shadow:none;
}

.hall-view .filters,
.hall-pagination {
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--ih-cute-shadow-soft);
}

.hall-view .filters button,
.hall-pagination button {
  color:#796891;
  border-radius:999px;
}

.hall-view .filters button.active,
.hall-pagination button:not(:disabled):hover {
  color:#fff;
  background:var(--ih-cute-primary);
  box-shadow:0 10px 20px rgba(151,126,201,.18);
}

.hall-view .character-card,
.custom-character-card,
.conversation-card,
.conversation-list-item,
.proactive-inbox-item {
  border:1px solid rgba(255,255,255,.76);
  border-radius:22px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--ih-cute-shadow-soft);
}

.hall-view .character-card:hover,
.custom-character-card:hover,
.conversation-card:hover,
.proactive-inbox-item:hover {
  transform:translateY(-2px);
  border-color:rgba(198,164,238,.38);
  box-shadow:0 16px 34px rgba(126,104,177,.14);
}

.hall-view .portrait,
.custom-character-card .portrait,
.conversation-avatar,
.detail-portrait,
.personal-avatar,
.date-scenario-card {
  border-color:rgba(255,255,255,.72);
  border-radius:20px;
  background:rgba(255,255,255,.66);
  box-shadow:var(--ih-cute-shadow-soft);
}

.hall-view .character-heading h2,
.custom-character-card .character-heading h2,
.conversation-title-row strong,
.personal-entry-grid strong,
.personal-reminder-card strong {
  color:var(--ih-cute-ink);
}

.hall-view .character-heading p,
.hall-view .character-card blockquote,
.custom-character-card .character-heading p,
.custom-character-card blockquote,
.conversation-summary,
.conversation-occupation,
.conversation-card time,
.personal-entry-grid small,
.personal-reminder-card small {
  color:var(--ih-cute-muted);
}

.hall-view .tag-row span,
.rating-badge,
.privacy-pill,
.detail-tag,
.character-pill,
.date-scene-tags span,
.story-choice-action {
  color:#7c6a94;
  border-color:rgba(167,143,210,.16);
  border-radius:999px;
  background:rgba(255,255,255,.64);
}

#conversationsView .conversation-grid,
#conversationsView .conversation-list,
.proactive-inbox-list {
  gap:12px;
}

.conversation-section {
  padding:20px;
}

.conversation-card {
  min-height:110px;
}

.detail-layout {
  align-items:start;
}

.detail-copy blockquote {
  color:#6a5b7e;
  border-left-color:#c599ef;
  background:rgba(255,255,255,.5);
  border-radius:0 18px 18px 0;
}

#chatView.themed-view,
.story-view,
.date-view {
  background:transparent;
}

#chatView {
  --chat-character-bg-image:none;
  position:relative;
  isolation:isolate;
}

#chatView.has-character-bg::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,249,252,.74),rgba(249,247,255,.84)),
    var(--chat-character-bg-image) center top / cover no-repeat;
}

#chatView.has-character-bg > * {
  position:relative;
  z-index:1;
}

#chatView.has-character-bg .chat-shell {
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
}

.chat-shell,
.story-shell,
.date-shell {
  overflow:hidden;
}

.chat-header,
.story-header,
.date-header {
  border-bottom:1px solid rgba(167,143,210,.14);
  background:rgba(255,255,255,.72);
}

.chat-identity strong,
.story-identity strong,
.date-identity strong {
  color:var(--ih-cute-ink);
}

.chat-identity small,
.story-identity small,
.date-identity small,
#chatMeta,
.chat-relationship {
  color:var(--ih-cute-muted);
}

.messages,
.story-messages,
.date-messages {
  background:
    radial-gradient(circle at 20% 0%,rgba(255,220,240,.34),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(249,247,255,.66));
}

#chatView.has-character-bg .messages {
  background:
    linear-gradient(180deg,rgba(255,252,254,.70),rgba(249,247,255,.82)),
    var(--chat-character-bg-image) center top / cover no-repeat;
}

.message.assistant,
.story-message.assistant,
.date-message-assistant .date-message-bubble {
  color:#574b70;
  border:1px solid rgba(255,255,255,.76);
  border-radius:20px 20px 20px 8px;
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 24px rgba(126,104,177,.08);
}

.message.user,
.story-message.user,
.date-message-user .date-message-bubble {
  color:#fff;
  border-radius:20px 20px 8px 20px;
  background:linear-gradient(135deg,#c985ff,#8ea1ff);
  box-shadow:0 10px 24px rgba(151,126,201,.14);
}

.chat-form,
.story-form,
.date-form {
  border-top:1px solid rgba(167,143,210,.14);
  background:rgba(255,255,255,.76);
}

#chatInput,
#storyInput,
#dateInput {
  border-radius:18px;
  background:rgba(255,255,255,.94);
}

.chat-more-button,
.date-entry-button,
.story-choice-button,
.date-action-button,
.date-scenario-card {
  color:var(--ih-cute-ink);
  border-color:rgba(167,143,210,.16);
  border-radius:18px;
  background:rgba(255,255,255,.76);
  box-shadow:var(--ih-cute-shadow-soft);
}

.date-entry-button:disabled,
.date-entry-button[aria-disabled="true"] {
  cursor:not-allowed;
  opacity:1;
  color:#8a718a;
  border-style:dashed;
  background:rgba(255,255,255,.66);
}

.date-entry-button:disabled small,
.date-entry-button[aria-disabled="true"] small {
  color:#a08298;
}

.story-choice-button:hover,
.story-choice-button:focus-visible,
.date-action-button:hover,
.date-action-button:focus-visible,
.date-scenario-card:hover {
  border-color:rgba(198,164,238,.38);
  background:rgba(255,255,255,.95);
}

.personal-profile-card,
.personal-reminder-card {
  overflow:hidden;
}

.personal-stat-strip div,
.personal-entry-grid button,
.backup-state-panel,
.grain-pool-list div,
.recharge-package-card,
.recharge-upload-zone,
.promote-topic-list button {
  border-color:rgba(167,143,210,.14);
  border-radius:18px;
  background:rgba(255,255,255,.66);
}

.personal-entry-icon {
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(242,234,255,.72));
  box-shadow:0 10px 22px rgba(126,104,177,.1);
}

.switch-control span {
  background:rgba(255,255,255,.7);
}

.switch-control input:checked + span {
  background:linear-gradient(135deg,#c985ff,#87b8ff);
}

.character-generator,
.character-editor,
.portrait-upload,
.portrait-upload-zone,
.form-grid label,
.privacy-note,
.runtime-note {
  border-color:rgba(167,143,210,.14);
  border-radius:18px;
  background:rgba(255,255,255,.68);
}

.portrait-upload-zone,
.recharge-upload-zone {
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62);
}

.recharge-package-card.selected,
.promote-topic-list button.selected {
  border-color:rgba(173,116,226,.36);
  background:linear-gradient(135deg,rgba(250,240,255,.94),rgba(236,247,255,.84));
  box-shadow:0 12px 24px rgba(126,104,177,.12);
}

.privacy-card p,
.recharge-submit-card p,
.recharge-qr-card p,
.promote-copy-tool p,
.date-guidance,
.story-guidance,
.story-progress-feedback {
  color:var(--ih-cute-muted);
}

.mobile-nav {
  border:1px solid rgba(255,255,255,.76);
  border-radius:28px 28px 0 0;
  background:rgba(255,255,255,.86);
  box-shadow:0 -16px 38px rgba(126,104,177,.14);
  backdrop-filter:blur(20px);
}

.mobile-nav-item {
  color:#887a9d;
  border-radius:18px;
}

.mobile-nav-item.active {
  color:#9b62e0;
  background:rgba(246,236,255,.72);
}

.mobile-nav-item img {
  filter:drop-shadow(0 6px 10px rgba(151,126,201,.18));
}

@media (max-width:760px) {
  body {
    min-width:0;
  }

  main {
    padding-left:8px;
    padding-right:8px;
  }

  .topbar {
    height:54px;
    padding:0 12px;
    border-radius:0 0 22px 22px;
  }

  .brand-logo {
    width:38px;
    height:38px;
  }

  .nav {
    gap:4px;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .nav::-webkit-scrollbar {
    display:none;
  }

  .nav button {
    min-height:34px;
    padding:0 10px;
    white-space:nowrap;
    font-size:12px;
  }

  .workspace-view,
  .hall-content {
    width:min(100%,440px);
    margin:0 auto;
    padding:12px 8px 92px;
  }

  .workspace-heading,
  .hall-view .page-heading,
  .conversation-section-heading,
  .feature-card-heading,
  .editor-heading {
    gap:8px;
  }

  .workspace-heading h1,
  .hall-view h1,
  .personal-profile-copy h1 {
    font-size:22px;
  }

  .workspace-heading p,
  .hall-view .page-heading p,
  #conversationsView .workspace-heading p,
  .personal-profile-copy p {
    font-size:12.5px;
    line-height:1.45;
  }

  .hall-view .page-heading {
    grid-template-columns:1fr;
    padding:14px;
    border-radius:24px;
    background:rgba(255,255,255,.62);
    box-shadow:var(--ih-cute-shadow-soft);
  }

  .hall-view .page-heading > div:first-child {
    display:grid !important;
    gap:4px;
    min-width:0;
    height:auto !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .hall-view .page-heading .section-label,
  .hall-view .page-heading h1 {
    display:block !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .hall-view .filters {
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    padding:5px;
  }

  .hall-view .filters button {
    min-height:36px;
    padding:0 6px;
    font-size:12px;
  }

  .hall-create-button {
    width:100%;
    min-height:44px;
    margin:10px 0;
  }

  .hall-view .character-grid,
  #myCharacterGrid.character-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .hall-view .character-card,
  .custom-character-card {
    min-height:auto;
    padding:8px;
    border-radius:20px;
  }

  .hall-view .portrait,
  .custom-character-card .portrait {
    min-height:0;
    aspect-ratio:1 / 1.08;
    border-radius:17px;
  }

  .hall-view .character-heading {
    margin-top:8px;
  }

  .hall-view .character-heading h2,
  .custom-character-card .character-heading h2 {
    font-size:17px;
  }

  .hall-view .character-heading p,
  .hall-view .character-card blockquote,
  .custom-character-card .character-heading p,
  .custom-character-card blockquote {
    font-size:11.5px;
    line-height:1.42;
  }

  .hall-view .tag-row,
  .custom-character-card .tag-row {
    gap:4px;
  }

  .hall-view .tag-row span,
  .rating-badge {
    height:22px;
    padding:0 7px;
    font-size:10.5px;
  }

  .hall-view .card-action,
  .custom-card-actions button {
    min-height:38px;
    border-radius:15px;
    font-size:12.5px;
  }

  .hall-pagination {
    padding:5px;
    gap:6px;
  }

  .hall-pagination button {
    min-height:34px;
    padding:0 10px;
    font-size:12px;
  }

  .conversation-section,
  .personal-profile-card,
  .personal-stat-strip,
  .personal-reminder-card,
  .personal-entry-grid,
  .personal-detail-heading,
  .personal-feature-card,
  .character-generator,
  .character-editor,
  .privacy-card,
  .recharge-qr-card,
  .recharge-submit-card,
  .promote-copy-tool {
    padding:14px;
    border-radius:22px;
  }

  .conversation-grid,
  .conversation-list,
  .proactive-inbox-list {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .conversation-card,
  .conversation-card.compact,
  .conversation-list-item,
  .proactive-inbox-item {
    min-height:auto;
    padding:12px;
    border-radius:20px;
  }

  .conversation-avatar {
    width:52px;
    height:52px;
    border-radius:17px;
  }

  .detail-layout,
  .custom-character-layout,
  .recharge-flow,
  .invite-layout,
  .chat-view {
    grid-template-columns:1fr;
    gap:12px;
  }

  .detail-portrait {
    min-height:0;
    aspect-ratio:1 / 1.1;
    border-radius:22px;
  }

  .detail-copy {
    padding:16px;
    border-radius:22px;
  }

  .detail-title {
    gap:10px;
  }

  .detail-copy blockquote {
    padding:12px 14px;
    font-size:14px;
    line-height:1.6;
  }

  html.is-mobile-chat #chatView {
    padding:0;
    background:transparent;
  }

  html.is-mobile-story #storyView {
    padding:0 0 78px;
    background:transparent;
  }

  html.is-mobile-date #dateView {
    padding:0;
    background:transparent;
  }

  .chat-shell,
  .story-shell,
  .date-shell {
    border-radius:0;
    border-left:0;
    border-right:0;
    box-shadow:none;
  }

  .chat-header,
  .story-header,
  .date-header {
    min-height:58px;
    padding:9px 10px;
  }

  #chatAvatar,
  html.is-mobile-chat #chatAvatar {
    width:42px;
    height:42px;
    border-radius:14px;
  }

  html.is-mobile-chat #messageList,
  html.is-mobile-story .story-messages,
  html.is-mobile-date .date-messages {
    padding:14px 12px;
  }

  .message,
  .story-message,
  .date-message-bubble {
    max-width:min(82vw,340px);
    font-size:14px;
    line-height:1.6;
  }

  .chat-form,
  .story-form,
  .date-form {
    gap:8px;
    padding:9px;
  }

  #chatInput,
  #storyInput,
  #dateInput {
    min-height:44px;
    max-height:116px;
    font-size:16px;
  }

  .send-button,
  .story-send-button,
  .date-send-button,
  .chat-more-button {
    min-height:44px;
    border-radius:16px;
  }

  .story-choice-list,
  .date-action-list,
  .date-scenario-panel {
    gap:9px;
  }

  .story-choice-button,
  .date-action-button,
  .date-scenario-card {
    padding:12px;
    border-radius:18px;
  }

  #personalCenterView.workspace-view {
    padding-top:10px;
  }

  .personal-profile-card {
    grid-template-columns:64px minmax(0,1fr);
    gap:12px;
  }

  .personal-avatar {
    width:64px;
    height:64px;
    border-radius:22px;
  }

  .personal-edit-button,
  .personal-orbit-icon {
    display:none;
  }

  .personal-stat-strip {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .personal-stat-strip div + div {
    border-left:0;
  }

  .personal-entry-grid {
    grid-template-columns:1fr;
    padding:8px;
  }

  .personal-entry-grid button,
  .personal-reminder-card {
    min-height:68px;
    border-radius:18px;
  }

  .character-generator {
    position:static;
  }

  .form-grid {
    grid-template-columns:1fr;
    gap:10px;
  }

  .editor-actions,
  .backup-actions,
  .promote-copy-actions,
  .date-summary-actions {
    grid-template-columns:1fr;
    gap:8px;
  }

  .recharge-plan-grid {
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }

  .recharge-package-card {
    min-height:82px;
    padding:12px;
  }

  .mobile-nav {
    width:min(100%,430px);
    left:50%;
    right:auto;
    transform:translateX(-50%);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  }

  .mobile-nav-item {
    min-height:52px;
    gap:3px;
    font-size:11.5px;
  }

  .mobile-nav-item img {
    width:25px;
    height:25px;
  }
}

@media (max-width:480px) {
  html.is-mobile-chat #messageList.is-short-conversation {
    justify-content:flex-start;
    padding-top:14px;
    padding-bottom:10px;
  }
}

@media (max-width:480px) {
  html.is-mobile-chat #chatView {
    height:var(--app-viewport-height, 100dvh);
    min-height:var(--app-viewport-height, 100dvh);
    padding:0;
  }

  html.is-mobile-chat .chat-header {
    min-height:84px;
    padding:8px 10px;
  }

  html.is-mobile-chat #chatAvatar,
  html.is-mobile-chat .chat-avatar {
    width:68px;
    height:68px;
    flex:0 0 68px;
    aspect-ratio:1 / 1;
    object-fit:cover;
    object-position:center top;
    border-radius:20px;
  }

  html.is-mobile-chat #messageList {
    padding:14px 12px 10px;
  }

  html.is-mobile-chat .chat-form {
    padding:8px 10px max(8px, env(safe-area-inset-bottom));
  }

  .chat-interaction-popover {
    left:10px;
    right:10px;
    bottom:calc(100% + 8px);
    width:auto;
    padding:12px;
    color:#4b3042;
    border-color:rgba(199,96,145,.2);
    border-radius:20px;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,247,251,.96));
    box-shadow:0 18px 42px rgba(118,65,91,.16);
  }

  .chat-more-grid {
    gap:9px;
  }

  .chat-more-tile,
  .chat-more-tile.date-entry-button {
    min-height:96px;
    padding:10px 6px;
    border-radius:16px;
  }

  .chat-more-icon {
    width:40px;
    height:40px;
    border-radius:14px;
  }

  .date-entry-button {
    color:#4b3042;
    border-color:rgba(199,96,145,.22);
    background:#fff;
  }

  .date-entry-button small {
    color:#8a7080;
  }
}

@media (max-width:440px) {
  .workspace-view,
  .hall-content {
    padding-left:7px;
    padding-right:7px;
  }

  .hall-view .character-grid,
  #myCharacterGrid.character-grid {
    gap:9px;
  }

  .hall-view .character-card,
  .custom-character-card {
    padding:7px;
  }

  .hall-view .character-heading h2,
  .custom-character-card .character-heading h2 {
    font-size:16px;
  }

  .hall-view .card-action {
    min-height:36px;
  }

  .conversation-section,
  .personal-profile-card,
  .personal-stat-strip,
  .personal-reminder-card,
  .personal-entry-grid,
  .personal-feature-card,
  .character-generator,
  .character-editor,
  .privacy-card,
  .recharge-qr-card,
  .recharge-submit-card,
  .promote-copy-tool {
    padding:12px;
  }
}

/* Task 71 follow-up: mobile page-level rhythm and empty states */
@media (max-width:760px) {
  .topbar {
    display:none !important;
  }

  .workspace-heading::before,
  .workspace-heading::after,
  .conversation-section-heading::before,
  .conversation-section-heading::after,
  .feature-card-heading::before,
  .feature-card-heading::after,
  .editor-heading::before,
  .editor-heading::after,
  .recharge-heading::before,
  .recharge-heading::after {
    display:none !important;
    content:none !important;
  }

  main {
    padding-top:10px;
  }

  #detailView,
  #customCharacterView,
  #rechargeView,
  #inviteView,
  #privacyCenterView,
  #chatView,
  #storyView,
  #dateView {
    padding-top:0;
  }

  #detailView > .back-button,
  #customCharacterView > .back-button {
    margin-top:0;
  }

  html,
  body {
    scrollbar-width:none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width:0;
    height:0;
  }

  .workspace-view {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  .workspace-heading,
  .conversation-section-heading,
  .feature-card-heading,
  .editor-heading,
  .recharge-heading {
    min-height:0;
  }

  .workspace-heading {
    padding:14px 16px !important;
    margin-bottom:12px !important;
    border:1px solid rgba(255,255,255,.76);
    border-radius:22px;
    background:rgba(255,255,255,.82);
    box-shadow:0 12px 28px rgba(126,104,177,.1);
  }

  .workspace-heading h1,
  .hall-view h1,
  .personal-profile-copy h1 {
    margin:3px 0 0;
    font-size:22px;
    line-height:1.2;
  }

  .workspace-heading p {
    margin:6px 0 0;
  }

  .workspace-heading .primary-button,
  .workspace-heading .secondary-button {
    width:100%;
    min-height:40px;
    margin-top:8px;
  }

  .conversation-section {
    margin-top:10px;
    padding:12px;
  }

  .conversation-section-heading h2 {
    margin:2px 0 0;
    font-size:19px;
  }

  .empty-state,
  .conversation-empty,
  .conversation-empty-inline {
    min-height:auto;
    padding:14px;
    border:1px solid rgba(167,143,210,.13);
    border-radius:18px;
    background:rgba(255,255,255,.7);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
  }

  .empty-state {
    flex-direction:column;
    text-align:center;
  }

  .empty-state button,
  .conversation-empty button {
    min-height:38px;
    padding:0 16px;
    color:#fff;
    border:1px solid rgba(255,255,255,.64);
    border-radius:15px;
    background:var(--ih-cute-primary);
    box-shadow:0 10px 22px rgba(151,126,201,.2);
    font-family:var(--ih-cute-font);
    font-weight:900;
  }

  #myCharacterStatus {
    padding:0;
  }

  #myCharacterStatus .empty-state {
    min-height:112px;
  }

  #myCharacterGrid:empty {
    display:none;
  }

  .personal-profile-card {
    min-height:auto;
    padding:16px;
  }

  .personal-stat-strip {
    padding:10px;
  }

  .personal-stat-strip div {
    min-height:78px;
    padding:10px 6px;
  }

  .personal-stat-strip strong {
    font-size:22px;
  }

  .personal-entry-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0;
    padding:0;
  }

  .personal-entry-grid button {
    min-height:104px !important;
    padding:10px 6px !important;
  }

  .personal-entry-icon,
  .personal-entry-icon img {
    width:44px;
    height:44px;
    border-radius:16px;
  }

  .personal-entry-grid strong {
    font-size:13.5px;
  }

  .personal-entry-grid small {
    font-size:10.5px;
    line-height:1.35;
  }
}

@media (max-width:370px) {
  .personal-entry-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Task 72: tighter feedback pass for role hall density, custom intro copy, and personal entries */
.hall-view .character-grid {
  gap:22px;
}

.hall-view .character-card {
  min-height:342px;
  padding:18px;
}

.hall-view .character-heading h2 {
  font-size:30px;
}

.hall-view .tag-row {
  gap:8px;
}

.hall-view .tag-row span {
  padding:6px 10px;
}

.hall-view .card-action {
  min-height:48px;
}

.hall-pagination {
  margin-top:22px;
}

.form-section {
  display:grid;
  gap:16px;
  min-width:0;
}

.character-intro-section {
  padding:18px;
  border:1px solid rgba(151,134,210,.16);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,247,253,.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}

.form-section-heading {
  display:grid;
  gap:6px;
}

.form-section-heading h3 {
  margin:0;
  color:var(--vd02-ink);
  font-size:22px;
  line-height:1.22;
}

.form-section-heading p {
  margin:0;
  max-width:46em;
  color:var(--vd02-muted);
  font-size:14px;
  font-weight:700;
  line-height:1.55;
}

.intro-fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.intro-fields label:first-child {
  grid-row:span 2;
}

.intro-fields textarea {
  min-height:118px;
  line-height:1.7;
}

.intro-fields label:first-child textarea {
  min-height:248px;
}

.personal-profile-card {
  grid-template-columns:minmax(0,1fr) auto;
  min-height:148px;
}

.personal-profile-copy {
  max-width:34em;
}

.personal-entry-grid button:nth-child(3n+2),
.personal-entry-grid button:nth-child(3n+3) {
  border-left:1px solid rgba(151,134,210,.14);
}

.personal-entry-grid button:nth-child(n+4) {
  border-top:1px solid rgba(151,134,210,.14);
}

@media (max-width:760px) {
  .hall-view .character-grid {
    gap:16px;
  }

  .hall-view .character-card {
    min-height:292px;
    padding:14px;
  }

  .hall-view .character-heading h2 {
    font-size:26px;
  }

  .hall-view .tag-row span {
    padding:5px 9px;
  }

  .intro-fields {
    grid-template-columns:1fr;
  }

  .intro-fields label:first-child {
    grid-row:auto;
  }

  .intro-fields label:first-child textarea,
  .intro-fields textarea {
    min-height:132px;
  }

  .personal-profile-card {
    grid-template-columns:minmax(0,1fr) auto;
    min-height:96px;
    padding:18px;
  }

  .personal-orbit-icon {
    right:18px;
    bottom:14px;
    width:54px;
    height:54px;
  }
}

@media (max-width:480px) {
  .hall-view .character-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  .hall-view .character-card {
    min-height:278px;
    padding:13px;
  }

  .hall-view .character-heading h2 {
    font-size:24px;
  }

  .hall-view .tag-row span {
    font-size:11.5px;
  }

  .character-intro-section {
    padding:14px;
    border-radius:22px;
  }

  .form-section-heading h3 {
    font-size:19px;
  }

  .personal-profile-card {
    min-height:86px;
  }

  .personal-profile-copy p {
    padding-right:0;
  }

  .personal-entry-grid {
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }

  .personal-entry-grid button {
    grid-column:span 2;
    min-height:104px !important;
  }

  .personal-entry-grid button:nth-child(n+4) {
    grid-column:span 3;
  }
}

@media (max-width:370px) {
  .hall-view .character-grid {
    grid-template-columns:1fr;
  }
}

/* Task 73: improve mobile custom-role cards and hall title contrast */
.hall-view .character-card::after {
  background:linear-gradient(180deg,rgba(14,10,27,.08) 18%,rgba(19,15,33,.52) 58%,rgba(14,10,27,.9) 100%);
}

.hall-view .character-heading h2 {
  color:#fff !important;
  text-shadow:
    0 2px 8px rgba(20,14,38,.62),
    0 0 18px rgba(20,14,38,.44);
}

@media (max-width:760px) {
  #myCharacterGrid.character-grid {
    grid-template-columns:1fr !important;
    gap:14px;
  }

  #myCharacterGrid .custom-character-card {
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    grid-template-areas:
      "portrait heading"
      "tags tags"
      "quote quote"
      "actions actions";
    gap:12px;
    width:100%;
    min-height:auto;
    padding:14px;
    color:var(--vd02-ink);
    border-radius:24px;
    background:rgba(255,255,255,.78);
  }

  #myCharacterGrid .custom-character-card .portrait {
    grid-area:portrait;
    width:96px;
    height:112px;
    aspect-ratio:auto;
    border-radius:20px;
  }

  #myCharacterGrid .custom-character-card .character-heading {
    grid-area:heading;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-content:start;
    align-items:start;
    gap:8px;
    margin:0;
  }

  #myCharacterGrid .custom-character-card .character-heading h2 {
    margin:0 0 4px;
    color:var(--vd02-ink);
    font-size:22px;
    line-height:1.18;
    writing-mode:horizontal-tb;
  }

  #myCharacterGrid .custom-character-card .character-heading p {
    margin:0;
    color:var(--vd02-muted);
    font-size:13px;
    font-weight:800;
    line-height:1.35;
    writing-mode:horizontal-tb;
  }

  #myCharacterGrid .custom-character-card .rating-badge {
    justify-self:end;
    height:26px;
    padding:0 10px;
    white-space:nowrap;
  }

  #myCharacterGrid .custom-character-card .tag-row {
    grid-area:tags;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:0;
  }

  #myCharacterGrid .custom-character-card .tag-row span {
    height:24px;
    padding:0 9px;
    font-size:11.5px;
  }

  #myCharacterGrid .custom-character-card blockquote {
    grid-area:quote;
    min-height:auto;
    margin:0;
    padding:12px 14px;
    color:#615472;
    border:1px solid rgba(167,143,210,.14);
    border-radius:18px;
    background:rgba(255,255,255,.66);
    font-size:13px;
    line-height:1.55;
  }

  #myCharacterGrid .custom-card-actions {
    grid-area:actions;
    display:grid;
    grid-template-columns:1.1fr 1fr 1fr;
    gap:8px;
  }

  #myCharacterGrid .custom-card-actions button {
    min-height:42px;
    padding:0 10px;
    border-radius:16px;
    white-space:nowrap;
  }
}

@media (max-width:390px) {
  #myCharacterGrid .custom-character-card {
    grid-template-columns:84px minmax(0,1fr);
  }

  #myCharacterGrid .custom-character-card .portrait {
    width:84px;
    height:104px;
  }

  #myCharacterGrid .custom-card-actions {
    grid-template-columns:1fr;
  }
}

/* Task 74: gender color accents in the role hall */
.hall-view .character-card.gender-male {
  --role-accent:#70b6ff;
  --role-accent-strong:#428dff;
  --role-accent-soft:rgba(112,182,255,.28);
  --role-accent-tint:rgba(103,172,255,.2);
  box-shadow:
    0 22px 46px rgba(70,127,214,.2),
    0 0 0 1px rgba(168,212,255,.26);
}

.hall-view .character-card.gender-female {
  --role-accent:#ff8fc9;
  --role-accent-strong:#f05aa9;
  --role-accent-soft:rgba(255,143,201,.28);
  --role-accent-tint:rgba(255,151,209,.22);
  box-shadow:
    0 22px 46px rgba(214,91,157,.2),
    0 0 0 1px rgba(255,191,224,.28);
}

.hall-view .character-card.gender-neutral {
  --role-accent:#b99cff;
  --role-accent-strong:#9d78ff;
  --role-accent-soft:rgba(185,156,255,.26);
  --role-accent-tint:rgba(185,156,255,.18);
}

.hall-view .character-card.gender-male::after,
.hall-view .character-card.gender-female::after,
.hall-view .character-card.gender-neutral::after {
  background:
    radial-gradient(circle at 72% 72%,var(--role-accent-soft),transparent 38%),
    linear-gradient(180deg,rgba(14,10,27,.08) 18%,rgba(19,15,33,.52) 58%,rgba(14,10,27,.9) 100%);
}

.hall-view .character-card.gender-male .tag-row span,
.hall-view .character-card.gender-female .tag-row span,
.hall-view .character-card.gender-neutral .tag-row span {
  color:#fff;
  background:linear-gradient(135deg,var(--role-accent-tint),rgba(23,19,38,.42));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 8px 14px rgba(14,10,27,.1);
}

.hall-view .character-card.gender-male .card-action,
.hall-view .character-card.gender-female .card-action,
.hall-view .character-card.gender-neutral .card-action {
  color:#fff;
  border:1px solid rgba(255,255,255,.52);
  background:linear-gradient(135deg,var(--role-accent-strong),var(--role-accent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 12px 22px var(--role-accent-soft);
}

/* 2026-06-30: mobile date and iOS keyboard follow-up */
@media (max-width:760px), (pointer:coarse) {
  html.is-mobile-chat #chatInput,
  html.is-mobile-story #storyInput,
  html.is-mobile-date #dateInput {
    font-size:16px;
    line-height:1.45;
  }

  html.is-mobile-chat #chatView.has-character-bg .messages {
    background:
      linear-gradient(180deg,rgba(255,252,254,.72),rgba(249,247,255,.84)),
      var(--chat-character-bg-image) center top / cover no-repeat;
  }

  html.is-mobile-chat .chat-shell,
  html.is-mobile-date .date-shell {
    backdrop-filter:none;
  }

  html.is-mobile-date #dateView {
    height:var(--visual-viewport-height,var(--app-viewport-height,100dvh));
    min-height:0;
    padding:0;
  }
}

/* Task 77 final mobile overrides */
.heart-zone { margin:0 0 18px; }
.first-act-panel button,
.relationship-record button,
.relationship-tone-option,
.relationship-profile-dialog button,
.relationship-settings-dialog button,
.manual-memory-dialog button { min-height:44px; }
.relationship-profile-dialog input,
.relationship-profile-dialog select,
.relationship-profile-dialog textarea,
.manual-memory-dialog input,
.manual-memory-dialog select,
.manual-memory-dialog textarea { font-size:16px; }

@media (max-width:440px) {
  .relationship-profile-dialog,
  .relationship-settings-dialog,
  .manual-memory-dialog {
    width:100vw;
    max-width:none;
    max-height:92dvh;
    margin:auto 0 0;
  }

  .relationship-profile-dialog form,
  .relationship-settings-dialog form,
  .manual-memory-dialog form {
    max-height:92dvh;
    overflow:auto;
    border-radius:16px 16px 0 0;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  }

  .heart-zone-list,
  .relationship-tone-options,
  .first-act-panel {
    grid-template-columns:1fr;
  }
}

/* 2026-07-01: heart zone standalone entry and first-card modes */
.heart-zone-gateway {
  width:100%;
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  align-items:center;
  gap:16px;
  min-height:112px;
  padding:14px 18px;
  border:1px solid rgba(169,112,145,.26);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,246,251,.76));
  box-shadow:0 16px 34px rgba(157,99,136,.14), inset 0 1px 0 rgba(255,255,255,.72);
  color:#3c2b38;
  text-align:left;
  cursor:pointer;
}

.heart-zone-gateway img {
  width:78px;
  height:78px;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 10px 22px rgba(205,109,163,.22);
}

.heart-zone-gateway strong,
.heart-zone-gateway small {
  display:block;
}

.heart-zone-gateway strong {
  margin:4px 0 6px;
  font-size:18px;
  line-height:1.25;
}

.heart-zone-gateway small {
  color:#7f6274;
  line-height:1.45;
}

.heart-zone-view .hall-content {
  display:grid;
  gap:18px;
}

.heart-zone-view .back-button {
  width:max-content;
}

.heart-character-grid {
  margin-top:2px;
}

.heart-character-grid .character-card {
  min-height:342px;
}

.relationship-lock-note {
  display:block;
  color:#8a7282;
  font-weight:500;
  line-height:1.45;
}

#relationshipRelationStartField.is-locked select {
  color:#7f6677;
  background:#f6f1f5;
}

@media (max-width:760px) {
  .heart-zone-gateway {
    grid-template-columns:72px minmax(0,1fr);
    min-height:96px;
    gap:12px;
    padding:12px;
    border-radius:16px;
  }

  .heart-zone-gateway img {
    width:66px;
    height:66px;
    border-radius:16px;
  }

  .heart-zone-gateway strong {
    font-size:16px;
  }

  .heart-zone-view .page-heading {
    gap:16px;
  }
}

@media (max-width:390px) {
  .heart-zone-gateway {
    grid-template-columns:62px minmax(0,1fr);
  }

  .heart-zone-gateway img {
    width:58px;
    height:58px;
  }

  .heart-zone-gateway small {
    font-size:12px;
  }
}