.story-shell { width: min(100%, 980px); margin: 0 auto; padding: 20px 16px 70px; }
.back-link { color: var(--blue-deep); text-decoration: none; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.story-state { border-radius: 18px; padding: 16px; color: var(--muted); line-height: 1.7; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.story-card { position: relative; min-height: 410px; border-radius: 26px; padding: 26px; overflow: hidden; background:
  linear-gradient(155deg, rgba(255,255,255,.92), rgba(229,239,241,.84)); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow); }
.story-card::after { content: ""; position: absolute; right: -50px; top: -60px; width: 160px; height: 160px; border-radius: 50%; background: rgba(183,204,213,.22); }
.story-meta { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font: 12px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.story-card h2 { position: relative; z-index: 1; margin: 28px 0 14px; font-size: 27px; font-weight: 500; letter-spacing: .05em; }
.story-content { position: relative; z-index: 1; min-height: 190px; margin: 0; font-size: 16px; line-height: 2; white-space: pre-wrap; }
.card-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.feedback-status { color: var(--muted); font: 12px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.edit-button { min-height: 42px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.7); color: var(--blue-deep); padding: 8px 15px; }
.edit-button:disabled { color: var(--muted); opacity: .65; }
dialog { width: min(calc(100% - 24px), 600px); border: 0; border-radius: 24px; padding: 0; background: #f7fbfa; color: var(--ink); box-shadow: 0 30px 90px rgba(28,50,59,.3); }
dialog::backdrop { background: rgba(32,52,61,.38); backdrop-filter: blur(4px); }
.feedback-form { display: grid; gap: 16px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 24px; }
.feedback-head { display: flex; justify-content: space-between; gap: 14px; }.feedback-head .eyebrow { margin: 0 0 5px; }.feedback-head h2 { margin: 0; font-size: 25px; font-weight: 500; }
.close-button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mist-1); color: var(--ink); font-size: 24px; }
fieldset { border: 0; padding: 0; margin: 0; } legend { margin-bottom: 8px; color: var(--muted); font: 12px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.method-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.method-switch label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px solid var(--line); border-radius: 13px; background: white; color: var(--ink); }.method-switch input { width: auto; min-height: auto; }
.record-note, .warning, .upload-progress { margin: 0; color: var(--muted); font: 12px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }.warning { color: #825b4e; background: #fbf0e7; border-radius: 12px; padding: 10px 12px; }
.record-actions, .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.record-actions .button, .dialog-actions .button { margin: 0; }
#recordPreview { width: 100%; margin-top: 12px; }
@media (max-width: 680px) { .story-grid { grid-template-columns: 1fr; }.story-card { min-height: 380px; }.topbar .brand { letter-spacing: .16em; } }
@media (max-width: 430px) { .story-shell { padding-inline: 14px; }.story-card { padding: 22px; }.record-actions, .dialog-actions { grid-template-columns: 1fr; } }