/**
 * 剧情攻略页（story-guide.html）专用样式。
 * 与构筑库信息流解耦；顶部交互面板样式仍由 poe2-deep-hero.css 提供。
 */

.poe2-deep-story-guide-page .page {
    padding-bottom: 2.5rem;
}

.story-guide-page {
    width: 100%;
    margin-top: 1.25rem;
    margin-left: 0;
    padding: 0 0 160px;
    border-radius: var(--radius-lg, 12px);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-top-feed {
    --feed-card-h: 104px;
    --feed-card-media-w: 86px;
    display: block;
    width: 100%;
    margin: 18px 0 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-featured-feed {
    --feed-card-h: 104px;
    --feed-card-media-w: 86px;
    width: 100%;
    margin: 0;
    min-height: var(--feed-card-h, 104px);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-write-btn {
    align-self: center;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    border: 2px dashed var(--brand);
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--brand);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent),
        0 0 18px color-mix(in srgb, var(--brand) 18%, transparent);
    transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.story-guide-hero-write-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
}

/* 攥写态 hero 右栏只保留一个【取消】按钮（发布按钮已经统一收拢到下方编辑器底部），
 * 那么就让它独占整行宽度，撑出和"撰写攻略"完全一致的视觉块头。 */
.story-guide-hero-write-row--editing .story-guide-write-btn {
    width: 100%;
}

.story-guide-hero-write-row--editing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-guide-write-btn--map {
    border-style: solid;
    font-size: 15px;
}

.story-guide-hero-write-row--editing .story-guide-write-btn--secondary {
    grid-column: 1 / -1;
}

.story-guide-map-action-row {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    pointer-events: none;
}

.story-guide-map-action-row--upload-only {
    justify-content: flex-end;
}

.story-guide-map-action-btn {
    min-width: 116px;
    min-height: 38px;
    padding: 0 14px;
    border: 2px dashed color-mix(in srgb, var(--brand) 62%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel) 82%, transparent);
    color: var(--brand);
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--bg-primary) 18%, transparent);
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.story-guide-map-action-btn:hover,
.story-guide-map-action-btn:focus-visible {
    outline: none;
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--panel));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 18%, transparent);
    transform: translateY(-1px);
}

.story-guide-map-action-btn--delete {
    border-color: color-mix(in srgb, #e0564f 72%, transparent);
    color: #e0564f;
}

.story-guide-map-action-btn--delete:hover,
.story-guide-map-action-btn--delete:focus-visible {
    border-color: #e0564f;
    background: color-mix(in srgb, #e0564f 12%, var(--panel));
    box-shadow: 0 10px 24px color-mix(in srgb, #e0564f 18%, transparent);
}

.story-guide-map-upload-prompt-wrap {
    position: relative;
    padding: 0;
    color: #ffffff;
}

.story-guide-map-upload-prompt {
    display: grid;
    place-items: center;
    width: min(42%, 280px);
    min-height: 86px;
    margin: auto;
    padding: 18px 24px;
    border: 2px dashed rgba(255, 255, 255, 0.74);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.48);
    cursor: pointer;
}

.story-guide-hero-submit-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 10px;
}

.story-guide-hero-submit-row .story-guide-editor-step-btn {
    width: 100%;
    min-height: 42px;
}

.story-guide-hero-submit-row .story-guide-editor-step-btn:only-child {
    grid-column: 1 / -1;
}

/* 当当前读者选中的是自己的攻略时，行内并排显示 [编辑] [撰写攻略] —— 各占一半宽度。 */
.story-guide-hero-write-row--with-edit {
    gap: 10px;
}

.story-guide-hero-write-row--with-edit .story-guide-write-btn {
    flex: 1 1 0;
    min-width: 0;
}

/* 「编辑」按钮：和「撰写攻略」完全同款 —— dashed brand 边框、半透 brand 底、brand 字色。
 * 二者并排时只靠图标和文字区分（✎ vs +），不再用实色 vs 虚线拉等级。
 * 这是用户明确要求的：希望编辑按钮的样式参考外面的「撰写攻略」按钮。
 *
 * 注：背景 / 边框 / 字色 / hover 全部交还基类 .story-guide-write-btn 处理，这里只
 * 接管 ::before 图标内容，把 "+" 换成 "✎"。 */
.story-guide-write-btn--edit::before {
    content: "✎";
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

/* 取消 = 危险/撤销语义 → 用项目自带 --color-error 红色系做边框/背景/文字。
 * 仍然继承 .story-guide-write-btn 的外形（高度、字号、间距），尺寸天然一致。 */
.story-guide-write-btn--secondary {
    border-color: var(--color-error, #ff3b30);
    color: var(--color-error, #ff3b30);
    background: color-mix(in srgb, var(--color-error, #ff3b30) 10%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-error, #ff3b30) 14%, transparent),
        0 0 18px color-mix(in srgb, var(--color-error, #ff3b30) 18%, transparent);
}

.story-guide-write-btn--secondary:hover,
.story-guide-write-btn--secondary:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-error, #ff3b30);
    color: #fff;
    background: var(--color-error, #ff3b30);
}

.story-guide-write-btn--secondary::before {
    content: "";
    display: none;
}

.story-guide-write-btn::before {
    content: "+";
    display: inline-block;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.story-guide-hero-write-row--editing .story-guide-write-btn::before {
    content: "";
    display: none;
}

.story-guide-write-btn:not(.story-guide-write-btn--secondary):hover,
.story-guide-write-btn:not(.story-guide-write-btn--secondary):focus-visible {
    outline: none;
    transform: translateY(-2px);
    border-color: var(--brand-2);
    color: var(--brand-2);
    background: color-mix(in srgb, var(--brand) 15%, transparent);
}

.story-guide-write-btn--secondary:focus-visible {
    outline: none;
}

#storyGuideRoot > .story-guide-page__head {
    display: none;
}

.story-guide-control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-mode-area {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: start;
    justify-self: center;
    min-width: 0;
}

.story-guide-mode-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.story-guide-sort-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--panel) 72%, var(--panel-strong));
    color: var(--text);
    cursor: pointer;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 34%, transparent);
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.story-guide-sort-toggle:hover,
.story-guide-sort-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--text) 34%, var(--line));
    background: color-mix(in srgb, var(--text) 7%, var(--panel));
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 18%, transparent);
}

.story-guide-sort-toggle.is-latest {
    color: var(--text);
}

.story-guide-sort-toggle .fa-solid,
.story-guide-sort-toggle > svg {
    display: block;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    min-height: 22px;
    font-size: 22px;
    line-height: 1;
}

.story-guide-sort-toggle .sort-toggle-combo {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.story-guide-sort-toggle .sort-toggle-core {
    display: block;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
}

.story-guide-sort-toggle .sort-toggle-arrow {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: block;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px;
    min-height: 13px;
    padding: 1px;
    border-radius: 999px;
    background: var(--panel-strong);
    color: var(--accent-blue);
}

.story-guide-filter-gear {
    flex: 0 0 auto;
}

.story-guide-search-field {
    --story-guide-ctl-radius: 8px;
    --story-guide-ctl-height: 36px;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    width: min(320px, 100%);
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-search-field input {
    width: 100%;
    height: var(--story-guide-ctl-height);
    padding: 0 12px;
    border-radius: var(--story-guide-ctl-radius);
    border: 1px solid var(--bf-ctl-border);
    background: var(--bf-ctl-bg);
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}

.story-guide-search-field input:hover {
    border-color: var(--bf-ctl-border-hover);
    background: var(--bf-ctl-bg-hover);
}

.story-guide-search-field input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 20%, transparent);
}

.story-guide-filter-row {
    --story-guide-ctl-radius: 8px;
    --story-guide-ctl-height: 36px;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-filter-field {
    flex: 0 0 auto;
    min-width: 0;
}

.story-guide-filter-field--season {
    width: 142px;
    max-width: 176px;
}

html[lang="en"] .story-guide-filter-field--season {
    width: 176px;
    max-width: 220px;
}

.story-guide-filter-field--mode {
    width: 118px;
    max-width: 150px;
}

.story-guide-filter-field select {
    width: 100%;
    height: var(--story-guide-ctl-height);
    padding: 0 26px 0 10px;
    border-radius: var(--story-guide-ctl-radius);
    border: 1px solid var(--bf-ctl-border);
    background: var(--bf-ctl-bg);
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}

.story-guide-filter-field select:hover {
    border-color: var(--bf-ctl-border-hover);
    background: var(--bf-ctl-bg-hover);
}

.story-guide-filter-field select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 20%, transparent);
}

.story-guide-mode-segmented {
    --story-guide-segment-w: 86px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, var(--story-guide-segment-w));
    align-items: center;
    width: max-content;
    height: 38px;
    margin: 0;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--panel) 72%, var(--panel-strong));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 34%, transparent);
}

.story-guide-sort-row {
    display: flex;
    justify-content: center;
}

.story-guide-sort-row[hidden] {
    display: none;
}

.story-guide-sort-segmented {
    --story-guide-sort-segment-w: 70px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, var(--story-guide-sort-segment-w));
    align-items: center;
    width: max-content;
    height: 32px;
    padding: 4px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--panel) 72%, var(--panel-strong));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 34%, transparent);
}

.story-guide-sort-segmented__thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: var(--story-guide-sort-segment-w);
    height: calc(100% - 8px);
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--accent-blue) 86%, var(--line));
    background: color-mix(in srgb, var(--accent-blue) 18%, var(--panel));
    pointer-events: none;
    transform: translateX(0);
    transition: transform 0.18s ease;
}

.story-guide-sort-segmented[data-active-index="1"] .story-guide-sort-segmented__thumb {
    transform: translateX(var(--story-guide-sort-segment-w));
}

.story-guide-sort-segment {
    position: relative;
    z-index: 1;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
    transition: color 0.16s ease;
}

.story-guide-sort-segment:hover,
.story-guide-sort-segment.is-active {
    color: var(--accent-blue);
}

.story-guide-mode-segmented__thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: var(--story-guide-segment-w);
    height: calc(100% - 8px);
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--accent-blue) 86%, var(--line));
    background: color-mix(in srgb, var(--accent-blue) 18%, var(--panel));
    opacity: 1;
    pointer-events: none;
    transform: translateX(0);
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.story-guide-mode-segmented[data-active-index="1"] .story-guide-mode-segmented__thumb {
    transform: translateX(var(--story-guide-segment-w));
}

.story-guide-mode-segmented--single {
    grid-template-columns: minmax(126px, max-content);
}

.story-guide-mode-segmented--single .story-guide-mode-segment {
    padding: 0 14px;
    color: var(--accent-blue);
}

.story-guide-mode-segment {
    position: relative;
    z-index: 1;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
    transition: color 0.16s ease;
}

.story-guide-mode-segment:hover,
.story-guide-mode-segment.is-active {
    background: transparent;
    color: var(--accent-blue);
    box-shadow: none;
}

.story-guide-page__body {
    width: 100%;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-page.is-writing .story-guide-control-row {
    display: none;
}

.story-guide-page.is-writing .story-guide-page__body {
    margin-top: 0;
    /* 写攻略时编辑器栈很高 —— 底部还要悬浮展开「构筑 picker」(280px)
       和「插入引用」面板（≈300px）两组浮层。给一大段 padding 让浮层
       展开时还能完整滚进视口，不会被屏幕折线截掉。
       40vh 大致是半屏高度，在窄笔记本和大显示器上都能保持充足下拉空间。 */
    padding-bottom: max(360px, 40vh);
}

.story-guide-page.is-writing .story-guide-editor-step-actions {
    margin-top: 12px;
    padding-top: 8px;
}

.story-guide-hero-comment-mode {
    display: flex;
    justify-content: center;
    margin-top: -4px;
}

.story-guide-hero-comment-mode .story-guide-mode-segmented {
    --story-guide-segment-w: 104px;
    height: 34px;
}

/* 攥写态文本编辑区：原 .discussion-rich-editor 默认 min-height 118px 偏矮，
 * 攥写攻略要求一次写一段相对完整的说明，把它放大到 220px。
 * 选择器只命中 story-guide 路线步骤里的 contenteditable，
 * 不影响 discussion 详情页的留言框尺寸。 */
.story-guide-routes-page .build-discussion-compose .discussion-rich-editor {
    min-height: 220px;
}

/* 引用面板（装备 / 技能 / 珠宝 / 构筑 选择卡）固定一个最大高度并内部滚动，
 * 这样面板展开时不会把页面推得过长 —— 页面高度变化越小，"视图跳转"感越弱。
 * 不影响 discussion 详情页（那里没有 .story-guide-routes-page 父级）。 */
.story-guide-routes-page .discussion-ref-picker {
    max-height: min(420px, 60vh);
    overflow: auto;
    border-color: var(--line);
    background: var(--panel);
    color: var(--text);
}

.story-guide-routes-page .discussion-ref-build-card-grid.discussion-ref-build-card-grid--scroll,
.story-guide-routes-page .discussion-ref-picker-list.discussion-ref-picker-list--scroll {
    border-color: var(--line);
    background: var(--input-bg);
}

.story-guide-editor {
    display: grid;
    gap: 12px;
    width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-editor--all-in-one {
    gap: 14px;
}

.story-guide-preset-export-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
    border-radius: 7px;
    background: color-mix(in srgb, var(--brand) 8%, var(--panel));
}

.story-guide-preset-export-bar__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.story-guide-preset-export-bar__copy strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
}

.story-guide-preset-export-bar__copy span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.story-guide-preset-export-bar__btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.story-guide-editor-section {
    order: 0;
    border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--panel) 78%, transparent);
    overflow: visible;
}

.story-guide-editor-section:not([open]) {
    order: 20;
}

.story-guide-editor-section__summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    user-select: none;
}

.story-guide-editor-section__summary::-webkit-details-marker {
    display: none;
}

.story-guide-editor-section__summary::marker {
    content: "";
}

.story-guide-editor-section__chevron {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    transition: transform 0.16s ease;
}

.story-guide-editor-section[open] .story-guide-editor-section__chevron {
    transform: rotate(180deg);
}

.story-guide-editor-section__body {
    display: grid;
    gap: 12px;
    padding: 12px 14px 14px;
    border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
}

.story-guide-class-picker--editor {
    padding-top: 0;
}

.story-guide-editor-step-head {
    display: grid;
    justify-items: center;
    width: 100%;
    text-align: center;
}

.story-guide-editor-step-title-row {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
}

.story-guide-editor-step-count {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.story-guide-editor-step-title {
    color: var(--text);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    min-width: 0;
}

.story-guide-editor-step-actions {
    order: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin-top: 4px;
}

.story-guide-editor-step-btn {
    min-width: 132px;
    min-height: 42px;
    padding: 0 22px;
    border: 2px dashed var(--brand);
    border-radius: 10px;
    background: transparent;
    color: var(--brand);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
    cursor: pointer;
}

.story-guide-editor-step-btn--secondary {
    border-color: color-mix(in srgb, var(--brand) 58%, transparent);
    color: color-mix(in srgb, var(--brand) 82%, var(--text));
}

.story-guide-editor-step-btn:hover:not(:disabled),
.story-guide-editor-step-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 16%, transparent);
}

.story-guide-editor-step-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.story-guide-editor-lock-note {
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
    text-align: center;
}

.story-guide-editor-lock-note.is-hidden {
    display: none;
}

.story-guide-editor-title-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.story-guide-editor-title-fields {
    display: grid;
    gap: 12px;
}

.story-guide-editor-title-field input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent);
    background: transparent;
    color: var(--text);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
    outline: none;
}

.story-guide-editor-title-field input:focus {
    border-bottom-color: var(--brand);
    text-shadow: 0 0 14px color-mix(in srgb, var(--brand) 20%, transparent);
}

.story-guide-editor-title-field input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.story-guide-editor-title-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 76px;
    resize: vertical;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    outline: none;
}

.story-guide-editor-title-field textarea:focus {
    border-color: color-mix(in srgb, var(--brand) 64%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent);
}

.story-guide-editor-field-counter {
    grid-column: 2;
    justify-self: end;
    margin-top: -6px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.story-guide-map-point-editor {
    display: grid;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand) 6%, transparent);
}

.story-guide-map-point-editor__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.story-guide-map-point-editor__title {
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
}

.story-guide-map-point-editor__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.story-guide-map-point-editor label,
.story-guide-point-dashed-row {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.story-guide-map-point-editor label span,
.story-guide-point-dashed-row__label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.story-guide-map-point-editor input,
.story-guide-map-point-editor select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px dashed color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    color-scheme: light dark;
    font: inherit;
    font-weight: 750;
    outline: none;
}

.story-guide-map-point-editor input:focus,
.story-guide-map-point-editor select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent);
}

.story-guide-point-source {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.story-guide-point-source--official {
    background: color-mix(in srgb, #60a5fa 16%, transparent);
    color: #2563eb;
}

.story-guide-point-source--custom {
    background: color-mix(in srgb, #22c55e 16%, transparent);
    color: #15803d;
}

.story-guide-point-dashed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.story-guide-point-dashed-list label {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 74%, transparent);
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.story-guide-point-dashed-list input {
    width: 14px;
    height: 14px;
    padding: 0;
}

.story-guide-route-list-head,
.story-guide-route-list-foot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.story-guide-route-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 0 2px;
    border: 2px dashed color-mix(in srgb, var(--brand) 58%, transparent);
    border-radius: 7px;
    background: transparent;
    color: var(--brand);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.story-guide-route-add-btn:hover:not(:disabled),
.story-guide-route-add-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 16%, transparent);
}

.story-guide-route-add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.story-guide-route-list {
    display: grid;
    gap: 6px;
    width: 100%;
}

/* 列布局（从左到右）：
 *   复选框(40)  起点(0.8fr)  线型(90)  终点(0.8fr)  构筑徽标(auto)  路线摘要(1.4fr)  +(40)  X(40)
 * 删除按钮 X 移到最右侧紧贴 + 按钮，让 + / X 形成一组「行尾控件」组合，
 * 复选框留在最左、视觉上和单独的多选语义匹配。 */
.story-guide-route-row {
    display: grid;
    grid-template-columns: 28px 30px minmax(72px, 0.58fr) 76px minmax(72px, 0.58fr) minmax(108px, 1fr) minmax(82px, 90px) 30px 30px;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 2px 4px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.story-guide-route-row.is-active {
    outline: 0;
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    box-shadow:
        inset 3px 0 0 var(--brand),
        0 0 0 1px color-mix(in srgb, var(--brand) 24%, transparent);
}

.story-guide-route-row.is-disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

.story-guide-route-row.is-dragging {
    opacity: 0.58;
}

.story-guide-route-row.is-drag-over {
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--brand) 86%, var(--text));
}

.story-guide-route-row.is-drag-over-after {
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--brand) 86%, var(--text));
}

.story-guide-route-lock-notice {
    margin: 0 0 8px;
    padding: 7px 10px;
    border: 1px dashed color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.story-guide-route-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px dashed color-mix(in srgb, var(--brand) 58%, transparent);
    border-radius: 7px;
    background: transparent;
    color: var(--brand);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}

.story-guide-route-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 28px;
    border-radius: 7px;
    color: color-mix(in srgb, var(--text) 72%, transparent);
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.story-guide-route-order:active {
    cursor: grabbing;
}

.story-guide-route-row.is-active .story-guide-route-check {
    border-color: var(--brand);
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 16%, transparent);
}

.story-guide-route-check__mark {
    display: inline-block;
    line-height: 1;
}

.story-guide-route-check__icon {
    display: block;
    width: 15px;
    height: 15px;
}

.story-guide-route-check:disabled {
    cursor: not-allowed;
}

.story-guide-route-select {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 22px 0 8px;
    border: 1px dashed color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 7px;
    background: var(--input-bg);
    color: var(--text);
    color-scheme: light dark;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    outline: none;
}

.story-guide-route-select option,
.story-guide-route-select optgroup {
    background: var(--panel);
    color: var(--text);
}

.story-guide-route-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent);
}

.story-guide-route-select:disabled {
    opacity: 0.66;
    cursor: not-allowed;
}

.story-guide-route-summary {
    min-width: 0;
    overflow: hidden;
    color: color-mix(in srgb, var(--text) 74%, transparent);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.story-guide-route-summary[data-story-guide-route-drag-grip],
.story-guide-route-build-badge[data-story-guide-route-drag-grip] {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.story-guide-route-summary[data-story-guide-route-drag-grip]:active,
.story-guide-route-build-badge[data-story-guide-route-drag-grip]:active {
    cursor: grabbing;
}

.story-guide-route-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 0 2px;
    border: 2px dashed color-mix(in srgb, var(--danger, #ef4444) 72%, transparent);
    border-radius: 7px;
    background: transparent;
    color: var(--danger, #ef4444);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.story-guide-route-delete-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.story-guide-route-delete-wrap .story-guide-route-delete-btn {
    width: 100%;
    height: 100%;
}

.story-guide-route-delete-btn:hover:not(:disabled),
.story-guide-route-delete-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 14px color-mix(in srgb, var(--danger, #ef4444) 16%, transparent);
}

.story-guide-route-delete-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.story-guide-route-build-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    min-width: 82px;
    height: 28px;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.story-guide-route-build-badge img,
.story-guide-route-build-empty {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
    background:
        repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--brand) 22%, transparent) 0,
            color-mix(in srgb, var(--brand) 22%, transparent) 4px,
            transparent 4px,
            transparent 8px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--bg-primary) 22%, transparent);
}

.story-guide-editor-workspace {
    display: block;
    min-height: 0;
    max-height: none;
    margin-top: 4px;
    overflow: visible;
}

.story-guide-editor-workspace.is-disabled {
    opacity: 0.58;
}

.story-guide-editor-block {
    min-width: 0;
    min-height: 0;
    padding: 10px;
    border: 2px dashed color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.story-guide-editor-block--build {
    min-height: 620px;
    overflow-y: auto;
}

.story-guide-editor-block--text {
    display: flex;
    flex-direction: column;
    min-height: 620px;
}

.story-guide-editor-block__title {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.story-guide-editor-state {
    width: 100%;
    padding: 10px 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.story-guide-build-grid {
    display: grid;
    gap: 8px;
}

.story-guide-build-picker-filter {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-build-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px;
    border: 1px dashed color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.story-guide-build-card:disabled {
    cursor: default;
}

.story-guide-build-card:hover:not(:disabled),
.story-guide-build-card.is-active {
    border-color: var(--brand);
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 14%, transparent);
}

.story-guide-build-card__thumb {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
}

.story-guide-build-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-guide-build-card__body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.story-guide-build-card__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 850;
}

.story-guide-build-card__level {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.story-guide-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    order: 2;
    margin: 8px 0 0;
}

.story-guide-ref-category-row {
    justify-content: flex-start;
}

.story-guide-ref-category-row:not(:has([data-ref-category])) {
    display: none;
}

.story-guide-ref-category-row .discussion-ref-category-btn {
    min-height: 30px;
    padding: 0 12px;
    border: 1px dashed color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-weight: 850;
}

.story-guide-ref-category-row .discussion-ref-category-btn:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand);
}

.story-guide-rich-editor {
    order: 1;
    flex: 1 1 auto;
    min-height: 420px;
    padding: 12px;
    border: 1px dashed color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
    outline: none;
    overflow-y: auto;
}

.story-guide-rich-editor:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent);
}

.story-guide-rich-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
}

.story-guide-comments-panel {
    display: grid;
    gap: 14px;
    width: 100%;
}

.story-guide-comments-list {
    display: grid;
    gap: 10px;
}

.story-guide-comment-item {
    padding: 10px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-comment-item__meta {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.story-guide-comment-item__body {
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

.story-guide-comments-compose {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.story-guide-comments-compose textarea {
    width: min(680px, 100%);
    min-height: 120px;
    padding: 12px;
    border: 1px dashed color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    resize: vertical;
    outline: none;
}

.story-guide-class-picker {
    width: 100%;
    padding: 6px 0 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-editor-filter-row {
    --story-guide-ctl-radius: 8px;
    --story-guide-ctl-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 2px 0 8px;
}

.story-guide-class-card:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.story-guide-class-card:disabled:hover {
    transform: none;
    box-shadow: none;
}

.story-guide-feed-list {
    --feed-card-h: 118px;
    --feed-card-media-w: 86px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-feed-card {
    position: relative;
    width: 100%;
}

.story-guide-feed-card__description {
    max-width: 100%;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.story-guide-feed-list .story-guide-feed-card {
    cursor: pointer;
}

.story-guide-feed-list .story-guide-feed-card .build-feed-card__title:hover,
.story-guide-feed-list .story-guide-feed-card .build-feed-card__title:focus-visible,
.story-guide-feed-list .story-guide-feed-card .build-feed-card__title-zone:hover .build-feed-card__title,
.story-guide-feed-list .story-guide-feed-card .build-feed-card__title-zone:focus-visible .build-feed-card__title {
    color: var(--text);
    transform: none;
    text-shadow: none;
}

.story-guide-feed-list .story-guide-feed-card.is-active {
    z-index: 2;
    box-shadow: none;
}

.story-guide-feed-list .story-guide-feed-card.is-active::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 3px dashed var(--brand);
    border-radius: 14px;
    pointer-events: none;
}

.story-guide-feed-card--featured {
    padding-top: 0;
}

.story-guide-feed-card .build-feed-card__shell {
    height: var(--feed-card-h);
}

.story-guide-feed-card .build-feed-card__content {
    gap: 4px;
    padding-top: 0;
}

.story-guide-feed-card .build-feed-card__main {
    grid-template-columns: minmax(0, 1fr) 150px;
}

.story-guide-feed-card .build-feed-card__info {
    gap: 4px;
}

.story-guide-feed-card .build-feed-card__summary {
    display: none;
}

.story-guide-feed-card .build-feed-card__aside {
    gap: 4px;
}

.story-guide-feed-card .build-feed-card__actions--bottom {
    padding-top: 0;
}

.story-guide-feed-card--featured .build-feed-card__shell {
    height: var(--feed-card-h);
}

.story-guide-feed-card--featured .build-feed-card__content {
    gap: 4px;
    padding-top: 0;
}

.story-guide-feed-card--featured .build-feed-card__info {
    gap: 4px;
}

.story-guide-feed-card--featured .build-feed-card__actions--bottom {
    padding-top: 0;
}

.story-guide-feed-card--featured .build-feed-card__actions--bottom .build-feed-card__action-icon--discussion svg {
    transform: scale(3);
}

.story-guide-draft-card .build-feed-card__title-zone {
    min-height: 42px;
}

.story-guide-draft-card .build-feed-card__headline {
    min-height: 24px;
}

.story-guide-feed-card .build-feed-card__media {
    border: 0;
    background: transparent;
}

.story-guide-feed-card .build-feed-card__media img {
    object-fit: contain;
    padding: 0;
}

.story-guide-feed-card__owner {
    max-width: 100%;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    /* 注：内部走 UserInfoRenderer，需要展示头像 + VIP 光环。
     * 不再在外层 span 上 overflow:hidden / white-space:nowrap，
     * 长用户名的截断由内部 .user-info__name 自己处理（poe2-deep-feed.css 已定义）。 */
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.story-guide-class-cards {
    --story-guide-class-card-min-w: 74px;
    display: grid;
    grid-template-columns: repeat(8, minmax(var(--story-guide-class-card-min-w), 1fr));
    justify-content: stretch;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.story-guide-class-card {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    justify-self: center;
    aspect-ratio: 5 / 7;
    max-height: 166px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.story-guide-class-card:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.story-guide-class-card.is-active {
    z-index: 2;
    outline: 3px dashed var(--brand);
    outline-offset: 6px;
    box-shadow: none;
}

.story-guide-class-card:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.story-guide-class-card:disabled:hover {
    transform: none;
    box-shadow: none;
}

.story-guide-class-card__img {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 6px;
    bottom: 31px;
    width: calc(100% - 12px);
    height: calc(100% - 37px);
    border-radius: 6px;
    object-fit: contain;
    object-position: center center;
    background: transparent;
    transition: none;
    transform: none;
}

.story-guide-class-card__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 7px 5px 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
    text-shadow:
        0 0 2px var(--bg-primary),
        0 1px 2px color-mix(in srgb, var(--bg-primary) 80%, transparent);
    pointer-events: none;
}

.story-guide-class-card.is-active .story-guide-class-card__label {
    color: var(--brand);
}

[data-theme="dark"] .story-guide-class-card__label {
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .story-guide-class-card.is-active .story-guide-class-card__label {
    color: var(--brand-2);
}

@media (max-width: 820px) {
    .story-guide-control-row {
        grid-template-columns: minmax(160px, 0.8fr) auto minmax(258px, 1.2fr);
        gap: 8px;
    }

    .story-guide-mode-segmented {
        --story-guide-segment-w: 70px;
    }

    .story-guide-mode-line {
        gap: 6px;
    }

    .story-guide-search-field {
        justify-self: start;
        width: min(220px, 100%);
    }

    .story-guide-filter-row {
        justify-self: end;
        justify-content: flex-end;
        gap: 6px;
    }

    .story-guide-filter-field--season,
    html[lang="en"] .story-guide-filter-field--season {
        width: 160px;
        max-width: 160px;
    }

    .story-guide-filter-field--mode {
        width: 100px;
        max-width: 100px;
    }

    .story-guide-class-cards {
        grid-template-columns: repeat(4, minmax(var(--story-guide-class-card-min-w), 1fr));
        gap: 14px;
    }

    .story-guide-featured-feed,
    .story-guide-feed-list {
        --feed-card-h: 96px;
        --feed-card-media-w: 78px;
    }

    .story-guide-feed-list {
        --feed-card-h: 112px;
    }

    .story-guide-top-feed {
        --feed-card-h: 96px;
        --feed-card-media-w: 78px;
    }

    .story-guide-write-btn {
        min-height: 68px;
        font-size: 20px;
    }

    .story-guide-map-point-editor__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .story-guide-control-row {
        grid-template-columns: 1fr;
    }

    .story-guide-mode-segmented,
    .story-guide-filter-row,
    .story-guide-search-field {
        justify-self: center;
    }

    .story-guide-filter-row {
        justify-content: center;
        order: -1;
    }

    .story-guide-hero-write-row--editing,
    .story-guide-map-point-editor__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .story-guide-class-cards {
        grid-template-columns: repeat(2, minmax(var(--story-guide-class-card-min-w), 1fr));
    }

    .story-guide-feed-card .build-feed-card__aside {
        display: none;
    }
}

.poe2-deep-story-guide-page .panel {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.poe2-deep-story-guide-page .hover-record-tooltip {
    position: fixed;
    z-index: 3000;
    pointer-events: none;
    left: 0;
    top: 0;
}

.poe2-deep-story-guide-page .hover-record-tooltip[hidden] {
    display: none;
}

/* =================================================================
 *  顶部「母板块精简条」（读者选中攻略时出现在最顶部）
 *
 *  · 只承载父攻略的身份信息和母板块互动：
 *      职业图 + 攻略标题 + 副信息 + 推荐 / 收藏 / 分享
 *  · 子版块 BD 卡片在地图正下方独立呈现，跟这个条解耦
 * ================================================================= */
/* 母板头三列布局：
 *   ┌────────────┬───────────────────────────────────┬────────────────────────┐
 *   │ 职业图(无框)│       巨大居中的攻略标题            │ 作者头像 + 名字（第一行）│
 *   │            │                                   │ 推荐 收藏 分享 编辑    │
 *   └────────────┴───────────────────────────────────┴────────────────────────┘
 * · 整段没有边框 / 背景 / 阴影 —— 让顶部呈现"内容自身"，不像独立的小卡片那样喧宾夺主
 * · 攥写态与读者态完全共用这套结构（仅按钮组在攥写态变成 inert 占位） */
.story-guide-mother-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    /* 上方紧贴页头，下方让出 6px 让母板"压在"地图正上方 —— 视觉上是同一组信息块 */
    margin: 14px 0 6px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-mother-header[hidden] { display: none; }

.story-guide-context-bar[hidden] { display: none; }

.story-guide-context-bar {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 4px 0 10px;
}

.story-guide-context-bar__inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.story-guide-context-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

/* 母板和地图模块的间距收窄：地图模块本身 margin-top 会被这里覆盖，
 * 让母板头与下方 hero panel 视觉上"挨着"，不再像两块脱节的卡片。 */
.story-guide-mother-header + .poe2-deep-section,
.story-guide-mother-header + .story-guide-top-feed,
.story-guide-mother-header + #heroPanel,
.story-guide-mother-header + .story-guide-page__body {
    margin-top: 6px;
}

/* 职业图：去除边框 / 圆角小卡感觉，留出干净的方形立绘。
 * 用 contain 而不是 cover，避免职业立绘被裁掉；尺寸按标题视觉权重放大到 144px，
 * 让左侧职业图和巨大标题在视觉权重上对得起来，不再像缩略图。 */
.story-guide-mother-header__portrait {
    flex: 0 0 auto;
    width: 144px;
    height: 144px;
    border-radius: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-guide-mother-header__portrait-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.story-guide-mother-header__portrait-fallback {
    color: var(--brand);
    font-weight: 800;
    font-size: 32px;
}

/* 中列：标题独占一列，水平 + 垂直居中，自适应字号。
 * 长标题最多 2 行省略，避免把整条 header 推得过高。 */
.story-guide-mother-header__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.story-guide-mother-header__title {
    width: 100%;
    color: var(--text);
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 16px color-mix(in srgb, var(--brand) 22%, transparent);
    word-break: break-word;
    /* 多行省略：超过 2 行截断，避免把母板头撑得过高 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

/* 右列：纵向堆叠 —— 第一行作者，第二行互动按钮 */
.story-guide-mother-header__description {
    width: 100%;
    max-width: 760px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.story-guide-mother-header__url {
    max-width: 760px;
    color: var(--brand-2);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-guide-mother-header__url:hover {
    color: var(--brand);
    text-decoration: underline;
}

.story-guide-mother-header__right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}

.story-guide-mother-header__right-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.story-guide-mother-header__author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
}

.story-guide-mother-header__author--placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.story-guide-mother-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.story-guide-mother-header .discussion-action-btn {
    appearance: none;
    position: relative;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent);
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.story-guide-mother-header .discussion-action-btn:hover:not(:disabled):not(.is-inert) {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    color: var(--brand);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 18%, transparent);
    transform: translateY(-1px);
}

.story-guide-mother-header .discussion-action-btn:active:not(:disabled):not(.is-inert) {
    transform: translateY(0);
    box-shadow: none;
}

.story-guide-mother-header .discussion-action-btn.is-active {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 22%, transparent);
    color: var(--brand);
}

.story-guide-mother-header .discussion-action-btn.is-muted,
.story-guide-mother-header .discussion-action-btn.is-inert {
    opacity: 0.56;
    cursor: not-allowed;
    box-shadow: none;
}

.story-guide-mother-header .discussion-action-btn--share {
    border-color: color-mix(in srgb, var(--accent-purple) 42%, transparent);
    background: color-mix(in srgb, var(--accent-purple) 9%, transparent);
    color: var(--accent-purple);
}

.story-guide-mother-header .discussion-action-btn--share:hover:not(:disabled):not(.is-inert) {
    border-color: var(--accent-purple);
    background: color-mix(in srgb, var(--accent-purple) 16%, transparent);
    color: var(--accent-purple);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-purple) 18%, transparent);
}

.story-guide-mother-header .discussion-action-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.story-guide-mother-header .discussion-action-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    transform-origin: 50% 50%;
}

.story-guide-mother-header .discussion-action-icon--follow svg,
.story-guide-mother-header .discussion-action-icon--followFilled svg,
.story-guide-mother-header .discussion-action-icon--recommend svg,
.story-guide-mother-header .discussion-action-icon--recommendFilled svg {
    transform: scale(1.2);
}

.story-guide-mother-header .discussion-action-icon--followFilled svg,
.story-guide-mother-header .discussion-action-icon--recommendFilled svg {
    fill: currentColor;
    stroke: currentColor;
}

.story-guide-mother-header .discussion-action-icon--share svg {
    transform: scale(1.4);
}

.story-guide-mother-header .discussion-action-count {
    position: absolute;
    top: -7px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand) 48%, transparent);
    background: var(--panel-strong);
    color: var(--brand);
    font-size: 10px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
}

.story-guide-mother-header__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    background: color-mix(in srgb, var(--panel) 70%, transparent);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.story-guide-mother-header__action-btn:hover {
    border-color: color-mix(in srgb, var(--brand) 50%, transparent);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.story-guide-mother-header__action-btn.is-active {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 18%, transparent);
    color: var(--brand);
}

/* 编辑按钮：用 brand 色加边形成 primary 视觉，但不依赖 active 状态
   （编辑动作不是 toggle，按一次就跳进编辑器，没有"激活"概念） */
.story-guide-mother-header__action-btn--edit {
    border-color: color-mix(in srgb, var(--brand) 60%, transparent);
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    color: var(--brand);
    font-weight: 700;
}

.story-guide-mother-header__action-btn--edit:hover {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 22%, transparent);
}

.story-guide-mother-header__action-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.story-guide-mother-header__action-icon svg {
    width: 100%;
    height: 100%;
}

.story-guide-mother-header__action-count {
    min-width: 12px;
    text-align: center;
    font-weight: 700;
}

/* 攥写态："推荐 / 收藏 / 分享" 三个按钮虽然渲染出来，但还没有发布对象，
 * 不应该响应点击。视觉上保持灰度 + 不去 hover 样式 + cursor: not-allowed，
 * JS 层 (initMockInteractions) 也会忽略 .is-inert 的点击。 */
.story-guide-mother-header__action-btn.is-inert {
    cursor: not-allowed;
    opacity: 0.55;
}

.story-guide-mother-header__action-btn.is-inert:hover {
    border-color: color-mix(in srgb, var(--line) 60%, transparent);
    background: color-mix(in srgb, var(--panel) 70%, transparent);
}

/* =================================================================
 *  地图正下方「子版块 BD 卡片插槽」
 *
 *  · 内部 #buildFeedPanel 由 Poe2BuildFeed 紧凑模式接管，所有结构 / 事件 / 样式
 *    与公共信息流卡片完全一致 —— 卡内"查看"= 就地展开装备 / 技能 / 天赋树，
 *    "评论"= 卡内打开评论抽屉。
 *  · 当当前管卡未配置 buildId 时整段切换为占位（storyGuideActiveBuildEmpty）。
 * ================================================================= */
.story-guide-active-build-slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 16px;
}

.story-guide-active-build-slot[hidden] { display: none; }

.story-guide-active-build-checkpoint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    font-size: 12px;
    line-height: 1.4;
}

.story-guide-active-build-checkpoint[hidden] { display: none; }

.story-guide-active-build-checkpoint__label {
    color: var(--muted);
    font-weight: 600;
}

.story-guide-active-build-checkpoint__route {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
    font-weight: 700;
}

.story-guide-active-build-checkpoint__route-from,
.story-guide-active-build-checkpoint__route-to {
    color: var(--brand);
}

.story-guide-active-build-checkpoint__route-arrow {
    color: color-mix(in srgb, var(--brand) 60%, var(--muted));
    font-weight: 600;
}

/* 剧情攻略下方 BD 卡片插槽
 * ──────────────────────────────────────────────────────────────────────────
 * 关键：卡片本体（.build-feed-card 及其内部）样式 100% 复用构筑库的 build-feed.css，
 *      不要在这里覆盖 grid / aside / 头像 / 计数 / 边框 / 背景，否则会和公共信息流不一致。
 * 这里只做两件事：
 *   1) 把 .build-feed-panel 默认 22px padding 收紧，省得仅一张卡时显得空旷
 *   2) 紧凑模式（1 张卡）下隐藏 entry 之间的虚线分隔
 * 顶部头像 + 名称、底部图标、边框背景颜色都由 poe2-deep-feed.css 全权负责。 */
.story-guide-build-feed-panel {
    margin: 0;
    padding: 0;
}

.story-guide-build-feed-panel[hidden] { display: none; }

.story-guide-build-feed-panel .build-feed-list--compact {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

/* 单卡场景下不需要 entry 之间的 dotted 分隔；保留 0 间距即可 */
.story-guide-build-feed-panel .build-feed-list--compact > .build-feed-entry + .build-feed-entry {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.story-guide-build-feed-panel .build-feed-list--compact > .build-feed-entry + .build-feed-entry::before {
    content: none;
}

/* 单卡嵌入地图下方时容器往往很宽：卡片与 shell 必须显式拉满宽度，避免只见一条窄卡在左侧。
 * 底部操作栏在公共信息流里用 margin-left: auto 把「来源徽章」甩到最右端，中间会整段空白；
 * 在本页改为紧跟在按钮组后面（可加 flex-wrap 换行），消除「右边一大块什么都没有」的视觉。 */
.story-guide-build-feed-panel .build-feed-list--compact > .build-feed-entry {
    align-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.story-guide-build-feed-panel .build-feed-card,
.story-guide-build-feed-panel .build-feed-card__shell {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* 底部按钮栏：保留公共信息流 margin-left:auto 把 tag 徽章贴右下角的语义；
   只在卡片真的太窄时才允许换行，避免徽章被挤出可视区域。 */
.story-guide-build-feed-panel .build-feed-card__actions--bottom {
    flex-wrap: wrap;
    gap: 6px 12px;
    width: 100%;
    box-sizing: border-box;
}

.story-guide-build-feed-panel .build-feed-card__actions-right {
    margin-left: auto;
    justify-content: flex-end;
}

.story-guide-build-feed-panel .build-feed-card__source-corner {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.story-guide-active-build-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--line) 60%, transparent);
    background: color-mix(in srgb, var(--panel) 70%, transparent);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.story-guide-active-build-empty[hidden] { display: none; }

.story-guide-active-build-empty__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--muted) 70%, var(--brand));
}

.story-guide-active-build-empty__icon svg {
    width: 100%;
    height: 100%;
}

.story-guide-active-build-empty__text {
    flex: 1 1 auto;
}

/* 隐藏的天赋树借用容器 —— 让 build-feed.js 的展开/收起逻辑能找到全局 #wegameTreeCanvas
   在被借走前留在这里，离屏隐藏即可，不影响布局 */
.story-guide-tree-host {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

/* =================================================================
 *  整体节奏：把段与段之间的空白稍微收紧，避免读者一眼下来感觉到处都是空隙
 * ================================================================= */
.poe2-deep-story-guide-page .story-guide-top-feed {
    margin-top: 8px;
    margin-bottom: 4px;
}

.poe2-deep-story-guide-page #heroPanel:not([hidden]) {
    margin-top: 8px;
}

.story-guide-page {
    margin-top: 14px;
}

/* =================================================================
 *  目录页 / 详情页 二分（由 .poe2-deep-story-guide-page.is-detail 控制）
 *
 *  · 详情页 (is-detail)：访问 ?guideId=xxx 时进入。
 *      展示 母板头 + 互动地图 + 当前管卡 BD 卡片 + 留言区；
 *      顶部 segmented 在详情页改为「公共 / 专属」留言范围切换。
 *      隐藏：精选攻略条、搜索、排序、筛选、地图右栏的「撰写攻略」按钮。
 *  · 目录页 (is-catalog)：默认形态（无 guideId）。
 *      只展示 互动地图 + 控制行 + 类目 + 列表；
 *      隐藏：母板头（没有"已选中攻略"概念）、当前管卡 BD 卡片插槽、精选攻略条。
 * ================================================================= */

/* 详情页隐藏：信息流相关、搜索、筛选、排序齿轮、类目筛选行 */
.poe2-deep-story-guide-page.is-detail .story-guide-top-feed,
.poe2-deep-story-guide-page.is-detail #storyGuideMotherHeader + .story-guide-top-feed {
    display: none !important;
}

.poe2-deep-story-guide-page.is-detail .story-guide-search-field,
.poe2-deep-story-guide-page.is-detail .story-guide-filter-row {
    display: none;
}

.poe2-deep-story-guide-page.is-detail .story-guide-control-row {
    display: none;
}

.poe2-deep-story-guide-page.is-detail .story-guide-mode-area {
    display: none;
}

.poe2-deep-story-guide-page.is-public-checkpoint .story-guide-control-row {
    display: none;
}

.poe2-deep-story-guide-page.is-public-checkpoint .story-guide-page {
    margin-top: 10px;
}

.poe2-deep-story-guide-page.is-public-checkpoint .story-guide-hero-write-row {
    display: none;
}

.poe2-deep-story-guide-page.is-public-checkpoint .hero-panel__info-title + .hero-panel__info-desc {
    margin-top: 0;
}

.poe2-deep-story-guide-page.is-public-checkpoint .hero-panel__info-head + .hero-panel__info-desc {
    margin-top: 0;
}

.poe2-deep-story-guide-page.is-detail .story-guide-sort-toggle {
    display: none;
}

/* 详情页：地图右栏的「撰写攻略」按钮没有意义（用户在看别人的攻略），
 * 仅当 viewer.isMine 时由 JS 让出 [编辑] 按钮，撰写按钮整段隐藏。 */
.poe2-deep-story-guide-page.is-detail [data-story-guide-write] {
    display: none !important;
}

/* 详情页 body 里再没有 segmented/类目/feed list；只有留言区。
 * 给 .story-guide-page 自身的内边距收一收，让留言区紧贴上方 BD 卡。 */
.poe2-deep-story-guide-page.is-detail .story-guide-page {
    margin-top: 8px;
}

/* 目录页隐藏：
 *   · 顶部"精选剧情攻略"（信息流已经在下方自带，再放一份反而冗余）
 *   · 详情页才显示的「返回目录」顶链（双保险，HTML 默认 hidden 也会拦住）
 *
 * 注：segmented（攻略 / 留言切换）在目录页保留 —— 用户可以在 catalog 里直接切到留言视图，
 * 浏览自己之前选中的某一篇攻略下的评论；不再用 display:none 屏蔽。
 *
 * 注：mother header 和 active build slot 的可见性由 JS 控制（无选中攻略时 `hidden=true`，
 * 攥写态时由 renderMotherHeader 主动显示），这里如果再强行 display:none 会把攥写态
 * 的草稿标题预览也一并屏蔽，所以不要在 CSS 里粗暴隐藏它们。 */
.poe2-deep-story-guide-page.is-catalog .story-guide-top-feed,
.poe2-deep-story-guide-page.is-catalog .story-guide-back-bar {
    display: none !important;
}

/* 目录页：feed 卡片现在是"链接"（点击跳详情），用 cursor + hover 强调可点。 */
.poe2-deep-story-guide-page.is-catalog .story-guide-feed-list .story-guide-feed-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.poe2-deep-story-guide-page.is-catalog .story-guide-feed-list .story-guide-feed-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand) 50%, transparent);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 14%, transparent);
}

/* 详情页失败态里的"返回目录"链接：朴素文字链，与 brand 同色 */
.story-guide-back-link {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.story-guide-back-link:hover {
    color: var(--brand-2);
    text-decoration: underline;
}

/* ---- 详情页左上角『返回』顶链 -----------------------------------------------
 * HTML 默认 hidden=true；JS 在 applyPageModeChrome 检测到 detailMode 时显示。
 * 用 inline-flex 让箭头和文字在同一基线上；不要 absolute 浮动，避免在窄屏遮地图。
 * 用户要求：仅显示「返回」二字，按钮做得大一点宽一点，提供清晰的"逃生口"视觉锚点。
 * 颜色走 brand 系，hover 加轻微左移强调"返回"动作。 */
.story-guide-back-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 10px;
    padding: 12px 28px;
    min-width: 120px;
    min-height: 44px;
    border-radius: 12px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--brand) 32%, transparent);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    width: max-content;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent),
        0 4px 14px color-mix(in srgb, var(--brand) 14%, transparent);
}

.story-guide-back-bar[hidden] { display: none; }

.story-guide-back-bar:hover,
.story-guide-back-bar:focus-visible {
    color: var(--brand-2);
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    border-color: color-mix(in srgb, var(--brand) 56%, transparent);
    transform: translateX(-3px);
    outline: none;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent),
        0 8px 22px color-mix(in srgb, var(--brand) 22%, transparent);
}

.story-guide-back-bar__arrow {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

/* ---- 职业卡片下方常驻的『热门 / 最新』排序滑块 ----------------------------- */
/* sort-row 的 [hidden] 行为在原 .story-guide-sort-row 上已生效；
 * --inline 变体专门用于 body 里常驻显示，去掉之前 sort-row 的 hidden 默认值，
 * 并给上下加一点 margin 让它和职业卡片、信息流之间有呼吸空间。 */
.story-guide-sort-row--inline {
    display: flex;
    justify-content: center;
    margin: 10px 0 12px;
}

/* ---- 目录页 [留言] 模式占位区（功能待实现） --------------------------------
 * 用户要求：切换到留言时上方保留 [职业卡片] + [热门/最新]，下面剧情攻略卡片移除，
 * 给一段「留言区」占位即可，先把视觉骨架搭起来。 */
.story-guide-message-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--text) 78%, transparent);
    text-align: left;
}

/* 类选择小提示：当读者还没选职业时，给一行轻量的说明文 */
.story-guide-class-hint {
    margin: 6px 0 10px;
    padding: 8px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--brand) 28%, transparent);
    color: color-mix(in srgb, var(--text) 80%, transparent);
    font-size: 12.5px;
    line-height: 1.4;
}

/* hero panel 右侧文本里塞进作者的富文本 chip 时，给一个滚动包裹，避免长内容挤爆面板 */
.story-guide-rich-host {
    max-height: 100%;
    overflow: auto;
    line-height: 1.55;
    word-break: break-word;
}

/* 信息流卡片选中态强化 —— 比 dashed border 更显眼，与"激活"语义贴合 */
.story-guide-feed-list .story-guide-feed-card.is-active {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 60%, transparent),
                0 6px 18px color-mix(in srgb, var(--brand) 18%, transparent);
}
.story-guide-feed-list .story-guide-feed-card.is-active::after {
    border-color: color-mix(in srgb, var(--brand) 80%, transparent);
    border-style: solid;
    inset: -3px;
    border-radius: 12px;
}

.story-guide-comments-panel {
    width: 100%;
}

.story-guide-comments-panel .discussion-comments-stack {
    position: relative;
    border: 0;
    border-radius: 14px;
    padding: 14px 18px 22px;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82);
}

.story-guide-message-scope-row {
    display: flex;
    justify-content: center;
    margin: 0 auto 10px;
}

.story-guide-message-scope-row .story-guide-mode-segmented {
    --story-guide-segment-w: 110px;
    height: 34px;
}

.story-guide-message-scope-row .story-guide-mode-segment {
    font-size: 14px;
    line-height: 1.1;
}

html[lang^="en"] .story-guide-message-scope-row .story-guide-mode-segmented {
    --story-guide-segment-w: 126px;
}

[data-theme="dark"] .story-guide-routes-page .story-guide-route-select {
    border-color: color-mix(in srgb, var(--line-bright) 84%, transparent);
    background: color-mix(in srgb, var(--input-bg) 88%, var(--panel-strong) 12%);
    color: var(--text);
    color-scheme: dark;
}

[data-theme="dark"] .story-guide-routes-page .story-guide-route-select option,
[data-theme="dark"] .story-guide-routes-page .story-guide-route-select optgroup {
    background: var(--panel-strong);
    color: var(--text);
}

[data-theme="dark"] .story-guide-routes-page .discussion-ref-picker {
    border-color: color-mix(in srgb, var(--line-bright) 82%, transparent);
    background: color-mix(in srgb, var(--panel) 92%, var(--bg-primary) 8%);
    color: var(--text);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--bg-primary) 46%, transparent);
}

[data-theme="dark"] .story-guide-routes-page .discussion-ref-build-card-grid.discussion-ref-build-card-grid--scroll,
[data-theme="dark"] .story-guide-routes-page .discussion-ref-picker-list.discussion-ref-picker-list--scroll {
    border-color: color-mix(in srgb, var(--line-bright) 72%, transparent);
    background: var(--input-bg);
}

[data-theme="dark"] .story-guide-routes-page .discussion-ref-category-btn,
[data-theme="dark"] .story-guide-routes-page .discussion-ref-build-card,
[data-theme="dark"] .story-guide-routes-page .discussion-ref-option {
    border-color: color-mix(in srgb, var(--line-bright) 72%, transparent);
    background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
    color: var(--text);
}

[data-theme="dark"] .story-guide-routes-page .discussion-ref-category-btn:hover:not(.active),
[data-theme="dark"] .story-guide-routes-page .discussion-ref-category-btn.active,
[data-theme="dark"] .story-guide-routes-page .discussion-ref-build-card:hover,
[data-theme="dark"] .story-guide-routes-page .discussion-ref-build-card.active,
[data-theme="dark"] .story-guide-routes-page .discussion-ref-option:hover {
    border-color: color-mix(in srgb, var(--brand) 62%, var(--line-bright));
    background: color-mix(in srgb, var(--brand) 18%, var(--panel-strong));
    color: var(--text);
}

.story-guide-comments-panel .discussion-comments-stack::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, #111 0 24px, transparent 24px 48px) top left / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, #111 0 24px, transparent 24px 48px) bottom left / 100% 2px no-repeat,
        repeating-linear-gradient(180deg, #111 0 24px, transparent 24px 48px) top left / 2px 100% no-repeat,
        repeating-linear-gradient(180deg, #111 0 24px, transparent 24px 48px) top right / 2px 100% no-repeat;
}

[data-theme="dark"] .story-guide-comments-panel .discussion-comments-stack {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72);
}

[data-theme="dark"] .story-guide-comments-panel .discussion-comments-stack::before {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0 24px, transparent 24px 48px) top left / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0 24px, transparent 24px 48px) bottom left / 100% 2px no-repeat,
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0 24px, transparent 24px 48px) top left / 2px 100% no-repeat,
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0 24px, transparent 24px 48px) top right / 2px 100% no-repeat;
}

.story-guide-comments-heading {
    width: 100%;
    margin: 0 0 16px;
    text-align: center;
    color: var(--text);
    font-size: 19px;
    font-weight: 900;
    line-height: 1.2;
}

/* Story guide editor separator pass: reduce card stacking while preserving contrast. */
.story-guide-editor--all-in-one {
    width: 90%;
    max-width: 1104px;
    margin-inline: auto;
    justify-self: center;
}

.story-guide-editor-section {
    padding: 0 16px;
    border: 2px dashed color-mix(in srgb, var(--line-bright) 72%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 58%, transparent);
    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.story-guide-editor-section[open] {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--line-bright));
    background: color-mix(in srgb, var(--panel) 70%, transparent);
}

.story-guide-editor-section__summary {
    min-height: 46px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.story-guide-editor-section[open] .story-guide-editor-section__summary {
    border-bottom: 0;
}

.story-guide-editor-section__body {
    padding: 0 0 18px;
    border-top: 0;
    background: transparent;
}

.story-guide-editor-section__body > * + * {
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
}

.story-guide-editor-filter-row,
.story-guide-class-picker--editor,
.story-guide-editor-title-fields,
.story-guide-route-list,
.story-guide-editor-workspace {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-editor-filter-row {
    margin: 0 0 10px;
}

.story-guide-class-card {
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.story-guide-class-card:hover {
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
    background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.story-guide-class-card.is-active {
    outline: 2px dashed color-mix(in srgb, var(--brand) 82%, var(--text));
    outline-offset: 4px;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--brand) 54%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.story-guide-class-card__label {
    background: linear-gradient(to top, color-mix(in srgb, var(--bg-primary) 58%, transparent), transparent);
    text-shadow: none;
}

.story-guide-editor-title-field {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.story-guide-editor-title-field input,
.story-guide-editor-title-field textarea {
    border: 1px solid #d4dce8;
    border-radius: 7px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.story-guide-editor-title-field input {
    height: 40px;
    border-bottom: 1px solid #d4dce8;
    font-size: 16px;
}

.story-guide-editor-title-field input:hover,
.story-guide-editor-title-field textarea:hover {
    border-color: #c2ccda;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.story-guide-editor-title-field input:focus,
.story-guide-editor-title-field textarea:focus {
    border-color: color-mix(in srgb, var(--brand) 70%, var(--line-bright));
    background: #fff;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--brand) 13%, transparent),
        0 6px 14px rgba(15, 23, 42, 0.1);
    text-shadow: none;
}

.story-guide-route-row {
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
}

.story-guide-route-row:first-of-type {
    border-top: 1px solid transparent;
}

.story-guide-route-row:hover {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.story-guide-route-row.is-active {
    outline: 0;
    border-style: solid;
    border-color: transparent;
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    box-shadow:
        inset 3px 0 0 var(--brand),
        0 0 0 1px color-mix(in srgb, var(--brand) 24%, transparent);
}

.story-guide-mode-segment.is-active,
.story-guide-sort-segment.is-active {
    outline: none;
}

.story-guide-route-check,
.story-guide-route-add-btn,
.story-guide-route-delete-btn {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.story-guide-route-select {
    border-style: solid;
    border-color: #d4dce8;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.story-guide-route-select:hover {
    border-color: #c2ccda;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.story-guide-route-select:focus {
    border-color: color-mix(in srgb, var(--brand) 70%, var(--line-bright));
    background: #fff;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--brand) 13%, transparent),
        0 6px 14px rgba(15, 23, 42, 0.1);
}

.story-guide-editor-workspace {
    margin-top: 0;
}

.story-guide-editor-block {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.story-guide-editor-block:first-child {
    border-top: 0;
}

.story-guide-routes-page .build-discussion-compose {
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.story-guide-routes-page .build-discussion-compose .discussion-rich-editor {
    border-color: #d4dce8;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    color: var(--text);
}

.story-guide-routes-page .build-discussion-compose .discussion-rich-editor:hover {
    border-color: #c2ccda;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.story-guide-routes-page .build-discussion-compose .discussion-rich-editor:focus {
    border-color: color-mix(in srgb, var(--brand) 70%, var(--line-bright));
    background: #fff;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--brand) 13%, transparent),
        0 6px 14px rgba(15, 23, 42, 0.1);
}

[data-theme="dark"] .story-guide-class-card:hover,
[data-theme="dark"] .story-guide-route-row:hover {
    background: color-mix(in srgb, var(--brand) 8%, transparent);
}

[data-theme="dark"] .story-guide-class-card.is-active,
[data-theme="dark"] .story-guide-route-row.is-active {
    outline: 0;
    background: color-mix(in srgb, var(--brand-2, var(--brand)) 13%, transparent);
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, var(--brand-2, var(--brand)) 86%, #fff),
        0 0 0 1px color-mix(in srgb, var(--brand-2, var(--brand)) 30%, transparent);
}

[data-theme="dark"] .story-guide-class-card.is-active {
    border-color: color-mix(in srgb, var(--brand-2, var(--brand)) 58%, var(--line-bright));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--brand-2, var(--brand)) 18%, transparent),
        0 10px 24px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .story-guide-route-row.is-active {
    border-color: transparent;
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, var(--brand-2, var(--brand)) 86%, #fff),
        0 0 0 1px color-mix(in srgb, var(--brand-2, var(--brand)) 30%, transparent);
}

[data-theme="dark"] .story-guide-mode-segment.is-active,
[data-theme="dark"] .story-guide-sort-segment.is-active {
    outline: none;
}

[data-theme="dark"] .story-guide-editor-title-field input,
[data-theme="dark"] .story-guide-editor-title-field textarea,
[data-theme="dark"] .story-guide-route-select,
[data-theme="dark"] .story-guide-routes-page .build-discussion-compose .discussion-rich-editor {
    border-color: color-mix(in srgb, var(--line-bright) 78%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--input-bg) 82%, #fff 5%) 0%,
        color-mix(in srgb, var(--input-bg) 88%, #000 12%) 100%);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
    color: var(--text);
}

[data-theme="dark"] .story-guide-editor-title-field input:hover,
[data-theme="dark"] .story-guide-editor-title-field textarea:hover,
[data-theme="dark"] .story-guide-route-select:hover,
[data-theme="dark"] .story-guide-routes-page .build-discussion-compose .discussion-rich-editor:hover {
    border-color: color-mix(in srgb, var(--brand) 36%, var(--line-bright));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--input-bg) 76%, #fff 7%) 0%,
        color-mix(in srgb, var(--input-bg) 86%, #000 10%) 100%);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

[data-theme="dark"] .story-guide-editor-title-field input:focus,
[data-theme="dark"] .story-guide-editor-title-field textarea:focus,
[data-theme="dark"] .story-guide-route-select:focus,
[data-theme="dark"] .story-guide-routes-page .build-discussion-compose .discussion-rich-editor:focus {
    border-color: color-mix(in srgb, var(--brand) 72%, var(--line-bright));
    background: color-mix(in srgb, var(--input-bg) 78%, #fff 6%);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent),
        0 12px 26px rgba(0, 0, 0, 0.32);
}

[data-theme="dark"] .story-guide-route-check,
[data-theme="dark"] .story-guide-route-add-btn,
[data-theme="dark"] .story-guide-route-delete-btn {
    border-color: color-mix(in srgb, var(--line-bright) 74%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--input-bg) 82%, #fff 5%) 0%,
        color-mix(in srgb, var(--input-bg) 88%, #000 12%) 100%);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
}

.story-guide-route-row.is-active .story-guide-route-check {
    border-style: solid;
    border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .story-guide-editor-section {
    border-color: color-mix(in srgb, var(--line-bright) 64%, transparent);
    background: color-mix(in srgb, var(--panel) 58%, transparent);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

[data-theme="dark"] .story-guide-editor-section[open] {
    border-color: color-mix(in srgb, var(--brand-2, var(--brand)) 48%, var(--line-bright));
    background: color-mix(in srgb, var(--panel) 72%, transparent);
}

[data-theme="dark"] .story-guide-route-row.is-active .story-guide-route-check {
    border-color: color-mix(in srgb, var(--brand-2, var(--brand)) 62%, var(--line-bright));
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
}

.story-guide-route-list {
    gap: 0;
}

.story-guide-route-row {
    grid-template-columns: 32px 34px minmax(76px, 0.55fr) 82px minmax(76px, 0.55fr) minmax(120px, 1fr) minmax(88px, 94px) 34px 34px;
    gap: 5px;
    min-height: 38px;
    padding: 3px 5px;
    border-radius: 8px;
}

.story-guide-route-row.is-active {
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    box-shadow: none;
}

.story-guide-route-row.is-active-open-end {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.story-guide-route-row.is-active-continued {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.story-guide-route-check,
.story-guide-route-add-btn,
.story-guide-route-delete-wrap,
.story-guide-route-delete-btn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
}

.story-guide-route-add-btn,
.story-guide-route-delete-btn {
    font-size: 20px;
}

.story-guide-route-check {
    font-size: 17px;
}

.story-guide-route-order {
    height: 32px;
    font-size: 13px;
}

.story-guide-route-check__icon {
    width: 17px;
    height: 17px;
}

.story-guide-route-select {
    height: 32px;
    padding: 0 24px 0 9px;
    font-size: 13px;
}

.story-guide-route-summary {
    font-size: 13px;
}

.story-guide-route-build-badge {
    gap: 6px;
    height: 32px;
    font-size: 13px;
}

.story-guide-route-build-badge img,
.story-guide-route-build-empty {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

[data-theme="dark"] .story-guide-route-row.is-active {
    background: color-mix(in srgb, var(--brand-2, var(--brand)) 13%, transparent);
    box-shadow: none;
}

.story-guide-editor--all-in-one {
    max-width: 1260px;
}

.story-guide-editor-section:not(.story-guide-editor-section--routes) {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

.story-guide-editor-section--routes .story-guide-routes-page:not(.story-guide-routes-page--saved) {
    display: block;
}

.story-guide-editor-section--routes .story-guide-route-list,
.story-guide-editor-section--routes .story-guide-route-inline-editor {
    min-width: 0;
}

.story-guide-route-inline-editor {
    margin: 0 0 8px 34px;
    padding: 10px 12px 12px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.story-guide-route-inline-editor--top {
    margin: 0 0 10px;
    border-top: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    border-radius: 10px;
}

.story-guide-editor-section--routes .build-discussion-compose .discussion-rich-editor {
    min-height: 178px;
}

@media (max-width: 900px) {
    .story-guide-editor--all-in-one {
        width: 100%;
        max-width: none;
    }

}

@media (max-width: 1100px) {
    .story-guide-editor-section--routes .story-guide-routes-page:not(.story-guide-routes-page--saved) {
        display: block;
    }
}