/* ui.css —— 通用零件：图标基类、按钮、开关、输入框、滑块、卡片、列表行、分段控件、提示条、页面骨架。 */

/* 手写内联 SVG 图标：24px、线宽 2、圆头圆角；stroke 走 currentColor，颜色由外层变量给 */
.trpb-i{
  width:24px; height:24px; display:block;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

.trpb-topbar{
  flex:0 0 auto; height:56px; padding:0 14px; gap:10px;
  display:flex; align-items:center; border-bottom:1px solid var(--trpb-line);
}

.trpb-iconbtn{
  appearance:none; flex:0 0 auto; width:36px; height:36px; border-radius:11px;
  background:var(--trpb-surface); border:1px solid var(--trpb-line); color:var(--trpb-text);
  box-shadow:var(--trpb-shadow-1);
  display:grid; place-items:center; cursor:pointer;
  transition:transform 120ms ease, background var(--trpb-t) ease,
             border-color var(--trpb-t) ease, color var(--trpb-t) ease;
}

.trpb-iconbtn:active{ transform:translateY(1px); background:var(--trpb-sunken); color:var(--trpb-accent); border-color:var(--trpb-accent-line); }

.trpb-iconbtn:focus-visible{ border-color:var(--trpb-accent); box-shadow:var(--trpb-ring); }

.trpb-title{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:11px; }

.trpb-title-text{
  font-size:1rem; color:var(--trpb-text-strong); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.trpb-textbtn{
  appearance:none; flex:0 0 auto; height:31px; padding:0 12px; border-radius:9px;
  background:var(--trpb-surface); border:1px solid var(--trpb-line); color:var(--trpb-text);
  font-size:var(--trpb-font-small); letter-spacing:.04em; cursor:pointer;
  transition:transform 120ms ease, filter 120ms ease,
             border-color var(--trpb-t) ease, color var(--trpb-t) ease;
}

.trpb-textbtn:active{ transform:translateY(1px); filter:brightness(.94); }

.trpb-textbtn--accent{
  background:var(--trpb-accent-soft); border-color:var(--trpb-accent-line); color:var(--trpb-accent);
}

.trpb-textbtn:focus-visible{ box-shadow:var(--trpb-ring); }

.trpb-body{
  flex:1 1 auto; overflow-y:auto; padding:16px 14px 24px;
  scrollbar-width:thin; scrollbar-color:var(--trpb-scroll) transparent;
}

.trpb-note{ margin-top:16px; font-size:var(--trpb-font-small); line-height:1.7; color:var(--trpb-text-dim); }

.trpb-input{
  flex:1 1 auto; min-width:0; height:40px; padding:0 13px; border-radius:11px;
  background:var(--trpb-sunken); border:1px solid var(--trpb-line); color:var(--trpb-text);
  font-family:inherit; font-size:var(--trpb-font-mid);
}

.trpb-input::placeholder{ color:var(--trpb-text-faint); }

.trpb-input:focus{ outline:none; border-color:var(--trpb-accent-line); box-shadow:var(--trpb-ring); }

/* =========================================================================
   十、页面 2：世界书
   ========================================================================= */
.trpb-card{
  display:flex; flex-direction:column; gap:8px; padding:13px 14px;
  width:100%; text-align:left; font:inherit;
  background:var(--trpb-surface); border:1px solid var(--trpb-line);
  border-radius:var(--trpb-radius); box-shadow:var(--trpb-shadow-1);
  cursor:pointer;
  transition:transform 120ms ease, background var(--trpb-t) ease, border-color var(--trpb-t) ease;
}

.trpb-card + .trpb-card{ margin-top:11px; }

.trpb-card:active{ transform:translateY(1px); background:var(--trpb-surface-2); border-color:var(--trpb-accent-line); }

.trpb-card:focus-visible{ box-shadow:var(--trpb-ring); }

.trpb-card--static{ cursor:default; }

.trpb-card--static:active{ transform:none; background:var(--trpb-surface); border-color:var(--trpb-line); }

.trpb-card-head{ display:flex; align-items:center; gap:9px; }

.trpb-card-name{ font-size:var(--trpb-font-body); color:var(--trpb-text-strong); }

.trpb-card-kw{ font-family:var(--trpb-mono); font-size:var(--trpb-font-small); letter-spacing:.04em; color:var(--trpb-accent); }

/* =========================================================================
   十一、页面 3：设置
   ========================================================================= */
.trpb-section{ margin-bottom:22px; }

.trpb-section-head{ display:flex; align-items:center; gap:10px; margin:0 2px 10px; }

.trpb-section-title{
  font-family:var(--trpb-mono); font-size:var(--trpb-font-small); letter-spacing:.18em;
  color:var(--trpb-text-dim); text-transform:uppercase; font-weight:400;
}

.trpb-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; background:var(--trpb-surface);
  border:1px solid var(--trpb-line); border-radius:var(--trpb-radius);
  box-shadow:var(--trpb-shadow-1);
}

.trpb-row + .trpb-row{ margin-top:9px; }

.trpb-row--stack{ flex-direction:column; align-items:stretch; gap:9px; }

.trpb-row-label{ font-size:var(--trpb-font-mid); color:var(--trpb-text); }

.trpb-row-hint{ display:block; margin-top:3px; font-size:var(--trpb-font-small); color:var(--trpb-text-dim); }

.trpb-switch{
  appearance:none; flex:0 0 auto; position:relative; width:46px; height:26px; border-radius:8px;
  background:var(--trpb-track); border:1px solid var(--trpb-line); cursor:pointer;
  transition:background var(--trpb-t) ease, border-color var(--trpb-t) ease;
}

.trpb-switch::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:5px;
  background:var(--trpb-knob); border:1px solid var(--trpb-knob-edge);
  transition:transform 140ms ease, background 140ms ease;
}

.trpb-switch[aria-checked="true"]{ background:var(--trpb-accent-soft); border-color:var(--trpb-accent-line); }

.trpb-switch[aria-checked="true"]::after{ transform:translateX(20px); background:var(--trpb-accent); }

.trpb-switch:focus-visible{ box-shadow:var(--trpb-ring); }

/* =========================================================================
   十二、页面 4：外观
   ========================================================================= */
/* 三选一用的分段控件：轨道挖下去、选中块浮起来，全都走变量 */
.trpb-segment{
  display:flex; gap:6px; padding:4px;
  background:var(--trpb-sunken);
  border:1px solid var(--trpb-line);
  border-radius:12px;
}

.trpb-segbtn{
  appearance:none; flex:1 1 0; min-width:0; height:32px; padding:0 8px;
  border-radius:9px; background:transparent; border:1px solid transparent;
  color:var(--trpb-text-dim); font-size:var(--trpb-font-mid); cursor:pointer;
  transition:background var(--trpb-t) ease, color var(--trpb-t) ease,
             border-color var(--trpb-t) ease, box-shadow var(--trpb-t) ease;
}

.trpb-segbtn:active{ transform:translateY(1px); }

.trpb-segbtn.trpb-is-active{
  background:var(--trpb-surface);
  border-color:var(--trpb-accent-line);
  color:var(--trpb-accent);
  box-shadow:var(--trpb-shadow-1);
}

.trpb-segbtn:focus-visible{ box-shadow:var(--trpb-ring); }

.trpb-range{ appearance:none; width:100%; height:26px; background:transparent; cursor:pointer; }

.trpb-range::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--trpb-accent) 0 var(--trpb-fill), var(--trpb-track) var(--trpb-fill) 100%);
}

.trpb-range::-webkit-slider-thumb{
  appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:4px;
  background:var(--trpb-accent); border:1px solid var(--trpb-knob-edge);
}

.trpb-range::-moz-range-track{ height:4px; border-radius:2px; background:var(--trpb-track); }

.trpb-range::-moz-range-progress{ height:4px; border-radius:2px; background:var(--trpb-accent); }

.trpb-range::-moz-range-thumb{
  width:14px; height:14px; border-radius:4px;
  background:var(--trpb-accent); border:1px solid var(--trpb-knob-edge);
}

.trpb-range:focus-visible{ box-shadow:var(--trpb-ring); border-radius:6px; }

/* =========================================================================
   十三、提示条
   ========================================================================= */
.trpb-toast{
  position:absolute; left:50%; bottom:30px; z-index:30;
  padding:11px 16px 11px 13px; border-radius:12px; white-space:nowrap;
  background:var(--trpb-surface); border:1px solid var(--trpb-line);
  border-left:3px solid var(--trpb-accent);
  color:var(--trpb-text); font-size:var(--trpb-font-small); letter-spacing:.02em;
  box-shadow:var(--trpb-shadow-2);
  opacity:0; transform:translate(-50%,12px); pointer-events:none;
  transition:transform var(--trpb-t) ease, opacity var(--trpb-t) ease;
}

.trpb-toast.trpb-is-open{ opacity:1; transform:translate(-50%,0); }

/* =========================================================================
   第 3 期新加的通用零件：顶栏右侧槽位、App 内 tab 条、空状态块
   （照现有零件的写法拼，颜色照样只走变量）
   ========================================================================= */

/* 顶栏右边那个槽：有的页面右上角按钮随 tab 换，留个槽给它 */
.trpb-topbar-slot{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

/* App 内的 tab：panes 撑满，tab 条贴在内容下面 */
.trpb-tabpanes{ flex:1 1 auto; min-height:0; display:flex; }
.trpb-pane{ display:none; flex:1 1 auto; min-height:0; flex-direction:column; }
.trpb-pane.trpb-is-active{ display:flex; }
.trpb-tabs{
  flex:0 0 auto; display:flex; gap:4px; padding:8px 10px 12px;
  border-top:1px solid var(--trpb-line);
  background:var(--trpb-surface);
}
.trpb-tab{
  appearance:none; flex:1 1 0; min-width:0; height:40px; border-radius:11px;
  background:transparent; border:1px solid transparent;
  color:var(--trpb-text-dim); font-size:var(--trpb-font-small); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:4px;
  transition:transform 120ms ease, background var(--trpb-t) ease,
             border-color var(--trpb-t) ease, color var(--trpb-t) ease;
}
.trpb-tab:active{ transform:translateY(1px); }
.trpb-tab.trpb-is-active{
  background:var(--trpb-accent-soft); border-color:var(--trpb-accent-line); color:var(--trpb-accent);
}
.trpb-tab:focus-visible{ box-shadow:var(--trpb-ring); }

/* 空状态：这一期每个新页面就是这个 + 一句占位 */
.trpb-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:180px; padding:26px 18px; text-align:center;
  border:1px dashed var(--trpb-line-strong); border-radius:var(--trpb-radius);
  background:var(--trpb-surface); box-shadow:var(--trpb-shadow-1);
}
.trpb-empty-text{ font-size:var(--trpb-font-mid); color:var(--trpb-text-dim); }
.trpb-empty-hint{ font-size:var(--trpb-font-small); color:var(--trpb-text-faint); line-height:1.7; }
.trpb-empty-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:4px; }
.trpb-empty--fill{ flex:1 1 auto; }