/* JYB ai.xxcvd.com — desktop operational polish v2 (scoped). Scope: PC viewports only (min-width:1024px and above). Editing rules: no API/Firebase config touched, no source secrets added. Targets: - Standalone pages (welcome-home, copywriting, douyin-transcribe, douyin-dashboard, newbie-guide, user-admin) — scoped under their jyb-page- body class. Common polish lives under .jyb-page. - SPA shell (index.html) — scoped under body.mx-authed / #root / body.mx-route-. Never touches body padding or generic headings/buttons globally; the React shell owns its own layout. - Injected sidebar entries — class-scoped (.mx-injected-nav). Mobile rules in mobile-operational-polish.css are unaffected because every block here is gated behind min-width media queries. Codex rework v2: every page-specific rule is now scoped, no unscoped body padding / unscoped toolbar / unscoped headings remain. */ /* ── Desktop design tokens (declared globally; only consumed via @media) ── */ :root{ --jyb-pc-bg:#f5f6fa; --jyb-pc-bg-soft:#fafbfd; --jyb-pc-panel:#ffffff; --jyb-pc-panel-2:#f8fafc; --jyb-pc-ink:#101828; --jyb-pc-ink-2:#344054; --jyb-pc-muted:#667085; --jyb-pc-line:#e4e7ec; --jyb-pc-line-soft:#eef0f4; --jyb-pc-gold:#c9a25e; --jyb-pc-gold-2:#b08a47; --jyb-pc-gold-soft:#f7ecd3; --jyb-pc-gold-ink:#7a5a28; --jyb-pc-focus:rgba(201,162,94,.32); --jyb-pc-shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06); --jyb-pc-shadow-md:0 4px 6px -2px rgba(16,24,40,.04),0 12px 24px -8px rgba(16,24,40,.08); --jyb-pc-shadow-lg:0 10px 15px -3px rgba(16,24,40,.06),0 24px 48px -12px rgba(16,24,40,.18); --jyb-pc-radius-sm:8px; --jyb-pc-radius-md:12px; --jyb-pc-radius-lg:16px; --jyb-pc-gap-1:6px; --jyb-pc-gap-2:10px; --jyb-pc-gap-3:14px; --jyb-pc-gap-4:20px; --jyb-pc-gap-5:28px; --jyb-pc-gap-6:40px; } /* ───────────────────────────────────────────────────────────────────────── 1. Universal desktop guards — anti-overflow + focus + font smoothing. These are safe to apply to every page (SPA + standalone) at ≥1024px. We deliberately do NOT touch body padding, body background, generic headings, generic .toolbar, generic .btn, or generic .card here. Those live under explicit page scopes below. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ html,body{ max-width:100%; overflow-x:hidden; } *{min-width:0} img,video,canvas,iframe,svg,table{max-width:100%} :focus-visible{ outline:2px solid var(--jyb-pc-focus)!important; outline-offset:2px!important; border-radius:6px; } body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } button,a,[role="button"]{ touch-action:auto; } } /* ───────────────────────────────────────────────────────────────────────── 2. Standalone-page baseline (.jyb-page). Applies to every page that opts in via . The SPA index.html does NOT carry .jyb-page, so none of these rules touch the React shell. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ .jyb-page{ background-image:none!important; /* kill cheap radial-blob backgrounds */ background-attachment:fixed; } .jyb-page input, .jyb-page select, .jyb-page textarea{ font-size:inherit!important; /* mobile rule forces 16px; reset on desktop */ } /* Containers */ .jyb-page .wrap{ max-width:1240px; margin:0 auto; padding:32px 40px 64px; } /* Headers */ .jyb-page .hdr{ align-items:flex-start; gap:16px; padding-bottom:18px; margin-bottom:28px; border-bottom:1px solid var(--jyb-pc-line); } .jyb-page .hdr h1{ font-size:1.75rem; line-height:1.25; letter-spacing:-.012em; } .jyb-page .hdr .sub, .jyb-page .hdr p, .jyb-page .hdr small{ color:var(--jyb-pc-muted); font-size:.8125rem; } .jyb-page .hdr-right{ gap:8px; flex-wrap:nowrap; } /* Section title rhythm (scoped, not global). */ .jyb-page h2{ font-size:1.25rem; line-height:1.4; margin-top:0; } .jyb-page h3{ font-size:1.0625rem; line-height:1.45; } /* Cards / panels (scoped to standalone pages). */ .jyb-page .card, .jyb-page .panel, .jyb-page .box, .jyb-page section.card, .jyb-page .surface{ background:var(--jyb-pc-panel); border:1px solid var(--jyb-pc-line); border-radius:var(--jyb-pc-radius-md); box-shadow:var(--jyb-pc-shadow-sm); transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease; } .jyb-page .card:hover, .jyb-page .panel:hover, .jyb-page .box:hover, .jyb-page .surface:hover{ border-color:#d6d9e1; box-shadow:var(--jyb-pc-shadow-md); } /* Buttons (scoped to standalone pages). */ .jyb-page .btn, .jyb-page button.btn, .jyb-page .button, .jyb-page [role="button"].btn{ border-radius:var(--jyb-pc-radius-sm); transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease; } .jyb-page .btn:hover:not(:disabled), .jyb-page .button:hover:not(:disabled){ box-shadow:var(--jyb-pc-shadow-sm); } .jyb-page .btn:focus-visible, .jyb-page .button:focus-visible{ box-shadow:0 0 0 3px var(--jyb-pc-focus); } .jyb-page .btn.primary, .jyb-page .btn.gold, .jyb-page .button.primary{ letter-spacing:.005em; } /* Tables (scoped). */ .jyb-page table{ width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; } .jyb-page table thead th{ position:sticky; top:0; background:var(--jyb-pc-panel-2); color:var(--jyb-pc-ink-2); font-weight:650; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--jyb-pc-line); padding:10px 14px; z-index:1; } .jyb-page table tbody td{ padding:11px 14px; border-bottom:1px solid var(--jyb-pc-line-soft); color:var(--jyb-pc-ink); } .jyb-page table tbody tr:nth-child(2n) td{ background:rgba(248,250,252,.6); } .jyb-page table tbody tr:hover td{ background:rgba(245,243,233,.45); } /* Form fields (scoped). */ .jyb-page input[type="text"], .jyb-page input[type="email"], .jyb-page input[type="password"], .jyb-page input[type="search"], .jyb-page input[type="number"], .jyb-page input[type="url"], .jyb-page input[type="tel"], .jyb-page textarea, .jyb-page select{ border-radius:var(--jyb-pc-radius-sm); transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease; } .jyb-page input:focus, .jyb-page textarea:focus, .jyb-page select:focus{ box-shadow:0 0 0 3px var(--jyb-pc-focus); } /* Empty / loading / error banners (scoped). */ .jyb-page .empty, .jyb-page .loading, .jyb-page .error, .jyb-page .placeholder{ border-radius:var(--jyb-pc-radius-md); padding:28px 24px; text-align:center; color:var(--jyb-pc-muted); background:var(--jyb-pc-panel-2); border:1px dashed var(--jyb-pc-line); } .jyb-page .error{ color:#b42318; background:#fef3f2; border:1px solid #fecdca; border-style:solid; } .jyb-page .loading{ color:var(--jyb-pc-ink-2); } /* Pills/badges (scoped). */ .jyb-page .badge, .jyb-page .pill, .jyb-page .tag, .jyb-page .chip{ border-radius:9999px; font-size:.72rem; font-weight:650; letter-spacing:.02em; padding:3px 10px; line-height:1.55; } /* Scrollbars on standalone pages — thin, visible only when needed. */ .jyb-page *::-webkit-scrollbar{width:10px;height:10px} .jyb-page *::-webkit-scrollbar-track{background:transparent} .jyb-page *::-webkit-scrollbar-thumb{ background:#c8cbd2; border-radius:8px; border:2px solid transparent; background-clip:padding-box; } .jyb-page *::-webkit-scrollbar-thumb:hover{background:#a3a8b1;background-clip:padding-box;border:2px solid transparent} } /* ───────────────────────────────────────────────────────────────────────── 3. SPA shell (index.html) — scoped to body.mx-authed. Never touches body padding (the React shell uses fixed-position aside + flex-row main; padding the body would shift the whole layout and create the grey empty canvas the user rejected). ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ body.mx-authed aside nav{ padding:14px 12px!important; } body.mx-authed aside nav a, body.mx-authed aside nav button{ font-size:.8125rem!important; line-height:1.25rem!important; border-radius:var(--jyb-pc-radius-sm); transition:background-color .15s ease,color .15s ease; } body.mx-authed aside nav a:hover, body.mx-authed aside nav button:hover{ background:rgba(193,154,75,.08)!important; color:var(--jyb-pc-gold-ink)!important; } body.mx-authed aside nav a:focus-visible, body.mx-authed aside nav button:focus-visible{ outline:2px solid var(--jyb-pc-focus); outline-offset:2px; } /* Make the SPA's split panes use the available height cleanly. */ body.mx-authed main [class*="flex-row"] > [class*="w-["]{ overflow-y:auto!important; overflow-x:hidden!important; } /* Right-hand 35% pane on generator/library reads as a "tip / context" panel on desktop — gentle separation, not a marketing tile. */ body.mx-authed main [class*="flex-row"] > [class*="w-[35%]"]{ background:linear-gradient(180deg,rgba(254,243,199,.22),rgba(255,255,255,.96))!important; border:1px solid rgba(193,154,75,.18)!important; border-radius:var(--jyb-pc-radius-md); padding:14px 14px!important; } } /* ───────────────────────────────────────────────────────────────────────── 4. Injected sidebar entries (新手训练, 文案工作台). Class-scoped — the bundle never accidentally inherits these because the class names live entirely under .mx-injected-nav. Active state mirrors the bundle's selected look with a gold accent so route=newbie does NOT keep "首页" highlighted. ───────────────────────────────────────────────────────────────────────── */ .mx-injected-nav{ display:flex!important; align-items:center!important; gap:.65rem!important; border:1px solid transparent!important; border-radius:.75rem!important; min-height:3.875rem!important; padding:.5rem .75rem!important; margin:0!important; text-decoration:none!important; color:#cbd5e1!important; font-size:1.125rem!important; line-height:1.5rem!important; font-weight:800!important; letter-spacing:.005em; transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease; -webkit-tap-highlight-color:transparent; } .mx-injected-nav:hover{ background:rgba(193,154,75,.10)!important; color:#f1ddae!important; border-color:rgba(193,154,75,.18)!important; } .mx-injected-nav:focus-visible{ outline:2px solid var(--jyb-pc-focus,rgba(193,154,75,.32))!important; outline-offset:2px; } /* INACTIVE icon chip — neutral, NEVER gold by default. The previous version shipped a permanent gold gradient on every injected entry's badge, which the validation harness read as "always active". Now the badge only goes gold when .mx-injected-active is also present. */ .mx-injected-nav .mx-injected-ico{ width:1.875rem;height:1.875rem; border-radius:.45rem; background:rgba(148,163,184,.18)!important; color:rgba(226,232,240,.82)!important; border:1px solid rgba(148,163,184,.22)!important; display:inline-flex;align-items:center;justify-content:center; font-weight:800;font-size:.875rem; flex:0 0 auto; box-shadow:none!important; } /* The amber-variant class is now just a no-op until active — same neutral look as the gold variant. Keeps the markup uniform but reads as inactive. */ .mx-injected-nav .mx-injected-ico-amber{ background:rgba(148,163,184,.18)!important; border-color:rgba(148,163,184,.22)!important; } .mx-injected-nav .mx-injected-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* ACTIVE row — solid gold gradient, white text, matches the bundle's own selected state so the harness color-checks (and human eyes) read it as the unambiguous current entry. */ .mx-injected-nav.mx-injected-active{ background:linear-gradient(135deg,var(--jyb-pc-gold) 0%,var(--jyb-pc-gold-2) 100%)!important; background-image:linear-gradient(135deg,var(--jyb-pc-gold) 0%,var(--jyb-pc-gold-2) 100%)!important; color:#ffffff!important; border-color:var(--jyb-pc-gold-2)!important; box-shadow:0 1px 2px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.18)!important; } .mx-injected-nav.mx-injected-active .mx-injected-ico, .mx-injected-nav.mx-injected-active .mx-injected-ico-amber{ background:rgba(255,255,255,.22)!important; color:#ffffff!important; border-color:rgba(255,255,255,.32)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important; } .mx-injected-nav.mx-injected-active .mx-injected-label{ color:#ffffff!important; } /* When 新手训练 / 文案工作台 are the active route, dim the bundle's "首页" highlight so it doesn't visually compete with the selected entry. Both selectors are scoped to body.mx-route-, never global. */ @media (min-width:1024px){ body.mx-route-newbie aside nav a[class*="bg-"], body.mx-route-newbie aside nav button[class*="bg-"], body.mx-route-copywriting aside nav a[class*="bg-"], body.mx-route-copywriting aside nav button[class*="bg-"]{ background:transparent!important; color:#cbd5e1!important; box-shadow:none!important; } } /* ───────────────────────────────────────────────────────────────────────── 5. copywriting.html — scoped under .jyb-page-copywriting. Dual-pane workbench (312px sidebar + main). Make it feel like an ops tool, not a chat app. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ .jyb-page-copywriting > .app{ height:100vh; overflow:hidden; } .jyb-page-copywriting .app .side{ background:var(--jyb-pc-panel)!important; border-right:1px solid var(--jyb-pc-line)!important; } .jyb-page-copywriting .app .side-head{ padding:18px 18px 14px!important; } .jyb-page-copywriting .app .side-head h1{ font-size:1.0625rem!important; font-weight:800!important; letter-spacing:-.005em!important; } .jyb-page-copywriting .app .side .who{ color:var(--jyb-pc-muted)!important; } .jyb-page-copywriting .app .btn{ min-height:34px; border-radius:var(--jyb-pc-radius-sm); } .jyb-page-copywriting .app .btn:hover:not(:disabled){ border-color:#d0d5dd; background:#f8fafc; } .jyb-page-copywriting .app .btn.primary{ background:#101828; border-color:#101828; } .jyb-page-copywriting .app .btn.primary:hover:not(:disabled){ background:#1d2939; border-color:#1d2939; } .jyb-page-copywriting .app .btn.gold{ background:linear-gradient(180deg,var(--jyb-pc-gold),var(--jyb-pc-gold-2)); border-color:var(--jyb-pc-gold-2); } .jyb-page-copywriting .app .btn.gold:hover:not(:disabled){ box-shadow:var(--jyb-pc-shadow-sm); filter:brightness(1.02); } .jyb-page-copywriting .app .btn.red{ background:#b42318; border-color:#b42318; } } /* ───────────────────────────────────────────────────────────────────────── 6. douyin-dashboard.html — scoped under .jyb-page-douyin-dashboard. This is where the previous unscoped `body { padding:24px 32px 64px }` lived. It's now confined to the dashboard body class, so the SPA shell never inherits it. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ body.jyb-page-douyin-dashboard{ padding:24px 32px 64px!important; } .jyb-page-douyin-dashboard .toolbar{ padding:0 0 18px!important; align-items:center; border-bottom:1px solid var(--jyb-pc-line); margin-bottom:24px; } .jyb-page-douyin-dashboard .toolbar-title{ font-size:1.5rem!important; letter-spacing:-.012em!important; } .jyb-page-douyin-dashboard .toolbar-actions{ gap:8px!important; } .jyb-page-douyin-dashboard .cookie-badge{ padding:4px 10px!important; font-size:.7rem!important; border-radius:9999px; transition:background-color .15s ease,border-color .15s ease; } .jyb-page-douyin-dashboard .cookie-badge:hover{ filter:saturate(1.05); } } /* ───────────────────────────────────────────────────────────────────────── 7. PC breakpoint refinements 1280, 1366, 1440, 1536, 1920, 2560 — every body padding rule is now scoped to a specific .jyb-page-* class. SPA shell is untouched. ───────────────────────────────────────────────────────────────────────── */ /* 1280–1366: dense, conservative width to avoid wasted gutters. */ @media (min-width:1280px) and (max-width:1439px){ .jyb-page .wrap{max-width:1180px;padding:30px 36px 56px} body.jyb-page-douyin-dashboard{padding-left:max(28px,env(safe-area-inset-left))!important} } /* 1366×768 specifically — short height; keep header compact. */ @media (min-width:1280px) and (max-height:800px){ .jyb-page .wrap{padding-top:24px;padding-bottom:48px} .jyb-page .hdr{padding-bottom:14px;margin-bottom:20px} .jyb-page .hdr h1{font-size:1.5rem} } /* 1440–1535: comfortable. */ @media (min-width:1440px) and (max-width:1535px){ .jyb-page .wrap{max-width:1240px;padding:34px 40px 64px} } /* 1536–1919: roomy. */ @media (min-width:1536px) and (max-width:1919px){ .jyb-page .wrap{max-width:1320px;padding:36px 48px 72px} .jyb-page .hdr h1{font-size:1.875rem} } /* 1920–2559: wide pro displays. */ @media (min-width:1920px) and (max-width:2559px){ .jyb-page .wrap{max-width:1440px;padding:40px 56px 80px} .jyb-page{font-size:15.5px} .jyb-page .hdr h1{font-size:2rem} } /* 2560+: keep content centered, prevent line-length blowout. */ @media (min-width:2560px){ .jyb-page .wrap{max-width:1560px;padding:48px 64px 96px} .jyb-page{font-size:16px} .jyb-page .hdr h1{font-size:2.125rem} /* Cap SPA shell content blocks too — scoped under body.mx-authed. */ body.mx-authed main [class*="flex-row"]{max-width:2200px;margin-left:auto;margin-right:auto} } /* ───────────────────────────────────────────────────────────────────────── 8. Reduced-motion respect. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px) and (prefers-reduced-motion:reduce){ *, *::before, *::after{ transition-duration:.001ms!important; animation-duration:.001ms!important; } } /* ───────────────────────────────────────────────────────────────────────── 9. Print — keep the operational pages legible if exported. Scoped to .jyb-page so SPA print is left to the bundle's own logic. ───────────────────────────────────────────────────────────────────────── */ @media print{ .jyb-page .toolbar-actions, .jyb-page aside, .jyb-page .hdr-right{display:none!important} .jyb-page{background:#fff!important;color:#000!important} .jyb-page .card, .jyb-page .panel, .jyb-page .box{box-shadow:none!important;border-color:#bbb!important} } /* ───────────────────────────────────────────────────────────────────────── 10. Generator route (#/generator) — scoped under body.mx-authed.mx-route-generator The bundle ships a flex-row split: w-[65%] writing canvas + w-[35%] templates/categories pane. Codex's screenshot showed (a) a heavy yellow border + cream background on the right pane that overpowered the canvas, (b) decorative "1"/"2" gold-gradient badges on the workflow steps that read as cheap, (c) cramped gap between the two panes, and (d) an awkward gold double-ring on the Generate button. Replace all of those with a quiet, balanced workbench grid. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ /* Balanced workbench grid: more breathing room, neutral inner padding. */ body.mx-authed.mx-route-generator main [class*="flex-row"]{ gap:18px!important; padding:18px 22px!important; align-items:stretch!important; } /* Right template/category pane: panel-2 neutral, no yellow border. */ body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[35%]"]{ background:var(--jyb-pc-panel)!important; border:1px solid var(--jyb-pc-line)!important; border-radius:var(--jyb-pc-radius-md)!important; padding:14px 14px!important; box-shadow:var(--jyb-pc-shadow-sm)!important; } /* Left writing canvas: same panel chrome, primary visual weight. */ body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[65%]"]{ background:var(--jyb-pc-panel)!important; border:1px solid var(--jyb-pc-line)!important; border-radius:var(--jyb-pc-radius-md)!important; box-shadow:var(--jyb-pc-shadow-sm)!important; overflow:hidden!important; } /* Codex round-3 spec — exact selectors and grid columns the harness looks for. JS tagGeneratorPanes() in index.html locates the bundle's two-pane row and sets: [data-jyb-generator-wrap="1"] on the row container [data-jyb-generator-main="1"] on the writing canvas [data-jyb-generator-side="1"] on the template panel display:grid + minmax(0,1fr) minmax(320px,420px) is unambiguous — left grows, right capped. Beats Tailwind w-[65%]/w-[35%] literal widths AND inline width styles, because grid items derive their size from the track. */ body.mx-route-generator [data-jyb-generator-wrap="1"]{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(320px,420px)!important; gap:18px!important; align-items:stretch!important; width:100%!important; } body.mx-route-generator [data-jyb-generator-main="1"]{ width:auto!important; min-width:0!important; max-width:none!important; flex:none!important; grid-column:1!important; background:var(--jyb-pc-panel)!important; border:1px solid var(--jyb-pc-line)!important; border-radius:var(--jyb-pc-radius-md)!important; box-shadow:var(--jyb-pc-shadow-sm)!important; overflow:hidden!important; } body.mx-route-generator [data-jyb-generator-side="1"]{ width:auto!important; max-width:420px!important; flex:none!important; grid-column:2!important; background:var(--jyb-pc-panel)!important; background-image:none!important; border:1px solid var(--jyb-pc-line)!important; border-radius:var(--jyb-pc-radius-md)!important; box-shadow:var(--jyb-pc-shadow-sm)!important; padding:14px!important; } @media (min-width:1920px){ body.mx-route-generator [data-jyb-generator-wrap="1"]{ grid-template-columns:minmax(0,1fr) minmax(360px,460px)!important; } body.mx-route-generator [data-jyb-generator-side="1"]{ max-width:460px!important; } } /* Fallback for the case where tagGeneratorPanes() couldn't run yet (e.g., immediate first paint before MutationObserver fires). Keep the older class-based selectors as a safety net so right pane never overpowers. */ body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[65%]"]{ flex:1 1 auto!important; width:auto!important; min-width:0!important; max-width:none!important; } body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[35%]"]{ flex:0 0 360px!important; width:360px!important; min-width:300px!important; max-width:420px!important; } body.mx-authed.mx-route-generator main [class*="w-[65%]"][style*="width"]{ width:auto!important; } body.mx-authed.mx-route-generator main [class*="w-[35%]"][style*="width"]{ max-width:420px!important; } /* Quiet workflow numbering — replace the deleted "1" gold-gradient badge with a small flat numeral. The "2" badge on the Generate button is dropped entirely; the button's primary color already signals action. */ body.mx-authed.mx-route-generator main [class*="w-[35%]"] span.text-xs.font-bold.text-slate-600{ position:relative!important; padding-left:1.55rem!important; display:inline-flex!important; align-items:center!important; } body.mx-authed.mx-route-generator main [class*="w-[35%]"] span.text-xs.font-bold.text-slate-600::before{ content:"1"; position:absolute; left:0;top:50%;transform:translateY(-50%); width:1.1rem;height:1.1rem; border-radius:.35rem; background:var(--jyb-pc-panel-2); color:var(--jyb-pc-ink-2); font-weight:700;font-size:.65rem; border:1px solid var(--jyb-pc-line); display:inline-flex;align-items:center;justify-content:center; box-shadow:none; } /* Section header chip ("风格" / "模板") — quieter, integrated. */ body.mx-authed.mx-route-generator main [class*="w-[35%]"] div[data-mx-hint="mood"]::before{ content:"风格"; display:block; width:fit-content; font-size:.6875rem; color:var(--jyb-pc-muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:9999px; background:var(--jyb-pc-panel-2); border:1px solid var(--jyb-pc-line); margin-bottom:.5rem; order:-1; } body.mx-authed.mx-route-generator main [class*="w-[35%]"] div[data-mx-hint="template"]::before{ content:"模板"; display:block; width:fit-content; font-size:.6875rem; color:var(--jyb-pc-muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:9999px; background:var(--jyb-pc-panel-2); border:1px solid var(--jyb-pc-line); grid-column:1 / -1; margin-bottom:.35rem; } /* Bundled "uppercase muted heading" - left as label, not microscopic. */ body.mx-authed.mx-route-generator main div[class*="text-[10px]"][class*="uppercase"][class*="text-slate-400"]{ font-size:.75rem!important; color:var(--jyb-pc-muted)!important; font-weight:600!important; letter-spacing:.04em!important; } /* Sticky bottom action region — single calm shadow, no gold double-ring. */ body.mx-authed.mx-route-generator main [class*="w-[65%]"] > .p-3.bg-white.border-t.shrink-0{ box-shadow:0 -1px 0 var(--jyb-pc-line),0 -8px 20px -16px rgba(16,24,40,.18)!important; background:var(--jyb-pc-panel)!important; padding:14px 16px!important; } body.mx-authed.mx-route-generator main [class*="w-[65%]"] > .p-3.bg-white.border-t button.bg-mx-dark.shadow-xl.h-12{ box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 16px -6px rgba(16,24,40,.18)!important; border-radius:var(--jyb-pc-radius-sm)!important; } /* No more "::before content:'2'" gold badge on the Generate button. */ body.mx-authed.mx-route-generator main [class*="w-[65%]"] > .p-3.bg-white.border-t button.bg-mx-dark.shadow-xl.h-12::before{ content:none!important; display:none!important; } /* Inline amber-50/yellow-50 callouts inside the canvas — neutral panel accent on the left, no cream gradient. */ body.mx-authed.mx-route-generator main [class*="w-[65%]"] [class*="bg-amber-50"], body.mx-authed.mx-route-generator main [class*="w-[65%]"] [class*="bg-yellow-50"]{ border-left:3px solid var(--jyb-pc-line)!important; background:var(--jyb-pc-panel-2)!important; } /* Right pane button hover — neutral instead of cream-yellow. */ body.mx-authed.mx-route-generator main [class*="w-[35%]"] button[class*="rounded"]:not([class*="bg-mx-dark"]):not([class*="bg-amber-500"]):hover{ border-color:var(--jyb-pc-line)!important; background:var(--jyb-pc-panel-2)!important; transform:none!important; } } /* Override the body.mx-authed-scoped right-pane treatment from §3 only on the generator route, since §3's cream gradient was the source of the "yellow" complaint there. Library/other routes keep §3's tip-panel feel. Use BOTH the [class*="w-[35%]"] selector AND a structural :nth-child(2) fallback — if the bundle ever renames its width utility (w-1/3, w-[33%], etc.) the structural selector keeps the override working. */ @media (min-width:1024px){ body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[35%]"], body.mx-authed.mx-route-generator main [class*="flex-row"] > div:nth-child(2), body.mx-authed.mx-route-generator main [class*="flex-row"] > section:nth-child(2), body.mx-authed.mx-route-generator main [class*="flex-row"] > aside:nth-child(2){ background:var(--jyb-pc-panel)!important; background-image:none!important; border:1px solid var(--jyb-pc-line)!important; border-radius:var(--jyb-pc-radius-md)!important; box-shadow:var(--jyb-pc-shadow-sm)!important; } /* Anti-amber: any child element inside the right pane that the bundle paints with bg-amber-* / bg-yellow-* / bg-mx-gold-* is forced neutral so the right pane reads as a single quiet panel. */ body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[35%]"] [class*="bg-amber"], body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[35%]"] [class*="bg-yellow"], body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[35%]"] [class*="bg-mx-gold"], body.mx-authed.mx-route-generator main [class*="flex-row"] > div:nth-child(2) [class*="bg-amber"], body.mx-authed.mx-route-generator main [class*="flex-row"] > div:nth-child(2) [class*="bg-yellow"]{ background:var(--jyb-pc-panel-2)!important; background-image:none!important; border-color:var(--jyb-pc-line)!important; } /* Force-neutralize any direct yellow border on the right pane container — covers Tailwind border-amber/border-yellow utilities. */ body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[35%]"][class*="border-amber"], body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[35%]"][class*="border-yellow"], body.mx-authed.mx-route-generator main [class*="flex-row"] > div:nth-child(2)[class*="border-amber"], body.mx-authed.mx-route-generator main [class*="flex-row"] > div:nth-child(2)[class*="border-yellow"]{ border-color:var(--jyb-pc-line)!important; } } /* ───────────────────────────────────────────────────────────────────────── 13. Canonical active-state class (.mx-route-active) — Codex round-2 spec. Exactly one .mx-route-active per route, applied by applyNavActive in index.html. Visibly gold INDEPENDENT of bundle utility class names; uses class+attribute specificity + !important to beat both Tailwind classes and inline gold the bundle may have painted. .mx-bundle-deactivated covers the inverse — every other entry forced transparent so no other gold remains visible. ───────────────────────────────────────────────────────────────────────── */ body.mx-authed aside .mx-route-active, body.mx-authed aside nav .mx-route-active{ background:linear-gradient(135deg,var(--jyb-pc-gold) 0%,var(--jyb-pc-gold-2) 100%)!important; background-image:linear-gradient(135deg,var(--jyb-pc-gold) 0%,var(--jyb-pc-gold-2) 100%)!important; background-color:var(--jyb-pc-gold)!important; color:#ffffff!important; border-color:var(--jyb-pc-gold-2)!important; box-shadow:0 1px 2px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.18)!important; } body.mx-authed aside .mx-route-active *, body.mx-authed aside .mx-route-active span, body.mx-authed aside .mx-route-active svg{ color:#ffffff!important; fill:currentColor!important; } body.mx-authed aside .mx-route-active .mx-injected-ico, body.mx-authed aside .mx-route-active .mx-injected-ico-amber{ background:rgba(255,255,255,.22)!important; color:#ffffff!important; border-color:rgba(255,255,255,.32)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important; } body.mx-authed aside nav a.mx-bundle-deactivated, body.mx-authed aside nav button.mx-bundle-deactivated, body.mx-authed aside a.mx-bundle-deactivated, body.mx-authed aside button.mx-bundle-deactivated{ background:transparent!important; background-image:none!important; background-color:transparent!important; color:rgb(203,213,225)!important; box-shadow:none!important; border-color:transparent!important; } /* ───────────────────────────────────────────────────────────────────────── 14. Skeleton loaders (Codex regression #6) — replace the cheap "…" and "加载中" placeholders on welcome-home stat cards with a polished shimmer block. CSS-only; HTML side embeds a . ───────────────────────────────────────────────────────────────────────── */ .jyb-skel{ display:inline-block; background:linear-gradient(90deg,#eef0f5 0%,#f6f7fb 40%,#f6f7fb 60%,#eef0f5 100%); background-size:200% 100%; animation:jyb-skel-shimmer 1.4s linear infinite; border-radius:6px; vertical-align:middle; color:transparent!important; } .jyb-skel-num{width:42px;height:1.4em} .jyb-skel-text{width:80px;height:.95em;border-radius:4px} .jyb-skel-text-wide{width:140px;height:.95em;border-radius:4px} @keyframes jyb-skel-shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* When .jyb-shell-ready, no need for shimmer if data already arrived (welcome-home swaps the inner skeleton for real data via JS). */ /* ───────────────────────────────────────────────────────────────────────── 15. Copywriting empty state (Codex regression #5). The copywriting workspace shows a large gray empty area when no doc is selected. Polish it with a centered illustrative empty state that reads as intentional, not "the page didn't render". ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ .jyb-page-copywriting .empty, .jyb-page-copywriting .workspace-main > .empty, .jyb-page-copywriting #workspace > .empty{ display:flex!important; flex-direction:column; align-items:center; justify-content:center; min-height:60vh; padding:48px 32px; background:var(--jyb-pc-panel-2); border:1px dashed var(--jyb-pc-line); border-radius:var(--jyb-pc-radius-md); color:var(--jyb-pc-muted); font-size:.9375rem; line-height:1.6; text-align:center; margin:24px auto; max-width:520px; } .jyb-page-copywriting .empty::before{ content:"📝"; font-size:2.5rem; line-height:1; margin-bottom:14px; filter:saturate(.6); } } /* ───────────────────────────────────────────────────────────────────────── 16. Newbie page operational polish (Codex regression #2). The standalone newbie-guide.html is well-structured but reads as "too plain / disconnected" because its warm cream palette + gradient gold section badges feel like a marketing card, not an ops console section. Tighten card rhythm, flatten the section numbering, and align the header with the same scale as welcome/user-admin so all four feel like one product surface. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ /* Page header — same scale as user-admin / welcome. */ .jyb-page-newbie .wrap{ max-width:980px!important; padding:32px 40px 64px!important; } .jyb-page-newbie .hdr{ padding-bottom:18px!important; margin-bottom:24px!important; border-bottom:1px solid var(--jyb-pc-line)!important; } .jyb-page-newbie .hdr-left h1{ font-size:1.625rem!important; line-height:1.25!important; letter-spacing:-.012em!important; } .jyb-page-newbie .hdr-left .sub{ color:var(--jyb-pc-muted)!important; font-size:.8125rem!important; } .jyb-page-newbie .meta-bar{ background:var(--jyb-pc-panel-2)!important; border:1px solid var(--jyb-pc-line)!important; color:var(--jyb-pc-muted)!important; padding:10px 14px!important; font-size:.75rem!important; border-radius:var(--jyb-pc-radius-sm)!important; } /* Section cards — flat operational treatment, not warm cream. */ .jyb-page-newbie .section{ background:var(--jyb-pc-panel)!important; border:1px solid var(--jyb-pc-line)!important; border-radius:var(--jyb-pc-radius-md)!important; box-shadow:var(--jyb-pc-shadow-sm)!important; margin-bottom:14px!important; } .jyb-page-newbie .section-hdr{ padding:14px 20px 12px!important; background:transparent!important; border-bottom:1px solid var(--jyb-pc-line-soft)!important; align-items:center!important; } .jyb-page-newbie .section-num{ width:1.85rem!important; height:1.85rem!important; border-radius:8px!important; background:var(--jyb-pc-panel-2)!important; color:var(--jyb-pc-ink)!important; border:1px solid var(--jyb-pc-line)!important; box-shadow:none!important; font-size:.8125rem!important; font-weight:700!important; } .jyb-page-newbie .section-title{ font-size:1rem!important; font-weight:700!important; letter-spacing:-.005em!important; color:var(--jyb-pc-ink)!important; } .jyb-page-newbie .section-body{ padding:18px 22px 20px!important; font-size:.9375rem!important; line-height:1.75!important; color:var(--jyb-pc-ink-2)!important; } .jyb-page-newbie .section-body strong{ background:none!important; padding:0!important; color:var(--jyb-pc-gold-ink)!important; font-weight:650!important; } .jyb-page-newbie .section-body code{ background:var(--jyb-pc-panel-2)!important; color:var(--jyb-pc-ink)!important; border:1px solid var(--jyb-pc-line)!important; } .jyb-page-newbie .section-body .callout{ background:var(--jyb-pc-panel-2)!important; border:1px solid var(--jyb-pc-line)!important; border-radius:var(--jyb-pc-radius-sm)!important; } .jyb-page-newbie .section-body h3{ color:var(--jyb-pc-ink)!important; font-size:.9375rem!important; margin:1rem 0 .4rem!important; } .jyb-page-newbie .section-body h3::before{ background:var(--jyb-pc-gold)!important; } /* Edit affordance — clean icon button, not a colorful pill. */ .jyb-page-newbie .section-controls .btn, .jyb-page-newbie .hdr-actions .btn{ background:var(--jyb-pc-panel)!important; border:1px solid var(--jyb-pc-line)!important; color:var(--jyb-pc-ink-2)!important; border-radius:var(--jyb-pc-radius-sm)!important; font-size:.8125rem!important; padding:6px 12px!important; } .jyb-page-newbie .section-controls .btn:hover, .jyb-page-newbie .hdr-actions .btn:hover{ background:var(--jyb-pc-panel-2)!important; border-color:#d6d9e1!important; color:var(--jyb-pc-ink)!important; transform:none!important; } .jyb-page-newbie .footer-hint{ color:var(--jyb-pc-muted)!important; border-top:1px solid var(--jyb-pc-line)!important; border-top-style:dashed!important; } } /* ───────────────────────────────────────────────────────────────────────── 11. Shell loading / first-paint flicker mitigation. The bundle's React tree paints before iframe overlays load. Without a placeholder, the user sees the SPA shell flash to a blank canvas while welcome-home / copywriting / newbie / etc iframes are still loading. Use a body-class transition driven by the route patcher: jyb-shell-loading while !isAuthed() OR no overlay frame has fired its load event yet, jyb-shell-ready once the active overlay is interactive. ───────────────────────────────────────────────────────────────────────── */ .jyb-shell-loading #douyin-overlay, .jyb-shell-loading #newbie-overlay, .jyb-shell-loading #transcribe-overlay, .jyb-shell-loading #welcome-overlay, .jyb-shell-loading #useradmin-overlay, .jyb-shell-loading #copywriting-overlay{ background:var(--jyb-pc-bg-soft,#fafbfd)!important; } /* Soft scrim that covers the iframe while it's still loading; fades after the load event (handled in JS by removing jyb-shell-loading on that iframe). */ .jyb-shell-loading [id$="-overlay"]::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(250,251,253,.92)); pointer-events:none; transition:opacity .25s ease; opacity:1; z-index:1; } /* Once shell is ready, fade scrim out; keep it 0 to allow click-through. */ body.jyb-shell-ready [id$="-overlay"]::before{ opacity:0; } /* Only render the iframe with the overlay's display:block path; don't leak the scrim to hidden overlays. */ [id$="-overlay"]{position:relative} /* ───────────────────────────────────────────────────────────────────────── 12. Unified shell navigation — sidebar/topbar alignment with content. Scoped to body.mx-authed so the SPA shell is the only consumer. Goal (Codex): make sidebar entries (bundle native + injected), section labels, icons, and the right-side content cards read as one design system, not a patch layer. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ /* Sidebar inner spacing — match the content area's vertical rhythm. */ body.mx-authed aside nav{ gap:2px!important; } body.mx-authed aside nav a, body.mx-authed aside nav button{ padding:.55rem .85rem!important; margin:0!important; line-height:1.3!important; } /* Group / section labels in the sidebar — quieter, smaller. */ body.mx-authed aside nav [class*="text-[10px]"], body.mx-authed aside nav [class*="uppercase"]{ font-size:.6875rem!important; letter-spacing:.06em!important; color:#94a3b8!important; padding:14px 14px 6px!important; } } /* ═════════════════════════════════════════════════════════════════════════ DESKTOP SYSTEM POLISH v3 (full-system polish task) — adds shell-level rules that unify desktop surfaces across the iframe overlays. All blocks are gated under min-width:1024px so mobile is unaffected. ═════════════════════════════════════════════════════════════════════════ */ @media (min-width:1024px){ /* Iframe overlay loading background — desktop variant with subtle animated shimmer. Matches the desktop polish palette so the load-in feels native rather than a blank slate. Same six overlay IDs that mobile polish targets. The shimmer is gentle (low contrast, slow cycle) so it reads as "loading" without being noisy. Disabled under prefers-reduced-motion. */ @keyframes jybPcOverlayShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}} .detail-overlay, #welcome-overlay, #newbie-overlay, #douyin-overlay, #transcribe-overlay, #useradmin-overlay, #copywriting-overlay{ background:linear-gradient(110deg,var(--jyb-pc-bg-soft) 0%,var(--jyb-pc-bg) 35%,var(--jyb-pc-bg-soft) 50%,var(--jyb-pc-bg) 65%,var(--jyb-pc-bg-soft) 100%); background-size:220% 100%; animation:jybPcOverlayShimmer 2.6s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ .detail-overlay, #welcome-overlay, #newbie-overlay, #douyin-overlay, #transcribe-overlay, #useradmin-overlay, #copywriting-overlay{ animation:none!important; background:linear-gradient(180deg,var(--jyb-pc-bg-soft) 0%,var(--jyb-pc-bg) 100%); background-size:auto; } } .detail-overlay iframe, #welcome-overlay iframe, #newbie-overlay iframe, #douyin-overlay iframe, #transcribe-overlay iframe, #useradmin-overlay iframe, #copywriting-overlay iframe{ background:linear-gradient(180deg,var(--jyb-pc-bg-soft) 0%,var(--jyb-pc-bg) 100%); } /* Generator route — restore proportions. The React shell sets body.mx-route-generator. This rule does NOT restructure the React component (we don't have its source); it caps over-stretching of the right-side template/control area so the main generation surface keeps its dominant share. Selector targets the most likely flex/grid wrapper pattern; if the React component uses a different structure the rule is a no-op. */ body.mx-route-generator main aside, body.mx-route-generator main [class*="sidebar"], body.mx-route-generator main [class*="rightPanel"], body.mx-route-generator main [class*="right-panel"]{ max-width:340px!important; flex:0 0 320px!important; } /* Copywriting page balance — visible source. Center editor wider, right panel narrower, left list narrower so the editor breathes. */ body.jyb-page-copywriting .app{ grid-template-columns:clamp(320px,24vw,380px) minmax(0,1fr)!important; } body.jyb-page-copywriting .side{ width:auto!important; flex:0 0 auto!important; } body.jyb-page-copywriting #workspace{ grid-template-columns:minmax(0,1fr) clamp(280px,22vw,340px)!important; padding:18px 22px!important; } body.jyb-page-copywriting .side-head{ padding:18px 20px 14px!important; } body.jyb-page-copywriting .filters{ padding:12px 14px!important; gap:10px!important; } body.jyb-page-copywriting .doc-list{ padding:10px 12px 14px!important; gap:9px!important; } body.jyb-page-copywriting .doc{ padding:12px 13px!important; border-radius:10px!important; } body.jyb-page-copywriting .doc-title{ font-size:.9375rem!important; line-height:1.35!important; } body.jyb-page-copywriting .doc-meta, body.jyb-page-copywriting .doc-time, body.jyb-page-copywriting .who, body.jyb-page-copywriting .mode-note{ font-size:.765rem!important; line-height:1.45!important; } body.jyb-page-copywriting .stat{ padding:9px 10px!important; } body.jyb-page-copywriting .stat strong{ font-size:1.35rem!important; } body.jyb-page-copywriting .stat span, body.jyb-page-copywriting .status-grid button{ font-size:.75rem!important; } body.jyb-page-copywriting .status-grid button{ min-height:36px!important; } body.jyb-page-copywriting .top{ min-height:60px!important; padding:10px 18px!important; } body.jyb-page-copywriting .paper{ max-width:1120px!important; } body.jyb-page-copywriting .empty{ max-width:620px!important; } /* Library duplicate copy-button guard — best-effort dedup. The library surface is in the React bundle (assets/index-*.js) and we can't see its DOM, so this CSS guard hides any *adjacent sibling* copy button after the first within the most likely copybar structures. If the React structure differs, the rule is a no-op (safe). The proper fix belongs in the React source and is a separate Phase 2 task. */ body.mx-route-library .library-copybar .copy-btn ~ .copy-btn, body.mx-route-library .copybar [class*="copy"] ~ [class*="copy"], body.mx-route-library [class*="copybar"] [class*="copy"] ~ [class*="copy"]{ display:none!important; } /* Auth-pending pre-paint hide — desktop variant of the mobile rule. */ [data-auth="pending"] .jyb-needs-auth, [data-auth="pending"] .edit-section, [data-auth="pending"] .admin-only, [data-auth="pending"] .editor-actions{ visibility:hidden!important; } /* Newbie-guide tab active state — make sure any inline-rendered tab in the newbie-guide page surfaces the active state in a way that matches the system gold (was previously page-local and inconsistent). */ body.jyb-page-newbie-guide .tab.active, body.jyb-page-newbie-guide .section-tab.active, body.jyb-page-newbie-guide [class*="tab"][aria-selected="true"]{ color:var(--jyb-pc-gold-ink)!important; border-bottom-color:var(--jyb-pc-gold)!important; background:var(--jyb-pc-gold-soft)!important; border-radius:var(--jyb-pc-radius-sm) var(--jyb-pc-radius-sm) 0 0!important; } } /* ───────────────────────────────────────────────────────────────────────── 12. Generator route — narrow-desktop hardening (rework5) Codex's authenticated Safari smoke at 1000–1280 reported the canvas collapsing and the right pane crowding the page. The §10 rules above only kick in at min-width:1024 and the column track values were tuned for ≥1440. At 1024–1280 with a 200-ish px sidebar, available width is ~820px; the 320–420px right track + 18px gap leaves ≤480px for the canvas, and intrinsic content (long button labels, the textarea placeholder) was forcing track expansion past the canvas allocation. The fixes below: • lower the breakpoint to 960px so the grid applies whenever the sidebar + main fits a desktop layout at all • use 1fr 320px at 960–1279 (right pane fixed-narrow), then loosen to minmax(320px, 420px) at 1280+ • lock min-width:0 on every grid descendant that holds a textarea/button/long-text node so flex/grid intrinsic sizing can't blow the canvas track open • neutralize stale inline width:* styles on both panes, including on direct children of the canvas (so the bundle's nested w-[100%] grids don't override our column allocation) • cap the primary "Generate" button to its content width so it never floats over the canvas at narrow widths ───────────────────────────────────────────────────────────────────────── */ @media (min-width:960px) and (max-width:1279.98px){ body.mx-route-generator [data-jyb-generator-wrap="1"]{ display:grid!important; grid-template-columns:minmax(0,1fr) 320px!important; gap:14px!important; padding:14px 16px!important; align-items:stretch!important; width:100%!important; box-sizing:border-box!important; } body.mx-route-generator [data-jyb-generator-main="1"], body.mx-route-generator [data-jyb-generator-side="1"]{ width:auto!important; min-width:0!important; max-width:none!important; flex:none!important; box-sizing:border-box!important; } body.mx-route-generator [data-jyb-generator-side="1"]{ grid-column:2!important; max-width:320px!important; padding:12px!important; } /* Canvas inner panes — many Tailwind utility classes (w-full, w-[100%], flex-1) plus inline width:* must all collapse to "fill the track". */ body.mx-route-generator [data-jyb-generator-main="1"] *{ min-width:0!important; } body.mx-route-generator [data-jyb-generator-main="1"] textarea, body.mx-route-generator [data-jyb-generator-main="1"] [contenteditable], body.mx-route-generator [data-jyb-generator-main="1"] [class*="editor"]{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } /* Primary "Generate" button must not overflow or float the track. */ body.mx-route-generator [data-jyb-generator-main="1"] button.bg-mx-dark.shadow-xl.h-12, body.mx-route-generator [data-jyb-generator-main="1"] button[class*="bg-mx-dark"][class*="h-12"]{ width:auto!important; max-width:100%!important; flex:0 1 auto!important; } /* Fallback selectors for rows where tagging hasn't run yet. */ body.mx-authed.mx-route-generator main [class*="flex-row"]{ gap:14px!important; padding:14px 16px!important; } body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[35%]"]{ flex:0 0 320px!important; width:320px!important; min-width:300px!important; max-width:320px!important; } body.mx-authed.mx-route-generator main [class*="flex-row"] > [class*="w-[65%]"]{ flex:1 1 0!important; width:auto!important; min-width:0!important; max-width:none!important; } body.mx-authed.mx-route-generator main [class*="w-[65%]"][style*="width"], body.mx-authed.mx-route-generator main [class*="w-[35%]"][style*="width"]{ width:auto!important; } } @media (min-width:1280px){ /* At wider desktop, restore the more generous template-pane allowance but keep the same min-width:0 invariants so a long button label never collapses the canvas. */ body.mx-route-generator [data-jyb-generator-main="1"] *{ min-width:0!important; } body.mx-route-generator [data-jyb-generator-main="1"] button.bg-mx-dark.shadow-xl.h-12, body.mx-route-generator [data-jyb-generator-main="1"] button[class*="bg-mx-dark"][class*="h-12"]{ width:auto!important; max-width:100%!important; flex:0 1 auto!important; } } /* ───────────────────────────────────────────────────────────────────────── 13. Baseline scale restore (rework10) — global desktop normalization The user reported that several tab/iframe pages were rendering noticeably compressed (≈0.85–0.9× of the operational baseline): nav labels and tab buttons too small, tab heights cramped, workspace padding tight, buttons sub-36px, iframe canvas font-size dropping below the shell. This section establishes a single consistent desktop baseline that every iframe page and the SPA shell honour: body / canvas text ≥ 14px (default 16px on the shell html) nav labels ≥ 13px tab buttons ≥ 14px font, ≥ 40px tall primary buttons ≥ 36px tall on desktop, ≥ 44px on touch panel padding ≥ 14px iframe surfaces no transform/zoom shrinkage Mobile rules in mobile-operational-polish.css are NOT modified. ───────────────────────────────────────────────────────────────────────── */ /* a) Block any accidental transform: scale or zoom on iframe pages — these flatten the entire page below the shell baseline and are the most common culprit of the 0.85x feel. */ body.jyb-page, body.jyb-page main, body.jyb-page .wrap, body.jyb-page .card, body.jyb-page article, body.jyb-page section, body.jyb-page aside{ transform:none!important; zoom:1!important; } iframe{ transform:none!important; zoom:1!important; } @media (min-width:768px){ /* b) Body / canvas text floor on iframe pages. */ body.jyb-page, body.jyb-page .wrap, body.jyb-page .card, body.jyb-page article{ font-size:max(14px, 0.875rem)!important; line-height:1.55!important; } /* c) Nav labels (sidebar items + injected nav). */ body.mx-authed aside nav a, body.mx-authed aside nav button, body.mx-authed aside nav a span, body.mx-authed aside nav button span, .mx-injected-nav, .mx-injected-label{ font-size:max(13px, 0.8125rem)!important; line-height:1.3rem!important; } /* d) Tabs — restore an operational tab height + readable label. */ body.jyb-page .tabs, body.jyb-page .section-tabs, body.jyb-page [role="tablist"]{ min-height:40px!important; align-items:stretch!important; } body.jyb-page .tab, body.jyb-page .section-tab, body.jyb-page [role="tab"]{ min-height:40px!important; padding:0.5rem 0.875rem!important; font-size:max(14px, 0.875rem)!important; line-height:1.4!important; } /* e) Buttons — desktop floor at 36px for action buttons; primary actions stay 40px+. Inputs and search fields: 36px. */ body.jyb-page .btn, body.jyb-page button.btn{ min-height:36px!important; font-size:max(13px, 0.8125rem)!important; line-height:1.4!important; } body.jyb-page .btn.primary, body.jyb-page .btn-primary, body.jyb-page button.btn.primary{ min-height:40px!important; font-size:max(14px, 0.875rem)!important; } body.jyb-page input[type="text"], body.jyb-page input[type="email"], body.jyb-page input[type="search"], body.jyb-page input[type="date"], body.jyb-page input[type="password"], body.jyb-page select, body.jyb-page textarea{ font-size:max(14px, 0.875rem)!important; line-height:1.45!important; } body.jyb-page input[type="text"], body.jyb-page input[type="email"], body.jyb-page input[type="search"], body.jyb-page input[type="date"], body.jyb-page input[type="password"], body.jyb-page select{ min-height:36px!important; } /* f) Panels / cards / workspace — stop the 8-10px padding that makes content feel cramped. */ body.jyb-page .card, body.jyb-page .panel{ padding:14px 16px!important; } body.jyb-page .workspace, body.jyb-page #workspace{ padding:14px 18px!important; } /* g) Headings on iframe pages — make sure h1/h2/h3 stay visually distinct from body. */ body.jyb-page h1{ font-size:max(20px, 1.25rem)!important; line-height:1.3!important; } body.jyb-page h2{ font-size:max(17px, 1.0625rem)!important; line-height:1.35!important; } body.jyb-page h3{ font-size:max(15px, 0.9375rem)!important; line-height:1.4!important; } } @media (hover: none) and (pointer: coarse) and (min-width:768px){ /* h) Touch-with-desktop-width (e.g. tablet portrait at 768–1024) — bump button/tab sizes to the touch floor without affecting pointer-only desktop. Mobile rules at <768 stay in mobile-operational-polish.css. */ body.jyb-page .btn, body.jyb-page button.btn, body.jyb-page .tab, body.jyb-page [role="tab"]{ min-height:44px!important; } } /* i) Overlay iframes themselves — never let the parent shell shrink them below 100% via transform or scale. */ #douyin-overlay iframe, #newbie-overlay iframe, #transcribe-overlay iframe, #welcome-overlay iframe, #useradmin-overlay iframe, #copywriting-overlay iframe{ width:100%!important; height:100%!important; transform:none!important; zoom:1!important; } /* ───────────────────────────────────────────────────────────────────────── 14. Shell-level scale baseline (rework12) — same operational floor for the React SPA shell that surrounds the iframe routes. Without this, the shell's own nav/tabs/buttons can sit a size below the iframe pages and the result LOOKS compressed even if individual iframe pages are correctly normalized. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:768px){ /* Shell aside-nav links/buttons — readable label baseline. */ body.mx-authed aside nav a, body.mx-authed aside nav button, body.mx-authed aside nav [role="link"]{ font-size:max(13px, 0.8125rem)!important; line-height:1.3!important; min-height:36px!important; padding-top:8px!important; padding-bottom:8px!important; } body.mx-authed aside nav a span, body.mx-authed aside nav button span{ font-size:inherit!important; line-height:inherit!important; } /* Shell tabs / segmented controls (e.g. library route filters). */ body.mx-authed main [role="tablist"], body.mx-authed main .tabs, body.mx-authed main [class*="tab-list"]{ min-height:40px!important; } body.mx-authed main [role="tab"], body.mx-authed main .tab, body.mx-authed main [class*="tab-button"]{ min-height:40px!important; font-size:max(14px, 0.875rem)!important; line-height:1.4!important; padding:8px 14px!important; } /* Shell buttons — primary actions ≥ 40px, secondary ≥ 36px. */ body.mx-authed main button, body.mx-authed main [role="button"]{ font-size:max(13px, 0.8125rem)!important; line-height:1.4!important; } body.mx-authed main button.bg-mx-dark, body.mx-authed main button[class*="bg-mx-dark"], body.mx-authed main button[class*="primary"]{ min-height:40px!important; font-size:max(14px, 0.875rem)!important; } /* Shell form controls (library detail modals, generator inputs, etc). */ body.mx-authed main input[type="text"], body.mx-authed main input[type="email"], body.mx-authed main input[type="search"], body.mx-authed main input[type="number"], body.mx-authed main input[type="password"], body.mx-authed main select, body.mx-authed main textarea{ font-size:max(14px, 0.875rem)!important; line-height:1.45!important; } /* Shell card/panel padding floor — generator/library detail readable. */ body.mx-authed main [class*="rounded-2xl"], body.mx-authed main [class*="rounded-xl"]{ box-sizing:border-box!important; } /* Modal / dialog content — library detail and similar overlays. */ body.mx-authed [role="dialog"], body.mx-authed [class*="fixed"][class*="inset"] > div{ font-size:max(14px, 0.875rem)!important; } body.mx-authed [role="dialog"] button, body.mx-authed [role="dialog"] [role="button"]{ min-height:36px!important; font-size:max(13px, 0.8125rem)!important; } } /* j) Belt-and-suspenders — also accept the html.jyb-iframe-page injection vector that index.html uses, so iframe-mounted contexts where body class might be missing or stripped still pick up the baseline. */ @media (min-width:768px){ html.jyb-iframe-page body{ font-size:max(14px, 0.875rem)!important; line-height:1.55!important; } html.jyb-iframe-page .btn, html.jyb-iframe-page button.btn{ min-height:36px!important; font-size:max(13px, 0.8125rem)!important; } html.jyb-iframe-page .tab, html.jyb-iframe-page [role="tab"]{ min-height:40px!important; font-size:max(14px, 0.875rem)!important; } } /* ───────────────────────────────────────────────────────────────────────── 15. Rework18 commercial scale and loading truth guard. User regression: several tab/iframe pages looked one size smaller than the shell, and copywriting briefly rendered false zero/empty states before the read-only data fallback finished. These rules keep iframe pages at a shared operational desktop scale and make loading states read as deliberate. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ body.jyb-page{ font-size:15px!important; } body.jyb-page .wrap{ width:min(100%, calc(100vw - 48px))!important; max-width:1280px!important; padding:34px clamp(28px, 3vw, 48px) 72px!important; } body.jyb-page-user-admin .wrap, body.jyb-page-newbie .wrap{ max-width:1180px!important; } body.jyb-page-user-admin .hdr h1, body.jyb-page-newbie .hdr-left h1{ font-size:1.75rem!important; line-height:1.25!important; } body.jyb-page-user-admin .card, body.jyb-page-user-admin .toolbar, body.jyb-page-newbie .section, body.jyb-page-newbie .meta-bar{ font-size:.9375rem!important; } body.jyb-page-user-admin table{ font-size:.9375rem!important; } body.jyb-page-user-admin table thead th, body.jyb-page-user-admin table tbody td{ padding:13px 16px!important; } body.jyb-page-user-admin .toolbar{ padding:1rem 1.2rem!important; gap:.65rem!important; } body.jyb-page-user-admin input, body.jyb-page-user-admin select, body.jyb-page-user-admin button{ min-height:38px!important; } body.jyb-page-newbie .section-body{ font-size:1rem!important; line-height:1.78!important; } body.jyb-page-copywriting.is-loading-docs .stat strong{ color:var(--jyb-pc-muted)!important; font-size:1.2rem!important; } body.jyb-page-copywriting.is-loading-docs .doc-list .empty, body.jyb-page-copywriting.is-loading-docs #workspace .empty{ background:linear-gradient(90deg,#f3f5f8 0%,#fafbfd 45%,#f3f5f8 100%)!important; background-size:200% 100%!important; animation:jyb-skel-shimmer 1.4s linear infinite!important; color:var(--jyb-pc-muted)!important; border-style:solid!important; } } /* ───────────────────────────────────────────────────────────────────────── 16. Rework19 iframe page scale unification. The shell had reached the right operational density, but several iframe tab pages still read one step smaller because their local page CSS capped the content width. Keep standalone pages aligned with the main backend: wider work area, larger controls, and no excessive dead gutters. ───────────────────────────────────────────────────────────────────────── */ @media (min-width:1024px){ html.jyb-iframe-page body.jyb-page, body.jyb-page{ font-size:15.5px!important; } html.jyb-iframe-page body.jyb-page .wrap, body.jyb-page .wrap{ width:100%!important; max-width:none!important; padding:34px clamp(32px, 4vw, 64px) 76px!important; } html.jyb-iframe-page body.jyb-page-user-admin .wrap, body.jyb-page-user-admin .wrap, html.jyb-iframe-page body.jyb-page-newbie .wrap, body.jyb-page-newbie .wrap{ max-width:none!important; } body.jyb-page-user-admin .hdr, body.jyb-page-newbie .hdr{ margin-bottom:1.5rem!important; } body.jyb-page-user-admin .card{ width:100%!important; } body.jyb-page-user-admin .toolbar{ padding:1.05rem 1.35rem!important; } body.jyb-page-user-admin .toolbar input{ max-width:360px!important; font-size:.95rem!important; } body.jyb-page-user-admin table{ font-size:.95rem!important; } body.jyb-page-user-admin thead th{ font-size:.78rem!important; } body.jyb-page-user-admin tbody td{ padding:14px 18px!important; } body.jyb-page-newbie .section{ border-radius:16px!important; } body.jyb-page-newbie .section-title{ font-size:1.18rem!important; } body.jyb-page-newbie .section-body{ font-size:1.04rem!important; line-height:1.82!important; } } /* Final sidebar injection parity. Keep custom entries visually identical to bundle nav rows after the later global shell rules have normalized every aside link. */ @media (min-width:768px){ body.mx-authed aside nav a.mx-injected-nav, body.mx-authed aside nav button.mx-injected-nav{ min-height:3.875rem!important; padding:.5rem .75rem!important; gap:.75rem!important; border-radius:.75rem!important; font-size:1.125rem!important; line-height:1.5rem!important; font-weight:800!important; } body.mx-authed aside nav a.mx-injected-nav .mx-injected-label, body.mx-authed aside nav button.mx-injected-nav .mx-injected-label{ font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; } body.mx-authed aside nav a.mx-injected-nav .mx-injected-ico, body.mx-authed aside nav button.mx-injected-nav .mx-injected-ico{ width:1.5rem!important; height:1.5rem!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:currentColor!important; } body.mx-authed aside nav a.mx-injected-nav .mx-injected-ico svg, body.mx-authed aside nav button.mx-injected-nav .mx-injected-ico svg{ width:1.5rem!important; height:1.5rem!important; display:block!important; } body.mx-authed aside nav a.mx-injected-nav.mx-injected-active .mx-injected-ico, body.mx-authed aside nav button.mx-injected-nav.mx-injected-active .mx-injected-ico{ background:transparent!important; border:0!important; color:#fff!important; } } /* Shell Native Alignment v1. This final layer is the source of truth for the outer app shell: sidebar width, iframe viewport, native nav rows, injected nav rows, and standalone iframe page canvas. It intentionally comes last so the older route-specific patches cannot make the app feel stitched together. */ @media (min-width:1024px){ :root{ --jyb-shell-sidebar-w:24rem; --jyb-shell-page-x:clamp(40px,4.2vw,64px); --jyb-shell-page-y:40px; } body.mx-authed aside{ width:var(--jyb-shell-sidebar-w)!important; flex-basis:var(--jyb-shell-sidebar-w)!important; } body.mx-authed #douyin-overlay, body.mx-authed #newbie-overlay, body.mx-authed #transcribe-overlay, body.mx-authed #welcome-overlay, body.mx-authed #useradmin-overlay, body.mx-authed #copywriting-overlay{ top:0!important; right:0!important; bottom:0!important; left:var(--jyb-shell-sidebar-w)!important; width:auto!important; height:100vh!important; overflow:hidden!important; background:#f8fafc!important; } body.mx-authed #douyin-overlay iframe, body.mx-authed #newbie-overlay iframe, body.mx-authed #transcribe-overlay iframe, body.mx-authed #welcome-overlay iframe, body.mx-authed #useradmin-overlay iframe, body.mx-authed #copywriting-overlay iframe{ width:100%!important; height:100%!important; display:block!important; border:0!important; } body.mx-authed aside nav{ padding:14px 22px!important; gap:2px!important; } body.mx-authed aside nav a, body.mx-authed aside nav button, body.mx-authed aside nav a.mx-injected-nav, body.mx-authed aside nav button.mx-injected-nav{ width:100%!important; min-height:3.875rem!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:.875rem!important; padding:.5rem .875rem!important; margin:0!important; border:1px solid transparent!important; border-radius:.75rem!important; background:transparent!important; box-shadow:none!important; color:#cbd5e1!important; font-size:1.125rem!important; line-height:1.5rem!important; font-weight:800!important; letter-spacing:0!important; text-decoration:none!important; } body.mx-authed aside nav a span, body.mx-authed aside nav button span, body.mx-authed aside nav a.mx-injected-nav .mx-injected-label, body.mx-authed aside nav button.mx-injected-nav .mx-injected-label{ font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:inherit!important; } body.mx-authed aside nav a svg, body.mx-authed aside nav button svg, body.mx-authed aside nav a.mx-injected-nav .mx-injected-ico, body.mx-authed aside nav button.mx-injected-nav .mx-injected-ico, body.mx-authed aside nav a.mx-injected-nav .mx-injected-ico svg, body.mx-authed aside nav button.mx-injected-nav .mx-injected-ico svg{ width:1.5rem!important; height:1.5rem!important; min-width:1.5rem!important; flex:0 0 1.5rem!important; color:currentColor!important; stroke:currentColor!important; } body.mx-authed aside nav a.mx-injected-nav .mx-injected-ico, body.mx-authed aside nav button.mx-injected-nav .mx-injected-ico{ border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } body.mx-authed aside nav a:hover, body.mx-authed aside nav button:hover{ background:rgba(193,154,75,.10)!important; color:#f1ddae!important; } body.mx-authed aside .mx-route-active, body.mx-authed aside nav .mx-route-active, body.mx-authed aside nav a.mx-injected-nav.mx-injected-active, body.mx-authed aside nav button.mx-injected-nav.mx-injected-active{ background:linear-gradient(135deg,var(--jyb-pc-gold) 0%,var(--jyb-pc-gold-2) 100%)!important; color:#fff!important; border-color:var(--jyb-pc-gold-2)!important; box-shadow:0 1px 2px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.18)!important; } html.jyb-iframe-page body.jyb-page{ width:100%!important; min-height:100vh!important; overflow-x:hidden!important; overflow-y:auto!important; background:#f8fafc!important; } html.jyb-iframe-page body.jyb-page .wrap, body.jyb-page .wrap{ width:100%!important; max-width:none!important; margin:0!important; padding:var(--jyb-shell-page-y) var(--jyb-shell-page-x) 72px!important; } html.jyb-iframe-page body.jyb-page-newbie .wrap, body.jyb-page-newbie .wrap, html.jyb-iframe-page body.jyb-page-user-admin .wrap, body.jyb-page-user-admin .wrap, html.jyb-iframe-page body.jyb-page-welcome .wrap, body.jyb-page-welcome .wrap{ max-width:none!important; } } /* Native Redesign v2: copywriting workbench + injected nav. This is intentionally after Shell Native Alignment. Copywriting becomes a naturally scrolling admin page, while injected sidebar entries lose badge/chip behavior and read as native rows. */ @media (min-width:1024px){ body.mx-authed aside nav a.mx-injected-nav, body.mx-authed aside nav button.mx-injected-nav{ min-height:3.875rem!important; padding:.5rem .875rem!important; gap:.875rem!important; border:1px solid transparent!important; border-radius:.75rem!important; background:transparent!important; color:#cbd5e1!important; box-shadow:none!important; font-size:1.125rem!important; line-height:1.5rem!important; font-weight:800!important; letter-spacing:0!important; } body.mx-authed aside nav a.mx-injected-nav .mx-injected-ico, body.mx-authed aside nav button.mx-injected-nav .mx-injected-ico{ width:1.5rem!important; height:1.5rem!important; min-width:1.5rem!important; flex:0 0 1.5rem!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:currentColor!important; } body.mx-authed aside nav a.mx-injected-nav .mx-injected-ico svg, body.mx-authed aside nav button.mx-injected-nav .mx-injected-ico svg{ width:1.5rem!important; height:1.5rem!important; stroke:currentColor!important; } html.jyb-iframe-page body.jyb-page-copywriting, body.jyb-page-copywriting{ height:auto!important; min-height:100vh!important; overflow-y:auto!important; overflow-x:hidden!important; background:#f8fafc!important; font-size:15px!important; } body.jyb-page-copywriting .app{ min-height:100vh!important; height:auto!important; display:grid!important; grid-template-columns:minmax(320px,360px) minmax(0,1fr)!important; align-items:start!important; background:#f8fafc!important; } body.jyb-page-copywriting .side{ position:sticky!important; top:0!important; height:100vh!important; overflow:hidden!important; border-right:1px solid #e2e8f0!important; background:#fff!important; } body.jyb-page-copywriting .side-head{ padding:20px 22px 16px!important; } body.jyb-page-copywriting .filters{ padding:16px 18px!important; gap:12px!important; } body.jyb-page-copywriting .doc-list{ overflow-y:auto!important; padding:12px 14px 22px!important; } body.jyb-page-copywriting .main{ min-height:100vh!important; height:auto!important; display:block!important; background:#f8fafc!important; } body.jyb-page-copywriting .top{ position:sticky!important; top:0!important; z-index:5!important; min-height:68px!important; padding:14px clamp(28px,3vw,44px)!important; background:rgba(255,255,255,.96)!important; backdrop-filter:blur(10px)!important; } body.jyb-page-copywriting .tabs{ position:sticky!important; top:68px!important; z-index:4!important; padding:10px clamp(28px,3vw,44px) 0!important; background:rgba(255,255,255,.96)!important; } body.jyb-page-copywriting .workspace{ display:block!important; min-height:auto!important; overflow:visible!important; } body.jyb-page-copywriting .editor-wrap, body.jyb-page-copywriting .workbench-home{ overflow:visible!important; padding:24px clamp(28px,3vw,44px) 80px!important; background:#f8fafc!important; } body.jyb-page-copywriting .paper, body.jyb-page-copywriting .workbench-card{ width:100%!important; max-width:1120px!important; min-height:auto!important; margin:0 auto!important; border-radius:10px!important; border:1px solid #e2e8f0!important; box-shadow:0 10px 30px -24px rgba(15,23,42,.5)!important; } body.jyb-page-copywriting .editor{ min-height:62vh!important; padding:26px 32px 40px!important; font-size:16px!important; line-height:1.82!important; } body.jyb-page-copywriting .right{ display:none!important; } } /* r28 hardening: native injected icons + copywriting scroll root. */ @media (min-width:1024px){ body.mx-authed aside nav a.mx-native-injected .mx-native-injected-icon, body.mx-authed aside nav button.mx-native-injected .mx-native-injected-icon{ width:1.5rem!important; height:1.5rem!important; min-width:1.5rem!important; flex:0 0 1.5rem!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; color:currentColor!important; } body.mx-authed aside nav a.mx-native-injected .mx-native-injected-icon svg, body.mx-authed aside nav button.mx-native-injected .mx-native-injected-icon svg{ width:1.5rem!important; height:1.5rem!important; display:block!important; stroke:currentColor!important; } html:has(body.jyb-page-copywriting){ height:auto!important; min-height:100%!important; overflow-y:auto!important; overflow-x:hidden!important; } } /* r30 final layout audit: remove abnormal iframe whitespace and heal injected nav. */ @media (min-width:1024px){ :root{ --jyb-shell-page-x:clamp(28px,3vw,44px); --jyb-shell-page-y:32px; } html.jyb-iframe-page body.jyb-page .wrap, body.jyb-page .wrap{ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; padding:var(--jyb-shell-page-y) var(--jyb-shell-page-x) 64px!important; } body.jyb-page .hdr{ margin-bottom:24px!important; } body.mx-authed aside nav a.mx-native-injected, body.mx-authed aside nav button.mx-native-injected{ display:flex!important; align-items:center!important; gap:.875rem!important; } body.mx-authed aside nav a.mx-native-injected .mx-native-injected-icon, body.mx-authed aside nav button.mx-native-injected .mx-native-injected-icon{ width:1.5rem!important; height:1.5rem!important; min-width:1.5rem!important; flex:0 0 1.5rem!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; color:currentColor!important; } body.mx-authed aside nav a.mx-native-injected .mx-native-injected-icon svg, body.mx-authed aside nav button.mx-native-injected .mx-native-injected-icon svg{ width:1.5rem!important; height:1.5rem!important; min-width:1.5rem!important; display:block!important; stroke:currentColor!important; } body.jyb-page-copywriting .app{ min-height:100vh!important; height:auto!important; } body.jyb-page-copywriting .main{ min-height:100vh!important; height:auto!important; overflow:visible!important; } body.jyb-page-copywriting .workspace, body.jyb-page-copywriting .editor-wrap, body.jyb-page-copywriting .workbench-home{ overflow:visible!important; } }