/* Excelxtr start screen (/tools/workspace/): a working page in the site's
   look (tools-hub.css shell, site-experience.css themes). */
.workspace-home { --sx-ink: #0b2855; --sx-text: #2b4569; --sx-muted: #607590; --sx-line: #d9e4f3; --sx-card: rgba(255, 255, 255, .92); --sx-soft: #f2f6fd; --sx-blue: #2f68ed; --sx-blue-soft: #eaf1ff; --sx-shadow: 0 14px 40px rgba(32, 70, 126, .1); }
html[data-theme="dark"] .workspace-home { --sx-ink: #edf4ff; --sx-text: #c4d2e4; --sx-muted: #9fb1c6; --sx-line: #2b405c; --sx-card: #142238; --sx-soft: #172942; --sx-blue-soft: #1d3354; --sx-shadow: 0 14px 40px rgba(0, 0, 0, .25); }
.sx { padding-block: 34px 56px; }
.sx svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Welcome and the two starting actions. */
.sx-welcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 28px; padding-bottom: 30px; border-bottom: 1px solid var(--sx-line); }
.sx-welcome h1 { margin: 0 0 6px; color: var(--sx-ink); font-size: clamp(30px, 3.2vw, 42px); font-weight: 790; letter-spacing: -.04em; line-height: 1.1; }
.sx-sub { margin: 0; color: var(--sx-muted); font-size: 15px; }
.sx-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; border: 1px solid var(--sx-line); border-radius: 14px; background: var(--sx-card); box-shadow: var(--sx-shadow); }
.sx-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--sx-line); border-radius: 10px; background: var(--sx-card); color: var(--sx-ink); font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.sx-btn:hover { border-color: #b9cdee; background: var(--sx-soft); }
.sx-btn.is-primary { border-color: var(--sx-blue); background: var(--sx-blue); color: #fff !important; }
.sx-btn.is-primary:hover { background: #2559d6; }
.sx-btn.is-small { height: 34px; padding: 0 12px; font-size: 12.5px; }
.sx-file-status { grid-column: 1 / -1; margin: 0; color: var(--sx-muted); font-size: 13px; text-align: right; }
.sx-file-status:empty { display: none; }
.sx-file-status.is-error { color: #b42318; }

.sx-section { padding-top: 30px; }
.sx-section h2 { margin: 0 0 14px; color: var(--sx-ink); font-size: 18px; font-weight: 750; letter-spacing: -.02em; }

/* Continue where you left off. */
.sx-continue-wrap[hidden] { display: none; }
.sx-continue { display: grid; grid-template-columns: minmax(0, 1fr) 260px; overflow: hidden; max-width: 640px; border: 1px solid var(--sx-line); border-radius: 18px; background: var(--sx-card); box-shadow: var(--sx-shadow); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.sx-continue:hover { border-color: #b9cdee; transform: translateY(-1px); }
.sx-continue-copy { display: grid; align-content: center; justify-items: start; gap: 6px; padding: 20px 22px; }
.sx-continue-copy small { color: var(--sx-muted); font-size: 12.5px; }
.sx-continue-copy strong { color: var(--sx-ink); font-size: 18px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.sx-continue-copy .sx-btn { margin-top: 6px; }
.sx-continue-art { display: grid; place-items: center; background: linear-gradient(145deg, #eef4ff, #e2ecff); }
html[data-theme="dark"] .sx-continue-art { background: var(--sx-soft); }
.sx-sheet { display: grid; grid-template-columns: repeat(4, 34px); grid-auto-rows: 20px; overflow: hidden; border: 1px solid #c9d6ec; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgba(32, 70, 126, .12); }
.sx-sheet i { border-right: 1px solid #e3eaf5; border-bottom: 1px solid #e3eaf5; }
.sx-sheet i:nth-child(-n+4) { background: var(--sx-blue); }
.sx-sheet i:nth-child(7) { background: #ffe2cc; box-shadow: inset 0 0 0 2px #ef7d32; }

/* Chips and search rows. */
.sx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--sx-text); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.sx-chip:hover { background: var(--sx-soft); }
.sx-chip[aria-selected="true"], .sx-chip[aria-pressed="true"] { border-color: #b9cdee; background: var(--sx-blue-soft); color: var(--sx-blue); }
html[data-theme="dark"] .sx-chip[aria-selected="true"], html[data-theme="dark"] .sx-chip[aria-pressed="true"] { color: #8fb6ff; border-color: #2f4a70; }
.sx-chip svg { width: 16px; height: 16px; }
.sx-search { display: flex; align-items: center; gap: 7px; width: 260px; height: 38px; padding: 0 12px; border: 1px solid var(--sx-line); border-radius: 10px; background: var(--sx-card); color: var(--sx-muted); }
.sx-search:focus-within { border-color: var(--sx-blue); box-shadow: 0 0 0 3px rgba(47, 104, 237, .14); }
.sx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--sx-ink); font: inherit; font-size: 13px; }

/* Template carousel. */
.sx-carousel { position: relative; }
.sx-templates { display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sx-templates::-webkit-scrollbar { display: none; }
.sx-template { display: grid; align-content: start; gap: 4px; scroll-snap-align: start; color: inherit; text-decoration: none; }
.sx-template strong { margin-top: 8px; color: var(--sx-ink); font-size: 14px; }
.sx-template small { color: var(--sx-muted); font-size: 12px; line-height: 1.45; }
.sx-template:hover .sx-mini { border-color: #9dbbf0; box-shadow: 0 16px 34px rgba(32, 70, 126, .16); transform: translateY(-2px); }
.sx-template:focus-visible { outline: none; }
.sx-template:focus-visible .sx-mini { outline: 3px solid var(--sx-blue); outline-offset: 2px; }
.sx-scroll { position: absolute; top: 72px; z-index: 2; display: grid; width: 38px; height: 38px; padding: 0; border: 1px solid var(--sx-line); border-radius: 50%; background: var(--sx-card); color: var(--sx-ink); box-shadow: var(--sx-shadow); place-items: center; cursor: pointer; }
.sx-scroll[hidden] { display: none; }
.sx-scroll.is-left { left: -18px; } .sx-scroll.is-right { right: -18px; }
.sx-none { color: var(--sx-muted); }

/* A template preview: a small sheet drawn from the template's own content. */
.sx-mini { display: grid; align-content: start; gap: 6px; height: 156px; overflow: hidden; padding: 10px 10px 0; border: 1px solid #d5e0ef; border-radius: 12px; background: #fff; color: #33465f; box-shadow: 0 6px 18px rgba(32, 70, 126, .08); font: 600 7px/1.25 Inter, "Segoe UI", Arial, sans-serif; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sx-mini-title { color: var(--tone); font-size: 10px; font-weight: 800; letter-spacing: -.01em; }
.sx-mini-table { display: grid; }
.sx-mini-table i, .sx-mini-calendar i { overflow: hidden; padding: 3px 4px; border-bottom: 1px solid #edf1f7; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.sx-mini-table .is-head, .sx-mini-calendar .is-head { background: var(--tone); color: #fff; font-weight: 700; }
.sx-mini-table .is-stripe { background: #f6f8fc; }
.sx-mini-table .is-total { background: #eef3fb; font-weight: 800; }
.sx-mini-table .is-status.is-good { color: #12805c; } .sx-mini-table .is-status.is-warn { color: #b54708; } .sx-mini-table .is-status.is-bad { color: #b42318; } .sx-mini-table .is-status.is-muted { color: #667085; }
.sx-mini-calendar { display: grid; grid-template-columns: repeat(7, 1fr); }
.sx-mini-calendar i { height: 14px; border-right: 1px solid #edf1f7; text-align: right; }
.sx-mini-calendar .is-weekend { background: #f3f6fb; }
.sx-mini-gantt { display: grid; gap: 7px; padding-top: 4px; }
.sx-mini-gantt-row { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 6px; }
.sx-mini-gantt i { font-style: normal; }
.sx-mini-gantt .is-track { position: relative; height: 12px; border-radius: 3px; background: repeating-linear-gradient(90deg, #f3f6fb 0 9%, #fff 9% 10%); }
.sx-mini-gantt .is-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--tone); }
.sx-mini-gantt .is-bar.is-alt { background: #0f8a75; }
.sx-mini-invoice { display: grid; gap: 5px; }
.sx-mini-invoice > i { font-style: normal; color: #667085; }
.sx-mini-invoice .is-grand { justify-self: end; padding: 3px 6px; border-radius: 4px; background: #eef3fb; color: var(--tone); font-weight: 800; }

/* Workbooks. */
.sx-guest { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--sx-line); border-radius: 16px; background: var(--sx-card); box-shadow: var(--sx-shadow); }
.sx-guest[hidden] { display: none; }
.sx-guest > div { flex: 1; }
.sx-guest h3 { margin: 0 0 4px; color: var(--sx-ink); font-size: 15px; }
.sx-guest p { margin: 0; max-width: 62ch; color: var(--sx-muted); font-size: 13.5px; line-height: 1.55; }
.sx-guest-icon { display: grid; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--sx-blue-soft); color: var(--sx-blue); place-items: center; }
.sx-library { overflow: hidden; border: 1px solid var(--sx-line); border-radius: 16px; background: var(--sx-card); box-shadow: var(--sx-shadow); }
.sx-library[hidden] { display: none; }
.sx-table { width: 100%; border-collapse: collapse; }
.sx-table th { padding: 12px 16px; border-bottom: 1px solid var(--sx-line); color: var(--sx-muted); font-size: 12px; font-weight: 700; text-align: left; }
.sx-table td { padding: 11px 16px; border-bottom: 1px solid var(--sx-line); color: var(--sx-muted); font-size: 13px; }
.sx-table tr:last-child td { border-bottom: 0; }
.sx-table tbody tr:hover td { background: var(--sx-soft); }
.workspace-home .workspace-book-name { display: flex; align-items: center; gap: 12px; color: var(--sx-ink); text-decoration: none; }
.workspace-home .workspace-book-name b { display: block; font-size: 14px; font-weight: 700; }
.workspace-home .workspace-book-name small { display: block; color: var(--sx-muted); font-size: 12px; }
.workspace-home .workspace-book-icon { display: grid; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--sx-blue-soft); color: var(--sx-blue); place-items: center; }
.workspace-home .workspace-book-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.sx-library-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 16px; border-top: 1px solid var(--sx-line); }
.sx-summary { margin: 0; color: var(--sx-muted); font-size: 12px; }
.sx-usage { display: flex; align-items: center; gap: 10px; color: var(--sx-muted); font-size: 12px; }
.sx-usage[hidden] { display: none; }
.sx-usage-bar { position: relative; overflow: hidden; width: 120px; height: 6px; border-radius: 6px; background: var(--sx-line); }
.sx-usage-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--sx-blue); }
.sx-usage.is-high .sx-usage-bar i { background: #ef7d32; } .sx-usage.is-full .sx-usage-bar i { background: #d64545; }
.sx-usage.is-full { color: #d64545; }
.sx-more { margin-left: auto; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--sx-blue); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sx-more:hover { background: var(--sx-blue-soft); } .sx-more[hidden] { display: none; }
.sx-row-actions { width: 1%; white-space: nowrap; text-align: right; }
.sx-icon-btn { display: inline-grid; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sx-muted); place-items: center; cursor: pointer; opacity: .55; }
.sx-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
tr:hover .sx-icon-btn, .sx-icon-btn:focus-visible { opacity: 1; } .sx-icon-btn:hover { background: var(--sx-blue-soft); color: #d64545; }
.sx-confirm { display: inline-flex; align-items: center; gap: 8px; color: var(--sx-ink); font-size: 13px; }
.sx-confirm button { padding: 5px 10px; border: 1px solid var(--sx-line); border-radius: 8px; background: var(--sx-card); color: var(--sx-ink); font: inherit; font-weight: 700; cursor: pointer; }
.sx-confirm button.is-danger { border-color: #d64545; background: #d64545; color: #fff; }
.sx-empty, .sx-error { padding: 26px 16px; text-align: center; color: var(--sx-muted); }
.sx-empty h3 { margin: 0 0 4px; color: var(--sx-ink); font-size: 15px; }
.sx-empty p, .sx-error p { margin: 0 0 10px; }
.sx-error button { height: 34px; padding: 0 14px; border: 1px solid var(--sx-line); border-radius: 9px; background: var(--sx-card); color: var(--sx-blue); font: inherit; font-weight: 700; cursor: pointer; }

/* Excelxtr tools. */
.sx-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sx-tool { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--sx-line); border-radius: 14px; background: var(--sx-card); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.sx-tool:hover { border-color: #b9cdee; transform: translateY(-1px); }
.sx-tool strong { display: block; color: var(--sx-ink); font-size: 14px; }
.sx-tool small { display: block; color: var(--sx-muted); font-size: 12px; }
.sx-tool-icon { display: grid; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #fff1e7; color: #b4521b; place-items: center; font-weight: 800; font-size: 13px; }
html[data-theme="dark"] .sx-tool-icon { background: #3a2416; color: #ffb07a; }

@media (max-width: 1000px) { .sx-welcome { grid-template-columns: 1fr; } .sx-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-continue { grid-template-columns: 1fr; } .sx-continue-art { display: none; } }
@media (prefers-reduced-motion: reduce) { .sx-mini, .sx-continue, .sx-tool, .sx-btn { transition: none; } .sx-template:hover .sx-mini, .sx-continue:hover, .sx-tool:hover { transform: none; } }

/* v398: Excelxtr's own start layout. One search for everything, workbooks
   beside a rail of shortcuts, templates as a grid of jobs. */
.sx2-hero { padding-bottom: 26px; border-bottom: 1px solid var(--sx-line); }
.sx2-hero h1 { margin: 0 0 6px; color: var(--sx-ink); font-size: clamp(30px, 3.2vw, 42px); font-weight: 790; letter-spacing: -.04em; line-height: 1.1; }
.sx2-startbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 18px; }
.sx2-find { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border: 1px solid var(--sx-line); border-radius: 16px; background: var(--sx-card); color: var(--sx-muted); box-shadow: var(--sx-shadow); }
.sx2-find:focus-within { border-color: var(--sx-blue); box-shadow: 0 0 0 3px rgba(47, 104, 237, .14), var(--sx-shadow); }
.sx2-find svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sx2-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--sx-ink); font: inherit; font-size: 16px; }
.sx2-find input::placeholder { color: var(--sx-muted); }
.sx2 .sx-actions { flex-wrap: nowrap; }
.sx2-columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 28px; padding-top: 28px; }
.sx2-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.sx2 h2 { margin: 0 0 14px; color: var(--sx-ink); font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.sx2-head h2 { margin: 0; }
.sx2-rail { display: grid; gap: 26px; }
.sx2-rail .sx-continue { grid-template-columns: 1fr; max-width: none; }
.sx2-rail .sx-continue-art { display: none; }
.sx2-rail .sx-tools { grid-template-columns: 1fr; gap: 8px; }
.sx2-rail .sx-tool { padding: 11px 13px; }
.sx2-rail .sx-tool-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sx2-templates { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--sx-line); }
.sx2-templates h2 { margin-bottom: 4px; }
.sx2-templates > .sx-sub { margin: 0 0 18px; }
.sx2-start { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 24px; }
.sx2-cats { position: sticky; top: 16px; display: grid; gap: 2px; }
.sx2-cats .sx-chip { justify-content: flex-start; width: 100%; height: 38px; border-radius: 10px; font-size: 14px; }
.sx2 .sx-templates { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 18px; overflow: visible; padding: 0; scroll-snap-type: none; }
@media (max-width: 1100px) { .sx2-columns { grid-template-columns: 1fr; } .sx2-rail .sx-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .sx2-startbar, .sx2-start { grid-template-columns: 1fr; } .sx2-cats { position: static; display: flex; flex-wrap: wrap; } .sx2-cats .sx-chip { width: auto; } .sx2 .sx-actions { flex-wrap: wrap; } }