/* ============================================================
   CloudDisk v0.4.0 — Офис-редакторы в стиле Microsoft Office.
   Word: синяя шапка #2B579A · Excel: зелёная #217346.
   Лента: цветная строка вкладок, белая панель команд,
   группы с подписями, цветной статус-бар.
   ============================================================ */

/* ---------- каркас ленты ---------- */
.rb { background:#fff; border:1px solid #d9d9d9; border-radius:8px; overflow:hidden;
      box-shadow:0 1px 4px rgba(16,24,40,.08) }
.rb-tabs { display:flex; align-items:center; background:var(--rb-accent,#2B579A);
           padding:0 8px; gap:2px; min-height:38px }
.rb-tab { padding:9px 18px; font-size:13.5px; color:rgba(255,255,255,.86); cursor:pointer;
          user-select:none; border-radius:0; transition:background .12s, color .12s }
.rb-tab:hover { background:rgba(255,255,255,.14); color:#fff }
.rb-tab.on { background:#fff; color:var(--rb-accent,#2B579A); font-weight:700 }
.rb-docname { margin-left:auto; font-size:12.5px; color:rgba(255,255,255,.85);
              padding:0 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34%;
              display:flex; align-items:center; gap:7px }
.rb-docname::before { content:''; width:14px; height:14px; border-radius:3px; flex:none;
              background:rgba(255,255,255,.28);
              box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5) }
.rb-save { height:28px; padding:0 14px; border:0; border-radius:14px; background:rgba(255,255,255,.92);
           color:var(--rb-accent,#2B579A); font-size:12.5px; font-weight:700; cursor:pointer; margin:0 6px;
           display:inline-flex; align-items:center; gap:6px; transition:.12s }
.rb-save:hover { background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.25) }

/* панель команд: белая, группы с разделителями и подписями — как в Office */
.rb-groups { display:flex; flex-wrap:wrap; padding:6px 8px 4px; min-height:78px;
             align-items:flex-start; background:#fff; border-top:1px solid #e6e4e1 }
.rb-group { display:flex; flex-direction:column; padding:0 14px; border-right:1px solid #eceae7; min-width:max-content }
.rb-group:last-child { border-right:0 }
.rb-items { display:flex; gap:4px; align-items:center; flex-wrap:wrap }
.rb-gname { font-size:10.5px; color:#8a8886; margin-top:7px; text-align:center; width:100%;
            letter-spacing:.2px }
.rb-btn { height:28px; min-width:28px; padding:0 8px; border:0; background:transparent; border-radius:4px;
          cursor:pointer; font-size:12.5px; color:#333; display:inline-flex; align-items:center;
          justify-content:center; gap:5px; font-family:inherit }
.rb-btn:hover { background:var(--rb-soft,#EEF3FB) }
.rb-btn.on { background:var(--rb-soft2,#DCE6F5); color:var(--rb-accent,#2B579A); font-weight:600 }
.rb-btn.b { font-weight:800 } .rb-btn.i { font-style:italic } .rb-btn.u { text-decoration:underline } .rb-btn.s { text-decoration:line-through }
.rb-sel { height:28px; border:1px solid #d1d1d1; border-radius:3px; background:#fff; font-size:12.5px;
          padding:0 5px; color:#333; outline:0 }
.rb-sel:focus { border-color:var(--rb-accent,#2B579A); box-shadow:0 0 0 2px var(--rb-soft2,#DCE6F5) }
.rb-style { height:36px; padding:0 12px; border:1px solid #d1d1d1; background:#fff; border-radius:4px;
            cursor:pointer; font-family:inherit }
.rb-style:hover { border-color:var(--rb-accent,#2B579A); background:var(--rb-soft,#EEF3FB) }
.rb-pickwrap { position:relative; display:inline-flex }
.rb-pen { font-size:13px; font-weight:700; line-height:1 }
.rb-pal-cur { width:14px; height:5px; border-radius:2px; background:#ED1C24; display:inline-block }
.rb-chev { font-size:8px; color:#888; margin-left:-2px }
.rb-pal { position:absolute; top:31px; left:0; z-index:60; display:grid; grid-template-columns:repeat(5, 22px);
          gap:3px; padding:10px; background:#fff; border:1px solid #d1d1d1; border-radius:6px;
          box-shadow:0 8px 26px rgba(0,0,0,.2) }
.rb-sw { width:22px; height:22px; border:1px solid rgba(0,0,0,.18); border-radius:3px; cursor:pointer;
         font-size:11px; color:#999; display:flex; align-items:center; justify-content:center }
.rb-sw:hover { outline:2px solid var(--rb-accent,#2B579A); outline-offset:-1px }

/* ---------- Word: синий Accent, постраничный вид (v0.6.0) ---------- */
.wd-wrap { --rb-accent:#2B579A; --rb-soft:#EEF3FB; --rb-soft2:#DCE6F5 }
/* серый холст как фон приложения Word, прокрутка по вертикали и горизонтали */
.wd-scroll { background:#e9e9e9; border:1px solid #d9d9d9; border-radius:8px; margin-top:10px;
             overflow:auto; max-height:calc(100vh - 330px); min-height:420px; padding:26px 18px 44px }
.wd-stage { margin:0 auto }
/* лист A4: белый, тень, поля задаются inline из sectPr файла */
.wd-sheet { background:#fff; margin:0 auto 24px; box-shadow:0 0 0 1px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.18); outline:0 }
.wd-doc { outline:0; color:#111; font-family:'Carlito','Calibri',sans-serif; font-size:11pt;
          line-height:1.15; word-wrap:break-word; min-height:60px; overflow:visible }
.wd-doc p { margin:0 }
.wd-doc h1 { font-size:24pt; color:#2F5496; margin:.4em 0 }
.wd-doc h2 { font-size:18pt; color:#2F5496; margin:.4em 0 }
.wd-doc h3 { font-size:14.5pt; color:#1b1b1b; margin:.4em 0 }
.wd-doc blockquote { border-left:3px solid #B4C6E7; padding-left:14px; color:#555; font-style:italic; margin-left:0 }
.wd-doc table { border-collapse:collapse; margin:8px 0 }
.wd-doc td, .wd-doc th { border:1px solid #999; padding:6px 10px; min-width:36px }
.wd-doc img { max-width:100%; vertical-align:text-bottom }
.wd-doc ul, .wd-doc ol { margin:0 }
.wd-doc a { color:#0563C1 }
.wd-doc mark[data-wdf] { background:#FFE066; color:inherit }
/* явный разрыв страницы (вставка «Стр. разрыв» / pageBreakBefore из файла) */
.wd-pbr { display:block; height:0; border-top:1px dashed #b9c4d6; margin:10px 0 4px;
          position:relative; user-select:none }
.wd-pbr::after { content:'Разрыв страницы'; position:absolute; right:0; top:-7px; font-size:9px;
                 color:#9aa7bd; background:#fff; padding:0 5px; line-height:1.2 }
/* статус-бар как в MS Word: светлая полоса, «Страница N из M · Слов · русский», зум-слайдер */
.wd-status2 { display:flex; align-items:center; height:30px; padding:0 12px; font-size:12px; color:#444;
              background:#f3f2f4; border:1px solid #d9d9d9; border-top:0; border-radius:0 0 8px 8px; gap:0 }
.wd-status2 b { color:#1a1a1a }
.wd-sep { width:1px; height:16px; background:#d6d4d8; margin:0 12px; flex:none }
.wd-sb-right { margin-left:auto; display:flex; align-items:center; gap:8px }
.wd-vbtn { cursor:pointer; padding:2px 6px; border-radius:4px; font-size:13px; opacity:.45; line-height:1 }
.wd-vbtn.on { opacity:1; background:#e3e7f0 }
.wd-zbtn { cursor:pointer; width:16px; text-align:center; color:#666; user-select:none; font-weight:700; line-height:1 }
.wd-zbtn:hover { color:#2B579A }
#wdZSlider { width:110px; accent-color:#2B579A; height:3px }
#wdZVal { min-width:42px; text-align:right; color:#444 }
/* тёмная тема: холст темнеет, листы остаются белыми (как в Word) */
[data-theme="dark"] .wd-scroll { background:#23262e; border-color:#3a3f4b }
[data-theme="dark"] .wd-sheet { box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 2px 12px rgba(0,0,0,.55) }
[data-theme="dark"] .wd-status2 { background:#2a2e37; border-color:#3a3f4b; color:#c9ced8 }
[data-theme="dark"] .wd-status2 b { color:#fff }
[data-theme="dark"] .wd-sep { background:#454b58 }
[data-theme="dark"] .wd-vbtn.on { background:#3b4250 }
[data-theme="dark"] .wd-zbtn { color:#aab1c0 }
[data-theme="dark"] .wd-zbtn:hover { color:#7fa7e8 }
[data-theme="dark"] #wdZVal { color:#c9ced8 }
[data-theme="dark"] .wd-pbr { border-top-color:#4a5468 }
[data-theme="dark"] .wd-pbr::after { color:#8b96ad; background:#fff }

/* ---------- Excel: зелёный Accent, формула, сетка, листы ---------- */
.xe-wrap { --rb-accent:#217346; --rb-soft:#EAF3EE; --rb-soft2:#D3E8DB }
.xe-fx { display:flex; align-items:center; border:1px solid #d9d9d9; border-top:0; background:#f9f9f9 }
.xe-name { width:86px; text-align:center; font-size:12.5px; font-weight:600; color:#333; padding:8px 6px;
           border-right:1px solid #e3e3e3; background:#fff }
.xe-fxl { font-size:11px; font-style:italic; color:#777; padding:0 8px; border-right:1px solid #e3e3e3;
          align-self:stretch; display:flex; align-items:center }
.xe-fxin { flex:1; border:0; outline:0; font-size:13px; padding:8px 10px; font-family:inherit; background:#fff; color:#1b1b1b }
.xe-gridwrap { overflow:auto; max-height:calc(100vh - 400px); min-height:380px; border:1px solid #d9d9d9;
               border-top:0; outline:0; background:#fff }
table.xe-grid { border-collapse:separate; border-spacing:0; table-layout:fixed }
.xe-grid th, .xe-grid td { box-sizing:border-box }
.xe-corner { position:sticky; left:0; top:0; z-index:6; width:46px; min-width:46px; background:#f3f2f1;
             border-right:1px solid #c8c6c4; border-bottom:1px solid #c8c6c4 }
.xe-ch { position:sticky; top:0; z-index:5; height:24px; background:#f3f2f1; font-size:11.5px; font-weight:600;
         color:#5f6368; text-align:center; border-right:1px solid #d9d7d4; border-bottom:1px solid #c8c6c4;
         cursor:pointer; user-select:none; padding:0 }
.xe-ch:hover { background:#EAF3EE }
.xe-grip { position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; z-index:7 }
.xe-ch { position:sticky }
.xe-rh { position:sticky; left:0; z-index:4; width:46px; min-width:46px; background:#f3f2f1; font-size:11.5px;
         font-weight:600; color:#5f6368; text-align:center; border-right:1px solid #c8c6c4;
         border-bottom:1px solid #d9d7d4; cursor:pointer; user-select:none }
.xe-rh:hover { background:#EAF3EE }
td.xe-cell { height:24px; padding:0 6px; font-size:12.5px; color:#1b1b1b; background:#fff;
             border-right:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; white-space:nowrap;
             overflow:hidden; cursor:cell; vertical-align:bottom }
td.xe-cell:hover { box-shadow:inset 0 0 0 1px #9cc79c }
td.xe-inrange { background:#eaf4ee !important }
td.xe-sel { outline:2px solid #217346; outline-offset:-2px; background:#fff; z-index:1 }
.xe-inp { width:100%; height:100%; border:0; outline:0; padding:0 4px; font-size:12.5px; font-family:inherit;
          background:#fffdf0; box-shadow:inset 0 0 0 2px #217346 }
.xe-sheets { display:flex; gap:3px; padding:5px 8px 0; background:#f3f2f1; border:1px solid #d9d9d9;
             border-top:0; align-items:flex-end }
.xe-sheet { padding:5px 14px; border:0; border-radius:7px 7px 0 0; cursor:pointer; font-size:12px; color:#445;
            background:transparent; font-family:inherit; display:inline-flex; gap:6px; align-items:center }
.xe-sheet:hover { background:#EAF3EE }
.xe-sheet.on { background:#fff; color:#217346; font-weight:600; box-shadow:0 -2px 0 #217346 inset }
.xe-sheet.add { font-weight:700; color:#217346; padding:5px 10px }
.xe-sdel { color:#a19f9d; font-size:13px; line-height:1 }
.xe-sdel:hover { color:#E81123 }

/* статус-бар Excel: зелёная полоса как в MS Excel */
.xe-status { display:flex; gap:18px; padding:5px 14px; font-size:12px; background:#217346;
             color:rgba(255,255,255,.92); border-radius:0 0 8px 8px; align-items:center }
.xe-status b { color:#fff }
.xe-status .right { margin-left:auto }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .wd-scroll { padding:16px 10px 30px }
  .rb-docname { display:none }
  .rb-tab { padding:9px 12px }
}

/* ---------- v0.9.2: стартовая страница офис-редактора (все файлы облака) ---------- */
.ofiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px }
.ofile { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1.5px solid var(--line);
         border-radius:11px; background:var(--surface); cursor:pointer; min-width:0;
         transition:border-color .15s, box-shadow .15s, transform .15s }
.ofile:hover { border-color:var(--accent); box-shadow:0 2px 12px rgba(99,102,241,.14); transform:translateY(-1px) }
.ofile .onm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; color:var(--ink); flex:1; min-width:0 }
.ofile .osz { font-size:11.5px; color:var(--muted); white-space:nowrap }