/* ==========================================================================
   CC Our Story — 后台样式
   ========================================================================== */

/* 1. 基础 ---------------------------------------------------------------- */
*, *:before, *:after { box-sizing: border-box }

html, body { min-height: 100% }

body.admin {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.admin, body.auth-page {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 14px/1.7 var(--sans);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none }
a:hover { color: var(--pink-dark) }
h1, h2, h3 { margin: 0; font-weight: 400 }
p { margin: 0 }

/* 2. 图标 ---------------------------------------------------------------- */
.icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.15em;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden }

/* 3. 框架 ---------------------------------------------------------------- */
.admin-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.admin-main {
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 30px 34px 60px;
    background: var(--surface-soft);
}

/* 正文限宽：宽屏下不让表格和表单被拉成一整行，行长稳定，看着也不飘 */
.admin-canvas { max-width: 1120px; margin: 0 auto }

/* 4. 侧栏 ---------------------------------------------------------------- */
.admin-side {
    display: flex;
    flex-direction: column;
    gap: 26px;
    height: 100%;
    overflow-y: auto;
    padding: 26px 18px;
    border-right: 1px solid var(--line);
    background: var(--surface);
}

.admin-logo { font: 400 19px var(--serif); letter-spacing: .02em }
.admin-logo span { color: var(--pink-dark); font-weight: 700 }

.admin-side nav, .admin-side-foot { display: flex; flex-direction: column; gap: 3px }
.admin-side-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line) }

.admin-side a:not(.admin-logo) {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border-radius: 12px;
    color: var(--muted);
    font-size: 13px;
    transition: background-color .18s, color .18s;
}

.admin-side a:not(.admin-logo) .icon { font-size: 16px }
.admin-side a:not(.admin-logo):hover { background: var(--surface-muted); color: var(--ink) }
.admin-side a.is-active { background: var(--pink-soft); color: var(--pink-dark); font-weight: 700 }

/* 5. 顶栏与提示 ---------------------------------------------------------- */
.admin-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.admin-top p { color: var(--pink-dark); font: 700 8px Arial; letter-spacing: .25em; margin-bottom: 7px }
.admin-top h1 { font: 400 26px var(--serif) }

.admin-who { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px }

.admin-theme {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: var(--surface);
    color: var(--ink);
    font-size: 15px;
    cursor: pointer;
}

.admin-theme:hover { border-color: var(--pink); color: var(--pink-dark) }
.icon-sun, .icon-moon { display: none }
:root[data-theme="light"] .icon-moon, :root[data-theme="dark"] .icon-sun { display: block }

.admin-flash, .admin-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 13px;
    font-size: 13px;
}

.admin-flash { background: var(--card-mint); color: var(--ink) }
.admin-error { background: var(--pink-soft); color: var(--pink-dark) }

/* 6. 卡片与统计 ---------------------------------------------------------- */
.admin-panel {
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.admin-panel + .admin-panel { margin-top: 22px }

.admin-panel > h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    font: 400 19px var(--serif);
}

.admin-panel > h2 .icon { font-size: 17px; color: var(--pink-dark) }
.admin-panel-hint { margin: -10px 0 18px; color: var(--faint); font-size: 12px }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px }

.stat-card {
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.stat-card span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px }
.stat-card strong { display: block; margin-top: 9px; font: 400 27px var(--serif) }
.stat-card .icon { color: var(--pink-dark) }

/* 7. 表格 ---------------------------------------------------------------- */
.admin-table-wrap { overflow-x: auto }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px }
.admin-table th, .admin-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line) }
.admin-table th { color: var(--faint); font-size: 11px; font-weight: 400; letter-spacing: .05em }
.admin-table tr:last-child td { border-bottom: 0 }
.admin-table td.is-actions { white-space: nowrap; text-align: right }
.admin-table .title-cell { display: flex; align-items: center; gap: 8px }

.admin-moment-list { display: grid; gap: 10px }

.admin-moment-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
    transition: border-color .18s, background-color .18s;
}

.admin-moment-item:hover { border-color: var(--line-strong); background: var(--surface) }
.admin-moment-summary { min-width: 0 }
.admin-moment-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px }
.admin-moment-title > a { overflow: hidden; font: 400 16px var(--serif); text-overflow: ellipsis; white-space: nowrap }
.admin-moment-title > a:hover { color: var(--pink-dark) }

.admin-moment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 7px;
    color: var(--faint);
    font-size: 11px;
}

.admin-moment-meta > span:not(.tag) { display: inline-flex; align-items: center; gap: 5px }
.admin-moment-actions { display: flex; align-items: center; gap: 6px }
.admin-moment-actions form { display: inline-flex; margin: 0 }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 11px;
}

.tag.is-draft { background: var(--card-gold); color: var(--ink) }
.tag.is-locked { background: var(--pink-soft); color: var(--pink-dark) }
.tag.is-hidden { background: var(--surface-muted); color: var(--faint) }

.admin-empty { padding: 40px 0; text-align: center; color: var(--faint); font-size: 13px }

.admin-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 22px }

.admin-pagination a, .admin-pagination span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 11px;
    background: var(--surface-muted);
    font-size: 12px;
}

.admin-pagination .current { background: var(--ink); color: var(--paper) }

/* 8. 表单 ---------------------------------------------------------------- */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }

.field { display: block; margin-bottom: 16px }
.field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px }
.field small { display: block; margin-top: 6px; color: var(--faint); font-size: 11px }

.field input[type="text"],
.field input[type="url"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="datetime-local"],
.field select,
.field textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font: 13px/1.6 var(--sans);
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}

.field textarea { resize: vertical; min-height: 110px }

/* 选文件：浏览器自带的那个按钮太出戏，连按钮带框一起改成站点的样子 */
.field input[type="file"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    font: 12px/1.6 var(--sans);
    cursor: pointer;
    transition: border-color .18s, background-color .18s;
}

.field input[type="file"]:hover { border-color: var(--pink); background: var(--surface-soft) }
.field input[type="file"]:focus-visible { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft) }

.field input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 15px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface-muted);
    color: var(--ink);
    font: 12px var(--sans);
    cursor: pointer;
    transition: background-color .18s, border-color .18s, color .18s;
}

.field input[type="file"]:hover::file-selector-button { border-color: var(--pink); color: var(--pink-dark) }

/* 老一点的 WebKit 只认这个别名，写在一起会让整条规则失效，所以单独再来一遍 */
.field input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 7px 15px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface-muted);
    color: var(--ink);
    font: 12px var(--sans);
    cursor: pointer;
}

.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px var(--pink-soft);
}

.field-check { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 13px }
.field-check input { width: 16px; height: 16px; accent-color: var(--pink-dark) }

.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line) }

/* 9. 按钮 ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--ink);
    color: var(--paper);
    font: 13px var(--sans);
    cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s;
}

.btn:hover { background: var(--pink-dark); color: #fff }

.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink) }
.btn-ghost:hover { background: var(--surface-muted); border-color: var(--pink); color: var(--pink-dark) }

.btn-danger { background: transparent; border-color: var(--line-strong); color: var(--muted) }
.btn-danger:hover { background: var(--pink-soft); border-color: var(--pink); color: var(--pink-dark) }

.btn-small { padding: 6px 11px; font-size: 12px; border-radius: 10px }

.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px }

/* 10. 编辑器 ------------------------------------------------------------- */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start }

.editor-body textarea {
    min-height: 460px;
    font: 13px/1.75 ui-monospace, SFMono-Regular, Consolas, "Microsoft YaHei", monospace;
}

.editor-side .admin-panel { padding: 20px 22px }

.upload-drop {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    border: 1px dashed var(--line-strong);
    border-radius: 14px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

.upload-drop:hover { border-color: var(--pink); color: var(--pink-dark) }
.upload-drop input { display: none }

/* 11. 图片库 ------------------------------------------------------------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px }

.media-item {
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 15px;
    overflow: hidden;
    background: var(--surface);
    transition: border-color .18s, box-shadow .18s;
}

.media-item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm) }
.media-item > a { display: block; background: var(--surface-muted) }
.media-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover }

.media-item figcaption { display: grid; gap: 3px; padding: 10px 12px 11px }

/* 文件名是一串哈希，一行放不下就省略号收掉，完整地址挂在 title 和复制按钮上 */
.media-name {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--faint); font-size: 11px }

.media-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: none;
    color: var(--muted);
    font: 11px var(--sans);
    cursor: pointer;
    transition: border-color .18s, color .18s;
}

.media-copy:hover { border-color: var(--pink); color: var(--pink-dark) }
.media-copy .icon { font-size: 12px }

/* 12. 登录页 ------------------------------------------------------------- */
body.auth-page {
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--hero-bg);
}

.auth-card {
    width: min(390px, 100%);
    padding: 40px 36px 32px;
    border-radius: 26px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.auth-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto;
    border-radius: 18px;
    background: var(--pink-soft);
    color: var(--pink-dark);
    font-size: 24px;
}

.auth-eyebrow { margin: 19px 0 7px; color: var(--pink-dark); font: 700 8px Arial; letter-spacing: .25em }
.auth-card h1 { font: 400 26px var(--serif) }
.auth-hint { margin: 11px 0 24px; color: var(--muted); font-size: 12px; line-height: 1.8 }

.auth-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 10px;
    border-radius: 12px;
    background: var(--pink-soft);
    color: var(--pink-dark);
    font-size: 12px;
}

.auth-card label { display: block; margin-bottom: 14px; text-align: left }
.auth-card label > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px }

.auth-card input[type="text"], .auth-card input[type="password"] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--ink);
    font: 13px var(--sans);
    outline: none;
}

.auth-card input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft) }

.auth-card label.auth-remember { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--muted); font-size: 12px }
.auth-card label.auth-remember > input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--pink-dark) }

/* 这一行的 span 得压掉上面 label > span 的 margin-bottom，否则文字会比勾选框高出 7px */
.auth-card label.auth-remember > span { margin: 0; line-height: 1 }

.auth-card button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 13px;
    background: var(--ink);
    color: var(--paper);
    font: 14px var(--sans);
    cursor: pointer;
    transition: background-color .18s;
}

.auth-card button:hover { background: var(--pink-dark); color: #fff }
.auth-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--muted); font-size: 12px }

/* 13. 手机导航 ----------------------------------------------------------- */
/* 顶栏、底栏、更多面板都只服务窄屏，宽屏下整块不参与布局，PC 仍旧是左侧栏。 */
.admin-bar, .admin-tabs, .admin-sheet { display: none }

@keyframes sheet-fade { from { opacity: 0 } }
@keyframes sheet-rise { from { transform: translateY(100%) } }

/* 14. 响应式 ------------------------------------------------------------- */
@media (max-width: 1000px) {
    .editor-layout { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 760px) {
    body.admin { height: auto; overflow: auto }
    body.admin.sheet-open { overflow: hidden }

    .admin-shell { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100vh; overflow: visible }
    .admin-side { display: none }
    .admin-main { height: auto; overflow: visible; padding: 70px 15px calc(80px + env(safe-area-inset-bottom)) }

    /* 顶栏：站名加配色开关，其它交给页面自己 */
    .admin-bar {
        position: fixed;
        z-index: 30;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 54px;
        padding: 0 15px;
        border-bottom: 1px solid var(--line);
        background: var(--surface);
    }

    .admin-bar .admin-logo { font-size: 17px }
    .admin-bar .admin-theme { width: 32px; height: 32px; font-size: 14px }

    /* 底栏：四个常用页面加一个「更多」，格子等宽 */
    .admin-tabs {
        position: fixed;
        z-index: 30;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--line);
        background: var(--surface);
    }

    .admin-tabs a, .admin-tabs button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 56px;
        padding: 0 2px;
        border: 0;
        background: none;
        color: var(--muted);
        font: 10px/1.2 var(--sans);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .admin-tabs a:before, .admin-tabs button:before {
        content: "";
        position: absolute;
        top: 7px;
        width: 46px;
        height: 26px;
        border-radius: 999px;
        transition: background-color .18s;
    }

    .admin-tabs .icon { position: relative; font-size: 19px }
    .admin-tabs span { position: relative }
    .admin-tabs .is-active { color: var(--pink-dark) }
    .admin-tabs .is-active span { font-weight: 700 }
    .admin-tabs .is-active:before { background: var(--pink-soft) }

    /* 更多：从底部推上来的一张卡片，装不常用的入口 */
    .admin-sheet.is-open { display: block; position: fixed; inset: 0; z-index: 40 }

    .admin-sheet-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); animation: sheet-fade .2s ease }

    .admin-sheet-card {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 9px 15px calc(18px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        animation: sheet-rise .24s cubic-bezier(.32, .72, 0, 1);
    }

    .admin-sheet-handle { width: 38px; height: 4px; margin: 0 auto 15px; border-radius: 999px; background: var(--line-strong) }
    .admin-sheet-who { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; color: var(--muted); font-size: 12px }
    .admin-sheet-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px }

    .admin-sheet-links a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface-soft);
        font-size: 13px;
    }

    .admin-sheet-links .icon { font-size: 17px; color: var(--muted) }
    .admin-sheet-links a.is-active { border-color: var(--pink); background: var(--pink-soft); color: var(--pink-dark) }
    .admin-sheet-links a.is-active .icon { color: var(--pink-dark) }
    .admin-sheet-dismiss { justify-content: center; width: 100%; margin-top: 14px }

    /* 顶栏已经有配色开关和站名，页面头部只留标题 */
    .admin-top { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px }
    .admin-top h1 { font-size: 23px }
    .admin-who { display: none }

    .admin-panel { padding: 20px 16px }
    .admin-moment-item { grid-template-columns: minmax(0, 1fr); gap: 13px }
    .admin-moment-actions { padding-top: 12px; border-top: 1px solid var(--line) }
    .admin-moment-actions .btn { flex: 1; justify-content: center }
    .admin-moment-actions form { display: flex; flex: 1 }
    .admin-moment-actions form .btn { width: 100% }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important }
    .admin-sheet-mask, .admin-sheet-card { animation: none !important }
}