/* 前台 — 仿抖音网页版深色侧栏风格 */

html, body {
    height: 100%;
    overflow: hidden;
}
body { background: #000; color: rgba(255, 255, 255, 0.92); margin: 0; }

:root {
    --dy-bg: #000;
    --dy-surface: #121212;
    --dy-card: #1a1a1a;
    --dy-card-hover: #222;
    --dy-border: rgba(255, 255, 255, 0.08);
    --dy-border-strong: rgba(255, 255, 255, 0.15);
    --dy-text: rgba(255, 255, 255, 0.92);
    --dy-text-secondary: rgba(255, 255, 255, 0.55);
    --dy-text-muted: rgba(255, 255, 255, 0.35);
    --dy-accent: #fe2c55;
    --dy-accent-hover: #ff4d6d;
    --dy-accent-soft: rgba(254, 44, 85, 0.12);
    --dy-cyan: #25f4ee;
    --dy-sidebar-w: 220px;
    --dy-sidebar-pad: 12px;
    --dy-topbar-h: 60px;
    --dy-radius: 12px;
    --dy-radius-lg: 16px;
    --dy-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --dy-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

#frontWrap {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: var(--dy-topbar-h);
    overflow: hidden;
    background: var(--dy-bg);
    color: var(--dy-text);
    font-family: var(--dy-font);
}

#frontWrap a { color: inherit; text-decoration: none; }

/* ===== 顶部固定导航栏 ===== */
#frontTopbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dy-topbar-h);
    background: var(--dy-bg);
    border-bottom: 1px solid var(--dy-border);
    z-index: 300;
}

.topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px 0 var(--dy-sidebar-pad);
    gap: 16px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.topbar-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.topbar-logo-img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.topbar-logo:hover .topbar-logo-img { opacity: 0.9; }
/* This supplied blue logo already has transparency; keep its original colors. */
#frontTopbar .topbar-logo-img.topbar-logo-sansheng { filter: none; }

.topbar-divider {
    width: 1px;
    height: 18px;
    background: var(--dy-border-strong);
    flex-shrink: 0;
}
.topbar-page {
    font-size: 15px;
    color: var(--dy-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.topbar-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--dy-text-secondary);
    font-size: 11px;
    transition: color 0.2s, background 0.2s;
}
.topbar-action .fa { font-size: 18px; margin-bottom: 2px; }
.topbar-action:hover { color: var(--dy-text); background: rgba(255, 255, 255, 0.06); }
.topbar-action.cur { color: var(--dy-accent); }

.topbar-notice-menu {
    position: relative;
}

.topbar-notice-btn {
    position: relative;
}

.topbar-notice-dot {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4d4f;
    border: 1px solid var(--dy-bg, #1a1d24);
}

.topbar-notice-dot.hidden {
    display: none;
}

.topbar-notice-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 400px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1200;
    overflow: hidden;
}

.topbar-notice-panel.open {
    display: flex;
    flex-direction: column;
}

.topbar-notice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 14px;
    font-weight: 600;
    color: #303133;
}

.topbar-notice-readall {
    border: none;
    background: transparent;
    color: var(--dy-accent);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

.topbar-notice-readall:hover {
    color: var(--dy-accent-hover);
}

.topbar-notice-list {
    overflow-y: auto;
    max-height: 340px;
}

.topbar-notice-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f7fa;
    cursor: pointer;
    transition: background 0.15s;
}

.topbar-notice-item:hover {
    background: #f8f9fb;
}

.topbar-notice-item.unread {
    background: #fff8f0;
}

.topbar-notice-item-title {
    font-size: 14px;
    color: #303133;
    line-height: 1.4;
    margin-bottom: 4px;
}

.topbar-notice-item.unread .topbar-notice-item-title {
    font-weight: 600;
}

.topbar-notice-item-meta {
    font-size: 12px;
    color: #909399;
}

.topbar-notice-empty {
    padding: 32px 16px;
    text-align: center;
    color: #909399;
    font-size: 13px;
}

.ann-popup-detail {
    color: #303133;
}

.ann-popup-time {
    font-size: 12px;
    color: #909399;
    margin-bottom: 12px;
}

.ann-popup-body {
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.ann-popup-list-item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f5;
    cursor: pointer;
}

.ann-popup-list-item:last-child {
    border-bottom: none;
}

.ann-popup-list-title {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 4px;
}

.ann-popup-list-meta {
    font-size: 12px;
    color: #909399;
}

.topbar-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 8px;
    background: var(--dy-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
}
.topbar-login-btn:hover { background: var(--dy-accent-hover); }

.topbar-user-menu {
    position: relative;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--dy-border);
}

.topbar-user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border: none;
    border-radius: 24px;
    background: transparent;
    color: var(--dy-text);
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    font-size: 14px;
}
.topbar-user-trigger:hover,
.topbar-user-menu:has(.topbar-dropdown.open) .topbar-user-trigger {
    background: rgba(255, 255, 255, 0.08);
}

.topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--dy-border-strong);
}
.topbar-avatar--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #333 0%, #555 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.topbar-avatar--lg {
    width: 44px;
    height: 44px;
    font-size: 18px;
}

.topbar-username {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.topbar-chevron {
    font-size: 10px;
    color: var(--dy-text-muted);
    transition: transform 0.2s;
}
.topbar-user-menu:has(.topbar-dropdown.open) .topbar-chevron {
    transform: rotate(180deg);
}

.topbar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: var(--dy-card);
    border: 1px solid var(--dy-border-strong);
    border-radius: var(--dy-radius);
    box-shadow: var(--dy-shadow);
    overflow: hidden;
    z-index: 400;
}
.topbar-dropdown.open { display: block; }

.topbar-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--dy-border);
}
.topbar-dropdown-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--dy-text);
}
.topbar-dropdown-id {
    font-size: 12px;
    color: var(--dy-text-muted);
    margin-top: 2px;
}

.topbar-dropdown-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--dy-text-secondary);
    transition: background 0.2s, color 0.2s;
}
.topbar-dropdown-links a .fa { width: 18px; text-align: center; color: var(--dy-text-muted); }
.topbar-dropdown-links a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dy-text);
}
.topbar-dropdown-links a:hover .fa { color: var(--dy-accent); }

.topbar-dropdown-footer {
    border-top: 1px solid var(--dy-border);
    padding: 6px 0 4px;
}
.topbar-dropdown-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--dy-text-secondary);
    transition: color 0.2s, background 0.2s;
}
.topbar-dropdown-logout .fa { width: 18px; text-align: center; color: var(--dy-text-muted); }
.topbar-dropdown-logout:hover {
    color: var(--dy-accent);
    background: rgba(254, 44, 85, 0.08);
}
.topbar-dropdown-logout:hover .fa { color: var(--dy-accent); }

#frontBody {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 可滚动但隐藏滚动条（仿抖音侧栏） */
.dy-scroll-hidden {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dy-scroll-hidden::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

/* ===== 左侧导航（加宽 + 可展开分组） ===== */
#frontSidebar {
    position: fixed;
    left: 0;
    top: var(--dy-topbar-h);
    bottom: 0;
    width: var(--dy-sidebar-w);
    background: var(--dy-bg);
    border-right: 1px solid var(--dy-border);
    display: flex;
    flex-direction: column;
    padding: 12px 0 16px;
    z-index: 200;
    overflow: hidden;
}

.front-side-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 0 var(--dy-sidebar-pad);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.front-side-nav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.front-side-nav .nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--dy-text-secondary);
    font-size: 14px;
    line-height: 1.3;
    transition: color 0.2s, background 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}
.front-side-nav .nav-item .fa {
    width: 20px;
    font-size: 18px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.front-side-nav .nav-item span { flex: 1; }
.front-side-nav .nav-item:hover {
    color: var(--dy-text);
    background: rgba(255, 255, 255, 0.06);
}
.front-side-nav .nav-item.cur {
    color: var(--dy-accent);
    background: var(--dy-accent-soft);
    font-weight: 600;
}
.front-side-nav .nav-item.cur .fa {
    filter: drop-shadow(0 0 6px rgba(254, 44, 85, 0.4));
}

.nav-group { width: 100%; }

.nav-group-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--dy-text-secondary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    box-sizing: border-box;
    text-align: left;
}
.nav-group-toggle .fa:first-child {
    width: 20px;
    font-size: 18px;
    text-align: center;
    flex-shrink: 0;
}
.nav-group-toggle .nav-group-label { flex: 1; }
.nav-group-toggle .nav-arrow {
    font-size: 11px;
    color: var(--dy-text-muted);
    transition: transform 0.25s;
}
.nav-group-toggle:hover {
    color: var(--dy-text);
    background: rgba(255, 255, 255, 0.06);
}
.nav-group.open > .nav-group-toggle,
.nav-group.has-cur > .nav-group-toggle {
    color: var(--dy-text);
}
.nav-group.open > .nav-group-toggle .nav-arrow,
.nav-group.has-cur > .nav-group-toggle .nav-arrow {
    transform: rotate(180deg);
}

.nav-submenu {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 6px 0;
}
.nav-group.open .nav-submenu { display: flex; }

.nav-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 46px;
    border-radius: 8px;
    color: var(--dy-text-muted);
    font-size: 13px;
    transition: color 0.2s, background 0.2s;
}
.nav-subitem .fa {
    width: 16px;
    font-size: 14px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}
.nav-subitem:hover {
    color: var(--dy-text);
    background: rgba(255, 255, 255, 0.05);
}
.nav-subitem.cur {
    color: var(--dy-accent);
    background: var(--dy-accent-soft);
    font-weight: 600;
}
.nav-subitem.cur .fa { opacity: 1; color: var(--dy-accent); }

/* ===== 主内容区 ===== */
#frontMainWrap {
    flex: 1;
    margin-left: var(--dy-sidebar-w);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#frontWrap.no-sidebar #frontMainWrap {
    margin-left: 0;
}
#frontWrap.no-sidebar #frontMain {
    display: flex;
    flex-direction: column;
    max-width: none;
    min-height: 0;
    padding: 0;
}
#frontWrap.no-sidebar .mainBox {
    flex: 1;
    min-height: 0;
    display: flex;
}
#frontWrap.no-sidebar .dy-login-wrap {
    flex: 1;
    min-height: 0;
}
#frontWrap.no-sidebar .topbar-inner {
    padding-left: 28px;
}

#frontMain {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    margin: 0 auto;
    padding: 28px 32px 48px;
}
#frontMain::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#frontWrap .mainBox {
    min-height: 0;
}

#urHere {
    font-size: 13px;
    color: var(--dy-text-muted);
    margin-bottom: 20px;
    padding-left: 4px;
}
#urHere strong { color: var(--dy-text-secondary); font-weight: 500; }
#urHere b { margin: 0 8px; opacity: 0.4; }

/* urHere 已移至顶栏，保留样式供子模板复用 */

/* ===== 页面卡片 ===== */
.dy-page-card {
    background: var(--dy-card);
    border: 1px solid var(--dy-border);
    border-radius: var(--dy-radius-lg);
    padding: 28px 32px;
    box-shadow: var(--dy-shadow);
}
.dy-page-card .page-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dy-page-card .page-title .fa { color: var(--dy-accent); font-size: 20px; }
.dy-page-card .page-desc {
    color: var(--dy-text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}
.dy-page-card .page-desc code {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--dy-cyan);
}

/* ===== 表单 ===== */
.publish-form .form-row,
.dy-form .form-row { margin-bottom: 20px; }
.publish-form label,
.dy-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--dy-text-secondary);
    font-size: 14px;
    font-weight: 500;
}
.publish-form label.required::after,
.dy-form label.required::after { content: ' *'; color: var(--dy-accent); }

.publish-form .form-control,
.dy-form .form-control {
    width: 100%;
    max-width: 520px;
    padding: 12px 16px;
    background: var(--dy-surface);
    border: 1px solid var(--dy-border-strong);
    border-radius: var(--dy-radius);
    font-size: 14px;
    color: var(--dy-text);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.publish-form .form-control::placeholder,
.dy-form .form-control::placeholder { color: var(--dy-text-muted); }
.publish-form .form-control:focus,
.dy-form .form-control:focus {
    outline: none;
    border-color: var(--dy-accent);
    box-shadow: 0 0 0 3px var(--dy-accent-soft);
}
.publish-form select.form-control,
.dy-form select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* ===== 上传区 ===== */
.upload-zone {
    border: 2px dashed var(--dy-border-strong);
    border-radius: var(--dy-radius-lg);
    padding: 40px 24px;
    text-align: center;
    background: var(--dy-surface);
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--dy-accent);
    background: var(--dy-accent-soft);
}
.upload-zone .upload-icon {
    font-size: 40px;
    color: var(--dy-accent);
    margin-bottom: 12px;
}
.upload-zone .upload-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}
.upload-zone .hint {
    color: var(--dy-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}
.upload-zone input[type=file] { display: none; }

.upload-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.upload-list.has-items {
    margin-top: 0;
}
.upload-add-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 140px;
    padding: 16px;
    border: 2px dashed var(--dy-border-strong);
    border-radius: var(--dy-radius);
    background: var(--dy-surface);
    color: var(--dy-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.upload-add-more .fa {
    font-size: 22px;
    color: var(--dy-accent);
}
.upload-add-more:hover {
    border-color: var(--dy-accent);
    background: var(--dy-accent-soft);
    color: var(--dy-text);
}
.upload-item {
    background: var(--dy-surface);
    border: 1px solid var(--dy-border);
    border-radius: var(--dy-radius);
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}
.upload-item:hover { border-color: var(--dy-border-strong); }
.upload-item img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
    background: #0a0a0a;
}
.upload-item .name {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--dy-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upload-item .status {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}
.upload-item .status.ok { background: #2ecc71; }
.upload-item .status.err { background: var(--dy-accent); }
.upload-item .remove-btn {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    line-height: 24px;
    padding: 0;
    font-size: 16px;
    transition: background 0.2s;
}
.upload-item .remove-btn:hover { background: var(--dy-accent); }

.publish-actions { margin-top: 28px; }

/* ===== 作品列表（横向卡片） ===== */
.dy-page-card--flush {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.work-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.work-item {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px 18px;
    background: var(--dy-surface);
    border: 1px solid var(--dy-border);
    border-radius: var(--dy-radius);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.work-item:hover {
    border-color: var(--dy-border-strong);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.work-item__thumb {
    flex-shrink: 0;
    position: relative;
    width: 124px;
    height: 124px;
}

.work-item__thumb-link {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #0a0a0a center/cover no-repeat;
    overflow: hidden;
}

.work-item__thumb-mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 7px 0;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.58);
    border: none;
    border-radius: 0 0 8px 8px;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    z-index: 2;
}

.work-item__thumb:hover .work-item__thumb-mask {
    opacity: 1;
}

.work-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.work-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    margin-bottom: 10px;
}

.work-item__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--dy-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-item__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.work-item__title-row .work-item__title {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.work-item__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.work-item__badge--published {
    color: #95de64;
    background: rgba(82, 196, 26, 0.12);
    border: 1px solid rgba(82, 196, 26, 0.22);
}

.work-item__badge--draft {
    color: #ffd666;
    background: rgba(250, 173, 20, 0.12);
    border: 1px solid rgba(250, 173, 20, 0.24);
}

.work-item__thumb-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: rgba(250, 173, 20, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.work-item__status-tip {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--dy-text-secondary);
}

.work-item--unpublished {
    border-color: rgba(250, 173, 20, 0.28);
    background: linear-gradient(90deg, rgba(250, 173, 20, 0.05), rgba(250, 173, 20, 0.01));
}

.work-item--unpublished:hover {
    border-color: rgba(250, 173, 20, 0.42);
}


.work-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--dy-text-secondary);
}

.work-item__hr {
    height: 1px;
    margin: 14px 0 12px;
    background: var(--dy-border);
}

.work-item__quick {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
}

.work-item__btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.work-item__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 14px;
    min-height: 32px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--dy-border-strong);
    color: var(--dy-text);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.work-item__btn .fa {
    font-size: 14px;
    line-height: 1;
}

.work-item__btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--dy-text);
}

.work-item__btn--accent {
    color: #8b9bff;
    border-color: rgba(139, 155, 255, 0.45);
    background: rgba(139, 155, 255, 0.08);
}

.work-item__btn--accent:hover {
    color: #adb7ff;
    border-color: rgba(173, 183, 255, 0.55);
    background: rgba(139, 155, 255, 0.14);
}

.work-item__more {
    position: relative;
}

.work-item__dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 140px;
    padding: 6px 0;
    background: var(--dy-card);
    border: 1px solid var(--dy-border-strong);
    border-radius: 8px;
    box-shadow: var(--dy-shadow);
    z-index: 20;
}

.work-item__more.open .work-item__dropdown {
    display: block;
}

.work-item__dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--dy-text-secondary);
    transition: background 0.2s, color 0.2s;
}

.work-item__dropdown a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dy-text);
}

.work-item__dropdown a.work-item__dropdown-danger {
    color: #f56c6c;
}

.work-item__dropdown a.work-item__dropdown-danger:hover {
    background: rgba(245, 108, 108, 0.12);
    color: #f56c6c;
}

/* 作品列表 — 作品信息弹窗（含封面） */
.work-info-form {
    padding: 4px 0;
}

.work-info-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.work-info-cover {
    flex: 0 0 200px;
    width: 200px;
}

.work-info-cover .work-thumb-preview {
    width: 200px;
    height: 200px;
    margin-bottom: 12px;
    background: #f5f7fa;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-info-cover .work-thumb-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.work-info-cover .work-thumb-preview-empty {
    padding: 24px;
    color: #909399;
    font-size: 13px;
    text-align: center;
}

.work-info-cover .work-thumb-preview-empty .fa {
    display: block;
    font-size: 28px;
    margin-bottom: 8px;
}

.work-info-cover-btn {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #f5f7fa;
    color: #606266;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.work-info-cover-btn:hover {
    border-color: #409eff;
    color: #409eff;
    background: #ecf5ff;
}

.work-info-cover-hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: #909399;
}

.work-info-cover-hint em {
    font-style: normal;
    color: #e6a23c;
}

.work-info-fields {
    flex: 1;
    min-width: 0;
}

.work-info-field {
    margin-bottom: 16px;
}

.work-info-field--inline {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.work-info-field--inline label {
    flex: 0 0 72px;
    margin-bottom: 0;
    padding-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #303133;
    line-height: 1.4;
}

.work-info-field--textarea label {
    padding-top: 6px;
}

.work-info-field--inline input,
.work-info-field--inline select,
.work-info-field--inline textarea {
    flex: 1;
    min-width: 0;
}

.work-info-field label .req {
    color: #f56c6c;
}

.work-info-field input,
.work-info-field select,
.work-info-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    color: #303133;
    background: #fff;
}

.work-info-field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.work-info-field input:focus,
.work-info-field select:focus,
.work-info-field textarea:focus {
    outline: none;
    border-color: #409eff;
}

.work-info-msg {
    margin-top: 4px;
    font-size: 13px;
    min-height: 18px;
    text-align: center;
}

.work-info-msg.success {
    color: #67c23a;
}

.work-info-msg.error {
    color: #f56c6c;
}

@media (max-width: 640px) {
    .work-info-layout {
        flex-direction: column;
        gap: 20px;
    }

    .work-info-cover {
        width: 100%;
        flex: none;
    }

    .work-info-cover .work-thumb-preview {
        width: 100%;
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 作品列表 — 分享设置弹窗 */
.work-share-form {
    padding: 4px 0;
    color: #303133;
}

.work-share-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.work-share-row--qrcode {
    align-items: flex-start;
}

.work-share-label {
    flex: 0 0 88px;
    font-size: 14px;
    color: #303133;
    line-height: 32px;
    white-space: nowrap;
}

.work-share-options {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    min-height: 32px;
    align-items: center;
}

.work-share-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
}

.work-share-check-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.work-share-check-box input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.work-share-check-inner {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s;
}

.work-share-check:hover .work-share-check-inner {
    border-color: var(--dy-accent);
}

.work-share-check-box input:checked + .work-share-check-inner {
    background: var(--dy-accent);
    border-color: var(--dy-accent);
}

.work-share-check-box input:checked + .work-share-check-inner::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}

.work-share-check-label {
    color: #606266;
}

.work-share-field {
    flex: 1;
    min-width: 0;
}

.work-share-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
}

.work-share-password-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.work-share-password-box input {
    flex: 1;
    min-width: 0;
}

.work-share-password-save {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 1px solid var(--dy-accent);
    border-radius: 4px;
    background: var(--dy-accent);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.work-share-password-save:hover {
    background: var(--dy-accent-hover);
    border-color: var(--dy-accent-hover);
}

.work-share-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #909399;
    line-height: 1.5;
}

.work-share-linkbox {
    flex: 1;
    position: relative;
    min-width: 0;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
}

.work-share-linkbox input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 8px 64px 8px 10px;
    font-size: 13px;
    color: #606266;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.work-share-copy {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    border: none;
    border-left: 1px solid #ebeef5;
    background: #fff;
    color: var(--dy-accent);
    font-size: 14px;
    padding: 0 14px;
    cursor: pointer;
    white-space: nowrap;
}

.work-share-copy:hover {
    color: var(--dy-accent-hover);
}

.work-share-qrcode-wrap {
    flex: 1;
    min-width: 0;
}

.work-share-scan-tip {
    margin: 0 0 12px;
    font-size: 13px;
    color: #909399;
    line-height: 1.5;
}

.work-share-qrcode-body {
    display: flex;
    align-items: center;
    gap: 20px;
}

.work-share-qrcode-img {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.work-share-qrcode-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.work-share-qrcode-empty {
    color: #c0c4cc;
    font-size: 48px;
}

.work-share-download {
    border: none;
    background: transparent;
    color: var(--dy-accent);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    line-height: 1.6;
    text-align: left;
}

.work-share-download:hover {
    color: var(--dy-accent-hover);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .work-share-row {
        flex-direction: column;
        gap: 8px;
    }

    .work-share-label {
        line-height: 1.4;
    }

    .work-share-qrcode-body {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 作品列表 — 浏览设置弹窗 */
.work-browse-form {
    padding: 4px 0;
    color: #303133;
}

.work-browse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
}

.work-browse-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #f8f9fb;
    border-radius: 6px;
}

.work-browse-label {
    font-size: 14px;
    color: #303133;
    white-space: nowrap;
}

.work-browse-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.work-browse-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.work-browse-switch-slider {
    position: absolute;
    inset: 0;
    background: #dcdfe6;
    border-radius: 24px;
    transition: background 0.2s;
    cursor: pointer;
}

.work-browse-switch-slider:before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.work-browse-switch input:checked + .work-browse-switch-slider {
    background: var(--dy-accent);
}

.work-browse-switch input:checked + .work-browse-switch-slider:before {
    transform: translateX(20px);
}

.work-browse-actions {
    margin-top: 20px;
    text-align: center;
}

.work-browse-save {
    min-width: 120px;
    padding: 9px 28px;
    border: none;
    border-radius: 4px;
    background: var(--dy-accent);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.work-browse-save:hover {
    background: var(--dy-accent-hover);
}

@media (max-width: 640px) {
    .work-browse-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== 空状态 ===== */
.empty-tip {
    text-align: center;
    padding: 64px 24px 56px;
    color: var(--dy-text-secondary);
    background: var(--dy-surface);
    border-radius: var(--dy-radius-lg);
    border: 1px dashed var(--dy-border-strong);
}

.empty-tip__icon .fa {
    display: block;
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--dy-text-muted);
}

.empty-tip__actions .btn .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin: 0;
    font-size: 14px;
    line-height: 1;
    color: inherit;
}

.empty-tip__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--dy-text);
}

.empty-tip__desc {
    margin: 8px auto 0;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--dy-text-secondary);
}

.empty-tip__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.empty-tip p { font-size: 15px; }

/* ===== 登录页 ===== */
.dy-login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.dy-login-card {
    width: 100%;
    max-width: 420px;
    background: var(--dy-card);
    border: 1px solid var(--dy-border);
    border-radius: var(--dy-radius-lg);
    padding: 40px 36px;
    box-shadow: var(--dy-shadow);
}
.dy-login-card--switchable {
    position: relative;
    overflow: hidden;
    padding-top: 48px;
}
.login-mode-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}
.login-mode-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 64px 64px 0;
    border-color: transparent var(--dy-surface) transparent transparent;
    transition: border-color 0.2s;
}
.login-mode-toggle:hover::before {
    border-color: transparent rgba(255, 255, 255, 0.1) transparent transparent;
}
.login-mode-toggle__icon {
    position: absolute;
    font-size: 22px;
    color: var(--dy-text-secondary);
    transition: opacity 0.2s, color 0.2s;
}
.login-mode-toggle__icon--qr {
    top: 10px;
    right: 10px;
    opacity: 1;
}
.login-mode-toggle__icon--account {
    top: 10px;
    right: 10px;
    opacity: 0;
}
.dy-login-card.is-qr-mode .login-mode-toggle__icon--qr {
    opacity: 0;
}
.dy-login-card.is-qr-mode .login-mode-toggle__icon--account {
    opacity: 1;
}
.login-mode-toggle:hover .login-mode-toggle__icon {
    color: var(--dy-accent);
}
.login-panel--qr .login-logo {
    margin-bottom: 12px;
}
.login-panel--qr .login-hint--qr {
    margin-bottom: 20px;
}
.login-qr-section {
    text-align: center;
}
.login-qr-section .login-wecom-title {
    margin-bottom: 12px;
}
.login-qr-section .login-wechat-qr img {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}
.login-qr-section .ww-login-panel {
    min-height: 200px;
}
.dy-login-card .login-logo {
    text-align: center;
    margin-bottom: 32px;
}
.dy-login-card .login-logo h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--dy-text);
}
.dy-login-card .login-hint {
    text-align: center;
    color: var(--dy-text-secondary);
    font-size: 13px;
    margin-bottom: 28px;
    line-height: 1.6;
}
.dy-login-card .login-msg {
    color: var(--dy-accent);
    margin-top: 14px;
    font-size: 13px;
    text-align: center;
    min-height: 20px;
}
.login-divider {
    display: flex;
    align-items: center;
    margin: 28px 0 20px;
    color: var(--dy-text-secondary);
    font-size: 12px;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--dy-border);
}
.login-divider span {
    padding: 0 12px;
}
.login-wecom-block {
    text-align: center;
}
.login-wecom-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dy-text);
    margin-bottom: 14px;
}
.login-weixin-icon {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    margin-right: 4px;
    object-fit: contain;
}
.login-wecom-tip,
.bind-wecom-tip {
    margin-top: 12px;
    font-size: 12px;
    color: var(--dy-text-secondary);
    line-height: 1.6;
}
.ww-login-panel {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#frontWrap .btn-wecom {
    background: #2e7d32;
    color: #fff;
}
#frontWrap .btn-wechat {
    background: #07c160;
    color: #fff;
}
#frontWrap .btn-wechat:hover {
    background: #06ad56;
    color: #fff;
}
.login-wechat-block .login-wechat-qr {
    text-align: center;
    margin: 12px 0;
}

/* ===== 绑定页 ===== */
.dy-bind-card .bind-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(230, 162, 60, 0.15);
    color: #e6a23c;
    font-size: 13px;
    margin-top: 16px;
}
.dy-bind-card .bind-status .fa { font-size: 14px; }
.dy-bind-card .bind-status--ok {
    background: rgba(103, 194, 58, 0.15);
    color: #67c23a;
}
.dy-bind-card .bind-status--pending {
    background: rgba(64, 158, 255, 0.12);
    color: #409eff;
}
.bind-status--clickable {
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
.bind-status--clickable:hover {
    background: rgba(64, 158, 255, 0.2);
    box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.25);
}
.bind-wechat-qr-modal {
    text-align: center;
    padding: 8px 0 4px;
}
.bind-wechat-qr-modal__title {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: #000;
}
.bind-wechat-qr-modal__img img {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}
.bind-wechat-qr-modal__tip {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--dy-text-secondary);
}
.dy-bind-card .bind-status--warn {
    background: rgba(230, 162, 60, 0.15);
    color: #e6a23c;
}
.bind-actions {
    margin-top: 20px;
}
.bind-wecom-block {
    margin-top: 24px;
    text-align: center;
}
.bind-section-divider {
    border: none;
    border-top: 1px solid var(--dy-border);
    margin: 32px 0 24px;
}
.page-subtitle {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}

/* ===== 按钮覆盖（抖音红主色） ===== */
#frontWrap .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 14px;
    line-height: 1.4;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

#frontWrap .btn .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin: 0;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
}

#frontWrap a.btn:hover {
    text-decoration: none;
}
#frontWrap .btn-primary {
    background: var(--dy-accent);
    color: #fff;
}
#frontWrap .btn-primary:hover {
    background: var(--dy-accent-hover);
    box-shadow: 0 4px 16px rgba(254, 44, 85, 0.35);
}
#frontWrap .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
#frontWrap .btn-default {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dy-text);
    border: 1px solid var(--dy-border-strong);
}
#frontWrap .btn-default:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--dy-text);
    border-color: rgba(255, 255, 255, 0.25);
}
#frontWrap .btn-lg {
    padding: 12px 32px;
    font-size: 16px;
    border-radius: 10px;
}

#frontWrap .btn-sm {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 7px;
}
#frontWrap .btn-outline {
    background: transparent;
    color: var(--dy-text);
    border: 1px solid var(--dy-border-strong);
}
#frontWrap .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dy-text);
    border-color: rgba(255, 255, 255, 0.25);
}
#frontWrap .btn-block { width: 100%; display: block; }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    :root { --dy-sidebar-w: 72px; --dy-topbar-h: 52px; --dy-sidebar-pad: 6px; }
    .topbar-inner { padding: 0 12px 0 var(--dy-sidebar-pad); }
    .topbar-logo-img { height: 28px; max-width: 120px; }
    .topbar-page { display: none; }
    .topbar-divider { display: none; }
    .topbar-action span { display: none; }
    .topbar-action { min-width: 40px; padding: 6px; }
    .topbar-username { display: none; }
    .topbar-chevron { display: none; }
    .topbar-user-menu { margin-left: 4px; padding-left: 8px; }
    #frontMain { padding: 20px 16px 40px; }
    .dy-page-card { padding: 20px 18px; }
    .work-item { flex-direction: column; }
    .work-item__thumb { width: 100%; height: 180px; }
    .work-item__head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .work-item__quick { width: 100%; flex-wrap: wrap; }
    .work-item__btns { gap: 8px; }
    .front-side-nav .nav-item span,
    .nav-group-toggle .nav-group-label,
    .nav-group-toggle .nav-arrow,
    .nav-submenu { display: none !important; }
    .front-side-nav .nav-item,
    .nav-group-toggle { justify-content: center; padding: 12px 8px; gap: 0; }
    .nav-group.open .nav-submenu { display: none !important; }
}

@media (max-width: 480px) {
    .work-item { padding: 14px; }
    .work-item__thumb { height: 160px; }
    .work-item__quick { flex-wrap: wrap; gap: 12px; }
    .work-item__btns { gap: 6px; }
    .work-item__btn { padding: 6px 10px; font-size: 12px; }
}

/* Mobile group navigation lives outside the clipped, scrollable icon rail. */
#frontNavPopover {
    display: none;
    position: fixed;
    z-index: 700;
    box-sizing: border-box;
    width: 240px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    color: #26364d;
    box-shadow: 0 14px 42px rgba(28, 47, 73, .16), 0 3px 10px rgba(28, 47, 73, .07);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-optical-sizing: auto;
    color-scheme: light;
}
#frontNavPopover[hidden] { display: none !important; }
#frontNavPopover *, #frontNavPopover *::before, #frontNavPopover *::after { box-sizing: border-box; }
#frontNavPopover .front-nav-popover-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; min-height: 61px; padding: 8px 10px 8px 17px; border-bottom: 1px solid #e8edf5; }
#frontNavPopover .front-nav-popover-title { min-width: 0; margin: 0; color: #26364d; font: inherit; font-size: 15px; font-weight: 650; letter-spacing: -.015em; line-height: 1.4; overflow-wrap: anywhere; }
#frontNavPopover .front-nav-popover-close { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 12px; background: #f1f5fa; color: #63758c; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#frontNavPopover .front-nav-popover-close:hover, #frontNavPopover .front-nav-popover-close:active { border-color: #d4e3f5; background: #e7f0fc; color: #0066cc; }
#frontNavPopover .front-nav-popover-links { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-height: 0; padding: 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #c6d4e5 transparent; }
#frontNavPopover .front-nav-link { display: flex; flex: 0 0 auto; align-items: center; gap: 11px; width: 100%; min-width: 0; min-height: 46px; margin: 0; padding: 11px 12px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #4f6178; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.6; text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#frontNavPopover .front-nav-link .fa { display: inline-flex; flex: 0 0 19px; align-items: center; justify-content: center; width: 19px; margin: 0; color: #6a7f99; font-size: 16px; line-height: 1; opacity: 1; }
#frontNavPopover .front-nav-link span { display: block; flex: 1 1 auto; min-width: 0; color: inherit; font: inherit; overflow-wrap: anywhere; }
#frontNavPopover .front-nav-link:hover, #frontNavPopover .front-nav-link:active { border-color: #e0ebfa; background: #edf5ff; color: #0066cc; }
#frontNavPopover .front-nav-link.cur, #frontNavPopover .front-nav-link[aria-current="page"] { border-color: #d5e6fd; background: #e8f2ff; color: #0071e3; font-weight: 600; }
#frontNavPopover .front-nav-link.cur .fa, #frontNavPopover .front-nav-link[aria-current="page"] .fa { color: #0071e3; }
#frontNavPopover :is(a, button):focus-visible { outline: 3px solid rgba(0, 113, 227, .65); outline-offset: 1px; }
@media (max-width: 768px) {
    #frontNavPopover:not([hidden]) { display: flex; flex-direction: column; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #frontNavPopover { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
    #frontNavPopover { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    #frontNavPopover { border-color: #8197b2; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    #frontNavPopover .front-nav-popover-header { border-bottom-color: #a8b8cb; }
    #frontNavPopover .front-nav-popover-title, #frontNavPopover .front-nav-link { color: #263e5b; }
    #frontNavPopover .front-nav-popover-close, #frontNavPopover .front-nav-link.cur, #frontNavPopover .front-nav-link[aria-current="page"] { border-color: #89a5c7; }
}

/* ===== 业务表格 ===== */
.table-responsive { overflow-x: auto; }
.dy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.dy-table th,
.dy-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--dy-border);
    text-align: left;
    color: var(--dy-text-secondary);
}
.dy-table th {
    color: var(--dy-text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dy-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.dy-table td strong { color: var(--dy-text); }
.dy-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    background: var(--dy-accent-soft);
    color: var(--dy-accent);
}
.dy-form .form-row label { display: block; margin-bottom: 6px; color: var(--dy-text-secondary); font-size: 13px; }
.dy-form input.form-control,
.dy-form textarea.form-control {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--dy-border);
    border-radius: 8px;
    color: var(--dy-text);
    font-size: 14px;
}
.dy-form select.form-control {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--dy-border);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    color: var(--dy-text);
    background-color: rgba(255,255,255,0.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
}
.dy-form select.form-control option {
    background-color: #1a1a1a;
    color: rgba(255, 255, 255, 0.92);
}
.dy-form textarea.form-control { resize: vertical; min-height: 80px; }

/* ===== 录单页两栏 ===== */
.order-create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    align-items: start;
}

.order-create-col {
    min-width: 0;
}

.order-create-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--dy-text);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dy-border);
}

.order-create-actions {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--dy-border);
}

.order-create-page .customer-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.order-create-page .customer-picker-row .customer-selected-field {
    flex: 1;
    min-width: 0;
}

.order-create-page .customer-selected-field .form-control {
    max-width: none;
    width: 100%;
}

.order-create-page .customer-add-btn {
    flex-shrink: 0;
    margin-right: 0;
    white-space: nowrap;
    padding: 12px 14px;
    line-height: 1;
}

@media (max-width: 900px) {
    .order-create-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ===== 客户公海拓客 ===== */
.customer-pool-page .page-desc strong {
    color: var(--dy-cyan);
}
.customer-pool-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.customer-pool-stats {
    flex-shrink: 0;
}
.customer-pool-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(64, 158, 255, 0.12);
    border: 1px solid rgba(64, 158, 255, 0.25);
    color: var(--dy-text);
    font-size: 13px;
}
.customer-pool-stat em {
    font-style: normal;
    font-size: 20px;
    font-weight: 700;
    color: #66b1ff;
}
.customer-pool-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.customer-pool-filter-row .form-control {
    min-width: 140px;
    flex: 1;
    max-width: 220px;
}
.customer-pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.customer-pool-card {
    border: 1px solid var(--dy-border);
    border-radius: var(--dy-radius);
    padding: 16px;
    background: var(--dy-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s, background 0.2s;
}
.customer-pool-card:hover {
    border-color: var(--dy-border-strong);
    background: var(--dy-card-hover);
}
.customer-pool-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.customer-pool-tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.customer-pool-tag--new {
    background: rgba(230, 162, 60, 0.18);
    color: #f0c674;
    border: 1px solid rgba(230, 162, 60, 0.35);
}
.customer-pool-tag--released {
    background: rgba(64, 158, 255, 0.15);
    color: #66b1ff;
    border: 1px solid rgba(64, 158, 255, 0.35);
}
.customer-pool-source {
    font-size: 12px;
    color: var(--dy-text-muted);
}
.customer-pool-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--dy-text);
}
.customer-pool-meta {
    font-size: 13px;
    color: var(--dy-text-secondary);
    line-height: 1.7;
}
.customer-pool-meta i {
    width: 14px;
    margin-right: 4px;
    color: var(--dy-text-muted);
}
.customer-pool-remark {
    margin: 0;
    font-size: 12px;
    color: var(--dy-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.customer-pool-card__foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--dy-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.customer-pool-time {
    font-size: 12px;
    color: var(--dy-text-muted);
}
.customer-pool-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}