/* * LingoSend Swiss + utilitarian minimal system * Reading this as: redesign-overhaul of a YouTube creator localization * web app for non-technical Korean creators (first-time and older users), * with a trust-first Swiss + utilitarian-minimal language, leaning toward * native CSS + SUIT / system CJK fallbacks + stone/bone monochrome. * DESIGN_VARIANCE 5 / MOTION_INTENSITY 3 / VISUAL_DENSITY 3 public, 5 product. * Taste skill landing-page rules do not own /app. Product surfaces keep the * same tokens, contrast lock, and no 3-equal-card billing layout. * Accessibility-first, mobile-first: 16px body, 44px touch, secondary text at 70% ink. * Product IDs and JavaScript hooks stay untouched. */ :root { color-scheme: light; --font-sans: "SUIT Variable", SUIT, "Helvetica Neue", Helvetica, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Microsoft JhengHei UI", "PingFang TC", "Microsoft YaHei UI", "Noto Sans SC", Arial, sans-serif; --font-mono: "SF Mono", "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; --bg: #f7f6f3; --surface: #fafaf9; --paper: #fafaf9; --ink: #1c1917; --ink-70: rgba(28, 25, 23, 0.74); --ink-40: rgba(28, 25, 23, 0.64); --ink-20: rgba(28, 25, 23, 0.2); --line: #e7e5e4; --accent: #57534e; --btn: #1c1917; --btn-ink: #f7f6f3; --ok: #346538; --ok-soft: #edf3ec; --warn: #956400; --warn-soft: #fbf3db; --danger: #9f2f2d; --danger-soft: #fdebec; --radius: 4px; --space: 8px; --pad: 16px; --content: 1120px; --touch: 44px; --canvas: #f7f6f3; --canvas-soft: #fafaf9; --surface-raised: #fafaf9; --surface-hover: #f3f1ed; --field: #fafaf9; --line-strong: #d6d3d1; --text: #1c1917; --soft: rgba(28, 25, 23, 0.74); --muted: rgba(28, 25, 23, 0.62); --subtle: rgba(28, 25, 23, 0.64); --accent-strong: #44403c; --accent-ink: #f7f6f3; --accent-soft: #f5f5f4; --blue: #1c1917; --blue-soft: #f5f5f4; --warning: #956400; --warning-soft: #fbf3db; --success: #346538; --success-soft: #edf3ec; --focus: #1c1917; --shadow: none; --public-content: 1120px; --font: var(--font-sans); --code: var(--font-mono); --panel: #fafaf9; --panel-2: #f5f5f4; --input: #fafaf9; --line-soft: #e7e5e4; --teal: #1c1917; --green: #346538; --amber: #956400; --btn-hover: #292524; --surface-muted: #f2f1ee; --surface-selected: #efeeeb; --bg-translucent: rgb(247 246 243 / 0.96); --paper-translucent: rgb(250 250 249 / 0.96); --backdrop: rgba(28, 25, 23, 0.45); --shadow-soft: 0 1px 2px rgb(28 25 23 / 0.08); --photo-filter: none; --illustration-filter: none; --brand-mark-ring: transparent; } /* ========== Dark scheme ========== Opt-in only: theme.js sets when the visitor picks "어두운 화면" or "기기 설정 따르기" on a dark device. The light values above stay the default. Same warm stone hues, inverted: bone ink on charcoal paper. */ html[data-scheme="dark"] { color-scheme: dark; --bg: #1a1816; --surface: #23201d; --paper: #23201d; --ink: #f2efea; --ink-70: rgba(242, 239, 234, 0.76); --ink-40: rgba(242, 239, 234, 0.62); --ink-20: rgba(242, 239, 234, 0.22); --line: #3a3632; --accent: #b8b2aa; --btn: #f2efea; --btn-ink: #1a1816; --ok: #93cf9c; --ok-soft: #1f2e22; --warn: #e6b862; --warn-soft: #33290f; --danger: #f2a09c; --danger-soft: #3c1f1f; --canvas: #1a1816; --canvas-soft: #23201d; --surface-raised: #2a2623; --surface-hover: #2c2825; --field: #23201d; --line-strong: #4b4640; --text: #f2efea; --soft: rgba(242, 239, 234, 0.76); --muted: rgba(242, 239, 234, 0.64); --subtle: rgba(242, 239, 234, 0.62); --accent-strong: #d6d0c8; --accent-ink: #1a1816; --accent-soft: #2a2623; --blue: #f2efea; --blue-soft: #2a2623; --warning: #e6b862; --warning-soft: #33290f; --success: #93cf9c; --success-soft: #1f2e22; --focus: #f2efea; --panel: #23201d; --panel-2: #2a2623; --input: #23201d; --line-soft: #3a3632; --teal: #f2efea; --green: #93cf9c; --amber: #e6b862; --btn-hover: #ddd8d0; --surface-muted: #2a2623; --surface-selected: #34302c; --bg-translucent: rgb(26 24 22 / 0.94); --paper-translucent: rgb(35 32 29 / 0.94); --backdrop: rgba(0, 0, 0, 0.6); --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.4); --photo-filter: brightness(0.62) saturate(0.85); --illustration-filter: invert(1) hue-rotate(180deg) brightness(0.92); --brand-mark-ring: #4b4640; } html { box-sizing: border-box; background: var(--bg); color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } *, *::before, *::after { box-sizing: inherit; } html, html body, html body.public-home-page, html body.legal-page, html body.lyrics-page, html body.desktop-activate-page, html body:has(> #appView:not([hidden])), html body:has(> #authView:not([hidden])) { width: 100%; max-width: 100%; min-height: 100dvh; height: auto !important; overflow-x: hidden !important; overflow-y: auto !important; background: var(--bg) !important; color: var(--ink); font-family: var(--font-sans); font-weight: 450; font-size: 16px; line-height: 1.65; letter-spacing: 0; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; } html body::before, html body::after, html body.public-home-page::before, html body.public-home-page::after, html body.legal-page::before, html body.legal-page::after, html body.lyrics-page::before, html body.lyrics-page::after { display: none !important; content: none !important; } ::selection { background: var(--line); color: var(--ink); } img, svg, video { max-width: 100%; height: auto; } a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; } h1, h2, h3, strong { color: var(--ink); font-family: var(--font-sans); font-weight: 400; text-wrap: balance; } h1 { font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; } p, li, .public-hero-copy, .auth-copy, .guide-callout, .guide-list li, .legal-shell section p, .legal-shell section li { overflow-wrap: anywhere; word-break: keep-all; text-wrap: pretty; } .skip-link { position: absolute; top: 8px; left: 8px; z-index: 90; padding: 10px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--btn-ink); font-size: 13px; text-decoration: none; transform: translateY(-160%); } .skip-link:focus { transform: none; } button, .button, a.primary, a.secondary, a.ghost, .public-cta, .public-nav-cta, .legal-start { box-sizing: border-box; min-height: var(--touch); border-radius: var(--radius) !important; font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 160ms cubic-bezier(0.16, 1, 0.3, 1); } .primary, button.primary, a.primary, .public-nav-cta, .public-cta.primary, .legal-start, .workspace .run-button, #runButton { border: 1px solid var(--btn) !important; background: var(--btn) !important; color: var(--btn-ink) !important; box-shadow: none !important; } .primary:hover:not(:disabled), a.primary:hover, .public-nav-cta:hover, .public-cta.primary:hover, .legal-start:hover { background: var(--btn-hover) !important; border-color: var(--btn-hover) !important; color: var(--btn-ink) !important; transform: none; } .primary:active:not(:disabled), a.primary:active, .public-nav-cta:active, .public-cta.primary:active { transform: scale(0.98); } .secondary, button.secondary, a.secondary, .ghost, button.ghost, a.ghost, .public-actions .secondary.is-outlined { border: 1px solid var(--line) !important; background: var(--paper) !important; color: var(--ink) !important; box-shadow: none !important; } .secondary:hover:not(:disabled), .ghost:hover:not(:disabled), a.secondary:hover, a.ghost:hover { border-color: var(--ink) !important; background: var(--paper) !important; color: var(--ink) !important; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } input, select, textarea { min-height: var(--touch); border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--paper) !important; color: var(--ink) !important; box-shadow: none !important; font-family: var(--font-sans); font-size: 16px; } input:focus, select:focus, textarea:focus { border-color: var(--ink) !important; } input::placeholder, textarea::placeholder { color: var(--ink-40); } label > span, .field-title { color: var(--ink-70); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; } .eyebrow, .public-hero .eyebrow, .legal-shell > .eyebrow, .auth-shell .eyebrow, .lyrics-intro .eyebrow { margin: 0 0 12px; color: var(--ink-40) !important; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .eyebrow::before { content: none !important; } .brand-mark, .brand-mark.small, .brand-mark.titlebar-mark { flex: 0 0 auto; width: 28px; height: 28px; overflow: hidden; border: 0 !important; border-radius: var(--radius) !important; background: url("/assets/icons/icon-192.png?v=20260901-ls-mark-1") center / cover no-repeat; background-color: #1c1917; color: transparent; font-size: 0; filter: none; box-shadow: 0 0 0 1px var(--brand-mark-ring); } .step, .step-number { display: inline-flex; min-width: 28px; min-height: 28px; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--paper); color: var(--ink-70); font-size: 12px; font-weight: 500; } .language-picker select { width: 100%; min-height: var(--touch); border: 1px solid var(--line); border-radius: var(--radius) !important; background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 500; } /* Photos dim and the line illustration inverts in the dark scheme (tokens are `none` in light). */ .public-hero-media img, .auto-stage img { filter: var(--illustration-filter); } .products-hero-media img, .legal-hero-media img { filter: var(--photo-filter); } /* Theme picker: same control as the language picker, sits right next to it. */ .theme-picker { position: static !important; margin: 0 !important; } .theme-picker select { width: 100%; min-height: var(--touch); border: 1px solid var(--line); border-radius: var(--radius) !important; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 500; } /* ========== Public pages: mobile first ========== */ .public-home-shell, .legal-shell, .lyrics-shell { width: 100% !important; max-width: none !important; min-height: 100dvh; margin: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: var(--bg) !important; } .public-home-shell::before, .legal-shell::before { content: none !important; } .public-home-nav, .legal-toolbar, .lyrics-topbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: var(--bg-translucent) !important; } .public-nav-inner, .legal-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; width: 100% !important; max-width: none !important; align-items: center; gap: 8px; margin: 0 !important; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)) !important; box-sizing: border-box; } .public-home-nav .public-brand, .legal-toolbar .public-brand, .lyrics-brand { display: inline-flex; grid-column: 1; grid-row: 1; min-width: 0; min-height: var(--touch); align-items: center; gap: 8px; color: var(--ink); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; text-transform: none; } html body .public-nav-inner > .public-nav-cta, html body .legal-toolbar > .legal-start { display: inline-flex !important; grid-column: 2 !important; grid-row: 1 !important; flex: 0 0 auto; width: auto !important; max-width: none !important; min-width: 52px; min-height: var(--touch); align-items: center; justify-content: center; padding: 0 12px !important; overflow: visible; white-space: nowrap; z-index: 2; border: 1px solid var(--btn) !important; background: var(--btn) !important; color: var(--btn-ink) !important; } .public-nav-inner > nav { display: flex; grid-column: 1 / -1; align-items: center; gap: 4px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .nav-start { display: inline-flex !important; min-height: 36px; align-items: center; padding: 0 12px !important; border: 1px solid var(--btn) !important; background: var(--btn) !important; color: var(--btn-ink) !important; font-size: 14px !important; text-decoration: none !important; } .public-nav-inner > nav a, .legal-back { display: inline-flex; min-height: var(--touch); align-items: center; flex: 0 0 auto; color: var(--ink-70); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; text-transform: none; white-space: nowrap; } .public-nav-inner > nav a:hover, .legal-back:hover { color: var(--ink); } .public-nav-actions { display: contents; } .public-nav-actions .public-nav-cta { grid-column: 2; grid-row: 1; } .public-language-picker, .legal-toolbar .language-picker, .legal-toolbar .public-language-picker { position: static !important; grid-column: 1 / -1; width: 100% !important; margin: 0 !important; } .public-nav-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } html body .public-nav-inner > .public-nav-cta { justify-self: end; } .public-nav-inner > .public-language-picker { grid-column: 1; } .public-nav-inner > .public-theme-picker { grid-column: 2; width: 100% !important; } .legal-toolbar .legal-back { grid-column: 1 / -1; } .public-hero { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--bg) !important; } .public-hero::after { display: none !important; content: none !important; } .public-hero-media, .auto-stage { position: relative; order: -1; width: 100%; margin: 0; min-height: 148px !important; max-height: 168px; overflow: hidden; border: 0; background: var(--accent-soft); } .public-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: var(--illustration-filter); } .auto-cursor { position: absolute; top: 58%; left: 14%; z-index: 1; width: 10px; height: 10px; background: var(--accent); transform: translateY(-50%); animation: auto-send 7s linear infinite; } @keyframes auto-send { 0% { left: 14%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 78%; opacity: 0; } } .public-hero-inner { display: flex; width: 100%; min-width: 0; flex-direction: column; justify-content: flex-start !important; padding: 24px max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left)) !important; } .public-hero h1, .legal-shell > h1, .lyrics-intro h1, .auth-shell h1 { max-width: 22ch; margin: 0 0 12px; font-size: clamp(1.7rem, 8vw, 2.15rem) !important; font-weight: 400; line-height: 1.22; text-transform: none; } .public-hero-copy, .auth-copy, .legal-shell section p, .legal-shell section li, .public-section p, .public-section li { max-width: 60ch; margin: 0; color: var(--ink-70); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; } .public-actions { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 20px; } .public-cta { width: 100%; justify-content: center; } .public-home-content { width: 100%; margin: 0; } .public-proof { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); background: var(--surface); } .public-proof span { display: flex; min-height: 48px; align-items: center; padding: 12px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); color: var(--ink-70); font-size: 14px; } .public-proof span:last-child { border-bottom: 0; } .public-section { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; padding: 40px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); } .public-section-heading { margin: 0; padding: 0; border: 0; background: transparent; } .public-section > div:not(.public-section-heading):not(.public-product-list) { padding: 0 !important; margin: 0 !important; } .public-section > p, .public-section > div > p, .public-data li { font-size: 16px; } .public-section-heading h2 { max-width: 24ch; margin: 0; font-size: clamp(1.35rem, 5vw, 1.75rem); font-weight: 400; line-height: 1.25; text-transform: none; } .public-product-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--paper); } .public-product-list article { display: grid; min-width: 0; align-content: start; gap: 12px; padding: 26px; } .public-product-list article + article { border-left: 1px solid var(--line); } .public-product-list h3, .public-product-list p, .public-product-list strong { margin: 0; } .public-product-list h3 { color: var(--ink); font-size: 21px; } .public-product-list p { color: var(--ink-70); line-height: 1.65; } .public-product-list strong { color: var(--ink); font-size: 17px; } .public-product-list a { display: inline-flex; width: fit-content; min-height: 40px; align-items: center; margin-top: 2px; border-bottom: 1px solid currentColor; color: var(--ink); font-weight: 600; text-decoration: none; } .public-note { padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-40) !important; font-size: 14px !important; line-height: 1.6; } .public-grid { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); } .public-grid article, .public-grid article + article { min-height: 0; padding: 24px max(16px, env(safe-area-inset-left)); border: 0; border-bottom: 1px solid var(--line); border-radius: 0 !important; background: var(--bg) !important; color: var(--ink) !important; box-shadow: none !important; transform: none !important; } .public-grid article:last-child { border-bottom: 0; } .public-grid h3, .public-grid p, .public-grid .step { color: inherit; } .public-grid h3 { margin: 12px 0 8px; font-size: 17px; font-weight: 400; text-transform: none; } .public-grid p { max-width: 42ch; color: var(--ink-70); font-size: 15px; } .public-data ul { margin: 0; padding: 0; list-style: none; } .public-data li { padding: 12px 0; border-bottom: 1px solid var(--line); } .public-text-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; } .public-text-actions a, .public-footer a { display: inline-flex; min-height: var(--touch); align-items: center; color: var(--ink-70); font-size: 14px; text-decoration: none; } .public-footer { display: flex; min-height: 72px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 20px max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--surface); color: var(--ink-40); font-size: 14px; letter-spacing: 0; text-transform: none; } .public-footer span, .public-footer a { letter-spacing: 0 !important; text-transform: none !important; } .legal-shell { padding: 0 0 48px !important; overflow: visible !important; } html body.legal-page p, html body.legal-page li, html body.legal-page h1, html body.legal-page h2, html body.legal-page .guide-callout { max-width: 100%; overflow: visible !important; overflow-wrap: anywhere; word-break: keep-all; } .legal-shell > .eyebrow, .legal-shell > h1, .legal-shell > .legal-updated, .legal-shell > section, .guide-section, .guide-callout { padding-right: max(16px, env(safe-area-inset-right)); padding-left: max(16px, env(safe-area-inset-left)); } .legal-shell > h1 { margin: 8px 0 8px; } .legal-updated { margin-bottom: 16px; color: var(--ink-40) !important; font-size: 14px; } .legal-shell > section, .guide-section { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .legal-shell section h2, .legal-shell section h3, .legal-shell section p, .legal-shell section ul, .legal-shell section ol, .guide-section h2, .guide-section h3, .guide-section > p, .guide-list { grid-column: 1 / -1 !important; } .legal-shell section h2, .guide-section h2 { margin: 0 0 10px; font-size: 19px; font-weight: 600; text-transform: none; } .guide-callout { max-width: 64ch; padding-top: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--ink-70); font-size: 17px; font-weight: 400; line-height: 1.7; } .guide-list { margin: 0; padding-left: 1.15em; } .guide-list li { margin: 0 0 10px; } /* ========== Auth: mobile first ========== */ .auth-view { display: block !important; min-height: 100dvh; padding: 0 !important; overflow: visible !important; background: var(--bg) !important; } .auth-view::before { position: relative !important; inset: auto !important; display: block !important; width: 100%; min-height: 132px !important; max-height: 148px; border: 0 !important; background: var(--accent-soft) url("/assets/images/swiss-auto-queue.jpg") center / cover no-repeat !important; filter: var(--photo-filter); content: "" !important; } .auth-view::after { display: none !important; content: none !important; } .auth-shell { width: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 20px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)) !important; overflow: visible !important; border: 0 !important; background: var(--bg) !important; box-shadow: none !important; } .auth-language-picker, .auth-theme-picker { position: static !important; display: inline-flex; width: calc(50% - 6px); margin: 0 0 16px !important; vertical-align: top; } .auth-language-picker { margin-right: 8px !important; } .auth-copy, .auth-purpose { max-width: 60ch; color: var(--ink-70); overflow-wrap: anywhere; } .auth-purpose { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .auth-purpose > strong, .auth-purpose > span { flex: 1 1 100%; } .auth-purpose > strong { color: var(--ink); font-weight: 600; } .auth-purpose a { min-height: var(--touch); display: inline-flex; align-items: center; color: var(--ink); font-weight: 500; } html body .auth-tabs { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100% !important; margin: 16px 0 0; overflow: hidden; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--paper) !important; } .provider-tabs, .segmented, .lyrics-input-tabs { display: grid !important; width: 100%; border: 1px solid var(--line); border-radius: var(--radius) !important; background: var(--paper); } .provider-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body .auth-tabs > button { display: inline-flex !important; flex: none !important; justify-self: stretch; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: var(--touch); align-items: center; justify-content: center; padding: 0 8px !important; border: 0 !important; border-radius: 0 !important; background: var(--paper) !important; color: var(--ink-40) !important; font-size: 15px; white-space: nowrap; } html body .auth-tabs > button.active { background: var(--btn) !important; color: var(--btn-ink) !important; } .provider-tabs button, .segmented button, .lyrics-input-tabs button { min-width: 0; min-height: var(--touch); border: 0; border-right: 1px solid var(--line); background: var(--paper); color: var(--ink-40); font-size: 15px; } .auth-tabs button.active, .provider-tabs button.active, .segmented button.active, .lyrics-input-tabs button.active { background: var(--btn) !important; color: var(--btn-ink) !important; } .auth-form { display: grid; gap: 12px; margin-top: 16px; } .auth-form .primary, .auth-form button[type="submit"] { width: 100%; } .legal-links, .app-legal-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 20px; } .legal-links a, .app-legal-links a { display: inline-flex; min-height: var(--touch); align-items: center; color: var(--ink-40); font-size: 14px; letter-spacing: 0; text-transform: none; } /* ========== App workbench: mobile first ========== */ .app, #appView { width: 100% !important; height: auto !important; min-height: 100dvh !important; margin: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: var(--bg) !important; box-shadow: none !important; } .app[hidden], #appView[hidden], .auth-view[hidden], .app[hidden] .run-dock, #appView[hidden] .run-dock { display: none !important; } .app:not([hidden]) { display: flex !important; flex-direction: column; padding-bottom: calc(72px + env(safe-area-inset-bottom)); } /* ========== Billing and Playlist Studio operations ========== */ [data-admin-panel][hidden] { display: none !important; } .admin-view-tabs { display: flex; gap: 0; margin: 14px 0; overflow-x: auto; border: 1px solid var(--line); background: var(--paper); } .admin-view-tabs button { min-height: 44px; padding: 0 18px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink-70); font-size: 14px; font-weight: 700; white-space: nowrap; } .admin-view-tabs button:last-child { border-right: 0; } .admin-view-tabs button.is-active { background: var(--ink); color: var(--paper); } .playlist-admin-section { display: grid; gap: 16px; } .playlist-admin-heading { margin-bottom: 0; } .playlist-admin-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--paper); } .playlist-admin-metrics > div { display: grid; gap: 4px; min-width: 0; padding: 16px; border-right: 1px solid var(--line); } .playlist-admin-metrics > div:last-child { border-right: 0; } .playlist-admin-metrics strong { color: var(--ink); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; } .playlist-admin-metrics span { color: var(--ink-70); font-size: 13px; } .playlist-admin-grid { display: grid; grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr); gap: 16px; align-items: start; } .playlist-admin-grant-form { grid-template-columns: 1fr 1fr; } .playlist-admin-grant-form label:first-child, .playlist-admin-grant-form .primary, .playlist-admin-grant-form .helper-note { grid-column: 1 / -1; } .playlist-admin-order-panel .billing-order-list { max-height: 430px; overflow-y: auto; } .playlist-admin-users { min-width: 0; padding: 16px; border: 1px solid var(--line); background: var(--paper); } #playlistStudioUserTable td { vertical-align: top; } #playlistStudioUserTable td > strong, #playlistStudioUserTable td > small { display: block; } #playlistStudioUserTable td > small { margin-top: 4px; color: var(--ink-70); font-size: 12px; } .playlist-access-state { display: inline-flex; min-height: 24px; align-items: center; padding: 2px 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; } .playlist-access-state.mode-paid, .playlist-access-state.mode-manual, .playlist-access-state.mode-owner { border-color: var(--ok); color: var(--ok); } @media (min-width: 900px) { html body .billing-card { width: min(100%, 1120px) !important; } html body .billing-customer-plans { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch; } html body .billing-customer-plan { align-content: start; min-height: 322px; padding: 20px !important; } html body .billing-customer-plan.is-recommended { border-width: 2px !important; padding: 19px !important; } html body .billing-customer-plan > button { align-self: end; margin-top: auto; } } @media (max-width: 899px) { .playlist-admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .playlist-admin-metrics > div { border-bottom: 1px solid var(--line); } .playlist-admin-grid, .playlist-admin-grant-form { grid-template-columns: 1fr; } .playlist-admin-grant-form > * { grid-column: 1 !important; } } #appView, #appView button, #appView input, #appView select, #appView textarea { font-family: var(--font-sans); } #appView h2, #appView h3, #appView strong { font-weight: 700; letter-spacing: -0.015em; } .topbar { position: sticky; top: 0; z-index: 30; display: grid !important; height: auto !important; min-height: 56px; flex: none !important; grid-template-areas: "brand menu" "pills pills" "actions actions"; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); border: 0 !important; border-bottom: 1px solid var(--line) !important; background: var(--bg) !important; backdrop-filter: none !important; } .brand { grid-area: brand; min-width: 0; } .brand strong { overflow: hidden; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; text-transform: none; } .brand > div > span { color: var(--ink-40); font-size: 13px; letter-spacing: 0; text-transform: none; } .mobile-menu-button { display: inline-flex !important; grid-area: menu; min-width: var(--touch); min-height: var(--touch); align-items: center; justify-content: center; padding: 0 10px; } .status-pills { grid-area: pills; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; } .status-pills > span, .status-pills > span.is-off { min-height: 26px; padding: 0 9px; border: 1px solid var(--line) !important; border-radius: 999px !important; background: var(--ok-soft) !important; color: var(--ok) !important; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; } .status-pills > span.is-off { background: var(--warn-soft) !important; color: var(--warn) !important; } .top-actions { display: none; grid-area: actions; grid-template-columns: 1fr 1fr; width: 100%; padding-top: 8px; border-top: 1px solid var(--line); background: var(--bg); } .top-actions.is-open { display: grid; } .top-actions button, .top-actions a, .app-language-picker, .app-language-picker select, .app-theme-picker, .app-theme-picker select { width: 100%; min-height: var(--touch); } .notice { min-height: 40px; padding: 8px 16px 8px 14px; overflow: visible; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-left: 3px solid var(--ink) !important; background: var(--surface-muted) !important; color: var(--ink) !important; font-size: 15px; font-weight: 500; line-height: 1.5; white-space: normal; } .first-use-guide { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-muted); color: var(--ink); } html body .first-use-guide[hidden] { display: none !important; } .first-use-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .first-use-head strong { font-size: 16px; font-weight: 700; } .first-use-head .ghost { min-height: var(--touch); padding: 0 12px; background: transparent !important; } .first-use-next { max-width: 60ch; margin: 6px 0 0; color: var(--ink-70); font-size: 14px; line-height: 1.45; } .first-use-steps { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; } .first-use-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; min-height: var(--touch); padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; } .first-use-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; } .first-use-steps li strong { min-width: 0; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; } .first-use-steps li.is-current { border-color: var(--ink); background: var(--accent-soft); } .first-use-steps li.is-done { color: var(--ink-70); } .first-use-steps li.is-done span { background: var(--ok-soft); color: var(--ok); } .workspace-layout, .workspace, .configuration-column, .execution-column { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: var(--bg) !important; } html body .workspace-layout[hidden], html body .admin-workspace[hidden] { display: none !important; } /* ========== Admin operations console ========== */ body.admin-mode #notice, body.admin-mode #firstUseGuide, body.admin-mode .status-pills, body.admin-mode #billingButton, body.admin-mode #noticeBoardButton, body.admin-mode #lyricsNavLink, body.admin-mode #playlistStudioDownloadLink { display: none !important; } body.admin-mode .app-legal-links { display: none !important; } /* Admin pages scroll like a normal page: no fixed-height window with a second inner scrollbar. */ html body.admin-mode .app:not([hidden]), html body.admin-mode #appView:not([hidden]) { height: auto !important; min-height: 100dvh !important; overflow: visible !important; } html body.admin-mode .admin-workspace { overflow: visible !important; } .admin-eyebrow, .admin-section-index { display: none !important; } html body .admin-workspace { display: flex; width: min(100%, 1600px); max-width: 1600px; margin: 0 auto; padding: 22px 24px 40px; flex-direction: column; gap: 14px; background: var(--bg); } html body .admin-workspace > * { flex: 0 0 auto; } .admin-header { order: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0; padding: 6px 0 18px; border-bottom: 1px solid var(--line); } .admin-eyebrow, .admin-section-index { display: inline-flex; width: max-content; padding: 3px 7px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .admin-header h1 { margin: 0 0 4px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; line-height: 1.15; } .admin-header p { margin: 0; color: var(--ink-70); font-size: 15px; } .admin-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } .admin-header-actions > span { margin-right: 4px; color: var(--ink-70); font-size: 13px; font-variant-numeric: tabular-nums; } .admin-view-tabs { position: sticky; top: 70px; z-index: 24; order: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; overflow: visible; border: 1px solid var(--line); } .admin-view-tabs button { min-height: 48px; border-right: 1px solid var(--line); font-size: 15px; font-weight: 600; } .admin-view-tabs button.is-active { box-shadow: none; } .metric-grid { order: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); background: var(--paper); } .metric { min-width: 0; min-height: 112px; padding: 16px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; } .metric:last-child { border-right: 0; } .metric strong { margin-bottom: 12px; color: var(--ink); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; } .metric span { color: var(--ink-70); font-size: 13px; line-height: 1.35; } .metric.tone-danger strong, .metric.tone-attention strong { color: var(--danger); } .admin-resource-strip { order: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .admin-resource-strip > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-right: 1px solid var(--line); } .admin-resource-strip > div:last-child { border-right: 0; } .admin-resource-strip span { color: var(--ink-70); font-size: 13px; } .admin-resource-strip strong { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; } .admin-attention-section { order: 4; padding: 18px; border: 1px solid var(--line); background: var(--paper); } .admin-attention-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .admin-attention-item { display: grid; min-width: 0; min-height: 124px; align-content: start; justify-items: start; gap: 8px; padding: 14px !important; border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--surface) !important; color: var(--ink) !important; text-align: left; } .admin-attention-item.needs-action { border-left: 4px solid var(--danger) !important; cursor: pointer; } .admin-attention-item.needs-action:hover, .admin-attention-item.needs-action:focus-visible { border-color: var(--ink) !important; border-left-color: var(--danger) !important; background: var(--surface-hover) !important; } .admin-attention-item.is-clear { opacity: 0.68; } .admin-attention-item > span, .admin-attention-item > small { color: var(--ink-70); font-size: 13px; line-height: 1.45; } .admin-attention-item > strong { color: var(--ink); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; } .admin-workspace > .admin-users-section { order: 5; } .admin-workspace > .admin-jobs-section { order: 6; } .admin-workspace > .admin-chart-section { order: 7; } .admin-workspace > .admin-operations-section { order: 8; } .admin-workspace > .admin-billing-section, .admin-workspace > .playlist-admin-section { order: 2; } .admin-workspace > .section, .admin-attention-section { margin: 0; border-radius: 0; box-shadow: none; } .admin-notice-item p, .admin-notice-item time, .admin-notice-item small { color: var(--ink-70) !important; } .admin-notice-item strong { color: var(--ink) !important; } .user-billing-state, .playlist-access-state { display: inline-flex; min-height: 26px; align-items: center; padding: 2px 8px; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--surface) !important; color: var(--ink-70) !important; font-size: 12px; font-weight: 600; white-space: nowrap; } .user-billing-state.status-active, .user-billing-state.status-paid { border-color: var(--ok-soft) !important; background: var(--ok-soft) !important; color: var(--ok) !important; } .user-billing-state.status-expired, .user-billing-state.status-paused, .user-billing-state.status-suspended { border-color: var(--danger-soft) !important; background: var(--danger-soft) !important; color: var(--danger) !important; } .admin-workspace .section-heading { align-items: flex-start; margin-bottom: 14px; } .admin-workspace .section-heading > div:first-child { display: grid; gap: 5px; } .admin-workspace .section-heading h2, .admin-workspace .section-heading h3 { margin: 0; font-size: 20px; line-height: 1.25; } .admin-workspace .section-heading p { margin: 0; color: var(--ink-70); font-size: 14px; } .admin-table-heading { gap: 20px; } .admin-table-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } .admin-table-tools input, .admin-table-tools select { min-height: 42px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); } .admin-search-field input { width: min(280px, 44vw); } .admin-users-section .table-wrap, .admin-jobs-section .table-wrap { max-height: 480px; border: 1px solid var(--line); } .admin-users-section table, .admin-jobs-section table { min-width: 1120px; border-collapse: separate; border-spacing: 0; } .admin-users-section th, .admin-jobs-section th { position: sticky; top: 0; z-index: 2; background: var(--ink) !important; color: var(--paper) !important; font-size: 13px; white-space: nowrap; } .admin-users-section td, .admin-jobs-section td { max-width: 260px; color: var(--ink); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; } .admin-users-section td > strong, .admin-users-section td > small { display: block; } .admin-users-section td > small { margin-top: 3px; color: var(--ink-70); font-size: 12px; } [data-admin-user-row][data-user-status="pending"] { background: var(--accent-soft); } [data-admin-user-row][hidden], [data-admin-job-row][hidden] { display: none !important; } .admin-log-detail { width: min(320px, 100%); } .admin-log-detail summary { cursor: pointer; color: var(--ink); font-weight: 700; } .admin-log-detail p { max-height: 180px; margin: 8px 0 0; padding: 8px; overflow: auto; border: 1px solid var(--line); background: var(--surface); white-space: pre-wrap; } .admin-operations-section, .admin-billing-section { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 !important; overflow: visible; border: 0 !important; background: transparent !important; } .admin-operation-panel, .playlist-admin-users { padding: 18px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); } .billing-order-panel { grid-column: 1 / -1; } body.admin-mode .billing-readiness span { border: 1px solid var(--ink) !important; border-radius: 0 !important; background: var(--ink) !important; color: var(--paper) !important; } body.admin-mode .billing-readiness span.is-muted { opacity: 0.66; } body.admin-mode .billing-readiness span.is-warning { flex-basis: auto; border-color: var(--warn) !important; background: var(--warn-soft) !important; color: var(--ink) !important; opacity: 1; } .admin-chart-section { padding: 18px !important; border: 1px solid var(--line) !important; background: var(--paper) !important; } .admin-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .admin-chart-card { padding: 14px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); } @media (max-width: 1180px) { .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .metric:nth-child(3n) { border-right: 0; } .metric:nth-child(-n + 3) { border-bottom: 1px solid var(--line); } .admin-resource-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-resource-strip > div { border-bottom: 1px solid var(--line); } .admin-attention-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { body.admin-mode .topbar { position: static; } html body .admin-workspace { padding: 14px 12px 28px; } .admin-header { align-items: stretch; flex-direction: column; } .admin-header-actions { justify-content: flex-start; } .admin-header-actions > span { width: 100%; } .admin-view-tabs { position: static; grid-template-columns: 1fr; } .admin-view-tabs button { border-right: 0; border-bottom: 1px solid var(--ink); } .admin-view-tabs button:last-child { border-bottom: 0; } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric:nth-child(3n) { border-right: 1px solid var(--line); } .metric:nth-child(2n) { border-right: 0; } .metric:nth-child(-n + 4) { border-bottom: 1px solid var(--line); } .admin-resource-strip { grid-template-columns: 1fr; } .admin-resource-strip > div { border-right: 0; } .admin-attention-list, .admin-operations-section, .admin-billing-section, .admin-charts { grid-template-columns: 1fr; } .admin-table-heading { align-items: stretch; flex-direction: column; } .admin-table-tools { justify-content: stretch; } .admin-table-tools label, .admin-table-tools input, .admin-table-tools select { width: 100%; } .billing-order-panel { grid-column: auto; } } @media (max-width: 760px) { .public-product-list { grid-template-columns: 1fr; } .public-product-list article + article { border-top: 1px solid var(--line); border-left: 0; } } .workspace > .section, .workspace .section, .configuration-column > .section, .execution-column > .section { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 16px !important; overflow: visible !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: var(--bg) !important; } .workflow-nav { display: flex !important; position: sticky; top: 56px; z-index: 8; overflow-x: auto; background: var(--surface) !important; border-bottom: 1px solid var(--line); -webkit-overflow-scrolling: touch; } .workflow-nav-item { flex: 0 0 auto; min-width: 120px; min-height: var(--touch); border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink-40); font-size: 14px; font-weight: 650; } .workflow-nav-item.active { border-bottom: 2px solid var(--ink); background: var(--paper); color: var(--ink); } .workspace .section-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .workspace .section-heading h2 { font-size: 18px; font-weight: 750; text-transform: none; } .workspace .section-heading p { margin-top: 2px; color: var(--ink-40); font-size: 14px; line-height: 1.45; } .settings-grid, .language-toolbar, .source-language-segmented, .provider-tabs { display: grid; grid-template-columns: 1fr; gap: 12px; } .provider-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); background: var(--surface-muted); } .provider-tabs button { min-height: 38px; border: 0 !important; background: transparent !important; color: var(--ink-40) !important; font-weight: 650; } .provider-tabs button.active, .provider-tabs button[aria-checked="true"] { background: var(--paper) !important; color: var(--ink) !important; box-shadow: var(--shadow-soft) !important; } .source-language-segmented { grid-template-columns: 1fr 1fr; } /* Control labels wrap between words only (English locale: "Traditional Chinese" must not split mid-word). */ .source-language-segmented button, .provider-tabs button, .language-toolbar button, .auth-tabs button, .workflow-nav-item, .top-actions button, .top-actions a { word-break: keep-all; overflow-wrap: normal; hyphens: manual; } html body .language-section #languageCount { color: var(--ink); font-weight: 600; } .language-toolbar { grid-template-columns: 1fr 1fr; } .language-toolbar input { grid-column: 1 / -1; } .channel-list, .job-list, .result { max-height: none !important; } .configuration-column > .step-panel:not(.is-viewing) { display: none !important; } html body .language-section #languageList, html body #languageList { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: min(34dvh, 260px) !important; min-height: 180px; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; touch-action: pan-y; padding: 6px 10px 6px 6px; border: 1px solid var(--line); background: var(--paper); -webkit-overflow-scrolling: touch; } html body .language-option { min-height: 42px; padding: 7px 9px; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .language-scroll-hint { margin: 0 0 8px; color: var(--ink-40); font-size: 14px; line-height: 1.45; } .language-option, .channel-item, .job-item, .result, .admin-notice-item, .billing-plan-item, .admin-billing-order, .billing-history-item, .metric { border: 1px solid var(--line); background: var(--paper); } .language-option:has(input:checked) { border-color: var(--line-strong); background: var(--surface-selected); } .channel-list > .empty, .job-list > .empty, .result > .empty { margin: 0; padding: 18px 14px; border: 1px dashed var(--line-strong); background: var(--bg); color: var(--ink-40); font-size: 14px; line-height: 1.5; } .save-state { display: inline-flex; width: fit-content; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-70); font-weight: 600; } .save-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-40); } .save-state.saved, .save-state.is-saved { border: 1px solid var(--ok-soft); background: var(--ok-soft); color: var(--ok); } .save-state.saved::before, .save-state.is-saved::before { background: var(--ok); } .save-state.dirty, .save-state.saving { border-color: var(--warn-soft); background: var(--warn-soft); color: var(--warn); } .save-state.dirty::before, .save-state.saving::before { background: var(--warn); } .save-state.error { border-color: var(--danger-soft); background: var(--danger-soft); color: var(--danger); } .save-state.error::before { background: var(--danger); } /* Status rows: a symbol accompanies every status color (color is never the only signal). */ .job-item strong.status-completed::before, .admin-jobs-section td.status-completed::before { content: "\2713\00a0"; } .job-item strong.status-failed::before, .admin-jobs-section td.status-failed::before { content: "\2715\00a0"; } .job-item strong.status-partial_failed::before, .admin-jobs-section td.status-partial_failed::before { content: "\26a0\00a0"; } .job-item strong.status-running::before, .job-item strong.status-queued::before, .admin-jobs-section td.status-running::before, .admin-jobs-section td.status-queued::before { content: "\25cf\00a0"; } .job-item strong.status-completed, .admin-jobs-section td.status-completed { color: var(--ok); } .job-item strong.status-failed, .job-item small.status-failed, .admin-jobs-section td.status-failed { color: var(--danger); } .job-item strong.status-partial_failed, .admin-jobs-section td.status-partial_failed { color: var(--warn); } .run-dock { position: fixed; right: 0; bottom: 0; left: 0; z-index: 50; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg-translucent) !important; box-shadow: none !important; } .run-dock .run-button, #runButton { width: 100%; min-height: var(--touch); } .progress-track { overflow: hidden; border: 1px solid var(--line); background: var(--surface); } .progress-track > span, #progressBar { background: var(--accent); } .admin-workspace { padding: 16px; background: var(--bg); } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } html body .billing-modal, html body .notice-board-modal, html body .job-result-modal, html body .open-chat-modal, html body .maintenance-modal, html body .completion-modal, html body .referral-event-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding: 16px; overflow-x: hidden; overflow-y: auto; background: var(--backdrop) !important; backdrop-filter: none !important; } html body .billing-modal[hidden], html body .notice-board-modal[hidden], html body .job-result-modal[hidden], html body .open-chat-modal[hidden], html body .maintenance-modal[hidden], html body .completion-modal[hidden], html body .referral-event-modal[hidden] { display: none !important; } html body .open-chat-card, html body .billing-card, html body .notice-board-card, html body .job-result-card, html body .maintenance-card, html body .completion-card, html body .referral-event-card { position: relative; width: min(100%, 720px) !important; max-width: 100% !important; max-height: calc(100dvh - 32px); margin: auto; padding: 24px 20px !important; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--paper) !important; box-shadow: none !important; color: var(--ink) !important; } html body .billing-card { width: min(100%, 800px) !important; } html body .open-chat-card h2, html body .billing-card h2, html body .notice-board-card h2, html body .job-result-card h2, html body .maintenance-card h2 { margin: 12px 0 8px; color: var(--ink) !important; font-size: 22px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; } html body .open-chat-card p, html body .notice-board-intro, html body .billing-modal-content p, html body .billing-payment-step p, html body .billing-referral-panel p { margin: 0; color: var(--ink) !important; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; } html body .open-chat-close { position: absolute; top: 12px; right: 12px; width: var(--touch); height: var(--touch); border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--paper) !important; color: var(--ink) !important; font-size: 24px; line-height: 1; } html body .open-chat-badge, html body .billing-recommended-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--accent-soft) !important; color: var(--ink) !important; font-size: 13px; font-weight: 500; } html body .open-chat-url, html body .referral-event-code, html body .referral-event-benefits article, html body .job-result-stats div, html body .job-result-reasons { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--surface) !important; color: var(--ink) !important; } html body .open-chat-actions, html body .notice-board-actions, html body .referral-event-actions, html body .job-result-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; margin-top: 16px; } html body .open-chat-actions .primary, html body .open-chat-actions .secondary, html body .open-chat-actions .ghost, html body .billing-customer-plan > button, html body .billing-checkout-link, html body .billing-claim-form .primary { width: 100%; min-height: var(--touch); white-space: normal !important; overflow-wrap: anywhere; } html body .billing-modal-content, html body .billing-customer-plans, html body .billing-history-list, html body .billing-claim-form { display: grid; width: 100%; min-width: 0; gap: 12px; } html body .billing-customer-plans { grid-template-columns: 1fr !important; border: 0 !important; } html body .billing-customer-plan, html body .billing-current-access, html body .billing-payment-step, html body .billing-referral-panel, html body .billing-history-item, html body .billing-unavailable-help, html body .notice-board-item { display: grid; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 8px; padding: 16px !important; overflow: hidden !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--paper) !important; color: var(--ink) !important; } html body .billing-customer-plan.is-recommended { border-color: var(--ink) !important; background: var(--accent-soft) !important; box-shadow: none !important; } html body .billing-plan-name, html body .billing-customer-plan > div strong, html body .billing-history-item strong, html body .notice-board-item strong { display: block; min-width: 0; color: var(--ink) !important; font-size: 18px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; white-space: normal !important; } html body .billing-plan-price, html body .billing-payment-heading > strong, html body .billing-order-code-row strong { display: block; color: var(--ink) !important; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; white-space: normal !important; } html body .billing-plan-copy, html body .billing-plan-meta, html body .billing-customer-plan p, html body .billing-customer-plan small, html body .billing-current-access small, html body .billing-history-item small, html body .notice-board-item p, html body .notice-board-item time { min-width: 0; max-width: 100%; color: var(--ink) !important; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; white-space: normal !important; } html body .notice-board-item time, html body .billing-customer-plan small, html body .billing-current-access small, html body .billing-history-item small { color: var(--ink-70) !important; font-size: 14px; } html body .billing-plan-savings, html body .billing-trial-note, html body .billing-referral-reward { color: var(--ok) !important; } html body .billing-current-access, html body .billing-payment-heading, html body .billing-customer-plan > div, html body .billing-history-item > div, html body .billing-referral-code-row, html body .notice-board-item > div { display: grid !important; grid-template-columns: 1fr !important; align-items: start; justify-content: stretch; gap: 6px; } html body .billing-modal-content > h3 { margin: 8px 0 0; color: var(--ink) !important; font-size: 16px; font-weight: 500; } html body .referral-event-benefits { display: grid !important; grid-template-columns: 1fr !important; gap: 10px; } html body .referral-event-benefits strong, html body .job-result-stats strong { color: var(--ink) !important; } html body .job-result-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; } html body .referral-event-code { display: grid !important; grid-template-columns: 1fr !important; } html body .referral-event-benefits article, html body .job-result-stats div { min-height: 0; } .toast { border: 1px solid var(--line); border-radius: var(--radius) !important; background: var(--paper); color: var(--ink); box-shadow: none; } /* Lyrics */ .lyrics-topbar .theme-picker { width: 148px; margin-left: auto !important; } .lyrics-topbar { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; } .lyrics-intro, .lyrics-layout, .lyrics-section { padding: 20px 16px; } .lyrics-picker, .lyrics-section, .lyrics-history { border: 1px solid var(--line); background: var(--paper); } /* ========== Tablet ========== */ @media (min-width: 768px) { .public-nav-inner { grid-template-columns: auto 1fr auto auto; width: min(calc(100% - 48px), var(--content)) !important; margin: 0 auto !important; padding: 0 !important; min-height: 64px; } .legal-toolbar { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; width: min(calc(100% - 48px), var(--content)) !important; margin: 0 auto !important; padding: 0 !important; min-height: 64px; } .legal-toolbar .legal-back { grid-column: 2; grid-row: 1; margin-left: 12px; } .legal-toolbar .public-language-picker { grid-column: 4; grid-row: 1; width: 132px !important; } .legal-toolbar .public-theme-picker { grid-column: 5; grid-row: 1; width: 148px !important; } html body .legal-toolbar > .legal-start { grid-column: 6 !important; } .public-nav-actions { display: flex; align-items: center; gap: 10px; } .public-nav-inner > nav { grid-column: auto; justify-content: flex-end; overflow: visible; } .public-language-picker, .legal-toolbar .language-picker { grid-column: auto; width: 132px; } .public-nav-inner > .public-language-picker, .public-nav-inner > .public-theme-picker { grid-column: auto; grid-row: auto; } .public-nav-inner > .public-theme-picker { width: 148px !important; } .public-hero { grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr) !important; min-height: min(62dvh, 560px) !important; } .public-hero-media, .auto-stage { order: 0; min-height: 100% !important; max-height: none; border-left: 1px solid var(--line); } .public-hero-inner { justify-content: flex-end !important; padding: 48px 40px !important; } .public-hero h1, .legal-shell > h1, .auth-shell h1 { font-size: clamp(2rem, 3.3vw, 2.75rem) !important; } .public-actions { flex-direction: row; width: auto; } .public-cta { width: auto; } .public-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); } .public-proof span { justify-content: center; border-bottom: 0; border-right: 1px solid var(--line); } .public-section, .public-grid article, .legal-shell > .eyebrow, .legal-shell > h1, .legal-shell > .legal-updated, .legal-shell > section, .guide-section, .guide-callout, .public-footer { padding-right: 40px; padding-left: 40px; } .public-section { padding-top: 56px; padding-bottom: 56px; } .public-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, var(--content)); margin: 0 auto; border-bottom: 1px solid var(--line); } .public-grid article, .public-grid article + article { padding: 32px 28px 36px; border-bottom: 0; border-right: 1px solid var(--line); } .public-grid article:last-child { border-right: 0; } .public-home-content, .legal-shell > h1, .legal-shell > .eyebrow, .legal-shell > .legal-updated, .legal-shell > section, .guide-section, .guide-callout, .public-footer { width: min(100%, var(--content)); margin-left: auto; margin-right: auto; } .auth-view { display: grid !important; grid-template-columns: minmax(280px, 0.9fr) minmax(380px, 1.1fr); overflow: auto; } .auth-view::before { min-height: 100% !important; max-height: none; position: sticky; top: 0; } .auth-shell { max-width: 560px !important; margin: 0 auto !important; padding: 40px 40px 48px !important; overflow: auto; } .first-use-steps { grid-template-columns: 1fr 1fr; } } /* ========== Desktop app: compact operational workbench ========== */ @media (min-width: 960px) { html body:has(> #appView:not([hidden])) { height: auto !important; min-height: 100dvh; overflow: auto !important; } .app:not([hidden]), #appView:not([hidden]) { display: flex !important; flex-direction: column !important; width: min(calc(100% - 16px), 1760px) !important; height: calc(100dvh - 16px) !important; min-height: 640px !important; margin: 8px auto !important; padding-bottom: 0; overflow: hidden !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--paper) !important; } .topbar { position: relative; min-height: 56px; padding: 7px 14px; } .first-use-guide { display: grid; flex: 0 0 auto; grid-template-columns: minmax(220px, 280px) minmax(440px, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 18px; padding: 10px 14px; } .first-use-head { display: contents; } .first-use-head strong { grid-column: 1; grid-row: 1; } .first-use-head .ghost { grid-column: 3; grid-row: 1 / 3; align-self: center; white-space: nowrap; } .first-use-next { grid-column: 1; grid-row: 2; margin: 0; } .first-use-steps { grid-column: 2; grid-row: 1 / 3; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; } html body .workspace-layout { display: block !important; flex: 1 1 auto; min-height: 0 !important; overflow: hidden !important; } html body .workspace { display: grid !important; width: 100% !important; height: 100% !important; min-height: 0 !important; grid-template-columns: minmax(300px, 1fr) minmax(330px, 1.08fr) minmax(300px, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; overflow: hidden !important; background: var(--paper) !important; } html body .workspace > * { min-width: 0; min-height: 0; border-right: 1px solid var(--line); } html body .workspace > *:last-child { border-right: 0; } html body .configuration-column { display: flex !important; flex-direction: column !important; grid-column: 1 !important; grid-row: 1 !important; min-height: 0 !important; overflow: hidden !important; background: var(--paper) !important; } html body .execution-column { display: grid !important; grid-column: 3 !important; grid-row: 1 !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(260px, 1.2fr) minmax(140px, 0.8fr); min-height: 0 !important; overflow: hidden !important; background: var(--paper) !important; } html body .workflow-nav { position: relative; top: auto; display: grid !important; flex: 0 0 auto; grid-template-columns: 1fr 1fr; min-height: 44px; overflow: hidden; } html body .workflow-nav-item { min-height: 44px; } html body .configuration-column > .step-panel { display: none !important; } /* Setup must never shrink. Model + source language stay on screen. */ html body .configuration-column > .step-panel.is-viewing { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-height: 0 !important; padding: 14px !important; overflow: auto !important; background: var(--paper) !important; } html body .setup-section .section-heading { display: flex !important; align-items: center; } html body .setup-section .section-heading > div:first-child .step, html body .setup-section .section-heading > div:first-child > div > p, html body .channel-section .section-heading > div:first-child .step, html body .channel-section .section-heading > div:first-child > div > p { display: none; } html body .setup-section .section-heading > div:first-child, html body .channel-section .section-heading > div:first-child { display: block; } html body .setup-section .settings-actions { display: flex; align-items: center; gap: 6px; } html body .setup-section .save-state { min-height: 32px; padding: 5px 9px; font-size: 13px; } html body .setup-section .save-button { min-height: 36px; padding: 0 12px; font-size: 13px; white-space: nowrap; } html body .setup-section .settings-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px; } html body .setup-section .settings-grid > * { grid-column: 1 / -1 !important; min-width: 0; } html body .setup-section input, html body .setup-section select { min-height: 40px; font-size: 14px; } html body .setup-section .input-action button { min-height: 40px; } html body .setup-section small, html body .setup-section .helper-note { font-size: 13px; line-height: 1.45; } html body .source-language-segmented { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0; } html body .source-language-segmented button { min-height: 40px; padding: 4px 6px; font-size: 13px; line-height: 1.25; white-space: normal !important; } html body .channel-section .channel-list { display: grid !important; flex: 1 1 auto; align-content: start; gap: 6px; min-height: calc(3 * 48px + 2 * 6px) !important; padding-right: 4px; overflow-y: auto !important; } html body .channel-item { min-height: 48px !important; padding: 7px 8px; } html body .channel-section .oauth-help { flex: 0 0 auto; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.45; } html body .workspace .language-section { display: flex !important; flex-direction: column !important; grid-column: 2 !important; grid-row: 1 !important; min-height: 0 !important; padding: 14px !important; overflow: hidden !important; background: var(--paper) !important; } html body .language-section .section-heading .step, html body .language-section .section-heading p, html body .run-section .section-heading .step, html body .run-section .section-heading p, html body .history-section .section-heading .step, html body .history-section .section-heading p { display: none; } html body .language-section .section-heading > div, html body .run-section .section-heading > div, html body .history-section .section-heading > div { display: block; } html body .language-section #languageCount { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border: 1px solid var(--line); background: var(--surface-muted); color: var(--ink); font-size: 13px; white-space: nowrap; } html body .language-toolbar { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 5px; } html body .language-toolbar input { grid-column: 1 / -1 !important; min-height: 40px; font-size: 14px; } html body .language-toolbar button { min-height: 36px; padding: 0 5px; font-size: 13px; white-space: nowrap; } html body .language-scroll-hint { display: none !important; } html body .language-section #languageList, html body #languageList { display: grid !important; flex: 1 1 auto; grid-template-columns: 1fr 1fr !important; align-content: start; height: auto; min-height: 160px; max-height: none !important; margin-top: 10px; overflow-y: auto !important; } html body .language-option { min-height: 40px; padding: 6px 8px; font-size: 13px; } html body .execution-column > .run-section, html body .execution-column > .history-section { display: flex !important; flex-direction: column !important; min-height: 0 !important; padding: 14px !important; overflow: hidden !important; background: var(--paper) !important; } html body .execution-column > .run-section { grid-column: 1 !important; grid-row: 1 !important; border-bottom: 1px solid var(--line) !important; } html body .execution-column > .history-section { grid-column: 1 !important; grid-row: 2 !important; } html body .run-section textarea { min-height: 84px; max-height: 120px; padding: 10px 12px; font-size: 14px; line-height: 1.45; resize: vertical; } html body .run-section .video-paste-button { min-height: 38px; margin-top: 6px; font-size: 13px; } html body .run-section .run-button { min-height: 46px; margin-top: 8px; font-size: 15px; font-weight: 750; } html body .run-section .result-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } html body .run-section .result-heading strong { flex: 0 0 auto; white-space: nowrap; } html body .run-section .result-heading span { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ink-40); font-size: 13px; text-align: right; text-overflow: ellipsis; white-space: nowrap; } html body .run-section .result { flex: 1 1 auto; min-height: 76px; margin-top: 6px; padding: 10px; overflow-y: auto !important; font-size: 14px; } html body .history-section .section-heading { flex: 0 0 auto; margin-bottom: 8px; padding-bottom: 8px; } html body .history-section .job-list { flex: 1 1 auto; min-height: 0; padding-right: 4px; overflow-y: auto !important; } html body .history-section .job-item { padding: 10px; font-size: 14px; } .run-dock { position: static; padding: 0; border: 0; background: transparent !important; } .app-legal-links { flex: 0 0 auto; min-height: 36px; margin: 0; padding: 0 14px; align-items: center; justify-content: center; border-top: 1px solid var(--line); background: var(--paper); } .app-legal-links a { min-height: 36px; font-size: 13px; } } @media (min-width: 1280px) { .topbar { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 12px; } .mobile-menu-button { display: none !important; } .brand, .status-pills, .top-actions { grid-area: auto; } .brand { flex: 0 0 auto; } .status-pills { flex: 1 1 auto; } .top-actions { display: flex !important; width: auto; margin-left: auto; padding: 0; border: 0; background: transparent; } .top-actions button, .top-actions a, .app-language-picker, .app-theme-picker { width: auto; min-height: 36px; } .app-theme-picker select { min-height: 36px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .auto-cursor, * { animation: none !important; transition: none !important; } } @media (max-width: 767px) { html body .language-option { min-height: 48px; } html body .language-option span { overflow: visible; line-height: 1.25; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } .first-use-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .first-use-head .ghost { width: auto; min-height: 36px; padding: 0 9px; font-size: 12px; white-space: nowrap; } .first-use-next { margin-top: 5px; font-size: 13px; line-height: 1.4; } .first-use-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 8px; } .first-use-steps li { display: flex; min-width: 0; min-height: 60px; flex-direction: column; justify-content: center; gap: 4px; padding: 5px 3px; text-align: center; } .first-use-steps li span { width: 22px; height: 22px; } .first-use-steps li strong { font-size: 12px; line-height: 1.25; } html, html body { overflow-x: hidden !important; max-width: 100% !important; } html body .legal-toolbar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; width: 100% !important; margin: 0 !important; padding: 10px 16px !important; } html body .legal-toolbar .public-brand { flex: 1 1 auto; grid-column: auto !important; grid-row: auto !important; } html body .legal-toolbar .legal-start { display: inline-flex !important; flex: 0 0 auto; grid-column: auto !important; grid-row: auto !important; } html body .legal-toolbar .legal-back, html body .legal-toolbar .language-picker, html body .legal-toolbar .public-language-picker { flex: 1 1 100%; grid-column: auto !important; width: 100% !important; } html body .legal-toolbar .public-language-picker, html body .legal-toolbar .public-theme-picker { flex: 1 1 calc(50% - 4px); width: calc(50% - 4px) !important; } html body.legal-page .legal-shell, html body.legal-page .legal-shell > section, html body.legal-page .guide-section { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow: visible !important; } html body.legal-page .legal-shell p, html body.legal-page .legal-shell li, html body.legal-page .legal-shell h1, html body.legal-page .legal-shell h2, html body.legal-page .guide-callout, html body.legal-page .guide-list { display: block !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-right: 0 !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere !important; word-break: keep-all !important; } html body.guide-page .legal-start, html body.legal-page .legal-start { display: inline-flex !important; visibility: visible !important; background: var(--btn) !important; color: var(--btn-ink) !important; } html body.legal-page .legal-shell ul, html body.legal-page .legal-shell ol, html body.legal-page .guide-list { padding-left: 1.15em !important; } .nav-start, .legal-start, .public-nav-cta { display: inline-flex !important; min-height: 44px; align-items: center; padding: 0 12px !important; border: 1px solid var(--btn) !important; background: var(--btn) !important; color: var(--btn-ink) !important; font-size: 14px !important; text-decoration: none !important; } html body .auth-tabs > button { font-size: 14px !important; letter-spacing: 0 !important; } .auth-view::before { min-height: 168px !important; max-height: 200px; background-position: left center !important; background-size: cover !important; } } /* Scheme safety: the legacy sheets paint a few surfaces with literal white/black. Route them through tokens so both schemes stay coherent. */ .public-hero h1 { color: var(--ink); } .public-hero .public-hero-copy { color: var(--ink-70); } .brand strong { color: var(--ink); } .table-wrap table { background: var(--paper); color: var(--ink); } .table-wrap td { color: var(--ink); } .table-wrap th { background: var(--surface-muted); color: var(--ink); } .guide-note { border: 1px solid var(--line); background: var(--surface-muted); color: var(--ink); } .switch > span:first-of-type { border-color: var(--line-strong); background: var(--surface-muted); } .switch > span:first-of-type::after { background: var(--ink-40); } .switch input:checked + span:first-of-type { border-color: var(--btn); background: var(--btn); } .switch input:checked + span:first-of-type::after { background: var(--btn-ink); } html body .billing-modal-content { background: transparent !important; } .admin-workspace > .section { background: var(--paper); } .admin-chart-svg-track { fill: var(--surface-muted); stroke: var(--line); } .admin-chart-svg-bar { fill: var(--ink); } .admin-chart-svg-marker { fill: var(--ink-40); stroke: var(--ink-40); } .admin-chart-svg-value, .admin-chart-svg-weekday, .admin-chart-svg-date { fill: var(--ink-70); } /* ========== Public products and pricing ========== */ .products-page { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); } .products-shell { width: min(100%, 1280px); margin: 0 auto; border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--paper); } .products-toolbar { position: sticky; top: 0; z-index: 20; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--paper-translucent); } .products-toolbar nav, .products-footer nav, .product-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; } .products-toolbar nav a, .products-footer a { display: inline-flex; min-height: 40px; align-items: center; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; } .products-toolbar .public-language-picker { grid-column: auto; width: 132px !important; } .products-toolbar .public-theme-picker { grid-column: auto; width: 148px !important; } .products-toolbar .nav-start { padding: 10px 14px; background: var(--ink); color: var(--paper); } .products-hero { display: grid; min-height: 500px; grid-template-columns: minmax(0, 0.94fr) minmax(360px, 1.06fr); align-items: stretch; border-bottom: 1px solid var(--line); } .products-hero > div { display: grid; align-content: center; gap: 18px; padding: 64px 48px; } .products-hero .eyebrow { display: none; } .products-hero h1 { max-width: 16ch; margin: 0; font-size: clamp(34px, 4.4vw, 54px); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; } .products-hero p:not(.eyebrow) { max-width: 60ch; margin: 0; color: var(--ink-70); font-size: 17px; line-height: 1.75; } .products-hero-media { min-height: 420px; margin: 0; overflow: hidden; border-left: 1px solid var(--line); } .products-hero-media img { width: 100%; height: 100%; object-fit: cover; } .product-detail, .product-comparison, .product-terms { padding: 48px; border-bottom: 1px solid var(--line); scroll-margin-top: 86px; } .product-detail-heading { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .product-detail-heading > div { display: grid; gap: 4px; } .product-kicker { display: none; } .product-detail h2, .product-comparison h2, .product-terms h2 { margin: 0; font-size: clamp(27px, 3vw, 40px); line-height: 1.15; } .product-answer, .product-terms > p { max-width: 82ch; margin: 0 0 26px; color: var(--ink); font-size: 17px; line-height: 1.8; } .product-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 26px; border: 1px solid var(--line); } .product-facts article { display: grid; gap: 8px; padding: 18px; border-right: 1px solid var(--line); } .product-facts article:last-child { border-right: 0; } .product-facts strong { font-size: 16px; } .product-facts span { color: var(--ink-70); font-size: 13px; line-height: 1.5; } .product-pricing { display: grid; grid-template-columns: minmax(180px, 0.8fr) repeat(3, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid var(--ink); } .product-pricing h3, .product-pricing > div { display: grid; min-width: 0; align-content: center; gap: 5px; min-height: 112px; margin: 0; padding: 16px; border-right: 1px solid var(--line); } .product-pricing > div:last-child { border-right: 0; } .product-pricing > div.recommended { background: var(--ink); color: var(--paper); box-shadow: none; } .product-pricing span, .product-pricing small { color: inherit; font-size: 13px; opacity: 0.82; } .product-pricing strong { color: inherit; font-size: 23px; font-variant-numeric: tabular-nums; } .product-trial { margin: 0 0 22px; padding: 12px 14px; border-left: 3px solid var(--ink); background: var(--accent-soft); font-size: 15px; line-height: 1.6; } .product-actions a { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--ink); color: var(--ink); font-weight: 700; text-decoration: none; } .product-actions a.primary { background: var(--ink); color: var(--paper); } .product-comparison .table-wrap { margin-top: 24px; border: 1px solid var(--line); } .product-comparison table { width: 100%; min-width: 720px; border-collapse: collapse; } .product-comparison th, .product-comparison td { padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; } .product-comparison th { background: var(--ink); color: var(--paper); } .products-footer { display: grid; gap: 12px; padding: 26px 48px; } .products-footer p { margin: 0; color: var(--ink-70); font-size: 13px; } @media (max-width: 900px) { .products-hero { grid-template-columns: 1fr; } .products-hero-media { min-height: 320px; border-top: 1px solid var(--line); border-left: 0; } .product-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-facts article:nth-child(2n) { border-right: 0; } .product-facts article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } .product-pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); } .product-pricing h3 { grid-column: 1 / -1; min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); } } @media (max-width: 620px) { .products-toolbar { position: static; align-items: flex-start; flex-direction: column; padding: 14px 18px; } .products-hero > div, .product-detail, .product-comparison, .product-terms { padding: 32px 20px; } .products-hero h1 { font-size: 32px; } .product-facts, .product-pricing { grid-template-columns: 1fr; } .product-facts article, .product-facts article:nth-child(2n), .product-pricing > div { border-right: 0; border-bottom: 1px solid var(--line); } .product-pricing h3, .product-pricing > div { grid-column: auto; } .products-footer { padding: 24px 20px; } } /* Billing product switcher: keep all three services distinct inside one payment view. */ html body .billing-product-navigation { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); background: var(--accent-soft); } html body .billing-product-heading { display: flex; align-items: center; gap: 12px; } html body .billing-product-step { display: none; } html body .billing-product-heading > div { display: grid; gap: 2px; } html body .billing-product-heading strong { color: var(--ink); font-size: 19px; line-height: 1.3; } html body .billing-product-heading p { color: var(--ink-70) !important; font-size: 14px !important; } html body .billing-product-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: transparent; } html body .billing-product-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; min-height: 112px; align-items: center; gap: 14px; padding: 16px !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--paper) !important; color: var(--ink) !important; text-align: left; cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease; } html body .billing-product-option:hover, html body .billing-product-option:focus-visible { border-color: var(--ink) !important; background: var(--surface-hover) !important; } html body .billing-product-index { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid currentColor; border-radius: var(--radius); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } html body .billing-product-option-copy, html body .billing-product-option-meta { display: grid; min-width: 0; gap: 5px; } html body .billing-product-option-copy strong { font-size: 17px; line-height: 1.25; } html body .billing-product-option-copy small { color: var(--ink-70) !important; font-size: 13px; line-height: 1.35; } html body .billing-product-option-meta { justify-items: end; text-align: right; } html body .billing-product-option-meta strong { white-space: nowrap; font-size: 15px; font-variant-numeric: tabular-nums; } html body .billing-product-option-meta small { padding: 3px 7px; border: 1px solid currentColor; color: inherit !important; font-size: 12px; font-weight: 700; } html body .billing-product-option.is-active { border-color: var(--ink) !important; background: var(--ink) !important; color: var(--paper) !important; box-shadow: none; } html body .billing-product-option.is-active .billing-product-option-copy strong, html body .billing-product-option.is-active .billing-product-option-meta strong { color: var(--paper) !important; } html body .billing-product-option.is-active .billing-product-option-copy small { color: var(--paper) !important; opacity: 0.8; } html body .billing-product-option:active { transform: scale(0.99); } html body .billing-product-summary { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr); gap: 5px 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } html body .billing-product-summary > strong { grid-row: 1 / span 2; color: var(--ink); font-size: 18px; } html body .billing-product-summary > p, html body .billing-product-summary > small { margin: 0; color: var(--ink-70) !important; line-height: 1.45; } html body .billing-product-summary > small { font-size: 13px; } @media (max-width: 899px) { html body .billing-product-switcher { grid-template-columns: 1fr; } html body .billing-product-option { min-height: 96px; } html body .billing-product-summary { grid-template-columns: 1fr; } html body .billing-product-summary > strong { grid-row: auto; } } @media (max-width: 520px) { html body .billing-product-navigation { padding: 12px; } html body .billing-product-option { grid-template-columns: auto minmax(0, 1fr); } html body .billing-product-option-meta { grid-column: 2; justify-items: start; text-align: left; } } /* Final billing layout lock: annual plan remains the visual center on desktop. */ @media (min-width: 900px) { html body .billing-modal .billing-card { width: min(100%, 1120px) !important; } html body .billing-modal .billing-customer-plans { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; } html body .billing-modal .billing-customer-plan { min-height: 322px; } } html body .billing-policy-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } html body .billing-policy-note strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 14px; } html body .billing-policy-note p { margin: 0; color: var(--ink-70) !important; font-size: 12px; line-height: 1.5; } html body .billing-policy-note > a { min-height: 40px; padding: 9px 14px; border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); font-size: 12px; font-weight: 750; text-decoration: none; white-space: nowrap; } html body .billing-policy-note > a:hover { background: var(--ink); color: var(--paper); } @media (max-width: 640px) { html body .billing-policy-note { grid-template-columns: 1fr; } html body .billing-policy-note > a { width: 100%; text-align: center; } } html body .auth-policy-consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; color: var(--ink-70); font-size: 14px; line-height: 1.5; } html body .auth-policy-consent input { width: 20px; min-width: 20px; height: 20px; min-height: 20px; margin: 1px 0 0; accent-color: var(--ink); } html body .auth-policy-consent span { font: inherit; text-transform: none; } html body .policy-acceptance-card { width: min(100%, 620px); } html body .policy-acceptance-card form { display: grid; gap: 13px; margin-top: 20px; }