@charset "utf-8";

/* ========== 暗色模式 ========== */
html[dark-mode='dark-mode'] body { background: #1a1a2e; color: #bbb; }
html[dark-mode='dark-mode'] .typecho-page-main,
html[dark-mode='dark-mode'] .typecho-table-wrap { background: #222; color: #bbb; box-shadow: none; }
html[dark-mode='dark-mode'] #ws-sidebar { background: #1a1a2e; }
html[dark-mode='dark-mode'] .ws-sidebar-header { border-color: #333; }
html[dark-mode='dark-mode'] .ws-user-name { color: #ccc; }
html[dark-mode='dark-mode'] .ws-nav-item,
html[dark-mode='dark-mode'] .ws-nav-child { color: #999; }
html[dark-mode='dark-mode'] .ws-nav-item:hover,
html[dark-mode='dark-mode'] .ws-nav-child:hover { color: #fff; background: rgba(103,119,239,0.15); }
html[dark-mode='dark-mode'] .ws-child-active,
html[dark-mode='dark-mode'] .ws-nav-group.ws-active > .ws-nav-item { color: #6777ef; }
html[dark-mode='dark-mode'] .typecho-head-nav { background: #16213e !important; }
html[dark-mode='dark-mode'] .typecho-head-nav .operate { background: #16213e !important; }
html[dark-mode='dark-mode'] .typecho-head-nav .operate a { color: #aaa !important; }
html[dark-mode='dark-mode'] .typecho-head-nav .operate a:hover { color: #6777ef !important; }
html[dark-mode='dark-mode'] .typecho-page-title h2 a { background: #6777ef; color: #fff; }
html[dark-mode='dark-mode'] .typecho-list-table th { border-bottom-color: #444; }
html[dark-mode='dark-mode'] .typecho-list-table td { border-top-color: #333; }
html[dark-mode='dark-mode'] .typecho-list-table tbody tr:hover { background: #2a2a3e; }
html[dark-mode='dark-mode'] .success { background: #2a2a3e; color: #6777ef; }
html[dark-mode='dark-mode'] .primary { background: #6777ef; }
html[dark-mode='dark-mode'] input[type='text'],
html[dark-mode='dark-mode'] textarea,
html[dark-mode='dark-mode'] input[type='password'],
html[dark-mode='dark-mode'] input[type='email'],
html[dark-mode='dark-mode'] select { background: #222; border-color: #444; color: #bbb; }
html[dark-mode='dark-mode'] #typecho-welcome { background: #222; }
html[dark-mode='dark-mode'] .wrap .card { background: #222; }
html[dark-mode='dark-mode'] .wrap .card .card-header { border-color: #333; color: #ccc; }
html[dark-mode='dark-mode'] .typecho-foot { display: none; }
html[dark-mode='dark-mode'] img { filter: brightness(0.85); }

/* ========== 基础样式 ========== */
::selection { background: #6777ef; color: #fff; }
::-moz-selection { background: #6777ef; color: #fff; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { border-radius: 3px; background: #c1c1c1; }
::-webkit-scrollbar-track { background: #f1f1f1; }

/* ========== 顶部导航栏 ========== */
.typecho-head-nav nav > menu > li:not(.operate) { display: none !important; }
.typecho-head-nav details.menu-bar { display: none !important; }
.typecho-head-nav { background: #fff !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; }
.typecho-head-nav .operate { background: #fff !important; flex: 1; display: flex !important; align-items: center !important; }
.typecho-head-nav .operate a { color: #555 !important; line-height: 36px; }
.typecho-head-nav .operate a:hover { color: #6777ef !important; background: none !important; text-decoration: none; }
/* ☰ 靠左 */
#ws-menu-btn { font-size: 18px; cursor: pointer; margin-right: auto; }
/* 🌙 靠右 */
#ws-dark-btn { font-size: 16px; cursor: pointer; }

/* ========== 侧边栏 ========== */
.ws-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000; cursor: pointer;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.ws-overlay.ws-show { opacity: 1; visibility: visible; }

#ws-sidebar {
    position: fixed; top: 0; left: 0; z-index: 10001;
    width: 220px; height: 100%;
    background: #fff;
    box-shadow: 4px 0 20px rgba(0,0,0,0.1);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column;
}
#ws-sidebar.ws-open { transform: translateX(0); }

/* 侧边栏头部 */
.ws-sidebar-header {
    padding: 28px 20px 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.ws-avatar-link { display: inline-block; }
.ws-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    border: 3px solid #f0f0f0;
    transition: transform 0.4s, border-color 0.3s;
}
.ws-avatar:hover { transform: rotate(360deg); border-color: #6777ef; }
.ws-user-name {
    margin-top: 12px; font-size: 14px; font-weight: 500;
    color: #333; letter-spacing: 0.5px;
}

/* 侧边栏导航 */
.ws-sidebar-nav {
    flex: 1; padding: 12px 0; overflow-y: auto;
}

/* 一级导航项 */
.ws-nav-item {
    display: flex; align-items: center;
    padding: 0 20px; height: 42px;
    color: #555; font-size: 14px;
    text-decoration: none; cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.ws-nav-item:hover {
    color: #6777ef; background: #f5f7ff; text-decoration: none;
}
.ws-nav-item > i:first-child {
    width: 20px; text-align: center; margin-right: 10px; font-size: 15px;
}
.ws-nav-item > span { flex: 1; }

/* 展开箭头 */
.ws-arrow {
    font-size: 12px !important; margin-left: auto;
    transition: transform 0.3s;
    width: auto !important; margin-right: 0 !important;
}
.ws-nav-group.ws-expanded .ws-arrow,
.ws-nav-group.ws-active .ws-arrow { transform: rotate(180deg); }

/* 激活状态 */
.ws-nav-group.ws-active > .ws-nav-item { color: #6777ef; font-weight: 500; }

/* 子菜单容器 */
.ws-nav-children {
    display: none; padding: 4px 0;
    background: #fafbfc;
}

/* 子菜单项 */
.ws-nav-child {
    display: block;
    padding: 0 20px 0 50px; height: 36px; line-height: 36px;
    color: #777; font-size: 13px;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}
.ws-nav-child:hover {
    color: #6777ef; background: #f0f2ff; text-decoration: none;
}
.ws-child-active {
    color: #6777ef !important; font-weight: 500;
    position: relative;
}
.ws-child-active::before {
    content: '';
    position: absolute; left: 30px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 4px; border-radius: 50%;
    background: #6777ef;
}

/* ========== 内容区域 ========== */
.main { width: 100%; margin: 0 auto; padding: 60px 0 20px; }
.typecho-page-main {
    border-radius: 8px; padding: 20px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.typecho-foot { display: none; }
.typecho-page-title { margin-bottom: 20px; }
.typecho-page-title h2 a { background: #6777ef; color: #fff; border-radius: 4px; }
#typecho-welcome { border-radius: 8px; background: #f8f9ff; }
.typecho-theme-list img { border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.typecho-theme-list tbody tr.current td { background: #f0f2ff; }

/* 编辑器 */
.primary { background-color: #6777ef; border-radius: 4px; }
.primary:hover { background: #5562c1; }
#wmd-preview { background: #fafafa; }
.popup { top: 50px !important; }

/* 头像 */
.comment-avatar .avatar, .profile-avatar {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 快捷链接 */
#start-link li {
    padding: 8px 16px; margin: 6px;
    background: #6777ef; border-radius: 4px;
    text-align: center; transition: background 0.2s;
}
#start-link li:hover { background: #5562c1; }
#start-link li a { color: #fff; text-decoration: none; }

/* 消息提示 */
.success { background: #f0f2ff; color: #6777ef; border-radius: 4px; }

/* 全屏 */
.main.main-in { width: 100% !important; }

/* ========== 响应式 ========== */
@media (max-width: 575px) {
    #ws-sidebar { width: 200px; }
    .ws-avatar { width: 48px; height: 48px; }
    .ws-nav-item { height: 38px; font-size: 13px; }
    .ws-nav-child { height: 32px; line-height: 32px; font-size: 12px; }
    .typecho-page-main { box-shadow: none; }
    .typecho-list-table thead { display: none; }
    .typecho-list-table tr { display: block; margin-bottom: 10px; border-radius: 6px; background: rgba(0,0,0,0.03); }
    .typecho-list-table td { display: block; text-align: left; border: none; height: auto !important; }
    .typecho-list-table td:nth-child(4),
    .typecho-list-table td:nth-child(5) { display: none; }
    .typecho-list-table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-size: 12px; color: #999; }
}