/* ===== 外观风格：新拟物（Neumorphism）=====
只在 时生效，默认的苹果风完全不受影响。
原理：元素与背景同色，靠「左上亮阴影 + 右下暗阴影」做出凸起 / 凹陷。
与「纯正」新拟物的唯一区别：主操作按钮（.btn.primary）保留了一点淡蓝色，
因为纯新拟物会把所有按钮做得一模一样，看不出哪个是主要操作——
这个网站有「上传资料」这类关键动作，层次不能丢。 */
html[data-theme="neu"] {
--neu-bg: #e0e5ee;
--neu-dark: #b4bccd;
--neu-light: #ffffff;
--neu-ink: #2b3445;
--neu-ink2: #6b7688;
--neu-brand: #3f61e8;
}
html[data-theme="neu"] body,
html[data-theme="neu"] .workbench,
html[data-theme="neu"] .main-login,
html[data-theme="neu"] .login-wrap {
background: var(--neu-bg) !important;
color: var(--neu-ink) !important;
}
/* ---------- 顶栏 ---------- */
html[data-theme="neu"] .topbar {
background: var(--neu-bg) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-bottom: none !important;
box-shadow: 0 10px 22px var(--neu-dark), 0 -8px 16px var(--neu-light) !important;
}
html[data-theme="neu"] .topbar .brand-name { color: var(--neu-ink) !important; }
html[data-theme="neu"] .brand-mark {
background: var(--neu-bg) !important;
color: var(--neu-brand) !important;
box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light) !important;
}
html[data-theme="neu"] .tbtn,
html[data-theme="neu"] .pick,
html[data-theme="neu"] .pick-chip {
background: var(--neu-bg) !important;
border: none !important;
color: var(--neu-ink) !important;
box-shadow: 5px 5px 11px var(--neu-dark), -5px -5px 11px var(--neu-light) !important;
transition: box-shadow .15s ease, color .15s ease !important;
}
html[data-theme="neu"] .tbtn:hover,
html[data-theme="neu"] .pick:hover,
html[data-theme="neu"] .pick-chip:hover {
box-shadow: 2px 2px 5px var(--neu-dark), -2px -2px 5px var(--neu-light) !important;
}
html[data-theme="neu"] .tbtn:active,
html[data-theme="neu"] .pick-chip:active {
box-shadow: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light) !important;
}
/* 当前选中的课程：凹陷 + 主题色 */
html[data-theme="neu"] .pick-chip.on {
color: var(--neu-brand) !important;
background: var(--neu-bg) !important;
box-shadow: inset 5px 5px 11px var(--neu-dark), inset -5px -5px 11px var(--neu-light) !important;
}
html[data-theme="neu"] .pick-chip.on .chip-dot { background: var(--neu-brand) !important; }
html[data-theme="neu"] .role-badge {
background: var(--neu-bg) !important;
border: none !important;
box-shadow: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light) !important;
color: var(--neu-ink2) !important;
}
/* ---------- 面板 ---------- */
html[data-theme="neu"] .wb-pane {
background: var(--neu-bg) !important;
border: none !important;
border-radius: 22px !important;
box-shadow: 14px 14px 30px var(--neu-dark), -12px -12px 28px var(--neu-light) !important;
}
html[data-theme="neu"] .wb-head {
background: transparent !important;
border-bottom: none !important;
color: var(--neu-ink) !important;
box-shadow: 0 6px 12px -8px var(--neu-dark) !important;
}
html[data-theme="neu"] .info-card {
background: var(--neu-bg) !important;
border: none !important;
border-radius: 16px !important;
box-shadow: inset 7px 7px 15px var(--neu-dark), inset -6px -6px 14px var(--neu-light) !important;
}
html[data-theme="neu"] .info-card .k { color: var(--neu-ink2) !important; }
html[data-theme="neu"] .info-card .v { color: var(--neu-ink) !important; }
html[data-theme="neu"] .badge {
background: var(--neu-bg) !important;
border: none !important;
color: var(--neu-ink) !important;
box-shadow: 2px 2px 5px var(--neu-dark), -2px -2px 5px var(--neu-light) !important;
}
html[data-theme="neu"] .wb-gutter::after { background: var(--neu-dark) !important; opacity: .5; }
/* ---------- 资料卡片 ---------- */
html[data-theme="neu"] .mcard {
background: var(--neu-bg) !important;
border: none !important;
border-radius: 18px !important;
box-shadow: 8px 8px 18px var(--neu-dark), -7px -7px 16px var(--neu-light) !important;
}
html[data-theme="neu"] .mcard:hover {
transform: none !important;
box-shadow: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light) !important;
}
html[data-theme="neu"] .mcard-on {
box-shadow: inset 7px 7px 15px var(--neu-dark), inset -6px -6px 14px var(--neu-light) !important;
}
html[data-theme="neu"] .kind-ico {
background: var(--neu-bg) !important;
box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light) !important;
}
html[data-theme="neu"] .mtitle { color: var(--neu-ink) !important; }
/* ---------- 按钮 ---------- */
html[data-theme="neu"] .btn {
background: var(--neu-bg) !important;
border: none !important;
border-radius: 12px !important;
color: var(--neu-ink) !important;
box-shadow: 5px 5px 12px var(--neu-dark), -5px -5px 12px var(--neu-light) !important;
}
html[data-theme="neu"] .btn:hover { background: var(--neu-bg) !important; }
html[data-theme="neu"] .btn:active {
box-shadow: inset 3px 3px 8px var(--neu-dark), inset -3px -3px 8px var(--neu-light) !important;
}
/* 主操作保留一点淡蓝，避免"所有按钮长一样"看不出重点 */
html[data-theme="neu"] .btn.primary {
background: #dde6fd !important;
color: var(--neu-brand) !important;
font-weight: 600 !important;
box-shadow: 5px 5px 12px var(--neu-dark), -5px -5px 12px var(--neu-light) !important;
}
html[data-theme="neu"] .btn.primary:active {
box-shadow: inset 3px 3px 8px #b9c4e0, inset -3px -3px 8px #ffffff !important;
}
/* ---------- 输入框 / 弹窗 / 表格 ---------- */
html[data-theme="neu"] .input,
html[data-theme="neu"] select.input,
html[data-theme="neu"] textarea.input {
background: var(--neu-bg) !important;
border: none !important;
color: var(--neu-ink) !important;
box-shadow: inset 4px 4px 9px var(--neu-dark), inset -4px -4px 9px var(--neu-light) !important;
}
html[data-theme="neu"] .modal,
html[data-theme="neu"] .dialog {
background: var(--neu-bg) !important;
border: none !important;
border-radius: 20px !important;
box-shadow: 16px 16px 36px rgba(60,70,95,.35), -10px -10px 26px var(--neu-light) !important;
}
html[data-theme="neu"] .acc {
background: var(--neu-bg) !important;
border: none !important;
border-radius: 16px !important;
box-shadow: 8px 8px 18px var(--neu-dark), -7px -7px 16px var(--neu-light) !important;
}
html[data-theme="neu"] table.grid th { background: var(--neu-bg) !important; color: var(--neu-ink) !important; }
html[data-theme="neu"] table.grid td { border-color: rgba(150,160,185,.28) !important; }
/* ---------- 预览区 ---------- */
html[data-theme="neu"] .pv-area { background: var(--neu-bg) !important; }
html[data-theme="neu"] .wb-empty { color: var(--neu-ink2) !important; }
/* ---------- 设置页的「外观风格」选择卡 ---------- */
.theme-pick { display: flex; gap: 14px; flex-wrap: wrap; }
.theme-card {
flex: 1 1 220px; max-width: 320px; text-align: left; cursor: pointer;
background: #fff; border: 1px solid var(--line-solid); border-radius: 14px;
padding: 14px; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s;
}
.theme-card:hover { border-color: var(--brand); }
.theme-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,113,227,.14); }
.theme-card .tc-name { font-weight: 700; margin-top: 10px; }
.theme-card .tc-desc { font-size: 12px; color: var(--ink2); margin-top: 4px; line-height: 1.6; }
.theme-card .tc-swatch { height: 58px; border-radius: 10px; position: relative; overflow: hidden; }
/* 苹果风缩略图 */
.tc-swatch.apple { background: #f5f5f7; border: 1px solid #e3e3e6; }
.tc-swatch.apple span { position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; background: #fff; border: 1px solid #e3e3e6; border-radius: 8px; }
/* 新拟物缩略图 */
.tc-swatch.neu { background: #e0e5ee; }
.tc-swatch.neu span {
position: absolute; left: 12px; top: 12px; right: 12px; bottom: 12px;
background: #e0e5ee; border-radius: 10px;
box-shadow: 5px 5px 11px #b4bccd, -5px -5px 11px #ffffff;
}
html[data-theme="neu"] .theme-card {
background: var(--neu-bg); border: none;
box-shadow: 8px 8px 18px var(--neu-dark), -7px -7px 16px var(--neu-light);
}
html[data-theme="neu"] .theme-card.on {
box-shadow: inset 6px 6px 14px var(--neu-dark), inset -5px -5px 12px var(--neu-light);
}
html[data-theme="neu"] .theme-card .tc-desc { color: var(--neu-ink2); }