@charset "UTF-8";
/* ============================================================================
 * Personal_AI_OS 整站统一主题 · tech-warm-v1
 * ----------------------------------------------------------------------------
 * 设计三调性
 *   科技  深墨蓝文字 + 主题紫交互色 + 冷调副背景 + 玻璃质感顶栏 + 细密阴影层
 *   时尚  大字重标题 + 收紧的字距 + 大圆角(14px) + 柔和分层投影 + 统一胶囊徽标
 *   温暖  暖纸白底色 + 暖灰描边 + 琥珀色强调 + 品牌深紫(#8B008B) + 圆润焦点环
 *
 * 生效方式（见 paios/core/theme.py）
 *   本文件由每个模块的 /<模块>/__paios/theme.css 发送，并在渲染出的 HTML 里
 *   注入到 </head> 之前 —— 即**最后加载**。因此：
 *
 *   1) 主要手段是**覆盖各模块自己的 CSS 变量**。10 个模块 + 门户的变量名
 *      互不相同（--primary / --c-primary / --accent / --panel / --ink / --line
 *      / --card-bg / --sidebar …），下面把它们全部映射到同一套取值。
 *      模块的布局规则一行不改，配色/圆角/阴影自动统一。
 *   2) 其次是**元素与通用组件的皮肤**（标题/链接/表格/表单/按钮/滚动条…）。
 *      只统一"观感属性"（颜色、圆角、字重、过渡），不碰尺寸与定位，
 *      以免破坏各模块自己的栅格与 sticky 布局。
 *
 * 三条自律
 *   · 不动 display / position / width / height / grid —— 布局归模块管；
 *   · 不覆盖模块已有的"语义色"含义（涨=红、跌=绿等国内口径反而被统一强化）；
 *   · 一律使用普通优先级（除极少数必要的点缀），保留模块自身用!important 的余地。
 * ========================================================================= */

/* ==========================================================================
   1. 设计令牌
   ======================================================================== */
:root {
  color-scheme: light;

  /* ── 中性：暖纸白底 + 深墨蓝字 ── */
  --paios-ink:          #16212B;
  --paios-ink-soft:     #4C5A65;
  --paios-ink-muted:    #8A959D;
  --paios-bg:           #F6F4F1;
  --paios-bg-cool:      #EDF1F4;
  --paios-surface:      #FFFFFF;
  --paios-surface-2:    #FAF9F7;
  --paios-surface-3:    #F1EFEB;
  --paios-border:       #E7E3DD;
  --paios-border-strong:#D3CCC4;
  --paios-hover:        #F4F8F5;

  /* ── 品牌深紫（用户指定主题色 #8B008B，全套深浅派生）── */
  --paios-primary:      #8B008B;
  --paios-primary-dark: #6E006E;
  --paios-primary-deep: #4E004E;
  --paios-primary-soft: #F8EAF8;

  /* ── 亮紫：交互与"科技"感的第二主色（同色系提亮，保持全站紫调一致）── */
  --paios-accent:       #A21CA2;
  --paios-accent-dark:  #7E007E;
  --paios-accent-soft:  #F9ECF9;

  /* ── 琥珀：温暖感的强调色（警示/高亮/评分）── */
  --paios-warm:         #DF952C;
  --paios-warm-soft:    #FDF3E2;

  /* ── 语义绿：独立于主题色，专供"股市跌=绿"等国内口径，不随主题变紫 ── */
  --paios-green:        #1F9D55;

  /* ── 语义色 ── */
  --paios-danger:       #C2483A;
  --paios-danger-dark:  #9B3629;
  --paios-danger-soft:  #FBEBE8;
  --paios-violet:       #7A5FC0;
  --paios-violet-soft:  #F0EBFA;

  /* ── 形态：大圆角 + 分层柔和阴影（时尚感的关键）── */
  --paios-radius:       14px;
  --paios-radius-sm:    9px;
  --paios-shadow:       0 1px 2px rgba(22, 33, 43, .04), 0 8px 22px -12px rgba(22, 33, 43, .14);
  --paios-shadow-lg:    0 2px 8px rgba(22, 33, 43, .06), 0 20px 44px -18px rgba(22, 33, 43, .20);
  --paios-focus:        rgba(139, 0, 139, .45);

  /* ── 字体：中文优先思源/苹方/雅黑，等宽留给代码与数字 ── */
  --paios-font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
                "Source Han Sans SC", "Noto Sans CJK SC", -apple-system,
                BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --paios-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SFMono-Regular",
                     "Courier New", monospace;

  /* ==========================================================================
     2. 变量名映射：把 10 个模块 + 门户各自的叫法统一到上面的令牌
     --------------------------------------------------------------------------
     只声明"同名不同模块"的别名，靠**后声明覆盖先声明**生效（本表最后加载）。
     多余的别名对不使用的模块是无害空转。
     ======================================================================== */

  /* 背景 / 面 */
  --bg: var(--paios-bg);
  --c-bg: var(--paios-bg);
  --surface: var(--paios-surface);
  --surface-2: var(--paios-surface-2);
  --surface-alt: var(--paios-surface-2);
  --c-surface: var(--paios-surface);
  --c-surface-2: var(--paios-surface-2);
  --card: var(--paios-surface);
  --card-bg: var(--paios-surface);
  --panel: var(--paios-surface);
  --panel-soft: var(--paios-surface-2);

  /* 文字 */
  --text: var(--paios-ink);
  --ink: var(--paios-ink);
  --c-text: var(--paios-ink);
  --text-soft: var(--paios-ink-soft);
  --c-text-soft: var(--paios-ink-soft);
  --text-muted: var(--paios-ink-muted);
  --text-mute: var(--paios-ink-muted);
  --text-light: var(--paios-ink-muted);
  --muted: var(--paios-ink-muted);
  --c-text-muted: var(--paios-ink-muted);

  /* 描边 */
  --border: var(--paios-border);
  --line: var(--paios-border);
  --c-border: var(--paios-border);
  --border-strong: var(--paios-border-strong);
  --c-border-strong: var(--paios-border-strong);

  /* 主色（品牌绿）*/
  --primary: var(--paios-primary);
  --c-primary: var(--paios-primary);
  --primary-dark: var(--paios-primary-dark);
  --c-primary-dark: var(--paios-primary-dark);
  --primary-deep: var(--paios-primary-deep);
  --primary-soft: var(--paios-primary-soft);
  --c-primary-soft: var(--paios-primary-soft);

  /* 第二主色（电光蓝）*/
  --accent: var(--paios-accent);
  --accent-dark: var(--paios-accent-dark);
  --accent-soft: var(--paios-accent-soft);
  --info-soft: var(--paios-accent-soft);
  --c-info-soft: var(--paios-accent-soft);

  /* 成功 / 绿 */
  --green: var(--paios-primary);
  --green-dark: var(--paios-primary-dark);
  --green-soft: var(--paios-primary-soft);
  --ok: var(--paios-primary);
  --ok-bg: var(--paios-primary-soft);
  --ok-text: var(--paios-primary-dark);
  --success: var(--paios-primary);
  --c-success: var(--paios-primary);
  --c-success-soft: var(--paios-primary-soft);
  --c-add: var(--paios-primary);

  /* 警示 / 琥珀（温暖感）*/
  --warn: var(--paios-warm);
  --amber: var(--paios-warm);
  --amber-soft: var(--paios-warm-soft);
  --warn-soft: var(--paios-warm-soft);
  --c-warn: var(--paios-warm);
  --c-warn-soft: var(--paios-warm-soft);
  --c-mod: var(--paios-warm);

  /* 危险 / 红（含国内股市口径：--up 为红）*/
  --red: var(--paios-danger);
  --danger: var(--paios-danger);
  --c-danger: var(--paios-danger);
  --red-soft: var(--paios-danger-soft);
  --danger-soft: var(--paios-danger-soft);
  --c-danger-soft: var(--paios-danger-soft);
  --err-bg: var(--paios-danger-soft);
  --err-text: var(--paios-danger-dark);
  --c-del: var(--paios-danger);
  --up: var(--paios-danger);
  --down: var(--paios-green);

  /* 紫（intel 分类色）*/
  --purple: var(--paios-violet);
  --purple-soft: var(--paios-violet-soft);

  /* 深色侧边栏底色（finance 使用）*/
  --sidebar: #16232E;

  /* 形态 */
  --radius: var(--paios-radius);
  --radius-sm: var(--paios-radius-sm);
  --shadow: var(--paios-shadow);
  --shadow-lg: var(--paios-shadow-lg);
  --shadow-hover: var(--paios-shadow-lg);

  /* 字体 */
  --font: var(--paios-font);
  --font-sans: var(--paios-font);
  --font-mono: var(--paios-font-mono);
}

/* ==========================================================================
   3. 基底
   --------------------------------------------------------------------------
   ⚠️ 只改"皮肤"属性。portal 的页脚贴底依赖 body{display:flex;min-height:100vh}
   与 html{height:100%}，aidiscuss/diet/finance 的侧边栏是 height:100vh，
   所以这里绝不设置 body 的 display / height / padding。
   ======================================================================== */
html {
  scrollbar-color: #DED5DE transparent;
  scrollbar-width: thin;
}

body {
  background-color: var(--paios-bg);
  /* 冷暖双光晕：左上一抹主题紫、右上一抹琥珀，制造"科技 + 温暖"的氛围底 */
  background-image:
    radial-gradient(1100px 560px at 8% -12%, rgba(139, 0, 139, .075), transparent 62%),
    radial-gradient(900px 480px at 96% -6%, rgba(223, 149, 44, .085), transparent 64%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--paios-ink);
  font-family: var(--paios-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(139, 0, 139, .20); color: var(--paios-ink); }

/* 滚动条：细、圆、暖灰，悬停加深（时尚感的小细节）*/
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #E0D7E0;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #C9BCC9; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* 焦点环：统一为电光蓝半透明，键盘可达性一致（鼠标点击不触发）*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--paios-focus);
  outline-offset: 2px;
  border-radius: var(--paios-radius-sm);
}

/* ==========================================================================
   4. 排版
   ======================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--paios-ink);
  letter-spacing: -.012em;
  font-weight: 700;
}
h1 { letter-spacing: -.02em; }

a { color: var(--paios-primary-dark); }
a:hover { color: var(--paios-primary-deep); }

/* 深色/彩色容器（页头、品牌区、页脚）里的链接保持继承色，避免白底白字 */
:where(.header, .topbar, .navbar, .nav-bar, .site-header, .hero, .brand, footer, .site-footer,.footer) a {
  color: inherit;
}

code, kbd, samp, pre, .mono {
  font-family: var(--paios-font-mono);
  font-variant-numeric: tabular-nums;
}

hr { border: none; border-top: 1px solid var(--paios-border); }

/* 数字列对齐更"科技"*/
td.num, th.num, .tabular, .stat-table td, .history-table td { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   5. 顶栏 / 导航：玻璃质感 + 发丝描边
   --------------------------------------------------------------------------
   各模块的顶栏原本都是"纯白 + 1px 底边"，这里统一升级为半透明玻璃。
   注意排除门户/计时器/灵感收集的 .header（那是品牌渐变 hero 区，不是顶栏）。
   ======================================================================== */
.topbar, .navbar, .site-header, .nav-bar {
  background-color: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--paios-border);
  box-shadow: 0 1px 0 rgba(22, 33, 43, .02);
}

/* 导航项统一：圆角 + 过渡；激活态用品牌绿软底（科技感的"选中光")*/
:where(.nav, .main-nav, .nav-links, .nav-bar, .header-actions) a {
  border-radius: var(--paios-radius-sm);
  transition: background-color .16s ease, color .16s ease;
}

/* ==========================================================================
   6. 侧边栏（aidiscuss / diet / finance 三套）
   --------------------------------------------------------------------------
   finance 原来是深色 #1e293b 侧栏 + 浅色文字，是十个模块里最"出格"的一处。
   这里统一成与 aidiscuss/diet 一致的暖白侧栏，并**显式**把 finance 侧栏里的
   浅色文字改成深色（否则会白底白字）。
   ======================================================================== */
.sidebar {
  background: linear-gradient(180deg, var(--paios-surface) 0%, var(--paios-surface-2) 100%);
  border-right: 1px solid var(--paios-border);
  color: var(--paios-ink-soft);
}
.sidebar .logo { color: var(--paios-ink); border-bottom-color: var(--paios-border); }
.sidebar .logo small { color: var(--paios-ink-muted); }
.sidebar nav a { color: var(--paios-ink-soft); border-left-color: transparent; }
.sidebar nav a:hover { background: var(--paios-primary-soft); color: var(--paios-ink); }
.sidebar nav a.active {
  background: var(--paios-primary-soft);
  color: var(--paios-primary-dark);
  border-left-color: var(--paios-primary);
}
.sidebar nav .group { color: var(--paios-ink-muted); }

/* 品牌标记（文字/emoji 方块）：统一渐变紫 + 柔和投影 */
.brand-mark {
  background: linear-gradient(135deg, var(--paios-primary) 0%, var(--paios-primary-dark) 100%);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px -8px rgba(139, 0, 139, .75);
}

/* ==========================================================================
   7. 卡片 / 面板 / 指标块
   ======================================================================== */
.card, .panel, .icard, .wcard, .app-card, .section-card, .task-card,
.metric, .metric-box, .stat, .stat-item, .auth-card, .login-card,
.table-wrap, .chart-box, .detail-layout {
  border-radius: var(--paios-radius);
}
.card, .panel, .icard, .wcard, .section-card, .task-card, .auth-card, .login-card {
  border-color: var(--paios-border);
  box-shadow: var(--paios-shadow);
}

/* 卡片小标题：字距收紧 + 深色，形成"杂志感"层次 */
:where(.card-head, .card-title, .section-title, .sub-title, .panel-title) {
  letter-spacing: -.01em;
  color: var(--paios-ink);
}

/* ==========================================================================
   8. 按钮
   --------------------------------------------------------------------------
   刻意**不**改各模块 .btn 的默认底色（articles/diet/life/finance 是实心，
   aidiscuss/climate/intel/study/ideas 是描边或无底色，这是各自的语义），
   只统一"手感"：圆角、字重、过渡、悬停微抬升、按下回弹。
   ======================================================================== */
.btn, button, input[type="submit"], input[type="button"], input[type="reset"],
.submit-btn, .enter-btn, .back-btn, .btn-primary, .btn-green, .btn-ghost,
.btn-danger, .btn-sm, .btn-lg, .btn.small, .btn.sm, .nav-toggle {
  border-radius: var(--paios-radius-sm);
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .012em;
  transition: transform .16s ease, box-shadow .16s ease,
              background-color .16s ease, border-color .16s ease, color .16s ease;
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.submit-btn:hover, .enter-btn:hover, .back-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--paios-shadow);
}
.btn:active, button:active, input[type="submit"]:active,
.submit-btn:active, .enter-btn:active, .back-btn:active {
  transform: translateY(0);
}

/* 主按钮变体：统一为品牌绿渐变；次/危险变体统一描边色 */
.btn-primary, .btn.primary, .btn-primary:hover, .enter-btn {
  background-image: linear-gradient(135deg, var(--paios-primary) 0%, var(--paios-primary-dark) 100%);
  border-color: transparent;
  color: #fff;
}
.btn-green { border-color: var(--paios-primary-soft); color: var(--paios-primary-dark); }
.btn-danger, .btn.danger { border-color: var(--paios-danger-soft); color: var(--paios-danger); }
.btn-ghost, .btn.secondary { border-color: var(--paios-border-strong); }

/* ==========================================================================
   9. 表单控件
   ======================================================================== */
input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
select, textarea, .form-control, .field input, .field select, .field textarea {
  border-color: var(--paios-border);
  border-radius: var(--paios-radius-sm);
  font-family: inherit;
  color: var(--paios-ink);
  background-color: var(--paios-surface);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--paios-accent);
  box-shadow: 0 0 0 3px rgba(139, 0, 139, .13);
}
input::placeholder, textarea::placeholder { color: var(--paios-ink-muted); }
:where(.field label, .form-row label, .form-group label) {
  color: var(--paios-ink-soft);
  font-weight: 600;
  letter-spacing: .01em;
}

/* ==========================================================================
   10. 表格
   --------------------------------------------------------------------------
   十个模块的表格类名各不相同（table.tbl / table.data / .data-table /
   .stat-table / .history-table / 裸 table），这里一并收口。
   注意：单元格上的**内联** background（如热量热力图的色阶）优先级更高，
   不会被这里盖掉。
   ======================================================================== */
table, table.tbl, table.data, .data-table, .stat-table, .history-table, .matrix-tbl {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
thead th,
table.tbl thead th, table.data thead th, .data-table thead th,
.stat-table thead th, .history-table thead th {
  background: var(--paios-surface-2);
  color: var(--paios-ink-soft);
  font-weight: 700;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--paios-border-strong);
}
th, td { border-color: var(--paios-border); }
tbody tr:hover > td, tbody tr:hover > th, tr:hover td { background: var(--paios-hover); }

/* ==========================================================================
   11. 徽标 / 标签 / 胶囊
   ======================================================================== */
.badge, .tag, .chip, .pill, .status, .today-badge, .badge-eval, .group-tag,
.tag-new, .badge-status, .chip-role {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .012em;
}

/* 语义变体：统一到主题的软底/深字配色 */
.badge.ok, .badge.success, .badge.done, .badge.on, .status.ok, .tag.ok,
.flash.success, .flash.ok, .alert-success {
  background: var(--paios-primary-soft);
  color: var(--paios-primary-dark);
}
.badge.warn, .badge.warnb, .badge.pending, .status.warn, .tag.warn,
.flash.warning, .alert-warning {
  background: var(--paios-warm-soft);
  color: #9A6414;
}
.badge.over, .badge.danger, .badge.err, .badge.off, .status.err,
.flash.error, .flash.danger, .alert-danger {
  background: var(--paios-danger-soft);
  color: var(--paios-danger-dark);
}
.badge.info, .badge.new {
  background: var(--paios-accent-soft);
  color: var(--paios-accent-dark);
}

/* ==========================================================================
   12. 提示条 / 空态 / 分页
   ======================================================================== */
.flash, .notice, .note, .alert, .empty, .pagination, .pager {
  border-radius: var(--paios-radius-sm);
}
.empty { color: var(--paios-ink-muted); }
.pagination a, .pager a, .pager span {
  border-radius: var(--paios-radius-sm);
  transition: background-color .16s ease, color .16s ease;
}

/* ==========================================================================
   13. 浮动"门户首页"按钮（由 paios/core/theme.py 注入，门户自身不注入）
   ======================================================================== */
.paios-portal-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147483000;               /* 稳压 study 的全屏 modal（z-index:100）*/
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(74, 6, 74, .94) 0%, rgba(139, 0, 139, .94) 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #FBF2FB;
  font-family: var(--paios-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(74, 6, 74, .60), inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: .94;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.paios-portal-fab:hover,
.paios-portal-fab:focus-visible {
  opacity: 1;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(74, 6, 74, .70), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.paios-portal-fab__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--paios-primary) 0%, var(--paios-warm) 100%);
  box-shadow: 0 0 0 3px rgba(223, 149, 44, .18);
  flex: 0 0 7px;
}

/* ==========================================================================
   14. 降级与适配
   ======================================================================== */
@media (max-width: 640px) {
  .paios-portal-fab {
    right: 12px;
    bottom: 12px;
    padding: 9px 13px 9px 11px;
    font-size: 12.5px;
  }
  .paios-portal-fab__dot { box-shadow: 0 0 0 2px rgba(223, 149, 44, .18); }
}

/* 尊重系统的"减弱动效"偏好 */
@media (prefers-reduced-motion: reduce) {
  .btn, button, .paios-portal-fab, a, .flash, input, select, textarea {
    transition: none;
  }
  .btn:hover, button:hover, .paios-portal-fab:hover { transform: none; }
}

/* 打印：去掉投影与浮动件，省墨且干净 */
@media print {
  body { background: #fff; background-image: none; }
  .paios-portal-fab { display: none !important; }
  .topbar, .navbar, .site-header, .nav-bar { box-shadow: none; backdrop-filter: none; }
  .card, .panel, .app-card, .section-card, .task-card { box-shadow: none; }
}

/* 浏览器不支持 backdrop-filter 时，顶栏退回不透明白（避免文字压在内容上）*/
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .navbar, .site-header, .nav-bar { background-color: var(--paios-surface); }
}