:root {
    --bg: #f4f7fb;
    --text: #0f172a;
    --muted: #64748b;
    --line: rgba(15, 23, 42, .09);
    --glass: rgba(255,255,255,.72);
    --glass-strong: rgba(255,255,255,.9);
    --shadow: 0 24px 70px rgba(15, 23, 42, .14);
    --shadow-soft: 0 10px 32px rgba(15, 23, 42, .08);
    --radius-2xl: 32px;
    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --primary: #0a84ff;
    --primary-dark: #0066db;
    --danger: #ff3b30;
    --success: #34c759;
    --warning-bg: rgba(255, 214, 10, .18);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(90, 200, 250, .30) 0, transparent 34%),
        radial-gradient(circle at 78% 8%, rgba(255, 45, 85, .14) 0, transparent 28%),
        radial-gradient(circle at 18% 100%, rgba(191, 90, 242, .12) 0, transparent 30%),
        var(--bg);
    color: var(--text);
    overflow-x: hidden;
}
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; line-height: 1.05; }
h2 { margin-bottom: 0; letter-spacing: -.02em; }
h3 { margin-bottom: 8px; }
.aurora { position: fixed; border-radius: 999px; filter: blur(16px); opacity: .55; pointer-events: none; z-index: 0; }
.aurora-a { width: 450px; height: 450px; background: rgba(10,132,255,.14); top: -160px; right: 5%; }
.aurora-b { width: 540px; height: 540px; background: rgba(255,45,85,.10); bottom: -230px; left: 12%; }
.aurora-c { width: 380px; height: 380px; background: rgba(52,199,89,.08); top: 44%; right: -150px; }
.glass {
    background: var(--glass);
    backdrop-filter: blur(30px) saturate(1.25);
    -webkit-backdrop-filter: blur(30px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.76);
    box-shadow: var(--shadow);
}
.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 292px 1fr;
    gap: 24px;
    padding: 24px;
    position: relative;
    z-index: 2;
}
.auth-shell { display: block; padding: 28px; }
.main { min-width: 0; display: grid; gap: 18px; align-content: start; }
.auth-main { min-height: calc(100vh - 56px); align-content: center; }
.mobile-topbar, .mobile-overlay { display: none; }
.sidebar {
    border-radius: var(--radius-2xl);
    padding: 22px;
    min-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 24px;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sidebar-close { display: none; }
.brand, .mobile-brand, .login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-weight: 780;
    font-size: 18px;
}
.login-brand { margin-bottom: 34px; }
.brand-mark {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, #f9fbff, #e8f2ff);
    box-shadow: inset 0 0 0 1px rgba(10,132,255,.08);
}
.account-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(255,255,255,.78);
    min-width: 0;
}
.account-card p { margin: 3px 0 0; font-size: 13px; word-break: break-all; }
.avatar-pill {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: linear-gradient(135deg, #dfefff, #ffffff);
    color: var(--primary);
}
.nav { display: grid; gap: 8px; }
.nav a {
    color: var(--text);
    padding: 12px 14px;
    border-radius: 16px;
    font-weight: 660;
    opacity: .82;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav a:hover,
.nav a.active { background: rgba(255,255,255,.86); opacity: 1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.sidebar-footer { margin-top: auto; display: grid; gap: 12px; }
.logout-form { margin: 0; }
.topbar {
    border-radius: var(--radius-2xl);
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.eyebrow { color: var(--primary); text-transform: uppercase; letter-spacing: .14em; font-weight: 760; font-size: 12px; margin-bottom: 8px; }
.muted { color: var(--muted); }
.soft-note { font-size: 13px; }
.card-label { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hint { margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; color: #806000; background: var(--warning-bg); font-size: 13px; }
.actions, .row-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.primary-button, .secondary-button, .ghost-button, .mini, .icon-button, .inline-button {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.primary-button {
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
    color: #fff;
    padding: 12px 18px;
    font-weight: 760;
    box-shadow: 0 12px 24px rgba(10,132,255,.26);
}
.primary-button.large { padding: 14px 18px; }
.secondary-button { background: var(--glass-strong); color: var(--text); padding: 12px 18px; font-weight: 750; }
.ghost-button { width: 100%; padding: 12px 16px; background: rgba(255,255,255,.64); color: var(--text); font-weight: 700; }
.ghost-link { color: var(--muted); font-weight: 700; }
.mini { padding: 8px 11px; background: rgba(255,255,255,.82); color: var(--text); font-weight: 700; font-size: 13px; border: 1px solid rgba(255,255,255,.72); display: inline-flex; align-items: center; justify-content: center; }
.mini.danger { color: var(--danger); }
.icon-button {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,.82);
    color: var(--text);
    font-size: 22px;
    border: 1px solid rgba(255,255,255,.72);
}
.primary-button:hover, .secondary-button:hover, .ghost-button:hover, .mini:hover, .icon-button:hover { transform: translateY(-1px); }
.auth-wrap {
    min-height: calc(100vh - 56px);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .82fr);
    gap: 24px;
    align-items: stretch;
}
.auth-side, .auth-card { border-radius: var(--radius-2xl); padding: clamp(26px, 5vw, 48px); }
.auth-side { display: flex; flex-direction: column; justify-content: center; }
.auth-card { align-self: center; }
.auth-lead { max-width: 560px; font-size: 16px; line-height: 1.7; }
.feature-list { display: grid; gap: 16px; margin-top: 28px; }
.feature-item { display: flex; gap: 12px; align-items: flex-start; }
.feature-item span { color: var(--primary); font-weight: 800; font-size: 22px; line-height: 1; }
.feature-item p { margin-bottom: 0; }
.hero-icon { width: 74px; height: 74px; display: grid; place-items: center; font-size: 38px; border-radius: 25px; background: rgba(255,255,255,.78); margin-bottom: 20px; }
.stack { display: grid; gap: 15px; }
label { display: grid; gap: 8px; color: var(--muted); font-weight: 650; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="file"], select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.84);
    border-radius: 16px;
    padding: 13px 14px;
    color: var(--text);
    outline: none;
}
textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.55;
}
input:focus, select:focus, textarea:focus { border-color: rgba(10,132,255,.5); box-shadow: 0 0 0 4px rgba(10,132,255,.11); }
.toast {
    border-radius: 18px;
    padding: 13px 16px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 14px 40px rgba(31,41,55,.1);
}
.toast.success { border-color: rgba(52,199,89,.35); color: #136b2f; }
.toast.danger { border-color: rgba(255,59,48,.35); color: #9f1d16; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(180px, 1fr)); gap: 16px; }
.storage-card, .mini-stat, .stat-card {
    border-radius: var(--radius-xl);
    padding: 20px;
    display: grid;
    gap: 10px;
}
.storage-card strong, .mini-stat strong { font-size: 28px; letter-spacing: -.03em; }
.button-card {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(255,255,255,.72);
    color: var(--text);
    cursor: pointer;
}
.button-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(31,41,55,.12);
}

.storage-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-foot { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.meter, .tiny-meter { height: 9px; background: rgba(16,24,40,.08); border-radius: 999px; overflow: hidden; }
.tiny-meter { height: 6px; margin-top: 7px; min-width: 110px; }
.meter span, .tiny-meter span { display: block; height: 100%; background: linear-gradient(90deg, #007aff, #5ac8fa); border-radius: inherit; }
.file-panel { border-radius: var(--radius-2xl); padding: 22px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; }
.panel-head p { margin-bottom: 0; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.file-tile {
    min-height: 176px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: space-between;
    border-radius: var(--radius-lg);
    padding: 16px;
    background: rgba(255,255,255,.64);
    border: 1px solid rgba(255,255,255,.78);
    transition: transform .16s ease, box-shadow .16s ease;
}
.file-tile:hover { transform: translateY(-2px); box-shadow: 0 18px 45px rgba(31,41,55,.12); }
.tile-open { color: var(--text); display: grid; gap: 10px; min-width: 0; }
.tile-open strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.file-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 30px;
    background: linear-gradient(145deg, #fff, #edf4ff);
}
.file-icon.folder { background: linear-gradient(145deg, #fff7d6, #ffe58a); }
.tile-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tile-actions form, .row-actions form { margin: 0; }
.empty-state { text-align: center; padding: 50px 16px; }
.empty-icon { margin: 0 auto 14px; width: 80px; height: 80px; display: grid; place-items: center; border-radius: 28px; font-size: 42px; background: rgba(255,255,255,.72); }
.modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15,23,42,.32);
    z-index: 80;
}
.modal[hidden] { display: none; }
.modal-card { width: min(560px, 100%); max-height: min(90vh, 760px); overflow: auto; border-radius: var(--radius-2xl); padding: 26px; position: relative; }
.modal-close { position: absolute; right: 18px; top: 16px; border: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.82); cursor: pointer; font-size: 24px; }
.drop-zone {
    position: relative;
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 170px;
    border: 1.5px dashed rgba(10,132,255,.35);
    border-radius: 24px;
    background: rgba(255,255,255,.58);
    text-align: center;
    padding: 22px;
    cursor: pointer;
}
.drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-zone.is-dragging { background: rgba(10,132,255,.08); border-color: rgba(10,132,255,.8); }
.drop-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 20px; font-size: 30px; background: rgba(255,255,255,.85); }
.selected-files { border-radius: 18px; border: 1px solid rgba(255,255,255,.72); background: rgba(255,255,255,.55); overflow: hidden; }
.selected-summary, .selected-file-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,.06); }
.selected-file-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-file-row small, .selected-summary span { color: var(--muted); flex: 0 0 auto; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat-card span { color: var(--muted); font-weight: 700; }
.stat-card strong { font-size: 34px; letter-spacing: -.04em; }
.stat-card small { color: var(--muted); }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 16px; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.notice-card { display: grid; gap: 4px; border-radius: 18px; padding: 14px; background: rgba(10,132,255,.08); border: 1px solid rgba(10,132,255,.14); }
.quick-panel { align-content: start; }
.quick-link { display: flex; gap: 14px; align-items: center; color: var(--text); padding: 15px; border-radius: 18px; background: rgba(255,255,255,.56); border: 1px solid rgba(255,255,255,.72); margin-bottom: 12px; }
.quick-link span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.8); }
.quick-link small { display: block; color: var(--muted); margin-top: 2px; }
.hero-pill, .badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 6px 10px; font-weight: 760; font-size: 12px; }
.hero-pill { background: rgba(52,199,89,.12); color: #147b35; }
.badge.ok { background: rgba(52,199,89,.14); color: #147b35; }
.badge.off { background: rgba(100,116,139,.14); color: #475569; }
.badge.info, .file-badge { background: rgba(10,132,255,.12); color: #0868c9; }
.badge.admin { background: rgba(191,90,242,.13); color: #7e22ce; }
.folder-badge { background: rgba(255,204,0,.18); color: #8a6200; }
.toolbar-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.advanced-filter { display: grid; grid-template-columns: minmax(220px, 1fr) 160px 160px auto auto; align-items: end; }
.table-wrap { overflow: auto; border-radius: 20px; border: 1px solid rgba(255,255,255,.72); }
table { width: 100%; border-collapse: collapse; min-width: 860px; background: rgba(255,255,255,.54); }
th, td { text-align: left; padding: 14px; border-bottom: 1px solid rgba(15,23,42,.07); vertical-align: middle; }
th { color: var(--muted); font-size: 13px; font-weight: 760; background: rgba(255,255,255,.42); }
tr:last-child td { border-bottom: 0; }
.empty-table { padding: 24px; text-align: center; }
.checkline { display: flex; align-items: center; gap: 10px; color: var(--text); }
.checkline input { width: auto; }
.wrap-mobile { flex-wrap: wrap; }
@media (max-width: 1160px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .dashboard-grid, .admin-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid.three { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 10px;
        z-index: 25;
        margin: 14px 14px 0;
        padding: 12px 14px;
        border-radius: 20px;
    }
    .shell { grid-template-columns: 1fr; gap: 16px; padding: 14px; padding-top: 10px; }
    .sidebar {
        position: fixed;
        left: 14px;
        top: 14px;
        bottom: 14px;
        width: min(84vw, 320px);
        min-height: auto;
        z-index: 30;
        transform: translateX(-115%);
        transition: transform .22s ease;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-close { display: inline-grid; }
    .mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .28);
        z-index: 24;
    }
    body.sidebar-open .mobile-overlay { display: block; }
    .topbar { flex-direction: column; align-items: stretch; }
    .compact-mobile { padding: 22px; }
    .advanced-filter { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .main { gap: 14px; }
    .auth-shell { padding: 14px; }
    .auth-main { min-height: calc(100vh - 28px); }
    .auth-wrap { min-height: auto; }
    .stats-grid, .form-grid.two, .advanced-filter { grid-template-columns: 1fr; }
    .file-grid { grid-template-columns: 1fr; }
    .toolbar-form { display: grid; grid-template-columns: 1fr; }
    .topbar, .file-panel, .storage-card, .mini-stat, .stat-card, .auth-card, .auth-side { padding: 20px; }
    .shell { padding: 12px; }
    .mobile-topbar { margin: 12px 12px 0; }
    .top-actions .primary-button, .top-actions .secondary-button, .actions .primary-button, .actions .secondary-button { width: 100%; }
    .actions { align-items: stretch; }
    .selected-summary, .selected-file-row { display: grid; gap: 4px; }
}
@media (max-width: 620px) {
    h1 { font-size: 32px; }
    .panel-head { align-items: flex-start; flex-direction: column; }
    .row-actions, .stacked-mobile { flex-direction: column; align-items: stretch; }
    .row-actions .mini, .row-actions a.mini, .row-actions form, .tile-actions .mini, .tile-actions a.mini, .tile-actions form { width: 100%; }
    .tile-actions { flex-direction: column; align-items: stretch; }
    .modal { padding: 12px; }
    .modal-card { padding: 22px; border-radius: 24px; }
}

/* 桌面端紧凑登录 / 初始化界面 */
body.auth-page {
    min-height: 100vh;
}
body.auth-page .shell.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
body.auth-page .main.auth-main {
    width: 100%;
    max-width: 480px;
    min-height: 0;
    display: block;
    align-content: unset;
}
body.auth-page .toast {
    margin: 0 0 14px;
}
.simple-auth {
    width: 100%;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.simple-login {
    width: 440px;
    max-width: 100%;
    padding: 34px;
    border-radius: 28px;
}
.setup-login {
    width: 480px;
}
.simple-login h1 {
    font-size: 40px;
    line-height: 1.08;
    margin-bottom: 8px;
}
.simple-login p.muted {
    margin-bottom: 18px;
}
.simple-login .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}
.login-brand.compact {
    margin-bottom: 24px;
    font-size: 17px;
}
.auth-form.stack {
    gap: 13px;
}
.auth-form label {
    gap: 7px;
}
.auth-foot {
    margin: 15px 0 0;
    font-size: 13px;
    text-align: center;
}
.simple-login .primary-button.large {
    width: 100%;
    margin-top: 4px;
    padding: 13px 18px;
}
.simple-login input[type="email"],
.simple-login input[type="password"],
.simple-login input[type="text"] {
    background: rgba(255,255,255,.94);
    padding: 12px 14px;
    border-radius: 15px;
}
@media (min-width: 721px) {
    body.auth-page .aurora-a { width: 360px; height: 360px; top: -120px; right: 10%; }
    body.auth-page .aurora-b { width: 420px; height: 420px; bottom: -190px; left: 8%; }
    body.auth-page .aurora-c { width: 280px; height: 280px; top: 46%; right: -120px; }
}
@media (max-width: 720px) {
    body.auth-page .shell.auth-shell {
        padding: 14px;
        align-items: center;
    }
    body.auth-page .main.auth-main {
        max-width: none;
    }
    .simple-login, .setup-login {
        width: 100%;
        border-radius: 24px;
        padding: 22px;
    }
    .simple-login h1 {
        font-size: 32px;
    }
    .login-brand.compact {
        margin-bottom: 22px;
    }
}


/* 在线预览、视频播放、软广告 */
.preview-tile {
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.preview-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
    display: block;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.86);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.03);
}
.preview-thumb img,
.preview-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(15,23,42,.42));
}
.play-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.86);
    color: var(--primary);
    font-size: 18px;
    padding-left: 3px;
    z-index: 2;
    box-shadow: 0 12px 30px rgba(15,23,42,.16);
}
.preview-modal-card {
    width: min(1080px, 96vw);
    max-height: 92vh;
    overflow: hidden;
}
.preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding-right: 42px;
}
.preview-head h2 {
    margin: 0;
    font-size: 20px;
    word-break: break-word;
}
.preview-stage {
    min-height: 260px;
    max-height: calc(92vh - 128px);
    display: grid;
    place-items: center;
    border-radius: 22px;
    overflow: auto;
    background: rgba(15,23,42,.86);
}
.preview-stage img {
    max-width: 100%;
    max-height: calc(92vh - 150px);
    display: block;
    object-fit: contain;
}
.preview-stage video {
    width: 100%;
    max-height: calc(92vh - 150px);
    display: block;
    background: #000;
}
.sidebar-ad, .auth-ad, .ad-mini-card, .ad-link {
    text-decoration: none;
}
.sidebar-ad {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    margin-bottom: 12px;
    border-radius: 18px;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(226,244,255,.78));
    border: 1px solid rgba(255,255,255,.86);
}
.sidebar-ad span { color: var(--muted); font-size: 12px; }
.sidebar-ad strong { color: var(--primary); font-size: 15px; }
.auth-ad {
    display: block;
    text-align: center;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--primary);
    background: rgba(10,132,255,.08);
    border: 1px solid rgba(10,132,255,.16);
    font-weight: 700;
    font-size: 13px;
}
.ad-mini-card {
    color: var(--text);
    transition: transform .16s ease, box-shadow .16s ease;
}
.ad-mini-card:hover, .ad-link:hover, .sidebar-ad:hover, .auth-ad:hover {
    transform: translateY(-1px);
}
.field-help {
    margin-top: -7px;
    margin-bottom: 0;
    font-size: 12px;
}
@media (max-width: 720px) {
    .preview-head {
        display: grid;
        padding-right: 34px;
    }
    .preview-head .secondary-button {
        width: 100%;
        text-align: center;
    }
    .preview-stage {
        min-height: 220px;
    }
}

/* 页面底部备案号 */
.site-icp-footer {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 16px 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}
.site-icp-footer a {
    color: rgba(100,116,139,.92);
    font-weight: 600;
}
.site-icp-footer a:hover {
    color: var(--primary);
}
body.auth-page .shell.auth-shell {
    min-height: calc(100vh - 48px);
}
@media (max-width: 720px) {
    .site-icp-footer {
        padding-bottom: 14px;
        font-size: 12px;
    }
    body.auth-page .shell.auth-shell {
        min-height: calc(100vh - 42px);
    }
}

/* 外链分享与更柔和的推荐位 */
.share-result {
    border-radius: var(--radius-xl);
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(180px, .6fr) minmax(0, 1.4fr);
    gap: 14px;
    align-items: center;
}
.share-result p { margin: 4px 0 0; }
.copy-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.copy-line input {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.78);
    border-radius: 999px;
    padding: 12px 14px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
}
.support-card {
    color: var(--text);
    text-decoration: none;
    background: rgba(255,255,255,.55);
}
.support-card strong { font-size: 22px; }
.quick-link.ad-link.subtle,
.sidebar-ad,
.auth-ad {
    opacity: .82;
}
.quick-link.ad-link.subtle {
    background: rgba(255,255,255,.42);
}
.quick-link.ad-link.subtle strong,
.sidebar-ad strong {
    color: var(--text);
}
.public-share-wrap {
    min-height: calc(100vh - 110px);
    display: grid;
    place-items: center;
    padding: 24px;
}
.public-share-card {
    width: min(1080px, 100%);
    border-radius: var(--radius-2xl);
    padding: clamp(22px, 4vw, 36px);
    display: grid;
    gap: 20px;
}
.public-share-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}
.public-share-head h1 {
    font-size: clamp(28px, 4vw, 44px);
    word-break: break-word;
}
.public-preview-stage {
    min-height: 280px;
    border-radius: 26px;
    overflow: hidden;
    background: rgba(15,23,42,.88);
    display: grid;
    place-items: center;
}
.public-preview-stage img {
    max-width: 100%;
    max-height: 72vh;
    display: block;
    object-fit: contain;
}
.public-preview-stage video {
    width: 100%;
    max-height: 72vh;
    display: block;
    background: #000;
}
.public-file-placeholder {
    text-align: center;
    color: #fff;
    padding: 42px 16px;
}
.public-file-placeholder .muted { color: rgba(255,255,255,.72); }
.public-share-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: var(--muted);
    font-size: 13px;
}
.public-share-meta a { color: var(--muted); font-weight: 700; }
.share-filter { grid-template-columns: minmax(260px, 1fr) 160px auto auto; }
@media (max-width: 720px) {
    .share-result,
    .copy-line,
    .public-share-head,
    .share-filter {
        grid-template-columns: 1fr;
    }
    .public-share-head {
        display: grid;
    }
    .public-share-head .primary-button,
    .copy-line .secondary-button {
        width: 100%;
        text-align: center;
    }
    .public-share-wrap { padding: 12px; }
    .public-preview-stage { min-height: 220px; border-radius: 20px; }
}
.public-shell {
    display: block;
    padding: 24px;
}
.public-main {
    display: block;
}
@media (max-width: 720px) {
    .public-shell { padding: 12px; }
}

/* 后台注册开关与可配置推荐位 */
.settings-divider {
    height: 1px;
    margin: 4px 0;
    background: rgba(15,23,42,.08);
}
.panel-head.inline {
    margin: 4px 0 0;
}
.center-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.primary-button.full,
.center-button.full {
    width: 100%;
}
.auth-ad {
    display: grid;
    gap: 3px;
    color: var(--text);
    background: rgba(255,255,255,.54);
    border-color: rgba(255,255,255,.78);
    box-shadow: none;
}
.auth-ad strong {
    font-size: 13px;
    color: var(--text);
}
.auth-ad span {
    color: var(--muted);
    font-weight: 600;
    line-height: 1.45;
}
.sidebar-ad strong {
    line-height: 1.45;
    font-size: 13px;
    font-weight: 650;
}


/* 可配置登录页提示 */
.login-notice {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--text);
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(255,255,255,.82);
    font-size: 13px;
    line-height: 1.55;
}
.login-notice strong {
    font-size: 13px;
    color: var(--text);
}
.login-notice span {
    color: var(--muted);
    font-weight: 600;
}
.login-preview-card {
    background: rgba(255,255,255,.48);
    border-color: rgba(255,255,255,.78);
}

/* WPS / Office 在线预览 */
.file-icon.office-icon {
    background: linear-gradient(145deg, #fff, #eef7ff);
    color: var(--primary);
}
.office-file .file-icon {
    box-shadow: inset 0 0 0 1px rgba(10,132,255,.08);
}
.preview-stage .office-preview-frame,
.office-preview-frame {
    width: 100%;
    height: min(72vh, 780px);
    min-height: 520px;
    border: 0;
    display: block;
    background: #fff;
    border-radius: 18px;
}
.preview-stage:has(.office-preview-frame) {
    place-items: stretch;
    padding: 0;
    background: rgba(255,255,255,.72);
}
.plain-preview-page {
    min-height: 100vh;
    background: var(--bg);
}
.office-preview-page {
    min-height: 100vh;
    padding: 16px;
    display: grid;
    gap: 14px;
    align-content: start;
}
.office-preview-toolbar {
    border-radius: 24px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.office-preview-toolbar h1 {
    font-size: clamp(20px, 3vw, 30px);
    margin: 0;
    word-break: break-word;
}
.office-preview-toolbar p {
    margin-bottom: 0;
}
.office-preview-page > .office-preview-frame {
    height: calc(100vh - 132px);
    min-height: 520px;
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}
.office-preview-empty {
    border-radius: 24px;
    padding: clamp(22px, 4vw, 36px);
    display: grid;
    gap: 16px;
    place-items: center;
    text-align: center;
}
.office-preview-empty .left-align {
    max-width: 780px;
    text-align: left;
}
.office-preview-empty code {
    background: rgba(15,23,42,.06);
    border-radius: 7px;
    padding: 2px 6px;
}
.public-office-frame {
    height: min(72vh, 760px);
    min-height: 520px;
    border-radius: 0;
}
@media (max-width: 720px) {
    .office-preview-page { padding: 10px; }
    .office-preview-toolbar { display: grid; border-radius: 20px; }
    .office-preview-toolbar .secondary-button { width: 100%; text-align: center; }
    .office-preview-page > .office-preview-frame,
    .preview-stage .office-preview-frame,
    .public-office-frame {
        height: 70vh;
        min-height: 420px;
        border-radius: 18px;
    }
}


.share-create-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mini-input {
    width: 118px;
    min-height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.34);
    background: rgba(255,255,255,.72);
    padding: 6px 10px;
    font-size: 12px;
    outline: none;
}
.mini-input:focus {
    border-color: rgba(10,132,255,.55);
    box-shadow: 0 0 0 3px rgba(10,132,255,.12);
}
.share-password-card {
    max-width: 460px;
}
.share-password-card .tiny-note {
    font-size: 12px;
    margin-top: 10px;
}
@media (max-width: 720px) {
    .share-create-form {
        width: 100%;
    }
    .share-create-form .mini-input,
    .share-create-form .mini {
        flex: 1 1 100%;
        width: 100%;
    }
}


/* 网站访问密码页 */
.site-access-card .brand-mark {
    background: linear-gradient(145deg, #fff, #edf4ff);
}
.site-access-card .auth-foot {
    line-height: 1.5;
}


/* 用户自主账号设置 */
.account-link {
    color: var(--text);
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.account-link:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.82);
    box-shadow: inset 0 0 0 1px rgba(10,132,255,.08);
}
.account-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 16px;
    align-items: start;
}
.account-settings-form {
    align-content: start;
}
.account-side-panel {
    display: grid;
    gap: 16px;
}
.account-big-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(255,255,255,.78);
    min-width: 0;
}
.account-big-card p {
    margin: 5px 0 0;
    word-break: break-all;
}
.avatar-pill.big {
    width: 54px;
    height: 54px;
    font-size: 22px;
}
.account-meta-list {
    display: grid;
    gap: 10px;
}
.account-meta-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.52);
    border: 1px solid rgba(255,255,255,.68);
}
.account-meta-list span {
    color: var(--muted);
    font-weight: 650;
}
.tiny-note {
    font-size: 12px;
    line-height: 1.6;
}
@media (max-width: 980px) {
    .account-settings-grid {
        grid-template-columns: 1fr;
    }
}