/* FiniteOffice — File backstage (Word/Excel-style), with FiniteDrive Open/Save */
.bs { position: fixed; inset: 0; z-index: 120; background: #fff; display: flex; }
.bs[hidden] { display: none; }
.bs-nav { width: 210px; background: var(--app-accent, #185abd); color: #fff; padding: 14px 0; display: flex; flex-direction: column; }
.bs-back { display: flex; align-items: center; gap: 8px; padding: 8px 18px 14px; cursor: pointer; font-size: 20px; }
.bs-nav a { padding: 10px 20px; cursor: pointer; font-size: 14px; }
.bs-nav a:hover { background: rgba(255,255,255,.14); }
.bs-nav a.active { background: rgba(255,255,255,.22); font-weight: 600; }
.bs-main { flex: 1; padding: 34px 46px; overflow: auto; }
.bs-main h1 { margin: 0 0 4px; font-size: 26px; font-weight: 400; }
.bs-sub { color: #666; margin: 0 0 26px; }

.bs-locs { display: flex; gap: 10px; margin-bottom: 20px; }
.bs-loc { display: flex; align-items: center; gap: 10px; border: 1px solid var(--fo-line,#e3e6ea); border-radius: 8px;
  padding: 12px 16px; cursor: pointer; min-width: 190px; }
.bs-loc.active { border-color: var(--app-accent,#185abd); background: var(--fo-accent-soft,#e8f0fe); }
.bs-loc .ic { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-weight: 700; }
.bs-loc .nm { font-weight: 600; font-size: 14px; }
.bs-loc .dt { font-size: 12px; color: #777; }

.bs-files { border-top: 1px solid var(--fo-line,#e3e6ea); }
.bs-file { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.bs-file:hover { background: #f6f8fb; }
.bs-file .fi { width: 26px; height: 26px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; }
.bs-file .fn { flex: 1; font-size: 14px; }
.bs-file .fm { color: #888; font-size: 12px; }
.bs-empty { color: #888; padding: 30px 6px; }

.bs-new-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 18px; }
.bs-tpl { border: 1px solid var(--fo-line,#e3e6ea); border-radius: 8px; overflow: hidden; cursor: pointer; }
.bs-tpl:hover { border-color: var(--app-accent,#185abd); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.bs-tpl .thumb { aspect-ratio: 4/3; background: #fafafa; display: grid; place-items: center; color: var(--app-accent,#185abd); font-size: 30px; border-bottom: 1px solid #eee; }
.bs-tpl .lbl { padding: 8px 10px; font-size: 13px; }

.bs-saveas { max-width: 620px; }
.bs-saveas .row { display: flex; gap: 10px; margin-bottom: 14px; }
.bs-saveas input { flex: 1; border: 1px solid var(--fo-line,#e3e6ea); border-radius: 6px; padding: 9px 11px; font-size: 14px; }
.bs-saveas select { border: 1px solid var(--fo-line,#e3e6ea); border-radius: 6px; padding: 9px 11px; font-size: 14px; }
.bs-saveas button.save { background: var(--app-accent,#185abd); color: #fff; border: none; border-radius: 6px; padding: 9px 20px; font-weight: 600; cursor: pointer; }
.bs-list-item { display:flex; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; align-items:center; }
.bs-list-item:hover { background:#f2f5f9; }