/**
 * 印客后台美化 · InkAdmin
 * 现代极简风格覆盖层
 *
 * 设计原则：
 * 1. 仅覆盖视觉层（颜色/圆角/间距/阴影），不改变布局结构
 * 2. 使用 CSS 变量便于主题切换，所有自定义值以 --ink- 前缀
 * 3. 优先级通过层叠顺序保证（本文件在 style.css 之后加载）
 * 4. 兼容原版的所有 class 命名，无需修改 HTML
 *
 * @author inkGS
 * @version 1.0.0
 */

/* ============================================
   1. 设计令牌（CSS 变量）
   ============================================ */
:root {
    /* 由 Plugin.php 注入的变量 */
    /* --ink-accent: #c0392b; */
    /* --ink-radius: 8px; */
    /* --ink-density: comfortable; */

    /* 衍生色：基于强调色自动派生 */
    --ink-accent-hover: color-mix(in srgb, var(--ink-accent) 85%, #000);
    --ink-accent-active: color-mix(in srgb, var(--ink-accent) 75%, #000);
    --ink-accent-soft: color-mix(in srgb, var(--ink-accent) 12%, transparent);
    --ink-accent-bg: color-mix(in srgb, var(--ink-accent) 6%, transparent);

    /* 中性色阶 */
    --ink-bg: #fafafa;
    --ink-surface: #ffffff;
    --ink-surface-2: #f5f5f4;
    --ink-border: #e7e5e4;
    --ink-border-strong: #d6d3d1;
    --ink-text: #1c1917;
    --ink-text-2: #57534e;
    --ink-text-3: #a8a29e;

    /* 语义色 */
    --ink-success: #16a34a;
    --ink-success-bg: #f0fdf4;
    --ink-warning: #d97706;
    --ink-warning-bg: #fffbeb;
    --ink-danger: #dc2626;
    --ink-danger-bg: #fef2f2;
    --ink-info: #2563eb;
    --ink-info-bg: #eff6ff;

    /* 阴影 */
    --ink-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --ink-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.04);
    --ink-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
    --ink-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);

    /* 过渡 */
    --ink-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* 字体 */
    --ink-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --ink-font-mono: "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;
}

/* 紧凑模式：减小间距 */
:root[style*="--ink-density:compact"],
body {
    --ink-space-xs: 4px;
    --ink-space-sm: 8px;
    --ink-space-md: 12px;
    --ink-space-lg: 16px;
    --ink-space-xl: 24px;
}

[root="--ink-density:comfortable"],
:root:not([style*="--ink-density:compact"]) {
    --ink-space-xs: 6px;
    --ink-space-sm: 10px;
    --ink-space-md: 16px;
    --ink-space-lg: 20px;
    --ink-space-xl: 32px;
}

/* ============================================
   2. 全局基础
   ============================================ */
body {
    background: var(--ink-bg) !important;
    color: var(--ink-text) !important;
    font-family: var(--ink-font) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--ink-accent) !important;
    text-decoration: none !important;
    transition: color var(--ink-transition);
}

a:hover {
    color: var(--ink-accent-hover) !important;
    text-decoration: none !important;
}

code, pre, .mono {
    font-family: var(--ink-font-mono) !important;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--ink-border-strong);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink-text-3);
}

/* 文本选择 */
::selection {
    background: var(--ink-accent-soft);
    color: var(--ink-accent-active);
}

/* ============================================
   3. 顶部导航栏
   ============================================ */
.typecho-head-nav {
    background: #1c1917 !important;
    box-shadow: 0 1px 0 0 rgb(0 0 0 / 0.05);
    backdrop-filter: blur(8px);
}

.typecho-head-nav a,
.typecho-head-nav .menu-bar summary {
    color: #a8a29e !important;
    transition: all var(--ink-transition);
    font-weight: 500;
}

.typecho-head-nav a:hover,
.typecho-head-nav a:focus,
.typecho-head-nav .menu-bar summary:hover,
.typecho-head-nav .menu-bar summary:focus,
.typecho-head-nav nav > menu > li:not(.operate).focus > a,
.typecho-head-nav nav > menu > li:not(.operate):hover > a {
    color: #fff !important;
    background: #292524 !important;
    text-decoration: none !important;
}

.typecho-head-nav nav > menu > li:first-child {
    border-left-color: #292524 !important;
}

.typecho-head-nav nav > menu > li > a {
    border-right-color: #292524 !important;
}

.typecho-head-nav nav > menu > li menu {
    background: #1c1917 !important;
    box-shadow: var(--ink-shadow-lg);
    border-radius: 0 0 var(--ink-radius) var(--ink-radius);
    overflow: hidden;
}

.typecho-head-nav nav > menu > li menu > li a:hover,
.typecho-head-nav nav > menu > li menu > li a:focus {
    background: #292524 !important;
}

.typecho-head-nav nav > menu > li menu > li.focus a {
    color: var(--ink-accent) !important;
    font-weight: 600 !important;
}

/* ============================================
   4. 按钮
   ============================================ */
.btn,
#ui-datepicker-div .ui-datepicker-current,
#ui-datepicker-div .ui-datepicker-close {
    background-color: var(--ink-surface) !important;
    color: var(--ink-text-2) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    height: 34px !important;
    padding: 0 14px !important;
    font-weight: 500 !important;
    box-shadow: var(--ink-shadow-sm) !important;
    transition: all var(--ink-transition) !important;
}

.btn:hover,
#ui-datepicker-div .ui-datepicker-current:hover,
#ui-datepicker-div .ui-datepicker-close:hover {
    background-color: var(--ink-surface-2) !important;
    border-color: var(--ink-border-strong) !important;
    color: var(--ink-text) !important;
}

.btn:active,
.btn.active {
    background-color: var(--ink-surface-2) !important;
    transform: translateY(1px);
}

.btn:disabled {
    background-color: var(--ink-surface-2) !important;
    color: var(--ink-text-3) !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.btn-xs,
#ui-datepicker-div .ui-datepicker-current,
#ui-datepicker-div .ui-datepicker-close {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
}

.btn-s {
    height: 30px !important;
}

.btn-l {
    height: 42px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* 主要按钮 */
.primary {
    background-color: var(--ink-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--ink-accent) 40%, transparent) !important;
    transition: all var(--ink-transition) !important;
}

.primary:hover {
    background-color: var(--ink-accent-hover) !important;
    box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--ink-accent) 40%, transparent) !important;
}

.primary:active,
.primary.active {
    background-color: var(--ink-accent-active) !important;
    transform: translateY(1px);
}

.primary:disabled {
    background-color: var(--ink-accent) !important;
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* 警告按钮 */
.btn-warn {
    background-color: var(--ink-danger) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ink-radius) !important;
    transition: all var(--ink-transition) !important;
}

.btn-warn:hover {
    background-color: color-mix(in srgb, var(--ink-danger) 85%, #000) !important;
}

/* 链接按钮 */
.btn-link {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--ink-accent) !important;
    padding: 0 8px !important;
}

.btn-link:hover {
    background: var(--ink-accent-soft) !important;
    color: var(--ink-accent-hover) !important;
}

/* ============================================
   5. 表单输入
   ============================================ */
input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    padding: 8px 12px !important;
    color: var(--ink-text) !important;
    font-size: 14px !important;
    transition: all var(--ink-transition) !important;
    box-shadow: var(--ink-shadow-sm) !important;
}

input[type="text"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover {
    border-color: var(--ink-border-strong) !important;
}

input[type="text"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--ink-accent) !important;
    box-shadow: 0 0 0 3px var(--ink-accent-soft) !important;
    outline: none !important;
}

input[type="text"]:disabled,
input[type="text"]:read-only,
input[type="url"]:disabled,
input[type="url"]:read-only,
input[type="password"]:disabled,
input[type="password"]:read-only,
input[type="email"]:disabled,
input[type="email"]:read-only,
input[type="number"]:disabled,
input[type="number"]:read-only,
textarea:disabled,
textarea:read-only {
    background: var(--ink-surface-2) !important;
    color: var(--ink-text-3) !important;
    cursor: not-allowed;
}

select {
    height: 34px !important;
    padding: 0 28px 0 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* ============================================
   6. 卡片与容器
   ============================================ */
.typecho-list-table {
    background: var(--ink-surface) !important;
    border: 0 !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow) !important;
    overflow: hidden;
}

.typecho-list-table.deactivate {
    opacity: 0.6;
}

.typecho-list-table th {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--ink-border) !important;
    color: var(--ink-text-3) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--ink-surface-2);
}

.typecho-list-table td {
    padding: 14px !important;
    border-top: 1px solid var(--ink-border) !important;
    color: var(--ink-text) !important;
}

.typecho-list-table tbody tr:hover {
    background-color: var(--ink-surface-2) !important;
}

.typecho-list-table tbody tr:has(input[type="checkbox"]:checked) {
    background-color: var(--ink-accent-bg) !important;
}

/* 标签列表 */
.tag-list {
    background-color: var(--ink-surface) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow) !important;
}

.tag-list.typecho-list-notable li:hover {
    background-color: var(--ink-surface-2) !important;
}

.tag-list.typecho-list-notable li:has(input[type="checkbox"]:checked) {
    background-color: var(--ink-accent-bg) !important;
}

/* ============================================
   7. 消息提示
   ============================================ */
.message {
    padding: 10px 14px !important;
    border-radius: var(--ink-radius) !important;
    border: 1px solid transparent !important;
    font-size: 14px !important;
}

.error {
    background: var(--ink-danger-bg) !important;
    color: var(--ink-danger) !important;
    border-color: color-mix(in srgb, var(--ink-danger) 20%, transparent) !important;
}

.notice {
    background: var(--ink-warning-bg) !important;
    color: var(--ink-warning) !important;
    border-color: color-mix(in srgb, var(--ink-warning) 20%, transparent) !important;
}

.success {
    background: var(--ink-success-bg) !important;
    color: var(--ink-success) !important;
    border-color: color-mix(in srgb, var(--ink-success) 20%, transparent) !important;
}

.popup {
    border-radius: 0 !important;
    box-shadow: var(--ink-shadow-md) !important;
}

/* ============================================
   8. 分页
   ============================================ */
.typecho-pager li a {
    border-radius: var(--ink-radius) !important;
    padding: 0 12px !important;
    color: var(--ink-text-2) !important;
    transition: all var(--ink-transition) !important;
}

.typecho-pager li a:hover {
    background: var(--ink-surface-2) !important;
    color: var(--ink-text) !important;
}

.typecho-pager li.current a {
    background: var(--ink-accent) !important;
    color: #fff !important;
}

/* ============================================
   9. 标签页（Tabs）
   ============================================ */
.typecho-option-tabs li a {
    border: 1px solid var(--ink-border) !important;
    color: var(--ink-text-2) !important;
    background: var(--ink-surface) !important;
    height: 32px !important;
    transition: all var(--ink-transition) !important;
}

.typecho-option-tabs li:first-child a {
    border-radius: var(--ink-radius) 0 0 var(--ink-radius) !important;
}

.typecho-option-tabs li:last-child a {
    border-radius: 0 var(--ink-radius) var(--ink-radius) 0 !important;
}

.typecho-option-tabs li a:hover {
    background: var(--ink-surface-2) !important;
    color: var(--ink-text) !important;
}

.typecho-option-tabs li.current a,
.typecho-option-tabs li.active a {
    background: var(--ink-accent) !important;
    color: #fff !important;
    border-color: var(--ink-accent) !important;
}

/* ============================================
   10. 文章编辑页
   ============================================ */
.typecho-post-area input.title {
    font-size: 22px !important;
    font-weight: 600 !important;
    padding: 12px 14px !important;
    border-radius: var(--ink-radius) !important;
}

.typecho-post-area #slug {
    background: var(--ink-warning-bg) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    color: var(--ink-warning) !important;
}

.typecho-post-area #custom-field {
    background: var(--ink-surface) !important;
    border-radius: var(--ink-radius) !important;
    border: 1px solid var(--ink-border) !important;
    box-shadow: var(--ink-shadow-sm) !important;
}

.typecho-post-area #edit-secondary .category-option ul {
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    background-color: var(--ink-surface) !important;
}

/* 编辑器按钮栏 */
#wmd-button-bar .wmd-button-row li {
    border-radius: var(--ink-radius) !important;
    transition: background var(--ink-transition) !important;
}

#wmd-button-bar .wmd-button-row li:hover {
    background-color: var(--ink-surface-2) !important;
}

/* 预览区 */
#wmd-preview {
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    padding: 16px 20px !important;
}

/* ============================================
   11. 仪表盘
   ============================================ */
#typecho-welcome {
    margin: 16px 0 !important;
    padding: 20px 28px !important;
    background: linear-gradient(135deg, var(--ink-accent-bg) 0%, var(--ink-surface) 100%) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-sm) !important;
}

.welcome-board em {
    color: var(--ink-accent) !important;
    font-weight: 700 !important;
}

#start-link {
    border-bottom: 1px solid var(--ink-border) !important;
}

/* ============================================
   12. 页面标题
   ============================================ */
.typecho-page-title {
    margin: 28px 0 16px !important;
}

.typecho-page-title h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--ink-text) !important;
}

.typecho-page-title a {
    padding: 4px 10px !important;
    background: var(--ink-surface-2) !important;
    border-radius: var(--ink-radius) !important;
    color: var(--ink-text-2) !important;
    font-size: 12px !important;
    transition: all var(--ink-transition) !important;
}

.typecho-page-title a:hover {
    background: var(--ink-accent) !important;
    color: #fff !important;
}

/* ============================================
   13. 选项表单
   ============================================ */
.typecho-option label.typecho-label {
    font-weight: 600 !important;
    color: var(--ink-text) !important;
    margin-bottom: 6px !important;
}

.typecho-option .description {
    color: var(--ink-text-3) !important;
}

/* ============================================
   14. 评论管理
   ============================================ */
.comment-reply-content {
    background-color: var(--ink-surface-2) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    padding: 12px 16px !important;
}

.comment-reply-content:after {
    border-color: var(--ink-surface-2) var(--ink-surface-2) transparent transparent !important;
}

/* ============================================
   15. 登录页
   ============================================ */
.typecho-login-wrap .typecho-login h1 {
    margin-bottom: 24px !important;
}

/* ============================================
   16. 下拉菜单
   ============================================ */
.dropdown-menu {
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-lg) !important;
    background: var(--ink-surface) !important;
    padding: 4px !important;
    min-width: 140px !important;
}

.dropdown-menu a {
    padding: 8px 12px !important;
    color: var(--ink-text-2) !important;
    border-radius: 4px !important;
    transition: all var(--ink-transition) !important;
}

.dropdown-menu a:hover {
    background: var(--ink-surface-2) !important;
    color: var(--ink-text) !important;
}

/* ============================================
   17. 气球按钮
   ============================================ */
a.balloon-button {
    background: var(--ink-accent-soft) !important;
    color: var(--ink-accent) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    transition: all var(--ink-transition) !important;
}

a.balloon-button:hover {
    background: var(--ink-accent) !important;
    color: #fff !important;
}

.balloon {
    background: var(--ink-text-3) !important;
    border-radius: 999px !important;
}

/* ============================================
   18. 上传区
   ============================================ */
#upload-panel {
    border: 2px dashed var(--ink-border-strong) !important;
    background-color: var(--ink-surface) !important;
    border-radius: var(--ink-radius) !important;
    transition: all var(--ink-transition) !important;
}

#upload-panel.drag {
    background-color: var(--ink-accent-bg) !important;
    border-color: var(--ink-accent) !important;
}

/* ============================================
   19. 日期选择器
   ============================================ */
#ui-datepicker-div {
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-lg) !important;
    background: var(--ink-surface) !important;
    padding: 14px !important;
}

#ui-datepicker-div .ui-datepicker-calendar a {
    border-radius: 4px !important;
    transition: all var(--ink-transition) !important;
}

#ui-datepicker-div .ui-datepicker-today a {
    background-color: var(--ink-surface-2) !important;
    color: var(--ink-text) !important;
    font-weight: 600 !important;
}

#ui-datepicker-div .ui-datepicker-current-day a {
    background-color: var(--ink-accent) !important;
    color: #fff !important;
}

/* ============================================
   20. 页脚
   ============================================ */
.typecho-foot {
    color: var(--ink-text-3) !important;
    padding: 3em 0 2em !important;
}

.typecho-foot .resource a {
    color: var(--ink-text-3) !important;
    transition: color var(--ink-transition) !important;
}

.typecho-foot .resource a:hover {
    color: var(--ink-accent) !important;
}

/* ============================================
   21. 操作链接颜色
   ============================================ */
.operate-delete,
.operate-button-delete {
    color: var(--ink-danger) !important;
}

.operate-edit {
    color: var(--ink-success) !important;
}

.operate-reply {
    color: var(--ink-info) !important;
}

/* ============================================
   22. 响应式微调
   ============================================ */
@media (max-width: 575px) {
    body {
        font-size: 13px !important;
    }

    .typecho-list-table {
        border-width: 0 !important;
    }

    .typecho-post-area input.title {
        font-size: 18px !important;
    }
}

/* ============================================
   23. 左侧侧边栏布局（覆盖默认顶部菜单）
   ============================================ */

/* 侧边栏宽度变量 */
:root {
    --ink-sidebar-width: 220px;
    --ink-sidebar-collapsed-width: 60px;
}

/* body 加左侧 padding，为固定侧边栏留出空间
   仅在非登录页/非注册页生效（登录页 body class 为 body-100） */
body:not(.body-100) {
    padding-left: var(--ink-sidebar-width) !important;
    min-height: 100vh;
    box-sizing: border-box;
    transition: padding-left var(--ink-transition);
}

/* 主内容区域占满右侧 */
body:not(.body-100) > .main {
    min-width: 0;
}

/* ============================================
   23.1 侧边栏容器
   ============================================ */
body:not(.body-100) .typecho-head-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ink-sidebar-width);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    box-shadow: 2px 0 8px 0 rgb(0 0 0 / 0.04);
    transition: width var(--ink-transition);
}

/* 侧边栏滚动条 */
body:not(.body-100) .typecho-head-nav::-webkit-scrollbar {
    width: 4px;
}

body:not(.body-100) .typecho-head-nav::-webkit-scrollbar-thumb {
    background: #44403c;
}

/* nav 容器改为垂直 flex */
body:not(.body-100) .typecho-head-nav nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}

/* 隐藏移动端折叠按钮（桌面侧边栏常驻） */
body:not(.body-100) .typecho-head-nav .menu-bar {
    display: none;
}

/* ============================================
   23.2 菜单项垂直布局
   ============================================ */
body:not(.body-100) .typecho-head-nav nav > menu {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0 !important;
    padding: 8px 0 !important;
    flex: 1;
}

/* 顶级 li 水平排列改为垂直 */
body:not(.body-100) .typecho-head-nav nav > menu > li {
    display: block !important;
    width: 100%;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid #292524;
    position: relative;
}

body:not(.body-100) .typecho-head-nav nav > menu > li:first-child {
    border-top: 0;
}

/* 顶级链接：块状铺满 */
body:not(.body-100) .typecho-head-nav nav > menu > li > a {
    display: block !important;
    padding: 12px 18px !important;
    border-right: 0 !important;
    color: #d6d3d1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body:not(.body-100) .typecho-head-nav nav > menu > li > a:hover,
body:not(.body-100) .typecho-head-nav nav > menu > li.focus > a {
    background: #292524 !important;
    color: #fff !important;
    border-left: 3px solid var(--ink-accent);
    padding-left: 15px !important;
}

/* 当前激活菜单项 */
body:not(.body-100) .typecho-head-nav nav > menu > li.focus > a {
    color: #fff !important;
    background: linear-gradient(90deg, var(--ink-accent-bg) 0%, transparent 100%) !important;
}

/* ============================================
   23.3 子菜单：内嵌展开（而非悬浮下拉）
   ============================================ */
body:not(.body-100) .typecho-head-nav nav > menu > li menu {
    position: static !important;
    display: block;
    visibility: visible;
    opacity: 1;
    background: #0c0a09 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100%;
}

/* 子菜单项 */
body:not(.body-100) .typecho-head-nav nav > menu > li menu > li a {
    display: block !important;
    padding: 8px 18px 8px 32px !important;
    color: #a8a29e !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-left: 3px solid transparent;
    transition: all var(--ink-transition) !important;
}

body:not(.body-100) .typecho-head-nav nav > menu > li menu > li a:hover {
    background: #1c1917 !important;
    color: #fff !important;
    border-left-color: var(--ink-accent) !important;
    padding-left: 36px !important;
}

body:not(.body-100) .typecho-head-nav nav > menu > li menu > li.focus a {
    color: var(--ink-accent) !important;
    background: var(--ink-accent-bg) !important;
    font-weight: 600 !important;
    border-left-color: var(--ink-accent) !important;
}

/* ============================================
   23.4 底部操作区（用户/登出/网站）
   ============================================ */
body:not(.body-100) .typecho-head-nav nav > menu > li.operate {
    margin-top: auto !important;
    border-top: 1px solid #292524 !important;
    background: #0c0a09 !important;
}

body:not(.body-100) .typecho-head-nav nav > menu > li.operate a {
    display: block !important;
    padding: 10px 18px !important;
    color: #a8a29e !important;
    font-size: 13px !important;
    border-left: 3px solid transparent;
    border-radius: 0 !important;
}

body:not(.body-100) .typecho-head-nav nav > menu > li.operate a:hover {
    background: #292524 !important;
    color: #fff !important;
    border-left-color: var(--ink-accent);
}

body:not(.body-100) .typecho-head-nav nav > menu > li.operate a.author {
    color: #fff !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #292524;
}

body:not(.body-100) .typecho-head-nav nav > menu > li.operate a.exit {
    color: var(--ink-danger) !important;
}

body:not(.body-100) .typecho-head-nav nav > menu > li.operate a.exit:hover {
    background: var(--ink-danger-bg) !important;
    color: var(--ink-danger) !important;
}

/* ============================================
   23.5 紧凑模式：侧边栏变窄
   ============================================ */
:root[style*="--ink-density:compact"] {
    --ink-sidebar-width: 180px;
}

/* ============================================
   23.6 汉堡按钮与遮罩层（桌面端隐藏，移动端显示）
   ============================================ */

/* 汉堡按钮 */
.ink-sidebar-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--ink-radius);
    background: #1c1917;
    cursor: pointer;
    box-shadow: var(--ink-shadow-md);
    transition: background var(--ink-transition);
    -webkit-tap-highlight-color: transparent;
}

.ink-sidebar-toggle-bar {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms linear;
}

.ink-sidebar-toggle-bar:nth-child(1) {
    transform: translate(-50%, -7px);
}

.ink-sidebar-toggle-bar:nth-child(3) {
    transform: translate(-50%, 5px);
}

/* 激活态：三横线变 X */
.ink-sidebar-toggle.is-active .ink-sidebar-toggle-bar:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ink-sidebar-toggle.is-active .ink-sidebar-toggle-bar:nth-child(2) {
    opacity: 0;
}

.ink-sidebar-toggle.is-active .ink-sidebar-toggle-bar:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 遮罩层 */
.ink-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgb(0 0 0 / 0.5);
    opacity: 0;
    transition: opacity var(--ink-transition);
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   23.7 响应式：移动端 off-canvas 侧边栏
   ============================================ */
@media (max-width: 767px) {
    /* body 不再预留左侧空间 */
    body:not(.body-100) {
        padding-left: 0 !important;
    }

    /* 顶部留出汉堡按钮的空间 */
    body:not(.body-100) .main {
        padding-top: 56px;
    }

    /* 侧边栏改为 off-canvas：默认隐藏在左侧 */
    body:not(.body-100) .typecho-head-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--ink-sidebar-width);
        height: 100vh;
        max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--ink-shadow-lg);
        z-index: 180;
    }

    /* 打开状态：侧边栏滑入 */
    body:not(.body-100).ink-sidebar-open .typecho-head-nav {
        transform: translateX(0);
    }

    /* 显示汉堡按钮 */
    body:not(.body-100) .ink-sidebar-toggle {
        display: block;
    }

    /* 显示遮罩层（仅在打开时可见） */
    body:not(.body-100).ink-sidebar-open .ink-sidebar-overlay {
        display: block;
        opacity: 1;
    }

    /* 菜单保持垂直布局（沿用桌面端样式，无需覆盖） */
    body:not(.body-100) .typecho-head-nav nav > menu {
        flex-direction: column;
    }

    /* 隐藏原生的折叠按钮，避免与汉堡按钮重复 */
    body:not(.body-100) .typecho-head-nav .menu-bar {
        display: none !important;
    }
}

/* ============================================
   24. 发文像素图表（GitHub 同款热力图）
   ============================================ */

/* 色阶：基于强调色派生 5 档（0=无，4=最浓） */
:root {
    --ink-heat-0: #ebedf0;
    --ink-heat-1: color-mix(in srgb, var(--ink-accent) 25%, #ebedf0);
    --ink-heat-2: color-mix(in srgb, var(--ink-accent) 50%, #ebedf0);
    --ink-heat-3: color-mix(in srgb, var(--ink-accent) 75%, #ebedf0);
    --ink-heat-4: var(--ink-accent);
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --ink-heat-0: #161b22;
        --ink-heat-1: color-mix(in srgb, var(--ink-accent) 20%, #161b22);
        --ink-heat-2: color-mix(in srgb, var(--ink-accent) 40%, #161b22);
        --ink-heat-3: color-mix(in srgb, var(--ink-accent) 65%, #161b22);
        --ink-heat-4: var(--ink-accent);
    }
}

/* 卡片容器 */
.ink-heatmap-card {
    margin: 0 0 20px !important;
    padding: 18px 20px !important;
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-sm) !important;
}

/* 标题栏 */
.ink-heatmap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.ink-heatmap-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink-text) !important;
}

/* 标题前的小方块图标（与图表呼应） */
.ink-heatmap-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--ink-accent);
}

.ink-heatmap-range {
    font-size: 12px !important;
    color: var(--ink-text-3) !important;
    font-variant-numeric: tabular-nums;
}

/* 图表主体 */
.ink-heatmap-body {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

/* 星期标签列（一/三/五） */
.ink-heatmap-weekdays {
    display: grid;
    grid-template-rows: repeat(7, 13px);
    gap: 3px;
    padding-top: 22px; /* 给月份标签留空间 */
    flex-shrink: 0;
}

.ink-heatmap-weekdays span {
    font-size: 10px;
    line-height: 13px;
    color: var(--ink-text-3);
    height: 13px;
}

/* 网格容器 */
.ink-heatmap-grid-wrap {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

/* 月份标签行 */
.ink-heatmap-months {
    display: grid;
    grid-auto-columns: 13px;
    grid-auto-flow: column;
    gap: 3px;
    height: 18px;
    margin-bottom: 4px;
}

.ink-heatmap-months span {
    font-size: 10px;
    line-height: 18px;
    color: var(--ink-text-3);
    white-space: nowrap;
}

/* 像素网格：每列 7 个格子 */
.ink-heatmap-grid {
    display: grid;
    grid-auto-columns: 13px;
    grid-auto-flow: column;
    gap: 3px;
}

.ink-heatmap-col {
    display: grid;
    grid-template-rows: repeat(7, 13px);
    gap: 3px;
}

/* 单个像素格子 */
.ink-heatmap-cell {
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: var(--ink-heat-0);
    transition: transform 100ms ease, outline-color 100ms ease;
    outline: 1px solid transparent;
    outline-offset: -1px;
}

.ink-heatmap-cell.level-1 { background: var(--ink-heat-1); }
.ink-heatmap-cell.level-2 { background: var(--ink-heat-2); }
.ink-heatmap-cell.level-3 { background: var(--ink-heat-3); }
.ink-heatmap-cell.level-4 { background: var(--ink-heat-4); }

/* hover 高亮 */
.ink-heatmap-cell:not(.is-empty):hover {
    transform: scale(1.3);
    outline: 1px solid var(--ink-accent);
    z-index: 1;
    position: relative;
}

/* 空位（无日期） */
.ink-heatmap-cell.is-empty {
    background: transparent;
}

/* 图例 */
.ink-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 12px;
    font-size: 12px;
}

.ink-heatmap-legend-label {
    color: var(--ink-text-3);
    margin: 0 2px;
}

.ink-heatmap-legend .ink-heatmap-cell {
    width: 11px;
    height: 11px;
    cursor: default;
}

.ink-heatmap-legend .ink-heatmap-cell:hover {
    transform: none;
    outline-color: transparent;
}

/* ============================================
   24.1 响应式：移动端图表优化
   ============================================ */
@media (max-width: 767px) {
    .ink-heatmap-card {
        padding: 14px 14px !important;
        margin: 0 -4px 16px !important;
    }

    .ink-heatmap-header {
        margin-bottom: 10px;
    }

    .ink-heatmap-title {
        font-size: 13px !important;
    }

    .ink-heatmap-range {
        font-size: 11px !important;
        width: 100%;
        text-align: left;
    }

    /* 像素格子稍小，避免横向溢出 */
    .ink-heatmap-cell {
        width: 11px;
        height: 11px;
    }

    .ink-heatmap-col {
        grid-template-rows: repeat(7, 11px);
    }

    .ink-heatmap-weekdays {
        grid-template-rows: repeat(7, 11px);
    }

    .ink-heatmap-weekdays span {
        line-height: 11px;
        height: 11px;
    }

    .ink-heatmap-grid {
        grid-auto-columns: 11px;
    }

    .ink-heatmap-months {
        grid-auto-columns: 11px;
        height: 16px;
    }

    .ink-heatmap-months span {
        line-height: 16px;
        font-size: 9px;
    }

    .ink-heatmap-legend .ink-heatmap-cell {
        width: 10px;
        height: 10px;
    }
}

/* ============================================
   25. 文章/页面管理列表页（manage-*.php）
   ============================================ */

/* 状态徽章（草稿/待审核/私密/隐藏/密码保护） */
.typecho-list-table .status {
    display: inline-block !important;
    padding: 1px 8px !important;
    margin-left: 6px !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    border-radius: 10px !important;
    background: var(--ink-surface-2) !important;
    color: var(--ink-text-3) !important;
    vertical-align: 1px !important;
}

/* 评论数气球按钮 */
.typecho-list-table .balloon-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 24px !important;
    height: 22px !important;
    padding: 0 7px !important;
    background: var(--ink-surface-2) !important;
    color: var(--ink-text-2) !important;
    font-size: 12px !important;
    border-radius: 11px !important;
    transition: all var(--ink-transition) !important;
}

.typecho-list-table .balloon-button:hover {
    background: var(--ink-accent) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.typecho-list-table .balloon-button.size-10,
.typecho-list-table .balloon-button.size-20,
.typecho-list-table .balloon-button.size-30,
.typecho-list-table .balloon-button.size-50,
.typecho-list-table .balloon-button.size-100 {
    background: color-mix(in srgb, var(--ink-accent) 15%, transparent) !important;
    color: var(--ink-accent) !important;
}

/* 操作工具栏：下拉菜单 */
.btn-group.btn-drop .dropdown-menu {
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-md) !important;
    padding: 4px 0 !important;
    min-width: 140px !important;
}

.btn-group.btn-drop .dropdown-menu li {
    padding: 0 !important;
}

.btn-group.btn-drop .dropdown-menu a {
    padding: 8px 14px !important;
    color: var(--ink-text-2) !important;
    font-size: 13px !important;
    transition: all 120ms ease !important;
}

.btn-group.btn-drop .dropdown-menu a:hover {
    background: var(--ink-accent-bg) !important;
    color: var(--ink-accent) !important;
    text-decoration: none !important;
}

.btn-group.btn-drop .dropdown-menu a[lang] {
    color: var(--ink-danger) !important;
}

.btn-group.btn-drop .dropdown-menu a[lang]:hover {
    background: var(--ink-danger-bg) !important;
}

.btn-group.btn-drop .dropdown-menu .multiline {
    padding: 8px 14px !important;
    border-top: 1px solid var(--ink-border) !important;
    background: var(--ink-surface-2) !important;
}

/* 列表操作区：搜索框 */
.typecho-list-operate .search input[type="text"],
.typecho-list-operate .search select {
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    padding: 5px 10px !important;
    background: var(--ink-surface) !important;
    transition: border-color var(--ink-transition) !important;
}

.typecho-list-operate .search input[type="text"]:focus,
.typecho-list-operate .search select:focus {
    border-color: var(--ink-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--ink-accent-soft) !important;
}

/* "取消筛选"链接 */
.typecho-list-operate .search > a {
    color: var(--ink-accent) !important;
    font-size: 13px !important;
    margin-right: 6px !important;
}

/* 列表表格：行内操作图标 */
.typecho-list-table .i-edit,
.typecho-list-table .i-exlink,
.typecho-list-table .i-delete {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 4px !important;
    text-align: center !important;
    line-height: 20px !important;
    border-radius: 4px !important;
    color: var(--ink-text-3) !important;
    transition: all var(--ink-transition) !important;
}

.typecho-list-table .i-edit:hover,
.typecho-list-table .i-exlink:hover {
    background: var(--ink-accent-bg) !important;
    color: var(--ink-accent) !important;
    text-decoration: none !important;
}

.typecho-list-table .i-delete:hover {
    background: var(--ink-danger-bg) !important;
    color: var(--ink-danger) !important;
}

/* 表格头部加粗、底色 */
.typecho-list-table thead th {
    color: var(--ink-text-2) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--ink-surface-2) !important;
    padding: 8px 10px !important;
}

/* 表格圆角裁切 */
.typecho-list-table {
    border-radius: var(--ink-radius) !important;
    overflow: hidden;
}

/* 空数据提示 */
.typecho-list-table .none {
    color: var(--ink-text-3) !important;
    padding: 32px 10px !important;
    font-size: 13px !important;
}

/* ============================================
   26. 文章编辑页（write-post.php / write-page.php）
   ============================================ */

/* 草稿提示条 */
.typecho-post-area .edit-draft-notice {
    display: block !important;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
    background: var(--ink-warning-bg) !important;
    color: var(--ink-warning) !important;
    border-left: 3px solid var(--ink-warning) !important;
    border-radius: var(--ink-radius) !important;
    font-style: normal !important;
    font-size: 13px !important;
}

.typecho-post-area .edit-draft-notice a {
    color: var(--ink-warning) !important;
    text-decoration: underline !important;
}

/* 标题输入框：聚焦时强调色边框 */
.typecho-post-area input.title:focus {
    border-color: var(--ink-accent) !important;
    box-shadow: 0 0 0 3px var(--ink-accent-soft) !important;
    outline: none !important;
}

/* 网址缩略名 */
.typecho-post-area .url-slug {
    padding: 6px 0 !important;
    color: var(--ink-text-3) !important;
    font-size: 12px !important;
}

.typecho-post-area .url-slug a {
    color: var(--ink-accent) !important;
}

/* 内容编辑器外框 */
.typecho-post-area #text {
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: 0 0 0 3px transparent !important;
    transition: border-color var(--ink-transition), box-shadow var(--ink-transition) !important;
}

.typecho-post-area #text:focus {
    border-color: var(--ink-accent) !important;
    box-shadow: 0 0 0 3px var(--ink-accent-soft) !important;
    outline: none !important;
}

/* 编辑器字号、行高优化（Markdown 输入区） */
.typecho-post-area #text {
    font-size: 14px !important;
    line-height: 1.7 !important;
    padding: 14px 16px !important;
}

/* 右侧 sidebar 选项卡片化 */
.typecho-post-area #edit-secondary {
    background: transparent !important;
}

.typecho-post-area #edit-secondary .typecho-option-tabs {
    margin-bottom: 0 !important;
}

.typecho-post-area #tab-advance,
.typecho-post-area #tab-files {
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--ink-radius) var(--ink-radius) !important;
    padding: 16px !important;
    box-shadow: var(--ink-shadow-sm) !important;
}

/* 选项标签 */
.typecho-post-area .typecho-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ink-text-2) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 14px !important;
    margin-bottom: -0.3em !important;
}

.typecho-post-area .typecho-label:first-child {
    margin-top: 0 !important;
}

/* 分类列表 */
.typecho-post-area .category-option ul {
    list-style: none !important;
    margin: 8px 0 0 !important;
    padding: 8px 10px !important;
    max-height: 160px;
    overflow-y: auto;
}

.typecho-post-area .category-option ul li {
    padding: 3px 0 !important;
    font-size: 13px !important;
}

/* 高级选项折叠面板 */
.typecho-post-area #advance-panel {
    margin-top: 16px !important;
    padding: 0 !important;
    background: var(--ink-surface-2) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
}

.typecho-post-area #advance-panel > summary {
    padding: 10px 14px !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ink-text-2) !important;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.typecho-post-area #advance-panel > summary::-webkit-details-marker {
    display: none;
}

.typecho-post-area #advance-panel > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 8px;
    color: var(--ink-text-3);
    transition: transform 200ms ease;
}

.typecho-post-area #advance-panel[open] > summary::before {
    transform: rotate(90deg);
}

.typecho-post-area #advance-panel[open] > summary {
    border-bottom: 1px solid var(--ink-border) !important;
}

.typecho-post-area #advance-panel > section {
    padding: 8px 14px !important;
}

/* 底部 submit 工具栏 */
.typecho-post-area .submit {
    padding: 16px 0 !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--ink-border) !important;
}

.typecho-post-area .submit .btn {
    min-width: 88px;
}

/* 自动保存提示 */
.typecho-post-area #auto-save-message {
    font-size: 12px !important;
    color: var(--ink-text-3) !important;
}

/* 自定义字段区 */
.typecho-post-area #custom-field {
    margin-top: 16px !important;
    padding: 14px 16px !important;
}

.typecho-post-area #custom-field summary {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ink-text-2) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.typecho-post-area #custom-field summary::before {
    content: '▸';
    margin-right: 8px;
    color: var(--ink-text-3);
    transition: transform 200ms ease;
    display: inline-block;
}

.typecho-post-area #custom-field[open] summary::before {
    transform: rotate(90deg);
}

.typecho-post-area #custom-field .field {
    padding: 10px 0 !important;
    border-bottom: 1px dashed var(--ink-border) !important;
}

/* 文件上传区 */
.typecho-post-area .upload-area,
#upload-panel .upload-area {
    padding: 24px !important;
    background: var(--ink-surface-2) !important;
    border: 2px dashed var(--ink-border-strong) !important;
    border-radius: var(--ink-radius) !important;
    text-align: center !important;
    color: var(--ink-text-3) !important;
    font-size: 13px !important;
    transition: all var(--ink-transition) !important;
}

.typecho-post-area .upload-area:hover,
#upload-panel .upload-area:hover,
.typecho-post-area .upload-area.drag-over,
#upload-panel .upload-area.drag-over {
    border-color: var(--ink-accent) !important;
    background: var(--ink-accent-bg) !important;
    color: var(--ink-accent) !important;
}

.typecho-post-area .upload-area a,
#upload-panel .upload-area a {
    color: var(--ink-accent) !important;
    font-weight: 500 !important;
}

/* 文件列表 */
#file-list {
    list-style: none !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
}

#file-list li {
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    font-size: 13px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#file-list li .info {
    color: var(--ink-text-3) !important;
    font-size: 12px !important;
}

#file-list li .info a {
    margin-left: 6px;
    color: var(--ink-text-3) !important;
}

#file-list li .info a:hover {
    color: var(--ink-accent) !important;
}

/* ============================================
   27. 评论管理页（manage-comments.php）
   ============================================ */

/* 评论头像 */
.comment-avatar {
    padding: 4px !important;
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: 50% !important;
    overflow: hidden;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-avatar img {
    border-radius: 50% !important;
}

/* 评论作者 */
.comment-author {
    color: var(--ink-text) !important;
    font-size: 14px !important;
}

.comment-meta a {
    color: var(--ink-accent) !important;
}

.comment-meta span {
    color: var(--ink-text-3) !important;
    font-size: 11px !important;
}

/* 评论内容 */
.comment-content {
    color: var(--ink-text-2) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    padding: 8px 0 !important;
}

.comment-content p {
    margin: 6px 0 !important;
}

/* 评论日期 */
.comment-date {
    color: var(--ink-text-3) !important;
    font-size: 11px !important;
    margin-bottom: 4px !important;
}

.comment-date a {
    color: var(--ink-text-3) !important;
}

.comment-date a:hover {
    color: var(--ink-accent) !important;
}

/* 评论操作按钮 */
.comment-action {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px dashed var(--ink-border) !important;
}

.comment-action a,
.comment-action .weak {
    display: inline-block !important;
    padding: 2px 8px !important;
    margin-right: 4px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    transition: all var(--ink-transition) !important;
}

.comment-action .weak {
    color: var(--ink-text-3) !important;
    background: var(--ink-surface-2) !important;
}

.comment-action a {
    color: var(--ink-text-2) !important;
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
}

.comment-action a:hover {
    background: var(--ink-accent) !important;
    color: #fff !important;
    border-color: var(--ink-accent) !important;
    text-decoration: none !important;
}

.comment-action a.operate-delete {
    color: var(--ink-danger) !important;
    border-color: color-mix(in srgb, var(--ink-danger) 30%, transparent) !important;
}

.comment-action a.operate-delete:hover {
    background: var(--ink-danger) !important;
    color: #fff !important;
    border-color: var(--ink-danger) !important;
}

/* ============================================
   28. 媒体管理页（manage-medias.php / media.php）
   ============================================ */

/* MIME 类型图标 */
.typecho-list-table .mime-word,
.typecho-list-table .mime-image,
.typecho-list-table .mime-excel,
.typecho-list-table .mime-powerpoint,
.typecho-list-table .mime-text,
.typecho-list-table .mime-pdf,
.typecho-list-table .mime-zip,
.typecho-list-table .mime-audio,
.typecho-list-table .mime-video,
.typecho-list-table .mime-flash,
.typecho-list-table .mime-default {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    margin-right: 8px !important;
    background: var(--ink-surface-2) !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
    position: relative;
}

.typecho-list-table .mime-image {
    background: color-mix(in srgb, var(--ink-info) 15%, transparent) !important;
}

.typecho-list-table .mime-pdf {
    background: color-mix(in srgb, var(--ink-danger) 15%, transparent) !important;
}

.typecho-list-table .mime-zip {
    background: color-mix(in srgb, var(--ink-warning) 15%, transparent) !important;
}

/* 媒体详情页：图片预览 */
.typecho-attachment-photo {
    max-width: 100% !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-md) !important;
    border: 1px solid var(--ink-border) !important;
}

/* 媒体详情页：URL 输入框 */
#attachment-url {
    font-size: 12px !important;
    color: var(--ink-text-2) !important;
    background: var(--ink-surface-2) !important;
    border: 1px dashed var(--ink-border-strong) !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
}

#attachment-url:focus {
    border-color: var(--ink-accent) !important;
    border-style: solid !important;
    background: var(--ink-surface) !important;
}

/* ============================================
   29. 外观/主题页（themes.php / theme-editor.php）
   ============================================ */

/* 主题列表表格 */
.typecho-theme-list {
    border-radius: var(--ink-radius) !important;
    overflow: hidden;
}

.typecho-theme-list thead th {
    background: var(--ink-surface-2) !important;
    color: var(--ink-text-2) !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
}

/* 主题截图 */
.typecho-theme-list img {
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-sm) !important;
    border: 1px solid var(--ink-border) !important;
    transition: transform 250ms ease !important;
}

.typecho-theme-list tr:hover img {
    transform: scale(1.02);
}

/* 主题标题 */
.typecho-theme-list h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--ink-text) !important;
    margin: 0 0 8px !important;
}

.typecho-theme-list cite {
    color: var(--ink-text-3) !important;
    font-size: 12px !important;
    font-style: normal !important;
    display: block;
    margin-bottom: 8px;
}

.typecho-theme-list cite a {
    color: var(--ink-accent) !important;
}

.typecho-theme-list p {
    color: var(--ink-text-2) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

/* 启用/编辑链接 */
.typecho-theme-list .activate,
.typecho-theme-list .edit {
    display: inline-block !important;
    padding: 5px 14px !important;
    margin-right: 8px !important;
    border-radius: var(--ink-radius) !important;
    font-size: 13px !important;
    transition: all var(--ink-transition) !important;
}

.typecho-theme-list .activate {
    background: var(--ink-accent) !important;
    color: #fff !important;
}

.typecho-theme-list .activate:hover {
    background: var(--ink-accent-hover) !important;
    text-decoration: none !important;
}

.typecho-theme-list .edit {
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    color: var(--ink-text-2) !important;
}

.typecho-theme-list .edit:hover {
    border-color: var(--ink-accent) !important;
    color: var(--ink-accent) !important;
    text-decoration: none !important;
}

/* 当前激活主题行高亮 */
.typecho-theme-list tr.current {
    background: var(--ink-accent-bg) !important;
}

.typecho-theme-list tr.current td {
    border-left: 3px solid var(--ink-accent);
}

/* 主题编辑器：文件列表 */
.typecho-edit-theme ul.col-mb-12 {
    list-style: none !important;
    padding: 16px !important;
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
}

.typecho-edit-theme ul.col-mb-12 li {
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: 4px;
    transition: background var(--ink-transition) !important;
}

.typecho-edit-theme ul.col-mb-12 li:hover {
    background: var(--ink-surface-2) !important;
}

.typecho-edit-theme ul.col-mb-12 li.current {
    background: var(--ink-accent-bg) !important;
}

.typecho-edit-theme ul.col-mb-12 li.current a {
    color: var(--ink-accent) !important;
    font-weight: 500 !important;
}

.typecho-edit-theme ul.col-mb-12 li strong {
    display: block;
    padding: 4px 10px !important;
    margin-bottom: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ink-text-3) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* 主题编辑器：代码区 */
.typecho-edit-theme #content {
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    background: var(--ink-surface) !important;
}

.typecho-edit-theme #content:focus {
    border-color: var(--ink-accent) !important;
    box-shadow: 0 0 0 3px var(--ink-accent-soft) !important;
    outline: none !important;
}

/* ============================================
   30. 插件管理页（plugins.php）
   ============================================ */

/* 插件列表分组标题 */
.typecho-list-table-title {
    color: var(--ink-text-2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 24px 0 10px !important;
    padding-left: 4px !important;
}

.typecho-list-table-title:first-of-type {
    margin-top: 0 !important;
}

/* 启用/禁用链接 */
.typecho-list-table td a {
    font-size: 13px !important;
    transition: color var(--ink-transition) !important;
}

.typecho-list-table td a[lang] {
    color: var(--ink-danger) !important;
}

.typecho-list-table td a[lang]:hover {
    text-decoration: underline !important;
}

/* 即插即用标签 */
.typecho-list-table .important {
    display: inline-block !important;
    padding: 2px 8px !important;
    background: var(--ink-success-bg) !important;
    color: var(--ink-success) !important;
    border-radius: 10px !important;
    font-size: 11px !important;
}

/* 已损坏插件警告 */
.typecho-list-table .warning {
    color: var(--ink-danger) !important;
    font-weight: 500 !important;
}

/* 禁用的插件表格 */
.typecho-list-table.deactivate {
    opacity: 0.7;
}

.typecho-list-table.deactivate:hover {
    opacity: 1;
}

/* ============================================
   31. 设置页（options-*.php）
   ============================================ */

/* 设置表单容器 */
.typecho-page-main .col-tb-offset-2 {
    padding: 24px !important;
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-sm) !important;
}

/* 设置表单分组标题 */
.typecho-option label {
    font-weight: 500 !important;
    color: var(--ink-text) !important;
    font-size: 13px !important;
}

.typecho-option .description {
    color: var(--ink-text-3) !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 设置表单输入框统一聚焦态 */
.typecho-option input[type="text"]:focus,
.typecho-option input[type="password"]:focus,
.typecho-option input[type="email"]:focus,
.typecho-option input[type="number"]:focus,
.typecho-option input[type="url"]:focus,
.typecho-option textarea:focus,
.typecho-option select:focus {
    border-color: var(--ink-accent) !important;
    box-shadow: 0 0 0 3px var(--ink-accent-soft) !important;
    outline: none !important;
}

/* 单选/复选按钮强调色 */
.typecho-option input[type="radio"]:checked,
.typecho-option input[type="checkbox"]:checked {
    accent-color: var(--ink-accent) !important;
}

/* 提交按钮区 */
.typecho-option-submit {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--ink-border) !important;
}

/* ============================================
   32. 用户/个人资料页（profile.php / manage-users.php）
   ============================================ */

/* 头像 */
.profile-avatar {
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-md) !important;
    border: 3px solid var(--ink-surface) !important;
    background: var(--ink-surface) !important;
}

/* 用户名标题 */
.typecho-page-main h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--ink-text) !important;
    margin: 12px 0 4px !important;
}

/* 统计文本 */
.typecho-page-main > .col-tb-3 > p {
    color: var(--ink-text-2) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

.typecho-page-main > .col-tb-3 > p em {
    color: var(--ink-accent) !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

/* 个人资料分组标题 */
.typecho-content-panel h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ink-text) !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--ink-accent) !important;
    margin-bottom: 16px !important;
}

/* 个人资料卡片化 */
.typecho-content-panel section {
    padding: 20px !important;
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-sm) !important;
    margin-bottom: 16px !important;
}

/* ============================================
   33. 欢迎页（welcome.php）
   ============================================ */

#welcome-form {
    max-width: 600px;
    margin: 40px auto !important;
    padding: 32px !important;
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow) !important;
}

#welcome-form h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ink-text) !important;
    margin-bottom: 16px !important;
}

#welcome-form ol {
    padding-left: 20px !important;
    color: var(--ink-text-2) !important;
    font-size: 14px !important;
    line-height: 2 !important;
}

#welcome-form ol a {
    color: var(--ink-accent) !important;
}

#welcome-form ol a:hover {
    text-decoration: underline !important;
}

#welcome-form .btn.primary {
    margin-top: 12px !important;
}

/* ============================================
   34. 全局：下拉菜单、按钮组、提示
   ============================================ */

/* 危险按钮 */
.btn-warn {
    background-color: var(--ink-danger) !important;
    color: #fff !important;
    border: none !important;
}

.btn-warn:hover {
    background-color: color-mix(in srgb, var(--ink-danger) 85%, #000) !important;
}

/* 按钮焦点态 */
.btn:focus,
.primary:focus,
.btn-warn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--ink-accent-soft) !important;
}

/* 链接按钮 */
.btn-link {
    color: var(--ink-accent) !important;
}

.btn-link:hover {
    color: var(--ink-accent-hover) !important;
    text-decoration: underline !important;
}

/* 输入框只读/禁用态 */
input[readonly],
input[disabled],
textarea[readonly],
textarea[disabled],
select[disabled] {
    background: var(--ink-surface-2) !important;
    color: var(--ink-text-3) !important;
    cursor: not-allowed !important;
}

/* 全局滚动条美化（Webkit） */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ink-surface-2);
}

::-webkit-scrollbar-thumb {
    background: var(--ink-border-strong);
    border-radius: 5px;
    border: 2px solid var(--ink-surface-2);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink-text-3);
}

/* 全局文本选中色 */
::selection {
    background: var(--ink-accent-soft) !important;
    color: var(--ink-text) !important;
}

/* 紧凑模式下的元素间距调整 */
:root {
    --ink-sidebar-width: 220px;
}

[density="compact"] {
    --ink-sidebar-width: 180px;
}

/* 紧凑模式：减小列表行高 */
body[density="compact"] .typecho-list-table td {
    padding: 6px 10px !important;
}

body[density="compact"] .typecho-list-table th {
    padding: 6px 10px !important;
}

body[density="compact"] .typecho-post-area input.title {
    padding: 10px 12px !important;
    font-size: 20px !important;
}

body[density="compact"] .typecho-post-area #text {
    padding: 10px 12px !important;
}

/* ============================================
   35. 进阶方案 1：仪表盘统计卡片
   ============================================ */

.ink-stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px !important;
}

.ink-stat-card {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 20px !important;
    background: var(--ink-surface) !important;
    border: 1px solid var(--ink-border) !important;
    border-radius: var(--ink-radius) !important;
    box-shadow: var(--ink-shadow-sm) !important;
    text-decoration: none !important;
    color: var(--ink-text) !important;
    transition: all var(--ink-transition) !important;
    position: relative;
    overflow: hidden;
}

.ink-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--ink-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 250ms ease;
}

.ink-stat-card:hover {
    border-color: var(--ink-accent) !important;
    box-shadow: var(--ink-shadow-md) !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}

.ink-stat-card:hover::before {
    transform: scaleY(1);
}

.ink-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ink-accent-bg);
    color: var(--ink-accent);
    flex-shrink: 0;
}

.ink-stat-posts .ink-stat-icon {
    background: color-mix(in srgb, var(--ink-accent) 12%, transparent);
    color: var(--ink-accent);
}

.ink-stat-comments .ink-stat-icon {
    background: color-mix(in srgb, var(--ink-info) 12%, transparent);
    color: var(--ink-info);
}

.ink-stat-categories .ink-stat-icon {
    background: color-mix(in srgb, var(--ink-success) 12%, transparent);
    color: var(--ink-success);
}

.ink-stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ink-stat-number {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--ink-text) !important;
    font-variant-numeric: tabular-nums;
}

.ink-stat-label {
    font-size: 13px !important;
    color: var(--ink-text-3) !important;
    font-weight: 500 !important;
}

@media (max-width: 767px) {
    .ink-stat-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ink-stat-card {
        padding: 14px !important;
    }

    .ink-stat-icon {
        width: 40px;
        height: 40px;
    }

    .ink-stat-number {
        font-size: 22px !important;
    }
}

/* ============================================
   36. 进阶方案 2：侧边栏菜单图标 + 分组标题
   ============================================ */

.typecho-head-nav .ink-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    color: var(--ink-text-3);
    flex-shrink: 0;
    transition: color var(--ink-transition);
}

.typecho-head-nav menu > li:not(.operate) > a {
    display: flex !important;
    align-items: center;
}

.typecho-head-nav menu > li:hover .ink-menu-icon,
.typecho-head-nav menu > li.current .ink-menu-icon,
.typecho-head-nav menu > li.active .ink-menu-icon {
    color: var(--ink-accent);
}

/* 分组标题 */
.typecho-head-nav .ink-menu-group-title {
    padding: 14px 16px 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--ink-text-3) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    pointer-events: none;
    user-select: none;
}

.typecho-head-nav .ink-menu-group-title:first-child {
    padding-top: 4px !important;
}

@media (max-width: 767px) {
    .typecho-head-nav .ink-menu-group-title {
        display: none;
    }

    .typecho-head-nav .ink-menu-icon {
        margin-right: 6px;
    }
}

/* ============================================
   37. 进阶方案 3：文章列表状态色条
   ============================================ */

.typecho-list-table tbody tr.ink-row-status-publish td:first-child {
    border-left: 3px solid var(--ink-success);
}

.typecho-list-table tbody tr.ink-row-status-draft td:first-child {
    border-left: 3px solid var(--ink-text-3);
}

.typecho-list-table tbody tr.ink-row-status-waiting td:first-child {
    border-left: 3px solid var(--ink-warning);
}

.typecho-list-table tbody tr.ink-row-status-private td:first-child {
    border-left: 3px solid var(--ink-info);
}

.typecho-list-table tbody tr.ink-row-status-hidden td:first-child {
    border-left: 3px solid var(--ink-border-strong);
}

.typecho-list-table tbody tr.ink-row-status-password td:first-child {
    border-left: 3px solid var(--ink-danger);
}

/* 评论列表状态色条 */
.typecho-list-table tbody tr.ink-row-status-approved td:first-child {
    border-left: 3px solid var(--ink-success);
}

.typecho-list-table tbody tr.ink-row-status-waiting td:first-child {
    border-left: 3px solid var(--ink-warning);
}

.typecho-list-table tbody tr.ink-row-status-spam td:first-child {
    border-left: 3px solid var(--ink-danger);
    background: color-mix(in srgb, var(--ink-danger) 4%, transparent) !important;
}

/* 状态色条对应的状态徽章颜色化 */
.typecho-list-table .status {
    background: var(--ink-surface-2) !important;
    color: var(--ink-text-3) !important;
}

.ink-row-status-draft .status {
    background: color-mix(in srgb, var(--ink-text-3) 15%, transparent) !important;
    color: var(--ink-text-2) !important;
}

.ink-row-status-waiting .status {
    background: color-mix(in srgb, var(--ink-warning) 15%, transparent) !important;
    color: var(--ink-warning) !important;
}

.ink-row-status-private .status {
    background: color-mix(in srgb, var(--ink-info) 15%, transparent) !important;
    color: var(--ink-info) !important;
}

.ink-row-status-password .status {
    background: color-mix(in srgb, var(--ink-danger) 15%, transparent) !important;
    color: var(--ink-danger) !important;
}

/* ============================================
   38. 进阶方案 4：快捷键帮助面板
   ============================================ */

.ink-shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 200ms ease;
}

.ink-shortcuts-overlay.show {
    display: flex;
    opacity: 1;
}

.ink-shortcuts-modal {
    background: var(--ink-surface);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 540px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 200ms ease;
}

.ink-shortcuts-overlay.show .ink-shortcuts-modal {
    transform: scale(1);
}

.ink-shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ink-border);
}

.ink-shortcuts-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ink-text) !important;
}

.ink-shortcuts-close {
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--ink-text-3);
    cursor: pointer;
    padding: 0 4px;
    transition: color var(--ink-transition);
}

.ink-shortcuts-close:hover {
    color: var(--ink-text);
}

.ink-shortcuts-body {
    padding: 20px 24px;
    max-height: calc(80vh - 130px);
    overflow-y: auto;
}

.ink-shortcut-group {
    margin-bottom: 20px;
}

.ink-shortcut-group:last-child {
    margin-bottom: 0;
}

.ink-shortcut-group h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--ink-text-3) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px !important;
}

.ink-shortcut-group dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 16px;
    margin: 0 !important;
}

.ink-shortcut-group dt {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ink-shortcut-group dd {
    margin: 0 !important;
    display: flex;
    align-items: center;
    color: var(--ink-text-2);
    font-size: 13px;
}

.ink-shortcuts-overlay kbd {
    display: inline-block;
    padding: 3px 8px;
    background: var(--ink-surface-2);
    border: 1px solid var(--ink-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--ink-text);
    line-height: 1.4;
    min-width: 24px;
    text-align: center;
}

.ink-shortcuts-footer {
    padding: 12px 24px;
    background: var(--ink-surface-2);
    border-top: 1px solid var(--ink-border);
    text-align: center;
    color: var(--ink-text-3);
    font-size: 12px;
}

.ink-shortcuts-footer kbd {
    display: inline-block;
    padding: 2px 6px;
    background: var(--ink-surface);
    border: 1px solid var(--ink-border);
    border-radius: 3px;
    font-size: 11px;
    margin: 0 2px;
}

@media (max-width: 767px) {
    .ink-shortcuts-modal {
        max-width: 100%;
        margin: 10px;
    }

    .ink-shortcut-group dl {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}