/* (owner 2026-10-22) one platform: left sidebar with everything, slim top bar, Home screen (see ws4.js) */
body.s4 .ws2 { grid-template-columns: 264px 1fr !important; grid-template-rows: 1fr !important; }
body.s4 .s2-side { display: none !important; }
body.s4 .s2-chatside { grid-column: 1 !important; grid-row: 1 !important; overflow-y: auto; background: #fff; border-right: 1px solid #eceef1; padding: 14px 12px 14px !important; gap: 2px !important; scrollbar-width: thin; }
body.s4 .s2-main { grid-column: 2 !important; grid-row: 1 !important; padding: 0 !important; gap: 0 !important; min-width: 0; }
body.s4 .s2-chatside .s2-side-x { display: none !important; }
body.s4 .s2-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px !important; text-decoration: none; color: #0f1419; border: 0 !important; }
body.s4 .s2-logo img { width: 34px; height: 34px; } body.s4 .s2-logo span b { display: block; font: 800 16px 'Plus Jakarta Sans', Inter, sans-serif; } body.s4 .s2-logo span small { display: block; font-size: 12px; color: #6b7280; }
body.s4 .s3-menu { margin: 2px 0 6px !important; gap: 1px !important; }
body.s4 .s3-row { padding: 8px 12px !important; font-size: 15px !important; font-weight: 500 !important; border-radius: 10px !important; }
body.s4 .s3-row.s3-new { background: none !important; } body.s4 .s3-row:hover { background: #f3f4f6 !important; }
body.s4 .s3-row.on { background: #f1f2f4 !important; font-weight: 600 !important; }
body.s4 .s3-row svg { width: 19px !important; height: 19px !important; }
body.s4 .s3-grp > summary { font-size: 13px !important; font-weight: 600 !important; color: #6b7280 !important; padding: 10px 12px 4px !important; }
body.s4 .s3-grp { margin: 2px 0 !important; }
body.s4 .s3-hist[open] { flex: 0 1 auto !important; max-height: 34vh; overflow: auto; }
.s4-groups { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.s4-lbl { font: 600 13px 'Plus Jakarta Sans', Inter, sans-serif; color: #6b7280; padding: 12px 12px 4px; }
.s4-groups > .m-row, .s4-groups > details > summary.m-row { display: flex !important; align-items: center; gap: 12px !important; padding: 8px 12px !important; border-radius: 10px; font: 500 15px 'Plus Jakarta Sans', Inter, sans-serif !important; color: #111827 !important; text-decoration: none; cursor: pointer; list-style: none; background: none !important; }
.s4-groups > details > summary::-webkit-details-marker { display: none; }
.s4-groups > .m-row:hover, .s4-groups > details > summary.m-row:hover { background: #f3f4f6 !important; }
.s4-groups .mi { width: 19px !important; height: 19px !important; display: block !important; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; }
.s4-groups .m-row span { flex: 1; font-size: 15px !important; display: inline !important; }
.s4-groups .mc { display: block !important; width: 15px; height: 15px; flex: none; fill: none; stroke: #9ca3af; stroke-width: 2.2; transition: transform .15s; }
.s4-groups details[open] > summary .mc { transform: rotate(90deg); }
.s4-groups .m-sub { position: static !important; display: none; box-shadow: none !important; border: 0 !important; background: none !important; padding: 2px 0 6px 43px !important; min-width: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
.s4-groups details[open] > .m-sub { display: flex !important; flex-direction: column; gap: 0; }
.s4-groups .m-sub a { padding: 6px 10px !important; border-radius: 8px; font: 500 14px Inter, sans-serif !important; color: #4b5563 !important; text-decoration: none; display: flex !important; justify-content: space-between; gap: 8px; white-space: normal !important; }
.s4-groups .m-sub a:hover { background: #f3f4f6; color: #111827 !important; } .s4-groups .m-sub a i { font-style: normal; color: #2563eb; font-size: 12.5px; }
.s4-refer { margin-top: auto; display: flex; gap: 10px; align-items: center; border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; text-decoration: none; color: #111827; font: 500 13px Inter, sans-serif; }
.s4-refer svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #f3f4f6; fill: none; stroke: #111827; stroke-width: 1.8; flex: none; }
.s4-refer b { display: block; font: 700 14px 'Plus Jakarta Sans', Inter, sans-serif; } .s4-refer:hover { background: #f9fafb; }
/* top bar */
.s4-top { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 22px; border-bottom: 1px solid #eceef1; background: #fff; flex: none; position: relative; z-index: 5; }
.s4-title { font: 600 16px 'Plus Jakarta Sans', Inter, sans-serif; color: #111827; min-width: 60px; }
.s4-search { display: flex; align-items: center; gap: 10px; width: min(360px, 34vw); height: 38px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: #6b7280; font: 500 14px Inter, sans-serif; padding: 0 12px; cursor: pointer; margin-left: auto; margin-right: auto; }
.s4-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.s4-sp { display: none; }
.s4-top .s3-topright { margin-left: 0 !important; padding-left: 0 !important; }
.s4-burger { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; color: #111827; }
body.s4 .s2-work { padding-top: 0 !important; }
/* home screen */
body.s4 .s3-greet { font: 600 36px/1.2 'Plus Jakarta Sans', Inter, sans-serif !important; letter-spacing: -.02em; margin-bottom: 26px !important; }
/* (owner 2026-10-23: "bring the chatbox down" -> the middle of the screen) the heading and Ask anything box sit centered in the first screen; the cards start just below it */
body.s4 .ws2:not(.s2-busy) .s2-work > .agent-stream { padding-top: max(60px, calc(50vh - 150px)) !important; }
.s4-homebody { order: 3; display: flex; flex-direction: column; gap: 30px; margin-top: 36px; width: min(1150px, 100%); align-self: center; padding-bottom: 60px; }
.ws2.s2-busy .s4-homebody { display: none; }
.s4-tools { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.s4-tools button { display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font: 500 14px Inter, sans-serif; color: #111827; padding: 6px 2px; border-radius: 14px; }
.s4-tools button i { width: 46px; height: 46px; border-radius: 13px; border: 1px solid #e5e7eb; display: grid; place-items: center; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.s4-tools button:hover i { background: #f3f4f6; }
.s4-tools svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s4-news { position: relative; border-radius: 22px; overflow: hidden; }
.s4-slides { display: flex; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.s4-slide { flex: 0 0 100%; min-height: 190px; display: grid; place-items: center; text-align: center; color: #fff; padding: 28px 24px; }
.s4-slide h3 { font: 600 30px/1.2 'Plus Jakarta Sans', Inter, sans-serif; margin: 0 0 8px; letter-spacing: -.01em; }
.s4-slide p { font: 500 16px/1.5 Inter, sans-serif; max-width: 640px; margin: 0 auto 16px; opacity: .92; }
.s4-slide button { background: #fff; color: #0f1419; border: 0; border-radius: 10px; padding: 10px 18px; font: 700 15px Inter, sans-serif; cursor: pointer; }
.s4-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.s4-dots button { width: 7px; height: 7px; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); padding: 0; cursor: pointer; } .s4-dots button.on { background: #fff; }
.s4-tabbar { display: flex; gap: 8px; border-bottom: 1px solid #e5e7eb; margin-bottom: 14px; }
.s4-tabbar button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; font: 500 15px Inter, sans-serif; color: #6b7280; cursor: pointer; margin-bottom: -1px; }
.s4-tabbar button.on { color: #111827; border-bottom-color: #111827; font-weight: 600; }
.s4-tabbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.s4-tabbody[hidden] { display: none; }
.s4-rec { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; cursor: pointer; text-align: left; font: 500 14.5px Inter, sans-serif; color: #111827; }
.s4-rec svg { width: 20px; height: 20px; fill: none; stroke: #6b7280; stroke-width: 1.8; flex: none; } .s4-rec span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s4-rec small { color: #9ca3af; }
.s4-rec:hover { background: #f9fafb; } .s4-empty { color: #6b7280; font: 500 14.5px Inter, sans-serif; }
#s4-quick .s2-ideas { display: contents !important; } #s4-quick .s2-ideas button { display: block !important; padding: 14px !important; border-radius: 14px !important; text-align: left; font-size: 14.5px !important; }
body.s4 .ws2:not(.s2-busy) .s2-work > .agent-stream .s2-ideas { margin-top: 0 !important; }
/* dark mode */
html[data-mode="dark"] body.s4 .s2-chatside, html[data-mode="dark"] .s4-top { background: #0b1220; border-color: #1f2937; }
html[data-mode="dark"] .s4-groups > .m-row, html[data-mode="dark"] .s4-groups > details > summary.m-row, html[data-mode="dark"] .s4-title, html[data-mode="dark"] .s4-tools button, html[data-mode="dark"] body.s4 .s2-logo { color: #e5e7eb !important; }
html[data-mode="dark"] .s4-tools button i, html[data-mode="dark"] .s4-rec, html[data-mode="dark"] .s4-search, html[data-mode="dark"] .s4-refer { background: #111827; border-color: #374151; color: #e5e7eb; }
/* phones */
@media (max-width: 900px) {
  body.s4 .ws2 { display: block !important; }
  body.s4 .s2-chatside { position: fixed !important; z-index: 50; inset: 0 auto 0 0; width: 280px; transform: translateX(-100%); transition: transform .2s; display: flex !important; flex-direction: column; }
  body.s4.s2-open .s2-chatside { transform: none; }
  .s4-burger { display: block; } .s4-search span { display: none; } .s4-search { width: 38px; margin: 0 0 0 auto; justify-content: center; padding: 0; }
  .s4-top { padding: 0 12px; gap: 8px; } .s4-top .s3-topright { max-width: 46vw; overflow-x: auto; }
  .s4-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
  .s4-slide h3 { font-size: 22px; } body.s4 .s3-greet { font-size: 26px !important; }
  .s4-homebody { margin-top: 36px; padding: 0 2px 40px; }
}

/* (2026-10-22) one platform: no "exit" (the app is the site); phones keep menu, title, search and plan */
body.s4 .s3-topright a[href*="index"] { display: none !important; }
@media (max-width: 900px) { body.s4 .s3-topright .mode-slot { display: none !important; } }
/* (owner 2026-10-22) every sidebar item opens a page: a flat list, and tool windows shown as pages in the main area */
.s4-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.s4-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: 500 15px 'Plus Jakarta Sans', Inter, sans-serif; color: #111827; text-align: left; }
.s4-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.s4-item:hover { background: #f3f4f6; } .s4-item.on { background: #f1f2f4; font-weight: 600; }
html[data-mode="dark"] .s4-item { color: #e5e7eb; } html[data-mode="dark"] .s4-item:hover, html[data-mode="dark"] .s4-item.on { background: #1f2937; }
/* a tool window shown as the page */
body.s4p .s4-asPage { position: fixed !important; inset: 58px 0 0 264px !important; z-index: 40 !important; background: #f6f7fb !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 28px 32px 60px !important; overflow-y: auto !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; }
body.s4p .s4-asPage > div:first-child, body.s4p .s4-asPage > .pl-box { width: 100% !important; max-width: 1100px !important; margin: 0 auto !important; box-shadow: 0 1px 3px rgba(15,23,42,.06) !important; border-radius: 18px !important; }
body.s4p .s4-asPage .x, body.s4p .s4-asPage .pl-x, body.s4p #media-modal.s4-asPage > div > div:first-child > button, body.s4p #modal-close-btn { display: none !important; }
html[data-mode="dark"] body.s4p .s4-asPage { background: #0a1124 !important; }
/* pages of our own (cards) and pages from their own file (in the app) */
.s4-page { position: fixed; inset: 58px 0 0 264px; z-index: 39; background: #f6f7fb; overflow-y: auto; }
.s4-page[hidden] { display: none; }
.s4-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.s4-pagein { max-width: 1100px; margin: 0 auto; padding: 34px 32px 60px; }
.s4-pagein h1 { font: 600 30px 'Plus Jakarta Sans', Inter, sans-serif; margin: 0 0 22px; color: #111827; letter-spacing: -.01em; }
.s4-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.s4-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 20px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; cursor: pointer; color: #111827; }
.s4-card svg { width: 26px; height: 26px; fill: none; stroke: #111827; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.s4-card b { font: 600 16.5px 'Plus Jakarta Sans', Inter, sans-serif; } .s4-card span { font: 500 14px/1.5 Inter, sans-serif; color: #6b7280; }
.s4-card:hover { border-color: #cbd5e1; box-shadow: 0 8px 24px -12px rgba(15,23,42,.2); }
html[data-mode="dark"] .s4-page { background: #0a1124; } html[data-mode="dark"] .s4-card { background: #111827; border-color: #374151; color: #e5e7eb; } html[data-mode="dark"] .s4-card svg { stroke: #e5e7eb; } html[data-mode="dark"] .s4-pagein h1 { color: #e5e7eb; }
@media (max-width: 900px) { body.s4p .s4-asPage, .s4-page { inset: 58px 0 0 0 !important; } body.s4p .s4-asPage { padding: 14px 10px 40px !important; } .s4-pagein { padding: 20px 14px 40px; } }

/* (owner 2026-10-22) one layout for every page: title, tabs, tiles, search, list, floating prompt bar with credits */
.pg-area { position: fixed; inset: 58px 0 0 264px; z-index: 39; background: #fff; overflow-y: auto; }
.pg-area[hidden] { display: none; }
.pg { max-width: 1160px; margin: 0 auto; padding: 44px 40px 40px; font-family: 'Plus Jakarta Sans', Inter, sans-serif; color: #111827; }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pg h1 { font: 500 32px 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.02em; margin: 0; }
.pg-sub { color: #6b7280; font: 500 15px/1.5 Inter, sans-serif; margin: 6px 0 0; }
.pg-act, .pg-dark { display: inline-flex; align-items: center; gap: 8px; background: #0f1419; color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font: 600 15px Inter, sans-serif; cursor: pointer; }
.pg-act svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.2; } .pg-act:hover, .pg-dark:hover { background: #2a3238; } .pg-dark:disabled, .pg-go:disabled { opacity: .5; cursor: default; }
.pg-tabs { display: flex; gap: 6px; border-bottom: 1px solid #e5e7eb; margin: 22px 0 22px; }
.pg-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; font: 500 15px Inter, sans-serif; color: #6b7280; cursor: pointer; margin-bottom: -1px; }
.pg-tabs button.on { color: #111827; border-bottom-color: #111827; font-weight: 600; }
.pg-tabs-s { margin-top: 36px; }
.pg-body { margin-top: 22px; } .pg-tabs + .pg-body { margin-top: 0; }
.pg-h3 { font: 600 17px 'Plus Jakarta Sans', Inter, sans-serif; margin: 34px 0 14px; }
.pg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin-bottom: 26px; }
.pg-tile { position: relative; height: 132px; border: 0; border-radius: 14px; cursor: pointer; overflow: hidden; color: #fff; text-align: left; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.pg-tile svg { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.4; }
.pg-tile b { font: 600 15px 'Plus Jakarta Sans', Inter, sans-serif; text-shadow: 0 1px 6px rgba(0,0,0,.25); } .pg-tile:hover { filter: brightness(1.08); }
.pg-search { display: flex; align-items: center; gap: 10px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 14px; background: #fff; }
.pg-search svg { width: 18px; height: 18px; fill: none; stroke: #6b7280; stroke-width: 2; flex: none; } .pg-search input { border: 0; outline: none; flex: 1; font: 500 15px Inter, sans-serif; background: none; color: #111827; min-width: 0; }
.pg-filters { display: flex; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; } .pg-filters button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 5px 10px; font: 500 13px Inter, sans-serif; color: #374151; cursor: default; }
.pg-filters svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.pg-table { width: 100%; border-collapse: collapse; margin-top: 16px; font: 500 14.5px Inter, sans-serif; }
.pg-table th { text-align: left; color: #6b7280; font-weight: 500; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
.pg-table td { padding: 14px 12px; border-bottom: 1px solid #f1f2f4; color: #111827; vertical-align: middle; } .pg-table tr:hover td { background: #fafafa; }
.pg-cell { display: flex; align-items: center; gap: 12px; min-width: 0; } .pg-cell svg { width: 34px; height: 34px; padding: 8px; border-radius: 9px; background: #f3f4f6; fill: none; stroke: #6b7280; stroke-width: 1.8; flex: none; box-sizing: border-box; }
.pg-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.pg-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #374151; border: 0; background: none; cursor: pointer; } .pg-ic:hover { background: #f3f4f6; } .pg-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.pg-link { border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 6px 12px; font: 600 13.5px Inter, sans-serif; cursor: pointer; color: #111827; }
.pg-st { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #f3f4f6; font-size: 12.5px; color: #374151; text-transform: capitalize; }
.pg-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 60px 20px; text-align: center; color: #6b7280; font: 500 14.5px Inter, sans-serif; }
.pg-empty svg { width: 48px; height: 48px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; fill: none; stroke: #6b7280; stroke-width: 1.6; margin-bottom: 8px; box-sizing: border-box; } .pg-empty b { color: #111827; font-size: 15px; } .pg-empty .pg-act { margin-top: 10px; }
.pg-loading { color: #9ca3af; font: 500 14px Inter, sans-serif; padding: 20px 4px; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 16px; }
.pg-gi { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: #f3f4f6; } .pg-gi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-gi span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font: 500 13px Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pg-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 0 0 4px; border: 0; background: none; cursor: pointer; color: #111827; }
.pg-card i { width: 100%; height: 150px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 8px; }
.pg-card i svg { width: 54px; height: 54px; fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.4; } .pg-card:hover i { filter: brightness(1.08); }
.pg-card b { font: 600 15.5px 'Plus Jakarta Sans', Inter, sans-serif; } .pg-card span { font: 500 13.5px/1.45 Inter, sans-serif; color: #6b7280; }
.pg-hero { text-align: center; margin: 18px 0 0; } .pg-hero h2 { font: 500 30px 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.02em; margin: 0 0 20px; }
.pg-ask { display: flex; align-items: center; gap: 8px; max-width: 680px; margin: 0 auto; border: 1px solid #e5e7eb; border-radius: 999px; padding: 6px 6px 6px 20px; box-shadow: 0 6px 20px -10px rgba(15,23,42,.2); }
.pg-ask input { flex: 1; border: 0; outline: none; font: 500 16px Inter, sans-serif; min-width: 0; background: none; color: #111827; }
.pg-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pg-tool { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 0; background: none; cursor: pointer; color: #111827; padding: 0; }
.pg-tool i { height: 210px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 8px; } .pg-tool i svg { width: 50px; height: 50px; fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.4; }
.pg-tool b { font: 600 15px 'Plus Jakarta Sans', Inter, sans-serif; } .pg-tool span { font: 500 13px Inter, sans-serif; color: #6b7280; }
.pg-barpad { height: 210px; }
.pg-bar { position: fixed; left: calc(264px + (100vw - 264px) / 2); transform: translateX(-50%); bottom: 22px; width: min(700px, calc(100vw - 304px)); z-index: 41; border: 1px solid #e5e7eb; border-radius: 20px; background: #f9fafb; box-shadow: 0 18px 50px -18px rgba(15,23,42,.35); }
.pg-chips { display: flex; gap: 8px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; } .pg-chips::-webkit-scrollbar { display: none; }
.pg-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 6px 10px; font: 500 13.5px Inter, sans-serif; color: #111827; cursor: pointer; }
.pg-chips svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pg-barin { margin: 10px 8px 8px; background: #fff; border: 1px solid #eceef1; border-radius: 14px; padding: 12px 12px 10px; }
.pg-barin textarea { width: 100%; border: 0; outline: none; resize: none; font: 500 16px/1.5 Inter, sans-serif; color: #111827; background: none; box-sizing: border-box; }
.pg-barrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pg-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 6px 10px; font: 600 13.5px Inter, sans-serif; color: #111827; cursor: pointer; }
.pg-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pg-sp { flex: 1; } .pg-cost, .pg-credits { font: 500 13px Inter, sans-serif; color: #6b7280; white-space: nowrap; } .pg-cost:not(:empty)::after { content: " ·"; }
.pg-go { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #0f1419; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; } .pg-go svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2.3; }
.pg-msg { font: 500 13.5px Inter, sans-serif; color: #6b7280; padding: 4px 4px 0; } .pg-msg:empty { display: none; } .pg-msg.ok { color: #047857; } .pg-msg.err { color: #b91c1c; }
.pg-copy { margin-top: 10px; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px; font: 500 15px/1.6 Inter, sans-serif; background: #fafafa; }
.pg-split { display: grid; grid-template-columns: 1fr 340px; max-width: none; padding: 0; min-height: 100%; }
.pg-main { padding: 44px 48px 40px; max-width: 900px; } .pg-bigtext { width: 100%; min-height: 360px; border: 0; outline: none; resize: vertical; font: 400 18px/1.7 Inter, sans-serif; margin-top: 20px; color: #111827; box-sizing: border-box; background: none; }
.pg-foot { display: flex; align-items: center; gap: 14px; border-top: 1px solid #f1f2f4; padding-top: 14px; } .pg-count { font: 500 13px Inter, sans-serif; color: #6b7280; }
.pg-panel { border-left: 1px solid #e5e7eb; padding: 30px 22px; display: flex; flex-direction: column; gap: 16px; } .pg-ptabs b { border-bottom: 2px solid #111827; padding-bottom: 8px; display: inline-block; font: 600 15px Inter, sans-serif; }
.pg-panel label { display: flex; flex-direction: column; gap: 6px; font: 600 14px Inter, sans-serif; color: #111827; } .pg-panel select { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; font: 500 14px Inter, sans-serif; background: #fff; }
.pg-note { font: 500 13px Inter, sans-serif; color: #6b7280; } .pg-note a { color: #111827; }
.pg-bal { border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px 22px; margin-bottom: 22px; max-width: 520px; }
.pg-balh { display: flex; justify-content: space-between; align-items: center; color: #6b7280; font: 500 14px Inter, sans-serif; } .pg-balh .pg-dark { padding: 7px 12px; font-size: 13.5px; }
.pg-bal > b { display: block; font: 600 34px 'Plus Jakarta Sans', Inter, sans-serif; margin-top: 6px; } .pg-bal small { color: #6b7280; font: 500 13.5px Inter, sans-serif; }
.pg-meter { height: 8px; background: #f1f2f4; border-radius: 99px; margin: 14px 0 8px; overflow: hidden; } .pg-meter i { display: block; height: 100%; background: #0f1419; border-radius: 99px; }
.pg-balrow { display: flex; justify-content: space-between; font: 500 13px Inter, sans-serif; color: #6b7280; }
.pg-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pg-plan { border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; } .pg-plan.cur { border-color: #111827; box-shadow: 0 0 0 1px #111827; }
.pg-plan > b { font: 600 17px 'Plus Jakarta Sans', Inter, sans-serif; } .pg-price { font: 600 30px 'Plus Jakarta Sans', Inter, sans-serif; } .pg-price small { font-size: 14px; color: #6b7280; }
.pg-plan ul { margin: 4px 0 10px; padding-left: 18px; font: 500 14px/1.7 Inter, sans-serif; color: #374151; flex: 1; } .pg-plan .pg-dark { justify-content: center; }
.acct { position: relative; margin-left: 6px; } .acct-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; padding: 3px; display: grid; place-items: center; }
.acct-ring { --p: 0; width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(#0f1419 calc(var(--p) * 1%), #e5e7eb 0); display: grid; place-items: center; }
.acct-ring::after { content: attr(data-p); width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 700 8px Inter, sans-serif; color: #111827; }
.acct-menu { position: absolute; right: 0; top: 46px; width: 260px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 20px 50px -14px rgba(15,23,42,.3); padding: 6px; z-index: 60; }
.acct-menu[hidden] { display: none; }
.acct-card { border: 1px solid #eceef1; border-radius: 12px; padding: 12px; margin-bottom: 6px; font: 500 13.5px Inter, sans-serif; } .acct-card small { color: #6b7280; display: block; } .acct-card b { font-weight: 600; }
.acct-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .acct-h span { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; } .acct-h svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.acct-up { background: #0f1419; color: #fff; border: 0; border-radius: 8px; padding: 5px 10px; font: 600 12.5px Inter, sans-serif; cursor: pointer; }
.acct-row { display: flex; justify-content: space-between; color: #6b7280; padding: 2px 0; } .acct-row b { color: #111827; }
.acct-menu > button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; font: 500 14px Inter, sans-serif; color: #111827; cursor: pointer; } .acct-menu > button:hover { background: #f3f4f6; }
.acct-menu hr { border: 0; border-top: 1px solid #eceef1; margin: 4px 0; }
.s4-title a { color: #6b7280; text-decoration: none; } .s4-title a:hover { color: #111827; } .s4-crumb { color: #9ca3af; margin: 0 4px; }
body.s4p .s4-asPage { --bg-card: #fff; --bg-dark: #fff; --text-main: #111827; --text-muted: #6b7280; --border-color: #e5e7eb; background: #fff !important; inset: 58px 0 0 264px !important; }
body.s4p .s4-asPage > div:first-child { background: #fff !important; color: #111827 !important; border: 0 !important; box-shadow: none !important; padding: 34px 28px !important; }
body.s4p .s4-asPage input, body.s4p .s4-asPage select, body.s4p .s4-asPage textarea { background: #fff !important; color: #111827 !important; border: 1px solid #e5e7eb !important; }
body.s4p .s4-asPage h3, body.s4p .s4-asPage h2 { color: #111827 !important; }
html[data-mode="dark"] .pg-area, html[data-mode="dark"] .pg-bar, html[data-mode="dark"] .pg-barin, html[data-mode="dark"] .acct-menu, html[data-mode="dark"] .acct-btn { background: #0b1220; color: #e5e7eb; border-color: #1f2937; }
html[data-mode="dark"] .pg, html[data-mode="dark"] .pg-table td, html[data-mode="dark"] .pg-card, html[data-mode="dark"] .pg-tool, html[data-mode="dark"] .acct-menu > button { color: #e5e7eb; }
@media (max-width: 900px) {
  .pg-area, body.s4p .s4-asPage { inset: 58px 0 0 0 !important; } .pg { padding: 24px 16px 30px; } .pg h1 { font-size: 26px; }
  .pg-bar { left: 50%; width: calc(100vw - 20px); bottom: 10px; } .pg-barpad { height: 230px; }
  .pg-split { grid-template-columns: 1fr; } .pg-main { padding: 24px 16px; } .pg-panel { border-left: 0; border-top: 1px solid #e5e7eb; }
  .pg-table th:nth-child(n+3), .pg-table td:nth-child(n+3):not(:last-child) { display: none; } .pg-cell span { max-width: 52vw; }
  .pg-tiles { grid-template-columns: repeat(2, 1fr); } .pg-tool i { height: 130px; }
}

/* (2026-10-22) AI Studio tools (ws4-studio.js): upload cards, voice list, bookshelf, avatar photo, flow steps */
.st-up { border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; padding: 14px; margin: 6px 0 22px; box-shadow: 0 10px 30px -22px rgba(15,23,42,.35); }
.st-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 1.5px dashed #d1d5db; border-radius: 14px; padding: 30px 16px; background: #f9fafb; transition: background .15s, border-color .15s; }
.st-drop.over { background: #eef2ff; border-color: #6366f1; }
.st-drop > svg { width: 30px; height: 30px; stroke: #6b7280; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.st-drop b { font-size: 15px; color: #111827; } .st-drop span { font-size: 13px; color: #6b7280; }
.st-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.st-btns .pg-link { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 600; }
.st-btns svg, .st-tag svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-fname { font-size: 13px; color: #059669 !important; font-weight: 600; min-height: 1em; }
.st-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.st-in { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; background: #fff; color: #111827; }
.st-wide { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.st-ta { width: 100%; box-sizing: border-box; min-height: 110px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; font: inherit; font-size: 15px; resize: vertical; background: #fff; color: #111827; }
.st-tall { min-height: 260px; }
.st-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #374151; }
.st-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; border: 1px solid #e5e7eb; border-radius: 999px; padding: 6px 12px; }
.st-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.st-voice { display: flex; align-items: center; gap: 12px; border: 1px solid #eceef1; border-radius: 14px; padding: 10px 12px; background: #fff; }
.st-voice i { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.st-voice div { flex: 1; min-width: 0; } .st-voice b { display: block; font-size: 14px; } .st-voice span { font-size: 12px; color: #6b7280; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 22px; }
.st-big { display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; padding: 16px; cursor: pointer; font: inherit; color: inherit; }
.st-big:hover { border-color: #c7d2fe; box-shadow: 0 10px 30px -20px rgba(79,70,229,.5); }
.st-big i { width: 64px; height: 84px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.st-big i svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.7; }
.st-big b { display: block; font-size: 16px; margin-bottom: 4px; } .st-big span { font-size: 13px; color: #6b7280; }
.st-avrow { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.st-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed #d1d5db; border-radius: 14px; min-height: 150px; cursor: pointer; background: #f9fafb center/cover no-repeat; color: #6b7280; font-size: 13px; }
.st-photo svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.st-photo.has { border-style: solid; } .st-photo.has svg, .st-photo.has span { display: none; }
.st-ft { display: block; font-size: 17px; margin-bottom: 10px; }
.st-steps { list-style: none; padding: 0; margin: 4px 0 0; counter-reset: st; }
.st-steps li { counter-increment: st; display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid #f1f2f4; font-size: 14px; }
.st-steps li::before { content: counter(st); width: 22px; height: 22px; border-radius: 50%; background: #f3f4f6; color: #374151; font-size: 12px; display: grid; place-items: center; flex: none; }
.st-steps li.run::before { background: #e0e7ff; color: #4338ca; } .st-steps li.ok::before { content: "✓"; background: #d1fae5; color: #047857; } .st-steps li.err::before { content: "!"; background: #fee2e2; color: #b91c1c; }
.st-steps em { font-style: normal; color: #6b7280; margin-left: auto; text-align: right; max-width: 60%; }
html[data-mode="dark"] .st-up, html[data-mode="dark"] .st-voice, html[data-mode="dark"] .st-big, html[data-mode="dark"] .st-in, html[data-mode="dark"] .st-ta { background: #111827; border-color: #1f2937; color: #e5e7eb; }
html[data-mode="dark"] .st-drop, html[data-mode="dark"] .st-photo { background: #0b1220; border-color: #374151; } html[data-mode="dark"] .st-drop b { color: #f3f4f6; } html[data-mode="dark"] .st-btns .pg-link { background: #1f2937; border-color: #374151; color: #e5e7eb; }
@media (max-width: 760px) { .st-two, .st-avrow { grid-template-columns: 1fr; } .st-steps em { max-width: 55%; } }
.pg-panel label.st-chk { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; text-align: left; } .pg-panel label.st-chk input { width: auto; margin: 0; }

/* (2026-10-22) Plans & Billing (ws4-billing.js), laid out like the reference screenshots */
.bl .pg-head h1 { font-size: 30px; }
.bl-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 22px; }
.bl-card { border: 1px solid #e5e7eb; border-radius: 16px; padding: 18px 20px; background: #fff; }
.bl-row { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; } .bl-row b { font-weight: 600; }
.bl-bar { height: 8px; border-radius: 99px; background: #eef0f3; margin-top: 14px; overflow: hidden; } .bl-bar i { display: block; height: 100%; background: #111827; border-radius: 99px; }
.bl-sm { display: block; margin-top: 8px; color: #6b7280; font-size: 12px; }
.bl-cur { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bl-cur b { display: block; font-size: 15px; font-weight: 600; } .bl-cur span { display: block; color: #6b7280; font-size: 14px; margin-top: 4px; }
.bl-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; background: #fff; color: #111827; border-radius: 10px; padding: 8px 14px; font: 600 14px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.bl-btn:hover { background: #f9fafb; } .bl-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .bl-btn.sm { padding: 6px 11px; font-size: 13px; }
.bl-toggle { display: inline-flex; background: #f3f4f6; border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.bl-toggle button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; font: 500 14px Inter, sans-serif; color: #6b7280; cursor: pointer; } .bl-toggle button.on { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .bl-toggle span { color: inherit; opacity: .8; }
.bl-plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bl-plan { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; padding: 18px 18px 8px; display: flex; flex-direction: column; overflow: hidden; }
.bl-plan.cur { border-color: #111827; }
.bl-name { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .bl-name em { font-style: normal; font-size: 12px; background: #f97316; color: #fff; border-radius: 99px; padding: 2px 9px; margin-left: auto; }
.bl-was { color: #9ca3af; font-size: 15px; margin-top: 12px; display: block; height: 18px; }
.bl-price { font-size: 26px; font-weight: 700; margin-top: 12px; } .bl-was + .bl-price { margin-top: 0; } .bl-price small { font-size: 13px; font-weight: 400; color: #6b7280; margin-left: 2px; }
.bl-sub { color: #6b7280; font-size: 12px; margin: 2px 0 14px; min-height: 16px; }
.bl-pbtn { width: 100%; border: 1px solid #111827; background: #111827; color: #fff; border-radius: 10px; padding: 10px 12px; font: 600 14px Inter, sans-serif; cursor: pointer; }
.bl-pbtn.line { background: #fff; color: #111827; border-color: #d1d5db; } .bl-pbtn.ghost { background: #fff; color: #6b7280; border-color: #e5e7eb; cursor: default; } .bl-pbtn.danger { background: #dc2626; border-color: #dc2626; }
.bl-pbtn:disabled:not(.ghost) { opacity: .6; cursor: default; }
.bl-plan ul { list-style: none; margin: 14px -18px -8px; padding: 14px 18px 10px; background: #fafafa; border-top: 1px solid #f1f2f4; flex: 1; }
.bl-plan li { font-size: 13.5px; padding: 6px 0 6px 22px; position: relative; color: #111827; line-height: 1.35; } .bl-plan li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; } .bl-plan li.plus { color: #6b7280; } .bl-plan li.plus::before { content: "+"; }
.bl-h2 { font-size: 22px; font-weight: 600; margin: 34px 0 12px; }
.bl-cmpw { overflow-x: auto; } .bl-cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.bl-cmp th, .bl-cmp td { text-align: left; padding: 11px 12px; border-bottom: 1px solid #f1f2f4; } .bl-cmp th { font-weight: 600; } .bl-cmp td:first-child { color: #374151; }
.bl-ov { position: fixed; inset: 0; z-index: 10050; background: rgba(17,24,39,.28); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.bl-mod { background: #fff; color: #111827; border-radius: 20px; width: 100%; max-width: 540px; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 30px 80px -20px rgba(0,0,0,.35); font-family: Inter, sans-serif; }
.bl-mod.sm { max-width: 500px; } .bl-mod.wide { max-width: 560px; }
.bl-mh { display: flex; align-items: center; gap: 12px; padding: 20px 22px 6px; font-size: 19px; font-weight: 600; } .bl-x { margin-left: auto; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #111827; }
.bl-mi { width: 44px; height: 44px; border: 1px solid #e5e7eb; border-radius: 12px; display: grid; place-items: center; } .bl-mi svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.bl-mb { padding: 8px 22px 22px; font-size: 15px; line-height: 1.5; } .bl-mb p { margin: 0 0 12px; } .bl-muted { color: #6b7280; font-size: 14px; }
.bl-box { border: 1px solid #e5e7eb; border-radius: 14px; padding: 4px 16px; margin: 14px 0; }
.bl-r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f1f2f4; font-size: 14.5px; } .bl-r:last-child { border-bottom: 0; } .bl-r > span { color: #4b5563; } .bl-r > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.bl-pill { font-style: normal; background: #f3f4f6; border-radius: 99px; padding: 1px 8px; font-size: 12px; } .bl-pill.on { background: #d1fae5; color: #047857; }
.bl-acts { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .bl-acts .bl-pbtn { width: auto; padding: 10px 18px; }
.bl-offer { display: flex; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; margin: 6px 0 16px; } .bl-offer > i { width: 120px; background: #f3f4f6; display: grid; place-items: center; flex: none; } .bl-offer > i svg { width: 34px; height: 34px; stroke: #111827; fill: #fff; stroke-width: 1.6; background: #fff; border-radius: 10px; padding: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.bl-offer > div { padding: 18px 16px; } .bl-offer b { display: block; font-size: 16px; } .bl-offer b em { font-style: normal; font-size: 12px; font-weight: 600; background: #dcfce7; color: #166534; border-radius: 99px; padding: 2px 9px; margin-left: 6px; } .bl-offer span { color: #6b7280; font-size: 14px; display: block; margin-top: 6px; }
.bl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bl-note { font-size: 14px; min-height: 1em; margin-top: 6px; } .bl-note.err { color: #dc2626; }
.bl-done { width: 54px; height: 54px; border-radius: 50%; background: #d1fae5; color: #047857; display: grid; place-items: center; font-size: 26px; margin: 8px auto 12px; } .bl-c { text-align: center; }
.bl-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .bl-pack { border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 16px 10px; cursor: pointer; font: inherit; text-align: center; } .bl-pack:hover { border-color: #111827; } .bl-pack b { display: block; font-size: 15px; } .bl-pack span { color: #6b7280; font-size: 13px; }
.bl-sw { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; cursor: pointer; } .bl-sw input { display: none; } .bl-sw span { width: 40px; height: 22px; border-radius: 99px; background: #d1d5db; position: relative; transition: background .15s; flex: none; } .bl-sw span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; } .bl-sw input:checked + span { background: #111827; } .bl-sw input:checked + span::after { left: 21px; }
.bl-lbl { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #374151; }
html[data-mode="dark"] .bl-card, html[data-mode="dark"] .bl-plan, html[data-mode="dark"] .bl-mod, html[data-mode="dark"] .bl-btn, html[data-mode="dark"] .bl-pack, html[data-mode="dark"] .bl-pbtn.line, html[data-mode="dark"] .bl-pbtn.ghost { background: #111827; color: #e5e7eb; border-color: #1f2937; }
html[data-mode="dark"] .bl-plan ul { background: #0b1220; border-color: #1f2937; } html[data-mode="dark"] .bl-plan li, html[data-mode="dark"] .bl-x { color: #e5e7eb; } html[data-mode="dark"] .bl-pbtn { background: #f3f4f6; color: #111827; border-color: #f3f4f6; } html[data-mode="dark"] .bl-bar i { background: #e5e7eb; }
@media (max-width: 1250px) { .bl-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bl-top, .bl-plans, .bl-two { grid-template-columns: 1fr; } .bl-packs { grid-template-columns: 1fr; } .bl-cur { flex-direction: column; align-items: flex-start; } .bl-offer > i { width: 70px; } }

/* (2026-10-22) Quickstarts (ws4-quick.js): photo tiles with the title on a soft shade, and the two-pane template view */
.qs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.qs-tile { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; background: #f3f4f6; }
.qs-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; } .qs-tile:hover img { transform: scale(1.04); }
.qs-tile b { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; text-align: left; color: #fff; font: 600 14px Inter, sans-serif; background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.qs-all { margin: 14px auto 0; display: block; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 9px 16px; font: 600 14px Inter, sans-serif; cursor: pointer; color: #111827; }
.qs-hs { margin-top: 4px; }
.qs-run { display: grid; grid-template-columns: 380px 1fr; min-height: 100%; }
.qs-left { border-right: 1px solid #eceef1; padding: 22px 22px 30px; background: #fff; }
.qs-left h2 { font-size: 20px; margin: 10px 0 4px; } .qs-left > p { color: #6b7280; font-size: 14px; margin: 0 0 16px; line-height: 1.45; }
.qs-back { border: 0; background: none; color: #6b7280; font: 500 13px Inter, sans-serif; cursor: pointer; padding: 0; }
.qs-in { margin-bottom: 16px; } .qs-lbl { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.qs-lbl i { width: 20px; height: 20px; border-radius: 50%; background: #dbeafe; color: #1d4ed8; font: 700 11px Inter, sans-serif; font-style: normal; display: grid; place-items: center; }
.qs-ta { min-height: 76px; }
.qs-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed #d1d5db; border-radius: 12px; padding: 18px 12px; cursor: pointer; background: #f9fafb; color: #6b7280; font-size: 13px; text-align: center; min-height: 110px; }
.qs-drop svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; } .qs-drop.has { border-style: solid; }
.qs-thumbs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .qs-thumbs img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; }
.qs-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: #6b7280; margin: 6px 0 10px; }
.qs-cost { display: inline-flex; align-items: center; gap: 5px; } .qs-cost svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.qs-gen { width: 100%; border: 0; background: #111827; color: #fff; border-radius: 12px; padding: 13px; font: 600 15px Inter, sans-serif; cursor: pointer; } .qs-gen:disabled { opacity: .6; }
.qs-right { padding: 18px 24px 30px; min-width: 0; }
.qs-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.qs-res a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid #eceef1; background: #fff; color: #6b7280; text-decoration: none; font-size: 12px; }
.qs-res img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .qs-res span { display: block; padding: 7px 10px; }
.qs-ex { margin: 14px 0 0; } .qs-ex img { width: 100%; max-width: 760px; border-radius: 14px; display: block; } .qs-ex figcaption { color: #6b7280; font-size: 13px; margin-top: 8px; }
html[data-mode="dark"] .qs-left, html[data-mode="dark"] .qs-res a, html[data-mode="dark"] .qs-all { background: #111827; border-color: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .qs-drop { background: #0b1220; border-color: #374151; } html[data-mode="dark"] .qs-gen { background: #f3f4f6; color: #111827; }
@media (max-width: 1100px) { .qs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qs-run { grid-template-columns: 1fr; } .qs-left { border-right: 0; border-bottom: 1px solid #eceef1; } }

/* (2026-10-22) top bar like the reference: Feedback, Docs, Ask, Files, What's new; the Ask panel on the right (ws4-help.js) */
.hb { display: flex; align-items: center; gap: 8px; margin-right: 8px; position: relative; }
.hb-b { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #111827; font: 500 14px Inter, sans-serif; cursor: pointer; white-space: nowrap; position: relative; }
.hb-b:hover, .hb-b.on { background: #f3f4f6; } .hb-b svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hb-ask svg { stroke: #0ea5e9; fill: #0ea5e9; } .hb-i { width: 36px; padding: 0; justify-content: center; }
.hb-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; border: 2px solid #fff; }
.hb-pop { position: fixed; top: 58px; right: 8px; width: 320px; max-height: calc(100vh - 80px); overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 20px 50px -15px rgba(0,0,0,.25); padding: 8px; z-index: 1000; }
.hb-ph { display: block; padding: 6px 8px 8px; font-size: 14px; } .hb-pop button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 8px; border-radius: 10px; cursor: pointer; font: inherit; color: #111827; }
.hb-pop button:hover { background: #f3f4f6; } .hb-pop button b { display: block; font-size: 14px; } .hb-pop button span { display: block; font-size: 13px; color: #6b7280; line-height: 1.35; }
.ask { position: fixed; top: 58px; right: 0; bottom: 0; width: 360px; z-index: 45; background: #fff; border-left: 1px solid #eceef1; display: flex; flex-direction: column; font-family: Inter, sans-serif; }
.ask.wide { width: 560px; } body.ask-open .pg-area { right: 360px; } body.ask-open .ask.wide ~ .pg-area { right: 560px; }
.ask-h { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #f1f2f4; } .ask-h b { font-weight: 600; font-size: 15px; color: #111827; } html[data-mode="dark"] .ask-h b { color: #e5e7eb; }
.ask[hidden] { display: none !important; }   /* the X: the panel's display:flex must not beat [hidden] */
body.ask-open .s2-work { margin-right: 360px !important; } body.ask-open.ask-wide .s2-work { margin-right: 560px !important; } body.ask-open.ask-wide .pg-area { right: 560px; } .ask-sp { flex: 1; }
.ask-h button { width: 32px; height: 32px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: #374151; display: grid; place-items: center; } .ask-h button:hover { background: #f3f4f6; }
.ask-h svg, .ask-in button svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ask-log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.ask-empty { margin: auto 0; text-align: center; color: #6b7280; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ask-empty svg { width: 30px; height: 30px; stroke: #0ea5e9; fill: #0ea5e9; } .ask-empty b { color: #374151; font-weight: 500; } .ask-empty span { max-width: 260px; line-height: 1.45; margin-bottom: 8px; }
.ask-s { border: 1px solid #e5e7eb; background: #fff; border-radius: 99px; padding: 6px 12px; font: 13px Inter, sans-serif; cursor: pointer; color: #111827; } .ask-s:hover { background: #f9fafb; }
.ask-m { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-wrap: break-word; } .ask-m.user { align-self: flex-end; background: #111827; color: #fff; border-bottom-right-radius: 4px; }
.ask-m.assistant { align-self: flex-start; background: #f3f4f6; color: #111827; border-bottom-left-radius: 4px; } .ask-m a { color: #2563eb; } .ask-m.user a { color: #93c5fd; }
.ask-in { margin: 10px 12px 14px; border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px 10px 8px; box-shadow: 0 6px 20px -12px rgba(0,0,0,.25); }
.ask-in textarea { width: 100%; border: 0; resize: none; font: 14px Inter, sans-serif; outline: none; background: none; color: #111827; }
.ask-row { display: flex; align-items: center; justify-content: space-between; } .ask-row a { font-size: 12.5px; color: #6b7280; }
.ask-in button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #111827; color: #fff; cursor: pointer; display: grid; place-items: center; }
html[data-mode="dark"] .hb-b, html[data-mode="dark"] .hb-pop, html[data-mode="dark"] .ask, html[data-mode="dark"] .ask-s { background: #111827; color: #e5e7eb; border-color: #1f2937; } html[data-mode="dark"] .hb-pop button, html[data-mode="dark"] .ask-in textarea { color: #e5e7eb; }
html[data-mode="dark"] .ask-m.assistant { background: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .ask-in { border-color: #1f2937; }
@media (max-width: 1280px) { #hb-fb, #hb-files { display: none; } }
@media (max-width: 1000px) { #hb-docs, #hb-bell { display: none; } .ask, .ask.wide { width: 100%; } body.ask-open .pg-area, body.ask-open.ask-wide .pg-area { right: 0; } body.ask-open .s2-work, body.ask-open.ask-wide .s2-work { margin-right: 0 !important; } }
@media (max-width: 760px) { .hb-ask { padding: 0 10px; } .hb { margin-right: 4px; } }

/* (2026-10-22) the Back button before every page title */
.s4-goback { border: 1px solid #e5e7eb; background: #fff; color: #111827; border-radius: 9px; padding: 5px 11px; font: 500 13px Inter, sans-serif; cursor: pointer; margin-right: 12px; vertical-align: middle; }
.s4-goback:hover { background: #f3f4f6; } html[data-mode="dark"] .s4-goback { background: #111827; color: #e5e7eb; border-color: #1f2937; }
#s4-title { display: flex; align-items: center; white-space: nowrap; min-width: 0; flex-shrink: 0; } #s4-title .s4-goback { flex: none; }
@media (max-width: 760px) { #s4-title { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } .s4-goback { padding: 4px 8px; margin-right: 6px; } .hb-ask { font-size: 0; gap: 0; width: 36px; padding: 0; justify-content: center; } }
@media (max-width: 560px) { .s3-topright .usage-pills .pill-box, .s3-topright .mode-slot, .s4-top .s4-search { display: none !important; } .s3-topright { min-width: 0; gap: 6px; } .s3-topright .usage-pills button[onclick*="showTrialLockModal"] { padding: 8px 11px !important; } }
/* (2026-10-22) on phones the top bar scrolls sideways and clipped the account menu: it floats above the page instead */
@media (max-width: 900px) { .acct-menu { position: fixed; top: 58px; right: 8px; left: auto; width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 70px); overflow-y: auto; z-index: 1000; } }

/* (2026-10-22) Text to Speech like the reference (voicePage in ws4-pages.js) */
.tts .tts-main { display: flex; flex-direction: column; padding: 28px 48px 20px; min-height: calc(100vh - 58px); }
.tts-text { flex: 1; width: 100%; min-height: 380px; border: 0; outline: none; resize: none; font: 17px/1.7 Inter, sans-serif; color: #111827; background: transparent; padding: 0; }
.tts-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 6px; border-top: 1px solid #f1f2f4; font-size: 13px; color: #6b7280; }
.tts-foot .pg-dark { padding: 10px 18px; border-radius: 10px; }
.tts-dl { width: 38px; height: 38px; border: 1px solid #e5e7eb; border-radius: 10px; display: grid; place-items: center; color: #111827; } .tts-dl svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
#tts-play audio { width: 100%; margin-top: 10px; }
.tts-side { padding: 18px 22px 30px !important; }
.tts-tabs { display: flex; gap: 22px; border-bottom: 1px solid #eceef1; margin-bottom: 16px; } .tts-tabs button { border: 0; background: none; padding: 0 0 10px; font: 500 14.5px Inter, sans-serif; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tts-tabs button.on { color: #111827; border-color: #111827; }
.tts-l { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 14px; margin-bottom: 16px; } .tts-l select { font: 400 14px Inter, sans-serif; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #111827; }
.tts-model { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; margin: -4px 0 16px; background: linear-gradient(120deg, #fff7ed, #fdf2f8); } .tts-model b { display: block; font-size: 13.5px; } .tts-model span { font-size: 12.5px; color: #6b7280; }
.tts-sl { margin-bottom: 16px; } .tts-slh b { font-size: 14px; font-weight: 600; } .tts-sl input[type=range] { width: 100%; accent-color: #111827; margin: 8px 0 2px; } .tts-slt { display: flex; justify-content: space-between; font-size: 12px; color: #6b7280; }
.tts-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; margin-bottom: 16px; } .tts-row em { font-style: normal; font-weight: 500; font-size: 12.5px; background: #f3f4f6; border-radius: 99px; padding: 4px 10px; }
.tts-sw { appearance: none; width: 40px; height: 22px; border-radius: 99px; background: #d1d5db; position: relative; cursor: pointer; transition: background .15s; flex: none; } .tts-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; } .tts-sw:checked { background: #111827; } .tts-sw:checked::after { left: 21px; }
.tts-h { border-bottom: 1px solid #f1f2f4; padding: 10px 0; } .tts-h p { margin: 0; font-size: 14px; } .tts-h small { color: #6b7280; font-size: 12px; } .tts-h audio { width: 100%; height: 36px; margin-top: 6px; } .tts-h a { font-size: 12.5px; }
[hidden].tts-dl, #tts-pro[hidden], #tts-tone-l[hidden], #tts-lang-l[hidden], #tts-set[hidden], #tts-hist[hidden] { display: none !important; }
html[data-mode="dark"] .tts-text { color: #e5e7eb; } html[data-mode="dark"] .tts-l select, html[data-mode="dark"] .tts-dl { background: #111827; color: #e5e7eb; border-color: #1f2937; } html[data-mode="dark"] .tts-model { background: #0b1220; border-color: #1f2937; } html[data-mode="dark"] .tts-tabs button.on { color: #e5e7eb; border-color: #e5e7eb; }
@media (max-width: 1000px) { .tts .tts-main { padding: 20px 16px; min-height: 0; } .tts-text { min-height: 260px; } }
.pg-panel label.tts-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }

/* (2026-10-23) Quickstarts categories and audio results; the Text to Speech voice picker */
.qs-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; } .qs-cats button { border: 1px solid #e5e7eb; background: #fff; color: #374151; border-radius: 99px; padding: 6px 13px; font: 500 13px Inter, sans-serif; cursor: pointer; } .qs-cats button.on { background: #111827; color: #fff; border-color: #111827; }
.qs-aud { border: 1px solid #eceef1; border-radius: 12px; padding: 10px 12px; margin: 12px 0; background: #fff; } .qs-aud b { display: block; font-size: 14px; margin-bottom: 6px; } .qs-aud audio { width: 100%; } .qs-aud a { font-size: 12.5px; }
.qs-cp { margin-left: 6px; font-size: 12.5px; }
.tts-vbtn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; padding: 9px 12px; cursor: pointer; font: inherit; color: #111827; }
.tts-vbtn:hover { border-color: #c7d2fe; } .tts-vbtn i, .tts-v i { width: 26px; height: 26px; border-radius: 50%; flex: none; } .tts-vbtn span { flex: 1; min-width: 0; } .tts-vbtn b { display: block; font-size: 14px; } .tts-vbtn small { display: block; font-weight: 400; font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tts-vbtn em { font-style: normal; color: #9ca3af; font-size: 18px; }
.tts-pback { border: 0; background: none; font: 600 14px Inter, sans-serif; cursor: pointer; padding: 0 0 10px; color: #111827; }
.tts-ps { margin: 0 0 4px; } .tts-chips { margin: 6px 0 10px; } .tts-chips button { padding: 5px 11px; font-size: 12.5px; }
.tts-vl { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 290px); overflow-y: auto; margin-right: -8px; padding-right: 8px; }
.tts-v { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; } .tts-v:hover, .tts-v.on { background: #f3f4f6; }
.tts-v > div { flex: 1; min-width: 0; } .tts-v b { display: block; font-size: 13.5px; } .tts-v b em { font-style: normal; font-weight: 600; font-size: 10.5px; background: #fde68a; color: #92400e; border-radius: 99px; padding: 1px 6px; margin-left: 4px; } .tts-v small { display: block; font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tts-vp { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; font-size: 10px; flex: none; color: #111827; } .tts-vp:disabled { opacity: .35; cursor: default; }
#tts-pick[hidden] { display: none !important; }
html[data-mode="dark"] .qs-cats button, html[data-mode="dark"] .qs-aud, html[data-mode="dark"] .tts-vbtn, html[data-mode="dark"] .tts-vp { background: #111827; color: #e5e7eb; border-color: #1f2937; } html[data-mode="dark"] .qs-cats button.on { background: #e5e7eb; color: #111827; } html[data-mode="dark"] .tts-v:hover, html[data-mode="dark"] .tts-v.on { background: #1f2937; } html[data-mode="dark"] .tts-pback { color: #e5e7eb; }

/* (2026-10-23) Images and Video galleries, and the Sound Effects library (ws4-gallery.js) */
.gal-lead { color: #6b7280; font-size: 14px; margin: 0 0 4px; } .gal-lead a { color: #2563eb; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 14px 0 26px; } .gal-grid.wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gal-card { position: relative; border: 0; padding: 0; background: #f3f4f6; border-radius: 14px; overflow: hidden; cursor: pointer; text-align: left; aspect-ratio: 1; font: inherit; } .gal-grid.wide .gal-card { aspect-ratio: 16 / 10; }
.gal-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .gal-card:hover img { transform: scale(1.05); }
.gal-card b { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 9px; color: #fff; font-size: 13.5px; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.gal-card span { position: absolute; inset: 0; padding: 12px; background: rgba(17,24,39,.78); color: #fff; font-size: 12.5px; line-height: 1.45; opacity: 0; transition: opacity .2s; display: flex; align-items: flex-end; }
.gal-card:hover span, .gal-card:focus-visible span { opacity: 1; }
.gal-play { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.9); color: #111827; display: grid; place-items: center; font-size: 11px; font-style: normal; }
.gal-sel { position: relative; padding: 0 6px 0 10px !important; } .gal-sel select { border: 0; background: transparent; font: inherit; font-size: 13px; color: inherit; outline: none; max-width: 130px; cursor: pointer; }
.sfx-tiles { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .sfx-tile { flex: 0 0 150px; height: 120px; }
.sfx-bar { display: flex; gap: 10px; align-items: center; margin-top: 14px; } .sfx-bar .pg-search { flex: 1; margin: 0; } .sfx-bar select { height: 44px; }
.sfx-table td { vertical-align: middle; } .sfx-pl { width: 44px; } .sfx-t { display: block; font-weight: 500; font-size: 14px; } .sfx-c { color: #6b7280; font-size: 12.5px; } .sfx-d { width: 80px; color: #374151; } .sfx-a { width: 90px; text-align: right; white-space: nowrap; }
.sfx-a .pg-ic { display: inline-grid; margin-left: 6px; }
html[data-mode="dark"] .gal-card { background: #1f2937; }
@media (max-width: 760px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gal-grid.wide { grid-template-columns: 1fr; } .sfx-d { display: none; } .gal-sel select { max-width: 90px; } }
.vc-main .vc-mid { flex: 1; display: flex; align-items: center; justify-content: center; } .vc-mid #st-c { width: min(560px, 100%); } .vc-mid .st-up { box-shadow: none; border: 0; padding: 0; } #vc-set[hidden], #vc-hist[hidden], #vc-pick[hidden] { display: none !important; }
.vc-mid #pg-msg { display: none; }
.mus-bar { flex-wrap: wrap; } .mus-bar select { flex: none; min-width: 130px; } .mus-bar .pg-search { min-width: 240px; }
.pg-barrow { flex-wrap: wrap; row-gap: 8px; } .pg-barrow .pg-go { margin-left: auto; } .pg-barrow .pg-sp { flex: 1 1 0; min-width: 0; }

/* (2026-10-23) Audiobooks like the reference (bookshelf + step-by-step window) and the Voices library */
.ab-tabs { align-items: center; } .ab-v { border: 1px solid #e5e7eb !important; border-radius: 9px; width: 34px; height: 34px; padding: 0 !important; margin-left: 6px; font-size: 15px; } .ab-v.on { background: #111827; color: #fff !important; border-color: #111827 !important; }
.ab-sel { border: 1px solid #e5e7eb; border-radius: 99px; padding: 5px 10px; font: 500 13px Inter, sans-serif; background: #fff; color: #374151; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.ab-book { border: 1px solid #eceef1; border-radius: 16px; overflow: hidden; background: #fff; } .ab-cover { height: 150px; padding: 16px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.ab-cover b { font-size: 18px; line-height: 1.2; } .ab-cover span { font-size: 13px; opacity: .85; } .ab-meta { padding: 12px 14px; } .ab-meta > b { display: block; } .ab-meta > small { color: #6b7280; font-size: 12.5px; }
.ab-ch { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; } .ab-ch span { flex: 0 0 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ab-ch audio { flex: 1; height: 32px; min-width: 0; } .ab-ch a { text-decoration: none; } .ab-ch em { color: #6b7280; font-style: normal; }
.ab-mod { max-width: 900px !important; display: grid; grid-template-columns: 240px 1fr; padding: 0 !important; min-height: 560px; }
.ab-side { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-right: 1px solid #eceef1; } .ab-side button { display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 10px; font: 500 14px Inter, sans-serif; color: #374151; cursor: pointer; } .ab-side button.on { background: #f3f4f6; color: #111827; } .ab-side svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.ab-main { display: flex; flex-direction: column; min-width: 0; } .ab-steps { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #eceef1; font-size: 14px; color: #9ca3af; } .ab-steps span.on { color: #111827; font-weight: 600; } .ab-steps span.done { color: #374151; } .ab-steps i { font-style: normal; color: #d1d5db; } .ab-steps .bl-x { margin-left: auto; }
.ab-content { flex: 1; padding: 18px 20px; overflow-y: auto; max-height: calc(100vh - 220px); } .ab-foot { display: flex; justify-content: flex-end; gap: 12px; align-items: center; padding: 14px 20px; border-top: 1px solid #eceef1; }
.ab-file { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid #e5e7eb; border-radius: 14px; padding: 26px; cursor: pointer; text-align: center; } .ab-file svg { width: 22px; height: 22px; stroke: #111827; fill: none; stroke-width: 1.8; } .ab-file span { color: #6b7280; font-size: 13px; }
.ab-or { text-align: center; color: #9ca3af; font-size: 13px; margin: 10px 0 6px; } .ab-lbl { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 8px; } .ab-lbl select { display: block; width: 100%; margin-top: 8px; }
.ab-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ab-opt { text-align: left; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; background: #fff; cursor: pointer; font: inherit; color: #111827; } .ab-opt.on { border-color: #111827; box-shadow: 0 0 0 1px #111827; } .ab-opt b { display: block; } .ab-opt b em { font-style: normal; font-size: 11px; background: #f3f4f6; border-radius: 99px; padding: 1px 7px; margin-left: 4px; } .ab-opt span { color: #6b7280; font-size: 13px; }
.ab-row { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 10px; } .ab-row label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.ab-chs { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; } .ab-chr { display: flex; align-items: center; gap: 10px; } .ab-chr input { flex: 1; } .ab-chr span { color: #6b7280; font-size: 12.5px; white-space: nowrap; }
.ab-pr { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f1f2f4; font-size: 13.5px; } .ab-pr em { font-style: normal; color: #6b7280; } .ab-pr.ok em { color: #059669; }
.vx-bar { display: flex; gap: 10px; align-items: center; } .vx-bar .pg-search { flex: 1; margin: 0; } .vx-bar select { height: 44px; }
.st-voice.vx { gap: 10px; } .st-voice.vx .tts-vp { flex: none; } .vx-tag { font-style: normal; font-size: 10.5px; font-weight: 600; background: #fde68a; color: #92400e; border-radius: 99px; padding: 1px 6px; margin-left: 4px; } .vx-tag.lib { background: #e0e7ff; color: #3730a3; }
.vx-save.on { color: #059669; } .vx-sub { font-weight: 400; color: #6b7280; font-size: 13px; margin-left: 6px; } .vx-more { text-align: center; margin: 10px 0 30px; }
html[data-mode="dark"] .ab-book, html[data-mode="dark"] .ab-opt, html[data-mode="dark"] .ab-sel { background: #111827; color: #e5e7eb; border-color: #1f2937; } html[data-mode="dark"] .ab-side button.on { background: #1f2937; color: #e5e7eb; }
@media (max-width: 760px) { .ab-mod { grid-template-columns: 1fr; } .ab-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #eceef1; } .ab-side .pg-sp { display: none; } .ab-two, .ab-row { grid-template-columns: 1fr; } .vx-bar { flex-wrap: wrap; } }
.tl-head h1 { margin: 0; } .tl-head .pg-sub { margin: 4px 0 0; } .stt-out { max-height: 420px; overflow-y: auto; margin-top: 12px; }
/* the Audiobooks cards: small icons, like the reference (no big boxes) */
.st-big { padding: 14px 16px; border-radius: 14px; } .st-big i { width: 34px; height: 34px; border-radius: 9px; } .st-big i svg { width: 18px; height: 18px; } .st-big b { font-size: 15px; margin-bottom: 2px; }
.av-mid { flex: 1; display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; padding-top: 24px; } .av-photo { min-height: 260px; } .av-text { min-height: 260px; border: 1px solid #eceef1 !important; border-radius: 14px; padding: 14px !important; } .av-v { width: 100%; border-radius: 10px; margin-top: 6px; } .av-ok span { font-weight: 500; font-size: 13px; } @media (max-width: 760px) { .av-mid { grid-template-columns: 1fr; } }

/* (2026-10-23) box details pages (detail() in ws4-pages.js) and real screenshots on the boxes */
.pg-card i.pg-shot { background-size: cover !important; background-position: center top !important; background-color: #f3f4f6; } .pg-card i.pg-shot svg { display: none; }
.fd-back { color: #6b7280; text-decoration: none; font-size: 14px; } .fd-back:hover { color: #111827; }
.fd-head { display: flex; gap: 16px; align-items: center; margin: 14px 0 6px; } .fd-head i { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; flex: none; } .fd-head i svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.8; } .fd-head h1 { margin: 0; }
.fd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 34px; margin-top: 10px; align-items: start; }
.fd-list { list-style: none; padding: 0; margin: 0; } .fd-list li { padding: 7px 0 7px 26px; position: relative; font-size: 15px; } .fd-list li::before { content: "✓"; position: absolute; left: 0; color: #059669; font-weight: 700; }
.fd-steps { padding-left: 0; margin: 0; counter-reset: fd; list-style: none; } .fd-steps li { counter-increment: fd; display: flex; gap: 12px; align-items: center; padding: 7px 0; font-size: 15px; } .fd-steps li::before { content: counter(fd); width: 26px; height: 26px; border-radius: 50%; background: #111827; color: #fff; font: 600 13px Inter, sans-serif; display: grid; place-items: center; flex: none; }
.fd-incl { border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px 14px; margin: 20px 0 14px; background: #f9fafb; } .fd-incl b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; } .fd-incl span { font-size: 14.5px; }
.fd-acts { display: flex; gap: 10px; flex-wrap: wrap; } .fd-acts .pg-dark { padding: 11px 20px; }
.fd-shots { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; position: sticky; top: 10px; }
.fd-shots figure { margin: 0; } .fd-shots img { width: 100%; display: block; border: 1px solid #e5e7eb; box-shadow: 0 20px 40px -24px rgba(15,23,42,.35); background: #fff; }
.fd-phone img { border-radius: 22px; } .fd-desk img { border-radius: 12px; } .fd-shots figcaption { font-size: 12.5px; color: #6b7280; margin-top: 8px; text-align: center; }
.fd-shots:has(.fd-phone:only-child), .fd-shots:has(.fd-desk:only-child) { grid-template-columns: 1fr; } .fd-phone:only-child { max-width: 260px; }
.fd-noshot { border: 1px dashed #e5e7eb; border-radius: 16px; padding: 40px 20px; text-align: center; color: #6b7280; display: flex; flex-direction: column; align-items: center; gap: 12px; } .fd-noshot i { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; } .fd-noshot i svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.8; }
html[data-mode="dark"] .fd-incl { background: #0b1220; border-color: #1f2937; } html[data-mode="dark"] .fd-steps li::before { background: #e5e7eb; color: #111827; }
@media (max-width: 980px) { .fd-grid { grid-template-columns: 1fr; } .fd-shots { position: static; grid-template-columns: 160px 1fr; } }
@media (max-width: 560px) { .fd-shots { grid-template-columns: 1fr; } .fd-phone { max-width: 240px; margin: 0 auto !important; } }
.fd-shots .fd-wide { grid-column: 1 / -1; max-width: none !important; } .fd-phone.fd-wide img { border-radius: 12px; }
.fd-built { border: 1px solid #c7d2fe; background: linear-gradient(120deg, #eef2ff, #f5f3ff); border-radius: 14px; padding: 14px 16px; margin: 18px 0 4px; } .fd-built b { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; color: #3730a3; } .fd-built b svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; } .fd-built span { font-size: 14.5px; color: #374151; line-height: 1.5; } html[data-mode="dark"] .fd-built { background: #111827; border-color: #3730a3; } html[data-mode="dark"] .fd-built span { color: #d1d5db; } html[data-mode="dark"] .fd-built b { color: #a5b4fc; }
.fd-found { border-color: #a7f3d0; background: linear-gradient(120deg, #ecfdf5, #f0fdfa); margin-top: 10px; } .fd-found b { color: #047857; } html[data-mode="dark"] .fd-found { background: #0b1220; border-color: #065f46; } html[data-mode="dark"] .fd-found b { color: #6ee7b7; }

/* (2026-10-23) Home: picture cards for creating, the AI Studio section and what $9.92 includes (ws4-home.js) */
.hm { width: 100%; margin-top: 8px; }
.hm-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hm-card { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid #e5e7eb; border-radius: 18px; overflow: hidden; background: #fff; cursor: pointer; font: inherit; color: #111827; transition: transform .15s, box-shadow .15s; }
.hm-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(15,23,42,.45); }
.hm-pic { display: block; aspect-ratio: 16 / 10; background: #f3f4f6 center top / cover no-repeat; }
.hm-txt { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; } .hm-txt b { font-size: 16px; } .hm-txt small { color: #6b7280; font-size: 13px; line-height: 1.4; flex: 1; } .hm-txt em { font-style: normal; font-weight: 600; font-size: 13px; color: #2563eb; margin-top: 4px; }
.hm-sec { margin-top: 30px; } .hm-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .hm-h h2 { font-size: 20px; margin: 0; } .hm-h span { color: #6b7280; font-size: 14px; }
.hm-studio { display: flex; flex-wrap: wrap; gap: 8px; } .hm-tool { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e5e7eb; background: #fff; border-radius: 99px; padding: 7px 14px 7px 8px; font: 500 14px Inter, sans-serif; color: #111827; cursor: pointer; }
.hm-tool:hover { border-color: #c7d2fe; background: #f5f7ff; } .hm-tool i { width: 26px; height: 26px; border-radius: 50%; background: #eef2ff; display: grid; place-items: center; } .hm-tool svg { width: 15px; height: 15px; stroke: #4338ca; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-value { border: 1px solid #e5e7eb; border-radius: 20px; padding: 22px; background: linear-gradient(160deg, #f8fafc, #fff 60%); }
.hm-vh { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .hm-kick { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #059669; }
.hm-vh h2 { font-size: 24px; margin: 4px 0; letter-spacing: -.01em; } .hm-vh h2 strong { color: #059669; } .hm-vh p { color: #6b7280; margin: 0; font-size: 14.5px; } .hm-vbtns { display: flex; gap: 10px; flex-wrap: wrap; } .hm-vbtns .pg-dark { padding: 10px 18px; }
.hm-vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.hm-v { display: flex; flex-direction: column; gap: 5px; border: 1px solid #eceef1; border-radius: 14px; padding: 14px; background: #fff; } .hm-v i { width: 32px; height: 32px; border-radius: 9px; background: #ecfdf5; display: grid; place-items: center; } .hm-v svg { width: 17px; height: 17px; stroke: #047857; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-v b { font-size: 15px; } .hm-v span { font-size: 13px; color: #4b5563; line-height: 1.45; flex: 1; } .hm-v em { font-style: normal; font-size: 12px; font-weight: 600; color: #047857; background: #ecfdf5; border-radius: 99px; padding: 3px 9px; align-self: flex-start; }
.hm-fine { font-size: 13px; color: #6b7280; margin: 14px 0 0; } .hm-fine a { color: #2563eb; }
html[data-mode="dark"] .hm-card, html[data-mode="dark"] .hm-tool, html[data-mode="dark"] .hm-v { background: #111827; color: #e5e7eb; border-color: #1f2937; } html[data-mode="dark"] .hm-value { background: #0b1220; border-color: #1f2937; } html[data-mode="dark"] .hm-tool i { background: #1e1b4b; } html[data-mode="dark"] .hm-tool svg { stroke: #a5b4fc; }
@media (max-width: 1300px) { .hm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hm-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hm-cards { grid-template-columns: 1fr 1fr; gap: 10px; } .hm-txt small { display: none; } .hm-vgrid { grid-template-columns: 1fr; } .hm-value { padding: 16px; } .hm-vh h2 { font-size: 20px; } }
/* Home has content below the headline now, so it starts near the top instead of mid-screen */
body.s4 .ws2:not(.s2-busy) .s2-work > .agent-stream:has(.hm) { padding-top: max(56px, calc(50vh - 330px)) !important; }   /* the chat box well down the first screen, the cards right under it */
@media (max-width: 900px) { body.s4 .ws2:not(.s2-busy) .s2-work > .agent-stream:has(.hm) { padding-top: max(22px, calc(50vh - 300px)) !important; } }
/* (2026-10-23) dark mode: the chosen Recents/Quickstarts tab was dark text on a dark page */
html[data-mode="dark"] .s4-tabbar { border-bottom-color: #1f2937; } html[data-mode="dark"] .s4-tabbar button { color: #9ca3af; } html[data-mode="dark"] .s4-tabbar button.on { color: #f3f4f6; border-bottom-color: #f3f4f6; }
html[data-mode="dark"] .hm-h h2, html[data-mode="dark"] .hm-vh h2, html[data-mode="dark"] .hm-txt b, html[data-mode="dark"] .hm-v b { color: #f3f4f6; } html[data-mode="dark"] .hm-txt small, html[data-mode="dark"] .hm-v span, html[data-mode="dark"] .hm-vh p, html[data-mode="dark"] .hm-fine, html[data-mode="dark"] .hm-h span { color: #9ca3af; } html[data-mode="dark"] .hm-v i { background: #064e3b; } html[data-mode="dark"] .hm-v svg { stroke: #6ee7b7; } html[data-mode="dark"] .hm-v em { background: #064e3b; color: #6ee7b7; }
/* dark mode: the selected side-menu row (white highlight) and the dark buttons */
html[data-mode="dark"] body.s4 .s3-row.on, html[data-mode="dark"] body.s4 .s4-home.on { background: #1f2937 !important; color: #f3f4f6 !important; } html[data-mode="dark"] body.s4 .s3-row.on *, html[data-mode="dark"] body.s4 .s4-home.on * { color: #f3f4f6 !important; stroke: currentColor; }
html[data-mode="dark"] .pg-act, html[data-mode="dark"] .pg-dark { background: #f3f4f6; color: #111827; } html[data-mode="dark"] .pg-act svg, html[data-mode="dark"] .pg-dark svg { stroke: #111827; }
/* (2026-10-23) dark mode: every page tab, setting label, chip and table readable */
html[data-mode="dark"] .pg-tabs { border-color: #1f2937; } html[data-mode="dark"] .pg-tabs button { color: #9ca3af; } html[data-mode="dark"] .pg-tabs button.on { color: #f3f4f6; border-color: #f3f4f6; }
html[data-mode="dark"] .tts-tabs { border-color: #1f2937; } html[data-mode="dark"] .tts-tabs button { color: #9ca3af; } html[data-mode="dark"] .tts-l, html[data-mode="dark"] .tts-row, html[data-mode="dark"] .tts-slh b, html[data-mode="dark"] .ab-lbl, html[data-mode="dark"] .pg-h3, html[data-mode="dark"] .pg-head h1, html[data-mode="dark"] .tl-head h1 { color: #f3f4f6; } html[data-mode="dark"] .tts-slt { color: #9ca3af; }
html[data-mode="dark"] .tts-row em, html[data-mode="dark"] .bl-pill { background: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .tts-sl input[type=range] { accent-color: #e5e7eb; } html[data-mode="dark"] .tts-sw { background: #374151; } html[data-mode="dark"] .tts-sw:checked { background: #e5e7eb; } html[data-mode="dark"] .tts-sw::after { background: #111827; }
html[data-mode="dark"] .bl-bar { background: #1f2937; } html[data-mode="dark"] .bl-bar i { background: #e5e7eb; } html[data-mode="dark"] .bl-cmp th, html[data-mode="dark"] .bl-cmp td { color: #e5e7eb; border-color: #1f2937; } html[data-mode="dark"] .bl-toggle { background: #1f2937; } html[data-mode="dark"] .bl-toggle button { color: #9ca3af; } html[data-mode="dark"] .bl-toggle button.on { background: #111827; color: #f3f4f6; } html[data-mode="dark"] .bl-name, html[data-mode="dark"] .bl-price, html[data-mode="dark"] .bl-cur b, html[data-mode="dark"] .bl-row, html[data-mode="dark"] .bl-h2 { color: #f3f4f6; }
html[data-mode="dark"] .pg-table th, html[data-mode="dark"] .pg-table td { color: #e5e7eb; border-color: #1f2937; } html[data-mode="dark"] .sfx-t, html[data-mode="dark"] .pg-cell span { color: #f3f4f6; } html[data-mode="dark"] .pg-search { background: #111827; border-color: #1f2937; } html[data-mode="dark"] .pg-search input { color: #e5e7eb; } html[data-mode="dark"] .st-in, html[data-mode="dark"] .st-ta, html[data-mode="dark"] select.st-in { background: #111827; color: #e5e7eb; border-color: #1f2937; }
html[data-mode="dark"] .pg-card b, html[data-mode="dark"] .fd-head h1, html[data-mode="dark"] .fd-list li, html[data-mode="dark"] .fd-steps li, html[data-mode="dark"] .qs-left h2, html[data-mode="dark"] .qs-lbl, html[data-mode="dark"] .tts-text, html[data-mode="dark"] .s4-goback { color: #f3f4f6; } html[data-mode="dark"] .fd-shots img { border-color: #1f2937; } html[data-mode="dark"] .pg-sub, html[data-mode="dark"] .pg-card span { color: #9ca3af; }
/* (2026-10-23) visual editor bar (ws4-vedit.js) */
.ve-btn.on { background: #6366f1 !important; color: #fff !important; }
.ve-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: #eef2ff; border-bottom: 1px solid #c7d2fe; font: 13px Inter, sans-serif; color: #3730a3; } .ve-bar[hidden] { display: none; } .ve-bar b { font-weight: 700; } .ve-bar span { flex: 1; min-width: 200px; color: #4338ca; } .ve-bar em { font-style: normal; color: #059669; font-weight: 600; } .ve-bar button { border: 1px solid #c7d2fe; background: #fff; color: #3730a3; border-radius: 8px; padding: 5px 12px; font: 600 13px Inter, sans-serif; cursor: pointer; } #ve-done { background: #4f46e5; color: #fff; border-color: #4f46e5; }
html[data-mode="dark"] .ve-bar { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; } html[data-mode="dark"] .ve-bar span { color: #a5b4fc; } html[data-mode="dark"] .ve-bar button { background: #111827; color: #c7d2fe; border-color: #3730a3; }

/* (2026-10-23) Blog page (ws4-blog.js) */
.bg-site { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 12px; } .bg-live { font-size: 14px; color: #6b7280; } .bg-live a { color: #2563eb; } .pg-st.bg-pub { background: #d1fae5; color: #047857; }
.bg-ed { max-width: 1240px; } .bg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-top: 12px; align-items: start; }
.bg-title { width: 100%; border: 0; outline: none; font: 700 32px/1.2 Inter, sans-serif; color: #111827; background: transparent; padding: 6px 0; }
.bg-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; border-bottom: 1px solid #eceef1; position: sticky; top: 0; background: #fff; z-index: 2; } .bg-tools button { border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 5px 10px; font: 600 13px Inter, sans-serif; cursor: pointer; color: #111827; } .bg-tools button:hover { background: #f3f4f6; }
.bg-text { min-height: 520px; outline: none; font: 17px/1.75 Georgia, 'Times New Roman', serif; color: #1f2937; padding: 16px 2px 40px; } .bg-text:empty::before { content: attr(data-ph); color: #9ca3af; font-family: Inter, sans-serif; }
.bg-text h2 { font: 700 24px/1.3 Inter, sans-serif; margin: 1.3em 0 .4em; } .bg-text h3 { font: 700 19px/1.3 Inter, sans-serif; margin: 1.2em 0 .3em; } .bg-text img { max-width: 100%; border-radius: 12px; } .bg-text blockquote { border-left: 4px solid #c7d2fe; margin: 1em 0; padding: .2em 1em; color: #4b5563; }
.bg-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 10px; } .bg-box { border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; } .bg-box > b { font-size: 14px; } .bg-box small { color: #6b7280; font-size: 12px; }
.bg-row { display: flex; gap: 8px; flex-wrap: wrap; } .bg-row select { flex: 1; } .bg-short { min-height: 60px; } .bg-cover { aspect-ratio: 16 / 9; border-radius: 10px; background: #f3f4f6 center / cover no-repeat; display: grid; place-items: center; color: #9ca3af; font-size: 13px; }
.bg-acts .pg-dark { justify-content: center; } .bg-acts .bl-btn { justify-content: center; } .bg-del { color: #dc2626; align-self: center; }
html[data-mode="dark"] .bg-title, html[data-mode="dark"] .bg-text { color: #e5e7eb; } html[data-mode="dark"] .bg-tools { background: #030712; border-color: #1f2937; } html[data-mode="dark"] .bg-tools button, html[data-mode="dark"] .bg-box { background: #111827; color: #e5e7eb; border-color: #1f2937; } html[data-mode="dark"] .bg-cover { background-color: #1f2937; }
@media (max-width: 980px) { .bg-grid { grid-template-columns: 1fr; } .bg-side { position: static; } .bg-title { font-size: 26px; } }

/* (2026-10-23) Email marketing page (ws4-mail.js) */
.ml-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 14px; } .ml-stats > div { position: relative; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 16px; background: #fff; overflow: hidden; } .ml-stats b { display: block; font-size: 24px; } .ml-stats b small { font-size: 14px; color: #6b7280; font-weight: 500; } .ml-stats span { font-size: 13px; color: #6b7280; } .ml-stats i { position: absolute; left: 0; bottom: 0; height: 3px; background: #2563eb; }
.ml-warn { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 12px; padding: 10px 14px; font-size: 14px; } .ml-warn a { color: inherit; font-weight: 600; }
.ml-h { font-weight: 600; margin: 4px 0 10px; } .ml-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ml-tpl { text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; color: #111827; } .ml-tpl:hover { border-color: #111827; } .ml-tpl span { font-size: 24px; } .ml-tpl b { font-size: 15px; } .ml-tpl small { color: #6b7280; font-size: 12.5px; }
.ml-sub { display: block; color: #6b7280; font-size: 12.5px; } .ml-bar .ml-sub { display: inline; margin-left: 6px; } .ml-red { color: #dc2626; } .pg-st.ml-red2 { background: #fee2e2; color: #b91c1c; } .pg-st.ml-sch { background: #fef3c7; color: #92400e; } .pg-st.ml-go { background: #dbeafe; color: #1d4ed8; }
.ml-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } .ml-tag { display: inline-block; background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 1px 8px; font-size: 12px; margin: 1px 0; }
.ml-addbox { margin-bottom: 14px; } .ml-ok { display: flex; gap: 8px; align-items: center; font-size: 14px; } .ml-ok input { width: auto; }
.ml-f { display: flex; flex-direction: column; gap: 10px; } .ml-f label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; } .ml-f label span { font-weight: 400; color: #6b7280; } .ml-f label.ml-ok { flex-direction: row; font-weight: 500; }
.ml-btnrow { flex-direction: row; flex-wrap: wrap; margin-top: 10px; } .ml-btnrow label { flex: 1; min-width: 200px; }
.ml-hero { margin-top: 14px; aspect-ratio: 3 / 1; border-radius: 12px; background: #f3f4f6 center / cover no-repeat; display: grid; place-items: center; color: #9ca3af; font-size: 13px; border: 1px dashed #d1d5db; }
.ml-text { min-height: 320px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .ml-wb { min-height: 160px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; font-size: 15px; }
.ml-when { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #6b7280; }
.ml-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .ml-two > div { display: flex; flex-direction: column; gap: 12px; } .ml-joinprev { width: 100%; height: 400px; border: 0; border-radius: 12px; background: #f6f7fb; }
.ml-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 9999; display: grid; place-items: center; padding: 16px; } .ml-mbox { background: #fff; border-radius: 16px; width: 100%; max-width: 680px; height: min(86vh, 900px); display: flex; flex-direction: column; overflow: hidden; }
.ml-mhead { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; } .ml-mhead span { color: #6b7280; font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-mhead button { border: 0; background: none; font-size: 26px; cursor: pointer; color: #6b7280; } .ml-mbox iframe { flex: 1; border: 0; width: 100%; }
html[data-mode="dark"] .ml-stats > div, html[data-mode="dark"] .ml-tpl { background: #111827; border-color: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .ml-hero { background-color: #1f2937; border-color: #374151; } html[data-mode="dark"] .ml-warn { background: #431407; border-color: #7c2d12; color: #fed7aa; } html[data-mode="dark"] .ml-tag { background: #1e1b4b; color: #c7d2fe; } html[data-mode="dark"] .ml-mbox, html[data-mode="dark"] .ml-mhead { background: #111827; border-color: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .ml-wb { border-color: #374151; } html[data-mode="dark"] .ml-joinprev { background: #1f2937; }
@media (max-width: 760px) { .ml-stats { grid-template-columns: 1fr; } .ml-two { grid-template-columns: 1fr; } }
.bl-btn[hidden] { display: none !important; } .ml-mhead b { color: #111827; } html[data-mode="dark"] .ml-mhead b { color: #f3f4f6; } .ml-bar button { white-space: nowrap; }
.ml-hero { aspect-ratio: auto; height: 150px; } .ml-f label { display: block; } .ml-f label > input, .ml-f label > select { display: block; margin-top: 5px; } .ml-f label.ml-ok { display: flex; } .ml-f label.ml-ok > input { margin: 0; }
@media (max-width: 760px) { .pg-tabs { overflow-x: auto; } .pg-tabs button { flex: none; } .ml-pg .pg-table td:last-child { white-space: normal; } .ml-pg .pg-table td:last-child button { margin: 2px 0; } .ml-pg .pg-table { table-layout: fixed; } .ml-pg .pg-table td:first-child { overflow: hidden; } .ml-pg .pg-cell span { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* long links or words in a chat message wrap instead of widening the phone screen */
.msg-bubble, .msg-bubble * { overflow-wrap: anywhere; word-break: break-word; } .msg-bubble pre { white-space: pre-wrap; } .msg-bubble img, .msg-bubble video { max-width: 100%; }
/* (2026-10-23) phones: while a page is open the top bar (Back, title) stays pinned and the chat behind it does not scroll */
@media (max-width: 900px) { body.s4p { overflow: hidden; } body.s4p .s4-top { position: fixed !important; top: 0; left: 0; right: 0; z-index: 41; } }
@media (max-width: 760px) { .ml-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; } .ml-stats > div { padding: 10px; } .ml-stats b { font-size: 18px; } .ml-stats b small { font-size: 11px; } .ml-stats span { font-size: 11.5px; line-height: 1.3; display: block; } }

/* (2026-10-23) Analytics page (ws4-analytics.js); colors from the validated chart palette, own steps for dark mode */
.an { --an-s1: #2a78d6; --an-s2: #eb6834; --an-s3: #1baf7a; --an-area: rgba(42, 120, 214, .12); --an-grid: #eceef1; --an-ink2: #52514e; --an-muted: #6b7280; --an-card: #fff; --an-line: #e5e7eb; --an-up: #047857; --an-down: #b91c1c; }
html[data-mode="dark"] .an { --an-s1: #3987e5; --an-s2: #d95926; --an-s3: #199e70; --an-area: rgba(57, 135, 229, .18); --an-grid: #1f2937; --an-ink2: #c3c2b7; --an-muted: #9ca3af; --an-card: #111827; --an-line: #1f2937; --an-up: #34d399; --an-down: #f87171; }
.an-live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--an-up); background: rgba(16, 185, 129, .1); border-radius: 999px; padding: 6px 12px; } .an-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: anp 1.6s infinite; } @keyframes anp { 50% { opacity: .3; } }
.an-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 6px 0 16px; } .an-site1 { font-size: 15px; }
.an-range { display: inline-flex; background: #f1f3f5; border-radius: 10px; padding: 3px; gap: 2px; } .an-range button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font: 500 14px Inter, sans-serif; color: var(--an-muted); cursor: pointer; } .an-range button.on { background: #fff; color: #111827; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .an-range.sm button { padding: 5px 10px; font-size: 13px; }
html[data-mode="dark"] .an-range { background: #1f2937; } html[data-mode="dark"] .an-range button.on { background: #374151; color: #f3f4f6; }
.an-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .an-kpi { background: var(--an-card); border: 1px solid var(--an-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; } .an-kpi span { font-size: 13px; color: var(--an-muted); } .an-kpi b { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.an-d { font-size: 12.5px; color: var(--an-muted); font-weight: 600; } .an-d.up { color: var(--an-up); } .an-d.down { color: var(--an-down); } .an-vs { font-size: 12.5px; color: var(--an-muted); margin: 6px 0 14px; }
.an-tip { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; } .an-tip a { color: inherit; font-weight: 600; } html[data-mode="dark"] .an-tip { background: #172554; border-color: #1e3a8a; color: #bfdbfe; }
.an-card { background: var(--an-card); border: 1px solid var(--an-line); border-radius: 16px; padding: 16px; min-width: 0; } .an-ch { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .an-ch b { font-size: 15px; } .an-sub { display: block; color: var(--an-muted); font-size: 12.5px; margin: -2px 0 10px; }
.an-main { margin-bottom: 14px; } .an-plot { position: relative; } .an-plot svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.an-gl { stroke: var(--an-grid); stroke-width: 1; } .an-ax { fill: var(--an-muted); font: 500 11.5px Inter, sans-serif; } .an-line { fill: none; stroke: var(--an-s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .an-area { fill: var(--an-area); } .an-dot { fill: var(--an-s1); stroke: var(--an-card); stroke-width: 2; } .an-bar1 { fill: var(--an-s1); }
.an-cross { stroke: var(--an-muted); stroke-width: 1; stroke-dasharray: 3 3; } .an-hdot { fill: var(--an-s1); stroke: var(--an-card); stroke-width: 2; pointer-events: none; }
.an-tip2 { position: absolute; top: 6px; background: #111827; color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13px; pointer-events: none; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.2); } .an-tip2 span { font-weight: 600; } .an-tip2 small { color: #cbd5e1; } html[data-mode="dark"] .an-tip2 { background: #f3f4f6; color: #111827; } html[data-mode="dark"] .an-tip2 small { color: #4b5563; }
.an-tablewrap { max-height: 340px; overflow: auto; }
.an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.an-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .an-list li { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; overflow: hidden; }
.an-list li i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--an-area); border-radius: 8px; } .an-list li span { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .an-list li b { position: relative; font-weight: 600; } .an-list li em { position: relative; font-style: normal; color: var(--an-muted); width: 38px; text-align: right; font-size: 12.5px; }
.an-none { color: var(--an-muted); font-size: 13.5px; padding: 8px 0; }
.an-stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; margin: 6px 0 14px; } .an-stack i, .an-legend i { background: var(--an-s1); } .an-stack i.s2, .an-legend i.s2 { background: var(--an-s2); } .an-stack i.s3, .an-legend i.s3 { background: var(--an-s3); }
.an-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .an-legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; } .an-legend li i { width: 10px; height: 10px; border-radius: 3px; } .an-legend li b { margin-left: auto; } .an-legend li em { font-style: normal; color: var(--an-muted); width: 52px; text-align: right; font-size: 12.5px; }
.an-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 110px; align-items: end; } .an-hours div { height: 100%; display: flex; align-items: flex-end; } .an-hours i { width: 100%; background: var(--an-s1); border-radius: 3px 3px 0 0; } .an-hx { display: flex; justify-content: space-between; color: var(--an-muted); font-size: 11.5px; margin-top: 6px; }
.an-rl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .an-rl li { display: flex; align-items: center; gap: 8px; font-size: 14px; } .an-rl li em { font-style: normal; flex: 1; color: var(--an-ink2); } .an-rl li b { font-size: 17px; }
.an-sales { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--an-line); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .an-sales span { color: var(--an-muted); font-size: 13.5px; } .an-sales b { font-size: 20px; text-align: right; }
@media (max-width: 1200px) { .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-kpi b { font-size: 21px; } .an-grid { grid-template-columns: 1fr; } .an-bar { flex-direction: column; align-items: stretch; } .an-range { justify-content: space-between; } .an-range button { flex: 1; } }
.an-cc { display: inline-block; font-style: normal; font: 600 10.5px Inter, sans-serif; letter-spacing: .04em; background: #e5e7eb; color: #374151; border-radius: 4px; padding: 1px 5px; margin-right: 4px; vertical-align: 1px; } html[data-mode="dark"] .an-cc { background: #374151; color: #e5e7eb; }
.an-tip2[hidden] { display: none; }
.an-list li span .an-cc { position: static; width: auto; height: auto; }

/* (2026-10-23) Languages page (ws4-langs.js) */
.lg-langs { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; margin: 6px 0 4px; } .lg-lang { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid #f1f2f4; background: #fff; } .lg-lang:first-child { border-top: 0; } .lg-lang > div { flex: 1; min-width: 0; } .lg-lang b { display: block; font-size: 15px; } .lg-lang small { color: #6b7280; font-size: 13px; } .lg-base { background: #f9fafb; } .lg-stale { color: #b45309; font-weight: 600; }
.lg-job { border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; border-radius: 14px; padding: 14px 16px; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 8px; } .lg-prog { height: 8px; background: #dbeafe; border-radius: 99px; overflow: hidden; } .lg-prog i { display: block; height: 100%; background: #2563eb; border-radius: 99px; transition: width .4s; } .lg-job small { color: #1e40af; }
.lg-add, .lg-set { margin-top: 14px; max-width: 760px; } .lg-chips { display: flex; flex-wrap: wrap; gap: 8px; } .lg-chip { border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: 7px 12px; font: 500 13.5px Inter, sans-serif; cursor: pointer; color: #111827; } .lg-chip:hover { border-color: #111827; }
html[data-mode="dark"] .lg-langs { border-color: #1f2937; } html[data-mode="dark"] .lg-lang { background: #111827; border-color: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .lg-base { background: #0f172a; } html[data-mode="dark"] .lg-chip { background: #111827; border-color: #374151; color: #e5e7eb; } html[data-mode="dark"] .lg-job { background: #172554; border-color: #1e3a8a; color: #bfdbfe; } html[data-mode="dark"] .lg-job small { color: #93c5fd; } html[data-mode="dark"] .lg-prog { background: #1e3a8a; } html[data-mode="dark"] .lg-stale { color: #fbbf24; }

/* (2026-10-23) CRM page (ws4-crm.js) */
.cr-acts { display: flex; gap: 8px; } .cr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cr-due { color: #b91c1c !important; } html[data-mode="dark"] .cr-due { color: #f87171 !important; }
.cr-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 12px; align-items: start; }
.cr-col { background: #f3f4f6; border-radius: 14px; padding: 10px; min-height: 160px; transition: background .15s; } .cr-col.over { background: #e0e7ff; outline: 2px dashed #6366f1; }
.cr-colh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px 10px; } .cr-colh b { font-size: 14px; } .cr-colh span { font-size: 12px; color: #6b7280; white-space: nowrap; }
.cr-cards { display: flex; flex-direction: column; gap: 8px; } .cr-card { background: #fff; border: 1px solid #e5e7eb; border-left: 3px solid transparent; border-radius: 10px; padding: 10px 12px; cursor: grab; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .cr-card:hover { border-color: #c7d2fe; } .cr-card.drag { opacity: .5; } .cr-card.stuck { border-left-color: #dc2626; }
.cr-card b { font-size: 14px; font-weight: 600; } .cr-who { font-size: 12.5px; color: #4b5563; } .cr-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #6b7280; } .cr-meta em { font-style: normal; font-weight: 600; color: #047857; } .cr-card.stuck .cr-meta small { color: #b91c1c; font-weight: 600; }
.cr-src { align-self: flex-start; font-size: 11px; background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 1px 8px; } .cr-dot { display: inline-block; width: 7px; height: 7px; background: #f59e0b; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.cr-addc { border: 1px dashed #cbd5e1; background: transparent; border-radius: 10px; padding: 8px; font: 500 13px Inter, sans-serif; color: #6b7280; cursor: pointer; } .cr-addc:hover { border-color: #6366f1; color: #4338ca; }
.cr-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; } .cr-bulk select { max-width: 200px; }
.cr-lists { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .lg-chip.on { background: #111827; color: #fff; border-color: #111827; }
.cr-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 9999; display: grid; place-items: center; padding: 16px; } .cr-mbox { background: #fff; border-radius: 16px; width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .cr-mbox.wide { max-width: 960px; }
.cr-mhead { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #e5e7eb; } .cr-mhead b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cr-mhead button { border: 0; background: none; font-size: 26px; color: #6b7280; cursor: pointer; line-height: 1; } .cr-mbody { padding: 16px 18px 18px; overflow-y: auto; }
.cr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cr-cf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cr-cf:empty { display: none; }
.cr-hist { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #4b5563; } .cr-hist b { color: #111827; font-size: 13.5px; } .cr-won { border-color: #10b981 !important; color: #047857 !important; }
.cr-cw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } .cr-side { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid #f1f2f4; padding-left: 20px; } .cr-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-dl { display: flex; justify-content: space-between; gap: 8px; text-decoration: none; color: #111827; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; font-weight: 600; } .cr-dl span { font-weight: 400; color: #6b7280; font-size: 12.5px; }
.cr-line { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; } .cr-line li { display: flex; gap: 10px; font-size: 13.5px; } .cr-line li i { font-style: normal; } .cr-line li div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .cr-line li span { overflow-wrap: anywhere; } .cr-line small { color: #6b7280; font-size: 12px; } .cr-line small a { color: #6b7280; }
.cr-tg { margin-bottom: 16px; } .cr-tg > b { display: block; font-size: 14px; margin-bottom: 6px; } .cr-tg > b span { color: #6b7280; font-weight: 500; } .cr-task { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 6px; background: #fff; } .cr-task input { width: auto; } .cr-task a { flex: 1; color: #111827; text-decoration: none; font-size: 14px; } .cr-task small { color: #6b7280; font-size: 12.5px; } .cr-task.done a { text-decoration: line-through; color: #9ca3af; }
.cr-pe { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .cr-pn { font-weight: 600; } .cr-se { display: flex; gap: 6px; align-items: center; } .cr-se .st-in { flex: 1; } .cr-fh { font-size: 13px; margin-top: 6px; } .cr-fo { margin: -2px 0 4px; } .cr-setcol { display: flex; flex-direction: column; gap: 12px; }
.cr-reasons { display: flex; flex-wrap: wrap; gap: 8px; } .cr-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cr-wide { grid-column: span 3; }
.cr-funnel { display: flex; flex-direction: column; gap: 10px; } .cr-frow { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 12px; align-items: center; } .cr-frow > span { font-weight: 600; font-size: 14px; } .cr-frow small { grid-column: 2; color: #6b7280; font-size: 12.5px; } .cr-fbar { position: relative; height: 26px; } .cr-fbar i { position: absolute; left: 0; top: 0; bottom: 0; background: #2a78d6; border-radius: 6px; } .cr-fbar b { position: relative; line-height: 26px; padding-left: 8px; color: #fff; font-size: 13px; }
html[data-mode="dark"] .cr-col { background: #0f172a; } html[data-mode="dark"] .cr-col.over { background: #1e1b4b; } html[data-mode="dark"] .cr-card, html[data-mode="dark"] .cr-task, html[data-mode="dark"] .cr-mbox { background: #111827; border-color: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .cr-card.stuck { border-left-color: #f87171; } html[data-mode="dark"] .cr-who { color: #9ca3af; } html[data-mode="dark"] .cr-meta em { color: #34d399; }
html[data-mode="dark"] .cr-mhead, html[data-mode="dark"] .cr-side, html[data-mode="dark"] .cr-pe { border-color: #1f2937; } html[data-mode="dark"] .cr-mhead b, html[data-mode="dark"] .cr-hist b, html[data-mode="dark"] .cr-dl, html[data-mode="dark"] .cr-task a { color: #f3f4f6; } html[data-mode="dark"] .cr-dl { border-color: #374151; } html[data-mode="dark"] .cr-bulk { background: #1e1b4b; border-color: #3730a3; } html[data-mode="dark"] .cr-src { background: #1e1b4b; color: #c7d2fe; } html[data-mode="dark"] .cr-hist { color: #9ca3af; } html[data-mode="dark"] .cr-fbar i { background: #3987e5; } html[data-mode="dark"] .lg-chip.on { background: #f3f4f6; color: #111827; }
@media (max-width: 1200px) { .cr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cr-wide { grid-column: span 2; } }
@media (max-width: 760px) { .cr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .cr-board { grid-auto-columns: 82%; } .cr-cw, .cr-two, .cr-cf { grid-template-columns: 1fr; } .cr-side { border-left: 0; padding-left: 0; } .cr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cr-wide { grid-column: auto; } .cr-frow { grid-template-columns: 1fr; } .cr-frow small { grid-column: 1; } .cr-acts .bl-btn { display: none; } }
.cr-mbox { color: #111827; } .cr-mbox .st-in, .cr-mbox .st-ta, .cr-mbox select { width: 100%; box-sizing: border-box; } .cr-mbox .bg-row .st-in { width: auto; } .cr-mbox .ml-f label > span { color: #6b7280; font-weight: 400; } html[data-mode="dark"] .cr-mbox .ml-f label > span { color: #9ca3af; }

/* (2026-10-23) Workflows builder (ws4-workflows.js) */
.wf-ed { display: flex; flex-direction: column; min-height: 100%; background: #f6f7fb; position: relative; }
.wf-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px; background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 5; }
.wf-name { border: 1px solid transparent; border-radius: 8px; font: 600 17px Inter, sans-serif; padding: 6px 8px; min-width: 180px; max-width: 320px; background: transparent; color: #111827; } .wf-name:hover, .wf-name:focus { border-color: #d1d5db; outline: none; }
.wf-tabs { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; } .wf-tabs button { border: 0; background: none; padding: 8px 12px; border-radius: 8px; font: 500 14px Inter, sans-serif; color: #6b7280; cursor: pointer; } .wf-tabs button.on { background: #eef2ff; color: #3730a3; font-weight: 600; }
.wf-acts { display: flex; align-items: center; gap: 8px; } .wf-dirty { font-size: 12px; color: #b45309; } .wf-pub { display: inline-flex; align-items: center; gap: 6px; font: 600 13px Inter, sans-serif; cursor: pointer; background: #111827; color: #fff; border-radius: 999px; padding: 6px 12px; } .wf-pub input { width: auto; margin: 0; }
.wf-main { flex: 1; padding: 24px 16px 60px; overflow-x: auto; }
.wf-canvas { display: flex; flex-direction: column; align-items: center; min-width: max-content; margin: 0 auto; }
.wf-trigs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: stretch; max-width: 900px; }
.wf-node { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 14px; width: 280px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.05); text-align: left; } .wf-node:hover { border-color: #a5b4fc; } .wf-node.sel { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.wf-node i { font-style: normal; font-size: 18px; } .wf-node div { display: flex; flex-direction: column; min-width: 0; } .wf-node b { font-size: 14px; } .wf-node small { font-size: 12px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.wf-trig { border-style: dashed; border-color: #a5b4fc; background: #f5f3ff; } .wf-goal { border-color: #10b981; background: #ecfdf5; }
.wf-addtrig { border: 1px dashed #9ca3af; background: #fff; border-radius: 12px; width: 280px; padding: 14px; font: 600 14px Inter, sans-serif; color: #4b5563; cursor: pointer; } .wf-addtrig:hover { border-color: #4f46e5; color: #4f46e5; }
.wf-line { width: 2px; height: 18px; background: #cbd5e1; } .wf-start, .wf-end { font: 600 12px Inter, sans-serif; color: #fff; background: #64748b; border-radius: 999px; padding: 4px 14px; } .wf-start { background: #4f46e5; }
.wf-plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #cbd5e1; background: #fff; color: #4b5563; font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; } .wf-plus:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.wf-branches { display: flex; gap: 22px; align-items: flex-start; margin-top: 0; padding-top: 18px; border-top: 2px solid #cbd5e1; position: relative; }
.wf-branch { display: flex; flex-direction: column; align-items: center; min-width: 290px; } .wf-bname { font: 600 12px Inter, sans-serif; background: #e0e7ff; color: #3730a3; border-radius: 999px; padding: 3px 12px; margin-bottom: 4px; }
.wf-panel { position: fixed; top: 58px; right: 0; bottom: 0; width: 400px; max-width: 100%; background: #fff; border-left: 1px solid #e5e7eb; z-index: 45; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.08); }
.wf-ph { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #e5e7eb; } .wf-ph b { font-size: 16px; } .wf-ph button { border: 0; background: none; font-size: 24px; color: #6b7280; cursor: pointer; } .wf-pb { padding: 14px 16px 30px; overflow-y: auto; flex: 1; color: #111827; }
.wf-pb .st-in, .wf-pb .st-ta, .wf-pb select { width: 100%; box-sizing: border-box; } .wf-pb .bg-row .st-in { width: auto; } .wf-body { min-height: 180px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; font-family: Arial, sans-serif; font-size: 15px; }
.wf-pg { margin-bottom: 14px; } .wf-pg > b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-bottom: 6px; }
.wf-pi { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; cursor: pointer; font: inherit; color: #111827; } .wf-pi:hover { border-color: #4f46e5; background: #f5f3ff; } .wf-pi div { display: flex; flex-direction: column; } .wf-pi b { font-size: 14px; } .wf-pi small { font-size: 12px; color: #6b7280; }
.wf-brs { display: flex; flex-direction: column; gap: 10px; } .wf-br { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .wf-cond { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 4px; }
.wf-set { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .wf-days { display: flex; flex-wrap: wrap; gap: 10px; } .wf-hist { max-width: 1100px; margin: 0 auto; }
.wf-cplist { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; }
.wf-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 18px; border-radius: 999px; font: 600 14px Inter, sans-serif; z-index: 10000; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
html[data-mode="dark"] .wf-ed { background: #0a1124; } html[data-mode="dark"] .wf-top, html[data-mode="dark"] .wf-panel, html[data-mode="dark"] .wf-node, html[data-mode="dark"] .wf-addtrig, html[data-mode="dark"] .wf-plus, html[data-mode="dark"] .wf-pi { background: #111827; border-color: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .wf-name, html[data-mode="dark"] .wf-pb { color: #e5e7eb; }
html[data-mode="dark"] .wf-trig { background: #1e1b4b; border-color: #4338ca; } html[data-mode="dark"] .wf-goal { background: #052e16; border-color: #047857; } html[data-mode="dark"] .wf-line, html[data-mode="dark"] .wf-branches { background-color: #334155; border-color: #334155; } html[data-mode="dark"] .wf-tabs button.on { background: #1e1b4b; color: #c7d2fe; } html[data-mode="dark"] .wf-ph, html[data-mode="dark"] .wf-br, html[data-mode="dark"] .wf-cplist { border-color: #1f2937; } html[data-mode="dark"] .wf-bname { background: #1e1b4b; color: #c7d2fe; } html[data-mode="dark"] .wf-body { border-color: #374151; }
@media (max-width: 900px) { .wf-top { padding: 10px 12px; } .wf-tabs { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; } .wf-tabs button { flex: none; } .wf-panel { top: 58px; width: 100%; } .wf-node, .wf-addtrig { width: 250px; } .wf-branch { min-width: 260px; } .wf-cond { grid-template-columns: 1fr 1fr; } }
.wf-panel[hidden] { display: none !important; } .wf-panel { top: 116px; } .wf-cond { grid-template-columns: 1fr 1fr auto; } .wf-cond > select:first-child { grid-column: 1 / -1; } .wf-cond > input { min-width: 0; }
@media (max-width: 900px) { .wf-panel { top: 58px; z-index: 60; } }
@media (max-width: 700px) { .wf-trigs { flex-direction: column; align-items: center; } .wf-main { padding: 16px 8px 60px; } }

/* (2026-10-23) Conversations page (ws4-inbox.js) */
.ib-wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; height: min(70vh, 720px); background: #fff; }
.ib-list { border-right: 1px solid #e5e7eb; overflow-y: auto; display: flex; flex-direction: column; } .ib-list .st-in { margin: 10px; width: calc(100% - 20px); box-sizing: border-box; }
.ib-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; border: 0; border-bottom: 1px solid #f1f2f4; background: #fff; padding: 11px 14px; cursor: pointer; font: inherit; color: #111827; } .ib-row:hover { background: #f9fafb; } .ib-row.on { background: #eef2ff; }
.ib-row b { font-size: 14px; } .ib-row span { grid-column: 1; font-size: 13px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ib-row small { grid-row: 1; grid-column: 2; font-size: 11.5px; color: #9ca3af; } .ib-row small i { font-style: normal; background: #4f46e5; color: #fff; border-radius: 999px; padding: 0 6px; margin-left: 4px; } .ib-row.unread b, .ib-row.unread span { color: #111827; font-weight: 600; }
.ib-thread { display: flex; flex-direction: column; min-width: 0; } .ib-empty { margin: auto; text-align: center; color: #9ca3af; font-size: 15px; line-height: 2; }
.ib-th { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; } .ib-th > div { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ib-th small { color: #6b7280; font-size: 12.5px; } .ib-back { display: none; border: 0; background: none; font-size: 20px; cursor: pointer; } .ib-pause { font-size: 13px; white-space: nowrap; }
.ib-msgs, .ib-try { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f9fafb; } .ib-try { min-height: 260px; max-height: 420px; border-radius: 12px; margin: 8px 0; }
.ib-m { max-width: 75%; display: flex; flex-direction: column; gap: 2px; } .ib-m > div { padding: 9px 12px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; } .ib-m small { font-size: 11px; color: #9ca3af; padding: 0 6px; }
.ib-m.in { align-self: flex-start; } .ib-m.in > div { background: #fff; border: 1px solid #e5e7eb; border-bottom-left-radius: 4px; color: #111827; } .ib-m.out { align-self: flex-end; align-items: flex-end; } .ib-m.out > div { background: #4f46e5; color: #fff; border-bottom-right-radius: 4px; } .ib-m.fail > div { background: #fee2e2; color: #991b1b; } .ib-m a { color: inherit; display: block; margin-top: 4px; }
.ib-comp { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #e5e7eb; align-items: flex-end; } .ib-comp .st-ta, .ib-comp .st-in { flex: 1; resize: none; } .ib .bg-box .ib-comp { border: 0; padding: 0; align-items: center; }
.ib-cap { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; background: #f9fafb; border-radius: 10px; padding: 10px 12px; } .ib-ok { font-size: 15px; } .ib-steps { margin: 0 0 6px; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: #374151; } .ib-steps a { color: #2563eb; }
html[data-mode="dark"] .ib-wrap, html[data-mode="dark"] .ib-row { background: #111827; border-color: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .ib-list, html[data-mode="dark"] .ib-th, html[data-mode="dark"] .ib-comp { border-color: #1f2937; } html[data-mode="dark"] .ib-row.on { background: #1e1b4b; } html[data-mode="dark"] .ib-row.unread b, html[data-mode="dark"] .ib-row.unread span { color: #f3f4f6; }
html[data-mode="dark"] .ib-msgs, html[data-mode="dark"] .ib-try, html[data-mode="dark"] .ib-cap { background: #0b1220; } html[data-mode="dark"] .ib-m.in > div { background: #1f2937; border-color: #374151; color: #e5e7eb; } html[data-mode="dark"] .ib-steps { color: #d1d5db; }
@media (max-width: 760px) { .ib-wrap { grid-template-columns: 1fr; height: 75vh; } .ib-wrap .ib-thread { display: none; } .ib-wrap.open .ib-list { display: none; } .ib-wrap.open .ib-thread { display: flex; } .ib-back { display: block; } .ib-m { max-width: 88%; } .ib-th .bl-btn { display: none; } }
.ib .ml-f .st-in, .ib .ml-f .st-ta, .ml-f.cr-mbody .st-in, .ml-f.cr-mbody .st-ta { width: 100%; box-sizing: border-box; }

/* (2026-10-23) Affiliate program page (ws4-affiliate.js) */
.af-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; background: linear-gradient(135deg, #111827, #312e81); color: #fff; border-radius: 18px; padding: 24px; margin-bottom: 16px; }
.af-hero .af-big { font-size: 64px; font-weight: 800; line-height: 1; display: block; } .af-hero > div > b { font-size: 20px; } .af-hero p { color: #c7d2fe; margin-top: 10px; line-height: 1.5; }
.af-calc { background: rgba(255,255,255,.08); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .af-calc label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: #e0e7ff; } .af-calc input[type=range] { width: 100%; } .af-calc .st-in { background: #fff; color: #111827; }
.af-out { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; } .af-out span { font-size: 26px; font-weight: 800; } .af-out small { color: #c7d2fe; }
.af-join { max-width: 760px; } .af-terms { margin: 0; padding-left: 20px; line-height: 1.6; font-size: 14px; color: #374151; }
.af-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 14px; padding: 14px; margin-bottom: 14px; } .af-link > div { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; } .af-link small { color: #4338ca; font-weight: 600; } .af-link .st-in { width: 100%; box-sizing: border-box; font-weight: 600; }
.af-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .af-money > div { display: flex; flex-direction: column; } .af-money span { font-size: 12.5px; color: #6b7280; } .af-money b { font-size: 22px; } .af-money small { font-size: 12px; color: #6b7280; }
.af-post { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; } .af-post p { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.5; }
html[data-mode="dark"] .af-link { background: #1e1b4b; border-color: #3730a3; } html[data-mode="dark"] .af-link small { color: #c7d2fe; } html[data-mode="dark"] .af-terms { color: #d1d5db; } html[data-mode="dark"] .af-post { border-color: #1f2937; }
@media (max-width: 760px) { .af-hero { grid-template-columns: 1fr; padding: 18px; } .af-hero .af-big { font-size: 48px; } .af-money { grid-template-columns: 1fr; } }

/* (2026-10-23) Funnels builder (ws4-funnels.js) */
.fu-main { flex: 1; } .fu-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
.fu-cols { display: grid; grid-template-columns: 240px minmax(0, 1fr) 380px; height: calc(100vh - 58px - 58px); min-height: 560px; }
.fu-steps { border-right: 1px solid #e5e7eb; background: #fff; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.fu-step { display: flex; gap: 8px; align-items: center; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; cursor: pointer; background: #fff; } .fu-step:hover { border-color: #a5b4fc; } .fu-step.on { border-color: #4f46e5; background: #eef2ff; }
.fu-step > span { font-size: 18px; } .fu-step > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .fu-step b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fu-step small { font-size: 11.5px; color: #6b7280; }
.fu-sa { flex-direction: row !important; flex: none !important; gap: 2px; } .fu-sa button { border: 0; background: none; cursor: pointer; color: #6b7280; padding: 2px 4px; } .fu-steps select { margin-top: 6px; }
.fu-prev { display: flex; flex-direction: column; background: #eef0f4; min-width: 0; } .fu-pbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; justify-content: space-between; flex-wrap: wrap; }
.fu-frame { flex: 1; padding: 0 12px 12px; display: flex; justify-content: center; } .fu-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.08); } .fu-frame.phone iframe { width: 390px; }
.fu-panel { border-left: 1px solid #e5e7eb; background: #fff; padding: 14px 16px 40px; overflow-y: auto; color: #111827; } .fu-panel .st-in, .fu-panel .st-ta, .fu-panel select { width: 100%; box-sizing: border-box; } .fu-panel .bg-row .st-in { width: auto; }
.fu-ph { display: flex; justify-content: space-between; align-items: center; } .fu-img { height: 120px; } .fu-rep { display: grid; grid-template-columns: 1fr auto; gap: 4px; border: 1px solid #f1f2f4; border-radius: 10px; padding: 8px; } .fu-rep > *:not(button) { grid-column: 1; } .fu-rep button { grid-column: 2; grid-row: 1; }
.fu-prod { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 6px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px; } .fu-prod .fu-pd { grid-column: 1 / -1; } .fu-prod .st-in { width: 100%; box-sizing: border-box; }
.fu-addr { display: flex; align-items: center; gap: 4px; font-weight: 500; } .fu-addr span { color: #6b7280; font-size: 13px; white-space: nowrap; } .fu-addr .st-in { flex: 1; }
html[data-mode="dark"] .fu-steps, html[data-mode="dark"] .fu-panel, html[data-mode="dark"] .fu-step { background: #111827; border-color: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .fu-step.on { background: #1e1b4b; border-color: #6366f1; } html[data-mode="dark"] .fu-prev { background: #0b1220; } html[data-mode="dark"] .fu-rep, html[data-mode="dark"] .fu-prod { border-color: #1f2937; }
@media (max-width: 1100px) { .fu-cols { grid-template-columns: 200px minmax(0, 1fr); height: auto; } .fu-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #e5e7eb; } .fu-prev { min-height: 560px; } }
@media (max-width: 700px) { .fu-cols { grid-template-columns: 1fr; } .fu-steps { border-right: 0; border-bottom: 1px solid #e5e7eb; max-height: 260px; } .fu-prev { min-height: 520px; } .fu-frame.phone iframe { width: 100%; } .fu-prod { grid-template-columns: 1fr 1fr; } }

/* (2026-10-23) Animation Studio (ws4-animation.js) */
.am-wal { display: flex; gap: 14px; align-items: center; justify-content: space-between; border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; } .am-wal > div { flex: 1; min-width: 0; } .am-wal small { display: block; color: #6b7280; font-size: 12px; margin-top: 4px; }
.am-pk { color: #4f46e5; font-weight: 600; } .am-bar { height: 6px; background: #eef0f4; border-radius: 9px; margin-top: 6px; overflow: hidden; } .am-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #a855f7); border-radius: 9px; }
.am-new { border: 1px solid #e5e7eb; background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 6px 24px rgba(15, 23, 42, .05); display: flex; flex-direction: column; gap: 12px; }
.am-idea { width: 100%; box-sizing: border-box; border: 0; resize: vertical; font: 16px/1.5 Inter, sans-serif; outline: none; background: transparent; color: inherit; min-height: 90px; }
.am-tpls { display: flex; flex-wrap: wrap; gap: 6px; } .am-tpl { border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 999px; padding: 6px 12px; font: 500 13px Inter, sans-serif; cursor: pointer; color: inherit; display: flex; gap: 6px; align-items: center; } .am-tpl.on { border-color: #4f46e5; background: #eef2ff; color: #3730a3; } .am-tdesc { margin: -4px 0 0; }
.am-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .am-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #6b7280; } .am-opts .st-in { width: 100%; box-sizing: border-box; } .am-stb { text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .am-mode { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; } .am-mode input { display: none; } .am-mode.on { border-color: #4f46e5; background: #eef2ff; } .am-mode small { color: #6b7280; font-size: 12.5px; }
.am-go { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.am-h { font-size: 18px; margin: 26px 0 10px; } .am-h small { font-weight: 400; font-size: 13px; } .am-h3 { font-size: 15px; margin: 22px 0 8px; }
.am-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .am-card { border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 8px 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; } .am-card:hover { border-color: #a5b4fc; } .am-card small { color: #6b7280; font-size: 12px; }
.am-cov { aspect-ratio: 16 / 9; border-radius: 10px; background: #eef0f4 center / cover; display: grid; place-items: center; font-size: 30px; position: relative; margin-bottom: 4px; } .am-cov.tall { background-size: contain; background-repeat: no-repeat; } .am-cov em { position: absolute; left: 6px; bottom: 6px; background: rgba(17, 24, 39, .8); color: #fff; font: 600 11px Inter, sans-serif; padding: 3px 8px; border-radius: 999px; font-style: normal; } .am-cov em.am-done { background: #059669; }
.am-cact { display: flex; gap: 10px; }
.am-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .am-asset { border: 1px solid #e5e7eb; background: #fff; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; font: inherit; color: inherit; text-align: left; cursor: pointer; } .am-asset img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; } .am-asset b { font-size: 12.5px; }
.am-sbox { max-width: 760px !important; width: 100%; } .am-stys { display: flex; flex-wrap: wrap; gap: 6px; } .am-sty { border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 7px 11px; font: 500 13px Inter, sans-serif; cursor: pointer; color: inherit; text-align: left; } .am-sty small { display: block; color: #6b7280; font-weight: 400; } .am-sty.on { border-color: #4f46e5; background: #eef2ff; }
.am-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; } .am-pack { border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font: inherit; color: inherit; text-align: left; } .am-pack.hot { border: 2px solid #4f46e5; } .am-pack span { font-size: 26px; font-weight: 800; } .am-pack small { color: #6b7280; font-size: 12px; }
.am-ed .wf-top { flex-wrap: wrap; } .am-meta { color: #6b7280; font-size: 12.5px; } .am-wchip { font: 600 12.5px Inter, sans-serif; background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.am-steps { display: flex; align-items: center; gap: 4px; padding: 10px 16px; overflow-x: auto; border-bottom: 1px solid #e5e7eb; background: #fff; } .am-steps i { flex: 0 0 14px; height: 2px; background: #e5e7eb; } .am-steps button { flex: none; border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: 6px 12px; font: 500 13px Inter, sans-serif; cursor: pointer; color: #374151; display: flex; gap: 6px; align-items: center; }
.am-steps button.done { border-color: #c7d2fe; } .am-steps button.on { background: #4f46e5; border-color: #4f46e5; color: #fff; } .am-steps button:disabled { opacity: .35; cursor: default; }
.am-wrap { max-width: 1180px; margin: 0 auto; padding: 18px 16px 70px; } .am-lead { color: #4b5563; margin: 0 0 14px; max-width: 760px; }
.am-job { display: flex; gap: 12px; align-items: center; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; } .am-job small { display: block; color: #4b5563; } .am-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.am-spin { display: inline-block; width: 18px; height: 18px; border: 2.5px solid #c7d2fe; border-top-color: #4f46e5; border-radius: 50%; animation: am-spin .8s linear infinite; vertical-align: middle; flex: none; } @keyframes am-spin { to { transform: rotate(360deg); } }
.am-empty { text-align: center; padding: 40px 16px; border: 1px dashed #d1d5db; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.am-story { display: flex; flex-direction: column; gap: 14px; } .am-story .st-in, .am-story .st-ta { width: 100%; box-sizing: border-box; } .am-bh { display: flex; justify-content: space-between; align-items: center; }
.am-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; border: 1px solid #f1f2f4; border-radius: 10px; padding: 8px; } .am-row .am-wide { grid-column: 1 / -1; }
.am-shot { display: flex; gap: 10px; border: 1px solid #f1f2f4; border-radius: 12px; padding: 10px; } .am-sn { font: 700 15px Inter, sans-serif; color: #4f46e5; width: 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .am-sn button { border: 0; background: none; cursor: pointer; color: #6b7280; padding: 0 2px; }
.am-sf { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .am-sr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 80px auto; gap: 6px; } .am-chips { display: flex; flex-wrap: wrap; gap: 6px; } .am-chip { font-size: 12.5px; border: 1px solid #e5e7eb; border-radius: 999px; padding: 3px 10px; display: flex; gap: 5px; align-items: center; cursor: pointer; }
.am-savebar { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border-top: 1px solid #e5e7eb; padding: 10px 0; margin-top: 10px; } .am-savebar .am-next { margin: 0; }
.am-next { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.am-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .am-two .st-in, .am-two .st-ta { width: 100%; box-sizing: border-box; }
.am-curstyle { display: flex; gap: 10px; align-items: center; border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; text-align: left; } .am-curstyle span { font-size: 24px; } .am-curstyle small { display: block; color: #6b7280; }
.am-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .am-board, .am-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .am-board.tall, .am-clips.tall { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.am-c { border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .am-c > small { color: #6b7280; font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .am-c b small { font-weight: 400; color: #6b7280; }
.am-c video { width: 100%; border-radius: 10px; background: #000; aspect-ratio: 16 / 9; } .am-clips.tall .am-c video { aspect-ratio: 9 / 16; }
.am-pic { position: relative; border-radius: 10px; background: #eef0f4 center / cover no-repeat; display: grid; place-items: center; color: #9ca3af; font-size: 26px; margin-bottom: 4px; overflow: hidden; } .am-pic.wide { aspect-ratio: 3 / 2; } .am-board .am-pic.wide, .am-clips .am-pic.wide { aspect-ratio: 16 / 9; } .am-pic.tall { aspect-ratio: 9 / 16; } .am-pic span { font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 8px; }
.am-zoom { position: absolute; top: 6px; right: 6px; background: rgba(17, 24, 39, .65); color: #fff; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; text-decoration: none; font-size: 14px; }
.am-ov { position: absolute; inset: 0; background: rgba(17, 24, 39, .55); color: #fff; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: 600 13px Inter, sans-serif; text-align: center; padding: 10px; } .am-ov.err { background: rgba(127, 29, 29, .75); }
.am-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .am-acts small { font-weight: 400; opacity: .75; } .am-ref { display: flex !important; align-items: center; gap: 6px; } .am-ref img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }
.am-lines { font-size: 12px !important; color: #374151 !important; } .am-lines i { color: #4f46e5; font-style: normal; font-weight: 600; } .am-stale { color: #b45309; font-weight: 600; }
.am-mot, .am-trim { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #6b7280; } .am-mot .st-ta { width: 100%; box-sizing: border-box; font-size: 12.5px; } .am-trim { flex-direction: row; align-items: center; gap: 6px; } .am-trim .st-in { width: auto; padding: 4px 6px; }
.am-libp { margin-bottom: 14px; } .am-libp summary { cursor: pointer; color: #4f46e5; font-weight: 600; margin-bottom: 8px; }
.am-vl { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; } .am-vl > div { display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid #f1f2f4; padding-bottom: 8px; } .am-vl small { color: #6b7280; font-size: 12px; } .am-vl em { color: #9ca3af; font-size: 12px; } .am-vl audio, .am-two audio { width: 100%; height: 36px; }
.am-film { display: flex; flex-direction: column; align-items: center; gap: 12px; } .am-fv { width: 100%; max-width: 960px; border-radius: 14px; background: #000; } .am-fv.tall { max-width: 380px; } .am-fa { justify-content: center; align-items: center; } .am-dls { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
html[data-mode="dark"] .am-wal, html[data-mode="dark"] .am-new, html[data-mode="dark"] .am-card, html[data-mode="dark"] .am-c, html[data-mode="dark"] .am-asset, html[data-mode="dark"] .am-steps, html[data-mode="dark"] .am-steps button, html[data-mode="dark"] .am-sty, html[data-mode="dark"] .am-pack { background: #111827; border-color: #1f2937; color: #e5e7eb; }
html[data-mode="dark"] .am-tpl, html[data-mode="dark"] .am-mode { background: #0f172a; border-color: #1f2937; } html[data-mode="dark"] .am-tpl.on, html[data-mode="dark"] .am-mode.on, html[data-mode="dark"] .am-sty.on, html[data-mode="dark"] .am-curstyle, html[data-mode="dark"] .am-job { background: #1e1b4b; border-color: #4f46e5; color: #e5e7eb; }
html[data-mode="dark"] .am-steps button.on { background: #4f46e5; color: #fff; } html[data-mode="dark"] .am-pic, html[data-mode="dark"] .am-cov { background-color: #1f2937; } html[data-mode="dark"] .am-row, html[data-mode="dark"] .am-shot, html[data-mode="dark"] .am-vl > div { border-color: #1f2937; } html[data-mode="dark"] .am-savebar { background: rgba(11, 18, 32, .94); border-color: #1f2937; } html[data-mode="dark"] .am-lead, html[data-mode="dark"] .am-job small { color: #9ca3af; } html[data-mode="dark"] .am-lines { color: #d1d5db !important; }
@media (max-width: 860px) { .am-opts { grid-template-columns: 1fr 1fr; } .am-two { grid-template-columns: 1fr; } .am-sr { grid-template-columns: 1fr 1fr; } .am-packs { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .am-modes { grid-template-columns: 1fr; } .am-wal { flex-direction: column; align-items: stretch; } .am-row { grid-template-columns: 1fr auto; } .am-row select { grid-column: 1 / -1; grid-row: 2; } .am-cards, .am-board, .am-clips { grid-template-columns: 1fr; } .am-board.tall, .am-clips.tall { grid-template-columns: 1fr 1fr; } .am-meta { display: none; } }

/* (2026-10-23) Voice tools, full flow: audio tags, effects, Voice Design / Remix, Text to Dialogue */
.tts-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 6px 0 2px; } .tts-tags > span { font-size: 12px; color: #6b7280; margin-right: 2px; } .tts-tags button { border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 999px; padding: 3px 9px; font: 500 12px Inter, sans-serif; cursor: pointer; color: #4338ca; }
.tts-tags button:hover { border-color: #a5b4fc; background: #eef2ff; }
.tts-fx { border: 1px solid #e5e7eb; border-radius: 12px; padding: 8px 10px; margin: 8px 0; } .tts-fx summary { cursor: pointer; font-weight: 600; font-size: 13.5px; } .tts-fx[open] summary { margin-bottom: 8px; }
.tts-l small { font-weight: 400; color: #6b7280; } .tts-l input[type=number], .tts-l input[type=text] { width: 100%; box-sizing: border-box; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; font: inherit; background: #fff; color: inherit; }
.vd { display: flex; flex-direction: column; gap: 14px; max-width: 900px; } .vd .st-ta, .vd .st-in { width: 100%; box-sizing: border-box; } .vd-ex { margin-top: -4px; } .vd-sl { display: flex; justify-content: space-between; color: #9ca3af; } .vd-sl small { font-size: 11px; }
.vd-prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .vd-p { border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .vd-p audio { width: 100%; height: 36px; } .vd-p .st-in { width: 100%; box-sizing: border-box; }
.vd-ch { display: flex; flex-direction: column; gap: 10px; } .vd-ch button { text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 3px; } .vd-ch button:hover { border-color: #6366f1; background: #eef2ff; } .vd-ch span { color: #6b7280; font-size: 13px; }
.vx-d { display: block; color: #6b7280; font-size: 12px; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl #dl-turns { display: flex; flex-direction: column; gap: 10px; } .dl-turn { border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .dl-turn .st-ta { width: 100%; box-sizing: border-box; }
.dl-who { display: flex; gap: 8px; align-items: center; } .dl-who b { width: 24px; height: 24px; border-radius: 50%; background: #eef2ff; color: #4338ca; display: grid; place-items: center; font-size: 12px; flex: none; } .dl-who select { flex: 1; min-width: 0; }
.dl-ta { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .dl-tags { margin: 0; } .dl-ia { display: flex; gap: 2px; flex: none; } .dl-ia button { border: 0; background: none; cursor: pointer; color: #6b7280; font-size: 15px; padding: 2px 5px; }
.dl-add { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
html[data-mode="dark"] .tts-tags button, html[data-mode="dark"] .vd-p, html[data-mode="dark"] .vd-ch button, html[data-mode="dark"] .dl-turn, html[data-mode="dark"] .tts-l input { background: #111827; border-color: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .tts-fx { border-color: #1f2937; }
@media (max-width: 600px) { .dl-ta { flex-direction: column; } }

/* (2026-10-23) File tools round 2: link box, transcript editor, subtitles script, dubbing range */
.st-link { display: flex; align-items: center; gap: 8px; margin-top: 10px; width: 100%; max-width: 560px; } .st-link span { color: #6b7280; font-size: 12.5px; white-space: nowrap; } .st-link .st-in { flex: 1; min-width: 0; }
.al-script { display: block; margin-top: 14px; } .al-script .st-ta { width: 100%; box-sizing: border-box; }
.dub-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .dub-range .st-in { width: 100%; box-sizing: border-box; } .dub-v { width: 100%; max-height: 220px; border-radius: 10px; background: #000; margin: 6px 0; }
.tx { border: 1px solid #e5e7eb; background: #fff; border-radius: 16px; padding: 14px; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.tx-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; } .tx-head small { display: block; color: #6b7280; } .tx-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tx-acts .st-in { width: auto; }
.tx-names { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: #6b7280; } .tx-names .st-in { width: 140px; padding: 5px 8px; }
.tx-ent { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tx-ent span { background: #fff; border: 1px solid #fde68a; border-radius: 999px; padding: 2px 8px; }
.tx-segs { max-height: 560px; overflow-y: auto; display: flex; flex-direction: column; } .tx-seg { display: grid; grid-template-columns: 52px auto 1fr; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #f3f4f6; align-items: baseline; }
.tx-t { color: #9ca3af; font: 500 12px ui-monospace, monospace; } .tx-w { color: #4338ca; font-size: 13px; white-space: nowrap; } .tx-seg p { margin: 0; outline: none; border-radius: 6px; padding: 1px 4px; } .tx-seg p:focus { background: #eef2ff; }
.tx-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
html[data-mode="dark"] .tx { background: #111827; border-color: #1f2937; } html[data-mode="dark"] .tx-seg { border-color: #1f2937; } html[data-mode="dark"] .tx-seg p:focus { background: #1e1b4b; } html[data-mode="dark"] .tx-ent { background: #292524; border-color: #78350f; } html[data-mode="dark"] .tx-ent span { background: #1c1917; border-color: #78350f; }
@media (max-width: 600px) { .tx-seg { grid-template-columns: 44px 1fr; } .tx-seg .tx-w { grid-column: 2; } .tx-seg p { grid-column: 1 / -1; } }
.dub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-height: 220px; overflow-y: auto; margin-top: 6px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 6px; } .dub-l { display: flex; gap: 6px; align-items: center; font-size: 12.5px; padding: 3px 6px; border-radius: 8px; cursor: pointer; } .dub-l.on { background: #eef2ff; color: #3730a3; } .dub-l[hidden] { display: none; }
.dub-dls { display: flex; gap: 10px; flex-wrap: wrap; } html[data-mode="dark"] .dub-grid { border-color: #1f2937; } html[data-mode="dark"] .dub-l.on { background: #1e1b4b; color: #c7d2fe; }

/* (2026-10-23) Music (ws4-music.js) */
.mu-new { border: 1px solid #e5e7eb; background: #fff; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .mu-new .st-ta, .mu-new .st-in { width: 100%; box-sizing: border-box; }
.mu-ed { border: 1px solid #e5e7eb; background: #fff; border-radius: 18px; padding: 16px; margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.mu-eh { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .mu-eh small { display: block; color: #6b7280; } .mu-play { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mu-play audio { height: 38px; min-width: 260px; }
.mu-vars { font-size: 13px; }
.mu-tl { display: flex; gap: 3px; height: 44px; border-radius: 10px; overflow: hidden; } .mu-tl > div { color: #fff; font: 600 11.5px Inter, sans-serif; padding: 5px 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 14px; display: flex; flex-direction: column; } .mu-tl small { font-weight: 400; opacity: .85; }
.mu-total { font-size: 12.5px; color: #6b7280; margin-top: -6px; }
.mu-secs { display: flex; flex-direction: column; gap: 10px; } .mu-sec { display: flex; gap: 10px; border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px; } .mu-sec > i { width: 6px; border-radius: 6px; flex: none; } .mu-sec.kept { background: #f0fdf4; border-color: #bbf7d0; }
.mu-sb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .mu-sb .st-ta { width: 100%; box-sizing: border-box; font-family: inherit; }
.mu-sh { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .mu-sh span { display: flex; gap: 4px; align-items: center; } .mu-sh button { border: 0; background: none; cursor: pointer; color: #6b7280; font-size: 15px; padding: 2px 5px; }
.mu-sr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12.5px; color: #6b7280; } .mu-sr label { display: flex; flex-direction: column; gap: 4px; } .mu-sr .st-in { width: 100%; box-sizing: border-box; }
.mu-st { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; } .mu-st > span { color: #059669; font-weight: 600; margin-right: 2px; } .mu-st.neg > span { color: #dc2626; }
.mu-st em { font-style: normal; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 999px; padding: 2px 4px 2px 9px; display: inline-flex; gap: 2px; align-items: center; } .mu-st.neg em { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .mu-st em button { border: 0; background: none; cursor: pointer; color: inherit; opacity: .6; }
.mu-add { border: 1px dashed #d1d5db; border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 12px; width: 110px; background: transparent; color: inherit; }
.mu-edw { display: flex; gap: 8px; } .mu-edw .st-in { flex: 1; }
.mu-file { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 2px dashed #c7d2fe; border-radius: 14px; padding: 18px; cursor: pointer; color: #4338ca; font-weight: 600; } .mu-file small { color: #6b7280; font-weight: 400; }
.mu-hist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
html[data-mode="dark"] .mu-new, html[data-mode="dark"] .mu-ed, html[data-mode="dark"] .mu-sec { background: #111827; border-color: #1f2937; } html[data-mode="dark"] .mu-sec.kept { background: #052e16; border-color: #166534; }
@media (max-width: 600px) { .mu-sr { grid-template-columns: 1fr; } .mu-edw { flex-direction: column; } }

/* (2026-10-23) Audiobooks & Podcasts studio (ws4-abstudio.js) */
.ab-hb { display: flex; gap: 8px; } .ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ab-card { border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; } .ab-card:hover { border-color: #a5b4fc; } .ab-card small { color: #6b7280; font-size: 12px; } .ab-card em { font-style: normal; font-size: 12px; color: #4f46e5; font-weight: 600; } .ab-card em.ok { color: #059669; } .ab-card .pg-link { align-self: flex-start; }
.ab-cov { height: 90px; border-radius: 10px; background: linear-gradient(135deg, #eef2ff, #fae8ff); display: grid; place-items: center; font-size: 34px; margin-bottom: 4px; }
.ab-mbox { max-width: 640px !important; width: 100%; } .ab-src { margin-bottom: 4px; flex-wrap: wrap; } .ab-mbox .st-in, .ab-mbox .st-ta { width: 100%; box-sizing: border-box; }
.ab-ed .wf-top { flex-wrap: wrap; } .ab-tools { flex-wrap: wrap; } .ab-save { font-size: 12.5px; color: #6b7280; min-width: 70px; } .ab-job { margin: 10px 16px 0; }
.ab-cols { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 130px); }
.abs-side { border-right: 1px solid #e5e7eb; background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: calc(100vh - 130px); position: sticky; top: 0; }
.ab-sh { display: flex; justify-content: space-between; align-items: center; } .abs-ch { position: relative; border: 1px solid #e5e7eb; border-radius: 10px; padding: 7px 9px 9px; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; } .abs-ch.on { border-color: #4f46e5; background: #eef2ff; } .abs-ch span { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .abs-ch small { color: #6b7280; font-size: 11.5px; } .abs-ch i { position: absolute; left: 0; bottom: 0; height: 3px; background: #10b981; }
.ab-cha { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; } .ab-gen { margin-top: auto; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #f3f4f6; padding-top: 10px; } .ab-gen small { color: #6b7280; font-size: 12px; }
.ab-script { padding: 18px 22px 80px; overflow-y: auto; max-height: calc(100vh - 130px); } .ab-chn { font: 700 13px Inter, sans-serif; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.ab-b { display: flex; gap: 10px; padding: 6px 0; border-radius: 10px; } .ab-b.playing { background: #eef2ff; } .ab-b.locked textarea { background: #f9fafb; color: #6b7280; }
.ab-bar { width: 4px; border-radius: 4px; flex: none; } .ab-bar.new { background: #e5e7eb; } .ab-bar.done { background: #4b5563; } .ab-bar.stale { background: #f59e0b; }
.ab-bm { flex: 1; min-width: 0; } .ab-bt { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; } .ab-bt select { border: 1px solid #e5e7eb; border-radius: 8px; padding: 3px 6px; font: inherit; font-size: 12px; background: #fff; color: inherit; max-width: 220px; }
.ab-ov { font-style: normal; color: #b45309; font-size: 11.5px; } .ab-ba { margin-left: auto; display: flex; gap: 2px; opacity: .55; } .ab-b:hover .ab-ba, .ab-b:focus-within .ab-ba { opacity: 1; } .ab-ba button { border: 1px solid transparent; background: none; border-radius: 7px; cursor: pointer; padding: 2px 6px; font-size: 12.5px; color: #374151; } .ab-ba button:hover:not(:disabled) { border-color: #e5e7eb; background: #fff; } .ab-ba button:disabled { opacity: .35; cursor: default; }
.ab-b textarea { width: 100%; box-sizing: border-box; border: 0; resize: none; overflow: hidden; font: 16px/1.6 Georgia, "Times New Roman", serif; background: transparent; color: inherit; padding: 4px 2px; outline: none; } .ab-b textarea:focus { background: #fafafa; border-radius: 8px; }
.ab-h1 textarea { font: 700 24px/1.3 Inter, sans-serif; } .ab-h2 textarea { font: 700 19px/1.3 Inter, sans-serif; } .ab-h3 textarea { font: 600 16px/1.3 Inter, sans-serif; }
.ab-hl { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .ab-hl > div { display: flex; gap: 8px; align-items: center; } .ab-hl audio { height: 32px; }
.ab-rule { display: grid; grid-template-columns: 1fr 140px 1fr auto; gap: 6px; } .ab-res { opacity: .55; }
html[data-mode="dark"] .ab-card, html[data-mode="dark"] .abs-side, html[data-mode="dark"] .abs-ch, html[data-mode="dark"] .ab-bt select, html[data-mode="dark"] .ab-hl { background: #111827; border-color: #1f2937; color: #e5e7eb; } html[data-mode="dark"] .abs-ch.on, html[data-mode="dark"] .ab-b.playing { background: #1e1b4b; } html[data-mode="dark"] .ab-b textarea:focus { background: #0b1220; } html[data-mode="dark"] .ab-ba button { color: #d1d5db; }
@media (max-width: 860px) { .ab-cols { grid-template-columns: 1fr; } .abs-side { position: static; max-height: 280px; border-right: 0; border-bottom: 1px solid #e5e7eb; } .ab-script { max-height: none; padding: 14px; } .ab-ba { opacity: 1; flex-wrap: wrap; } .ab-rule { grid-template-columns: 1fr 1fr; } }

.ab-hl[hidden], .tts-l[hidden], .mu-new [hidden], .dl-turn [hidden] { display: none !important; }

/* (2026-10-23) Voice cloning: instant (many samples) and professional */
.vc-files { display: flex; flex-wrap: wrap; gap: 6px; } .vc-file { display: inline-flex; gap: 6px; align-items: center; border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12.5px; } .vc-file small { color: #6b7280; } .vc-file button { border: 0; background: none; cursor: pointer; color: #6b7280; }
.pv-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .pv-steps span { border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #6b7280; } .pv-steps .on { background: #4f46e5; border-color: #4f46e5; color: #fff; } .pv-steps .done { border-color: #a7f3d0; color: #065f46; background: #ecfdf5; }
.pv-samples { display: flex; flex-direction: column; gap: 6px; } .pv-s { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid #f1f2f4; border-radius: 10px; padding: 8px; font-size: 13px; } .pv-s small { color: #6b7280; } .pv-spk { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pv-img { max-width: 100%; border-radius: 10px; border: 1px solid #e5e7eb; margin: 6px 0; } .pv-read { font: 600 18px/1.5 Georgia, serif; background: #f9fafb; border-radius: 10px; padding: 12px; } .vx-sim { display: flex; gap: 10px; align-items: center; margin: 10px 0 0; }
html[data-mode="dark"] .vc-file, html[data-mode="dark"] .pv-s, html[data-mode="dark"] .pv-steps span { border-color: #1f2937; } html[data-mode="dark"] .pv-read { background: #111827; }
.ab-lock { display: flex; flex-direction: column; gap: 16px; } .ab-lk-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 14px; padding: 14px 16px; } .ab-lk-h b { flex: 1 1 100%; } .ab-lk-h span { flex: 1; color: #4b5563; } .ab-ex { cursor: default; } .ab-how { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 0; list-style: none; counter-reset: s; } .ab-how li { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; font-size: 14px; color: #4b5563; } .ab-how b { color: #111827; }
html[data-mode="dark"] .ab-lk-h { background: #1e1b4b; border-color: #4f46e5; } html[data-mode="dark"] .ab-lk-h span, html[data-mode="dark"] .ab-how li { color: #9ca3af; } html[data-mode="dark"] .ab-how b { color: #e5e7eb; } html[data-mode="dark"] .ab-how li { border-color: #1f2937; }
.am-vis { margin-bottom: 16px; }

/* (2026-10-23) sample-business banner for visitors (ws4-preview.js) */
.pv-ban { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; background: linear-gradient(90deg, #eef2ff, #fdf4ff); border: 1px solid #c7d2fe; color: #3730a3; border-radius: 12px; padding: 9px 14px; margin: 12px 16px 0; font: 500 13.5px Inter, sans-serif; } .pv-ban button { background: #4f46e5; color: #fff; border: 0; border-radius: 9px; padding: 7px 14px; font: 600 13px Inter, sans-serif; cursor: pointer; flex: none; }
html[data-mode="dark"] .pv-ban { background: #1e1b4b; border-color: #4f46e5; color: #c7d2fe; }

/* (2026-10-24) the plans page says why it opened, and the guarantee under the cards */
.bl-why { margin: 4px 0 16px; padding: 12px 16px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 14.5px; line-height: 1.5; }
.bl-guar { text-align: center; color: #6b7280; font-size: 13.5px; margin: 14px 0 6px; }
html[data-mode="dark"] .bl-why { background: #052e24; border-color: #047857; color: #a7f3d0; }

/* (2026-10-24) agency client accounts: the picker next to the page title, the strip inside a client, the Clients page */
.cl-pick { position: relative; margin-left: 10px; flex: none; }
.cl-pick > button { border: 1px solid #e5e7eb; background: #fff; color: #111827; border-radius: 999px; padding: 6px 12px; font: 600 13px Inter, sans-serif; cursor: pointer; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.cl-pick.in > button { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.cl-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.25); min-width: 230px; max-height: 360px; overflow-y: auto; padding: 6px; }
.cl-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font: 500 14px Inter, sans-serif; color: #111827; cursor: pointer; }
.cl-menu button:hover, .cl-menu button.on { background: #f3f4f6; } .cl-menu hr { border: 0; border-top: 1px solid #f1f2f4; margin: 4px 0; }
body.cl-in .s4-topbar, body.cl-in #s4-top { box-shadow: inset 0 -3px 0 #f59e0b; }
.cl-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; } .cl-row .st-in { flex: 1 1 200px; } .cl-row label { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #4b5563; }
.cl-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin: 12px 0 8px; font-size: 14px; } .cl-parts label { display: flex; gap: 8px; align-items: center; }
.cl-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .cl-del { color: #dc2626; }
html[data-mode="dark"] .cl-pick > button, html[data-mode="dark"] .cl-menu { background: #111827; color: #e5e7eb; border-color: #374151; } html[data-mode="dark"] .cl-menu button { color: #e5e7eb; } html[data-mode="dark"] .cl-menu button:hover, html[data-mode="dark"] .cl-menu button.on { background: #1f2937; }
html[data-mode="dark"] .cl-pick.in > button { background: #451a03; color: #fde68a; border-color: #b45309; }
@media (max-width: 760px) { .cl-pick > button { max-width: 130px; padding: 5px 9px; font-size: 12px; } }
.cl-menu { position: fixed; } .cl-row label .st-in { flex: none; } .cl .an-kpis { margin-bottom: 14px; }
.cl-parts label { flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; text-align: left !important; font-weight: 500 !important; } .cl-parts input { width: auto !important; margin: 0 !important; }
#cl-copy { width: auto !important; }

/* (2026-10-24) build pages: real screenshots on every tile, and "Explore ideas" */
.bd-tools { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.bd-tool i.bd-pic { height: auto; aspect-ratio: 16 / 10; background: #eef1f6 center top / cover no-repeat; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(15,23,42,.06); transition: transform .15s, box-shadow .15s; }
.bd-tool:hover i.bd-pic { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(15,23,42,.35); }
.bd-ideas-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 26px; } .bd-ideas-h .pg-h3 { margin: 0; }
.bd-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.bd-idea { text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 16px; font: 500 14px/1.45 Inter, sans-serif; color: #111827; cursor: pointer; min-height: 84px; }
.bd-idea:hover { border-color: #c7d2fe; background: #f8faff; }
html[data-mode="dark"] .bd-idea { background: #111827; border-color: #374151; color: #e5e7eb; } html[data-mode="dark"] .bd-tool i.bd-pic { border-color: #374151; }
@media (max-width: 760px) { .bd-tools { grid-template-columns: repeat(2, 1fr); gap: 12px; } .bd-tool i.bd-pic { height: auto !important; } }

/* (2026-10-24) credits used up */
.co-mod { position: relative; text-align: center; padding: 34px 26px 24px; max-width: 420px; }
.co-x { position: absolute; top: 14px; right: 16px; }
.co-logo { width: 64px; height: 64px; border-radius: 16px; display: block; margin: 0 auto 16px; box-shadow: 0 6px 18px -6px rgba(15,23,42,.35); }
.co-mod h2 { margin: 0 0 8px; font: 700 24px 'Plus Jakarta Sans', Inter, sans-serif; color: #111827; } .co-mod p { margin: 0 0 22px; color: #6b7280; font-size: 15px; line-height: 1.5; }
.co-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .co-acts .bl-pbtn { width: 100%; padding: 12px; }
html[data-mode="dark"] .co-mod h2 { color: #f3f4f6; } html[data-mode="dark"] .co-mod p { color: #9ca3af; }

/* (2026-10-24) Audiobooks & Podcasts list page and the four-step create window */
.abx-start { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 22px; }
.abx-start button { display: flex; gap: 14px; align-items: center; text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 14px 16px; cursor: pointer; font: inherit; color: #111827; }
.abx-start button:hover { border-color: #c7d2fe; background: #f8faff; } .abx-start b { display: block; font-size: 15px; } .abx-start small { display: block; color: #6b7280; font-size: 13px; margin-top: 2px; }
.abx-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-size: 18px; flex: none; } .abx-ic.a { background: linear-gradient(135deg, #dbeafe, #93c5fd); } .abx-ic.b { background: linear-gradient(135deg, #fce7f3, #f9a8d4); } .abx-ic.c { background: linear-gradient(135deg, #ffedd5, #fdba74); }
.abx-tabs { margin-bottom: 18px; }
.abx-bar { display: flex; gap: 10px; align-items: center; } .abx-search { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0 12px; background: #fff; } .abx-search svg { width: 17px; height: 17px; stroke: #9ca3af; fill: none; stroke-width: 1.8; } .abx-search input { flex: 1; border: 0; outline: 0; padding: 11px 0; font: inherit; background: none; color: inherit; }
.abx-view { display: flex; gap: 6px; } .abx-view button { width: 42px; height: 42px; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; cursor: pointer; font-size: 17px; color: #6b7280; } .abx-view button.on { background: #f3f4f6; color: #111827; }
.abx-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 14px; }
.abx-chip { position: relative; border: 1px solid #e5e7eb; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; color: #374151; background: #fff; cursor: pointer; } .abx-chip.on { background: #111827; color: #fff; border-color: #111827; } .abx-chip.fixed { cursor: default; }
.abx-chip select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.abx-ban { display: flex; align-items: center; gap: 14px; border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; background: #fff; } .abx-ban span { flex: 1; } .abx-ban b { display: block; font-size: 15px; } .abx-ban small { color: #6b7280; font-size: 13px; } .abx-x { border: 0; background: none; font-size: 22px; cursor: pointer; color: #6b7280; }
.ab-card em.dr { color: #6b7280; font-style: normal; font-size: 12.5px; }
.abx-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .abx-rc { border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; background: #fff; } .abx-rc i { font-style: normal; font-size: 22px; } .abx-rc b { display: block; margin: 8px 0 4px; } .abx-rc p { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.5; }
.abw-ov { align-items: center; } .abw { display: grid; grid-template-columns: 240px minmax(0, 1fr); width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 40px); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.35); color: #111827; }
.abw-side { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-right: 1px solid #f1f2f4; } .abw-side button { text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; font: 500 14.5px Inter, sans-serif; cursor: pointer; color: #111827; } .abw-side button.on, .abw-side button:hover { background: #f3f4f6; } .abw-side hr { border: 0; border-top: 1px solid #f1f2f4; width: 100%; } .abw-sp { flex: 1; }
.abw-main { display: flex; flex-direction: column; min-width: 0; } .abw-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f1f2f4; } .abw-steps { display: flex; gap: 8px; align-items: center; font-size: 14.5px; color: #9ca3af; flex-wrap: wrap; } .abw-steps span.on { color: #111827; font-weight: 600; } .abw-steps span.done { color: #4b5563; } .abw-steps i { font-style: normal; color: #d1d5db; } .abw-x { border: 0; background: none; font-size: 24px; cursor: pointer; color: #6b7280; }
.abw-body { padding: 18px 20px; overflow-y: auto; flex: 1; } .abw-body h4 { margin: 18px 0 8px; font-size: 14.5px; } .abw-body label { display: block; margin-bottom: 10px; font-size: 13.5px; color: #374151; }
.abw-cast { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .abw-cast button { text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 12px; padding: 14px; cursor: pointer; font: inherit; color: #111827; } .abw-cast button.on { border: 2px solid #111827; padding: 13px; } .abw-cast b { display: block; } .abw-cast em { font-style: normal; font-size: 11px; background: #eef2ff; color: #4338ca; border-radius: 99px; padding: 1px 7px; margin-left: 4px; } .abw-cast small { color: #6b7280; font-size: 13px; }
.abw-rule { margin-bottom: 8px; } .abw-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #f1f2f4; }
html[data-mode="dark"] .abx-start button, html[data-mode="dark"] .abx-search, html[data-mode="dark"] .abx-view button, html[data-mode="dark"] .abx-chip, html[data-mode="dark"] .abx-ban, html[data-mode="dark"] .abx-rc, html[data-mode="dark"] .abw, html[data-mode="dark"] .abw-cast button { background: #111827; color: #e5e7eb; border-color: #374151; } html[data-mode="dark"] .abw-side button { color: #e5e7eb; }
@media (max-width: 760px) { .abx-start, .abw-cast { grid-template-columns: 1fr; } .abw { grid-template-columns: 1fr; } .abw-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #f1f2f4; } .abw-sp, .abw-side hr { display: none; } }
.abw-body label > .st-in, .abw-body label > select, .abw-body > div > select.st-in { display: block; width: 100%; margin-top: 5px; box-sizing: border-box; }
.abw-body .mu-file { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 22px; } .abw-body .mu-file small { display: block; }
.abw-body .ab-src { margin-bottom: 10px; } .abw-body label.ml-ok { display: flex; gap: 8px; align-items: center; }

/* (2026-10-24) the AI thinking line: an animated 3×3 dot grid and plain text, no bubble */
.msg-bubble.think { background: none !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; }
.ai-think { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text-main, #111827); }
.ai-dots { display: inline-grid; grid-template-columns: repeat(3, 4px); gap: 3px; font-style: normal; }
.ai-dots b { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .2; animation: aiDot 1.2s ease-in-out infinite; }
.ai-dots b:nth-child(1) { animation-delay: 0s; } .ai-dots b:nth-child(2), .ai-dots b:nth-child(4) { animation-delay: .15s; } .ai-dots b:nth-child(3), .ai-dots b:nth-child(5), .ai-dots b:nth-child(7) { animation-delay: .3s; } .ai-dots b:nth-child(6), .ai-dots b:nth-child(8) { animation-delay: .45s; } .ai-dots b:nth-child(9) { animation-delay: .6s; }
@keyframes aiDot { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
.ai-think-t { background: linear-gradient(90deg, #111827 0%, #111827 40%, #9ca3af 50%, #111827 60%, #111827 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aiShine 2.4s linear infinite; }
html[data-mode="dark"] .ai-think-t { background-image: linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 40%, #6b7280 50%, #e5e7eb 60%, #e5e7eb 100%); }
@keyframes aiShine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ai-dots b, .ai-think-t { animation: none; } .ai-dots b { opacity: .6; } .ai-think-t { color: inherit; background: none; } }
/* (owner 2026-10-25: "use this background color in commercial and website ... same color so they all match") the warm
   off-white from the commercials, right through the app in light mode; cards stay white */
html:not([data-mode="dark"]) body.s4, html:not([data-mode="dark"]) .ws2, html:not([data-mode="dark"]) .lay-top, html:not([data-mode="dark"]) body.s4 .pg-area, html:not([data-mode="dark"]) .s4-top, html:not([data-mode="dark"]) body.s4 .s2-chatside { background: #f3f1ec !important; }
html:not([data-mode="dark"]) body.s4 .s2-chatside { border-right-color: #e6e3dc !important; } html:not([data-mode="dark"]) .s4-top { border-bottom-color: #e6e3dc !important; }
html:not([data-mode="dark"]) body.s4 .s3-row:hover { background: #ebe8e1 !important; } html:not([data-mode="dark"]) body.s4 .s3-row.on { background: #e8e5dd !important; }

/* ---- (owner 2026-10-25: "my chatbox on the website to look exactly like this", the "Picture It Build It" commercial)
   The chat box is a tall white card with a soft lavender border and glow: the request at the top, a + (attach) at the
   bottom left, the mic and a purple rounded-square send button at the bottom right, and idea chips under it on Home. ---- */
body.s4 .ws2 .s2-work .chat-input-row.s3-pill { display: grid !important; grid-template-columns: auto 1fr auto auto; grid-template-rows: 1fr auto; grid-template-areas: "in in in in" "add . mic send"; align-items: end; column-gap: 10px; row-gap: 14px; min-height: 196px; padding: 26px 22px 20px 28px !important; background: #fff !important; border: 2px solid #a99cf4 !important; border-radius: 32px !important; box-shadow: 0 0 0 5px rgba(124,92,255,.07), 0 26px 60px -20px rgba(76,29,149,.28) !important; transition: border-color .15s, box-shadow .15s; }
body.s4 .ws2 .s2-work .chat-input-row.s3-pill:focus-within { border-color: #8b7bf0 !important; box-shadow: 0 0 0 6px rgba(124,92,255,.11), 0 28px 66px -20px rgba(76,29,149,.32) !important; }
body.s4 .ws2 .s2-work .s3-pill .chat-input { grid-area: in; align-self: start; width: 100% !important; padding: 2px 4px !important; font: 500 26px/1.3 'Plus Jakarta Sans', Inter, sans-serif !important; letter-spacing: -.01em; color: #111827 !important; background: transparent !important; }
body.s4 .ws2 .s2-work .s3-pill .chat-input::placeholder { color: #9a98a8; }
body.s4 .ws2 .s2-work .s3-pill .btn-attach { grid-area: add; width: 46px; height: 46px; margin-left: -8px; color: #374151 !important; }
body.s4 .ws2 .s2-work .s3-pill .btn-attach svg { width: 28px; height: 28px; stroke-width: 2.4; }
body.s4 .ws2 .s2-work .s3-pill .btn-mic { grid-area: mic; width: 46px; height: 46px; border: 0; border-radius: 50%; background: none; color: #8b8f99; display: grid; place-items: center; cursor: pointer; padding: 0; }
body.s4 .ws2 .s2-work .s3-pill .btn-mic[hidden] { display: none; }
body.s4 .ws2 .s2-work .s3-pill .btn-mic:hover { background: #f2f0fb; color: #4b5563; }
body.s4 .ws2 .s2-work .s3-pill .btn-mic.on { color: #7c5cff; background: #efebff; animation: s4mic 1.2s ease-in-out infinite; }
@keyframes s4mic { 50% { box-shadow: 0 0 0 7px rgba(124,92,255,.15); } }
body.s4 .ws2 .s2-work .s3-pill .btn-mic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.s4 .ws2 .s2-work .s3-pill .btn-exec { grid-area: send; width: 56px; height: 56px; border-radius: 16px !important; background: linear-gradient(135deg, #7655ff, #9071ff) !important; color: #fff; box-shadow: 0 10px 22px -8px rgba(118,85,255,.6), inset 0 1px 0 rgba(255,255,255,.25); }
body.s4 .ws2 .s2-work .s3-pill .btn-exec:hover { background: linear-gradient(135deg, #6a48fb, #8462ff) !important; transform: translateY(-1px); }
body.s4 .ws2 .s2-work .s3-pill .btn-exec svg { width: 26px; height: 26px; stroke-width: 2.6; }
body.s4 .ws2 .s2-work .s3-pill .s2-tools, body.s4 .ws2 .s2-work .s3-pill input[type=file] { display: none !important; }
/* in a chat the same card, shorter */
body.s4 .ws2.s2-busy .s2-work .chat-input-row.s3-pill { min-height: 0; flex-shrink: 0 !important; height: auto !important; row-gap: 8px; padding: 16px 16px 14px 20px !important; border-radius: 26px !important; }
body.s4 .ws2.s2-busy .s2-work .s3-pill .chat-input { font-size: 18px !important; }
body.s4 .ws2.s2-busy .s2-work .s3-pill .btn-exec { width: 46px; height: 46px; border-radius: 14px !important; }
/* idea chips under the box (Home only) */
.s4-suggest { display: none; }
body.s4 .ws2:not(.s2-busy) .s2-work > .agent-stream .s4-suggest { order: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.s4-suggest button { background: #fff; border: 1px solid #e3e1ec; border-radius: 999px; padding: 10px 20px; font: 600 16px 'Plus Jakarta Sans', Inter, sans-serif; color: #1f2937; cursor: pointer; box-shadow: 0 4px 14px -8px rgba(15,23,42,.18); transition: border-color .15s, transform .15s; }
.s4-suggest button:hover { border-color: #a99cf4; transform: translateY(-1px); }
@media (max-width: 900px) {
  body.s4 .ws2 .s2-work .chat-input-row.s3-pill { min-height: 150px; padding: 18px 14px 14px 18px !important; border-radius: 24px !important; }
  body.s4 .ws2 .s2-work .s3-pill .chat-input { font-size: 19px !important; }
  body.s4 .ws2 .s2-work .s3-pill .btn-exec { width: 48px; height: 48px; border-radius: 14px !important; }
  .s4-suggest button { font-size: 14.5px; padding: 8px 15px; }
}
html[data-mode="dark"] body.s4 .ws2 .s2-work .chat-input-row.s3-pill { background: #141729 !important; border-color: #6f5df0 !important; box-shadow: 0 0 0 5px rgba(124,92,255,.12), 0 26px 60px -20px rgba(0,0,0,.6) !important; }
html[data-mode="dark"] body.s4 .ws2 .s2-work .s3-pill .chat-input { color: #f1f5f9 !important; }
html[data-mode="dark"] body.s4 .ws2 .s2-work .s3-pill .btn-attach { color: #e5e7eb !important; }
html[data-mode="dark"] body.s4 .ws2 .s2-work .s3-pill .btn-mic:hover { background: #22263d; color: #e5e7eb; }
html[data-mode="dark"] .s4-suggest button { background: #161a2e; border-color: #2a2f4a; color: #e5e7eb; }
/* (2026-10-25) Billing: Downgrade dropdown next to Cancel plan, and the usage-notification levels */
.bl-dsel { appearance: none; -webkit-appearance: none; padding-right: 28px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23111827%27 stroke-width=%272%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; }
.bl-ntf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 8px 0 14px; font-size: 14px; } .bl-ntf label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .bl-ntf input { width: 16px; height: 16px; accent-color: #7655ff; }
/* (2026-10-25) Billing: the plans light up when the free Billing window switches them to yearly */
.bl-plans.bl-flash .bl-plan { box-shadow: 0 0 0 3px #a99cf4, 0 10px 30px rgba(118,85,255,.18); transition: box-shadow .3s; }
/* (2026-10-25, owner: "when you generate a website it comes to the side like in the screenshot") side-by-side builder:
   ws5-split.js sets body.s5-split and the sizes --s5l (side menu edge), --s5t (top bar), --s5w (preview width), --s5r (Ask panel) */
body.s5-split .ws2 .s2-work { margin-right: calc(var(--s5w) + var(--s5r, 0px)) !important; }
body.s5-split .ws2 .s2-work > .editor-panel { position: fixed !important; top: var(--s5t, 58px) !important; right: var(--s5r, 0px) !important; bottom: 0 !important; left: auto !important; width: var(--s5w) !important; min-width: 0 !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; z-index: 30; border-radius: 0 !important; border: 0 !important; border-left: 1px solid #e7e3dc !important; box-shadow: -18px 0 40px -30px rgba(20,20,30,.25) !important; display: flex !important; flex-direction: column; background: #fff; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-stage { flex: 1 1 auto; min-height: 0; height: auto !important; }
body.s5-split .ws2 .s2-work > .editor-panel #preview-frame { height: 100% !important; min-height: 0 !important; }
body.s5-split .ws2 .s2-work > .editor-panel.s3-tall { left: var(--s5l, 0px) !important; width: auto !important; }   /* Full view: over the chat too */
body.s5-split .s3-was { display: none !important; }   /* "earlier version is below" notes make no sense side by side */
.s5-btn { display: inline-flex; align-items: center; gap: 6px; } .s5-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body:not(.s5-can) #s5-toggle { display: none; }
/* the build steps and next-step chips under each build reply */
.s5-steps { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; padding: 0 2px; }
.s5-steps div { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #6b7280; }
.s5-steps svg { width: 16px; height: 16px; fill: none; stroke: #9ca3af; stroke-width: 1.8; flex: none; }
.s5-steps b { font-weight: 600; color: #374151; background: #f1efea; border-radius: 7px; padding: 2px 8px; font-size: 13px; }
.s5-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 14px; }
.s5-sugg small { width: 100%; font-size: 12px; color: #9ca3af; display: flex; align-items: center; gap: 6px; }
.s5-sugg small::before { content: "💡"; font-size: 12px; }
.s5-sugg button { border: 1px solid #e5e2db; background: #fff; color: #374151; border-radius: 999px; padding: 7px 13px; font: 600 13px Inter, sans-serif; cursor: pointer; }
.s5-sugg button:hover { border-color: #a99cf4; color: #5b3fe0; background: #f6f3ff; }
html[data-mode="dark"] .s5-steps b { background: #1f2433; color: #e5e7eb; } html[data-mode="dark"] .s5-sugg button { background: #141729; border-color: #2a2f45; color: #e5e7eb; }
html[data-mode="dark"] body.s5-split .ws2 .s2-work > .editor-panel { background: #0f1220; border-left-color: #1f2433 !important; }
/* phone: the result fills the screen; "Chat to edit" switches to the chat and back */
.s5-mob { display: none; }
@media (max-width: 900px) {
  body.s5-split .ws2 .s2-work { margin-right: 0 !important; }
  body.s5-split .ws2 .s2-work > .editor-panel { left: 0 !important; right: 0 !important; width: auto !important; border-left: 0 !important; }
  body.s5-split.s5-chat .ws2 .s2-work > .editor-panel { display: none !important; }
  body.s5-split .s5-mob { display: block; position: fixed; right: 14px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 60; border: 0; border-radius: 999px; padding: 12px 22px; background: linear-gradient(135deg, #7655ff, #9071ff); color: #fff; font: 700 15px Inter, sans-serif; box-shadow: 0 12px 28px -10px rgba(118,85,255,.7); }
  body.s5-split.s5-chat .s5-mob { bottom: auto; top: calc(var(--s5t, 58px) + 10px); }   /* in the chat: top right, clear of the box */
}
/* side by side: the preview bar stays on one line (Refresh, Chat only and Full view as icons, names on hover) */
body.s5-split .ws2 .s2-work > .editor-panel .s2-pbar { flex-wrap: nowrap !important; gap: 8px; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-actions .s5-btn span, body.s5-split .ws2 .s2-work > .editor-panel .s2-actions .s3-full span { display: none; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-actions { flex-wrap: nowrap !important; gap: 4px; margin-left: auto; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-tabs .tab-btn { white-space: nowrap; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-pbar { padding-left: 10px !important; padding-right: 10px !important; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-tabs .tab-btn { padding: 7px 9px !important; font-size: 13px !important; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-devices button { padding: 6px 7px !important; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-actions .tab-btn:not(.s2-publish) { padding: 7px 8px !important; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-publish { flex: none; }
/* (2026-10-25) builder step 2: Build / Discuss switch, Revert, plan card, Version history */
body.s4 .ws2 .s2-work .s3-pill .s5-mode { grid-row: 2; grid-column: 2; justify-self: start; align-self: center; border: 1px solid #e3e0f2; background: #f7f5ff; color: #4b3fb0; border-radius: 999px; padding: 6px 12px; font: 700 13px Inter, sans-serif; cursor: pointer; }
body.s4 .ws2 .s2-work .s3-pill .s5-mode.on { background: #fff6e5; border-color: #f2c66d; color: #8a5a00; }
body.s5-discuss .ws2 .s2-work .chat-input-row.s3-pill { border-color: #f2c66d !important; box-shadow: 0 0 0 6px rgba(242,198,109,.15) !important; }
.s5-rev { margin-top: 2px; } .s5-rev button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: #6b7280; font: 600 13px Inter, sans-serif; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.s5-rev button:hover { background: #f1efea; color: #111827; } .s5-rev svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s5-plan { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid #f2dca6; background: #fffaf0; border-radius: 14px; font-size: 14px; color: #5b4a1f; }
.s5-plan b { color: #3d2f09; } .s5-plan div { display: flex; gap: 8px; margin-top: 4px; }
.s5-plan button { border-radius: 999px; padding: 8px 14px; font: 700 13px Inter, sans-serif; cursor: pointer; border: 1px solid #e5e2db; background: #fff; color: #374151; }
.s5-plan .s5-ok { background: linear-gradient(135deg, #7655ff, #9071ff); color: #fff; border-color: transparent; }
.s5-vrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #eee; }
.s5-vrow b { display: block; font-size: 14px; } .s5-vrow span { display: block; font-size: 13px; color: #6b7280; margin-top: 2px; } .s5-vact { display: flex; gap: 6px; flex: none; }
#s5-peek { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: #fff6e5; border-bottom: 1px solid #f2dca6; font: 600 13px Inter, sans-serif; color: #8a5a00; }
#s5-peek span { flex: 1; }
html[data-mode="dark"] .s5-plan { background: #2a2410; border-color: #5b4a1f; color: #f3e3b5; } html[data-mode="dark"] .s5-plan b { color: #fff3cf; } html[data-mode="dark"] .s5-vrow { border-color: #1f2433; }
/* the X that closes the side preview: only side by side */
#s5-close { display: none; } body.s5-split #s5-close { display: inline-flex; margin-left: 2px; } body.s5-split #s5-close svg { width: 18px; height: 18px; stroke-width: 2.4; }
/* side by side: the X replaces the Chat only icon (same action) and the tabs sit closer, so Publish and the X fit */
body.s5-split #s5-toggle { display: none !important; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-tabs .tab-btn { padding: 7px 7px !important; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-pbar { gap: 6px !important; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-actions { gap: 2px !important; }
body.s5-split .ws2 .s2-work > .editor-panel .s2-publish { padding: 8px 14px !important; }
/* closed side preview: the result is hidden (not back in the chat); "Show website" puts it back on the side */
body.s5-closed .ws2 .s2-work > .editor-panel { display: none !important; }
#s5-open { display: none; }
body.s5-closed #s5-open { display: inline-flex; align-items: center; gap: 8px; position: fixed; top: calc(var(--s5t, 58px) + 12px); right: calc(var(--s5r, 0px) + 18px); z-index: 35; border: 1px solid #e3e0f2; background: #fff; color: #4b3fb0; border-radius: 999px; padding: 9px 16px; font: 700 14px Inter, sans-serif; cursor: pointer; box-shadow: 0 10px 26px -12px rgba(76,29,149,.35); }
body.s5-closed #s5-open:hover { background: #f6f3ff; } #s5-open svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
body.s4p #s5-open { display: none !important; }
html[data-mode="dark"] body.s5-closed #s5-open { background: #141729; color: #c9c2ff; border-color: #2a2f45; }
/* (owner 2026-10-25: "a double chatbox") the strip that hides the chat under the box had the old blue-grey (#f4f6fb) and
   showed as a second box behind it: it now takes the page color */
body.s4 .ws2 { --s2-bg: #f3f1ec; } html[data-mode="dark"] body.s4 .ws2 { --s2-bg: #0a1124; }
/* (2026-10-26) Clients > Snapshots */
.sn-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .sn-item { border-top: 1px solid #ece9e2; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; } .sn-item .cl-row { flex-wrap: wrap; }
html[data-mode="dark"] .sn-item { border-color: #1f2433; }
/* (2026-10-26) white-label: an agency's client signed in to their own account sees no plans, billing, affiliate,
   referral, client list, our docs, news, help chat or app button */
body.wl-client [data-page="plans"], body.wl-client [data-page="affiliate"], body.wl-client [data-page="clients"], body.wl-client .s4-refer,
body.wl-client #hb-docs, body.wl-client #hb-bell, body.wl-client #hb-ask, body.wl-client #hb-fb, body.wl-client #cl-pick, body.wl-client .b2b-app-btn,
body.wl-client #top-usage-pills .pill-box:first-child, body.wl-client .acct-up, body.wl-client [onclick*="openRefer"], body.wl-client [onclick*="s3Plan"], body.wl-client [onclick*="s2Billing"], body.wl-client [onclick*="s3Manage"] { display: none !important; }
.wl-initial { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--wl, #111827); color: #fff; font: 800 18px 'Inter Tight', Inter, sans-serif; flex: none; }
#wl-help { display: block; margin: 12px 16px 18px; padding: 10px 12px; border-radius: 12px; background: #f1efea; color: #374151; font: 500 13px Inter, sans-serif; text-decoration: none; } #wl-help b { display: block; color: var(--wl, #111827); }
html[data-mode="dark"] #wl-help { background: #141729; color: #cbd5e1; }
/* (2026-10-26) Clients > Your brand */
.wb-col { display: flex; align-items: center; gap: 8px; font: 500 13px Inter, sans-serif; } .wb-col input { width: 44px; height: 34px; border: 0; padding: 0; background: none; }
.wb-logo { align-items: center; flex-wrap: wrap; } .wb-prev img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid #ece9e2; }
/* (2026-10-26) white-label, after the live check: no Subscription/Usage/Refer, no balance or plan in the account menu */
body.wl-client [data-page="usage"], body.wl-client [data-page="refer"], body.wl-client .acct-menu .acct-card, body.wl-client .acct-menu hr,
body.wl-client .acct-menu [data-go="plans"], body.wl-client .acct-menu [data-go="usage"], body.wl-client .acct-menu [data-go="refer"], body.wl-client .acct-menu [data-go="wallet"], body.wl-client .acct-menu [data-go="about"], body.wl-client .acct-menu [data-href] { display: none !important; }
body.wl-client .acct-ring { visibility: hidden; } body.wl-client .acct-btn { position: relative; } body.wl-client .acct-btn::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--wl, #111827); }
/* (2026-10-26) Your brand: tidy upload button and colour picker (after the live look) */
.cl-row label.wb-col { flex: none; flex-direction: row; align-items: center; } .wb-logo label.bl-btn { flex: none; display: inline-flex; flex-direction: row; align-items: center; cursor: pointer; color: inherit; font-size: 13px; }
.wb-logo input[type="file"] { display: none !important; } .wb-prev:empty { display: none; } .wb-logo small { flex: 1 1 200px; }
/* (2026-10-27) Clients > Plans you sell */
.ap-row { align-items: center; } .ap-row .ap-n { flex: 1 1 180px; } .ap-row .ap-d { flex: 2 1 220px; } .ap-row .ap-s { flex: 1 1 160px; }
.cl-row label.ap-pr { flex: none; flex-direction: row; align-items: center; gap: 4px; } .ap-pr .st-in { width: 90px; flex: none; }
.ap-link { margin-top: 14px; } .ap-link .st-in { flex: 1 1 260px; }
.ap-paid { color: #067647 !important; } .ap-paid.late { color: #b54708 !important; } .ap-paid.ended { color: #b42318 !important; }
.ap-link a.bl-btn { text-decoration: none; display: inline-flex; align-items: center; }
/* (2026-10-27) Clients > Wholesale AI credit */
.ws-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.ws-pack { border: 1px solid #ece9e2; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; } .ws-pack b { font-size: 24px; font-variant-numeric: tabular-nums; } .ws-pack small { color: #6b7280; } .ws-pack .pg-dark { margin-top: 8px; }
.ws-off { align-self: flex-start; font: 700 12px Inter, sans-serif; color: #067647; background: #ecfdf3; border-radius: 999px; padding: 2px 8px; }
html[data-mode="dark"] .ws-pack { border-color: #1f2433; } html[data-mode="dark"] .ws-off { background: #053321; color: #6ce9a6; }

/* (2026-10-28) Meeting notes panel on transcripts (ws4-studio.js notesPanel) */
.mn-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed #ddd6fe; background: #faf5ff; border-radius: 12px; padding: 12px 14px; } .mn-cta small { display: block; color: #6b7280; margin-top: 2px; }
.mn-card { border: 1px solid #ddd6fe; background: #fbf8ff; border-radius: 14px; padding: 14px 16px; } .mn-card p { margin: 6px 0; line-height: 1.55; } .mn-card h4 { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #7c3aed; } .mn-card ul { margin: 0; padding-left: 20px; } .mn-card li { margin: 3px 0; }
.mn-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .mn-h span { display: flex; gap: 8px; } .mn-none { color: #9ca3af; font-size: 13px; }
.mn-todos { display: flex; flex-direction: column; gap: 4px; } .mn-todos label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; } .mn-todos small { color: #6b7280; }
.mn-crm { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ede9fe; } .mn-crm small { display: block; color: #6b7280; margin: 2px 0 8px; }
.mn-row { display: flex; gap: 8px; flex-wrap: wrap; } .mn-row .st-in { flex: 1 1 200px; min-width: 0; box-sizing: border-box; }
html[data-mode="dark"] .mn-cta { background: #2e1065; border-color: #5b21b6; } html[data-mode="dark"] .mn-card { background: #1a1030; border-color: #5b21b6; } html[data-mode="dark"] .mn-card h4 { color: #c4b5fd; } html[data-mode="dark"] .mn-crm { border-color: #4c1d95; }
/* (2026-10-28) Sequences page, CRM AI summary, duplicates */
.sq-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; } .sq-top .wf-name { flex: 1; border-color: #e9e3f7; }
.sq-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; } .sq-h { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #6d28d9; margin: 14px 0 8px; }
.sq-box { border: 1px solid #e9e3f7; background: #fff; border-radius: 14px; padding: 12px 14px; } .sq-days { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sq-step { margin-bottom: 4px; } .sq-wait { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: #6b6680; padding: 8px 0 8px 18px; border-left: 2px dashed #ddd6fe; margin-left: 14px; } .sq-wait .st-in { width: 64px; padding: 4px 6px; }
.sq-card { border: 1px solid #ddd6fe; background: #fbf8ff; border-radius: 14px; padding: 12px 14px; } .sq-ch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .sq-ch select { flex: 1; min-width: 180px; } .sq-ch span { display: flex; gap: 2px; } .sq-ch .pg-link:disabled { opacity: .3; }
.sq-card .st-in, .sq-card .st-ta, .sq-box .st-in { width: 100%; box-sizing: border-box; } .sq-card .ml-f label > input { display: block; } .sq-wait .st-in { width: 64px; }
.sq-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sq-chips small { color: #6b6680; } .sq-chips .lg-chip { font-size: 12px; padding: 3px 9px; }
.sq-runs { list-style: none; margin: 10px 0 0; padding: 0; max-height: 360px; overflow: auto; } .sq-runs li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid #f1edfa; } .sq-runs li small { display: block; color: #6b6680; font-size: 12px; } .sq-runs li span { display: flex; gap: 8px; flex-shrink: 0; }
.sq-pick { max-height: 300px; overflow: auto; border: 1px solid #e9e3f7; border-radius: 10px; padding: 6px 10px; } .sq-pick small { color: #6b6680; }
.cr-ai { border: 1px solid #ddd6fe; background: #faf5ff; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; } .cr-aih { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .cr-ai p { margin: 6px 0; line-height: 1.5; font-size: 14px; }
.cr-sq { display: inline-block; background: #ecfdf5; color: #047857; border-radius: 999px; padding: 2px 10px; font-size: 12px; margin: 4px 6px 6px 0; }
.cr-dup { border: 1px solid #e9e3f7; border-radius: 12px; padding: 10px 12px; } .cr-duph { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } .cr-dup small { color: #6b6680; }
html[data-mode="dark"] .sq-box, html[data-mode="dark"] .sq-pick, html[data-mode="dark"] .cr-dup { background: #14101f; border-color: #3b2a63; color: #e9e3f7; } html[data-mode="dark"] .sq-card, html[data-mode="dark"] .cr-ai { background: #1a1030; border-color: #5b21b6; color: #e9e3f7; }
html[data-mode="dark"] .sq-h { color: #c4b5fd; } html[data-mode="dark"] .sq-wait { border-color: #5b21b6; color: #a8a1c0; } html[data-mode="dark"] .sq-runs li { border-color: #2a1f45; } html[data-mode="dark"] .sq-runs li small, html[data-mode="dark"] .cr-dup small, html[data-mode="dark"] .sq-pick small { color: #a8a1c0; } html[data-mode="dark"] .cr-sq { background: #064e3b; color: #a7f3d0; }
@media (max-width: 860px) { .sq-grid { grid-template-columns: 1fr; } }