:root {
    --office-blue: #076cf4;
    --office-ink: #102645;
    --office-muted: #687891;
    --office-line: #d8e1ec;
}

/* Office routes never own the homepage chat composer. Keep a stale composer
   from a cached shell or client-side handoff from covering the work surface. */
body.office-route .composer,
body.office-route #chat-compose-field {
    display: none !important;
}

@supports selector(body:has(.office-app)) {
    body:has(.office-app) .composer,
    body:has(.office-app) #chat-compose-field {
        display: none !important;
    }
}

/* Wide AI spreadsheet workspace */
.office-spreadsheet-app { --sheet-blue:#2563eb; --sheet-ink:#17243a; background:#f7f9fc; }
.office-spreadsheet-app .office-tool-main { width:calc(100% - 36px); max-width:none; margin-right:18px; padding-top:17px; }
.office-spreadsheet-app .office-breadcrumb { margin-left:4px; font-size:12px; }
.office-spreadsheet-app .office-tool-hero { margin-top:12px; padding:15px 20px; border-color:#e4e9f1; border-radius:14px; background:#fff; box-shadow:0 2px 12px rgba(32,54,88,.035); }
.office-spreadsheet-app .office-tool-icon { width:48px; height:48px; flex-basis:48px; border-radius:12px; box-shadow:none; background:#eff5ff; }
.office-spreadsheet-app .office-tool-icon img { width:38px; height:38px; }
.office-spreadsheet-app .office-tool-hero > div:last-child > span { font-size:10px; letter-spacing:.1em; }
.office-spreadsheet-app .office-tool-hero h1 { margin:2px 0; font-size:24px; }
.office-spreadsheet-app .office-tool-hero p { font-size:12px; line-height:1.45; }
.office-spreadsheet-app .office-tool-layout { grid-template-columns:218px 318px minmax(0,1fr); gap:12px; min-height:calc(100vh - 176px); margin-top:12px; }
.office-spreadsheet-app .office-tool-form-card,.office-spreadsheet-app .office-result-card,.office-spreadsheet-app .spreadsheet-sidebar { border:1px solid #e1e7f0; border-radius:12px; box-shadow:0 4px 20px rgba(30,55,93,.045); }
.office-spreadsheet-app .spreadsheet-sidebar { min-width:0; padding:16px 12px; background:#fbfcfe; }
.spreadsheet-sidebar-brand { display:flex; align-items:center; gap:9px; padding:2px 7px 16px; color:var(--sheet-ink); font-size:13px; }
.spreadsheet-brand-mark { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:#eaf2ff; color:var(--sheet-blue); font-size:15px; }
.spreadsheet-new-sheet { width:100%; min-height:34px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #d8e4f5; border-radius:7px; background:#f2f7ff; color:#2863bc; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.spreadsheet-new-sheet span { font-size:18px; font-weight:400; line-height:1; }
.spreadsheet-sidebar-nav { display:grid; gap:3px; margin:17px 0 20px; }
.spreadsheet-sidebar-nav button { min-height:32px; display:flex; align-items:center; gap:10px; padding:0 9px; border:0; border-radius:7px; background:transparent; color:#65758c; font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.spreadsheet-sidebar-nav button span { width:16px; color:#8aa0bc; font-size:15px; text-align:center; }
.spreadsheet-sidebar-nav button:hover,.spreadsheet-sidebar-nav button.is-active { background:#edf4ff; color:#255eaf; }
.spreadsheet-sidebar-section { display:flex; align-items:center; justify-content:space-between; padding:0 8px 7px; color:#93a0b1; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.spreadsheet-sidebar-section button { border:0; background:transparent; color:#7290b6; font-size:17px; cursor:pointer; }
.spreadsheet-sheet-list { display:grid; gap:3px; }
.spreadsheet-sheet-list button { min-width:0; display:flex; align-items:center; gap:8px; padding:8px; border:0; border-radius:7px; background:transparent; color:#53667f; font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.spreadsheet-sheet-list button.is-active,.spreadsheet-sheet-list button:hover { background:#edf4ff; color:#255eaf; }
.spreadsheet-sheet-list button b { margin-left:auto; color:#aab7c8; font-size:12px; letter-spacing:2px; }
.sheet-dot { width:7px; height:7px; display:inline-block; flex:0 0 7px; border-radius:50%; background:#3b82f6; }
.sheet-dot.green { background:#46b37b; }
.spreadsheet-sidebar-tip { display:grid; gap:7px; margin:30px 4px 0; padding:11px; border:1px solid #e4ebf5; border-radius:9px; background:#fff; color:#7c8ca0; font-size:10px; line-height:1.55; }
.spreadsheet-sidebar-tip strong { color:#40536d; font-size:11px; }
.office-spreadsheet-app .office-tool-form-card { padding:17px; background:#fff; }
.office-spreadsheet-app .office-card-heading > span { width:25px; height:25px; flex-basis:25px; border-radius:7px; font-size:10px; }
.office-spreadsheet-app .office-card-heading h2 { font-size:15px; }
.office-spreadsheet-app .office-card-heading p { font-size:11px; }
.office-spreadsheet-app #office-tool-form { margin-top:15px; }
.office-spreadsheet-app .office-field { margin-bottom:11px; gap:5px; }
.office-spreadsheet-app .office-field > span { font-size:11px; }
.office-spreadsheet-app .office-field input { height:39px; font-size:12px; }
.office-spreadsheet-app .office-field textarea { min-height:108px; font-size:12px; }
.office-spreadsheet-app .office-field-grid { grid-template-columns:1fr; gap:0; }
.office-spreadsheet-app .office-field select { height:36px; font-size:11px; }
.spreadsheet-quick-prompts { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0 0 12px; }
.spreadsheet-quick-prompts > span { width:100%; margin-bottom:2px; color:#9aa7b8; font-size:10px; font-weight:700; }
.spreadsheet-quick-prompts button { min-height:25px; padding:0 7px; border:1px solid #dce6f3; border-radius:999px; background:#f8fbff; color:#5c7597; font:inherit; font-size:10px; cursor:pointer; }
.spreadsheet-quick-prompts button:hover { border-color:#9cc1f4; background:#eff6ff; color:#2563eb; }
.office-spreadsheet-app .office-upload-box { padding:10px; gap:7px; }
.office-spreadsheet-app .office-upload-box strong { font-size:11px; }
.office-spreadsheet-app .office-upload-box small { font-size:10px; }
.office-spreadsheet-app .office-upload-box button { min-height:30px; padding:0 8px; font-size:10px; }
.office-spreadsheet-app .office-generate-button { min-height:40px; font-size:12px; }
.office-spreadsheet-app .office-tool-features { margin-top:13px; padding-top:11px; gap:6px; }
.office-spreadsheet-app .office-tool-features > div { gap:6px; font-size:10px; }
.office-spreadsheet-app .office-tool-features i { width:15px; height:15px; flex-basis:15px; font-size:9px; }
.office-spreadsheet-app .office-result-card { min-height:0; padding:0; overflow:hidden; background:#fff; }
.spreadsheet-toolbar { min-height:47px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 14px; border-bottom:1px solid #e5eaf1; background:#fbfcfe; }
.spreadsheet-toolbar-tabs,.spreadsheet-toolbar-actions { display:flex; align-items:center; gap:4px; }
.spreadsheet-toolbar-tabs button { min-height:29px; padding:0 10px; border:0; border-radius:6px; background:transparent; color:#78889d; font:inherit; font-size:11px; cursor:pointer; }
.spreadsheet-toolbar-tabs button.is-active { background:#eaf2ff; color:#2364c4; font-weight:700; }
.spreadsheet-toolbar-actions button { min-height:27px; padding:0 7px; border:1px solid #e0e7f0; border-radius:6px; background:#fff; color:#718198; font:inherit; font-size:11px; cursor:pointer; }
.spreadsheet-toolbar-actions button:hover { border-color:#a8c6ef; color:#2563eb; }
.spreadsheet-grid-shell { margin:12px 14px 0; border:1px solid #dfe6ef; border-radius:9px; overflow:hidden; background:#fff; }
.spreadsheet-grid-meta { min-height:31px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 10px; border-bottom:1px solid #e5ebf2; background:#fbfcfe; color:#60728c; font-size:10px; }
.spreadsheet-grid-meta span { display:flex; align-items:center; gap:6px; font-weight:700; }
.spreadsheet-grid-meta small { color:#a0adbc; font-size:10px; }
.spreadsheet-grid-scroll { max-height:205px; overflow:auto; }
.spreadsheet-grid { width:100%; min-width:620px; border-collapse:collapse; table-layout:fixed; color:#40536d; font-size:11px; }
.spreadsheet-grid th,.spreadsheet-grid td { height:28px; padding:4px 8px; border-right:1px solid #e7edf3; border-bottom:1px solid #e7edf3; text-align:left; white-space:nowrap; }
.spreadsheet-grid thead th { height:25px; background:#f5f8fb; color:#8291a4; font-size:10px; font-weight:700; text-align:center; }
.spreadsheet-grid thead th:first-child,.spreadsheet-grid tbody th { width:34px; }
.spreadsheet-grid tbody th { background:#f8fafc; color:#9aa7b7; font-size:10px; font-weight:600; text-align:center; }
.spreadsheet-grid td { outline:0; }
.spreadsheet-grid td:focus { background:#f5f9ff; box-shadow:inset 0 0 0 2px #72a8f2; }
.office-spreadsheet-app .office-result-head { margin-top:13px; padding:0 15px 12px; }
.office-spreadsheet-app .office-result-content { max-height:none; margin:0 15px; padding-right:2px; }
.office-spreadsheet-app .office-result-empty { min-height:230px; padding:28px 20px; }
.office-spreadsheet-app .office-result-empty-icon { width:60px; height:60px; border-radius:15px; }
.office-spreadsheet-app .office-result-empty-icon img { width:42px; height:42px; }
.office-spreadsheet-app .office-result-empty h3 { margin:12px 0 5px; font-size:15px; }
.office-spreadsheet-app .office-result-empty p { font-size:11px; }
.office-spreadsheet-app .office-refine-form { margin:13px 15px 15px; }
.office-spreadsheet-app .office-tool-footer-actions { display:none; }
body[data-ui-theme="dark"] .office-spreadsheet-app { background:#0e141d; }
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar,body[data-ui-theme="dark"] .office-spreadsheet-app .office-tool-form-card,body[data-ui-theme="dark"] .office-spreadsheet-app .office-result-card { border-color:#2d3a4d; background:#151d29; }
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-toolbar,body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid-meta,body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid thead th,body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid tbody th { border-color:#2d3a4d; background:#111923; }
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid-shell,body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid td,body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid th { border-color:#2d3a4d; }
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid { color:#c9d5e4; }
@media (max-width:1120px) { .office-spreadsheet-app .office-tool-layout { grid-template-columns:190px 290px minmax(0,1fr); gap:9px; } .office-spreadsheet-app .spreadsheet-sidebar { padding-left:8px; padding-right:8px; } }
@media (max-width:920px) { .office-spreadsheet-app .office-tool-layout { grid-template-columns:190px minmax(0,1fr); } .office-spreadsheet-app .office-tool-form-card { grid-column:1; grid-row:1; } .office-spreadsheet-app .office-result-card { grid-column:2; grid-row:1; } .office-spreadsheet-app .spreadsheet-sidebar { grid-column:1/-1; grid-row:2; min-height:auto; } .office-spreadsheet-app .spreadsheet-sidebar-nav,.office-spreadsheet-app .spreadsheet-sidebar-tip { display:none; } .office-spreadsheet-app .spreadsheet-sheet-list { display:flex; gap:6px; } }
@media (max-width:680px) { .office-spreadsheet-app .office-tool-main { width:calc(100% - 22px); margin:0 11px; } .office-spreadsheet-app .office-tool-layout { display:flex; flex-direction:column; } .office-spreadsheet-app .office-tool-form-card,.office-spreadsheet-app .office-result-card,.office-spreadsheet-app .spreadsheet-sidebar { width:100%; } .office-spreadsheet-app .spreadsheet-sidebar { order:3; } .office-spreadsheet-app .office-tool-form-card { order:1; } .office-spreadsheet-app .office-result-card { order:2; } .spreadsheet-toolbar { flex-wrap:wrap; padding:7px 10px; } .spreadsheet-grid-meta { align-items:flex-start; flex-direction:column; gap:2px; padding:6px 9px; } }
.office-app [hidden] { display: none !important; }

/* AI Slides uses the full desktop workspace: prompt on the left, template wall
 * or editable deck on the right. The shared shell's generic 1080px cap is
 * intentionally overridden only for this product. */
@media (min-width: 921px) {
    .office-presentation-app .office-tool-main[data-fuuvo-app-scroll="1"] { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 34px; padding-right: 34px; }
    .office-presentation-app .office-breadcrumb,
    .office-presentation-app .office-tool-hero,
    .office-presentation-app .office-tool-layout { width: 100%; max-width: none; }
    .office-presentation-app .office-tool-layout { grid-template-columns: 360px minmax(0, 1fr); gap: 22px; }
    .office-presentation-app .office-result-card { min-height: 760px; padding: 22px 24px 26px; }
}

.office-presentation-app { --presentation-ink: #eef3fb; --presentation-muted: #8794a9; --presentation-surface: #1d222b; --presentation-surface-2: #242b36; --presentation-line: #343d4b; background: #15181e; }
.office-presentation-app .office-tool-main { background: #15181e; color: var(--presentation-ink); }
.office-presentation-app .office-tool-hero { border-color: #303845; background: linear-gradient(120deg, #1d232c, #181c24 62%, #222938); box-shadow: none; }
.office-presentation-app .office-tool-hero h1 { color: #f4f7fc; }.office-presentation-app .office-tool-hero p { color: #9aa7b9; }.office-presentation-app .office-tool-hero > div:last-child > span { color: #82b3ff; }
.office-presentation-app .office-tool-form-card { border-color: var(--presentation-line); background: var(--presentation-surface); box-shadow: none; }.office-presentation-app .office-card-heading h2 { color: #f1f5fb; }.office-presentation-app .office-card-heading p, .office-presentation-app .office-field > span { color: #9ca9bb; }
.office-presentation-app .office-field input, .office-presentation-app .office-field textarea, .office-presentation-app .office-field select { border-color: #3a4555; background: #252b35; color: #edf3fb; }.office-presentation-app .office-field :is(input, textarea, select)::placeholder { color: #748197; }
.office-presentation-app .office-upload-box { border-color: #4a6487; background: #202c3b; }.office-presentation-app .office-upload-box strong { color: #d9e8ff; }.office-presentation-app .office-upload-box small { color: #899ab0; }.office-presentation-app .office-upload-box button { border-color: #5b8dca; background: #27384e; color: #b8d8ff; }
.office-presentation-app .office-tool-features { border-color: #343d4b; }.office-presentation-app .office-tool-features > div { color: #9aa7b9; }.office-presentation-app .office-generate-button { background: linear-gradient(135deg, #3b86ee, #2e66bf); }
.office-presentation-app .office-result-card { border-color: var(--presentation-line); background: var(--presentation-surface); box-shadow: none; }.office-presentation-app .office-result-head { border-color: #343d4b; }.office-presentation-app .office-result-head h2 { color: #f1f5fb; }.office-presentation-app .office-result-head p { color: #8997aa; }
.office-presentation-app:not(.has-presentation-result) .office-result-head, .office-presentation-app:not(.has-presentation-result) .office-result-empty { display: none; }

.presentation-template-library { min-width: 0; }.presentation-library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }.presentation-library-head h2 { margin: 5px 0 4px; color: #f5f7fb; font-size: 23px; line-height: 1.2; }.presentation-library-head p { margin: 0; color: #8997aa; font-size: 11px; line-height: 1.5; }.presentation-library-kicker { color: #7faef0; font-size: 9px; font-weight: 800; letter-spacing: .13em; }.presentation-template-count { flex: 0 0 auto; color: #91a0b4; font-size: 10px; }
.presentation-template-categories { margin: 21px 0 17px; display: flex; align-items: center; gap: 4px; overflow-x: auto; border-bottom: 1px solid #303845; scrollbar-width: thin; }.presentation-template-categories button { min-height: 33px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px 6px 0 0; background: transparent; color: #8290a4; font: inherit; font-size: 10px; white-space: nowrap; cursor: pointer; }.presentation-template-categories button:hover { color: #d9e7fa; background: #252d39; }.presentation-template-categories button.is-active { border-color: #4f75a5; border-bottom-color: #6fa8f4; background: #2c405c; color: #dcecff; }
.presentation-template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }.presentation-template-card { min-width: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #343e4d; border-radius: 9px; background: #242b35; color: #edf3fb; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.presentation-template-card:hover { border-color: #78aaf0; box-shadow: 0 15px 28px rgba(0,0,0,.28); transform: translateY(-3px); }.presentation-template-card:focus-visible { outline: 2px solid #7fb2ff; outline-offset: 2px; }.presentation-template-card img { width: 100%; height: 132px; display: block; object-fit: cover; }.presentation-template-card-copy { min-width: 0; padding: 10px 11px 11px; display: grid; gap: 4px; }.presentation-template-card-copy strong { overflow: hidden; color: #f1f5fb; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.presentation-template-card-copy small { min-height: 28px; display: -webkit-box; overflow: hidden; color: #8d9bad; font-size: 9px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.presentation-template-card-meta { padding: 0 11px 10px; display: flex; align-items: center; justify-content: space-between; color: #6f8097; font-size: 9px; }.presentation-template-card-meta b { width: 7px; height: 7px; border-radius: 50%; background: var(--card-tone, #75a9e7); }
.presentation-template-card[data-tone="coral"] { --card-tone: #ec8a72; }.presentation-template-card[data-tone="teal"] { --card-tone: #65c2b8; }.presentation-template-card[data-tone="purple"] { --card-tone: #a685df; }.presentation-template-card[data-tone="orange"] { --card-tone: #e9b36b; }.presentation-template-card[data-tone="green"] { --card-tone: #77c49a; }.presentation-template-card[data-tone="rose"] { --card-tone: #dc899f; }.presentation-template-card[data-tone="slate"] { --card-tone: #9baec5; }.presentation-template-card[data-tone="indigo"] { --card-tone: #8f98da; }

.presentation-editor { min-width: 0; }.presentation-editor-head { min-height: 48px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid #343d4b; }.presentation-editor-head > div:nth-child(2) { min-width: 0; flex: 1; display: grid; gap: 2px; }.presentation-editor-head strong { overflow: hidden; color: #f4f7fc; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.presentation-editor-head small { color: #7f8ca0; font-size: 9px; }.presentation-editor-back, .presentation-editor-actions button { min-height: 30px; padding: 0 9px; border: 1px solid #3c4a5c; border-radius: 6px; background: #252d39; color: #b8c7da; font: inherit; font-size: 10px; cursor: pointer; }.presentation-editor-back:hover, .presentation-editor-actions button:hover { border-color: #76aaf0; color: #ecf5ff; }.presentation-editor-actions { display: flex; gap: 5px; }.presentation-editor-actions .is-primary { border-color: #4d8ade; background: #3679d1; color: #fff; font-weight: 700; }
.presentation-editor-body { min-height: 620px; padding-top: 16px; display: grid; grid-template-columns: 74px minmax(0, 1fr) 206px; gap: 13px; }.presentation-slide-rail { display: grid; align-content: start; gap: 8px; }.presentation-slide-thumb { min-height: 47px; padding: 4px; overflow: hidden; border: 1px solid #3c4858; border-radius: 5px; background: #2b323d; color: #8e9db1; font-size: 8px; text-align: left; cursor: pointer; }.presentation-slide-thumb.is-active { border-color: #79acf0; box-shadow: 0 0 0 2px rgba(121,172,240,.14); color: #e5f0ff; }.presentation-slide-thumb span { width: 100%; height: 29px; margin-bottom: 4px; display: block; border-radius: 3px; background: var(--thumb-tone, #5c84b6); }.presentation-slide-thumb small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presentation-slide-stage { min-width: 0; display: flex; flex-direction: column; gap: 8px; }.presentation-slide-canvas { min-height: 440px; padding: 44px 48px; overflow: auto; border: 1px solid #465261; border-radius: 8px; outline: 0; background: linear-gradient(135deg, #f8fafc, #e5edf6); color: #1e3653; box-shadow: 0 16px 30px rgba(0,0,0,.2); }.presentation-slide-canvas:focus { border-color: #76aaf0; box-shadow: 0 0 0 3px rgba(118,170,240,.16), 0 16px 30px rgba(0,0,0,.2); }.presentation-slide-canvas h1 { max-width: 85%; margin: 0 0 18px; color: #1d3552; font-size: clamp(27px, 3vw, 46px); line-height: 1.08; }.presentation-slide-canvas p { max-width: 680px; margin: 0 0 13px; color: #4c6683; font-size: 15px; line-height: 1.65; }.presentation-slide-canvas h2 { margin: 26px 0 9px; color: #315d8e; font-size: 21px; }.presentation-slide-canvas ul { margin: 0; padding-left: 20px; color: #47627f; line-height: 1.75; }.presentation-slide-stage-foot { display: flex; justify-content: space-between; gap: 10px; color: #7d8da2; font-size: 9px; }.presentation-design-panel { min-width: 0; padding: 12px; border-left: 1px solid #343d4b; }.presentation-design-head { display: flex; gap: 8px; }.presentation-design-head > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; background: #3a3158; color: #c3b0f1; }.presentation-design-head div { min-width: 0; display: grid; gap: 2px; }.presentation-design-head strong { color: #e8eef8; font-size: 11px; }.presentation-design-head small { color: #7f8da2; font-size: 9px; line-height: 1.4; }.presentation-design-panel > button { width: 100%; min-height: 31px; margin-top: 12px; padding: 0 7px; border: 1px solid #3b4859; border-radius: 5px; background: #252d38; color: #afbdd0; font: inherit; font-size: 9px; cursor: pointer; }.presentation-design-panel > button:hover { border-color: #6e9fe0; color: #e6f2ff; }.presentation-design-panel label { margin-top: 20px; display: grid; gap: 8px; color: #8492a5; font-size: 9px; }.presentation-swatches { display: flex; gap: 7px; }.presentation-swatches button { width: 21px; height: 21px; border: 2px solid #252d38; border-radius: 50%; box-shadow: 0 0 0 1px #576476; background: #5d94df; cursor: pointer; }.presentation-swatches button[data-presentation-tone="coral"] { background: #df7a6c; }.presentation-swatches button[data-presentation-tone="teal"] { background: #4bb4aa; }.presentation-swatches button[data-presentation-tone="purple"] { background: #8d70c3; }

.presentation-slide-canvas[data-presentation-tone="coral"] { background: linear-gradient(135deg, #fff7f2, #f7e2dc); color: #5b2f2a; }
.presentation-slide-canvas[data-presentation-tone="coral"] h1 { color: #6f3029; }
.presentation-slide-canvas[data-presentation-tone="coral"] p,
.presentation-slide-canvas[data-presentation-tone="coral"] ul { color: #81534a; }
.presentation-slide-canvas[data-presentation-tone="coral"] h2 { color: #a44d3f; }
.presentation-slide-canvas[data-presentation-tone="teal"] { background: linear-gradient(135deg, #effcfb, #d9f0ee); color: #164e50; }
.presentation-slide-canvas[data-presentation-tone="teal"] h1 { color: #155b5d; }
.presentation-slide-canvas[data-presentation-tone="teal"] p,
.presentation-slide-canvas[data-presentation-tone="teal"] ul { color: #3b7171; }
.presentation-slide-canvas[data-presentation-tone="teal"] h2 { color: #237f7e; }
.presentation-slide-canvas[data-presentation-tone="purple"] { background: linear-gradient(135deg, #f8f3ff, #e9e0f7); color: #3d2b57; }
.presentation-slide-canvas[data-presentation-tone="purple"] h1 { color: #4f3474; }
.presentation-slide-canvas[data-presentation-tone="purple"] p,
.presentation-slide-canvas[data-presentation-tone="purple"] ul { color: #69517d; }
.presentation-slide-canvas[data-presentation-tone="purple"] h2 { color: #7252a0; }

@media (max-width: 1400px) { .presentation-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .office-presentation-app .office-tool-layout { grid-template-columns: 320px minmax(0, 1fr); }.presentation-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.presentation-editor-body { grid-template-columns: 64px minmax(0, 1fr); }.presentation-design-panel { display: none; } }
@media (max-width: 760px) { .office-presentation-app .office-tool-main { padding-left: 12px; padding-right: 12px; }.office-presentation-app .office-tool-layout { display: flex; flex-direction: column; }.office-presentation-app .office-tool-form-card, .office-presentation-app .office-result-card { width: 100%; }.presentation-library-head { display: block; }.presentation-template-count { display: block; margin-top: 9px; }.presentation-template-card img { height: 106px; }.presentation-editor-body { grid-template-columns: 1fr; }.presentation-slide-rail { display: flex; overflow-x: auto; }.presentation-slide-thumb { min-width: 74px; }.presentation-slide-canvas { min-height: 380px; padding: 30px 24px; }.presentation-slide-canvas h1 { font-size: 29px; } }
.office-main {
    width: min(1120px, calc(100% - 96px));
    min-height: 0;
    flex: 1 1 auto;
    margin: 0 40px 0 56px;
    padding: 24px 0 26px;
    overflow-y: auto;
    overflow-x: hidden;
}
.office-main a { text-decoration: none; }
.office-breadcrumb { display: flex; align-items: center; gap: 10px; color: #6593d9; font-size: 14px; }
.office-breadcrumb a { color: #6593d9; }
.office-breadcrumb a:hover { color: var(--office-blue); }
.office-heading { margin-top: 22px; }
.office-heading h1 { margin: 0; color: var(--office-ink); font-size: 38px; line-height: 1.15; }
.office-heading p { margin: 10px 0 0; color: var(--office-muted); font-size: 16px; }

.office-start-panel {
    margin-top: 25px;
    padding: 21px 24px 22px;
    border: 1px solid #9fc8ff;
    border-radius: 15px;
    background: linear-gradient(110deg, #f5f9ff, #fff);
}
.office-start-panel > label { display: block; margin-bottom: 10px; color: var(--office-ink); font-size: 16px; font-weight: 700; }
.office-start-panel textarea {
    width: 100%;
    height: 57px;
    min-height: 57px;
    padding: 17px 17px;
    resize: none;
    overflow: hidden;
    border: 1px solid #ccd6e3;
    border-radius: 8px;
    outline: 0;
    background: #fff;
    color: #263b58;
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
}
.office-start-panel textarea:focus { border-color: var(--office-blue); box-shadow: 0 0 0 3px #eaf3ff; }
.office-start-panel textarea::placeholder { color: #7b8aa0; }
.office-start-actions { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.office-start-actions > div { display: flex; align-items: center; gap: 18px; }
.office-outline-button,
.office-primary-button {
    min-height: 44px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
}
.office-outline-button { border: 1px solid var(--office-blue); background: #fff; color: var(--office-blue); }
.office-outline-button:hover { background: #f3f8ff; }
.office-outline-button img { width: 24px; height: 24px; object-fit: contain; }
.office-primary-button { min-width: 171px; border: 1px solid var(--office-blue); background: var(--office-blue); color: #fff; }
.office-primary-button:hover { background: #075fcf; }
.office-primary-button > img { width: 22px; height: 22px; object-fit: contain; }
.office-primary-button span { margin-left: 13px; font-size: 23px; font-weight: 300; }
.office-file-status { margin: 12px 0 0; color: #237a54; font-size: 12px; }

.office-workflows { margin-top: 24px; }
.office-workflows h2,
.office-recent h2 { margin: 0 0 12px; color: var(--office-ink); font-size: 17px; }
.office-workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 21px; }
.office-workflow-card {
    min-height: 126px;
    padding: 20px 23px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--office-line);
    border-radius: 14px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.office-workflow-card:hover { border-color: #9dc4fb; box-shadow: 0 10px 24px rgba(44,93,158,.08); transform: translateY(-1px); }
.office-workflow-card > img { width: 57px; height: 62px; flex: 0 0 57px; object-fit: contain; }
.office-workflow-card > span { min-width: 0; display: grid; gap: 7px; flex: 1; }
.office-workflow-card strong { color: var(--office-ink); font-size: 16px; line-height: 1.35; }
.office-workflow-card small { color: var(--office-muted); font-size: 14px; line-height: 1.6; }
.office-workflow-card > b { color: #8aa0ba; font-size: 20px; font-weight: 400; transition: transform .18s ease, color .18s ease; }
.office-workflow-card:hover > b { color: var(--office-blue); transform: translateX(3px); }

.office-recent { margin-top: 23px; }
.office-recent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.office-recent-card {
    min-height: 69px;
    padding: 0 19px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--office-line);
    border-radius: 12px;
    background: #fff;
}
.office-recent-card:hover { border-color: #9dc4fb; background: #fbfdff; }
.office-recent-card img { width: 31px; height: 34px; flex: 0 0 31px; object-fit: contain; }
.office-recent-card span { min-width: 0; flex: 1; display: grid; gap: 3px; }
.office-recent-card strong { overflow: hidden; color: var(--office-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.office-recent-card small { color: #77879c; font-size: 12px; }
.office-recent-card b { color: #4d607a; font-size: 25px; font-weight: 400; }
.office-recent-card b img { width: 18px; height: 18px; }
.office-rights { margin: 20px 0 0; color: #7a899e; font-size: 13px; text-align: center; }
.office-main .fuuvo-ai-disclaimer { margin-top: 15px; }

/* The office hub is a full workspace surface. Keep its desktop content
 * centered while using the available area beside the shared rail. Tool
 * workspaces keep their own width rules below. */
@media (min-width: 921px) {
    html body #office-app:not(.office-tool-app) .office-main[data-fuuvo-app-scroll="1"] {
        width: min(1560px, calc(100% - 80px)) !important;
        max-width: 1560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 32px !important;
        padding-bottom: 48px !important;
    }
}

/* Dedicated AI office workspaces */
.office-tool-main { width: min(1320px, calc(100% - 80px)); margin-right: 32px; }
.office-tool-hero {
    margin-top: 20px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #dbe6f3;
    border-radius: 18px;
    background: linear-gradient(120deg, #f7fbff 0%, #fff 58%, #f5f9ff 100%);
}
.office-tool-icon {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(41, 91, 154, .10);
}
.office-tool-icon img { width: 62px; height: 62px; object-fit: contain; }
.office-tool-hero > div:last-child { min-width: 0; }
.office-tool-hero > div:last-child > span { color: var(--office-blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.office-tool-hero h1 { margin: 5px 0 4px; color: var(--office-ink); font-size: clamp(27px, 3vw, 38px); line-height: 1.2; }
.office-tool-hero p { max-width: 880px; margin: 0; color: var(--office-muted); font-size: 15px; line-height: 1.7; }

.office-tool-layout { margin-top: 18px; display: grid; grid-template-columns: minmax(360px, .88fr) minmax(440px, 1.35fr); align-items: stretch; gap: 18px; }
.office-tool-form-card,
.office-result-card { min-width: 0; border: 1px solid #dbe3ed; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(36, 71, 116, .055); }
.office-tool-form-card { height: 100%; padding: 23px; container-name: office-tool-form; container-type: inline-size; }
.office-result-card { min-height: 650px; height: 100%; padding: 23px 25px; position: relative; }
.office-card-heading,
.office-result-head > div:first-child { display: flex; align-items: flex-start; gap: 13px; }
.office-card-heading > span,
.office-result-head > div:first-child > span {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eaf3ff;
    color: var(--office-blue);
    font-size: 12px;
    font-weight: 800;
}
.office-card-heading h2,
.office-result-head h2 { margin: 0; color: var(--office-ink); font-size: 18px; line-height: 1.35; }
.office-card-heading p,
.office-result-head p { margin: 4px 0 0; color: var(--office-muted); font-size: 12px; line-height: 1.55; }
#office-tool-form { margin-top: 20px; }
.office-field { margin-bottom: 15px; display: grid; gap: 7px; }
.office-field > span { color: #243a57; font-size: 13px; font-weight: 700; }
.office-field input,
.office-field textarea,
.office-field select,
.office-refine-form textarea {
    width: 100%;
    border: 1px solid #ccd7e4;
    border-radius: 10px;
    outline: 0;
    background: #fff;
    color: #203653;
    font: inherit;
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.office-field input { height: 46px; padding: 0 13px; }
.office-field textarea { min-height: 154px; padding: 12px 13px; resize: vertical; line-height: 1.6; }
.office-field select { height: 43px; padding: 0 36px 0 12px; }
.office-field :is(input, textarea, select):focus,
.office-refine-form textarea:focus { border-color: #78aff7; box-shadow: 0 0 0 3px rgba(7,108,244,.10); }
.office-field :is(input, textarea)::placeholder,
.office-refine-form textarea::placeholder { color: #8a98aa; }
.office-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.office-field-grid .office-field { min-width: 0; }
.office-field-grid select { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The form column can become narrow while the overall viewport is still
   desktop-sized. Respond to the card width instead of viewport width so
   selected option text is never clipped. */
@container office-tool-form (max-width: 640px) {
    .office-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .office-field-grid .office-field:last-child {
        grid-column: 1 / -1;
    }
}

@container office-tool-form (max-width: 430px) {
    .office-field-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .office-field-grid .office-field:last-child {
        grid-column: auto;
    }

    .office-upload-box {
        align-items: stretch;
        flex-direction: column;
    }

    .office-upload-box button {
        width: 100%;
        justify-content: center;
    }
}

.office-upload-box {
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px dashed #aac7eb;
    border-radius: 12px;
    background: #f8fbff;
}
.office-upload-box > div { min-width: 0; flex: 1; display: grid; gap: 3px; }
.office-upload-box strong { color: #29415f; font-size: 13px; }
.office-upload-box small { color: #7b8ba0; font-size: 11px; line-height: 1.45; }
.office-upload-box button {
    min-height: 37px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #87b8f9;
    border-radius: 9px;
    background: #fff;
    color: var(--office-blue);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.office-upload-box button img { width: 19px; height: 19px; object-fit: contain; }
.office-upload-list { margin-top: 10px; display: grid; gap: 7px; }
.office-upload-item { min-width: 0; padding: 8px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #e0e7f0; border-radius: 10px; background: #fff; }
.office-upload-kind { width: 34px; height: 28px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 7px; background: #eaf3ff; color: var(--office-blue); font-size: 9px; font-weight: 900; }
.office-upload-item > div { min-width: 0; flex: 1; display: grid; gap: 2px; }
.office-upload-item strong { overflow: hidden; color: #2b405c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.office-upload-item small { color: #739078; font-size: 10px; }
.office-upload-item button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: #7a899c; font-size: 20px; cursor: pointer; }
.office-upload-item button:hover { background: #f2f5f9; color: #d04b58; }
.office-form-error { margin: 10px 0 0; padding: 9px 11px; border-radius: 9px; background: #fff0f1; color: #b23a48; font-size: 12px; line-height: 1.45; }
.office-generate-button {
    width: 100%;
    min-height: 49px;
    margin-top: 14px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #0875ff, #0764e3);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(7,108,244,.20);
    cursor: pointer;
}
.office-generate-button b { font-size: 19px; font-weight: 400; transition: transform .18s ease; }
.office-generate-button:hover b { transform: translateX(3px); }
.office-generate-button:disabled { opacity: .68; cursor: wait; }
.office-generate-button.is-loading b { animation: officeArrowPulse .8s ease-in-out infinite alternate; }
@keyframes officeArrowPulse { to { transform: translateX(5px); } }
.office-tool-features { margin-top: 18px; padding-top: 15px; display: grid; gap: 9px; border-top: 1px solid #e8edf3; }
.office-tool-features > div { display: flex; align-items: flex-start; gap: 9px; color: #5b6f88; font-size: 12px; line-height: 1.5; }
.office-tool-features i { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; border-radius: 50%; background: #e8f8ef; color: #238657; font-size: 11px; font-style: normal; font-weight: 900; }

.office-result-head { min-height: 48px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e7edf4; padding-bottom: 15px; }
.office-result-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.office-result-actions button,
.office-tool-footer-actions button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #d2dce8;
    border-radius: 8px;
    background: #fff;
    color: #4c627e;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.office-result-actions button:hover,
.office-tool-footer-actions button:hover { border-color: #8dbbf5; color: var(--office-blue); background: #f6faff; }
.office-result-empty { min-height: 480px; padding: 50px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.office-result-empty-icon { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 25px; background: linear-gradient(145deg, #f0f6ff, #fff); box-shadow: inset 0 0 0 1px #dce8f7, 0 18px 40px rgba(62,98,143,.08); }
.office-result-empty-icon img { width: 66px; height: 66px; object-fit: contain; opacity: .86; }
.office-result-empty h3 { margin: 20px 0 7px; color: #29415f; font-size: 18px; }
.office-result-empty p { max-width: 430px; margin: 0; color: #7d8ca0; font-size: 13px; line-height: 1.7; }
.office-result-loading { min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #617794; font-size: 13px; }
.office-result-loading i { width: 8px; height: 8px; border-radius: 50%; background: var(--office-blue); animation: officeDot 1s ease-in-out infinite; }
.office-result-loading i:nth-child(2) { animation-delay: .15s; }
.office-result-loading i:nth-child(3) { animation-delay: .3s; }
.office-result-loading span { margin-left: 8px; }
@keyframes officeDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.office-result-view-switch {
    margin-top: 16px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #e4eaf1;
}
.office-result-view-switch button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #667a92;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.office-result-view-switch button.is-active {
    border-color: #c9dcf5;
    background: #edf5ff;
    color: var(--office-blue);
}
.office-result-view-switch a {
    margin-left: auto;
    color: var(--office-blue);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.office-version-history {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    background: #f8fbff;
}
.office-version-history-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}
.office-version-history-head > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.office-version-history-head strong { color: #274563; font-size: 13px; }
.office-version-history-head small { color: #8292a6; font-size: 11px; line-height: 1.45; }
.office-version-history-head > span { flex: 0 0 auto; color: #6d8098; font-size: 11px; line-height: 1.4; }
.office-version-list { display: grid; gap: 6px; }
.office-version-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
}
.office-version-item.is-active { border-color: #bcd6f6; background: #eef6ff; }
.office-version-select {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.office-version-select:hover .office-version-label { color: var(--office-blue); }
.office-version-label { color: #294967; font-size: 12px; font-weight: 800; line-height: 1.35; }
.office-version-detail { overflow: hidden; color: #74869c; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.office-version-current { flex: 0 0 auto; color: #2d8a5c; font-size: 10px; font-weight: 800; }
.office-version-download { flex: 0 0 auto; color: var(--office-blue); font-size: 11px; font-weight: 800; text-decoration: none; }
.office-version-download:hover { text-decoration: underline; }
.office-presentation-preview {
    position: relative;
    min-height: 520px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #dbe3ed;
    border-radius: 10px;
    background: #eef2f7;
}
.office-presentation-preview iframe {
    display: block;
    width: 100%;
    height: min(720px, 70vh);
    min-height: 520px;
    border: 0;
    background: #eef2f7;
}
.office-presentation-preview-status {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #64748b;
    background: #f5f8fc;
    font-size: 13px;
}
.office-presentation-preview-status i {
    width: 18px;
    height: 18px;
    border: 2px solid #bfd0e4;
    border-top-color: var(--office-blue);
    border-radius: 50%;
    animation: officePreviewSpin .8s linear infinite;
}
.office-presentation-preview-status.is-error { color: #b33d4b; }
.office-presentation-preview.is-ready .office-presentation-preview-status { display: none; }
@keyframes officePreviewSpin { to { transform: rotate(360deg); } }
.office-result-content {
    max-height: min(720px, 68vh);
    padding: 20px 12px 12px 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    color: #293d58;
    font-size: 14px;
    line-height: 1.78;
    overflow-wrap: anywhere;
}
.office-result-content::-webkit-scrollbar { width: 8px; }
.office-result-content::-webkit-scrollbar-track { border-radius: 999px; background: #edf2f7; }
.office-result-content::-webkit-scrollbar-thumb { border: 2px solid #edf2f7; border-radius: 999px; background: #9fb0c4; }
.office-result-content::-webkit-scrollbar-thumb:hover { background: #7890aa; }
.office-result-content > :first-child { margin-top: 0; }
.office-result-content h2 { margin: 26px 0 10px; padding-bottom: 7px; border-bottom: 1px solid #e6ecf3; color: #102f55; font-size: 20px; line-height: 1.4; }
.office-result-content h3 { margin: 22px 0 8px; color: #163a67; font-size: 17px; line-height: 1.45; }
.office-result-content h4,
.office-result-content h5 { margin: 18px 0 7px; color: #244565; font-size: 15px; }
.office-result-content p { margin: 9px 0; }
.office-result-content hr { margin: 20px 0; border: 0; border-top: 1px solid #e1e8f0; }
.office-result-content ul,
.office-result-content ol { margin: 9px 0; padding-left: 24px; }
.office-result-content li { margin: 4px 0; }
.office-result-content blockquote { margin: 13px 0; padding: 10px 13px; border-left: 3px solid #74adf5; border-radius: 0 8px 8px 0; background: #f4f8fd; color: #4f6683; }
.office-result-content code { padding: 1px 5px; border-radius: 5px; background: #eef3f8; color: #294a73; font-size: .92em; }
.office-table-wrap { max-width: 100%; margin: 14px 0; overflow-x: auto; border: 1px solid #d9e2ec; border-radius: 10px; }
.office-result-content table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; }
.office-result-content th,
.office-result-content td { padding: 9px 10px; border-right: 1px solid #e0e7ef; border-bottom: 1px solid #e0e7ef; text-align: left; vertical-align: top; font-size: 12px; line-height: 1.55; }
.office-result-content th { background: #f4f8fd; color: #284461; font-weight: 800; }
.office-result-content tr:last-child td { border-bottom: 0; }
.office-result-content :is(th, td):last-child { border-right: 0; }
.office-refine-form { margin-top: 18px; padding: 15px; border: 1px solid #dce6f1; border-radius: 12px; background: #f8fbff; }
.office-refine-form > label { display: block; margin-bottom: 8px; color: #263d59; font-size: 13px; font-weight: 800; }
.office-refine-form > div { display: flex; align-items: stretch; gap: 8px; }
.office-refine-form textarea { min-height: 58px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.office-refine-form button { min-width: 100px; border: 0; border-radius: 9px; background: var(--office-blue); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.office-refine-form button:disabled { opacity: .6; cursor: wait; }
.office-result-card[data-result-state="done"] .office-result-head > div:first-child > span { background: #e9f8ef; color: #268557; }
.office-result-card[data-result-state="error"] .office-result-head > div:first-child > span { background: #fff0f1; color: #c34855; }
.office-tool-footer-actions { margin: 15px 0 0; display: flex; align-items: center; justify-content: space-between; }
.office-tool-footer-actions a { color: #5e728d; font-size: 13px; font-weight: 700; }
.office-tool-footer-actions .office-history-link { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid #dce6f1; border-radius: 9px; background: #fff; color: #49627d; }

body[data-ui-theme="dark"] .office-tool-hero,
body[data-ui-theme="dark"] :is(.office-tool-form-card, .office-result-card, .office-tool-icon, .office-upload-item) { border-color: #313b4b; background: #151b25; color: #dce5f1; box-shadow: none; }
body[data-ui-theme="dark"] .office-tool-hero { background: linear-gradient(120deg, #141b25, #101620); }
body[data-ui-theme="dark"] :is(.office-tool-hero h1, .office-card-heading h2, .office-result-head h2, .office-field > span, .office-upload-box strong, .office-upload-item strong, .office-result-empty h3, .office-refine-form > label) { color: #edf3fb; }
body[data-ui-theme="dark"] :is(.office-tool-hero p, .office-card-heading p, .office-result-head p, .office-upload-box small, .office-tool-features > div, .office-result-empty p) { color: #c5d1e1; }
body[data-ui-theme="dark"] :is(.office-field input, .office-field textarea, .office-field select, .office-refine-form textarea, .office-result-actions button, .office-tool-footer-actions button) { border-color: #384456; background: #101620; color: #dce5f1; }
body[data-ui-theme="dark"] .office-tool-footer-actions .office-history-link { border-color: #384456; background: #101620; color: #dce5f1; }
body[data-ui-theme="dark"] :is(.office-upload-box, .office-refine-form) { border-color: #3a4e68; background: #111a26; }
body[data-ui-theme="dark"] .office-tool-features,
body[data-ui-theme="dark"] .office-result-head,
body[data-ui-theme="dark"] .office-result-content h2 { border-color: #303a49; }
body[data-ui-theme="dark"] .office-result-content { color: #d1dbe8; }
body[data-ui-theme="dark"] .office-result-content::-webkit-scrollbar-track { background: #111923; }
body[data-ui-theme="dark"] .office-result-content::-webkit-scrollbar-thumb { border-color: #111923; background: #4f6075; }
body[data-ui-theme="dark"] .office-result-content::-webkit-scrollbar-thumb:hover { background: #7188a4; }
body[data-ui-theme="dark"] .office-result-content :is(h2, h3, h4, h5) { color: #eef4fc; }
body[data-ui-theme="dark"] .office-result-content blockquote { border-color: #4b8ee8; background: #152234; color: #aebed1; }
body[data-ui-theme="dark"] .office-result-content hr { border-color: #303a49; }
body[data-ui-theme="dark"] .office-result-content code { background: #202a38; color: #b9d5ff; }
body[data-ui-theme="dark"] .office-table-wrap { border-color: #394556; }
body[data-ui-theme="dark"] .office-result-content table { background: #121923; }
body[data-ui-theme="dark"] .office-result-content th { background: #1a2432; color: #dbe8f8; }
body[data-ui-theme="dark"] .office-result-content :is(th, td) { border-color: #354153; }
body[data-ui-theme="dark"] .office-result-empty-icon { background: #111925; box-shadow: inset 0 0 0 1px #344154; }
body[data-ui-theme="dark"] .office-result-view-switch { border-color: #303a49; }
body[data-ui-theme="dark"] .office-result-view-switch button { color: #9bacbf; }
body[data-ui-theme="dark"] .office-result-view-switch button.is-active { border-color: #365a82; background: #172a40; color: #9ac5ff; }
body[data-ui-theme="dark"] .office-version-history { border-color: #354153; background: #111a26; }
body[data-ui-theme="dark"] .office-version-history-head strong { color: #e5effb; }
body[data-ui-theme="dark"] .office-version-history-head small,
body[data-ui-theme="dark"] .office-version-history-head > span { color: #9cacc0; }
body[data-ui-theme="dark"] .office-version-item { background: #17202c; }
body[data-ui-theme="dark"] .office-version-item.is-active { border-color: #365a82; background: #172a40; }
body[data-ui-theme="dark"] .office-version-label { color: #dceaff; }
body[data-ui-theme="dark"] .office-version-detail { color: #a7b7ca; }
body[data-ui-theme="dark"] .office-version-current { color: #83d4a6; }
body[data-ui-theme="dark"] .office-presentation-preview { border-color: #354153; background: #0d131d; }
body[data-ui-theme="dark"] .office-presentation-preview iframe { background: #0d131d; }
body[data-ui-theme="dark"] .office-presentation-preview-status { color: #9eacc0; background: #111923; }
body[data-ui-theme="dark"] .office-presentation-preview-status i { border-color: #34455a; border-top-color: #78adf4; }
body[data-ui-theme="dark"] .office-presentation-preview-status.is-error { color: #ff9fab; }
body[data-ui-theme="dark"] .office-form-error {
    border: 1px solid rgba(255, 141, 152, .34);
    background: #351d25;
    color: #ffb2bc;
    -webkit-text-fill-color: #ffb2bc;
}
body[data-ui-theme="dark"] .office-tool-footer-actions a {
    color: #8bbcff;
    -webkit-text-fill-color: #8bbcff;
}
body[data-ui-theme="dark"] .office-tool-features i {
    background: #17372d;
    color: #7ee0b0;
}

@media (max-width: 1180px) {
    .office-main { width: calc(100% - 56px); margin: 0 28px; }
    .office-workflow-grid { gap: 14px; }
    .office-workflow-card { padding: 17px; gap: 13px; }
    .office-tool-main { width: calc(100% - 48px); margin: 0 24px; }
    .office-tool-layout { grid-template-columns: minmax(330px, .9fr) minmax(390px, 1.15fr); }
    .office-field-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 900px) {
    .office-main { width: calc(100% - 28px); margin: 0 14px; padding-top: 22px; }
    .office-heading h1 { font-size: 31px; }
    .office-start-actions { align-items: stretch; flex-direction: column; }
    .office-start-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .office-primary-button { width: 100%; }
    .office-workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .office-tool-main { width: calc(100% - 28px); margin: 0 14px; }
    .office-tool-layout { grid-template-columns: 1fr; }
    .office-result-card { min-height: 560px; }
    .office-result-empty { min-height: 370px; }
    .office-result-content { max-height: 64vh; }
}
@media (max-width: 560px) {
    .office-start-panel { padding: 17px; }
    .office-start-actions > div,
    .office-workflow-grid,
    .office-recent-grid { grid-template-columns: 1fr; }
    .office-workflow-card { min-height: 110px; }
    .office-main.office-tool-main { padding-top: 16px; }
    .office-tool-hero { padding: 17px; align-items: flex-start; gap: 13px; border-radius: 15px; }
    .office-tool-icon { width: 56px; height: 56px; flex-basis: 56px; border-radius: 15px; }
    .office-tool-icon img { width: 45px; height: 45px; }
    .office-tool-hero h1 { font-size: 24px; }
    .office-tool-hero p { font-size: 13px; }
    .office-tool-form-card,
    .office-result-card { padding: 17px; border-radius: 15px; }
    .office-field-grid { grid-template-columns: 1fr; }
    .office-upload-box { align-items: stretch; flex-direction: column; }
    .office-upload-box button { width: 100%; justify-content: center; }
    .office-result-head { align-items: stretch; flex-direction: column; }
    .office-result-actions { justify-content: flex-start; }
    .office-result-empty { min-height: 320px; padding: 38px 12px; }
    .office-result-content { max-height: 58vh; padding-right: 8px; }
    .office-result-view-switch { flex-wrap: wrap; }
    .office-result-view-switch a { width: 100%; margin: 3px 0 0; }
    .office-version-history-head { flex-direction: column; gap: 4px; }
    .office-version-item { align-items: flex-start; flex-wrap: wrap; }
    .office-version-current { margin-left: auto; }
    .office-version-download { margin-left: auto; }
    .office-presentation-preview,
    .office-presentation-preview iframe { min-height: 420px; }
    .office-presentation-preview iframe { height: 66vh; }
    .office-refine-form > div { flex-direction: column; }
    .office-refine-form button { min-height: 42px; }
    .office-tool-footer-actions { margin-bottom: 8px; }
}

/* Spreadsheet workspace: keep the editor wide and make dark mode consistent
   after the shared office styles have finished cascading. */
.office-spreadsheet-app .office-tool-main {
    width: calc(100% - 18px);
    max-width: none;
    margin-right: 9px;
}
.office-spreadsheet-app .office-tool-layout {
    grid-template-columns: 185px 260px minmax(0, 1fr);
    min-height: calc(100vh - 160px);
}
.office-spreadsheet-app .office-result-card {
    min-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.office-spreadsheet-app .spreadsheet-grid-shell {
    min-height: 420px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.office-spreadsheet-app .spreadsheet-grid-scroll {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
}
.office-spreadsheet-app .spreadsheet-grid {
    min-width: 720px;
    font-size: 12px;
}
.office-spreadsheet-app .spreadsheet-grid th,
.office-spreadsheet-app .spreadsheet-grid td {
    height: 34px;
    padding: 7px 10px;
}
.office-spreadsheet-app .spreadsheet-grid thead th {
    height: 30px;
    font-size: 11px;
}
.office-spreadsheet-app .office-result-empty {
    min-height: 104px;
    padding: 16px 20px;
}
.office-spreadsheet-app .office-result-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
}
.office-spreadsheet-app .office-result-empty-icon img {
    width: 31px;
    height: 31px;
}
.office-spreadsheet-app .office-result-empty h3 {
    margin: 8px 0 3px;
}

body[data-ui-theme="dark"] .office-spreadsheet-app,
body[data-ui-theme="dark"] .office-spreadsheet-app .creation-workspace,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-main {
    background: #0c111b;
    color: #edf3fb;
}
body[data-ui-theme="dark"] .office-spreadsheet-app {
    --sheet-ink: #edf3fb;
    --office-ink: #edf3fb;
    --office-muted: #aebdd0;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-tool-hero,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-tool-icon {
    border-color: #2d3a4d;
    background: #151d29;
    color: #edf3fb;
    box-shadow: none;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-tool-icon {
    background: #1b2a3e;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-tool-hero h1,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-tool-hero p,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-card-heading h2,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-card-heading p,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-result-head h2,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-result-head p {
    color: #edf3fb;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-tool-hero p,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-card-heading p,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-result-head p {
    color: #aebdd0;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-tool-form-card,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-result-card {
    border-color: #2d3a4d;
    background: #151d29;
    color: #edf3fb;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar-brand,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar-section,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar-nav button,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sheet-list button {
    color: #aebdd0;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-brand-mark {
    background: #1b2a3e;
    color: #8dbbff;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-new-sheet {
    border-color: #355277;
    background: #182b44;
    color: #9fc5ff;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar-nav button:hover,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar-nav button.is-active,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sheet-list button:hover,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sheet-list button.is-active {
    background: #1c304a;
    color: #b7d3ff;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar-nav button span,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar-section button,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sheet-list button b {
    color: #8192a8;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar-tip {
    border-color: #2d3a4d;
    background: #111923;
    color: #9eafc3;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-sidebar-tip strong {
    color: #dce8f7;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-field > span {
    color: #dce8f7;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-field input,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-field textarea,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-field select,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-refine-form textarea {
    border-color: #2d3a4d;
    background: #101722;
    color: #edf3fb;
    color-scheme: dark;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-field :is(input, textarea, select):focus,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-refine-form textarea:focus {
    border-color: #4d8fe8;
    box-shadow: 0 0 0 3px rgba(77, 143, 232, .18);
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-field :is(input, textarea)::placeholder,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-refine-form textarea::placeholder {
    color: #8192a8;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-upload-box,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-refine-form {
    border-color: #355277;
    background: #111923;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-upload-box strong,
body[data-ui-theme="dark"] .office-spreadsheet-app .office-upload-box small {
    color: #dce8f7;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-upload-box small {
    color: #9eafc3;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-upload-box button {
    border-color: #4d8fe8;
    background: #182b44;
    color: #a8ccff;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-quick-prompts > span {
    color: #8192a8;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-quick-prompts button {
    border-color: #355277;
    background: #111923;
    color: #a8c5e8;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-quick-prompts button:hover {
    border-color: #4d8fe8;
    background: #1c304a;
    color: #b7d3ff;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-toolbar,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid-meta {
    border-color: #2d3a4d;
    background: #111923;
    color: #aebdd0;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-toolbar-tabs button,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-toolbar-actions button {
    color: #9eafc3;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-toolbar-tabs button.is-active {
    background: #1c304a;
    color: #b7d3ff;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-toolbar-actions button {
    border-color: #2d3a4d;
    background: #151d29;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-toolbar-actions button:hover {
    border-color: #4d8fe8;
    color: #b7d3ff;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid-shell {
    border-color: #2d3a4d;
    background: #101722;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid-meta small {
    color: #8192a8;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid {
    background: #101722;
    color: #d6e1ef;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid th,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid td {
    border-color: #2d3a4d;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid thead th,
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid tbody th {
    background: #111923;
    color: #8fa2b9;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .spreadsheet-grid td:focus {
    background: #172a40;
    box-shadow: inset 0 0 0 2px #4d8fe8;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-result-head {
    border-color: #2d3a4d;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-result-empty {
    color: #edf3fb;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-result-empty h3 {
    color: #edf3fb;
}
body[data-ui-theme="dark"] .office-spreadsheet-app .office-result-empty p {
    color: #9eafc3;
}

@media (max-width: 1120px) {
    .office-spreadsheet-app .office-tool-layout {
        grid-template-columns: 180px 250px minmax(0, 1fr);
    }
}
@media (max-width: 920px) {
    .office-spreadsheet-app .office-tool-layout {
        grid-template-columns: 190px minmax(0, 1fr);
    }
    .office-spreadsheet-app .office-result-card {
        min-height: 560px;
    }
}
@media (max-width: 680px) {
    .office-spreadsheet-app .office-tool-main {
        width: calc(100% - 22px);
        margin-right: 11px;
    }
    .office-spreadsheet-app .office-tool-layout {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .office-spreadsheet-app .office-tool-form-card,
    .office-spreadsheet-app .office-result-card,
    .office-spreadsheet-app .spreadsheet-sidebar {
        width: 100%;
    }
    .office-spreadsheet-app .spreadsheet-grid-shell {
        min-height: 320px;
        flex: none;
    }
    .office-spreadsheet-app .office-result-card {
        min-height: 0;
    }
}