/* Wriline v2 — "Giấy bay" theme (approved canvas 2026-10-07).
   Loaded last: re-skins the shared workspace tokens and components with the
   blue gradient + frosted glass + white paper language. Markup, IDs and JS
   behaviour stay untouched; only Bàn viết (#view-home) has its own markup.
   No backdrop-filter anywhere: it leaves a grey fringe at the viewport edge. */

:root {
  --wl-ink: #0E1530;
  --wl-muted: #5A6380;
  --wl-blue: #2B57F2;
  --wl-blue-2: #7C97FF;
  --wl-blue-ink: #2448D8;
  --wl-link: #2F5BEA;
  --wl-line: #E4E9F7;
  --wl-line-soft: #EEF1FA;
  --wl-field: #F3F6FF;
  --wl-grad: linear-gradient(135deg, #2B57F2 0%, #7C97FF 100%);
  --wl-grad-card: linear-gradient(140deg, #2B57F2 0%, #6C8CFF 50%, #AFC1FF 100%);
  --wl-grad-bar: linear-gradient(90deg, #2B57F2, #8EA6FF);
  --wl-glass: rgb(255 255 255 / 72%);
  --wl-glass-line: rgb(255 255 255 / 95%);
  --wl-shadow-glass: 0 20px 50px rgb(52 97 245 / 8%);
  --wl-shadow-paper: 0 24px 60px rgb(40 70 180 / 12%);
  --wl-shadow-cta: 0 14px 30px rgb(62 107 255 / 30%);
  --wl-display: 'Bricolage Grotesque', 'Be Vietnam Pro', system-ui, sans-serif;
  --wl-body: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
  --wl-ease: cubic-bezier(.2, .8, .2, 1);

  --p3a-brand: #2B57F2;
  --p3a-brand-hover: #2248D8;
  --p3a-brand-soft: #E6EDFF;
  --p3a-text: #0E1530;
  --p3a-text-2: #2B3456;
  --p3a-text-muted: #5A6380;
  --p3a-text-muted-2: #6B7392;
  --p3a-border: #E4E9F7;
  --p3a-border-strong: #C9D5F5;
  --p3a-surface-soft: #F3F6FF;
  --p3a-shadow: 0 10px 30px rgb(40 70 180 / 7%);
  --p3a-shadow-strong: 0 24px 60px rgb(40 70 180 / 14%);
  --p3a-shadow-cta: 0 12px 26px rgb(62 107 255 / 30%);
  --radius-md: 12px; --radius-lg: 18px; --radius-card: 26px; --radius-panel: 30px;
  --workspace-glass: rgb(255 255 255 / 72%);
  --workspace-paper: #fff;
  --workspace-canvas:
    radial-gradient(1100px 760px at 0% 0%, #DCE6FF 0%, rgb(220 230 255 / 0%) 60%),
    radial-gradient(900px 700px at 100% 100%, #E9E3FF 0%, rgb(233 227 255 / 0%) 60%),
    radial-gradient(700px 500px at 75% 8%, #E1F0FF 0%, rgb(225 240 255 / 0%) 70%),
    #F4F7FF;
}

/* ---------- Base ---------- */
body[data-screen] { font-family: var(--wl-body); color: var(--wl-ink); font-variant-numeric: tabular-nums; }
body[data-screen] :is(button, input, select, textarea) { font-family: inherit; }
.wl-display { font-family: var(--wl-display); }
.wl-muted { color: var(--wl-muted); }
.wl-num { font-family: var(--wl-display); font-variant-numeric: tabular-nums; }

/* ---------- Shell ---------- */
body[data-screen] .p3a-shell,
body:has(#view-review:not([hidden])) .p3a-shell,
body:has(#view-content-check:not([hidden])) .p3a-shell {
  border-radius: 40px; border-color: rgb(255 255 255 / 90%);
  background: rgb(255 255 255 / 32%); box-shadow: none;
}
.p3a-topbar { min-height: 64px; }
/* The page name is the display heading of every page except Bàn viết. */
body[data-screen] .p3a-topbar-title {
  display: block !important; position: static; width: auto; height: auto; overflow: hidden; clip-path: none; white-space: nowrap;
  flex: 1 1 auto; min-width: 0; text-overflow: ellipsis;
  font-family: var(--wl-display); font-size: clamp(30px, 3.1vw, 44px); font-weight: 700;
  letter-spacing: -.045em; line-height: 1; color: var(--wl-ink);
}
body[data-screen="home"] .p3a-topbar-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.p3a-topbar-nav, .p3a-topbar-nav-item { display: none !important; }
body.workspace-side-dock #primary-nav .p3a-nav-in-header { display: flex; }

.p3a-icon-btn {
  border-radius: 50%; border: 1px solid var(--wl-glass-line); background: var(--wl-glass);
  box-shadow: none; color: var(--p3a-text-2);
}
.p3a-icon-btn:hover { background: #fff; color: var(--wl-blue); }
.p3a-queue-pill { border-radius: 999px; border-color: var(--wl-glass-line); background: var(--wl-glass); font-weight: 600; color: var(--p3a-text-2); }
.p3a-queue-pill[data-running="true"] { background: #fff; color: var(--wl-blue-ink); }

/* ---------- Primary actions: gradient pills ---------- */
:is(.p3a-cta-new, .p3a-cta-primary, .p3r-btn--blue, .p3r-ad-primary, .p3s-range-apply,
  .p3r-imgstudio__btn--primary, .p3d-action--primary, .p3ai-selectbar__btn--primary, .p3c-primary,
  #view-generator .p3a-toolbar-btn--primary) {
  background: var(--wl-grad) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: var(--p3a-shadow-cta); border-radius: 999px;
  transition: transform 200ms var(--wl-ease), box-shadow 200ms var(--wl-ease), filter 200ms;
}
:is(.p3a-cta-new, .p3a-cta-primary, .p3r-btn--blue, .p3r-ad-primary, .p3s-range-apply,
  .p3r-imgstudio__btn--primary, .p3d-action--primary, .p3ai-selectbar__btn--primary, .p3c-primary,
  #view-generator .p3a-toolbar-btn--primary):hover:not(:disabled) {
  filter: saturate(1.08) brightness(1.03); transform: translateY(-1px); box-shadow: 0 16px 32px rgb(62 107 255 / 34%);
}
:is(.p3a-cta-new, .p3a-cta-primary, .p3r-btn--blue, .p3c-primary):disabled { filter: grayscale(.25); opacity: .6; transform: none; }
.p3a-cta-new { height: 48px; min-height: 48px; font-weight: 600; }
@media (min-width: 481px) { .p3a-cta-new { padding: 0 20px 0 16px; font-size: 14px; } }
@media (max-width: 480px) { .p3a-cta-new { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 0; } }
#view-generator .p3a-cta-primary { min-height: 56px; padding: 0 30px; font-size: 15px; font-weight: 600; }

/* ---------- Rail: circle buttons inside a glass pill ---------- */
#primary-nav.p3a-dock {
  left: calc(var(--workspace-frame-inset) + (var(--workspace-rail) + var(--workspace-gutter) + 1px - 66px) / 2);
  width: 66px; padding: 9px; gap: 8px; border-radius: 999px;
  background: rgb(255 255 255 / 80%); border: 1px solid var(--wl-glass-line);
  box-shadow: 0 16px 40px rgb(52 97 245 / 10%);
}
#primary-nav .p3a-dock-item, #primary-nav .p3a-dock-item.p3a-dock-item--active, .p3a-dock-back {
  border: 0; background: rgb(255 255 255 / 92%); color: #2B3456; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.p3a-dock-back { margin: 0 0 6px; color: var(--wl-muted); }
#primary-nav .p3a-dock-item.p3a-dock-item--active {
  background: var(--wl-grad); color: #fff; box-shadow: 0 10px 22px rgb(62 107 255 / 35%);
}
#primary-nav .p3a-dock-item:hover:not(.p3a-dock-item--active) { background: #fff; color: var(--wl-blue); box-shadow: 0 0 0 4px #E6EDFF; }
#primary-nav [data-route="settings"] { margin-top: 0; }
#primary-nav .p3a-dock-item::after { border-radius: 999px; font-family: var(--wl-body); font-weight: 600; }
@media (max-height: 760px) and (min-width: 700px) {
  #primary-nav.p3a-dock { gap: 5px; padding: 7px; width: 60px; left: calc(var(--workspace-frame-inset) + (var(--workspace-rail) + var(--workspace-gutter) + 1px - 60px) / 2); }
  #primary-nav .p3a-dock-item, #primary-nav .p3a-dock-item.p3a-dock-item--active, .p3a-dock-back { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}

/* ---------- Shared surfaces ---------- */
.studio-card { border-radius: var(--radius-panel); border-color: var(--wl-glass-line); box-shadow: var(--wl-shadow-glass); }
.studio-card::before { display: none; }
.studio-card-heading h2 { font-family: var(--wl-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.studio-object-icon { background: var(--wl-grad); color: #fff; box-shadow: 0 8px 18px rgb(62 107 255 / 26%); border-radius: 50%; }
.studio-object-icon--mint, .studio-object-icon--lavender, .studio-object-icon--peach { background: var(--wl-grad); color: #fff; }
body[data-screen] :is(.p3a-chip, .hint-chip) { border-radius: 999px; }
body[data-screen] :is(.p3a-chip[aria-pressed="true"], .p3a-chip.is-active, .p3a-chip.active) {
  background: var(--wl-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgb(62 107 255 / 22%);
}
.p3a-toast { border-radius: 22px; }
.p3r-modal { border-radius: 28px; }
.p3r-modal-backdrop { background: rgb(214 225 255 / 55%); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* =====================================================================
   Bàn viết (#/)
   ===================================================================== */
#view-home:not([hidden]) { display: flex; flex-direction: column; gap: 28px; padding-bottom: 32px; }
.wl-home-head { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.wl-home-hello { display: flex; flex-direction: column; gap: 8px; flex: 1 1 300px; min-width: 0; }
.wl-home-hello > span { font-size: 15px; }
.wl-home-hello h2 { margin: 0; font-size: clamp(38px, 4vw, 54px); font-weight: 700; letter-spacing: -.045em; line-height: .98; color: var(--wl-ink); }
.wl-home-stats { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; margin-left: auto; }
.wl-stat { display: flex; flex-direction: column; gap: 4px; }
.wl-stat > .wl-muted { font-size: 13px; }
.wl-stat-num { font-size: 36px; font-weight: 300; letter-spacing: -.035em; line-height: 1; color: var(--wl-ink); }
.wl-stat-num small { font-family: var(--wl-body); font-size: 15px; font-weight: 500; }
.wl-stat-sep { width: 1px; height: 52px; background: rgb(14 21 48 / 12%); }

.wl-cta {
  display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 7px 0 24px;
  border-radius: 999px; background: var(--wl-grad); color: #fff; font-weight: 600; font-size: 15px;
  white-space: nowrap; text-decoration: none; box-shadow: var(--wl-shadow-cta);
  transition: transform 200ms var(--wl-ease), box-shadow 200ms var(--wl-ease);
}
.wl-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 34px rgb(62 107 255 / 36%); color: #fff; }
.wl-cta--sm { height: 54px; padding: 0 6px 0 20px; font-size: 14px; }
.wl-cta-go { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: #fff; color: var(--wl-link); display: inline-flex; align-items: center; justify-content: center; }
.wl-cta-go .material-symbols-outlined { font-size: 20px; }
.wl-cta-go--grad { width: 38px; height: 38px; flex-basis: 38px; background: var(--wl-grad); color: #fff; }

.wl-paper { background: #fff; border-radius: 32px; box-shadow: var(--wl-shadow-paper); }
.wl-glass { background: var(--wl-glass); border: 1px solid var(--wl-glass-line); border-radius: 36px; box-shadow: var(--wl-shadow-glass); }
.wl-grad { background: var(--wl-grad-card); color: #fff; border-radius: 36px; box-shadow: 0 26px 56px rgb(62 107 255 / 30%); }

.wl-tag { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.wl-tag--blue { background: #E6EDFF; color: #2448D8; }
.wl-tag--mint { background: #DDF5EC; color: #0F5A40; }
.wl-tag--pink { background: #FCE4F1; color: #8A1F57; }
.wl-tag--sky { background: #DFF1FF; color: #0B4A75; }
.wl-tag--lilac { background: #EEE8FF; color: #4B2A9A; }
.wl-tag--gray { background: #EEF0F6; color: #3C4460; }
.wl-tag--peach { background: #FFE9DF; color: #7A3410; }
.wl-tag--amber { background: #FFF0D6; color: #7A4A00; }
.wl-tag--dashed { border: 1.5px dashed #B9C8F5; color: var(--wl-link); background: transparent; }

.wl-home-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 26px; min-height: 340px; }
.wl-ask {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 34px;
  background: linear-gradient(225deg, rgb(124 151 255 / 16%) 0%, rgb(124 151 255 / 0%) 45%), #fff;
}
.wl-ask-top { display: flex; flex-direction: column; gap: 14px; }
.wl-ask-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 5px;
  border-radius: 999px; background: linear-gradient(90deg, #2B57F2, #7C97FF); color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 22px rgb(62 107 255 / 30%);
}
.wl-ask-badge-ico { width: 26px; height: 26px; border-radius: 50%; background: rgb(255 255 255 / 22%); display: inline-flex; align-items: center; justify-content: center; }
.wl-ask-badge-ico .material-symbols-outlined { font-size: 16px; }
.wl-ask h3 { margin: 0; font-size: clamp(30px, 2.9vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--wl-ink); }
.wl-ask-bar {
  position: relative; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 22px;
  border-radius: 999px; background: var(--wl-field); border: 1px solid var(--wl-line);
  transition: transform 560ms var(--wl-ease), box-shadow 560ms var(--wl-ease), background 300ms;
}
#view-home .wl-ask-bar input {
  flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; background: transparent; padding: 0; box-shadow: none;
  font: inherit; font-size: 15px; color: var(--wl-ink); cursor: text; border-radius: 0;
}
#view-home .wl-ask-bar input:focus-visible { outline: 0; }
.wl-ask-bar:focus-within { box-shadow: 0 0 0 4px rgb(62 107 255 / 16%); background: #fff; }
.wl-ask-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-ask-tags .wl-tag { min-height: 34px; padding: 0 14px; }

.wl-pending { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 32px; min-width: 0; }
.wl-pending h3 { margin: 0; font-size: 17px; font-weight: 600; color: #fff; }
.wl-pending-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wl-pending-num { font-size: clamp(64px, 6.4vw, 96px); font-weight: 300; letter-spacing: -.045em; line-height: .9; overflow-wrap: anywhere; }
.wl-pending-sub { font-size: 14px; opacity: .92; }
.wl-pill-white {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 6px 0 20px;
  border-radius: 999px; background: rgb(255 255 255 / 96%); color: var(--wl-ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.wl-pill-white:hover { background: #fff; color: var(--wl-ink); }

.wl-fresh { position: relative; min-height: 320px; min-width: 0; }
.wl-fresh-head { position: relative; z-index: 3; display: flex; align-items: center; padding: 4px 6px 0 10px; }
.wl-fresh-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--wl-ink); }
.wl-fresh-head a { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--wl-link); text-decoration: none; }
.wl-fresh-dash { position: absolute; left: 8%; right: 2%; top: 50px; bottom: 4px; border-radius: 34px; border: 2px dashed #C3CFF2; }
.wl-fresh-back { position: absolute; left: 14%; right: 6%; top: 70px; bottom: 40px; border-radius: 30px; background: linear-gradient(140deg, rgb(124 151 255 / 35%), rgb(190 205 255 / 35%)); transform: rotate(5deg); }
.wl-fresh-card {
  position: absolute; z-index: 2; left: 3%; right: 11%; top: 84px; padding: 26px;
  display: flex; flex-direction: column; gap: 14px; transform: rotate(-3deg); color: var(--wl-ink); text-decoration: none;
  transition: transform 300ms var(--wl-ease), box-shadow 300ms var(--wl-ease);
}
.wl-fresh-card:hover { transform: rotate(-1.5deg) translateY(-3px); color: var(--wl-ink); }
.wl-fresh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wl-fresh-time { margin-left: auto; font-size: 12px; }
.wl-fresh-title { font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wl-fresh-foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--wl-line-soft); font-size: 13px; }
.wl-fresh-score { font-size: 26px; font-weight: 300; color: var(--wl-ink); }
.wl-fresh-open { margin-left: auto; font-weight: 600; color: var(--wl-link); }
.wl-fresh-empty { font-size: 15px; color: var(--wl-muted); line-height: 1.5; }

.wl-flow { overflow: hidden; display: flex; flex-direction: column; }
.wl-flow-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 30px; background: linear-gradient(90deg, rgb(62 107 255 / 10%), rgb(124 151 255 / 4%)); }
.wl-flow-head h3 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--wl-ink); }
.wl-flow-head > .wl-muted { font-size: 14px; }
.wl-pill-link { margin-left: auto; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--wl-link); text-decoration: none; }
.wl-flow-rows { display: flex; flex-direction: column; padding: 10px 30px 18px; background: rgb(255 255 255 / 86%); }
.wl-flow-row { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); align-items: center; gap: 18px; min-height: 60px; border-top: 1px solid var(--wl-line-soft); color: var(--wl-ink); text-decoration: none; }
.wl-flow-row:first-child { border-top: 0; }
.wl-flow-kw { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-flow-track { display: block; min-width: 0; }
.wl-flow-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; min-width: 190px; max-width: 100%; transition: width 600ms var(--wl-ease); }
.wl-flow-bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-flow-bar b { font-size: 15px; font-weight: 700; }
.wl-flow-bar.is-running { background: var(--wl-grad-bar); color: #fff; }
.wl-flow-bar.is-done { background: #DDF5EC; color: #0F5A40; }
.wl-flow-row:hover .wl-flow-bar { filter: brightness(1.03); }
.wl-flow-empty { margin: 0; padding: 18px 0; color: var(--wl-muted); font-size: 14px; }

/* Home → Xưởng viết hand-off (View Transition, see views/home.js): the keyword
   bar morphs into the studio keyword box, the rest of the page cross-fades. */
.wl-handoff #view-home .wl-ask-bar, .wl-handoff #view-generator #keywords-chipbox { view-transition-name: wl-keyword; }
html.wl-handoff::view-transition-group(wl-keyword) { animation-duration: 460ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html.wl-handoff::view-transition-old(wl-keyword), html.wl-handoff::view-transition-new(wl-keyword) { height: 100%; animation-duration: 300ms; }
html.wl-handoff::view-transition-old(root) { animation: 220ms ease-out both wl-handoff-out; }
html.wl-handoff::view-transition-new(root) { animation: 360ms cubic-bezier(.2, .8, .2, 1) 80ms both wl-handoff-in; }
@keyframes wl-handoff-out { to { opacity: 0; } }
@keyframes wl-handoff-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes wl-arrive {
  0% { transform: translateY(-22px) scale(1.02); box-shadow: 0 0 0 6px rgb(62 107 255 / 18%), 0 40px 90px rgb(40 70 200 / 30%); }
  60% { box-shadow: 0 0 0 4px rgb(62 107 255 / 14%), var(--wl-shadow-glass); }
  100% { transform: none; box-shadow: var(--wl-shadow-glass); }
}
#view-generator .studio-intake.wl-arrive { animation: wl-arrive 900ms var(--wl-ease) both; }
@keyframes wl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#view-generator:not([hidden]) .studio-compose > * { animation: wl-rise 520ms var(--wl-ease) both; }
#view-generator:not([hidden]) .studio-compose > :nth-child(2) { animation-delay: 70ms; }
#view-generator:not([hidden]) .studio-compose > :nth-child(3) { animation-delay: 140ms; }

/* =====================================================================
   Xưởng viết (#/generator) — canvas layout: ticket column on the left,
   "Vé đang mở" deck on the right, floating action pill at the bottom.
   ===================================================================== */
body[data-screen] #view-generator .studio-compose {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  gap: 18px 26px; min-height: 0; align-items: start;
}
body[data-screen] #view-generator .studio-card { box-shadow: none; }
/* Drop zone */
body[data-screen] #view-generator .studio-intake {
  grid-column: 1; grid-row: 1; padding: 16px; border: 2px dashed #B9C8F5; border-radius: 30px;
  background: rgb(255 255 255 / 60%); box-shadow: none;
}
body[data-screen] #view-generator .studio-intake .studio-card-heading { display: none; }
body[data-screen] #view-generator .studio-intake-modes {
  position: static; width: max-content; margin: 0 0 12px; padding: 4px; border-radius: 999px;
  background: #fff; border: 1px solid var(--wl-line);
}
body[data-screen] #view-generator .studio-intake-modes .p3a-chip { min-height: 38px; padding: 6px 16px; border-radius: 999px; font-weight: 600; background: none; color: #2B3456; }
body[data-screen] #view-generator .studio-intake-modes .p3a-chip[aria-pressed="true"] { background: var(--wl-grad); color: #fff; box-shadow: 0 6px 14px rgb(62 107 255 / 24%); }
body[data-screen] #view-generator .studio-compose { padding-bottom: 8px; }
body[data-screen] #view-generator .p3a-keyword-input-label { font-size: 14px; font-weight: 600; color: var(--wl-ink); margin-bottom: 8px; }
body[data-screen] #view-generator .p3a-keyword-box { border-radius: 20px; background: #fff; border-color: var(--wl-line); }
body[data-screen] #view-generator #field-keyword-input { height: auto; min-height: 64px; padding: 12px 16px; font-size: 15px; resize: vertical; }
body[data-screen] #view-generator .p3a-keyword-actions { align-items: center; gap: 8px; margin-top: 10px; }
body[data-screen] #view-generator #btn-add-keywords { height: 44px; min-height: 44px; padding: 0 5px 0 18px; gap: 12px; font-size: 13px; font-weight: 600; }
body[data-screen] #view-generator #btn-add-keywords > .material-symbols-outlined { display: none; }
.wl-cta-go--xs { width: 34px; height: 34px; flex-basis: 34px; }
.wl-cta-go--xs .material-symbols-outlined { font-size: 18px; }
body[data-screen] #view-generator #btn-upload-keywords { height: 44px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--wl-line); font-weight: 600; font-size: 13px; }
body[data-screen] #view-generator #btn-upload-keywords .material-symbols-outlined { font-size: 18px; }
/* Ticket column */
body[data-screen] #view-generator .studio-plan { grid-column: 1; grid-row: 2; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }
body[data-screen] #view-generator .studio-plan .studio-card-heading { margin: 4px 4px 12px; }
body[data-screen] #view-generator .studio-plan .studio-object-icon,
body[data-screen] #view-generator .studio-plan-library { display: none; }
body[data-screen] #view-generator .studio-plan .studio-card-heading h2 { font-size: 18px; }
body[data-screen] #view-generator .p3a-keyword-table-head { display: none; }
body[data-screen] #view-generator .studio-plan #keyword-list { gap: 12px; padding: 4px 10px 8px 2px; }
body[data-screen] #view-generator .studio-plan .p3a-keyword-row {
  display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; border-radius: 28px; border: 0;
  background: #fff; color: var(--wl-ink); box-shadow: 0 8px 24px rgb(40 70 180 / 8%);
}
body[data-screen] #view-generator .studio-plan .p3a-keyword-row.is-selected {
  background: var(--wl-grad); color: #fff; transform: rotate(-1.2deg) translateX(4px); box-shadow: 0 4px 10px rgb(20 40 120 / 14%);
}
body[data-screen] #view-generator .p3a-keyword-main { flex: 1; min-height: 0; align-items: flex-start; }
body[data-screen] #view-generator .p3a-keyword-grip { display: none; }
body[data-screen] #view-generator .p3a-keyword-copy { gap: 8px; }
body[data-screen] #view-generator .p3a-keyword-name { font-size: 15px; font-weight: 700; line-height: 1.35; }
body[data-screen] #view-generator .p3a-keyword-config {
  justify-self: start; padding: 4px 10px; border-radius: 999px; background: #EEF0F6; color: #3C4460; font-size: 12px; font-weight: 600;
}
body[data-screen] #view-generator .p3a-keyword-config:empty { display: none; }
body[data-screen] #view-generator .p3a-keyword-row.is-selected .p3a-keyword-config { background: #fff; color: var(--wl-blue-ink); opacity: 1; }
body[data-screen] #view-generator .p3a-keyword-status { display: none; }
body[data-screen] #view-generator .p3a-row-icon-btn { width: 34px; height: 34px; border-radius: 50%; background: #F1F4FC; color: #3C4460; }
body[data-screen] #view-generator .p3a-row-icon-btn .material-symbols-outlined { font-size: 17px; }
body[data-screen] #view-generator .p3a-keyword-row.is-selected .p3a-row-icon-btn { background: rgb(255 255 255 / 20%); color: #fff; }
body[data-screen] #view-generator .p3a-keyword-row-actions { gap: 4px; }
body[data-screen] #view-generator .p3a-keyword-empty { min-height: 180px; border-radius: 28px; background: rgb(255 255 255 / 55%); border: 2px dashed #C3CFF2; }
/* Deck: settings of the open ticket */
body[data-screen] #view-generator .studio-inspector {
  grid-column: 2; grid-row: 1 / span 2; padding: 34px 38px 28px; border-radius: 40px;
  background: linear-gradient(225deg, rgb(124 151 255 / 12%) 0%, rgb(124 151 255 / 0%) 40%), #fff;
  box-shadow: 0 30px 70px rgb(40 70 180 / 12%);
}
body[data-screen] #view-generator .studio-inspector > .studio-card-heading { display: none; }
body[data-screen] #view-generator #keyword-settings-workspace { display: flex; flex-direction: column; gap: 26px; }
body[data-screen] #view-generator .studio-selected-setting {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; min-height: 0;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
body[data-screen] #view-generator .studio-selected-setting-label { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--wl-muted); }
body[data-screen] #view-generator .p3a-selected-dot { display: none; }
body[data-screen] #view-generator .studio-selected-setting .p3a-settings-title {
  font-family: var(--wl-display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--wl-ink);
}
body[data-screen] #view-generator .studio-setting-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-screen] #view-generator .studio-setting-card > summary { display: flex; min-height: 0; padding: 0; margin: 0 0 14px; pointer-events: none; }
body[data-screen] #view-generator .studio-setting-card > summary :is(.p3a-settings-icon, .p3a-settings-chevron) { display: none; }
body[data-screen] #view-generator :is(.studio-setting-card > summary .p3a-settings-title, .studio-setting-heading) { font-family: var(--wl-body); font-size: 14px; font-weight: 700; color: var(--wl-ink); }
body[data-screen] #view-generator .studio-setting-heading { min-height: 0; margin: 0 0 12px; }
body[data-screen] #view-generator .studio-setting-heading .material-symbols-outlined { display: none; }
body[data-screen] #view-generator .studio-setting-card > .p3a-settings-body, body[data-screen] #view-generator .studio-setting-search { padding: 0; }
/* Article type tiles */
body[data-screen] #view-generator .studio-setting-topic > .p3a-settings-body > .p3a-chip-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
body[data-screen] #view-generator .studio-setting-topic .p3a-chip {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; min-height: 76px; padding: 16px;
  border: 0; border-radius: 24px; text-align: left; font-family: var(--wl-display); font-size: 18px; font-weight: 700; line-height: 1.15;
  background: var(--wl-tile-bg, #EEF0F6); color: var(--wl-tile-fg, #3C4460); box-shadow: none;
  transition: transform 260ms var(--wl-ease), box-shadow 260ms var(--wl-ease);
}
body[data-screen] #view-generator .studio-setting-topic .p3a-chip::after { content: var(--wl-tile-d, ''); font-family: var(--wl-body); font-size: 12px; font-weight: 500; opacity: .85; }
body[data-screen] #view-generator .studio-setting-topic .p3a-chip:is([aria-pressed="true"], .is-active) {
  background: var(--wl-tile-bg, #EEF0F6); color: var(--wl-tile-fg, #3C4460);
  transform: rotate(-2deg) translateY(-2px); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wl-blue), 0 16px 30px rgb(62 107 255 / 22%);
}
#view-generator [data-chip-value="general"] { --wl-tile-bg: #EEF0F6; --wl-tile-fg: #3C4460; --wl-tile-d: 'Bài tổng quát'; }
#view-generator [data-chip-value="qa"] { --wl-tile-bg: #DDF5EC; --wl-tile-fg: #0F5A40; --wl-tile-d: 'Trả lời câu hỏi'; }
#view-generator [data-chip-value="howto"] { --wl-tile-bg: #DFF1FF; --wl-tile-fg: #0B4A75; --wl-tile-d: 'Các bước làm'; }
#view-generator [data-chip-value="review"] { --wl-tile-bg: #FCE4F1; --wl-tile-fg: #8A1F57; --wl-tile-d: 'Chấm sản phẩm'; }
#view-generator [data-chip-value="hands_on"] { --wl-tile-bg: #FFE9DF; --wl-tile-fg: #7A3410; --wl-tile-d: 'Trải nghiệm đầu'; }
#view-generator [data-chip-value="comparison"] { --wl-tile-bg: #FFF0D6; --wl-tile-fg: #7A4A00; --wl-tile-d: 'A cạnh B'; }
#view-generator [data-chip-value="toplist"] { --wl-tile-bg: #EEE8FF; --wl-tile-fg: #4B2A9A; --wl-tile-d: 'Danh sách gợi ý'; }
#view-generator [data-chip-value="stt_quote"] { --wl-tile-bg: #EDF7D4; --wl-tile-fg: #3E5208; --wl-tile-d: 'Câu nói ngắn'; }
#view-generator [data-chip-value="description"] { --wl-tile-bg: #E6EDFF; --wl-tile-fg: #2448D8; --wl-tile-d: 'Mô tả sản phẩm'; }
/* Writing depth, search and images: segmented pills */
body[data-screen] #view-generator :is(.p3a-thinking-mode-row, .p3a-research-mode-row, .studio-setting-image .p3a-image-mode) {
  display: flex; flex-wrap: wrap; gap: 4px; width: max-content; max-width: 100%; padding: 5px; border-radius: 999px; background: #F1F4FC; border: 0;
}
body[data-screen] #view-generator :is(.p3a-thinking-mode-row, .p3a-research-mode-row) .p3a-chip,
body[data-screen] #view-generator .studio-setting-image .p3a-image-mode__btn {
  width: auto; min-height: 42px; height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent;
  color: #2B3456; font-size: 14px; font-weight: 600; box-shadow: none; white-space: nowrap;
}
body[data-screen] #view-generator :is(.p3a-thinking-mode-row, .p3a-research-mode-row) .p3a-chip:is([aria-pressed="true"], .is-active),
body[data-screen] #view-generator .studio-setting-image .p3a-image-mode__btn:is(.is-active, [aria-pressed="true"]) {
  background: var(--wl-grad); color: #fff; box-shadow: 0 6px 14px rgb(62 107 255 / 22%);
}
body[data-screen] #view-generator .studio-setting-image .p3a-image-mode__btn b { font-weight: 600; }
body[data-screen] #view-generator #keyword-settings-workspace > :is(.studio-setting-writer, .studio-setting-search, .studio-setting-image) { min-height: 0; }
body[data-screen] #view-generator .studio-image-options > summary { justify-content: flex-start; gap: 6px; min-height: 36px; color: var(--wl-link); font-weight: 600; }
/* Sources and special requests */
body[data-screen] #view-generator .studio-setting-more { border-radius: 28px; background: #F4F7FF; }
body[data-screen] #view-generator .studio-source-heading { padding: 18px 22px; font-size: 15px; font-weight: 700; }
body[data-screen] #view-generator .studio-extra-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 22px 22px; }
body[data-screen] #view-generator .studio-source-field > label, body[data-screen] #view-generator .studio-source-editor h4 { font-size: 13px; font-weight: 600; color: var(--wl-ink); }
body[data-screen] #view-generator .studio-source-field :is(input, select), body[data-screen] #view-generator .studio-source-field .mselect-button,
body[data-screen] #view-generator .studio-source-field .p3a-mini-chipbox { border-radius: 999px; min-height: 46px; }
body[data-screen] #view-generator .studio-source-editor textarea { border-radius: 20px; }
/* Floating action pill (schedule is batch-level, so it lives here) */
body[data-screen] #view-generator .p3a-action-row {
  position: sticky; bottom: 16px; z-index: 5; width: min(100%, 860px); margin: 22px auto 0; padding: 8px 8px 8px 10px;
  border-radius: 999px; background: rgb(255 255 255 / 94%); border: 1px solid var(--wl-glass-line); box-shadow: 0 24px 60px rgb(40 70 180 / 16%);
}
body[data-screen] #view-generator .p3a-step-flow { display: flex; align-items: center; gap: 14px; padding: 0; }
body[data-screen] #view-generator .p3a-step-flow-items { display: none; }
body[data-screen] #view-generator #btn-submit { margin-left: auto; height: 56px; min-height: 56px; padding: 0 26px; text-transform: none; letter-spacing: 0; }
body[data-screen] #view-generator .wl-batch-schedule { position: relative; display: flex; align-items: center; gap: 10px; min-height: 0; padding: 0; margin: 0; flex: 1 1 auto; min-width: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
body[data-screen] #view-generator .wl-batch-schedule::after { display: none; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px;
  background: #F1F4FC; font-size: 13px; cursor: pointer; white-space: nowrap;
}
body[data-screen] #view-generator .wl-batch-schedule.is-enabled .p3a-schedule-toggle { background: var(--wl-grad); color: #fff; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-toggle strong { font-size: 13px; font-weight: 600; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-toggle > .material-symbols-outlined { font-size: 18px; color: inherit; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-toggle input { accent-color: var(--wl-blue); }
body[data-screen] #view-generator .wl-batch-schedule:not(.is-enabled) .p3a-schedule-picker { display: flex; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-picker { display: flex; align-items: center; gap: 8px; border: 0; padding: 0; background: none; min-width: 0; }
body[data-screen] #view-generator .wl-batch-schedule:not(.is-enabled) .p3a-schedule-fields { display: none; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--wl-muted); white-space: nowrap; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-meta .material-symbols-outlined { font-size: 16px; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-fields { display: flex; grid-template-columns: none; gap: 6px; }
body[data-screen] #view-generator .wl-batch-schedule :is(.p3a-schedule-date-btn, .p3a-schedule-time input) { height: 40px; border-radius: 999px; background: #EEF3FF; color: var(--wl-blue-ink); border: 0; font-weight: 600; font-size: 13px; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-time > span { display: none; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-calendar { bottom: calc(100% + 14px); top: auto; left: 0; border-radius: 24px; }
/* Brief mode keeps the deck look */
body[data-screen] #view-generator .studio-compose.is-brief-mode { grid-template-rows: auto; }
body[data-screen] #view-generator .studio-compose.is-brief-mode .studio-intake { grid-row: 1; border-style: solid; border-color: var(--wl-glass-line); background: #fff; }
body[data-screen] #view-generator .studio-compose.is-brief-mode .studio-inspector { grid-row: 1; padding: 30px; }
body[data-screen] #view-generator .p3a-brief-textarea { border-radius: 24px; background: var(--wl-field); border-color: var(--wl-line); }
body[data-screen] #view-generator .p3a-brief-section { border-radius: 24px; background: #F4F7FF; border: 0; }
body[data-screen] #view-generator .p3a-brief-channel-grid .p3a-chip { border-radius: 22px; min-height: 52px; }
body[data-screen] #view-generator .p3a-brief-analysis { border-radius: 22px; overflow: visible; }
body[data-screen] #view-generator .p3a-brief-analysis__badge { border-radius: 999px; padding-inline: 12px; }
@media (max-width: 1099px) {
  body[data-screen] #view-generator .studio-compose { grid-template-columns: minmax(0, 1fr); }
  body[data-screen] #view-generator :is(.studio-intake, .studio-plan, .studio-inspector) { grid-column: 1; grid-row: auto; }
  body[data-screen] #view-generator .studio-extra-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  body[data-screen] #view-generator .studio-inspector { padding: 22px 18px; border-radius: 30px; }
  body[data-screen] #view-generator .studio-extra-settings { grid-template-columns: minmax(0, 1fr); }
  body[data-screen] #view-generator .p3a-action-row { border-radius: 28px; padding: 10px; bottom: calc(var(--p3a-dock-clearance) - 64px); }
  body[data-screen] #view-generator .p3a-step-flow { flex-wrap: wrap; }
  body[data-screen] #view-generator #btn-submit { width: 100%; }
  body[data-screen] #view-generator .studio-plan .p3a-keyword-row.is-selected { transform: none; }
}

/* =====================================================================
   Tiến trình (#/progress/:id) — canvas layout: paper card with the
   keyword as a display title and a huge percentage, gradient stage bar,
   glass queue on the right.
   ===================================================================== */
:is(.p3b-generation-bar i, .p3b-flow-track i, .p3b-queue-item.is-selected .p3b-queue-item__rank) { background: var(--wl-grad-bar) !important; }
body[data-screen] #view-progress .p3b-page-header { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 0; background: none; border: 0; box-shadow: none; }
body[data-screen] #view-progress .p3b-page-header > div:first-child { display: none; }
body[data-screen] #view-progress .p3b-batch-overview {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; margin: 0;
  background: rgb(255 255 255 / 80%); border: 1px solid var(--wl-glass-line); box-shadow: none;
}
body[data-screen] #view-progress .p3b-batch-overview strong { font-size: 14px; }
body[data-screen] #view-progress .p3b-batch-overview p { margin: 0; font-size: 13px; color: var(--wl-muted); }
body[data-screen] #view-progress .p3b-generation-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 28px; align-items: start; }
body[data-screen] #view-progress .p3b-generation-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* Paper hero */
body[data-screen] #view-progress .p3b-production-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 28px; align-items: start;
  padding: 36px 40px; border: 0; border-radius: 36px;
  background: linear-gradient(225deg, rgb(124 151 255 / 14%) 0%, rgb(124 151 255 / 0%) 45%), #fff; box-shadow: var(--wl-shadow-paper);
}
body[data-screen] #view-progress .p3b-production-head { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0; border: 0; }
body[data-screen] #view-progress .p3b-production-head > .p3b-card-symbol { display: none; }
body[data-screen] #view-progress .p3b-current-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
body[data-screen] #view-progress .p3b-current-meta span { padding: 5px 11px; border-radius: 999px; background: #F1F4FC; color: #3C4460; font-size: 12px; font-weight: 600; letter-spacing: 0; }
body[data-screen] #view-progress .p3b-current-meta span:first-child { background: #E6EDFF; color: var(--wl-blue-ink); }
body[data-screen] #view-progress #progress-keyword-label { margin: 0; font-family: var(--wl-display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--wl-ink); }
body[data-screen] #view-progress .p3b-current-status { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; }
body[data-screen] #view-progress #progress-work-title { margin: 0; font-size: 16px; font-weight: 500; color: #2B3456; }
body[data-screen] #view-progress .p3b-status-dot { background: var(--wl-blue); box-shadow: 0 0 0 5px rgb(62 107 255 / 16%); }
body[data-screen] #view-progress .p3b-production-stage { display: contents; }
/* Ring → huge number */
body[data-screen] #view-progress .p3b-creation-ring {
  grid-column: 2; grid-row: 1; width: auto; height: auto; min-width: 0; aspect-ratio: auto; display: flex; flex-direction: column; align-items: flex-end;
  background: none; border: 0; box-shadow: none; margin: 0; padding: 0;
}
body[data-screen] #view-progress .p3b-creation-ring > :is(svg, .p3b-ring-orbit) { display: none; }
body[data-screen] #view-progress .p3b-creation-ring::before, body[data-screen] #view-progress .p3b-creation-ring::after { display: none; }
body[data-screen] #view-progress .p3b-ring-center { width: auto; height: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
body[data-screen] #view-progress .p3b-production-phase { width: auto; max-width: none; justify-self: stretch; align-self: stretch; }
body[data-screen] #view-progress .p3b-queue-card { height: auto; min-height: 0; max-height: none; overflow: visible; contain: none; }
body[data-screen] #view-progress .p3b-production-title { width: 100%; }
body[data-screen] #view-progress #progress-keyword-label { max-width: none; overflow: visible; display: block; -webkit-line-clamp: unset; white-space: normal; }
body[data-screen] #view-progress .p3b-queue-list { max-height: none; overflow: visible; padding: 0; }
body[data-screen] #view-progress #queue-filters { border-radius: 24px; }
body[data-screen] #view-progress .p3b-queue-item.is-selected :is(.p3b-queue-item__title, .p3b-queue-item__status, .p3b-queue-item__percent) { color: #fff; }
body[data-screen] #view-progress .p3b-ring-center { position: static; inset: auto; transform: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; background: none; }
body[data-screen] #view-progress #progress-pbar-pct {
  font-family: var(--wl-display); font-size: clamp(72px, 7vw, 112px); font-weight: 300; letter-spacing: -.05em; line-height: .9;
  background: var(--wl-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body[data-screen] #view-progress #progress-ring-caption { font-size: 13px; color: var(--wl-muted); }
body[data-screen] #view-progress .p3b-production-phase {
  grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 22px;
  background: #F4F7FF; border: 0; box-shadow: none;
}
body[data-screen] #view-progress .p3b-production-phase > .p3b-card-symbol { display: none; }
body[data-screen] #view-progress .p3b-production-phase small { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--wl-muted); text-transform: none; }
body[data-screen] #view-progress #progress-stage-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--wl-ink); }
body[data-screen] #view-progress .p3b-production-clock { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--wl-line-soft); background: none; }
body[data-screen] #view-progress .p3b-production-clock dt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wl-muted); font-weight: 500; }
body[data-screen] #view-progress .p3b-production-clock dt svg { display: none; }
body[data-screen] #view-progress .p3b-production-clock dd, body[data-screen] #view-progress #progress-start-time {
  margin: 0; font-family: var(--wl-display); font-size: 34px; font-weight: 300; letter-spacing: -.03em; color: var(--wl-ink);
}
body[data-screen] #view-progress .p3b-production-footer {
  grid-column: 2; grid-row: 3; display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 14px 32px; padding: 22px 0 0;
  border-top: 1px solid var(--wl-line-soft); background: none;
}
body[data-screen] #view-progress .p3b-production-start { display: flex; flex-direction: column; gap: 2px; margin: 0; }
body[data-screen] #view-progress .p3b-production-start dt { font-size: 12px; color: var(--wl-muted); font-weight: 500; }
body[data-screen] #view-progress .p3b-current-desc { flex-basis: 100%; order: 3; margin: 0; font-size: 13px; color: var(--wl-muted); text-align: right; }
body[data-screen] #view-progress .p3b-view-article-btn:not(.hidden) {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--wl-grad); color: #fff; font-weight: 600; box-shadow: var(--wl-shadow-cta);
}
/* Stage bar */
body[data-screen] #view-progress .p3b-timeline-card {
  display: flex; flex-direction: column; gap: 16px; padding: 26px 30px; border-radius: 32px;
  background: var(--wl-glass); border: 1px solid var(--wl-glass-line); box-shadow: var(--wl-shadow-glass);
}
body[data-screen] #view-progress .p3b-timeline-head { display: flex; align-items: center; gap: 10px; margin: 0; }
body[data-screen] #view-progress .p3b-timeline-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
body[data-screen] #view-progress .p3b-generation-bar { order: 2; height: 16px; border-radius: 999px; background: #EEF2FC; overflow: hidden; }
body[data-screen] #view-progress .p3b-generation-bar i { border-radius: 999px; }
body[data-screen] #view-progress .p3b-creation-flow { order: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
body[data-screen] #view-progress .p3b-creation-flow li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; background: none; border: 0; }
body[data-screen] #view-progress .p3b-creation-flow :is(.p3b-flow-track, .p3b-flow-icon) { display: none; }
body[data-screen] #view-progress .p3b-flow-label { font-size: 14px; font-weight: 700; color: #8A93AE; }
body[data-screen] #view-progress .p3b-flow-label small { font-size: 12px; }
body[data-screen] #view-progress [data-step-state="done"] .p3b-flow-label { color: #0F5A40; }
body[data-screen] #view-progress [data-step-state="done"] .p3b-flow-label::before { content: '✓ '; }
body[data-screen] #view-progress [data-step-state="active"] .p3b-flow-label { color: var(--wl-blue-ink); }
body[data-screen] #view-progress [data-flow-caption] { font-size: 12px; color: var(--wl-muted); }
body[data-screen] #view-progress .p3b-connection-row { order: 4; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--wl-muted); }
body[data-screen] #view-progress .p3b-connection-row button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--wl-line); background: #fff; font-weight: 600; font-size: 13px; color: var(--wl-ink); }
body[data-screen] #view-progress .p3b-connection-row #btn-pause { margin-left: auto; }
/* Queue */
body[data-screen] #view-progress .p3b-queue-card {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 36px;
  background: var(--wl-glass); border: 1px solid var(--wl-glass-line); box-shadow: var(--wl-shadow-glass);
}
body[data-screen] #view-progress .p3b-queue-head { display: flex; align-items: baseline; gap: 10px; padding: 4px 6px 0; }
body[data-screen] #view-progress .p3b-queue-head > .p3b-card-symbol { display: none; }
body[data-screen] #view-progress .p3b-queue-head h2 { margin: 0; font-family: var(--wl-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
body[data-screen] #view-progress .p3b-queue-head p { margin: 2px 0 0; font-size: 13px; color: var(--wl-muted); }
body[data-screen] #view-progress .p3b-queue-count { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; color: var(--wl-blue-ink); }
body[data-screen] #view-progress #queue-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / 86%); }
body[data-screen] #view-progress #queue-filters button { flex: 1 1 auto; height: 36px; padding: 0 9px; font-size: 12.5px !important; border: 0; border-radius: 999px; background: transparent; color: #2B3456; font-size: 13px; font-weight: 600; }
body[data-screen] #view-progress #queue-filters button:is([aria-pressed="true"], .is-active, [aria-selected="true"]) { background: var(--wl-grad); color: #fff; }
body[data-screen] #view-progress .p3b-queue-list { display: flex; flex-direction: column; gap: 10px; }
body[data-screen] #view-progress .p3b-queue-item {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 24px; border: 0; text-align: left;
  background: #fff; color: var(--wl-ink); box-shadow: 0 6px 18px rgb(40 70 180 / 6%);
}
body[data-screen] #view-progress .p3b-queue-item.is-selected { background: var(--wl-grad); color: #fff; box-shadow: 0 10px 24px rgb(62 107 255 / 26%); }
body[data-screen] #view-progress .p3b-queue-item__rank { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; background: #F1F4FC; font-size: 12px; font-weight: 700; color: #3C4460; }
body[data-screen] #view-progress .p3b-queue-item.is-selected .p3b-queue-item__rank { background: rgb(255 255 255 / 22%) !important; color: #fff; }
body[data-screen] #view-progress .p3b-queue-item__title { font-size: 15px; font-weight: 700; }
body[data-screen] #view-progress .p3b-queue-item__status { font-size: 12px; opacity: .85; }
body[data-screen] #view-progress .p3b-queue-item__percent { margin-left: auto; font-family: var(--wl-display); font-size: 20px; font-weight: 500; }
body[data-screen] #view-progress .p3b-queue-footer { align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--wl-link); }
body[data-screen] #view-progress .p3b-agent-card { border-radius: 32px; background: var(--wl-glass); border: 1px solid var(--wl-glass-line); box-shadow: var(--wl-shadow-glass); }
@media (max-width: 1099px) {
  body[data-screen] #view-progress .p3b-generation-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-screen] #view-progress .p3b-queue-card { position: static; }
}
@media (max-width: 699px) {
  body[data-screen] #view-progress .p3b-production-card { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  body[data-screen] #view-progress .p3b-creation-ring { grid-column: 1; grid-row: auto; align-items: flex-start; }
  body[data-screen] #view-progress .p3b-ring-center { align-items: flex-start; }
  body[data-screen] #view-progress :is(.p3b-production-phase, .p3b-production-clock, .p3b-production-footer) { grid-column: 1; grid-row: auto; margin-left: 0; }
  body[data-screen] #view-progress .p3b-production-footer { flex-wrap: wrap; gap: 16px; }
}

/* =====================================================================
   Kho nội dung (#/library) — canvas layout: big count + search in the
   heading, pill filters, a "newsstand" of white paper cards.
   ===================================================================== */
#view-library .p3e-chk[aria-pressed="true"] svg { background: var(--wl-grad) !important; }
body[data-screen] #view-library .studio-page-heading { display: flex; align-items: center; gap: 22px; margin: 0 0 18px; }
body[data-screen] #view-library .studio-library__title { display: flex; align-items: baseline; gap: 6px; margin-right: auto; }
body[data-screen] #view-library .studio-library__title h1 { display: none; }
body[data-screen] #view-library #lib-result-total {
  font-family: var(--wl-display); font-size: 44px; font-weight: 300; letter-spacing: -.035em; line-height: 1; color: var(--wl-link);
  background: none; padding: 0; border: 0; min-width: 0; height: auto;
}
body[data-screen] #view-library #lib-result-total::after { content: ' bài'; font-family: var(--wl-body); font-size: 15px; font-weight: 500; color: var(--wl-muted); letter-spacing: 0; }
body[data-screen] #view-library .studio-library__search {
  flex: 0 1 360px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; border-radius: 999px;
  background: rgb(255 255 255 / 86%); border: 1px solid var(--wl-glass-line); box-shadow: none;
}
body[data-screen] #view-library .studio-library__search input { border: 0; background: transparent; height: 100%; font-size: 14px; box-shadow: none; }
body[data-screen] #view-library .studio-library__workspace { display: flex; flex-direction: column; gap: 16px; grid-template-columns: none; }
body[data-screen] #view-library .studio-library__workspace > .studio-library__collections {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; position: static; width: auto; height: auto;
}
body[data-screen] #view-library .studio-library__workspace > .studio-library__collections .p3e-rail-item {
  display: inline-flex; align-items: center; gap: 6px; width: auto; height: 42px; min-height: 42px; padding: 0 18px; border-radius: 999px;
  background: rgb(255 255 255 / 86%); border: 1px solid var(--wl-glass-line); color: var(--wl-ink); font-size: 13px; font-weight: 600; box-shadow: none;
}
body[data-screen] #view-library .studio-library__workspace > .studio-library__collections .p3e-rail-item .material-symbols-outlined { display: none; }
body[data-screen] #view-library .studio-library__workspace > .studio-library__collections .p3e-rail-item:is(.is-active, [aria-current="true"], [aria-pressed="true"]) {
  background: var(--wl-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgb(62 107 255 / 28%);
}
body[data-screen] #view-library .studio-library__collection { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
body[data-screen] #view-library .studio-library__collection-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; padding: 0; background: none; border: 0; }
body[data-screen] #view-library .p3e-content-mode,
body[data-screen] #view-library .studio-library__view-options { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 86%); border: 0; }
body[data-screen] #view-library .p3e-content-mode button { height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: #2B3456; }
body[data-screen] #view-library .p3e-content-mode button.is-active { background: var(--wl-grad); color: #fff; box-shadow: none; }
body[data-screen] #view-library .studio-library__view-options { margin-left: auto; order: 2; }
body[data-screen] #view-library .studio-library__view-options button { width: 40px; height: 36px; border-radius: 999px; border: 0; background: transparent; color: #2B3456; }
body[data-screen] #view-library .studio-library__view-options button[aria-pressed="true"] { background: var(--wl-grad); color: #fff; }
body[data-screen] #view-library .studio-library__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 100%; order: 3; padding: 0; background: none; border: 0; }
body[data-screen] #view-library .p3e-filter-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: 999px;
  background: rgb(255 255 255 / 86%); border: 1px solid var(--wl-glass-line); color: var(--wl-ink); font-size: 13px; font-weight: 600; box-shadow: none;
}
body[data-screen] #view-library .p3e-filter-btn .material-symbols-outlined { font-size: 18px; }
body[data-screen] #view-library .p3e-filter-btn.studio-danger { color: #9A1C1C; }
/* Paper cards */
body[data-screen] #view-library .studio-library__scroll { padding: 6px 4px 6px 2px; overflow: visible; max-height: none; }
body[data-screen] #view-library .studio-library__cards[data-layout="cards"] { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card {
  padding: 22px; gap: 12px; border: 0; border-radius: 28px; background: #fff; box-shadow: 0 12px 32px rgb(40 70 180 / 8%); overflow: visible;
  transition: transform 260ms var(--wl-ease), box-shadow 260ms var(--wl-ease);
}
body[data-screen] #view-library [data-layout="cards"] .studio-content-card:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 22px 44px rgb(62 107 255 / 18%); }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card.is-active { background: linear-gradient(225deg, rgb(124 151 255 / 16%) 0%, rgb(124 151 255 / 0%) 50%), #fff; }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__top { position: static; display: flex; align-items: center; gap: 6px; order: 0; padding: 0; background: none; }
body[data-screen] #view-library [data-layout="cards"] .p3e-star { margin-left: auto; width: 34px; height: 34px; border-radius: 12px; background: #F4F7FF; color: var(--wl-muted); border: 0; }
body[data-screen] #view-library [data-layout="cards"] .p3e-star.is-on { color: #E0A100; }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__visual { order: 1; height: 132px; border-radius: 20px; overflow: hidden; margin: 0; }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__visual:not(:has(img)) { display: none; }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__visual .studio-content-card__kind { display: none; }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__body { order: 2; display: flex; flex-direction: column; gap: 8px; padding: 0; }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__status { order: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; background: none; padding: 0; color: var(--wl-muted); }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__status i { display: none; }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__type {
  display: inline-flex; order: -1; margin: 0; padding: 5px 11px; border-radius: 999px; background: var(--wl-tile-bg, #E6EDFF); color: var(--wl-tile-fg, #2448D8); font-size: 12px; font-weight: 600;
}
body[data-screen] #view-library [data-layout="cards"] .p3e-row-title {
  font-family: var(--wl-display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.22; color: var(--wl-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__keyword { margin: 0; font-size: 12px; color: var(--wl-muted); }
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__footer {
  order: 3; display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 12px 0 0; border-top: 1px solid var(--wl-line-soft); background: none;
}
body[data-screen] #view-library [data-layout="cards"] .studio-content-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; font-size: 12px; color: var(--wl-muted); }
body[data-screen] #view-library [data-layout="cards"] :is(.studio-content-card__delete, .p3e-more) { width: 34px; height: 34px; border-radius: 50%; background: #F4F7FF; border: 0; color: #3C4460; }
body[data-screen] #view-library [data-layout="cards"] :is(.studio-content-card__delete, .p3e-more) .material-symbols-outlined { font-size: 17px; }
#view-library [data-content-kind="general"] { --wl-tile-bg: #EEF0F6; --wl-tile-fg: #3C4460; }
#view-library [data-content-kind="qa"] { --wl-tile-bg: #DDF5EC; --wl-tile-fg: #0F5A40; }
#view-library [data-content-kind="howto"] { --wl-tile-bg: #DFF1FF; --wl-tile-fg: #0B4A75; }
#view-library [data-content-kind="review"] { --wl-tile-bg: #FCE4F1; --wl-tile-fg: #8A1F57; }
#view-library [data-content-kind="hands_on"] { --wl-tile-bg: #FFE9DF; --wl-tile-fg: #7A3410; }
#view-library [data-content-kind="comparison"] { --wl-tile-bg: #FFF0D6; --wl-tile-fg: #7A4A00; }
#view-library [data-content-kind="toplist"] { --wl-tile-bg: #EEE8FF; --wl-tile-fg: #4B2A9A; }
#view-library [data-content-kind="stt_quote"] { --wl-tile-bg: #EDF7D4; --wl-tile-fg: #3E5208; }
#view-library [data-content-kind="description"] { --wl-tile-bg: #E6EDFF; --wl-tile-fg: #2448D8; }
/* List mode: one paper strip per article, same type pills as the cards */
body[data-screen] #view-library .studio-library__cards[data-layout="list"] { display: flex; flex-direction: column; gap: 10px; padding: 0; border-radius: 0; background: none; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 248px; align-items: center; gap: 18px; min-height: 76px;
  padding: 12px 16px 12px 18px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 6px 18px rgb(40 70 180 / 6%);
  transition: box-shadow 200ms var(--wl-ease), transform 200ms var(--wl-ease);
}
body[data-screen] #view-library [data-layout="list"] .studio-content-card:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgb(62 107 255 / 14%); }
body[data-screen] #view-library [data-layout="list"] .studio-content-card.is-selected { box-shadow: 0 0 0 2px #7C97FF, 0 10px 24px rgb(62 107 255 / 14%); }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__top { position: static; display: flex; align-items: center; gap: 8px; width: auto; padding: 0; background: none; }
body[data-screen] #view-library [data-layout="list"] .p3e-star { width: 34px; height: 34px; border-radius: 12px; background: #F4F7FF; color: var(--wl-muted); border: 0; }
body[data-screen] #view-library [data-layout="list"] .p3e-star.is-on { color: #E0A100; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__visual { display: none; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title status" "kw status"; align-items: center; column-gap: 20px; row-gap: 3px; padding: 0;
}
body[data-screen] #view-library [data-layout="list"] .p3e-row-title {
  grid-area: title; min-width: 0; font-family: var(--wl-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--wl-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-screen] #view-library [data-layout="list"] .studio-content-card__keyword { grid-area: kw; min-width: 0; margin: 0; font-size: 12.5px; color: var(--wl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__status {
  grid-area: status; display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 196px; padding: 0; background: none;
  font-size: 12.5px; font-weight: 600; color: #3C4460; white-space: nowrap;
}
body[data-screen] #view-library [data-layout="list"] .studio-content-card__status i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #E3A21A; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__status[data-status="approved"] i,
body[data-screen] #view-library [data-layout="list"] .studio-content-card__status[data-status="published"] i { background: #12A26B; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__status[data-status="failed"] i { background: #D64545; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__status:is([data-status="running"], [data-status="queued"]) i { background: #2B57F2; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__type {
  display: inline-flex; order: -1; margin: 0 6px 0 0; padding: 5px 11px; border-radius: 999px; background: var(--wl-tile-bg, #E6EDFF); color: var(--wl-tile-fg, #2448D8); font-size: 12px; font-weight: 600;
}
body[data-screen] #view-library [data-layout="list"] .studio-content-card__type::before { content: none; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__footer { display: flex; align-items: center; gap: 6px; padding: 0 0 0 18px; border: 0; border-left: 1px solid var(--wl-line-soft); background: none; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; margin-right: auto; font-size: 12px; text-align: left; color: var(--wl-muted); }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__meta > :first-child { font-size: 12.5px; font-weight: 600; color: #2B3456; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-screen] #view-library [data-layout="list"] :is(.studio-content-card__delete, .p3e-more) { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #F4F7FF; border: 0; color: #3C4460; }
body[data-screen] #view-library [data-layout="list"] :is(.studio-content-card__delete, .p3e-more) .material-symbols-outlined { font-size: 18px; }
body[data-screen] #view-library [data-layout="list"] .studio-content-card__delete:hover { background: #FFF0F0; color: #9A1C1C; }
@media (max-width: 1099px) {
  body[data-screen] #view-library [data-layout="list"] .studio-content-card { grid-template-columns: 84px minmax(0, 1fr); }
  body[data-screen] #view-library [data-layout="list"] .studio-content-card__footer { grid-column: 2; padding: 0; border: 0; }
  body[data-screen] #view-library [data-layout="list"] .studio-content-card__meta { flex-direction: row; gap: 10px; }
}
@media (max-width: 699px) {
  body[data-screen] #view-library [data-layout="list"] .studio-content-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
  body[data-screen] #view-library [data-layout="list"] .studio-content-card__footer { grid-column: 1; }
  body[data-screen] #view-library [data-layout="list"] .studio-content-card__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "title" "kw"; }
  body[data-screen] #view-library [data-layout="list"] .studio-content-card__status { justify-content: flex-start; min-width: 0; }
  body[data-screen] #view-library [data-layout="list"] .p3e-row-title { white-space: normal; }
}
body[data-screen] #view-library .studio-library__footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 0; border: 0; background: none; }
body[data-screen] #view-library .studio-library__footer :is(button, select) { border-radius: 999px; }
body[data-screen] #view-library #lib-bulk-bar { border-radius: 999px; background: var(--wl-grad); color: #fff; box-shadow: 0 10px 22px rgb(43 87 242 / 24%); }

/* =====================================================================
   Duyệt bài (#/review/:id)
   ===================================================================== */
#view-review .studio-review__reader .p3r-tab { border-radius: 999px; min-height: 40px; padding: 8px 16px; font-weight: 600; border-bottom: 0; margin-bottom: 0; }
#view-review .p3r-tab:is(.is-active, .active, [aria-selected="true"]) { background: var(--wl-grad); color: #fff; box-shadow: 0 6px 14px rgb(62 107 255 / 22%); }
#view-review .p3r-tab:is(.is-active, .active, [aria-selected="true"])::after { display: none; }
#view-review .p3r-tabs { gap: 6px; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / 74%); border: 1px solid var(--wl-glass-line); border-bottom: 1px solid var(--wl-glass-line); width: max-content; max-width: 100%; overflow-x: auto; }
#view-review .p3r-article { border-radius: var(--radius-panel); box-shadow: var(--wl-shadow-paper); }
#view-review .p3r-preview-title { font-family: var(--wl-display); letter-spacing: -.02em; }
#view-review :is(.p3r-score-v, .p3r-context-score) { font-family: var(--wl-display); }
#view-review .p3r-preview-meta { font-size: 12px; }
#view-review .p3r-preview-meta :is(time, .p3r-time, [data-time]) { font-size: 10.5px; }

/* Review — canvas layout: pending list as a glass rail on the left (wide
   screens), the article as white paper in the middle, gradient score card
   and glass Image Studio on the right. */
@media (min-width: 1280px) {
  body[data-screen] #view-review:not([hidden]) {
    display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0 24px; align-items: start;
  }
  body[data-screen] #view-review > .studio-page-heading { grid-column: 2; grid-row: 1; }
  body[data-screen] #view-review > .studio-review__workspace { grid-column: 2; grid-row: 2; }
  body[data-screen] #view-review > .studio-review__picker-backdrop,
  body[data-screen] #view-review > .studio-review__picker-backdrop[hidden] {
    display: block !important; position: sticky; top: 16px; z-index: 1; grid-column: 1; grid-row: 1 / span 2; inset: auto;
    padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body[data-screen] #view-review .studio-review__picker {
    width: auto; max-height: calc(100dvh - 140px); gap: 12px; padding: 20px 14px; border-radius: 34px;
    background: var(--wl-glass); border: 1px solid var(--wl-glass-line); box-shadow: var(--wl-shadow-glass); animation: none;
  }
  body[data-screen] #view-review #p3r-picker-open, body[data-screen] #view-review #p3r-picker-close { display: none; }
  body[data-screen] #view-review .studio-review__picker-head .studio-feature-icon { display: none; }
}
body[data-screen] #view-review .studio-review__picker-head h2 { font-family: var(--wl-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 6px; }
body[data-screen] #view-review .studio-review__picker-search { min-height: 44px; border-radius: 999px; background: #fff; border-color: var(--wl-line); }
body[data-screen] #view-review #p3r-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; padding: 2px; }
body[data-screen] #view-review .p3r-card {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 20px; border: 0; background: rgb(255 255 255 / 92%);
  box-shadow: none; cursor: pointer; transition: transform 200ms var(--wl-ease), box-shadow 200ms;
}
body[data-screen] #view-review .p3r-card:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgb(40 70 180 / 10%); }
body[data-screen] #view-review .p3r-card--active { background: var(--wl-grad); color: #fff; box-shadow: 0 8px 18px rgb(43 87 242 / 22%); }
body[data-screen] #view-review .p3r-c-title { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: inherit; }
body[data-screen] #view-review .p3r-c-key { display: none; }
body[data-screen] #view-review .p3r-c-foot { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--wl-muted); }
body[data-screen] #view-review .p3r-card--active :is(.p3r-c-foot, .p3r-c-meta, .p3r-c-time) { color: rgb(255 255 255 / 88%); }
body[data-screen] #view-review .p3r-c-time { font-size: 10.5px; }
body[data-screen] #view-review .p3r-c-status { border-radius: 999px; font-size: 10.5px; }
body[data-screen] #view-review .studio-text-action { font-size: 12px; color: var(--wl-link); padding: 0 6px; }
/* Paper reader */
body[data-screen] #view-review .studio-review__workspace { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 360px); gap: 24px; }
body[data-screen] #view-review .studio-review__reader {
  border: 0; border-radius: 32px; background: #fff; box-shadow: 0 26px 60px rgb(40 70 180 / 11%); overflow: hidden; padding: 0;
}
body[data-screen] #view-review .p3r-preview-head { padding: 22px 30px 8px; border: 0; background: none; }
body[data-screen] #view-review .p3r-preview-title { font-family: var(--wl-display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.18; }
body[data-screen] #view-review .p3r-preview-actions :is(.p3r-copy-btn, .p3r-fullscreen-btn, .p3r-seo-disclosure > summary) {
  height: 38px; min-height: 38px; border-radius: 999px; border: 1px solid var(--wl-glass-line); background: rgb(255 255 255 / 90%); box-shadow: 0 2px 8px rgb(40 70 180 / 6%); font-size: 12.5px; font-weight: 600;
}
body[data-screen] #view-review .p3r-preview-actions .p3r-delete-btn { color: #9A1C1C; }
body[data-screen] #view-review .studio-review__reader .p3r-tabs { margin: 6px 30px 0; }
body[data-screen] #view-review .p3r-article { padding: 22px 30px 34px; border: 0; background: none; }
body[data-screen] #view-review .p3r-article > :is(article, .p3r-md) { max-width: 780px; margin-inline: auto; }
body[data-screen] #view-review .p3r-sapo { border: 0; border-radius: 20px; background: linear-gradient(135deg, #EEF3FF, #F6F4FF); padding: 16px 20px; }
body[data-screen] #view-review .p3r-preview-foot { border: 0; background: none; padding: 0 30px 24px; }
/* Right column */
body[data-screen] #view-review .studio-review__tools { display: flex; flex-direction: column; gap: 18px; }
body[data-screen] #view-review .studio-review__assessment {
  padding: 24px; border: 0; border-radius: 30px; color: #fff;
  background: linear-gradient(140deg, #2B57F2 0%, #6C8CFF 55%, #AFC1FF 100%); box-shadow: 0 22px 46px rgb(43 87 242 / 28%);
}
body[data-screen] #view-review .studio-review__assessment .studio-feature-icon { display: none; }
body[data-screen] #view-review .studio-review__assessment, body[data-screen] #view-review .studio-review__assessment * { color: #fff !important; }
body[data-screen] #view-review .studio-review__assessment .studio-review__tool-heading h2 { font-size: 15px; font-weight: 600; }
body[data-screen] #view-review .studio-review__images {
  padding: 22px; border-radius: 30px; background: var(--wl-glass); border: 1px solid var(--wl-glass-line); box-shadow: var(--wl-shadow-glass);
}

/* AI suggestions: a right-side drawer instead of a page-wide modal, so the
   article stays readable while the editor compares the variants. */
#p3r-suggest-modal.p3r-modal-backdrop { justify-content: flex-end; align-items: stretch; padding: 16px; background: rgb(214 225 255 / 40%); }
#p3r-suggest-modal .p3r-modal--diff {
  width: min(460px, 100%); max-width: none; max-height: none; height: 100%;
  border-radius: 30px; background: #fff; box-shadow: -24px 0 60px rgb(40 70 180 / 18%);
}
#p3r-suggest-modal.is-open .p3r-modal { animation: wl-drawer-in 320ms var(--wl-ease); }
@keyframes wl-drawer-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
#p3r-suggest-modal .p3r-modal__head { padding: 18px 20px; border-bottom: 1px solid var(--wl-line-soft); }
#p3r-suggest-modal .p3r-modal__head h3 { font-family: var(--wl-display); font-size: 18px; letter-spacing: -.01em; }
#p3r-suggest-modal .p3r-modal__close { border-radius: 50%; width: 40px; height: 40px; }
#p3r-suggest-modal .p3r-modal__body--diff { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; overflow-y: auto; }
#p3r-suggest-modal .p3r-diff__col { flex: 0 0 auto; border-radius: 18px; border-color: var(--wl-line); background: var(--wl-field); }
#p3r-suggest-modal .p3r-diff__col--before .p3r-diff__content { max-height: 132px; overflow-y: auto; font-size: 12.5px; }
#p3r-suggest-modal .p3r-diff__col--after { background: #fff; border-color: #C9D5F5; }
#p3r-suggest-modal .p3r-variant-list { overflow: visible; gap: 10px; }
#p3r-suggest-modal .p3r-variant { border-radius: 20px; border-color: var(--wl-line); box-shadow: 0 4px 12px rgb(20 40 120 / 6%); transition: border-color 200ms, box-shadow 200ms; }
#p3r-suggest-modal .p3r-variant:hover { border-color: #B9C8F5; box-shadow: 0 10px 24px rgb(40 70 180 / 12%); }
#p3r-suggest-modal .p3r-variant__head { background: #F6F8FF; border-bottom-color: var(--wl-line-soft); padding: 8px 10px 8px 14px; }
#p3r-suggest-modal .p3r-variant__label { color: var(--wl-blue-ink); letter-spacing: .03em; }
#p3r-suggest-modal .p3r-variant .p3r-diff__content { max-height: 168px; overflow-y: auto; }
#p3r-suggest-modal .p3r-variant__pick { padding: 6px 14px; }
#p3r-suggest-modal .p3r-modal__foot { padding: 12px 16px; border-top: 1px solid var(--wl-line-soft); flex-wrap: wrap; gap: 8px; }
#p3r-suggest-modal .p3r-modal__warn { margin: 10px 16px 0; border-radius: 14px; }

/* Segmented toggles (Image Studio mode/provider, settings). */
body[data-screen] .p3s-img-model-toggle { border-radius: 999px; padding: 4px; gap: 4px; background: var(--wl-field); border-color: var(--wl-line); }
body[data-screen] .p3s-img-model-toggle > button { border-radius: 999px; }
body[data-screen] .p3s-img-model-toggle > button.is-active { background: var(--wl-grad); color: #fff; box-shadow: 0 6px 14px rgb(62 107 255 / 22%); }
#view-review .studio-review__aside > *, #view-review :is(.p3r-imgstudio, .p3r-assistant) { border-radius: var(--radius-panel); }

/* Selection toolbar ("Bạn muốn AI sửa thế nào?"). */
.p3ai-selectbar__inner, .p3ai-selectbar > :first-child { border-radius: 22px; border: 1px solid var(--wl-glass-line); box-shadow: 0 18px 44px rgb(40 70 180 / 16%); }

/* Đánh giá SEO tab: inline AI rewrite stays where it is, restyled. */
.seo-v3 { --seo-blue: #2B57F2; --seo-blue-soft: #EEF3FF; --seo-border: #E4E9F7; --seo-text: #0E1530; --seo-muted: #5A6380; }
.seo-v3-ai { border-top-color: var(--wl-line); gap: 12px; }
.seo-v3-ai-generate, .seo-v3-ai-ready-head button { border-radius: 999px; border-color: #C9D5F5; font-weight: 700; font-size: 12px; }
.seo-v3-ai-generate { padding: 8px 16px; }
.seo-v3-ai-generate .material-symbols-outlined { color: var(--wl-blue); }
.seo-v3-ai-ready-head > span { font-family: var(--wl-display); font-size: 13px; color: var(--wl-ink); }
.seo-v3-ai-options { gap: 12px; }
.seo-v3-ai-option { border-radius: 20px; border-color: var(--wl-line); padding: 14px; box-shadow: 0 4px 12px rgb(20 40 120 / 5%); transition: border-color 200ms, box-shadow 200ms; }
.seo-v3-ai-option:hover { border-color: #B9C8F5; box-shadow: 0 10px 24px rgb(40 70 180 / 10%); }
.seo-v3-ai-option-head b { color: var(--wl-blue-ink); font-size: 12px; }
.seo-v3-ai-option-copy { font-size: 12.5px; color: #2B3456; }
.seo-v3-ai-apply { border-radius: 999px; min-height: 40px; font-size: 12.5px; }
.seo-v3-ai-spinner { border-color: #D6E0FF; border-top-color: var(--wl-blue); }

/* =====================================================================
   Kiểm tra nội dung — glass list | paper document | glass results
   ===================================================================== */
body[data-screen] #view-content-check .p3c-toolbar { margin: 0 0 18px; }
body[data-screen] #view-content-check .p3c-toolbar button { height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 13px; }
body[data-screen] #view-content-check .p3c-toolbar button:not(.p3c-primary) { background: rgb(255 255 255 / 86%); border: 1px solid var(--wl-glass-line); color: var(--wl-ink); }
body[data-screen] #view-content-check .p3c-layout { grid-template-columns: 236px minmax(0, 1fr) 300px; gap: 20px; }
body[data-screen] #view-content-check .p3c-layout > :is(.p3c-list, .p3c-inspector) {
  padding: 20px 14px; border-radius: 30px; background: var(--wl-glass); border: 1px solid var(--wl-glass-line) !important; box-shadow: var(--wl-shadow-glass);
}
body[data-screen] #view-content-check .p3c-layout > .p3c-document {
  padding: 0; overflow: hidden; border: 0; border-radius: 34px; background: #fff; box-shadow: 0 30px 70px rgb(40 70 180 / 12%);
}
body[data-screen] #view-content-check .p3c-document-head { padding: 24px 34px 16px; border-bottom: 1px solid var(--wl-line-soft); }
body[data-screen] #view-content-check .p3c-document-head h2 { font-family: var(--wl-display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
body[data-screen] #view-content-check .p3c-reader { padding: 24px 34px 34px; }
body[data-screen] #view-content-check .p3c-layout h2 { margin-left: 6px; }
body[data-screen] #view-content-check .p3c-list input { height: 42px; border-radius: 999px; background: rgb(255 255 255 / 92%); border: 1px solid var(--wl-line); padding: 0 14px; }
body[data-screen] #view-content-check .p3c-list [data-list] :is(button, a) { border-radius: 20px; }
body[data-screen] #view-content-check .p3c-list [data-list] :is(button, a):is([aria-current="true"], [aria-pressed="true"], .is-active) {
  background: var(--wl-grad) !important; color: #fff !important; box-shadow: 0 12px 26px rgb(62 107 255 / 28%);
}
body[data-screen] #view-content-check .p3c-list [data-list] :is(button, a):is([aria-current="true"], [aria-pressed="true"], .is-active) * { color: #fff !important; }
body[data-screen] #view-content-check .p3c-toggles label { border-radius: 999px; padding: 6px 14px 6px 10px; min-height: 38px; font-weight: 600; }
body[data-screen] #view-content-check .p3c-toggles label:nth-child(6n+1) { background: #EEF3FF; color: #2448D8; }
body[data-screen] #view-content-check .p3c-toggles label:nth-child(6n+2) { background: #FFF0F6; color: #8A1F57; }
body[data-screen] #view-content-check .p3c-toggles label:nth-child(6n+3) { background: #FFF6E3; color: #7A4A00; }
body[data-screen] #view-content-check .p3c-toggles label:nth-child(6n+4) { background: #E8F8F0; color: #0F5A40; }
body[data-screen] #view-content-check .p3c-toggles label:nth-child(6n+5) { background: #F3EEFF; color: #4B2A9A; }
body[data-screen] #view-content-check .p3c-toggles label:nth-child(6n+6) { background: #EAF6FF; color: #0B4A75; }
body[data-screen] #view-content-check .p3c-metric { border-radius: 999px; background: #F4F7FF; }
body[data-screen] #view-content-check .p3c-total { font-family: var(--wl-display); font-size: 40px; font-weight: 300; color: var(--wl-blue-ink); background: none; }
body[data-screen] #view-content-check .p3c-summary button { border-radius: 18px; }
body[data-screen] #view-content-check .p3c-summary button[aria-pressed="true"] { background: var(--wl-grad); color: #fff; border-color: transparent; }
body[data-screen] #view-content-check .p3c-summary button[aria-pressed="true"] * { color: #fff; }
body[data-screen] #view-content-check .p3c-issue { border-radius: 20px; }
body[data-screen] #view-content-check .p3c-result-state { border-radius: 20px; }
body[data-screen] #view-content-check > .p3c-live { border-radius: 999px; }
@media (max-width: 1199px) { body[data-screen] #view-content-check .p3c-layout { grid-template-columns: 220px minmax(0, 1fr); } }

/* =====================================================================
   Phân tích — gradient lead KPI, paper charts, glass trend list
   ===================================================================== */
body[data-screen] #view-analytics .p3n-kpi-row { gap: 18px; }
body[data-screen] #view-analytics .p3n-kpi-card { padding: 22px 24px; border-radius: 30px; background: var(--wl-glass); border: 1px solid var(--wl-glass-line); box-shadow: var(--wl-shadow-glass); }
body[data-screen] #view-analytics .p3n-kpi-row > .p3n-kpi-card:first-child { background: var(--wl-grad-card); border-color: transparent; box-shadow: 0 22px 46px rgb(62 107 255 / 28%); }
body[data-screen] #view-analytics .p3n-kpi-row > .p3n-kpi-card:first-child * { color: #fff !important; }
body[data-screen] #view-analytics .p3n-kpi-icon { display: none; }
body[data-screen] #view-analytics .p3n-kpi-value { font-family: var(--wl-display); font-size: 44px; font-weight: 300; letter-spacing: -.035em; line-height: 1; }
body[data-screen] #view-analytics .p3n-chart-card { padding: 26px 30px; border: 0; border-radius: 32px; background: #fff; box-shadow: var(--wl-shadow-paper); }
body[data-screen] #view-analytics .p3n-trends-card { padding: 24px 30px; border-radius: 34px; background: var(--wl-glass); border: 1px solid var(--wl-glass-line); }
body[data-screen] #view-analytics .p3n-trends-card :is(h2, h3):first-of-type { font-family: var(--wl-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
body[data-screen] #view-analytics .p3n-trends-card tbody tr td { background: rgb(255 255 255 / 86%); }
body[data-screen] #view-analytics .p3n-trends-card tbody tr td:first-child { border-radius: 20px 0 0 20px; }
body[data-screen] #view-analytics .p3n-trends-card tbody tr td:last-child { border-radius: 0 20px 20px 0; }
body[data-screen] #view-analytics .p3n-trends-card table { border-collapse: separate; border-spacing: 0 8px; }
body[data-screen] #view-analytics :is(.p3n-gran, .p3n-seg, [role="tablist"], [role="group"]) { border-radius: 999px; }
body[data-screen] #view-analytics :is(.p3n-gran, .p3n-seg, [role="tablist"], [role="group"]) button { border-radius: 999px; }
body[data-screen] #view-analytics :is(.p3n-gran, .p3n-seg, [role="tablist"], [role="group"]) button:is(.is-active, .active, [aria-pressed="true"], [aria-selected="true"]) { background: var(--wl-grad); color: #fff; box-shadow: none; }

/* =====================================================================
   Thành viên — paper member cards, glass permission matrix
   ===================================================================== */
body[data-screen] #view-members .p3m-page { grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; }
body[data-screen] #view-members .p3m-panel { padding: 0; background: none; border: 0; box-shadow: none; }
body[data-screen] #view-members .p3m-members-row { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
body[data-screen] #view-members .p3m-member-card { padding: 22px; gap: 12px; border: 0; border-radius: 28px; background: #fff; box-shadow: 0 12px 32px rgb(40 70 180 / 8%); }
body[data-screen] #view-members .p3m-member-name { font-size: 15px; font-weight: 700; }
body[data-screen] #view-members .p3m-avatar-inner { width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(140deg, #E1E8FF, #F0EAFF); color: var(--wl-blue-ink); font-weight: 700; }
body[data-screen] #view-members .p3m-stat-v { font-family: var(--wl-display); font-size: 26px; font-weight: 300; }
body[data-screen] #view-members .p3m-matrix-panel { padding: 22px 18px; border-radius: 30px; background: var(--wl-glass); border: 1px solid var(--wl-glass-line); box-shadow: var(--wl-shadow-glass); }
body[data-screen] #view-members .p3m-matrix-title { font-family: var(--wl-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
body[data-screen] #view-members .p3m-mat-row { padding: 12px; margin-bottom: 6px; border-radius: 18px; background: rgb(255 255 255 / 86%); border: 0; }
body[data-screen] #view-members .p3m-hero button, body[data-screen] #view-members #btn-invite-member { border-radius: 999px; }
body[data-screen] #view-members .p3m-panel:is(.p3m-invites-panel) { padding: 22px; border-radius: 30px; background: var(--wl-glass); border: 1px solid var(--wl-glass-line); }


/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .wl-home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wl-ask { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  body[data-screen] .p3a-topbar-title { font-size: 26px; grid-column: 1 / -1; grid-row: 2; }
  #view-home:not([hidden]) { gap: 18px; }
  .wl-home-stats { margin-left: 0; gap: 16px; }
  .wl-home-stats .wl-cta { width: 100%; justify-content: space-between; }
  .wl-home-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wl-ask, .wl-pending { padding: 22px; border-radius: 28px; }
  .wl-fresh { min-height: 300px; }
  .wl-flow-head { padding: 18px; }
  .wl-flow-head h3 { font-size: 22px; }
  .wl-pill-link { margin-left: 0; }
  .wl-flow-rows { padding: 8px 18px 14px; }
  .wl-flow-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; }
  .wl-flow-bar { min-width: 0; }
  #primary-nav.p3a-dock {
    left: 12px; right: 12px; width: auto; padding: 6px; border-radius: 999px;
    background: rgb(255 255 255 / 90%); border: 1px solid var(--wl-glass-line); box-shadow: 0 16px 40px rgb(52 97 245 / 14%);
  }
  #primary-nav .p3a-dock-item.p3a-dock-item--active { background: var(--wl-grad); color: #fff; }
  #primary-nav .p3a-dock-item.p3a-dock-item--active .material-symbols-outlined { color: #fff; }
  .p3a-dock--expanded .p3a-nav-overflow { border-radius: 28px; border: 1px solid var(--wl-glass-line); }
  #view-generator .p3a-action-row { border-radius: 28px; padding: 12px; }
  #view-generator .studio-plan .p3a-keyword-row.is-selected { transform: none; }
  #p3r-suggest-modal.p3r-modal-backdrop { padding: 8px; align-items: flex-end; }
  #p3r-suggest-modal .p3r-modal--diff { width: 100%; height: 88dvh; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  #view-home *, #view-generator .studio-intake, #view-generator .studio-compose > *, #p3r-suggest-modal .p3r-modal,
  #view-generator .p3a-keyword-row { transition: none !important; animation: none !important; }
  #view-generator .studio-plan .p3a-keyword-row.is-selected { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --wl-glass: #fff; --workspace-glass: #fff; }
  #primary-nav.p3a-dock { background: #fff; }
}
/* Review heading: actions sit on their own row so the title gets the full width. */
body[data-screen] #view-review .p3r-preview-head-top { flex-wrap: wrap; align-items: center; gap: 10px; }
body[data-screen] #view-review .p3r-preview-head-top > .p3r-preview-title { order: 2; flex: 1 1 100%; }
body[data-screen] #view-review .p3r-preview-head-top > .p3r-preview-actions { order: 1; margin-left: auto; }
body[data-screen] #view-analytics .p3n-seg { border-radius: 999px; }
body[data-screen] #view-analytics .p3n-seg.p3n-seg--active { background: var(--wl-grad); color: #fff; box-shadow: 0 6px 14px rgb(62 107 255 / 22%); }
body[data-screen] #view-analytics .p3n-seg:not(.p3n-seg--active) { background: transparent; }
body[data-screen] #view-analytics .p3n-segmented { border-radius: 999px; }
@media (max-width: 699px) {
  body[data-screen] #view-generator .studio-inspector { min-width: 0; max-width: 100%; overflow: hidden; }
  body[data-screen] #view-generator .studio-selected-setting .p3a-settings-title { white-space: normal; overflow-wrap: anywhere; font-size: 26px; }
  body[data-screen] #view-generator .studio-setting-topic > .p3a-settings-body > .p3a-chip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-screen] #view-generator .studio-setting-topic .p3a-chip { min-height: 68px; padding: 12px 14px; font-size: 16px; }
  body[data-screen] #view-generator :is(.p3a-thinking-mode-row, .p3a-research-mode-row, .studio-setting-image .p3a-image-mode) { width: 100%; border-radius: 24px; }
  body[data-screen] #view-generator :is(.p3a-thinking-mode-row, .p3a-research-mode-row) .p3a-chip,
  body[data-screen] #view-generator .studio-setting-image .p3a-image-mode__btn { flex: 1 1 auto; padding: 0 12px; font-size: 13px; }
  body[data-screen] #view-generator .wl-batch-schedule { flex-wrap: wrap; }
  body[data-screen] #view-progress .p3b-creation-ring { justify-self: start; width: auto; }
  body[data-screen] #view-progress .p3b-ring-center { align-items: flex-start; text-align: left; }
  body[data-screen] #view-progress .p3b-page-header { justify-content: flex-start; }
  body[data-screen] #view-progress .p3b-current-meta { justify-content: flex-start; }
}

/* =====================================================================
   v3 — canvas parity pass. Shell: logo on the rail, page headers inside
   each view, dock below the logo, running count + notifications at the
   foot of the rail. (Logo artwork stays the brand logo.)
   ===================================================================== */
@media (min-width: 700px) {
  body[data-screen] .p3a-shell { position: relative; padding-top: 26px; }
  body[data-screen] .p3a-topbar {
    position: absolute; top: 26px; left: calc(var(--workspace-rail) + var(--workspace-gutter)); right: var(--workspace-gutter);
    height: 60px; min-height: 60px; margin: 0; padding: 0; z-index: 30; pointer-events: none; transform: none;
  }
  body[data-screen] .p3a-topbar > * { pointer-events: auto; }
  body[data-screen] .p3a-topbar-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .p3a-logo { top: 30px; }
  #btn-new-project { display: none !important; }
  body[data-screen] .p3a-topbar-actions {
    position: fixed; z-index: 50; left: calc(var(--workspace-frame-inset) + (var(--workspace-rail) + var(--workspace-gutter) + 1px - 66px) / 2);
    bottom: 52px; top: auto; right: auto; width: 66px; margin: 0; padding: 8px; flex-direction: column; align-items: center; gap: 6px;
    border-radius: 999px; background: rgb(255 255 255 / 55%); border: 1px solid var(--wl-glass-line);
  }
  body[data-screen] .p3a-topbar-actions .p3a-queue-pill {
    position: relative; width: 50px; height: 50px; min-height: 50px; max-width: none; padding: 0; margin: 0; border: 0; border-radius: 50%;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    background: #fff; color: var(--wl-muted); font-size: 0; line-height: 1.1;
  }
  body[data-screen] .p3a-topbar-actions .p3a-queue-pill[data-running="true"] { background: linear-gradient(140deg, #2B57F2, #8EA6FF); color: #fff; }
  body[data-screen] .p3a-topbar-actions .p3a-queue-pill::before { content: attr(data-count); font-family: var(--wl-display); font-size: 18px; font-weight: 700; }
  body[data-screen] .p3a-topbar-actions .p3a-queue-pill:not([data-count])::before { content: '0'; }
  body[data-screen] .p3a-topbar-actions .p3a-queue-pill::after { content: 'chạy'; font-size: 10px; font-weight: 600; }
  body[data-screen] .p3a-topbar-actions .p3a-queue-pill > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body[data-screen] .p3a-topbar-actions .p3a-icon-btn {
    width: 42px; min-width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: linear-gradient(140deg, #E1E8FF, #F0EAFF); color: var(--wl-blue-ink); box-shadow: none;
  }
  body[data-screen] .p3a-topbar-actions .p3a-icon-btn .material-symbols-outlined { font-size: 20px; }
  /* Dock sits midway between the logo (ends at 104px) and the queue/bell cluster at the rail foot. */
  #primary-nav.p3a-dock { --wl-rail-foot: 168px; top: calc((104px + 100dvh - var(--wl-rail-foot)) / 2); transform: translateY(-50%); }
  #primary-nav > .p3a-dock-back { display: none; }
  body[data-screen] .p3a-stage > [data-view]:not([hidden]) { min-height: calc(100dvh - 120px); }
}
@media (min-width: 700px) and (max-height: 860px) {
  #primary-nav.p3a-dock { --wl-rail-foot: 140px; gap: 4px; padding: 7px; width: 60px; left: calc(var(--workspace-frame-inset) + (var(--workspace-rail) + var(--workspace-gutter) + 1px - 60px) / 2); }
  #primary-nav .p3a-dock-item, #primary-nav .p3a-dock-item.p3a-dock-item--active { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
  body[data-screen] .p3a-topbar-actions { bottom: 40px; padding: 6px; gap: 4px; }
  body[data-screen] .p3a-topbar-actions .p3a-queue-pill { width: 44px; height: 44px; min-height: 44px; }
  body[data-screen] .p3a-topbar-actions .p3a-icon-btn { width: 38px; min-width: 38px; height: 38px; }
}

/* ---------- Page headers ---------- */
.wl-page-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-height: 60px; margin: 0 0 26px; }
.wl-page-title { margin: 0; font-family: var(--wl-display); font-size: clamp(36px, 3.3vw, 46px); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--wl-ink); }
.wl-page-sub { display: block; font-size: 14px; color: var(--wl-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.wl-head-stats { margin-left: auto; display: flex; align-items: flex-end; gap: 32px; }
.wl-head-stats .wl-stat-num { font-size: 40px; }
.wl-pill {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--wl-glass-line);
  background: rgb(255 255 255 / 86%); color: var(--wl-ink); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.wl-pill.is-on { background: var(--wl-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgb(62 107 255 / 28%); }
.wl-ghost-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--wl-line);
  background: #fff; color: var(--wl-ink); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.wl-link-btn { margin-left: auto; border: 0; background: transparent; color: var(--wl-link); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 4px; min-height: 44px; }

/* ---------- Xưởng viết ---------- */
body[data-screen] #view-generator .wl-gen-head .studio-intake-modes {
  position: static; display: flex; gap: 4px; width: auto; margin: 0; padding: 5px; border-radius: 999px;
  background: rgb(255 255 255 / 70%); border: 1px solid var(--wl-glass-line);
}
body[data-screen] #view-generator .wl-gen-head .studio-intake-modes .p3a-chip { height: 42px; min-height: 42px; padding: 0 22px; font-size: 14px; }
body[data-screen] #view-generator .studio-intake { padding-top: 16px; }
body[data-screen] #view-generator .p3a-keyword-actions { flex-wrap: nowrap; }
/* Tickets */
body[data-screen] #view-generator .studio-plan .studio-card-heading { display: none; }
body[data-screen] #view-generator .studio-plan .p3a-keyword-row { gap: 12px; padding: 16px 14px 16px 18px; }
body[data-screen] #view-generator .wl-ticket-check { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--wl-blue); }
body[data-screen] #view-generator .p3a-keyword-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-screen] #view-generator .p3a-keyword-config {
  display: flex; flex-wrap: wrap; gap: 6px; justify-self: stretch; padding: 0; border-radius: 0; background: none; font-size: inherit;
}
body[data-screen] #view-generator .p3a-keyword-config .wl-tag { min-height: 0; padding: 4px 10px; font-size: 12px; }
body[data-screen] #view-generator .p3a-keyword-config .wl-tag--sub { background: #F1F4FC; color: #3C4460; }
body[data-screen] #view-generator .p3a-keyword-row.is-selected .p3a-keyword-config .wl-tag--sub { background: rgb(255 255 255 / 20%); color: #fff; }
body[data-screen] #view-generator .p3a-keyword-row.is-selected .p3a-keyword-config .wl-tag--type { background: #fff; }
body[data-screen] #view-generator .p3a-keyword-config { --wl-tile-bg: #EEF0F6; --wl-tile-fg: #3C4460; }
body[data-screen] #view-generator .p3a-keyword-config[data-type="qa"] { --wl-tile-bg: #DDF5EC; --wl-tile-fg: #0F5A40; }
body[data-screen] #view-generator .p3a-keyword-config[data-type="howto"] { --wl-tile-bg: #DFF1FF; --wl-tile-fg: #0B4A75; }
body[data-screen] #view-generator .p3a-keyword-config[data-type="review"] { --wl-tile-bg: #FCE4F1; --wl-tile-fg: #8A1F57; }
body[data-screen] #view-generator .p3a-keyword-config[data-type="hands_on"] { --wl-tile-bg: #FFE9DF; --wl-tile-fg: #7A3410; }
body[data-screen] #view-generator .p3a-keyword-config[data-type="comparison"] { --wl-tile-bg: #FFF0D6; --wl-tile-fg: #7A4A00; }
body[data-screen] #view-generator .p3a-keyword-config[data-type="toplist"] { --wl-tile-bg: #EEE8FF; --wl-tile-fg: #4B2A9A; }
body[data-screen] #view-generator .p3a-keyword-config[data-type="stt_quote"] { --wl-tile-bg: #EDF7D4; --wl-tile-fg: #3E5208; }
body[data-screen] #view-generator .p3a-keyword-config[data-type="description"] { --wl-tile-bg: #E6EDFF; --wl-tile-fg: #2448D8; }
body[data-screen] #view-generator .p3a-keyword-config .wl-tag--type { background: var(--wl-tile-bg); color: var(--wl-tile-fg); }
body[data-screen] #view-generator .p3a-keyword-row.is-selected .p3a-keyword-config .wl-tag--type { color: var(--wl-tile-fg); }
body[data-screen] #view-generator .wl-ticket-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--wl-blue); box-shadow: 0 0 0 4px rgb(62 107 255 / 18%); }
body[data-screen] #view-generator .wl-ticket-dot[hidden] { display: none; }
body[data-screen] #view-generator .p3a-keyword-row.is-selected .wl-ticket-dot { background: #fff; box-shadow: none; }
body[data-screen] #view-generator .wl-ticket-bulk {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 12px 12px 20px; border-radius: 26px;
  background: linear-gradient(90deg, #2B57F2, #7C97FF); color: #fff; box-shadow: 0 14px 30px rgb(62 107 255 / 28%);
}
body[data-screen] #view-generator .wl-ticket-bulk[hidden] { display: none; }
body[data-screen] #view-generator .wl-ticket-bulk > span { flex: 1; font-size: 14px; font-weight: 600; }
body[data-screen] #view-generator .wl-ticket-bulk button { height: 42px; padding: 0 18px; border-radius: 999px; border: 0; background: #fff; color: var(--wl-ink); font-size: 13px; font-weight: 600; cursor: pointer; }
body[data-screen] #view-generator .wl-ticket-status { margin-top: 12px; padding: 12px 16px; border-radius: 20px; background: #fff; font-size: 13px; font-weight: 500; }
body[data-screen] #view-generator .wl-ticket-status[hidden] { display: none; }
/* Deck header */
body[data-screen] #view-generator .studio-selected-setting {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "label state . reset" "title title title reset";
  align-items: center; gap: 8px; row-gap: 8px;
}
body[data-screen] #view-generator .studio-selected-setting-label { grid-area: label; }
body[data-screen] #view-generator #selected-keyword-state { grid-area: state; justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #EEF0F6; color: #3C4460; }
body[data-screen] #view-generator #selected-keyword-state.is-custom { background: #E6EDFF; color: #2448D8; }
body[data-screen] #view-generator #selected-keyword-state[hidden], body[data-screen] #view-generator #btn-keyword-reset[hidden] { display: none; }
body[data-screen] #view-generator #btn-keyword-reset { grid-area: reset; align-self: start; }
body[data-screen] #view-generator .studio-selected-setting .p3a-settings-text { grid-area: title; min-width: 0; }
/* Settings grid like the canvas: depth full width, search + images side by side */
body[data-screen] #view-generator #keyword-settings-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
body[data-screen] #view-generator #keyword-settings-workspace > :is(.studio-selected-setting, .studio-setting-topic, .studio-setting-writer, .studio-setting-more) { grid-column: 1 / -1; }
body[data-screen] #view-generator :is(.p3a-thinking-mode-row, .p3a-research-mode-row, .studio-setting-image .p3a-image-mode) { display: flex; width: 100%; }
body[data-screen] #view-generator :is(.p3a-thinking-mode-row, .p3a-research-mode-row) .p3a-chip,
body[data-screen] #view-generator .studio-setting-image .p3a-image-mode__btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
/* Sources: collapsed by default, "+" toggle */
body[data-screen] #view-generator .studio-setting-more > summary.studio-source-heading {
  display: flex; align-items: center; gap: 12px; min-height: 66px; margin: 0; padding: 16px 22px; pointer-events: auto; cursor: pointer; list-style: none;
}
body[data-screen] #view-generator .studio-setting-more > summary::-webkit-details-marker { display: none; }
body[data-screen] #view-generator .studio-setting-more > summary > span:first-child { font-size: 15px; font-weight: 700; color: var(--wl-ink); }
body[data-screen] #view-generator #wl-adv-summary { font-size: 13px; font-weight: 400; }
body[data-screen] #view-generator .wl-adv-icon { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--wl-link); }
body[data-screen] #view-generator .wl-adv-icon::before { content: '+'; font-size: 18px; line-height: 1; }
body[data-screen] #view-generator .studio-setting-more[open] .wl-adv-icon::before { content: '–'; }
/* Action pill */
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-toggle { position: relative; gap: 4px; padding: 5px; background: #F1F4FC; height: 52px; min-height: 52px; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-toggle > :is(input, .material-symbols-outlined, strong) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-toggle > span:has(> strong) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-screen] #view-generator :is(.wl-seg-now, .wl-seg-later) { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #2B3456; }
body[data-screen] #view-generator .wl-batch-schedule:not(.is-enabled) .wl-seg-now,
body[data-screen] #view-generator .wl-batch-schedule.is-enabled .wl-seg-later { background: var(--wl-grad); color: #fff; }
body[data-screen] #view-generator .wl-batch-schedule.is-enabled .p3a-schedule-toggle { background: #F1F4FC; color: inherit; }
body[data-screen] #view-generator .wl-batch-schedule .p3a-schedule-meta { display: none; }
body[data-screen] #view-generator .wl-batch-schedule { flex: 0 0 auto; }
body[data-screen] #view-generator .wl-run-summary { flex: 1; min-width: 160px; font-size: 13px; color: var(--wl-muted); }
body[data-screen] #view-generator .p3a-step-flow:has(.wl-batch-schedule.is-enabled) .wl-run-now,
body[data-screen] #view-generator .p3a-step-flow:not(:has(.wl-batch-schedule.is-enabled)) .wl-run-later { display: none; }
body[data-screen] #view-generator #btn-submit { gap: 14px; padding: 0 8px 0 24px; }
body[data-screen] #view-generator #btn-submit-icon {
  width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--wl-link); display: grid; place-items: center; font-size: 20px;
}
body[data-screen] #view-generator .p3a-action-row { width: min(100%, 820px); padding: 8px 8px 8px 10px; }

/* ---------- Bàn viết: flow strip with stage columns ---------- */
.wl-flow-body { position: relative; display: flex; gap: 20px; background: rgb(255 255 255 / 86%); padding: 18px 30px 22px; }
.wl-flow-body .wl-flow-rows { flex: 1; min-width: 0; padding: 0; background: none; }
.wl-flow-grid { display: grid; grid-template-columns: minmax(150px, 240px) repeat(5, minmax(0, 1fr)); align-items: center; column-gap: 0; }
.wl-flow-headrow { font-size: 13px; font-weight: 600; padding-bottom: 10px; }
.wl-flow-row { min-height: 56px; border-top: 1px solid var(--wl-line-soft); }
.wl-flow-row .wl-flow-bar { grid-column: 2 / span 5; width: auto !important; min-width: 0; }
.wl-flow-row .wl-flow-bar.wl-span-1 { grid-column: 2 / span 1; }
.wl-flow-row .wl-flow-bar.wl-span-2 { grid-column: 2 / span 2; }
.wl-flow-row .wl-flow-bar.wl-span-3 { grid-column: 2 / span 3; }
.wl-flow-row .wl-flow-bar.wl-span-4 { grid-column: 2 / span 4; }
.wl-flow-bar.is-early { background: #DFF1FF; color: #0B4A75; }
.wl-flow-bar.is-waiting { background: #EEF0F6; color: #3C4460; }
.wl-flow-card { flex: 0 0 240px; align-self: flex-start; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 22px; margin-top: -12px; }
.wl-flow-card[hidden] { display: none; }
.wl-flow-card-kw { font-size: 14px; font-weight: 700; }
.wl-flow-card-foot { font-size: 12px; border-top: 1px solid var(--wl-line-soft); padding-top: 8px; }
.wl-flow-card-foot strong { color: var(--wl-ink); }
#view-home .wl-flow-head { padding: 22px 30px; }

/* ---------- Tiến trình: one paper card, pills in the header ---------- */
body[data-screen] #view-progress .p3b-page-header { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-height: 60px; margin: 0 0 26px; }
body[data-screen] #view-progress .p3b-page-header > div:first-child { display: block; }
body[data-screen] #view-progress .p3b-page-eyebrow, body[data-screen] #view-progress .p3b-batch-overview { display: none; }
.wl-progress-pills { display: flex; gap: 8px; flex-wrap: wrap; }
body[data-screen] #view-progress .wl-progress-add { margin-left: auto; }
body[data-screen] #view-progress .p3b-generation-main { gap: 24px; }
body[data-screen] #view-progress .p3b-production-card {
  grid-template-columns: minmax(0, 1fr) auto; padding: 36px 40px 0; border-radius: 36px 36px 0 0; box-shadow: none;
  background: linear-gradient(225deg, rgb(124 151 255 / 14%) 0%, rgb(124 151 255 / 0%) 45%), #fff;
}
body[data-screen] #view-progress .p3b-production-card + .p3b-timeline-card {
  margin-top: -24px; padding: 28px 40px 36px; border: 0; border-radius: 0 0 36px 36px; background: #fff; box-shadow: var(--wl-shadow-paper);
}
body[data-screen] #view-progress .p3b-generation-main > .p3b-production-card { box-shadow: 0 -10px 40px rgb(40 70 180 / 6%); }
body[data-screen] #view-progress .p3b-production-head { gap: 12px; }
body[data-screen] #view-progress .p3b-current-meta { display: none; }
body[data-screen] #view-progress .p3b-production-head { display: flex; flex-direction: column; }
body[data-screen] #view-progress .p3b-current-status { order: -1; align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--wl-grad); }
body[data-screen] #view-progress .p3b-current-status .p3b-status-dot { display: none; }
body[data-screen] #view-progress #progress-work-title { font-size: 12px; font-weight: 600; color: #fff; }
body[data-screen] #view-progress .p3b-production-phase { grid-column: 1; grid-row: 2; padding: 0; background: none; border-radius: 0; }
body[data-screen] #view-progress .p3b-production-phase small { display: none; }
body[data-screen] #view-progress #progress-stage-label { font-size: 16px; font-weight: 400; color: #2B3456; line-height: 1.5; }
body[data-screen] #view-progress .p3b-production-footer { grid-column: 1 / -1; grid-row: 3; padding: 0; border: 0; justify-content: flex-start; }
body[data-screen] #view-progress .p3b-current-desc { flex-basis: auto; order: 0; text-align: left; font-size: 13px; }
body[data-screen] #view-progress .p3b-timeline-head { display: none; }
body[data-screen] #view-progress .p3b-generation-bar { order: 1; }
body[data-screen] #view-progress .p3b-creation-flow { order: 2; }
body[data-screen] #view-progress .p3b-flow-label small { display: none; }
body[data-screen] #view-progress .p3b-flow-label { font-size: 15px; color: #8A93AE; }
body[data-screen] #view-progress [data-step-state="pending"] .p3b-flow-label::before { content: '○ '; }
body[data-screen] #view-progress [data-step-state="active"] .p3b-flow-label::before { content: '● '; }
body[data-screen] #view-progress [data-step-state="done"] .p3b-flow-label { color: var(--wl-ink); }
body[data-screen] #view-progress [data-flow-caption] { display: none; }
body[data-screen] #view-progress [data-flow-step]::after { font-size: 12px; color: var(--wl-muted); }
body[data-screen] #view-progress [data-flow-step="0"]::after { content: 'Hiểu ý định, nghiên cứu nguồn'; }
body[data-screen] #view-progress [data-flow-step="1"]::after { content: 'Dàn ý, viết từng mục'; }
body[data-screen] #view-progress [data-flow-step="2"]::after { content: 'Kiểm chứng, gắn link, ảnh'; }
body[data-screen] #view-progress .p3b-connection-row { order: 3; align-items: flex-end; gap: 40px; margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--wl-line-soft); }
body[data-screen] #view-progress .p3b-connection-row .p3b-production-clock, body[data-screen] #view-progress .p3b-connection-row .p3b-production-start { grid-column: auto; grid-row: auto; padding: 0; border: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
body[data-screen] #view-progress .p3b-connection-row dt { font-size: 12px; color: var(--wl-muted); font-weight: 400; }
body[data-screen] #view-progress .p3b-connection-row dt svg { display: none; }
body[data-screen] #view-progress .p3b-connection-row dd { margin: 0; font-family: var(--wl-display); font-size: 34px; font-weight: 300; letter-spacing: -.03em; color: var(--wl-ink); }
body[data-screen] #view-progress #progress-connection { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-screen] #view-progress .p3b-connection-row #btn-pause { margin-left: auto; height: 48px; padding: 0 20px; font-size: 14px; }
body[data-screen] #view-progress #btn-refresh-progress { height: 48px; }
/* Queue cards */
body[data-screen] #view-progress .p3b-queue-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
body[data-screen] #view-progress .p3b-queue-head > div { display: flex; align-items: baseline; gap: 10px; }
body[data-screen] #view-progress .p3b-queue-head p { display: none; }
body[data-screen] #view-progress .p3b-queue-count { margin-left: 0; padding: 0; background: none; color: var(--wl-muted); font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 0; }
body[data-screen] #view-progress .p3b-queue-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "type . pct" "body body body"; gap: 10px; padding: 16px 18px; border-radius: 26px;
}
body[data-screen] #view-progress .p3b-queue-item__rank { display: none; }
body[data-screen] #view-progress .p3b-queue-item__type { grid-area: type; justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--wl-tile-bg, #EEF0F6); color: var(--wl-tile-fg, #3C4460); }
body[data-screen] #view-progress .p3b-queue-item.is-selected .p3b-queue-item__type { background: #fff; }
body[data-screen] #view-progress .p3b-queue-item__percent { grid-area: pct; margin: 0; padding: 4px 10px; border-radius: 999px; background: #EEF3FF; color: var(--wl-blue-ink); font-family: var(--wl-body); font-size: 12px; font-weight: 700; }
body[data-screen] #view-progress .p3b-queue-item.is-selected .p3b-queue-item__percent { background: rgb(255 255 255 / 22%); color: #fff; }
body[data-screen] #view-progress .p3b-queue-item__body { grid-area: body; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body[data-screen] #view-progress .p3b-queue-item__bar { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 999px; background: #EEF2FC; overflow: hidden; }
body[data-screen] #view-progress .p3b-queue-item__bar::-webkit-progress-bar { background: #EEF2FC; border-radius: 999px; }
body[data-screen] #view-progress .p3b-queue-item__bar::-webkit-progress-value { background: var(--wl-grad-bar); border-radius: 999px; }
body[data-screen] #view-progress .p3b-queue-item__bar::-moz-progress-bar { background: var(--wl-grad-bar); border-radius: 999px; }
body[data-screen] #view-progress .p3b-queue-item.is-selected .p3b-queue-item__bar { background: rgb(255 255 255 / 30%); }
body[data-screen] #view-progress .p3b-queue-item.is-selected .p3b-queue-item__bar::-webkit-progress-bar { background: rgb(255 255 255 / 30%); }
body[data-screen] #view-progress .p3b-queue-item.is-selected .p3b-queue-item__bar::-webkit-progress-value { background: #fff; }
body[data-screen] #view-progress .p3b-queue-item.is-selected .p3b-queue-item__bar::-moz-progress-bar { background: #fff; }
#view-progress [data-type="general"] { --wl-tile-bg: #EEF0F6; --wl-tile-fg: #3C4460; }
#view-progress [data-type="qa"] { --wl-tile-bg: #DDF5EC; --wl-tile-fg: #0F5A40; }
#view-progress [data-type="howto"] { --wl-tile-bg: #DFF1FF; --wl-tile-fg: #0B4A75; }
#view-progress [data-type="review"] { --wl-tile-bg: #FCE4F1; --wl-tile-fg: #8A1F57; }
#view-progress [data-type="hands_on"] { --wl-tile-bg: #FFE9DF; --wl-tile-fg: #7A3410; }
#view-progress [data-type="comparison"] { --wl-tile-bg: #FFF0D6; --wl-tile-fg: #7A4A00; }
#view-progress [data-type="toplist"] { --wl-tile-bg: #EEE8FF; --wl-tile-fg: #4B2A9A; }
#view-progress [data-type="stt_quote"] { --wl-tile-bg: #EDF7D4; --wl-tile-fg: #3E5208; }
#view-progress [data-type="description"] { --wl-tile-bg: #E6EDFF; --wl-tile-fg: #2448D8; }

/* ---------- Kho nội dung header ---------- */
body[data-screen] #view-library .studio-page-heading { align-items: flex-end; min-height: 60px; margin-bottom: 24px; flex-wrap: wrap; }
body[data-screen] #view-library .studio-library__title { display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 22px; row-gap: 6px; margin-right: 0; }
body[data-screen] #view-library .studio-library__title .wl-page-sub { grid-column: 1 / -1; }
body[data-screen] #view-library .studio-library__title h1 { display: block; margin: 0; font-family: var(--wl-display); font-size: clamp(40px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--wl-ink); }
body[data-screen] #view-library .studio-library__search { margin-left: auto; }
body[data-screen] #view-library .studio-page-heading > .p3e-filter-btn { height: 42px; }

/* ---------- Kiểm tra, Phân tích, Thành viên, Cài đặt headers ---------- */
body[data-screen] #view-content-check .p3c-toolbar { min-height: 60px; margin: 0 0 22px; align-items: flex-end; }
body[data-screen] #view-content-check .p3c-toolbar > div:first-child { display: flex; flex-direction: column; gap: 6px; }
body[data-screen] #view-content-check .p3c-toolbar h1 { margin: 0; font-family: var(--wl-display); font-size: clamp(36px, 3.2vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
body[data-screen] #view-analytics .wl-analytics-head { display: flex; align-items: flex-end; justify-content: space-between; min-height: 60px; margin: 0 0 24px; }
body[data-screen] #view-analytics .wl-analytics-head h1 { display: block; margin: 0; font-family: var(--wl-display); font-size: clamp(40px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
body[data-screen] #view-analytics .wl-head-title { display: flex; flex-direction: column; gap: 6px; }
.wl-head-seg { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / 85%); }
.wl-head-seg button { height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 600; color: var(--wl-ink); cursor: pointer; }
.wl-head-seg button[aria-pressed="true"] { background: var(--wl-grad); color: #fff; box-shadow: 0 8px 18px rgb(62 107 255 / 28%); }
body[data-screen] #view-analytics .p3n-chart-card .p3n-segmented { display: none; }
body[data-screen] #view-members .p3m-hero { display: flex; align-items: flex-end; min-height: 60px; margin: 0 0 6px; padding: 0; }
body[data-screen] #view-members .p3m-hero-text { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 20px; }
body[data-screen] #view-members .p3m-hero-text .wl-page-sub { flex-basis: 100%; }
body[data-screen] #view-members .p3m-hero-title { display: block; margin: 0; font-family: var(--wl-display); font-size: clamp(36px, 3.3vw, 46px); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
body[data-screen] #view-members .p3m-hero-title svg { display: none; }
.wl-member-total { font-size: 38px; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--wl-blue-ink); }
.wl-member-total small { font-family: var(--wl-body); font-size: 15px; font-weight: 500; color: var(--wl-muted); letter-spacing: 0; }
body[data-screen] #view-members #p3m-btn-invite { margin-left: auto; height: 56px; padding: 0 24px; font-size: 15px; font-weight: 600; border-radius: 999px; }

/* ---------- Duyệt bài: tabs + tools on top of the paper, approve bar ---------- */
body[data-screen] #view-review > .studio-page-heading { display: none; }
body[data-screen] #view-review .wl-rail-sub { display: block; margin: -4px 6px 4px; font-size: 13px; }
body[data-screen] #view-review .studio-review__reader { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
body[data-screen] #view-review .studio-review__reader > .p3r-preview-head,
body[data-screen] #view-review .studio-review__reader .p3r-preview-head-top { display: contents; }
body[data-screen] #view-review .studio-review__reader > .p3r-tabs { grid-column: 1; grid-row: 1; margin: 18px 0 14px 26px; }
body[data-screen] #view-review .p3r-preview-actions { grid-column: 2; grid-row: 1; margin: 18px 26px 14px 0; display: flex; gap: 6px; }
body[data-screen] #view-review .p3r-preview-actions :is(.p3r-copy-btn, .p3r-fullscreen-btn) > span:not(.material-symbols-outlined):not([data-icon]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-screen] #view-review .p3r-preview-actions :is(.p3r-copy-btn, .p3r-fullscreen-btn) { width: 38px; padding: 0; justify-content: center; }
body[data-screen] #view-review .p3r-preview-actions [data-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-screen] #view-review .studio-review__reader > .p3r-preview-head::after { content: none; }
body[data-screen] #view-review .p3r-preview-meta { grid-column: 1 / -1; grid-row: 3; margin: 0 auto; width: min(760px, calc(100% - 60px)); border-top: 1px solid var(--wl-line-soft); padding-top: 24px; }
body[data-screen] #view-review .p3r-preview-title { grid-column: 1 / -1; grid-row: 4; width: min(760px, calc(100% - 60px)); margin: 14px auto 20px; font-size: 30px; }
body[data-screen] #view-review .studio-review__reader > .p3r-article { grid-column: 1 / -1; grid-row: 5; padding-top: 0; }
body[data-screen] #view-review .studio-review__reader > .p3r-preview-foot { grid-column: 1 / -1; grid-row: 6; }
/* Link progress (views/review.js beginLinkProgress): right under the toolbar,
   pinned to the top of the screen while the editor scrolls the draft. */
body[data-screen] #view-review .studio-review__reader > .p3r-link-progress {
  grid-column: 1 / -1; grid-row: 2; align-self: start; justify-self: center; position: sticky; top: 14px; z-index: 6;
  width: min(760px, calc(100% - 60px)); margin: 0 0 16px; padding: 12px 18px 14px; border: 1px solid var(--wl-glass-line); border-radius: 20px;
  background: rgb(255 255 255 / 97%); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgb(40 70 180 / 14%); color: var(--wl-ink); font-size: 13.5px; font-weight: 500;
}
#view-review .p3r-link-progress strong { font-weight: 700; color: var(--wl-link); }
#view-review .p3r-link-progress progress {
  appearance: none; height: 8px; margin-top: 10px; border: 0; border-radius: 999px; overflow: hidden; background: #E8EEFF;
}
#view-review .p3r-link-progress progress::-webkit-progress-bar { background: #E8EEFF; border-radius: 999px; }
#view-review .p3r-link-progress progress::-webkit-progress-value { background: var(--wl-grad); border-radius: 999px; transition: width 400ms var(--wl-ease); }
#view-review .p3r-link-progress progress::-moz-progress-bar { background: var(--wl-grad); border-radius: 999px; }
#view-review .p3r-link-progress progress:indeterminate {
  background: linear-gradient(90deg, #E8EEFF 0 30%, #7C97FF 45%, #3E6BFF 55%, #E8EEFF 70% 100%) 0 0 / 220% 100%; animation: wl-link-sweep 1.4s linear infinite;
}
@keyframes wl-link-sweep { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { #view-review .p3r-link-progress progress:indeterminate { animation: none; } }
/* ≤900px the shell clips html overflow, so <body> scrolls and sticky never
   engages: float the panel at the top of the screen (toasts sit at the bottom). */
@media (max-width: 900px) {
  body[data-screen] #view-review .studio-review__reader > .p3r-link-progress {
    position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
    width: min(560px, calc(100% - 32px)); margin: 0; z-index: 40;
  }
}
#view-review .p3r-link-progress details { margin-top: 10px; font-size: 13px; color: var(--wl-muted); }
#view-review .p3r-link-progress details summary { cursor: pointer; font-weight: 600; color: var(--wl-ink); }
#view-review .p3r-link-progress details ul { margin: 6px 0 0; padding-left: 18px; }
body[data-screen] #view-review .wl-review-actions {
  grid-column: 1 / -1; grid-row: 7; justify-self: center; position: sticky; bottom: 16px; z-index: 5; display: flex; gap: 10px; margin: 0 0 18px;
  padding: 8px; border-radius: 999px; background: rgb(255 255 255 / 94%); border: 1px solid var(--wl-glass-line); box-shadow: 0 16px 40px rgb(40 70 180 / 12%);
}
body[data-screen] #view-review .wl-review-approve {
  display: inline-flex; align-items: center; gap: 14px; height: 50px; padding: 0 6px 0 22px; border: 0; border-radius: 999px;
  background: var(--wl-grad) !important; color: #fff !important; font-size: 14px; font-weight: 600; box-shadow: var(--wl-shadow-cta);
}
body[data-screen] #view-review .wl-review-actions .wl-ghost-btn { height: 50px; }
body[data-screen] #view-review .studio-review__reader .p3r-tabs { border: 0; background: transparent; padding: 0; gap: 8px; width: auto; }
body[data-screen] #view-review .studio-review__reader .p3r-tab { height: 38px; min-height: 38px; padding: 0 16px; border-radius: 999px; background: #F4F7FF; }
body[data-screen] #view-review .studio-review__reader .p3r-tab:is(.p3r-tab--active, [aria-selected="true"]) { background: var(--wl-grad); color: #fff; }
@media (max-width: 699px) {
  .wl-page-head { gap: 12px; margin-bottom: 16px; min-height: 0; }
  .wl-head-stats { margin-left: 0; gap: 20px; }
  .wl-head-stats .wl-stat-num { font-size: 30px; }
  .wl-flow-body { flex-direction: column; padding: 14px 18px; }
  .wl-flow-card { flex-basis: auto; margin: 0; }
  .wl-flow-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-flow-headrow { display: none; }
  .wl-flow-row .wl-flow-bar[class*="wl-span-"] { grid-column: 1; }
  body[data-screen] #view-progress .p3b-production-card { padding: 24px 22px 0; }
  body[data-screen] #view-progress .p3b-production-card + .p3b-timeline-card { padding: 22px; }
  body[data-screen] #view-progress .p3b-connection-row { flex-wrap: wrap; gap: 18px; }
  body[data-screen] #view-generator #keyword-settings-workspace { grid-template-columns: minmax(0, 1fr); }
  body[data-screen] #view-generator #keyword-settings-workspace > * { grid-column: 1; }
  body[data-screen] #view-review .wl-review-actions { flex-wrap: wrap; justify-content: center; border-radius: 28px; }
}
@media (max-width: 699px) {
  body[data-screen]:not([data-screen="review"]):not([data-screen="settings"]) .p3a-topbar-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* v3 fixes after first side-by-side */
body[data-screen] #view-generator .p3a-keyword-row.is-selected .p3a-keyword-config { background: none; padding: 0; opacity: 1; }
body[data-screen] #view-generator .wl-ticket-check { appearance: auto; -webkit-appearance: checkbox; border-radius: 4px; }
@media (min-width: 1100px) {
  body[data-screen] #view-generator .studio-compose:not(.is-brief-mode) { height: calc(100dvh - 268px); min-height: 520px; grid-template-rows: auto minmax(0, 1fr); }
  body[data-screen] #view-generator .studio-compose:not(.is-brief-mode) .studio-inspector { align-self: stretch; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  body[data-screen] #view-generator .studio-compose:not(.is-brief-mode) .studio-plan { align-self: stretch; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  body[data-screen] #view-generator .p3a-action-row { position: relative; bottom: auto; }
}
body[data-screen] #view-progress .p3b-production-card { row-gap: 12px; box-shadow: 0 24px 60px rgb(40 70 180 / 12%); clip-path: inset(-80px -80px 0 -80px); }
body[data-screen] #view-progress .p3b-production-card + .p3b-timeline-card { clip-path: inset(0 -80px -80px -80px); }
body[data-screen] #view-progress .p3b-connection-row dd, body[data-screen] #view-progress #stat-elapsed { font-weight: 300 !important; font-family: var(--wl-display) !important; font-size: 34px !important; }
body[data-screen] #view-progress #progress-current:is([data-state="running"], [data-state="waiting"]) .p3b-current-desc { display: none; }
body[data-screen] #view-progress .p3b-queue-head { justify-content: flex-start; }
body[data-screen] #view-progress .p3b-queue-footer { display: none; }
/* Library: collections + type + filters + view toggle on one row, like the canvas */
body[data-screen] #view-library .studio-library__workspace { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 10px; }
body[data-screen] #view-library .studio-library__collection { display: contents; }
body[data-screen] #view-library .studio-library__workspace > .studio-library__collections { grid-column: 1; grid-row: 1; position: relative; padding-right: 12px; }
body[data-screen] #view-library .studio-library__workspace > .studio-library__collections::after { content: ''; position: absolute; right: 0; top: 8px; bottom: 8px; width: 1px; background: rgb(14 21 48 / 12%); }
body[data-screen] #view-library .studio-library__collection-head { grid-column: 2; grid-row: 1; flex-wrap: nowrap; margin: 0; }
body[data-screen] #view-library .studio-library__filters { flex: 1 1 auto; order: 2; flex-wrap: nowrap; }
body[data-screen] #view-library .studio-library__view-options { order: 3; }
body[data-screen] #view-library .studio-library__scroll { grid-column: 1 / -1; grid-row: 2; margin-top: 22px; }
body[data-screen] #view-library .studio-library__footer { grid-column: 1 / -1; grid-row: 3; }
body[data-screen] #view-library .studio-library__workspace > .studio-library__detail-backdrop { grid-column: 1 / -1; }
body[data-screen] #view-library .studio-library__filter-spacer { display: none; }
@media (max-width: 1199px) {
  body[data-screen] #view-library .studio-library__workspace { grid-template-columns: minmax(0, 1fr); }
  body[data-screen] #view-library .studio-library__collection-head { grid-column: 1; grid-row: 2; flex-wrap: wrap; margin-top: 12px; }
  body[data-screen] #view-library .studio-library__scroll { grid-row: 3; }
  body[data-screen] #view-library .studio-library__footer { grid-row: 4; }
  body[data-screen] #view-library .studio-library__workspace > .studio-library__collections::after { display: none; }
}
/* Review: canvas column widths, rail title over its count */
@media (min-width: 1280px) {
  body[data-screen] #view-review:not([hidden]) { grid-template-columns: 224px minmax(0, 1fr); gap: 0 22px; }
  body[data-screen] #view-review .studio-review__workspace { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
}
body[data-screen] #view-review .studio-review__picker-head { flex-wrap: wrap; gap: 4px 14px; }
body[data-screen] #view-review .studio-review__picker-head h2 { flex: 1 1 100%; }
body[data-screen] #view-review .wl-rail-sub { flex: 1 1 100%; margin: 0 6px 4px; }
body[data-screen] #view-review .studio-review__reader .p3r-tab { padding: 0 14px; }
body[data-screen] #view-review .p3r-preview-actions { gap: 4px; }
/* Check: subtitle above the title */
body[data-screen] #view-content-check .p3c-toolbar .wl-page-sub { display: block; font-size: 14px; letter-spacing: 0; font-weight: 400; color: var(--wl-muted); }
/* Analytics: five KPIs on one row */
@media (min-width: 1100px) { body[data-screen] #view-analytics .p3n-kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } }
body[data-screen] #view-review .studio-review__reader { overflow: clip; }
body[data-screen] #view-review .p3r-seo-disclosure > summary { width: 38px; padding: 0; justify-content: center; }
body[data-screen] #view-review .p3r-seo-disclosure > summary > span:not(.material-symbols-outlined) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-screen] #view-review .studio-review__reader .p3r-tab { padding: 0 12px; font-size: 12.5px; }
body[data-screen] #view-progress #progress-current { filter: drop-shadow(0 22px 40px rgb(40 70 180 / 10%)); }
body[data-screen] #view-progress .p3b-production-card,
body[data-screen] #view-progress .p3b-production-card + .p3b-timeline-card { box-shadow: none; clip-path: none; }
body[data-screen] #view-progress .p3b-production-card { row-gap: 0; padding-bottom: 6px; }
body[data-screen] #view-progress .p3b-production-phase { margin-top: 12px; }
body[data-screen] #view-progress .p3b-production-footer { margin-top: 6px; }
body[data-screen] #view-progress .p3b-production-card + .p3b-timeline-card { padding-top: 22px; }
body[data-screen] #view-progress #progress-current:is([data-state="running"], [data-state="waiting"]) .p3b-production-footer:not(:has(.p3b-view-article-btn:not(.hidden))) { display: none; }
body[data-screen] #view-progress .p3b-production-card { background: #fff; }
body[data-screen] #view-review .p3r-preview-actions :is(.p3r-copy-btn, .p3r-fullscreen-btn, .p3r-seo-disclosure > summary) { width: 34px; height: 34px; min-height: 34px; }
body[data-screen] #view-review .p3r-preview-actions { gap: 2px; margin-right: 20px; }
body[data-screen] #view-review .studio-review__reader > .p3r-tabs { gap: 4px; margin-left: 20px; }
body[data-screen] #view-progress .p3b-production-card { min-height: 0; align-content: start; }

/* =====================================================================
   v4 — feedback round (2026-10-07 afternoon)
   ===================================================================== */
/* Review and Content check had lost the frame's top padding (legacy :has rules). */
@media (min-width: 700px) {
  body[data-screen] .p3a-shell,
  body[data-screen]:has(#view-review:not([hidden])) .p3a-shell,
  body[data-screen]:has(#view-content-check:not([hidden])) .p3a-shell { padding-top: 26px; }
}

/* ---------- Xưởng viết · "Tư liệu & yêu cầu" composer (2026-10-08) ---------- */
body[data-screen] #view-generator .studio-setting-more { background: #F6F8FF; border: 1px solid var(--wl-line-soft); }
body[data-screen] #view-generator .studio-extra-settings.wl-composer-area { display: flex; flex-direction: column; gap: 14px; padding: 4px 22px 22px; }
body[data-screen] #view-generator .wl-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body[data-screen] #view-generator .wl-composer {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px;
  border: 1px solid var(--wl-line); border-radius: 24px; background: #fff; box-shadow: 0 6px 18px rgb(40 70 180 / 5%);
  transition: border-color 160ms var(--wl-ease), box-shadow 160ms var(--wl-ease);
}
body[data-screen] #view-generator .wl-composer:focus-within { border-color: #C9D5FF; box-shadow: 0 0 0 3px rgb(43 87 242 / 10%); }
body[data-screen] #view-generator .wl-composer.is-dragging { border-color: var(--wl-blue); border-style: dashed; background: #F7F9FF; }
body[data-screen] #view-generator .wl-composer__label { font-size: 12.5px; font-weight: 600; color: #2B3456; }
body[data-screen] #view-generator .wl-composer__note {
  width: 100%; min-height: 84px; resize: vertical; padding: 4px 2px; border: 0; outline: none; background: transparent;
  font: 400 14.5px/1.55 var(--wl-body); color: var(--wl-ink); box-shadow: none;
}
body[data-screen] #view-generator .wl-composer__note::placeholder { color: #8A93AE; }

/* attachment chips */
body[data-screen] #view-generator .wl-composer__chips { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-screen] #view-generator .wl-kchip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 6px 6px 6px 10px;
  border: 1px solid var(--wl-line); border-radius: 14px; background: var(--wl-field); color: var(--wl-ink);
}
body[data-screen] #view-generator .wl-kchip > .material-symbols-outlined { font-size: 20px; color: var(--wl-link); }
body[data-screen] #view-generator .wl-kchip__copy { display: flex; flex-direction: column; min-width: 0; }
body[data-screen] #view-generator .wl-kchip__name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
body[data-screen] #view-generator .wl-kchip__status { font-size: 12px; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-kchip.is-ready .wl-kchip__status { color: #17804A; }
body[data-screen] #view-generator .wl-kchip.is-partial .wl-kchip__status { color: #A05A00; }
body[data-screen] #view-generator .wl-kchip.is-failed { border-color: #F3C2C2; background: #FFF6F6; }
body[data-screen] #view-generator .wl-kchip.is-failed .wl-kchip__status { color: #B42318; }
body[data-screen] #view-generator .wl-kchip.is-uploading .wl-kchip__status::after,
body[data-screen] #view-generator .wl-kchip.is-reading .wl-kchip__status::after {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 6px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wl-kspin 800ms linear infinite;
}
@keyframes wl-kspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body[data-screen] #view-generator .wl-kchip.is-uploading .wl-kchip__status::after,
  body[data-screen] #view-generator .wl-kchip.is-reading .wl-kchip__status::after { animation: none; }
}
body[data-screen] #view-generator .wl-kchip__btn {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 10px; border: 0; border-radius: 10px;
  background: #fff; color: var(--wl-blue-ink); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
body[data-screen] #view-generator .wl-kchip__remove { padding: 0; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-kchip__remove .material-symbols-outlined { font-size: 18px; }
body[data-screen] #view-generator .wl-kchip__btn:hover { background: #E6EDFF; }
body[data-screen] #view-generator .wl-kchip__btn:focus-visible,
body[data-screen] #view-generator .wl-composer__tool:focus-visible,
body[data-screen] #view-generator .wl-understood__apply:focus-visible,
body[data-screen] #view-generator .wl-composer__warn-btn:focus-visible { outline: 2px solid var(--wl-blue); outline-offset: 2px; }

/* links row (existing chip input) */
body[data-screen] #view-generator .wl-composer__links { display: flex; align-items: center; gap: 8px; }
body[data-screen] #view-generator .wl-composer__links > .material-symbols-outlined { font-size: 18px; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-composer__links .p3a-mini-chipbox {
  flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 4px 6px 4px 12px;
  border: 1px dashed var(--wl-line); border-radius: 14px; background: #fff; box-shadow: none;
}
body[data-screen] #view-generator .wl-composer__links .p3a-mini-chipbox input { flex: 1 1 160px; min-height: 30px; height: 30px; border: 0; padding: 0; background: none; font-size: 13.5px; box-shadow: none; }
body[data-screen] #view-generator .wl-composer__links .chip { padding: 4px 6px 4px 12px; border-radius: 999px; background: #E6EDFF; color: var(--wl-blue-ink); font-weight: 600; border: 0; }

/* toolbar */
body[data-screen] #view-generator .wl-composer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--wl-line-soft); }
body[data-screen] #view-generator .wl-composer__tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--wl-field); color: #2B3456; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background 150ms var(--wl-ease), color 150ms var(--wl-ease);
}
body[data-screen] #view-generator .wl-composer__tool .material-symbols-outlined { font-size: 19px; color: var(--wl-link); }
body[data-screen] #view-generator .wl-composer__tool:hover { background: #E6EDFF; color: var(--wl-blue-ink); }
body[data-screen] #view-generator .wl-composer__drop { margin-left: auto; font-size: 12.5px; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-composer__hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-composer__warn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px;
  background: #FFF7E8; color: #6B4A00; font-size: 13px;
}
body[data-screen] #view-generator .wl-composer__warn > .material-symbols-outlined { flex: none; font-size: 18px; }
body[data-screen] #view-generator .wl-composer__warn > span:not(.material-symbols-outlined) { flex: 1 1 220px; }
body[data-screen] #view-generator .wl-composer__warn-btn { min-height: 36px; margin-left: auto; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; color: #6B4A00; font-weight: 700; cursor: pointer; }

/* "Hệ thống đã hiểu" */
body[data-screen] #view-generator .wl-understood { border-top: 1px solid var(--wl-line-soft); padding-top: 10px; }
body[data-screen] #view-generator .wl-understood > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; }
body[data-screen] #view-generator .wl-understood > summary::-webkit-details-marker { display: none; }
body[data-screen] #view-generator .wl-understood__title { font-size: 14px; font-weight: 700; color: var(--wl-ink); }
body[data-screen] #view-generator .wl-understood > summary::after { content: 'expand_more'; margin-left: auto; font-family: 'Material Symbols Outlined'; font-size: 20px; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-understood[open] > summary::after { content: 'expand_less'; }
body[data-screen] #view-generator .wl-understood__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
body[data-screen] #view-generator .wl-understood__meter { font-size: 12.5px; font-weight: 600; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-understood__meter.is-over { color: #B42318; }
body[data-screen] #view-generator .wl-understood__apply {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-left: auto; padding: 0 12px; border: 1px solid var(--wl-line);
  border-radius: 999px; background: #fff; color: var(--wl-blue-ink); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
body[data-screen] #view-generator .wl-understood__apply .material-symbols-outlined { font-size: 17px; }
body[data-screen] #view-generator .wl-understood__help { margin: 6px 0 0; font-size: 12.5px; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-understood__list { display: flex; flex-direction: column; gap: 12px; max-height: 420px; margin-top: 10px; overflow: auto; overscroll-behavior: contain; }
body[data-screen] #view-generator .wl-understood__group { padding: 10px 12px; border-radius: 16px; background: var(--wl-field); }
body[data-screen] #view-generator .wl-understood__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
body[data-screen] #view-generator .wl-understood__head .material-symbols-outlined { font-size: 18px; color: var(--wl-link); }
body[data-screen] #view-generator .wl-understood__head .wl-muted { font-size: 12px; }
body[data-screen] #view-generator .wl-understood__reread { margin-left: auto; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: #fff; color: var(--wl-blue-ink); font-size: 12px; font-weight: 600; cursor: pointer; }
body[data-screen] #view-generator .wl-understood__empty { margin: 6px 0 0; font-size: 12.5px; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-understood__facts { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; }
body[data-screen] #view-generator .wl-fact { padding: 6px 4px; border-radius: 10px; }
body[data-screen] #view-generator .wl-fact:hover { background: #fff; }
body[data-screen] #view-generator .wl-fact__label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
body[data-screen] #view-generator .wl-fact__label input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--wl-blue); }
body[data-screen] #view-generator .wl-fact__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body[data-screen] #view-generator .wl-fact__statement { font-size: 13.5px; line-height: 1.45; color: var(--wl-ink); }
body[data-screen] #view-generator .wl-fact__label:has(input:not(:checked)) .wl-fact__statement { color: #8A93AE; text-decoration: line-through; }
body[data-screen] #view-generator .wl-fact__loc { font-size: 12px; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-fact__quote { margin: 2px 0 0 28px; font-size: 12px; color: var(--wl-muted); }
body[data-screen] #view-generator .wl-fact__quote > summary { cursor: pointer; width: max-content; }
body[data-screen] #view-generator .wl-fact__quote blockquote { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid #C9D5FF; background: #fff; border-radius: 0 8px 8px 0; white-space: pre-wrap; }

/* "Thiết lập khác" */
body[data-screen] #view-generator .wl-more-settings > summary { display: flex; align-items: baseline; gap: 8px; min-height: 36px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; color: #2B3456; }
body[data-screen] #view-generator .wl-more-settings > summary::-webkit-details-marker { display: none; }
body[data-screen] #view-generator .wl-more-settings > summary .wl-muted { font-size: 12.5px; font-weight: 400; }
body[data-screen] #view-generator .wl-more-settings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
body[data-screen] #view-generator .studio-source-field { display: flex; flex-direction: column; gap: 6px; }
body[data-screen] #view-generator .studio-source-field > label { margin: 0; font-size: 12.5px; font-weight: 600; color: #2B3456; }
body[data-screen] #view-generator .studio-source-field :is(input, .mselect-button) {
  min-height: 44px; border: 1px solid var(--wl-line); border-radius: 999px; background: #fff; box-shadow: none; font-size: 14px;
}

/* image reference URLs now live under "Tùy chọn ảnh" */
body[data-screen] #view-generator .studio-image-refs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
body[data-screen] #view-generator .studio-image-refs > label { font-size: 12.5px; font-weight: 600; color: #2B3456; }
body[data-screen] #view-generator .studio-image-refs .p3a-mini-chipbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 4px 6px 4px 12px; border: 1px solid var(--wl-line); border-radius: 14px; background: #fff; }
body[data-screen] #view-generator .studio-image-refs .p3a-mini-chipbox input { flex: 1 1 160px; min-height: 30px; border: 0; padding: 0; background: none; }

/* submit while attachments are read */
body[data-screen] #view-generator #btn-submit.is-waiting-knowledge { opacity: .72; cursor: progress; }

/* paste dialog */
.wl-dialog { width: min(640px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--wl-ink); box-shadow: var(--wl-shadow-paper); }
.wl-dialog::backdrop { background: rgb(14 21 48 / 36%); }
.wl-dialog__body { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.wl-dialog__body h3 { margin: 0; font: 700 18px/1.3 var(--wl-display); }
.wl-dialog__body .wl-muted { margin: 0 0 6px; font-size: 13px; }
.wl-dialog__body label { font-size: 12.5px; font-weight: 600; color: #2B3456; }
.wl-dialog__body input, .wl-dialog__body textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--wl-line); border-radius: 14px; background: #fff; font: 400 14px/1.5 var(--wl-body); color: var(--wl-ink); }
.wl-dialog__body textarea { min-height: 220px; resize: vertical; }
.wl-dialog__body :is(input, textarea):focus-visible { outline: 2px solid var(--wl-blue); outline-offset: 1px; }
.wl-dialog__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.wl-dialog__meta .is-over, .wl-dialog__error { color: #B42318; }
.wl-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.wl-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; }
.wl-btn--ghost { background: var(--wl-field); color: #2B3456; }
.wl-btn--primary { background: var(--wl-grad); color: #fff; box-shadow: var(--wl-shadow-cta); }
.wl-btn:focus-visible { outline: 2px solid var(--wl-blue); outline-offset: 2px; }

@media (max-width: 699px) {
  body[data-screen] #view-generator .studio-extra-settings.wl-composer-area { padding: 4px 16px 16px; }
  body[data-screen] #view-generator .wl-composer { padding: 12px; border-radius: 20px; }
  body[data-screen] #view-generator .wl-composer__drop { display: none; }
  body[data-screen] #view-generator .wl-composer__tool { flex: 1 1 calc(50% - 6px); justify-content: center; }
  body[data-screen] #view-generator .wl-kchip__name { max-width: 160px; }
  body[data-screen] #view-generator .wl-more-settings__grid { grid-template-columns: minmax(0, 1fr); }
  body[data-screen] #view-generator .wl-understood__apply { margin-left: 0; }
}

/* ---------- Kho nội dung · one even row of 42px controls ---------- */
body[data-screen] #view-library .studio-library__workspace { align-items: center; }
body[data-screen] #view-library .studio-library__collection-head { align-items: center; gap: 8px; }
body[data-screen] #view-library .studio-library__workspace > .studio-library__collections { align-items: center; gap: 8px; }
body[data-screen] #view-library .studio-library__workspace > .studio-library__collections .p3e-rail-item,
body[data-screen] #view-library .p3e-filter-btn { height: 42px; min-height: 42px; margin: 0; padding: 0 16px; line-height: 1; box-sizing: border-box; vertical-align: middle; }
body[data-screen] #view-library :is(.p3e-content-mode, .studio-library__view-options) { height: 42px; padding: 4px; box-sizing: border-box; align-items: center; margin: 0; }
body[data-screen] #view-library .p3e-content-mode button { height: 34px; min-height: 34px; padding: 0 14px; line-height: 1; }
body[data-screen] #view-library .studio-library__view-options button { height: 34px; min-height: 34px; width: 38px; display: grid; place-items: center; padding: 0; }
body[data-screen] #view-library .studio-library__view-options button .material-symbols-outlined { font-size: 19px; }
body[data-screen] #view-library .studio-library__filters { gap: 8px; align-items: center; }
body[data-screen] #view-library .studio-library__workspace > .studio-library__collections .p3e-rail-item:is(.is-active, [aria-current="true"], [aria-pressed="true"]) { box-shadow: 0 6px 14px rgb(62 107 255 / 24%); }
body[data-screen] #view-library .studio-page-heading .p3e-filter-btn { height: 42px; }

/* ---------- Duyệt bài · assistant card ---------- */
body[data-screen] #view-review .studio-review__assessment { padding: 24px; gap: 12px; }
body[data-screen] #view-review .studio-review__assessment .studio-review__tool-heading { margin: 0 0 4px; }
body[data-screen] #view-review .studio-review__assessment .studio-review__tool-heading p { margin: 2px 0 0; font-size: 13px; opacity: .85; }
body[data-screen] #view-review .studio-review__assessment .p3r-scores { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; background: none; border: 0; }
body[data-screen] #view-review .studio-review__assessment .p3r-scores * { background: transparent; border-color: transparent; box-shadow: none; }
body[data-screen] #view-review .p3r-context-score { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; border: 0; border-radius: 0; }
body[data-screen] #view-review .p3r-context-score > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; }
body[data-screen] #view-review .p3r-context-score > div:first-child > span { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body[data-screen] #view-review .p3r-context-score > div:first-child > b { font-family: var(--wl-display); font-size: 80px; font-weight: 300; letter-spacing: -.05em; line-height: .85; }
body[data-screen] #view-review .studio-review__assessment .seo-v3-state {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgb(255 255 255 / 22%) !important; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
body[data-screen] #view-review .studio-review__assessment .seo-v3-state--blocked::before,
body[data-screen] #view-review .studio-review__assessment .seo-v3-state--fail::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #FFB4B4; }
body[data-screen] #view-review .studio-review__assessment .seo-v3-state--pass::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #9BF0CC; }
body[data-screen] #view-review .p3r-context-score dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
body[data-screen] #view-review .p3r-context-score dl > div {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 18px;
  background: rgb(255 255 255 / 18%) !important; border: 1px solid rgb(255 255 255 / 35%) !important;
}
body[data-screen] #view-review .p3r-context-score dt { order: 2; font-size: 11.5px; font-weight: 500; opacity: .92; }
body[data-screen] #view-review .p3r-context-score dd { order: 1; margin: 0; font-family: var(--wl-display); font-size: 22px; font-weight: 700; line-height: 1.1; }
body[data-screen] #view-review .studio-review__assessment .p3r-context-hint {
  margin: 2px 0 0; padding: 0; font-size: 13px; font-weight: 600; line-height: 1.45; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / 60%);
}

/* ---------- Duyệt bài · only "Bài kế tiếp" ---------- */
body[data-screen] #view-review .wl-review-actions { padding: 6px; }
.wl-next-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 6px 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--wl-grad); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--wl-shadow-cta);
}
.wl-next-btn .wl-cta-go { width: 38px; height: 38px; flex-basis: 38px; }

/* ---------- Duyệt bài · Đánh giá SEO tab ---------- */
body[data-screen] #view-review .p3r-article:has(> .seo-v3) { background: transparent; }
body[data-screen] #view-review .p3r-article > .seo-v3 { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.seo-v3 { --seo-blue: #2B57F2; --seo-text: #0E1530; --seo-muted: #5A6380; }
body[data-screen] .seo-v3-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; padding: 26px 28px; border: 0; border-radius: 28px;
  background: linear-gradient(140deg, #2B57F2 0%, #6C8CFF 55%, #AFC1FF 100%); color: #fff; box-shadow: 0 22px 46px rgb(43 87 242 / 26%);
}
body[data-screen] .seo-v3-hero :is(h2, span, b, strong, p) { color: #fff; }
body[data-screen] .seo-v3-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
body[data-screen] .seo-v3-scope { padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 22%); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body[data-screen] .seo-v3-hero h2 { margin: 0; font-family: var(--wl-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
body[data-screen] .seo-v3-hero .seo-v3-state { background: rgb(255 255 255 / 22%); color: #fff; border: 0; }
body[data-screen] .seo-v3-score { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 0; border: 0; background: none; box-shadow: none; min-width: 0; }
body[data-screen] .seo-v3-score strong { font-family: var(--wl-display); font-size: 80px; font-weight: 300; letter-spacing: -.05em; line-height: .85; }
body[data-screen] .seo-v3-score span { font-size: 12.5px; opacity: .9; }
body[data-screen] .seo-v3-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
body[data-screen] .seo-v3-metrics > div {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 18px;
  background: rgb(255 255 255 / 18%); border: 1px solid rgb(255 255 255 / 35%); box-shadow: none;
}
body[data-screen] .seo-v3-metrics b { font-family: var(--wl-display); font-size: 26px; font-weight: 700; line-height: 1; }
body[data-screen] .seo-v3-metrics span { font-size: 12px; opacity: .92; }
body[data-screen] .seo-v3-section { padding: 22px 24px; border: 0; border-radius: 26px; background: #fff; box-shadow: 0 12px 32px rgb(40 70 180 / 8%); }
body[data-screen] .seo-v3-section-head { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 14px; padding: 0; border: 0; }
body[data-screen] .seo-v3-section-head > div { flex: 1; min-width: 0; }
body[data-screen] .seo-v3-section-head h3 { margin: 0; font-family: var(--wl-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--wl-ink); }
body[data-screen] .seo-v3-section-head p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--wl-muted); }
body[data-screen] .seo-v3-count { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #E6EDFF; color: var(--wl-blue-ink); border: 0; }
body[data-screen] .seo-v3-section--blocked .seo-v3-count { background: #FFE4E4; color: #9A1C1C; }
body[data-screen] .seo-v3-count--issue { background: #FFF0D6; color: #7A4A00; }
body[data-screen] .seo-v3-section--passed .seo-v3-count, body[data-screen] .seo-v3-count--pass { background: #DDF5EC; color: #0F5A40; }
body[data-screen] .seo-v3-state { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 0; }
body[data-screen] .seo-v3-state--blocked, body[data-screen] .seo-v3-state--fail { background: #FFE4E4; color: #9A1C1C; }
body[data-screen] .seo-v3-state--warn { background: #FFF0D6; color: #7A4A00; }
body[data-screen] .seo-v3-state--pass { background: #DDF5EC; color: #0F5A40; }
body[data-screen] .seo-v3-state--unmeasured, body[data-screen] .seo-v3-state--not_applicable { background: #EEF0F6; color: #3C4460; }
body[data-screen] :is(.seo-v3-gates, .seo-v3-actions) { display: flex; flex-direction: column; gap: 12px; }
body[data-screen] .seo-v3-gate { padding: 16px 18px; border: 0; border-radius: 20px; background: #FFF6F6; }
body[data-screen] .seo-v3-gate-head, body[data-screen] .seo-v3-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
body[data-screen] :is(.seo-v3-gate, .seo-v3-action) h4 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--wl-ink); }
body[data-screen] .seo-v3-gate > p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: #2B3456; }
body[data-screen] .seo-v3-gate-fix { padding: 10px 14px; border-radius: 14px; background: #fff; }
body[data-screen] .seo-v3-proof { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 0; border: 0; background: none; }
body[data-screen] .seo-v3-proof-label { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #EEF0F6; color: #3C4460; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
body[data-screen] .seo-v3-evidence-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body[data-screen] .seo-v3-evidence-list > * { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; border: 0; border-radius: 16px; background: #fff; }
body[data-screen] .seo-v3-evidence-kind { font-size: 11.5px; font-weight: 700; color: var(--wl-link); }
body[data-screen] .seo-v3-evidence-locator { font-size: 12px; font-weight: 700; color: var(--wl-ink); }
body[data-screen] .seo-v3-evidence-copy { font-size: 12.5px; line-height: 1.55; color: #2B3456; }
body[data-screen] .seo-v3-action { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px; border: 0; border-radius: 22px; background: #F7F9FF; }
body[data-screen] .seo-v3-action-index { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--wl-grad); color: #fff; font-family: var(--wl-display); font-weight: 700; font-size: 15px; border: 0; }
body[data-screen] .seo-v3-action-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body[data-screen] :is(.seo-v3-action-actual, .seo-v3-action-fix) b { display: inline-block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wl-muted); }
body[data-screen] :is(.seo-v3-action-actual, .seo-v3-action-fix) p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #2B3456; }
body[data-screen] .seo-v3-action-fix { padding: 14px 16px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 3px 0 0 var(--wl-blue); }
body[data-screen] .seo-v3-action-fix b { color: var(--wl-blue-ink); }
body[data-screen] .seo-v3-details > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--wl-link); list-style: none; }
body[data-screen] .seo-v3-details > summary::-webkit-details-marker { display: none; }
body[data-screen] .seo-v3-details > summary::after { content: ' ›'; }
body[data-screen] .seo-v3-details[open] > summary::after { content: ' ˅'; }
body[data-screen] .seo-v3-actual-target { margin: 10px 0 0; padding: 12px 14px; border-radius: 16px; background: #fff; }
body[data-screen] .seo-v3-actual-target dt { font-size: 11.5px; font-weight: 700; color: var(--wl-muted); }
body[data-screen] .seo-v3-actual-target dd { margin: 2px 0 0; font-size: 13px; color: var(--wl-ink); }
body[data-screen] .seo-v3-clear { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 18px; background: #E9F8F1; color: #0F5A40; }
body[data-screen] .seo-v3-clear .material-symbols-outlined { font-size: 24px; color: #12A26B; }
body[data-screen] .seo-v3-clear b { color: #0F5A40; }
body[data-screen] .seo-v3-clear p { margin: 2px 0 0; font-size: 12.5px; color: #2E6B54; }
body[data-screen] .seo-v3-passed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body[data-screen] .seo-v3-pass-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 14px; border: 0; border-radius: 18px; background: #F2FBF7; }
body[data-screen] .seo-v3-pass-item > .material-symbols-outlined { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #DDF5EC; color: #12A26B; font-size: 18px; }
body[data-screen] .seo-v3-pass-item h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--wl-ink); }
body[data-screen] .seo-v3-pass-item p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--wl-muted); }
@media (max-width: 699px) {
  body[data-screen] .seo-v3-hero { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  body[data-screen] .seo-v3-score { align-items: flex-start; }
  body[data-screen] .seo-v3-passed { grid-template-columns: minmax(0, 1fr); }
  body[data-screen] .seo-v3-evidence-list > * { grid-template-columns: minmax(0, 1fr); }
}
body[data-screen] .seo-v3-evidence-list li > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body[data-screen] .seo-v3-evidence-list a { font-size: 12.5px; font-weight: 600; color: var(--wl-link); }

/* ---------- Kiểm tra nội dung · canvas look ---------- */
body[data-screen] #view-content-check .p3c-toolbar .p3c-actions { display: flex; align-items: center; gap: 8px; }
body[data-screen] #view-content-check .p3c-toolbar .p3c-actions button { height: 42px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--wl-glass-line); background: rgb(255 255 255 / 86%); color: var(--wl-ink); box-shadow: none; }
body[data-screen] #view-content-check .p3c-toolbar .p3c-actions button:disabled { opacity: .55; }
body[data-screen] #view-content-check .p3c-toolbar .p3c-actions .p3c-primary { background: var(--wl-grad) !important; color: #fff !important; border-color: transparent; box-shadow: var(--wl-shadow-cta); }
body[data-screen] #view-content-check > .p3c-live { height: auto; min-height: 56px; padding: 8px 18px 8px 8px; border: 1px solid var(--wl-glass-line); border-radius: 999px; background: rgb(255 255 255 / 80%); box-shadow: none; }
body[data-screen] #view-content-check > .p3c-live:not(:has(.p3c-live-main)) { padding: 14px 20px; border-radius: 28px; }
body[data-screen] #view-content-check .p3c-live-main { display: flex; align-items: center; gap: 12px; }
body[data-screen] #view-content-check .p3c-live-main > .material-symbols-outlined { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--wl-grad); color: #fff; font-size: 20px; }
body[data-screen] #view-content-check .p3c-live-copy strong { font-size: 14px; }
body[data-screen] #view-content-check .p3c-live-track { height: 8px; border-radius: 999px; background: #EEF2FC; }
body[data-screen] #view-content-check .p3c-live-track > * { border-radius: 999px; background: var(--wl-grad-bar); }
/* Article list */
body[data-screen] #view-content-check .p3c-layout { grid-template-columns: 236px minmax(0, 1fr) 290px; }
body[data-screen] #view-content-check .p3c-list h2 { font-size: 16px; font-weight: 700; margin: 0 6px 10px; }
body[data-screen] #view-content-check .p3c-list > label { display: none; }
body[data-screen] #view-content-check .p3c-list [data-list] { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
body[data-screen] #view-content-check .p3c-article-link {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 20px; background: transparent; color: var(--wl-ink);
  font-size: 13.5px; font-weight: 600; line-height: 1.35; text-decoration: none; border: 0;
}
body[data-screen] #view-content-check .p3c-article-link:hover { background: rgb(255 255 255 / 85%); }
body[data-screen] #view-content-check .p3c-article-link small { font-size: 12px; font-weight: 500; color: var(--wl-muted); }
body[data-screen] #view-content-check .p3c-article-link.is-active { background: var(--wl-grad); color: #fff; box-shadow: 0 12px 26px rgb(62 107 255 / 28%); }
body[data-screen] #view-content-check .p3c-article-link.is-active small { color: rgb(255 255 255 / 85%); }
/* Branch toggles: coloured square ticks instead of native checkboxes */
body[data-screen] #view-content-check .p3c-toggles { gap: 6px; }
body[data-screen] #view-content-check .p3c-toggles label {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 36px; padding: 0 14px 0 8px; border-radius: 999px; border: 0;
  font-size: 13px; font-weight: 600; cursor: pointer; --c: #5B7FFF;
}
body[data-screen] #view-content-check .p3c-toggles label input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
body[data-screen] #view-content-check .p3c-toggles label::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1.5px rgb(14 21 48 / 18%);
  color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
}
body[data-screen] #view-content-check .p3c-toggles label:has(input:checked)::before { content: "\2713"; background: var(--c); box-shadow: none; }
body[data-screen] #view-content-check .p3c-toggles label:has(input:focus-visible) { outline: 2px solid var(--wl-blue); outline-offset: 2px; }
body[data-screen] #view-content-check .p3c-toggles label:has(input:disabled) { cursor: default; opacity: .75; }
body[data-screen] #view-content-check .p3c-toggles label:has(input[data-branch="fpt"]) { background: #EEF3FF; color: #2448D8; --c: #5B7FFF; }
body[data-screen] #view-content-check .p3c-toggles label:has(input[data-branch="language"]) { background: #FFF0F6; color: #8A1F57; --c: #E26AA0; }
body[data-screen] #view-content-check .p3c-toggles label:has(input[data-branch="internet"]) { background: #FFF6E3; color: #7A4A00; --c: #E3A21A; }
body[data-screen] #view-content-check .p3c-toggles label:has(input[data-branch="facts"]) { background: #E8F8F0; color: #0F5A40; --c: #2EAF7D; }
body[data-screen] #view-content-check .p3c-toggles label:has(input[data-branch="competitors"]) { background: #F3EEFF; color: #4B2A9A; --c: #8B6CF0; }
body[data-screen] #view-content-check .p3c-toggles label:has(input[data-branch="logic"]) { background: #EAF6FF; color: #0B4A75; --c: #3AA0E0; }
body[data-screen] #view-content-check .p3c-metrics-row { gap: 6px; }
body[data-screen] #view-content-check .p3c-metric { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: #F4F7FF; color: #3C4460; font-size: 12px; font-weight: 700; }
body[data-screen] #view-content-check .p3c-metric .material-symbols-outlined { font-size: 15px; color: var(--wl-muted); }
/* Reader */
body[data-screen] #view-content-check .p3c-reader { font-size: 16px; line-height: 1.8; color: #1F2747; }
body[data-screen] #view-content-check .p3c-reader :is(h2, h3) { font-family: var(--wl-display); font-weight: 700; letter-spacing: -.01em; color: var(--wl-ink); }
body[data-screen] #view-content-check .p3c-reader h2 { font-size: 22px; }
body[data-screen] #view-content-check .p3c-reader h3 { font-size: 19px; }
body[data-screen] #view-content-check .p3c-reader a { color: var(--wl-link); }
body[data-screen] #view-content-check .p3c-reader mark { padding: 2px 3px; border-radius: 6px; background: #FFEBC2; }
body[data-screen] #view-content-check .p3c-reader table { border-radius: 16px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--wl-line); overflow: hidden; }
body[data-screen] #view-content-check .p3c-reader :is(th, td) { padding: 10px 14px; border-bottom: 1px solid var(--wl-line-soft); }
body[data-screen] #view-content-check .p3c-reader th { background: #F4F7FF; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #3C4460; }
/* Results */
body[data-screen] #view-content-check .p3c-inspector-head { align-items: flex-end; }
body[data-screen] #view-content-check .p3c-inspector-head .p3c-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wl-muted); }
body[data-screen] #view-content-check .p3c-inspector-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
body[data-screen] #view-content-check .p3c-total { font-size: 56px; letter-spacing: -.04em; line-height: .9; color: var(--wl-link); padding: 0; min-width: 0; }
body[data-screen] #view-content-check .p3c-result-state { padding: 12px 14px; border: 0; border-radius: 20px; background: rgb(255 255 255 / 85%); }
body[data-screen] #view-content-check .p3c-result-state.is-clear { background: #E9F8F1; color: #0F5A40; }
body[data-screen] #view-content-check .p3c-result-state.is-warning { background: #FFF6E3; color: #7A4A00; }
body[data-screen] #view-content-check .p3c-result-state.is-found { background: #FFF0F6; color: #8A1F57; }
body[data-screen] #view-content-check .p3c-summary { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-screen] #view-content-check .p3c-summary button { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 90%); color: var(--wl-ink); font-size: 12.5px; font-weight: 600; }
body[data-screen] #view-content-check .p3c-summary button strong { font-family: var(--wl-display); font-size: 14px; }
body[data-screen] #view-content-check .p3c-issues { display: flex; flex-direction: column; gap: 8px; }
body[data-screen] #view-content-check .p3c-issue { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 16px; border: 0; border-radius: 22px; background: rgb(255 255 255 / 80%); text-align: left; box-shadow: none; }
body[data-screen] #view-content-check .p3c-issue.is-active { background: #fff; box-shadow: 0 10px 24px rgb(40 70 180 / 10%); }
body[data-screen] #view-content-check .p3c-issue-top { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 700; color: var(--wl-ink); }
body[data-screen] #view-content-check .p3c-issue-top .material-symbols-outlined { font-size: 16px; color: var(--wl-link); }
body[data-screen] #view-content-check .p3c-issue .p3c-muted { font-size: 12px; }
body[data-screen] #view-content-check .p3c-badge { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #DDF5EC; color: #0F5A40; font-size: 11.5px; font-weight: 700; }
body[data-screen] #view-content-check .p3c-detail { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 22px; background: #fff; }
body[data-screen] #view-content-check .p3c-detail h3 { margin: 0; font-size: 15px; font-weight: 700; }
body[data-screen] #view-content-check .p3c-detail small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #8A93AD; }
body[data-screen] #view-content-check .p3c-detail blockquote { margin: 0; padding: 8px 10px; border: 0; border-radius: 12px; background: #FFF6E3; font-size: 12.5px; line-height: 1.5; }
body[data-screen] #view-content-check .p3c-detail blockquote.p3c-after { background: #E9F8F1; }
body[data-screen] #view-content-check .p3c-detail .p3c-actions { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-screen] #view-content-check .p3c-detail .p3c-actions :is(button, a) { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: #F4F7FF; color: var(--wl-ink); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
body[data-screen] #view-content-check .p3c-diff { padding: 12px; border: 0; border-radius: 16px; background: #F7F9FF; }

body[data-screen] #view-generator .studio-selected-setting { position: static; top: auto; z-index: auto; }
body[data-screen] #view-review .p3r-context-score dd { font-size: 18px; white-space: nowrap; }
body[data-screen] #view-review .studio-review__assessment:not(:has(.p3r-scores > *)) { padding-bottom: 20px; }
@media (max-width: 899px) {
  body[data-screen] #view-review .studio-review__reader { display: flex; flex-direction: column; }
  body[data-screen] #view-review .studio-review__reader > .p3r-preview-head { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 0; }
  body[data-screen] #view-review .studio-review__reader .p3r-preview-head-top { display: flex; flex-direction: column; gap: 10px; }
  body[data-screen] #view-review .p3r-preview-actions { margin: 0; order: 1; flex-wrap: wrap; }
  body[data-screen] #view-review .studio-review__reader > .p3r-tabs { margin: 12px 18px 0; max-width: calc(100% - 36px); overflow-x: auto; }
  body[data-screen] #view-review .p3r-preview-meta, body[data-screen] #view-review .p3r-preview-title { width: auto; margin: 0; }
  body[data-screen] #view-review .p3r-preview-title { font-size: 24px; }
  body[data-screen] #view-review .wl-review-actions { position: sticky; bottom: calc(var(--p3a-dock-clearance) - 20px); }
}
@media (max-width: 1099px) {
  body[data-screen] #view-review .studio-review__workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  body[data-screen] #view-review .studio-review__reader .p3r-preview-head-top { flex-direction: column !important; align-items: stretch !important; }
  body[data-screen] #view-review .studio-review__reader .p3r-preview-head-top > * { width: 100%; max-width: 100%; }
}
@media (max-width: 1099px) {
  body[data-screen] #view-content-check .p3c-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-screen] #view-content-check .p3c-toolbar { flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; }
  body[data-screen] #view-content-check .p3c-toolbar .p3c-actions { flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 899px) {
  body[data-screen] #view-review .studio-review__reader > .p3r-preview-head { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; }
  body[data-screen] #view-review .studio-review__reader > .p3r-preview-head > * { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
}
@media (max-width: 899px) {
  body[data-screen] #view-review .studio-review__reader .p3r-preview-title { margin: 6px 0 0 !important; width: auto !important; flex: 0 0 auto !important; }
  body[data-screen] #view-review .studio-review__reader .p3r-preview-meta { width: auto !important; margin: 0 !important; padding-top: 10px; }
}

/* =====================================================================
   v5 — detail pass on live data
   ===================================================================== */
/* Bàn viết */
#view-home .wl-ask h3, #view-home .wl-home-hello h2, .wl-fresh-title { text-wrap: balance; }
#view-home .wl-ask-bar input { text-overflow: ellipsis; }

/* Xưởng viết: the page scrolls, not the deck; the action pill stays in view */
@media (min-width: 1100px) {
  body[data-screen] #view-generator .studio-compose:not(.is-brief-mode) { height: auto; min-height: 0; }
  body[data-screen] #view-generator .studio-compose:not(.is-brief-mode) :is(.studio-inspector, .studio-plan) { overflow: visible; max-height: none; }
}
body[data-screen] #view-generator .p3a-action-row { position: sticky; bottom: 16px; z-index: 20; }

/* Tiến trình: the percentage never clips; the finished footer wraps cleanly */
body[data-screen] #view-progress .p3b-production-card { overflow: visible; }
body[data-screen] #view-progress .p3b-creation-ring { min-width: max-content; }
body[data-screen] #view-progress #progress-pbar-pct { font-size: clamp(64px, 6vw, 96px); padding-right: 4px; white-space: nowrap; }
body[data-screen] #view-progress .p3b-production-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
body[data-screen] #view-progress .p3b-current-desc { flex: 1 1 100%; order: 0; margin: 0; }
body[data-screen] #view-progress .p3b-current-actions { order: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
body[data-screen] #view-progress #progress-image-note { margin: 0; font-size: 12.5px; color: var(--wl-muted); }
body[data-screen] #view-progress .p3b-view-article-btn:not(.hidden) { height: 44px; padding: 0 18px; font-size: 14px; }

/* Duyệt bài */
body[data-screen] #view-review .studio-review__reader > .p3r-article { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
body[data-screen] #view-review .studio-review__reader > .p3r-article::before { display: none; }
body[data-screen] #view-review .studio-review__assessment .studio-review__tool-heading { margin-bottom: 10px; }
body[data-screen] #view-review .wl-review-actions { position: static; margin: 4px 0 26px; box-shadow: none; border: 0; background: none; padding: 0; }
body[data-screen] #view-review .p3r-c-title { -webkit-line-clamp: 3; }

/* Phân tích: KPI values shrink to fit their card */
body[data-screen] #view-analytics .p3n-kpi-card { min-width: 0; overflow: hidden; }
body[data-screen] #view-analytics .p3n-kpi-value { font-size: clamp(26px, 2.5vw, 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body[data-screen] #view-analytics .p3n-kpi-card :is(.p3n-kpi-sub, .p3n-kpi-delta, [class*="delta"], [class*="sub"]) { font-size: 12px; line-height: 1.4; }

/* Thành viên: only the article count is a big number; the date is a line */
body[data-screen] #view-members .p3m-stats-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: end; }
body[data-screen] #view-members .p3m-stats-row > :last-child .p3m-stat-v { font-family: var(--wl-body); font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--wl-ink); white-space: normal; }
body[data-screen] #view-members .p3m-stat-k { font-size: 12px; }

/* Kiểm tra nội dung: headings align with paragraphs */
body[data-screen] #view-content-check .p3c-reader :is(h1, h2, h3, h4) { margin-left: 0; margin-right: 0; padding-left: 0; }
body[data-screen] #view-content-check .p3c-inspector-head .p3c-eyebrow { text-transform: none; }

/* The action pill sits after the form so it never covers settings. */
body[data-screen] #view-generator .p3a-action-row { position: relative !important; bottom: auto !important; margin: 24px auto 8px; }

/* Recheck 2026-10-07 */
/* Duyệt bài · Image Studio: each switch stays on one row */
body[data-screen] #view-review .p3s-img-model-toggle { display: flex !important; flex-wrap: nowrap; grid-template-columns: none !important; }
body[data-screen] #view-review .p3s-img-model-toggle > button { flex: 1 1 0; min-width: 0; padding: 0 8px; white-space: nowrap; font-size: 12.5px; }
/* Phân tích: the delta number never breaks; the label drops to its own line when tight */
body[data-screen] #view-analytics .p3n-kpi-delta { flex-wrap: wrap; align-items: center; column-gap: 4px; row-gap: 0; }
body[data-screen] #view-analytics .p3n-kpi-delta :is(svg, .p3n-pct) { flex: none; white-space: nowrap; }
body[data-screen] #view-analytics .p3n-kpi-delta .p3n-lbl { white-space: nowrap; }

/* Duyệt bài · Nguồn: stat tiles + one paper card per source */
body[data-screen] #view-review .p3r-src { display: flex; flex-direction: column; gap: 18px; }
body[data-screen] #view-review .p3r-src-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
body[data-screen] #view-review .p3r-src-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 20px; background: #F4F7FF; }
body[data-screen] #view-review .p3r-src-stat b { font-family: var(--wl-display); font-size: 28px; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--wl-ink); }
body[data-screen] #view-review .p3r-src-stat span { font-size: 12px; font-weight: 500; color: var(--wl-muted); }
body[data-screen] #view-review .p3r-src-stat--accent { background: var(--wl-grad); }
body[data-screen] #view-review .p3r-src-stat--accent :is(b, span) { color: #fff; }
body[data-screen] #view-review .p3r-src-list { display: flex; flex-direction: column; gap: 12px; }
body[data-screen] #view-review .p3r-src-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 24px; background: #fff; border: 1px solid #EEF1FA; box-shadow: 0 6px 18px rgb(40 70 180 / 5%); }
body[data-screen] #view-review .p3r-src-card.is-primary { border-color: #C9D6FF; box-shadow: 0 10px 24px rgb(62 107 255 / 10%); }
body[data-screen] #view-review .p3r-src-card__head { display: flex; align-items: center; gap: 14px; }
body[data-screen] #view-review .p3r-src-mark { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(140deg, #E1E8FF, #F0EAFF); color: var(--wl-blue-ink, #2448D8); font-family: var(--wl-display); font-size: 18px; font-weight: 700; }
body[data-screen] #view-review .p3r-src-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body[data-screen] #view-review .p3r-src-card__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--wl-ink); }
body[data-screen] #view-review .p3r-src-tag { padding: 3px 10px; border-radius: 999px; background: var(--wl-grad); color: #fff; font-size: 11.5px; font-weight: 600; }
body[data-screen] #view-review .p3r-src-date { font-size: 12px; color: var(--wl-muted); }
body[data-screen] #view-review .p3r-src-url { min-width: 0; font-size: 12.5px; color: var(--wl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
body[data-screen] #view-review .p3r-src-url:hover { color: var(--wl-blue-ink, #2448D8); text-decoration: underline; }
body[data-screen] #view-review .p3r-src-count { flex: none; display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 12px; border-radius: 999px; background: #EEF3FF; color: #2448D8; font-size: 12px; font-weight: 600; white-space: nowrap; }
body[data-screen] #view-review .p3r-src-count b { font-size: 14px; }
body[data-screen] #view-review .p3r-src-secs { display: flex; flex-direction: column; gap: 8px; padding-left: 56px; }
body[data-screen] #view-review .p3r-src-label { font-size: 12px; font-weight: 600; color: var(--wl-muted); }
body[data-screen] #view-review .p3r-src-sec-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body[data-screen] #view-review .p3r-src-sec {
  max-width: 280px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: #F4F7FF; color: #2B3456; font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
body[data-screen] #view-review .p3r-src-sec:hover { background: #E6EDFF; color: #2448D8; }
body[data-screen] #view-review .p3r-src-more { display: contents; }
body[data-screen] #view-review .p3r-src-more > summary { list-style: none; height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px dashed #C9D6FF; color: #2448D8; font-size: 12px; font-weight: 600; cursor: pointer; }
body[data-screen] #view-review .p3r-src-more > summary::-webkit-details-marker { display: none; }
body[data-screen] #view-review .p3r-src-more[open] > summary { display: none; }
body[data-screen] #view-review .p3r-src-more > .p3r-src-sec-list { display: contents; }
body[data-screen] #view-review .p3r-src-none { margin: 0 0 0 56px; font-size: 12.5px; color: var(--wl-muted); }
body[data-screen] #view-review .p3r-src-kp { margin-left: 56px; border-top: 1px solid #EEF1FA; padding-top: 10px; }
body[data-screen] #view-review .p3r-src-kp > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #2448D8; cursor: pointer; }
body[data-screen] #view-review .p3r-src-kp > summary::-webkit-details-marker { display: none; }
body[data-screen] #view-review .p3r-src-kp > summary::after { content: "›"; font-size: 16px; transition: transform 160ms; }
body[data-screen] #view-review .p3r-src-kp[open] > summary::after { transform: rotate(90deg); }
body[data-screen] #view-review .p3r-src-kp ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
body[data-screen] #view-review .p3r-src-kp li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.55; color: #2B3456; }
body[data-screen] #view-review .p3r-src-kp li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #7C97FF; }
/* Tư liệu nội bộ (attached knowledge) in the sources tab */
body[data-screen] #view-review .p3r-knowledge { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
body[data-screen] #view-review .p3r-knowledge-warn { padding: 12px 16px; border-radius: 18px; background: #FFF7E8; color: #6B4A00; font-size: 13px; }
body[data-screen] #view-review .p3r-knowledge-warn ul { margin: 6px 0 0; padding-left: 18px; }
body[data-screen] #view-review .p3r-knowledge-view { min-height: 36px; padding: 0 14px; border: 1px solid var(--wl-line); border-radius: 999px; background: #fff; color: var(--wl-blue-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
body[data-screen] #view-review .p3r-knowledge-view:focus-visible { outline: 2px solid var(--wl-blue); outline-offset: 2px; }
body[data-screen] #view-review .p3r-knowledge-loc { margin-left: 6px; font-size: 12px; color: var(--wl-muted); }
.p3r-knowledge-text { max-height: 60vh; margin: 0; padding: 12px 14px; overflow: auto; border-radius: 14px; background: var(--wl-field); font: 400 13px/1.55 var(--wl-body); white-space: pre-wrap; word-break: break-word; }
@media (max-width: 699px) {
  body[data-screen] #view-review .p3r-src-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-screen] #view-review :is(.p3r-src-secs, .p3r-src-kp) { padding-left: 0; margin-left: 0; }
  body[data-screen] #view-review .p3r-src-none { margin-left: 0; }
  body[data-screen] #view-review .p3r-src-card__head { flex-wrap: wrap; }
}

/* Duyệt bài · Dàn ý: one paper card on the same 760px column as the title */
body[data-screen] #view-review .p3r-article > .p3r-outline-card { width: min(760px, 100%); max-width: 760px; margin: 0 auto; padding: 22px 24px; border-radius: 24px; background: #fff; border: 1px solid #EEF1FA; box-shadow: 0 6px 18px rgb(40 70 180 / 5%); }
body[data-screen] #view-review .p3r-outline-card > .p3r-outline-heading { margin: 0; font-family: var(--wl-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--wl-ink); }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-head { margin: 4px 0 14px; padding-bottom: 14px; border-bottom: 1px solid #EEF1FA; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-title { font-size: 13px; font-weight: 500; color: var(--wl-muted); }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-stat { padding: 4px 12px; border-radius: 999px; background: #EEF3FF; color: #2448D8; font-size: 12px; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-stat--h1 { background: var(--wl-grad); color: #fff; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline { gap: 2px; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-row { align-items: baseline; gap: 10px; padding-block: 8px; padding-right: 12px; border-radius: 12px; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-row:hover { background: #F4F7FF; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-row--h1 { padding-left: 12px; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-row--h2 { padding-left: 12px; margin-top: 6px; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-row--h3 { padding-left: 46px; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-row--h4 { padding-left: 80px; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-tag { min-width: 26px; padding: 2px 6px; border-radius: 8px; text-align: center; font-size: 10.5px; background: #EEF3FF; color: #2448D8; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-tag--h1 { background: var(--wl-grad); color: #fff; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-tag:is(.p3r-outline-tag--h3, .p3r-outline-tag--h4) { background: #F4F7FF; color: #5B6B9A; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-text { font-size: 14px; line-height: 1.45; color: #2B3456; }
body[data-screen] #view-review .p3r-outline-card .p3r-outline-text--h1 { font-size: 15px; color: var(--wl-ink); }
@media (max-width: 699px) {
  body[data-screen] #view-review .p3r-article > .p3r-outline-card { padding: 16px; border-radius: 20px; }
  body[data-screen] #view-review .p3r-outline-card .p3r-outline-head { flex-wrap: wrap; gap: 8px; }
  body[data-screen] #view-review .p3r-outline-card .p3r-outline-row--h3 { padding-left: 28px; }
}

/* Kiểm tra nội dung · Dán bài viết: same paper-and-pill language as the pages */
body[data-screen] .p3c-paste-modal { width: min(1080px, 100%); max-width: 1080px; border-radius: 32px !important; }
body[data-screen] .p3c-paste-modal .p3r-modal__head { gap: 14px; padding: 22px 26px 18px !important; border-bottom: 0 !important; }
body[data-screen] .p3c-paste-modal .p3c-paste-icon { flex: none; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: var(--wl-grad); color: #fff; box-shadow: 0 10px 22px rgb(62 107 255 / 26%); }
body[data-screen] .p3c-paste-modal .p3c-paste-icon .material-symbols-outlined { font-size: 22px; }
body[data-screen] .p3c-paste-modal .p3r-modal__head h3 { margin: 0; font-family: var(--wl-display); font-size: 28px !important; font-weight: 700; letter-spacing: -.03em; }
body[data-screen] .p3c-paste-body { padding: 0 26px 6px !important; }
body[data-screen] .p3c-paste-modal .p3c-paste-meta { gap: 12px; }
body[data-screen] .p3c-paste-modal .p3s-form-field { display: flex; flex-direction: column; gap: 7px; }
body[data-screen] .p3c-paste-modal .p3s-form-field > span { font-size: 12.5px; font-weight: 600; color: #2B3456; }
body[data-screen] .p3c-paste-modal input.p3s-form-input { height: 46px; padding: 0 18px; border: 1px solid transparent !important; border-radius: 999px !important; background: #F4F7FF !important; font-size: 14px; color: var(--wl-ink); }
body[data-screen] .p3c-paste-modal textarea.p3s-form-input { padding: 16px 18px; border: 1px solid transparent !important; border-radius: 22px !important; background: #F4F7FF !important; font-size: 14px; line-height: 1.6; color: var(--wl-ink); resize: vertical; }
body[data-screen] .p3c-paste-modal .p3s-form-input:focus { outline: 0; border-color: #A9BCFF !important; background: #fff !important; box-shadow: 0 0 0 4px #E6EDFF; }
body[data-screen] .p3c-paste-modal .p3c-paste-editor-grid { gap: 14px; margin-top: 14px; }
body[data-screen] .p3c-paste-modal .p3c-paste-source textarea { min-height: 360px; }
body[data-screen] .p3c-paste-modal .p3c-paste-source small { min-height: 0; font-size: 12px; color: var(--wl-muted); }
body[data-screen] .p3c-paste-modal .p3c-paste-preview { min-height: 420px; max-height: 500px; margin-top: 25px; border: 1px solid #EEF1FA; border-radius: 24px; background: #fff; overflow: hidden; }
body[data-screen] .p3c-paste-modal .p3c-paste-preview-head { min-height: 52px; padding: 10px 16px; border-bottom: 1px solid #EEF1FA; background: #FAFBFF; }
body[data-screen] .p3c-paste-modal .p3c-paste-preview-head > span { font-size: 13px; font-weight: 600; color: #2B3456; }
body[data-screen] .p3c-paste-modal .p3c-paste-preview-head > div > * { padding: 4px 10px; border-radius: 999px; background: #EEF3FF; color: #2448D8; font-size: 11.5px; font-weight: 600; }
body[data-screen] .p3c-paste-modal .p3c-paste-preview-state { gap: 12px; color: var(--wl-muted); }
body[data-screen] .p3c-paste-modal .p3c-paste-preview-state .material-symbols-outlined { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #E1E8FF, #F0EAFF); color: #2448D8; font-size: 26px; animation: none; }
body[data-screen] .p3c-paste-modal .p3c-paste-preview-state p { max-width: 240px; font-size: 13px; line-height: 1.5; }
body[data-screen] .p3c-paste-modal .p3c-paste-reader { padding: 18px 20px; background: #fff; }
body[data-screen] .p3c-paste-modal .p3c-paste-seo { margin-top: 14px; border: 0; border-radius: 22px; background: #F4F7FF; }
body[data-screen] .p3c-paste-modal .p3c-paste-seo > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px; font-size: 13.5px; font-weight: 600; color: var(--wl-ink); }
body[data-screen] .p3c-paste-modal .p3c-paste-seo > summary::-webkit-details-marker { display: none; }
body[data-screen] .p3c-paste-modal .p3c-paste-seo > summary small { padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--wl-muted); font-size: 11.5px; font-weight: 600; }
body[data-screen] .p3c-paste-modal .p3c-paste-seo > summary::after { content: "›"; margin-left: auto; font-size: 20px; color: #2448D8; transition: transform 160ms; }
body[data-screen] .p3c-paste-modal .p3c-paste-seo[open] > summary { border-bottom: 0; }
body[data-screen] .p3c-paste-modal .p3c-paste-seo[open] > summary::after { transform: rotate(90deg); }
body[data-screen] .p3c-paste-modal .p3c-paste-seo .p3c-paste-meta { padding: 0 18px 18px; }
body[data-screen] .p3c-paste-modal .p3c-paste-seo :is(input, textarea).p3s-form-input { background: #fff !important; }
body[data-screen] .p3c-paste-modal .p3c-paste-error { border-radius: 16px; background: #FFF0F0; color: #9A1C1C; font-size: 12.5px; }
body[data-screen] .p3c-paste-modal .p3r-modal__foot { padding: 16px 26px 22px !important; border-top: 0 !important; }
body[data-screen] .p3c-paste-modal .p3r-btn { min-height: 46px; height: 46px; padding: 0 22px; border-radius: 999px !important; }
@media (max-width: 760px) {
  body[data-screen] .p3c-paste-modal .p3c-paste-preview { margin-top: 0; min-height: 260px; }
}

/* Duyệt bài · SEO work in the assistant column: one white card per issue */
body[data-screen] #view-review .wl-seo-cards { display: flex; flex-direction: column; gap: 12px; }
body[data-screen] #view-review .wl-seo-cards[hidden] { display: none; }
body[data-screen] #view-review .wl-seo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 6px 0; }
body[data-screen] #view-review .wl-seo-head h2 { margin: 0; font-family: var(--wl-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--wl-ink); }
body[data-screen] #view-review .wl-seo-head span { font-size: 12.5px; font-weight: 600; color: var(--wl-muted); }
body[data-screen] #view-review .wl-seo-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; border-radius: 24px; background: #fff; box-shadow: 0 10px 26px rgb(40 70 180 / 8%); }
body[data-screen] #view-review .wl-seo-card--blocked { box-shadow: 0 0 0 1.5px #FFC9C9, 0 10px 26px rgb(214 69 69 / 8%); }
body[data-screen] #view-review .wl-seo-card__head { display: flex; align-items: center; gap: 10px; }
body[data-screen] #view-review .wl-seo-card__n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--wl-grad); color: #fff; font-size: 13px; font-weight: 700; }
body[data-screen] #view-review .wl-seo-card--blocked .wl-seo-card__n { background: linear-gradient(135deg, #D64545, #F08A8A); }
body[data-screen] #view-review .wl-seo-card__head h3 { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--wl-ink); }
body[data-screen] #view-review .wl-seo-pill { flex: none; padding: 3px 9px; border-radius: 999px; background: #FFF4DB; color: #7A4A00; font-size: 11px; font-weight: 700; white-space: nowrap; }
body[data-screen] #view-review .wl-seo-pill--bad { background: #FFECEC; color: #9A1C1C; }
body[data-screen] #view-review :is(.wl-seo-card__where, .wl-seo-card__fix) { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 12.5px; line-height: 1.5; color: #2B3456; }
body[data-screen] #view-review :is(.wl-seo-card__where, .wl-seo-card__fix) b { font-size: 11px; font-weight: 700; color: var(--wl-muted); }
body[data-screen] #view-review .wl-seo-card__fix { padding: 10px 12px; border-radius: 16px; background: #F4F7FF; }
body[data-screen] #view-review .wl-seo-actions { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-screen] #view-review .wl-seo-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid #E4E9F7; border-radius: 999px; background: #fff;
  color: #2B3456; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
body[data-screen] #view-review .wl-seo-btn .material-symbols-outlined { font-size: 16px; }
body[data-screen] #view-review .wl-seo-btn:hover:not(:disabled) { border-color: #A9BCFF; color: #2448D8; }
body[data-screen] #view-review :is(.wl-seo-btn--ai, .wl-seo-btn--primary) { border-color: transparent; background: var(--wl-grad); color: #fff; box-shadow: 0 6px 14px rgb(62 107 255 / 22%); }
body[data-screen] #view-review :is(.wl-seo-btn--ai, .wl-seo-btn--primary):hover:not(:disabled) { color: #fff; }
body[data-screen] #view-review .wl-seo-btn:disabled { opacity: .55; cursor: default; }
body[data-screen] #view-review .wl-seo-loading { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #EEF3FF; color: #2448D8; font-size: 12.5px; font-weight: 600; }
body[data-screen] #view-review .wl-seo-error { margin: 0; padding: 8px 12px; border-radius: 14px; background: #FFF0F0; color: #9A1C1C; font-size: 12.5px; }
body[data-screen] #view-review .wl-seo-opts { display: flex; flex-direction: column; gap: 8px; }
body[data-screen] #view-review .wl-seo-opt { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 18px; border: 1px solid #EEF1FA; background: #FAFBFF; }
body[data-screen] #view-review .wl-seo-opt.is-previewing { border-color: #7C97FF; background: #F1F4FF; box-shadow: 0 0 0 3px #E6EDFF; }
body[data-screen] #view-review .wl-seo-opt__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--wl-ink); }
body[data-screen] #view-review .wl-seo-opt__head span { color: #2448D8; font-weight: 600; }
body[data-screen] #view-review .wl-seo-opt__copy { margin: 0; font-size: 12.5px; line-height: 1.55; color: #2B3456; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
body[data-screen] #view-review .wl-seo-opt.is-previewing .wl-seo-opt__copy { -webkit-line-clamp: unset; }
body[data-screen] #view-review .wl-seo-opt__actions { display: flex; gap: 6px; flex-wrap: wrap; }
body[data-screen] #view-review .wl-seo-clear { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 22px; background: #E9F8F1; color: #0F5A40; font-size: 13px; font-weight: 600; }
body[data-screen] #view-review .wl-seo-passed { border-radius: 22px; background: rgb(255 255 255 / 80%); }
body[data-screen] #view-review .wl-seo-passed > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; font-size: 13px; font-weight: 600; color: #0F5A40; cursor: pointer; }
body[data-screen] #view-review .wl-seo-passed > summary::-webkit-details-marker { display: none; }
body[data-screen] #view-review .wl-seo-passed > summary .material-symbols-outlined { font-size: 18px; color: #12A26B; }
body[data-screen] #view-review .wl-seo-passed > summary::after { content: "›"; margin-left: auto; font-size: 18px; color: var(--wl-muted); transition: transform 160ms; }
body[data-screen] #view-review .wl-seo-passed[open] > summary::after { transform: rotate(90deg); }
body[data-screen] #view-review .wl-seo-passed ul { margin: 0; padding: 0 16px 14px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
body[data-screen] #view-review .wl-seo-passed li { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--wl-muted); }
body[data-screen] #view-review .wl-seo-passed li b { font-size: 12.5px; color: var(--wl-ink); }
/* Preview inside the draft: old text struck, the AI option right below it */
body[data-screen] #view-review .wl-seo-old { opacity: .55; text-decoration: line-through; text-decoration-color: rgb(214 69 69 / 55%); }
body[data-screen] #view-review .wl-seo-new { margin: 10px 0 18px; padding: 12px 16px 14px; border-radius: 18px; background: #EEF7F1; box-shadow: inset 0 0 0 1.5px #9FDDBF; }
body[data-screen] #view-review .wl-seo-new__tag { display: inline-flex; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: #12A26B; color: #fff; font-size: 11px; font-weight: 700; }
body[data-screen] #view-review .wl-seo-new__copy { font-size: 15px; line-height: 1.75; color: var(--wl-ink); white-space: pre-line; }
body[data-screen] #view-review .wl-seo-opt__actions .wl-seo-btn { width: auto; min-width: 0; flex: none; margin: 0; }

/* Duyệt bài · Image Studio: the start button spans the card like the switches below */
body[data-screen] #view-review .p3r-imgstudio__head { flex-wrap: wrap; }
body[data-screen] #view-review .p3r-imgstudio__head .p3r-imgstudio__btn { flex: 1 1 100%; width: 100%; justify-content: center; min-height: 46px; border-radius: 999px; }
/* Trợ lý duyệt bài: white score lifted off the pale end of the gradient by a deep blue shadow */
body[data-screen] #view-review .p3r-context-score > div:first-child > b {
  color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 500;
  text-shadow: 0 2px 0 rgb(30 59 201 / 45%), 0 6px 18px rgb(18 36 150 / 55%), 0 0 32px rgb(43 87 242 / 45%);
}
/* Kho · list rows on phones: one column, no legacy grid placement */
@media (max-width: 699px) {
  body[data-screen] #view-library [data-layout="list"] .studio-content-card > * { grid-column: 1 !important; grid-row: auto !important; }
  body[data-screen] #view-library [data-layout="list"] .studio-content-card__top { display: flex !important; }
  body[data-screen] #view-library [data-layout="list"] .studio-content-card__top > * { grid-column: auto !important; grid-row: auto !important; }
  body[data-screen] #view-library [data-layout="list"] .studio-content-card__body > * { grid-column: auto; }
}
/* Kho · header on phones: title row, full-width search pill, buttons on one row */
@media (max-width: 699px) {
  body[data-screen] #view-library .studio-page-heading { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  body[data-screen] #view-library .studio-library__title { flex: 1 1 100%; justify-content: start; }
  body[data-screen] #view-library .studio-library__title h1 { font-size: 34px; }
  body[data-screen] #view-library .studio-library__search { flex: 1 1 100% !important; width: 100%; height: 46px !important; min-height: 46px; max-height: 46px; margin: 0; }
  body[data-screen] #view-library .studio-page-heading > .p3e-filter-btn { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 699px) { body[data-screen] #view-library :is(.studio-library__toolbar, .studio-library__filters, .studio-page-heading) button { white-space: nowrap; } }

/* ---------- Phone pass: layout fixes found at 390px ---------- */
@media (max-width: 699px) {
  /* Thành viên: one column; the desktop 310px side column squeezed the directory to 26px */
  body[data-screen] #view-members .p3m-page { grid-template-columns: minmax(0, 1fr); }
  body[data-screen] #view-members .p3m-members-row { grid-template-columns: minmax(0, 1fr); }
  body[data-screen] #view-members .p3m-hero { align-items: stretch; gap: 14px; }
  body[data-screen] #view-members .p3m-hero-text { justify-content: flex-start; }
  body[data-screen] #view-members #btn-invite-member { align-self: flex-start; }

  /* Xưởng viết: stacked panels take the full width instead of wrapping side by side */
  body[data-screen] #view-generator #form-generator { flex-direction: column; flex-wrap: nowrap; height: auto; }
  body[data-screen] #view-generator #form-generator > * { width: 100%; max-width: none; flex: 0 0 auto; align-self: stretch; }
  body[data-screen] #view-generator .p3a-keyword-actions { flex-wrap: wrap; }
  body[data-screen] #view-generator .p3a-keyword-actions button { white-space: nowrap; }
  body[data-screen] #view-generator #writer-thinking-settings .p3a-thinking-mode-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  body[data-screen] #view-generator #writer-thinking-settings .p3a-thinking-mode-row .p3a-chip { min-width: 0; width: auto; white-space: nowrap; }

  /* Cài đặt: search and section picker span the card */
  body[data-screen] #view-settings .p3s-sidebar { align-items: stretch; padding: 12px; }
  body[data-screen] #view-settings :is(.p3s-control-center-head, .p3s-nav-tools, .p3s-section-chooser) { width: 100%; max-width: none; margin-inline: 0; justify-self: stretch; }

  /* Kho nội dung: filter pills keep their label on one line; star sits at the card's right edge */
  body[data-screen] #view-library .studio-library__workspace > .studio-library__collections .p3e-rail-item,
  body[data-screen] #view-library .p3e-content-mode button { white-space: nowrap; }
  body[data-screen] #view-library .p3e-content-mode button { padding: 0 12px; }
  body[data-screen] #view-library [data-layout="cards"] .studio-content-card__top .p3e-star { margin-right: 0; }

  /* Trang chủ: room for the tilted fresh card so it no longer covers the next section */
  .wl-fresh { min-height: 356px; }

  /* Phân tích: title on its own line, range switch below */
  body[data-screen] #view-analytics .wl-analytics-head { flex-wrap: wrap; align-items: flex-start; gap: 14px; }
  body[data-screen] #view-analytics .wl-analytics-head .wl-head-title { flex: 1 1 100%; }
  body[data-screen] #view-analytics .wl-analytics-head h1 { white-space: nowrap; }

  /* Duyệt bài: SEO popover stays inside the screen; body text uses the card width; source chips wrap */
  body[data-screen] #view-review .p3r-preview-actions { position: relative; }
  body[data-screen] #view-review .p3r-seo-disclosure #p3r-seo-meta { left: 0; right: 0; width: auto; max-width: none; }
  body[data-screen] #view-review .studio-review__reader > .p3r-article { padding: 16px 14px 28px; }
  body[data-screen] #view-review .p3r-src-sec { max-width: 100%; }
}