/**
 * 发布页样式
 */

.wl-publish-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px 24px;
    /* 阻止移动端滚动链接触发浏览器级下拉刷新 / 回弹重载 */
    overscroll-behavior-y: contain;
}

/* ========== 发布页底部操作栏 ========== */
.wl-publish-bottom-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 0 0;
    background: transparent;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.wl-publish-draft-text {
    padding: 10px 18px;
    font-size: 15px;
    color: var(--wl-text-secondary);
    background: transparent;
    border: none;
    border-radius: 12px;
    transition: background var(--wl-transition), color var(--wl-transition);
}

.wl-publish-draft-text:hover {
    background: var(--wl-bg-hover);
    color: var(--wl-text);
}

.wl-publish-submit-btn {
    padding: 11px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--wl-accent);
    border: none;
    border-radius: 24px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--wl-accent) 30%, transparent);
    transition: transform .15s ease, background var(--wl-transition), box-shadow .15s ease;
}

.wl-publish-submit-btn:hover:not(:disabled) {
    background: var(--wl-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--wl-accent) 35%, transparent);
}

.wl-publish-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ========== 可见范围与定时发布 ========== */
.wl-publish-visibility {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--wl-border-light);
}
.wl-publish-visibility-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.wl-publish-visibility-head strong {
    font-size: 14px;
    color: var(--wl-text-strong);
}
.wl-publish-visibility-hint {
    font-size: 12px;
    color: var(--wl-text-muted);
}
.wl-publish-visibility-choice {
    display: inline-flex;
    border: 1px solid var(--wl-border-light);
    border-radius: 18px;
    overflow: hidden;
}
.wl-publish-visibility-choice button {
    border: none;
    background: transparent;
    padding: 7px 18px;
    font-size: 13px;
    color: var(--wl-text-muted);
    cursor: pointer;
}
.wl-publish-visibility-choice button.active {
    background: var(--wl-accent);
    color: #fff;
}
.wl-publish-schedule-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 14px;
    font-size: 13px;
    color: var(--wl-text-strong);
    cursor: pointer;
}
.wl-publish-schedule-datetime {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wl-publish-schedule-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--wl-text-strong);
}
.wl-publish-schedule-datetime input[type="datetime-local"] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid var(--wl-border-light);
    border-radius: 10px;
    font-size: 14px;
    background: var(--wl-bg-card);
    color: var(--wl-text-strong);
}
.wl-publish-schedule-datetime small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--wl-text-muted);
}

/* ========== 发布表单 ========== */
.wl-publish-form {
    background: var(--wl-bg-card);
    border-radius: 0 0 var(--wl-radius) var(--wl-radius);
    padding: 20px;
    box-shadow: var(--wl-shadow);
    margin-top: 0;
    margin-bottom: 16px;
    /* 禁用双击缩放：避免 iOS 把“双击选字”误判为缩放手势导致页面跳动/闪回 */
    touch-action: manipulation;
}

/* 发布页：顶部导航与表单卡片自然衔接，取消导航栏底边框，由表单顶部承接 */
.page-template-page-publish .wl-navbar {
    border-bottom-color: transparent;
}

.page-template-page-publish .wl-publish-form {
    border-top: 1px solid var(--wl-border-light);
}

/* ========== 内容类型选择器 ========== */
.wl-content-type-picker {
    margin: -2px 0 22px;
    padding: 16px;
    border: 1px solid var(--wl-border-light);
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--wl-accent) 8%, var(--wl-bg-card)), var(--wl-bg-card) 62%);
}

.wl-content-type-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
}

.wl-content-type-heading h2 {
    margin: 0;
    color: var(--wl-text);
    font-size: 16px;
}

.wl-content-type-heading p {
    margin: 0;
    color: var(--wl-text-muted);
    font-size: 12px;
    text-align: right;
}

.wl-content-type-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 7px;
    padding-top: 4px;
}

.wl-content-type {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 106px;
    padding: 10px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.52);
    color: var(--wl-text-secondary);
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.wl-content-type:hover {
    border-color: color-mix(in srgb, var(--wl-accent) 35%, var(--wl-border));
    transform: translateY(-1px);
}

.wl-content-type.active {
    /* 持久"已选中"提示：主题色细环 + 偏亮的紫色玻璃面 + 主题色柔光
       （不是白线，是选中态专用描边；sheen 光带只在环内掠过） */
    border: 1.5px solid color-mix(in srgb, var(--wl-accent) 70%, #ffffff);
    background: color-mix(in srgb, var(--wl-accent) 12%, rgba(255, 255, 255, .62));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--wl-accent) 26%, transparent);
}
/* 激活态：一道亮光沿对角掠过玻璃表面
   ——2026-08-22 v3：v2 还看得出带子痕迹，再柔。峰值 .30→.22，过渡带 22%→78% → 15%→85%，
   blur 5→8px。亮带几乎不读作"形状"，只剩表面的明暗呼吸。 */
.wl-content-type.active::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 15%,
        rgba(232, 242, 255, .06) 30%,
        rgba(245, 248, 255, .22) 50%,   /* 峰值 .22，玻璃透 78% */
        rgba(232, 242, 255, .06) 70%,
        transparent 85%
    );
    background-size: 260% 260%;
    background-position: -120% -120%;
    opacity: 0;
    animation: wl-sheen 4.5s linear infinite;
    filter: blur(8px);  /* 8px 模糊让亮带边缘完全晕开，看不到任何"裂缝" */
}
.wl-content-type.active > * {
    position: relative;
    z-index: 3;
}
@keyframes wl-sheen {
    0%   { background-position: -120% -120%; opacity: 0; }
    20%  { opacity: 1; }
    50%  { background-position: 0% 0%;     opacity: 1; }
    75%  { opacity: 0; }
    100% { background-position: 0% 0%;     opacity: 0; }
}
/* 不支持 conic-gradient 的老浏览器：sheen 静态停在卡片外（默认 background-position 不可见），不旋转也不突兀 */
@supports not (background: conic-gradient(from 0deg, red, red)) {
    .wl-content-type.active::before {
        animation: none;
    }
}

.wl-content-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: var(--wl-bg);
    color: var(--wl-accent);
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}

.wl-content-type strong,
.wl-content-type small { display: block; }
.wl-content-type strong { color: var(--wl-text); font-size: 13px; }
.wl-content-type small { margin-top: 3px; color: var(--wl-text-muted); font-size: 10px; line-height: 1.35; }

.wl-content-type-notice {
    min-height: 18px;
    margin: 12px 0 0;
    color: var(--wl-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.wl-publish-textarea-wrap {
    position: relative;
    margin-bottom: 12px;
}

.wl-publish-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-sm);
    font-size: 16px;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: border-color var(--wl-transition);
    background: var(--wl-bg-card);
    color: var(--wl-text);
}

.wl-publish-textarea:focus {
    outline: none;
    border-color: var(--wl-accent);
}

.wl-publish-textarea::placeholder {
    color: var(--wl-text-muted);
}

.wl-publish-text-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 12px;
    color: var(--wl-text-muted);
    pointer-events: none;
}

/* ========== 穿搭与时间快照发布器 ========== */
.wl-outfit-form, .wl-focus-publish-form { margin: 2px 0 10px; padding: 18px; border: 1px solid var(--wl-border-light); border-radius: 18px; background: linear-gradient(145deg, #fff, #f8f7ff); }
.wl-outfit-form[hidden], .wl-focus-publish-form[hidden] { display: none !important; }
.wl-outfit-form-heading, .wl-focus-publish-heading, .wl-outfit-wardrobe-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wl-outfit-form-heading h2, .wl-focus-publish-heading h2 { margin: 0; font-size: 17px; }
.wl-outfit-form-heading p, .wl-focus-publish-heading p, .wl-outfit-tip { margin: 4px 0 0; color: var(--wl-text-muted); font-size: 12px; line-height: 1.55; }
.wl-outfit-form-heading > span { padding: 3px 7px; border-radius: 99px; background: #f1efff; color: #6958a7; font-size: 10px; white-space: nowrap; }
.wl-outfit-text-wrap { position: relative; margin: 15px 0; }
.wl-outfit-text-wrap textarea { width: 100%; min-height: 90px; padding: 12px 12px 27px; border: 1px solid var(--wl-border); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; line-height: 1.65; resize: vertical; }
.wl-outfit-text-wrap small { position: absolute; right: 10px; bottom: 8px; color: var(--wl-text-muted); font-size: 11px; }
.wl-outfit-wardrobe-head { align-items: center; margin-top: 14px; }
.wl-outfit-wardrobe-head strong { font-size: 15px; }
.wl-outfit-wardrobe-head button { border: 0; background: transparent; color: var(--wl-accent); font: inherit; font-size: 13px; }
.wl-outfit-tip { margin: 5px 0 11px; }
.wl-outfit-editor-item { display: grid; grid-template-columns: 62px minmax(0,1fr) 58px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px dashed var(--wl-border); }
.wl-outfit-editor-sticker { display: flex; align-items: center; justify-content: center; width: 62px; height: 70px; border-radius: 10px; background: #f5f5f7; color: #9b9ba2; font-size: 11px; overflow: hidden; }
.wl-outfit-editor-sticker img { width: 100%; height: 100%; object-fit: contain; }
.wl-outfit-editor-fields input, .wl-outfit-editor-fields select { width: 100%; height: 29px; padding: 4px 6px; border: 1px solid var(--wl-border); border-radius: 6px; background: #fff; font: inherit; font-size: 11px; }
.wl-outfit-editor-fields > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 5px; }
.wl-outfit-editor-actions { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.wl-outfit-editor-actions label, .wl-outfit-editor-actions button { padding: 4px; border: 0; border-radius: 5px; background: #f0ecff; color: #67599e; text-align: center; font-size: 10px; cursor: pointer; }
.wl-outfit-editor-actions button { background: #fff0f0; color: #c45b5b; }
.wl-focus-period-choice { display: flex; gap: 6px; margin: 17px 0 13px; }
.wl-focus-period-choice button { flex: 1; padding: 9px; border: 1px solid var(--wl-border); border-radius: 9px; background: #fff; color: var(--wl-text-secondary); font: inherit; }
.wl-focus-period-choice button.active { border-color: var(--wl-accent); color: var(--wl-accent); background: #fff8ef; }
.wl-focus-publish-preview { padding: 15px; border-radius: 12px; background: #f5f6fa; color: var(--wl-text-secondary); font-size: 13px; }
.wl-focus-publish-preview strong { color: var(--wl-text); }
.wl-focus-publish-preview p { margin: 8px 0 0; font-size: 11px; }
.wl-focus-preview-bar { display: flex; height: 9px; margin-top: 12px; border-radius: 99px; overflow: hidden; background: #e5e5e8; }
.wl-focus-preview-bar i { min-width: 0; }

/* ========== OKR 发布器 ========== */
.wl-okr-publish-form { margin: 2px 0 10px; padding: 18px; border: 1px solid #dfe5f4; border-radius: 18px; background: linear-gradient(145deg, #fbfcff, #f3f6ff); }
.wl-okr-publish-form[hidden] { display: none !important; }
.wl-okr-publish-heading, .wl-okr-section-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.wl-okr-publish-heading h2 { margin: 0; font-size: 17px; }
.wl-okr-publish-heading p, .wl-okr-section-head small { display: block; margin: 4px 0 0; color: var(--wl-text-muted); font-size: 12px; line-height: 1.55; }
.wl-okr-publish-heading > span { padding: 3px 8px; border-radius: 99px; background: #e7edff; color: #526bb0; font-size: 11px; white-space: nowrap; }
.wl-okr-goal-select { margin-top: 15px; }
.wl-okr-publish-form label { display: block; color: var(--wl-text-secondary); font-size: 12px; }
.wl-okr-publish-form label span { color: var(--wl-text-muted); font-size: 10px; }
.wl-okr-goal-select select, .wl-okr-new-goal-fields input, .wl-okr-new-goal-fields textarea, .wl-okr-kr-row input, .wl-okr-action-row input, .wl-okr-action-row select, .wl-okr-checkin-wrap textarea { box-sizing: border-box; width: 100%; margin-top: 6px; border: 1px solid var(--wl-border); border-radius: 10px; background: #fff; color: var(--wl-text); font: inherit; font-size: 14px; }
.wl-okr-goal-select select, .wl-okr-new-goal-fields input { height: 40px; padding: 0 11px; }
.wl-okr-new-goal-fields { margin-top: 15px; }
.wl-okr-new-goal-fields > label:not(:first-child) { margin-top: 11px; }
.wl-okr-new-goal-fields textarea { min-height: 70px; padding: 10px 11px; line-height: 1.6; resize: vertical; }
.wl-okr-goal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
.wl-okr-section-head { align-items: center; margin-top: 20px; }
.wl-okr-section-head strong { font-size: 14px; }
.wl-okr-section-head button { padding: 0; border: 0; background: transparent; color: var(--wl-accent); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.wl-okr-key-results { margin-top: 9px; }
.wl-okr-kr-row { padding: 10px; border: 1px solid #dfe5f4; border-radius: 12px; background: rgba(255,255,255,.84); }
.wl-okr-kr-row + .wl-okr-kr-row { margin-top: 8px; }
.wl-okr-kr-title { display: grid; grid-template-columns: auto minmax(0, 1fr) 25px; gap: 7px; align-items: center; }
.wl-okr-kr-title span { color: #5e74b5; font-size: 11px; font-weight: 700; }
.wl-okr-kr-title input { margin: 0; height: 34px; padding: 0 8px; }
.wl-okr-kr-title button, .wl-okr-action-row [data-remove] { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #b49397; font: inherit; font-size: 18px; cursor: pointer; }
.wl-okr-kr-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 9px; }
.wl-okr-kr-metrics label { font-size: 10px; }
.wl-okr-kr-metrics input { height: 32px; margin-top: 4px; padding: 0 7px; font-size: 12px; }
.wl-okr-actions { margin-top: 9px; }
.wl-okr-action-row { display: grid; grid-template-columns: 27px minmax(0, 1fr) 96px 25px; gap: 7px; align-items: center; padding: 7px 0; border-bottom: 1px solid #e6eaf4; }
.wl-okr-action-check { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid #a9b9df; border-radius: 50%; background: #fff; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.wl-okr-action-check[aria-pressed="true"] { border-color: #5e74b5; background: #5e74b5; }
.wl-okr-action-row input, .wl-okr-action-row select { height: 35px; margin: 0; padding: 0 7px; font-size: 12px; }
.wl-okr-checkin-wrap { position: relative; margin-top: 18px; }
.wl-okr-checkin-wrap textarea { min-height: 90px; padding: 11px 12px 27px; line-height: 1.65; resize: vertical; }
.wl-okr-checkin-wrap small { position: absolute; right: 10px; bottom: 8px; color: var(--wl-text-muted); font-size: 11px; pointer-events: none; }
.wl-okr-publish-form input:focus, .wl-okr-publish-form textarea:focus, .wl-okr-publish-form select:focus { outline: none; border-color: var(--wl-accent); }
@media (max-width: 600px) { .wl-okr-goal-meta { grid-template-columns: 1fr; } .wl-okr-kr-metrics { grid-template-columns: 1fr 1fr; } .wl-okr-action-row { grid-template-columns: 27px minmax(0, 1fr) 25px; } .wl-okr-action-row select { grid-column: 2; } }

/* ========== To-do List 发布器 ========== */
.wl-todo-publish-form { margin: 2px 0 10px; padding: 18px; border: 1px solid var(--wl-border-light); border-radius: 18px; background: linear-gradient(145deg, #fbfffb, #f2f8f4); }
.wl-todo-publish-form[hidden] { display: none !important; }
.wl-todo-publish-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wl-todo-publish-heading h2 { margin: 0; font-size: 17px; }
.wl-todo-publish-heading p { margin: 4px 0 0; color: var(--wl-text-muted); font-size: 12px; line-height: 1.55; }
.wl-todo-publish-heading > span { padding: 3px 8px; border-radius: 99px; background: #e3f1e8; color: #337453; font-size: 11px; white-space: nowrap; }
.wl-todo-publish-title-wrap { margin-top: 15px; }
.wl-todo-publish-title-wrap label { display: block; margin-bottom: 6px; color: var(--wl-text-secondary); font-size: 12px; }
.wl-todo-publish-title-wrap label span { color: var(--wl-text-muted); font-size: 10px; }
.wl-todo-publish-title-wrap input, .wl-todo-publish-group-title { box-sizing: border-box; width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--wl-border); border-radius: 9px; background: #fff; color: var(--wl-text); font: inherit; font-size: 14px; }
.wl-todo-publish-title-wrap input:focus, .wl-todo-publish-group-title:focus { outline: none; border-color: var(--wl-accent); }
.wl-todo-publish-groups { display: grid; gap: 12px; margin-top: 14px; }
.wl-todo-publish-group { padding: 12px; border: 1px solid rgba(72, 123, 91, .18); border-radius: 12px; background: rgba(255,255,255,.54); }
.wl-todo-publish-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wl-todo-publish-group-head > div { min-width: 0; flex: 1; }
.wl-todo-publish-group-head span { display: block; margin-bottom: 5px; color: #629073; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.wl-todo-publish-group-remove { flex: 0 0 auto; padding: 5px 7px; border: 0; border-radius: 7px; background: transparent; color: #a66f75; font: inherit; font-size: 11px; cursor: pointer; }
.wl-todo-publish-group-remove:hover { background: #fff0f0; color: #c75c5c; }
.wl-todo-publish-list { margin-top: 10px; border-top: 1px solid rgba(72, 123, 91, .13); }
.wl-todo-publish-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(72, 123, 91, .12); }
.wl-todo-publish-item-main { display: grid; gap: 5px; min-width: 0; }
.wl-todo-publish-check { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid #a9c7b3; border-radius: 50%; background: #fff; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; }
.wl-todo-publish-item.is-done .wl-todo-publish-check { border-color: #4d9a6b; background: #4d9a6b; }
.wl-todo-publish-item input { min-width: 0; height: 38px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--wl-text); font: inherit; font-size: 14px; }
.wl-todo-publish-item input:focus { outline: none; border-color: var(--wl-accent); background: #fff; }
.wl-todo-publish-item.is-done input { color: var(--wl-text-muted); text-decoration: line-through; }
.wl-todo-link-select { width: 100%; min-height: 29px; padding: 4px 8px; border: 1px solid #cae0d1; border-radius: 7px; background: #f7fbf8; color: #4e705a; font: inherit; font-size: 11px; }
.wl-todo-link-select:focus { outline: none; border-color: var(--wl-accent); background: #fff; }
.wl-todo-publish-remove { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #b49397; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.wl-todo-publish-remove:hover { background: #fff0f0; color: #c75c5c; }
.wl-todo-publish-add-item, .wl-todo-publish-add-group { margin-top: 10px; padding: 8px 11px; border: 1px dashed #9dbca7; border-radius: 9px; background: rgba(255,255,255,.72); color: #367451; font: inherit; font-size: 13px; cursor: pointer; }
.wl-todo-publish-add-group { margin-top: 12px; }
.wl-todo-publish-add-item:hover, .wl-todo-publish-add-group:hover { border-color: var(--wl-accent); color: var(--wl-accent); }
@media (max-width: 600px) { .wl-todo-publish-form { padding: 15px; } .wl-todo-publish-group { padding: 10px; } .wl-todo-publish-group-head { align-items: flex-start; } .wl-todo-publish-group-remove { margin-top: 15px; } }
.wl-todo-publish-note-wrap { position: relative; margin-top: 17px; }
.wl-todo-publish-note-wrap label { display: block; margin-bottom: 6px; color: var(--wl-text-secondary); font-size: 12px; }
.wl-todo-publish-note-wrap label span { color: var(--wl-text-muted); font-size: 10px; }
.wl-todo-publish-note-wrap textarea { width: 100%; min-height: 88px; padding: 11px 12px 27px; border: 1px solid var(--wl-border); border-radius: 11px; background: #fff; color: var(--wl-text); font: inherit; font-size: 14px; line-height: 1.65; resize: vertical; }
.wl-todo-publish-note-wrap textarea:focus { outline: none; border-color: var(--wl-accent); }
.wl-todo-publish-note-wrap small { position: absolute; right: 10px; bottom: 8px; color: var(--wl-text-muted); font-size: 11px; pointer-events: none; }

/* ========== 在读图书发布器 ========== */
.wl-reading-form { margin: 2px 0 10px; padding: 18px; border: 1px solid var(--wl-border-light); border-radius: 18px; background: linear-gradient(145deg, #fffdf9, #f6f3ee); }
.wl-reading-form[hidden] { display: none !important; }
.wl-reading-form-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wl-reading-form-heading h2 { margin: 0; font-size: 17px; }
.wl-reading-form-heading p { margin: 4px 0 0; color: var(--wl-text-muted); font-size: 12px; line-height: 1.55; }
.wl-reading-required { padding: 3px 8px; border-radius: 99px; background: #fdf0e0; color: #b06a1a; font-size: 11px; white-space: nowrap; }

.wl-reading-library { margin: 14px 0 4px; }
.wl-reading-library-label { display: block; margin-bottom: 8px; color: var(--wl-text-muted); font-size: 11px; letter-spacing: .04em; }
.wl-reading-library-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.wl-reading-library-list::-webkit-scrollbar { display: none; }
.wl-reading-book-chip { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; max-width: 220px; padding: 6px 10px 6px 6px; border: 1px solid var(--wl-border); border-radius: 12px; background: #fff; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; text-align: left; }
.wl-reading-book-chip.active, .wl-reading-book-chip:hover { border-color: var(--wl-accent); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.wl-reading-book-chip img { width: 34px; height: 48px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; }
.wl-reading-chip-fallback { display: flex; align-items: center; justify-content: center; width: 34px; height: 48px; border-radius: 5px; background: #ece7dd; color: #a2947e; font-size: 14px; flex: 0 0 auto; }
.wl-reading-chip-text { min-width: 0; }
.wl-reading-chip-text strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-reading-chip-text small { display: block; margin-top: 2px; color: var(--wl-text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wl-reading-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.wl-reading-field label { display: block; margin-bottom: 6px; color: var(--wl-text-secondary); font-size: 12px; }
.wl-reading-field label span { color: var(--wl-text-muted); font-size: 10px; }
.wl-reading-field input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--wl-border); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; }
.wl-reading-field input:focus { outline: none; border-color: var(--wl-accent); }

.wl-reading-cover-row { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.wl-reading-cover-preview { display: flex; align-items: center; justify-content: center; width: 76px; height: 106px; border: 1px dashed var(--wl-border); border-radius: 8px; background: #faf8f4; overflow: hidden; flex: 0 0 auto; }
.wl-reading-cover-preview.has-cover { border-style: solid; }
.wl-reading-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.wl-reading-cover-empty { color: #b8ab93; font-size: 12px; }
.wl-reading-cover-side { flex: 1; min-width: 0; }
.wl-reading-cover-hint { margin: 8px 0 0; color: var(--wl-text-muted); font-size: 11px; line-height: 1.55; }

.wl-reading-cover-candidates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.wl-reading-candidate { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--wl-border); border-radius: 10px; background: #fff; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; text-align: left; }
.wl-reading-candidate.active, .wl-reading-candidate:hover { border-color: var(--wl-accent); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.wl-reading-candidate img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; }
.wl-reading-candidate strong { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-reading-candidate small { display: block; color: var(--wl-text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-reading-candidates-tip { grid-column: 1 / -1; margin: 0; padding: 12px; color: var(--wl-text-muted); font-size: 12px; text-align: center; }

.wl-reading-quote-wrap { position: relative; margin-top: 14px; }
.wl-reading-quote-wrap label { display: block; margin-bottom: 6px; color: var(--wl-text-secondary); font-size: 12px; }
.wl-reading-quote-wrap label span { color: var(--wl-text-muted); font-size: 10px; }
.wl-reading-quote-wrap textarea { width: 100%; min-height: 90px; padding: 12px 12px 28px; border: 1px solid var(--wl-border); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; line-height: 1.7; resize: vertical; }
.wl-reading-quote-wrap textarea:focus { outline: none; border-color: var(--wl-accent); }
.wl-reading-quote-wrap small { position: absolute; right: 10px; bottom: 8px; color: var(--wl-text-muted); font-size: 11px; pointer-events: none; }

@media (max-width: 600px) {
    .wl-reading-fields { grid-template-columns: 1fr; }
    .wl-reading-cover-candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== 日签发布器 ========== */
.wl-daily-note-form {
    margin: 2px 0 8px;
    padding: 18px;
    border: 1px solid var(--wl-border-light);
    border-radius: 18px;
    background: linear-gradient(145deg, #fffdf8, #f7fbff);
}

.wl-daily-note-form[hidden],
.wl-moment-publish-fields[hidden] { display: none !important; }

.wl-daily-note-form-heading,
.wl-daily-template-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.wl-daily-note-form-heading h2,
.wl-daily-template-heading strong { margin: 0; color: var(--wl-text); font-size: 16px; }
.wl-daily-note-form-heading p { margin: 4px 0 0; color: var(--wl-text-muted); font-size: 12px; }
.wl-daily-note-required { padding: 3px 8px; border-radius: 99px; background: #fff0e1; color: #c66b1c; font-size: 11px; white-space: nowrap; }
.wl-daily-note-text-wrap { position: relative; margin: 16px 0 14px; }
.wl-daily-note-text { width: 100%; min-height: 150px; padding: 14px 14px 30px; border: 1px solid #eadfcf; border-radius: 13px; background: rgba(255,255,255,.82); color: var(--wl-text); font: inherit; font-size: 16px; line-height: 1.8; resize: vertical; touch-action: manipulation; }
.wl-daily-note-text:focus, .wl-daily-note-source-input:focus { outline: none; border-color: var(--wl-accent); }
.wl-daily-note-counter { position: absolute; right: 11px; bottom: 8px; color: var(--wl-text-muted); font-size: 12px; pointer-events: none; }
.wl-daily-note-source-label { display: block; margin: 0 0 7px; color: var(--wl-text-secondary); font-size: 13px; }
.wl-daily-note-source-label span { color: var(--wl-text-muted); font-size: 11px; }
.wl-daily-note-source-input { width: 100%; padding: 11px 12px; border: 1px solid var(--wl-border); border-radius: 10px; background: #fff; color: var(--wl-text); font: inherit; font-size: 14px; }
.wl-daily-template-heading { align-items: center; margin: 20px 0 10px; }
.wl-daily-template-heading span { color: var(--wl-text-muted); font-size: 12px; }
.wl-daily-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.wl-daily-template-choice { min-width: 0; padding: 8px; border: 1px solid transparent; border-radius: 11px; background: #fff; color: #3c332d; text-align: left; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wl-daily-template-choice:hover { transform: translateY(-1px); }
.wl-daily-template-choice.active { border-color: var(--wl-accent); box-shadow: 0 4px 12px rgba(255,130,0,.16); }
.wl-daily-template-choice strong, .wl-daily-template-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-daily-template-choice strong { margin-top: 7px; font-size: 11px; }
.wl-daily-template-choice small { margin-top: 2px; opacity: .7; font-size: 10px; }
.wl-daily-template-preview { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 46px; padding: 7px; border-radius: 7px; }
.wl-daily-template-preview i { display: block; width: 76%; height: 3px; border-radius: 8px; background: currentColor; opacity: .45; }
.wl-daily-template-preview i:nth-child(2) { width: 92%; }
.wl-daily-template-preview i:nth-child(3) { width: 58%; }

.wl-daily-note-sync-toggle { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding: 10px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: rgba(255,255,255,.6); cursor: pointer; }
.wl-daily-note-sync-toggle input { width: 16px; height: 16px; margin-right: 8px; accent-color: var(--wl-accent); vertical-align: middle; }
.wl-daily-note-sync-text { font-size: 14px; font-weight: 600; color: #333; }
.wl-daily-note-sync-hint { font-size: 12px; color: #999; margin-left: 24px; }

@media (max-width: 640px) {
    .wl-daily-note-text { min-height: 220px; }
}

/* 预览与内容卡片共用的 18 套色彩。 */
.wl-daily-template-paper { background: #fffaf0; color: #6d5945; }
.wl-daily-template-ink { background: #252432; color: #f7f0dd; }
.wl-daily-template-sunset { background: linear-gradient(135deg,#ffdfab,#f58c70); color: #7a342f; }
.wl-daily-template-forest { background: #dcebdc; color: #315c43; }
.wl-daily-template-ocean { background: #dbeefa; color: #265578; }
.wl-daily-template-lavender { background: #e9e1f4; color: #5f4b7c; }
.wl-daily-template-blush { background: #fae3e5; color: #884b5a; }
.wl-daily-template-lemon { background: #f8f2b7; color: #6f6720; }
.wl-daily-template-coffee { background: #e8d5c0; color: #69452d; }
.wl-daily-template-terracotta { background: #edc7b8; color: #824a38; }
.wl-daily-template-sky { background: #dff1fb; color: #39739a; }
.wl-daily-template-midnight { background: #242843; color: #e7ddff; }
.wl-daily-template-peach { background: #ffe0cf; color: #9b5a46; }
.wl-daily-template-mint { background: #d9f0e6; color: #397367; }
.wl-daily-template-plum { background: #e5d1db; color: #6d394e; }
.wl-daily-template-stone { background: #e8e8e4; color: #555652; }
.wl-daily-template-postcard { background: #f1e3c8; color: #785f3b; }
.wl-daily-template-choice.wl-daily-template-grid { background: #e5e8ec; color: #405060; }

@media (max-width: 640px) {
    .wl-daily-note-form { padding: 14px; }
    .wl-daily-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== 位置输入 ========== */
.wl-publish-location-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--wl-bg);
    border-radius: var(--wl-radius-sm);
    margin-bottom: 16px;
    color: var(--wl-text-muted);
    flex-wrap: nowrap;      /* 禁止换行，保持一行 */
    overflow: visible;       /* 允许下拉框溢出显示 */
}

.wl-publish-location-input {
    flex: 1;
    min-width: 0;       /* 允许收缩 */
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--wl-text);
    caret-color: transparent;   /* 隐藏光标，因为不需要手动输入 */
}

.wl-publish-location-input:focus {
    outline: none;
}

.wl-publish-location-input::placeholder {
    color: var(--wl-text-muted);
}

.wl-publish-location-input[readonly] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 地图选择按钮 */
.wl-location-map-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    color: var(--wl-accent);
    transition: background var(--wl-transition);
    flex-shrink: 0;
    -webkit-appearance: none;
    touch-action: manipulation;
}

.wl-location-map-btn:active {
    background: rgba(255, 130, 0, 0.15);
}

.wl-location-map-btn:hover {
    background: rgba(255, 130, 0, 0.1);
}

.wl-location-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 50%;
    color: var(--wl-text-muted);
    transition: all var(--wl-transition);
    flex-shrink: 0;
    -webkit-appearance: none;
    touch-action: manipulation;
}

.wl-location-clear-btn:hover {
    background: var(--wl-bg-hover);
    color: var(--wl-text);
}

/* ========== 地图弹窗 ========== */
.wl-map-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    -webkit-overflow-scrolling: touch;
}

.wl-map-modal.open {
    display: flex;
}

/* 手机端打开地图弹窗时禁止 body 滚动 */
body.wl-modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.wl-map-modal-content {
    background: var(--wl-bg-card);
    border-radius: var(--wl-radius);
    width: 100%;
    max-width: 640px;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--wl-shadow-lg);
}

/* 桌面端：弹窗宽度限制 */
@media (min-width: 641px) {
    .wl-map-modal-content {
        width: 90%;
        border-radius: var(--wl-radius);
    }
}

/* 手机端：弹窗占满全屏 */
@media (max-width: 640px) {
    .wl-map-modal-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

.wl-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--wl-border-light);
}

.wl-map-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.wl-map-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--wl-text-muted);
    transition: background var(--wl-transition);
}

.wl-map-close:hover {
    background: var(--wl-bg-hover);
    color: var(--wl-text);
}

/* ========== 下拉位置选择器（POI） ========== */
.wl-loc-dropdown {
    position: fixed;  /* fixed 定位避免被 overflow: auto 父容器剪裁 */
    z-index: 100050;  /* 高于编辑弹窗的 10020 */
    background: var(--wl-bg-card);
    border: 1px solid var(--wl-border-light);
    border-radius: var(--wl-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: none !important;   /* 默认隐藏（!important 防覆盖） */
    max-height: 0;
}

.wl-loc-dropdown.open {
    display: block !important;  /* 打开时显示；max-height 由 JS 动态计算 */
    animation: wl-loc-fade-in 0.18s ease;
}

@keyframes wl-loc-fade-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wl-loc-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--wl-border-light);
}

.wl-loc-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--wl-text);
    outline: none;
}

.wl-loc-search input::placeholder {
    color: var(--wl-text-muted);
}

.wl-loc-list {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.wl-loc-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--wl-border-light);
    transition: background var(--wl-transition);
}

.wl-loc-item:last-child {
    border-bottom: none;
}

.wl-loc-item:hover,
.wl-loc-item:active {
    background: rgba(255, 130, 0, 0.06);
}

.wl-loc-item-icon {
    font-size: 16px;
    line-height: 1.4;
    flex-shrink: 0;
}

.wl-loc-item-body {
    flex: 1;
    min-width: 0;
}

.wl-loc-item-name {
    font-size: 14px;
    color: var(--wl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-loc-item-addr {
    font-size: 12px;
    color: var(--wl-text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wl-loc-item-dist {
    color: var(--wl-accent);
    flex-shrink: 0;
}

.wl-loc-hint {
    padding: 18px 14px;
    font-size: 13px;
    color: var(--wl-text-muted);
    text-align: center;
    line-height: 1.7;
    display: none;
}

.wl-loc-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--wl-border);
    border-top-color: var(--wl-accent);
    border-radius: 50%;
    animation: wl-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

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

.wl-map-search-wrap {
    position: relative;
    padding: 12px 20px;
    border-bottom: 1px solid var(--wl-border-light);
}

.wl-map-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--wl-bg);
    border-radius: 22px;
}

.wl-map-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--wl-text);
}

.wl-map-search-box input:focus {
    outline: none;
}

.wl-map-search-box input::placeholder {
    color: var(--wl-text-muted);
}

#wl-map-locate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 50%;
    color: var(--wl-accent);
    transition: all var(--wl-transition);
    flex-shrink: 0;
    -webkit-appearance: none;
    touch-action: manipulation;
}

#wl-map-locate:active {
    background: rgba(255, 130, 0, 0.15);
}

#wl-map-locate:hover {
    background: rgba(255, 130, 0, 0.1);
}

#wl-map-locate.loading {
    animation: wl-spin 0.8s linear infinite;
}

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

.wl-map-search-results {
    display: none;
    position: absolute;
    top: calc(100% - 12px);
    left: 20px;
    right: 20px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--wl-bg-card);
    border-radius: var(--wl-radius-sm);
    box-shadow: var(--wl-shadow-lg);
    z-index: 10;
}

.wl-map-search-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--wl-border-light);
    transition: background var(--wl-transition);
}

.wl-map-search-item:last-child {
    border-bottom: none;
}

.wl-map-search-item:hover {
    background: var(--wl-bg-hover);
}

.wl-map-search-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--wl-text);
    margin-bottom: 2px;
}

.wl-map-search-item-addr {
    font-size: 12px;
    color: var(--wl-text-muted);
}

.wl-map-search-empty {
    padding: 20px;
    text-align: center;
    color: var(--wl-text-muted);
    font-size: 14px;
}

.wl-map-container {
    flex: 1;
    min-height: 360px;
    width: 100%;
}

.wl-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--wl-border-light);
}

.wl-map-selected {
    flex: 1;
    min-width: 0;
}

.wl-map-selected-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--wl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-map-selected-addr {
    display: block;
    font-size: 12px;
    color: var(--wl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-map-footer .wl-btn {
    flex-shrink: 0;
    padding: 8px 20px;
    border-radius: 20px;
}

/* ========== 上传区域 ========== */
.wl-upload-zone {
    border: 2px dashed var(--wl-border);
    border-radius: var(--wl-radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--wl-transition);
    margin-bottom: 16px;
}

.wl-upload-zone:hover,
.wl-upload-zone.dragover {
    border-color: var(--wl-accent);
    background: rgba(255, 130, 0, 0.04);
}

.wl-upload-zone-inner {
    pointer-events: none;
}

.wl-upload-icon {
    color: var(--wl-text-muted);
    margin-bottom: 12px;
}

.wl-upload-text {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--wl-text);
}

.wl-upload-hint {
    margin: 0;
    font-size: 12px;
    color: var(--wl-text-muted);
}

.wl-upload-live-hint {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255, 130, 0, 0.06);
    border-radius: var(--wl-radius-sm);
    color: var(--wl-text-secondary);
}

/* ========== 媒体列表 ========== */
.wl-publish-media-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.wl-publish-media-list:empty {
    display: none;
}

.wl-publish-media-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--wl-radius-sm);
    overflow: hidden;
    background: var(--wl-bg);
    cursor: move;
}

.wl-publish-media-item.dragging {
    opacity: 0.5;
}

.wl-publish-media-item.drag-over {
    border: 2px solid var(--wl-accent);
}

.wl-publish-media-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wl-publish-media-preview img,
.wl-publish-media-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-publish-media-type-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 8px;
    color: #fff;
    font-weight: 500;
    z-index: 2;
}

.wl-publish-media-type-badge.live {
    background: var(--wl-accent);
}

.wl-publish-media-type-badge.video {
    background: #333;
}

.wl-publish-media-type-badge.image {
    background: rgba(0, 0, 0, 0.4);
}

.wl-publish-media-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.6));
    opacity: 0;
    transition: opacity var(--wl-transition);
    z-index: 3;
}

.wl-publish-media-item:hover .wl-publish-media-overlay {
    opacity: 1;
}

.wl-publish-media-actions {
    display: flex;
    gap: 4px;
    padding: 6px;
}

.wl-publish-media-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--wl-text);
    font-size: 11px;
    transition: all var(--wl-transition);
}

.wl-publish-media-actions button:hover {
    background: #fff;
    transform: scale(1.1);
}

.wl-publish-media-actions .wl-action-delete {
    background: rgba(255, 77, 79, 0.9);
    color: #fff;
}

.wl-publish-media-actions .wl-action-delete:hover {
    background: #ff4d4f;
}

.wl-publish-media-caption {
    width: 100%;
    padding: 4px 6px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 11px;
    border-radius: 4px;
    text-align: center;
}

.wl-publish-media-caption::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.wl-publish-media-upload-progress {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 4;
}

.wl-publish-media-upload-progress .wl-spinner {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

/* ========== 快捷操作 ========== */
.wl-publish-quick-actions {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--wl-border-light);
}

.wl-quick-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    background: var(--wl-bg);
    color: var(--wl-text-secondary);
    font-size: 13px;
    transition: all var(--wl-transition);
}

.wl-quick-btn:hover {
    background: var(--wl-bg-hover);
    color: var(--wl-text);
}

/* ========== 动态照片声音设置 ========== */
.wl-publish-live-sound-wrap {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--wl-radius-sm);
    background: var(--wl-bg);
    border: 1px solid var(--wl-border-light);
}

.wl-publish-live-sound-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.wl-publish-live-sound-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--wl-accent);
}

.wl-publish-live-sound-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--wl-text);
}

.wl-publish-live-sound-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--wl-text-secondary);
    line-height: 1.4;
}

/* ========== Toast 提示 ========== */
.wl-publish-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--wl-text);
    color: #fff;
    border-radius: var(--wl-radius-sm);
    box-shadow: var(--wl-shadow-lg);
    z-index: 1000;
    opacity: 0;
    transition: all 0.3s ease;
    max-width: calc(100vw - 32px);
    width: auto;
    white-space: nowrap;
}

.wl-publish-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.wl-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4caf50;
    flex-shrink: 0;
}

.wl-toast-text {
    font-size: 14px;
    flex-shrink: 0;
}

.wl-toast-link {
    color: var(--wl-accent-light);
    font-weight: 500;
    margin-left: 2px;
    flex-shrink: 0;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 13px;
}

@media (max-width: 480px) {
    .wl-publish-toast {
        padding: 8px 12px;
        gap: 6px;
        bottom: 24px;
    }

    .wl-toast-text {
        font-size: 13px;
    }

    .wl-toast-link {
        font-size: 12px;
        padding: 2px 6px;
    }
}

/* ========== 配对视频弹窗 ========== */
.wl-pair-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}

.wl-pair-modal.open {
    display: flex;
}

.wl-pair-modal-content {
    background: var(--wl-bg-card);
    border-radius: var(--wl-radius);
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--wl-shadow-lg);
}

.wl-pair-modal-title {
    margin: 0 0 16px;
    font-size: 18px;
}

.wl-pair-modal-preview {
    margin-bottom: 16px;
    text-align: center;
}

.wl-pair-modal-preview img {
    max-height: 200px;
    border-radius: var(--wl-radius-sm);
    margin: 0 auto;
}

.wl-pair-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ========== 照片编辑器 ========== */
.wl-photo-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.72);
}

.wl-photo-editor-modal.open {
    display: flex;
}

.wl-photo-editor-dialog {
    width: min(100%, 440px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 18px;
    border-radius: 16px;
    background: var(--wl-bg-card);
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.28);
}

.wl-photo-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wl-photo-editor-header h3 {
    margin: 0;
    font-size: 17px;
    color: var(--wl-text);
}

.wl-photo-editor-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--wl-bg);
    color: var(--wl-text-secondary);
    font-size: 24px;
    line-height: 1;
}

.wl-photo-editor-tip {
    margin: 8px 0 14px;
    color: var(--wl-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.wl-photo-editor-stage {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: #171717;
    border-radius: 10px;
    touch-action: none;
    user-select: none;
    cursor: grab;
}

.wl-photo-editor-stage:active {
    cursor: grabbing;
}

.wl-photo-editor-crop-frame {
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    border: 2px solid #fff;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.52), 0 1px 3px rgba(0, 0, 0, 0.55);
    cursor: move;
    touch-action: none;
}

.wl-photo-editor-crop-frame i {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--wl-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.wl-photo-editor-crop-frame i[data-handle="nw"] { top: -10px; left: -10px; cursor: nwse-resize; }
.wl-photo-editor-crop-frame i[data-handle="ne"] { top: -10px; right: -10px; cursor: nesw-resize; }
.wl-photo-editor-crop-frame i[data-handle="se"] { right: -10px; bottom: -10px; cursor: nwse-resize; }
.wl-photo-editor-crop-frame i[data-handle="sw"] { bottom: -10px; left: -10px; cursor: nesw-resize; }

.wl-photo-editor-stage img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    transform-origin: center;
    pointer-events: none;
}

.wl-photo-editor-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.wl-photo-editor-ratios {
    display: inline-flex;
    gap: 5px;
    padding: 3px;
    border-radius: 9px;
    background: var(--wl-bg);
}

.wl-photo-editor-ratios button,
.wl-photo-editor-rotate {
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 7px;
    color: var(--wl-text-secondary);
    font-size: 12px;
    background: transparent;
}

.wl-photo-editor-ratios button.active {
    color: #fff;
    background: var(--wl-accent);
}

.wl-photo-editor-rotate {
    margin-left: auto;
    background: var(--wl-bg);
}

.wl-photo-editor-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--wl-text-secondary);
    font-size: 12px;
}

.wl-photo-editor-zoom input {
    flex: 1;
    accent-color: var(--wl-accent);
}

.wl-photo-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

body.wl-photo-editor-open {
    overflow: hidden;
}

/* ========== Vibe Coding / 项目演示发布器 ========== */
.wl-project-showcase-form {
    position: relative;
    margin: 6px 0 22px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--wl-accent) 22%, var(--wl-border-light));
    border-radius: 18px;
    background: linear-gradient(142deg, color-mix(in srgb, var(--wl-accent) 10%, #fffdf8), rgba(255,255,252,.72) 56%, color-mix(in srgb, #8b9d9b 10%, #fffdf8));
    box-shadow: 0 15px 36px rgba(53,47,38,.07), inset 0 1px rgba(255,255,255,.88);
}
.wl-project-showcase-form::before { content:""; position:absolute; width:270px; height:270px; top:-178px; right:-88px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--wl-accent) 22%,transparent), transparent 68%); pointer-events:none; }
.wl-project-showcase-heading { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.wl-project-showcase-heading > div > span { display:block; margin-bottom:7px; color:var(--wl-accent-dark); font-size:10px; font-weight:850; letter-spacing:.13em; }
.wl-project-showcase-heading h2 { margin:0; color:var(--wl-text); font-size:23px; line-height:1.18; letter-spacing:-.035em; }
.wl-project-showcase-heading p { max-width:430px; margin:8px 0 0; color:var(--wl-text-secondary); font-size:13px; line-height:1.65; }
.wl-project-showcase-heading > b { flex:0 0 auto; margin-top:4px; padding:7px 9px; border:1px solid color-mix(in srgb,var(--wl-accent) 25%,var(--wl-border)); border-radius:7px; background:rgba(255,255,253,.58); color:var(--wl-accent-dark); font-size:10px; letter-spacing:.08em; }
.wl-project-showcase-fields { display:grid; gap:8px; }
.wl-project-showcase-fields > label, .wl-project-notes-grid > label { color:var(--wl-text); font-size:12px; font-weight:760; }
.wl-project-showcase-fields label span, .wl-project-notes-grid label span { color:var(--wl-text-muted); font-weight:550; }
.wl-project-showcase-fields input, .wl-project-showcase-fields textarea, .wl-project-notes-grid textarea { box-sizing:border-box; width:100%; margin:0 0 6px; border:1px solid rgba(74,69,59,.14); border-radius:10px; background:rgba(255,255,253,.7); box-shadow:inset 0 1px rgba(255,255,255,.72); color:var(--wl-text); font:inherit; font-size:14px; transition:border-color var(--wl-transition), background var(--wl-transition), box-shadow var(--wl-transition); }
.wl-project-showcase-fields input { min-height:42px; padding:10px 12px; }
.wl-project-showcase-fields textarea { min-height:125px; padding:11px 12px; line-height:1.65; resize:vertical; }
.wl-project-showcase-fields input:focus, .wl-project-showcase-fields textarea:focus, .wl-project-notes-grid textarea:focus { outline:0; border-color:color-mix(in srgb,var(--wl-accent) 54%,var(--wl-border)); background:#fffefa; box-shadow:0 0 0 4px color-mix(in srgb,var(--wl-accent) 12%,transparent); }
.wl-project-showcase-meta-grid { display:grid; grid-template-columns:1fr 1.35fr; gap:10px; margin-top:2px; }
.wl-project-showcase-meta-grid label { display:grid; gap:6px; color:var(--wl-text); font-size:12px; font-weight:760; }
.wl-project-showcase-meta-grid input { margin:0; }
.wl-project-media-note { display:flex; align-items:flex-start; gap:10px; margin:18px 0; padding:11px 12px; border-left:2px solid var(--wl-accent); background:rgba(255,255,253,.48); color:var(--wl-text-secondary); font-size:12px; line-height:1.55; }
.wl-project-media-note strong { flex:0 0 auto; color:var(--wl-text); font-size:12px; }
.wl-project-feature-editor { padding:14px; border:1px solid var(--wl-border-light); border-radius:13px; background:rgba(250,249,245,.53); }
.wl-project-editor-head, .wl-project-feature-section-head, .wl-project-feature-node-main { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.wl-project-editor-head { margin-bottom:11px; }
.wl-project-editor-head strong { display:block; color:var(--wl-text); font-size:14px; }
.wl-project-editor-head small { display:block; margin-top:3px; color:var(--wl-text-muted); font-size:11px; }
.wl-project-editor-head button, .wl-project-add-feature, .wl-project-add-detail { border:0; background:transparent; color:var(--wl-accent-dark); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.wl-project-feature-section { margin:10px 0; padding:12px; border:1px solid rgba(74,69,59,.1); border-radius:11px; background:rgba(255,255,253,.7); }
.wl-project-feature-section-head > div { display:flex; align-items:center; gap:8px; min-width:0; }
.wl-project-feature-section-head span, .wl-project-feature-index { color:var(--wl-accent-dark); font-size:10px; font-weight:850; letter-spacing:.08em; }
.wl-project-feature-section-head input { min-width:0; border:0; border-bottom:1px solid var(--wl-border-light); background:transparent; color:var(--wl-text); font:inherit; font-size:14px; font-weight:780; }
.wl-project-feature-section-head button, .wl-project-feature-node-main button, .wl-project-detail-row button { border:0; background:transparent; color:var(--wl-text-muted); font:inherit; font-size:11px; cursor:pointer; }
.wl-project-feature-nodes { display:grid; gap:8px; margin:10px 0; }
.wl-project-feature-node { padding:10px; border-left:1px solid color-mix(in srgb,var(--wl-accent) 25%,var(--wl-border)); background:color-mix(in srgb,var(--wl-accent) 3%,rgba(255,255,253,.42)); }
.wl-project-feature-index { width:20px; padding-top:8px; }
.wl-project-feature-node-main > div { flex:1; min-width:0; }
.wl-project-feature-node input, .wl-project-feature-node textarea, .wl-project-detail-row input { box-sizing:border-box; width:100%; border:0; background:transparent; color:var(--wl-text); font:inherit; }
.wl-project-feature-node input { padding:5px 0; font-size:13px; font-weight:760; }
.wl-project-feature-node textarea { min-height:48px; padding:4px 0; color:var(--wl-text-secondary); font-size:12px; line-height:1.5; resize:vertical; }
.wl-project-detail-list { display:grid; gap:5px; margin:7px 0 0 28px; }
.wl-project-detail-row { display:flex; align-items:center; gap:7px; }
.wl-project-detail-row i { width:4px; height:4px; border-radius:50%; background:var(--wl-accent); opacity:.7; }
.wl-project-detail-row input { padding:4px 0; border-bottom:1px solid rgba(74,69,59,.08); color:var(--wl-text-secondary); font-size:11px; }
.wl-project-add-detail { margin:7px 0 0 28px; }
.wl-project-add-feature { margin-top:3px; }
.wl-project-notes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.wl-project-notes-grid label { display:grid; gap:7px; }
.wl-project-notes-grid textarea { min-height:120px; padding:10px; margin:0; font-size:12px; line-height:1.6; resize:vertical; }

/* ========== 响应式 ========== */
@media (max-width: 600px) {
    .wl-publish-page { padding: 0 0 64px; margin-left: -12px; margin-right: -12px; }

    .wl-publish-form {
        padding: 14px 14px 10px;
    }

    .wl-content-type-picker { padding: 12px; }
    .wl-content-type-heading { display: block; margin-bottom: 20px; }
    .wl-content-type-heading p { margin-top: 4px; text-align: left; }

    /* 手机端：所有发布类型单行横向滑动 */
    .wl-content-type-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-top: 6px;
        padding-bottom: 4px;
    }

    .wl-publish-bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        justify-content: space-between;
        margin-top: 0;
        padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--wl-bg-card) 96%, transparent);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--wl-border-light);
    }

    .wl-publish-submit-btn {
        flex: 1;
        max-width: none;
        padding: 11px 20px;
    }
    .wl-content-type-list::-webkit-scrollbar { display: none; }

    .wl-content-type {
        flex: 0 0 82px;
        min-height: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 5px;
        text-align: center;
    }
    .wl-content-type-icon { flex: 0 0 auto; margin-bottom: 5px; }
    .wl-content-type strong { font-size: 12px; }
    .wl-content-type small { display: none; }
    .wl-content-type-notice { margin-top: 10px; }

    .wl-publish-media-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .wl-project-showcase-form { padding:17px 15px; border-radius:15px; }
    .wl-project-showcase-heading { display:block; margin-bottom:17px; }
    .wl-project-showcase-heading h2 { font-size:21px; }
    .wl-project-showcase-heading > b { display:inline-block; margin-top:12px; }
    .wl-project-showcase-meta-grid, .wl-project-notes-grid { grid-template-columns:1fr; }
    .wl-project-notes-grid { gap:8px; }
    .wl-project-notes-grid textarea { min-height:96px; }
    .wl-project-feature-editor { padding:11px; }

    .wl-upload-zone {
        padding: 24px 16px;
    }
}

/* ========== 标签自动补全下拉框 ========== */
.wl-tag-suggest {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
    font-size: 14px;
}

.wl-tag-suggest-item {
    padding: 8px 14px;
    cursor: pointer;
    color: #333;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 1px;
    line-height: 1.4;
}

.wl-tag-suggest-item:hover,
.wl-tag-suggest-item.active {
    background: rgba(255, 130, 0, 0.08);
    color: #cc6800;
}

.wl-tag-suggest-item.active {
    background: rgba(255, 130, 0, 0.12);
}

.wl-tag-suggest-hash {
    color: #ff8200;
    font-weight: 600;
    margin-right: 1px;
}

.wl-tag-suggest-item strong {
    color: #ff8200;
    font-weight: 600;
}

/* POI 面板作为 body portal 固定定位；与输入框共享同一视口坐标系。 */
.wl-loc-dropdown {
    isolation: isolate;
    border-color: rgba(73, 69, 60, .13);
    border-radius: 16px;
    background: rgba(255, 255, 253, .96);
    box-shadow: 0 18px 44px rgba(47, 42, 34, .16), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
}
.wl-loc-dropdown.open { display:flex !important; flex-direction:column; animation: wl-loc-fade-in .18s cubic-bezier(.2,.8,.2,1); }
.wl-loc-dropdown.opens-upward.open { animation-name: wl-loc-fade-in-up; }
@keyframes wl-loc-fade-in-up {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.wl-loc-search { padding: 11px 13px; background: linear-gradient(135deg, rgba(239,245,241,.78), rgba(255,255,253,.58)); }
.wl-loc-search input { font-weight: 650; }
.wl-loc-list { flex:1 1 auto; min-height:0; max-height:none; }
.wl-loc-item { padding: 11px 13px; }
.wl-loc-item:hover, .wl-loc-item:active { background: color-mix(in srgb, var(--wl-accent) 8%, rgba(255,255,253,.8)); }
@media (max-width: 700px) {
    .wl-loc-dropdown { border-radius: 14px; }
}

/* ========== 发布页 · 玻璃设计系统集成 ==========
   仅当 body 处于玻璃模式（wl-glass-strong / wl-glass-soft）时生效；
   off 模式保持原实底样式不变。卡片背景改用 --wl-bg-card（半透），叠加
   backdrop-filter 模糊，透出 body 铺的 mesh 渐变，与全站毛玻璃统一。
   参数随后台「设计」里的模糊/圆角/透明滑块实时变化。 */

/* —— 一级卡片：大分区（替换实底渐变 / 补 backdrop-filter）—— */
body.wl-glass-strong .wl-content-type-picker,
body.wl-glass-soft  .wl-content-type-picker,
body.wl-glass-strong .wl-outfit-form,
body.wl-glass-soft  .wl-outfit-form,
body.wl-glass-strong .wl-focus-publish-form,
body.wl-glass-soft  .wl-focus-publish-form,
body.wl-glass-strong .wl-okr-publish-form,
body.wl-glass-soft  .wl-okr-publish-form,
body.wl-glass-strong .wl-todo-publish-form,
body.wl-glass-soft  .wl-todo-publish-form,
body.wl-glass-strong .wl-reading-form,
body.wl-glass-soft  .wl-reading-form,
body.wl-glass-strong .wl-daily-note-form,
body.wl-glass-soft  .wl-daily-note-form,
body.wl-glass-strong .wl-project-showcase-form,
body.wl-glass-soft  .wl-project-showcase-form,
body.wl-glass-strong .wl-upload-zone,
body.wl-glass-soft  .wl-upload-zone,
body.wl-glass-strong .wl-publish-visibility,
body.wl-glass-soft  .wl-publish-visibility {
    background: rgba(255, 255, 255, .40);
    backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(250%);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(250%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--glass-radius);
    box-shadow:
        0 12px 40px rgba(31, 35, 42, .18),
        inset 0 1px 1px rgba(255, 255, 255, .8),
        inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* 发布主表单：顶部承接导航栏，保留平角，避免与导航栏间留缝 */
body.wl-glass-strong .wl-publish-form,
body.wl-glass-soft  .wl-publish-form {
    background: rgba(255, 255, 255, .42);
    backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(250%);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(250%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-top: 1px solid rgba(255, 255, 255, .6);
    border-radius: 0 0 var(--glass-radius) var(--glass-radius);
    box-shadow:
        0 12px 40px rgba(31, 35, 42, .18),
        inset 0 1px 1px rgba(255, 255, 255, .8),
        inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* —— 二级小组件：内部卡片（轻玻璃，保留各自的圆角与边框色）—— */
body.wl-glass-strong .wl-content-type,
body.wl-glass-soft  .wl-content-type,
body.wl-glass-strong .wl-okr-kr-row,
body.wl-glass-soft  .wl-okr-kr-row,
body.wl-glass-strong .wl-todo-publish-group,
body.wl-glass-soft  .wl-todo-publish-group,
body.wl-glass-strong .wl-reading-book-chip,
body.wl-glass-soft  .wl-reading-book-chip,
body.wl-glass-strong .wl-reading-candidate,
body.wl-glass-soft  .wl-reading-candidate,
body.wl-glass-strong .wl-daily-template-choice,
body.wl-glass-soft  .wl-daily-template-choice,
body.wl-glass-strong .wl-project-feature-section,
body.wl-glass-soft  .wl-project-feature-section,
body.wl-glass-strong .wl-project-feature-editor,
body.wl-glass-soft  .wl-project-feature-editor,
body.wl-glass-strong .wl-focus-publish-preview,
body.wl-glass-soft  .wl-focus-publish-preview,
body.wl-glass-strong .wl-daily-note-sync-toggle,
body.wl-glass-soft  .wl-daily-note-sync-toggle,
body.wl-glass-strong .wl-outfit-editor-sticker,
body.wl-glass-soft  .wl-outfit-editor-sticker {
    background: var(--wl-bg-card);
    backdrop-filter: blur(calc(var(--glass-blur) * .72)) saturate(160%);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .72)) saturate(160%);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 4px 16px rgba(31, 35, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* 保护选中态：交给 .wl-content-type.active::before 的流光环，不在这里再画单色描边
      也删 inset 白高光，否则会在流光环内侧多一条白线 */
body.wl-glass-strong .wl-content-type.active,
body.wl-glass-soft  .wl-content-type.active {
    border: 1.5px solid color-mix(in srgb, var(--wl-accent) 70%, #ffffff);
    background: color-mix(in srgb, var(--wl-accent) 12%, rgba(255, 255, 255, .62));
    box-shadow:
        0 10px 30px color-mix(in srgb, var(--wl-accent) 28%, transparent);
}
body.wl-glass-strong .wl-daily-template-choice.active,
body.wl-glass-soft  .wl-daily-template-choice.active {
    border-color: var(--wl-accent);
    box-shadow: 0 4px 12px rgba(255, 130, 0, .16);
}

/* —— 输入控件：玻璃模式下由纯白改为半透，融入玻璃卡（保持可读）—— */
body.wl-glass-strong .wl-outfit-text-wrap textarea,
body.wl-glass-soft  .wl-outfit-text-wrap textarea,
body.wl-glass-strong .wl-okr-goal-select select,
body.wl-glass-soft  .wl-okr-goal-select select,
body.wl-glass-strong .wl-okr-new-goal-fields input,
body.wl-glass-soft  .wl-okr-new-goal-fields input,
body.wl-glass-strong .wl-okr-new-goal-fields textarea,
body.wl-glass-soft  .wl-okr-new-goal-fields textarea,
body.wl-glass-strong .wl-okr-kr-row input,
body.wl-glass-soft  .wl-okr-kr-row input,
body.wl-glass-strong .wl-okr-action-row input,
body.wl-glass-soft  .wl-okr-action-row input,
body.wl-glass-strong .wl-okr-action-row select,
body.wl-glass-soft  .wl-okr-action-row select,
body.wl-glass-strong .wl-okr-checkin-wrap textarea,
body.wl-glass-soft  .wl-okr-checkin-wrap textarea,
body.wl-glass-strong .wl-todo-publish-title-wrap input,
body.wl-glass-soft  .wl-todo-publish-title-wrap input,
body.wl-glass-strong .wl-todo-publish-group-title,
body.wl-glass-soft  .wl-todo-publish-group-title,
body.wl-glass-strong .wl-reading-field input,
body.wl-glass-soft  .wl-reading-field input,
body.wl-glass-strong .wl-daily-note-source-input,
body.wl-glass-soft  .wl-daily-note-source-input,
body.wl-glass-strong .wl-project-showcase-fields input,
body.wl-glass-soft  .wl-project-showcase-fields input,
body.wl-glass-strong .wl-project-showcase-fields textarea,
body.wl-glass-soft  .wl-project-showcase-fields textarea,
body.wl-glass-strong .wl-project-notes-grid textarea,
body.wl-glass-soft  .wl-project-notes-grid textarea {
    background: rgba(255, 255, 255, .72);
}

/* ============================================================
   内容类型选择器：「密集小卡」专属玻璃
   ----------------------------------------------------------------
   父级 .wl-content-type-picker 降权为透明染色框（不要厚玻璃抢戏）
   子级 .wl-content-type 升级为厚玻璃小方块（密集排列要有玻璃感）
   发布页专属彩色光晕（不让小卡对着一片白米黄糊背景）
   只在 glass 模式下生效；off 模式保留 base 实底样式
   ============================================================ */

/* 1. 父级 picker：几乎透明的染色容器，让小卡直透到外层彩色光晕
      不再叠白色，让 backdrop-filter 直接打穿到 publish-form 下面的彩色 */
body.wl-glass-strong .wl-content-type-picker,
body.wl-glass-soft  .wl-content-type-picker {
    position: relative;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--wl-accent) 5%, rgba(255,255,255,.04)),
        rgba(255,255,255,.02) 60%);
    backdrop-filter: blur(calc(var(--glass-blur) * .5)) saturate(160%);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .5)) saturate(160%);
    border: 1px dashed color-mix(in srgb, var(--wl-accent) 22%, rgba(255,255,255,.4));
    box-shadow: none;
    overflow: hidden;
    isolation: isolate;
}

/* 1b. picker 内嵌光（去掉彩色，改成中性白光雾，
       让玻璃采到明暗但绝不透视颜色） */
body.wl-glass-strong .wl-content-type-picker::before,
body.wl-glass-soft  .wl-content-type-picker::before {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(70% 70% at 30% 25%,
            rgba(255, 255, 255, .62), transparent 70%),
        radial-gradient(55% 55% at 75% 80%,
            rgba(255, 255, 255, .32), transparent 72%);
    filter: blur(22px);
    mix-blend-mode: screen;
    opacity: .9;
}
/* 保证 picker 文字/小卡在光晕之上 */
body.wl-glass-strong .wl-content-type-picker > *,
body.wl-glass-soft  .wl-content-type-picker > * {
    position: relative;
    z-index: 1;
}

/* 2. 子级 .wl-content-type：超透厚玻璃小方块
      - 底色透明 14%，让彩色光晕透出来成为玻璃色彩
      - blur 28px（不要 32：太大会糊掉彩色块）
      - 加 saturate(240%) + contrast(110%)（让彩色更鲜锐）
      - hairline 内描边 + 顶部 1px 高光 */
body.wl-glass-strong .wl-content-type,
body.wl-glass-soft  .wl-content-type {
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(28px) saturate(240%) contrast(110%);
    -webkit-backdrop-filter: blur(28px) saturate(240%) contrast(110%);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    box-shadow:
        0 4px 14px rgba(31, 35, 42, .10),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 0 0 1px rgba(255, 255, 255, .18);
}
body.wl-glass-strong .wl-content-type:hover,
body.wl-glass-soft  .wl-content-type:hover {
    background: rgba(255, 255, 255, .22);
    border-color: color-mix(in srgb, var(--wl-accent) 35%, rgba(255,255,255,.55));
    box-shadow:
        0 6px 18px rgba(31, 35, 42, .14),
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* 3. 选中态：保留玻璃 + 流光渐变描边 */
/*    基线已经在 .wl-content-type.active::before 设了 conic-gradient 环，
      这里只把背景调亮、外发光推强，把 border-color 留给 ::before；
      删 inset 白高光，否则 conic 流光环内侧会多一条白线 */
body.wl-glass-strong .wl-content-type.active,
body.wl-glass-soft  .wl-content-type.active {
    border: 1.5px solid color-mix(in srgb, var(--wl-accent) 70%, #ffffff);
    background: color-mix(in srgb, var(--wl-accent) 12%, rgba(255, 255, 255, .62));
    box-shadow:
        0 10px 30px color-mix(in srgb, var(--wl-accent) 28%, transparent);
}

/* 4. 小图标方块：玻璃小片 */
body.wl-glass-strong .wl-content-type-icon,
body.wl-glass-soft  .wl-content-type-icon {
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(8px) saturate(170%);
    -webkit-backdrop-filter: blur(8px) saturate(170%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 2px 6px rgba(31, 35, 42, .08);
}

/* 5. publish 页专属彩色光晕（核心承载体）
      多层径向，色彩更浓；mix-blend-mode: screen 让光晕"叠加"
      玻璃上方，避免被 .wl-publish-form 的 42% 白底吞掉
      glass-off 时隐藏 */
body.wl-glass-strong .wl-publish-page,
body.wl-glass-soft  .wl-publish-page {
    position: relative;
    isolation: isolate;
}
body.wl-glass-strong .wl-publish-page::before,
body.wl-glass-soft  .wl-publish-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 42% at 12% 10%,
            color-mix(in srgb, var(--wl-accent) 68%, transparent), transparent 68%),
        radial-gradient(40% 40% at 92% 14%,
            color-mix(in srgb, #ffb27a 75%, transparent), transparent 70%),
        radial-gradient(52% 52% at 50% 92%,
            color-mix(in srgb, #6dc6ff 62%, transparent), transparent 68%),
        radial-gradient(36% 36% at 88% 88%,
            color-mix(in srgb, #b78aff 60%, transparent), transparent 68%);
    filter: blur(36px) saturate(140%);
    mix-blend-mode: screen;
    opacity: .8;
}