/* ==========================================================================
   TGP Custom Ordering v2 — design system (v2.1 polish)
   Scope: everything under .tgpco2. Dark, flat, editorial. Inter. Violet accent.
   ========================================================================== */

.tgpco2 {
  --c-bg: #0d0d0d;
  --c-surface: #151515;
  --c-surface-2: #1b1b1b;
  --c-surface-3: #222222;
  --c-surface-4: #2b2b2b;
  --c-border: rgba(255, 255, 255, 0.075);
  --c-border-strong: rgba(255, 255, 255, 0.14);
  --c-text: #f5f5f7;
  --c-text-2: #b6b6c0;
  --c-text-3: #7d7d8a;
  --c-accent: #7c5cff;
  --c-accent-hover: #8f74ff;
  --c-accent-soft: rgba(124, 92, 255, 0.14);
  --c-accent-text: #b9a8ff;
  --c-green: #22c55e;
  --c-green-text: #6fe09a;
  --c-green-soft: rgba(34, 197, 94, 0.13);
  --c-amber: #f5b342;
  --c-amber-text: #ffcf7a;
  --c-amber-soft: rgba(245, 179, 66, 0.13);
  --c-red: #f26363;
  --c-red-text: #ff9b9b;
  --c-red-soft: rgba(242, 99, 99, 0.13);
  --c-slate-soft: rgba(139, 139, 160, 0.14);
  --r-xl: 20px;
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 8px;
  --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 28px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 24px 80px rgba(0, 0, 0, 0.6);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --pad-card: 26px 28px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
.tgpco2 *, .tgpco2 *::before, .tgpco2 *::after { box-sizing: border-box; }
.tgpco2 h1, .tgpco2 h2, .tgpco2 h3, .tgpco2 h4 { color: var(--c-text); font-family: var(--font) !important; margin: 0; letter-spacing: -0.015em; line-height: 1.2; text-transform: none !important; }
.tgpco2 p { margin: 0; }
.tgpco2 a { color: var(--c-accent-text); text-decoration: none; }
.tgpco2 a:hover { color: #fff; }
.tgpco2 img { max-width: 100%; display: block; }
.tgpco2 svg.tgpco2-ic { flex: none; }
.tgpco2 ::selection { background: rgba(124, 92, 255, 0.35); }
.tgpco2 [hidden][hidden] { display: none !important; }
.tgpco2 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* canvas: the theme body is white + boxed; v2 pages own the canvas ------- */
body.tgpco2-page, body.tgpco2-host { background: #0d0d0d !important; margin: 0 !important; padding: 0 !important; }
body.tgpco2-page #page, body.tgpco2-page .site, body.tgpco2-page #content, body.tgpco2-page .site-content, body.tgpco2-page .site-main,
body.tgpco2-host #page, body.tgpco2-host .site, body.tgpco2-host #content, body.tgpco2-host .site-content, body.tgpco2-host .site-main { background: transparent !important; }
body.tgpco2-page #page, body.tgpco2-page .site, body.tgpco2-page #content, body.tgpco2-page .site-content, body.tgpco2-page .site-main,
body.tgpco2-host:not(.marketking_store_page_individual) #page, body.tgpco2-host:not(.marketking_store_page_individual) .site, body.tgpco2-host:not(.marketking_store_page_individual) #content, body.tgpco2-host:not(.marketking_store_page_individual) .site-content, body.tgpco2-host:not(.marketking_store_page_individual) .site-main { max-width: none !important; }
body.tgpco2-page main.tgpco2-page { min-height: 72vh; }

/* page shell ------------------------------------------------------------ */
.tgpco2-page { padding: clamp(22px, 3.5vw, 46px) clamp(14px, 3vw, 28px) 80px; }
.tgpco2-shell { max-width: 1180px; margin: 0 auto; }
.tgpco2-shell--narrow { max-width: 960px; }
.tgpco2-shell--wide { max-width: 1320px; }
.tgpco2-inline { padding: 0; }
.tgpco2-crumbs { display: flex; align-items: center; gap: 8px; color: var(--c-text-3); font-size: 13px; margin-bottom: 18px; flex-wrap: wrap; }
.tgpco2-crumbs a { color: var(--c-text-2); }
.tgpco2-crumbs a:hover { color: #fff; }
.tgpco2-crumbs .sep { opacity: 0.5; }

/* typography ----------------------------------------------------------- */
.tgpco2-h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; }
.tgpco2-h2 { font-size: 20px; font-weight: 700; }
.tgpco2-h3 { font-size: 16px; font-weight: 600; }
.tgpco2-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); }
.tgpco2-muted { color: var(--c-text-2); }
.tgpco2-faint { color: var(--c-text-3); }
.tgpco2-small { font-size: 13px; }
.tgpco2-mono { font-variant-numeric: tabular-nums; }
.tgpco2-lead { font-size: 16px; color: var(--c-text-2); }

/* cards ---------------------------------------------------------------- */
.tgpco2-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--pad-card); box-shadow: var(--shadow-1); }
.tgpco2-card + .tgpco2-card { margin-top: 20px; }
.tgpco2-card--tight { padding: 20px 22px; }
.tgpco2-card--sub { background: var(--c-surface-2); box-shadow: none; }
.tgpco2-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.tgpco2-card__title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.tgpco2-card__title .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2-card__meta { color: var(--c-text-3); font-size: 13px; }
.tgpco2-stack > * + * { margin-top: 20px; }
.tgpco2-stack--sm > * + * { margin-top: 12px; }
.tgpco2-divider { height: 1px; background: var(--c-border); margin: 20px 0; }

/* layout --------------------------------------------------------------- */
.tgpco2-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.tgpco2-layout__main { min-width: 0; }
.tgpco2-layout__side { position: sticky; top: 24px; min-width: 0; }
.tgpco2-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tgpco2-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tgpco2-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tgpco2-row--between { justify-content: space-between; }
.tgpco2-row--end { justify-content: flex-end; }
.tgpco2-col { display: flex; flex-direction: column; gap: 10px; }

/* art placeholder (no icons) ------------------------------------------- */
.tgpco2-artph { position: relative; display: block; width: 100%; height: 100%; min-height: inherit; background: linear-gradient(135deg, #1d1d1d 0%, #262626 55%, #1a1a22 100%); overflow: hidden; }
.tgpco2-artph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(124, 92, 255, 0.35), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(124, 92, 255, 0.18), transparent 50%); }
.tgpco2-artph::after { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 34%; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 3px, transparent 3px 8px); -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); clip-path: polygon(0 45%, 6% 30%, 12% 55%, 18% 20%, 24% 60%, 30% 35%, 36% 70%, 42% 10%, 48% 65%, 54% 30%, 60% 75%, 66% 25%, 72% 60%, 78% 15%, 84% 55%, 90% 35%, 96% 50%, 100% 42%, 100% 58%, 96% 60%, 90% 70%, 84% 50%, 78% 85%, 72% 40%, 66% 75%, 60% 25%, 54% 70%, 48% 35%, 42% 90%, 36% 30%, 30% 65%, 24% 40%, 18% 80%, 12% 45%, 6% 70%, 0 55%); }

/* pills / tags --------------------------------------------------------- */
.tgpco2-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; background: var(--c-slate-soft); color: var(--c-text-2); border: 1px solid transparent; }
.tgpco2-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tgpco2-pill--plain::before { display: none; }
.tgpco2-pill--violet, .tgpco2-pill--accent, .tgpco2-pill--sky { background: var(--c-accent-soft); color: var(--c-accent-text); }
.tgpco2-pill--green { background: var(--c-green-soft); color: var(--c-green-text); }
.tgpco2-pill--amber { background: var(--c-amber-soft); color: var(--c-amber-text); }
.tgpco2-pill--red { background: var(--c-red-soft); color: var(--c-red-text); }
.tgpco2-pill--slate { background: var(--c-slate-soft); color: var(--c-text-2); }
.tgpco2-pill--lg { font-size: 14px; padding: 7px 14px; }
.tgpco2-tag { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 6px; font-size: 12px; background: var(--c-surface-3); color: var(--c-text-2); border: 1px solid var(--c-border); }
.tgpco2-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11.5px; font-weight: 700; background: var(--c-accent); color: #fff; }

/* buttons (hardened against theme/Elementor kit) ------------------------ */
.tgpco2 button, .tgpco2 input[type="button"], .tgpco2 input[type="submit"] { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; color: inherit; font: inherit; line-height: inherit; text-transform: none; letter-spacing: 0; box-shadow: none; min-height: 0; height: auto; width: auto; cursor: pointer; }
.tgpco2 .tgpco2-btn, .tgpco2 button.tgpco2-btn, .tgpco2 a.tgpco2-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  padding: 11px 18px !important; border-radius: var(--r-md) !important; font-family: var(--font) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.1 !important;
  border: 1px solid transparent !important; cursor: pointer; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; width: auto !important; white-space: nowrap !important; user-select: none;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease), transform 0.16s var(--ease);
}
.tgpco2 .tgpco2-btn:active { transform: translateY(1px); }
.tgpco2 .tgpco2-btn:disabled, .tgpco2 .tgpco2-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.tgpco2 .tgpco2-btn--primary { background: var(--c-accent) !important; color: #fff !important; }
.tgpco2 .tgpco2-btn--primary:hover, .tgpco2 .tgpco2-btn--primary:focus { background: var(--c-accent-hover) !important; color: #fff !important; }
.tgpco2 .tgpco2-btn--secondary { background: var(--c-surface-3) !important; color: var(--c-text) !important; border-color: var(--c-border-strong) !important; }
.tgpco2 .tgpco2-btn--secondary:hover, .tgpco2 .tgpco2-btn--secondary:focus { background: var(--c-surface-4) !important; color: #fff !important; }
.tgpco2 .tgpco2-btn--ghost { background: transparent !important; color: var(--c-text-2) !important; border-color: transparent !important; }
.tgpco2 .tgpco2-btn--ghost:hover, .tgpco2 .tgpco2-btn--ghost:focus { background: var(--c-surface-3) !important; color: #fff !important; }
.tgpco2 .tgpco2-btn--danger { background: var(--c-red-soft) !important; color: var(--c-red-text) !important; border-color: rgba(242, 99, 99, 0.25) !important; }
.tgpco2 .tgpco2-btn--danger:hover { background: rgba(242, 99, 99, 0.24) !important; color: #fff !important; }
.tgpco2 .tgpco2-btn--success { background: var(--c-green) !important; color: #08220f !important; }
.tgpco2 .tgpco2-btn--success:hover { background: #34d46c !important; color: #08220f !important; }
.tgpco2 .tgpco2-btn--white { background: #fff !important; color: #0d0d0d !important; }
.tgpco2 .tgpco2-btn--white:hover { background: #e9e9ef !important; color: #0d0d0d !important; }
.tgpco2 .tgpco2-btn--lg { padding: 14px 22px !important; font-size: 15px !important; border-radius: 12px !important; }
.tgpco2 .tgpco2-btn--sm { padding: 8px 12px !important; font-size: 13px !important; border-radius: 8px !important; }
.tgpco2 .tgpco2-btn--block, .tgpco2 button.tgpco2-btn--block, .tgpco2 a.tgpco2-btn--block { width: 100% !important; display: inline-flex !important; justify-content: center; }
.tgpco2 .tgpco2-btn--icon { padding: 9px !important; width: 38px !important; height: 38px !important; border-radius: 10px !important; }
.tgpco2 .tgpco2-btn .tgpco2-spin { display: none; }
.tgpco2 .tgpco2-btn.is-loading { pointer-events: none; opacity: 0.85; }
.tgpco2 .tgpco2-btn.is-loading .tgpco2-spin { display: inline-block; }
.tgpco2 .tgpco2-btn.is-loading .tgpco2-btn__label { opacity: 0.6; }
.tgpco2-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: tgpco2-rot 0.8s linear infinite; flex: none; }
@keyframes tgpco2-rot { to { transform: rotate(360deg); } }
.tgpco2-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tgpco2-actions--end { justify-content: flex-end; }

/* forms ---------------------------------------------------------------- */
.tgpco2-field { display: flex; flex-direction: column; gap: 7px; }
.tgpco2-field + .tgpco2-field { margin-top: 16px; }
.tgpco2-label { font-size: 13.5px; font-weight: 600; color: var(--c-text-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tgpco2-label .opt { font-weight: 500; color: var(--c-text-3); font-size: 12px; }
.tgpco2-help { font-size: 12.5px; color: var(--c-text-3); }
.tgpco2 input.tgpco2-input, .tgpco2 textarea.tgpco2-textarea, .tgpco2 select.tgpco2-select {
  width: 100% !important; background: var(--c-surface-2) !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong) !important; border-radius: var(--r-md) !important;
  padding: 11px 13px !important; font-family: var(--font) !important; font-size: 14.5px !important; line-height: 1.4 !important; outline: none; box-shadow: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; appearance: none; -webkit-appearance: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.tgpco2 input.tgpco2-input::placeholder, .tgpco2 textarea.tgpco2-textarea::placeholder { color: var(--c-text-3); }
.tgpco2 input.tgpco2-input:focus, .tgpco2 textarea.tgpco2-textarea:focus, .tgpco2 select.tgpco2-select:focus { border-color: var(--c-accent) !important; background: #1e1e1e !important; outline: none !important; box-shadow: none !important; }
.tgpco2 textarea.tgpco2-textarea { min-height: 120px; resize: vertical; line-height: 1.5 !important; }
.tgpco2-select-wrap { position: relative; }
.tgpco2-select-wrap .tgpco2-ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--c-text-3); }
.tgpco2 select.tgpco2-select { padding-right: 38px !important; cursor: pointer; }
.tgpco2 select.tgpco2-select option { background: #1b1b21; color: #fff; }
.tgpco2-input-group { display: flex; align-items: stretch; }
.tgpco2 .tgpco2-input-group input.tgpco2-input { border-radius: var(--r-md) 0 0 var(--r-md) !important; }
.tgpco2-input-group__addon { display: flex; align-items: center; padding: 0 13px; background: var(--c-surface-3); border: 1px solid var(--c-border-strong); border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--c-text-2); font-size: 13.5px; white-space: nowrap; }
.tgpco2-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--c-text-2); }
.tgpco2-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-accent); flex: none; cursor: pointer; }
.tgpco2-check b { color: var(--c-text); font-weight: 600; }
.tgpco2-error { color: var(--c-red-text); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.tgpco2-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tgpco2-form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tgpco2-form-row .tgpco2-field + .tgpco2-field { margin-top: 0; }
.tgpco2-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tgpco2-choice__item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--c-border-strong); background: var(--c-surface-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.tgpco2-choice__item:hover { border-color: rgba(255, 255, 255, 0.25); }
.tgpco2-choice__item.is-selected { border-color: var(--c-accent); background: var(--c-accent-soft); }
.tgpco2-choice__item input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.tgpco2-choice__title { font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tgpco2-choice__sub { font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-choice__price { font-size: 13px; color: var(--c-accent-text); font-weight: 600; white-space: nowrap; }

/* dropzone / progress / files ------------------------------------------ */
.tgpco2-drop { border: 1.5px dashed var(--c-border-strong); border-radius: var(--r-lg); padding: 30px 22px; text-align: center; background: var(--c-surface-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tgpco2-drop:hover, .tgpco2-drop.is-over { border-color: var(--c-accent); background: var(--c-accent-soft); }
.tgpco2-drop .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2-drop__title { font-weight: 600; }
.tgpco2-drop__hint { font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-drop input { display: none; }
.tgpco2-progress { height: 8px; border-radius: 4px; background: var(--c-surface-3); overflow: hidden; }
.tgpco2-progress__bar { height: 100%; width: 0; background: var(--c-accent); transition: width 0.2s linear; border-radius: 4px; }
.tgpco2-files { display: flex; flex-direction: column; gap: 8px; }
.tgpco2-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); min-width: 0; }
.tgpco2-file__icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--c-surface-3); color: var(--c-text-2); flex: none; }
.tgpco2-file__body { min-width: 0; flex: 1; }
.tgpco2-file__name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-file__meta { font-size: 12px; color: var(--c-text-3); }
.tgpco2-file__act { display: flex; gap: 6px; flex: none; }

/* avatar / person ------------------------------------------------------- */
.tgpco2-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--c-surface-3); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--c-text-2); flex: none; border: 1px solid var(--c-border); }
.tgpco2-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.tgpco2-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.tgpco2-avatar--xl { width: 72px; height: 72px; font-size: 22px; }
.tgpco2-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tgpco2-person__name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-person__sub { font-size: 12.5px; color: var(--c-text-3); }

/* order header band ---------------------------------------------------- */
.tgpco2-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: flex-start; }
.tgpco2-band__art { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; background: var(--c-surface-3); border: 1px solid var(--c-border); }
.tgpco2-band__art img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-band__title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tgpco2-band__sub { color: var(--c-text-2); font-size: 14px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.tgpco2-band__sub .sep { color: var(--c-text-3); }

/* milestones ----------------------------------------------------------- */
.tgpco2-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.tgpco2-step { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tgpco2-step__bar { height: 4px; border-radius: 2px; background: var(--c-surface-3); position: relative; overflow: hidden; }
.tgpco2-step.is-done .tgpco2-step__bar { background: var(--c-green); }
.tgpco2-step.is-current .tgpco2-step__bar { background: var(--c-accent); }
.tgpco2-step.is-current .tgpco2-step__bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: tgpco2-slide 1.8s ease-in-out infinite; }
@keyframes tgpco2-slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tgpco2-step__label { font-size: 12.5px; font-weight: 600; color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.tgpco2-step.is-done .tgpco2-step__label, .tgpco2-step.is-current .tgpco2-step__label { color: var(--c-text); }
.tgpco2-step__date { font-size: 11.5px; color: var(--c-text-3); }
.tgpco2-steps--cancelled .tgpco2-step__bar { background: var(--c-red-soft); }

/* next-action ----------------------------------------------------------- */
.tgpco2-next { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface)); border: 1px solid var(--c-border-strong); }
.tgpco2-next__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent-text); }
.tgpco2-next--green .tgpco2-next__icon { background: var(--c-green-soft); color: var(--c-green-text); }
.tgpco2-next--amber .tgpco2-next__icon { background: var(--c-amber-soft); color: var(--c-amber-text); }
.tgpco2-next--red .tgpco2-next__icon { background: var(--c-red-soft); color: var(--c-red-text); }
.tgpco2-next__title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.tgpco2-next__text { color: var(--c-text-2); font-size: 14px; }
.tgpco2-next__actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* key/value, brief, totals --------------------------------------------- */
.tgpco2-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; font-size: 14px; }
.tgpco2-kv dt { color: var(--c-text-3); }
.tgpco2-kv dd { margin: 0; color: var(--c-text); min-width: 0; word-break: break-word; }
.tgpco2-kv dd.strong { font-weight: 600; }
.tgpco2-kv--tight { grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; }
.tgpco2-brief { white-space: pre-wrap; word-break: break-word; color: var(--c-text-2); font-size: 14.5px; line-height: 1.6; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 14px 16px; }
.tgpco2-totals { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.tgpco2-totals__row { display: flex; justify-content: space-between; gap: 12px; color: var(--c-text-2); }
.tgpco2-totals__row b { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tgpco2-totals__row--total { padding-top: 10px; border-top: 1px solid var(--c-border); font-size: 15px; color: var(--c-text); }
.tgpco2-totals__row--total b { font-size: 20px; font-weight: 700; }
.tgpco2-totals__row--due b { color: var(--c-accent-text); }
.tgpco2-paid { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--c-green-text); }

/* audio player --------------------------------------------------------- */
.tgpco2-player { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); min-width: 0; }
.tgpco2 button.tgpco2-player__btn { flex: 0 0 auto; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: var(--c-accent) !important; color: #fff !important; display: grid !important; place-items: center !important; padding: 0 !important; transition: background 0.15s, transform 0.15s; }
.tgpco2 button.tgpco2-player__btn:hover { background: var(--c-accent-hover) !important; transform: scale(1.04); }
.tgpco2-player__wave { flex: 1 1 auto; min-width: 0; height: 38px; cursor: pointer; position: relative; }
.tgpco2-player__wave canvas { display: block; width: 100%; height: 100%; }
.tgpco2-player__time { flex: 0 0 auto; font-size: 12px; color: var(--c-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; gap: 5px; align-items: baseline; }
.tgpco2-player__time i { font-style: normal; opacity: 0.5; }
.tgpco2-player.is-playing .tgpco2-player__time [data-cur] { color: var(--c-text); }
.tgpco2 a.tgpco2-player__dl { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--c-text-3); border: 1px solid var(--c-border); background: transparent; transition: color 0.15s, border-color 0.15s; }
.tgpco2 a.tgpco2-player__dl:hover { color: var(--c-text); border-color: var(--c-border-strong); }
.tgpco2-player--mini { padding: 8px 12px 8px 8px; gap: 10px; }
.tgpco2 .tgpco2-player--mini button.tgpco2-player__btn { width: 34px !important; height: 34px !important; }
.tgpco2-player--mini .tgpco2-player__wave { height: 32px; }

/* chat ----------------------------------------------------------------- */
.tgpco2-chat { display: flex; flex-direction: column; min-height: 420px; }
.tgpco2-chat--page { min-height: calc(100vh - 260px); }
.tgpco2-chat__thread { flex: 1; overflow-y: auto; padding: 4px 2px; display: flex; flex-direction: column; gap: 14px; max-height: 560px; scroll-behavior: smooth; }
.tgpco2-chat--page .tgpco2-chat__thread { max-height: none; }
.tgpco2-msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; max-width: 78%; }
.tgpco2-msg.is-mine { margin-left: auto; grid-template-columns: minmax(0, 1fr); }
.tgpco2-msg__bubble { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; word-break: break-word; }
.tgpco2-msg.is-mine .tgpco2-msg__bubble { background: var(--c-accent-soft); border-color: rgba(124, 92, 255, 0.28); border-radius: 14px 14px 4px 14px; }
.tgpco2-msg__meta { font-size: 11.5px; color: var(--c-text-3); margin-top: 4px; display: flex; gap: 8px; }
.tgpco2-msg.is-mine .tgpco2-msg__meta { justify-content: flex-end; }
.tgpco2-msg__img { max-width: 320px; border-radius: 10px; margin-top: 8px; border: 1px solid var(--c-border); }
.tgpco2-msg .tgpco2-file, .tgpco2-msg .tgpco2-player { margin-top: 8px; }
.tgpco2-msg:has(.tgpco2-player) { max-width: min(100%, 520px); width: 100%; }
.tgpco2-msg:has(.tgpco2-player) .tgpco2-msg__bubble { width: 100%; }
.tgpco2-msg .tgpco2-player { width: 100%; background: rgba(255, 255, 255, 0.04); }
.tgpco2-msg.is-mine .tgpco2-player { background: rgba(0, 0, 0, 0.22); border-color: rgba(255, 255, 255, 0.08); }
.tgpco2-chat__composer { margin-top: 14px; border-top: 1px solid var(--c-border); padding-top: 14px; }
.tgpco2-chat__box { display: flex; align-items: flex-end; gap: 8px; background: var(--c-surface-2); border: 1px solid var(--c-border-strong); border-radius: 14px; padding: 8px 8px 8px 14px; }
.tgpco2-chat__box:focus-within { border-color: var(--c-accent); }
.tgpco2 .tgpco2-chat__box textarea { flex: 1; background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: var(--c-text) !important; font-family: var(--font) !important; font-size: 14.5px !important; resize: none; min-height: 24px !important; max-height: 160px; padding: 6px 0 !important; margin: 0 !important; line-height: 1.45; }
.tgpco2 .tgpco2-chat__box textarea::placeholder { color: var(--c-text-3); }
.tgpco2-chat__pending { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-text-2); margin-bottom: 8px; }
.tgpco2-chat__hint { font-size: 12px; color: var(--c-text-3); margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.tgpco2-chat__empty { text-align: center; color: var(--c-text-3); padding: 40px 10px; font-size: 14px; }
.tgpco2-chat__locked { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text-2); font-size: 14px; }

/* notices / toasts ----------------------------------------------------- */
.tgpco2-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border-strong); color: var(--c-text-2); font-size: 14px; }
.tgpco2-notice .tgpco2-ic { flex: none; margin-top: 1px; color: var(--c-accent-text); }
.tgpco2-notice--success { background: var(--c-green-soft); border-color: rgba(34, 197, 94, 0.3); color: #d9ffe6; }
.tgpco2-notice--success .tgpco2-ic { color: var(--c-green-text); }
.tgpco2-notice--warning { background: var(--c-amber-soft); border-color: rgba(245, 179, 66, 0.3); color: #ffe7b8; }
.tgpco2-notice--warning .tgpco2-ic { color: var(--c-amber-text); }
.tgpco2-notice--danger { background: var(--c-red-soft); border-color: rgba(242, 99, 99, 0.3); color: #ffd6d6; }
.tgpco2-notice--danger .tgpco2-ic { color: var(--c-red-text); }
.tgpco2-notice--info { background: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text-2); }
.tgpco2-notice b { font-weight: 600; color: var(--c-text); }
.tgpco2-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 40px)); font-family: var(--font); }
.tgpco2-toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #202020; border: 1px solid var(--c-border-strong); color: #f5f5f7; font-size: 14px; box-shadow: var(--shadow-2); animation: tgpco2-in 0.2s var(--ease); }
.tgpco2-toast .tgpco2-ic { flex: none; color: var(--c-accent-text); }
.tgpco2-toast--success .tgpco2-ic { color: var(--c-green-text); }
.tgpco2-toast--error .tgpco2-ic { color: var(--c-red-text); }
@keyframes tgpco2-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* modals --------------------------------------------------------------- */
.tgpco2-modal { position: fixed; inset: 0; z-index: 99990; display: none; align-items: center; justify-content: center; padding: 24px; font-family: var(--font); }
.tgpco2-modal.is-open { display: flex; }
.tgpco2-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 8, 12, 0.18); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tgpco2-modal__panel { position: relative; width: 100%; max-width: 540px; max-height: calc(100vh - 48px); overflow: auto; background: #181818; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; padding: 0; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); color: var(--c-text); animation: tgpco2-pop 0.22s var(--ease); }
@keyframes tgpco2-pop { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.tgpco2-modal__panel--lg { max-width: 860px; }
.tgpco2-modal__panel--xl { max-width: 1040px; }
.tgpco2-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 18px; }
.tgpco2-modal__head--icon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: flex-start; }
.tgpco2-modal__badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent-text); flex: none; }
.tgpco2-modal__badge--danger { background: var(--c-red-soft); color: var(--c-red-text); }
.tgpco2-modal__badge--success { background: var(--c-green-soft); color: var(--c-green-text); }
.tgpco2-modal__title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.tgpco2-modal__sub { color: var(--c-text-3); font-size: 13.5px; margin-top: 4px; line-height: 1.5; }
.tgpco2 button.tgpco2-modal__close { background: var(--c-surface-3) !important; border: 1px solid var(--c-border) !important; color: var(--c-text-2) !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; padding: 0 !important; flex: none; }
.tgpco2 button.tgpco2-modal__close:hover { color: #fff !important; background: var(--c-surface-4) !important; }
.tgpco2-modal__body { padding: 0 28px 24px; }
.tgpco2-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 28px 24px; border-top: 1px solid var(--c-border); background: var(--c-surface-2); border-radius: 0 0 22px 22px; flex-wrap: wrap; }
.tgpco2-modal--wizard .tgpco2-modal__panel { max-width: 1000px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tgpco2-noscroll { overflow: hidden !important; }

/* tabs / chips / filters ----------------------------------------------- */
.tgpco2-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 20px; overflow-x: auto; }
.tgpco2 button.tgpco2-tab { padding: 10px 14px !important; background: none !important; color: var(--c-text-3) !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; margin-bottom: -1px; white-space: nowrap !important; display: inline-flex !important; gap: 8px; align-items: center; }
.tgpco2 button.tgpco2-tab:hover { color: var(--c-text) !important; }
.tgpco2 button.tgpco2-tab.is-active { color: var(--c-text) !important; border-bottom-color: var(--c-accent) !important; }
.tgpco2-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tgpco2-search { position: relative; flex: 1; min-width: 220px; }
.tgpco2-search .tgpco2-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-text-3); }
.tgpco2 .tgpco2-search input.tgpco2-input { padding-left: 38px !important; }
.tgpco2-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tgpco2 button.tgpco2-chip, .tgpco2 a.tgpco2-chip { padding: 7px 12px !important; border-radius: var(--r-pill) !important; border: 1px solid var(--c-border-strong) !important; background: transparent !important; color: var(--c-text-2) !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer; display: inline-flex !important; align-items: center; gap: 6px; white-space: nowrap !important; }
.tgpco2 button.tgpco2-chip:hover, .tgpco2 a.tgpco2-chip:hover { color: #fff !important; border-color: rgba(255, 255, 255, 0.3) !important; }
.tgpco2 button.tgpco2-chip.is-active, .tgpco2 a.tgpco2-chip.is-active { background: #fff !important; color: #0d0d0d !important; border-color: #fff !important; }
.tgpco2-chip .tgpco2-count { background: var(--c-surface-3); color: var(--c-text-2); }
.tgpco2-chip.is-active .tgpco2-count { background: rgba(0, 0, 0, 0.12); color: #0d0d0d; }

/* stat tiles / order rows ---------------------------------------------- */
.tgpco2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tgpco2-stat { padding: 16px 18px; border-radius: var(--r-lg); background: var(--c-surface-2); border: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 4px; }
.tgpco2-stat__label { font-size: 12.5px; color: var(--c-text-3); font-weight: 500; }
.tgpco2-stat__value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.tgpco2-stat__value small { font-size: 13px; color: var(--c-text-3); font-weight: 500; }
.tgpco2-stat--accent .tgpco2-stat__value { color: var(--c-accent-text); }
.tgpco2-orders { display: flex; flex-direction: column; gap: 12px; }
.tgpco2-order { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); transition: border-color 0.15s, background 0.15s; text-decoration: none; color: inherit; }
.tgpco2-order:hover { border-color: rgba(255, 255, 255, 0.22); background: var(--c-surface-2); color: inherit; }
.tgpco2-order.is-attention { border-color: rgba(124, 92, 255, 0.45); }
.tgpco2-order__art { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--c-surface-3); }
.tgpco2-order__art img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-order__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tgpco2-order__title { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-order__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--c-text-3); align-items: center; }
.tgpco2-order__meta .tgpco2-person__name { font-size: 13px; font-weight: 500; color: var(--c-text-2); }
.tgpco2-order__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.tgpco2-order__price { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tgpco2-order__cta { font-size: 13px; color: var(--c-accent-text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.tgpco2-results { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--c-text-3); font-size: 13.5px; margin-bottom: 14px; flex-wrap: wrap; }
.tgpco2-empty { text-align: center; padding: 48px 20px; color: var(--c-text-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tgpco2-empty h3 { color: var(--c-text); }
.tgpco2-skel { background: linear-gradient(90deg, var(--c-surface-2), var(--c-surface-3), var(--c-surface-2)); background-size: 200% 100%; animation: tgpco2-skel 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes tgpco2-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.tgpco2-faq details { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); padding: 0 18px; }
.tgpco2-faq details + details { margin-top: 8px; }
.tgpco2-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tgpco2-faq summary::-webkit-details-marker { display: none; }
.tgpco2-faq summary .tgpco2-ic { color: var(--c-text-3); transition: transform 0.15s; }
.tgpco2-faq details[open] summary .tgpco2-ic { transform: rotate(180deg); }
.tgpco2-faq p { padding: 0 0 16px; color: var(--c-text-2); font-size: 14px; }
.tgpco2-section { margin-top: 56px; }
.tgpco2-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.tgpco2-section__title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.tgpco2-section__sub { color: var(--c-text-3); margin-top: 4px; }

/* stars ---------------------------------------------------------------- */
.tgpco2-stars { display: inline-flex; gap: 2px; color: var(--c-amber-text); align-items: center; }
.tgpco2-stars .tgpco2-ic { width: 13px; height: 13px; fill: currentColor; }
.tgpco2-stars .off .tgpco2-ic { color: rgba(255, 255, 255, 0.18); fill: rgba(255, 255, 255, 0.18); }
.tgpco2-stars small { color: var(--c-text-3); font-size: 12px; margin-left: 4px; }
.tgpco2-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--c-text); }
.tgpco2-rating .tgpco2-ic { color: var(--c-amber-text); fill: var(--c-amber-text); }
.tgpco2-rating small { color: var(--c-text-3); font-weight: 500; }

/* ======================================================================
   MARKETPLACE
   ====================================================================== */
.tgpco2-mk-hero { padding: 34px 0 30px; }
.tgpco2-mk-hero__title { font-size: clamp(34px, 5vw, 58px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; max-width: 820px; }
.tgpco2-mk-hero__title em { font-style: normal; color: var(--c-accent-text); }
.tgpco2-mk-hero__lead { font-size: 17px; color: var(--c-text-2); max-width: 640px; margin-top: 14px; }
.tgpco2-mk-search { display: flex; align-items: center; gap: 8px; max-width: 720px; padding: 8px 8px 8px 18px; background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: 16px; margin-top: 24px; transition: border-color 0.15s; }
.tgpco2-mk-search:focus-within { border-color: var(--c-accent); }
.tgpco2-mk-search .tgpco2-ic { color: var(--c-text-3); flex: none; }
.tgpco2 .tgpco2-mk-search input { flex: 1; background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: var(--c-text) !important; font-family: var(--font) !important; font-size: 16px !important; padding: 10px 6px !important; margin: 0 !important; min-width: 0; }
.tgpco2 .tgpco2-mk-search input::placeholder { color: var(--c-text-3); }
.tgpco2-mk-popular { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--c-text-3); }
.tgpco2-mk-trust { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--c-border); }
.tgpco2-mk-trust__item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--c-text-2); }
.tgpco2-mk-trust__item .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2-mk-trust__item b { color: var(--c-text); font-weight: 700; font-size: 16px; margin-right: 2px; }

.tgpco2-mk-cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.tgpco2 button.tgpco2-mk-cat { display: flex !important; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 16px 14px !important; border-radius: var(--r-lg) !important; background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; color: var(--c-text) !important; text-align: left !important; white-space: normal !important; transition: border-color 0.15s, transform 0.15s var(--ease), background 0.15s; width: auto !important; }
.tgpco2 button.tgpco2-mk-cat:hover { border-color: rgba(255, 255, 255, 0.25) !important; transform: translateY(-2px); }
.tgpco2 button.tgpco2-mk-cat.is-active { border-color: var(--c-accent) !important; background: var(--c-accent-soft) !important; }
.tgpco2-mk-cat__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--c-surface-3); color: var(--c-accent-text); }
.tgpco2-mk-cat.is-active .tgpco2-mk-cat__icon { background: var(--c-accent); color: #fff; }
.tgpco2-mk-cat__label { font-weight: 600; font-size: 14px; line-height: 1.25; }
.tgpco2-mk-cat__count { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }

.tgpco2-mk-producers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.tgpco2-mk-producer { scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s var(--ease); }
.tgpco2-mk-producer:hover { border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); color: inherit; }
.tgpco2-mk-producer__top { display: flex; align-items: center; gap: 12px; }
.tgpco2-mk-producer__name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-mk-producer__meta { display: flex; gap: 12px; font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-mk-producer__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-border); font-size: 13px; color: var(--c-text-2); }
.tgpco2-mk-producer__foot b { color: var(--c-text); }

.tgpco2-toolbar { position: sticky; top: 0; z-index: 5; background: rgba(12, 12, 15, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 12px 0; margin: 4px 0 20px; border-bottom: 1px solid var(--c-border); }
.tgpco2-toolbar__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* service card */
.tgpco2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.tgpco2-mk-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--c-border); border-radius: var(--r-xl); background: var(--c-surface); overflow: hidden; }
.tgpco2-mk-how__step { padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--c-border); }
.tgpco2-mk-how__step:last-child { border-right: 0; }
.tgpco2-mk-how__n { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--c-accent-text); }
.tgpco2-mk-how__t { font-weight: 700; font-size: 16px; }
.tgpco2-mk-how__d { font-size: 13.5px; color: var(--c-text-2); line-height: 1.55; }
.tgpco2-mk-guar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tgpco2-mk-guar__item { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: var(--r-lg); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.tgpco2-mk-guar__item .tgpco2-ic { color: var(--c-accent-text); flex: none; margin-top: 2px; }
.tgpco2-mk-guar__t { font-weight: 600; font-size: 14px; }
.tgpco2-mk-guar__d { font-size: 12.5px; color: var(--c-text-3); margin-top: 2px; }

/* wizard --------------------------------------------------------------- */
.tgpco2-wiz { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 560px; max-height: calc(100vh - 48px); }
.tgpco2-wiz__main { display: flex; flex-direction: column; min-width: 0; }
.tgpco2-wiz__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px 0; }
.tgpco2-wiz__progress { display: flex; gap: 6px; padding: 16px 28px 0; }
.tgpco2-wiz__progress i { flex: 1; height: 4px; border-radius: 2px; background: var(--c-surface-3); }
.tgpco2-wiz__progress i.is-done { background: var(--c-accent); }
.tgpco2-wiz__stepname { padding: 12px 28px 0; font-size: 12px; color: var(--c-text-3); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tgpco2-wiz__body { padding: 14px 28px 22px; overflow-y: auto; flex: 1; }
.tgpco2-wiz__body h3 { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.tgpco2-wiz__body .tgpco2-lead { margin-bottom: 18px; font-size: 14.5px; }
.tgpco2-wiz__foot { display: flex; justify-content: space-between; gap: 10px; padding: 16px 28px 22px; border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
.tgpco2-wiz__side { background: var(--c-surface-2); border-left: 1px solid var(--c-border); padding: 24px 22px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.tgpco2-wiz__svc { display: flex; gap: 12px; align-items: center; }
.tgpco2-wiz__svc-art { width: 58px; height: 58px; border-radius: 12px; overflow: hidden; background: var(--c-surface-3); flex: none; }
.tgpco2-wiz__svc-art img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-wiz__svc-title { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.tgpco2-wiz__svc-sub { font-size: 12.5px; color: var(--c-text-3); margin-top: 3px; }
.tgpco2-wiz__deposit { padding: 14px 16px; border-radius: var(--r-md); background: var(--c-accent-soft); border: 1px solid rgba(124, 92, 255, 0.3); font-size: 13.5px; color: var(--c-text-2); }
.tgpco2-wiz__deposit b { color: #fff; font-size: 18px; display: block; margin-bottom: 2px; }
.tgpco2-wiz__trust { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-wiz__trust span { display: flex; gap: 8px; align-items: flex-start; }
.tgpco2-wiz__trust .tgpco2-ic { color: var(--c-green-text); margin-top: 1px; }
.tgpco2-review { display: flex; flex-direction: column; gap: 14px; }
.tgpco2-review__block { padding: 14px 16px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.tgpco2-review__block h4 { font-size: 12px; text-transform: uppercase !important; letter-spacing: 0.06em; color: var(--c-text-3); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.tgpco2 .tgpco2-review__block h4 button { background: none !important; color: var(--c-accent-text) !important; font-size: 12px !important; font-weight: 600; padding: 0 !important; }
.tgpco2-review__block p { font-size: 14px; color: var(--c-text-2); white-space: pre-wrap; }

/* checkout ------------------------------------------------------------- */
.tgpco2-pay { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.tgpco2-pay__methods { display: flex; flex-direction: column; gap: 10px; }
.tgpco2-method { border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-surface-2); overflow: hidden; }
.tgpco2-method__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.tgpco2-method__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-text-3); flex: none; position: relative; }
.tgpco2-method.is-active { border-color: var(--c-accent); }
.tgpco2-method.is-active .tgpco2-method__radio { border-color: var(--c-accent); }
.tgpco2-method.is-active .tgpco2-method__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-accent); }
.tgpco2-method__title { font-weight: 600; font-size: 14.5px; flex: 1; }
.tgpco2-method__logos { display: flex; gap: 6px; align-items: center; color: var(--c-text-3); font-size: 12px; }
.tgpco2-method__body { display: none; padding: 4px 16px 18px; }
.tgpco2-method.is-active .tgpco2-method__body { display: block; }
#tgpco2-stripe-element { min-height: 40px; }
#tgpco2-express { margin-bottom: 12px; }
.tgpco2-pay__secure { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-text-3); margin-top: 14px; }
.tgpco2-pay__summary-svc { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.tgpco2-pay__art { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; background: var(--c-surface-3); flex: none; }
.tgpco2-pay__art img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-pay__hero { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.tgpco2-pay__amount { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.tgpco2-pay__amount small { font-size: 14px; font-weight: 500; color: var(--c-text-3); margin-left: 6px; }
.tgpco2-milestones-mini { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.tgpco2-milestones-mini div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--c-text-3); }
.tgpco2-milestones-mini div.is-now { color: var(--c-text); font-weight: 600; }
.tgpco2-milestones-mini div.is-paid { color: var(--c-green-text); }
.tgpco2-pay__terms { font-size: 12.5px; color: var(--c-text-3); margin-top: 12px; }
.tgpco2-success { text-align: center; padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tgpco2-success__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--c-green-soft); color: var(--c-green-text); display: grid; place-items: center; }

/* vendor dashboard ----------------------------------------------------- */
.tgpco2-vd { display: flex; flex-direction: column; gap: 22px; }
.tgpco2-vd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tgpco2-vsvc { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.tgpco2-vsvc.is-disabled { opacity: 0.6; }
.tgpco2-vsvc__art { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--c-surface-3); }
.tgpco2-vsvc__art img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-vsvc__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tgpco2-vsvc__title { font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-vsvc__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--c-text-3); }
.tgpco2-vsvc__right { display: flex; align-items: center; gap: 8px; }
.tgpco2-vsvc__price { font-size: 16px; font-weight: 700; margin-right: 6px; }
.tgpco2-menu { position: relative; }
.tgpco2-menu__list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; background: #202020; border: 1px solid var(--c-border-strong); border-radius: 12px; padding: 6px; box-shadow: var(--shadow-2); z-index: 20; display: none; }
.tgpco2-menu.is-open .tgpco2-menu__list { display: block; }
.tgpco2 button.tgpco2-menu__item, .tgpco2 a.tgpco2-menu__item { display: flex !important; align-items: center; gap: 10px; width: 100% !important; padding: 9px 10px !important; background: none !important; color: var(--c-text-2) !important; font-size: 13.5px !important; border-radius: 8px !important; cursor: pointer; text-align: left !important; }
.tgpco2 button.tgpco2-menu__item:hover, .tgpco2 a.tgpco2-menu__item:hover { background: var(--c-surface-3) !important; color: #fff !important; }
.tgpco2 button.tgpco2-menu__item--danger { color: var(--c-red-text) !important; }
.tgpco2-addon-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 110px minmax(0, 1.6fr) auto; gap: 8px; align-items: center; }
.tgpco2-addon-row + .tgpco2-addon-row { margin-top: 8px; }
.tgpco2-demo-track { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.tgpco2-demo-track + .tgpco2-demo-track { margin-top: 8px; }
.tgpco2 .tgpco2-demo-track input.tgpco2-input { padding: 8px 10px !important; font-size: 13px !important; }
.tgpco2-img-pick { display: flex; gap: 14px; align-items: center; }
.tgpco2-img-pick__preview { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: var(--c-surface-3); flex: none; border: 1px solid var(--c-border); }
.tgpco2-img-pick__preview img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2 .tgpco2-img-pick .tgpco2-btn { align-self: flex-start; }
.tgpco2-fieldset { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 18px 20px 20px; }
.tgpco2-fieldset + .tgpco2-fieldset { margin-top: 16px; }
.tgpco2-fieldset__title { font-weight: 600; font-size: 14px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.tgpco2-fieldset__title .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2 .tgpco2-fieldset .tgpco2-check + .tgpco2-check, .tgpco2 .tgpco2-fieldset [data-fast-fields] + .tgpco2-check { margin-top: 12px; }
.tgpco2--host { background: transparent; }
.tgpco2--host .tgpco2-page { padding: 0; }

/* responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .tgpco2-layout { grid-template-columns: 1fr; }
  .tgpco2-layout__side { position: static; }
  .tgpco2-pay { grid-template-columns: 1fr; }
  .tgpco2-pay__side { order: -1; }
  .tgpco2-mk-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tgpco2-mk-how, .tgpco2-mk-guar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgpco2-mk-how__step:nth-child(2) { border-right: 0; }
  .tgpco2-mk-how__step:nth-child(-n+2) { border-bottom: 1px solid var(--c-border); }
  .tgpco2-wiz { grid-template-columns: 1fr; }
  .tgpco2-wiz__side { display: none; }
  .tgpco2-modal--wizard .tgpco2-modal__panel { max-width: 720px; }
}
@media (max-width: 720px) {
  .tgpco2 { --pad-card: 18px 16px; }
  .tgpco2-page { padding: 16px 12px 56px; }
  .tgpco2-card { border-radius: 16px; }
  .tgpco2-grid-2, .tgpco2-grid-3, .tgpco2-form-row, .tgpco2-form-row--3 { grid-template-columns: 1fr; }
  .tgpco2-band { grid-template-columns: 1fr; gap: 14px; }
  .tgpco2-band__art { width: 72px; height: 72px; }
  .tgpco2-steps { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .tgpco2-step__label { font-size: 11.5px; }
  .tgpco2-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .tgpco2-kv dt { font-size: 12px; margin-top: 8px; }
  .tgpco2-order { grid-template-columns: 52px minmax(0, 1fr); }
  .tgpco2-order__art { width: 52px; height: 52px; }
  .tgpco2-order__right { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .tgpco2-msg { max-width: 92%; }
  .tgpco2-next { grid-template-columns: 1fr; }
  .tgpco2-next__icon { display: none; }
  .tgpco2-mk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgpco2-mk-how, .tgpco2-mk-guar { grid-template-columns: 1fr; }
  .tgpco2-mk-how__step { border-right: 0; border-bottom: 1px solid var(--c-border); }
  .tgpco2-mk-hero__title { font-size: 32px; }
  .tgpco2-mk-search { border-radius: 14px; padding: 6px 6px 6px 12px; }
  .tgpco2-toolbar { position: static; }
  .tgpco2-toolbar .tgpco2-dd { min-width: calc(50% - 5px); flex: 1; }
  .tgpco2-modal { padding: 0; align-items: flex-end; }
  .tgpco2-modal__panel { max-height: 94vh; border-radius: 20px 20px 0 0; }
  .tgpco2-modal__head { padding: 22px 18px 14px; }
  .tgpco2-modal__body { padding: 0 18px 20px; }
  .tgpco2-modal__foot { padding: 16px 18px 22px; border-radius: 0; }
  .tgpco2-modal--wizard .tgpco2-modal__panel { max-height: 96vh; height: 96vh; padding: 0; }
  .tgpco2-wiz { min-height: 0; max-height: none; height: 100%; }
  .tgpco2-wiz__head, .tgpco2-wiz__progress, .tgpco2-wiz__stepname, .tgpco2-wiz__body, .tgpco2-wiz__foot { padding-left: 16px; padding-right: 16px; }
  .tgpco2-wiz__foot { flex-wrap: wrap; }
  .tgpco2-vsvc { grid-template-columns: 56px minmax(0, 1fr); }
  .tgpco2-vsvc__art { width: 56px; height: 56px; }
  .tgpco2-vsvc__right { grid-column: 1 / -1; justify-content: space-between; }
  .tgpco2-addon-row, .tgpco2-demo-track { grid-template-columns: 1fr 1fr; }
  .tgpco2-player__time [data-cur], .tgpco2-player__time i { display: none; }
  .tgpco2-toasts { right: 10px; left: 10px; bottom: 10px; max-width: none; }
}
.tgpco2-band--plain { grid-template-columns: minmax(0, 1fr) auto; }
.tgpco2-mk-cat__label, .tgpco2-mk-cat__count { display: block; }
.tgpco2 button.tgpco2-mk-cat > span:last-child { display: block; min-width: 0; }
.tgpco2-modal--wizard .tgpco2-modal__body { padding: 0; }
.tgpco2 a.tgpco2-order, .tgpco2 a.tgpco2-order:hover, .tgpco2 a.tgpco2-mk-producer, .tgpco2 a.tgpco2-mk-producer:hover { color: var(--c-text); }
.tgpco2-inline > .tgpco2-shell { padding-left: clamp(14px, 3vw, 28px); padding-right: clamp(14px, 3vw, 28px); }
.tgpco2-inline.tgpco2--host > .tgpco2-shell, .tgpco2-inline > .tgpco2-vd { padding-left: 0; padding-right: 0; }

/* ======================================================================
   LANDING (services page)
   ====================================================================== */
.tgpco2-ld-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; padding: 36px 0 12px; }
.tgpco2-ld-hero__title { font-size: clamp(36px, 5vw, 62px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; margin-top: 14px; }
.tgpco2-ld-hero__title em { font-style: normal; color: var(--c-accent-text); }
.tgpco2-ld-hero__lead { font-size: 16.5px; color: var(--c-text-2); margin-top: 18px; max-width: 600px; }
.tgpco2-finder { margin-top: 26px; padding: 18px 18px 16px; border-radius: 18px; background: var(--c-surface); border: 1px solid var(--c-border-strong); display: flex; flex-direction: column; gap: 14px; }
.tgpco2-finder__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tgpco2-finder__row--selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tgpco2-finder__label { font-size: 13px; font-weight: 600; color: var(--c-text-3); flex: none; }
.tgpco2 .tgpco2-finder select.tgpco2-select { padding: 10px 36px 10px 12px !important; font-size: 13.5px !important; }
.tgpco2-finder__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--c-border); }
.tgpco2-finder__match { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--c-text-2); }
.tgpco2-avatars { display: flex; }
.tgpco2-avatars .tgpco2-avatar { margin-left: -8px; border: 2px solid var(--c-surface); width: 30px; height: 30px; }
.tgpco2-avatars .tgpco2-avatar:first-child { margin-left: 0; }

.tgpco2-session { position: relative; padding: 22px 24px 20px; border-radius: 22px; background: linear-gradient(180deg, #171717, #111111); border: 1px solid var(--c-border-strong); box-shadow: var(--shadow-1); overflow: hidden; }
.tgpco2-session::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 0%, rgba(124, 92, 255, 0.18), transparent 70%); pointer-events: none; }
.tgpco2-session__head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.tgpco2-session__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); animation: tgpco2-pulse 1.6s ease-in-out infinite; }
@keyframes tgpco2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tgpco2-session__step { margin-left: auto; font-size: 12px; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.tgpco2-session__wave { display: flex; align-items: center; gap: 3px; height: 92px; margin: 22px 0 18px; }
.tgpco2-session__wave i { flex: 1; height: var(--h); border-radius: 3px; background: rgba(255, 255, 255, 0.14); transition: background 0.35s var(--ease), transform 0.35s var(--ease); }
.tgpco2-session__wave i.is-on { background: var(--c-accent); }
.tgpco2-session__wave i.is-wm { background: repeating-linear-gradient(180deg, var(--c-accent) 0 4px, rgba(124, 92, 255, 0.35) 4px 8px); }
.tgpco2-session__wave i.is-final { background: var(--c-green); }
.tgpco2-session__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tgpco2-session__meta div { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 2px; }
.tgpco2-session__k { font-size: 11px; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.tgpco2-session__meta b { font-size: 14px; font-weight: 700; }
.tgpco2-session__steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tgpco2-session__steps li { font-size: 12px; color: var(--c-text-3); padding-top: 10px; border-top: 2px solid var(--c-surface-4); transition: color 0.3s, border-color 0.3s; }
.tgpco2-session__steps li span { display: block; font-size: 11px; font-weight: 700; color: var(--c-text-3); margin-bottom: 2px; }
.tgpco2-session__steps li.is-on { color: var(--c-text); border-top-color: var(--c-accent); }
.tgpco2-session__steps li.is-done { border-top-color: var(--c-green); }
.tgpco2-session__caption { margin-top: 12px; font-size: 13px; color: var(--c-text-2); min-height: 20px; }

.tgpco2-ld-insights { margin-top: 44px; padding: 26px 28px 28px; border-radius: 22px; background: var(--c-surface); border: 1px solid var(--c-border); }
.tgpco2-ld-insights__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.tgpco2-ld-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.tgpco2-chart__t { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.tgpco2-chart__t span { font-size: 12px; color: var(--c-text-3); font-weight: 500; }
.tgpco2-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; align-items: end; height: 150px; }
.tgpco2-bars__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; gap: 6px; }
.tgpco2-bars__bar { position: relative; height: 0; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--c-accent), rgba(124, 92, 255, 0.45)); min-height: 4px; transition: height 0.9s var(--ease); }
.is-visible .tgpco2-bars__bar { height: calc(var(--v) * 0.78); }
.tgpco2-bars__bar b { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--c-text-2); font-weight: 600; }
.tgpco2-bars__col > span { font-size: 11px; color: var(--c-text-3); text-align: center; white-space: nowrap; }
.tgpco2-ranges { display: flex; flex-direction: column; gap: 12px; }
.tgpco2-range { display: grid; grid-template-columns: 96px minmax(0, 1fr) 62px; gap: 10px; align-items: center; font-size: 12.5px; }
.tgpco2-range__l { color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-range__track { position: relative; height: 10px; border-radius: 5px; background: var(--c-surface-3); overflow: hidden; }
.tgpco2-range__track i { position: absolute; top: 0; bottom: 0; left: var(--a); width: 0; background: rgba(124, 92, 255, 0.45); border-radius: 5px; transition: width 0.9s var(--ease); }
.is-visible .tgpco2-range__track i { width: calc(var(--b) - var(--a)); }
.tgpco2-range__track u { position: absolute; top: -1px; bottom: -1px; left: var(--m); width: 3px; background: #fff; border-radius: 2px; }
.tgpco2-range__v { text-align: right; color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tgpco2-hbars { display: flex; flex-direction: column; gap: 8px; }
.tgpco2 button.tgpco2-hbar { display: grid !important; grid-template-columns: 110px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 12.5px !important; color: var(--c-text-2) !important; text-align: left !important; width: 100% !important; }
.tgpco2 button.tgpco2-hbar:hover { color: #fff !important; }
.tgpco2-hbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-hbar i { display: block; height: 8px; border-radius: 4px; background: var(--c-accent); width: 0; transition: width 0.9s var(--ease); }
.is-visible .tgpco2-hbar i { width: var(--v); }
.tgpco2-hbar b { text-align: right; font-weight: 600; color: var(--c-text-3); }

.tgpco2-reviews { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.tgpco2-reviews::-webkit-scrollbar { display: none; }
.tgpco2-review { scroll-snap-align: start; margin: 0; padding: 22px 22px 20px; border-radius: 18px; background: var(--c-surface); border: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 12px; }
.tgpco2-review blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-text); flex: 1; }
.tgpco2-review figcaption { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--c-border); }
.tgpco2-review__who { font-weight: 600; font-size: 13.5px; }
.tgpco2-review__ctx { font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-review__ctx a { color: var(--c-text-2); }

.tgpco2-process { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 20px; align-items: stretch; }
.tgpco2-process__list { display: flex; flex-direction: column; gap: 8px; }
.tgpco2 button.tgpco2-process__item { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: flex-start; padding: 16px 18px !important; border-radius: 14px !important; border: 1px solid var(--c-border) !important; background: var(--c-surface) !important; color: var(--c-text) !important; text-align: left !important; white-space: normal !important; width: 100% !important; transition: border-color 0.15s, background 0.15s; }
.tgpco2 button.tgpco2-process__item.is-on { border-color: var(--c-accent) !important; background: var(--c-accent-soft) !important; }
.tgpco2-process__n { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c-surface-3); color: var(--c-accent-text); flex: none; }
.tgpco2-process__item.is-on .tgpco2-process__n { background: var(--c-accent); color: #fff; }
.tgpco2-process__t { display: block; font-weight: 700; font-size: 15px; }
.tgpco2-process__d { display: block; font-size: 13px; color: var(--c-text-2); margin-top: 4px; line-height: 1.5; }
.tgpco2-process__visual { border-radius: 22px; background: linear-gradient(180deg, #171717, #111111); border: 1px solid var(--c-border-strong); padding: 22px; display: flex; align-items: center; }
.tgpco2-process__screen { width: 100%; }
.tgpco2-process__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tgpco2-process__wave { display: flex; align-items: center; gap: 3px; height: 110px; margin: 22px 0; }
.tgpco2-process__wave i { flex: 1; height: var(--h); border-radius: 3px; background: rgba(255, 255, 255, 0.12); transition: background 0.4s var(--ease); }
.tgpco2-process__wave.s1 i:nth-child(-n+12) { background: var(--c-accent); }
.tgpco2-process__wave.s2 i { background: repeating-linear-gradient(180deg, var(--c-accent) 0 4px, rgba(124, 92, 255, 0.35) 4px 8px); }
.tgpco2-process__wave.s3 i { background: var(--c-accent); }
.tgpco2-process__wave.s4 i { background: var(--c-green); }
.tgpco2-process__milestones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tgpco2-process__milestones span { font-size: 11px; color: var(--c-text-3); }
.tgpco2-process__milestones span i { display: block; height: 3px; border-radius: 2px; background: var(--c-surface-4); margin-bottom: 8px; transition: background 0.4s; }
.tgpco2-process__milestones span.is-done i { background: var(--c-green); }
.tgpco2-process__milestones span.is-now i { background: var(--c-accent); }
.tgpco2-process__note { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--c-border); font-size: 13px; color: var(--c-text-2); }

/* demo review player (order workspace) --------------------------------- */
.tgpco2-demo { border-radius: 16px; background: var(--c-surface-2); border: 1px solid var(--c-border); padding: 14px 16px 14px; }
.tgpco2-demo__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tgpco2-demo__version { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-2); }
.tgpco2-demo__version b { color: var(--c-text); font-weight: 700; }
.tgpco2-demo__wm { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-3); }
.tgpco2-demo__wave { position: relative; height: 64px; cursor: pointer; user-select: none; }
.tgpco2-demo__wave canvas { width: 100%; height: 100%; display: block; }
.tgpco2-demo__cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; opacity: 0; pointer-events: none; transform: translateX(-1px); }
.tgpco2-demo__wave:hover .tgpco2-demo__cursor { opacity: 0.7; }
.tgpco2-demo__tip { position: absolute; top: -26px; transform: translateX(-50%); padding: 3px 7px; border-radius: 6px; background: #fff; color: #0d0d0d; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; white-space: nowrap; }
.tgpco2-demo__wave:hover .tgpco2-demo__tip { opacity: 1; }
.tgpco2-demo__marks { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.tgpco2 button.tgpco2-mark { position: absolute; top: -9px; width: 20px; height: 20px; margin-left: -10px; padding: 0 !important; border: 0 !important; border-radius: 50% 50% 50% 0 !important; transform: rotate(-45deg); background: var(--c-amber) !important; color: #0d0d0d !important; font-size: 10.5px !important; font-weight: 800 !important; line-height: 1 !important; display: grid !important; place-items: center !important; box-shadow: 0 0 0 2px #121212, 0 4px 10px rgba(0, 0, 0, 0.4); pointer-events: auto; cursor: pointer; transition: transform 0.15s var(--ease), background 0.15s; z-index: 2; }
.tgpco2 button.tgpco2-mark > * { transform: rotate(45deg); }
.tgpco2 button.tgpco2-mark:hover, .tgpco2 button.tgpco2-mark:focus-visible { transform: rotate(-45deg) scale(1.15); z-index: 3; }
.tgpco2 button.tgpco2-mark.is-done { background: var(--c-green) !important; color: #052 !important; opacity: 0.85; }
.tgpco2 button.tgpco2-mark.is-vendor { background: var(--c-accent) !important; color: #fff !important; }
.tgpco2 button.tgpco2-mark.is-draft { background: #1a1a1f !important; color: var(--c-amber) !important; box-shadow: 0 0 0 2px var(--c-amber), 0 4px 10px rgba(0, 0, 0, 0.4); }
.tgpco2-note__draft, .tgpco2-note__sent { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--c-amber-text); }
.tgpco2-note__draft::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--c-amber); }
.tgpco2-note__sent { color: var(--c-text-3); font-weight: 500; }
.tgpco2-demo__bubble { position: absolute; top: 50%; max-width: min(340px, 72%); padding: 8px 12px 8px 9px; border-radius: 12px; background: #fff; color: #0d0d0d; font-size: 12.5px; line-height: 1.4; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.15); transform: translate(-50%, -50%) scale(0.94); opacity: 0; transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); pointer-events: none; z-index: 5; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 3px 8px; align-items: center; }
.tgpco2-demo__bubble.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tgpco2-demo__bubble.is-left { transform: translate(-92%, -50%) scale(0.94); } .tgpco2-demo__bubble.is-left.is-on { transform: translate(-92%, -50%) scale(1); }
.tgpco2-demo__bubble.is-right { transform: translate(-8%, -50%) scale(0.94); } .tgpco2-demo__bubble.is-right.is-on { transform: translate(-8%, -50%) scale(1); }
.tgpco2-demo__bubble-n { width: 18px; height: 18px; border-radius: 50%; background: var(--c-amber); color: #0d0d0d; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.tgpco2-demo__bubble.is-done .tgpco2-demo__bubble-n { background: var(--c-green); } .tgpco2-demo__bubble.is-vendor .tgpco2-demo__bubble-n { background: var(--c-accent); color: #fff; }
.tgpco2-demo__bubble-t { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11.5px; color: #555; }
.tgpco2-demo__bubble-x { font-weight: 600; }
.tgpco2-demo__bubble em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: #1a7f4b; }
.tgpco2-demo__bubble.is-done .tgpco2-demo__bubble-x { text-decoration: line-through; color: #777; }
.tgpco2-demo__ctrl { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.tgpco2 button.tgpco2-demo__play { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: #fff !important; color: #0d0d0d !important; display: grid !important; place-items: center !important; padding: 0 !important; transition: transform 0.15s var(--ease); }
.tgpco2 button.tgpco2-demo__play:hover { transform: scale(1.05); }
.tgpco2-demo__skip { display: flex; gap: 6px; }
.tgpco2 button.tgpco2-demo__sk { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: var(--c-surface-3) !important; color: var(--c-text-2) !important; display: grid !important; place-items: center !important; padding: 0 !important; font-size: 10px !important; font-weight: 700 !important; }
.tgpco2 button.tgpco2-demo__sk:hover { color: #fff !important; background: var(--c-surface-4) !important; }
.tgpco2-demo__time { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--c-text-2); }
.tgpco2-demo__time b { color: var(--c-text); font-weight: 600; }
.tgpco2-demo__kbd { font-size: 11.5px; color: var(--c-text-3); display: flex; gap: 8px; align-items: center; }
.tgpco2-demo__kbd kbd { font: inherit; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--c-border-strong); background: var(--c-surface-3); color: var(--c-text-2); }
.tgpco2-notes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-border); }
/* the revision prompt sends the customer here: a short glow so the eye lands on the pin row */
.tgpco2-notes.is-flash { border-radius: 14px; box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.55), 0 0 0 8px rgba(124, 92, 255, 0.14); transition: box-shadow 0.25s; }
.tgpco2-prompt__hint { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 11px 13px; border-radius: 12px; background: var(--c-accent-soft); border: 1px solid rgba(124, 92, 255, 0.3); font-size: 12.5px; line-height: 1.5; color: var(--c-text-2); }
.tgpco2-prompt__hint .tgpco2-ic { color: var(--c-accent-text); flex: none; margin-top: 2px; }
.tgpco2-prompt__hint b { color: #fff; font-weight: 600; }
.tgpco2-prompt__hint em { font-style: normal; color: var(--c-accent-text); font-weight: 600; }
.tgpco2-prompt__hint a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.tgpco2-notes__head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.tgpco2-notes__title { display: flex; align-items: center; gap: 10px; }
.tgpco2-notes__head b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.tgpco2-notes__head b svg { color: var(--c-amber); }
.tgpco2-notes__count { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--c-surface-3); color: var(--c-text-2); }
.tgpco2-notes__add { display: flex; gap: 8px; align-items: stretch; }
.tgpco2 button.tgpco2-notes__at { display: inline-flex !important; align-items: center !important; gap: 6px; padding: 0 12px !important; border-radius: 10px !important; background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; font-variant-numeric: tabular-nums; font-weight: 700 !important; font-size: 13px !important; white-space: nowrap; cursor: pointer; min-width: 66px; justify-content: center; transition: border-color 0.15s, color 0.15s; }
.tgpco2 button.tgpco2-notes__at:hover { border-color: var(--c-amber) !important; }
.tgpco2 button.tgpco2-notes__at.is-fixed { border-color: var(--c-amber) !important; color: var(--c-amber-text) !important; background: rgba(245, 158, 11, 0.12) !important; }
.tgpco2 button.tgpco2-notes__at.is-fixed::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-amber); }
.tgpco2-notes__list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

@media (max-width: 1080px) {
  .tgpco2-ld-hero { grid-template-columns: 1fr; gap: 26px; }
  .tgpco2-ld-charts { grid-template-columns: 1fr; gap: 26px; }
  .tgpco2-process { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tgpco2-finder__row--selects { grid-template-columns: 1fr; }
  .tgpco2-session__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgpco2-session__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgpco2-reviews { grid-auto-columns: minmax(280px, 85%); }
  .tgpco2-range { grid-template-columns: 80px minmax(0, 1fr) 58px; }
  .tgpco2-notes__add { flex-wrap: wrap; }
}
.tgpco2 .tgpco2-review figcaption, .tgpco2 .tgpco2-review blockquote { font-style: normal !important; opacity: 1 !important; text-align: left !important; }
.tgpco2 .tgpco2-review blockquote::before, .tgpco2 .tgpco2-review blockquote::after { content: none !important; }
.tgpco2 .tgpco2-review__who { color: var(--c-text) !important; }

/* delivery card ------------------------------------------------------- */
.tgpco2-delivery { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "art body act" "note note note"; gap: 14px 18px; align-items: start; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, #181818, #121212); border: 1px solid var(--c-border-strong); }
.tgpco2-delivery__art { grid-area: art; position: relative; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: var(--c-surface-3); }
.tgpco2-delivery__art img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-delivery__badge { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; background: var(--c-green); color: #08220f; font-size: 10.5px; font-weight: 700; }
.tgpco2-delivery__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.tgpco2-delivery__title { font-size: 17px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-delivery__sub { font-size: 13px; color: var(--c-text-3); line-height: 1.5; }
.tgpco2-delivery__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tgpco2-delivery__list li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text-2); }
.tgpco2-delivery__list .tgpco2-ic { color: var(--c-green-text); }
.tgpco2-delivery__note { grid-area: note; margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--c-border); font-size: 13.5px; line-height: 1.5; color: var(--c-text-2); white-space: pre-wrap; }
.tgpco2-delivery__note b { display: inline; font-size: 13.5px; color: var(--c-text-3); margin-right: 6px; font-weight: 600; }
.tgpco2-delivery__act { grid-area: act; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; max-width: 240px; }
.tgpco2-delivery__act .tgpco2-small { font-size: 11.5px; line-height: 1.4; }

/* ======================================================================
   LANDING v3 — image-led, editorial
   ====================================================================== */
.tgpco2-mz { position: relative; margin: 0 calc(50% - 50vw) 0; width: 100vw; min-height: 620px; display: flex; align-items: flex-end; overflow: hidden; background: #0d0d0d; }
.tgpco2-mz__wall { position: absolute; inset: -10% -4%; display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; transform: rotate(-6deg); opacity: 0.5; pointer-events: none; }
.tgpco2-mz__wall span { display: block; aspect-ratio: 1; border-radius: 12px; background-size: cover; background-position: center; filter: saturate(0.9); animation: tgpco2-drift 40s linear infinite; }
.tgpco2-mz__wall span:nth-child(odd) { animation-duration: 52s; animation-direction: reverse; }
@keyframes tgpco2-drift { from { transform: translateY(0); } to { transform: translateY(-24px); } }
.tgpco2-mz::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 15, 0.55) 0%, rgba(12, 12, 15, 0.35) 35%, rgba(12, 12, 15, 0.92) 72%, #0d0d0d 100%); pointer-events: none; }
.tgpco2-mz::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 12, 15, 0.94) 0%, rgba(12, 12, 15, 0.7) 40%, rgba(12, 12, 15, 0.15) 75%, rgba(12, 12, 15, 0) 100%); pointer-events: none; }
.tgpco2-mz__inner { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto; padding: 120px clamp(14px, 3vw, 28px) 44px; }
.tgpco2-mz__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-2); }
.tgpco2-mz__kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); animation: tgpco2-pulse 1.6s ease-in-out infinite; }
.tgpco2-mz__title { font-size: clamp(40px, 6.2vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; margin-top: 14px; max-width: 900px; }
.tgpco2-mz__title em { font-style: normal; color: var(--c-accent-text); }
.tgpco2-mz__lead { font-size: 17px; color: var(--c-text-2); max-width: 560px; margin-top: 18px; }
.tgpco2-mz__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.tgpco2-mz__search { display: flex; align-items: center; gap: 8px; width: min(560px, 100%); padding: 6px 6px 6px 16px; background: rgba(20, 20, 24, 0.9); border: 1px solid var(--c-border-strong); border-radius: 14px; backdrop-filter: blur(8px); }
.tgpco2-mz__search:focus-within { border-color: var(--c-accent); }
.tgpco2 .tgpco2-mz__search input { flex: 1; background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: var(--c-text) !important; font-family: var(--font) !important; font-size: 15px !important; padding: 9px 4px !important; margin: 0 !important; min-width: 0; }
.tgpco2-mz__facts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; color: var(--c-text-3); }
.tgpco2-mz__facts b { color: var(--c-text); font-weight: 700; }

.tgpco2-browse { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.tgpco2 .tgpco2-browse__item { position: relative; display: block !important; aspect-ratio: 4 / 5; border-radius: 16px !important; overflow: hidden; background: var(--c-surface-3) !important; border: 1px solid var(--c-border) !important; padding: 0 !important; color: #fff !important; text-align: left !important; white-space: normal !important; width: auto !important; transition: transform 0.2s var(--ease), border-color 0.2s; }
.tgpco2 .tgpco2-browse__item:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.3) !important; }
.tgpco2-browse__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 15, 0.05) 30%, rgba(12, 12, 15, 0.9) 100%); }
.tgpco2-browse__txt { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; }
.tgpco2-browse__txt b { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.tgpco2-browse__txt span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.72); margin-top: 4px; line-height: 1.35; }
.tgpco2-browse__txt em { display: block; font-style: normal; font-size: 11px; color: rgba(255, 255, 255, 0.5); margin-top: 6px; letter-spacing: 0.02em; }
.tgpco2-browse__item::after { background: linear-gradient(180deg, rgba(12, 12, 15, 0) 25%, rgba(12, 12, 15, 0.55) 60%, rgba(12, 12, 15, 0.95) 100%); }
.tgpco2-browse__item.is-active { border-color: var(--c-accent) !important; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.25); }
.tgpco2-browse__ic { position: absolute; left: 12px; top: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(12, 12, 15, 0.7); backdrop-filter: blur(6px); color: #fff; }

.tgpco2-spot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tgpco2-spot__card { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--c-border); background: var(--c-surface); display: flex; flex-direction: column; }
.tgpco2-spot__img { aspect-ratio: 16 / 11; background-size: cover; background-position: center; position: relative; }
.tgpco2-spot__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 15, 0) 40%, rgba(12, 12, 15, 0.85) 100%); }
.tgpco2-spot__over { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tgpco2-spot__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tgpco2-spot__who b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-spot__who small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.tgpco2-spot__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.tgpco2-spot__title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.tgpco2-spot__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--c-border); }

.tgpco2-listen { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.tgpco2-listen__copy h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.tgpco2-listen__copy p { color: var(--c-text-2); margin-top: 14px; font-size: 15.5px; max-width: 460px; }
.tgpco2-listen__now { margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: var(--c-surface); border: 1px solid var(--c-border); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.tgpco2-listen__now-art { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--c-surface-3); }
.tgpco2-listen__now-art img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-listen__now b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-listen__now small { display: block; color: var(--c-text-3); font-size: 12.5px; margin-top: 2px; }
.tgpco2-listen__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--c-surface-3); overflow: hidden; }
.tgpco2-listen__bar i { display: block; height: 100%; width: 0; background: var(--c-accent); }
.tgpco2-playlist { display: flex; flex-direction: column; gap: 6px; }
.tgpco2-track { display: grid; grid-template-columns: 40px 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; }
.tgpco2-track:hover, .tgpco2-track.is-playing { background: var(--c-surface); border-color: var(--c-border); }
.tgpco2 button.tgpco2-track__play { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--c-surface-3) !important; color: #fff !important; display: grid !important; place-items: center !important; padding: 0 !important; }
.tgpco2-track.is-playing button.tgpco2-track__play, .tgpco2 button.tgpco2-track__play:hover { background: var(--c-accent) !important; }
.tgpco2-track__art { width: 44px; height: 44px; border-radius: 9px; overflow: hidden; background: var(--c-surface-3); }
.tgpco2-track__art img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-track__meta { min-width: 0; }
.tgpco2-track__meta b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-track__meta span { display: block; font-size: 12.5px; color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-track__price { font-size: 14px; font-weight: 700; white-space: nowrap; }
.tgpco2-track__price small { display: block; font-size: 11px; color: var(--c-text-3); font-weight: 500; text-align: right; }

.tgpco2-quotes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.tgpco2-quote { padding: 26px 28px; border-radius: 20px; background: var(--c-surface); border: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 16px; }
.tgpco2-quote--lead { grid-row: span 2; justify-content: space-between; background: linear-gradient(180deg, #18181f, #131313); }
.tgpco2-quote blockquote { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-text); font-style: normal !important; }
.tgpco2-quote--lead blockquote { font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.tgpco2-quote figcaption { display: flex; align-items: center; gap: 10px; font-style: normal !important; opacity: 1 !important; }
.tgpco2-quote__who { font-weight: 600; font-size: 13.5px; color: var(--c-text); }
.tgpco2-quote__ctx { font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-quote__ctx a { color: var(--c-text-2); }
.tgpco2-quotes__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.tgpco2-quotes__more .tgpco2-quote blockquote { font-size: 14.5px; }

.tgpco2-steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: st; }
.tgpco2-steps4__item { padding: 22px 22px 24px; border-radius: 18px; background: var(--c-surface); border: 1px solid var(--c-border); position: relative; }
.tgpco2-steps4__n { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; color: var(--c-accent-text); line-height: 1; margin-bottom: 14px; opacity: 0.9; }
.tgpco2-steps4__t { font-weight: 700; font-size: 16px; }
.tgpco2-steps4__d { font-size: 13.5px; color: var(--c-text-2); margin-top: 6px; line-height: 1.55; }

@media (max-width: 1080px) {
  .tgpco2-browse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tgpco2-spot, .tgpco2-steps4 { grid-template-columns: 1fr 1fr; }
  .tgpco2-listen { grid-template-columns: 1fr; }
  .tgpco2-quotes { grid-template-columns: 1fr; }
  .tgpco2-quote--lead { grid-row: auto; }
  .tgpco2-quotes__more { grid-template-columns: 1fr 1fr; }
  .tgpco2-mz__wall { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 720px) {
  .tgpco2-mz { min-height: 520px; }
  .tgpco2-mz__inner { padding-top: 80px; }
  .tgpco2-mz__wall { grid-template-columns: repeat(4, 1fr); }
  .tgpco2-browse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgpco2-spot, .tgpco2-steps4, .tgpco2-quotes__more { grid-template-columns: 1fr; }
  .tgpco2-track { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .tgpco2-track__art, .tgpco2-track > .tgpco2-btn { display: none; }
  .tgpco2-delivery { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "art body" "note note" "act act"; }
  .tgpco2-delivery__art { width: 72px; height: 72px; }
  .tgpco2-delivery__act { align-items: stretch; text-align: left; max-width: none; }
  .tgpco2-delivery__act .tgpco2-btn { width: 100%; }
}
.tgpco2-modal.tgpco2, .tgpco2-toasts.tgpco2 { background: transparent !important; }

/* hero photo (replaces the cover wall) */
.tgpco2-mz { min-height: 640px; isolation: isolate; }
/* hero photo: graded, feathered and blended into the canvas (never a raw image) */
.tgpco2-mz__photo { position: absolute; top: -4%; right: -2%; bottom: -4%; left: 27%; z-index: 0; background-size: cover; background-position: 48% 45%; filter: saturate(0.78) contrast(1.1) brightness(0.92); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%, #000 80%, transparent 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000 20%, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%, #000 80%, transparent 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000 20%, #000 55%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; animation: tgpco2-mzdrift 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes tgpco2-mzdrift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(-1.2%, -1%, 0); } }
/* colour grade: violet tint in the lights, deep plum in the shadows */
.tgpco2-mz__photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(124, 92, 255, 0.28) 0%, rgba(124, 92, 255, 0.06) 45%, rgba(255, 140, 90, 0.08) 100%); mix-blend-mode: soft-light; }
.tgpco2-mz__photo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 40%, rgba(12, 12, 15, 0) 30%, rgba(12, 12, 15, 0.55) 75%, rgba(12, 12, 15, 0.9) 100%), linear-gradient(0deg, rgba(60, 40, 110, 0.35), rgba(60, 40, 110, 0)); mix-blend-mode: multiply; }
/* film grain so the flat canvas and the photo share one texture */
.tgpco2-mz__grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.28; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.55 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; }
/* accent glow rising from the desk into the copy */
.tgpco2-mz__glow { position: absolute; z-index: 1; pointer-events: none; left: 8%; bottom: -20%; width: 46%; height: 70%; background: radial-gradient(closest-side, rgba(124, 92, 255, 0.22), rgba(124, 92, 255, 0)); filter: blur(30px); }
.tgpco2-mz::before { z-index: 1; background: linear-gradient(180deg, rgba(12, 12, 15, 0.35) 0%, rgba(12, 12, 15, 0.1) 30%, rgba(12, 12, 15, 0.7) 72%, #0d0d0d 100%); }
.tgpco2-mz::after { z-index: 1; background: linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 20%, rgba(12, 12, 15, 0.85) 30%, rgba(12, 12, 15, 0.4) 46%, rgba(12, 12, 15, 0.06) 66%, rgba(12, 12, 15, 0) 100%); }
.tgpco2-mz__inner { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .tgpco2-mz__photo { animation: none; } }
@media (max-width: 720px) { .tgpco2-mz__photo { left: 0; top: 0; bottom: 0; right: 0; background-position: 60% 40%; animation: none; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), #000 25%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), #000 25%, #000 55%, transparent 100%); } .tgpco2-mz::after { background: linear-gradient(180deg, rgba(12, 12, 15, 0.25), rgba(12, 12, 15, 0.8)); } .tgpco2-mz__glow { display: none; } }


/* ---------- service cards (production style) ---------- */
.tgpco2-svc { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; overflow: hidden; transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s; position: relative; }
.tgpco2-svc:hover { border-color: rgba(255, 255, 255, 0.18); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.tgpco2-svc__media { position: relative; aspect-ratio: 16 / 10; background: var(--c-surface-3); overflow: hidden; }
.tgpco2-svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.tgpco2-svc:hover .tgpco2-svc__media img { transform: scale(1.04); }
.tgpco2-svc__media::after { content: ''; position: absolute; inset: 0; background: rgba(8, 8, 12, 0); transition: background 0.2s; pointer-events: none; }
.tgpco2-svc:hover .tgpco2-svc__media::after, .tgpco2-svc.is-playing .tgpco2-svc__media::after { background: rgba(8, 8, 12, 0.38); }
.tgpco2 button.tgpco2-svc__save { position: absolute; left: 10px; top: 10px; z-index: 3; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(12, 12, 15, 0.62) !important; backdrop-filter: blur(6px); color: #fff !important; display: grid !important; place-items: center !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; }
.tgpco2 button.tgpco2-svc__save:hover { background: rgba(12, 12, 15, 0.85) !important; }
.tgpco2 button.tgpco2-svc__save.is-saved { color: #ff7a9a !important; }
.tgpco2 button.tgpco2-svc__save.is-saved .tgpco2-ic { fill: currentColor; }
.tgpco2-svc__type { position: absolute; right: 10px; top: 10px; z-index: 3; padding: 4px 10px; border-radius: 999px; background: var(--c-accent); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.tgpco2-svc__demo { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; transition: opacity 0.18s; }
.tgpco2-svc:hover .tgpco2-svc__demo, .tgpco2-svc.is-playing .tgpco2-svc__demo { opacity: 1; }
@media (hover: none) { .tgpco2-svc__demo { opacity: 1; } }
.tgpco2 button.tgpco2-svc__play { width: 54px !important; height: 54px !important; border-radius: 50% !important; background: #fff !important; color: #0d0d0d !important; display: grid !important; place-items: center !important; padding: 0 0 0 2px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); transition: transform 0.15s !important; }
.tgpco2 button.tgpco2-svc__play:hover { transform: scale(1.06); }
.tgpco2-svc.is-playing button.tgpco2-svc__play { padding: 0 !important; background: var(--c-accent) !important; color: #fff !important; }
.tgpco2 button.tgpco2-svc__nav { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(12, 12, 15, 0.6) !important; backdrop-filter: blur(6px); color: #fff !important; display: grid !important; place-items: center !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; }
.tgpco2 button.tgpco2-svc__nav:hover { background: rgba(12, 12, 15, 0.9) !important; }
.tgpco2-svc__dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.tgpco2-svc__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.tgpco2-svc__dots i.is-on { background: #fff; width: 16px; border-radius: 3px; }
.tgpco2-svc__body { padding: 16px 16px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.tgpco2-svc__title { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.tgpco2 a.tgpco2-svc__vendor, .tgpco2-svc__vendor { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--c-text-2); font-size: 13px; text-decoration: none; }
.tgpco2-svc__vname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.tgpco2 a.tgpco2-svc__vendor:hover .tgpco2-svc__vname { color: var(--c-text); }
.tgpco2-svc__vendor .tgpco2-avatar--sm { width: 22px; height: 22px; font-size: 9px; }
.tgpco2-svc__badge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: var(--c-amber-soft); color: var(--c-amber-text); white-space: nowrap; }
.tgpco2-svc__badge .tgpco2-ic { fill: currentColor; }
.tgpco2-svc__stars { display: inline-flex; align-items: center; gap: 2px; color: var(--c-amber-text); }
.tgpco2-svc__stars .tgpco2-ic { width: 13px; height: 13px; fill: currentColor; }
.tgpco2-svc__stars .off .tgpco2-ic { color: rgba(255, 255, 255, 0.16); fill: rgba(255, 255, 255, 0.16); }
.tgpco2-svc__stars small { color: var(--c-text-3); font-size: 12px; margin-left: 5px; }
.tgpco2-svc__desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--c-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tgpco2-svc__tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tgpco2-svc__tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; font-size: 11px; line-height: 1.3; background: var(--c-surface-3); color: var(--c-text-2); border: 1px solid var(--c-border); white-space: nowrap; }
.tgpco2-svc__tag--more { color: var(--c-text-3); cursor: default; }
.tgpco2-svc__bottom { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.tgpco2-svc__price { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.tgpco2-svc__meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.tgpco2-svc__daw, .tgpco2-svc__days { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font-size: 11px; color: var(--c-text-2); background: var(--c-surface-3); border: 1px solid var(--c-border); white-space: nowrap; }
.tgpco2-svc__days .tgpco2-ic { color: var(--c-text-3); }
.tgpco2 button.tgpco2-svc__hire { width: 100%; margin-top: 4px; justify-content: center; }
@media (max-width: 720px) { .tgpco2-svc__media { aspect-ratio: 16 / 10; } }

/* ---------- custom dropdowns ---------- */
.tgpco2-dd { position: relative; min-width: 150px; }
.tgpco2-toolbar .tgpco2-dd { min-width: 0; flex: 0 0 auto; }
.tgpco2-toolbar .tgpco2-search { flex: 0 1 220px; min-width: 160px !important; }
.tgpco2-dd__native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; top: 0; }
.tgpco2 button.tgpco2-dd__btn { width: 100%; display: flex !important; align-items: center; gap: 8px; padding: 9px 12px !important; border-radius: 12px !important; background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; font-size: 13.5px !important; font-weight: 500 !important; text-align: left; transition: border-color 0.15s, background 0.15s; }
.tgpco2 button.tgpco2-dd__btn small { color: var(--c-text-3); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; flex: 0 0 auto; }
.tgpco2 button.tgpco2-dd__btn > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2 button.tgpco2-dd__btn .tgpco2-ic { color: var(--c-text-3); flex: 0 0 auto; transition: transform 0.15s; }
.tgpco2 button.tgpco2-dd__btn:hover { border-color: rgba(255, 255, 255, 0.28) !important; }
.tgpco2 button.tgpco2-dd__btn.has-value { border-color: rgba(124, 92, 255, 0.6) !important; background: rgba(124, 92, 255, 0.1) !important; }
.tgpco2 button.tgpco2-dd__btn.has-value small { color: var(--c-accent-text); }
.tgpco2-dd.is-open button.tgpco2-dd__btn { border-color: var(--c-accent) !important; }
.tgpco2-dd.is-open button.tgpco2-dd__btn .tgpco2-ic { transform: rotate(180deg); }
.tgpco2-dd__menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 100%; width: max-content; max-width: 280px; max-height: 320px; overflow: auto; padding: 6px; border-radius: 14px; background: #181818; border: 1px solid var(--c-border-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); scrollbar-width: thin; }
.tgpco2 button.tgpco2-dd__opt { width: 100%; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px !important; border-radius: 9px !important; background: transparent !important; border: 0 !important; color: var(--c-text-2) !important; font-size: 13.5px !important; font-weight: 500 !important; text-align: left; white-space: nowrap; }
.tgpco2 button.tgpco2-dd__opt:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--c-text) !important; }
.tgpco2 button.tgpco2-dd__opt.is-on { color: var(--c-text) !important; background: rgba(124, 92, 255, 0.14) !important; }
.tgpco2 button.tgpco2-dd__opt .tgpco2-ic { color: var(--c-accent-text); }

/* ---------- why / how / guide / compare / faq / cta ---------- */
.tgpco2-why { padding: 44px clamp(20px, 4vw, 52px) 46px; border-radius: 24px; background: linear-gradient(160deg, #15131f 0%, #111111 60%); border: 1px solid var(--c-border); position: relative; overflow: hidden; }
.tgpco2-why::before { content: ''; position: absolute; width: 520px; height: 520px; right: -180px; top: -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, 0.18), rgba(124, 92, 255, 0)); pointer-events: none; }
.tgpco2-why__head { max-width: 640px; position: relative; }
.tgpco2-why__head h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 12px 0 12px; }
.tgpco2-why__head p { color: var(--c-text-2); font-size: 15px; line-height: 1.6; margin: 0; }
.tgpco2-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; position: relative; }
.tgpco2-why__item { padding: 20px 18px 22px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 8px; }
.tgpco2-why__item b { font-size: 15px; font-weight: 700; margin-top: 6px; }
.tgpco2-why__item > span:last-child { font-size: 13.5px; color: var(--c-text-2); line-height: 1.55; }
.tgpco2-why__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(124, 92, 255, 0.14); color: var(--c-accent-text); }
.tgpco2-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; counter-reset: none; }
.tgpco2-how::before { content: ''; position: absolute; left: 6%; right: 6%; top: 34px; height: 1px; background: linear-gradient(90deg, rgba(124, 92, 255, 0) 0%, rgba(124, 92, 255, 0.5) 20%, rgba(124, 92, 255, 0.5) 80%, rgba(124, 92, 255, 0) 100%); }
.tgpco2-how__step { position: relative; padding: 18px 20px 20px; border-radius: 18px; background: var(--c-surface); border: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 8px; }
.tgpco2-how__n { position: absolute; top: -14px; left: 20px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 0 0 5px #0d0d0d; }
.tgpco2-how__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-surface-3); color: var(--c-text); margin-top: 8px; }
.tgpco2-how__step h3 { font-size: 16px; font-weight: 700; margin: 4px 0 0; letter-spacing: -0.01em; }
.tgpco2-how__step p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--c-text-2); flex: 1; }
.tgpco2-how__pay { display: inline-flex; align-self: flex-start; margin-top: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(124, 92, 255, 0.12); color: var(--c-accent-text); }
.tgpco2-guide { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 34px; align-items: start; }
.tgpco2-guide__copy h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 12px 0 12px; }
.tgpco2-guide__copy p { color: var(--c-text-2); font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.tgpco2-guide__note { font-size: 13px !important; color: var(--c-text-3) !important; padding: 12px 14px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-border); }
.tgpco2-guide__rows { display: flex; flex-direction: column; gap: 8px; }
.tgpco2 .tgpco2-guide__row { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) auto auto 28px; align-items: center; gap: 14px; width: 100%; padding: 12px 14px !important; border-radius: 14px !important; background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; color: var(--c-text) !important; text-align: left; transition: border-color 0.15s, transform 0.15s; }
.tgpco2 .tgpco2-guide__row:hover { border-color: rgba(255, 255, 255, 0.22) !important; transform: translateX(2px); }
.tgpco2-guide__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-surface-3); color: var(--c-text); }
.tgpco2-guide__label b { display: block; font-size: 14.5px; font-weight: 600; }
.tgpco2-guide__label small { display: block; font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-guide__from, .tgpco2-guide__typ { text-align: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 84px; }
.tgpco2-guide__from small, .tgpco2-guide__typ small { display: block; font-size: 10.5px; font-weight: 500; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.tgpco2-guide__typ { color: var(--c-accent-text); }
.tgpco2-guide__go { color: var(--c-text-3); display: grid; place-items: center; }
.tgpco2-cmp { border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden; background: var(--c-surface); }
.tgpco2-cmp__head, .tgpco2-cmp__row, .tgpco2-cmp__foot { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: center; }
.tgpco2-cmp__head { background: var(--c-surface-2); font-size: 13px; font-weight: 600; color: var(--c-text-2); }
.tgpco2-cmp__head span, .tgpco2-cmp__row span, .tgpco2-cmp__foot span { padding: 14px 16px; text-align: center; }
.tgpco2-cmp__head span:first-child, .tgpco2-cmp__row span:first-child, .tgpco2-cmp__foot span:first-child { text-align: left; }
.tgpco2-cmp__head .is-hero { color: var(--c-text); background: rgba(124, 92, 255, 0.16); font-weight: 700; }
.tgpco2-cmp__row { border-top: 1px solid var(--c-border); font-size: 14px; }
.tgpco2-cmp__row .is-hero, .tgpco2-cmp__foot .is-hero { background: rgba(124, 92, 255, 0.08); }
.tgpco2-cmp__what { color: var(--c-text-2); }
.tgpco2-cmp i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; }
.tgpco2-cmp i.y { background: var(--c-green-soft); color: var(--c-green); }
.tgpco2-cmp i.n { background: rgba(255, 255, 255, 0.06); color: var(--c-text-3); }
.tgpco2-cmp i.v { width: auto; height: auto; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; background: var(--c-surface-3); color: var(--c-text-3); }
.tgpco2-cmp__foot { border-top: 1px solid var(--c-border); }
.tgpco2-cmp__foot .tgpco2-btn { display: inline-flex; }
.tgpco2-faq--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.tgpco2-faq--cols details + details { margin-top: 0; }
.tgpco2-faq--cols details { border-radius: 14px; }
.tgpco2-faq--cols summary { font-size: 15px; }
.tgpco2-cta { margin-bottom: 20px; }
.tgpco2-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 40px clamp(22px, 4vw, 52px); border-radius: 24px; background: linear-gradient(135deg, #2a1f6b 0%, #17141f 55%, #131313 100%); border: 1px solid rgba(124, 92, 255, 0.35); position: relative; overflow: hidden; }
.tgpco2-cta__inner::after { content: ''; position: absolute; width: 420px; height: 420px; left: -120px; bottom: -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, 0.35), rgba(124, 92, 255, 0)); pointer-events: none; }
.tgpco2-cta h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 10px; }
.tgpco2-cta p { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 15px; line-height: 1.6; max-width: 560px; }
.tgpco2-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; flex: 0 0 auto; }
@media (max-width: 1080px) {
  .tgpco2-why__grid, .tgpco2-how { grid-template-columns: 1fr 1fr; }
  .tgpco2-how::before { display: none; }
  .tgpco2-guide { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .tgpco2-track .tgpco2-btn { display: none !important; }
  .tgpco2-why__grid, .tgpco2-how, .tgpco2-faq--cols { grid-template-columns: 1fr; }
  .tgpco2-how { gap: 22px; }
  .tgpco2-cmp__head, .tgpco2-cmp__row, .tgpco2-cmp__foot { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); font-size: 12.5px; }
  .tgpco2-cmp__head span, .tgpco2-cmp__row span, .tgpco2-cmp__foot span { padding: 10px 8px; }
  .tgpco2-cmp i.v { padding: 3px 6px; font-size: 10px; }
  .tgpco2 .tgpco2-guide__row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .tgpco2-guide__typ, .tgpco2-guide__go { display: none; }
  .tgpco2-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* support messages, paused producers, admin helpers */
.tgpco2-msg--support .tgpco2-msg__bubble { background: rgba(124, 92, 255, 0.08); border-color: rgba(124, 92, 255, 0.45); }
.tgpco2-msg--support .tgpco2-msg__meta span:first-child { color: var(--c-accent-text); font-weight: 600; }
.tgpco2-msg--support .tgpco2-avatar { background: var(--c-accent); color: #fff; font-size: 9px; }
.tgpco2-notice.tgpco2-paused { display: flex; gap: 12px; align-items: flex-start; }
.tgpco2-notice.tgpco2-paused b { display: block; margin-bottom: 2px; }
.tgpco2-notice.tgpco2-paused span { font-size: 13px; color: var(--c-text-2); }
.tgpco2-notice.tgpco2-paused .tgpco2-ic { flex: 0 0 auto; margin-top: 2px; color: var(--c-amber-text); }
.tgpco2.is-paused [data-hire] { pointer-events: none; opacity: 0.45; }
.tgpco2 button.tgpco2-btn.is-paused { border-color: rgba(227, 160, 8, 0.5) !important; color: var(--c-amber-text) !important; }
.tgpco2-ok { color: var(--c-green); font-weight: 600; }
.tgpco2-warn { color: var(--c-amber-text); font-weight: 600; }
.tgpco2-notice--amber { border-color: rgba(227, 160, 8, 0.4); background: rgba(227, 160, 8, 0.08); }

/* ===== hero: soft blend into the page ===== */
.tgpco2-mz { overflow: hidden; }
/* `clip` instead of `hidden`: hidden turns <body> into a scroll container once <html> also has an overflow
   value (the phone rule further down), and Safari then stops the theme's sticky header from sticking */
body.tgpco2-host, body.tgpco2-page { overflow-x: hidden; overflow-x: clip; }
.tgpco2-mz__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(12, 12, 15, 0) 0%, rgba(12, 12, 15, 0.55) 45%, #0d0d0d 100%); }
.tgpco2-mz::before { background: linear-gradient(180deg, rgba(12, 12, 15, 0.35) 0%, rgba(12, 12, 15, 0.05) 30%, rgba(12, 12, 15, 0.35) 70%, rgba(12, 12, 15, 0.9) 100%); }
.tgpco2-mz__photo { top: -6%; bottom: -10%; }
@media (max-width: 720px) { .tgpco2-mz__fade { height: 180px; } }

/* ===== browse tiles: icon cards ===== */
.tgpco2-browse { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tgpco2 .tgpco2-browse__item { aspect-ratio: auto; min-height: 176px; display: flex !important; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 18px 16px 16px !important; background: linear-gradient(180deg, #171717, #121212) !important; border: 1px solid var(--c-border) !important; border-radius: 18px !important; text-align: left; overflow: hidden; }
.tgpco2 .tgpco2-browse__item::before { content: ''; position: absolute; width: 160px; height: 160px; right: -70px; top: -80px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, 0.22), rgba(124, 92, 255, 0)); transition: transform 0.4s var(--ease), opacity 0.3s; opacity: 0.7; }
.tgpco2 .tgpco2-browse__item:hover::before { transform: scale(1.5); opacity: 1; }
.tgpco2 .tgpco2-browse__item:hover { border-color: rgba(124, 92, 255, 0.5) !important; transform: translateY(-3px); }
.tgpco2-browse__item::after { display: none; }
.tgpco2-browse__ic { position: static; width: 46px; height: 46px; border-radius: 14px; background: rgba(124, 92, 255, 0.14); color: var(--c-accent-text); display: grid; place-items: center; backdrop-filter: none; }
.tgpco2-browse__txt { position: static; }
.tgpco2-browse__txt b { font-size: 15px; }
.tgpco2-browse__txt span { color: var(--c-text-3); font-size: 12.5px; margin-top: 4px; }
.tgpco2-browse__item em { margin-top: auto; font-style: normal; font-size: 12px; color: var(--c-text-3); display: inline-flex; align-items: center; gap: 5px; }
.tgpco2-browse__item:hover em { color: var(--c-accent-text); }
@media (max-width: 1080px) { .tgpco2-browse { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .tgpco2-browse { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tgpco2 .tgpco2-browse__item { min-height: 150px; } }

/* ===== filters: production style (glass bar, 48px rounded controls) ===== */
.tgpco2-filters { margin: 0 0 24px; position: relative; z-index: 6; }
.tgpco2-filters__box { display: flex; flex-wrap: wrap; gap: 14px; padding: 22px 24px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.tgpco2-filters__box > * { flex: 1 1 190px; min-width: 170px; }
.tgpco2-filters__search { flex: 1 1 280px !important; height: 48px; border-radius: 16px !important; background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 0 16px !important; }
.tgpco2-filters__search .tgpco2-ic { color: rgba(255, 255, 255, 0.45); }
.tgpco2 .tgpco2-filters__search input.tgpco2-input { background: transparent !important; border: 0 !important; height: 46px !important; padding: 0 !important; font-size: 15px !important; }
.tgpco2-filters .tgpco2-dd { min-width: 0; }
.tgpco2 .tgpco2-filters button.tgpco2-dd__btn { height: 48px; border-radius: 16px !important; padding: 0 18px !important; background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; font-size: 15px !important; font-weight: 500 !important; }
.tgpco2 .tgpco2-filters button.tgpco2-dd__btn small { display: none; }
.tgpco2 .tgpco2-filters button.tgpco2-dd__btn:hover { border-color: rgba(255, 255, 255, 0.2) !important; background: rgba(0, 0, 0, 0.55) !important; }
.tgpco2 .tgpco2-filters button.tgpco2-dd__btn.has-value { border-color: rgba(124, 92, 255, 0.7) !important; background: rgba(124, 92, 255, 0.12) !important; }
.tgpco2-filters .tgpco2-dd__menu { border-radius: 16px; padding: 8px; }
.tgpco2 .tgpco2-filters button.tgpco2-dd__opt { padding: 11px 14px !important; font-size: 15px !important; }
.tgpco2-filters__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.tgpco2 button.tgpco2-filters__reset { margin: 0 auto; display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 16px !important; border-radius: 50px !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 13px !important; }
.tgpco2 button.tgpco2-filters__reset:hover { color: #fff !important; border-color: rgba(255, 255, 255, 0.5) !important; }
.tgpco2-cards[data-grid] { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 24px; }
@media (max-width: 720px) { .tgpco2-filters__box { padding: 14px; gap: 10px; } .tgpco2-filters__box > * { flex: 1 1 calc(50% - 5px); min-width: calc(50% - 5px); } .tgpco2-filters__search { flex: 1 1 100% !important; } .tgpco2-cards[data-grid] { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 480px) { .tgpco2-cards[data-grid] { grid-template-columns: 1fr; } .tgpco2-filters__box > * { flex-basis: 100%; min-width: 100%; } }

/* ===== storyboard ===== */
.tgpco2-story__head { max-width: 680px; margin-bottom: 28px; }
.tgpco2-story__head h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 12px 0 12px; }
.tgpco2-story__head p { color: var(--c-text-2); font-size: 15.5px; line-height: 1.6; margin: 0; }
.tgpco2-flow { margin: 0 0 34px; }
.tgpco2-flow__track { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: visible; }
.tgpco2-flow__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, #7c5cff, #b39dff); }
.tgpco2-flow__dot { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(124, 92, 255, 0.28), 0 0 24px rgba(124, 92, 255, 0.8); }
.tgpco2-story.is-on .tgpco2-flow__fill { animation: tgpco2-flowfill 14s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.tgpco2-story.is-on .tgpco2-flow__dot { animation: tgpco2-flowdot 14s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes tgpco2-flowfill { 0% { width: 0; } 12% { width: 16%; } 30% { width: 16%; } 42% { width: 50%; } 55% { width: 50%; } 68% { width: 68%; } 80% { width: 84%; } 92% { width: 100%; } 100% { width: 100%; } }
@keyframes tgpco2-flowdot { 0% { left: 0; } 12% { left: 16%; } 30% { left: 16%; } 42% { left: 50%; } 55% { left: 50%; } 68% { left: 68%; } 80% { left: 84%; } 92% { left: 100%; } 100% { left: 100%; } }
.tgpco2-flow__labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; }
.tgpco2-scenes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; counter-reset: sc; }
.tgpco2-scene { position: relative; display: flex; flex-direction: column; gap: 14px; }
.tgpco2-scene__txt b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.tgpco2-scene__txt b::before { counter-increment: sc; content: counter(sc, decimal-leading-zero); display: inline-block; margin-right: 8px; font-size: 11px; letter-spacing: 0.08em; color: var(--c-accent-text); font-weight: 700; vertical-align: 2px; }
.tgpco2-scene__txt span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: var(--c-text-2); }
.tgpco2-screen { position: relative; aspect-ratio: 5 / 4; border-radius: 18px; background: linear-gradient(180deg, #181818, #111111); border: 1px solid var(--c-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 40px -20px rgba(0, 0, 0, 0.6); padding: 18px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; font-size: 11.5px; color: var(--c-text-2); --d: calc(var(--i) * 0.45s); }
.tgpco2-screen::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(124, 92, 255, 0.12), transparent 60%); pointer-events: none; }
.tgpco2-screen > * { position: relative; z-index: 1; }
.sk-top { display: flex; gap: 5px; margin-bottom: 4px; } .sk-top i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.sk-title { height: 12px; width: 55%; border-radius: 4px; background: rgba(255, 255, 255, 0.28); }
.sk-line { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.13); width: 0; }
.sk-line.w90 { --w: 90%; } .sk-line.w80 { --w: 80%; } .sk-line.w70 { --w: 70%; } .sk-line.w60 { --w: 60%; } .sk-line.w50 { --w: 50%; } .sk-line.w40 { --w: 40%; }
.tgpco2-story.is-on .sk-line { animation: sk-type 7s ease-out infinite; animation-delay: var(--d); }
.tgpco2-story.is-on .sk-line:nth-child(3) { animation-delay: calc(var(--d) + 0.35s); } .tgpco2-story.is-on .sk-line:nth-child(4) { animation-delay: calc(var(--d) + 0.7s); } .tgpco2-story.is-on .sk-line:nth-child(5) { animation-delay: calc(var(--d) + 1.05s); }
@keyframes sk-type { 0% { width: 0; } 14% { width: var(--w, 70%); } 88% { width: var(--w, 70%); opacity: 1; } 100% { width: var(--w, 70%); opacity: 0; } }
.sk-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.sk-chips span, .sk-chip { padding: 4px 8px; border-radius: 999px; background: rgba(124, 92, 255, 0.16); color: #cbbcff; font-weight: 600; font-size: 10.5px; transform: scale(0); }
.tgpco2-story.is-on .sk-chips span, .tgpco2-story.is-on .sk-chip { animation: sk-pop 7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-delay: calc(var(--d) + 1.5s); }
.tgpco2-story.is-on .sk-chips span:nth-child(2) { animation-delay: calc(var(--d) + 1.7s); } .tgpco2-story.is-on .sk-chips span:nth-child(3) { animation-delay: calc(var(--d) + 1.9s); }
@keyframes sk-pop { 0% { transform: scale(0); } 6% { transform: scale(1); } 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.sk-btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--c-accent); color: #fff; font-weight: 600; }
.tgpco2-story.is-on .sk-btn { animation: sk-press 7s ease infinite; animation-delay: calc(var(--d) + 2.4s); }
@keyframes sk-press { 0%, 4% { transform: scale(1); } 6% { transform: scale(0.94); } 8% { transform: scale(1); background: #22c55e; } 90% { background: #22c55e; opacity: 1; } 100% { opacity: 0; } }
.sk-card { margin: auto 0; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 10px; }
.sk-amt { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.02em; } .sk-amt small { display: block; font-size: 10.5px; color: var(--c-text-3); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.sk-row { display: flex; align-items: center; gap: 8px; } .sk-row--end { justify-content: space-between; margin-top: auto; }
.sk-cc { width: 26px; height: 17px; border-radius: 4px; background: linear-gradient(135deg, #b39dff, #7c5cff); flex: 0 0 auto; }
.sk-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .sk-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7c5cff, #22c55e); }
.tgpco2-story.is-on .sk-bar i { animation: sk-fill 7s ease-in-out infinite; animation-delay: calc(var(--d) + 0.6s); }
@keyframes sk-fill { 0% { width: 0; } 30% { width: 100%; } 90% { width: 100%; opacity: 1; } 100% { opacity: 0; } }
.sk-ok, .sk-lock, .sk-release, .sk-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; font-weight: 600; font-size: 10.5px; align-self: flex-start; }
.sk-ok { background: rgba(34, 197, 94, 0.14); color: #6ee7a1; opacity: 0; }
.tgpco2-story.is-on .sk-ok { animation: sk-in 7s ease infinite; animation-delay: calc(var(--d) + 2.6s); }
@keyframes sk-in { 0% { opacity: 0; transform: translateY(6px); } 6% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; } }
.sk-msg { max-width: 82%; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); position: relative; opacity: 0; transform: translateY(8px); }
.sk-msg.r { align-self: flex-end; background: rgba(124, 92, 255, 0.22); border-bottom-right-radius: 4px; } .sk-msg.l { border-bottom-left-radius: 4px; }
.sk-msg .sk-text { display: block; color: #e6e6ee; }
.sk-dots { position: absolute; inset: 0; display: flex; align-items: center; gap: 4px; padding-left: 10px; } .sk-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); animation: sk-dot 0.9s infinite; } .sk-dots i:nth-child(2) { animation-delay: 0.15s; } .sk-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sk-dot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.tgpco2-story.is-on .sk-msg { animation: sk-msg 8s ease infinite; animation-delay: calc(var(--d) + 0.2s); }
.tgpco2-story.is-on .sk-msg:nth-child(2) { animation-delay: calc(var(--d) + 1.6s); } .tgpco2-story.is-on .sk-msg:nth-child(3) { animation-delay: calc(var(--d) + 3s); }
.tgpco2-story.is-on .sk-msg.l .sk-dots { animation: sk-dots-hide 8s ease infinite; animation-delay: inherit; } .tgpco2-story.is-on .sk-msg.l .sk-text { animation: sk-text-show 8s ease infinite; animation-delay: inherit; }
@keyframes sk-msg { 0% { opacity: 0; transform: translateY(8px); } 5% { opacity: 1; transform: none; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sk-dots-hide { 0%, 14% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes sk-text-show { 0%, 14% { opacity: 0; } 16%, 100% { opacity: 1; } }
.sk-compose { margin-top: auto; display: flex; gap: 8px; align-items: center; } .sk-compose span { flex: 1; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--c-border); } .sk-compose i { width: 30px; height: 30px; border-radius: 9px; background: var(--c-accent); color: #fff; display: grid; place-items: center; }
.sk-wave { position: relative; display: flex; align-items: center; gap: 3px; height: 70px; margin: auto 0; } .sk-wave--sm { height: 48px; margin: 0; }
.sk-wave i { flex: 1; height: var(--h); border-radius: 2px; background: rgba(255, 255, 255, 0.2); transform: scaleY(0); transform-origin: center; }
.tgpco2-story.is-on .sk-wave i { animation: sk-grow 7s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; animation-delay: calc(var(--d) + var(--k, 0s)); }
.sk-wave i:nth-child(n) { --k: 0s; } .sk-wave i:nth-child(5n+1) { --k: 0.05s; } .sk-wave i:nth-child(5n+2) { --k: 0.1s; } .sk-wave i:nth-child(5n+3) { --k: 0.15s; } .sk-wave i:nth-child(5n+4) { --k: 0.2s; } .sk-wave i:nth-child(n+15) { --k: 0.3s; } .sk-wave i:nth-child(n+22) { --k: 0.45s; }
@keyframes sk-grow { 0% { transform: scaleY(0); } 12% { transform: scaleY(1); } 90% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }
.sk-head { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; opacity: 0; }
.tgpco2-story.is-on .sk-head { animation: sk-sweep 7s linear infinite; animation-delay: calc(var(--d) + 1.2s); }
@keyframes sk-sweep { 0% { left: 0; opacity: 0; } 5% { opacity: 1; } 80% { left: 100%; opacity: 1; } 82%, 100% { opacity: 0; } }
.tgpco2-story.is-on .tgpco2-screen--demo .sk-wave i { animation-name: sk-grow-played; }
@keyframes sk-grow-played { 0% { transform: scaleY(0); } 12% { transform: scaleY(1); } 90% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }
.sk-tag { background: rgba(255, 255, 255, 0.07); color: var(--c-text-2); }
.sk-play { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #0d0d0d; display: grid; place-items: center; padding-left: 1px; } .sk-time { font-variant-numeric: tabular-nums; }
.sk-pin { position: absolute; top: -8px; transform: translate(-50%, -8px) scale(0); padding: 3px 6px; border-radius: 6px; background: var(--c-amber-soft); color: var(--c-amber-text); font-size: 10px; font-weight: 700; }
.sk-pin::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 30px; background: rgba(227, 160, 8, 0.6); }
.tgpco2-story.is-on .sk-pin { animation: sk-drop 7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-delay: calc(var(--d) + 1s); } .tgpco2-story.is-on .sk-pin + .sk-pin { animation-delay: calc(var(--d) + 1.6s); }
@keyframes sk-drop { 0% { transform: translate(-50%, -14px) scale(0); } 6% { transform: translate(-50%, 0) scale(1); } 90% { transform: translate(-50%, 0) scale(1); opacity: 1; } 100% { opacity: 0; } }
.sk-note { padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border-left: 2px solid var(--c-amber-text); color: #e6e6ee; opacity: 0; }
.tgpco2-story.is-on .sk-note { animation: sk-in 7s ease infinite; animation-delay: calc(var(--d) + 2.1s); } .tgpco2-story.is-on .sk-note + .sk-note { animation-delay: calc(var(--d) + 2.5s); }
.sk-approve { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 600; font-style: normal; }
.tgpco2-story.is-on .sk-approve { animation: sk-approve 7s ease infinite; animation-delay: calc(var(--d) + 4s); }
@keyframes sk-approve { 0%, 4% { background: rgba(255, 255, 255, 0.08); transform: scale(1); } 6% { transform: scale(0.94); } 9% { background: #22c55e; transform: scale(1); } 90% { background: #22c55e; opacity: 1; } 100% { opacity: 0; } }
.tgpco2-story.is-on .tgpco2-screen--rev .sk-chip { animation-delay: calc(var(--d) + 3.2s); }
.sk-lock { background: rgba(255, 255, 255, 0.06); color: var(--c-text-2); } .sk-lock__ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(124, 92, 255, 0.2); color: #cbbcff; }
.tgpco2-story.is-on .sk-lock { animation: sk-in 7s ease infinite; animation-delay: calc(var(--d) + 2.6s); }
.sk-file { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--c-border); color: #e6e6ee; opacity: 0; transform: translateX(-10px); } .sk-file i { width: 22px; height: 22px; border-radius: 6px; background: rgba(124, 92, 255, 0.2); } .sk-file span { flex: 1; font-weight: 600; } .sk-file em { font-style: normal; color: var(--c-text-3); }
.tgpco2-story.is-on .sk-file { animation: sk-slide 7s ease infinite; animation-delay: calc(var(--d) + 0.3s); } .tgpco2-story.is-on .sk-file:nth-child(2) { animation-delay: calc(var(--d) + 0.7s); } .tgpco2-story.is-on .sk-file:nth-child(3) { animation-delay: calc(var(--d) + 1.1s); }
@keyframes sk-slide { 0% { opacity: 0; transform: translateX(-10px); } 6% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; } }
.sk-dl { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .sk-dl__bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .sk-dl__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7c5cff, #b39dff); } .sk-dl b { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 8px 12px; border-radius: 10px; background: var(--c-accent); color: #fff; font-weight: 600; }
.tgpco2-story.is-on .sk-dl__bar i { animation: sk-fill 7s ease-in-out infinite; animation-delay: calc(var(--d) + 1.8s); }
.tgpco2-story.is-on .sk-dl b { animation: sk-press 7s ease infinite; animation-delay: calc(var(--d) + 3.4s); }
.sk-stars { display: flex; gap: 6px; margin: auto 0 4px; } .sk-stars i { color: rgba(255, 255, 255, 0.15); display: grid; } .sk-stars i .tgpco2-ic { fill: currentColor; width: 22px; height: 22px; }
.tgpco2-story.is-on .sk-stars i { animation: sk-star 7s ease infinite; animation-delay: calc(var(--d) + var(--k, 0s)); }
.sk-stars i:nth-child(1) { --k: 0.3s; } .sk-stars i:nth-child(2) { --k: 0.55s; } .sk-stars i:nth-child(3) { --k: 0.8s; } .sk-stars i:nth-child(4) { --k: 1.05s; } .sk-stars i:nth-child(5) { --k: 1.3s; }
@keyframes sk-star { 0% { color: rgba(255, 255, 255, 0.15); transform: scale(1); } 4% { color: #f5b83d; transform: scale(1.3); } 8% { transform: scale(1); } 90% { color: #f5b83d; opacity: 1; } 100% { opacity: 0; } }
.sk-release { background: rgba(34, 197, 94, 0.14); color: #6ee7a1; margin-top: auto; opacity: 0; }
.tgpco2-story.is-on .sk-release { animation: sk-in 7s ease infinite; animation-delay: calc(var(--d) + 2.4s); }
@media (max-width: 1080px) { .tgpco2-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tgpco2-flow__labels span:nth-child(2), .tgpco2-flow__labels span:nth-child(5) { display: none; } }
@media (max-width: 560px) { .tgpco2-scenes { grid-template-columns: 1fr; } .tgpco2-flow__labels { font-size: 10px; } .tgpco2-flow__labels span:nth-child(even) { display: none; } }
@media (prefers-reduced-motion: reduce) { .tgpco2-story.is-on * { animation: none !important; } .sk-line { width: var(--w, 70%); } .sk-chips span, .sk-chip, .sk-pin { transform: none; } .sk-msg, .sk-ok, .sk-note, .sk-file, .sk-lock, .sk-release { opacity: 1; transform: none; } .sk-wave i { transform: none; } .sk-bar i, .sk-dl__bar i { width: 100%; } }

/* ===== FAQ accordion + SEO block ===== */
.tgpco2-faqs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 34px; align-items: start; }
.tgpco2-faqs__copy h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 12px 0 12px; }
.tgpco2-faqs__copy p { color: var(--c-text-2); font-size: 15px; line-height: 1.6; margin: 0; }
.tgpco2-acc { border-top: 1px solid var(--c-border); }
.tgpco2-acc__item { border-bottom: 1px solid var(--c-border); }
.tgpco2 button.tgpco2-acc__btn { width: 100%; display: flex !important; align-items: center; gap: 16px; padding: 18px 4px !important; background: transparent !important; border: 0 !important; color: var(--c-text) !important; text-align: left; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em; }
.tgpco2-acc__n { font-size: 11px; letter-spacing: 0.08em; color: var(--c-text-3); font-weight: 700; flex: 0 0 24px; }
.tgpco2-acc__q { flex: 1; }
.tgpco2-acc__ic { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--c-border-strong); flex: 0 0 auto; transition: background 0.2s, border-color 0.2s; }
.tgpco2-acc__ic i { position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.25s var(--ease); border-radius: 1px; }
.tgpco2-acc__ic i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.tgpco2-acc__item.is-open .tgpco2-acc__ic { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.tgpco2-acc__item.is-open .tgpco2-acc__ic i:last-child { transform: translate(-50%, -50%) rotate(0deg); }
.tgpco2-acc__item:hover .tgpco2-acc__ic { border-color: rgba(255, 255, 255, 0.4); }
.tgpco2-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.tgpco2-acc__item.is-open .tgpco2-acc__panel { grid-template-rows: 1fr; }
.tgpco2-acc__inner { overflow: hidden; }
.tgpco2-acc__inner p { margin: 0; padding: 0 44px 20px 44px; color: var(--c-text-2); font-size: 14.5px; line-height: 1.65; }
.tgpco2-seo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 34px; padding: 34px clamp(20px, 4vw, 44px); border-radius: 22px; background: var(--c-surface); border: 1px solid var(--c-border); }
.tgpco2-seo h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
.tgpco2-seo p { color: var(--c-text-2); font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; }
.tgpco2-seo__links { display: flex; flex-direction: column; gap: 6px; }
.tgpco2-seo__links b { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 4px; }
.tgpco2 .tgpco2-seo__links a { color: var(--c-text-2); font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tgpco2 .tgpco2-seo__links a::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); opacity: 0.8; }
.tgpco2 .tgpco2-seo__links a:hover { color: #fff; }
@media (max-width: 900px) { .tgpco2-faqs, .tgpco2-seo { grid-template-columns: 1fr; gap: 18px; } .tgpco2-acc__inner p { padding-left: 40px; } }

/* ===== presence, banners, availability, quick replies ===== */
.tgpco2-person__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--c-text-3); }
.tgpco2-person__meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--c-text-3); opacity: 0.6; }
.tgpco2-presence { display: inline-flex; align-items: center; gap: 5px; }
.tgpco2-presence i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-text-3); }
.tgpco2-presence.is-online { color: var(--c-green); } .tgpco2-presence.is-online i { background: var(--c-green); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.tgpco2-notice--danger { border-color: rgba(229, 72, 77, 0.45); background: rgba(229, 72, 77, 0.08); }
.tgpco2-notice--danger .tgpco2-ic { color: #ff8a8a; }
.tgpco2-banner b { display: block; margin-bottom: 2px; color: var(--c-text); }
.tgpco2-banner span { display: block; font-size: 13.5px; color: var(--c-text-2); }
.tgpco2-days { display: flex; gap: 6px; flex-wrap: wrap; }
.tgpco2-days__d { position: relative; } .tgpco2-days__d input { position: absolute; opacity: 0; inset: 0; }
.tgpco2-days__d span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 9px 10px; border-radius: 10px; background: var(--c-surface-2); border: 1px solid var(--c-border-strong); font-size: 13px; font-weight: 600; color: var(--c-text-3); cursor: pointer; }
.tgpco2-days__d.is-on span { background: rgba(124, 92, 255, 0.16); border-color: rgba(124, 92, 255, 0.6); color: #fff; }
.tgpco2 .tgpco2-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); cursor: pointer; }
.tgpco2 .tgpco2-toggle input { accent-color: #7c5cff; width: 18px; height: 18px; margin: 0; }
.tgpco2 .tgpco2-toggle b { display: block; font-size: 14px; } .tgpco2 .tgpco2-toggle small { display: block; color: var(--c-text-3); font-size: 12px; margin-top: 2px; }
.tgpco2-chat__composer { position: relative; }
.tgpco2-qr { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 12; max-height: 320px; overflow: auto; padding: 8px; border-radius: 14px; background: #181818; border: 1px solid var(--c-border-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.tgpco2-qr__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; font-size: 13px; }
.tgpco2 button.tgpco2-qr__manage { background: transparent !important; border: 0 !important; color: var(--c-accent-text) !important; font-size: 12px !important; padding: 0 !important; display: inline-flex !important; gap: 4px; align-items: center; }
.tgpco2 button.tgpco2-qr__item { width: 100%; display: block !important; text-align: left; padding: 9px 10px !important; border-radius: 10px !important; background: transparent !important; border: 0 !important; color: var(--c-text) !important; }
.tgpco2 button.tgpco2-qr__item:hover { background: rgba(255, 255, 255, 0.06) !important; }
.tgpco2 button.tgpco2-qr__item b { display: block; font-size: 13px !important; } .tgpco2 button.tgpco2-qr__item span { display: block; font-size: 12.5px !important; color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400 !important; }
.tgpco2-qr__edit { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.tgpco2-tplbar { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(124, 92, 255, 0.08); border: 1px solid rgba(124, 92, 255, 0.3); margin-bottom: 16px; }
.tgpco2-tplbar .tgpco2-label { display: inline-flex; align-items: center; gap: 6px; }
.tgpco2-cards--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .tgpco2-cards--3 { grid-template-columns: 1fr; } .tgpco2-qr__edit { grid-template-columns: 1fr; } }

/* ===== round 5: cards like production, tiles, single-line filters, simpler story, service editor ===== */
.tgpco2-svc { border-radius: 18px; }
.tgpco2-svc__type { border-radius: 999px; padding: 5px 12px; font-size: 11.5px; letter-spacing: 0.01em; background: #6c47ff; box-shadow: 0 4px 14px rgba(108, 71, 255, 0.45); }
.tgpco2 button.tgpco2-svc__save { width: 34px !important; height: 34px !important; background: rgba(12, 12, 15, 0.55) !important; }
.tgpco2-svc__badge { border-radius: 999px; padding: 4px 9px; background: rgba(245, 184, 61, 0.14); color: #f5b83d; border: 1px solid rgba(245, 184, 61, 0.25); }
.tgpco2-svc__tag { border-radius: 999px; padding: 4px 10px; background: rgba(124, 92, 255, 0.12); color: #cbbcff; border: 1px solid rgba(124, 92, 255, 0.22); }
.tgpco2-svc__tag--more { background: var(--c-surface-3); color: var(--c-text-2); border-color: var(--c-border); }
.tgpco2-svc__days { border-radius: 999px; padding: 5px 10px; }
.tgpco2-svc__daws { display: inline-flex; align-items: center; gap: 6px; }
.tgpco2-daw { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.tgpco2-daw img, .tgpco2-daw svg { width: 16px !important; height: 16px !important; object-fit: contain; display: block; }
.tgpco2 button.tgpco2-svc__hire, .tgpco2 span.tgpco2-svc__hire { border-radius: 50px !important; padding: 12px 18px !important; font-size: 14px !important; display: flex; justify-content: center; }
.tgpco2-svc__price { font-size: 22px; }
.tgpco2-svc__stars { cursor: default; }
/* tooltips */
.tgpco2 [data-tip] { position: relative; }
.tgpco2 [data-tip]::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; min-width: 120px; max-width: 240px; width: max-content; padding: 8px 10px; border-radius: 10px; background: #252525; color: #f2f2f5; font-size: 12px; line-height: 1.45; font-weight: 400; white-space: normal; text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.15s, transform 0.15s; }
.tgpco2 [data-tip]::before { content: ''; position: absolute; left: 14px; bottom: calc(100% + 3px); border: 5px solid transparent; border-top-color: #252525; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 31; }
.tgpco2 [data-tip]:hover::after, .tgpco2 [data-tip]:hover::before { opacity: 1; transform: none; }
.tgpco2 [data-tip-wide]::after { max-width: 300px; }
.tgpco2-svc__meta [data-tip]::after { left: auto; right: 0; } .tgpco2-svc__meta [data-tip]::before { left: auto; right: 14px; }
.tgpco2-svc__descw { position: relative; cursor: default; }
.tgpco2-svc__descw[data-tip]::after { bottom: auto; top: calc(100% + 6px); transform: translateY(-4px); } .tgpco2-svc__descw[data-tip]::before { bottom: auto; top: calc(100% + 1px); border-top-color: transparent; border-bottom-color: #252525; }
.tgpco2-daw[data-tip]::after { min-width: 0; left: 50%; transform: translate(-50%, 4px); text-align: center; } .tgpco2-daw[data-tip]:hover::after { transform: translate(-50%, 0); } .tgpco2-daw[data-tip]::before { left: 50%; margin-left: -5px; }
/* tiles */
.tgpco2-browse { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tgpco2 .tgpco2-browse__item { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px !important; border-radius: 16px !important; background: var(--c-surface) !important; }
.tgpco2 .tgpco2-browse__item::before { display: none; }
.tgpco2-browse__ic { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; background: linear-gradient(135deg, rgba(124, 92, 255, 0.28), rgba(124, 92, 255, 0.08)); color: #cbbcff; transition: transform 0.2s var(--ease); }
.tgpco2 .tgpco2-browse__item:hover .tgpco2-browse__ic { transform: scale(1.06); }
.tgpco2-browse__txt { flex: 1; min-width: 0; }
.tgpco2-browse__txt b { font-size: 15px; }
.tgpco2-browse__txt span { margin-top: 2px; font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-browse__go { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--c-text-3); border: 1px solid var(--c-border); flex: 0 0 auto; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.tgpco2 .tgpco2-browse__item:hover .tgpco2-browse__go { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.tgpco2-browse__item em { display: none; }
@media (max-width: 720px) { .tgpco2-browse { grid-template-columns: 1fr; gap: 8px; } }
/* filters: one line on desktop */
.tgpco2-filters__box { flex-wrap: nowrap; gap: 10px; padding: 16px 18px; }
.tgpco2-filters__box > * { flex: 1 1 0; min-width: 0; }
.tgpco2-filters__search { flex: 1.35 1 0 !important; height: 46px; padding: 0 14px 0 0 !important; }
.tgpco2-filters__search .tgpco2-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.tgpco2 .tgpco2-filters__search input.tgpco2-input { height: 44px !important; padding: 0 0 0 40px !important; font-size: 14px !important; }
.tgpco2 .tgpco2-filters button.tgpco2-dd__btn { height: 46px; padding: 0 12px !important; font-size: 14px !important; gap: 6px; }
.tgpco2 .tgpco2-filters button.tgpco2-dd__btn > span { font-size: 14px; }
@media (max-width: 1180px) { .tgpco2-filters__box { flex-wrap: wrap; } .tgpco2-filters__box > * { flex: 1 1 calc(33.33% - 8px); min-width: calc(33.33% - 8px); } .tgpco2-filters__search { flex: 1 1 100% !important; } }
@media (max-width: 720px) { .tgpco2-filters__box > * { flex: 1 1 calc(50% - 5px); min-width: calc(50% - 5px); } }
/* simpler storyboard */
.tgpco2-story__head { max-width: 560px; margin-bottom: 22px; }
.tgpco2-story__head h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 8px; }
.tgpco2-story__head p { font-size: 15px; }
.tgpco2-flow { margin-bottom: 26px; }
.tgpco2-scenes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tgpco2-scenes--4 .tgpco2-screen { aspect-ratio: 4 / 3; padding: 16px; }
.tgpco2-scenes--4 .sk-wave { height: 56px; }
.tgpco2-scenes--4 .sk-stars { margin: auto 0 0; }
@keyframes tgpco2-flowfill { 0% { width: 0; } 20% { width: 20%; } 35% { width: 20%; } 50% { width: 50%; } 62% { width: 50%; } 78% { width: 80%; } 92% { width: 100%; } 100% { width: 100%; } }
@keyframes tgpco2-flowdot { 0% { left: 0; } 20% { left: 20%; } 35% { left: 20%; } 50% { left: 50%; } 62% { left: 50%; } 78% { left: 80%; } 92% { left: 100%; } 100% { left: 100%; } }
@media (max-width: 1080px) { .tgpco2-scenes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tgpco2-scenes--4 { grid-template-columns: 1fr; } }
/* light modal + service editor wizard */
.tgpco2-modal--light .tgpco2-modal__backdrop { background: rgba(12, 12, 15, 0.08); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.tgpco2-modal--light .tgpco2-modal__panel { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.22); }
.tgpco2-wiz--svc { grid-template-columns: minmax(0, 1fr) 340px; }
.tgpco2-wiz--svc .tgpco2-wiz__side { padding: 22px 20px; }
.tgpco2-svc--preview { pointer-events: none; transform: none !important; box-shadow: none; }
.tgpco2-svc--preview .tgpco2-svc__media { aspect-ratio: 16 / 10; }
.tgpco2-svc--preview .tgpco2-svc__demo { background: none; }
.tgpco2-svc--preview .tgpco2-svc__play { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0d0d0d; display: grid; place-items: center; }
.tgpco2-wiz__trust { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--c-text-2); }
.tgpco2-wiz__trust span { display: inline-flex; gap: 6px; align-items: center; }
.tgpco2-cover { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: start; }
.tgpco2-cover__box { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--c-surface-2); border: 1px dashed var(--c-border-strong); cursor: pointer; display: grid; place-items: center; transition: border-color 0.15s; }
.tgpco2-cover__box:hover, .tgpco2-cover__box.is-drag { border-color: var(--c-accent); }
.tgpco2-cover__box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tgpco2-cover__box img.is-new { animation: tgpco2-imgin 0.6s var(--ease); }
@keyframes tgpco2-imgin { 0% { opacity: 0; transform: scale(1.08); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
.tgpco2-cover__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--c-text-3); font-size: 13px; text-align: center; padding: 12px; }
.tgpco2-cover__empty small { font-size: 11px; }
.tgpco2-cover__box.has-img .tgpco2-cover__empty { display: none; }
.tgpco2-cover__box.is-uploading img { filter: blur(3px) brightness(0.6); }
.tgpco2-cover__prog { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 12, 15, 0.45); }
.tgpco2-cover__prog svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.tgpco2-cover__prog circle { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: 3; }
.tgpco2-cover__prog .tgpco2-cover__ring { stroke: #7c5cff; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset 0.2s; }
.tgpco2-cover__prog b { position: absolute; font-size: 12px; color: #fff; }
.tgpco2-cover__side b { display: block; font-size: 14px; margin-bottom: 4px; }
.tgpco2-upl { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-upl i { flex: 1; height: 6px; border-radius: 3px; background: var(--c-surface-3); position: relative; overflow: hidden; }
.tgpco2-upl i::after { content: ''; position: absolute; inset: 0; width: var(--w, 0); background: linear-gradient(90deg, #7c5cff, #b39dff); }
.tgpco2-track-ed { padding: 12px; border-radius: 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); margin-top: 10px; }
.tgpco2-track-ed__head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.tgpco2 .tgpco2-track-ed__name { flex: 1; height: 36px !important; font-size: 13px !important; }
.tgpco2-seg__wave { position: relative; height: 72px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; }
.tgpco2-seg__wave canvas { display: block; width: 100%; height: 100%; }
.tgpco2-seg__win { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; background: rgba(124, 92, 255, 0.14); border-left: 2px solid #7c5cff; border-right: 2px solid #7c5cff; cursor: grab; }
.tgpco2-seg__h { position: absolute; top: 50%; width: 14px; height: 30px; margin-top: -15px; border-radius: 7px; background: #7c5cff; cursor: ew-resize; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.tgpco2-seg__h[data-h="s"] { left: -8px; } .tgpco2-seg__h[data-h="e"] { right: -8px; }
.tgpco2-seg__cur { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; pointer-events: none; }
.tgpco2-seg__row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--c-text-2); }
.tgpco2 button.tgpco2-seg__play { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: var(--c-accent) !important; color: #fff !important; display: grid !important; place-items: center !important; padding: 0 !important; }
.tgpco2-seg__lbl { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-text); }
.tgpco2-seg__hint { margin-left: auto; color: var(--c-text-3); font-size: 11.5px; }
@media (max-width: 720px) { .tgpco2-cover { grid-template-columns: 1fr; } .tgpco2-cover__box { max-width: 220px; } .tgpco2-seg__hint { display: none; } }

/* ===== round 6: card refinements ===== */
.tgpco2-svc { overflow: visible; background: #131313; border-color: rgba(255, 255, 255, 0.07); }
.tgpco2-svc__media { border-radius: 18px 18px 0 0; }
.tgpco2-svc:hover { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.tgpco2-svc__body { padding: 16px 18px 18px; gap: 10px; }
.tgpco2-svc__title { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: #fff; }
.tgpco2 a.tgpco2-svc__vendor, .tgpco2-svc__vendor { font-size: 13.5px; color: #c9c9d2; }
.tgpco2-svc__vname { font-weight: 600; }
.tgpco2-svc__desc { font-size: 13.5px; line-height: 1.55; color: #a3a3ad; cursor: default; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.tgpco2-svc__tag { background: rgba(255, 255, 255, 0.05); color: #b8b8c2; border-color: rgba(255, 255, 255, 0.08); }
.tgpco2-svc__tag--more { color: #8a8a94; }
.tgpco2-svc__badge { background: rgba(245, 184, 61, 0.1); color: #f2b63b; border-color: rgba(245, 184, 61, 0.2); }
.tgpco2-svc__stars { color: #f2b63b; }
.tgpco2-svc__price { font-size: 22px; color: #fff; }
.tgpco2-svc__days { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); color: #c9c9d2; }
.tgpco2-svc__fast { font-style: normal; font-size: 12px; line-height: 1; margin-left: 2px; }
.tgpco2-daw { background: transparent; width: 20px; height: 20px; border-radius: 0; }
.tgpco2-daw img, .tgpco2-daw svg { width: 18px !important; height: 18px !important; }
.tgpco2-artph { background: linear-gradient(135deg, #1b1b1b 0%, #222228 55%, #181818 100%); }
.tgpco2-svc__type { background: #7c5cff; box-shadow: 0 4px 14px rgba(124, 92, 255, 0.35); }
.tgpco2-cards[data-grid] .tgpco2-svc { margin-bottom: 8px; }
/* tooltips: multi-line, never clipped, flip near edges */
.tgpco2 [data-tip]::after { white-space: pre-line; max-width: 280px; z-index: 60; }
.tgpco2 [data-tip-wide]::after { max-width: 320px; }
.tgpco2 .tip-right[data-tip]::after { left: auto; right: 0; } .tgpco2 .tip-right[data-tip]::before { left: auto; right: 14px; }
.tgpco2 .tip-below[data-tip]::after { bottom: auto; top: calc(100% + 6px); } .tgpco2 .tip-below[data-tip]::before { bottom: auto; top: calc(100% + 1px); border-top-color: transparent; border-bottom-color: #252525; }
.tgpco2-svc__body, .tgpco2-svc__bottom, .tgpco2-svc__meta, .tgpco2-svc__tags { overflow: visible; }

/* ===== wizard modal: footer always visible, scrolling body, mobile stack ===== */
.tgpco2-modal--wizard .tgpco2-modal__panel { height: calc(100vh - 48px); max-height: calc(100vh - 48px); }
.tgpco2-wiz { height: 100%; max-height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.tgpco2-wiz__main { min-height: 0; height: 100%; }
.tgpco2-wiz__body { min-height: 0; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tgpco2-wiz__foot { flex: 0 0 auto; }
.tgpco2-wiz__side { min-height: 0; overflow-y: auto; }
@media (max-width: 900px) {
  .tgpco2-modal--wizard .tgpco2-modal__panel { height: 100vh; max-height: 100vh; border-radius: 0; }
  .tgpco2-modal--wizard { padding: 0 !important; }
  .tgpco2-wiz, .tgpco2-wiz--svc { grid-template-columns: 1fr; }
  .tgpco2-wiz__side { display: none; }
  .tgpco2-wiz__head, .tgpco2-wiz__progress, .tgpco2-wiz__stepname, .tgpco2-wiz__body, .tgpco2-wiz__foot { padding-left: 16px; padding-right: 16px; }
  .tgpco2-wiz__foot { position: sticky; bottom: 0; }
  .tgpco2-form-row, .tgpco2-form-row--3 { grid-template-columns: 1fr !important; }
  .tgpco2-addon-row { grid-template-columns: 1fr 1fr !important; }
  .tgpco2-track-ed { padding: 10px; }
  .tgpco2-seg__wave { height: 60px; }
  .tgpco2-cover { grid-template-columns: 1fr; }
  .tgpco2-cover__box { max-width: 200px; }
}
@media (max-width: 560px) { .tgpco2-days__d span { min-width: 40px; padding: 8px 6px; } .tgpco2-qr__edit { grid-template-columns: 1fr; } }

/* ===== floating tooltips ===== */
.tgpco2 [data-tip]::after, .tgpco2 [data-tip]::before, .tgpco2 .tip-right[data-tip]::after, .tgpco2 .tip-below[data-tip]::after { display: none !important; content: none !important; }
.tgpco2-tipbox { position: absolute; z-index: 99999; padding: 10px 12px; border-radius: 12px; background: #1e1e1e; color: #f2f2f5; font: 400 12.5px/1.5 Inter, system-ui, sans-serif; white-space: pre-line; word-break: break-word; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(4px); transition: opacity 0.14s, transform 0.14s; pointer-events: none; }
.tgpco2-tipbox.is-on { opacity: 1; transform: none; }
.tgpco2-tipbox { max-height: 60vh; overflow: hidden; }
.tgpco2-tipbox::after { content: ''; position: absolute; left: var(--ax, 50%); top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #1e1e1e; }
.tgpco2-tipbox.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1e1e1e; }
.tgpco2-svc:hover { z-index: 5; }
.tgpco2 .tgpco2-svc__stars, .tgpco2 .tgpco2-svc__days, .tgpco2 .tgpco2-svc__tag--more, .tgpco2 .tgpco2-svc__badge, .tgpco2 .tgpco2-daw { cursor: default; }
/* wizard: pass the panel height through the modal body so the footer stays on screen */
.tgpco2-modal--wizard .tgpco2-modal__panel > .tgpco2-modal__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.tgpco2-modal--wizard .tgpco2-wiz { flex: 1 1 auto; min-height: 0; height: auto; }
@media (max-width: 720px) { .tgpco2 .tgpco2-track button.tgpco2-btn { display: none !important; } .tgpco2-track { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 10px 8px; } .tgpco2-track__art { display: none; } .tgpco2-track__price { white-space: nowrap; font-size: 15px; } .tgpco2-track__price small { display: block; font-size: 10px; } }
/* ===== mobile overflow guards ===== */
.tgpco2-inline { max-width: 100%; }
@media (max-width: 900px) { html:has(body.tgpco2-host), html:has(body.tgpco2-page), body.tgpco2-host, body.tgpco2-page { overflow-x: hidden; overflow-x: clip; } }
.tgpco2-acc__btn, .tgpco2 button.tgpco2-acc__btn { white-space: normal !important; min-width: 0; }
.tgpco2-acc__q { min-width: 0; word-break: break-word; }
.tgpco2-faqs { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
@media (max-width: 900px) {
  .tgpco2-faqs, .tgpco2-seo, .tgpco2-guide, .tgpco2-listen, .tgpco2-quotes, .tgpco2-quotes__more, .tgpco2-spot { grid-template-columns: minmax(0, 1fr) !important; }
  .tgpco2-section__head { flex-direction: column; align-items: flex-start; }
  .tgpco2-section__head > a, .tgpco2-section__head .tgpco2-btn { white-space: normal; }
  .tgpco2-mz__inner { padding-left: 16px; padding-right: 16px; }
  .tgpco2-mz__search { width: 100%; }
  .tgpco2-cta__inner { padding: 26px 18px; }
  .tgpco2-cmp { overflow-x: auto; }
  .tgpco2-flow__labels span { font-size: 10px; }
}
@media (max-width: 720px) { .tgpco2-cmp__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; } .tgpco2-cmp__foot span { padding: 0; flex: 1 1 auto; text-align: left; } .tgpco2-cmp__foot span:empty { display: none; } .tgpco2-cmp__foot .tgpco2-btn { white-space: normal; } }
/* ===== wizards: auto height, add-on cards, review grid, switches, loading waveform ===== */
.tgpco2-modal--wizard .tgpco2-modal__panel { height: auto; min-height: min(640px, calc(100vh - 48px)); max-height: calc(100vh - 48px); }
.tgpco2-addon { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--c-border-strong); background: var(--c-surface-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; margin-bottom: 10px; }
.tgpco2-addon input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.tgpco2-addon:hover { border-color: rgba(255, 255, 255, 0.25); }
.tgpco2-addon.is-on { border-color: var(--c-accent); background: rgba(124, 92, 255, 0.08); }
.tgpco2-addon__check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--c-border-strong); display: grid; place-items: center; color: transparent; transition: all 0.15s; }
.tgpco2-addon.is-on .tgpco2-addon__check { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.tgpco2-addon__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--c-surface-3); color: var(--c-text-2); }
.tgpco2-addon.is-on .tgpco2-addon__ic { background: rgba(124, 92, 255, 0.16); color: #cbbcff; }
.tgpco2-addon__txt b { display: block; font-size: 14.5px; font-weight: 600; } .tgpco2-addon__txt span { display: block; font-size: 12.5px; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-addon__price { font-weight: 700; font-size: 14px; color: var(--c-accent-text); white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: rgba(124, 92, 255, 0.12); }
.tgpco2-choice { display: block; }
.tgpco2-wrev { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tgpco2-wrev__block { padding: 14px 16px 16px; border-radius: 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); min-width: 0; }
.tgpco2-wrev__block--wide, .tgpco2-wrev .tgpco2-toggle--agree { grid-column: 1 / -1; }
.tgpco2-wrev__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tgpco2-wrev__head h4 { flex: 1; margin: 0; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; }
.tgpco2 .tgpco2-wrev__head button { background: transparent !important; border: 0 !important; color: var(--c-accent-text) !important; font-size: 12px !important; padding: 0 !important; display: inline-flex !important; align-items: center; gap: 4px; font-weight: 600 !important; }
.tgpco2-wrev__ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(124, 92, 255, 0.14); color: #cbbcff; }
.tgpco2-wrev__title { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.tgpco2-wrev__sub { display: block; font-size: 12.5px; color: var(--c-text-3); margin-bottom: 8px; }
.tgpco2-wrev__big { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.tgpco2-wrev__block p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--c-text-2); white-space: pre-wrap; }
.tgpco2-wrev__svc { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.tgpco2-wrev__svc img, .tgpco2-wrev__svc .tgpco2-artph { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; min-height: 0; }
.tgpco2-wrev__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tgpco2-wrev__chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--c-border); font-size: 12px; color: var(--c-text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgpco2-wrev__chip b { color: var(--c-accent-text); font-weight: 700; }
.tgpco2-payplan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; margin: 4px 0 12px; }
.tgpco2-payplan::before { content: ''; position: absolute; left: 12%; right: 12%; top: 9px; height: 2px; background: var(--c-border-strong); }
.tgpco2-payplan__step { position: relative; text-align: center; padding-top: 22px; }
.tgpco2-payplan__step i { position: absolute; left: 50%; top: 3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--c-surface-3); border: 2px solid var(--c-border-strong); }
.tgpco2-payplan__step.is-now i { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.25); }
.tgpco2-payplan__step b { display: block; font-size: 15px; } .tgpco2-payplan__step span { display: block; font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-wrev__total { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--c-border); font-size: 14px; color: var(--c-text-2); } .tgpco2-wrev__total b { font-size: 18px; color: var(--c-text); }
.tgpco2 .tgpco2-toggle--agree { border-color: var(--c-border-strong); } .tgpco2 .tgpco2-toggle--agree a { color: var(--c-accent-text); }
.tgpco2-xcard { border-radius: 16px; border: 1px solid var(--c-border-strong); background: var(--c-surface-2); margin-bottom: 12px; overflow: hidden; transition: border-color 0.15s; }
.tgpco2-xcard.is-on { border-color: rgba(124, 92, 255, 0.55); }
.tgpco2-xcard__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.tgpco2-xcard__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-surface-3); color: var(--c-text-2); flex: 0 0 auto; }
.tgpco2-xcard.is-on .tgpco2-xcard__ic { background: rgba(124, 92, 255, 0.16); color: #cbbcff; }
.tgpco2-xcard__txt { flex: 1; min-width: 0; } .tgpco2-xcard__txt b { display: block; font-size: 14.5px; } .tgpco2-xcard__txt span { display: block; font-size: 12.5px; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-xcard__body { padding: 4px 16px 16px; border-top: 1px solid var(--c-border); }
.tgpco2-xcard__body[hidden] { display: none; }
.tgpco2-switch { position: relative; width: 44px; height: 26px; flex: 0 0 auto; cursor: pointer; }
.tgpco2-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgpco2-switch i { position: absolute; inset: 0; border-radius: 13px; background: var(--c-surface-3); border: 1px solid var(--c-border-strong); transition: background 0.15s, border-color 0.15s; }
.tgpco2-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.18s var(--ease); }
.tgpco2-switch input:checked + i { background: var(--c-accent); border-color: var(--c-accent); }
.tgpco2-switch input:checked + i::after { transform: translateX(18px); }
.tgpco2-seg__wave.is-loading canvas, .tgpco2-seg__wave.is-loading .tgpco2-seg__win { opacity: 0; }
.tgpco2-seg__load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.tgpco2-seg__load i { width: 4px; height: 30%; border-radius: 2px; background: rgba(124, 92, 255, 0.8); animation: tgpco2-segload 1s ease-in-out infinite; }
.tgpco2-seg__load i:nth-child(2) { animation-delay: 0.1s; } .tgpco2-seg__load i:nth-child(3) { animation-delay: 0.2s; } .tgpco2-seg__load i:nth-child(4) { animation-delay: 0.3s; } .tgpco2-seg__load i:nth-child(5) { animation-delay: 0.4s; } .tgpco2-seg__load i:nth-child(6) { animation-delay: 0.5s; } .tgpco2-seg__load i:nth-child(7) { animation-delay: 0.6s; } .tgpco2-seg__load i:nth-child(8) { animation-delay: 0.7s; }
.tgpco2-seg__load span { margin-left: 10px; font-size: 12px; color: var(--c-text-3); }
@keyframes tgpco2-segload { 0%, 100% { transform: scaleY(0.4); opacity: 0.5; } 50% { transform: scaleY(1.6); opacity: 1; } }
.tgpco2-seg__wave:not(.is-loading) .tgpco2-seg__load { display: none; }
@media (max-width: 720px) { .tgpco2-wrev { grid-template-columns: 1fr; } .tgpco2-payplan { grid-template-columns: 1fr 1fr; } .tgpco2-payplan::before { display: none; } .tgpco2-addon { grid-template-columns: 22px minmax(0, 1fr) auto; } .tgpco2-addon__ic { display: none; } }
/* filters: fixed full-width bar, count + reset on a row below; page bottom spacing */
.tgpco2-filters { display: block; }
.tgpco2-filters__box { width: 100%; }
.tgpco2-filters__foot { justify-content: flex-start; gap: 14px; min-height: 34px; }
.tgpco2 button.tgpco2-filters__reset { margin: 0; }
.tgpco2-inline[data-tgpco2="marketplace"] > .tgpco2-shell { padding-bottom: 72px; }
.tgpco2-cta { margin-bottom: 0; }
/* chat: skeleton bubbles while messages load */
.tgpco2-chat__skel { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.tgpco2-chat__skel-row { display: flex; align-items: flex-end; gap: 10px; max-width: 78%; }
.tgpco2-chat__skel-row.is-mine { margin-left: auto; flex-direction: row-reverse; }
.tgpco2-chat__skel-row.is-mine .tgpco2-chat__skel-av { display: none; }
.tgpco2-chat__skel-av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: rgba(255, 255, 255, 0.08); }
.tgpco2-chat__skel-bubble { display: block; height: 42px; border-radius: 14px 14px 14px 4px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 100%); background-size: 200% 100%; animation: tgpco2-shimmer 1.3s ease-in-out infinite; }
.tgpco2-chat__skel-row.is-mine .tgpco2-chat__skel-bubble { border-radius: 14px 14px 4px 14px; background-image: linear-gradient(90deg, rgba(124, 92, 255, 0.12) 0%, rgba(124, 92, 255, 0.24) 50%, rgba(124, 92, 255, 0.12) 100%); }
.tgpco2-chat__skel-row:nth-child(2) .tgpco2-chat__skel-bubble { animation-delay: 0.12s; } .tgpco2-chat__skel-row:nth-child(3) .tgpco2-chat__skel-bubble { animation-delay: 0.24s; } .tgpco2-chat__skel-row:nth-child(4) .tgpco2-chat__skel-bubble { animation-delay: 0.36s; } .tgpco2-chat__skel-row:nth-child(5) .tgpco2-chat__skel-bubble { animation-delay: 0.48s; }
@keyframes tgpco2-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.tgpco2-msg { animation: tgpco2-msgin 0.25s var(--ease); }
@keyframes tgpco2-msgin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tgpco2-chat__skel-row { width: 78%; max-width: none; }
.tgpco2-chat__skel-row.is-mine { justify-content: flex-start; }
/* custom dropdown menus are positioned fixed by JS (never clipped by modals); flip styling */
.tgpco2-dd__menu { z-index: 100000; }
.tgpco2-dd__menu.is-above { box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.45); }
.tgpco2-modal .tgpco2-dd__menu { max-width: none; }
/* cards in narrow columns (order page "other producers"): keep price on one line, wrap meta below */
.tgpco2-svc__price { white-space: nowrap; }
.tgpco2-svc__bottom { flex-wrap: wrap; row-gap: 8px; }
/* Cards inside a two-column page (order workspace, store tab) get as many
   columns as fit at a width where the price bar still has room — three
   squeezed 230px cards overlapped the price with the Hire button. */
.tgpco2-cards--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 1100px) { .tgpco2-cards--3 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } }
.tgpco2-svc__bar { flex-wrap: wrap; row-gap: 10px; }
.tgpco2-svc__bar .tgpco2-svc__hire { flex: 0 1 auto; margin-left: auto; }
/* ===== badges, typing, seen, intake questions, question builder ===== */
.tgpco2-svc__badge--verified { background: rgba(34, 197, 94, 0.12); color: #6ee7a1; border-color: rgba(34, 197, 94, 0.25); }
.tgpco2-svc__badge--fast_responder { background: rgba(124, 92, 255, 0.14); color: #cbbcff; border-color: rgba(124, 92, 255, 0.3); }
.tgpco2-svc__badge--on_time { background: rgba(255, 255, 255, 0.06); color: var(--c-text-2); border-color: var(--c-border); }
.tgpco2-svc__vendor .tgpco2-svc__badge + .tgpco2-svc__badge { margin-left: 4px; }
.tgpco2-typing { display: inline-flex; gap: 4px; align-items: center; height: 14px; }
.tgpco2-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-text-3); animation: sk-dot 0.9s infinite; }
.tgpco2-typing i:nth-child(2) { animation-delay: 0.15s; } .tgpco2-typing i:nth-child(3) { animation-delay: 0.3s; }
.tgpco2-msg--typing .tgpco2-msg__bubble { padding: 12px 14px; }
.tgpco2-msg__seen { display: inline-flex; align-items: center; gap: 3px; color: var(--c-accent-text); }
.tgpco2-qa { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(124, 92, 255, 0.06); border: 1px solid rgba(124, 92, 255, 0.22); }
.tgpco2-qa__item { margin-top: 10px; }
.tgpco2-qa__req { font-size: 11px; color: var(--c-amber-text); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.tgpco2-qrow { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto auto; gap: 8px; align-items: center; }
.tgpco2-pg { margin: 10px 0 4px; }
.tgpco2-pg__bar { position: relative; height: 8px; border-radius: 99px; background: var(--c-surface-3); overflow: visible; }
.tgpco2-pg__bar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: rgba(124, 92, 255, 0.45); }
.tgpco2-pg__bar em { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--c-accent); border-radius: 2px; }
.tgpco2-pg__bar b { position: absolute; top: -4px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--c-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); transition: left 0.2s var(--ease), border-color 0.2s; }
.tgpco2-pg__bar b.is-low { border-color: var(--c-amber); } .tgpco2-pg__bar b.is-high { border-color: var(--c-red); }
.tgpco2-pg__txt { margin-top: 8px; font-size: 12px; color: var(--c-text-3); line-height: 1.45; } .tgpco2-pg__txt b { color: var(--c-text); font-weight: 600; }
.tgpco2-qrow .tgpco2-dd { min-width: 0; }
.tgpco2-qrow__req { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-text-2); white-space: nowrap; }
.tgpco2-qrow__req input { accent-color: #7c5cff; }
.tgpco2-qrow__opts { grid-column: 1 / -1; }
.tgpco2-answers { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tgpco2-answers > div { padding: 10px 12px; border-radius: 10px; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.tgpco2-answers b { display: block; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 3px; }
.tgpco2-answers span { font-size: 14px; color: var(--c-text); white-space: pre-wrap; }
.tgpco2-drafts { margin: 0 0 22px; padding: 14px 16px; border-radius: 14px; background: rgba(124, 92, 255, 0.07); border: 1px solid rgba(124, 92, 255, 0.25); }
.tgpco2-drafts__row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.tgpco2-drafts__row + .tgpco2-drafts__row { border-top: 1px solid var(--c-border); }
.tgpco2-drafts__row b { display: block; font-size: 14px; } .tgpco2-drafts__row span { display: block; font-size: 12.5px; color: var(--c-text-3); }
@media (max-width: 720px) { .tgpco2-qrow { grid-template-columns: 1fr 1fr; } .tgpco2-answers { grid-template-columns: 1fr; } }
/* ===== SEO landings ===== */
.tgpco2-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-3); margin-bottom: 14px; }
.tgpco2-crumbs a { color: var(--c-text-2); text-decoration: none; } .tgpco2-crumbs a:hover { color: #fff; } .tgpco2-crumbs b { color: var(--c-text); font-weight: 600; }
.tgpco2-seo__genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tgpco2-seo__genres a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-2); font-size: 12.5px; text-decoration: none; }
.tgpco2-seo__genres a:hover { color: #fff; border-color: rgba(124, 92, 255, 0.5); }
.tgpco2-seo__genres small { color: var(--c-text-3); font-size: 11px; }
a.tgpco2-browse__item, a.tgpco2-guide__row { text-decoration: none; color: inherit; }
/* ===== request for quote ===== */
.tgpco2-mz__rfq { margin: 12px 0 0; font-size: 14px; color: var(--c-text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tgpco2-mz__rfq a { color: #cbbcff; text-decoration: none; font-weight: 600; } .tgpco2-mz__rfq a:hover { color: #fff; }
.tgpco2-rfq__intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(124, 92, 255, 0.03)); border-color: rgba(124, 92, 255, 0.28); }
.tgpco2-rfq__intro-txt b { display: block; font-size: 16px; margin-bottom: 4px; } .tgpco2-rfq__intro-txt span { font-size: 14px; color: var(--c-text-2); max-width: 620px; display: block; }
.tgpco2-rfq + .tgpco2-rfq { margin-top: 12px; }
.tgpco2-rfq.is-match { border-color: rgba(124, 92, 255, 0.4); }
.tgpco2-rfq__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.tgpco2-rfq__title { margin: 8px 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tgpco2-rfq__brief { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--c-text-2); white-space: pre-wrap; }
.tgpco2-rfq__wait { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--c-surface-2); font-size: 13px; color: var(--c-text-2); }
.tgpco2-rfq__mine { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13.5px; }
.tgpco2-offers { margin-top: 16px; display: grid; gap: 10px; }
.tgpco2-offer { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 8px 18px; padding: 14px 16px; border-radius: 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.tgpco2-offer.is-accepted { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.06); }
.tgpco2-offer.is-declined { opacity: 0.55; }
.tgpco2-offer__who { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.tgpco2-offer__who b { display: block; font-size: 15px; } .tgpco2-offer__who small { display: block; font-size: 12.5px; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-offer__who .tgpco2-svc__badge { margin-left: 6px; vertical-align: middle; }
.tgpco2-offer__terms { text-align: right; } .tgpco2-offer__terms b { display: block; font-size: 20px; letter-spacing: -0.01em; } .tgpco2-offer__terms span { font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-offer__msg { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--c-text-2); white-space: pre-wrap; }
.tgpco2-offer__act { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.tgpco2-toggle--sm span b { font-size: 13px; }
.tgpco2-count--accent:empty { display: none; }
@media (max-width: 640px) { .tgpco2-offer { grid-template-columns: 1fr; } .tgpco2-offer__terms { text-align: left; } .tgpco2-rfq__mine { align-items: flex-start; } }
/* ===== store tab: producer panel ===== */
.tgpco2-ppanel { position: relative; overflow: hidden; margin: 4px 0 20px; padding: 22px 24px 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.09); }
.tgpco2-ppanel__glow { position: absolute; inset: -40% auto auto -10%; width: 55%; height: 160%; background: radial-gradient(closest-side, rgba(124, 92, 255, 0.22), transparent 70%); pointer-events: none; }
.tgpco2-ppanel.is-away .tgpco2-ppanel__glow { background: radial-gradient(closest-side, rgba(245, 158, 11, 0.18), transparent 70%); }
.tgpco2-ppanel.is-full .tgpco2-ppanel__glow { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.08), transparent 70%); }
.tgpco2-ppanel > :not(.tgpco2-ppanel__glow) { position: relative; }
.tgpco2-ppanel__id { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tgpco2-ppanel__avatar { position: relative; width: 62px; height: 62px; border-radius: 50%; overflow: visible; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: 20px; background: var(--c-surface-2); border: 2px solid rgba(255, 255, 255, 0.1); }
.tgpco2-ppanel__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tgpco2-ppanel__avatar i { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; background: #6b7280; border: 3px solid #131313; }
.tgpco2-ppanel__avatar.is-online i { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22); }
.tgpco2-ppanel__who { flex: 1 1 320px; min-width: 0; }
.tgpco2-ppanel__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.tgpco2-ppanel__name .tgpco2-svc__badge { font-size: 11px; }
.tgpco2-ppanel__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; font-size: 13px; color: var(--c-text-2); }
.tgpco2-ppanel__line .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--c-text-3); opacity: 0.6; }
.tgpco2-ppanel__line span[data-tip] { cursor: default; }
.tgpco2-ppanel__line .tgpco2-presence i { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.tgpco2-ppanel__line .tgpco2-presence.is-online i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.tgpco2-ppanel__take { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 14px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.28); min-width: 200px; }
.tgpco2-ppanel__take b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #86efac; }
.tgpco2-ppanel__take b i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); animation: tgpco2-pulse 2.2s infinite; }
.tgpco2-ppanel__take span { font-size: 12.5px; color: var(--c-text-2); }
.tgpco2-ppanel.is-away .tgpco2-ppanel__take { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); } .tgpco2-ppanel.is-away .tgpco2-ppanel__take b { color: #fcd34d; } .tgpco2-ppanel.is-away .tgpco2-ppanel__take b i { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); animation: none; }
.tgpco2-ppanel.is-full .tgpco2-ppanel__take { background: rgba(255, 255, 255, 0.05); border-color: var(--c-border); } .tgpco2-ppanel.is-full .tgpco2-ppanel__take b { color: var(--c-text); } .tgpco2-ppanel.is-full .tgpco2-ppanel__take b i { background: var(--c-text-3); box-shadow: none; animation: none; }
@keyframes tgpco2-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.06); } }
.tgpco2-ppanel__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.tgpco2-ppanel__stats > div { padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.06); cursor: default; }
.tgpco2-ppanel__stats b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .tgpco2-ppanel__stats b small { font-size: 13px; font-weight: 600; margin-left: 2px; color: var(--c-text-2); }
.tgpco2-ppanel__stats span { display: block; margin-top: 3px; font-size: 12px; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.tgpco2-ppanel__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 13px; color: var(--c-text-3); }
.tgpco2-ppanel__links { display: inline-flex; gap: 14px; }
.tgpco2-ppanel__links a { display: inline-flex; align-items: center; gap: 5px; color: #cbbcff; text-decoration: none; font-weight: 600; } .tgpco2-ppanel__links a:hover { color: #fff; }
@media (max-width: 720px) { .tgpco2-ppanel { padding: 18px 16px 14px; } .tgpco2-ppanel__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tgpco2-ppanel__stats b { font-size: 18px; } .tgpco2-ppanel__take { width: 100%; } .tgpco2-ppanel__name { font-size: 19px; } }
/* mobile filters: one control per row so labels stay readable */
@media (max-width: 480px) { .tgpco2-filters__box { padding: 14px; gap: 8px; } .tgpco2-filters__box > * { flex: 1 1 100%; min-width: 100%; } }
.tgpco2-wiz__progress i.is-current { opacity: 1; }
/* ===== vendor dashboard: service cards v2 ===== */
.tgpco2-vgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tgpco2-vsvc { position: relative; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 18px; align-items: stretch; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.15s, transform 0.15s; }
.tgpco2-vsvc:hover { border-color: rgba(255, 255, 255, 0.16); }
.tgpco2-vsvc.is-disabled { opacity: 1; } .tgpco2-vsvc.is-disabled .tgpco2-vsvc__art img { filter: grayscale(0.7) brightness(0.7); } .tgpco2-vsvc.is-disabled .tgpco2-vsvc__title { color: var(--c-text-2); }
.tgpco2-vsvc__art { position: relative; width: 132px; height: 132px; border-radius: 14px; overflow: hidden; background: var(--c-surface-3); }
.tgpco2-vsvc__art img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-vsvc__type { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(0, 0, 0, 0.62); color: #fff; backdrop-filter: blur(6px); }
.tgpco2-vsvc__warn { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(245, 158, 11, 0.9); color: #111; cursor: default; }
.tgpco2-vsvc__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; justify-content: center; }
.tgpco2-vsvc__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tgpco2-vsvc__genres { font-size: 12.5px; color: var(--c-text-3); } .tgpco2-vsvc__genres small { color: var(--c-text-3); }
.tgpco2-vsvc__title { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; white-space: normal; }
.tgpco2-vsvc__meta span[data-tip] { cursor: default; }
.tgpco2-vsvc__stats { display: flex; gap: 8px; margin-top: 4px; }
.tgpco2-vsvc__stats > div { padding: 7px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); min-width: 84px; }
.tgpco2-vsvc__stats b { display: block; font-size: 15px; font-weight: 700; } .tgpco2-vsvc__stats b small { font-size: 11px; margin-left: 2px; color: var(--c-text-2); }
.tgpco2-vsvc__stats span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-3); margin-top: 1px; }
.tgpco2-vsvc__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; min-width: 150px; }
.tgpco2-vsvc__price { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.tgpco2-vsvc__live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-2); cursor: pointer; }
.tgpco2-vsvc__actions { display: flex; align-items: center; gap: 6px; }
.tgpco2-vsvc__busy { position: absolute; inset: 0; border-radius: 18px; background: rgba(13, 13, 13, 0.55); display: none; align-items: center; justify-content: center; z-index: 5; }
.tgpco2-vsvc__busy .tgpco2-spin { display: block; width: 26px; height: 26px; border-width: 3px; }
.tgpco2-vsvc.is-busy .tgpco2-vsvc__busy { display: flex; } .tgpco2-vsvc.is-busy { pointer-events: none; }
@media (max-width: 720px) { .tgpco2-vsvc { grid-template-columns: 88px minmax(0, 1fr); } .tgpco2-vsvc__art { width: 88px; height: 88px; } .tgpco2-vsvc__right { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; min-width: 0; } .tgpco2-vsvc__stats { flex-wrap: wrap; } .tgpco2-vsvc__stats > div { flex: 1 1 80px; } }
.tgpco2 .tgpco2-svc__hire.is-full { cursor: not-allowed; opacity: 0.85; color: var(--c-text-2) !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px dashed rgba(255, 255, 255, 0.22) !important; }
.tgpco2 .tgpco2-svc__hire.is-full:hover { background: rgba(255, 255, 255, 0.09) !important; }
/* ===== producer dashboard v2 ===== */
.tgpco2-vd__hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding: 26px 28px; border-radius: 22px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.09); }
.tgpco2-vd__hero-glow { position: absolute; right: -10%; top: -60%; width: 46%; height: 220%; background: radial-gradient(closest-side, rgba(124, 92, 255, 0.2), transparent 70%); pointer-events: none; }
.tgpco2-vd__hero > :not(.tgpco2-vd__hero-glow) { position: relative; }
.tgpco2-vd__hero-main { min-width: 0; flex: 1 1 420px; }
.tgpco2-vd__hero-main .tgpco2-h1 { margin: 4px 0 6px; }
.tgpco2-vd__hero-main .tgpco2-muted { margin: 0; max-width: 620px; }
.tgpco2-vd__state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 13px; color: var(--c-text-2); }
.tgpco2-vd__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; background: rgba(34, 197, 94, 0.1); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
.tgpco2-vd__chip i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); animation: tgpco2-pulse 2.2s infinite; }
.tgpco2-vd__chip.is-away { background: rgba(245, 158, 11, 0.1); color: #fcd34d; border-color: rgba(245, 158, 11, 0.32); } .tgpco2-vd__chip.is-away i { background: #f59e0b; box-shadow: none; animation: none; }
.tgpco2-vd__chip.is-full { background: rgba(255, 255, 255, 0.06); color: var(--c-text); border-color: var(--c-border-strong); } .tgpco2-vd__chip.is-full i { background: var(--c-text-3); box-shadow: none; animation: none; }
.tgpco2-vd__hint { display: inline-flex; align-items: center; gap: 5px; }
.tgpco2-vd__hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.tgpco2-vd__hero-sub { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tgpco2-vstats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tgpco2-vstat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--c-surface); border: 1px solid var(--c-border); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
a.tgpco2-vstat:hover { border-color: rgba(255, 255, 255, 0.2); color: inherit; transform: translateY(-1px); }
.tgpco2-vstat__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: var(--c-text-2); margin-bottom: 8px; }
.tgpco2-vstat b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .tgpco2-vstat b em { font-style: normal; font-size: 14px; margin-left: 2px; color: #fbbf24; }
.tgpco2-vstat > span:not(.tgpco2-vstat__ic) { font-size: 12.5px; color: var(--c-text-2); }
.tgpco2-vstat small { font-size: 11.5px; color: var(--c-text-3); margin-top: 4px; } .tgpco2-vstat small.is-red { color: #fca5a5; font-weight: 600; }
.tgpco2-vstat.is-accent { border-color: rgba(124, 92, 255, 0.45); background: linear-gradient(180deg, rgba(124, 92, 255, 0.12), rgba(124, 92, 255, 0.03)); } .tgpco2-vstat.is-accent .tgpco2-vstat__ic { background: rgba(124, 92, 255, 0.25); color: #cbbcff; } .tgpco2-vstat.is-accent b { color: #cbbcff; }
.tgpco2-vstat.is-violet .tgpco2-vstat__ic { background: rgba(124, 92, 255, 0.2); color: #cbbcff; }
.tgpco2-tabs--seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); margin-bottom: 20px; overflow-x: auto; max-width: 100%; }
.tgpco2 .tgpco2-tabs--seg .tgpco2-tab { border: 0 !important; border-radius: 999px !important; padding: 9px 16px !important; margin: 0 !important; background: transparent !important; color: var(--c-text-2) !important; white-space: nowrap; }
.tgpco2 .tgpco2-tabs--seg .tgpco2-tab.is-active { background: rgba(255, 255, 255, 0.09) !important; color: #fff !important; }
.tgpco2-vorders { display: flex; flex-direction: column; gap: 10px; }
.tgpco2-vo { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--c-surface); border: 1px solid var(--c-border); text-decoration: none; color: inherit; transition: border-color 0.15s, background 0.15s; position: relative; }
.tgpco2-vo::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-text-3); opacity: 0.5; }
.tgpco2-vo.tone-green::before { background: #22c55e; opacity: 1; } .tgpco2-vo.tone-amber::before { background: #f59e0b; opacity: 1; } .tgpco2-vo.tone-violet::before, .tgpco2-vo.tone-accent::before { background: #7c5cff; opacity: 1; } .tgpco2-vo.tone-red::before { background: #ef4444; opacity: 1; } .tgpco2-vo.tone-sky::before, .tgpco2-vo.tone-blue::before { background: #38bdf8; opacity: 1; }
.tgpco2-vo:hover { border-color: rgba(255, 255, 255, 0.2); background: var(--c-surface-2); color: inherit; }
.tgpco2-vo.is-attention { border-color: rgba(124, 92, 255, 0.4); }
.tgpco2-vo.is-closed { opacity: 0.75; }
.tgpco2-vo__art { position: relative; width: 76px; height: 76px; border-radius: 14px; overflow: visible; background: var(--c-surface-3); }
.tgpco2-vo__art img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.tgpco2-vo__cust { position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid #151515; background: var(--c-surface-4); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.tgpco2-vo__cust img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tgpco2-vo__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tgpco2-vo__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tgpco2-vo__type { font-size: 12px; color: var(--c-text-3); }
.tgpco2-vo__due { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(255, 255, 255, 0.06); color: var(--c-text-2); }
.tgpco2-vo__due.is-amber { background: rgba(245, 158, 11, 0.14); color: #fcd34d; } .tgpco2-vo__due.is-red { background: rgba(239, 68, 68, 0.16); color: #fca5a5; } .tgpco2-vo__due.is-ok { background: rgba(34, 197, 94, 0.1); color: #86efac; }
.tgpco2-vo__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-vo__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--c-text-3); align-items: center; } .tgpco2-vo__meta b { color: var(--c-text-2); font-weight: 600; } .tgpco2-vo__svc { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-vo__steps { display: flex; align-items: center; gap: 0; margin-top: 4px; max-width: 420px; }
.tgpco2-vo__steps span { display: flex; align-items: center; flex: 1 1 0; min-width: 0; position: relative; }
.tgpco2-vo__steps span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-surface-4); border: 1px solid var(--c-border-strong); flex: 0 0 auto; }
.tgpco2-vo__steps span em { font-style: normal; font-size: 10.5px; color: var(--c-text-3); margin-left: 5px; white-space: nowrap; }
.tgpco2-vo__steps span::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--c-border-strong); margin: 0 8px; }
.tgpco2-vo__steps span:last-child::after { display: none; }
.tgpco2-vo__steps span.is-done i { background: #22c55e; border-color: #22c55e; } .tgpco2-vo__steps span.is-done::after { background: rgba(34, 197, 94, 0.5); } .tgpco2-vo__steps span.is-done em { color: var(--c-text-2); }
.tgpco2-vo__steps span.is-now i { background: #7c5cff; border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.25); } .tgpco2-vo__steps span.is-now em { color: #cbbcff; font-weight: 600; }
.tgpco2-vo__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tgpco2-vo__price { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tgpco2-vo__cta { white-space: nowrap; }
@media (max-width: 1100px) { .tgpco2-vstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .tgpco2-vd__hero { padding: 20px 18px; flex-wrap: wrap; } .tgpco2-vd__hero-main { flex-basis: 100%; } .tgpco2-vd__hero-actions { align-items: stretch; width: 100%; } .tgpco2-vd__hero-sub { justify-content: flex-start; } .tgpco2-vstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tgpco2-vo { grid-template-columns: 60px minmax(0, 1fr); } .tgpco2-vo__art { width: 60px; height: 60px; } .tgpco2-vo__right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } .tgpco2-vo__steps span em { display: none; } }
/* ===== producer dashboard v3: calm layout ===== */
.tgpco2-vd2__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 4px; }
.tgpco2-vd2__head-main .tgpco2-h1 { margin: 0 0 8px; }
.tgpco2-vd2__status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--c-text-2); }
.tgpco2-vd2__status .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--c-text-3); opacity: 0.6; }
.tgpco2-vd2__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.tgpco2-vd2__dot.is-away { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); } .tgpco2-vd2__dot.is-full { background: var(--c-text-3); box-shadow: none; }
.tgpco2 button.tgpco2-vd2__link, .tgpco2 a.tgpco2-vd2__link { display: inline-flex !important; align-items: center; gap: 5px; padding: 0 !important; background: none !important; border: 0 !important; color: #cbbcff !important; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.tgpco2 button.tgpco2-vd2__link:hover, .tgpco2 a.tgpco2-vd2__link:hover { color: #fff !important; }
.tgpco2-vd2__head-actions { display: flex; align-items: center; gap: 18px; }
.tgpco2-vd2__kpis { display: flex; align-items: stretch; gap: 0; padding: 14px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); overflow-x: auto; }
.tgpco2-vd2__kpi { display: flex; flex-direction: column; gap: 2px; padding: 2px 22px; border-right: 1px solid var(--c-border); text-decoration: none; color: inherit; min-width: 0; white-space: nowrap; }
.tgpco2-vd2__kpi:first-child { padding-left: 4px; } .tgpco2-vd2__kpi:last-child { border-right: 0; }
.tgpco2-vd2__kpi b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tgpco2-vd2__kpi span { font-size: 12.5px; color: var(--c-text-3); } .tgpco2-vd2__kpi em { font-style: normal; color: #fca5a5; font-weight: 600; }
.tgpco2-vd2__kpi.is-accent b { color: #cbbcff; }
a.tgpco2-vd2__kpi:hover { color: inherit; } a.tgpco2-vd2__kpi:hover span { color: var(--c-text-2); }
.tgpco2-vd .tgpco2-tabs { margin-bottom: 16px; }
/* rows: quiet list */
.tgpco2-vorders { gap: 6px; }
.tgpco2-vo { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; padding: 12px 14px; border-radius: 14px; background: transparent; border: 1px solid transparent; }
.tgpco2-vo::before { display: none; }
.tgpco2-vo:hover { background: var(--c-surface); border-color: var(--c-border); }
.tgpco2-vo.is-attention { background: var(--c-surface); border-color: var(--c-border); }
.tgpco2-vo.is-closed { opacity: 0.6; }
.tgpco2-vo__art { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; }
.tgpco2-vo__art img { border-radius: 10px; }
.tgpco2-vo__body { gap: 3px; }
.tgpco2-vo__title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tgpco2-vo__unread { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: #cbbcff; background: rgba(124, 92, 255, 0.16); padding: 2px 7px; border-radius: 999px; }
.tgpco2-vo__meta { gap: 8px; font-size: 12.5px; }
.tgpco2-vo__meta > span:not(:first-child)::before, .tgpco2-vo__meta > b::before { content: '·'; margin-right: 8px; color: var(--c-text-3); opacity: 0.6; }
.tgpco2-vo__status { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-2); font-weight: 500; }
.tgpco2-vo__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-text-3); }
.tgpco2-vo__status.is-green i { background: #22c55e; } .tgpco2-vo__status.is-amber i { background: #f59e0b; } .tgpco2-vo__status.is-violet i, .tgpco2-vo__status.is-accent i { background: #7c5cff; } .tgpco2-vo__status.is-red i { background: #ef4444; } .tgpco2-vo__status.is-sky i, .tgpco2-vo__status.is-blue i { background: #38bdf8; }
.tgpco2-vo__due { padding: 0; background: none; font-weight: 500; color: var(--c-text-3); }
.tgpco2-vo__due.is-amber { color: #fcd34d; background: none; } .tgpco2-vo__due.is-red { color: #fca5a5; background: none; font-weight: 600; }
.tgpco2-vo__right { gap: 6px; }
.tgpco2-vo__price { font-size: 15px; font-weight: 700; }
.tgpco2-vo__link { font-size: 13px; color: var(--c-text-2); display: inline-flex; align-items: center; gap: 4px; }
.tgpco2-vo:hover .tgpco2-vo__link { color: #fff; }
@media (max-width: 720px) { .tgpco2-vd2__head { align-items: flex-start; } .tgpco2-vd2__head-actions { width: 100%; justify-content: space-between; } .tgpco2-vd2__kpi { padding: 2px 14px; } .tgpco2-vo { grid-template-columns: 44px minmax(0, 1fr); } .tgpco2-vo__art { width: 44px; height: 44px; } .tgpco2-vo__right { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; } }
/* ===== service cards: quieter badges, genres and delivery ===== */
.tgpco2-svc__vendor { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tgpco2-svc__vname { flex: 1 1 auto; min-width: 0; }
.tgpco2 .tgpco2-svc__badge, .tgpco2 .tgpco2-svc__badge--verified, .tgpco2 .tgpco2-svc__badge--fast_responder, .tgpco2 .tgpco2-svc__badge--on_time { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin-left: 0; border-radius: 50%; font-size: 0; line-height: 0; justify-content: center; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); color: #f2b63b; cursor: default; }
.tgpco2 .tgpco2-svc__badge .tgpco2-ic { width: 12px; height: 12px; }
.tgpco2 .tgpco2-svc__badge--verified { color: #6ee7a1; } .tgpco2 .tgpco2-svc__badge--fast_responder { color: #cbbcff; } .tgpco2 .tgpco2-svc__badge--on_time { color: var(--c-text-2); }
.tgpco2-svc__vendor .tgpco2-svc__badge:first-of-type { margin-left: auto; }
.tgpco2-svc__vendor .tgpco2-svc__badge + .tgpco2-svc__badge { margin-left: 0; }
.tgpco2-ppanel__name .tgpco2-svc__badge, .tgpco2-offer__who .tgpco2-svc__badge, .tgpco2-vd2__status .tgpco2-svc__badge { margin-left: 0; }
.tgpco2-svc__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 8px; font-size: 12.5px; color: var(--c-text-3); }
.tgpco2 .tgpco2-svc__tag { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0; font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-svc__tag + .tgpco2-svc__tag::before { content: '·'; margin-right: 6px; opacity: 0.6; }
.tgpco2 .tgpco2-svc__tag--more { color: var(--c-text-2); cursor: default; text-decoration: underline dotted; text-underline-offset: 3px; }
.tgpco2 .tgpco2-svc__days { background: none !important; border: 0 !important; padding: 0 !important; font-size: 12.5px; color: var(--c-text-2); display: inline-flex; align-items: center; gap: 4px; cursor: default; }
.tgpco2 .tgpco2-svc__days .tgpco2-ic { color: var(--c-text-3); }
.tgpco2-svc__fast { font-style: normal; font-size: 11px; }
.tgpco2-svc__meta { gap: 10px; }
.tgpco2-svc__daws .tgpco2-daw { opacity: 0.85; }
@media (max-width: 720px) { .tgpco2-vd2__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; overflow: visible; } .tgpco2-vd2__kpi { padding: 0 12px; white-space: normal; border-right: 0; } .tgpco2-vd2__kpi:nth-child(odd) { border-right: 1px solid var(--c-border); padding-left: 0; } .tgpco2-vd2__kpi b { font-size: 20px; } }
/* presence dot on cards; single presence indicator on the store panel; compact dashboard search */
.tgpco2-svc__pres { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); cursor: default; }
.tgpco2-svc__pres.is-recent { background: #86efac; opacity: 0.55; box-shadow: none; }
.tgpco2-ppanel__avatar i { display: none; }
.tgpco2-vd .tgpco2-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.tgpco2-vd .tgpco2-filters .tgpco2-search { flex: 0 0 auto; width: 100%; max-width: 380px; min-width: 0; }
.tgpco2-vd .tgpco2-filters .tgpco2-search .tgpco2-input { height: 40px; padding-left: 38px; font-size: 13.5px; }
.tgpco2-vd .tgpco2-results { margin: 0 0 10px; }
/* badges: back to readable pills where there is room; on cards they are a quiet merits line after the rating */
.tgpco2 .tgpco2-svc__badge, .tgpco2 .tgpco2-svc__badge--verified, .tgpco2 .tgpco2-svc__badge--fast_responder, .tgpco2 .tgpco2-svc__badge--on_time { width: auto; height: auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; line-height: 1.2; }
.tgpco2 .tgpco2-svc__badge .tgpco2-ic { width: 11px; height: 11px; }
.tgpco2-svc__stars { flex-wrap: wrap; row-gap: 2px; }
.tgpco2-svc__merits { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 12px; }
.tgpco2-svc__merit { color: var(--c-text-2); font-weight: 500; }
.tgpco2-svc__merit--top_rated { color: #e5b85a; }
.tgpco2-svc__merit--verified { color: #7fd8a4; }
.tgpco2-svc__merit--you_ordered, .tgpco2-svc__merit--you_bought { color: var(--c-accent-text); }
.tgpco2-svc__merit--label_released { color: #9fd0ff; }
.tgpco2-svc__merit--rising { color: #c9a5ff; }
.tgpco2-svc__merit--more { color: var(--c-text-3); font-weight: 600; cursor: default; }
.tgpco2-svc__merit { white-space: nowrap; }
.tgpco2-svc__merits { flex-wrap: wrap; row-gap: 3px; }
.tgpco2-svc__merit + .tgpco2-svc__merit::before { content: '·'; margin-right: 6px; color: var(--c-text-3); }
.tgpco2-svc__merits::before { content: '·'; margin-right: 6px; color: var(--c-text-3); }
.tgpco2-svc__stars { display: flex; }
.tgpco2-svc__merits { flex: 0 0 100%; margin: 3px 0 0; }
.tgpco2-svc__merits::before { content: none; }
.tgpco2-svc__merit + .tgpco2-svc__merit { position: relative; padding-left: 12px; }
.tgpco2-svc__merit + .tgpco2-svc__merit::before { content: '·'; position: absolute; left: 2px; margin: 0; color: var(--c-text-3); }
.tgpco2-svc__merit + .tgpco2-svc__merit::before { color: var(--c-text-2); opacity: 0.8; }
/* languages */
.tgpco2-svc__langs { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-svc__langs .tgpco2-ic { color: var(--c-text-3); }
.tgpco2-chips--lang { gap: 6px; max-height: 132px; overflow: auto; padding-bottom: 2px; }
.tgpco2-chips--lang .tgpco2-chip { padding: 5px 10px; font-size: 12.5px; }
.tgpco2-wiz__lang { display: inline-flex; align-items: center; gap: 5px; color: var(--c-text-2); }
/* ===== chat v2: messenger feel ===== */
.tgpco2-chat { position: relative; }
.tgpco2-chat__thread { gap: 10px; padding: 6px 4px 10px; scroll-behavior: auto; }
.tgpco2-msg { max-width: 82%; gap: 8px; }
.tgpco2-msg.is-grouped { margin-top: -6px; }
.tgpco2-msg.is-grouped:not(.is-mine) .tgpco2-avatar { visibility: hidden; }
.tgpco2-msg.is-grouped .tgpco2-msg__bubble { border-radius: 14px 14px 14px 6px; }
.tgpco2-msg.is-mine.is-grouped .tgpco2-msg__bubble { border-radius: 14px 14px 6px 14px; }
.tgpco2-msg.is-grouped .tgpco2-msg__meta { display: none; }
.tgpco2-msg:hover .tgpco2-msg__meta { display: flex; }
.tgpco2-msg__bubble { padding: 9px 13px; font-size: 15px; }
.tgpco2-msg__bubble.is-emoji { background: transparent !important; border-color: transparent !important; font-size: 26px; line-height: 1.2; padding: 2px 4px; }
.tgpco2-chat__day { align-self: center; margin: 8px 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text-3); }
.tgpco2-chat__day span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
.tgpco2 button.tgpco2-chat__down { position: absolute; right: 14px; bottom: 96px; z-index: 5; width: 38px; height: 38px; border-radius: 50% !important; padding: 0 !important; display: grid; place-items: center; background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong) !important; color: #fff !important; box-shadow: var(--shadow-2); cursor: pointer; }
.tgpco2-chat__down span { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.tgpco2-chat__box { align-items: flex-end; gap: 4px; padding: 6px 6px 6px 6px; border-radius: 22px; position: relative; }
.tgpco2-chat__box textarea { flex: 1 1 auto; min-height: 36px; padding: 8px 6px; font-size: 15px; }
.tgpco2 .tgpco2-chat__tool { width: 36px; height: 36px; color: var(--c-text-3) !important; }
.tgpco2 .tgpco2-chat__tool:hover, .tgpco2 .tgpco2-chat__tool.is-open { color: #fff !important; background: rgba(255, 255, 255, 0.07) !important; }
.tgpco2 .tgpco2-chat__box [data-send] { width: 38px; height: 38px; border-radius: 50% !important; opacity: 0.55; transition: opacity 0.15s, transform 0.15s; }
.tgpco2-chat.has-text .tgpco2-chat__box [data-send] { opacity: 1; transform: scale(1.04); }
.tgpco2-chat__hint { margin-top: 6px; }
.tgpco2-chat__composer { margin-top: 10px; padding-top: 10px; }
/* emoji */
.tgpco2-emoji { position: absolute; left: 0; bottom: calc(100% + 6px); width: min(340px, 100%); max-height: 300px; overflow: auto; padding: 10px; border-radius: 16px; background: #1e1e1e; border: 1px solid var(--c-border-strong); box-shadow: var(--shadow-2); z-index: 40; }
.tgpco2-emoji__grp b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-3); margin: 6px 4px 4px; }
.tgpco2-emoji__grp > div { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.tgpco2 .tgpco2-emoji button { width: 100% !important; aspect-ratio: 1; font-size: 22px; line-height: 1; background: none !important; border: 0 !important; border-radius: 8px !important; padding: 0 !important; cursor: pointer; }
.tgpco2 .tgpco2-emoji button:hover { background: rgba(255, 255, 255, 0.08) !important; }
/* recording */
.tgpco2-chat__box.is-recording > textarea, .tgpco2-chat__box.is-recording > .tgpco2-chat__tool, .tgpco2-chat__box.is-recording > [data-send] { display: none !important; }
.tgpco2-rec { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 4px 4px 10px; }
.tgpco2-rec__dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: tgpco2-rec 1s infinite; }
@keyframes tgpco2-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.tgpco2-rec__time { font-variant-numeric: tabular-nums; font-weight: 700; }
.tgpco2-rec__hint { flex: 1; font-size: 12.5px; color: var(--c-text-3); display: inline-flex; align-items: center; gap: 4px; }
/* voice bubble */
.tgpco2-msg--voice { width: min(100%, 320px); }
.tgpco2-msg--voice .tgpco2-msg__bubble { padding: 8px 10px; }
.tgpco2-voice { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.tgpco2 button.tgpco2-voice__play { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50% !important; padding: 0 !important; display: grid; place-items: center; background: var(--c-accent) !important; color: #fff !important; border: 0 !important; cursor: pointer; }
.tgpco2-voice__bars { flex: 1; height: 30px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.tgpco2-voice__bars i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, 0.28); transition: background 0.1s; }
.tgpco2-voice__bars i.is-on { background: #fff; }
.tgpco2-voice__time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--c-text-2); min-width: 32px; text-align: right; }
/* chat page header */
.tgpco2-chat__head { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--c-border); margin-bottom: 4px; }
.tgpco2 a.tgpco2-chat__back { display: none; width: 36px; height: 36px; border-radius: 50%; place-items: center; color: var(--c-text-2); }
.tgpco2-chat__ava { position: relative; overflow: visible; flex: 0 0 auto; }
.tgpco2-chat__ava img { border-radius: 50%; }
.tgpco2-chat__ava i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #6b7280; border: 2px solid #151515; }
.tgpco2-chat__ava.is-online i { background: #22c55e; }
.tgpco2-chat__who { min-width: 0; flex: 1; }
.tgpco2-chat__name { font-weight: 700; font-size: 16px; }
.tgpco2-chat__sub { font-size: 12.5px; color: var(--c-text-3); display: flex; gap: 6px; flex-wrap: wrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-chat__sub .is-online { color: #86efac; } .tgpco2-chat__sub a { color: var(--c-text-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-chat__headtools { display: flex; align-items: center; gap: 6px; }
.tgpco2 .tgpco2-chat__headtools [data-sound].is-off { color: var(--c-text-3) !important; }
.tgpco2-chat--page { min-height: calc(100vh - 230px); }
.tgpco2-chat--page .tgpco2-chat__thread { max-height: none; min-height: 320px; }
@media (max-width: 720px) {
  .tgpco2-msg { max-width: 88%; }
  .tgpco2-msg:not(.is-mine) { grid-template-columns: 26px minmax(0, 1fr); } .tgpco2-msg:not(.is-mine) .tgpco2-avatar { width: 26px; height: 26px; font-size: 9px; }
  .tgpco2-chat__hint { display: none; }
  .tgpco2 a.tgpco2-chat__back { display: grid; }
  .tgpco2-chat__statuspill, .tgpco2-chat__orderlink { display: none !important; }
  .tgpco2-chat__ava { width: 38px; height: 38px; font-size: 13px; }
  .tgpco2-chat__name { font-size: 15px; }
  .tgpco2-emoji { width: 100%; max-height: 240px; } .tgpco2-emoji__grp > div { grid-template-columns: repeat(7, 1fr); }
  /* page mode = app screen */
  body.tgpco2-chat-mobile { overflow: hidden; }
  body.tgpco2-chat-mobile .tgpco2-chatcard { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; margin: 0; border-radius: 0; border-left: 0; border-right: 0; display: flex; flex-direction: column; padding: 10px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow: none; }
  body.tgpco2-chat-mobile [data-tgpco2="chat-page"] > .tgpco2-crumbs { display: none; }
  body.tgpco2-chat-mobile .tgpco2-chat--page { flex: 1; min-height: 0; }
  body.tgpco2-chat-mobile .tgpco2-chat--page .tgpco2-chat__thread { min-height: 0; }
  body.tgpco2-chat-mobile .tgpco2-chat__head { padding-bottom: 10px; }
  body.tgpco2-chat-mobile .tgpco2-chat__composer { margin-top: 6px; padding-top: 8px; }
  .tgpco2 button.tgpco2-chat__down { bottom: 84px; right: 10px; }
}
@media (max-width: 720px) { .tgpco2-vd2__kpi span { font-size: 12px; } .tgpco2-vd2__kpi em { display: block; } }
@media (max-width: 720px) {
  .tgpco2 a.tgpco2-chat__orderlink, .tgpco2 .tgpco2-chat__statuspill { display: none !important; }
  .tgpco2-chat__sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tgpco2-chat__sub .sep { margin: 0 4px; }
  .tgpco2 .tgpco2-chat__box [data-emoji] { display: none !important; }
  .tgpco2-chat__box { padding-left: 10px; }
  .tgpco2-chat__box textarea { min-width: 0; }
  .tgpco2 .tgpco2-chat__tool { width: 32px; height: 32px; }
}
/* filter bar: responsive grid instead of one crowded row */
.tgpco2-filters__box { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-items: center; }
.tgpco2-filters__box > * { min-width: 0; flex: none; }
.tgpco2-filters__search { grid-column: span 2; }
.tgpco2-filters__box .tgpco2-dd__btn { padding-left: 14px; padding-right: 36px; }
.tgpco2-filters__box .tgpco2-dd__btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgpco2-filters__box .tgpco2-dd__btn small { margin-right: 6px; }
@media (min-width: 1180px) { .tgpco2-filters__box { grid-template-columns: minmax(220px, 1.6fr) repeat(7, minmax(0, 1fr)); } .tgpco2-filters__search { grid-column: auto; } }
@media (max-width: 1179px) and (min-width: 721px) { .tgpco2-filters__search { grid-column: 1 / -1; } }
@media (max-width: 480px) { .tgpco2-filters__box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px; } .tgpco2-filters__search { grid-column: 1 / -1; } .tgpco2-filters__box > * { min-width: 0; } }
@media (min-width: 1180px) { .tgpco2-filters__box { grid-template-columns: repeat(6, minmax(0, 1fr)); } .tgpco2-filters__search { grid-column: 1 / 5; grid-row: 1; } .tgpco2-filters__box .tgpco2-dd:has(.tgpco2-filters__sort) { grid-column: 5 / 7; grid-row: 1; } }
.tgpco2 .tgpco2-filters button.tgpco2-dd__btn small { display: inline; }
/* ===== my orders v2 ===== */
.tgpco2-mo { display: flex; flex-direction: column; gap: 26px; }
.tgpco2-mo .tgpco2-vd2__kpis { margin: 0; }
.tgpco2-mo__sec { display: flex; flex-direction: column; gap: 12px; }
.tgpco2-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tgpco2-mine__card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--c-surface-1); border: 1px solid var(--c-border); transition: border-color 0.15s, transform 0.15s var(--ease); }
.tgpco2-mine__card:hover { border-color: var(--c-border-strong); transform: translateY(-1px); }
.tgpco2-mine__who { display: flex; align-items: center; gap: 12px; text-decoration: none !important; color: inherit !important; min-width: 0; }
.tgpco2-mine__who .tgpco2-avatar { width: 44px; height: 44px; flex: none; }
.tgpco2-mine__name { display: flex; flex-direction: column; min-width: 0; }
.tgpco2-mine__name b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgpco2-mine__name small { font-size: 12px; color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgpco2-mine__last { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--c-text-2); min-width: 0; }
.tgpco2-mine__last svg { color: var(--c-green); flex: none; }
.tgpco2-mine__last span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgpco2-mine__last em { font-style: normal; color: var(--c-text-3); flex: none; margin-left: auto; }
.tgpco2-mine__acts { display: flex; gap: 8px; margin-top: auto; }
.tgpco2-mine__acts .tgpco2-btn { flex: 1; justify-content: center; }
.tgpco2-mo__sechead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tgpco2-mo__sechead h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; display: inline-flex; align-items: baseline; gap: 8px; }
.tgpco2-mo__sechead h2 .tgpco2-faint { font-size: 14px; font-weight: 500; }
.tgpco2-mo__sechead .tgpco2-muted { margin: 0; font-size: 13.5px; }
.tgpco2-mo__skel { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--c-border); background: var(--c-surface); }
.tgpco2-mo__empty { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--c-border-strong); color: var(--c-text-2); font-size: 14px; flex-wrap: wrap; }
.tgpco2-mo__empty > span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(124, 92, 255, 0.14); color: #cbbcff; flex: 0 0 auto; }
.tgpco2-mo__empty > div { flex: 1 1 260px; }
.tgpco2-mo__more { margin-top: 4px; }
.tgpco2-mo .tgpco2-rfq { margin: 0; } .tgpco2-mo .tgpco2-rfq + .tgpco2-rfq { margin-top: 10px; }
.tgpco2-mo__drafts { display: flex; flex-direction: column; gap: 6px; }
.tgpco2-mo__draft { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-surface); }
.tgpco2-mo__draft + .tgpco2-mo__draft { border-top: 1px solid var(--c-border); }
.tgpco2-mo__draft-art { width: 40px; height: 40px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; background: var(--c-surface-3); } .tgpco2-mo__draft-art img { width: 100%; height: 100%; object-fit: cover; }
.tgpco2-mo__filters { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 2px 0 4px; }
.tgpco2-mo__filters .tgpco2-search { flex: 0 0 auto; width: 100%; max-width: 400px; min-width: 0; }
.tgpco2-mo__filters .tgpco2-search .tgpco2-input { height: 40px; padding-left: 38px; font-size: 13.5px; }
.tgpco2-mo .tgpco2-vo__art { border-radius: 10px; }
/* order row meta: second line (type · #id · date) is inline on desktop, its own line on phones */
.tgpco2-vo__sub { display: contents; }
.tgpco2-vo__sub > span:not(:first-child)::before { content: '·'; margin-right: 8px; color: var(--c-text-3); opacity: 0.6; }
@media (max-width: 720px) {
  .tgpco2-mo { gap: 22px; padding-top: 20px; }
  .tgpco2-mo .tgpco2-vd2__head { gap: 12px; }
  .tgpco2-mo .tgpco2-vd2__head-main .tgpco2-h1 { font-size: 26px; }
  .tgpco2-mo .tgpco2-vd2__head-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tgpco2-mo .tgpco2-vd2__head-actions .tgpco2-btn { height: 44px; justify-content: center; width: 100%; }
  .tgpco2 .tgpco2-mo button.tgpco2-mo__brief { height: 44px; justify-content: center; padding: 0 14px !important; border: 1px solid var(--c-border-strong) !important; border-radius: 12px !important; background: var(--c-surface) !important; color: var(--c-text) !important; font-size: 14px; }
  .tgpco2-mo .tgpco2-vd2__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; }
  .tgpco2-mo .tgpco2-vd2__kpi, .tgpco2-mo .tgpco2-vd2__kpi:nth-child(odd) { padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface); white-space: normal; gap: 4px; }
  .tgpco2-mo .tgpco2-vd2__kpi.is-accent { background: rgba(124, 92, 255, 0.10); border-color: rgba(124, 92, 255, 0.35); }
  .tgpco2-mo .tgpco2-vd2__kpi b { font-size: 24px; }
  .tgpco2-mo .tgpco2-vd2__kpi span { font-size: 12.5px; }
  .tgpco2-mo__sechead { gap: 4px; flex-direction: column; align-items: flex-start; }
  .tgpco2-mo__sechead h2 { font-size: 20px; }
  .tgpco2-mo .tgpco2-card.tgpco2-rfq { padding: 16px 14px; }
  .tgpco2-mo .tgpco2-rfq__head { position: relative; gap: 8px; }
  .tgpco2-mo .tgpco2-rfq__head > div:first-child { min-width: 0; flex: 1 1 100%; }
  .tgpco2-mo .tgpco2-rfq__head > div:first-child > .tgpco2-row { padding-right: 96px; }
  .tgpco2-mo .tgpco2-rfq__head > .tgpco2-btn { position: absolute; top: 0; right: 0; }
  .tgpco2-mo .tgpco2-rfq__title { font-size: 17px; }
  .tgpco2-mo .tgpco2-offer { padding: 14px; gap: 10px; }
  .tgpco2-mo .tgpco2-offer__who b { font-size: 15px; }
  .tgpco2-mo .tgpco2-offer__terms { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--c-border); }
  .tgpco2-mo .tgpco2-offer__terms b { font-size: 22px; }
  .tgpco2-mo .tgpco2-offer__msg { margin-top: 0; }
  .tgpco2-mo .tgpco2-offer__act { gap: 10px; }
  .tgpco2-mo .tgpco2-offer__act .tgpco2-btn--primary, .tgpco2-mo .tgpco2-offer__act .tgpco2-btn--secondary { flex: 1 1 auto; justify-content: center; height: 44px; font-size: 14px; }
  .tgpco2-mo .tgpco2-offer__act .tgpco2-btn--ghost { height: 44px; padding: 0 16px; }
  .tgpco2-mo__draft { padding: 10px 12px; }
  .tgpco2-mo__filters { gap: 10px; margin: 0; }
  .tgpco2-mo__filters .tgpco2-search { max-width: none; }
  .tgpco2-mo__filters .tgpco2-search .tgpco2-input { height: 44px; font-size: 14px; }
  .tgpco2-mo__filters .tgpco2-chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tgpco2-mo__filters .tgpco2-chips::-webkit-scrollbar { display: none; }
  .tgpco2-mo__filters .tgpco2-chip { flex: 0 0 auto; white-space: nowrap; }
  .tgpco2-mo .tgpco2-vorders { gap: 8px; }
  .tgpco2-mo .tgpco2-vo { grid-template-columns: 52px minmax(0, 1fr); gap: 10px 12px; padding: 12px 12px 10px; background: var(--c-surface); border-color: var(--c-border); border-radius: 14px; align-items: start; }
  .tgpco2-mo .tgpco2-vo.is-attention { border-color: rgba(124, 92, 255, 0.4); }
  .tgpco2-mo .tgpco2-vo.is-closed { opacity: 0.7; }
  .tgpco2-mo .tgpco2-vo__art { width: 52px; height: 52px; }
  .tgpco2-mo .tgpco2-vo__body { gap: 4px; }
  .tgpco2-mo .tgpco2-vo__title { font-size: 15px; line-height: 1.3; flex-wrap: wrap; gap: 6px; }
  .tgpco2-mo .tgpco2-vo__meta { row-gap: 4px; }
  .tgpco2-mo .tgpco2-vo__sub { display: flex; flex-basis: 100%; gap: 8px; flex-wrap: wrap; }
  .tgpco2-mo .tgpco2-vo__meta > .tgpco2-vo__sub::before { content: none; margin: 0; }
  .tgpco2-mo .tgpco2-vo__right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--c-border); }
  .tgpco2-mo .tgpco2-vo__price { font-size: 16px; }
  .tgpco2-mo .tgpco2-vo__cta { height: 34px; padding: 0 14px; }
}
/* ===== chat voice v2 ===== */
.tgpco2 .tgpco2-chat__box [data-send] { width: 38px !important; min-width: 38px; height: 38px !important; padding: 0 !important; flex: 0 0 auto; }
.tgpco2 .tgpco2-chat__box [data-send].is-loading .tgpco2-btn__label { display: none; }
.tgpco2 .tgpco2-chat__box .tgpco2-btn--icon { width: 36px; min-width: 36px; height: 36px; padding: 0 !important; flex: 0 0 auto; }
.tgpco2-rec { align-items: center; padding: 2px 4px 2px 10px; min-height: 38px; }
.tgpco2-rec .tgpco2-btn { align-self: center; }
.tgpco2-rec--preview { padding-left: 4px; }
.tgpco2-rec--preview .tgpco2-voice { flex: 1; min-width: 0; }
.tgpco2-rec--preview.is-sending { opacity: 0.6; pointer-events: none; }
.tgpco2-voice { gap: 8px; min-width: 0; }
.tgpco2 button.tgpco2-voice__play { width: 32px; height: 32px; }
.tgpco2-voice__bars { height: 28px; gap: 2px; }
.tgpco2-voice__bars i { min-height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
.tgpco2-msg:not(.is-mine) .tgpco2-voice__bars i { background: rgba(255, 255, 255, 0.18); }
.tgpco2-voice__bars i.is-on { background: #fff; }
.tgpco2-msg--voice { width: min(100%, 300px); }
.tgpco2-msg--voice .tgpco2-msg__bubble { padding: 7px 10px 7px 7px; }
.tgpco2 .tgpco2-rec .tgpco2-btn--icon, .tgpco2 .tgpco2-rec button.tgpco2-btn { height: 36px !important; min-height: 36px !important; width: 36px !important; min-width: 36px !important; padding: 0 !important; display: inline-grid !important; place-items: center; }
.tgpco2 .tgpco2-rec .tgpco2-btn--primary { border-radius: 50% !important; }
.tgpco2-vo__title { color: var(--c-text); }
.tgpco2-vo:hover .tgpco2-vo__title { color: #fff; }
.tgpco2-mo .tgpco2-rfq__head .tgpco2-btn { align-self: flex-start; }
/* ===== filter bar v3: natural-width controls, wrapping rows ===== */
.tgpco2-filters__box { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 16px; }
.tgpco2-filters__box > * { flex: 0 0 auto !important; min-width: 0; width: auto; grid-column: auto !important; grid-row: auto !important; }
.tgpco2-filters__search { flex: 1 1 220px !important; min-width: 180px !important; max-width: 340px; }
.tgpco2-filters__box .tgpco2-dd { width: auto; }
.tgpco2-filters__box .tgpco2-dd__btn { width: auto; min-width: 0; padding-left: 12px; padding-right: 32px; white-space: nowrap; height: 42px; }
.tgpco2-filters__box .tgpco2-dd__btn > span { overflow: visible; }
.tgpco2-filters__box .tgpco2-dd:has(.tgpco2-filters__sort) { margin-left: auto; }
@media (max-width: 720px) { .tgpco2-filters__box { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; } .tgpco2-filters__search { grid-column: 1 / -1 !important; max-width: none; width: 100%; } .tgpco2-filters__box .tgpco2-dd { width: 100%; } .tgpco2-filters__box .tgpco2-dd__btn { width: 100%; padding-left: 12px; } .tgpco2-filters__box .tgpco2-dd__btn > span { overflow: hidden; text-overflow: ellipsis; } .tgpco2-filters__box .tgpco2-dd:has(.tgpco2-filters__sort) { margin-left: 0; } }
/* ===== chat composer: one button system ===== */
.tgpco2-chat__box { align-items: center; padding: 5px 5px 5px 8px; border-radius: 24px; }
.tgpco2-chat__box textarea { align-self: center; min-height: 34px; padding: 7px 6px; }
.tgpco2 .tgpco2-chat__box .tgpco2-btn, .tgpco2 .tgpco2-rec .tgpco2-btn { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 50% !important; display: inline-grid !important; place-items: center; flex: 0 0 auto; align-self: center; box-shadow: none !important; }
.tgpco2 .tgpco2-chat__box .tgpco2-btn--ghost, .tgpco2 .tgpco2-rec .tgpco2-btn--ghost { background: transparent !important; color: var(--c-text-3) !important; border: 0 !important; }
.tgpco2 .tgpco2-chat__box .tgpco2-btn--ghost:hover, .tgpco2 .tgpco2-rec .tgpco2-btn--ghost:hover, .tgpco2 .tgpco2-chat__tool.is-open { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }
.tgpco2 .tgpco2-chat__box .tgpco2-btn--primary, .tgpco2 .tgpco2-rec .tgpco2-btn--primary { background: linear-gradient(180deg, #8d72ff, #6f4fe6) !important; color: #fff !important; border: 0 !important; box-shadow: 0 2px 8px rgba(124, 92, 255, 0.35) !important; }
.tgpco2 .tgpco2-chat__box [data-send] { width: 36px !important; height: 36px !important; opacity: 0.45; transform: none; }
.tgpco2-chat.has-text .tgpco2-chat__box [data-send] { opacity: 1; }
.tgpco2 .tgpco2-chat__box .tgpco2-btn .tgpco2-ic { width: 17px; height: 17px; }
.tgpco2-rec { padding: 0 2px 0 8px; min-height: 36px; gap: 8px; }
/* ===== voice bubble v3 ===== */
.tgpco2-voice { gap: 10px; }
.tgpco2 button.tgpco2-voice__play { width: 30px !important; height: 30px !important; min-width: 30px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(124, 92, 255, 0.22) !important; color: #cbbcff !important; border: 0 !important; display: inline-grid !important; place-items: center; box-shadow: none !important; }
.tgpco2-msg.is-mine button.tgpco2-voice__play { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; }
.tgpco2-voice.is-playing button.tgpco2-voice__play { background: var(--c-accent) !important; color: #fff !important; }
.tgpco2-voice__bars { height: 26px; gap: 3px; align-items: center; }
.tgpco2-voice__bars i { min-height: 4px; width: 3px; flex: 0 0 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); transition: background 0.08s; }
.tgpco2-voice__bars i.is-on { background: #cbbcff; }
.tgpco2-msg.is-mine .tgpco2-voice__bars i { background: rgba(255, 255, 255, 0.3); } .tgpco2-msg.is-mine .tgpco2-voice__bars i.is-on { background: #fff; }
.tgpco2-voice__time { font-size: 12px; min-width: 30px; }
.tgpco2-msg--voice { width: min(100%, 280px); }
.tgpco2-rec--preview .tgpco2-voice__bars { justify-content: space-between; }
/* ===== order timeline: vertical on phones ===== */
@media (max-width: 720px) {
  .tgpco2-steps { display: flex; flex-direction: column; gap: 0; }
  .tgpco2-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; padding: 0 0 14px; position: relative; }
  .tgpco2-step__bar { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--c-surface-4); border: 1px solid var(--c-border-strong); margin: 4px 0 0 6px; position: relative; z-index: 1; }
  .tgpco2-step::before { content: ''; position: absolute; left: 10px; top: 16px; bottom: -2px; width: 2px; background: var(--c-border); }
  .tgpco2-step:last-child::before { display: none; }
  .tgpco2-step.is-done .tgpco2-step__bar { background: #22c55e; border-color: #22c55e; }
  .tgpco2-step.is-done::before { background: rgba(34, 197, 94, 0.5); }
  .tgpco2-step.is-current .tgpco2-step__bar { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.22); }
  .tgpco2-step__label { font-size: 14px; font-weight: 600; line-height: 1.3; }
  .tgpco2-step__label .tgpco2-ic { display: none; }
  .tgpco2-step__date { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
}
.tgpco2 .tgpco2-chat__box.is-recording > .tgpco2-btn, .tgpco2 .tgpco2-chat__box.is-recording > textarea, .tgpco2 .tgpco2-chat__box.is-recording > [data-send] { display: none !important; }
@media (max-width: 720px) { .tgpco2-filters__box .tgpco2-dd:has(.tgpco2-filters__sort) { grid-column: 1 / -1; } }
@media (max-width: 720px) { .tgpco2-filters__box .tgpco2-dd:has(.tgpco2-filters__sort) { grid-column: 1 / -1 !important; } }
/* send button: compact */
.tgpco2 .tgpco2-chat__box [data-send], .tgpco2 .tgpco2-rec .tgpco2-btn--primary { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; background: var(--c-accent) !important; box-shadow: none !important; opacity: 0.5; transition: opacity 0.15s, background 0.15s, transform 0.12s; margin-right: 2px; }
.tgpco2 .tgpco2-chat__box [data-send] .tgpco2-ic, .tgpco2 .tgpco2-rec .tgpco2-btn--primary .tgpco2-ic { width: 15px; height: 15px; transform: translateX(-1px); }
.tgpco2-chat.has-text .tgpco2-chat__box [data-send], .tgpco2 .tgpco2-rec .tgpco2-btn--primary { opacity: 1; }
.tgpco2-chat.has-text .tgpco2-chat__box [data-send]:hover, .tgpco2 .tgpco2-rec .tgpco2-btn--primary:hover { background: #8d72ff !important; transform: scale(1.06); }
.tgpco2 .tgpco2-chat__box [data-send]:active { transform: scale(0.94); }
.tgpco2 .tgpco2-chat__box [data-send].is-loading { opacity: 0.7; }
.tgpco2 .tgpco2-chat__box [data-send].is-loading .tgpco2-spin { width: 14px; height: 14px; border-width: 2px; }
.tgpco2-msg.is-pending .tgpco2-msg__bubble { opacity: 0.75; }
.tgpco2-msg__pending { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-3); }
.tgpco2-msg.is-failed .tgpco2-msg__bubble { border-color: rgba(239, 68, 68, 0.5); }
.tgpco2-msg__failed { display: inline-flex; align-items: center; gap: 4px; color: #fca5a5; }
.tgpco2 .tgpco2-msg__failed button { background: none !important; border: 0 !important; padding: 0 !important; color: #fff !important; font: inherit; text-decoration: underline; cursor: pointer; }
/* Messenger-style times: no per-message stamps, centred separators instead */
.tgpco2-msg__meta { display: none !important; }
.tgpco2-msg__meta:has(.tgpco2-msg__seen, .tgpco2-msg__pending, .tgpco2-msg__failed, span:not(:empty)) { display: flex !important; }
.tgpco2-msg:hover .tgpco2-msg__meta:not(:has(.tgpco2-msg__seen, .tgpco2-msg__pending, .tgpco2-msg__failed, span:not(:empty))) { display: none !important; }
.tgpco2-msg.is-grouped { margin-top: -4px; }
.tgpco2-chat__day { margin: 14px 0 4px; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.tgpco2-chat__day span { background: transparent; padding: 0; }
/* ===== producer profile ===== */
.tgpco2-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 6px 8px; border-radius: 12px; background: var(--c-surface-2); border: 1px solid var(--c-border-strong); cursor: text; }
.tgpco2-tags:focus-within { border-color: var(--c-accent); }
.tgpco2-tags--auto { cursor: default; margin-bottom: 6px; background: rgba(34, 197, 94, 0.06); border-color: rgba(34, 197, 94, 0.25); }
.tgpco2-tags--auto .tgpco2-tag { color: #86efac; }
.tgpco2-tag--rm { padding-right: 4px; gap: 4px; }
.tgpco2 .tgpco2-tag--rm button { background: none !important; border: 0 !important; padding: 2px !important; color: var(--c-text-3) !important; cursor: pointer; display: inline-grid; place-items: center; border-radius: 50% !important; }
.tgpco2 .tgpco2-tag--rm button:hover { color: #fff !important; background: rgba(255, 255, 255, 0.1) !important; }
.tgpco2 .tgpco2-tags__in { flex: 1 1 140px; min-width: 120px; background: transparent !important; border: 0 !important; outline: none !important; color: var(--c-text); font: inherit; font-size: 13.5px; padding: 4px 4px !important; box-shadow: none !important; }
.tgpco2 button.tgpco2-linkbtn { background: none !important; border: 0 !important; padding: 0 !important; color: #cbbcff !important; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tgpco2-ppanel__tagline { margin: 4px 0 2px; font-size: 14px; color: var(--c-text-2); }
.tgpco2-ppanel__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.tgpco2-ppanel__facts > div { padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.06); min-width: 0; }
.tgpco2-ppanel__facts b { display: block; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 6px; }
.tgpco2-ppanel__facts span { font-size: 13.5px; color: var(--c-text); line-height: 1.5; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.tgpco2-ppanel__label { font-style: normal; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 12.5px; }
.tgpco2-ppanel__label.is-verified { background: rgba(34, 197, 94, 0.12); color: #86efac; }
.tgpco2-svc__like { margin-top: 8px; font-size: 12.5px; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-svc__like span { color: var(--c-text-3); }
.tgpco2-svc__like + .tgpco2-svc__langs { margin-top: 4px; }
@media (max-width: 720px) { .tgpco2-ppanel__facts { grid-template-columns: 1fr; } }
.tgpco2-svc__flag { flex: 0 0 auto; font-size: 15px; line-height: 1; margin-left: 2px; cursor: default; }
.tgpco2-svc__flag img.emoji { width: 16px !important; height: 16px !important; margin: 0 !important; vertical-align: -2px; display: inline-block; }
.tgpco2 img.emoji { box-shadow: none; border: 0; background: none; }
.tgpco2-tip__rows { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; min-width: 220px; text-align: left; }
.tgpco2-tip__rows > div { display: contents; }
.tgpco2-tip__rows b { color: var(--c-text-3); font-weight: 500; white-space: nowrap; }
.tgpco2-tip__rows span { color: #f2f2f5; }
.tgpco2-tipbox:has(.tgpco2-tip__rows) { padding: 10px 14px; white-space: normal; max-width: 320px; }
.tgpco2-drop--sm { padding: 16px; } .tgpco2-drop--sm .tgpco2-drop__title { font-size: 13.5px; }
.tgpco2-cfmore { padding-top: 12px; border-top: 1px dashed var(--c-border); }
.tgpco2-wrev__note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--c-text-3); }
.tgpco2-wrev__note .tgpco2-ic { flex: none; margin-top: 2px; }
/* ---- AI concierge results ---- */
.tgpco2-ai { margin: 26px 0 8px; padding: 22px 24px; border: 1px solid var(--c-border-strong); border-radius: var(--r-xl); background: var(--c-surface); box-shadow: var(--shadow-1); }
.tgpco2-ai[hidden] { display: none; }
.tgpco2-ai__head { display: flex; align-items: flex-start; gap: 12px; }
.tgpco2-ai__head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tgpco2-ai__head b { font-size: 16px; font-weight: 700; line-height: 1.3; }
.tgpco2-ai__hint { font-size: 13px; color: var(--c-text-3); }
.tgpco2-ai__spark { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c-accent-soft); color: var(--c-accent-text); }
.tgpco2-ai__grid { margin-top: 18px; }
.tgpco2-ai__skel { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.tgpco2-ai__skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--c-surface-2), var(--c-surface-3), var(--c-surface-2)); background-size: 200% 100%; animation: tgpco2-skel 1.4s linear infinite; }
.tgpco2-ai__skel i:first-child { height: 90px; border-radius: 10px; }
.tgpco2-ai__skel i:nth-child(3) { width: 60%; }
.tgpco2-ai__why { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--c-accent-text); margin: 0 0 8px; }
.tgpco2-ai__why svg { flex: 0 0 auto; margin-top: 3px; }
.tgpco2-ai__also { margin-top: 16px; font-size: 13px; color: var(--c-text-3); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.tgpco2-ai__also a { color: var(--c-text-2); text-decoration: none; border-bottom: 1px dotted var(--c-border-strong); }
.tgpco2-ai__also a:hover { color: #fff; }
.tgpco2-ai__also small { color: var(--c-text-3); }
.tgpco2-ai__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.tgpco2-ai__foot > span { margin-left: auto; }
.tgpco2-svc.is-flash { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tgpco2-ai__examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tgpco2 button.tgpco2-ai__ex { font-size: 12.5px !important; padding: 6px 11px !important; border-radius: var(--r-pill) !important; border: 1px dashed var(--c-border-strong) !important; background: transparent !important; color: var(--c-text-2) !important; cursor: pointer; }
.tgpco2 button.tgpco2-ai__ex:hover { color: #fff !important; border-style: solid !important; }
@media (max-width: 720px) { .tgpco2-ai { padding: 16px; } .tgpco2-ai__foot > span { margin-left: 0; width: 100%; } }
/* ---- delivery check ---- */
.tgpco2-dcheck { margin-top: 16px; border-radius: 16px; border: 1px solid var(--c-border); background: var(--c-surface-2); overflow: hidden; }
.tgpco2-dcheck--amber { border-color: rgba(245,179,66,0.35); }
.tgpco2-dcheck--red { border-color: rgba(242,99,99,0.4); }
.tgpco2-dcheck--accent { border-color: rgba(124,92,255,0.4); }
.tgpco2-dcheck--green { border-color: rgba(34,197,94,0.3); }
.tgpco2-dcheck__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--c-border); }
.tgpco2-dcheck__hint { margin: 0; padding: 12px 18px 14px; font-size: 13.5px; color: var(--c-text-2); line-height: 1.5; }
.tgpco2-dcheck__rounds { list-style: none; margin: 0; padding: 6px 18px 0; }
.tgpco2-dcheck__rounds > li { position: relative; padding: 14px 0 16px 22px; border-bottom: 1px solid var(--c-border); }
.tgpco2-dcheck__rounds > li:last-child { border-bottom: 0; }
.tgpco2-dcheck__rounds > li::before { content: ''; position: absolute; left: 4px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-3); }
.tgpco2-dcheck--red .tgpco2-dcheck__rounds > li:last-child::before { background: var(--c-red); box-shadow: 0 0 0 3px var(--c-red-soft); }
.tgpco2-dcheck--accent .tgpco2-dcheck__rounds > li:last-child::before { background: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.tgpco2-dcheck__r b { display: block; font-size: 13px; font-weight: 600; color: var(--c-text); margin-bottom: 8px; }
.tgpco2-dcheck__r ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tgpco2-dcheck__r ul li { font-size: 12.5px; color: var(--c-text-2); padding: 5px 10px; border-radius: 999px; background: var(--c-surface-3); border: 1px solid var(--c-border); }
.tgpco2-dcheck__r p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-text); white-space: pre-wrap; }
.tgpco2-dcheck__reply { display: flex; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--c-accent-soft); font-size: 13.5px; color: var(--c-text-2); align-items: flex-start; }
.tgpco2-dcheck__reply .tgpco2-ic { flex: none; margin-top: 3px; color: var(--c-accent-text); }
.tgpco2-dcheck__reply b { color: var(--c-accent-text); display: block; font-weight: 600; }
.tgpco2-dcheck__reply p { margin: 3px 0 0; white-space: pre-wrap; color: var(--c-text); line-height: 1.5; }
.tgpco2-dcheck__reply.is-wait { background: var(--c-amber-soft); color: var(--c-amber-text); }
.tgpco2-dcheck__reply.is-wait .tgpco2-ic { color: var(--c-amber-text); }
.tgpco2-dcheck__actions { margin: 0; padding: 14px 18px; border-top: 1px solid var(--c-border); flex-wrap: wrap; gap: 8px; }
.tgpco2-dcheck__list { display: flex; flex-direction: column; gap: 10px; }

/* ===== badges: coloured text + icon, no pill (v2.27) ===== */
.tgpco2-svc__merits { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 5px 0 0; flex: 0 0 100%; font-size: 12px; }
.tgpco2-svc__merits::before, .tgpco2-svc__merit + .tgpco2-svc__merit::before { content: none !important; }
.tgpco2-svc__merit + .tgpco2-svc__merit { padding-left: 0; position: static; }
.tgpco2-svc__merit { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; border-radius: 0; font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1.3; white-space: nowrap; color: var(--c-text-2); }
.tgpco2-svc__merit .tgpco2-ic { width: 12px; height: 12px; flex: none; }
.tgpco2-svc__merit--top_rated { color: #e5b85a; }
.tgpco2-svc__merit--verified { color: #6ee7a1; }
.tgpco2-svc__merit--label_released { color: #8ab4f8; }
.tgpco2-svc__merit--rising { color: #c9a5ff; }
.tgpco2-svc__merit--repeat_clients { color: #5eead4; }
.tgpco2-svc__merit--delivered_25, .tgpco2-svc__merit--delivered_100, .tgpco2-svc__merit--delivered_250 { color: #fdba74; }
.tgpco2-svc__merit--fast_responder, .tgpco2-svc__merit--demo_24h { color: #fde68a; }
.tgpco2-svc__merit--on_time { color: #7dd3fc; }
.tgpco2-svc__merit--you_ordered, .tgpco2-svc__merit--you_bought { color: #cbbcff; }
.tgpco2-svc__merit--speaks_lang { color: #f9a8d4; }
.tgpco2-svc__merit--stems, .tgpco2-svc__merit--unlimited_revisions, .tgpco2-svc__merit--free_revisions { color: var(--c-text-2); }
.tgpco2-svc__merit--more { color: var(--c-text-3); font-weight: 600; }
/* wizard / editor: close button in the modal corner */
.tgpco2-modal--wizard .tgpco2-modal__panel { position: relative; }
.tgpco2.tgpco2-modal--wizard button.tgpco2-modal__close--corner { position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; bottom: auto !important; z-index: 8; margin: 0 !important; }
@media (max-width: 720px) { .tgpco2.tgpco2-modal--wizard button.tgpco2-modal__close--corner { top: 10px !important; right: 10px !important; } }
/* image lightbox */
.tgpco2-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; animation: tgpco2-fade 0.18s ease; }
.tgpco2-lightbox__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tgpco2-lightbox__fig { position: relative; margin: 0; max-width: min(1100px, 94vw); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.tgpco2-lightbox__fig img { max-width: 100%; max-height: calc(92vh - 56px); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); object-fit: contain; }
.tgpco2-lightbox__bar { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.tgpco2-lightbox__name { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgpco2 a.tgpco2-lightbox__dl { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 99px; background: #fff; color: #0d0d0d !important; font-size: 13px; font-weight: 700; text-decoration: none !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.15s var(--ease), background 0.15s; }
.tgpco2 a.tgpco2-lightbox__dl:hover { transform: translateY(-1px); background: #f3f0ff; }
.tgpco2 button.tgpco2-lightbox__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; display: grid !important; place-items: center; padding: 0 !important; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.15s, transform 0.15s var(--ease); z-index: 2; }
.tgpco2 button.tgpco2-lightbox__close:hover { background: rgba(255, 255, 255, 0.18) !important; transform: scale(1.06); }
@media (max-width: 720px) { .tgpco2 button.tgpco2-lightbox__close { top: 12px; right: 12px; width: 38px; height: 38px; } .tgpco2-lightbox { padding: 14px; } }
@keyframes tgpco2-fade { from { opacity: 0; } to { opacity: 1; } }
.tgpco2-msg__img { cursor: zoom-in; }
/* ===== switches instead of native checkboxes (v2.28) ===== */
.tgpco2 .tgpco2-check input[type="checkbox"], .tgpco2 .tgpco2-toggle input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; position: relative; width: 40px !important; height: 22px !important; min-width: 40px; margin: 0 !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.08) !important; cursor: pointer; flex: none; transition: background 0.22s, border-color 0.22s; outline: none !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.4) !important; vertical-align: middle; }
.tgpco2 .tgpco2-check input[type="checkbox"]::before, .tgpco2 .tgpco2-toggle input[type="checkbox"]::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.45); transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tgpco2 .tgpco2-check input[type="checkbox"]:checked, .tgpco2 .tgpco2-toggle input[type="checkbox"]:checked { background: var(--c-accent) !important; border-color: var(--c-accent) !important; box-shadow: none !important; }
.tgpco2 .tgpco2-check input[type="checkbox"]:checked::before, .tgpco2 .tgpco2-toggle input[type="checkbox"]:checked::before { transform: translateX(18px); }
.tgpco2 .tgpco2-check input[type="checkbox"]:focus-visible, .tgpco2 .tgpco2-toggle input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px rgba(124,92,255,0.35) !important; }
.tgpco2 .tgpco2-check input[type="checkbox"]:disabled, .tgpco2 .tgpco2-toggle input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }
.tgpco2-check { align-items: center; }
.tgpco2-check span { line-height: 1.4; }

/* wizard sidebar: keep the service title clear of the corner close button */
.tgpco2-modal--wizard .tgpco2-wiz__svc { padding-right: 48px; }
@media (max-width: 720px) { .tgpco2-modal--wizard .tgpco2-wiz__head { padding-right: 44px; } }

/* v2.29 wizard inline field error */
.tgpco2-field.is-invalid .tgpco2-dd__btn, .tgpco2-field.is-invalid .tgpco2-input, .tgpco2-field.is-invalid .tgpco2-textarea { border-color: var(--c-red-text, #f87171) !important; box-shadow: 0 0 0 3px rgba(248,113,113,0.14) !important; }
.tgpco2-field__err { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--c-red-text, #f87171); }
.tgpco2-field__err .tgpco2-ic { flex: none; }
.tgpco2-toasts { z-index: 100001; }

/* v2.30 — wizard review redesign */
.tgpco2-rv { border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface-2); overflow: hidden; }
.tgpco2-rv__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-top: 1px solid var(--c-border); }
.tgpco2-rv__item:first-child { border-top: 0; }
.tgpco2-rv__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(124, 92, 255, 0.12); color: #cbbcff; flex: none; }
.tgpco2-rv__body { min-width: 0; }
.tgpco2-rv__lab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 6px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; }
.tgpco2 .tgpco2-rv__lab button, .tgpco2 .tgpco2-rv__more { background: transparent !important; border: 0 !important; color: var(--c-accent-text) !important; font-size: 12px !important; padding: 0 !important; display: inline-flex !important; align-items: center; gap: 4px; cursor: pointer; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font) !important; box-shadow: none !important; line-height: 1.2 !important; min-height: 0 !important; height: auto !important; }
.tgpco2-rv__title { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 4px; color: var(--c-text); word-break: break-word; }
.tgpco2-rv__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--c-text-2); white-space: pre-wrap; word-break: break-word; }
.tgpco2-rv__text[data-rv-clamp]:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tgpco2 .tgpco2-rv__more { margin-top: 6px; }
.tgpco2-rv__qa { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--c-border-strong); display: flex; flex-direction: column; gap: 6px; }
.tgpco2-rv__qa li { font-size: 13px; color: var(--c-text-2); } .tgpco2-rv__qa small { display: block; font-size: 11.5px; color: var(--c-text-3); }
.tgpco2-rv__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tgpco2-rv__list li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--c-text-2); min-width: 0; } .tgpco2-rv__list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tgpco2-rv__list .tgpco2-ic { color: var(--c-text-3); flex: none; }
.tgpco2-rv__empty { margin: 0; font-size: 13px; color: var(--c-text-3); }
.tgpco2-rv__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tgpco2-rv__rows li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--c-text-2); } .tgpco2-rv__rows li b { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tgpco2-rv__rows li.tgpco2-rv__daw span { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-3); font-size: 12.5px; }
.tgpco2-rv__pay { margin-top: 12px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface-2); padding: 14px 16px 6px; }
.tgpco2-rv__paytop { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 12px; }
.tgpco2-rv__paytop .tgpco2-rv__lab { margin: 0; }
.tgpco2-rv__sum { font-size: 13px; color: var(--c-text-3); } .tgpco2-rv__sum b { color: var(--c-text); font-size: 16px; font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; }
.tgpco2-rv__steps { list-style: none; margin: 0; padding: 0 0 0 42px; position: relative; }
.tgpco2-rv__steps::before { content: ''; position: absolute; left: 14px; top: 10px; bottom: 18px; width: 2px; background: var(--c-border-strong); border-radius: 2px; }
.tgpco2-rv__steps li { position: relative; padding: 0 0 14px; }
.tgpco2-rv__steps li i { position: absolute; left: -33px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-surface-3); border: 2px solid var(--c-border-strong); box-sizing: border-box; }
.tgpco2-rv__steps li.is-now i { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.22); }
.tgpco2-rv__steps li b { display: block; font-size: 14px; font-weight: 600; color: var(--c-text); } .tgpco2-rv__steps li.is-now b { color: #fff; }
.tgpco2-rv__steps li span { display: block; font-size: 12.5px; color: var(--c-text-3); margin-top: 1px; }
.tgpco2-rv__note { display: flex; align-items: flex-start; gap: 7px; margin: 2px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--c-text-3); } .tgpco2-rv__note .tgpco2-ic { flex: none; margin-top: 2px; }
.tgpco2 .tgpco2-rv__agree { margin-top: 12px; }
@media (max-width: 720px) { .tgpco2-rv__item { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; } .tgpco2-rv__item .tgpco2-rv__ic { display: none; } .tgpco2-rv__lab { margin-top: 0; } .tgpco2-rv__paytop { grid-template-columns: minmax(0, 1fr) auto; } .tgpco2-rv__paytop .tgpco2-rv__ic { display: none; } .tgpco2-rv__steps { padding-left: 30px; } .tgpco2-rv__steps::before { left: 5px; } .tgpco2-rv__steps li i { left: -30px; } }

/* v2.30 — checkout redesign (deposit / balance / extra revision) */
.tgpco2-co { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.tgpco2-co__card { padding: 24px 28px 24px; background: var(--c-surface-2); }
.tgpco2-co__journey { list-style: none; margin: 0 0 22px; padding: 0 0 18px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; border-bottom: 1px solid var(--c-border); }
.tgpco2-co__journey li { position: relative; padding-top: 14px; min-width: 0; }
.tgpco2-co__journey li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: var(--c-border-strong); }
.tgpco2-co__journey li.is-done::before { background: var(--c-green); }
.tgpco2-co__journey li.is-now::before { background: var(--c-accent); }
.tgpco2-co__journey li b { display: block; color: var(--c-text-3); font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-co__journey li.is-now b { color: #fff; } .tgpco2-co__journey li.is-done b { color: var(--c-green-text); }
.tgpco2-co__journey li span { display: block; font-size: 11.5px; color: var(--c-text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgpco2-co__journey li.is-now span { color: var(--c-text-2); }
.tgpco2-co__head { margin-bottom: 18px; }
.tgpco2-co__amount { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 6px 0 8px; font-variant-numeric: tabular-nums; color: #fff; }
.tgpco2-co__amount small { font-size: 12.5px; font-weight: 600; color: var(--c-text-3); margin-left: 8px; letter-spacing: 0.05em; }
.tgpco2-co__sub { margin: 0; font-size: 14px; color: var(--c-text-2); line-height: 1.55; max-width: 560px; }
.tgpco2-co__mobsum { display: none; }
.tgpco2-co__quote { margin: 0 0 16px; padding: 12px 14px 12px 16px; border-left: 2px solid var(--c-accent); background: var(--c-surface-3); border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.55; color: var(--c-text-2); white-space: pre-wrap; word-break: break-word; }
.tgpco2-co__quote b { display: block; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 4px; font-weight: 600; }
.tgpco2-co__err { margin-bottom: 14px; }
.tgpco2-co__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-border); margin-bottom: 16px; }
.tgpco2 .tgpco2-co__tabs button { flex: 1; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px !important; border-radius: 9px !important; border: 0 !important; background: transparent !important; color: var(--c-text-2) !important; font-size: 13.5px !important; font-weight: 600 !important; cursor: pointer; font-family: var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; }
.tgpco2 .tgpco2-co__tabs button.is-active { background: var(--c-surface-4) !important; color: #fff !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 8px rgba(0, 0, 0, 0.25) !important; }
.tgpco2 .tgpco2-co__tabs button .tgpco2-ic { color: var(--c-text-3); } .tgpco2 .tgpco2-co__tabs button.is-active .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2-co__tabsub { color: var(--c-text-3); font-weight: 500; }
.tgpco2 .tgpco2-co__tabs button.is-active .tgpco2-co__tabsub { color: var(--c-text-2); }
.tgpco2-co .tgpco2-method { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.tgpco2-co .tgpco2-method__body { padding: 0; }
.tgpco2-co__paywrap { margin-top: 16px; }
.tgpco2-co .tgpco2-btn--lg.tgpco2-btn--block { border-radius: 12px !important; }
.tgpco2-co__paynote { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--c-text-3); }
.tgpco2-co__pphint { margin: 0 0 12px; font-size: 13px; color: var(--c-text-3); }
.tgpco2-co__secure { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-border); font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-co__secure span { display: inline-flex; align-items: center; gap: 6px; } .tgpco2-co__secure .tgpco2-ic { color: var(--c-green-text); }
.tgpco2-co__terms { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-text-3); } .tgpco2-co__terms a { color: var(--c-text-2); text-decoration: underline; text-underline-offset: 2px; }
.tgpco2-co__sum { padding: 20px 22px; position: sticky; top: 92px; }
.tgpco2-co__svc { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--c-border); margin-bottom: 14px; }
.tgpco2-co__art { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--c-surface-3); flex: none; } .tgpco2-co__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgpco2-co__svc b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.tgpco2-co__svc span { display: block; font-size: 12.5px; color: var(--c-text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgpco2-co__lines { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.tgpco2-co__lines > div { display: flex; justify-content: space-between; gap: 12px; color: var(--c-text-2); } .tgpco2-co__lines > div b { color: var(--c-text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tgpco2-co__lines > div.is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--c-border); color: var(--c-text); font-weight: 600; } .tgpco2-co__lines > div.is-total b { font-size: 17px; font-weight: 700; }
.tgpco2-co__lab { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; margin: 18px 0 10px; }
.tgpco2-co__sched { display: flex; flex-direction: column; gap: 9px; }
.tgpco2-co__sched > div { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: var(--c-text-3); }
.tgpco2-co__sched i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c-border-strong); display: grid; place-items: center; box-sizing: border-box; }
.tgpco2-co__sched > div.is-now { color: var(--c-text); font-weight: 600; } .tgpco2-co__sched > div.is-now i { border-color: var(--c-accent); background: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.tgpco2-co__sched > div.is-done { color: var(--c-text-2); } .tgpco2-co__sched > div.is-done i { border-color: var(--c-green); background: var(--c-green); color: #08220f; }
.tgpco2-co__sched small { display: block; font-size: 11.5px; color: var(--c-text-3); font-weight: 400; margin-top: 1px; }
.tgpco2-co__sched b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: inherit; }
.tgpco2-co__trust { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-co__trust li { display: flex; gap: 8px; align-items: flex-start; } .tgpco2-co__trust .tgpco2-ic { color: var(--c-green-text); flex: none; margin-top: 1px; }
@media (max-width: 1080px) { .tgpco2-co { grid-template-columns: 1fr; } .tgpco2-co__sum { position: static; } .tgpco2-co__mobsum { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--c-surface-3); border: 1px solid var(--c-border); font-size: 13px; color: var(--c-text-2); } .tgpco2-co__mobsum b { color: var(--c-text); } .tgpco2-co__mobsum a { color: var(--c-accent-text); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } }
@media (max-width: 720px) { .tgpco2-co__card { padding: 18px 16px 18px; } .tgpco2-co__amount { font-size: 32px; } .tgpco2-co__journey { gap: 4px; margin-bottom: 18px; padding-bottom: 14px; } .tgpco2-co__journey li span { display: none; } .tgpco2-co__journey li b { font-size: 11px; } .tgpco2 .tgpco2-co__tabs button { font-size: 12.5px !important; padding: 9px 8px !important; } .tgpco2-co__tabsub { display: none; } .tgpco2-co__sum { padding: 18px 16px; } .tgpco2-co__secure { gap: 6px 14px; } }
.tgpco2 [hidden], .tgpco2[hidden] { display: none !important; }
@media (max-width: 720px) { .tgpco2-co__journey li b { white-space: normal; line-height: 1.2; } }

/* v2.31 — checkout polish: page spacing, header band, stacked method panels, due-now block */
.tgpco2-inline > [data-tgpco2="checkout"] { padding-top: 26px; padding-bottom: 72px; }
.tgpco2-inline > [data-tgpco2="checkout"] .tgpco2-crumbs { margin-bottom: 16px; }
.tgpco2-co__card { padding: 0; overflow: hidden; }
.tgpco2-co__top { padding: 22px 28px 22px; background: linear-gradient(180deg, var(--c-surface-3), var(--c-surface-2)); border-bottom: 1px solid var(--c-border); }
.tgpco2-co__journey { margin-bottom: 20px; padding-bottom: 0; border-bottom: 0; }
.tgpco2-co__head { margin-bottom: 0; }
.tgpco2-co__form { padding: 22px 28px 24px; }
.tgpco2-co .tgpco2-pay__methods { display: grid; }
.tgpco2-co .tgpco2-method { grid-area: 1 / 1; }
.tgpco2-co .tgpco2-method:not(.is-active) { visibility: hidden; pointer-events: none; }
.tgpco2-co .tgpco2-method__body { display: block !important; }
.tgpco2-co__or { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; font-size: 12px; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.tgpco2-co__or::before, .tgpco2-co__or::after { content: ''; flex: 1; height: 1px; background: var(--c-border-strong); }
.tgpco2-co #tgpco2-express { margin-bottom: 0; }
.tgpco2-co__due { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--c-accent-soft); border: 1px solid rgba(124, 92, 255, 0.3); font-size: 13px; color: var(--c-text-2); }
.tgpco2-co__due b { font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.tgpco2-co__trust { margin-top: 14px; }
@media (max-width: 1080px) { .tgpco2-inline > [data-tgpco2="checkout"] { padding-top: 18px; padding-bottom: 48px; } }
@media (max-width: 720px) { .tgpco2-co__card { padding: 0; } .tgpco2-co__top { padding: 16px 16px 18px; } .tgpco2-co__form { padding: 16px 16px 18px; } .tgpco2-inline > [data-tgpco2="checkout"] { padding-top: 12px; padding-bottom: 40px; } }

/* v2.32 — order workspace: project brief (spec-sheet layout) */
.tgpco2-bf .tgpco2-card__head { margin-bottom: 14px; }
.tgpco2-bf__num { font-size: 12.5px; color: var(--c-text-3); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.tgpco2-bf__quote { position: relative; margin: 0; padding: 6px 0 4px 34px; font-family: var(--font-display, 'Inter Tight', var(--font)); font-size: 21px; font-weight: 500; line-height: 1.45; letter-spacing: -0.012em; color: #fff; white-space: pre-wrap; word-break: break-word; }
.tgpco2-bf__quote::before { content: '\201C'; position: absolute; left: 0; top: -6px; font-size: 52px; line-height: 1; font-weight: 700; color: var(--c-accent); opacity: 0.85; }
.tgpco2-bf__none { margin: 0; padding: 6px 0 4px; font-size: 15px; color: var(--c-text-3); font-style: italic; }
.tgpco2-bf__strip { display: flex; flex-wrap: wrap; margin-top: 20px; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.tgpco2-bf__cell { flex: 1 1 auto; min-width: 0; padding: 12px 18px 12px 0; margin-right: 18px; border-right: 1px solid var(--c-border); }
.tgpco2-bf__cell:last-child { border-right: 0; margin-right: 0; }
.tgpco2-bf__cell b { display: block; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; margin-bottom: 3px; white-space: nowrap; }
.tgpco2-bf__cell span { display: block; font-size: 17px; font-weight: 600; color: var(--c-text); letter-spacing: -0.01em; white-space: pre-wrap; word-break: break-word; font-variant-numeric: tabular-nums; }
.tgpco2-bf__lines { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); row-gap: 10px; column-gap: 14px; padding: 14px 0 0; }
.tgpco2-bf__lines dt { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; padding-top: 4px; }
.tgpco2-bf__lines dd { margin: 0; min-width: 0; }
.tgpco2-bf__inc { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--c-text-2); }
.tgpco2-bf__inc span { display: inline-flex; align-items: center; gap: 6px; }
.tgpco2-bf__inc .tgpco2-ic { color: var(--c-green-text); }
.tgpco2-bf__inc em { font-style: normal; color: var(--c-text-3); font-size: 12.5px; margin-left: 2px; }
.tgpco2-bf__refs { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.tgpco2-bf__refs a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 13.5px; color: var(--c-text-2); text-decoration: none; border-bottom: 1px solid transparent; }
.tgpco2-bf__refs a b { color: var(--c-text); font-weight: 600; }
.tgpco2-bf__refs a span { color: var(--c-text-3); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgpco2-bf__refs a:hover { border-bottom-color: var(--c-text-3); }
.tgpco2-bf__refs a .tgpco2-ic { color: var(--c-accent-text); flex: none; }
.tgpco2-bf__refs .tgpco2-player--mini { flex: 1 1 260px; }
.tgpco2-bf__composer { display: flex; align-items: flex-end; gap: 8px; margin-top: 18px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--c-surface-2); border: 1px solid var(--c-border-strong); }
.tgpco2-bf__composer:focus-within { border-color: var(--c-accent); }
.tgpco2-bf__cic { color: var(--c-text-3); align-self: center; flex: none; display: grid; }
.tgpco2-bf .tgpco2-bf__composer .tgpco2-textarea { flex: 1; min-height: 40px !important; height: 40px; max-height: 220px; padding: 10px 4px !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; resize: none; line-height: 1.4 !important; font-size: 14px !important; }
.tgpco2-bf .tgpco2-bf__composer .tgpco2-btn { flex: none; border-radius: 10px !important; padding: 9px 14px !important; }
@media (max-width: 720px) {
  .tgpco2-bf__quote { font-size: 17px; padding-left: 26px; } .tgpco2-bf__quote::before { font-size: 40px; top: -4px; }
  .tgpco2-bf__strip { display: grid; grid-template-columns: 1fr 1fr; }
  .tgpco2-bf__cell { margin-right: 0; padding: 10px 12px 10px 0; border-right: 0; border-bottom: 1px solid var(--c-border); }
  .tgpco2-bf__cell:nth-child(odd) { border-right: 1px solid var(--c-border); padding-right: 12px; } .tgpco2-bf__cell:nth-child(even) { padding-left: 12px; }
  .tgpco2-bf__cell:nth-last-child(-n+2) { border-bottom: 0; } .tgpco2-bf__cell span { font-size: 15px; }
  .tgpco2-bf__lines { grid-template-columns: 1fr; row-gap: 4px; } .tgpco2-bf__lines dd { margin-bottom: 8px; }
  .tgpco2-bf__composer { padding-left: 10px; } .tgpco2-bf__cic { display: none; } .tgpco2-bf .tgpco2-bf__composer .tgpco2-btn .tgpco2-btn__label { display: none; }
}
.tgpco2-bf__notes { list-style: none; margin: 14px 0 0 34px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tgpco2-bf__notes li { position: relative; padding-left: 14px; border-left: 2px solid var(--c-border-strong); }
.tgpco2-bf__notes li span { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; margin-bottom: 2px; }
.tgpco2-bf__notes li p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--c-text); white-space: pre-wrap; word-break: break-word; }
@media (max-width: 720px) { .tgpco2-bf__notes { margin-left: 26px; } }
/* v2.33 — late orders */
.tgpco2-step.is-late .tgpco2-step__bar { background: var(--c-red); }
.tgpco2-step.is-late .tgpco2-step__bar::after { display: none; }
.tgpco2-step.is-late .tgpco2-step__label { color: var(--c-red-text); }
.tgpco2-step__late { font-style: normal; font-weight: 500; font-size: 11px; color: var(--c-red-text); opacity: 0.9; white-space: nowrap; }
.tgpco2-bf__notes li span time { text-transform: none; letter-spacing: 0; font-size: 11px; }
/* v2.34 — tips */
.tgpco2-tipgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tgpco2 .tgpco2-tipgrid button.tgpco2-tip { display: inline-flex !important; align-items: center; justify-content: center; padding: 14px 6px !important; border-radius: 12px !important; border: 1px solid var(--c-border-strong) !important; background: var(--c-surface-2) !important; color: var(--c-text) !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; font-family: var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; font-variant-numeric: tabular-nums; }
.tgpco2 .tgpco2-tipgrid button.tgpco2-tip:hover { border-color: var(--c-text-3) !important; }
.tgpco2 .tgpco2-tipgrid button.tgpco2-tip.is-on { border-color: var(--c-accent) !important; background: var(--c-accent-soft) !important; color: #fff !important; }
.tgpco2-tipline { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--c-accent-soft); border: 1px solid rgba(124, 92, 255, 0.3); font-size: 13.5px; color: var(--c-text-2); }
.tgpco2-tipline .tgpco2-ic { color: var(--c-accent-text); flex: none; }
.tgpco2-tipline b { color: #fff; }
@media (max-width: 720px) { .tgpco2-tipgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* v2.35 — follow producer / save service in the order header */
.tgpco2-order__hact { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tgpco2 .tgpco2-follow.is-on, .tgpco2 .tgpco2-savesvc.is-on { background: var(--c-accent-soft) !important; border-color: rgba(124, 92, 255, 0.4) !important; color: #fff !important; }
.tgpco2 .tgpco2-follow.is-on .tgpco2-ic, .tgpco2 .tgpco2-savesvc.is-on .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2 .tgpco2-savesvc.is-on .tgpco2-ic { fill: currentColor; }
@media (max-width: 720px) { .tgpco2-order__hact { justify-content: flex-start; } .tgpco2-order__hact .tgpco2-btn { flex: 1 1 auto; justify-content: center; } }
/* v2.36 — mobile modals: footer always reachable (dynamic viewport + safe area), vendor status row scrolls, voice preview, bottom actions */
.tgpco2-order__ghost { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.tgpco2-rec--preview { gap: 8px; }
.tgpco2-rec--preview .tgpco2-voice { flex: 1 1 auto; min-width: 0; }
.tgpco2-rec--preview .tgpco2-voice [data-time] { white-space: nowrap; flex: none; margin-right: 4px; }
.tgpco2-rec--preview .tgpco2-btn { flex: none; }
@media (max-width: 720px) {
  .tgpco2-modal__panel { display: flex; flex-direction: column; max-height: 94vh; max-height: calc(100dvh - 10px); }
  .tgpco2-modal__head { flex: none; }
  .tgpco2-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .tgpco2-modal__foot { flex: none; position: sticky; bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .tgpco2-modal--wizard .tgpco2-modal__panel { height: 100vh; height: 100dvh; max-height: 100dvh; }
  .tgpco2-wiz__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  /* Safari does not resolve `height: 100%` on a child of an auto-sized grid row, so the wizard grew to its
     content and pushed the Back / Continue bar below the panel's clip. On phones the wizard is a flex column
     with a definite height: the body scrolls, the footer stays in view. */
  .tgpco2-wiz, .tgpco2-wiz--svc, .tgpco2-wiz--rfq { display: flex; flex-direction: column; height: 100%; max-height: 100%; min-height: 0; }
  .tgpco2-wiz__main { flex: 1 1 auto; min-height: 0; height: auto; display: flex; flex-direction: column; }
  .tgpco2-wiz__head, .tgpco2-wiz__progress, .tgpco2-wiz__stepname { flex: none; }
  .tgpco2-wiz__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .tgpco2-wiz__foot { flex: none; position: sticky; bottom: 0; }
  .tgpco2-vd2__status { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px 6px; }
  .tgpco2-vd2__status::-webkit-scrollbar { display: none; }
  .tgpco2-vd2__status > * { flex: none; }
  .tgpco2-order__ghost { justify-content: center; }
  .tgpco2-rec--preview .tgpco2-voice { min-width: 0; }
  .tgpco2-rec--preview .tgpco2-voice__bars { min-width: 60px; }
}

@media (max-width: 720px) {
  .tgpco2-vd2__head, .tgpco2-vd2__head-main { min-width: 0; max-width: 100%; }
  .tgpco2-vd2__status { display: flex; width: auto; max-width: calc(100% + 32px); box-sizing: border-box; }
  .tgpco2-vd { overflow-x: hidden; }
  .tgpco2-vd .tgpco2-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .tgpco2-vd .tgpco2-tabs::-webkit-scrollbar { display: none; }
  .tgpco2-vd .tgpco2-tabs .tgpco2-tab { flex: none; white-space: nowrap; }
}
/* v2.37 — list deadline chips, receipts, saved services */
.tgpco2-vo__due { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--c-surface-3); color: var(--c-text-2); white-space: nowrap; }
.tgpco2-vo__due.is-soon { background: var(--c-amber-soft); color: var(--c-amber-text); }
.tgpco2-vo__due.is-late { background: var(--c-red-soft); color: var(--c-red-text); }
.tgpco2-hist__row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.tgpco2 a.tgpco2-hist__rcpt { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11.5px; color: var(--c-text-3); text-decoration: none; }
.tgpco2 a.tgpco2-hist__rcpt:hover { color: var(--c-accent-text); }
.tgpco2-mo__saved { margin-top: 4px; }
/* v2.38 — upsells, reply-time facts, includes, translation, templates */
.tgpco2-ups { margin-top: 4px; }
.tgpco2 a.tgpco2-ups__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 8px; border-radius: 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text); text-decoration: none; }
.tgpco2 a.tgpco2-ups__row:hover { border-color: var(--c-border-strong); background: var(--c-surface-3); }
.tgpco2-ups__txt { min-width: 0; } .tgpco2-ups__txt b { display: block; font-size: 14px; } .tgpco2-ups__txt small { display: block; font-size: 12.5px; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-ups__price { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--c-text); white-space: nowrap; } .tgpco2-ups__price s { color: var(--c-text-3); font-weight: 400; } .tgpco2-ups__price .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2-svc__facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 6px; font-size: 11.5px; color: var(--c-text-3); }
.tgpco2-svc__facts span { display: inline-flex; align-items: center; gap: 4px; }
.tgpco2-svc__reply .tgpco2-ic { color: var(--c-green-text); } .tgpco2-svc__inc .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2 button.tgpco2-msg__tr { display: inline-flex !important; align-items: center; gap: 4px; margin: 4px 0 0; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--c-text-3) !important; font-size: 11px !important; cursor: pointer; font-family: var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; min-height: 0 !important; height: auto !important; box-shadow: none !important; }
.tgpco2 button.tgpco2-msg__tr:hover { color: var(--c-accent-text) !important; }
.tgpco2-msg__trx { margin-top: 6px; padding: 8px 10px; border-left: 2px solid var(--c-accent); background: var(--c-surface-2); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--c-text-2); white-space: pre-wrap; }
.tgpco2-qtpl { display: inline-flex; gap: 6px; margin-left: 8px; }
.tgpco2 .tgpco2-chips .tgpco2-chip.is-on { background: var(--c-accent-soft) !important; border-color: rgba(124, 92, 255, 0.4) !important; color: #fff !important; }
/* v2.38 — producer insights */
.tgpco2-ins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tgpco2-ins--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tgpco2-ins > div { padding: 14px 16px; border-radius: 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.tgpco2-ins > div b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); font-variant-numeric: tabular-nums; } .tgpco2-ins > div b small { font-size: 13px; color: var(--c-text-3); font-weight: 500; }
.tgpco2-ins > div span { display: block; font-size: 12px; color: var(--c-text-3); margin-top: 3px; }
.tgpco2-ins__disc { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--c-accent-soft); border: 1px solid rgba(124, 92, 255, 0.3); }
.tgpco2-ins__disc b { display: block; font-size: 14px; color: var(--c-text); } .tgpco2-ins__disc span { display: block; font-size: 12.5px; color: var(--c-text-2); margin-top: 2px; }
.tgpco2-ins__tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tgpco2-ins__tbl th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); padding: 0 8px 8px 0; border-bottom: 1px solid var(--c-border); }
.tgpco2-ins__tbl td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--c-border); color: var(--c-text-2); } .tgpco2-ins__tbl td:first-child { color: var(--c-text); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgpco2-ins__tbl th:not(:first-child), .tgpco2-ins__tbl td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .tgpco2-ins, .tgpco2-ins--4 { grid-template-columns: 1fr 1fr; } .tgpco2-ins__disc { flex-direction: column; align-items: flex-start; } }
/* v2.40 — calmer service card */
.tgpco2-svc__body { gap: 8px; }
.tgpco2-svc__who { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.tgpco2-svc__who .tgpco2-svc__vendor { min-width: 0; flex: 1 1 auto; }
.tgpco2-svc__stars { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--c-amber-text); font-size: 12.5px; font-weight: 600; }
.tgpco2-svc__stars .tgpco2-ic { fill: currentColor; width: 12px; height: 12px; }
.tgpco2-svc__stars small { color: var(--c-text-2); font-size: 12.5px; margin-left: 0; font-weight: 600; }
.tgpco2-svc__merits { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; }
.tgpco2-svc__merits .tgpco2-svc__merit { display: inline-flex; align-items: center; gap: 4px; }
.tgpco2-svc__facts { margin: 0; font-size: 11.5px; gap: 4px 12px; }
.tgpco2-svc__desc { -webkit-line-clamp: 2; }
.tgpco2-svc__detail { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--c-text-3); line-height: 1.4; min-width: 0; }
.tgpco2-svc__detail > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tgpco2-svc__gen { color: var(--c-text-2); } .tgpco2-svc__gen em { font-style: normal; color: var(--c-text-3); }
.tgpco2-svc__like { color: var(--c-text-3); }
.tgpco2-svc__pricew { display: flex; flex-direction: column; gap: 3px; }
.tgpco2-svc__pricew small { font-size: 11px; color: var(--c-text-3); }
.tgpco2-svc__bottom { align-items: center; padding-top: 10px; border-top: 1px solid var(--c-border); }
.tgpco2-svc__days { background: transparent; border: 0; padding: 0 !important; color: var(--c-text-2); font-size: 12px; }
/* v2.40 — open briefs (producer) */
.tgpco2-rfq2__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tgpco2-rfq2__head b { display: block; font-size: 16px; color: var(--c-text); margin-bottom: 3px; } .tgpco2-rfq2__head span { display: block; font-size: 13.5px; color: var(--c-text-3); max-width: 640px; }
.tgpco2-rfq2 { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; overflow: hidden; }
.tgpco2-rfq2 + .tgpco2-rfq2 { margin-top: 12px; }
.tgpco2-rfq2.is-match { border-color: rgba(124, 92, 255, 0.35); }
.tgpco2-rfq2__main { padding: 18px 20px 16px; min-width: 0; }
.tgpco2-rfq2__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--c-text-3); }
.tgpco2-rfq2__type { padding: 3px 8px; border-radius: 6px; background: var(--c-surface-3); color: var(--c-text-2); font-weight: 600; font-size: 11.5px; }
.tgpco2-rfq2__match { display: inline-flex; align-items: center; gap: 4px; color: var(--c-accent-text); font-weight: 600; }
.tgpco2-rfq2__genres { color: var(--c-text-2); } .tgpco2-rfq2__age { margin-left: auto; }
.tgpco2-rfq2__title { margin: 10px 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.tgpco2-rfq2__brief { margin: 0; font-size: 14px; line-height: 1.6; color: var(--c-text-2); white-space: pre-wrap; word-break: break-word; }
.tgpco2-rfq2__brief[data-rfq-clamp]:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tgpco2 button.tgpco2-rfq2__more { background: transparent !important; border: 0 !important; padding: 0 !important; margin-top: 6px; color: var(--c-accent-text) !important; font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer; font-family: var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; min-height: 0 !important; height: auto !important; box-shadow: none !important; }
.tgpco2-rfq2__refs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.tgpco2-rfq2__refs a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--c-text-2); } .tgpco2-rfq2__refs a .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2-rfq2__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border); font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-rfq2__foot b { color: var(--c-text); font-weight: 600; } .tgpco2-rfq2__foot .is-on { color: var(--c-green-text); }
.tgpco2-rfq2__side { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--c-surface-2); border-left: 1px solid var(--c-border); }
.tgpco2-rfq2__budget span, .tgpco2-rfq2__mine > span { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; }
.tgpco2-rfq2__budget b, .tgpco2-rfq2__mine > b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin-top: 3px; font-variant-numeric: tabular-nums; }
.tgpco2-rfq2__budget small, .tgpco2-rfq2__mine > small { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--c-text-3); }
.tgpco2 .tgpco2-rfq2__cta { width: 100% !important; justify-content: center; margin-top: auto; }
.tgpco2-rfq2__hint { font-size: 11.5px; color: var(--c-text-3); text-align: center; }
.tgpco2-rfq2__mine { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-border); }
.tgpco2-rfq2__mine.is-declined > b { color: var(--c-text-3); } .tgpco2-rfq2__mine.is-ordered > small, .tgpco2-rfq2__mine.is-accepted > small { color: var(--c-green-text); }
.tgpco2-rfq2__mact { display: flex; gap: 6px; margin-top: 10px; } .tgpco2 .tgpco2-rfq2__mact .tgpco2-btn { flex: 1; justify-content: center; }
@media (max-width: 720px) { .tgpco2-rfq2 { grid-template-columns: 1fr; } .tgpco2-rfq2__side { border-left: 0; border-top: 1px solid var(--c-border); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 14px 16px; } .tgpco2-rfq2__mine { margin: 0; padding: 0; border: 0; } .tgpco2 .tgpco2-rfq2__cta { width: auto !important; margin: 0; } .tgpco2-rfq2__hint { text-align: left; flex-basis: 100%; } .tgpco2-rfq2__main { padding: 14px 16px; } .tgpco2-rfq2__age { margin-left: 0; } }

/* v2.40 — insights: funnel + meters instead of tiles/tables */
.tgpco2-ins2__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tgpco2-ins2__head h2 { margin: 4px 0 0; font-family: 'Inter Tight', var(--font); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.tgpco2-ins2__head h2 small { font-size: 14px; font-weight: 500; color: var(--c-text-3); letter-spacing: 0; margin-left: 4px; }
.tgpco2-ins2__kpis { display: flex; gap: 0; }
.tgpco2-ins2__kpis > div { padding: 0 18px; border-left: 1px solid var(--c-border); } .tgpco2-ins2__kpis > div:first-child { border-left: 0; padding-left: 0; }
.tgpco2-ins2__kpis b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); font-variant-numeric: tabular-nums; } .tgpco2-ins2__kpis b small { font-size: 12px; color: var(--c-text-3); font-weight: 500; }
.tgpco2-ins2__kpis span { display: block; font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-ins2__funnel { display: flex; align-items: stretch; gap: 10px; }
.tgpco2-ins2__step { flex: 1 1 0; min-width: 0; padding: 14px 14px 12px; border-radius: 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); position: relative; overflow: hidden; }
.tgpco2-ins2__step b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.tgpco2-ins2__step span { display: block; font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-ins2__step i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w, 0%); background: var(--c-accent); border-radius: 0 2px 2px 0; }
.tgpco2-ins2__step.is-last i { background: var(--c-green); }
.tgpco2-ins2__arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--c-text-3); font-size: 11px; flex: none; width: 34px; }
.tgpco2-ins2__arrow span { font-weight: 600; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.tgpco2-ins2__note { margin: 14px 0 0; font-size: 13px; color: var(--c-text-3); line-height: 1.5; }
.tgpco2-ins2__meters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.tgpco2-ins2__mlab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--c-text-2); margin-bottom: 8px; }
.tgpco2-ins2__mlab b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.tgpco2-ins2__bar { height: 6px; border-radius: 3px; background: var(--c-surface-3); overflow: hidden; }
.tgpco2-ins2__bar i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--c-accent), #a58cff); border-radius: 3px; transition: width 0.6s var(--ease); }
.tgpco2-ins2__meter small { display: block; margin-top: 6px; font-size: 11px; color: var(--c-text-3); }
.tgpco2-ins2__disc { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.tgpco2-ins2__disc b { display: block; font-size: 14px; color: var(--c-text); } .tgpco2-ins2__disc span { display: block; font-size: 12.5px; color: var(--c-text-3); margin-top: 2px; max-width: 560px; }
.tgpco2-ins2__svcs { display: flex; flex-direction: column; gap: 14px; }
.tgpco2-ins2__svc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tgpco2-ins2__svcname { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; } .tgpco2-ins2__svcname b { color: var(--c-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .tgpco2-ins2__svcname span { color: var(--c-text-3); white-space: nowrap; }
.tgpco2-ins2__svcnums { display: flex; gap: 16px; font-size: 12px; color: var(--c-text-3); } .tgpco2-ins2__svcnums b { color: var(--c-text-2); font-weight: 600; }
@media (max-width: 720px) { .tgpco2-ins2__head h2 { font-size: 26px; } .tgpco2-ins2__kpis { width: 100%; justify-content: space-between; } .tgpco2-ins2__kpis > div { padding: 0 10px; } .tgpco2-ins2__funnel { flex-direction: column; gap: 6px; } .tgpco2-ins2__arrow { flex-direction: row; width: auto; justify-content: flex-start; padding-left: 14px; gap: 6px; } .tgpco2-ins2__arrow .tgpco2-ic { transform: rotate(90deg); } .tgpco2-ins2__meters { grid-template-columns: 1fr; } .tgpco2-ins2__disc { flex-direction: column; align-items: flex-start; } }
.tgpco2-svc__body > .tgpco2-svc__merits { flex: 0 0 auto; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; }
.tgpco2-svc__body > .tgpco2-svc__merits::before { content: none; }
.tgpco2-svc__ret { color: var(--c-green-text) !important; font-weight: 600; }
.tgpco2-svc__ret.is-mine { color: #fff !important; background: var(--c-green-soft); padding: 2px 7px; border-radius: 6px; }


/* v2.40 returning-client discount lines */
.tgpco2-co__lines > div.is-disc b, .tgpco2-totals__row--disc b { color: var(--c-green-text); }

/* v2.41 service card v6 ("D, dark"): inset artwork tile, white craft chip + heart, solid/outlined badge tags, icon spec grid, white hire pill */
.tgpco2-svc--v6 { flex-direction: column; gap: 0; padding: 10px; border-radius: 20px; background: #17171c; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 24px 40px -30px rgba(0, 0, 0, 0.9); overflow: visible; margin: 0 !important; transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s; }
.tgpco2-svc--v6:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.95); }
.tgpco2-svc--v6 .tgpco2-svc__media { border-radius: 14px; aspect-ratio: 16 / 10; overflow: hidden; }
.tgpco2-svc--v6 .tgpco2-svc__type { left: 10px; right: auto; top: 10px; background: rgba(10, 10, 14, 0.62); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; padding: 6px 9px; box-shadow: none; }
.tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__save { left: auto; right: 8px; top: 8px; width: 32px !important; height: 32px !important; background: rgba(10, 10, 14, 0.62) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__save:hover { background: rgba(10, 10, 14, 0.85) !important; }
.tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__save.is-saved { color: #ff3d71 !important; }
.tgpco2-svc__body--v6 { padding: 14px 8px 6px; gap: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.tgpco2-svc__body--v6 .tgpco2-svc__title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; color: #fff; -webkit-line-clamp: 2; }
.tgpco2-svc__body--v6 .tgpco2-svc__who { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; min-width: 0; }
.tgpco2-svc__body--v6 .tgpco2-svc__vendor { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; color: var(--c-text-2); }
.tgpco2-svc__body--v6 .tgpco2-avatar--sm { width: 22px; height: 22px; font-size: 8px; flex: none; }
.tgpco2-svc__body--v6 .tgpco2-svc__vname { font-weight: 700; font-size: 13px; color: #fff; }
.tgpco2-svc__body--v6 .tgpco2-svc__stars { flex: none; gap: 3px; margin-left: auto; }
.tgpco2-svc__body--v6 .tgpco2-svc__stars .tgpco2-ic { width: 12px; height: 12px; color: var(--c-amber-text); fill: currentColor; }
.tgpco2-svc__body--v6 .tgpco2-svc__stars small { color: #fff; font-size: 12.5px; margin: 0; font-weight: 700; }
.tgpco2-svc__body--v6 .tgpco2-svc__stars small i { font-style: normal; color: var(--c-text-3); font-weight: 400; }
.tgpco2-svc__bdg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.tgpco2-svc__bg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 8px; line-height: 1.2; white-space: nowrap; cursor: default; }
.tgpco2-svc__bg, .tgpco2-svc__bg.is-solid, .tgpco2-svc__bg.is-outline { background: rgba(255, 255, 255, 0.055); color: #e6e6ec; border: 1px solid rgba(255, 255, 255, 0.07); font-weight: 600; padding: 4px 9px; }
.tgpco2-svc__bg.is-more { color: var(--c-text-3); }
.tgpco2-svc__bg .tgpco2-ic { width: 12px; height: 12px; flex: none; }
.tgpco2-svc__bg--fast_responder .tgpco2-ic { color: #ffd166; } .tgpco2-svc__bg--on_time .tgpco2-ic, .tgpco2-svc__bg--demo_24h .tgpco2-ic { color: #7fd8ff; } .tgpco2-svc__bg--repeat_clients .tgpco2-ic { color: #f5a3c7; } .tgpco2-svc__bg--stems .tgpco2-ic { color: #b7a6ff; } .tgpco2-svc__bg--unlimited_revisions .tgpco2-ic, .tgpco2-svc__bg--free_revisions .tgpco2-ic { color: #9fe3c1; } .tgpco2-svc__bg--speaks_lang .tgpco2-ic { color: #a9c7ff; } .tgpco2-svc__bg--rising .tgpco2-ic { color: #ffb38a; } .tgpco2-svc__bg--delivered_25 .tgpco2-ic, .tgpco2-svc__bg--delivered_100 .tgpco2-ic, .tgpco2-svc__bg--delivered_250 .tgpco2-ic { color: #d9d3ff; }
.tgpco2-svc__bg--you_ordered .tgpco2-ic, .tgpco2-svc__bg--you_bought .tgpco2-ic { color: #cbbcff; } .tgpco2-svc__bg--top_rated .tgpco2-ic { color: #e5b85a; } .tgpco2-svc__bg--verified .tgpco2-ic { color: #6ee7a1; } .tgpco2-svc__bg--label_released .tgpco2-ic { color: #8ab4f8; } .tgpco2-svc__bg--fast_responder .tgpco2-ic, .tgpco2-svc__bg--demo_24h .tgpco2-ic { color: #fde68a; } .tgpco2-svc__bg--repeat_clients .tgpco2-ic { color: #5eead4; } .tgpco2-svc__bg--rising .tgpco2-ic { color: #c9a5ff; } .tgpco2-svc__bg--on_time .tgpco2-ic { color: #7dd3fc; }
.tgpco2-svc__body--v6 .tgpco2-svc__descw { margin-top: 12px; }
.tgpco2-svc__body--v6 .tgpco2-svc__desc { font-size: 13px; line-height: 1.55; color: #a9a9b4; -webkit-line-clamp: 2; }
.tgpco2-svc__gl { margin-top: 8px; font-size: 12px; color: var(--c-text-3); line-height: 1.5; min-width: 0; }
.tgpco2-svc__gl > span { cursor: default; }
.tgpco2-svc__sep { font-style: normal; color: var(--c-text-3); margin: 0 5px; }
.tgpco2-svc__gl b { color: #d0d0d8; font-weight: 600; }
/* Card facts: one quiet line, not a spec sheet. Three at most — how fast the
   demo comes, how many revisions, and whichever of "starts on" or "replies in"
   actually tells the buyer something. Everything else is in the order modal. */
.tgpco2-svc__facts { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--c-border); display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
.tgpco2-svc__facts > span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--c-text-2); line-height: 1.3; white-space: nowrap; cursor: default; }
.tgpco2-svc__facts > span > .tgpco2-ic { width: 12px; height: 12px; flex: none; color: var(--c-text-3); }
.tgpco2-svc__facts i.tgpco2-svc__fast { font-style: normal; font-size: 10px; }
.tgpco2-svc__cost small.is-bundle { color: var(--c-green-text); font-weight: 600; }
@media (max-width: 560px) { .tgpco2-svc__facts > span { padding: 0 8px; font-size: 11.5px; } }
.tgpco2-svc__facts > span[data-tip]::after { left: 0; right: auto; }
.tgpco2-svc__bar { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tgpco2-svc__body--v6 .tgpco2-svc__bar { margin-top: 16px; }
.tgpco2-svc__body--v6 .tgpco2-svc__facts + .tgpco2-svc__bar { margin-top: auto; padding-top: 14px; }
.tgpco2-svc__body--v6 .tgpco2-svc__facts { margin-bottom: 16px; }
/* A card also has to survive a narrow column. My Account is much narrower than
   the marketplace grid, and a viewport media query cannot see that — the window
   is wide, the column is not — so inside the account the price always sits
   above a full-width button rather than fighting it for the same row. */
.tgpco2-accountwrap .tgpco2-svc__bar { flex-direction: column; align-items: stretch; gap: 10px; }
.tgpco2-accountwrap .tgpco2-svc__cost { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tgpco2-accountwrap .tgpco2-svc__cost small { text-align: right; }
.tgpco2 .tgpco2-accountwrap .tgpco2-svc__hire { width: 100% !important; }
.tgpco2-svc__cost { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tgpco2-svc__cost b.tgpco2-svc__price { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #fff; white-space: nowrap; cursor: default; }
.tgpco2-svc__cost b.tgpco2-svc__price s { font-size: 12px; font-weight: 500; color: var(--c-text-3); margin-left: 6px; letter-spacing: 0; text-decoration: line-through; }
.tgpco2-svc__cost small { font-size: 11.5px; color: var(--c-text-3); line-height: 1.35; font-weight: 500; }
.tgpco2-svc__cost small s { color: var(--c-text-3); font-weight: 500; margin-right: 5px; }
.tgpco2-svc__cost small.is-ret { color: var(--c-green-text); }
.tgpco2-svc__cost small.is-mine { color: var(--c-green-text); font-weight: 700; }
.tgpco2-svc__cost [data-tip]::after { left: 0; right: auto; }
.tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__hire { width: auto; margin: 0; flex: none; padding: 11px 18px !important; font-size: 13px !important; font-weight: 700; border-radius: 999px !important; background: #fff !important; color: #0b0b0f !important; transition: background 0.15s; }
.tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__hire:hover { background: #e9e5ff !important; color: #0b0b0f !important; }
.tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__hire.is-full { background: rgba(255, 255, 255, 0.06) !important; color: var(--c-text-2) !important; border: 1px dashed rgba(255, 255, 255, 0.22) !important; }
.tgpco2-svc--v6 .tgpco2-svc__vendor:hover .tgpco2-svc__vname { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) {
  .tgpco2-svc__body--v6 .tgpco2-svc__title { font-size: 17px; }
  .tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__hire { padding: 10px 16px !important; }
}
/* v2.41 hire button loading: keep the pill size, centre a dark spinner over the hidden label */
.tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__hire { position: relative; }
.tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__hire.is-loading { opacity: 1; background: #fff !important; color: #0b0b0f !important; }
.tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__hire.is-loading .tgpco2-btn__label { visibility: hidden; opacity: 1; }
.tgpco2 .tgpco2-svc--v6 button.tgpco2-svc__hire .tgpco2-spin { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(11, 11, 15, 0.18); border-top-color: #0b0b0f; }

/* v2.41 marketplace: empty AI search feedback + filter refresh animation */
.tgpco2-ss-msg { max-height: 0; overflow: hidden; opacity: 0; margin: 0 auto; max-width: 720px; text-align: center; font-size: 13px; color: #fca5a5; transition: max-height 0.25s, opacity 0.25s, margin 0.25s; }
.tgpco2-ss-msg.is-on { max-height: 40px; opacity: 1; margin-top: 10px; }
.is-shake { animation: tgpco2-shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes tgpco2-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.tgpco2-cards.is-refresh .tgpco2-svc { animation: tgpco2-fadeup 0.38s cubic-bezier(.2,.7,.2,1) both; }
.tgpco2-cards.is-refresh .tgpco2-svc:nth-child(2) { animation-delay: 0.04s; } .tgpco2-cards.is-refresh .tgpco2-svc:nth-child(3) { animation-delay: 0.08s; } .tgpco2-cards.is-refresh .tgpco2-svc:nth-child(4) { animation-delay: 0.12s; } .tgpco2-cards.is-refresh .tgpco2-svc:nth-child(5) { animation-delay: 0.16s; } .tgpco2-cards.is-refresh .tgpco2-svc:nth-child(6) { animation-delay: 0.2s; } .tgpco2-cards.is-refresh .tgpco2-svc:nth-child(7) { animation-delay: 0.24s; } .tgpco2-cards.is-refresh .tgpco2-svc:nth-child(8) { animation-delay: 0.28s; }
@keyframes tgpco2-fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tgpco2-cards.is-refresh .tgpco2-svc, .is-shake { animation: none; } }

/* ================= v2.5 ================= */
/* Pre-delivery checklist */
.tgpco2-chk { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface-2); }
.tgpco2-chk.is-done { border-color: rgba(110, 231, 161, 0.35); background: rgba(110, 231, 161, 0.05); }
.tgpco2-chk__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tgpco2-chk__head b { font-size: 14px; }
.tgpco2-chk__count { font-size: 12px; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.tgpco2-chk.is-done .tgpco2-chk__count { color: var(--c-green-text); }
.tgpco2-chk__why { margin: 6px 0 12px; font-size: 12.5px; color: var(--c-text-3); line-height: 1.5; }
.tgpco2-chk__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tgpco2-chk__item { display: flex; align-items: flex-start; gap: 8px; border-radius: 10px; padding: 7px 8px; transition: background 0.15s; }
.tgpco2-chk__item:hover { background: rgba(255, 255, 255, 0.03); }
.tgpco2-chk__item label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; flex: 1; min-width: 0; }
.tgpco2-chk__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.tgpco2-chk__box { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--c-border); display: grid; place-items: center; color: transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.tgpco2-chk__item.is-on .tgpco2-chk__box { background: var(--c-green); border-color: var(--c-green); color: #06210f; }
.tgpco2-chk__item input:focus-visible + .tgpco2-chk__box { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tgpco2-chk__text { min-width: 0; }
.tgpco2-chk__text b { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; }
.tgpco2-chk__item.is-on .tgpco2-chk__text b { color: var(--c-text-2); }
.tgpco2-chk__text small { display: block; font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; line-height: 1.4; }
.tgpco2-chk__auto { flex: none; color: var(--c-amber-text); opacity: 0.7; cursor: default; margin-top: 3px; }
.tgpco2 .is-blocked { opacity: 0.5; }

/* Queue position */
.tgpco2-queue { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface-2); }
.tgpco2-queue > .tgpco2-ic { color: var(--c-accent-text); flex: none; margin-top: 2px; }
.tgpco2-queue b { display: block; font-size: 13.5px; }
.tgpco2-queue span { display: block; font-size: 12.5px; color: var(--c-text-3); margin-top: 3px; line-height: 1.5; }

/* Multi-track package */
.tgpco2-pkg { margin: 12px 0 16px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface-2); }
.tgpco2-pkg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.tgpco2-pkg__head span { font-size: 12px; color: var(--c-text-3); }
.tgpco2-pkg__bar { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); margin: 9px 0 12px; overflow: hidden; }
.tgpco2-pkg__bar i { display: block; height: 100%; background: var(--c-green); border-radius: 3px; transition: width 0.4s var(--ease); }
.tgpco2-pkg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tgpco2-pkg__list li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 4px 0; }
.tgpco2-pkg__n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, 0.07); color: var(--c-text-3); }
.tgpco2-pkg__list li.is-approved .tgpco2-pkg__n { background: var(--c-green); color: #06210f; }
.tgpco2-pkg__list li.is-current .tgpco2-pkg__n { background: var(--c-accent); color: #fff; }
.tgpco2-pkg__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgpco2-pkg__list li.is-approved .tgpco2-pkg__t { color: var(--c-text-3); }
.tgpco2-pkg__s { flex: none; font-size: 11.5px; color: var(--c-text-3); }
.tgpco2-pkg__list li.is-current .tgpco2-pkg__s { color: var(--c-accent-text); }
.tgpco2 button.tgpco2-pkg__rename { flex: none; background: none; border: 0; padding: 2px; color: var(--c-text-3); cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.tgpco2-pkg__list li:hover button.tgpco2-pkg__rename, .tgpco2 button.tgpco2-pkg__rename:focus-visible { opacity: 1; }

/* Timestamped notes */
.tgpco2-notes__empty { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--c-text-3); padding: 12px 12px; border-radius: 10px; border: 1px dashed var(--c-border-strong); }
.tgpco2-notes__empty svg { flex: none; color: var(--c-amber); opacity: 0.8; }
.tgpco2-note { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); transition: border-color 0.2s, background 0.2s; }
.tgpco2-note:hover { border-color: var(--c-border-strong); }
.tgpco2-note.is-flash { border-color: var(--c-amber); background: rgba(245, 158, 11, 0.08); }
.tgpco2-note.is-done { opacity: 0.72; }
.tgpco2-note.is-done .tgpco2-note__x { color: var(--c-text-3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.25); }
.tgpco2 button.tgpco2-note__t { flex: none; display: inline-flex !important; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.06) !important; border: 0 !important; border-radius: 8px !important; padding: 4px 8px 4px 4px !important; font-size: 12px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; color: var(--c-amber-text) !important; cursor: pointer; margin-top: 1px; }
.tgpco2 button.tgpco2-note__t:hover { background: rgba(255, 255, 255, 0.12) !important; }
.tgpco2 button.tgpco2-note__t i { width: 18px; height: 18px; border-radius: 50%; background: var(--c-amber); color: #0d0d0d; font-style: normal; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.tgpco2-note.is-done button.tgpco2-note__t i { background: var(--c-green); color: #052; }
.tgpco2-note.is-from-producer button.tgpco2-note__t i { background: var(--c-accent); color: #fff; }
.tgpco2-note__b { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.tgpco2-note__x { color: var(--c-text); word-break: break-word; }
.tgpco2-note__meta { font-size: 11px; color: var(--c-text-3); } .tgpco2-note__meta b { color: var(--c-green-text); font-weight: 600; }
.tgpco2-note__reply { display: inline-flex; align-items: flex-start; gap: 5px; font-style: normal; font-size: 12.5px; color: var(--c-green-text); }
.tgpco2-note__reply svg { flex: none; margin-top: 3px; opacity: 0.7; }
.tgpco2-note.is-from-producer .tgpco2-note__x { color: var(--c-accent-text); }
.tgpco2-note__acts { flex: none; display: flex; gap: 2px; opacity: 0.55; transition: opacity 0.15s; }
.tgpco2-note:hover .tgpco2-note__acts, .tgpco2-note:focus-within .tgpco2-note__acts { opacity: 1; }
.tgpco2 button.tgpco2-note__act { width: 28px; height: 28px; display: grid !important; place-items: center; background: none !important; border: 0 !important; border-radius: 8px !important; padding: 0 !important; color: var(--c-text-3) !important; cursor: pointer; }
.tgpco2 button.tgpco2-note__act:hover { background: var(--c-surface-3) !important; color: var(--c-text) !important; }
.tgpco2 button.tgpco2-note__act.is-on { color: var(--c-green-text) !important; }
.tgpco2 button.tgpco2-note__act.is-danger:hover { color: var(--c-red-text, #f87171) !important; background: rgba(239, 68, 68, 0.12) !important; }
.tgpco2-note.is-editing { border-color: var(--c-amber); }
.tgpco2-note__edit { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tgpco2-note__editrow { display: flex; align-items: center; gap: 6px; } .tgpco2-note__editsp { flex: 1; }
.tgpco2 button.tgpco2-note__chip { display: inline-flex !important; align-items: center; gap: 5px; padding: 4px 9px !important; border-radius: 99px !important; border: 1px dashed var(--c-border-strong) !important; background: none !important; color: var(--c-text-2) !important; font-size: 11.5px !important; font-weight: 600 !important; cursor: pointer; }
.tgpco2 button.tgpco2-note__chip:hover { border-color: var(--c-amber) !important; color: var(--c-text) !important; }
.tgpco2 button.tgpco2-note__chip.is-on { border-style: solid !important; border-color: var(--c-amber) !important; color: var(--c-amber-text) !important; }
@media (max-width: 720px) { .tgpco2-note__acts { opacity: 1; } .tgpco2-demo__bubble { max-width: 86%; } }

.tgpco2-card__head + .tgpco2-pkg { margin-top: 0; }
@media (max-width: 560px) { .tgpco2-pkg__s { display: none; } .tgpco2-chk__item { padding: 9px 6px; } }

/* Wizard: multi-track quantity picker */
.tgpco2-qty { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface-2); }
.tgpco2-qty__lead { margin: 6px 0 12px; font-size: 12.5px; color: var(--c-text-3); line-height: 1.5; }
.tgpco2-qty__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tgpco2 button.tgpco2-qty__opt { position: relative; flex: 1 1 84px; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 8px; border-radius: 12px; border: 1.5px solid var(--c-border); background: var(--c-surface); color: var(--c-text-2); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.tgpco2 button.tgpco2-qty__opt:hover { border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.tgpco2 button.tgpco2-qty__opt.is-on { border-color: var(--c-accent); background: rgba(124, 92, 255, 0.1); color: var(--c-text); }
.tgpco2-qty__opt b { font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--c-text); }
.tgpco2-qty__opt span { font-size: 11px; color: var(--c-text-3); }
.tgpco2-qty__opt small { font-size: 11px; color: var(--c-text-3); margin-top: 3px; }
.tgpco2-qty__off { position: absolute; top: -7px; right: -6px; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: var(--c-green); color: #06210f; }

/* Wizard: guest details */
.tgpco2-guest { margin: 16px 0 4px; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface-2); }
.tgpco2-guest__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.tgpco2-guest__head > .tgpco2-ic { color: var(--c-accent-text); flex: none; margin-top: 2px; }
.tgpco2-guest__head b { display: block; font-size: 13.5px; }
.tgpco2-guest__head span { display: block; font-size: 12.5px; color: var(--c-text-3); margin-top: 3px; line-height: 1.5; }
.tgpco2-guest__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
/* both columns share one label line and one input line, whatever the label holds */
.tgpco2-guest__row .tgpco2-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tgpco2-guest__row .tgpco2-label { min-height: 20px; margin: 0; line-height: 20px; }
.tgpco2-guest__row .tgpco2-label .opt { line-height: 20px; }
.tgpco2-guest__row .tgpco2-input { margin: 0; }
.tgpco2-guest__note { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-size: 12px; line-height: 1.45; }
.tgpco2-guest__note .tgpco2-ic { flex: none; margin-top: 2px; }
.tgpco2-guest__note.is-new { color: var(--c-green-text); }
.tgpco2-guest__note.is-link { color: var(--c-amber-text); }
@media (max-width: 560px) { .tgpco2-guest__row { grid-template-columns: 1fr; } }

/* Producer match quiz */
.tgpco2-quiz { padding: 8px 0 40px; }
.tgpco2-quiz__card { border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-surface); padding: 26px; }
.tgpco2-quiz__dots { display: flex; gap: 6px; margin-bottom: 22px; }
.tgpco2-quiz__dots i, .tgpco2-quiz__dots span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); transition: background 0.3s; }
.tgpco2-quiz__dots .is-done { background: var(--c-green); }
.tgpco2-quiz__dots .is-on { background: var(--c-accent); }
.tgpco2-quiz__step h2 { font-size: clamp(20px, 3vw, 27px); letter-spacing: -0.02em; margin: 0 0 6px; }
.tgpco2-quiz__step > p { color: var(--c-text-3); font-size: 13.5px; margin: 0 0 18px; line-height: 1.55; }
.tgpco2-quiz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tgpco2-quiz__opts--grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tgpco2-quiz__opts:has(.tgpco2-quiz__opt--chip) { display: flex; flex-wrap: wrap; gap: 8px; }
.tgpco2 button.tgpco2-quiz__opt { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.tgpco2 button.tgpco2-quiz__opt:hover { border-color: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }
.tgpco2 button.tgpco2-quiz__opt.is-on { border-color: var(--c-accent); background: rgba(124, 92, 255, 0.12); }
.tgpco2 button.tgpco2-quiz__opt--chip { flex-direction: row; padding: 8px 14px; border-radius: 999px; font-size: 13px; }
.tgpco2-quiz__opt-label { font-size: 14px; font-weight: 600; }
.tgpco2-quiz__opt-sub { font-size: 12px; color: var(--c-text-3); line-height: 1.4; }
.tgpco2-quiz__daw { margin-top: 16px; }
.tgpco2-quiz__daw-label { display: block; font-size: 12.5px; color: var(--c-text-2); margin-bottom: 6px; }
.tgpco2-quiz__nav { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.tgpco2-quiz__spacer { flex: 1; }
.tgpco2-quiz__results { margin-top: 30px; }
.tgpco2-quiz__results-head h2 { font-size: clamp(20px, 3vw, 26px); margin: 0 0 4px; }
.tgpco2-quiz__pick { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-surface); margin-top: 10px; }
.tgpco2-quiz__pick-art { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: block; background: var(--c-surface-3); }
.tgpco2-quiz__pick-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgpco2-quiz__pick-b { flex: 1; min-width: 0; }
.tgpco2-quiz__pick-b b { display: block; font-size: 14.5px; line-height: 1.3; }
.tgpco2-quiz__pick-by { display: block; font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-quiz__pick-by .tgpco2-ic { width: 11px; height: 11px; color: var(--c-amber-text); fill: currentColor; vertical-align: -1px; }
.tgpco2-quiz__pick-why { display: block; font-size: 12.5px; color: var(--c-accent-text); margin-top: 5px; line-height: 1.4; }
.tgpco2-quiz__pick-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.tgpco2-quiz__pick-r b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
@media (max-width: 620px) {
  .tgpco2-quiz__card { padding: 18px 16px; border-radius: 16px; }
  .tgpco2-quiz__opts { grid-template-columns: 1fr; }
  .tgpco2-quiz__pick { flex-wrap: wrap; }
  .tgpco2-quiz__pick-r { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}
/* the shortlist reads best as a list, not a squeezed grid */
.tgpco2-quiz__results [data-quiz-results] { display: block; }
.tgpco2-quiz__pick { flex-wrap: nowrap; }
.tgpco2-quiz__pick-b b { font-size: 15px; }
@media (max-width: 620px) { .tgpco2-quiz__pick { flex-wrap: wrap; } }

/* Service editor: multi-track package tiers */
.tgpco2-pkgcfg .tgpco2-hint { margin: 4px 0 10px; }
.tgpco2-pkgcfg__tiers { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface-2); }
.tgpco2-tier { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-text-2); margin-bottom: 8px; flex-wrap: wrap; }
.tgpco2-tier:last-of-type { margin-bottom: 0; }
.tgpco2-tier .tgpco2-input { width: 72px; }
.tgpco2-tier .tgpco2-input-group { width: 92px; }
@media (max-width: 520px) { .tgpco2-tier { gap: 6px; } .tgpco2-tier .tgpco2-input { width: 64px; } }

/* Producer growth cards */
.tgpco2-grow { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.tgpco2-grow__c { padding: 18px 20px; }
.tgpco2-grow__h { font-size: 17px; margin: 6px 0 6px; letter-spacing: -0.015em; }
.tgpco2-grow__sub { font-size: 12.5px; color: var(--c-text-3); line-height: 1.55; margin: 0 0 14px; }
.tgpco2-grow__score { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 14px; }
.tgpco2-grow__score b { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.tgpco2-grow__score span { font-size: 13px; color: var(--c-text-3); }
.tgpco2-grow__score.is-good b { color: var(--c-green-text); }
.tgpco2-grow__score.is-watch b { color: var(--c-amber-text); }
.tgpco2-grow__score.is-at_risk b { color: #fca5a5; }
.tgpco2-grow__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tgpco2-grow__list li { display: grid; grid-template-columns: 1fr 76px 30px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--c-text-2); }
.tgpco2-grow__list i { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); position: relative; overflow: hidden; }
.tgpco2-grow__list i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 3px; background: var(--c-text-3); }
.tgpco2-grow__list i.is-good::after { background: var(--c-green); }
.tgpco2-grow__list i.is-mid::after { background: var(--c-amber-text); }
.tgpco2-grow__list i.is-low::after { background: #f26363; }
.tgpco2-grow__list b { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.tgpco2-grow__note, .tgpco2-grow__hint { font-size: 11.5px; color: var(--c-text-3); line-height: 1.5; margin: 10px 0 0; }
.tgpco2-grow__copy { display: flex; gap: 8px; }
.tgpco2-grow__copy .tgpco2-input { font-size: 12px; }
.tgpco2-grow__stats { display: flex; gap: 18px; margin-top: 14px; }
.tgpco2-grow__stats b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.tgpco2-grow__stats span { display: block; font-size: 11.5px; color: var(--c-text-3); }
.tgpco2-grow__cal .tgpco2-input { font-size: 12px; }

/* In-order assist */
.tgpco2-dig__sum { font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
.tgpco2-dig__sec { margin-top: 12px; }
.tgpco2-dig__sec b { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.tgpco2-dig__sec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tgpco2-dig__sec li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.5; color: var(--c-text-2); }
.tgpco2-dig__sec li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-text-3); }
.tgpco2-dig__sec.is-ask li::before { background: var(--c-amber-text); }
.tgpco2-dig__sec.is-ask li { color: var(--c-text); }
.tgpco2-dig__foot { margin: 14px 0 0; font-size: 11.5px; color: var(--c-text-3); }

/* My Account → Services Orders -----------------------------------------
   The list renders inside WooCommerce's account column, which is narrower
   than a full v2 page and already supplies its own heading. Drop the page
   H1, tighten the top spacing and let the shell use the whole column. */
.tgpco2-accountwrap { margin: 0; }
.tgpco2-accountwrap .tgpco2-shell { max-width: none; padding-left: 0; padding-right: 0; }
.tgpco2-accountwrap .tgpco2-vd2__head { padding-top: 0; margin-bottom: 18px; }
.tgpco2-accountwrap .tgpco2-h1 { font-size: clamp(20px, 2.4vw, 24px); }
.tgpco2-accountwrap .tgpco2-vd2__kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tgpco2-accountwrap .tgpco2-mo__saved { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* The account theme paints every input in its column with an !important
   padding/border/radius, which flattens the v2 fields and pushes the search
   text under its own icon. Match that weight and hand the v2 look back. */
body.woocommerce-account .woocommerce-MyAccount-content .tgpco2-accountwrap input.tgpco2-input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
    padding: 11px 13px !important;
    border-radius: 12px !important;
    background: var(--c-surface-2) !important;
    border: 1px solid var(--c-border-strong) !important;
    color: var(--c-text) !important;
    font-size: 13.5px !important;
    height: auto !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .tgpco2-accountwrap .tgpco2-search input.tgpco2-input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
    padding-left: 40px !important;
}
@media (max-width: 900px) {
    .tgpco2-accountwrap .tgpco2-vd2__head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .tgpco2-accountwrap .tgpco2-vd2__head-actions { width: 100%; }
    .tgpco2-accountwrap .tgpco2-vd2__head-actions .tgpco2-btn { flex: 1; justify-content: center; }
}

/* The vendor dashboard's status line is a row of chips that scrolls sideways
   on a phone. On the orders list it is one plain sentence, so let it wrap. */
@media (max-width: 720px) {
    .tgpco2-mo .tgpco2-vd2__status { flex-wrap: wrap; overflow: visible; white-space: normal; margin: 0; padding: 0; }
}

/* Quick replies: the first open has to fetch the list, so the panel opens with
   placeholder rows rather than leaving the button looking dead. */
.tgpco2-qr__skel { display: grid; gap: 6px; padding: 4px; }
.tgpco2-qr__skel span { display: block; height: 38px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.10) 37%, rgba(255,255,255,0.05) 63%); background-size: 300% 100%; animation: tgpco2-qrshim 1.2s linear infinite; }
.tgpco2-qr__skel span:nth-child(2) { width: 88%; }
.tgpco2-qr__skel span:nth-child(3) { width: 70%; }
@keyframes tgpco2-qrshim { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .tgpco2-qr__skel span { animation: none; } }
/* bundle quantity on a checkout / receipt line */
.tgpco2-co__qty { font-style: normal; color: var(--c-text-3); font-size: 12.5px; white-space: nowrap; }

/* Bundle discounts: each rule shows the money it makes, so there is no table
   underneath repeating the whole thing. */
.tgpco2-pkgcfg__lab { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; color: var(--c-text-2); margin: 0 0 10px; }
.tgpco2-pkgcfg__lab span { font-weight: 500; color: var(--c-text-3); font-size: 11.5px; }
.tgpco2-tier__out { font-style: normal; font-size: 11.5px; color: var(--c-text-3); margin-left: auto; white-space: nowrap; }
.tgpco2-tier__out b { color: var(--c-green-text); font-weight: 600; }
@media (max-width: 620px) { .tgpco2-tier__out { display: none; } }
/* keep a tier on one line: the number boxes are two digits, not full width */
.tgpco2 .tgpco2-tier { flex-wrap: nowrap; }
.tgpco2 .tgpco2-tier input.tgpco2-input { width: 68px !important; flex: 0 0 auto; text-align: center; }
.tgpco2 .tgpco2-tier .tgpco2-input-group { flex: 0 0 auto; width: auto; }
.tgpco2 .tgpco2-tier > span { flex: 0 0 auto; white-space: nowrap; }
.tgpco2 .tgpco2-tier__range { margin-left: auto; }
@media (max-width: 560px) { .tgpco2 .tgpco2-tier { flex-wrap: wrap; } }

/* A producer looking at their own card: no Hire button they cannot press —
   say it is theirs, show what it is doing, and send them to the editor. */
.tgpco2-svc__ownbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--c-border); font-size: 12px; }
.tgpco2-svc__ownbadge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent-text); font-weight: 600; white-space: nowrap; }
.tgpco2-svc__ownstat { color: var(--c-text-3); }
.tgpco2-svc__ownstat b { color: var(--c-text-2); font-weight: 600; }
.tgpco2 a.tgpco2-svc__own { text-decoration: none; }
.tgpco2-ppanel__foot--own { background: var(--c-accent-soft); border-radius: 12px; padding: 10px 14px; }
.tgpco2-ppanel__foot--own b { color: var(--c-text); }

/* Open briefs: dismiss one you have decided against so the feed stays useful.
   It only hides it for you — the brief stays open for every other producer. */
.tgpco2 button.tgpco2-rfq2__hide { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px !important; border-radius: 999px !important; border: 1px solid var(--c-border) !important; background: transparent !important; color: var(--c-text-3) !important; font-size: 11.5px !important; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.tgpco2 button.tgpco2-rfq2__hide:hover { color: var(--c-text) !important; border-color: var(--c-border-strong) !important; }
.tgpco2-rfq2.is-hiding { opacity: 0.5; }
.tgpco2-rfq2.is-hidden { padding: 0; }
.tgpco2-rfq2__gone { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 13px; color: var(--c-text-3); }


/* Order review: what you are buying, on what terms, before the money page --- */
.tgpco2-rv__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: center; padding: 14px 16px; margin-bottom: 14px; border-radius: 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.tgpco2-rv__svc { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tgpco2-rv__svc img, .tgpco2-rv__svc .tgpco2-artph { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.tgpco2-rv__svc b { display: block; font-size: 14.5px; line-height: 1.3; }
.tgpco2-rv__svc span { display: block; font-size: 12.5px; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-rv__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; }
.tgpco2-rv__fact { display: grid; grid-template-columns: 14px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: start; font-size: 11.5px; color: var(--c-text-3); min-width: 0; }
.tgpco2-rv__fact .tgpco2-ic { grid-row: 1 / span 2; margin-top: 2px; }
.tgpco2-rv__fact b { grid-column: 2; color: var(--c-text); font-weight: 600; font-size: 13px; line-height: 1.3; }
.tgpco2-rv__fact > span { grid-column: 2; grid-row: 1; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.tgpco2-rv__qty { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent-text); margin-left: 6px; vertical-align: middle; }
@media (max-width: 720px) { .tgpco2-rv__top { grid-template-columns: 1fr; gap: 12px; } .tgpco2-rv__fact b { margin-left: 8px; } }

/* the brief check: only ever shown when it has something specific to say */
.tgpco2-aibrief { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(124,92,255,0.02)); border: 1px solid rgba(124,92,255,0.28); }
.tgpco2-aibrief__load { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-3); }
.tgpco2-aibrief__load .tgpco2-ic { animation: tgpco2-aipulse 1.4s ease-in-out infinite; }
@keyframes tgpco2-aipulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.tgpco2-aibrief__head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.tgpco2-aibrief__head .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2-aibrief__sum { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--c-text-2); }
.tgpco2-aibrief__ok { margin: 6px 0 0; font-size: 12.5px; color: var(--c-text-3); }
.tgpco2-aibrief__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tgpco2-aibrief__list li { padding: 9px 12px; border-radius: 10px; background: rgba(0,0,0,0.22); }
.tgpco2-aibrief__list b { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; }
.tgpco2-aibrief__list span { display: block; font-size: 12px; color: var(--c-text-3); margin-top: 3px; }
.tgpco2-aibrief__act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .tgpco2-aibrief__load .tgpco2-ic { animation: none; } }

/* Listing summary: the things worth fixing before publishing, stated as facts */
.tgpco2-wtodo { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); }
.tgpco2-wtodo > b { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--c-amber-text, #fbbf24); }
.tgpco2-wtodo ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.tgpco2-wtodo li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,0.22); }
.tgpco2-wtodo li > .tgpco2-ic { color: var(--c-text-3); flex: 0 0 auto; }
.tgpco2-wtodo li > div { flex: 1; min-width: 0; }
.tgpco2-wtodo li b { display: block; font-size: 12.5px; font-weight: 600; }
.tgpco2-wtodo li span { display: block; font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; line-height: 1.4; }
.tgpco2-wrev__qs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.tgpco2-wrev__qs li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-text-2); }
.tgpco2-wrev__qs em { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-3); margin-left: auto; }

/* Order modal: the detail the card handed over */
.tgpco2-wiz__facts { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); display: grid; gap: 8px; }
.tgpco2-wiz__facts > div { display: grid; grid-template-columns: 15px 1fr auto; align-items: baseline; gap: 8px; font-size: 12.5px; }
.tgpco2-wiz__facts .tgpco2-ic { color: var(--c-text-3); align-self: center; }
.tgpco2-wiz__facts span { color: var(--c-text-3); }
.tgpco2-wiz__facts b { color: var(--c-text); font-weight: 600; text-align: right; }
.tgpco2-svc.is-going { opacity: 0.4; pointer-events: none; transition: opacity 0.15s; }
.tgpco2 .tgpco2-dd__opt.is-disabled { opacity: 0.38; cursor: not-allowed; }
.tgpco2 .tgpco2-dd__opt.is-disabled:hover { background: transparent !important; }
/* a hint that informs without shouting */
.tgpco2 .tgpco2-hint--quiet { color: var(--c-text-3); font-size: 12px; line-height: 1.5; font-weight: 400; }
/* the improvements panel is advice, not a gate */
.tgpco2-wtodo > b em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--c-text-3); margin-left: auto; }
.tgpco2-wtodo > b { justify-content: flex-start; }
/* genres and "sounds like" are two different facts — one per line */
.tgpco2-svc__gl--like { margin-top: 3px; color: var(--c-text-3); }

/* What the producer needs from the buyer, shown while they write the brief */
.tgpco2-wiz__req { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 11px 13px; border-radius: 12px; background: var(--c-accent-soft); border: 1px solid rgba(124, 92, 255, 0.25); }
.tgpco2-wiz__req .tgpco2-ic { color: var(--c-accent-text); flex: 0 0 auto; margin-top: 1px; }
.tgpco2-wiz__req b { display: block; font-size: 12px; font-weight: 600; }
.tgpco2-wiz__req span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--c-text-2); margin-top: 3px; white-space: pre-wrap; }

/* Seller insights hero: the money, the trend and the shape of it in one band.
   The bars are real weekly revenue, not decoration. */
.tgpco2-hero2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: center; padding: 24px 26px; border-radius: 20px; margin-bottom: 16px; position: relative; overflow: hidden; border: 1px solid var(--c-border); background: radial-gradient(120% 140% at 0% 0%, rgba(124, 92, 255, 0.20) 0%, rgba(124, 92, 255, 0.04) 42%, transparent 72%), var(--c-surface); }
.tgpco2-hero2__main { min-width: 0; }
.tgpco2-hero2__big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 6px 0 0; }
.tgpco2-hero2__big em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: 0; padding: 4px 9px; border-radius: 999px; }
.tgpco2-hero2__big em.is-up { color: var(--c-green-text); background: rgba(34, 197, 94, 0.12); }
.tgpco2-hero2__big em.is-down { color: #fca5a5; background: rgba(248, 113, 113, 0.12); }
.tgpco2-hero2__main > p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--c-text-3); max-width: 46ch; }
.tgpco2-hero2__kpis { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.tgpco2-hero2__kpis b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.tgpco2-hero2__kpis span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-3); margin-top: 2px; }
.tgpco2-hero2__chart { display: flex; align-items: flex-end; gap: 5px; height: 132px; }
.tgpco2-hero2__chart > span { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.tgpco2-hero2__chart i { display: block; width: 100%; height: var(--h, 3%); border-radius: 5px 5px 3px 3px; background: linear-gradient(180deg, var(--c-accent) 0%, rgba(124, 92, 255, 0.35) 100%); transition: filter 0.15s, transform 0.15s; transform-origin: bottom; }
.tgpco2-hero2__chart > span:hover i { filter: brightness(1.25); transform: scaleY(1.03); }
@media (max-width: 860px) {
    .tgpco2-hero2 { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
    .tgpco2-hero2__chart { height: 96px; }
}
@media (prefers-reduced-motion: reduce) { .tgpco2-hero2__chart i { transition: none; } }

/* the dashboard needs air under the last card, not the footer against it */
.tgpco2-vd { padding-bottom: 56px; }

/* Per service: its own funnel, so a weak service shows WHERE it loses people */
.tgpco2-psvc { padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.tgpco2-psvc:last-child { border-bottom: 0; padding-bottom: 0; }
.tgpco2-psvc__name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tgpco2-psvc__name b { font-size: 14px; font-weight: 600; }
.tgpco2-psvc__name span { font-size: 11.5px; color: var(--c-text-3); }
.tgpco2-psvc__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tgpco2-psvc__step { min-width: 0; }
.tgpco2-psvc__step b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.tgpco2-psvc__step span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-3); margin: 2px 0 7px; }
.tgpco2-psvc__step i { display: block; height: 4px; border-radius: 999px; background: var(--c-surface-2); position: relative; overflow: hidden; }
.tgpco2-psvc__step i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 3%); border-radius: 999px; background: var(--c-accent); }
.tgpco2-psvc__step.is-last i::after { background: var(--c-green-text, #4ade80); }
@media (max-width: 620px) { .tgpco2-psvc__steps { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ── Seller dashboard: the command panel ───────────────────────────────
   Who you are, whether you are open, and the five numbers that decide what
   you do next — one panel instead of a thin line of text over a bare strip. */
.tgpco2-vh { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--c-border); padding: 22px 24px; margin-bottom: 18px; background: radial-gradient(115% 130% at 100% 0%, rgba(124, 92, 255, 0.16) 0%, rgba(124, 92, 255, 0.03) 45%, transparent 70%), var(--c-surface); }
.tgpco2-vh.is-away { background: radial-gradient(115% 130% at 100% 0%, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.03) 45%, transparent 70%), var(--c-surface); }
.tgpco2-vh.is-full { background: radial-gradient(115% 130% at 100% 0%, rgba(248, 113, 113, 0.14) 0%, rgba(248, 113, 113, 0.03) 45%, transparent 70%), var(--c-surface); }
.tgpco2-vh__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.tgpco2-vh__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tgpco2 .tgpco2-vh__av { width: 52px; height: 52px; font-size: 17px; flex: 0 0 auto; border-radius: 14px; }
.tgpco2 .tgpco2-vh__av img { border-radius: 14px; }
.tgpco2-vh__name { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.tgpco2-vh__state { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.tgpco2-vh__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(34, 197, 94, 0.13); color: var(--c-green-text, #4ade80); }
.tgpco2-vh__pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tgpco2-vh.is-away .tgpco2-vh__pill { background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
.tgpco2-vh.is-full .tgpco2-vh__pill { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
.tgpco2-vh__chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; color: var(--c-text-3); background: var(--c-surface-2); cursor: default; }
.tgpco2-vh__chip .tgpco2-ic { opacity: 0.8; }
.tgpco2-vh__acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.tgpco2-vh__tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 22px; }
.tgpco2 a.tgpco2-tile, .tgpco2 .tgpco2-tile { display: block; padding: 14px 15px; border-radius: 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); text-decoration: none; color: inherit; transition: transform 0.15s var(--ease, ease), border-color 0.15s, background 0.15s; }
.tgpco2 a.tgpco2-tile:hover { transform: translateY(-2px); border-color: var(--c-border-strong); background: var(--c-surface); }
.tgpco2-tile__ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); color: var(--c-text-3); margin-bottom: 10px; }
.tgpco2-tile b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a money value is longer than a count and must not wrap the tile out of line */
.tgpco2-tile.is-money b { font-size: clamp(16px, 1.45vw, 21px); }
.tgpco2-tile__l { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-3); margin-top: 4px; }
.tgpco2-tile.is-urgent { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.32); }
.tgpco2-tile.is-urgent .tgpco2-tile__ic { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.tgpco2-tile.is-urgent b { color: #fbbf24; }
.tgpco2-tile.is-info .tgpco2-tile__ic { background: var(--c-accent-soft); color: var(--c-accent-text); }
.tgpco2-tile.is-info b { color: var(--c-accent-text); }
.tgpco2-tile.is-money .tgpco2-tile__ic, .tgpco2-tile.is-good .tgpco2-tile__ic { background: rgba(34, 197, 94, 0.14); color: var(--c-green-text, #4ade80); }
/* An odd tile must not leave a hole: the last one takes the empty column. */
@media (max-width: 1100px) { .tgpco2-vh__tiles { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); } }
@media (max-width: 640px) {
    .tgpco2-vh { padding: 18px; border-radius: 16px; }
    .tgpco2-vh__tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .tgpco2-vh__tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .tgpco2-tile b { font-size: 20px; }
    .tgpco2-vh__acts { width: 100%; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .tgpco2 a.tgpco2-tile:hover { transform: none; } }

/* Order rows to match the panel above: a little more air, a clearer urgency
   edge, and artwork that reads as artwork rather than a grey square. */
.tgpco2-vd .tgpco2-vo { padding: 15px 18px; border-radius: 16px; transition: transform 0.14s var(--ease, ease), border-color 0.14s, background 0.14s; }
.tgpco2-vd .tgpco2-vo:hover { transform: translateY(-1px); }
.tgpco2-vd .tgpco2-vo::before { top: 10px; bottom: 10px; width: 4px; }
.tgpco2-vd .tgpco2-vo.is-attention { border-color: rgba(245, 158, 11, 0.3); background: linear-gradient(90deg, rgba(245, 158, 11, 0.05), transparent 38%), var(--c-surface); }
.tgpco2-vd .tgpco2-vo.is-attention::before { background: #f59e0b; opacity: 1; }
.tgpco2-vd .tgpco2-vo__art { border-radius: 12px; overflow: hidden; }
.tgpco2-vd .tgpco2-vo__title { font-size: 14.5px; }
.tgpco2-vd .tgpco2-vo__price { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
@media (prefers-reduced-motion: reduce) { .tgpco2-vd .tgpco2-vo:hover { transform: none; } }

/* Link-style buttons open modals too, and T.busy() only ever styled .tgpco2-btn:
   the class went on and nothing happened. Give any of them a spinner. */
.tgpco2 .tgpco2-vd2__link.is-loading,
.tgpco2 .tgpco2-ppanel__links a.is-loading,
.tgpco2 button.is-loading:not(.tgpco2-btn):not(.tgpco2-tab) { pointer-events: none; opacity: 0.65; position: relative; }
.tgpco2 .tgpco2-vd2__link.is-loading::after,
.tgpco2 .tgpco2-ppanel__links a.is-loading::after,
.tgpco2 button.is-loading:not(.tgpco2-btn):not(.tgpco2-tab)::after {
    content: ""; display: inline-block; vertical-align: -2px; margin-left: 7px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: tgpco2-rot 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .tgpco2 .tgpco2-vd2__link.is-loading::after,
    .tgpco2 button.is-loading:not(.tgpco2-btn):not(.tgpco2-tab)::after { animation: none; opacity: 0.6; }
}

/* Insights funnel: every bar is a share of views, so it always reads top-down
   and can never overflow its own row (step-to-step maths produced "375%"). */
.tgpco2-fun { display: grid; gap: 14px; margin-top: 4px; }
.tgpco2-src { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border); }
.tgpco2-src__lab { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 8px; }
.tgpco2-src__list { display: flex; flex-wrap: wrap; gap: 6px; }
.tgpco2-src__chip { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 11px; border-radius: 99px; background: var(--c-surface-2); border: 1px solid var(--c-border); font-size: 12.5px; color: var(--c-text-2); }
.tgpco2-src__chip i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: rgba(124, 92, 255, 0.18); pointer-events: none; }
.tgpco2-src__chip span, .tgpco2-src__chip b { position: relative; }
.tgpco2-src__chip b { font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.tgpco2-fun__row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.tgpco2-fun__lab { grid-column: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.tgpco2-fun__lab span { font-size: 12.5px; color: var(--c-text-2); }
.tgpco2-fun__lab b { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.tgpco2-fun__track { grid-column: 1; grid-row: 2; height: 8px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.tgpco2-fun__track i { display: block; height: 100%; width: var(--w, 2%); border-radius: 999px; background: linear-gradient(90deg, var(--c-accent), rgba(124, 92, 255, 0.55)); transition: width 0.5s var(--ease, ease); }
.tgpco2-fun__row.is-last .tgpco2-fun__track i { background: linear-gradient(90deg, #22c55e, rgba(34, 197, 94, 0.55)); }
.tgpco2-fun__row.is-last .tgpco2-fun__lab b { color: var(--c-green-text, #4ade80); }
.tgpco2-fun__pct { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: 13px; font-weight: 600; color: var(--c-text-3); }
@media (prefers-reduced-motion: reduce) { .tgpco2-fun__track i { transition: none; } }
/* a meter with nothing behind it should say so, not show an empty rail */
.tgpco2-ins2__meter.is-empty .tgpco2-ins2__mlab b { font-size: 12px; font-weight: 500; color: var(--c-text-3); }
.tgpco2-ins2__meter.is-empty .tgpco2-ins2__bar { opacity: 0.35; }

/* Bundle discount rules: proper labelled fields, not two cramped number boxes */
.tgpco2-rule { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 34px; align-items: end; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-border); margin-bottom: 8px; }
.tgpco2-rule:last-of-type { margin-bottom: 0; }
.tgpco2-rule__f label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-3); margin-bottom: 5px; }
.tgpco2-rule__in { display: flex; align-items: center; gap: 7px; }
.tgpco2 .tgpco2-rule__in input.tgpco2-input { width: 74px !important; text-align: center; font-size: 15px !important; font-weight: 600 !important; padding: 9px 8px !important; }
.tgpco2-rule__in > span { font-size: 12.5px; color: var(--c-text-3); white-space: nowrap; }
.tgpco2-rule__out { text-align: right; line-height: 1.3; min-width: 0; }
.tgpco2-rule__out b { display: block; font-size: 14px; font-weight: 700; color: var(--c-green-text, #4ade80); }
.tgpco2-rule__out span { display: block; font-size: 11.5px; color: var(--c-text-3); }
.tgpco2 button.tgpco2-rule__rm { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px !important; border: 1px solid var(--c-border) !important; background: transparent !important; color: var(--c-text-3) !important; cursor: pointer; padding: 0 !important; }
.tgpco2 button.tgpco2-rule__rm:hover { color: #fca5a5 !important; border-color: rgba(248, 113, 113, 0.4) !important; }
@media (max-width: 620px) {
    .tgpco2-rule { grid-template-columns: 1fr 1fr 34px; row-gap: 10px; }
    .tgpco2-rule__out { grid-column: 1 / 3; text-align: left; }
    .tgpco2 button.tgpco2-rule__rm { grid-column: 3; grid-row: 1; }
}
/* the editor preview is one real card, sized to the sidebar */
.tgpco2-cards--preview { display: block; margin-top: 10px; }
.tgpco2-cards--preview .tgpco2-svc { width: 100%; }
.tgpco2-cards--preview .tgpco2-svc__hire { pointer-events: none; }

/* DAW picker: tiles with the DAW's own logo, shown only with the project-files
   add-on — the DAW is meaningless unless they are buying the project. */
.tgpco2-daws { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.tgpco2 button.tgpco2-dawtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px !important; border-radius: 14px !important; border: 1px solid var(--c-border-strong) !important; background: var(--c-surface-2) !important; color: var(--c-text-2) !important; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; text-align: center; }
.tgpco2 button.tgpco2-dawtile:hover { border-color: rgba(255, 255, 255, 0.3) !important; background: var(--c-surface) !important; transform: translateY(-1px); }
.tgpco2 button.tgpco2-dawtile.is-on { border-color: var(--c-accent) !important; background: var(--c-accent-soft) !important; color: #fff !important; }
.tgpco2-dawtile__ic { display: flex; align-items: center; justify-content: center; height: 30px; }
.tgpco2-dawtile__ic .tgpco2-daw { width: 30px; height: 30px; background: none; opacity: 1; }
.tgpco2-dawtile__ic .tgpco2-daw img, .tgpco2-dawtile__ic .tgpco2-daw svg { width: 28px !important; height: 28px !important; }
.tgpco2-dawtile__n { font-size: 12px; font-weight: 500; line-height: 1.25; }
.tgpco2-dawpick.is-invalid .tgpco2-daws { outline: 1px solid rgba(248, 113, 113, 0.5); outline-offset: 4px; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .tgpco2 button.tgpco2-dawtile:hover { transform: none; } }
.tgpco2-chat__locked--unpaid > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tgpco2-chat__locked--unpaid b { font-size: 14px; font-weight: 600; color: var(--c-text); }
.tgpco2-chat__locked--unpaid span { font-size: 13px; color: var(--c-text-3); line-height: 1.5; }
.tgpco2-chat__locked--unpaid .tgpco2-btn { margin-top: 6px; }
.tgpco2-avatar.is-fallback { display: inline-grid; place-items: center; font-weight: 700; letter-spacing: 0.02em; }
/* brief wizard */
.tgpco2-modal--rfq .tgpco2-modal__panel { max-width: 920px; }
@media (min-width: 721px) { .tgpco2-wiz--rfq { grid-template-columns: minmax(0, 1fr) 300px; } }
.tgpco2-rfqw__side .tgpco2-wiz__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: var(--c-text-2); }
.tgpco2-rfqw__side .tgpco2-wiz__checks li { display: flex; gap: 8px; align-items: flex-start; }
.tgpco2-rfqw__side .tgpco2-wiz__checks .tgpco2-ic { flex: none; margin-top: 3px; color: var(--c-green); }
.tgpco2-rfqw__types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tgpco2 button.tgpco2-rfqw__type { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 12px 10px !important; border-radius: 12px !important; border: 1px solid var(--c-border) !important; background: var(--c-surface-2) !important; color: var(--c-text-2) !important; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.tgpco2 button.tgpco2-rfqw__type .tgpco2-ic { color: var(--c-text-3); }
.tgpco2 button.tgpco2-rfqw__type span { font-size: 13.5px; font-weight: 600; color: var(--c-text); line-height: 1.2; }
.tgpco2 button.tgpco2-rfqw__type small { font-size: 11.5px; color: var(--c-text-3); }
.tgpco2 button.tgpco2-rfqw__type:hover { border-color: var(--c-border-strong) !important; }
.tgpco2 button.tgpco2-rfqw__type.is-on { border-color: var(--c-accent) !important; background: rgba(124, 92, 255, 0.12) !important; }
.tgpco2 button.tgpco2-rfqw__type.is-on .tgpco2-ic { color: var(--c-accent-text); }
.tgpco2-chips--sm .tgpco2-chip { padding: 6px 11px; font-size: 12.5px; }
.tgpco2-rfqw__sum { display: grid; gap: 0; border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.tgpco2-rfqw__sum > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-top: 1px solid var(--c-border); font-size: 13.5px; }
.tgpco2-rfqw__sum > div:first-child { border-top: 0; }
.tgpco2-rfqw__sum span { color: var(--c-text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding-top: 2px; }
.tgpco2-rfqw__sum b { font-weight: 500; color: var(--c-text); min-width: 0; overflow-wrap: anywhere; }
.tgpco2-rfqw__sum .is-brief b { white-space: pre-wrap; color: var(--c-text-2); font-size: 13px; line-height: 1.5; }
.tgpco2-rfqw__side { display: flex; flex-direction: column; gap: 18px; }
.tgpco2-rfqw__how { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tgpco2-rfqw__how li { display: flex; gap: 12px; align-items: flex-start; }
.tgpco2-rfqw__how i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11.5px/1 var(--head, inherit); font-style: normal; background: rgba(124, 92, 255, 0.18); color: #cbbcff; }
.tgpco2-rfqw__how b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.tgpco2-rfqw__how span { font-size: 12.5px; color: var(--c-text-2); line-height: 1.45; }
@media (max-width: 720px) { .tgpco2-rfqw__types { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tgpco2-rfqw__sum > div { grid-template-columns: 1fr; gap: 3px; } }
.tgpco2-ssconnect { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--c-border-strong); background: var(--c-surface-2); }
.tgpco2-ssconnect > .tgpco2-ic { flex: none; color: #8ab4f8; }
.tgpco2-ssconnect > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tgpco2-ssconnect b { font-size: 13.5px; font-weight: 600; color: var(--c-text); }
.tgpco2-ssconnect span { font-size: 12.5px; color: var(--c-text-3); line-height: 1.45; }
.tgpco2-ssconnect .tgpco2-btn { flex: none; }
@media (max-width: 560px) { .tgpco2-ssconnect { flex-wrap: wrap; } .tgpco2-ssconnect .tgpco2-btn { width: 100%; justify-content: center; } }