@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400..900&display=swap');
/* =====================================================================
   Radii Office Shell styles! Office chrome with a Radii Office soul:
   gel buttons, a glowing JetBrains Mono brand and springy animations!
   (Identical copy in each app folder; keep them in sync!)
   ===================================================================== */
:root {
    --os-accent: #185abd;
    --os-accent-d: #103f91;
    --os-accent-l: #e8f0fc;
    --os-title: #185abd;
    --os-gel1: #6fa8ff;
    --os-gel2: #2b6fd6;
    --os-glow: rgba(140, 200, 255, 0.75);
    --os-thumb-bg: #0f172a;
    --os-ribbon: #f7f7f7;
    --os-ribbon-line: #dcdcdc;
    --os-ui: #f3f3f3;
    --os-text: #252525;
    --os-dim: #666;
    --os-hover: #e7e7e7;
    --os-on: #dfe8f7;
    --os-menu: #ffffff;
    --os-menu-line: #e1e1e1;
    --os-field: #ffffff;
    --os-field-line: #c8c8c8;
    --os-font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --os-brand-font: "JetBrains Mono", ui-monospace, Menlo, monospace;
    --os-spring: cubic-bezier(0.2, 0.9, 0.25, 1.18);
    --os-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.os-dark {
    --os-ribbon: #262626;
    --os-ribbon-line: #3b3b3b;
    --os-ui: #1f1f1f;
    --os-text: #e8e8e8;
    --os-dim: #a3a3a3;
    --os-hover: #383838;
    --os-on: #2c3a52;
    --os-menu: #2b2b2b;
    --os-menu-line: #3d3d3d;
    --os-field: #1e1e1e;
    --os-field-line: #4a4a4a;
}

#os-backstage[hidden], #os-top [hidden], #os-status [hidden], .os-menu [hidden], .os-search-res[hidden], .os-tab[hidden] { display: none !important; }

/* Classic layout: the whole shell disappears! */
body.os-classic #os-top,
body.os-classic #os-status,
body.os-classic #os-backstage { display: none !important; }
#os-top, #os-status { display: none; }
body.os-office #os-top, body.os-office #os-status { display: block; }

.os-ico { width: 18px; height: 18px; flex: none; display: block; }

#os-top, #os-status, #os-backstage, .os-menu, .os-dlg, #os-toast {
    font-family: var(--os-font);
    font-size: 13px;
    color: var(--os-text);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
#os-top *, #os-status *, #os-backstage *, .os-menu *, .os-dlg * { box-sizing: border-box; }
#os-top button, #os-status button, #os-backstage button, .os-menu button, .os-dlg button { font: inherit; color: inherit; }

/* ---------- Title bar (glossy, with a glowing brand!) ---------- */
#os-top { position: relative; z-index: 60; flex: none; }
#os-title {
    height: 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 10px;
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.03) 52%, rgba(0, 0, 0, 0.06) 100%), var(--os-title);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.os-tl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.os-logo { width: 22px; height: 22px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3)); }
.os-qat { display: flex; gap: 2px; }
.os-qbtn {
    width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #fff;
    display: grid; place-items: center; cursor: pointer; transition: background 0.15s, transform 0.12s;
}
.os-qbtn:hover { background: rgba(255, 255, 255, 0.18); }
.os-qbtn:active { transform: scale(0.88); }
.os-qbtn:disabled { opacity: 0.45; cursor: default; }
.os-qbtn .os-ico { width: 17px; height: 17px; }
.os-brand {
    font-family: var(--os-brand-font);
    font-weight: 800;
    font-size: 15px;
    margin-left: 4px;
    text-shadow: 0 0 10px var(--os-glow), 0 1px 1px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    user-select: none;
}
.os-tc { display: flex; align-items: center; gap: 8px; min-width: 0; }
#os-docname {
    background: transparent; border: 1px solid transparent; color: #fff; font: inherit; font-weight: 600; font-size: 13px;
    padding: 3px 7px; border-radius: 5px; text-align: center; min-width: 6ch; max-width: 36vw; field-sizing: content;
    transition: background 0.15s, border-color 0.15s;
}
#os-docname:hover { border-color: rgba(255, 255, 255, 0.35); }
#os-docname:focus { outline: 0; background: rgba(255, 255, 255, 0.95); color: #222; text-align: left; }
#os-docname[readonly] { pointer-events: none; }
.os-saved { font-size: 11px; padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); white-space: nowrap; }
.os-saved.blip { animation: osBlip 0.5s var(--os-spring); }
@keyframes osBlip { 40% { transform: scale(1.15); background: rgba(255, 255, 255, 0.4); } }
.os-tr { display: flex; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.os-search { position: relative; width: min(340px, 100%); }
.os-search > .os-ico { position: absolute; left: 9px; top: 5px; width: 16px; height: 16px; opacity: 0.85; pointer-events: none; }
#os-search {
    width: 100%; height: 26px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.16);
    color: #fff; padding: 0 10px 0 31px; font: inherit; font-size: 12.5px; transition: background 0.2s, box-shadow 0.2s;
}
#os-search::placeholder { color: rgba(255, 255, 255, 0.82); }
#os-search:focus { outline: 0; background: #fff; color: #222; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
#os-search:focus::placeholder { color: #888; }
.os-search-res { position: absolute; top: 30px; left: 0; right: 0; }

/* ---------- Tabs (with a sliding, glowing ink bar!) ---------- */
#os-tabs {
    height: 33px; display: flex; align-items: stretch; gap: 2px; padding: 0 8px; background: var(--os-ribbon); position: relative;
}
.os-tab {
    border: 0; background: transparent; padding: 0 12px; font-size: 13px; cursor: pointer; color: var(--os-text);
    border-radius: 5px 5px 0 0; transition: color 0.15s, background 0.15s; white-space: nowrap;
}
.os-tab:hover { background: var(--os-hover); }
.os-tab.on { color: var(--os-accent-d); font-weight: 600; }
body.os-dark .os-tab.on { color: var(--os-gel1); }
.os-tab.os-ctx { color: var(--os-accent); font-weight: 600; }
.os-tab.os-ctx::before { content: ""; position: absolute; }
.os-tab.os-ctx-in { animation: osCtxIn 0.4s var(--os-spring); }
@keyframes osCtxIn { from { transform: translateY(8px); opacity: 0; } }
.os-file {
    margin: 4px 6px 4px 0; border-radius: 6px; padding: 0 15px; font-weight: 600; color: #fff !important;
    background: linear-gradient(180deg, var(--os-gel1) 0%, var(--os-gel2) 100%) !important;
    border: 1px solid var(--os-accent-d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.18);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    transition: filter 0.15s, transform 0.12s;
}
.os-file:hover { filter: brightness(1.1) saturate(1.1); }
.os-file:active { transform: scale(0.95); }
#os-ink {
    position: absolute; bottom: 2px; height: 3px; border-radius: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--os-gel1), var(--os-accent));
    box-shadow: 0 0 7px var(--os-glow);
    transition: left 0.34s var(--os-spring), width 0.34s var(--os-spring);
}
#os-collapse {
    margin-left: auto; border: 0; background: transparent; width: 30px; border-radius: 5px; display: grid; place-items: center;
    cursor: pointer; color: var(--os-dim); transition: transform 0.25s var(--os-spring), background 0.15s;
}
#os-collapse:hover { background: var(--os-hover); }
body.os-ribbon-min #os-collapse { transform: rotate(180deg); }

/* ---------- Ribbon ---------- */
#os-ribbon {
    height: 96px; background: var(--os-ribbon); border-bottom: 1px solid var(--os-ribbon-line);
    overflow-x: auto; overflow-y: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: height 0.25s var(--os-ease); scrollbar-width: thin; position: relative;
}
body.os-ribbon-min #os-ribbon { height: 0; border-bottom: 0; }
body.os-ribbon-min.os-ribbon-peek #os-ribbon { height: 96px; position: absolute; left: 0; right: 0; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.os-panel { display: none; height: 100%; padding: 4px 6px 0; }
.os-panel.on { display: flex; }
.os-panel-in { animation: osPanelIn 0.24s var(--os-ease); }
@keyframes osPanelIn { from { opacity: 0; transform: translateY(-5px); } }
.os-group { display: flex; flex-direction: column; flex: none; padding: 0 6px; position: relative; }
.os-group::after { content: ""; position: absolute; right: 0; top: 6px; bottom: 8px; width: 1px; background: var(--os-ribbon-line); }
.os-gbody { flex: 1; display: flex; align-items: center; gap: 2px; }
.os-glabel { font-size: 11px; color: var(--os-dim); text-align: center; padding: 1px 0 4px; white-space: nowrap; }
.os-stack { display: flex; flex-direction: column; gap: 1px; justify-content: center; }
.os-rows { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.os-row { display: flex; align-items: center; gap: 2px; }
.os-rsep { width: 1px; height: 18px; background: var(--os-ribbon-line); margin: 0 3px; flex: none; }
.os-custom { display: flex; align-items: center; }

.os-rb {
    border: 1px solid transparent; background: transparent; border-radius: 5px; cursor: pointer; color: var(--os-text);
    display: flex; align-items: center; gap: 5px; white-space: nowrap; position: relative;
    transition: background 0.14s, border-color 0.14s, transform 0.1s, box-shadow 0.14s;
}
/* Ribbon buttons light up like glass when you hover them! */
.os-rb:hover, .os-split-arrow:hover, .os-gal-more:hover {
    background: linear-gradient(180deg, #ffffff 0%, var(--os-accent-l) 100%);
    border-color: color-mix(in srgb, var(--os-accent) 28%, transparent);
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px color-mix(in srgb, var(--os-accent) 18%, transparent);
}
body.os-dark .os-rb:hover, body.os-dark .os-split-arrow:hover, body.os-dark .os-gal-more:hover {
    background: linear-gradient(180deg, #3e4552 0%, #2d323b 100%); border-color: #535b6a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.os-rb:active { transform: scale(0.93); }
.os-rb.on, .os-rb.os-menu-on, .os-split-arrow.os-menu-on {
    background: var(--os-on); border-color: color-mix(in srgb, var(--os-accent) 40%, transparent);
}
.os-rb:disabled { opacity: 0.42; cursor: default; transform: none; }
.os-rb.os-pop { animation: osBtnPop 0.32s var(--os-spring); }
@keyframes osBtnPop { 40% { transform: scale(0.9); } }
.os-rb.big { flex-direction: column; justify-content: flex-start; height: 68px; min-width: 50px; padding: 5px 5px 2px; gap: 3px; font-size: 12px; text-align: center; line-height: 1.15; }
.os-rb.big .os-ico, .os-rb.big .os-glyph { width: 30px; height: 30px; }
.os-rb.big .os-glyph { font-size: 20px; display: grid; place-items: center; }
.os-rb.sm { height: 24px; padding: 0 6px 0 4px; font-size: 12.5px; }
.os-rb.sm .os-ico { width: 16px; height: 16px; }
.os-rb.ic { width: 28px; height: 26px; justify-content: center; padding: 0; }
.os-rb.ic .os-ico { width: 17px; height: 17px; }
.os-caret { font-style: normal; font-size: 9px; opacity: 0.7; }
.os-glyph { font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800; font-size: 15px; line-height: 1; min-width: 14px; text-align: center; }
.os-glyph.it { font-style: italic; }
.os-glyph.u { text-decoration: underline; }
.os-glyph.s { text-decoration: line-through; }
.os-glyph.b { font-weight: 700; }
.os-cbar { position: absolute; left: 5px; right: 5px; bottom: 2px; height: 4px; border-radius: 1px; }
.os-rb.sm .os-cbar { left: 4px; right: auto; width: 16px; bottom: 1px; height: 3px; }
.os-split { display: flex; align-items: stretch; border-radius: 5px; }
.os-split.big { flex-direction: column; position: relative; }
.os-split .os-rb.ic { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.os-split.big .os-rb.big { height: 68px; }
.os-split-arrow {
    border: 1px solid transparent; background: transparent; border-radius: 0 5px 5px 0; width: 14px; padding: 0;
    font-size: 9px; cursor: pointer; color: var(--os-dim); transition: background 0.14s;
}
.os-split.big .os-split-arrow { position: absolute; right: 2px; top: 4px; z-index: 2; width: 16px; height: 18px; border-radius: 6px; font-size: 11px; line-height: 1; }
.os-split.big .os-rb.big .os-caret { visibility: hidden; }
.os-combo { display: inline-flex; align-items: center; gap: 4px; height: 24px; }
.os-select, .os-input {
    height: 24px; border: 1px solid var(--os-field-line); border-radius: 4px; background: var(--os-field); color: var(--os-text);
    font: inherit; font-size: 12.5px; padding: 0 4px; transition: border-color 0.15s, box-shadow 0.15s;
}
.os-select:hover, .os-input:hover { border-color: var(--os-accent); }
.os-select:focus, .os-input:focus { outline: 0; border-color: var(--os-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--os-accent) 30%, transparent); }
.os-input { width: 52px; }
/* Spin boxes: the number plus stacked ▲/▼ gel buttons! */
.os-spinbox { display: inline-flex; align-items: stretch; height: 24px; overflow: hidden; }
/* (#os-top beats the generic "#os-top button { font: inherit }" so the arrows stay tiny and the box stays 24px!) */
#os-top .os-spin button { font-size: 7px; line-height: 1; min-height: 0; height: auto; }
.os-spinbox .os-input { border-top-right-radius: 0; border-bottom-right-radius: 0; text-align: right; padding-right: 5px; }
.os-spin { display: flex; flex-direction: column; width: 16px; border: 1px solid var(--os-field-line); border-left: 0; border-radius: 0 4px 4px 0; overflow: hidden; }
.os-spin button {
    flex: 1; border: 0; padding: 0; margin: 0; cursor: pointer; font-size: 7px; line-height: 1; color: var(--os-dim);
    background: var(--os-field); display: grid; place-items: center; transition: background 0.12s, color 0.12s;
}
.os-spin button + button { border-top: 1px solid var(--os-field-line); }
.os-spin button:hover { background: linear-gradient(180deg, var(--os-gel1) 0%, var(--os-gel2) 100%); color: #fff; }
.os-spin button:active { filter: brightness(0.92); }
.os-spin button:disabled { opacity: 0.4; cursor: default; background: var(--os-field); color: var(--os-dim); }
.os-num.os-disabled { opacity: 0.55; }
.os-spinbox:focus-within .os-spin { border-color: var(--os-accent); }
.os-num-lab, .os-num-unit { font-size: 12px; color: var(--os-dim); }
.os-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; padding: 2px 4px; border-radius: 4px; white-space: nowrap; }
.os-check:hover { background: var(--os-hover); }
.os-check input { accent-color: var(--os-accent); margin: 0; }

/* Galleries (styles, transitions, animations)! */
.os-gallery { display: flex; align-items: stretch; height: 66px; border: 1px solid var(--os-ribbon-line); border-radius: 6px; background: var(--os-field); overflow: hidden; }
.os-gal-list { display: flex; gap: 2px; padding: 3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; max-width: 520px; }
.os-gal-list::-webkit-scrollbar { display: none; }
.os-gal-item {
    flex: none; width: 74px; border: 1px solid transparent; border-radius: 5px; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 3px; overflow: hidden;
    transition: background 0.14s, border-color 0.14s, transform 0.18s var(--os-spring);
}
.os-gal-item > span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.os-gal-item:hover { background: var(--os-accent-l); border-color: color-mix(in srgb, var(--os-accent) 30%, transparent); transform: translateY(-1px); }
body.os-dark .os-gal-item:hover { background: #35404f; }
.os-gal-item.on { border-color: var(--os-accent); background: var(--os-on); box-shadow: inset 0 0 0 1px var(--os-accent); }
.os-gal-item.os-pop { animation: osBtnPop 0.32s var(--os-spring); }
.os-gal-more { border: 0; border-left: 1px solid var(--os-ribbon-line); background: transparent; width: 18px; cursor: pointer; display: grid; place-items: center; color: var(--os-dim); padding: 0; }
.os-gal-more .os-ico { width: 13px; height: 13px; }

/* ---------- Menus ---------- */
.os-menu {
    position: fixed; z-index: 3000; min-width: 190px; max-height: 78vh; overflow: auto; background: var(--os-menu);
    border: 1px solid var(--os-menu-line); border-radius: 10px; padding: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.os-menu.os-pop-in { animation: osMenuIn 0.17s var(--os-ease); transform-origin: top left; }
.os-menu.os-closing { animation: osMenuOut 0.11s var(--os-ease) forwards; pointer-events: none; }
@keyframes osMenuIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
@keyframes osMenuOut { to { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.os-mitem {
    display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; text-align: left;
    padding: 6px 10px 6px 6px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.os-mitem:hover, .os-mitem:focus-visible, .os-mitem.kb { background: var(--os-hover); outline: none; }
.os-mitem:disabled { opacity: 0.45; cursor: default; background: transparent; }
.os-mitem.checked .os-mlabel { font-weight: 600; }
.os-mico { width: 20px; display: grid; place-items: center; flex: none; color: var(--os-accent); }
.os-mico .os-ico { width: 16px; height: 16px; }
.os-mdot { width: 14px; height: 14px; border-radius: 50%; display: block; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.15); }
.os-mlabel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.os-mlabel small { font-size: 11px; color: var(--os-dim); }
.os-mkbd { color: var(--os-dim); font-size: 11.5px; margin-left: 14px; }
.os-msep { height: 1px; background: var(--os-menu-line); margin: 4px 6px; }
.os-mhead { font-size: 11px; font-weight: 700; color: var(--os-dim); padding: 6px 10px 3px; text-transform: uppercase; letter-spacing: 0.4px; }
.os-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 4px 6px 6px; }
.os-swatch {
    width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.15); cursor: pointer; padding: 0;
    transition: transform 0.15s var(--os-spring), box-shadow 0.15s; display: grid; place-items: center; overflow: hidden;
}
.os-swatch:hover { transform: scale(1.18); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); z-index: 1; }
.os-swatches.wide .os-swatch { width: auto; height: 26px; font-size: 11px; }

/* ---------- Status bar ---------- */
#os-status {
    height: 26px; flex: none; background: var(--os-ui); border-top: 1px solid var(--os-ribbon-line);
    font-size: 12px; color: var(--os-dim); padding: 0 10px; z-index: 40; position: relative;
}
body.os-office #os-status { display: flex; align-items: center; gap: 12px; }
#os-status-l { display: flex; align-items: center; gap: 14px; white-space: nowrap; overflow: hidden; }
.os-st b { color: var(--os-text); font-weight: 600; }
.os-st-chip {
    padding: 1px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; color: #fff;
    background: linear-gradient(180deg, var(--os-gel1) 0%, var(--os-gel2) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.os-st-chip b { color: #fff; }
.os-grow { flex: 1; }
#os-views { display: flex; gap: 2px; }
.os-view-btn { width: 26px; height: 22px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--os-dim); }
.os-view-btn .os-ico { width: 16px; height: 16px; }
.os-view-btn:hover { background: var(--os-hover); }
.os-view-btn.on { background: var(--os-on); color: var(--os-accent-d); }
.os-zoom-box { display: flex; align-items: center; gap: 4px; }
.os-zbtn { border: 0; background: transparent; width: 20px; height: 20px; border-radius: 4px; cursor: pointer; color: var(--os-dim); font-size: 14px; }
.os-zbtn:hover { background: var(--os-hover); }
#os-zoom { width: 110px; accent-color: var(--os-accent); }
#os-zoom-lab { border: 0; background: transparent; cursor: pointer; color: var(--os-dim); min-width: 40px; font-size: 12px; }

/* ---------- Backstage (File screen) ---------- */
#os-backstage { position: fixed; inset: 0; z-index: 2500; display: flex; background: var(--os-menu); color: var(--os-text); }
#os-backstage.os-bs-in { animation: osBsIn 0.3s var(--os-ease); }
#os-backstage.os-bs-out { animation: osBsOut 0.19s var(--os-ease) forwards; }
@keyframes osBsIn { from { opacity: 0; transform: translateX(-26px); } }
@keyframes osBsOut { to { opacity: 0; transform: translateX(-16px); } }
.os-bs-nav {
    width: 220px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; color: #fff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, var(--os-accent) 0%, var(--os-accent-d) 100%);
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.12);
}
.os-bs-nav button {
    display: flex; align-items: center; gap: 12px; border: 1px solid transparent; background: transparent; color: #fff;
    padding: 10px 14px; border-radius: 8px; font-family: var(--os-brand-font) !important; font-weight: 700; font-size: 13px;
    cursor: pointer; text-align: left; transition: background 0.15s, padding 0.2s var(--os-spring), border-color 0.15s;
}
.os-bs-nav button:hover { background: rgba(255, 255, 255, 0.12); padding-left: 18px; border-color: rgba(255, 255, 255, 0.2); }
.os-bs-nav button.on {
    background: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%); color: var(--os-accent-d);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
}
.os-bs-nav .os-bs-back { margin-bottom: 12px; opacity: 0.92; }
.os-bs-body { flex: 1; overflow: auto; padding: 34px 52px; }
.os-bs-body h1 { font-family: var(--os-brand-font); font-weight: 800; font-size: 30px; margin: 0 0 22px; }
.os-bs-body h2 { font-size: 16px; font-weight: 600; margin: 30px 0 12px; }
.os-bs-body h2.first { margin-top: 0; }
.os-bs-body p.os-note { color: var(--os-dim); margin: 16px 0 0; }
.os-bs-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.os-bs-card {
    width: 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; text-align: left;
    border: 1px solid var(--os-menu-line); border-radius: 12px; background: transparent; cursor: pointer;
    transition: transform 0.22s var(--os-spring), box-shadow 0.2s, border-color 0.2s;
}
.os-bs-card > .os-ico { width: 28px; height: 28px; color: var(--os-accent); }
.os-bs-card span { color: var(--os-dim); font-size: 12.5px; line-height: 1.4; }
.os-bs-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); border-color: var(--os-accent); }
.os-bs-card .os-card-prev { width: 100%; height: 110px; border-radius: 8px; overflow: hidden; border: 1px solid var(--os-menu-line); position: relative; }
.os-opts { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.os-opt { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--os-menu-line); border-radius: 9px; cursor: pointer; }
.os-opt:hover { background: var(--os-hover); }
.os-opt input { accent-color: var(--os-accent); margin-top: 3px; }
.os-opt span { display: flex; flex-direction: column; gap: 2px; }
.os-opt em { font-style: normal; color: var(--os-dim); font-size: 12px; }
.os-seg { display: inline-flex; border: 1px solid var(--os-menu-line); border-radius: 9px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.os-seg button { border: 0; background: transparent; border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: background 0.15s; }
.os-seg button:hover { background: var(--os-hover); }
.os-seg button.on { background: linear-gradient(180deg, var(--os-gel1) 0%, var(--os-gel2) 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
.os-set-row { display: flex; align-items: center; gap: 14px; margin: 10px 0; flex-wrap: wrap; }
.os-set-row > b { min-width: 120px; font-weight: 600; }

/* Layout cards (Office vs Classic)! */
.os-lay-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.os-lay-card {
    width: 250px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 10px 14px; text-align: left;
    border: 2px solid var(--os-menu-line, #e1e1e1); border-radius: 14px; background: transparent; cursor: pointer; position: relative;
    font-family: var(--os-font); color: inherit; transition: transform 0.22s var(--os-spring), border-color 0.2s, box-shadow 0.2s;
}
.os-lay-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }
.os-lay-card.on { border-color: var(--os-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--os-accent) 30%, transparent); }
.os-lay-card.on::after {
    content: "✓"; position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-weight: 700; background: linear-gradient(180deg, var(--os-gel1) 0%, var(--os-gel2) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.25); animation: osCtxIn 0.35s var(--os-spring);
}
.os-lay-card b { font-family: var(--os-brand-font); font-size: 14px; margin-top: 4px; padding: 0 4px; }
.os-lay-card span { color: var(--os-dim, #666); font-size: 12.5px; line-height: 1.4; padding: 0 4px; }
.os-lay-thumb { width: 100%; height: 128px; border-radius: 9px; position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); }
.os-lay-thumb i { position: absolute; display: block; }
.os-lt-office { background: #e9e9e9; }
.os-lt-office .lt-side, .os-lt-office .lt-orb { display: none; }
.os-lt-office .lt-bar { left: 0; right: 0; top: 0; height: 30px; background: linear-gradient(var(--os-title) 0 12px, #f7f7f7 12px); border-bottom: 1px solid #dadada; }
.os-lt-office .lt-page { left: 50%; top: 40px; width: 74px; margin-left: -37px; bottom: -6px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); background-image: repeating-linear-gradient(transparent 0 7px, #d7d7d7 7px 8px); background-size: 56px 100%; background-repeat: no-repeat; background-position: 9px 9px; }
.os-lt-office .lt-strip { left: 6px; top: 38px; width: 34px; bottom: 6px; background: repeating-linear-gradient(#fff 0 18px, transparent 18px 24px); }
.os-lt-office .lt-slide { left: 48px; right: 8px; top: 40px; height: 72px; background: linear-gradient(180deg, #fbbf24, #d97706); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.os-lt-office .lt-list { left: 0; top: 31px; width: 54px; bottom: 0; background: #f3f0f7; background-image: repeating-linear-gradient(transparent 0 13px, #ddd 13px 14px); border-right: 1px solid #ddd; }
.os-lt-office .lt-note { left: 55px; right: 0; top: 31px; bottom: 0; background: #fff; background-image: linear-gradient(var(--os-accent) 0 0), repeating-linear-gradient(transparent 0 11px, #e3e3e3 11px 12px); background-size: 60px 4px, 100% 100%; background-repeat: no-repeat, repeat; background-position: 10px 10px, 0 24px; }
.os-lt-classic { background: radial-gradient(circle at 60% 40%, #1e293b 0%, var(--os-thumb-bg) 100%); }
.os-lt-classic .lt-bar { display: none; }
.os-lt-classic .lt-side { left: 0; top: 0; bottom: 0; width: 52px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)); border-right: 1px solid rgba(255, 255, 255, 0.25); }
.os-lt-classic .lt-side::before { content: ""; position: absolute; left: 7px; right: 7px; top: 10px; height: 8px; border-radius: 3px; background: #fff; box-shadow: 0 0 6px var(--os-glow), 0 16px 0 rgba(255, 255, 255, 0.25), 0 28px 0 rgba(255, 255, 255, 0.25), 0 40px 0 rgba(255, 255, 255, 0.25); }
.os-lt-classic .lt-page, .os-lt-classic .lt-note { left: 66px; right: 14px; top: 14px; bottom: 10px; border-radius: 7px; background: #fff; background-image: repeating-linear-gradient(transparent 0 7px, #e2e8f0 7px 8px); }
.os-lt-classic .lt-strip { left: 62px; width: 30px; top: 12px; bottom: 10px; border-radius: 5px; background: rgba(226, 232, 240, 0.85); }
.os-lt-classic .lt-slide { left: 98px; right: 10px; top: 30px; height: 64px; border-radius: 5px; background: linear-gradient(180deg, #fbbf24, #d97706); }
.os-lt-classic .lt-list { display: none; }
.os-lt-classic .lt-orb { width: 46px; height: 46px; left: 30px; bottom: -14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.8), color-mix(in srgb, var(--os-gel1) 45%, transparent) 55%, transparent 72%); }

/* ---------- Dialogs + toast ---------- */
.os-dlg-back { position: fixed; inset: 0; z-index: 3500; background: rgba(0, 0, 0, 0.32); display: grid; place-items: center; padding: 16px; animation: osFade 0.16s; }
.os-dlg-back.os-closing { animation: osFadeOut 0.15s forwards; }
@keyframes osFade { from { opacity: 0; } }
@keyframes osFadeOut { to { opacity: 0; } }
.os-dlg { width: 420px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; background: var(--os-menu); border-radius: 12px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); animation: osDlgIn 0.26s var(--os-spring); }
.os-dlg.wide { width: 620px; }
@keyframes osDlgIn { from { transform: scale(0.9) translateY(12px); opacity: 0; } }
.os-dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; font-family: var(--os-brand-font); font-weight: 800; font-size: 14.5px; }
.os-dlg-x { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; color: var(--os-dim); }
.os-dlg-x:hover { background: var(--os-hover); }
.os-dlg-body { padding: 4px 16px 12px; overflow: auto; }
.os-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--os-menu-line); }
.os-dlg-btn { min-width: 84px; height: 31px; padding: 0 14px; border: 1px solid var(--os-field-line); background: var(--os-field); border-radius: 7px; cursor: pointer; transition: background 0.14s, transform 0.1s, filter 0.14s; }
.os-dlg-btn:hover { background: var(--os-hover); }
.os-dlg-btn:active { transform: scale(0.96); }
.os-dlg-btn.primary {
    color: #fff; border-color: var(--os-accent-d); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    background: linear-gradient(180deg, var(--os-gel1) 0%, var(--os-gel2) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.os-dlg-btn.primary:hover { filter: brightness(1.1); background: linear-gradient(180deg, var(--os-gel1) 0%, var(--os-gel2) 100%); }
.os-dlg-btn.danger.primary { background: linear-gradient(180deg, #f59a8f 0%, #d4402f 48%, #c42b1c 52%, #b32617 100%); border-color: #8e1e12; }
.os-dlg-text { margin: 6px 0 4px; line-height: 1.45; }
.os-field { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; font-size: 12.5px; }
.os-dlg-input { height: 30px; border: 1px solid var(--os-field-line); border-radius: 6px; padding: 0 9px; background: var(--os-field); color: var(--os-text); font: inherit; }
.os-dlg-input:focus { outline: 0; border-color: var(--os-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--os-accent) 30%, transparent); }

#os-toast {
    position: fixed; left: 50%; bottom: 46px; transform: translate(-50%, 16px) scale(0.96); color: #fff; padding: 8px 16px; border-radius: 999px;
    font-size: 13px; opacity: 0; pointer-events: none; z-index: 4000; max-width: calc(100vw - 40px); text-align: center;
    background: linear-gradient(180deg, rgba(58, 62, 70, 0.95) 0%, rgba(24, 27, 33, 0.95) 100%);
    border: 1px solid color-mix(in srgb, var(--os-gel1) 50%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 14px color-mix(in srgb, var(--os-gel1) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: opacity 0.22s, transform 0.3s var(--os-spring);
}
#os-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* The layout swap curtain: a glassy wash with the app icon popping! */
.os-curtain {
    position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; opacity: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--os-gel1) 55%, transparent) 0%, color-mix(in srgb, var(--os-accent-d) 85%, black) 100%);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.22s var(--os-ease);
}
.os-curtain img { width: 84px; height: 84px; filter: drop-shadow(0 0 22px var(--os-glow)); transform: scale(0.6) rotate(-12deg); transition: transform 0.4s var(--os-spring); }
.os-curtain.in { opacity: 1; pointer-events: auto; }
.os-curtain.in img { transform: scale(1) rotate(0); }
.os-curtain.out { opacity: 0; transition-duration: 0.38s; }
.os-curtain.out img { transform: scale(1.5); opacity: 0; transition: transform 0.38s var(--os-ease), opacity 0.38s; }

body.os-no-anim #os-top *, body.os-no-anim #os-status *, body.os-no-anim .os-menu, body.os-no-anim #os-backstage { animation: none !important; transition: none !important; }

@media (max-width: 760px) {
    .os-search, .os-brand, .os-saved { display: none; }
    .os-bs-nav { width: 60px; }
    .os-bs-nav button span { display: none; }
    .os-bs-body { padding: 24px 18px; }
    #os-zoom { display: none; }
}

@media print {
    #os-top, #os-status, #os-backstage, .os-menu, #os-toast { display: none !important; }
}

/* Glossy buttons = each app's original lit-up sidebar button: a smooth
   two-stop gradient, a light rim, a colored glow and an inner highlight! */
.os-file, .os-st-chip, .os-dlg-btn.primary, .os-seg button.on, .os-lay-card.on::after, .os-bs-nav button.on {
    background: linear-gradient(180deg, var(--os-gel1) 0%, var(--os-gel2) 100%) !important;
    border: 1px solid var(--os-gel-border, rgba(255, 255, 255, 0.6)) !important;
    box-shadow: 0 4px 12px var(--os-gel-glow, rgba(0, 0, 0, 0.25)), inset 0 1px 2px #fff !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.os-st-chip { box-shadow: 0 2px 6px var(--os-gel-glow, rgba(0, 0, 0, 0.2)), inset 0 1px 2px #fff !important; }
.os-dlg-btn.danger.primary { background: linear-gradient(180deg, #f87171 0%, #dc2626 100%) !important; border-color: #fecaca !important; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), inset 0 1px 2px #fff !important; }
#os-title { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }


/* =====================================================================
   Phone mode (body.os-phone): small screens, and every app's /mobile/ page.
   The tab row and the ribbon become swipeable strips with touch-size buttons,
   menus and dialogs fit the screen, the File screen's menu moves to the top,
   and the status bar slims down.
   ===================================================================== */
body.os-phone #os-title { height: 44px; padding: 0 6px; gap: 6px; }
body.os-phone .os-search, body.os-phone .os-brand, body.os-phone .os-saved { display: none; }
body.os-phone #os-docname { max-width: 46vw; font-size: 14px; }
body.os-phone .os-qbtn { width: 36px; height: 36px; }
body.os-phone #os-tabs { height: 40px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 4px; }
body.os-phone #os-tabs::-webkit-scrollbar { display: none; }
body.os-phone .os-tab { font-size: 14px; padding: 0 14px; flex: none; }
body.os-phone .os-file { padding: 0 16px; }
body.os-phone #os-collapse { position: sticky; right: 0; flex: none; background: var(--os-ribbon); }
body.os-phone #os-ribbon { height: 92px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
body.os-phone #os-ribbon::-webkit-scrollbar { display: none; }
body.os-phone.os-ribbon-min.os-ribbon-peek #os-ribbon { height: 92px; }
body.os-phone .os-panel { padding: 4px 2px 0; }
body.os-phone .os-group { scroll-snap-align: start; padding: 0 4px; }
body.os-phone .os-rb.big { min-width: 56px; height: 66px; font-size: 11.5px; }
body.os-phone .os-rb.sm { min-height: 30px; }
/* a soft fade at the right edge says "there is more to swipe" */
body.os-phone #os-ribbon { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
/* menus and dialogs fit the screen, with bigger touch rows */
body.os-phone .os-menu { max-width: calc(100vw - 12px); max-height: 70vh; overflow-y: auto; }
body.os-phone .os-menu .os-mi, body.os-phone .os-menu button { min-height: 40px; font-size: 15px; }
body.os-phone .os-dlg { width: calc(100vw - 16px) !important; max-width: none; max-height: calc(100dvh - 24px); overflow-y: auto; }
/* the File screen: its menu becomes a strip across the top */
body.os-phone #os-backstage { flex-direction: column; }
body.os-phone .os-bs-nav { width: auto; flex-direction: row; overflow-x: auto; padding: 6px; gap: 4px; flex: none; scrollbar-width: none; }
body.os-phone .os-bs-nav::-webkit-scrollbar { display: none; }
body.os-phone .os-bs-nav button { flex: none; width: auto; padding: 8px 12px; }
body.os-phone .os-bs-nav button span { display: inline; }
body.os-phone .os-bs-nav .os-bs-back { margin: 0 6px 0 0; }
body.os-phone .os-bs-body { padding: 18px 14px; }
body.os-phone .os-bs-body h1 { font-size: 24px; margin-bottom: 14px; }
/* the status bar: just the essentials */
body.os-phone #os-status { height: 30px; font-size: 12px; }
body.os-phone .os-zoom-box { display: none; }
body.os-phone #os-status-l { gap: 10px; }
body.os-phone .os-view-btn { width: 34px; height: 26px; }
/* the layout picker stacks its two cards */
body.os-phone .os-lay-cards { flex-direction: column; }
/* the title bar: the document name takes what is left and trims with "…"; only the first two quick buttons stay */
body.os-phone #os-title { grid-template-columns: auto minmax(0, 1fr) auto; }
body.os-phone .os-tc { justify-content: flex-start; overflow: hidden; }
body.os-phone #os-docname { width: 100%; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.os-phone .os-qat .os-qbtn:nth-child(n+3) { display: none; }
body.os-phone .os-logo { display: none; }

/* small, secondary ribbon buttons sit dimmed under the bigger ones until you point at them */
.os-rb.os-dim { opacity: 0.62; }
.os-rb.os-dim:hover, .os-rb.os-dim:focus-visible, .os-rb.os-dim.on { opacity: 1; }

/* =====================================================================
   POOLSIDE LAYOUT (body.os-pool)! The real Poolside look (the same bright sky-to-cyan water, glass cards, orange rope lines and
   drifting bubbles as Waterflow), but built as its own UI: a floating glass waterline on top, a life-ring File button, tabs as
   numbered swim lanes, and every tool as a pool tile on a floating glass deck at the right. (Identical copy in each shell app!)
   ===================================================================== */
body.os-pool, body.os-pool.os-dark {
    --pp-sky1: #d9f9ff; --pp-sky2: #8fe2fa; --pp-sky3: #36cdee; --pp-ink: #0b2a44; --pp-mute: #4d6e89; --pp-line: rgba(14, 90, 150, 0.22);
    --pp-aqua1: #6fe0ff; --pp-aqua2: #36cdee; --pp-aqua3: #0a93b2; --pp-soft: #d2f7fc; --pp-orange: #ff8a1b; --pp-orange-soft: #ffe9d1; --pp-orange-ink: #b85500;
    --pp-glass: rgba(255, 255, 255, 0.62); --pp-glass2: rgba(255, 255, 255, 0.86); --pp-shadow: 0 10px 30px rgba(8, 70, 130, 0.22);
    --os-accent: var(--pp-aqua3); --os-accent-d: var(--pp-aqua3); --os-accent-l: var(--pp-soft); --os-title: var(--pp-glass2);
    --os-gel1: var(--pp-aqua1); --os-gel2: var(--pp-aqua2); --os-glow: rgba(111, 224, 255, 0.8);
    --os-ribbon: transparent; --os-ribbon-line: var(--pp-line); --os-ui: transparent; --os-text: var(--pp-ink); --os-dim: var(--pp-mute);
    --os-hover: rgba(255, 255, 255, 0.7); --os-on: var(--pp-orange-soft); --os-field: #fff; --os-field-line: var(--pp-line);
    --os-menu: #fff; --os-menu-line: var(--pp-line);
    background: linear-gradient(180deg, var(--pp-sky1) 0%, var(--pp-sky2) 45%, var(--pp-sky3) 90%) fixed !important; color: var(--pp-ink);
}
/* bubbles drifting up behind everything (like the real pool) */
#os-bubbles { display: none; }
body.os-pool #os-bubbles { display: block; position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
#os-bubbles i { position: absolute; bottom: -80px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.8);
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 10%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.05) 70%); animation: ppRise 24s linear infinite; }
#os-bubbles i:nth-child(1) { left: 6%; width: 30px; height: 30px; animation-duration: 19s; }
#os-bubbles i:nth-child(2) { left: 22%; width: 64px; height: 64px; animation-duration: 28s; animation-delay: -6s; }
#os-bubbles i:nth-child(3) { left: 41%; width: 22px; height: 22px; animation-duration: 17s; animation-delay: -3s; }
#os-bubbles i:nth-child(4) { left: 58%; width: 50px; height: 50px; animation-duration: 25s; animation-delay: -12s; }
#os-bubbles i:nth-child(5) { left: 72%; width: 36px; height: 36px; animation-duration: 21s; animation-delay: -9s; }
#os-bubbles i:nth-child(6) { left: 86%; width: 70px; height: 70px; animation-duration: 31s; animation-delay: -15s; }
@keyframes ppRise { to { transform: translateY(-115vh) translateX(40px); } }
@media (prefers-reduced-motion: reduce) { #os-bubbles i { animation: none; } }
body.os-pool #os-top, body.os-pool #os-status { position: relative; z-index: 60; }

/* the waterline: a floating glass bar with a rope line along its bottom edge */
body.os-pool #os-title {
    height: 48px; margin: 10px 10px 0; border-radius: 18px; color: var(--pp-ink); text-shadow: none; position: relative;
    background: var(--pp-glass2); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--pp-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.os-pool #os-title::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 5px; height: 4px; border-radius: 4px; pointer-events: none;
    background: repeating-linear-gradient(90deg, var(--pp-orange) 0 10px, #fff 10px 20px); opacity: 0.9; }
body.os-pool .os-brand { color: var(--pp-ink); text-shadow: none; }
body.os-pool .os-logo { filter: none; }
body.os-pool .os-qbtn { color: var(--pp-ink); border-radius: 10px; }
body.os-pool .os-qbtn:hover { background: var(--pp-soft); }
body.os-pool #os-docname { color: var(--pp-ink); background: #fff; border: 1px solid var(--pp-line); border-radius: 999px; padding: 3px 14px; }
body.os-pool #os-docname:hover { border-color: var(--pp-aqua2); }
body.os-pool #os-docname:focus { background: #fff; color: var(--pp-ink); }
body.os-pool .os-saved { background: var(--pp-orange-soft); color: var(--pp-orange-ink); border: 1px solid var(--pp-orange); font-weight: 700; }
body.os-pool #os-search { background: #fff; color: var(--pp-ink); border: 1px solid var(--pp-line); border-radius: 999px; height: 30px; }
body.os-pool #os-search::placeholder { color: var(--pp-mute); }
body.os-pool .os-search > .os-ico { color: var(--pp-aqua3); top: 7px; }
body.os-pool .os-saved.blip { animation: osBlip 0.5s var(--os-spring); }

/* File is a life ring: orange and white stripes around a cyan middle */
body.os-pool .os-file {
    width: 52px; height: 52px; padding: 0; margin: 0 6px 0 0 !important; border-radius: 50% !important; border: 0 !important; color: var(--pp-orange-ink) !important; font-size: 11.5px; font-weight: 800;
    background: radial-gradient(circle, var(--pp-soft) 0 49%, transparent 50%), conic-gradient(var(--pp-orange) 0 12.5%, #fff 0 25%, var(--pp-orange) 0 37.5%, #fff 0 50%, var(--pp-orange) 0 62.5%, #fff 0 75%, var(--pp-orange) 0 87.5%, #fff 0) !important;
    box-shadow: 0 0 0 2px var(--pp-orange), 0 4px 10px rgba(8, 70, 130, 0.25) !important; text-shadow: none; display: grid; place-items: center; flex: none;
}
body.os-pool .os-file:hover { filter: none; transform: scale(1.06); }
body.os-pool #os-ink, body.os-pool #os-collapse { display: none; }
/* tabs are numbered swim lanes (soft pills; the open lane turns orange) */
body.os-pool #os-tabs { background: transparent; counter-reset: lane; gap: 6px; position: relative; }
body.os-pool .os-tab { border-radius: 999px; border: 1.5px solid var(--pp-line); background: var(--pp-glass2); color: var(--pp-ink); font-weight: 600; }
body.os-pool .os-tab:hover { border-color: var(--pp-aqua2); background: var(--pp-soft); }
body.os-pool .os-tab.on, body.os-pool.os-dark .os-tab.on { background: var(--pp-orange-soft); border: 2px solid var(--pp-orange); color: var(--pp-orange-ink) !important; }
body.os-pool .os-tab:not(.os-file):not(.os-ctx)::before {
    counter-increment: lane; content: counter(lane); display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px;
    border-radius: 50%; background: var(--pp-aqua1); color: var(--pp-ink); font-size: 10.5px; font-weight: 800; vertical-align: 1px;
}
body.os-pool .os-tab.on:not(.os-file):not(.os-ctx)::before { background: var(--pp-orange); color: #fff; }
body.os-pool .os-tab.os-ctx { color: var(--pp-orange-ink); }
/* ribbon groups are glass cards; a lane rope sits under each name */
body.os-pool #os-ribbon { background: transparent; border-bottom: 0; box-shadow: none; }
body.os-pool .os-group { background: var(--pp-glass2); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 18px; box-shadow: 0 4px 14px rgba(8, 70, 130, 0.12); }
body.os-pool .os-group::after { display: none; }
body.os-pool .os-glabel { color: var(--pp-aqua3); font-weight: 800; letter-spacing: 0.03em; }
body.os-pool .os-glabel::after { content: ""; display: block; height: 4px; margin: 3px auto 0; width: 46px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--pp-orange) 0 6px, #fff 6px 12px); }
/* every tool is a pool tile: big ones are square tiles, small ones soft pills */
body.os-pool .os-rb { color: var(--pp-ink); }
body.os-pool .os-rb.big { border: 2px solid var(--pp-sky2); border-radius: 16px; background: #fff; }
body.os-pool .os-rb.sm, body.os-pool .os-rb.ic { border-radius: 10px; border: 1px solid transparent; }
body.os-pool .os-rb:hover, body.os-pool .os-split-arrow:hover, body.os-pool .os-gal-more:hover { background: var(--pp-soft); border-color: var(--pp-aqua2); box-shadow: none; }
body.os-pool .os-rb.on, body.os-pool .os-rb.os-menu-on, body.os-pool .os-split-arrow.os-menu-on { background: var(--pp-orange-soft); border-color: var(--pp-orange); color: var(--pp-orange-ink); }
body.os-pool .os-select, body.os-pool .os-input { border-radius: 999px; border-color: var(--pp-line); }
/* the status bar is a floating glass pill */
body.os-pool #os-status { margin: 0 10px 10px; border-radius: 14px; background: var(--pp-glass2); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--pp-shadow); color: var(--pp-mute); height: 30px; }
body.os-pool .os-st-chip { background: var(--pp-orange-soft); color: var(--pp-orange-ink); border: 1px solid var(--pp-orange); box-shadow: none; text-shadow: none; }
body.os-pool .os-st-chip b { color: var(--pp-orange-ink); }
body.os-pool .os-view-btn.on { background: var(--pp-orange-soft); color: var(--pp-orange-ink); }

/* wide screens: the tools live on a floating glass deck at the right (apps keep the rest of the window) */
@media (min-width: 900px) {
    body.os-pool:not(.os-phone) { box-sizing: border-box !important; padding: 10px 330px 0 10px !important; }
    body.os-pool:not(.os-phone) #os-title { position: fixed; top: 10px; left: 10px; right: 10px; margin: 0; z-index: 61; }
    body.os-pool:not(.os-phone) { padding-top: 68px !important; }
    body.os-pool:not(.os-phone) #os-top {
        position: fixed; top: 68px; right: 10px; bottom: 10px; width: 310px; z-index: 60; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
        background: var(--pp-glass); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--pp-shadow); isolation: isolate;
    }
    /* (the blur lives on a pseudo-element: a blur on #os-top itself would trap the fixed waterline inside the deck) */
    body.os-pool:not(.os-phone) #os-top::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    body.os-pool:not(.os-phone) #os-tabs { height: auto; flex-wrap: wrap; align-items: center; padding: 12px 12px 14px; flex: none; }
    body.os-pool:not(.os-phone) #os-tabs::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 5px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--pp-orange) 0 12px, #fff 12px 24px); }
    body.os-pool:not(.os-phone) .os-tab { padding: 4px 11px; }
    body.os-pool:not(.os-phone) #os-ribbon, body.os-pool:not(.os-phone).os-ribbon-min #os-ribbon, body.os-pool:not(.os-phone).os-ribbon-min.os-ribbon-peek #os-ribbon {
        flex: 1; height: auto; position: relative; left: auto; right: auto; overflow-x: hidden; overflow-y: auto; padding: 4px 10px 12px; box-shadow: none;
    }
    body.os-pool:not(.os-phone) .os-panel { height: auto; flex-direction: column; gap: 10px; padding: 0; }
    body.os-pool:not(.os-phone) .os-group { padding: 0 0 8px; min-width: 0; }
    body.os-pool:not(.os-phone) .os-glabel { order: -1; padding: 8px 0 2px; font-size: 11.5px; }
    body.os-pool:not(.os-phone) .os-gbody { flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px 8px 0; overflow-x: auto; }
    body.os-pool:not(.os-phone) .os-rb.big, body.os-pool:not(.os-phone) .os-split.big .os-rb.big { height: auto; min-height: 68px; min-width: 62px; padding-bottom: 4px; }
    body.os-pool:not(.os-phone) .os-rows { align-items: center; }
    body.os-pool:not(.os-phone) .os-row { flex-wrap: wrap; justify-content: center; }
    body.os-pool:not(.os-phone) #os-status { margin: 0 0 10px; }
    /* floating helpers that sit at the right edge move left of the deck */
    body.os-pool:not(.os-phone) .kd-modes { right: 340px; }
}
body.os-pool.os-phone #os-title { margin: 6px 6px 0; }

/* the layout card's little picture */
.os-lt-pool { background: linear-gradient(180deg, #d9f9ff, #36cdee); }
.os-lt-pool .lt-orb, .os-lt-pool .lt-list, .os-lt-pool .lt-strip { display: none; }
.os-lt-pool .lt-bar { left: 6px; right: 6px; top: 6px; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.9); border: 0; border-bottom: 3px solid #ff8a1b; }
.os-lt-pool .lt-side { right: 6px; top: 28px; bottom: 6px; width: 52px; border-radius: 10px; background: rgba(255, 255, 255, 0.85); background-image: repeating-linear-gradient(#d2f7fc 0 16px, transparent 16px 20px); box-shadow: 0 0 0 2px #fff; }
.os-lt-pool .lt-page, .os-lt-pool .lt-note { left: 10px; right: 66px; top: 28px; bottom: -6px; border-radius: 8px 8px 0 0; background: #fff; box-shadow: 0 2px 6px rgba(8, 70, 130, 0.25); background-image: repeating-linear-gradient(transparent 0 7px, #d2f7fc 7px 8px); }
.os-lt-pool .lt-slide { left: 10px; right: 66px; top: 30px; height: 72px; border-radius: 6px; background: #8fe2fa; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(8, 70, 130, 0.25); }