/* ===========================================================
   PRODUCT DETAIL PAGE · v2  (/products/os, /products/tsm)
   Design language consistent with main.css v2 override layer
   =========================================================== */

:root {
  --pd-ink: #0A0E1A;
  --pd-ink-2: #111827;
  --pd-line: rgba(255,255,255,0.08);
  --pd-line-light: #E5E7EB;
  --pd-brand: #0F62FE;
  --pd-brand-dim: rgba(15,98,254,0.12);
  --pd-text: #111827;
  --pd-text-dim: #6B7280;
  --pd-text-inv: #E5E7EB;
  --pd-text-inv-dim: #9CA3AF;
}

body { background: #F7F8FA; }

/* ============ HERO ============ */
.pd-hero {
  position: relative;
  background: linear-gradient(180deg, #0A0E1A 0%, #0E1526 55%, #0A0E1A 100%);
  color: var(--pd-text-inv);
  padding: 6rem 0 5rem;
  overflow: hidden;
}
.pd-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}
.pd-hero::after {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(15,98,254,0.22) 0%, transparent 65%);
  pointer-events: none;
  filter: blur(10px);
}
.pd-hero > .container { position: relative; z-index: 2; }

.pd-breadcrumb {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8125rem;
  color: var(--pd-text-inv-dim);
  margin-bottom: 2rem;
}
.pd-breadcrumb a { color: var(--pd-text-inv-dim); transition: color 0.2s; }
.pd-breadcrumb a:hover { color: #fff; }
.pd-breadcrumb i { font-size: 0.625rem; opacity: 0.5; }
.pd-breadcrumb span { color: #fff; }

.pd-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 1024px) {
  .pd-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.pd-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #D1D5DB;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
}
.pd-eyebrow.dark {
  border-color: var(--pd-line-light);
  background: #fff;
  color: var(--pd-text-dim);
}
.pd-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.2);
  animation: pd-pulse 2s infinite;
}
@keyframes pd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pd-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 1.25rem 0 0.75rem;
  color: #fff;
  display: flex; align-items: baseline; gap: 0.75rem;
  flex-wrap: wrap;
}
.pd-title .brand-os, .pd-title .brand-tsm, .pd-title .brand-cli, .pd-title .brand-desktop {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  background: linear-gradient(135deg, #FDBA74 0%, #FB923C 100%);
  color: #3B0D00;
  letter-spacing: 0.05em;
  vertical-align: middle;
  transform: translateY(-0.4em);
}
.pd-title .brand-tsm {
  background: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 100%);
  color: #1E0B52;
}
.pd-title .brand-cli {
  background: linear-gradient(135deg, #93C5FD 0%, #3B82F6 100%);
  color: #0B2A6B;
}
.pd-title .brand-desktop {
  background: linear-gradient(135deg, #6EE7B7 0%, #10B981 100%);
  color: #052E1E;
}
.pd-subtitle {
  font-size: 1.25rem;
  color: #D1D5DB;
  margin-bottom: 1rem;
  font-weight: 500;
}
.pd-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: #9CA3AF;
  max-width: 32rem;
  margin-bottom: 2rem;
}

.pd-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2rem; }
.pd-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all 0.2s;
  white-space: nowrap;
}
.pd-btn.primary {
  background: var(--pd-brand);
  color: #fff;
  box-shadow: 0 4px 20px rgba(15,98,254,0.35);
}
.pd-btn.primary:hover { background: #0B50D9; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(15,98,254,0.45); }
.pd-btn.ghost {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
}
.pd-btn.ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }
.pd-btn.large { padding: 0.95rem 1.75rem; font-size: 1rem; }

.pd-stack {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.pd-stack span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #D1D5DB;
}

/* Hero visual */
.pd-hero-visual { position: relative; }
.pd-screenshot {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0F172A;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.5),
    0 10px 30px rgba(15,98,254,0.2);
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.pd-screenshot:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-4px); }
.pd-screenshot.featured::before {
  content: '';
  position: absolute; inset: -2px;
  background: linear-gradient(135deg, rgba(15,98,254,0.4), transparent, rgba(253,186,116,0.3));
  border-radius: 12px;
  z-index: -1;
  filter: blur(20px);
  opacity: 0.7;
}
.pd-browser-bar {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.6rem 0.9rem;
  background: #0A0E1A;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pd-browser-bar span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #3A3F4B;
}
.pd-browser-bar span:nth-child(1) { background: #FF5F57; }
.pd-browser-bar span:nth-child(2) { background: #FEBC2E; }
.pd-browser-bar span:nth-child(3) { background: #28C840; }
.pd-browser-bar .pd-url {
  flex: 1;
  margin: 0 0.75rem;
  padding: 0.25rem 0.75rem;
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: #9CA3AF;
  text-align: center;
}
.pd-screenshot img { width: 100%; display: block; }

/* ============ GENERIC SECTIONS ============ */
.pd-section {
  padding: 5rem 0;
  background: #fff;
}
.pd-section.dark {
  background: linear-gradient(180deg, #0A0E1A 0%, #0E1526 100%);
  color: var(--pd-text-inv);
  position: relative;
}
.pd-section.dark::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 80%);
  pointer-events: none;
}
.pd-section > .container { position: relative; z-index: 1; }

.pd-section-head { text-align: center; margin-bottom: 3.5rem; }
.pd-section-head h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1rem auto 0.75rem;
  color: var(--pd-text);
  max-width: 48rem;
}
.pd-section.dark .pd-section-head h2 { color: #fff; }
.pd-section-sub {
  font-size: 1rem;
  color: var(--pd-text-dim);
  max-width: 42rem;
  margin: 0 auto;
  line-height: 1.7;
}
.pd-section.dark .pd-section-sub { color: #9CA3AF; }

/* ============ PAIN POINTS ============ */
.pd-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .pd-pain-grid { grid-template-columns: 1fr; } }
.pd-pain-card {
  padding: 2rem;
  background: #F9FAFB;
  border: 1px solid var(--pd-line-light);
  border-radius: 12px;
  position: relative;
  transition: all 0.25s;
}
.pd-pain-card:hover {
  background: #fff;
  border-color: var(--pd-brand);
  box-shadow: 0 12px 40px rgba(15,98,254,0.08);
  transform: translateY(-2px);
}
.pd-pain-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--pd-brand);
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: 0.1em;
}
.pd-pain-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pd-text);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.pd-pain-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--pd-text-dim);
}

/* ============ BUSINESS LOOP ============ */
.pd-loop-wrap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  position: relative;
}
@media (max-width: 1100px) { .pd-loop-wrap { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .pd-loop-wrap { grid-template-columns: repeat(2, 1fr); } }

.pd-loop-stage {
  padding: 1.5rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  text-align: center;
  position: relative;
  transition: all 0.25s;
}
.pd-loop-stage:hover {
  background: rgba(15,98,254,0.08);
  border-color: rgba(15,98,254,0.4);
  transform: translateY(-3px);
}
.pd-loop-stage::after {
  content: '→';
  position: absolute;
  right: -0.85rem; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.2);
  font-size: 1rem;
  z-index: 2;
}
.pd-loop-stage:last-child::after { display: none; }
@media (max-width: 1100px) { .pd-loop-stage::after { display: none; } }

.pd-loop-icon {
  width: 44px; height: 44px;
  margin: 0 auto 0.75rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #0F62FE 0%, #0B50D9 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 6px 16px rgba(15,98,254,0.3);
}
.pd-loop-stage h4 { font-size: 0.9375rem; font-weight: 600; color: #fff; margin-bottom: 0.3rem; }
.pd-loop-stage p { font-size: 0.75rem; color: #9CA3AF; line-height: 1.5; }

/* ============ CAPABILITIES ============ */
.pd-caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1100px) { .pd-caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .pd-caps-grid { grid-template-columns: 1fr; } }

.pd-cap {
  background: #fff;
  border: 1px solid var(--pd-line-light);
  border-radius: 14px;
  padding: 1.75rem;
  display: flex; flex-direction: column;
  transition: all 0.3s;
  position: relative; overflow: hidden;
}
.pd-cap::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pd-brand), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.pd-cap:hover {
  border-color: var(--pd-brand);
  box-shadow: 0 20px 50px rgba(15,98,254,0.1);
  transform: translateY(-4px);
}
.pd-cap:hover::before { opacity: 1; }

.pd-cap-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.pd-cap-ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.pd-cap-ico.finance { background: linear-gradient(135deg,#FEF3C7,#FCD34D); color:#92400E; }
.pd-cap-ico.monitoring { background: linear-gradient(135deg,#DBEAFE,#60A5FA); color:#1E3A8A; }
.pd-cap-ico.alert { background: linear-gradient(135deg,#FED7AA,#FB923C); color:#7C2D12; }
.pd-cap-ico.algo { background: linear-gradient(135deg,#E9D5FF,#A78BFA); color:#4C1D95; }
.pd-cap-ico.ai { background: linear-gradient(135deg,#CCFBF1,#2DD4BF); color:#134E4A; }
.pd-cap-ico.tri { background: linear-gradient(135deg,#FECACA,#F87171); color:#7F1D1D; }

.pd-cap-head h3 { font-size: 1.125rem; font-weight: 700; color: var(--pd-text); margin-bottom: 0.25rem; letter-spacing:-0.01em; }
.pd-cap-head p { font-size: 0.8125rem; color: var(--pd-text-dim); line-height: 1.55; }

.pd-cap-feats {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.pd-cap-feats li {
  font-size: 0.8125rem;
  color: #374151;
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.6;
}
.pd-cap-feats li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pd-brand);
}

.pd-cap-shot {
  margin-top: auto;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--pd-line-light);
  background: #F3F4F6;
  height: 220px;
}
.pd-cap-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.6s; }
.pd-cap:hover .pd-cap-shot img { transform: scale(1.04); }

/* ============ GALLERY WITH TABS ============ */
.pd-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.pd-tab {
  padding: 0.6rem 1.25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #9CA3AF;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}
.pd-tab:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.pd-tab.active { background: var(--pd-brand); border-color: var(--pd-brand); color: #fff; box-shadow: 0 6px 20px rgba(15,98,254,0.4); }

.pd-gallery-panel { display: none; }
.pd-gallery-panel.active { display: block; animation: pd-fade 0.4s; }
@keyframes pd-fade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }

.pd-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .pd-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pd-gallery-grid { grid-template-columns: 1fr; } }

.pd-gallery-grid figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0F172A;
  transition: all 0.3s;
  cursor: zoom-in;
}
.pd-gallery-grid figure:hover {
  border-color: rgba(15,98,254,0.5);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  transform: translateY(-3px);
}
.pd-gallery-grid img { width: 100%; display: block; transition: transform 0.5s; }
.pd-gallery-grid figure:hover img { transform: scale(1.03); }
.pd-gallery-grid figcaption {
  padding: 0.6rem 0.9rem;
  font-size: 0.8125rem;
  color: #D1D5DB;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ============ TECH STACK GRID ============ */
.pd-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .pd-stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pd-stack-grid { grid-template-columns: 1fr; } }

.pd-stack-card {
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--pd-line-light);
  border-radius: 12px;
  transition: all 0.25s;
}
.pd-stack-card:hover {
  border-color: var(--pd-brand);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,98,254,0.08);
}
.pd-stack-ico {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--pd-brand-dim);
  color: var(--pd-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.pd-stack-card h4 { font-size: 1.0625rem; font-weight: 700; color: var(--pd-text); margin-bottom: 0.4rem; }
.pd-stack-card p { font-size: 0.875rem; color: var(--pd-text-dim); line-height: 1.65; }

/* ============ CTA SECTION ============ */
.pd-cta-sec {
  padding: 5rem 0;
  background: linear-gradient(135deg, #0A0E1A 0%, #0B2D5C 50%, #0A0E1A 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pd-cta-sec::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 800px; height: 800px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(15,98,254,0.2) 0%, transparent 60%);
  pointer-events: none;
}
.pd-cta-sec h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.pd-cta-sec p {
  font-size: 1rem;
  color: #9CA3AF;
  max-width: 42rem;
  margin: 0 auto 2rem;
  line-height: 1.75;
}
.pd-cta-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  .pd-hero { padding: 4rem 0 3rem; }
  .pd-screenshot { transform: none; }
  .pd-screenshot:hover { transform: translateY(-4px); }
  .pd-section { padding: 3.5rem 0; }
  .pd-section-head { margin-bottom: 2.5rem; }
  .pd-cap { padding: 1.25rem; }
}

/* ============ CLI PRODUCT — terminal-style showcase ============ */
.cli-shell {
  padding: 1rem 1.1rem 1.2rem;
  background: linear-gradient(180deg, #0B1020 0%, #060912 100%);
  min-height: 320px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: #D1D5DB;
  line-height: 1.75;
}
.cli-shell .sp { display: block; height: 0.5rem; }
.cli-shell .ok { color: #34D399; }
.cli-shell .prompt { color: #22D3EE; }
.cli-shell .cmd { color: #F8FAFC; }
.cli-shell .arg { color: #FBBF24; }
.cli-shell .agent { color: #7DD3FC; }
.cli-shell .muted { color: #6B7280; }
.cli-shell .highlight { color: #A78BFA; }

.cli-mini {
  background: linear-gradient(180deg, #0B1020 0%, #060912 100%);
  color: #CBD5E1;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.7;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cli-mini .hl { color: #A78BFA; }
.cli-mini .ok { color: #34D399; }
.cli-mini .info { color: #7DD3FC; }

.cli-open-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 768px) {
  .cli-open-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DESKTOP PRODUCT — 纯 CSS 桌面应用 mockup（用于界面展示）
   ============================================================ */
.pd-desk-mock {
  display: flex;
  width: 100%;
  min-height: 320px;
  background: linear-gradient(180deg, #0C1222 0%, #060912 100%);
  font-family: 'Inter', 'PingFang SC', system-ui, sans-serif;
  color: #CBD5E1;
}
.pd-desk-mock.pd-desk-hero {
  min-height: 400px;
}
.pd-desk-side {
  width: 30%;
  max-width: 200px;
  padding: 0.85rem 0.6rem;
  background: rgba(255,255,255,0.03);
  border-right: 1px solid rgba(255,255,255,0.06);
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pd-desk-side-brand {
  color: #10B981;
  font-weight: 700;
  font-size: 0.7rem;
  margin-bottom: 0.6rem;
  padding: 0 0.4rem;
  letter-spacing: 0.02em;
}
.pd-desk-side-label {
  color: #475569;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3rem 0.4rem 0.2rem;
}
.pd-desk-side-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  color: #94A3B8;
  transition: background 0.2s;
}
.pd-desk-side-item i {
  width: 0.85rem;
  font-size: 0.72rem;
  text-align: center;
}
.pd-desk-side-item.active {
  color: #E2E8F0;
  background: rgba(16,185,129,0.12);
}
.pd-desk-side-item.active i {
  color: #34D399;
}

.pd-desk-main {
  flex: 1;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- Chat thread ---- */
.pd-desk-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
  overflow: hidden;
}
.pd-desk-msg {
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  font-size: 0.74rem;
  line-height: 1.55;
}
.pd-desk-msg.user {
  background: rgba(15,98,254,0.1);
  border: 1px solid rgba(15,98,254,0.18);
  align-self: flex-end;
  max-width: 85%;
}
.pd-desk-msg.bot {
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(52,211,153,0.15);
  max-width: 92%;
}
.pd-desk-msg-role {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.pd-desk-msg.bot .pd-desk-msg-role {
  color: #34D399;
}
.pd-desk-msg-text {
  color: #E2E8F0;
  margin-bottom: 0.15rem;
}
.pd-desk-msg-text:last-child { margin-bottom: 0; }
.pd-desk-msg-text .ok {
  color: #34D399;
  font-weight: 600;
  margin-right: 0.3rem;
}
.pd-desk-msg-text .agent {
  color: #7DD3FC;
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pd-desk-msg-text .hl {
  color: #A78BFA;
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.pd-desk-input {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  color: #64748B;
  font-size: 0.72rem;
}
.pd-desk-input i {
  color: #34D399;
  font-size: 0.7rem;
}

/* ---- Skills panel ---- */
.pd-desk-skills {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pd-desk-skill {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: 0.7rem;
}
.pd-desk-skill-ico {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.pd-desk-skill-ico.c1 { background: rgba(15,98,254,0.18); color: #60A5FA; }
.pd-desk-skill-ico.c2 { background: rgba(139,92,246,0.18); color: #A78BFA; }
.pd-desk-skill-ico.c3 { background: rgba(251,146,60,0.18); color: #FB923C; }
.pd-desk-skill-ico.c4 { background: rgba(16,185,129,0.18); color: #34D399; }
.pd-desk-skill > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.pd-desk-skill-name {
  color: #E2E8F0;
  font-weight: 500;
  font-size: 0.72rem;
}
.pd-desk-skill-meta {
  color: #64748B;
  font-size: 0.6rem;
  margin-top: 0.08rem;
}
.pd-desk-skill-toggle {
  width: 28px; height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  position: relative;
  flex-shrink: 0;
}
.pd-desk-skill-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: #64748B;
  transition: all 0.2s;
}
.pd-desk-skill-toggle.on { background: rgba(16,185,129,0.3); }
.pd-desk-skill-toggle.on::after { left: 14px; background: #34D399; }

/* ---- Templates panel ---- */
.pd-desk-templates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.pd-desk-tpl {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
}
.pd-desk-tpl i {
  width: 26px; height: 26px;
  background: rgba(15,98,254,0.15);
  color: #60A5FA;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.pd-desk-tpl-name {
  color: #E2E8F0;
  font-size: 0.72rem;
  font-weight: 500;
}
.pd-desk-tpl-meta {
  color: #64748B;
  font-size: 0.58rem;
  margin-top: 0.1rem;
}

/* ---- ACL panel ---- */
.pd-desk-acl {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.pd-desk-acl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.7rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
}
.pd-desk-acl-user {
  color: #E2E8F0;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pd-desk-acl-user i {
  color: #64748B;
  font-size: 0.7rem;
}
.pd-desk-acl-tag {
  font-size: 0.6rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
}
.pd-desk-acl-tag.allow {
  background: rgba(16,185,129,0.15);
  color: #6EE7B7;
  border: 1px solid rgba(52,211,153,0.25);
}
.pd-desk-acl-tag.admin {
  background: rgba(251,146,60,0.15);
  color: #FDBA74;
  border: 1px solid rgba(251,146,60,0.25);
}

/* ---- Gallery 4-card grid ---- */
.pd-desk-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1023px) {
  .pd-desk-gallery { grid-template-columns: 1fr; }
}
.pd-desk-card {
  margin: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.pd-desk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(52,211,153,0.3);
  box-shadow: 0 20px 40px -18px rgba(16,185,129,0.3);
}
.pd-desk-card .pd-desk-mock {
  min-height: 260px;
  border-radius: 0;
  border: none;
}
.pd-desk-card figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #94A3B8;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}