/* ============================================================
   远瞳 · 全站深色主题（唯一样式源，手机优先，Bootstrap 5）
   层级用明度阶梯，不用阴影
   页面底 #16201C / 卡片 #1E2B26 / 内嵌 #26332D / 浮层 #2E3D36
   ============================================================ */

:root {
  /* 层级底 */
  --yt-bg: #16201C;
  --yt-card: #1E2B26;
  --yt-inner: #26332D;
  --yt-elev: #2E3D36;
  --yt-line: rgba(255, 255, 255, 0.06);

  /* 绿色 4 档 */
  --yt-main: #2E7D5B;
  --yt-deep: #1B5E40;
  --yt-light: #1F3D2E;
  --yt-bright: #3EA06E;

  /* 文字 */
  --yt-text: #E4EDE8;
  --yt-text-2: #9CB3A8;
  --yt-text-3: #6E8579;

  /* 形状 */
  --yt-r-card: 12px;
  --yt-r-inner: 8px;
  --yt-r-btn: 6px;
  --yt-r-tag: 4px;
}

/* ===== 基础 ===== */
html, body { overflow-x: hidden; }
body {
  background: var(--yt-bg);
  color: var(--yt-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

main.container-fluid {
  max-width: 480px;
  margin: 0 auto;
  padding-left: .75rem;
  padding-right: .75rem;
}

/* ===== 导航（主绿 #2E7D5B，固定 56px） ===== */
nav.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  min-height: 56px;
  background: var(--yt-main) !important;
  border-bottom: 1px solid var(--yt-line);
}
body { padding-top: 56px; }
nav.navbar .navbar-brand,
nav.navbar .nav-link,
nav.navbar .navbar-text { color: #fff; }
nav.navbar .nav-link:hover,
nav.navbar .nav-link:focus { color: #C9EBD8; }
nav.navbar .navbar-toggler { border-color: rgba(255,255,255,.35); }
nav.navbar .navbar-toggler-icon { filter: invert(1); }

/* 下拉菜单浮层 */
nav.navbar .dropdown-menu {
  background: var(--yt-elev);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-r-inner);
}
nav.navbar .dropdown-item { color: var(--yt-text); }
nav.navbar .dropdown-item:hover,
nav.navbar .dropdown-item:focus { background: var(--yt-light); color: #fff; }

/* ===== 卡片（无阴影，1px 描边分层） ===== */
.card {
  background: var(--yt-card);
  color: var(--yt-text);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-r-card);
  box-shadow: none !important;
  margin-bottom: .75rem;
}
.card-body { padding: .875rem; }
.card-title { font-size: 1rem; font-weight: 600; color: var(--yt-text); }
.card .card-header, .card .card-footer {
  background: var(--yt-inner);
  border-color: var(--yt-line);
  color: var(--yt-text);
}

/* 卡中卡 / 内嵌块 */
.inner-block {
  background: var(--yt-inner);
  border-radius: var(--yt-r-inner);
  padding: .75rem;
}
.inner-block-green { background: var(--yt-light); }

/* Bootstrap 常用工具类的深色化 */
.bg-light, .bg-white { background-color: var(--yt-inner) !important; }
.text-muted { color: var(--yt-text-2) !important; }
.border { border-color: var(--yt-line) !important; }
hr { border-color: var(--yt-line); opacity: 1; }
.list-group-item {
  background: var(--yt-card);
  border-color: var(--yt-line);
  color: var(--yt-text);
}

/* ===== 文字 ===== */
h1, h2, h3, h4, h5, h6, .display-title { color: var(--yt-text); }
.text-body-secondary, small { color: var(--yt-text-2); }
a { color: var(--yt-bright); text-decoration: none; }
a:hover { color: #5CC58E; }

/* ===== 按钮（全部 min-height 44px） ===== */
.btn {
  min-height: 44px;
  border-radius: var(--yt-r-btn);
  font-weight: 500;
  box-shadow: none;
}
.btn-sm { min-height: 38px; }
.btn-lg { min-height: 52px; }
.btn.py-0, .btn[class*="py-0"] { min-height: 32px; }

/* 主按钮：主绿底 + 主文字 */
.btn-primary {
  --bs-btn-bg: var(--yt-main);
  --bs-btn-border-color: var(--yt-main);
  --bs-btn-color: var(--yt-text);
  --bs-btn-hover-bg: var(--yt-bright);
  --bs-btn-hover-border-color: var(--yt-bright);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--yt-deep);
  --bs-btn-active-border-color: var(--yt-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--yt-main);
  --bs-btn-disabled-border-color: var(--yt-main);
  --bs-btn-disabled-color: var(--yt-text);
}

/* 次按钮：亮绿线框 */
.btn-outline-primary {
  --bs-btn-color: var(--yt-bright);
  --bs-btn-border-color: var(--yt-bright);
  --bs-btn-hover-bg: var(--yt-bright);
  --bs-btn-hover-border-color: var(--yt-bright);
  --bs-btn-hover-color: #0F1713;
  --bs-btn-active-bg: var(--yt-main);
  --bs-btn-active-border-color: var(--yt-main);
  --bs-btn-active-color: #fff;
}
.btn-outline-secondary {
  --bs-btn-color: var(--yt-text-2);
  --bs-btn-border-color: var(--yt-text-3);
  --bs-btn-hover-bg: var(--yt-elev);
  --bs-btn-hover-border-color: var(--yt-text-3);
  --bs-btn-hover-color: var(--yt-text);
}

/* 删除：红 #C0392B 线框 */
.btn-outline-danger {
  --bs-btn-color: #E74C3C;
  --bs-btn-border-color: #C0392B;
  --bs-btn-hover-bg: #C0392B;
  --bs-btn-hover-border-color: #C0392B;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #A93226;
  --bs-btn-active-border-color: #A93226;
}
.btn-outline-info {
  --bs-btn-color: #5EC8C0;
  --bs-btn-border-color: #159E95;
  --bs-btn-hover-bg: #159E95;
  --bs-btn-hover-border-color: #159E95;
  --bs-btn-hover-color: #0F1713;
}

/* ===== 表单（内嵌底 + 亮绿聚焦） ===== */
.form-control, .form-select {
  min-height: 40px;
  font-size: 16px; /* 防 iOS 聚焦缩放 */
  background: var(--yt-inner);
  color: var(--yt-text);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-r-inner);
}
.form-control::placeholder { color: var(--yt-text-3); }
.form-control:focus, .form-select:focus {
  background: var(--yt-inner);
  color: var(--yt-text);
  border-color: var(--yt-bright);
  box-shadow: 0 0 0 .2rem rgba(62, 160, 110, .18);
}
.form-select option { background: var(--yt-elev); color: var(--yt-text); }
textarea.form-control { min-height: 64px; }
.form-label { display: block; margin-bottom: .25rem; color: var(--yt-text-2); }
.form-text { color: var(--yt-text-3); }
.form-check-input { background: var(--yt-inner); border-color: var(--yt-text-3); }
.form-check-input:checked { background: var(--yt-main); border-color: var(--yt-main); }
.form-check-input:focus { border-color: var(--yt-bright); box-shadow: 0 0 0 .2rem rgba(62,160,110,.18); }
.input-group-text { background: var(--yt-elev); border-color: var(--yt-line); color: var(--yt-text-2); }

/* ===== 分类色块（标签底 / 字 / 左色条） ===== */
.tag-cat {
  display: inline-block;
  font-size: .72rem;
  padding: .18rem .55rem;
  border-radius: var(--yt-r-tag);
  font-weight: 600;
  line-height: 1.4;
}
.tag-cat.idea  { background: #1F3D2E; color: #7FD8A6; }
.tag-cat.func  { background: #173D3A; color: #5EC8C0; }
.tag-cat.note  { background: #3D3617; color: #E0C16B; }
.tag-cat.imp   { background: #402A17; color: #E0A05E; }
.tag-cat.done  { background: #2A332E; color: #8FB3A0; }
.tag-cat.other { background: var(--yt-elev); color: var(--yt-text-2); }

/* 状态标签（复用色块体系） */
.tag-status {
  display: inline-block;
  font-size: .72rem;
  padding: .18rem .55rem;
  border-radius: var(--yt-r-tag);
  font-weight: 600;
  line-height: 1.4;
}
.tag-status.not_started { background: #2A332E; color: #8FB3A0; }
.tag-status.in_progress { background: #1F3D2E; color: #7FD8A6; }
.tag-status.completed   { background: var(--yt-deep); color: #CFE9DC; }
.tag-status.paused      { background: #402A17; color: #E0A05E; }

/* ===== 项目卡片（左色条按分类） ===== */
.proj-card {
  background: var(--yt-card);
  border: 1px solid var(--yt-line);
  border-left-width: 4px;
  border-radius: var(--yt-r-card);
  box-shadow: none;
  padding: .875rem;
  margin-bottom: .75rem;
}
.proj-card.cat-idea  { border-left-color: var(--yt-main); }
.proj-card.cat-func  { border-left-color: #159E95; }
.proj-card.cat-note  { border-left-color: #C9A227; }
.proj-card.cat-imp   { border-left-color: #D9822B; }
.proj-card.cat-done  { border-left-color: #5C806C; }
.proj-card.cat-other { border-left-color: var(--yt-text-3); }

/* ===== 口号 ===== */
.slogan {
  font-size: 1.3em;
  font-weight: 700;
  color: #7FD8A6;
  letter-spacing: 2px;
  margin: 24px 0;
  padding: 1rem;
  background: rgba(27, 94, 64, 0.14); /* 极淡深绿底 */
  border-radius: var(--yt-r-inner);
  text-align: center;
  line-height: 1.6;
  word-break: keep-all;
}

/* ===== 面包屑 ===== */
.breadcrumb {
  margin: .5rem 0 .75rem; padding: 0;
  font-size: .75rem; background: none;
  flex-wrap: nowrap; white-space: nowrap; overflow-x: auto;
}
.breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--yt-text-3); }
.breadcrumb-item a { color: var(--yt-text-2); }
.breadcrumb-item a:hover { color: var(--yt-bright); }
.breadcrumb-item.active { color: var(--yt-text-3); }

/* ===== 筛选区 ===== */
.filter-bar {
  background: var(--yt-card);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-r-inner);
  padding: .6rem;
  margin-bottom: .75rem;
}
.filter-input { max-width: 180px; }
.filter-select { max-width: 130px; }

/* ===== 工具类（替代内联 style） ===== */
.nav-inner { max-width: 1200px; }
.yt-pre-wrap { white-space: pre-wrap; }
.yt-progress-tall { height: 26px; }
.yt-progress-thin { height: 5px; }
.yt-progress-upload { height: 6px; }
.yt-num-input { width: 100px; }
.yt-minw0 { min-width: 0; }
.yt-break { word-break: break-all; }
.yt-proj-name { font-size: 1.05rem; color: var(--yt-text); font-weight: 600; }
.yt-shrink { flex-shrink: 0; }
.yt-fs-lg { font-size: 1.05rem; }
.mic-btn { width: 76px; height: 76px; font-size: 1.8rem; }
.audio-mini { height: 32px; }

/* ===== Alert / Toast ===== */
.alert { border: 1px solid var(--yt-line); border-radius: var(--yt-r-inner); }
.alert-success { background: rgba(46, 125, 91, .18); color: #A6DCC0; border-color: rgba(46,125,91,.35); }
.alert-danger  { background: rgba(192, 57, 43, .18); color: #F1B7AE; border-color: rgba(192,57,43,.35); }
.alert-warning { background: rgba(201, 162, 39, .16); color: #EFD9A0; border-color: rgba(201,162,39,.35); }
.alert-info    { background: rgba(21, 158, 149, .16); color: #A8DEDA; border-color: rgba(21,158,149,.35); }
.alert .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ===== 表格（手机端卡片化） ===== */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--yt-text);
  --bs-table-border-color: var(--yt-line);
  --bs-table-striped-bg: var(--yt-inner);
  --bs-table-striped-color: var(--yt-text);
  --bs-table-hover-bg: var(--yt-elev);
  --bs-table-hover-color: var(--yt-text);
}
.table > :not(caption) > * > * { background: transparent; }
.table thead th {
  background: var(--yt-elev) !important;
  color: var(--yt-text-2);
  font-weight: 600;
}
.table-light { background: var(--yt-elev) !important; }

@media (max-width: 767.98px) {
  .table-responsive .table thead { display: none; }
  .table-responsive .table, .table-responsive .table tbody,
  .table-responsive .table tr, .table-responsive .table td { display: block; width: 100%; }
  .table-responsive .table tr {
    background: var(--yt-card);
    border: 1px solid var(--yt-line);
    border-radius: var(--yt-r-card);
    margin-bottom: .75rem;
  }
  .table-responsive .table td { border: 0; padding: .375rem .75rem; }
  .table-responsive .table tr td:first-child { padding-top: .75rem; font-weight: 600; }
  .table-responsive .table tr td:last-child { padding-bottom: .75rem; }
}

/* ===== Bootstrap badge 深色化（保留语义色） ===== */
.badge.bg-secondary { background: var(--yt-elev) !important; color: var(--yt-text-2) !important; }
.badge.bg-primary   { background: var(--yt-main) !important; color: #fff !important; }
.badge.bg-info      { background: #159E95 !important; color: #0F1713 !important; }
.badge.bg-success   { background: var(--yt-deep) !important; color: #CFE9DC !important; }
.badge.bg-danger    { background: #C0392B !important; color: #fff !important; }
.badge.bg-warning   { background: #C9A227 !important; color: #241B05 !important; }
.badge.bg-light     { background: var(--yt-elev) !important; color: var(--yt-text-2) !important; }
.badge.text-dark    { color: var(--yt-text) !important; }
.badge.bg-dark      { background: var(--yt-inner) !important; }
.badge.bg-success, .badge.bg-info, .badge.bg-warning { font-weight: 500; }

/* 状态徽标（项目/工作点状态色带保留） */
.badge.bg-success { background: var(--yt-deep) !important; color: #CFE9DC !important; }
.badge.bg-warning { background: #C9A227 !important; }

/* ===== 进度条 ===== */
.progress { background: var(--yt-inner); border-radius: 999px; }
.progress-bar { font-size: .8rem; background: var(--yt-bright); }
.progress-bar.bg-success { background: var(--yt-main) !important; }
.progress-bar.bg-info    { background: #159E95 !important; }
.progress-bar.bg-warning { background: #C9A227 !important; }
.progress-bar.bg-danger  { background: #C0392B !important; }

/* ===== 详情页 ===== */
.page-title { color: #7FD8A6; font-weight: 700; }
.audio-card, .voice-item, .note-item, .file-item {
  background: var(--yt-inner);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-r-inner);
}
.note-item { padding: .5rem .75rem; }
.file-item a { word-break: break-all; }

/* 麦克风：红圆 + 亮绿外圈 */
.mic-wrap {
  display: inline-block;
  background: var(--yt-light);
  border-radius: 50%;
  padding: 12px;
  border: 1px solid rgba(127, 216, 166, .25);
}
#btnRecord { box-shadow: none; }

/* 提醒条目/日志 */
.list-group-item.active { background: var(--yt-main); border-color: var(--yt-main); color: #fff; }

/* ===== 分页/Modal（如有） ===== */
.page-link { background: var(--yt-inner); border-color: var(--yt-line); color: var(--yt-text-2); }
.page-item.active .page-link { background: var(--yt-main); border-color: var(--yt-main); color: #fff; }
.modal-content { background: var(--yt-card); color: var(--yt-text); border: 1px solid var(--yt-line); border-radius: var(--yt-r-card); }
.modal-header, .modal-footer { border-color: var(--yt-line); }
.modal-title { color: var(--yt-text); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ===== 页脚 ===== */
footer { color: var(--yt-text-3) !important; }
footer .text-muted { color: var(--yt-text-3) !important; }

/* ===== 桌面覆盖 ===== */
@media (min-width: 768px) {
  main.container-fluid { max-width: 1200px; }
  .breadcrumb { font-size: .875rem; }
  .card-body { padding: 1rem; }
  .btn-sm { min-height: 34px; }
  .slogan { font-size: 1.5em; padding: 1.25rem; }
}

/* ===== 布局尺寸工具类（替代内联 style） ===== */
.form-w-640 { max-width: 640px; }
.form-w-760 { max-width: 760px; }
.form-w-820 { max-width: 820px; }
.col-w-70 { width: 70px; }
.col-w-80 { width: 80px; }
.col-w-130 { width: 130px; }
.col-w-180 { width: 180px; }
.col-w-220 { width: 220px; }
.col-w-260 { width: 260px; }
.col-w-340 { width: 340px; }
.progress-mini { height: 14px; }
.min-w-120 { min-width: 120px; }
.yt-pre-inherit { white-space: pre-wrap; font-family: inherit; }

/* ===== 底部常驻强制刷新栏 ===== */
/* 仅在渲染了底部栏时留白（类由 PHP 按 YT_DEBUG 输出，兼容不支持 :has 的旧 WebView） */
body.yt-has-refresh { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
body.yt-no-refresh { padding-bottom: 1rem; }
body:has(.yt-refresh-bar) { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

.yt-refresh-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 9998;
  display: flex;
  justify-content: center;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(30, 43, 38, 0.95);
  border-top: 1px solid var(--yt-main);
}
.yt-refresh-btn {
  width: 100%;
  max-width: 400px;
  height: 44px;
  border-radius: var(--yt-r-inner);
  background: var(--yt-inner);
  border: 1px solid var(--yt-main);
  color: #7FD8A6;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
}
.yt-refresh-btn:active, .yt-refresh-btn:hover {
  background: var(--yt-light);
  color: #A6EBc4;
}
.yt-refresh-btn:disabled { opacity: .6; cursor: wait; }

/* 页脚上移，避免被底部栏遮挡 */
.yt-footer { color: var(--yt-text-3); }
body.yt-has-refresh .yt-footer { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 768px) {
  .yt-refresh-bar { justify-content: flex-end; padding-right: 24px; }
  .yt-refresh-btn { max-width: 260px; }
}

/* ===== 分类浏览首页 ===== */
.browse-card {
  background: var(--yt-card);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-r-card);
  padding: .875rem;
  margin-bottom: .75rem;
}
.browse-card.cat-idea  { border-left: 4px solid var(--yt-main); }
.browse-card.cat-func  { border-left: 4px solid #159E95; }
.browse-card.cat-note  { border-left: 4px solid #C9A227; }
.browse-card.cat-imp   { border-left: 4px solid #D9822B; }
.browse-card.cat-done  { border-left: 4px solid #5C806C; }
.browse-card.cat-other { border-left: 4px solid var(--yt-text-3); }

.browse-head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .625rem;
}
.browse-head .cat-name {
  color: var(--yt-text);
  font-size: 1.1em;
  font-weight: 700;
}
.browse-desc { color: var(--yt-text-2); font-size: .8rem; margin: -.25rem 0 .625rem; }

.sub-flow { display: flex; flex-wrap: wrap; gap: .5rem; }
.sub-chip {
  display: flex; align-items: center; gap: .375rem;
  min-height: 44px;
  padding: .3rem .8rem;
  background: var(--yt-inner);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-r-inner);
  color: var(--yt-text);
  text-decoration: none;
  font-size: .92rem;
}
.sub-chip:hover { background: var(--yt-elev); color: var(--yt-text); }
.sub-chip .arrow { color: var(--yt-text-2); }
.count-badge {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  background: var(--yt-main);
  color: var(--yt-text);
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .05rem .4rem;
}
.browse-empty { color: var(--yt-text-3); font-size: .85rem; }
@media (max-width: 767.98px) {
  .sub-flow { flex-direction: column; }
  .sub-chip { width: 100%; }
}

/* 添加大类入口行 */
.add-cat-row {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px;
  width: 100%;
  background: var(--yt-card);
  border: 1px dashed var(--yt-text-3);
  border-radius: var(--yt-r-card);
  color: var(--yt-text-2);
  text-decoration: none;
  font-size: .95rem;
  margin-bottom: .75rem;
}
.add-cat-row:hover { background: var(--yt-elev); color: var(--yt-bright); border-color: var(--yt-bright); }

/* 大类项目条目行（名称-分类-日期） */
.item-list { display: flex; flex-direction: column; gap: .5rem; }
.item-row {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px;
  padding: .45rem .75rem;
  background: var(--yt-inner);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-r-inner);
  color: var(--yt-text);
  text-decoration: none;
}
.item-row:hover { background: var(--yt-elev); color: var(--yt-text); }
.item-row .it-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-row .it-sub { color: var(--yt-text-2); font-size: .8rem; flex-shrink: 0; }
.item-row .it-date { color: var(--yt-text-3); font-size: .75rem; margin-left: auto; flex-shrink: 0; }
.item-row .arrow { color: var(--yt-text-2); flex-shrink: 0; }

/* 大类头部可点击 */
a.browse-head { text-decoration: none; }
a.browse-head:hover .cat-name { color: var(--yt-bright); }
a.browse-head .head-arrow { margin-left: auto; color: var(--yt-text-3); }

/* 修改类（紫色）与 chip 图标配色 */
.tag-cat.fix { background: #2E2A3D; color: #B39DDB; }
.browse-card.cat-fix { border-left: 4px solid #9F7FD1; }
.sub-chip .cat-ic { font-size: .95rem; }
.sub-chip .cat-ic.idea { color: #7FD8A6; }
.sub-chip .cat-ic.func { color: #5EC8C0; }
.sub-chip .cat-ic.fix  { color: #B39DDB; }
.sub-chip .cat-ic.note { color: #E0C16B; }
.sub-chip .cat-ic.imp  { color: #E0A05E; }
.sub-chip .cat-ic.done { color: #8FB3A0; }
.sub-chip .cat-ic.other{ color: var(--yt-text-2); }
.tag-cat .cat-ic { margin-right: .25rem; font-size: .8rem; }
.tag-cat.idea .cat-ic { color: #7FD8A6; }
.tag-cat.func .cat-ic { color: #5EC8C0; }
.tag-cat.fix  .cat-ic { color: #B39DDB; }