/* Scoped desktop styles from the supplied office productivity design. */
@property --fv-writing-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media screen and (min-width: 921px) {
.fuuvo-writing-page { color-scheme: light; --rail: 76px; --gutter: 36px; --ink: #233c49; --muted: #607780; --teal: #16796f; --teal-dark: #166e66; --line: #dce6e7; --cycle: 8s; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.fuuvo-writing-page * { box-sizing: border-box; }
.fuuvo-writing-page { scroll-behavior: smooth; }
.fuuvo-writing-page { margin: 0px; background: rgb(255, 255, 255); color: var(--ink); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; isolation: isolate; }
.fuuvo-writing-page button, .fuuvo-writing-page input, .fuuvo-writing-page select, .fuuvo-writing-page textarea { font: inherit; color: inherit; }
.fuuvo-writing-page button, .fuuvo-writing-page a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fuuvo-writing-page button { cursor: pointer; border: 0px; }
.fuuvo-writing-page button:disabled { opacity: 0.4; cursor: not-allowed; }
.fuuvo-writing-page a { color: inherit; text-decoration: none; }
.fuuvo-writing-page h1, .fuuvo-writing-page h2, .fuuvo-writing-page h3, .fuuvo-writing-page p { margin: 0px; }
.fuuvo-writing-page button, .fuuvo-writing-page input, .fuuvo-writing-page select, .fuuvo-writing-page textarea, .fuuvo-writing-page a, .fuuvo-writing-page [tabindex] { outline-offset: 4px; }
.fuuvo-writing-page button:focus-visible, .fuuvo-writing-page a:focus-visible, .fuuvo-writing-page [tabindex]:focus-visible { outline: rgb(22, 121, 111) solid 2px; }
.fuuvo-writing-page input:focus-visible, .fuuvo-writing-page select:focus-visible, .fuuvo-writing-page textarea:focus-visible { outline: rgb(67, 143, 136) solid 2px; }
.fuuvo-writing-page img { max-width: 100%; display: block; }
.fuuvo-writing-page svg { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.fuuvo-writing-page i[data-icon] { display: inline-flex; align-items: center; justify-content: center; font-style: normal; flex-shrink: 0; }
.fuuvo-writing-page button svg, .fuuvo-writing-page a svg { pointer-events: none; }
.fuuvo-writing-page [hidden] { display: none !important; }
.fuuvo-writing-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
.fuuvo-writing-page ::selection { background: rgb(205, 235, 232); }
.fuuvo-writing-page .skip-link { position: fixed; left: 90px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: rgb(255, 255, 255); transform: translateY(-150%); }
.fuuvo-writing-page .skip-link:focus { transform: none; }
.fuuvo-writing-page .writing-ambient { position: absolute; inset: 0 0 auto var(--rail); height: min(620px, 76vh); pointer-events: none; z-index: -1; overflow: hidden; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 12%, rgba(0, 0, 0, 0.867) 37%, rgba(0, 0, 0, 0.4) 66%, transparent 100%); background: radial-gradient(at 9% -12%, rgba(24, 211, 197, 0.34), transparent 54%), radial-gradient(at 51% -20%, rgba(77, 158, 255, 0.3), transparent 59%), radial-gradient(at 91% -6%, rgba(231, 126, 226, 0.27), transparent 55%); }
.fuuvo-writing-page .writing-ambient::after { content: ""; position: absolute; inset: 0px; background: radial-gradient(at 11% -6%, rgba(65, 142, 255, 0.31), transparent 56%), radial-gradient(at 53% -12%, rgba(255, 111, 144, 0.3), transparent 60%), radial-gradient(at 94% -12%, rgba(255, 198, 78, 0.35), transparent 56%); animation: writing-ambient var(--cycle) ease-in-out infinite; opacity: 0.08; }
@keyframes writing-ambient {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 1; }
}
@keyframes writing-ring {
  100% { --fv-writing-angle: 360deg; }
}
@keyframes writing-button {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.fuuvo-writing-page .history-rail { position: fixed; inset: 0px auto 0px 0px; width: var(--rail); z-index: 30; display: flex; align-items: center; flex-direction: column; gap: 10px; padding: 20px 6px; background: rgb(255, 255, 255); border-right: 1px solid rgb(231, 238, 238); }
.fuuvo-writing-page .brand { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 38px; margin-bottom: 24px; font-size: 12px; font-weight: 650; color: rgb(35, 60, 73); }
.fuuvo-writing-page .brand img { width: 16px; height: 25px; object-fit: contain; }
.fuuvo-writing-page .rail-link { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; width: 62px; min-height: 66px; border-radius: 10px; background: transparent; font-size: 11px; font-weight: 550; color: rgb(97, 115, 124); }
.fuuvo-writing-page .rail-link svg { width: 22px; height: 22px; }
.fuuvo-writing-page .rail-link:hover { background: rgb(242, 248, 246); color: var(--teal); }
.fuuvo-writing-page .history-workspace { margin-left: var(--rail); min-height: 100dvh; }
.fuuvo-writing-page .history-topbar { height: 78px; max-width: 1600px; margin: 0px auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: transparent; border: 0px; position: relative; }
.fuuvo-writing-page .back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: rgb(65, 95, 105); }
.fuuvo-writing-page .back-link svg { width: 17px; height: 17px; }
.fuuvo-writing-page .top-actions { display: flex; align-items: center; gap: 20px; }
.fuuvo-writing-page .writing-safety { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgb(64, 92, 103); }
.fuuvo-writing-page .writing-safety svg { width: 17px; height: 17px; color: rgb(22, 119, 237); }
.fuuvo-writing-page .preview-badge { font-size: 11px; padding: 3px 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.78); color: rgb(88, 113, 122); }
.fuuvo-writing-page .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 6px 10px; border-radius: 8px; background: transparent; font-size: 13px; color: rgb(72, 104, 115); font-weight: 500; }
.fuuvo-writing-page .text-button:hover { background: rgb(244, 248, 247); color: var(--teal); }
.fuuvo-writing-page .text-button svg { width: 16px; height: 16px; }
.fuuvo-writing-page .writing-global-menu { position: fixed; top: 226px; left: 86px; z-index: 60; display: flex; flex-direction: column; gap: 4px; width: 228px; padding: 14px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 14px; box-shadow: rgba(35, 60, 73, 0.094) 0px 16px 50px; }
.fuuvo-writing-page .writing-global-menu strong { font-size: 12px; padding: 6px 10px; color: rgb(96, 119, 128); }
.fuuvo-writing-page .writing-global-menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; }
.fuuvo-writing-page .writing-global-menu a:hover { background: rgb(245, 249, 248); }
.fuuvo-writing-page .writing-global-menu svg { width: 18px; height: 18px; }
.fuuvo-writing-page main { max-width: 1600px; margin: 0px auto; padding: 25px var(--gutter) 0; min-width: 0px; }
.fuuvo-writing-page .writing-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 0px 0px 28px; }
.fuuvo-writing-page .writing-heading .eyebrow { display: block; color: rgb(56, 110, 115); font-weight: 600; font-size: 12px; letter-spacing: 1.4px; margin-bottom: 8px; }
.fuuvo-writing-page .writing-heading h1 { font-size: 38px; line-height: 1.25; letter-spacing: -1.3px; font-weight: 650; color: rgb(25, 61, 71); }
.fuuvo-writing-page .title-dot { color: rgb(22, 121, 111); }
.fuuvo-writing-page .writing-heading p { font-size: 14px; color: rgb(73, 103, 115); margin-top: 10px; }
.fuuvo-writing-page .writing-history { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 14px; border: 1px solid rgb(211, 224, 229); border-radius: 10px; background: rgba(255, 255, 255, 0.7); color: rgb(59, 101, 112); font-size: 13px; }
.fuuvo-writing-page .writing-history svg { width: 16px; height: 16px; }
.fuuvo-writing-page .writing-history:hover { background: rgb(255, 255, 255); border-color: rgb(128, 173, 165); }
.fuuvo-writing-page .writing-studio { --writing-left: 36%; display: grid; grid-template-columns: minmax(0,var(--writing-left)) 24px minmax(0,1fr); align-items: stretch; scroll-margin-top: 24px; min-width: 0px; }
.fuuvo-writing-page .brief-panel, .fuuvo-writing-page .draft-panel { min-width: 0px; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); border-radius: 20px; box-shadow: rgba(25, 65, 68, 0.035) 0px 10px 35px; }
.fuuvo-writing-page .brief-panel { padding: 24px; display: flex; flex-direction: column; gap: 0px; }
.fuuvo-writing-page .panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.fuuvo-writing-page .panel-title h2 { font-size: 17px; line-height: 1.5; font-weight: 600; color: rgb(35, 60, 73); }
.fuuvo-writing-page .panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: rgb(240, 248, 245); color: rgb(22, 121, 111); border: 1px solid rgb(220, 236, 230); }
.fuuvo-writing-page .panel-icon svg { width: 18px; height: 18px; }
.fuuvo-writing-page .writing-mode { display: flex; gap: 6px; margin-bottom: 21px; }
.fuuvo-writing-page .writing-mode button { position: relative; flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 43px; padding: 9px 8px; border: 1px solid rgb(224, 232, 233); border-radius: 9px; background: rgb(255, 255, 255); font-size: 12px; color: rgb(76, 102, 112); }
.fuuvo-writing-page .writing-mode svg { width: 16px; height: 16px; }
.fuuvo-writing-page .field-label { display: block; font-size: 13px; font-weight: 600; color: rgb(44, 74, 85); margin-bottom: 9px; }
.fuuvo-writing-page #writingBrief, .fuuvo-writing-page #extraContext { display: block; width: 100%; min-width: 0px; min-height: 175px; padding: 13px 14px; border: 1px solid rgb(216, 228, 230); border-radius: 10px; background: rgb(255, 255, 255); color: rgb(49, 79, 90); font-size: 14px; line-height: 1.9; resize: vertical; scrollbar-width: thin; scrollbar-color: rgb(185, 207, 204) transparent; }
.fuuvo-writing-page #writingBrief::placeholder, .fuuvo-writing-page #extraContext::placeholder { color: rgb(101, 125, 133); }
.fuuvo-writing-page #writingBrief:focus, .fuuvo-writing-page #extraContext:focus { outline: 0px; border-color: rgb(71, 141, 134); box-shadow: rgba(22, 121, 111, 0.063) 0px 0px 0px 2px; }
.fuuvo-writing-page .brief-support { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; margin-bottom: 20px; color: rgb(96, 119, 128); font-size: 11px; line-height: 1.6; }
.fuuvo-writing-page #briefCount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fuuvo-writing-page .writing-settings { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px 12px; }
.fuuvo-writing-page .writing-settings label { display: flex; flex-direction: column; gap: 6px; min-width: 0px; font-size: 12px; color: rgb(72, 97, 109); }
.fuuvo-writing-page .writing-settings select, .fuuvo-writing-page .writing-settings input { width: 100%; min-width: 0px; min-height: 42px; padding: 9px 11px; border: 1px solid rgb(219, 229, 231); border-radius: 9px; background: rgb(255, 255, 255); font-size: 13px; color: rgb(46, 74, 85); }
.fuuvo-writing-page .writing-settings input::placeholder { color: rgb(106, 127, 136); }
.fuuvo-writing-page .writing-settings select { padding-right: 5px; }
.fuuvo-writing-page .writing-context { margin-top: 17px; border-block: 1px solid rgb(228, 236, 236); padding: 2px 0px; }
.fuuvo-writing-page .writing-context summary { display: flex; justify-content: space-between; align-items: center; min-height: 42px; gap: 10px; cursor: pointer; list-style: none; font-size: 12px; color: rgb(72, 108, 118); }
.fuuvo-writing-page .writing-context summary::-webkit-details-marker { display: none; }
.fuuvo-writing-page .writing-context summary > span { display: flex; align-items: center; gap: 7px; }
.fuuvo-writing-page .writing-context summary svg { width: 16px; height: 16px; }
.fuuvo-writing-page .writing-context[open] summary > i { transform: rotate(180deg); }
.fuuvo-writing-page .writing-context[open] { padding-bottom: 12px; }
.fuuvo-writing-page .writing-context .field-label { font-size: 12px; margin-top: 7px; }
.fuuvo-writing-page #extraContext { min-height: 100px; font-size: 13px; }
.fuuvo-writing-page .reference-upload { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 10px; border: 1px dashed rgb(153, 186, 180); border-radius: 9px; color: rgb(37, 110, 101); background: rgb(250, 253, 252); font-size: 12px; cursor: pointer; }
.fuuvo-writing-page .reference-upload svg { width: 19px; height: 19px; }
.fuuvo-writing-page .reference-upload input { position: absolute; inset: 0px; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.fuuvo-writing-page .reference-upload:focus-within { outline: rgb(22, 121, 111) solid 2px; outline-offset: 3px; }
.fuuvo-writing-page .reference-upload.is-dragover, .fuuvo-writing-page .writing-context.is-dragover { border-color: rgb(22, 121, 111); background: rgb(240, 250, 245); }
.fuuvo-writing-page #referenceStatus { font-size: 11px; color: rgb(96, 119, 128); margin-top: 6px; overflow-wrap: anywhere; }
.fuuvo-writing-page .writing-illustration { position: relative; align-self: flex-start; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 11px; margin-top: 12px; border: 1px solid rgb(220, 230, 231); border-radius: 8px; font-size: 12px; color: rgb(59, 96, 106); cursor: pointer; }
.fuuvo-writing-page .writing-illustration input { appearance: none; width: 17px; height: 17px; margin: 0px; border: 1px solid rgb(140, 166, 168); border-radius: 5px; background: white; cursor: pointer; }
.fuuvo-writing-page .writing-illustration input:checked { background: radial-gradient(circle, rgb(22, 121, 111) 0px, rgb(22, 121, 111) 3.5px, rgb(255, 255, 255) 4px); border-color: rgb(22, 121, 111); }
.fuuvo-writing-page .brief-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 18px; margin-top: auto; }
.fuuvo-writing-page .primary-button, .fuuvo-writing-page .outline-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 16px; border: 1px solid rgb(220, 230, 231); border-radius: 10px; font-size: 13px; font-weight: 600; }
.fuuvo-writing-page .primary-button { background: linear-gradient(110deg, rgb(20, 110, 112), rgb(36, 86, 187) 26%, rgb(113, 66, 172) 50%, rgb(163, 55, 115) 72%, rgb(20, 110, 112)) 0% 0% / 240% 100%; animation: writing-button var(--cycle) ease-in-out infinite; color: rgb(255, 255, 255); border-color: transparent; }
.fuuvo-writing-page .primary-button:hover:not(:disabled) { filter: brightness(1.06); }
.fuuvo-writing-page .outline-button { background: white; color: rgb(55, 92, 103); }
.fuuvo-writing-page .primary-button svg, .fuuvo-writing-page .outline-button svg { width: 17px; height: 17px; }
.fuuvo-writing-page .brief-bottom > .primary-button { width: 100%; min-height: 48px; }
.fuuvo-writing-page .brief-bottom > .primary-button > span { flex: 1 1 0%; }
.fuuvo-writing-page .brief-bottom > .text-button { font-size: 12px; min-height: 35px; }
.fuuvo-writing-page .brief-bottom p { font-size: 11px; line-height: 1.7; color: rgb(96, 119, 128); text-align: center; }
.fuuvo-writing-page .brief-bottom p:empty { display: none; }
.fuuvo-writing-page .writing-splitter { position: relative; cursor: col-resize; display: flex; align-items: flex-start; justify-content: center; touch-action: none; padding-top: 250px; outline-offset: -6px; }
.fuuvo-writing-page .writing-splitter span { height: 40px; width: 4px; border-radius: 4px; background: rgb(197, 216, 213); transition: background 0.2s; }
.fuuvo-writing-page .writing-splitter:hover span, .fuuvo-writing-page .writing-splitter:focus-visible span { background: rgb(67, 143, 135); }
.fuuvo-writing-page .writing-splitter:focus-visible { outline: rgb(125, 176, 166) solid 1px; border-radius: 10px; }
.fuuvo-writing-page .is-resizing { cursor: col-resize; user-select: none; }
.fuuvo-writing-page .is-resizing textarea, .fuuvo-writing-page .is-resizing input, .fuuvo-writing-page .is-resizing [contenteditable] { pointer-events: none; }
.fuuvo-writing-page .draft-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 680px; position: relative; }
.fuuvo-writing-page .draft-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 68px; padding: 12px 20px; border-bottom: 1px solid rgb(229, 237, 237); background: rgb(255, 255, 255); }
.fuuvo-writing-page .draft-tabs { display: flex; align-items: center; gap: 7px; }
.fuuvo-writing-page .draft-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: rgb(255, 255, 255); color: rgb(78, 105, 115); font-size: 13px; white-space: nowrap; }
.fuuvo-writing-page .draft-tabs svg { width: 16px; height: 16px; }
.fuuvo-writing-page .draft-tools { display: flex; align-items: center; gap: 5px; }
.fuuvo-writing-page .icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 36px; padding: 6px; border-radius: 7px; background: white; color: rgb(73, 104, 115); }
.fuuvo-writing-page .icon-button:hover { background: rgb(243, 247, 246); }
.fuuvo-writing-page .icon-button svg { width: 17px; height: 17px; }
.fuuvo-writing-page .writing-export { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 8px 10px; background: rgb(255, 255, 255); border: 1px solid rgb(220, 230, 231); border-radius: 8px; color: rgb(49, 92, 101); font-size: 12px; }
.fuuvo-writing-page .writing-export svg { width: 16px; height: 16px; }
.fuuvo-writing-page .writing-formatting { display: flex; align-items: center; gap: 4px; padding: 10px 20px; border-bottom: 1px solid rgb(229, 237, 237); flex-wrap: wrap; background: rgb(251, 253, 252); }
.fuuvo-writing-page .writing-formatting select { min-width: 80px; min-height: 31px; max-width: 120px; font-size: 12px; border: 1px solid rgb(220, 230, 231); border-radius: 6px; background: rgb(255, 255, 255); padding: 4px 6px; margin-right: 7px; }
.fuuvo-writing-page .writing-formatting button { position: relative; display: flex; align-items: center; justify-content: center; min-width: 30px; min-height: 31px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 14px; color: rgb(61, 92, 101); }
.fuuvo-writing-page .writing-formatting button svg { width: 16px; height: 16px; }
.fuuvo-writing-page .writing-formatting button:hover { background: rgb(237, 244, 241); }
.fuuvo-writing-page .writing-formatting [data-editor-command="insertUnorderedList"], .fuuvo-writing-page .writing-formatting [data-editor-command="justifyLeft"], .fuuvo-writing-page #insertDraftImage { margin-left: 5px; }
.fuuvo-writing-page .draft-view { position: relative; display: flex; flex-direction: column; flex: 1 1 0%; padding: 28px 34px 30px; min-width: 0px; min-height: 480px; }
.fuuvo-writing-page .paper-kicker { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 11px; color: rgb(96, 119, 128); margin-bottom: 21px; }
.fuuvo-writing-page .paper-kicker > span:first-child { display: flex; align-items: center; gap: 7px; }
.fuuvo-writing-page .sample-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: rgb(43, 144, 129); flex-shrink: 0; }
.fuuvo-writing-page .draft-title { width: 100%; min-width: 0px; font-size: 25px; font-weight: 600; line-height: 1.5; padding: 0px; border: 0px; background: transparent; color: rgb(35, 60, 73); letter-spacing: -0.5px; }
.fuuvo-writing-page .draft-title:focus { outline: none; box-shadow: rgb(145, 190, 179) 0px 1px 0px; }
.fuuvo-writing-page .paper-divider { height: 2px; width: 40px; background: rgb(158, 199, 189); margin: 18px 0px 21px; border-radius: 2px; }
.draft-.fuuvo-writing-page { width: 100%; min-height: 350px; min-width: 0px; flex: 1 1 0%; font-size: 15px; line-height: 1.95; color: rgb(52, 79, 91); word-break: break-word; outline: none; }
.draft-.fuuvo-writing-page p { margin: 0px 0px 1em; }
.draft-.fuuvo-writing-page h1, .draft-.fuuvo-writing-page h2, .draft-.fuuvo-writing-page h3 { font-size: 18px; margin: 1.15em 0px 0.55em; font-weight: 600; }
.draft-.fuuvo-writing-page ul, .draft-.fuuvo-writing-page ol { padding-left: 24px; margin: 0px 0px 1em; }
.draft-.fuuvo-writing-page img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: 16px 0px; }
.draft-.fuuvo-writing-page blockquote { margin: 10px 0px; border-left: 2px solid rgb(158, 199, 189); padding-left: 15px; }
.draft-.fuuvo-writing-page table { border-collapse: collapse; width: 100%; font-size: 13px; }
.draft-.fuuvo-writing-page td, .draft-.fuuvo-writing-page th { border: 1px solid rgb(220, 230, 231); padding: 8px; }
.fuuvo-writing-page .draft-watermark { display: none; }
.fuuvo-writing-page .draft-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 45px; padding: 12px 22px; border-top: 1px solid rgb(229, 237, 237); background: rgb(255, 255, 255); font-size: 11px; color: rgb(96, 119, 128); }
.fuuvo-writing-page #saveStatus { display: flex; align-items: center; gap: 7px; }
.fuuvo-writing-page #saveStatus svg { width: 14px; height: 14px; }
.fuuvo-writing-page .draft-feedback { padding: 10px 20px; color: rgb(45, 104, 95); background: rgb(241, 248, 245); font-size: 12px; border-top: 1px solid rgb(220, 230, 231); }
.fuuvo-writing-page .draft-feedback:empty { display: none; }
.fuuvo-writing-page .prompt-view { display: flex; flex: 1 1 0%; flex-direction: column; padding: 28px 30px; min-height: 520px; }
.fuuvo-writing-page .prompt-view-heading { display: flex; align-items: center; gap: 8px; color: rgb(70, 102, 112); font-size: 12px; margin-bottom: 17px; }
.fuuvo-writing-page .full-prompt { flex: 1 1 0%; width: 100%; min-width: 0px; min-height: 400px; padding: 15px; border: 1px solid rgb(220, 230, 231); border-radius: 10px; resize: vertical; font-size: 13px; line-height: 1.9; background: rgb(252, 253, 253); color: rgb(52, 79, 91); }
.fuuvo-writing-page .prompt-view > p { font-size: 12px; color: rgb(96, 119, 128); margin-top: 12px; }
.fuuvo-writing-page :is(.writing-mode button, .draft-tabs button, .template-filters button, .writing-formatting button, .writing-template-card):is([aria-pressed="true"], [aria-selected="true"], .active, .selected, [data-active="true"], [data-selected="true"]), .fuuvo-writing-page .writing-illustration:has(input:checked) { position: relative; isolation: isolate; color: rgb(22, 110, 102); box-shadow: none; background: rgb(255, 255, 255) !important; border-color: transparent !important; }
.fuuvo-writing-page :is(.writing-mode button, .draft-tabs button, .template-filters button, .writing-formatting button, .writing-template-card):is([aria-pressed="true"], [aria-selected="true"], .active, .selected, [data-active="true"], [data-selected="true"])::before, .fuuvo-writing-page .writing-illustration:has(input:checked)::before { content: ""; position: absolute; inset: 0px; padding: 1.5px; border-radius: inherit; pointer-events: none; z-index: 2; background: conic-gradient(from var(--fv-writing-angle),#096bfa,#059b58,#e9ad00,#f77919,#ee3159,#893bcc,#096bfa); mask: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) content-box exclude, linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); animation: writing-ring var(--cycle) linear infinite; }
.fuuvo-writing-page .writing-templates { padding-top: 48px; padding-bottom: 40px; scroll-margin-top: 25px; }
.fuuvo-writing-page .template-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.fuuvo-writing-page .template-section-heading .eyebrow { display: block; font-size: 11px; letter-spacing: 1px; color: rgb(71, 120, 113); margin-bottom: 7px; }
.fuuvo-writing-page .template-section-heading h2 { font-size: 25px; font-weight: 600; letter-spacing: -0.5px; color: rgb(35, 60, 73); }
.fuuvo-writing-page .template-section-heading p { font-size: 13px; color: rgb(96, 119, 128); margin-top: 6px; }
.fuuvo-writing-page .template-search { display: flex; align-items: center; gap: 8px; width: 260px; max-width: 100%; padding: 0px 12px; border: 1px solid rgb(220, 230, 231); border-radius: 9px; background: rgb(255, 255, 255); }
.fuuvo-writing-page .template-search svg { width: 17px; height: 17px; color: rgb(96, 119, 128); }
.fuuvo-writing-page .template-search input { border: 0px; min-width: 0px; width: 100%; height: 42px; font-size: 13px; background: transparent; outline: 0px; }
.fuuvo-writing-page .template-search:focus-within { outline: rgb(67, 143, 136) solid 2px; outline-offset: 3px; }
.fuuvo-writing-page .template-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fuuvo-writing-page .template-filters button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid rgb(220, 230, 231); border-radius: 8px; font-size: 12px; background: rgb(255, 255, 255); color: rgb(71, 99, 109); }
.fuuvo-writing-page .template-filters svg { width: 15px; height: 15px; }
.fuuvo-writing-page .template-filters small { font-size: 10px; color: rgb(96, 119, 128); }
.fuuvo-writing-page .writing-template-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 16px; }
.fuuvo-writing-page .writing-template-card { --tile-ink: #247a66; --tile-bg: #edf8f2; position: relative; border: 1px solid rgb(220, 230, 231); border-radius: 14px; background: rgb(255, 255, 255); min-width: 0px; overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s; }
.fuuvo-writing-page .writing-template-card[data-category="marketing"] { --tile-ink: #a26228; --tile-bg: #fff5e9; }
.fuuvo-writing-page .writing-template-card[data-category="social"] { --tile-ink: #8052b0; --tile-bg: #f6f0fc; }
.fuuvo-writing-page .writing-template-card[data-category="longform"] { --tile-ink: #2f72ad; --tile-bg: #eef6fd; }
.fuuvo-writing-page .writing-template-card:hover { border-color: rgb(151, 186, 179); box-shadow: rgba(25, 65, 68, 0.04) 0px 8px 24px; }
.fuuvo-writing-page .template-open { position: relative; display: flex; align-items: flex-start; flex-direction: column; width: 100%; min-height: 218px; padding: 20px; text-align: left; background: transparent; color: inherit; }
.fuuvo-writing-page .template-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--tile-bg); color: var(--tile-ink); margin-bottom: 17px; }
.fuuvo-writing-page .template-icon svg { width: 20px; height: 20px; }
.fuuvo-writing-page .template-tag { position: absolute; top: 29px; right: 18px; font-size: 10px; color: rgb(96, 119, 128); max-width: calc(100% - 85px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuuvo-writing-page .template-open h3 { font-size: 15px; font-weight: 600; color: rgb(43, 73, 83); margin: 0px 0px 7px; }
.fuuvo-writing-page .template-open > p { font-size: 12px; line-height: 1.8; color: rgb(96, 119, 128); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 44px; margin-bottom: 16px; }
.fuuvo-writing-page .template-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid rgb(232, 238, 238); font-size: 11px; color: rgb(63, 116, 110); }
.fuuvo-writing-page .template-card-footer svg { width: 16px; height: 16px; }
.fuuvo-writing-page .writing-no-results { display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 55px; border: 1px dashed rgb(200, 219, 213); border-radius: 14px; color: rgb(96, 119, 128); }
.fuuvo-writing-page .writing-no-results h3 { font-size: 18px; font-weight: 500; }
.fuuvo-writing-page .history-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgb(227, 235, 234); padding: 24px 0px 28px; font-size: 11px; color: rgb(96, 119, 128); }
.fuuvo-writing-page .history-footer > span { display: flex; align-items: center; gap: 13px; }
.fuuvo-writing-page .history-footer img { width: 58px; height: auto; }
.fuuvo-writing-page .history-footer a { font-size: 12px; }
.fuuvo-writing-page .replace-dialog { width: 450px; max-width: calc(-32px + 100vw); padding: 28px; border: 1px solid rgb(220, 230, 231); border-radius: 18px; box-shadow: rgba(25, 61, 71, 0.15) 0px 24px 100px; color: rgb(35, 60, 73); }
.fuuvo-writing-page .replace-dialog::backdrop { background: rgba(23, 59, 73, 0.23); backdrop-filter: blur(3px); }
.fuuvo-writing-page .replace-dialog > .panel-icon { margin-bottom: 16px; }
.fuuvo-writing-page .replace-dialog h2 { font-size: 24px; line-height: 1.4; }
.fuuvo-writing-page .replace-dialog p { font-size: 14px; color: rgb(82, 109, 118); line-height: 1.9; margin-top: 12px; }
.fuuvo-writing-page .replace-dialog > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 23px; flex-wrap: wrap; }
.fuuvo-writing-page[data-page-hidden="true"] .writing-ambient::after, .fuuvo-writing-page[data-page-hidden="true"] .primary-button, .fuuvo-writing-page[data-page-hidden="true"] ::before, .fuuvo-writing-page[data-page-hidden="true"] ::after { animation-play-state: paused !important; }
@media (min-width: 1600px) {
.fuuvo-writing-page { --gutter: 45px; }
.fuuvo-writing-page .writing-studio { --writing-left: 35%; }
.fuuvo-writing-page .brief-panel { padding: 28px; }
.fuuvo-writing-page .draft-view { padding: 34px 42px; }
.draft-.fuuvo-writing-page { font-size: 16px; }
.fuuvo-writing-page .draft-title { font-size: 28px; }
}
@media (max-width: 1100px) {
.fuuvo-writing-page { --gutter: 24px; }
.fuuvo-writing-page .writing-studio { grid-template-columns: minmax(0px, 38%) 18px minmax(0px, 1fr); }
.fuuvo-writing-page .brief-panel { padding: 20px; }
.fuuvo-writing-page .draft-topbar { padding: 11px 14px; flex-wrap: wrap; gap: 6px; }
.fuuvo-writing-page .draft-tools { margin-left: auto; }
.fuuvo-writing-page .draft-view { padding: 26px; }
.fuuvo-writing-page .writing-template-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.fuuvo-writing-page .writing-heading h1 { font-size: 34px; }
.fuuvo-writing-page .top-actions { gap: 12px; }
.fuuvo-writing-page .preview-badge { display: none; }
.fuuvo-writing-page .writing-mode button { font-size: 11px; }
.fuuvo-writing-page .writing-formatting { padding-inline: 14px; }
}
@media (max-width: 920px) {
.fuuvo-writing-page { --rail: 64px; --gutter: 22px; }
.fuuvo-writing-page .brand { font-size: 10px; }
.fuuvo-writing-page .brand img { width: 14px; }
.fuuvo-writing-page .rail-link { width: 52px; font-size: 10px; }
.fuuvo-writing-page .writing-studio { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 22px; }
.fuuvo-writing-page .writing-splitter { display: none; }
.fuuvo-writing-page .brief-panel { padding: 25px; }
.fuuvo-writing-page #writingBrief { min-height: 160px; }
.fuuvo-writing-page .draft-panel { min-height: 630px; }
.draft-.fuuvo-writing-page { min-height: 330px; }
.fuuvo-writing-page .writing-settings { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.fuuvo-writing-page .writing-template-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.fuuvo-writing-page .writing-safety { font-size: 11px; }
.fuuvo-writing-page .writing-heading { align-items: flex-start; }
.fuuvo-writing-page .template-section-heading { align-items: flex-start; flex-direction: column; }
.fuuvo-writing-page .template-search { width: 100%; }
.fuuvo-writing-page .writing-ambient { height: 520px; }
.fuuvo-writing-page .history-topbar { height: 68px; }
.fuuvo-writing-page .writing-global-menu { left: 74px; }
}
@media (max-width: 600px) {
.fuuvo-writing-page { --rail: 0px; --gutter: 18px; }
.fuuvo-writing-page .history-rail { display: none; }
.fuuvo-writing-page .history-topbar { height: 63px; }
.fuuvo-writing-page .back-link { font-size: 12px; }
.fuuvo-writing-page .writing-safety span { display: none; }
.fuuvo-writing-page .top-actions { gap: 14px; }
.fuuvo-writing-page main { padding-top: 20px; }
.fuuvo-writing-page .writing-heading { flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.fuuvo-writing-page .writing-heading h1 { font-size: 31px; }
.fuuvo-writing-page .writing-heading p { font-size: 13px; }
.fuuvo-writing-page .writing-history { min-height: 38px; font-size: 12px; }
.fuuvo-writing-page .writing-heading .eyebrow { font-size: 11px; }
.fuuvo-writing-page .brief-panel { padding: 21px 18px; }
.fuuvo-writing-page .draft-view { padding: 25px 21px; }
.fuuvo-writing-page .draft-title { font-size: 23px; }
.draft-.fuuvo-writing-page { font-size: 15px; }
.fuuvo-writing-page .writing-formatting { gap: 2px; padding: 8px 12px; }
.fuuvo-writing-page .writing-formatting button { min-width: 28px; }
.fuuvo-writing-page .draft-topbar { padding: 11px 12px; }
.fuuvo-writing-page .draft-tabs button { padding: 8px 10px; font-size: 12px; }
.fuuvo-writing-page .writing-export span { display: none; }
.fuuvo-writing-page .draft-tools { gap: 1px; }
.fuuvo-writing-page .draft-footer { padding: 12px 16px; font-size: 10px; }
.fuuvo-writing-page .writing-templates { padding-top: 36px; }
.fuuvo-writing-page .template-section-heading h2 { font-size: 23px; }
.fuuvo-writing-page .writing-template-grid { gap: 12px; }
.fuuvo-writing-page .template-open { min-height: 225px; padding: 17px 14px; }
.fuuvo-writing-page .template-tag { position: static; margin-bottom: 6px; font-size: 9px; max-width: 100%; }
.fuuvo-writing-page .template-icon { margin-bottom: 12px; }
.fuuvo-writing-page .template-open h3 { font-size: 14px; }
.fuuvo-writing-page .template-open > p { font-size: 12px; }
.fuuvo-writing-page .template-filters button { font-size: 11px; padding: 8px 10px; }
.fuuvo-writing-page .history-footer { align-items: flex-start; font-size: 10px; }
.fuuvo-writing-page .history-footer > span { flex-wrap: wrap; gap: 8px; }
.fuuvo-writing-page .history-footer a { font-size: 10px; white-space: nowrap; }
.fuuvo-writing-page .writing-global-menu { left: 18px; top: 63px; }
.fuuvo-writing-page .writing-settings select, .fuuvo-writing-page .writing-settings input, .fuuvo-writing-page #writingBrief, .fuuvo-writing-page #extraContext, .fuuvo-writing-page .full-prompt { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.fuuvo-writing-page { scroll-behavior: auto; }
.fuuvo-writing-page *, .fuuvo-writing-page ::before, .fuuvo-writing-page ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
.fuuvo-writing-page .writing-ambient::after { opacity: 0.45; }
}
.fuuvo-writing-page .template-filters button > span { font-size: 10px; color: rgb(96, 119, 128); }
@media (min-width: 921px) and (max-width: 1100px) {
.fuuvo-writing-page .writing-splitter { cursor: default; pointer-events: none; }
.fuuvo-writing-page .writing-splitter span { display: none; }
}
.fuuvo-writing-page .fv-language { position: relative; z-index: 70; flex-shrink: 0; }
.fuuvo-writing-page .fv-language-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 6px 0px 6px 5px; border: 0px; border-radius: 7px; background: transparent; color: rgb(59, 94, 107); font-size: 15px; font-weight: 500; }
.fuuvo-writing-page .fv-language-trigger > svg:first-child { width: 22px; height: 22px; }
.fuuvo-writing-page .language-chevron { width: 16px; height: 16px; transition: transform 0.18s; }
.fuuvo-writing-page .fv-language-trigger[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }
.fuuvo-writing-page .fv-language-trigger:hover { color: rgb(36, 72, 84); }
.fuuvo-writing-page .fv-language-menu { position: absolute; inset: calc(100% + 10px) 0px auto auto; min-width: 174px; padding: 9px; border: 1px solid rgb(220, 230, 231); border-radius: 17px; background: rgb(255, 255, 255); box-shadow: rgba(41, 75, 91, 0.05) 0px 10px 28px; color: rgb(52, 85, 99); display: flex; flex-direction: column; gap: 2px; }
.fuuvo-writing-page .fv-language-menu button { min-height: 46px; width: 100%; padding: 10px 14px; text-align: left; border: 0px; border-radius: 10px; background: rgb(255, 255, 255); font-size: 16px; font-weight: 400; color: rgb(52, 85, 99); }
.fuuvo-writing-page .fv-language-menu button:hover, .fuuvo-writing-page .fv-language-menu button:focus-visible { background: rgb(244, 248, 248); outline: 0px; color: rgb(35, 74, 87); }
.fuuvo-writing-page .fv-language-menu button[aria-checked="true"] { font-weight: 500; }
.fuuvo-writing-page .fv-field-frame { position: relative; isolation: isolate; min-width: 0px; width: 100%; border-radius: 10px; background: rgb(255, 255, 255); }
.fuuvo-writing-page .fv-field-frame > textarea, .fuuvo-writing-page .fv-field-frame > input, .fuuvo-writing-page .fv-field-frame > select, .fuuvo-writing-page .fv-field-frame > [contenteditable] { display: block; width: 100%; max-width: 100%; }
.fuuvo-writing-page .fv-field-frame--select { border-radius: 9px; }
.fuuvo-writing-page .writing-formatting > .fv-field-frame--select { width: auto; min-width: 80px; margin-right: 7px; border-radius: 6px; }
.fuuvo-writing-page .writing-formatting > .fv-field-frame--select > select { margin-right: 0px; min-width: 80px; }
.fv-field-frame--.fuuvo-writing-page { display: flex; flex: 1 1 0%; margin: 0px -12px; min-width: 0px; width: calc(100% + 24px); border-radius: 10px; }
.fuuvo-writing-page .fv-field-frame--body > #draftBody { padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; }
.fuuvo-writing-page .fv-field-frame--draftTitle { margin: 0px -10px; width: calc(100% + 20px); }
.fuuvo-writing-page #draftTitle { padding: 5px 10px; border: 1px solid transparent; border-radius: 10px; }
.fuuvo-writing-page .fv-field-frame--fullPrompt { flex: 1 1 0%; display: flex; }
.fuuvo-writing-page .fv-field-frame--fullPrompt > .full-prompt { flex: 1 1 0%; }
.fuuvo-writing-page .fv-field-frame:focus-within::before, .fuuvo-writing-page .template-search:focus-within::after, .fuuvo-writing-page .reference-upload:focus-within::after, .fuuvo-writing-page .reference-upload[data-drag-active="true"]::after { content: ""; position: absolute; inset: 0px; padding: 1.5px; border-radius: inherit; pointer-events: none; z-index: 3; background: conic-gradient(from var(--fv-writing-angle),#096bfa,#059b58,#e9ad00,#f77919,#ee3159,#893bcc,#096bfa); mask: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) content-box exclude, linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); animation: writing-ring var(--cycle) linear infinite; }
.fuuvo-writing-page .fv-field-frame > textarea:focus, .fuuvo-writing-page .fv-field-frame > input:focus, .fuuvo-writing-page .fv-field-frame > select:focus, .fuuvo-writing-page .fv-field-frame > [contenteditable]:focus { background-color: rgb(255, 255, 255); outline: 0px !important; box-shadow: none !important; border-color: transparent !important; }
.fuuvo-writing-page .template-search { position: relative; }
.fuuvo-writing-page .template-search:focus-within { border-color: transparent; outline: 0px !important; box-shadow: none !important; }
.fuuvo-writing-page .template-search input:focus { outline: 0px; box-shadow: none; }
.fuuvo-writing-page .writing-reference-files { margin-top: 13px; }
.fuuvo-writing-page .reference-upload { margin: 0px; justify-content: flex-start; min-height: 65px; padding: 12px 14px; gap: 11px; border: 1px dashed rgb(189, 207, 206); border-radius: 10px; background: rgb(255, 255, 255); overflow: visible; }
.fuuvo-writing-page .reference-upload > svg { width: 22px; height: 22px; color: rgb(40, 118, 110); }
.fuuvo-writing-page .reference-upload-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0px; text-align: left; }
.fuuvo-writing-page .reference-upload-copy strong { font-weight: 550; font-size: 12px; color: rgb(49, 93, 101); }
.fuuvo-writing-page .reference-upload-copy > span { font-size: 11px; color: rgb(96, 119, 128); }
.fuuvo-writing-page .reference-upload:focus-within, .fuuvo-writing-page .reference-upload[data-drag-active="true"] { outline: 0px; box-shadow: none; border-color: transparent; background: rgb(255, 255, 255); }
.fuuvo-writing-page .reference-upload[data-drag-active="true"] .reference-upload-copy strong { color: rgb(22, 110, 102); }
.fuuvo-writing-page .writing-context.is-dragging, .fuuvo-writing-page .writing-context.is-dragover { background: transparent; border-color: rgb(228, 236, 236); border-radius: 0px; }
.fuuvo-writing-page .reference-upload.is-dragover { background: rgb(255, 255, 255); }
.fuuvo-writing-page #referenceStatus { font-size: 10px; line-height: 1.6; margin-top: 6px; color: rgb(96, 119, 128); }
.fuuvo-writing-page #referenceStatus[data-error="true"] { color: rgb(164, 52, 66); }
@media (max-width: 600px) {
.fuuvo-writing-page .fv-language-trigger { font-size: 14px; gap: 7px; }
.fuuvo-writing-page .fv-language-menu { min-width: 164px; }
.fuuvo-writing-page .writing-formatting > .fv-field-frame--select { margin-right: 4px; }
}
}