/* ==================================================================
 *  主题皮肤（Theme Skins）
 * ------------------------------------------------------------------
 *  原则：这个文件**只覆盖 CSS 变量**，不写组件结构、不加 !important。
 *  所有界面颜色都由 app.css 的 --c-* 和 ui2.css 的 --u2-* 两套令牌驱动，
 *  换主题 = 换这组值，组件的排版、留白、圆角一个都不动。
 *
 *  为什么两套令牌都要给值：
 *    --c-*  给 app.css 里那些没被 ui2 覆盖的组件（表单、分页、提示条…）
 *    --u2-* 给 ui2.css 仪表盘视觉层（侧栏、顶栏、卡片、表格…）
 *    只改一套会出现「侧栏变了、输入框还是旧色」的半吊子效果。
 *
 *  加载顺序必须是最后一个（header.php / login.php 里放在 ui2.css 之后），
 *  靠 html[data-theme] 的更高优先级覆盖 :root 的默认值。
 *
 *  新增一套主题：复制一段 html[data-theme="xxx"]，把颜色换掉即可，
 *  不用碰任何组件规则。要加变量也只需在 ui2.css 的 :root 里加默认值。
 * ================================================================== */

/* ================================================================
 *  1. 晴空（默认）—— 浅蓝白，当前线上风格
 * ================================================================ */
html[data-theme="sky"] {
  color-scheme: light;

  --c-primary: #2E6BE6;
  --c-primary-d: #2559C9;
  --c-primary-50: #EDF3FE;
  --c-bg: #EEF2FA;
  --c-surface: #FFFFFF;
  --c-ink: #111827;
  --c-text: #374151;
  --c-muted: #8A94A6;
  --c-faint: #98A2B3;
  --c-line: rgba(17, 24, 39, .11);
  --c-line-2: rgba(17, 24, 39, .07);
  --c-fill: rgba(120, 128, 140, .10);
  --c-fill-2: rgba(120, 128, 140, .18);
  --c-glass: rgba(255, 255, 255, .72);
  --c-glass-2: rgba(255, 255, 255, .86);
  --c-sidebar: #FFFFFF;
  --c-sep: rgba(17, 24, 39, .10);
  --c-sep-soft: rgba(17, 24, 39, .06);
  --c-sep-strong: rgba(17, 24, 39, .16);

  --u2-bg-1: #F7F9FD;
  --u2-bg-2: #EEF2FA;
  --u2-card: #FFFFFF;
  --u2-card-rgb: 255, 255, 255;
  --u2-ink: #111827;
  --u2-ink-rgb: 17, 24, 39;
  --u2-ink-2: #374151;
  --u2-muted: #8A94A6;
  --u2-faint: #98A2B3;
  --u2-blue: #2E6BE6;
  --u2-blue-d: #2559C9;
  --u2-blue-l: #7EA7F7;
  --u2-blue-rgb: 46, 107, 230;
  --u2-blue-50: #EDF3FE;
  --u2-blue-100: #DDE8FC;
  --u2-line: rgba(17, 24, 39, .07);
  --u2-line-2: rgba(17, 24, 39, .11);
  --u2-line-3: #E3E8F1;
  --u2-hover: #F4F7FC;
  --u2-input: #F5F7FB;
  --u2-soft: #FBFCFE;
  --u2-soft-2: #F1F3F7;
  --u2-top: rgba(255, 255, 255, .78);
  --u2-glow-rgb: 93, 140, 255;
  --u2-glow2-rgb: 150, 122, 255;

  --u2-side: #FFFFFF;
  --u2-side-ink: #111827;
  --u2-side-ink-2: #6B7280;
  --u2-side-hover: #F4F7FC;
  --u2-side-line: rgba(17, 24, 39, .08);
  --u2-on-bg: #EDF3FE;
  --u2-on-ink: #2E6BE6;
  --u2-logo-filter: none;
}

/* ================================================================
 *  2. 石墨 —— 深色侧栏 + 冷白内容。最接近专业后台（飞书 / 阿里云）
 *     侧栏压暗之后，内容区的白卡片会显得更干净、层级更清楚。
 * ================================================================ */
html[data-theme="graphite"] {
  color-scheme: light;

  --c-primary: #3B6FE0;
  --c-primary-d: #2B5CC9;
  --c-primary-50: #EAF1FE;
  --c-bg: #F4F6FA;
  --c-surface: #FFFFFF;
  --c-ink: #131820;
  --c-text: #3A4351;
  --c-muted: #7E8899;
  --c-faint: #98A2B3;
  --c-line: rgba(19, 24, 32, .11);
  --c-line-2: rgba(19, 24, 32, .07);
  --c-fill: rgba(120, 128, 140, .10);
  --c-fill-2: rgba(120, 128, 140, .18);
  --c-glass: rgba(255, 255, 255, .72);
  --c-glass-2: rgba(255, 255, 255, .86);
  --c-sidebar: #1C2330;
  --c-sep: rgba(19, 24, 32, .10);
  --c-sep-soft: rgba(19, 24, 32, .06);
  --c-sep-strong: rgba(19, 24, 32, .16);

  --u2-bg-1: #F7F9FC;
  --u2-bg-2: #F4F6FA;
  --u2-card: #FFFFFF;
  --u2-card-rgb: 255, 255, 255;
  --u2-ink: #131820;
  --u2-ink-rgb: 19, 24, 32;
  --u2-ink-2: #3A4351;
  --u2-muted: #7E8899;
  --u2-faint: #98A2B3;
  --u2-blue: #3B6FE0;
  --u2-blue-d: #2B5CC9;
  --u2-blue-l: #7FA5F0;
  --u2-blue-rgb: 59, 111, 224;
  --u2-blue-50: #EAF1FE;
  --u2-blue-100: #D8E5FD;
  --u2-line: rgba(19, 24, 32, .07);
  --u2-line-2: rgba(19, 24, 32, .11);
  --u2-line-3: #E1E6EF;
  --u2-hover: #F2F5FA;
  --u2-input: #F3F6FA;
  --u2-soft: #FAFBFD;
  --u2-soft-2: #EEF1F6;
  --u2-top: rgba(255, 255, 255, .86);
  --u2-glow-rgb: 100, 130, 200;
  --u2-glow2-rgb: 130, 140, 210;

  --u2-side: #1C2330;
  --u2-side-ink: #D7DEEA;
  --u2-side-ink-2: #93A0B5;
  --u2-side-hover: rgba(255, 255, 255, .07);
  --u2-side-line: rgba(255, 255, 255, .08);
  --u2-on-bg: rgba(76, 141, 255, .18);
  --u2-on-ink: #8FB6FF;
  --u2-logo-filter: none;
}

/* ================================================================
 *  3. 墨绿 —— 深绿侧栏 + 象牙白内容。
 *     制造业喜欢这个调子：稳、不刺眼，打印出来的单据也是同一套气质。
 * ================================================================ */
html[data-theme="forest"] {
  color-scheme: light;

  --c-primary: #16794F;
  --c-primary-d: #0F5F3D;
  --c-primary-50: #E7F4EC;
  --c-bg: #F1F5F2;
  --c-surface: #FFFFFF;
  --c-ink: #16211C;
  --c-text: #33463C;
  --c-muted: #798C82;
  --c-faint: #98AAA0;
  --c-line: rgba(22, 33, 28, .11);
  --c-line-2: rgba(22, 33, 28, .07);
  --c-fill: rgba(110, 130, 118, .10);
  --c-fill-2: rgba(110, 130, 118, .18);
  --c-glass: rgba(255, 255, 255, .72);
  --c-glass-2: rgba(255, 255, 255, .86);
  --c-sidebar: #12352B;
  --c-sep: rgba(22, 33, 28, .10);
  --c-sep-soft: rgba(22, 33, 28, .06);
  --c-sep-strong: rgba(22, 33, 28, .16);

  --u2-bg-1: #F5F8F5;
  --u2-bg-2: #EFF4F0;
  --u2-card: #FFFFFF;
  --u2-card-rgb: 255, 255, 255;
  --u2-ink: #16211C;
  --u2-ink-rgb: 22, 33, 28;
  --u2-ink-2: #33463C;
  --u2-muted: #798C82;
  --u2-faint: #98AAA0;
  --u2-blue: #16794F;
  --u2-blue-d: #0F5F3D;
  --u2-blue-l: #5DB98C;
  --u2-blue-rgb: 22, 121, 79;
  --u2-blue-50: #E7F4EC;
  --u2-blue-100: #CFEADB;
  --u2-line: rgba(22, 33, 28, .07);
  --u2-line-2: rgba(22, 33, 28, .11);
  --u2-line-3: #DDE7E1;
  --u2-hover: #EFF5F1;
  --u2-input: #EFF4F0;
  --u2-soft: #FAFCFA;
  --u2-soft-2: #E8EFEA;
  --u2-top: rgba(255, 255, 255, .82);
  --u2-glow-rgb: 90, 160, 125;
  --u2-glow2-rgb: 120, 170, 140;

  --u2-side: #12352B;
  --u2-side-ink: #D8E6DF;
  --u2-side-ink-2: #8FAC9F;
  --u2-side-hover: rgba(255, 255, 255, .07);
  --u2-side-line: rgba(255, 255, 255, .09);
  --u2-on-bg: rgba(93, 185, 140, .20);
  --u2-on-ink: #7FD9A8;
  --u2-logo-filter: none;
}

/* ================================================================
 *  4. 暖砂 —— 全暖米色 + 棕金主色。
 *     低对比、偏暖，长时间盯屏幕或车间强光反光时最舒服。
 * ================================================================ */
html[data-theme="sand"] {
  color-scheme: light;

  --c-primary: #A2723C;
  --c-primary-d: #875C2C;
  --c-primary-50: #F7EEE1;
  --c-bg: #F4EEE2;
  --c-surface: #FFFDF9;
  --c-ink: #3B342C;
  --c-text: #5C5145;
  --c-muted: #9A8C79;
  --c-faint: #B5A894;
  --c-line: rgba(59, 52, 44, .12);
  --c-line-2: rgba(59, 52, 44, .08);
  --c-fill: rgba(140, 120, 95, .10);
  --c-fill-2: rgba(140, 120, 95, .18);
  --c-glass: rgba(255, 252, 245, .74);
  --c-glass-2: rgba(255, 252, 245, .88);
  --c-sidebar: #FBF7EF;
  --c-sep: rgba(59, 52, 44, .11);
  --c-sep-soft: rgba(59, 52, 44, .07);
  --c-sep-strong: rgba(59, 52, 44, .17);

  --u2-bg-1: #F9F5ED;
  --u2-bg-2: #F4EEE2;
  --u2-card: #FFFDF9;
  --u2-card-rgb: 255, 253, 249;
  --u2-ink: #3B342C;
  --u2-ink-rgb: 59, 52, 44;
  --u2-ink-2: #5C5145;
  --u2-muted: #9A8C79;
  --u2-faint: #B5A894;
  --u2-blue: #A2723C;
  --u2-blue-d: #875C2C;
  --u2-blue-l: #C9A272;
  --u2-blue-rgb: 162, 114, 60;
  --u2-blue-50: #F7EEE1;
  --u2-blue-100: #EFE0CC;
  --u2-line: rgba(59, 52, 44, .08);
  --u2-line-2: rgba(59, 52, 44, .12);
  --u2-line-3: #E8DFD0;
  --u2-hover: #F3EDE2;
  --u2-input: #F5EFE5;
  --u2-soft: #FDFAF4;
  --u2-soft-2: #EFE8DC;
  --u2-top: rgba(255, 252, 245, .86);
  --u2-glow-rgb: 200, 170, 120;
  --u2-glow2-rgb: 210, 150, 110;

  --u2-side: #FBF7EF;
  --u2-side-ink: #3B342C;
  --u2-side-ink-2: #7A6E5E;
  --u2-side-hover: #F3EDE2;
  --u2-side-line: rgba(59, 52, 44, .09);
  --u2-on-bg: #F7EEE1;
  --u2-on-ink: #875C2C;
  --u2-logo-filter: none;
}

/* ================================================================
 *  5. 暗夜 —— 全暗色，给夜班 / 车间大屏 / 长时间盯屏用
 *     除了变量，还要压掉少量「语义浅底」（徽章、提示条），
 *     那些浅色底在暗背景上会像贴纸一样跳出来。
 * ================================================================ */
html[data-theme="midnight"] {
  color-scheme: dark;

  --c-primary: #4C8DFF;
  --c-primary-d: #3B78E6;
  --c-primary-50: #17263F;
  --c-bg: #0B0E13;
  --c-surface: #161B23;
  --c-ink: #E8ECF3;
  --c-text: #AEB8C8;
  --c-muted: #7C8798;
  --c-faint: #5E6A7C;
  --c-line: rgba(255, 255, 255, .12);
  --c-line-2: rgba(255, 255, 255, .08);
  --c-fill: rgba(255, 255, 255, .07);
  --c-fill-2: rgba(255, 255, 255, .13);
  --c-glass: rgba(22, 27, 35, .74);
  --c-glass-2: rgba(14, 18, 24, .88);
  --c-sidebar: #0C1016;
  --c-sep: rgba(255, 255, 255, .10);
  --c-sep-soft: rgba(255, 255, 255, .06);
  --c-sep-strong: rgba(255, 255, 255, .16);

  --u2-bg-1: #0F131A;
  --u2-bg-2: #0B0E13;
  --u2-card: #161B23;
  --u2-card-rgb: 22, 27, 35;
  --u2-ink: #E8ECF3;
  --u2-ink-rgb: 232, 236, 243;
  --u2-ink-2: #AEB8C8;
  --u2-muted: #7C8798;
  --u2-faint: #5E6A7C;
  --u2-blue: #4C8DFF;
  --u2-blue-d: #3B78E6;
  --u2-blue-l: #6EA4FF;
  --u2-blue-rgb: 76, 141, 255;
  --u2-blue-50: #17263F;
  --u2-blue-100: #1E3352;
  --u2-line: rgba(255, 255, 255, .08);
  --u2-line-2: rgba(255, 255, 255, .12);
  --u2-line-3: #262E3B;
  --u2-hover: rgba(255, 255, 255, .05);
  --u2-input: #1B212B;
  --u2-soft: #1A2029;
  --u2-soft-2: #212934;
  --u2-top: rgba(16, 20, 27, .84);
  --u2-glow-rgb: 76, 141, 255;
  --u2-glow2-rgb: 118, 100, 240;

  --u2-side: #0C1016;
  --u2-side-ink: #DCE3EE;
  --u2-side-ink-2: #8B96A8;
  --u2-side-hover: rgba(255, 255, 255, .06);
  --u2-side-line: rgba(255, 255, 255, .07);
  --u2-on-bg: rgba(76, 141, 255, .20);
  --u2-on-ink: #86B4FF;

  /* LOGO 不在这里处理：深色侧栏主题（含本套）在 header.php 里直接换成
     assets/img/logo_white.png（白字 + 红三角、透明底），
     比给白底图套圆角/反色都干净，也不用改商标颜色。 */
  --u2-logo-filter: none;
}

/* --- 暗夜下的语义浅底：换成低透明度彩底 + 亮文字 --- */
html[data-theme="midnight"] .badge.green,
html[data-theme="midnight"] .pb-tag.pb-green {
  background: rgba(52, 199, 89, .16);
  color: #5CD97F;
}
html[data-theme="midnight"] .badge.red,
html[data-theme="midnight"] .pb-tag.pb-red {
  background: rgba(255, 69, 58, .16);
  color: #FF8079;
}
html[data-theme="midnight"] .badge.orange,
html[data-theme="midnight"] .pb-tag.pb-orange {
  background: rgba(255, 159, 10, .16);
  color: #FFB454;
}
html[data-theme="midnight"] .badge.gray {
  background: rgba(255, 255, 255, .08);
  color: #AEB8C8;
}
html[data-theme="midnight"] .alert.ok {
  background: rgba(52, 199, 89, .12);
  border-color: rgba(52, 199, 89, .28);
  color: #6FE08F;
}
html[data-theme="midnight"] .alert.err {
  background: rgba(255, 69, 58, .12);
  border-color: rgba(255, 69, 58, .28);
  color: #FF8A83;
}
html[data-theme="midnight"] .alert.warn {
  background: rgba(255, 159, 10, .12);
  border-color: rgba(255, 159, 10, .28);
  color: #FFBE6B;
}
/* 表格斑马纹 / 悬停在暗色下要用「加白」而不是「加深」 */
html[data-theme="midnight"] table.grid tbody tr:hover,
html[data-theme="midnight"] table.grid tbody tr:hover > td {
  background: rgba(255, 255, 255, .045);
}
html[data-theme="midnight"] table.grid thead th {
  background: #1A212B;
}
/* 输入框：暗色下浏览器默认白底会刺眼，统一压到卡片色 */
html[data-theme="midnight"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="midnight"] select,
html[data-theme="midnight"] textarea {
  background: #1B212B;
  color: #E8ECF3;
  border-color: rgba(255, 255, 255, .12);
}
html[data-theme="midnight"] input::placeholder,
html[data-theme="midnight"] textarea::placeholder {
  color: #5E6A7C;
}
/* 原生日期选择器的小图标在暗色下默认是黑的，看不见 */
html[data-theme="midnight"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.65);
}
/* 浅底的语义按钮 / 标签（作废、逾期天数、KPI 图标底）：统一换成低透明彩底。
   不换的话它们在暗色页面上是一小块一小块的白色贴纸，比正文还抢眼。 */
html[data-theme="midnight"] .btn.danger-soft {
  background: rgba(255, 69, 58, .13);
  border-color: rgba(255, 69, 58, .26);
  color: #FF8A83;
}
html[data-theme="midnight"] .btn.danger-soft:hover {
  background: rgba(255, 69, 58, .22);
  border-color: rgba(255, 69, 58, .38);
}
html[data-theme="midnight"] .od-0,
html[data-theme="midnight"] .od-1 { background: rgba(255, 159, 10, .14); color: #FFC16B; }
html[data-theme="midnight"] .od-2,
html[data-theme="midnight"] .od-3 { background: rgba(255, 120, 40, .16); color: #FFA06B; }
html[data-theme="midnight"] .od-4 { background: rgba(255, 69, 58, .20); color: #FF8A83; }
html[data-theme="midnight"] .kpi-ico.o { background: rgba(255, 159, 10, .16); color: #FFB454; }
html[data-theme="midnight"] .kpi-ico.v { background: rgba(140, 110, 240, .18); color: #B79BFF; }
html[data-theme="midnight"] .imp-tag.ok { background: rgba(52, 199, 89, .14); color: #6FE08F; }
html[data-theme="midnight"] .imp-tag.warn { background: rgba(255, 159, 10, .14); color: #FFBE6B; }
html[data-theme="midnight"] .imp-tag.bad { background: rgba(255, 69, 58, .14); color: #FF8A83; }
html[data-theme="midnight"] .imp-tag.skip { background: rgba(255, 255, 255, .07); color: #AEB8C8; }
/* 输入框边框在暗色下要比浅色主题更亮一点，否则框和底分不清 */
html[data-theme="midnight"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="midnight"] select,
html[data-theme="midnight"] textarea {
  border-color: rgba(255, 255, 255, .16);
}
/* 打印时强制回到浅色：打出来是白纸，不能按暗色调色 */
@media print {
  html[data-theme="midnight"] body { background: #fff; }
}

/* ================================================================
 *  顶栏「界面风格」切换器
 * ------------------------------------------------------------------
 *  本文件唯一带组件样式的一段（前面全是变量）。放在这里是因为它只服务于
 *  主题切换；要整体回退主题功能，删掉这段 + themes.css 的引入即可，
 *  其它样式文件一行都不用动。
 *
 *  交互不依赖 JS：hover / focus-within 展开，每个色块是一个提交按钮。
 * ================================================================ */
.theme-switch { position: relative; display: inline-flex; }

.theme-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--u2-line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--u2-ink-2);
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.theme-btn:hover,
.theme-switch:focus-within .theme-btn {
  background: var(--u2-hover);
  color: var(--u2-ink);
}

.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 252px;
  padding: 8px;
  background: var(--u2-card);
  border: 1px solid var(--u2-line-2);
  border-radius: 14px;
  box-shadow: var(--u2-sh-h);
  display: none;
  z-index: 60;
}
.theme-switch:hover .theme-menu,
.theme-switch:focus-within .theme-menu { display: block; }
/* 鼠标移出按钮和面板之间的 8px 缝隙会闪一下，用伪元素把这块补上 */
.theme-switch::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0; height: 10px;
}

.theme-menu-h {
  font-size: 12px;
  color: var(--u2-muted);
  padding: 6px 8px 8px;
  letter-spacing: .04em;
}

.theme-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--u2-ink-2);
  transition: background .14s, color .14s;
}
.theme-item:hover { background: var(--u2-hover); color: var(--u2-ink); }
.theme-item.on { background: var(--u2-blue-50); color: var(--u2-on-ink); }

.theme-swatch {
  width: 16px; height: 16px;
  border-radius: 5px;
  border: 2px solid var(--u2-card);
  box-shadow: 0 0 0 1px var(--u2-line-2);
  flex: none;
}
.theme-nm { font-size: 13px; font-weight: 500; }
.theme-ds {
  font-size: 11.5px;
  color: var(--u2-muted);
  margin-left: auto;
  font-style: normal;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .theme-menu { width: 224px; }
  .theme-ds { display: none; }
}

/* ---------- 「我的账号」里的风格选择卡 ---------- */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.theme-card-f { margin: 0; }
.theme-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--u2-line-2);
  border-radius: 12px;
  background: var(--u2-card);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font: inherit;
  transition: border-color .16s, box-shadow .16s;
}
.theme-card:hover {
  border-color: var(--u2-blue);
  box-shadow: 0 2px 12px rgba(var(--u2-blue-rgb), .12);
}
.theme-card.on {
  border-color: var(--u2-blue);
  box-shadow: 0 0 0 2px rgba(var(--u2-blue-rgb), .16);
}
/* 缩略图：左侧一条侧栏色，右边主色标题条 + 两条浅内容条 */
.tc-prev { display: flex; height: 64px; padding: 8px; gap: 6px; }
.tc-side { width: 26%; border-radius: 5px; }
.tc-main { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 7px 4px; }
.tc-main b { display: block; height: 8px; width: 54%; border-radius: 3px; }
.tc-main i { display: block; height: 5px; border-radius: 3px; opacity: .32; }
.tc-main i:first-of-type { width: 100%; }
.tc-main i:last-of-type { width: 76%; }
.tc-txt {
  display: block;
  padding: 9px 11px 11px;
  border-top: 1px solid var(--u2-line);
}
.tc-nm { display: block; font-size: 13.5px; font-weight: 600; color: var(--u2-ink); }
.tc-nm em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--u2-on-ink);
  background: var(--u2-blue-50);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}
.tc-ds { display: block; font-size: 12px; color: var(--u2-muted); margin-top: 2px; }

/* ---------- 界面风格对比页：一屏并排看 5 套真实界面 ---------- */
.tp-list { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.tp-card {
  border: 1px solid var(--u2-line-2);
  border-radius: 14px;
  background: var(--u2-card);
  overflow: hidden;
}
.tp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--u2-line);
}
.tp-swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--u2-line-2);
  flex: none;
}
.tp-nm { font-size: 14px; font-weight: 600; color: var(--u2-ink); }
.tp-ds { font-size: 12.5px; color: var(--u2-muted); }
.tp-cur {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--u2-blue-50);
  color: var(--u2-on-ink);
  margin-left: auto;
}
.tp-def {
  font-size: 11.5px;
  color: var(--u2-muted);
  border: 1px dashed var(--u2-line-3);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  white-space: nowrap;
}
.tp-frame { height: 520px; background: var(--u2-bg-2); }
.tp-frame iframe { width: 100%; height: 520px; border: 0; display: block; }

@media (max-width: 820px) {
  .tp-frame, .tp-frame iframe { height: 420px; }
  .tp-ds { display: none; }
}