/* KoozhenStudio 创作工坊 - 全局样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* KoozhenStudio Aurora B2B shared foundation tokens (E3) */
  --ng-bg:#080D18; --ng-surface-1:#101827; --ng-surface-2:#162238;
  --ng-border:rgba(148,163,184,.16); --ng-border-strong:rgba(148,163,184,.28);
  --ng-text-1:#F1F5F9; --ng-text-2:#A8B3C7; --ng-text-3:#718096;
  --ng-primary:#7C6CF2; --ng-primary-hover:#8B7CF6; --ng-aurora-cyan:#33C6D4;
  --ng-success:#3CCB9A; --ng-warning:#F2B84B; --ng-danger:#F06A78; --ng-info:#5FA8FF;
  --bg: #0f0f1a;
  --surface: #1a1a2e;
  --surface2: #252545;
  --accent: #6c63ff;
  --accent-rgb: 108,99,255;
  --accent-hover: #5a52e0;
  --success: #4ecdc4;
  --warning: #ffe66d;
  --danger: #ff6b6b;
  --text: #eaeaea;
  --text-dim: #8888aa;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ============ 界面风格主题（可在制作界面顶栏切换，localStorage 记住） ============ */
/* 默认（无 data-theme）= Aurora 极光紫，即上方 :root */

/* Midnight 午夜蓝 —— 冷静深邃 */
html[data-theme="midnight"] {
  --bg: #0a0f1e;
  --surface: #121a30;
  --surface2: #1c2947;
  --accent: #3b82f6;
  --accent-rgb: 59,130,246;
  --accent-hover: #2f6bd6;
  --success: #38d9c4;
  --warning: #fbbf24;
  --danger: #f87171;
  --text: #e6edf7;
  --text-dim: #8095b3;
}

/* Forest 森语绿 —— 沉静自然 */
html[data-theme="forest"] {
  --bg: #0c1512;
  --surface: #13211c;
  --surface2: #1d3128;
  --accent: #34d399;
  --accent-rgb: 52,211,153;
  --accent-hover: #26b485;
  --success: #6ee7b7;
  --warning: #fcd34d;
  --danger: #fb7185;
  --text: #e7f2ec;
  --text-dim: #7fa494;
}

/* Sunset 落日橘 —— 温暖明快 */
html[data-theme="sunset"] {
  --bg: #180f14;
  --surface: #26181f;
  --surface2: #38222c;
  --accent: #fb7185;
  --accent-rgb: 251,113,133;
  --accent-hover: #e85a70;
  --success: #fbbf24;
  --warning: #fcd34d;
  --danger: #ef4444;
  --text: #f6e9ec;
  --text-dim: #b78a95;
}

/* Slate 石墨灰 —— 极简中性 */
html[data-theme="slate"] {
  --bg: #101216;
  --surface: #1a1d24;
  --surface2: #262a34;
  --accent: #94a3b8;
  --accent-rgb: 148,163,184;
  --accent-hover: #7c8ba0;
  --success: #5eead4;
  --warning: #fde68a;
  --danger: #fca5a5;
  --text: #e8eaef;
  --text-dim: #8a91a0;
}

/* Rose 樱绯粉 —— 柔和浪漫 */
html[data-theme="rose"] {
  --bg: #170f16;
  --surface: #241823;
  --surface2: #362235;
  --accent: #ec4899;
  --accent-rgb: 236,72,153;
  --accent-hover: #d43a86;
  --success: #f0abfc;
  --warning: #fda4af;
  --danger: #fb7185;
  --text: #f6e9f2;
  --text-dim: #b487a8;
}

/* 主题过渡：切换时柔和渐变，而非生硬跳变 */
body, .studio-topbar, .chat-panel, .composer, .msg-bubble,
.preview-panel, .cost-pill {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

body {
  font-family: var(--koozhen-font);
  background: var(--bg);
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(var(--accent-rgb),0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--accent-rgb),0.04) 0%, transparent 50%),
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

/* === 顶栏 === */
.topbar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  -webkit-app-region: drag;
  position: relative;
  z-index: 10;
}
.topbar-left { flex-shrink: 0; }
.logo {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--success));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.topbar-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 4px;
  -webkit-app-region: no-drag;
}
.nav-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.nav-btn:hover { color: var(--text); background: var(--surface2); }
.nav-btn.active { color: #fff; background: var(--accent); box-shadow: 0 2px 12px rgba(108,99,255,0.3); }
.topbar-right {
  display: flex; gap: 8px; align-items: center;
  -webkit-app-region: no-drag;
}
.btn-new-game {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-new-game:hover { background: var(--accent-hover); }
.btn-icon {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--text);
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  cursor: pointer;
}
.btn-icon:hover { border-color: rgba(255,255,255,0.4); }

/* === 主内容 === */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
}
.main-content:has(#page-publish.active) {
  padding: 0;
  overflow: hidden;
}
.page { display: none; height: 100%; }
.page.active { display: block; }
#page-publish.active { display: flex; flex-direction: column; }
.section-header {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 20px;
}
.section-header h2 { font-size: 20px; font-weight: 600; }
.section-hint { font-size: 13px; color: var(--text-dim); }

/* === 游戏卡片网格 === */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
/* 横滑模式（发现区） */
.game-scroll-wrap {
  position: relative;
}
.game-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 16px;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.game-scroll::-webkit-scrollbar { display: none; }
.game-scroll .game-card {
  flex: 0 0 140px;
  min-width: 140px;
  opacity: 0.88;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.game-scroll .game-card:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(108,99,255,0.18);
}
.game-scroll .game-card .game-card-thumb {
  aspect-ratio: 16/10;
  font-size: 32px;
}
.game-scroll .game-card .game-card-info {
  padding: 6px 8px;
}
.game-scroll .game-card .game-card-title {
  font-size: 12px;
}
.game-scroll .game-card .game-card-meta {
  font-size: 10px;
}
.scroll-fade-right {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
  z-index: 2;
}
/* 分类标签 */
.section-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: #fff; background: var(--accent); }
.tab-dot { color: var(--text-dim); opacity: 0.3; font-size: 10px; }
.game-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
}
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(108,99,255,0.2);
  border-color: var(--accent);
}
/* 底部渐变光条 */
.game-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--success), var(--warning));
  opacity: 0;
  transition: opacity 0.3s;
}
.game-card:hover::after { opacity: 1; }
/* hover试玩overlay */
.game-card-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
  overflow: hidden;
}
.game-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.game-card:hover .game-card-thumb img {
  transform: scale(1.05);
}
.game-card-thumb::before {
  content: '▶ 试玩';
  position: absolute;
  inset: 0;
  background: rgba(108,99,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  opacity: 0;
  transition: opacity 0.25s;
  border-radius: 0;
}
.game-card:hover .game-card-thumb::before { opacity: 1; }
.game-card-info { padding: 12px; }
.game-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-card-meta {
  font-size: 12px;
  color: var(--text-dim);
}
.game-card-status {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 6px;
}
.status-done { background: rgba(78,205,196,0.15); color: var(--success); }
.status-wip { background: rgba(255,230,109,0.15); color: var(--warning); }

/* 新建卡片 */
.game-card-new {
  border: 2px dashed rgba(255,255,255,0.1);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 8px;
}
.game-card-new:hover { border-color: var(--accent); }
.game-card-new .plus { font-size: 36px; color: var(--text-dim); }
.game-card-new span { font-size: 13px; color: var(--text-dim); }

/* === 弹窗 === */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.modal-header h3 { font-size: 16px; }
.modal-close {
  background: none; border: none;
  color: var(--text-dim); font-size: 18px;
  cursor: pointer;
}
.modal-body { padding: 20px; }
.setting-group { margin-bottom: 16px; }
.setting-group label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.setting-group input,
.setting-group select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
}
.setting-group input:focus,
.setting-group select:focus {
  outline: none;
  border-color: var(--accent);
}
.btn-save {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.btn-save:hover { background: var(--accent-hover); }

/* === 滚动条 === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* 分类标签筛选 */
.filter-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-tag {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
}
.filter-tag:hover {
  background: rgba(108,99,255,0.1);
  border-color: rgba(108,99,255,0.3);
  color: var(--text);
}
.filter-tag.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(108,99,255,0.3);
}

/* 卡片信息增强 */
.game-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.game-card-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(108,99,255,0.15);
  color: var(--accent);
}
.game-card-plays {
  font-size: 11px;
  color: var(--text-dim);
}



/* ===== 发现页 Aurora Nebula ===== */
html, body {
  background: var(--bg) !important;
}

#page-home {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--bg);
}
#page-home.active { display: block; }

canvas#nebulaCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/* === 中心 hero === */
.hero-section {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  padding: 0 24px;
}

.hero-slogan {
  font-family: var(--koozhen-font);
  font-weight: 900;
  font-size: clamp(56px, 9vw, 128px);
  line-height: .92;
  letter-spacing: -.04em;
  background: linear-gradient(92deg, #ffffff 0%, #e0e8ff 35%, #6cb4ff 60%, #00d4ff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(60,140,255,.15);
  margin-bottom: 14px;
}

.hero-sub {
  font-size: 17px;
  font-weight: 500;
  color: rgba(255,255,255,.62);
  letter-spacing: .01em;
  max-width: 560px;
  margin-bottom: 36px;
}

.hero-input-wrap {
  pointer-events: auto;
  position: relative;
  width: min(620px, 86vw);
}
.hero-input-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: linear-gradient(120deg, #1a6fff, #00b8d4, #4d8eff, #1a6fff);
  background-size: 300% 300%;
  filter: blur(8px);
  opacity: .55;
  z-index: -1;
  animation: aurora-edge 8s ease-in-out infinite;
}
@keyframes aurora-edge {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-input {
  width: 100%;
  height: 60px;
  padding: 0 120px 0 24px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,10,20,.78);
  backdrop-filter: blur(18px) saturate(140%);
  color: #fff;
  font-size: 17px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: .005em;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -20px rgba(30,100,255,.25);
}
.hero-input::placeholder {
  color: rgba(255,255,255,.38);
}

.hero-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #1a6fff 0%, #00b8d4 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(26,111,255,.5), inset 0 1px 0 rgba(255,255,255,.2);
  font-family: inherit;
}
.hero-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

/* 右下角图例 */
.nebula-legend {
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 4;
  font-size: 11px;
  color: rgba(160,232,255,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nebula-legend .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.nebula-legend .dot.v { background: #4d8eff; }
.nebula-legend .dot.m { background: #00d4ff; }
.nebula-legend .dot.c { background: #a0e8ff; }


/* ========== 发现页 - 星云主题(from demo) ========== */
/* === 科技感底层：深空黑 + 冷蓝辉光 === */
.aurora{
  position:fixed;inset:-20%;z-index:0;
  background:
    radial-gradient(60% 50% at 22% 30%, rgba(30,80,180,.25), transparent 60%),
    radial-gradient(55% 45% at 78% 70%, rgba(0,180,220,.18), transparent 62%),
    radial-gradient(45% 40% at 60% 20%, rgba(100,140,255,.12), transparent 65%),
    conic-gradient(from 210deg at 50% 50%, #0a0a14, #0d1225 22%, #0a1020 44%, #080810 70%, #0a0c18 100%);
  filter:blur(80px) saturate(90%);
  animation:aurora-rot 120s linear infinite;
}
@keyframes aurora-rot{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* 噪点纸面，去塑料感 */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.18;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
}

canvas{position:fixed;inset:0;z-index:2}

/* === 中心 hero === */
.hero{
  position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;text-align:center;padding:0 24px;
}
.eyebrow{
  font-size:13px;letter-spacing:.32em;font-weight:700;color:rgba(255,255,255,.55);
  text-transform:uppercase;margin-bottom:24px;
}
.eyebrow::before,.eyebrow::after{content:'';display:inline-block;width:32px;height:1px;background:rgba(255,255,255,.4);vertical-align:middle;margin:0 14px}
h1.display{
  font-family:var(--koozhen-font);font-weight:900;font-size:clamp(56px,9vw,128px);
  line-height:.92;letter-spacing:-.04em;
  background:linear-gradient(92deg,#ffffff 0%,#e0e8ff 35%,#6cb4ff 60%,#00d4ff 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(60,140,255,.15);
  margin-bottom:14px;
}
h1.display .accent{
  background:linear-gradient(92deg,#00d4ff,#4d8eff,#00f0ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;font-weight:800;
}
.sub{
  font-size:17px;font-weight:500;color:rgba(255,255,255,.62);letter-spacing:.01em;max-width:560px;margin-bottom:36px;
}
.input-wrap{
  pointer-events:auto;position:relative;width:min(620px,86vw);
}
.input-wrap::before{
  content:'';position:absolute;inset:-2px;border-radius:16px;
  background:linear-gradient(120deg,#1a6fff,#00b8d4,#4d8eff,#1a6fff);
  background-size:300% 300%;
  filter:blur(8px);opacity:.55;z-index:-1;
  animation:aurora-edge 8s ease-in-out infinite;
}
@keyframes aurora-edge{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.input-wrap input,.input-wrap textarea{
  width:100%;min-height:60px;max-height:240px;padding:18px 120px 18px 24px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(8,10,20,.78);backdrop-filter:blur(18px) saturate(140%);
  color:#fff;font-size:17px;font-family:inherit;font-weight:500;letter-spacing:.005em;outline:none;line-height:1.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px -20px rgba(30,100,255,.25);
}
.input-wrap textarea{
  resize:none;overflow-y:auto;white-space:pre-wrap;word-break:break-word;display:block;box-sizing:border-box;
}
.input-wrap textarea::-webkit-scrollbar{width:6px}
.input-wrap textarea::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
.input-wrap input::placeholder,.input-wrap textarea::placeholder{color:rgba(255,255,255,.38)}
.cta{
  position:absolute;right:8px;top:8px;height:44px;padding:0 20px;border:0;border-radius:10px;
  background:linear-gradient(135deg,#1a6fff 0%,#00b8d4 100%);
  color:#fff;font-weight:700;font-size:14px;letter-spacing:.04em;cursor:pointer;
  box-shadow:0 8px 24px -6px rgba(26,111,255,.5),inset 0 1px 0 rgba(255,255,255,.2);
  font-family:inherit;
}
.cta:hover{transform:translateY(-1px);filter:brightness(1.12)}

/* 左下角 anchor 标识，符合 SKILL 的"声明方向"纪律 */
.stamp{
  position:fixed;left:24px;bottom:20px;z-index:4;
  font-size:11px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.42);
  font-feature-settings:"tnum";
}
.stamp b{color:#00d4ff;font-weight:800}
.legend{
  position:fixed;right:24px;bottom:20px;z-index:4;
  font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.5);
}
.legend span{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;box-shadow:0 0 10px currentColor}
.legend .v{background:#4d8eff;color:#4d8eff}
.legend .m{background:#00d4ff;color:#00d4ff;margin-left:14px}
.legend .c{background:#a0e8ff;color:#a0e8ff;margin-left:14px}


/* ===== 设置面板：标签页 + 模型卡片 ===== */
.modal-settings { width: 460px; }
.settings-tabs { display: flex; gap: 4px; padding: 12px 20px 0; }
#settingsModal .settings-tabs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 24px 16px 18px;
}
.settings-tab {
  flex: 1; padding: 9px 0; background: transparent; border: none;
  color: var(--text-dim); font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: all .18s;
  border-bottom: 2px solid transparent;
}
#settingsModal .settings-tab {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(108,99,255,.08); }
.settings-pane { display: none; }
.settings-pane.active { display: block; animation: paneFade .22s ease; }
@keyframes paneFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.model-card {
  border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
  padding: 14px; margin-bottom: 12px; background: rgba(255,255,255,.025);
  transition: border-color .18s, background .18s;
}
.model-card:hover { border-color: rgba(108,99,255,.35); }
.model-card-primary { border-color: rgba(108,99,255,.40); background: rgba(108,99,255,.07); }
.model-card-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px; }
.model-card-icon { font-size: 22px; line-height: 1.1; flex-shrink: 0; }
.model-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
.model-card-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.model-card-status { font-weight: 400; font-size: 12px; margin-left: 4px; }
.model-card input { margin-bottom: 8px; }
.model-card input:last-child { margin-bottom: 0; }
.model-card-disabled { opacity: .55; }
.model-card-disabled .model-card-head { margin-bottom: 0; }
.model-card-badge {
  font-size: 11px; font-weight: 600; color: var(--warning);
  background: rgba(255,230,109,.12); padding: 1px 8px; border-radius: 10px; margin-left: 4px;
}

/* E6: 首页叙事与实机证据样例（仅说明，不改变业务事件） */
.hero{justify-content:flex-start;padding-top:clamp(92px,12vh,132px);overflow-y:auto;padding-bottom:42px;}
.hero .sub{max-width:720px;line-height:1.65;}
.journey-steps{display:flex;list-style:none;margin:22px 0 18px;gap:0;pointer-events:auto;}
.journey-steps li{position:relative;min-width:112px;padding:11px 16px;border:1px solid var(--ng-border);border-right:0;background:rgba(16,24,39,.72);color:var(--ng-text-2);font-size:12px;}
.journey-steps li:first-child{border-radius:10px 0 0 10px}.journey-steps li:last-child{border-right:1px solid var(--ng-border);border-radius:0 10px 10px 0}
.journey-steps span{display:block;color:var(--ng-accent);font-size:10px;letter-spacing:.12em;margin-bottom:3px;}
.evidence-samples{width:min(760px,calc(100vw - 48px));pointer-events:auto;text-align:left;margin-top:4px;}
.samples-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}.samples-head h2{font-size:14px;color:var(--ng-text-1)}.samples-head span{font-size:11px;color:var(--ng-text-3)}
.sample-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.sample-card{min-width:0;padding:13px;border:1px solid var(--ng-border);border-radius:12px;background:rgba(16,24,39,.8);backdrop-filter:blur(12px)}
.sample-card h3{font-size:14px;color:var(--ng-text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sample-card p{margin:5px 0 12px;font-size:11px;color:var(--ng-text-3)}.sample-meta{display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--ng-text-3)}.sample-meta strong{color:var(--ng-success);font-weight:600}
@media(max-width:760px){.journey-steps li{min-width:0;padding:9px}.sample-grid{grid-template-columns:repeat(2,1fr)}}


/* E7 · Studio onboarding, information hierarchy and accessibility (display only) */
#chatPanel:has(#chatMessages .msg-row) .studio-onboarding{display:none!important}
.studio-onboarding{margin:14px 16px 4px;padding:16px;border:1px solid var(--ng-border-strong);border-radius:14px;background:linear-gradient(145deg,rgba(108,99,255,.11),rgba(16,24,39,.82));box-shadow:0 12px 30px rgba(0,0,0,.16)}
.onboarding-kicker{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ng-accent-2);margin-bottom:5px}.studio-onboarding h2{font-size:17px;line-height:1.35;color:var(--ng-text-1);margin:0 0 12px}.onboarding-steps{display:grid;gap:8px;list-style:none;margin:0 0 12px}.onboarding-steps li{display:flex;align-items:flex-start;gap:9px;color:var(--ng-text-1)}.onboarding-steps li>span{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:7px;background:rgba(108,99,255,.18);color:#c9c5ff;font-size:11px;font-weight:800}.onboarding-steps strong{display:block;font-size:12px;line-height:1.3}.onboarding-steps small{display:block;margin-top:2px;color:var(--ng-text-2);font-size:11px;line-height:1.45}.prompt-example{width:100%;padding:9px 11px;border:1px solid rgba(78,205,196,.25);border-radius:9px;background:rgba(78,205,196,.07);color:#bcece7;text-align:left;font:inherit;font-size:11px;line-height:1.5;cursor:pointer}.prompt-example:hover{border-color:rgba(78,205,196,.58);background:rgba(78,205,196,.12)}.onboarding-note{margin:8px 1px 0;color:var(--ng-text-3);font-size:10px;line-height:1.45}
.chat-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 72%,transparent),color-mix(in srgb,var(--bg) 96%,#000))}.chat-messages{scrollbar-color:rgba(148,163,184,.3) transparent}.composer{border-color:var(--ng-border-strong);box-shadow:0 10px 28px rgba(0,0,0,.2)}.chat-input{line-height:1.55}.composer-hint{color:var(--ng-text-3)}
.preview-toolbar{border:1px solid var(--ng-border);background:var(--toolbar-bg,rgb(16,24,39));box-shadow:0 10px 24px rgba(0,0,0,.2)}.ptb-group{position:relative}.ptb-group+.ptb-group:before{content:"";position:absolute;left:-5px;top:6px;bottom:6px;width:1px;background:var(--ng-border)}.ptb-version{background:rgba(108,99,255,.045)}.ptb-ship{background:rgba(78,205,196,.045)}
.preview-phone-frame{outline:1px solid rgba(78,205,196,.12);box-shadow:0 22px 60px rgba(0,0,0,.42),0 0 32px rgba(78,205,196,.06)}.preview-placeholder p{max-width:300px;line-height:1.65;color:var(--ng-text-2)}.preview-placeholder strong{color:var(--ng-text-1)}
.asset-rail{border-left-color:var(--ng-border-strong);background:rgba(16,24,39,.76)}.ar-head{border-bottom:1px solid var(--ng-border)}.ar-empty p{line-height:1.6;color:var(--ng-text-2)}.ar-empty strong{color:var(--ng-text-1)}
.cost-pill{border-color:rgba(255,180,84,.24)}.cost-pill .cp-label:after{content:" · 需接入账单";color:var(--ng-text-3);font-size:10px}.cost-panel{border-color:var(--ng-border-strong)}.cp-head small{display:block;margin-top:4px;color:var(--ng-warning);font-weight:600;line-height:1.4}.roi-card:after{content:"待数据表示：接入真实经营收入与模型账单后计算；当前成本及预测不得用于决策。";display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--ng-border);color:var(--ng-text-2);font-size:11px;line-height:1.5}
button:focus-visible,[role="button"]:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--ng-accent-2)!important;outline-offset:2px}.ptb-btn:disabled,.btn-send:disabled,.btn-attach:disabled{cursor:not-allowed;filter:saturate(.55);opacity:.5}
@media(max-width:1100px){.studio-onboarding{padding:12px;margin:10px 10px 2px}.onboarding-steps small,.onboarding-note{display:block}.preview-toolbar{gap:4px}.ptb-group+.ptb-group:before{left:-3px}.ptb-btn{padding-left:7px;padding-right:7px}.cost-pill .cp-label:after{content:" · 示例"}}
@media(prefers-reduced-motion:reduce){.studio-onboarding *,.prompt-example,.preview-phone-frame{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* E9 visual consistency: shared scale and complete interaction states */
:root{--ng-radius-sm:8px;--ng-radius-md:12px;--ng-radius-lg:16px;--ng-shadow-card:0 14px 36px rgba(0,0,0,.24);--ng-shadow-pop:0 20px 56px rgba(0,0,0,.34);--ng-focus:0 0 0 3px rgba(51,198,212,.24)}
button,input,select,textarea{font:inherit}button,.btn,.btn-icon,.nav-btn,.ptb-btn,.btn-send,.btn-save{border-radius:var(--ng-radius-md);transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}button:hover:not(:disabled),[role="button"]:hover:not([aria-disabled="true"]){border-color:var(--ng-border-strong)}button:active:not(:disabled),[role="button"]:active:not([aria-disabled="true"]){transform:translateY(1px)}button:focus-visible,[role="button"]:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ng-aurora-cyan)!important;outline-offset:2px;box-shadow:var(--ng-focus)}button:disabled,[aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:saturate(.55);pointer-events:none}.modal-content,.settings-content,.game-card,.demo-game-card,.cost-panel{border-radius:var(--ng-radius-lg);box-shadow:var(--ng-shadow-card)}.btn-icon i,.model-card-icon i,.ptb-ico i,.cp-icon i,.ar-title i{line-height:1}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:1024px){.topbar{padding-inline:16px}.main-content{min-width:0}.hero{padding-inline:20px}}
@media(max-width:768px){.topbar{gap:8px}.topbar-nav{gap:4px}.nav-btn{padding-inline:10px}.hero .display{font-size:clamp(30px,7vw,48px)}}


/* ========== Settings UI refresh 2026-07-14 ========== */
/* Topbar settings pill: visible without FontAwesome */
.btn-settings{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb,167,139,250),.55);
  background:linear-gradient(135deg,rgba(var(--accent-rgb,167,139,250),.22),rgba(var(--accent-rgb,167,139,250),.08));
  color:var(--text,#f1f5f9);
  font-size:13px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.22);
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.btn-settings:hover{
  background:linear-gradient(135deg,rgba(var(--accent-rgb,167,139,250),.42),rgba(var(--accent-rgb,167,139,250),.18));
  border-color:rgba(var(--accent-rgb,167,139,250),.85);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb,167,139,250),.25),0 8px 22px rgba(0,0,0,.28);
  transform:translateY(-1px);
}
.btn-settings:active{transform:translateY(0)}
.btn-settings:focus-visible{outline:2px solid var(--accent,#a78bfa);outline-offset:2px}
.btn-settings-ico{flex:0 0 auto;display:block;opacity:.95}
.btn-settings-label{line-height:1;user-select:none}

/* Modal shell: wider, column flex, sticky footer */
.modal-settings{
  width:min(540px,calc(100vw - 32px));
  max-height:min(86vh,720px);
  display:flex;flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(30,27,46,.98),rgba(18,16,28,.98));
  box-shadow:0 24px 64px rgba(0,0,0,.45),0 0 0 1px rgba(var(--accent-rgb,167,139,250),.08);
}
.modal-settings .settings-header{
  flex:0 0 auto;
  padding:16px 20px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.modal-settings .settings-header h3{
  display:flex;align-items:center;gap:8px;
  margin:0;font-size:16px;font-weight:650;color:var(--text,#f1f5f9);
}
.modal-settings .settings-header h3 .sf-ico{color:var(--accent,#a78bfa);opacity:.95}
.modal-settings .modal-close{
  width:32px;height:32px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted,rgba(241,245,249,.7));
  background:transparent;border:1px solid transparent;
}
.modal-settings .modal-close:hover{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--text,#f1f5f9);
}

.modal-settings .settings-tabs{
  flex:0 0 auto;
  display:flex;gap:6px;
  padding:12px 20px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#settingsModal .modal-settings .settings-tabs{
  flex-direction:column;
  flex-wrap:nowrap;
  gap:8px;
  padding:24px 16px 18px;
  border-bottom:0;
}
.modal-settings .settings-tab{
  appearance:none;border:0;background:transparent;
  color:rgba(241,245,249,.55);
  font-size:13px;font-weight:600;
  padding:8px 14px 10px;
  border-radius:8px 8px 0 0;
  cursor:pointer;
  position:relative;
  transition:color .15s ease,background .15s ease;
}
#settingsModal .modal-settings .settings-tab{
  width:100%;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  border-radius:12px;
}
.modal-settings .settings-tab:hover{color:rgba(241,245,249,.85);background:rgba(255,255,255,.04)}
.modal-settings .settings-tab.active{
  color:var(--text,#f1f5f9);
  background:rgba(var(--accent-rgb,167,139,250),.12);
}
.modal-settings .settings-tab.active::after{
  content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;
  border-radius:2px 2px 0 0;background:var(--accent,#a78bfa);
}

.modal-settings .settings-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:16px 20px 12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.35) transparent;
}
.modal-settings .settings-pane{display:none}
.modal-settings .settings-pane.active{display:block}

/* Cards */
.modal-settings .model-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px 14px 12px;
  margin-bottom:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.modal-settings .model-card-primary{
  border-color:rgba(var(--accent-rgb,167,139,250),.28);
  background:linear-gradient(160deg,rgba(var(--accent-rgb,167,139,250),.10),rgba(255,255,255,.02));
}
.modal-settings .model-card-head{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:12px;
}
.modal-settings .model-card-icon{
  flex:0 0 auto;
  width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb,167,139,250),.16);
  color:var(--accent,#a78bfa);
  border:1px solid rgba(var(--accent-rgb,167,139,250),.28);
}
.modal-settings .model-card-title{
  font-size:14px;font-weight:650;color:var(--text,#f1f5f9);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.modal-settings .model-card-sub,
.modal-settings .sf-hint,
.modal-settings .sf-tip{
  font-size:12px;line-height:1.5;color:rgba(241,245,249,.55);margin:0;
}
.modal-settings .sf-hint{margin:0 0 8px}
.modal-settings .sf-tip{margin-top:8px}

/* Unified form fields */
.modal-settings .sf-field{
  display:flex;flex-direction:column;gap:6px;
  margin:0 0 10px;
}
.modal-settings .sf-field:last-child{margin-bottom:0}
.modal-settings .sf-field label,
.modal-settings .setting-group > label{
  font-size:12px;font-weight:600;
  color:rgba(241,245,249,.72);
  letter-spacing:.01em;
}
.modal-settings .sf-control,
.modal-settings .model-select,
.modal-settings input[type="text"],
.modal-settings input[type="password"],
.modal-settings select{
  width:100%;box-sizing:border-box;
  padding:9px 11px;
  font-size:13px;line-height:1.4;
  color:var(--text,#f1f5f9);
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.modal-settings .sf-control:hover,
.modal-settings input:hover,
.modal-settings select:hover{
  border-color:rgba(255,255,255,.2);
}
.modal-settings .sf-control:focus,
.modal-settings input:focus,
.modal-settings select:focus{
  border-color:rgba(var(--accent-rgb,167,139,250),.65);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb,167,139,250),.18);
  background:rgba(0,0,0,.28);
}
.modal-settings .model-switch-row{
  display:flex;flex-direction:column;gap:6px;
}

/* Footer: update (secondary) + save (primary) */
.modal-settings .settings-footer{
  flex:0 0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 20px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.22));
}
.modal-settings .settings-update{flex:1 1 220px;min-width:0}
.modal-settings .settings-update-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.modal-settings .settings-update-label{
  font-size:12px;font-weight:650;color:rgba(241,245,249,.7);
}
.modal-settings .settings-update-ver{
  font-size:12px;color:rgba(241,245,249,.5);
}
.modal-settings .settings-update-status{
  margin-top:6px;font-size:12px;color:rgba(241,245,249,.7);line-height:1.45;
  min-height:1.2em;
}
.modal-settings .btn-ghost{
  appearance:none;
  padding:6px 12px;
  font-size:12px;font-weight:600;
  color:rgba(241,245,249,.82);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.modal-settings .btn-ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
}
.modal-settings .settings-footer-actions{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
}
.modal-settings .btn-signout{
  color:rgba(232,160,152,.95);
  border-color:rgba(200,96,88,.38);
}
.modal-settings .btn-signout:hover{
  background:rgba(200,96,88,.14);
  border-color:rgba(200,96,88,.55);
  color:#f5c2be;
}
.modal-settings .btn-save{
  flex:0 0 auto;
  margin:0;
  min-width:112px;
  padding:10px 18px;
  font-size:13px;font-weight:700;
  border-radius:10px;
  border:0;
  color:#fff;
  background:linear-gradient(135deg,var(--accent,#a78bfa),var(--accent-hover,#8b5cf6));
  box-shadow:0 8px 20px rgba(var(--accent-rgb,167,139,250),.28);
  cursor:pointer;
}
.modal-settings .btn-save:hover{filter:brightness(1.06)}
.modal-settings .btn-save:active{transform:translateY(1px)}

/* status chips if JS fills text */
.modal-settings .model-card-status{
  font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.06);
  color:rgba(241,245,249,.7);
}

@media (max-width:560px){
  .btn-settings-label{display:none}
  .btn-settings{padding:0 10px}
  .modal-settings{width:calc(100vw - 16px);max-height:92vh}
  .modal-settings .settings-footer{flex-direction:column;align-items:stretch}
  .modal-settings .settings-footer-actions{width:100%}
  .modal-settings .btn-save,.modal-settings .btn-signout{width:100%}
}

/* ===== Persona settings pane 2026-07-14 ===== */
.settings-tabs { flex-wrap: wrap; }
.settings-tab { min-width: 0; white-space: nowrap; }
.persona-card { margin-bottom: 12px; }
.persona-presets {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 12px;
}
.persona-chip {
  border: 1px solid rgba(120,160,255,.28);
  background: rgba(80,120,255,.10);
  color: var(--text, #e8eefc);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.persona-chip:hover {
  background: rgba(80,120,255,.20);
  border-color: rgba(140,180,255,.45);
  transform: translateY(-1px);
}
.persona-ta {
  min-height: 120px;
  resize: vertical;
  line-height: 1.45;
  font-family: inherit;
}
.persona-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; font-size: 12px; color: var(--text-dim, #8b95a8);
}
.persona-meta-hint { opacity: .85; }
.persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
@media (max-width: 520px) {
  .persona-grid { grid-template-columns: 1fr; }
}
.persona-checks {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.persona-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text, #e8eefc);
  cursor: pointer; user-select: none;
}
.persona-check input {
  width: 15px; height: 15px; accent-color: #6b8cff;
}
.persona-foot-note {
  margin: 4px 2px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim, #8b95a8);
  opacity: .9;
}
.persona-foot-note code {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
}

/* === KoozhenStudio Silicon polish v1 === */
:root{
  --ng-font: var(--koozhen-font);
  --ng-tracking: -0.02em;
}
html, body{
  font-family: var(--ng-font) !important;
  letter-spacing: var(--ng-tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.topbar{
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(8,10,18,.55) !important;
}
.logo{
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
}
.logo small{
  opacity: .55;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px !important;
  margin-left: 8px;
}
button.logo.opc-brand{
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-app-region: no-drag;
}
.opc-brand-mark{
  background: linear-gradient(135deg, var(--accent), var(--success));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.opc-brand-studio{
  opacity: .55;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px !important;
  margin-left: 8px;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-dim, rgba(255,255,255,.55));
}
.opc-brand-who{
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-dim, rgba(255,255,255,.55));
  -webkit-text-fill-color: currentColor;
  background: none;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opc-brand.has-dossier .opc-brand-studio{
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 12px !important;
  font-weight: 600;
  opacity: .82;
  color: var(--text, rgba(255,255,255,.82));
}
.topbar-nav .nav-btn{
  font-weight: 550 !important;
  letter-spacing: -0.01em !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.topbar-nav .nav-btn:hover{
  background: rgba(255,255,255,.06) !important;
}
.topbar-nav .nav-btn.active{
  background: linear-gradient(135deg, rgba(124,108,242,.28), rgba(51,198,212,.18)) !important;
  box-shadow: 0 0 0 1px rgba(140,160,255,.22), 0 8px 24px rgba(80,100,255,.12);
  color: #f4f7ff !important;
}
.btn-settings{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  letter-spacing: -0.01em;
}
.btn-settings:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(160,180,255,.28) !important;
}
.stage h1{
  font-weight: 680 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.05 !important;
}
.caster .box{
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(16px);
}
.caster .go{
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border-radius: 12px !important;
}
.chips .chip{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.chips .chip:hover{
  transform: translateY(-1px);
  background: rgba(120,140,255,.12) !important;
  border-color: rgba(140,160,255,.35) !important;
}
.live{
  opacity: .72;
  font-size: 12.5px !important;
  letter-spacing: .01em;
}
.section-header h2{
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
}
.modal-settings, .modal{
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55) !important;
}
.settings-tab{
  letter-spacing: -0.01em !important;
  font-weight: 550 !important;
}
.settings-tab.active{
  box-shadow: inset 0 -2px 0 rgba(140,160,255,.85);
}

/* === KoozhenStudio: AI hero input focus — single soft ring, no cyan double outline === */
#heroInput:focus,
#heroInput:focus-visible,
.hero-input:focus,
.hero-input:focus-visible,
.box textarea:focus,
.box textarea:focus-visible,
.box input:focus,
.box input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.box:focus-within {
  border-color: rgba(167, 139, 250, 0.45) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(167, 139, 250, 0.28),
    0 0 24px rgba(124, 92, 255, 0.18) !important;
}
.hero-input-wrap:focus-within::before {
  opacity: 0.85;
  filter: blur(10px) saturate(120%);
}
.hero-input:focus,
.hero-input:focus-visible {
  border-color: rgba(167, 139, 250, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.25),
    0 0 20px rgba(124, 92, 255, 0.16) !important;
  outline: none !important;
}
/* Keep a11y for real buttons, but not the giant hero composer */
button:focus-visible,
[role="button"]:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ng-accent-2, #a78bfa) !important;
  outline-offset: 2px;
}


/* KoozhenStudio hero focus v2: single soft violet ring, no double outline */
#heroInput:focus,
#heroInput:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.box:focus-within{
  outline: none !important;
  border-color: rgba(167,139,250,.85) !important;
  box-shadow: 0 0 0 1px rgba(167,139,250,.55), 0 0 0 4px rgba(167,139,250,.18), 0 12px 40px rgba(15,23,42,.35) !important;
}
/* kill generic double ring on hero only */
.box input:focus-visible,
.box textarea:focus-visible{
  outline: none !important;
  outline-offset: 0 !important;
}

/* NG_HERO_FOCUS_V2 */
/* Single purple focus ring for AI prompt box — kill native + generic outlines */
#heroInput:focus,
#heroInput:focus-visible,
.hero-input:focus,
.hero-input:focus-visible,
.box textarea:focus,
.box textarea:focus-visible,
.box input:focus,
.box input:focus-visible,
.box:focus-within textarea,
.box:focus-within input {
  outline: none !important;
  border-color: rgba(124,108,242,.55) !important;
  box-shadow: 0 0 0 2px rgba(124,108,242,.28), 0 0 0 1px rgba(124,108,242,.18) inset !important;
}
.box:focus-within {
  border-color: rgba(124,108,242,.45) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(124,108,242,.22), 0 0 24px rgba(124,108,242,.12) !important;
}
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: none;
}


/* === KoozhenStudio Compound flywheel (topbar entry + modal) === */
.topbar-right{
  position: relative;
}
.topbar-right--compound{
  align-items: flex-end;
}
.ng-compound-entry{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(248px, 72vw);
  text-align: left;
  appearance: none;
  cursor: pointer;
  border-radius: 14px;
  padding: 10px 12px 11px;
  border: 1px solid rgba(124,108,242,.35);
  background:
    linear-gradient(135deg, rgba(124,108,242,.18), rgba(51,198,212,.08)),
    rgba(16,24,39,.92);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  color: var(--text, #f1f5f9);
  -webkit-app-region: no-drag;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ng-compound-entry:hover{
  border-color: rgba(124,108,242,.7);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(124,108,242,.2);
}
.ng-ce-main{
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  background: linear-gradient(135deg, #eef2ff, #33C6D4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ng-ce-sub{
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: #A8B3C7;
  -webkit-text-fill-color: #A8B3C7;
}
.ng-ce-cta{
  display: inline-block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #33C6D4;
  -webkit-text-fill-color: #33C6D4;
  letter-spacing: .02em;
}

.ng-compound-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(4,8,16,.62);
  backdrop-filter: blur(8px);
  -webkit-app-region: no-drag;
}
.ng-compound-overlay.is-open{ display: flex; }

.ng-compound-modal{
  width: min(520px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.2);
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(124,108,242,.18), transparent 55%),
    radial-gradient(500px 200px at 100% 0%, rgba(51,198,212,.12), transparent 50%),
    linear-gradient(180deg, #121a2b, #0c1320);
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  color: #F1F5F9;
}
.ng-cm-hd{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}
.ng-cm-eyebrow{
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #33C6D4;
}
.ng-cm-hd h2{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.ng-cm-hd h2 span{
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: #A8B3C7;
  letter-spacing: 0;
}
.ng-cm-close{
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(8,13,24,.5);
  color: #A8B3C7;
  cursor: pointer;
  font-size: 16px;
}
.ng-cm-close:hover{ color: #fff; border-color: rgba(148,163,184,.4); }
.ng-cm-bd{ padding: 14px 18px 18px; }
.ng-cm-manifesto{
  margin: 0 0 14px;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid rgba(124,108,242,.25);
  background: linear-gradient(135deg, rgba(124,108,242,.12), rgba(51,198,212,.06));
  font-size: 12.5px;
  line-height: 1.5;
  color: #C5CEDD;
}
.ng-cm-stats{
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.85fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 560px){
  .ng-cm-stats{ grid-template-columns: 1fr; }
}
.ng-cm-stat{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(8,13,24,.4);
}
.ng-cm-l{ font-size: 11px; color: #A8B3C7; }
.ng-cm-v{
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ng-cm-v em{
  font-style: normal;
  font-size: 12px;
  color: #33C6D4;
  margin-left: 3px;
  font-weight: 600;
}
.ng-cm-s{ margin-top: 6px; font-size: 11px; color: #A8B3C7; }
.ng-cm-s.up{ color: #3CCB9A; }
.ng-cm-spark{ display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 8px; }
.ng-cm-spark i{
  flex: 1;
  border-radius: 2px 2px 0 0;
  opacity: .85;
  background: linear-gradient(180deg, #33C6D4, rgba(124,108,242,.35));
}
.ng-cm-vel{
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(8,13,24,.35);
  margin-bottom: 12px;
}
.ng-cm-vel-top{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #A8B3C7;
  margin-bottom: 7px;
}
.ng-cm-vel-top b{ color: #33C6D4; font-weight: 600; }
.ng-cm-track{
  height: 7px;
  border-radius: 99px;
  background: rgba(148,163,184,.12);
  overflow: hidden;
}
.ng-cm-fill{
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7C6CF2, #33C6D4);
  box-shadow: 0 0 14px rgba(51,198,212,.35);
  position: relative;
  transition: width .5s ease;
}
.ng-cm-fill::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: ngCompoundShimmer 2.2s infinite;
  transform: translateX(-100%);
}
@keyframes ngCompoundShimmer{ 100%{ transform: translateX(100%); } }
.ng-cm-assets{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.ng-cm-asset{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(8,13,24,.35);
  font-size: 12px;
}
.ng-cm-asset .k{ color: #A8B3C7; }
.ng-cm-asset .v{ font-weight: 650; font-variant-numeric: tabular-nums; }
.ng-cm-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
  font-size: 11px;
  color: #718096;
}
.ng-cm-foot button{
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, #7C6CF2, #5B8CFF);
}
.ng-cm-foot button:hover{ filter: brightness(1.08); }


/* ===== P1 multi-relay provider cards ===== */
.provider-card { position: relative; }
.provider-card.provider-primary { border-color: rgba(108,99,255,.55); box-shadow: 0 0 0 1px rgba(108,99,255,.25) inset; }
.provider-card.provider-disabled { opacity: .62; }
.provider-enable { display:flex; align-items:center; gap:6px; font-size:12px; color: var(--text-dim, rgba(241,245,249,.7)); white-space:nowrap; user-select:none; }
.provider-enable input { margin:0; }
.provider-pill {
  display:inline-block; font-size:10px; font-weight:600; letter-spacing:.02em;
  padding:1px 7px; border-radius:999px; margin-left:4px;
  background: rgba(108,99,255,.15); color: rgba(196,181,253,.95);
  vertical-align: middle;
}
.provider-actions { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.provider-actions .btn-sm { padding:4px 10px; font-size:12px; border-radius:8px; cursor:pointer; }
.provider-test-msg { font-size:11px; color: rgba(241,245,249,.55); }
.provider-advanced { margin-top:10px; }
.provider-advanced summary { cursor:pointer; color: rgba(241,245,249,.65); font-size:12px; }
.provider-raw { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; min-height:120px; }
.koozhen-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 99999;
  background: rgba(15,23,42,.92); color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.25); border-radius: 10px;
  padding: 10px 14px; font-size: 13px; opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s; pointer-events: none; max-width: 360px;
}
.koozhen-toast.show { opacity: 1; transform: translateY(0); }
.koozhen-toast-ok { border-color: rgba(74,222,128,.45); }
.koozhen-toast-err { border-color: rgba(248,113,113,.5); }

/* ===== P1.5 Grok workstation layout ===== */
.role-matrix { width:100%; border-collapse:collapse; font-size:12px; margin:8px 0 4px; }
.role-matrix th, .role-matrix td { text-align:left; padding:6px 8px; border-bottom:1px solid rgba(148,163,184,.12); }
.role-matrix th { color:rgba(241,245,249,.55); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.role-matrix code, .role-matrix .role-model { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; color:#a5b4fc; background:rgba(99,102,241,.12); padding:2px 6px; border-radius:4px; }
.role-media-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media (max-width:720px){ .role-media-grid { grid-template-columns:1fr; } }
.provider-nested { margin-top:6px; padding:8px 10px; border:1px solid rgba(148,163,184,.14); border-radius:10px; background:rgba(15,23,42,.35); }
.provider-pill { display:inline-block; font-size:10px; padding:1px 6px; border-radius:999px; background:rgba(108,99,255,.18); color:#c4b5fd; margin-left:4px; vertical-align:middle; }
#providersOverviewCard .model-card-sub { opacity:.85; }
#rolesCard .sf-tip { margin-top:6px; }
.model-card + .model-card { margin-top:12px; }


/* ===== P1.6 Settings compact (Models / WeChat / Persona) ===== */
.settings-pane[data-pane="models"] .models-layout.p16-models,
.settings-pane[data-pane="wechat"] .p16-wechat,
.settings-pane[data-pane="persona"] .p16-persona {
  max-width: 920px;
}
.p16-models .model-card,
.p16-wechat.model-card,
.p16-persona.model-card {
  padding: 14px 16px 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgba(30,41,59,.72), rgba(15,23,42,.78));
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.p16-models .compact-head,
.p16-wechat .compact-head,
.p16-persona .compact-head {
  margin-bottom: 10px;
  gap: 8px;
}
.p16-models .model-card-title,
.p16-wechat .model-card-title,
.p16-persona .model-card-title {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .01em;
}
.p16-models .model-card-sub,
.p16-wechat .model-card-sub,
.p16-persona .model-card-sub {
  font-size: 12px;
  opacity: .72;
  margin-top: 2px;
  line-height: 1.35;
}
.p16-models .conn-row {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) auto;
  gap: 10px 12px;
  align-items: end;
}
.p16-models .conn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 2px;
}
.p16-models .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(51,65,85,.55);
  border: 1px solid rgba(148,163,184,.2);
}
.p16-models .roles-table-wrap {
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.14);
}
.p16-models #roleMatrixTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.p16-models #roleMatrixTable th,
.p16-models #roleMatrixTable td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  text-align: left;
  vertical-align: middle;
}
.p16-models #roleMatrixTable th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .7;
  background: rgba(15,23,42,.45);
}
.p16-models #roleMatrixTable code.role-model {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(56,189,248,.1);
  color: #7dd3fc;
}
.p16-models .media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px 12px;
}
.p16-models .media-key-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 10px;
}
.p16-models .provider-advanced {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(15,23,42,.35);
  padding: 0 10px 8px;
}
.p16-models .provider-advanced > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 4px;
  font-size: 12.5px;
  opacity: .88;
}
.p16-models .provider-advanced > summary::-webkit-details-marker { display:none; }
.p16-models .provider-nested { padding: 4px 2px 6px; }
.p16-models .failover-hint {
  font-size: 12px;
  opacity: .75;
  margin: 0 0 8px;
}
.p16-wechat .wechat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.p16-wechat .wechat-path-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: end;
}
.p16-wechat .wechat-path-row .sf-field { margin: 0; }
.p16-persona .persona-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.p16-persona .persona-checks {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.p16-persona .persona-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.35;
  opacity: .92;
}
.p16-persona .persona-preset-list {
  max-height: 220px;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.14);
  padding: 4px;
  background: rgba(15,23,42,.35);
}
.p16-persona .persona-preset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.p16-persona .persona-mini-btn {
  padding: 4px 10px;
  font-size: 12px;
}
.p16-persona .persona-ta { min-height: 72px; }
.p16-persona .persona-foot-note,
.settings-pane[data-pane="persona"] .persona-foot-note {
  font-size: 11.5px;
  opacity: .65;
  margin: 4px 2px 0;
}
@media (max-width: 860px) {
  .p16-models .conn-row,
  .p16-models .media-grid,
  .p16-wechat .wechat-grid,
  .p16-persona .persona-2col {
    grid-template-columns: 1fr;
  }
  .p16-models .media-key-row { grid-template-columns: 1fr; }
}

/* P1.6 WeChat grid alias */
.p16-wechat .wx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.p16-wechat .wx-grid .sf-field:last-child { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .p16-wechat .wx-grid { grid-template-columns: 1fr; }
  .p16-wechat .wx-grid .sf-field:last-child { grid-column: auto; }
}

/* ===== P1.6 models extras (conn / presets / usage) ===== */
.p16-models .conn-strip {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.p16-models .conn-left { min-width: 200px; flex: 1; }
.p16-models .conn-brand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p16-models .conn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.7);
}
.p16-models .tag-grok {
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
  background: rgba(124,108,243,.2); color: #c4b5fd; letter-spacing: .04em;
}
.p16-models .conn-sub { font-size: 12px; opacity: .75; margin: 6px 0 0; line-height: 1.45; }
.p16-models .conn-fields { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p16-models .conn-key { min-width: 220px; }
.p16-models .conn-enable { font-size: 12px; display: flex; gap: 6px; align-items: center; }
.p16-models .preset-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p16-models .preset-btn.is-active,
.p16-models .preset-btn.is-on {
  border-color: rgba(124,108,243,.55);
  background: rgba(124,108,243,.16);
}
.p16-models .sf-chip {
  appearance: none;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(148,163,184,.08);
  color: inherit;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
}
.p16-models .sf-chip.is-active,
.p16-models .sf-chip:hover {
  border-color: rgba(124,108,243,.55);
  background: rgba(124,108,243,.16);
}
/* A10: speed-test suggestion bar — the only door from "detected" to "written".
   (D2=B removed the fake usage meter: real quotas need the Getoken usage API.) */
.p16-models .preset-suggest {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 2px 10px; padding: 8px 10px;
  border: 1px solid rgba(124,108,243,.4); border-radius: 10px;
  background: rgba(124,108,243,.10); font-size: 12.5px;
}
.p16-models .preset-suggest[hidden] { display: none; }
.p16-models .preset-suggest-text { flex: 1 1 240px; min-width: 0; word-break: break-word; }
.p16-models .preset-suggest button {
  -webkit-appearance: none; appearance: none; font: inherit; font-size: 12px;
  padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(148,163,184,.35); background: none; color: inherit;
}
.p16-models .preset-suggest-apply { border-color: transparent; background: #7c6cf3; color: #fff; }
.p16-models .preset-suggest-apply:hover { background: #6d5df0; }
.p16-models .preset-suggest-dismiss { opacity: .8; }
.p16-models .kind-chip { font-size: 10px; padding: 2px 6px; border-radius: 6px; }
.p16-models .kind-chip.text { background: rgba(96,165,250,.16); color: #93c5fd; }
.p16-models .kind-chip.media { background: rgba(52,211,153,.16); color: #6ee7b7; }
.p16-models .hint-chip { font-size: 10px; opacity: .6; margin-left: 6px; font-weight: 500; }
.p16-models .checkline { display: flex; gap: 6px; align-items: center; font-size: 12px; margin: 6px 0; }
.p16-models .media-key-inline { display: flex; gap: 8px; align-items: center; }
.p16-models .media-key-block { margin-top: 4px; }
.p16-models .under-roles { margin-top: 12px; }
.p16-models .field-hint { font-size: 12px; opacity: .7; margin: 4px 0 8px; line-height: 1.45; }
.p16-models .provider-advanced { margin-top: 10px; }
.p16-models .provider-advanced > summary {
  cursor: pointer; list-style: none; padding: 10px 4px; font-size: 12.5px; opacity: .88;
}
.p16-models .provider-advanced > summary::-webkit-details-marker { display: none; }
.p16-models .failover-hint { font-size: 12px; opacity: .75; margin: 0 0 8px; }
.p16-models .role-select { min-width: 180px; }
@media (max-width: 860px) {
  .p16-models .conn-strip { flex-direction: column; }
  .p16-models .conn-key { min-width: 0; width: 100%; }
}

/* ===== P1.6 catalog ui (labeled conn / preset cards / vendor col) ===== */
.p16-models .conn-fields-labeled {
  display: grid;
  grid-template-columns: auto minmax(180px,1.5fr) minmax(160px,1.1fr) auto;
  gap: 10px 14px;
  align-items: end;
  margin-top: 12px;
}
.p16-models .conn-field label {
  display: block;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .62;
  margin: 0 0 6px;
}
.p16-models .conn-test-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.p16-models .test-msg { font-size: 12px; opacity: .8; }
.p16-models .preset-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 10px;
  align-items: stretch;
}
/* ===== preset tier cards (v3) =====
   The four tiers used to paint one flat grey slab (rgba(15,23,42,.35) on every card),
   so the tier itself, the hover and the selected state all drowned. Cards now sit on
   the theme surface (--surface) and carry a tier identity (dot + cost meter), while
   "selected" is unmistakable: accent ring + left accent bar + a check badge.
   Tokens (--surface / --text / --text-dim / --accent-rgb) keep every theme honest. */
.p16-models .preset-card {
  --preset-tier: #64748B;
  --preset-tier-soft: rgba(100,116,139,.12);
  --preset-fill: 0%;
  --preset-accent: var(--accent, #7C6CF3);
  --preset-accent-rgb: var(--accent-rgb, 124, 108, 243);
  /* One hue for "this tier is live". The ring, the tint, the left bar and the badge
     all read from the SAME mixed accent, so a green badge can never sit next to a
     purple ring again (the pane's --accent and --accent-rgb resolve differently). */
  --preset-accent-line: color-mix(in srgb, var(--preset-accent) 58%, transparent);
  --preset-accent-hover: color-mix(in srgb, var(--preset-accent) 32%, transparent);
  --preset-accent-tint: color-mix(in srgb, var(--preset-accent) 10%, transparent);
  --preset-accent-tint2: color-mix(in srgb, var(--preset-accent) 3%, transparent);
  --preset-accent-ring: color-mix(in srgb, var(--preset-accent) 20%, transparent);
  --preset-accent-glow: color-mix(in srgb, var(--preset-accent) 38%, transparent);
  text-align: left;
  padding: 12px 13px;
  min-height: 118px;
  border: 1px solid rgba(148,163,184,.30);
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  cursor: pointer;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.p16-models .preset-card[data-preset="trial"] { --preset-tier: #2E9E7B; --preset-tier-soft: rgba(46,158,123,.14); --preset-fill: 34%; }
.p16-models .preset-card[data-preset="recommend"] { --preset-tier: #7C6CF3; --preset-tier-soft: rgba(124,108,243,.14); --preset-fill: 67%; }
.p16-models .preset-card[data-preset="whale"] { --preset-tier: #D9822B; --preset-tier-soft: rgba(217,130,43,.16); --preset-fill: 100%; }
.p16-models .preset-card[data-preset="custom"] { --preset-tier: #64748B; --preset-tier-soft: rgba(100,116,139,.12); --preset-fill: 0%; }
.p16-models .preset-card { position: relative; }
.p16-models .preset-card:hover {
  border-color: var(--preset-accent-hover);
  box-shadow: 0 10px 24px -18px rgba(15,23,42,.55);
  transform: translateY(-1px);
}
/* The selected card has to read as selected across theme layers: a border tint alone
   was invisible next to the light-theme card backgrounds, so the state also carries a
   left accent bar, a 2px ring and a text badge. !important keeps the state above the
   settings/theme override stacks that repaint #settingsModal cards. */
.p16-models .preset-card.is-on,
.p16-models .preset-card.is-active {
  border-color: var(--preset-accent-line) !important;
  background: linear-gradient(180deg, var(--preset-accent-tint), var(--preset-accent-tint2)) !important;
  box-shadow: 0 0 0 2px var(--preset-accent-ring), 0 14px 28px -22px var(--preset-accent-glow) !important;
}
.p16-models .preset-card.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 62%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--preset-accent, #7c6cf3);
  box-shadow: 0 0 0 3px var(--preset-accent-ring);
}
/* "clicked but a BYOK-bound role keeps the live mix from matching this tier" */
.p16-models .preset-card.is-applied {
  border-color: rgba(246,193,119,.85) !important;
  background: rgba(246,193,119,.10) !important;
}
.p16-models .preset-card-badge {
  position: absolute;
  top: 9px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .02em;
  background: var(--preset-accent, #7C6CF3);
  color: #fff;
  box-shadow: 0 3px 10px -4px var(--preset-accent-glow);
}
.p16-models .preset-card-badge[hidden] { display: none; }
/* a tick turns the live tier's pill into an unmistakable "you are here" */
.p16-models .preset-card.is-active .preset-card-badge::before { content: "\2713"; margin-right: 3px; }
.p16-models .preset-card.is-applied .preset-card-badge { background: rgba(246,193,119,.95); color: #3b2f10; box-shadow: none; }
.p16-models .preset-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 650;
  font-size: 13.5px;
  line-height: 1.3;
  padding-right: 42px;
  color: var(--text, #1B1A34);
}
.p16-models .preset-card-title::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--preset-tier);
  box-shadow: 0 0 0 3px var(--preset-tier-soft);
}
/* the live tier's dot switches to the accent so dot + ring + bar agree */
.p16-models .preset-card.is-on .preset-card-title,
.p16-models .preset-card.is-active .preset-card-title { color: var(--preset-accent); }
.p16-models .preset-card-desc { font-size: 12px; color: var(--text-dim, #5D6570); line-height: 1.45; }
/* The four cards share one vertical rhythm: title / desc / cost-row / model-row. The
   custom mix has no fixed multiplier, so its cost row is a dashed stub instead of a
   meter - the card says it has no tier cost instead of leaving a hole in the rhythm. */
.p16-models .preset-card-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim, #5D6570);
  white-space: nowrap;
}
.p16-models .preset-card-note::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 6px;
  border-radius: 99px;
  background: repeating-linear-gradient(90deg, rgba(148,163,184,.5) 0 3px, transparent 3px 6px);
}
.p16-models .preset-hint { font-size: 12px; opacity: .65; margin: 0 2px 8px; }
/* the custom card is a live state the user can click for an explanation, not a dead
   button: a dashed outline (auto-detected) instead of a dimmed, "disabled" look */
.p16-models .preset-card.is-readonly { cursor: pointer; border-style: dashed; }
.p16-models .preset-card.is-readonly.is-active { border-style: solid; }
.p16-models .preset-foot { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; }
.p16-models .preset-speed { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: inherit; opacity: .6; cursor: pointer; text-decoration: underline dotted; }
.p16-models .preset-speed:hover { opacity: .95; }
.p16-models .preset-status { font-size: 12px; opacity: .65; }
.p16-models .preset-status.is-dirty { color: #f6c177; opacity: 1; }
.p16-models .preset-card-cost {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-dim, #5D6570);
}
/* a 1/3 · 2/3 · 3/3 meter so 1x / 4x / 9x reads at a glance without another label */
.p16-models .preset-card-cost::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--preset-tier) 0 var(--preset-fill), rgba(148,163,184,.32) var(--preset-fill));
}
/* the id is the chat role's model: tag it (localized) and ellipsize long ids */
.p16-models .preset-card-modelrow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: auto;
}
.p16-models .preset-card-mtag {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  /* The tier hue stays the identity, but at 9.5px the raw -tier
     tone only reached ~2.8:1 on its own tint (WCAG AA wants 4.5:1 for text
     this size). Mixing the hue toward ink keeps every tier recognisable and
     clears ~4.8:1 without touching the shared --preset-tier dot. */
  color: color-mix(in srgb, var(--preset-tier) 68%, #0F172A);
  background: var(--preset-tier-soft);
}
.p16-models .preset-card-model {
  min-width: 0;
  font-size: 11px;
  color: var(--text-dim, #5D6570);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the custom card has no chat id (the mix is whatever the user built): drop the row */
.p16-models .preset-card-modelrow:has(.preset-card-model:empty) { display: none; }
.p16-models .preset-card:focus-visible {
  outline: 2px solid rgba(124,108,243,.75);
  outline-offset: 2px;
}
.p16-models .preset-card.is-readonly:focus-visible { outline-color: rgba(148,163,184,.5); }
.p16-models .preset-undo {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: #a5b4fc;
  cursor: pointer;
  text-decoration: underline dotted;
}
.p16-models .preset-undo:hover { color: #c7d2fe; }
.p16-models .preset-undo[hidden] { display: none; }
.p16-models .role-select { min-width: 220px; max-width: 320px; }
.p16-models .role-vendor { font-size: 12px; opacity: .8; white-space: nowrap; }
@media (max-width: 1180px) {
  .p16-models .preset-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .p16-models .conn-fields-labeled { grid-template-columns: 1fr; }
  .p16-models .preset-cards { grid-template-columns: 1fr; }
  .p16-models .role-select { min-width: 0; width: 100%; }
}




/* Hybrid pages: narrow host navigation, retain every control. */
@media(max-width:600px){
 body:has(#page-home.active,#page-market-partner.active) header.topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;height:auto!important;min-height:96px;flex:0 0 auto;padding:8px 14px;gap:8px}
 body:has(#page-home.active,#page-market-partner.active) header.topbar .topbar-left{grid-column:1;grid-row:1;min-width:0}
 body:has(#page-home.active,#page-market-partner.active) header.topbar .topbar-right{grid-column:2;grid-row:1}
 body:has(#page-home.active,#page-market-partner.active) header.topbar #topbarNav{grid-column:1 / -1;grid-row:2;position:static!important;transform:none!important;width:100%;min-width:0;justify-content:center}
}


/* First-use model onboarding follows the active app theme (theme-system.css tokens). */
.ck-model-onboarding {
  position: fixed;
  inset: 10vh 0 auto;
  margin: 0 auto;
  width: min(620px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--ng-border-strong, rgba(var(--accent-rgb),.32));
  border-radius: 22px;
  overflow: hidden;
  color: var(--ng-text-1, var(--text));
  background: var(--ng-surface-1, var(--surface));
  box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 0 0 6px var(--panel-glow, rgba(var(--accent-rgb),.12));
}
.ck-model-onboarding::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(5px); }
html[data-theme="light"] .ck-model-onboarding { box-shadow: 0 24px 70px rgba(27,26,52,.18), 0 0 0 6px var(--panel-glow); }
html[data-theme="light"] .ck-model-onboarding::backdrop { background: rgba(27,26,52,.28); }
.ck-model-hero {
  display:flex; align-items:center; gap:12px; padding:18px 24px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.06));
  border-bottom: 1px solid var(--ng-border, rgba(var(--accent-rgb),.18));
  color: var(--ng-text-1, var(--text));
}
.ck-model-pointer { font-size:32px; line-height:1; color: var(--accent); animation: ck-model-bounce 1.1s ease-in-out infinite; }
.ck-model-step { font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); }
.ck-model-onboarding h2 { margin:24px 28px 10px; font-size:25px; line-height:1.25; color: var(--ng-text-1, var(--text)); }
.ck-model-lead, .ck-model-why { margin:0 28px 18px; font-size:15px; line-height:1.7; color: var(--ng-text-2, var(--text-dim)); }
.ck-model-lead strong, .ck-model-why strong { color: var(--accent); }
.ck-model-route { display:grid; gap:9px; margin:0 28px 18px; padding:0; list-style:none; counter-reset:route; }
.ck-model-route li { counter-increment:route; display:grid; grid-template-columns:30px 1fr; column-gap:10px; align-items:center; padding:11px 13px; border:1px solid var(--ng-border, rgba(var(--accent-rgb),.18)); border-radius:12px; background: var(--ng-surface-2, var(--surface2)); }
.ck-model-route li::before { content:counter(route); display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background: rgba(var(--accent-rgb),.18); color: var(--accent); font-weight:800; }
.ck-model-route b { color: var(--ng-text-1, var(--text)); font-size:14px; }
.ck-model-route span { grid-column:2; color: var(--ng-text-2, var(--text-dim)); font-size:12px; line-height:1.45; }
.ck-model-actions { display:flex; gap:12px; align-items:center; padding:18px 28px 24px; border-top:1px solid var(--ng-border, rgba(var(--accent-rgb),.18)); background: var(--ng-bg, var(--bg)); }
.ck-model-primary, .ck-model-secondary { border-radius:11px; padding:12px 17px; font-weight:800; cursor:pointer; transition: background .15s, transform .15s, border-color .15s; }
.ck-model-primary { border:1px solid var(--accent); color: var(--ng-bg, #fff); background: var(--accent); box-shadow:0 8px 20px rgba(var(--accent-rgb),.28); }
html[data-theme="light"] .ck-model-primary { color:#fff; }
.ck-model-primary:hover { background: var(--ng-primary-hover, var(--accent-hover)); border-color: var(--ng-primary-hover, var(--accent-hover)); transform:translateY(-1px); }
.ck-model-secondary { border:1px solid var(--ng-border-strong, rgba(var(--accent-rgb),.32)); color: var(--ng-text-2, var(--text-dim)); background:transparent; }
.ck-model-secondary:hover { color: var(--ng-text-1, var(--text)); background: rgba(var(--accent-rgb),.08); }
.ck-model-focus { animation: ck-row-pulse 1s ease-in-out 4; outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
@keyframes ck-model-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px) rotate(-8deg)} }
@keyframes ck-row-pulse { 50%{background:rgba(var(--accent-rgb),.18)} }
@media (max-width:560px) { .ck-model-onboarding h2{font-size:21px;margin-left:20px;margin-right:20px}.ck-model-lead,.ck-model-why,.ck-model-route{margin-left:20px;margin-right:20px}.ck-model-actions{padding-left:20px;padding-right:20px;flex-direction:column;align-items:stretch}.ck-model-primary,.ck-model-secondary{width:100%} }

/* v3 AI settings: per-role table folded under "custom (advanced)" */
.role-custom-details{margin-top:10px;}
.role-custom-summary{cursor:pointer;font-size:12px;opacity:.8;padding:6px 0;user-select:none;}
.role-custom-summary:hover{opacity:1;}

/* ===== AI settings v2 (2026-10-09): 2 wide cards, distinct identities, loud selected state ===== */
.p16-models .preset-cards { grid-template-columns: repeat(2, minmax(300px, 1fr)) !important; gap: 14px; }
.p16-models .preset-card { min-height: 0; padding: 16px 18px 14px 20px; gap: 6px; opacity: .78; }
.p16-models .preset-card > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.p16-models .preset-card[data-preset="official"] { --preset-accent: #7C3AED; --preset-tier: #7C3AED; }
.p16-models .preset-card[data-preset="custom"] { --preset-accent: #0EA5A4; --preset-tier: #0EA5A4; border-style: dashed; }
.p16-models .preset-card-title { font-size: 15px; font-weight: 700; }
.p16-models .preset-card:hover { opacity: .95; }
.p16-models .preset-card.is-on, .p16-models .preset-card.is-active {
  opacity: 1;
  border: 2px solid var(--preset-accent) !important;
  border-style: solid !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--preset-accent) 18%, transparent), 0 16px 30px -20px var(--preset-accent) !important;
}
.p16-models .preset-card.is-on::before, .p16-models .preset-card.is-active::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--preset-accent);
}
.p16-models .preset-card.is-on::after, .p16-models .preset-card.is-active::after {
  content: "\2713"; position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--preset-accent);
}
.p16-models .preset-card.is-on .preset-card-badge, .p16-models .preset-card.is-active .preset-card-badge { right: 42px; }
.p16-models .preset-explain {
  margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, #7C3AED 30%, transparent);
  background: color-mix(in srgb, #7C3AED 6%, transparent);
  font-size: 12.5px; line-height: 1.6; color: var(--text, inherit);
}
.p16-models .preset-explain[data-kind="custom"] { border-color: color-mix(in srgb, #0EA5A4 35%, transparent); background: color-mix(in srgb, #0EA5A4 7%, transparent); }
.p16-models .preset-explain:empty { display: none; }
.p16-models .preset-explain-title { font-weight: 700; margin-bottom: 4px; }
.p16-models .preset-explain ul { margin: 0; padding-left: 18px; }
.p16-models .role-group-row th {
  text-align: left; padding: 12px 8px 6px; border-bottom: 1px solid rgba(148,163,184,.25); background: transparent;
}
.p16-models .role-group-name { font-size: 13px; font-weight: 700; margin-right: 10px; }
.p16-models .role-group-sub { font-size: 12px; font-weight: 400; color: var(--text-dim, #5D6570); }
.p16-models .role-group-row[data-group="chat"] .role-group-name { color: #7C3AED; }
@media (max-width: 860px) { .p16-models .preset-cards { grid-template-columns: 1fr !important; } }


/* ===== AI settings v3 (2026-10-09): one neutral look for both cards, ONE selected look.
   - unselected: identical neutral card (no per-card hue, no dashed border, full opacity)
   - selected:   accent border + tint + check; no left bar (the old ::before bar read as a bug) */
.p16-models .preset-card,
.p16-models .preset-card[data-preset="official"],
.p16-models .preset-card[data-preset="custom"]{
  --preset-accent: var(--accent, #7C3AED);
  --preset-tier: #94A3B8;
  --preset-tier-soft: rgba(148,163,184,.14);
  opacity: 1 !important;
  border: 1px solid var(--border, rgba(148,163,184,.35)) !important;
  border-style: solid !important;
  background: var(--surface, transparent) !important;
  box-shadow: none !important;
  cursor: pointer;
}
.p16-models .preset-card .preset-card-title{ color: var(--text, inherit) !important; }
.p16-models .preset-card:hover{ border-color: color-mix(in srgb, var(--preset-accent) 55%, transparent) !important; }
.p16-models .preset-card.is-active,
.p16-models .preset-card.is-on{
  --preset-tier: var(--preset-accent);
  --preset-tier-soft: color-mix(in srgb, var(--preset-accent) 22%, transparent);
  border: 2px solid var(--preset-accent) !important;
  background: color-mix(in srgb, var(--preset-accent) 10%, var(--surface, transparent)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--preset-accent) 18%, transparent) !important;
}
.p16-models .preset-card.is-active .preset-card-title,
.p16-models .preset-card.is-on .preset-card-title{ color: var(--preset-accent) !important; }
.p16-models .preset-card::before,
.p16-models .preset-card.is-active::before,
.p16-models .preset-card.is-on::before{ content: none !important; display: none !important; }

/* v5 AI settings polish: role chips and helper text follow the theme instead of
   hard-coded light-blue (#8ec2ff was ~1.9:1 on the light theme). One accent family. */
#settingsModal #roleMatrixTable .role-tier{
  display:inline-block;font-size:10.5px;font-weight:650;line-height:1.5;
  padding:1px 8px;border-radius:999px;margin-right:8px;vertical-align:middle;
  color:var(--preset-accent,var(--accent,#5b4ee6));
  background:color-mix(in srgb,var(--preset-accent,var(--accent,#5b4ee6)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--preset-accent,var(--accent,#5b4ee6)) 28%,transparent);
}
#settingsModal #roleMatrixTable .role-use{
  display:block;margin-top:4px;font-size:11.5px;line-height:1.5;font-weight:400;
  opacity:1;color:var(--text-dim,#5D6570);
}
#settingsModal #roleMatrixTable .role-group-row th{
  padding-top:14px;padding-bottom:6px;text-align:left;
  border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent);
}
#settingsModal #roleMatrixTable .role-group-name{font-size:12.5px;font-weight:700;letter-spacing:.02em;margin-right:10px}
#settingsModal #roleMatrixTable .role-group-sub{font-size:11.5px;font-weight:400;color:var(--text-dim,#5D6570);opacity:1}
#settingsModal .role-custom-summary{cursor:pointer;font-weight:600;padding:10px 2px}

/* v5: light mtag reached only 4.07:1 at 9.5px; darken. */
#settingsModal .p16-models .preset-card-mtag{color:#3F4A5A !important}
/* v5 night theme: preset cards and role table kept light-theme surfaces/inks
   (text 1.3-2.9:1). Give them a dark surface and light inks. */
html[data-theme="night"] #settingsModal .p16-models .preset-card{background:#2A2A44 !important;border-color:#3D3D5C !important}
html[data-theme="night"] #settingsModal .p16-models .preset-card.is-active{background:#2F2C55 !important;border-color:#9B93F5 !important;box-shadow:0 0 0 2px rgba(155,147,245,.45) !important}
html[data-theme="night"] #settingsModal .p16-models .preset-card-title{color:#F2F1FA !important}
html[data-theme="night"] #settingsModal .p16-models .preset-card-desc,
html[data-theme="night"] #settingsModal .p16-models .preset-card-cost,
html[data-theme="night"] #settingsModal .p16-models .preset-card-note{color:#C4C3D8 !important}
html[data-theme="night"] #settingsModal .p16-models .preset-card-model{color:#E6E5F2 !important}
html[data-theme="night"] #settingsModal .p16-models .preset-card-mtag{color:#DCD8FF !important;background:rgba(155,147,245,.22) !important}
html[data-theme="night"] #settingsModal .model-card-sub,
html[data-theme="night"] #settingsModal .preset-hint,
html[data-theme="night"] #settingsModal .preset-explain{color:#C4C3D8 !important;opacity:1 !important}
html[data-theme="night"] #settingsModal #roleMatrixTable td,
html[data-theme="night"] #settingsModal #roleMatrixTable td span:not(.role-tier):not(.kind-dot){color:#E6E5F2 !important}
html[data-theme="night"] #settingsModal #roleMatrixTable .role-use,
html[data-theme="night"] #settingsModal #roleMatrixTable .role-group-sub{color:#B9B8CF !important;opacity:1 !important}
html[data-theme="night"] #settingsModal #roleMatrixTable .role-tier{color:#DCD8FF !important;background:rgba(155,147,245,.22) !important}
html[data-theme="night"] #settingsModal .role-custom-summary,
html[data-theme="night"] #settingsModal #roleMatrixTable .role-group-name{color:#F2F1FA !important}

html[data-theme="night"] #settingsModal .preset-status{color:#C4C3D8 !important;opacity:1 !important}

/* v5: unsaved state amber #f6c177 was 1.64:1 on light; darker amber on light, keep warm on night. */
#settingsModal .p16-models .preset-status.is-dirty{color:#9A5B00 !important;opacity:1 !important;font-weight:600}
html[data-theme="night"] #settingsModal .p16-models .preset-status.is-dirty{color:#F6C177 !important}
html[data-theme="night"] #settingsModal .cm-status{color:#C4C3D8 !important;opacity:1 !important}