/* ==========================================================================
   YthLink · 控制台 / 后台统一视觉层
   在 style.css → tokens.css → ui.css → pages.css 之后加载，
   只做"覆盖既有语义类"，不改任何 JS 与 DOM 结构。
   ========================================================================== */

/* ---------- 卡片 ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-1);
}
.panel + .panel { margin-top: var(--sp-4); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: 0;
  border-bottom: none;
}
.panel-head h2,
.panel-head h3 {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}

/* ---------- 指标卡 ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.mini-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: none;
}
.mini-stat .k {
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0;
}
.mini-stat .v {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.mini-stat .s {
  margin-top: 4px;
  color: var(--text-3);
  font-size: var(--fs-11);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  margin: 0;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-13);
  font-weight: 500;
  font-family: var(--sans);
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  transform: none;
  box-shadow: none;
}
.btn:hover { background: var(--primary-h); border-color: var(--primary-h); transform: none; }
.btn:active { transform: none; }
.btn:disabled,
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn.ghost {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text-2);
}
.btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }

.btn.small { height: 28px; padding: 0 10px; font-size: var(--fs-12); }
.btn.full { width: 100%; height: 40px; margin-top: 0; }

/* 文字按钮（表格里常见） */
.btn.link {
  height: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--primary);
  font-size: var(--fs-12);
}
.btn.link:hover { background: none; color: var(--primary-h); text-decoration: underline; }

/* ---------- 标签 ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 5px;
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
  border: 1px solid transparent;
}
.tag.ok,
.tag.approved { background: var(--ok-wash); color: var(--ok); border-color: rgba(74,124,89,.18); }
.tag.off,
.tag.rejected { background: var(--err-wash); color: var(--err); border-color: rgba(168,58,46,.18); }
.tag.pending { background: var(--primary-bg); color: var(--primary); border-color: rgba(180,85,47,.18); }

/* ---------- 表格 ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
  background: var(--surface);
}
thead th,
th {
  padding: 0 14px;
  height: 40px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td,
td {
  padding: 11px 14px;
  height: auto;
  min-height: 48px;
  line-height: 1.5;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.code { font-family: var(--mono); font-size: var(--fs-12); color: var(--text-2); }

/* 表格里的操作列 */
td .btn + .btn,
td .btn.link + .btn.link { margin-left: var(--sp-3); }
.row-actions { display: flex; gap: var(--sp-3); align-items: center; }

/* ---------- 工具条 / 分组标题 ---------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  flex-wrap: wrap;
}
.toolbar h2 {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 600;
}
.toolbar input:not([type="checkbox"]):not([type="radio"]),
.toolbar select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-13);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { height: auto; padding: 8px 10px; line-height: 1.6; }
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(180, 85, 47, .10);
}

/* ---------- 文本 ---------- */
.muted { color: var(--text-3); }
.hint { color: var(--text-3); font-size: var(--fs-12); }
code, .code-inline {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---------- 布局 ---------- */
.grid-2 { gap: var(--sp-4); }
.grid-3 { gap: var(--sp-4); }

/* 移动端：指标卡两列，表格横向滚动 */
@media (max-width: 860px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .panel { padding: 16px; border-radius: var(--radius-sm); }
  .mini-stat { padding: 14px; }
  .mini-stat .v { font-size: 20px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .stat-row { grid-template-columns: 1fr; }
}
.panel td .muted, .panel td span.muted { display: block; margin-top: 2px; line-height: 1.4; }

/* 单元格副行：与主值拉开距离，字号降一档 */
.panel td span.muted,
.panel td .muted {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-11);
  line-height: 1.35;
  color: var(--text-3);
}

/* ===== 弹窗（app.html #modal）===== */
/* 旧样式：4px 圆角 + serif 标题 + 无内边距分层，和新版卡片完全不是一个体系。 */
.modal-mask {
  background: rgba(33, 28, 21, .42);
  backdrop-filter: blur(2px);
  z-index: 60;
}
.modal {
  width: 540px;
  max-width: calc(100vw - 32px);
  padding: 22px 24px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.modal h3 {
  font-family: var(--sans);
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 var(--sp-4);
  color: var(--text);
}
.modal h4.subhead {
  font-family: var(--sans);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-2);
  margin: var(--sp-5) 0 var(--sp-2);
}
.modal-foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  gap: var(--sp-2);
}
.modal .y-input,
.modal .y-textarea,
.modal select,
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="password"] {
  border-radius: var(--radius-sm);
  border-color: var(--border-2);
  background: var(--surface);
}

/* ===== Playground：老版独立样式，这里统一到新 token ===== */
.pgt { gap: var(--sp-4); }
.pgt-side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4);
  top: var(--sp-4);
}
.pgt-side-head { margin: -2px 0 var(--sp-3); }
.pgt-side-head > b {
  font-family: var(--sans);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.pgt-field { margin-bottom: var(--sp-4); }
.pgt-field > label {
  font-size: var(--fs-12);
  color: var(--text-2);
  margin-bottom: 6px;
}
.pgt-field > label b { color: var(--primary); font-size: var(--fs-12); }
.pgt-opt { color: var(--text-3); font-size: var(--fs-11); }
.pgt-picker {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  min-height: 36px;
  padding: 8px 10px;
}
.pgt-picker:hover { border-color: var(--primary); }
.pgt-picker:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pgt-picker-name { font-size: var(--fs-12); }
.pgt-picker-src { font-size: var(--fs-11); color: var(--text-3); }
.pgt-side textarea,
.pgt-side input[type="number"] {
  width: 100%;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-13);
  padding: 8px 10px;
  line-height: 1.6;
}
.pgt-side textarea:focus,
.pgt-side input[type="number"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.pgt-side input[type="range"] { accent-color: var(--primary); }
.pgt-hint { font-size: var(--fs-11); color: var(--text-3); line-height: 1.7; }
.pgt-fold { border-radius: var(--radius-sm); }
.pgt-fold:hover {
  color: var(--primary);
  border-color: var(--border-2);
  background: var(--surface-2);
}

.pgt-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.pgt-bar {
  min-height: 48px;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.pgt-bar-model { font-size: var(--fs-12); }
.pgt-bar-src { font-size: var(--fs-11); color: var(--text-3); }

.pgt-log { padding: var(--sp-5) var(--sp-5) var(--sp-3); gap: var(--sp-4); }
.pgt-welcome { color: var(--text-2); font-size: var(--fs-13); }
.pgt-welcome b {
  font-family: var(--sans);
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.pgt-welcome p { line-height: 1.75; }
.pgt-avatar { background: var(--primary); font-size: var(--fs-11); }
.pgt-bubble { font-size: var(--fs-13); line-height: 1.75; }
/* 流中断/截断提示：贴在回复内容下面，不打断已生成的内容 */
.pgt-warn {
  margin-top: 10px; padding: 7px 10px; border-radius: var(--radius-sm);
  background: #fdf2e6; border: 1px solid #f0dcc4; color: #9a4a18;
  font-size: var(--fs-12); line-height: 1.6; word-break: break-word;
}
.pgt-msg.user .pgt-bubble {
  background: var(--primary-bg);
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  padding: 9px 13px;
}
.pgt-reason { border-left-color: var(--border-2); color: var(--text-3); }
.pgt-content h4,
.pgt-content h5 { font-family: var(--sans); font-weight: 600; font-size: var(--fs-14); }
.pgt-content code { background: var(--surface-2); border-radius: 4px; }
.pgt-content .pg-code { border-radius: var(--radius-sm); }

.pgt-input { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--border); }
.pgt-input textarea {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-13);
  padding: 10px 12px;
}
.pgt-input textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.pgt-send { height: 40px; border-radius: var(--radius-sm); }

.pgt-mask { background: rgba(33, 28, 21, .42); backdrop-filter: blur(2px); }
.pgt-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.pgt-sheet-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); }
.pgt-sheet-head b {
  font-family: var(--sans);
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: 0;
}
.pgt-sheet-head input[type="search"] {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 7px 10px;
  font-size: var(--fs-13);
  width: 100%;
}
.pgt-sheet-body { padding: var(--sp-2) var(--sp-2) var(--sp-3); }

/* ===== 旧 .btn 的 danger 变体（上方段落未覆盖）===== */
.btn.danger {
  background: var(--surface);
  border-color: var(--err);
  color: var(--err);
}
.btn.danger:hover { background: var(--err); border-color: var(--err); color: var(--on-primary); }
.btn.danger.solid { background: var(--err); border-color: var(--err); color: var(--on-primary); }
.btn.danger.solid:hover { background: #8f2f22; border-color: #8f2f22; }

/* 温度滑块：Chrome 默认渲染过粗，压到和新控件同档 */
.pgt-side input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 12px 0 6px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--border-2);
}
.pgt-side input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 2px rgba(60, 40, 20, .28);
  cursor: pointer;
}
.pgt-side input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  cursor: pointer;
}
.pgt-side input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--border-2);
}

/* 发送按钮跟输入框等高（输入框长高时一起长） */
.pgt-input .pgt-send {
  height: auto;
  min-height: 40px;
  align-self: stretch;
}

/* ==========================================================================
   管理后台（admin.html）：.card / .stats / .tabs 这套老类名补一遍新视觉
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.card h3 {
  font-family: var(--sans);
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
  color: var(--text);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.card-head h3 { margin: 0; }
.dash-grid { gap: var(--sp-4); }

.stats {
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: none;
}
/* 顶部那条彩色装饰条是旧版的识别特征，新版统一用卡片 + 字号分层 */
.stat::before { display: none; }
.stat .k {
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.stat .v {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.25;
}
.stat .sub {
  margin-top: 6px;
  color: var(--text-3);
  font-size: var(--fs-11);
  letter-spacing: 0;
}
.bar { height: 4px; border-radius: 2px; background: var(--surface-2); }
.bar i { background: var(--primary); }

.tabs {
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
  padding: 0;
  background: var(--bg);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  font-size: var(--fs-13);
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom-color: var(--primary);
}
.tab-badge {
  min-width: 16px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 16px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
}
.tab-refresh { padding-bottom: 0; }

/* 后台里的键值行、迷你列表 */
.kv { border-color: var(--border); }
.mini-list { font-size: var(--fs-12); }
.mini-list > div { border-color: var(--border); }
.switch { border-radius: 999px; }
.qr-wrap { border-radius: var(--radius); }

/* 单元格副文本：后台表格同样适用 */
td span.muted,
td .muted {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-11);
  line-height: 1.35;
  color: var(--text-3);
}

/* 空状态行：整行居中留白，别让「暂无记录」挤在表头下第一格 */
tbody tr td[colspan].muted {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-3);
  font-size: var(--fs-13);
  background: var(--surface);
}
tbody tr:hover td[colspan].muted { background: var(--surface); }

/* 渠道表列多，收一档内边距，1440 宽下不出横向滚动 */
#sec-channels th,
#sec-channels td { padding-left: 8px; padding-right: 8px; }
#sec-channels td .btn + .btn { margin-left: 5px; }
#sec-channels td .btn.small { padding: 0 9px; }

/* 说明折叠：默认收起，只留一行「说明」 */
.hint-fold { margin: 0 0 var(--sp-3); }
.hint-fold > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: var(--fs-12);
  color: var(--text-3);
  list-style: none;
  user-select: none;
}
.hint-fold > summary::-webkit-details-marker { display: none; }
.hint-fold > summary::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  color: var(--text-3);
}
.hint-fold[open] > summary { color: var(--text-2); margin-bottom: var(--sp-2); }
.hint-fold .hint { margin: 0 0 var(--sp-2); line-height: 1.7; }

/* 后台是数据页：容器比内容页宽一档，表格少横向滚动 */
body[data-page="admin"] .wrap.wide { max-width: 1320px; }

/* 模型页的窄控件（前缀、窗口、档位）：从 3px 圆角小方框升到新控件尺寸 */
.lim-input,
select.mg-eff {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-12);
}
.lim-input { text-align: center; }
.lim-input:focus,
select.mg-eff:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.mg-pfx-sample {
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  padding: 1px 6px;
}
/* 默认档位条：去掉绿色左条，改成中性底 */
.mg-deflim {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--fs-12);
}
.mg-deflim-label { color: var(--text); font-weight: 600; }
/* 批量操作条同理 */
.mg-bulk {
  border-left: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

/* 表单网格里的控件：统一到 34px 高度 / 13px 字号。
   注意 list 里不能只写 input[type="text"] —— 没写 type 的 <input> 不匹配该属性选择器。 */
.form-grid input:not([type="checkbox"]):not([type="radio"]),
.form-grid select,
.form-grid textarea,
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal select,
.modal textarea {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-13);
}
.form-grid textarea,
.modal textarea {
  height: auto;
  padding: 8px 10px;
  line-height: 1.6;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.form-grid { gap: var(--sp-3) var(--sp-4); }
.form-grid > div > label,
.form-grid > label { display: block; margin-bottom: 6px; font-size: var(--fs-12); color: var(--text-2); }

/* ===== 后台移动端：页签收紧、指标卡两列、卡片标题不折行 ===== */
@media (max-width: 640px) {
  .tab { height: 36px; padding: 0 8px; font-size: var(--fs-12); }
  .tab-refresh { margin-left: 0; }
  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }
  .stat { padding: 14px; }
  .stat .v { font-size: 20px; }
  .card { padding: 16px; }
  .card-head { flex-wrap: wrap; gap: 2px var(--sp-2); }
  .card-head h3 { white-space: nowrap; }
  .card-head .hint { flex-basis: 100%; text-align: left; }
  .toolbar { gap: var(--sp-2); }
}

/* 兜底：面板/卡片里散落的输入控件（不在 .form-grid 内的那些）也统一尺寸 */
.panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.panel select,
.panel textarea,
.card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.card select,
.card textarea {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-13);
}
.panel textarea,
.card textarea { height: auto; padding: 8px 10px; line-height: 1.6; }
.panel input:focus,
.panel select:focus,
.panel textarea:focus,
.card input:focus,
.card select:focus,
.card textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}