/* Final jwjagent reference-aligned marketing shell (2026-08-30) */
:root {
  --jwj-brand-ink:#10182f;
  --jwj-brand-muted:#737c92;
  --jwj-brand-line:rgba(112,132,189,.20);
  --jwj-brand-purple:#695cf4;
  --jwj-brand-bg:#fbfcff;
}
html,body { background:var(--jwj-brand-bg); color:var(--jwj-brand-ink); }
body { overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; letter-spacing:0; }
#generation-workspace { position:relative; display:grid !important; grid-template-columns:1fr !important; grid-template-rows:81px minmax(0,1fr) auto !important; height:100vh; min-height:100vh; background:var(--jwj-brand-bg) !important; }
#generation-workspace > aside { display:none !important; }
#generation-workspace > div { display:contents !important; }
#generation-workspace > div > header { position:relative; z-index:20; display:flex !important; align-items:center; justify-content:space-between; width:100%; height:81px; min-height:81px; padding:0 32px; border-bottom:1px solid rgba(113,131,181,.12); background:rgba(251,252,255,.92) !important; backdrop-filter:blur(16px); }
#generation-workspace > div > header > div:first-child { display:flex; align-items:center; gap:10px; min-width:170px; }
#generation-workspace .brand-logo-header { width:32px !important; height:32px !important; margin:0 !important; border:1px solid rgba(20,26,49,.10); border-radius:9px; box-shadow:0 4px 12px rgba(58,64,112,.10); }
#generation-workspace .brand-logo-header + span { color:var(--jwj-brand-ink) !important; font-size:17px !important; font-weight:700 !important; }
#generation-workspace .jwj-redesign-header-kicker { display:none !important; }
#generation-workspace .generation-top-options,#generation-workspace .generation-header-actions { display:none !important; }
.jwj-product-nav { position:absolute; left:50%; display:flex; align-items:center; gap:34px; transform:translateX(-50%); }
.jwj-product-nav button,.jwj-library-product-nav button { padding:8px 0; color:#17203a; background:transparent; font-size:14px; font-weight:600; cursor:pointer; }
.jwj-product-nav button:hover,.jwj-library-product-nav button:hover { color:var(--jwj-brand-purple); }
.jwj-product-nav-actions { display:flex; align-items:center; gap:14px; margin-left:auto; }
.jwj-product-nav-theme { display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(100,115,168,.14); border-radius:50%; color:#1f2740; background:#fff; cursor:pointer; box-shadow:0 6px 16px rgba(58,64,112,.06); }
.jwj-product-nav-theme .material-symbols-outlined { font-size:18px; }
.jwj-product-nav-cta { min-height:40px; padding:0 19px; border-radius:12px; color:#fff; background:linear-gradient(135deg,#5d8cff,#696cf6 50%,#8b63ee); font-size:14px; font-weight:700; box-shadow:0 10px 22px rgba(96,96,232,.22); cursor:pointer; }
#generation-workspace #main-canvas { position:relative; display:block !important; grid-row:2 / span 2; height:calc(100vh - 81px); min-height:0; padding:0 !important; overflow-y:auto !important; overflow-x:hidden; scroll-behavior:smooth; background:linear-gradient(118deg,rgba(218,234,255,.46),rgba(237,243,255,.16) 27%,transparent 48%),linear-gradient(242deg,rgba(239,226,255,.38),rgba(247,240,255,.14) 30%,transparent 51%),linear-gradient(#fdfdff,#f9faff 44%,#fbfaff 72%,#fdfdff) !important; }
#generation-workspace #main-canvas .welcome-panel { position:relative; z-index:2; display:flex !important; width:100%; max-width:none !important; min-height:715px; align-items:center; justify-content:flex-start; padding:88px 32px 42px; gap:0 !important; text-align:center; }
#generation-workspace .welcome-panel > div:nth-child(2) { width:min(1120px,100%); margin:0 auto; }
#generation-workspace .brand-logo-welcome,#generation-workspace .welcome-panel > div:nth-child(3) { display:none !important; }
#generation-workspace .welcome-panel h1 { margin:0 !important; color:var(--jwj-brand-ink) !important; font-size:clamp(44px,5vw,60px) !important; font-weight:760 !important; line-height:1.18 !important; letter-spacing:-.045em !important; }
#generation-workspace .welcome-panel h1 .jwj-gradient-word { color:#695cf4 !important; background:none !important; -webkit-text-fill-color:#695cf4 !important; }
#generation-workspace .welcome-panel > div:nth-child(2) p { margin:14px auto 0 !important; color:var(--jwj-brand-muted) !important; font-size:17px !important; line-height:1.65 !important; }
#generation-workspace #main-canvas > footer { position:absolute !important; z-index:30; top:246px !important; left:50% !important; display:flex !important; width:min(1110px,calc(100% - 64px)) !important; height:288px !important; min-height:288px !important; margin:0 !important; padding:25px 38px 26px !important; border:1px solid rgba(139,145,179,.16) !important; border-radius:30px !important; background:rgba(255,255,255,.94) !important; box-shadow:0 24px 70px rgba(67,69,110,.14),0 2px 8px rgba(25,32,65,.04) !important; transform:translateX(-50%); backdrop-filter:blur(20px); }
#generation-workspace #main-canvas > footer > div:last-of-type { order:1 !important; width:100% !important; max-width:none !important; height:114px !important; min-height:114px !important; margin:0 !important; }
#generation-workspace #prompt-input { display:block !important; width:100% !important; height:114px !important; min-height:114px !important; padding:0 !important; border:0 !important; border-radius:0 !important; color:var(--jwj-brand-ink) !important; background:transparent !important; box-shadow:none !important; font-size:17px !important; line-height:1.65 !important; resize:none !important; }
#generation-workspace #prompt-input:focus { outline:none !important; box-shadow:none !important; }
#generation-workspace #prompt-input::placeholder { color:#7e8797 !important; opacity:1; }
.jwj-reference-suggestions { order:2 !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; width:100%; height:45px; margin:0 !important; }
.jwj-reference-suggestions button { min-width:0; height:45px; overflow:hidden; padding:0 16px; border:1px solid rgba(139,145,179,.14); border-radius:999px; color:#6a7285; background:rgba(247,248,253,.62); font-size:13px; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
.jwj-reference-suggestions button:hover { border-color:rgba(105,92,244,.32); color:#5647d5; background:#f7f4ff; }
.jwj-hero-mode-switch { order:3 !important; display:flex !important; align-items:center; gap:7px; margin-top:22px !important; }
.jwj-hero-mode-switch button { display:flex !important; align-items:center; gap:8px; min-height:46px; padding:0 15px 0 9px; border:1px solid rgba(227,230,240,.96); border-radius:14px; color:#6c7488; background:rgba(255,255,255,.62); font-size:14px; font-weight:560; cursor:pointer; }
.jwj-hero-mode-switch button.is-active { border-color:rgba(89,82,214,.24); color:#4e43cb; background:rgba(244,243,255,.82); }
.jwj-hero-mode-switch button[data-jwj-mode=agent] .material-symbols-outlined { color:#8065e9; }.jwj-hero-mode-switch button[data-jwj-mode=image] .material-symbols-outlined { color:#35ad8b; }.jwj-hero-mode-switch button[data-jwj-mode=video] .material-symbols-outlined { color:#eb8062; }.jwj-hero-mode-switch button[data-jwj-mode=audio] .material-symbols-outlined { color:#9674e8; }
#generation-workspace #upload-button { left:auto !important; right:58px !important; bottom:0 !important; top:auto !important; display:grid !important; width:46px !important; height:46px !important; place-items:center; border:1px solid rgba(132,141,174,.18) !important; border-radius:50% !important; color:#727b90 !important; background:rgba(246,247,252,.82) !important; }
#generation-workspace #generate-button { right:0 !important; bottom:0 !important; top:auto !important; display:grid !important; width:48px !important; height:48px !important; place-items:center; border:1px solid rgba(91,91,210,.14) !important; border-radius:50% !important; color:#fff !important; background:linear-gradient(135deg,#5d8cff,#696cf6 50%,#8b63ee) !important; box-shadow:0 10px 22px rgba(96,96,232,.22) !important; }
#generation-workspace #main-canvas > footer > div:first-child { order:3 !important; display:flex !important; align-items:center; justify-content:flex-start; margin:22px 0 0 !important; padding:0 !important; }
#generation-workspace #main-canvas > footer > #attachment-tray { order:4 !important; width:100%; margin-top:8px !important; }
#generation-workspace #main-canvas > footer > p { display:none !important; }
#generation-workspace #creation-type-control,#generation-workspace #generation-options-control,#generation-workspace #quality-control { display:none !important; }
#jwj-marketing-sections { position:relative; z-index:1; display:block; width:100vw; max-width:none; margin:0; padding:0 32px 0; }
.jwj-marketing-section { padding:24px 0 0; }
.jwj-marketing-heading { text-align:center; }.jwj-marketing-heading h2 { margin:0; color:var(--jwj-brand-ink); font-size:30px; font-weight:730; line-height:1.3; letter-spacing:-.025em; }.jwj-marketing-heading p { margin:9px 0 0; color:var(--jwj-brand-muted); font-size:15px; line-height:1.55; }
.jwj-steps-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px; margin-top:28px; }
.jwj-step-card { position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:8px 11px; min-height:132px; padding:20px; border:1px solid var(--jwj-brand-line); border-radius:14px; background:rgba(255,255,255,.78); box-shadow:0 12px 32px rgba(82,100,178,.055); }.jwj-step-number { color:#8993aa; font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; }.jwj-step-icon { color:#6d69e8; font-size:21px; }.jwj-step-card h3 { grid-column:1 / -1; margin:0; color:var(--jwj-brand-ink); font-size:17px; }.jwj-step-card p { grid-column:1 / -1; margin:0; color:var(--jwj-brand-muted); font-size:13px; line-height:1.5; }
.jwj-inspiration { min-height:620px; padding-top:78px; }.jwj-gallery-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:28px; }.jwj-gallery-tabs button { padding:8px 15px; border:1px solid transparent; border-radius:999px; color:#7b8499; background:transparent; font-size:13px; cursor:pointer; }.jwj-gallery-tabs button:hover,.jwj-gallery-tabs button.is-active { border-color:rgba(105,92,244,.20); color:#5143d3; background:#f4f2ff; }.jwj-gallery-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:310px; margin-top:18px; border:1px dashed rgba(112,132,189,.22); border-radius:18px; color:#8992a8; background:rgba(255,255,255,.34); }.jwj-gallery-empty .material-symbols-outlined { margin-bottom:14px; color:#9b9de9; font-size:38px; }.jwj-gallery-empty strong { color:#626c82; font-size:15px; }.jwj-gallery-empty p { margin:8px 0 14px; font-size:13px; }.jwj-gallery-empty button { padding:8px 14px; border:1px solid rgba(112,132,189,.20); border-radius:9px; color:#5d63a4; background:#fff; cursor:pointer; }.jwj-gallery-more { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:16px; color:#5b55d9; font-size:14px; text-decoration:none; }.jwj-gallery-more .material-symbols-outlined { font-size:17px; }
.jwj-marketing-advantages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); min-height:114px; margin-top:74px; border:1px solid var(--jwj-brand-line); border-radius:16px; overflow:hidden; }.jwj-marketing-advantages article { display:flex; align-items:center; gap:14px; padding:22px 24px; border-right:1px solid var(--jwj-brand-line); }.jwj-marketing-advantages article:last-child { border-right:0; }.jwj-marketing-advantages .material-symbols-outlined { color:#6b68e7; font-size:24px; }.jwj-marketing-advantages h3 { margin:0; color:var(--jwj-brand-ink); font-size:16px; }.jwj-marketing-advantages p { margin:5px 0 0; color:var(--jwj-brand-muted); font-size:13px; }
.jwj-marketing-cta { display:flex; align-items:center; justify-content:space-between; gap:34px; min-height:140px; margin-top:28px; padding:28px 40px; border:1px solid rgba(95,91,218,.56); border-radius:18px; background:linear-gradient(100deg,rgba(42,105,255,.13),rgba(130,72,238,.20)),rgba(255,255,255,.78); }.jwj-marketing-cta h2 { margin:0; color:var(--jwj-brand-ink); font-size:25px; }.jwj-marketing-cta p { margin:8px 0 0; color:#68738a; font-size:14px; }.jwj-marketing-cta button { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 18px; border-radius:11px; color:#fff; background:linear-gradient(135deg,#5d8cff,#696cf6 50%,#8b63ee); font-size:14px; font-weight:700; box-shadow:0 10px 22px rgba(96,96,232,.20); cursor:pointer; }.jwj-marketing-cta button .material-symbols-outlined { font-size:18px; }
.jwj-marketing-footer { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:40px; margin-top:46px; padding:46px 0 28px; border-top:1px solid rgba(112,132,189,.14); }.jwj-footer-logo { display:flex; align-items:center; gap:10px; }.jwj-footer-logo img { width:32px; height:32px; border-radius:9px; object-fit:cover; }.jwj-footer-logo strong { font-size:17px; }.jwj-footer-brand p { max-width:300px; margin:14px 0 0; color:var(--jwj-brand-muted); font-size:13px; line-height:1.6; }.jwj-marketing-footer nav { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }.jwj-marketing-footer nav h2 { margin:0 0 6px; color:var(--jwj-brand-ink); font-size:14px; }.jwj-marketing-footer nav a,.jwj-marketing-footer nav button { padding:0; color:#788197; background:transparent; font-size:13px; text-decoration:none; cursor:pointer; }.jwj-marketing-footer nav a:hover,.jwj-marketing-footer nav button:hover { color:#5b55d9; }.jwj-footer-bottom { grid-column:1 / -1; display:flex; justify-content:space-between; gap:18px; padding-top:22px; border-top:1px solid rgba(112,132,189,.12); color:#9aa2b3; font-size:12px; }.jwj-footer-bottom span:last-child { display:flex; gap:18px; }.jwj-footer-bottom a { color:inherit; text-decoration:none; }.jwj-footer-bottom a:hover { color:#5b55d9; }
.jwj-hero-decorations { position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; }.jwj-hero-float { position:absolute !important; display:grid !important; width:58px !important; height:58px !important; place-items:center !important; border:1px solid rgba(255,255,255,.95) !important; border-radius:19px !important; box-shadow:0 18px 42px rgba(99,83,187,.16),inset 0 1px 0 rgba(255,255,255,.9) !important; }.jwj-hero-float--idea { top:170px !important; left:calc(50% - 560px) !important; color:#7866e9 !important; background:#f0edff !important; transform:rotate(-12deg); }.jwj-hero-float--image { top:405px !important; left:calc(50% - 610px) !important; color:#46b894 !important; background:#e5faf1 !important; transform:rotate(13deg); }.jwj-hero-float--audio { top:405px !important; right:calc(50% - 610px) !important; color:#8d70e8 !important; background:#f0eaff !important; transform:rotate(-13deg); }
#generation-workspace #main-canvas.has-results .welcome-panel { min-height:260px !important; padding-top:42px !important; padding-bottom:12px !important; }.jwj-marketing-sections-hidden { display:none !important; }
#generation-workspace #main-canvas.has-results > footer { position:fixed !important; top:auto !important; bottom:20px !important; height:174px !important; min-height:174px !important; padding:18px 28px !important; }
html.jwj-soft-dark-preview,html.jwj-soft-dark-preview body { background:#111522 !important; } html.jwj-soft-dark-preview #generation-workspace > div > header { background:rgba(18,23,38,.94) !important; } html.jwj-soft-dark-preview #generation-workspace #main-canvas { background:#111522 !important; } html.jwj-soft-dark-preview #generation-workspace .welcome-panel h1,html.jwj-soft-dark-preview #generation-workspace .brand-logo-header + span { color:#f3f5fb !important; } html.jwj-soft-dark-preview #generation-workspace > div > footer { background:rgba(27,32,51,.95) !important; border-color:rgba(255,255,255,.10) !important; } html.jwj-soft-dark-preview #generation-workspace #prompt-input { color:#f4f6fb !important; }
@media (max-width:900px) { #generation-workspace > div > header { padding:0 20px; }.jwj-product-nav { gap:16px; }.jwj-product-nav button:nth-child(n+3) { display:none; } #jwj-marketing-sections { padding:0 20px; }.jwj-steps-grid { gap:20px; }.jwj-steps-grid,.jwj-marketing-advantages { grid-template-columns:repeat(2,minmax(0,1fr)); }.jwj-marketing-footer { grid-template-columns:2fr 1fr 1fr; }.jwj-marketing-footer nav:last-of-type { display:none; }.jwj-hero-float--idea { left:16px !important; }.jwj-hero-float--image { left:12px !important; }.jwj-hero-float--audio { right:12px !important; } }
@media (max-width:560px) { #generation-workspace > div > header { height:68px; min-height:68px; padding:0 14px; } #generation-workspace > div > header > div:first-child { min-width:0; }.jwj-product-nav { display:none; }.jwj-product-nav-cta { display:none; } #generation-workspace #main-canvas { height:calc(100vh - 68px); }.jwj-reference-suggestions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; height:auto; }.jwj-reference-suggestions button { height:40px; padding:0 10px; font-size:11px; }.jwj-hero-mode-switch { width:100%; justify-content:space-between; gap:3px; }.jwj-hero-mode-switch button { flex:1; justify-content:center; gap:4px; padding:0 5px; font-size:11px; }.jwj-hero-mode-switch button .material-symbols-outlined { font-size:16px; } #generation-workspace #main-canvas > footer { top:360px !important; width:calc(100% - 20px) !important; height:278px !important; min-height:278px !important; padding:18px !important; border-radius:22px !important; } #generation-workspace #prompt-input { height:92px !important; min-height:92px !important; font-size:15px !important; } #generation-workspace #upload-button { right:50px !important; } #jwj-marketing-sections { padding:0 14px; }.jwj-marketing-heading h2 { font-size:25px; }.jwj-steps-grid { grid-template-columns:1fr; gap:16px; }.jwj-marketing-advantages { grid-template-columns:1fr; }.jwj-marketing-advantages article { border-right:0; border-bottom:1px solid var(--jwj-brand-line); }.jwj-marketing-advantages article:last-child { border-bottom:0; }.jwj-inspiration { min-height:540px; }.jwj-marketing-cta { flex-direction:column; align-items:flex-start; padding:24px; }.jwj-marketing-footer { grid-template-columns:1fr 1fr; gap:28px 18px; }.jwj-footer-brand { grid-column:1 / -1; }.jwj-footer-bottom { flex-direction:column; }.jwj-footer-bottom span:last-child { gap:12px; }.jwj-hero-decorations { display:none !important; } }