/*
 * 前台门户 · 笔记 — 设计系统
 *
 * 视觉骨架（参考 doc/lizi.html 重构）：
 *   - 双列页面：固定 260px 左 sidebar（brand + 分类 + 信息卡 + 引言）
 *               右主区（顶栏 + 欢迎 + 4 stats + (笔记列表 2 / 右栏 1)）
 *   - 调性：浅紫底 + 圆角 12 + 极轻阴影；分类高亮用 primary/10 背景
 *
 * 与后台 common.css 完全独立。所有 token 局部命名，避免污染。
 */

/* ============= Design Tokens ============= */
:root {
    /* 中性 */
    --p-bg: #F9FAFB;
    --p-side-bg: #F8F9FA;
    --p-card: #FFFFFF;
    --p-fg: #1F2937;
    --p-fg-soft: #4B5563;
    --p-muted: #9CA3AF;
    --p-border: #E5E7EB;
    --p-border-soft: #F3F4F6;

    /* 品牌（紫） */
    --p-primary: #9775FA;
    --p-primary-deep: #7C3AED;
    --p-primary-soft: rgba(151, 117, 250, 0.10);
    --p-primary-softer: rgba(151, 117, 250, 0.05);

    /* tag chip 配色（与 lizi.html 对齐） */
    --p-tag1-bg: #F0F8FB;
    --p-tag1-fg: #9775FA;
    --p-tag2-bg: #FDF2F8;
    --p-tag2-fg: #EC4899;
    --p-tag3-bg: #F5FAFE;
    --p-tag3-fg: #3B82F6;
    --p-tag-orange-bg: #FFF7ED;
    --p-tag-orange-fg: #F97316;
    --p-tag-green-bg: #F0FDF4;
    --p-tag-green-fg: #22C55E;
    --p-tag-red-bg: #FEF2F2;
    --p-tag-red-fg: #EF4444;

    /* count 数字色（4 stat） */
    --p-count1: #805AD5;
    --p-count2: #4299E1;
    --p-count3: #48BB78;
    --p-count4: #ED8936;

    /* 圆角 / 阴影 */
    --p-r-sm: 8px;
    --p-r: 12px;
    --p-r-lg: 16px;
    --p-r-pill: 999px;
    --p-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --p-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --p-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    --p-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.06);

    /* layer-theme.css 的 --layer-* 变量在前台上下文映射为紫品牌；按钮区底色不覆盖，用默认中性灰 */
    --layer-question-from: var(--p-primary);
    --layer-question-to:   var(--p-primary-deep);
    --layer-btn-primary:   var(--p-primary-deep);
    --layer-btn-primary-hover: var(--p-primary);
    --layer-btn-primary-shadow: rgba(124, 58, 237, 0.18);
    --layer-btn-primary-shadow-hover: rgba(124, 58, 237, 0.26);
}

/* ============= Reset / Base ============= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--p-bg);
    color: var(--p-fg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 终极兜底：任何子项意外撑出 viewport（grid/flex min-width:auto 未捕获、第三方组件浮层等），
       都被 body 裁掉，不形成全局横滚条。最新规范下 overflow:hidden 不破坏祖先 position:sticky。 */
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--p-fg); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
input { font-family: inherit; }

/* ============= 双列外壳 ============= */
.portal-app {
    display: flex;
    min-height: 100vh;
    background: var(--p-bg);
}

/* ============= 左 sidebar：brand + 分类 + 信息卡 + 引言 ============= */
.portal-side-left {
    width: 260px;
    flex-shrink: 0;
    background: var(--p-side-bg);
    border-right: 1px solid var(--p-border);
    padding: 20px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* sticky 让左栏在主区滚动时常驻视野；改 hidden 让滚动只发生在中间分类区，
       brand 顶 / info+quote 卡贴底始终可见 */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* —— 顶部 brand —— */
.portal-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    line-height: 1;
    text-decoration: none;
}
.portal-brand-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    /* display:block 去掉 inline 元素自带的 baseline 间隙，避免 logo 与文字基线错位 */
    display: block;
    filter: drop-shadow(0 4px 8px rgba(151, 117, 250, 0.18));
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.portal-brand:hover .portal-brand-img { transform: rotate(-8deg) scale(1.05); }
.portal-brand-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--p-fg);
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}
.portal-brand-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--p-primary-deep);
    margin-left: 2px;
    line-height: 1;
    white-space: nowrap;
}

/* —— 左侧分类导航 —— */
.portal-cat-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* 分类区独占滚动：flex:1 吃掉剩余空间，超出则内部滚条；
       min-height:0 是 flex 子项 overflow 生效的必要条件（默认 min-height:auto 会被内容撑爆） */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* 留 4px 给滚动条，避免选中态高亮被滚动条压住 */
    padding-right: 4px;
    margin-right: -4px;
}
/* 细滚动条：默认浏览器滚动条偏粗，左栏窄区域里显得突兀 */
.portal-cat-nav::-webkit-scrollbar { width: 6px; }
.portal-cat-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}
.portal-cat-nav::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.22); }
.portal-cat-nav::-webkit-scrollbar-track { background: transparent; }
.portal-cat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--p-fg-soft);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}
.portal-cat-item i.layui-icon {
    font-size: 16px;
    flex-shrink: 0;
    color: var(--p-muted);
    transition: color 0.2s;
}
.portal-cat-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--p-fg);
}
.portal-cat-item:hover i.layui-icon { color: var(--p-fg-soft); }
.portal-cat-item.active {
    background: var(--p-primary-soft);
    color: var(--p-primary);
    font-weight: 600;
}
.portal-cat-item.active i.layui-icon { color: var(--p-primary); }

/* —— 信息卡（X 次记录） —— */
.portal-info-card {
    background: var(--p-card);
    border-radius: var(--p-r);
    padding: 16px;
    box-shadow: var(--p-shadow-sm);
    position: relative;
}
.portal-info-card .intro {
    font-size: 13px;
    color: var(--p-fg-soft);
    margin-bottom: 8px;
    line-height: 1.5;
}
.portal-info-card .num-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
}
.portal-info-card .num {
    font-size: 30px;
    font-weight: 700;
    color: var(--p-count1);
    line-height: 1;
    letter-spacing: -0.02em;
}
.portal-info-card .unit {
    color: var(--p-fg-soft);
    font-size: 13px;
}
.portal-info-card .desc {
    font-size: 13px;
    color: var(--p-muted);
    margin-bottom: 14px;
}
.portal-info-card .deco {
    text-align: right;
    color: rgba(151, 117, 250, 0.55);
    font-size: 22px;
    line-height: 1;
}

/* —— 引言卡 —— */
.portal-quote-card {
    background: var(--p-card);
    border-radius: var(--p-r);
    padding: 16px;
    box-shadow: var(--p-shadow-sm);
}
.portal-quote-card .quote {
    font-size: 13px;
    color: var(--p-fg-soft);
    line-height: 1.7;
    margin-bottom: 14px;
}
.portal-quote-card .deco {
    text-align: right;
    color: rgba(151, 117, 250, 0.55);
    font-size: 22px;
    line-height: 1;
    transform-origin: right;
    transform: rotate(-12deg);
}

/* ============= 右主区 ============= */
.portal-main {
    flex: 1;
    padding: 24px 28px 40px;
    min-width: 0;
}

/* —— 顶栏：搜索 + 操作胶囊（在 main 内部，不全屏） —— */
.portal-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.portal-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 10px;
    height: 42px;
    padding: 0 16px;
    width: 60%;
    max-width: 720px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.portal-search-box:hover { border-color: #D1D5DB; }
.portal-search-box:focus-within {
    border-color: var(--p-primary);
    box-shadow: 0 0 0 4px rgba(151, 117, 250, 0.12);
}
.portal-search-box .layui-icon-search {
    color: var(--p-muted);
    font-size: 14px;
    margin-right: 8px;
}
.portal-search-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--p-fg);
    padding: 0;
    height: 100%;
}
.portal-search-input::placeholder { color: var(--p-muted); }
.portal-search-kbd {
    font-size: 11px;
    color: var(--p-muted);
    background: var(--p-side-bg);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* —— 顶栏操作胶囊 —— */
.portal-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.portal-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    color: var(--p-fg-soft);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    text-decoration: none;
}
.portal-pill:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
    color: var(--p-fg);
    text-decoration: none;
}
.portal-pill i.layui-icon { font-size: 14px; }
/* 主按钮（登录） */
.portal-pill--primary {
    background: var(--p-card);
    border: 1px solid var(--p-primary);
    color: var(--p-primary);
}
.portal-pill--primary:hover {
    background: var(--p-primary-softer);
    border-color: var(--p-primary);
    color: var(--p-primary-deep);
}
/* 用户 chip */
.portal-pill--user {
    padding: 0 14px 0 4px;
    gap: 8px;
}
.portal-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9775FA 0%, #C026D3 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
}
/* 图片头像变体：去掉渐变色背景，让 <img> 填满整个圆 */
.portal-user-avatar--img {
    background: transparent;
}
.portal-user-avatar--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.portal-user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--p-fg);
    line-height: 1;
}
.portal-user-caret {
    font-size: 11px !important;
    color: var(--p-muted);
}

/* —— 欢迎区 —— */
.portal-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 16px;
}
.portal-welcome h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--p-fg);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.portal-welcome .sub {
    color: var(--p-fg-soft);
    font-size: 14px;
}
.portal-welcome .feather {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--p-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    flex-shrink: 0;
    color: var(--p-primary);
}

/* —— 4 个 stat —— */
.portal-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.portal-stat-cell {
    display: block;
    background: var(--p-card);
    border-radius: var(--p-r);
    padding: 16px;
    box-shadow: var(--p-shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
    color: inherit;
    text-decoration: none;
}
.portal-stat-cell:hover {
    box-shadow: var(--p-shadow-md);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.portal-stat-cell .t {
    font-size: 14px;
    font-weight: 500;
    color: var(--p-fg);
    margin-bottom: 4px;
}
.portal-stat-cell .d {
    font-size: 12px;
    color: var(--p-muted);
    margin-bottom: 12px;
}
.portal-stat-cell .num-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.portal-stat-cell .n {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.portal-stat-cell .ic {
    font-size: 20px;
    line-height: 1;
}
.portal-stat-cell--purple .n,
.portal-stat-cell--purple .ic { color: var(--p-count1); }
.portal-stat-cell--blue   .n,
.portal-stat-cell--blue   .ic { color: var(--p-count2); }
.portal-stat-cell--green  .n,
.portal-stat-cell--green  .ic { color: var(--p-count3); }
.portal-stat-cell--orange .n,
.portal-stat-cell--orange .ic { color: var(--p-count4); }

/* ============= 内容栅格：笔记列表 2/3 + 右栏 1/3 ============= */
.portal-content-grid {
    display: grid;
    /* minmax(0, Nfr) 锁死列宽上限：默认 Nfr ≈ minmax(auto, Nfr)，
       grid 项允许被"固有内容尺寸"（标题超长、tag 名连续 ASCII）撑大，进而撑爆 main 形成横滚。 */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: flex-start;
}

/* —— 笔记线性卡片列表 —— */
.portal-note-list { display: flex; flex-direction: column; gap: 16px; }
.portal-note-row {
    display: flex;
    gap: 16px;
    background: var(--p-card);
    border-radius: var(--p-r);
    padding: 16px;
    box-shadow: var(--p-shadow-sm);
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
    align-items: flex-start;
}
.portal-note-row:hover {
    box-shadow: var(--p-shadow-md);
    transform: translateY(-1px);
}
.portal-note-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    background: var(--p-primary-soft);
    color: var(--p-primary);
}
.portal-note-icon.tone-purple { background: #F3EEFF; color: #805AD5; }
.portal-note-icon.tone-blue { background: #EFF6FF; color: #3B82F6; }
.portal-note-icon.tone-green { background: #F0FDF4; color: #22C55E; }
.portal-note-icon.tone-orange { background: #FFF7ED; color: #F97316; }
.portal-note-icon.tone-pink { background: #FDF2F8; color: #EC4899; }
.portal-note-icon.tone-dark { background: #1F2937; color: #fff; }

/* 笔记封面缩略图：和 .portal-note-icon 占位语义一致，但更大、显示真图 */
.portal-note-cover {
    width: 96px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--p-primary-soft);
    box-shadow: var(--p-shadow-sm);
}
.portal-note-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}
.portal-note-row:hover .portal-note-cover img {
    transform: scale(1.04);
}

.portal-note-body { flex: 1; min-width: 0; }
.portal-note-row .row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.portal-note-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--p-fg);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.portal-note-time {
    font-size: 12px;
    color: var(--p-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.portal-note-summary {
    font-size: 13px;
    color: var(--p-fg-soft);
    line-height: 1.5;
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.portal-note-row .row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.portal-note-meta-left {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    /* 分类 chip 与标签 chip 是不同语义（一级分类 vs 多标签），间距 8px 视觉上仍像同组；加到 14px 拉开层次 */
    gap: 14px;
    min-width: 0;
}
.portal-note-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--p-r-pill);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    background: var(--p-primary-soft);
    color: var(--p-primary-deep);
    border: 1px solid var(--p-primary-softer);
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portal-note-category i { font-size: 12px; }
.portal-note-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.portal-note-tag {
    padding: 2px 10px;
    border-radius: var(--p-r-pill);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    display: inline-flex;
    align-items: center;
}
.portal-note-views {
    font-size: 12px;
    color: var(--p-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.portal-note-views i { font-size: 12px; }
.portal-note-private-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border-radius: var(--p-r-pill);
    font-size: 11px;
    font-weight: 500;
    background: var(--p-tag-red-bg);
    color: var(--p-tag-red-fg);
    margin-left: 6px;
}

.portal-list-footer {
    text-align: center;
    color: var(--p-muted);
    font-size: 13px;
    padding: 12px 0 4px;
    user-select: none;
}
.portal-list-footer.is-clickable { cursor: pointer; color: var(--p-primary); }
.portal-empty {
    background: var(--p-card);
    border-radius: var(--p-r);
    padding: 60px 20px;
    text-align: center;
    color: var(--p-muted);
    box-shadow: var(--p-shadow-sm);
}
.portal-empty i { font-size: 36px; opacity: 0.5; margin-bottom: 8px; display: block; }

/* ============= 右栏：标签 + 动态 + 公开浏览卡 ============= */
.portal-side-right { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.portal-side-card {
    background: var(--p-card);
    border-radius: var(--p-r);
    padding: 16px;
    box-shadow: var(--p-shadow-sm);
}
.portal-side-card h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--p-fg);
    margin-bottom: 14px;
}

/* —— 标签云：3 列网格 —— */
.portal-tag-cloud {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.portal-tag-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: filter 0.18s;
    line-height: 1.5;
    background: var(--p-tag1-bg);
    color: var(--p-tag1-fg);
    text-align: center;
}
.portal-tag-chip:hover { filter: brightness(0.96); text-decoration: none; }
.portal-tag-chip .count { color: var(--p-muted); font-size: 11px; }
.portal-tag-chip.tone-1 { background: var(--p-tag1-bg); color: var(--p-tag1-fg); }
.portal-tag-chip.tone-2 { background: var(--p-tag2-bg); color: var(--p-tag2-fg); }
.portal-tag-chip.tone-3 { background: var(--p-tag3-bg); color: var(--p-tag3-fg); }
.portal-tag-chip.tone-4 { background: var(--p-tag-orange-bg); color: var(--p-tag-orange-fg); }
.portal-tag-chip.tone-5 { background: var(--p-tag-green-bg); color: var(--p-tag-green-fg); }
.portal-tag-chip.tone-6 { background: var(--p-tag-red-bg); color: var(--p-tag-red-fg); }

/* —— 近期动态 —— */
.portal-activity-list { display: flex; flex-direction: column; gap: 12px; }
.portal-activity-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--p-fg-soft);
}
.portal-activity-item .ic {
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 14px;
}
.portal-activity-item .body { flex: 1; min-width: 0; line-height: 1.5; }
.portal-activity-item .body .title {
    color: var(--p-fg-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-activity-item .body .time { color: var(--p-muted); font-size: 12px; }
/* 动态条目改 <a> 渲染：去默认下划线、hover 标题变主色，让"可点击"信号更明显 */
a.portal-activity-item { text-decoration: none; }
a.portal-activity-item:hover .body .title { color: var(--p-primary); }
.portal-activity-empty {
    color: var(--p-muted);
    font-size: 12px;
    text-align: center;
    padding: 12px 0;
}
.portal-link-more {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    font-size: 13px;
    color: var(--p-primary);
}
.portal-link-more i { margin-left: 4px; font-size: 12px; }
.portal-link-more:hover { color: var(--p-primary-deep); }

/* —— 公开浏览卡 —— */
.portal-public-card {
    background: var(--p-primary-softer);
    border: 1px solid rgba(151, 117, 250, 0.20);
    border-radius: var(--p-r);
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.portal-public-card .lock {
    color: var(--p-primary);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.portal-public-card h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--p-fg);
    margin-bottom: 4px;
}
.portal-public-card p { font-size: 13px; color: var(--p-fg-soft); line-height: 1.6; margin: 0; }

/* ============= 详情页 / 错误页（沿用旧骨架） ============= */
/* 详情/错误页用单层 topbar，不走 .portal-app 双列 */
.portal-userbar-page {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--p-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.portal-userbar-page .portal-userbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
/* 详情页顶栏专属：actions 区不许被搜索框 width:60% 挤压；首页主区那个同名类不受影响（不在此选择器下） */
.portal-userbar-page .portal-topbar-actions { flex-shrink: 0; }
/* 顶栏左侧分组：brand + 返回笔记入口；让两者紧靠形成"品牌 · 返回"的导航语义
   flex-shrink:0：搜索框 width:60% 会侵占空间，不锁死会把 CJK 文字逐字挤断行（Xiao/JiuLong、笔/记） */
.portal-userbar-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
/* 顶栏返回链接：低饱和胶囊，hover 出现品牌色 */
.portal-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--p-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--p-fg-soft);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.portal-back-link:hover {
    border-color: var(--p-primary);
    background: #fff;
    color: var(--p-primary);
    box-shadow: 0 2px 8px rgba(151, 117, 250, 0.12);
}
.portal-back-link .layui-icon { font-size: 14px; line-height: 1; }

.portal-detail-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 28px 80px;
}
.portal-detail-layout {
    display: grid;
    /* minmax(0, 1fr) 是关键：默认 1fr 等价 minmax(auto, 1fr)，子项允许被"固有内容尺寸"撑大；
       笔记正文里常出现 base64 / 无空格长字符串 / 宽表格，会顶穿 pre 的 overflow:auto，
       连带把整个 layout 撑出 viewport 产生横向滚动。改 minmax(0,1fr) 强制让网格列上限锁死。 */
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    align-items: flex-start;
}
.portal-toc-side { position: sticky; top: 88px; }
.portal-toc-card {
    background: var(--p-card);
    border-radius: var(--p-r);
    padding: 16px;
    box-shadow: var(--p-shadow-sm);
}
.portal-toc-card h3 { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.portal-toc-list { display: flex; flex-direction: column; gap: 4px; }
.portal-toc-list li {
    list-style: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--p-fg-soft);
    font-size: 13px;
    line-height: 1.5;
    transition: background 0.2s, color 0.2s;
}
.portal-toc-list li:hover { background: var(--p-primary-softer); color: var(--p-primary); }
.portal-toc-list li.active { background: var(--p-primary-soft); color: var(--p-primary); font-weight: 600; }
.portal-toc-list li.lvl-2 { padding-left: 22px; font-size: 12.5px; }
.portal-toc-list li.lvl-3 { padding-left: 34px; font-size: 12px; }
.portal-toc-empty { color: var(--p-muted); font-size: 12px; text-align: center; padding: 12px 0; }

.portal-article {
    background: var(--p-card);
    border-radius: var(--p-r);
    padding: 32px 40px 56px;
    box-shadow: var(--p-shadow-sm);
    /* grid 项默认 min-width:auto 会被 pre/table/img 等"固有宽度"内容撑大，破坏 overflow:auto 滚动语义。
       显式置 0 让子项 overflow:auto 真正生效，详见 .portal-detail-layout 上方注释。 */
    min-width: 0;
    /* 让摘要 / 段落里的长无空格字符串（连续 ASCII / 数字 / URL）可以在任意位置软换行，
       避免一行串到撑爆卡片。pre/code 由各自 white-space 规则接管，不受影响。 */
    overflow-wrap: break-word;
}
.portal-private-banner {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 10px 16px;
    color: #92400E;
    font-size: 13px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.portal-article-cover {
    width: 100%;
    height: 240px;
    border-radius: 10px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--p-primary-soft);
    margin-bottom: 24px;
}
.portal-article h1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}
.portal-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: var(--p-muted);
    font-size: 13px;
}
.portal-article-meta i { margin-right: 4px; }
/* 详情页头部分类链接：与 meta 行其它字段同高，但用品牌色 + 浅底胶囊形与其它"纯文本+icon"项做区分 */
.portal-article-category {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--p-r-pill);
    font-size: 12px;
    font-weight: 500;
    background: var(--p-primary-soft);
    color: var(--p-primary-deep);
    border: 1px solid var(--p-primary-softer);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.portal-article-category:hover {
    background: var(--p-primary-deep);
    color: #fff;
    text-decoration: none;
}
.portal-article-category i { margin-right: 4px; font-size: 12px; }
.portal-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}
.portal-article-divider {
    border: 0;
    border-top: 1px solid var(--p-border);
    margin: 24px 0;
}
.portal-article-content {
    color: var(--p-fg);
    line-height: 1.85;
    font-size: 15px;
    /* 同 .portal-article：解锁 flex/grid 子项默认 min-width:auto，
       让内部 pre/table 的 overflow:auto 与 max-width:100% 生效，不被长内容撑大父容器 */
    min-width: 0;
}
.portal-article-content h1,
.portal-article-content h2,
.portal-article-content h3 { margin: 28px 0 14px; }
.portal-article-content h1 { font-size: 24px; }
.portal-article-content h2 { font-size: 20px; }
.portal-article-content h3 { font-size: 17px; }
.portal-article-content p { margin: 0 0 14px; }
.portal-article-content pre {
    background: #0F172A;
    color: #E2E8F0;
    padding: 16px 20px;
    border-radius: 8px;
    overflow: auto;
    /* 保险：明确告诉 pre 不要超过父容器宽度，配合 .portal-article min-width:0 让 overflow:auto 横滚生效 */
    max-width: 100%;
    font-size: 13px;
    line-height: 1.7;
    margin: 16px 0;
}
.portal-article-content code {
    background: var(--p-primary-soft);
    color: var(--p-primary-deep);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.portal-article-content pre code { background: transparent; color: inherit; padding: 0; }
.portal-article-content blockquote {
    border-left: 3px solid var(--p-primary);
    background: var(--p-primary-softer);
    padding: 10px 16px;
    color: var(--p-fg-soft);
    margin: 16px 0;
    border-radius: 0 8px 8px 0;
}
.portal-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}
.portal-article-content th,
.portal-article-content td {
    border: 1px solid var(--p-border);
    padding: 10px 14px;
    text-align: left;
}
.portal-article-content th { background: var(--p-primary-softer); font-weight: 600; }
.portal-article-content tr:nth-child(even) td { background: #F9FAFB; }
.portal-article-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 12px 0;
}

/* —— 错误页（无权限 / 链接过期） —— */
.portal-notice {
    max-width: 480px;
    margin: 64px auto;
    text-align: center;
    background: var(--p-card);
    border-radius: var(--p-r);
    padding: 48px 40px;
    box-shadow: var(--p-shadow-sm);
}
.portal-notice-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--p-primary-soft);
    color: var(--p-primary);
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.portal-notice h2 { font-size: 20px; margin-bottom: 8px; }
.portal-notice p { color: var(--p-fg-soft); font-size: 14px; margin-bottom: 24px; }
.portal-notice .layui-btn {
    background: var(--p-primary);
    color: #fff;
    border: 0;
    border-radius: 10px;
    height: 38px;
    line-height: 38px;
    padding: 0 20px;
    font-weight: 500;
}
.portal-notice .layui-btn:hover { background: var(--p-primary-deep); }
.portal-notice .layui-btn i { margin-right: 4px; }

/* ============= 详情页底部动作区 ============= */
/* 居中两枚按钮：返回上一页（次要）+ 返回笔记列表（主要） */
.portal-article-footer-actions {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--p-border);
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.portal-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1px solid var(--p-border);
    border-radius: 10px;
    background: #fff;
    color: var(--p-fg-soft);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: all 0.2s ease;
}
.portal-action-btn:hover {
    border-color: var(--p-primary);
    color: var(--p-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(151, 117, 250, 0.15);
}
.portal-action-btn--primary {
    background: linear-gradient(135deg, #9775FA 0%, #C026D3 100%);
    border-color: transparent;
    color: #fff;
}
.portal-action-btn--primary:hover {
    color: #fff;
    box-shadow: 0 8px 20px rgba(151, 117, 250, 0.32);
}
.portal-action-btn .layui-icon { font-size: 16px; line-height: 1; }

/* ============= 返回顶部悬浮按钮 ============= */
/* 默认 opacity:0 + translateY(20px) 隐藏；JS 添加 .is-show 触发淡入。
 * pointer-events:none 防止隐藏状态被点到（fixed 定位透明元素仍能接事件） */
.portal-back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--p-border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    color: var(--p-fg-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 90;
}
.portal-back-to-top.is-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.portal-back-to-top:hover {
    border-color: var(--p-primary);
    color: var(--p-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(151, 117, 250, 0.25);
}
.portal-back-to-top .layui-icon { font-size: 18px; }

/* ============= 响应式 ============= */
@media (max-width: 1280px) {
    .portal-content-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
@media (max-width: 1100px) {
    .portal-content-grid { grid-template-columns: minmax(0, 1fr); }
    .portal-side-right { display: none; }
}
@media (max-width: 820px) {
    .portal-app { flex-direction: column; }
    .portal-side-left {
        width: auto;
        height: auto;
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--p-border);
    }
    .portal-main { padding: 16px; }
    .portal-topbar { flex-wrap: wrap; }
    .portal-search-box { width: 100%; }
    .portal-stats { grid-template-columns: repeat(2, 1fr); }
    .portal-pill { padding: 0 12px; height: 36px; }
    .portal-pill span.label { display: none; }
    /* 移动端把"返回笔记"文字省掉只剩图标，腾出顶栏宽度给搜索框 */
    .portal-back-link span { display: none; }
    .portal-back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}

/* ============= 详情页 · 移动端适配（断点 1024 / 768 / 480） =============
 * 详情页特有的响应式只在 .portal-userbar-page / .portal-detail-main / .portal-article 内生效，
 * 避免污染首页 .portal-app 双列布局。820px 旧媒体仍兼容首页，本段补足详情页缺失的断点。
 */

/* 平板及以下：详情双列折成单列，目录侧栏隐藏（移动端 TOC 价值低，避免压缩正文宽度） */
@media (max-width: 1024px) {
    .portal-detail-layout {
        /* 同 base 规则，单列也必须用 minmax(0,1fr) 锁死，否则 base64 等长字符串仍会撑出 viewport */
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .portal-toc-side { display: none; }
}

/* 手机：顶栏紧凑、文章卡片缩边距、正文字号 + 元数据降级、表格横滚 */
@media (max-width: 768px) {
    /* —— 顶栏：保留 logo + 返回 icon + 搜索 + 头像，文字全部收起 —— */
    .portal-userbar-page .portal-userbar-inner {
        padding: 10px 12px;
        gap: 8px;
    }
    .portal-userbar-left { gap: 6px; }
    .portal-brand { padding: 0; gap: 6px; }
    .portal-brand-name,
    .portal-brand-text { display: none; }
    .portal-brand-img { width: 28px; height: 28px; }

    /* 搜索框：覆盖 820 媒体的 width:100%（会把 flex 容器撑爆），改用 flex:1 占余空间 */
    .portal-userbar-page .portal-search-box {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        height: 36px;
        padding: 0 12px;
    }
    .portal-search-input { font-size: 13px; }
    .portal-search-kbd { display: none; }

    /* 顶栏 actions：user pill 只剩头像，避免和搜索框抢宽度 */
    .portal-userbar-page .portal-topbar-actions { gap: 6px; }
    .portal-userbar-page .portal-pill {
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }
    .portal-userbar-page .portal-pill--user { padding: 0 2px; }
    .portal-userbar-page .portal-user-name,
    .portal-userbar-page .portal-user-caret { display: none; }
    .portal-user-avatar { width: 28px; height: 28px; font-size: 11px; }

    /* —— 详情主区 —— */
    .portal-detail-main { padding: 16px 12px 60px; }
    .portal-article {
        padding: 20px 16px 36px;
        border-radius: 10px;
    }
    .portal-article h1 {
        font-size: 22px;
        line-height: 1.35;
    }
    .portal-article-meta {
        gap: 8px 14px;
        font-size: 12px;
    }
    .portal-article-cover {
        height: 160px;
        margin-bottom: 16px;
    }
    .portal-private-banner {
        font-size: 12px;
        padding: 8px 12px;
        margin-bottom: 16px;
    }
    .portal-article-divider { margin: 16px 0; }
    .portal-article-tags { margin-top: 12px; }

    /* —— 正文排版 —— */
    .portal-article-content {
        font-size: 15px;
        line-height: 1.75;
    }
    .portal-article-content h1 { font-size: 20px; margin: 22px 0 12px; }
    .portal-article-content h2 { font-size: 18px; margin: 20px 0 10px; }
    .portal-article-content h3 { font-size: 16px; margin: 18px 0 10px; }
    .portal-article-content pre {
        padding: 12px 14px;
        font-size: 12.5px;
        border-radius: 6px;
        margin: 12px 0;
    }
    .portal-article-content blockquote {
        padding: 8px 12px;
        margin: 12px 0;
    }
    /* 表格在窄屏强制横向滚动：column 数多时 white-space:nowrap 防文本断成多行把行高撑离谱 */
    .portal-article-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 13px;
    }
    .portal-article-content th,
    .portal-article-content td { padding: 8px 10px; }
    .portal-article-content img { margin: 10px 0; }

    /* —— 文末按钮区 —— */
    .portal-article-footer-actions {
        margin-top: 24px;
        padding-top: 16px;
    }
    .portal-action-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* 更小屏（iPhone SE / 360 宽 Android）：进一步收紧内边距和字号 */
@media (max-width: 480px) {
    .portal-userbar-page .portal-userbar-inner { padding: 10px 10px; gap: 6px; }
    .portal-back-link { padding: 6px 8px; }
    .portal-userbar-page .portal-search-box { padding: 0 10px; height: 34px; }
    .portal-search-box .layui-icon-search { margin-right: 6px; }

    .portal-detail-main { padding: 12px 10px 60px; }
    .portal-article { padding: 16px 14px 28px; }
    .portal-article h1 { font-size: 20px; }
    .portal-article-meta { gap: 6px 12px; }
    .portal-article-cover { height: 140px; margin-bottom: 14px; }
    .portal-article-content { font-size: 14px; line-height: 1.7; }
    .portal-article-content h1 { font-size: 19px; }
    .portal-article-content h2 { font-size: 17px; }
    .portal-article-content h3 { font-size: 15px; }
}

/* ============= Layui 弹层（layer）视觉规则 =============
 * 已迁移到 static/css/layer-theme.css（后台 / 前台共享单一来源）。
 * 前台品牌色通过本文件 :root 里的 --layer-* 变量覆盖到 layer-theme.css 的默认值。
 */