.office-page{display:flex;flex-direction:column;gap:16px;color:#221f2b}
.office-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.office-head h1{margin:4px 0 0;font-size:28px}
.office-head p{margin:6px 0 0;color:#6b6578;max-width:640px;font-size:13px;line-height:1.45}
.office-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.office-cats{display:flex;flex-direction:column;gap:8px;position:sticky;top:12px}
.office-cat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:1px solid #e6e4ef;background:#fff;border-radius:12px;padding:12px 12px 11px;cursor:pointer;color:#2d2c3a}
.office-cat small{color:#7a7488;font-size:11px;line-height:1.35}
.office-cat b{font-size:13px}
.office-cat.is-on{border-color:#7135e7;background:#f7f3ff;box-shadow:inset 3px 0 0 #7135e7}
.office-main{min-width:0;border:1px solid #e6e4ef;border-radius:16px;background:#fff;padding:16px}
.office-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.office-bar h2{margin:0;font-size:18px}
.office-actions{display:flex;gap:8px;flex-wrap:wrap}
.office-btn{height:36px;border-radius:9px;border:1px solid #d9d4e6;background:#fff;color:#3a3548;padding:0 12px;font:700 12px inherit;cursor:pointer}
.office-btn.pri{background:#7135e7;border-color:#7135e7;color:#fff}
.office-btn.danger{color:#b33c3c;border-color:#edcaca;background:#fff8f8}
.office-crumb{display:flex;align-items:center;gap:6px;font-size:12px;color:#6b6578;margin-bottom:12px}
.office-crumb button{border:0;background:transparent;color:#7135e7;font:700 12px inherit;cursor:pointer;padding:0}
.office-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.office-folder,.office-file{border:1px solid #eceaf3;border-radius:14px;background:#fafafd;padding:14px;display:flex;flex-direction:column;gap:8px;min-height:132px}
.office-folder{cursor:pointer}
.office-folder:hover,.office-file:hover{border-color:#c4b5fd}
.office-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#efe7ff;color:#5b28d4}
.office-ico .material-icons{font-size:20px}
.office-folder b,.office-file b{font-size:14px;line-height:1.3}
.office-folder small,.office-file small{color:#7a7488;font-size:11px;line-height:1.35}
.office-file-acts{display:flex;gap:6px;margin-top:auto}
.office-file-acts .office-btn{height:30px;padding:0 8px;font-size:11px}
.office-empty{padding:28px 8px;color:#7a7488;font-size:13px}
.office-search{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#666676}
.office-search input{height:40px;border:1px solid #d9d9e2;border-radius:10px;padding:0 12px;background:#fff;color:#222;font:500 13px inherit}
.office-due{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border:1px solid #fde68a;border-radius:12px;background:#fffbeb}
.office-due b{font-size:12px;color:#92400e}
.office-due-item{border:0;background:#fff;border-radius:999px;padding:4px 10px;font:600 12px inherit;color:#3a3548;cursor:pointer}
.office-meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.office-tag{display:inline-flex;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;background:#f3f0f8;color:#5c5670}
.office-tag.signed{background:#ecfdf5;color:#047857}
.office-tag.draft{background:#f3f0f8;color:#5b28d4}
.office-tag.expired,.office-tag.over{background:#fef2f2;color:#b91c1c}
.office-tag.soon{background:#fff7ed;color:#c2410c}
.office-note{border-radius:10px;padding:10px 12px;background:#fff7ed;color:#9a3412;font-size:12px;line-height:1.45;margin-bottom:12px}
.office-modal{position:fixed;inset:0;background:rgba(12,12,18,.52);display:none;align-items:center;justify-content:center;z-index:1200;padding:18px}
.office-modal.open{display:flex}
.office-panel{width:min(460px,94vw);background:#fff;border:1px solid #e1e1e8;border-radius:16px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.22)}
.office-panel.wide{width:min(760px,96vw)}
.office-panel h3{margin:4px 0 6px;font-size:20px}
.office-panel p{margin:0 0 14px;color:#6b6578;font-size:13px}
.office-field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#666676;margin-bottom:12px}
.office-field input,.office-field select,.office-field textarea{height:40px;border:1px solid #d9d9e2;border-radius:8px;padding:0 10px;background:#fff;color:#222;font:500 13px inherit}
.office-field textarea{height:72px;padding:8px 10px;resize:vertical}
.office-modal-acts{display:flex;justify-content:flex-end;gap:8px}
.office-view{width:100%;height:min(68vh,640px);border:0;border-radius:10px;background:#111}
.office-view-img{max-width:100%;max-height:68vh;display:block;margin:0 auto;border-radius:10px}
.office-view-audio{width:100%;margin:12px 0}
.office-field small{font-weight:500;color:#7a7488}
body.dark .office-page,body.dark .office-page{color:#eee}
body.dark .office-head p,body.dark .office-cat small,body.dark .office-folder small,body.dark .office-file small,body.dark .office-empty,body.dark .office-panel p,body.dark .office-crumb{color:#b7b3c4}
body.dark .office-cat,body.dark .office-main,body.dark .office-panel,body.dark .office-folder,body.dark .office-file{background:#171720;border-color:#34333f;color:#eee}
body.dark .office-cat.is-on{background:#2a2240;border-color:#7c4ee4}
body.dark .office-btn{background:#20202b;color:#eee;border-color:#3a3844}
body.dark .office-btn.pri{background:#7135e7;border-color:#7135e7;color:#fff}
body.dark .office-btn.danger{background:#2b1b1d;color:#f08c8c;border-color:#613336}
body.dark .office-field input,body.dark .office-field select,body.dark .office-field textarea{background:#1b1b27;color:#eee;border-color:#3a3844}
body.dark .office-ico{background:#2a2240;color:#c7aaff}
body.dark .office-note{background:#3a2e14;color:#fcd34d}
body.dark .office-search input,body.dark .office-due-item{background:#1b1b27;color:#eee;border-color:#3a3844}
body.dark .office-due{background:#3a2e14;border-color:#92400e}
body.dark .office-due b{color:#fcd34d}
body.dark .office-tag{background:#2a2240;color:#c7aaff}
body.dark .office-tag.signed{background:#163022;color:#6ee7b7}
body.dark .office-tag.expired,body.dark .office-tag.over{background:#3a1515;color:#fca5a5}
body.dark .office-tag.soon{background:#3a2e14;color:#fcd34d}
.dark .office-page{color:#eee}
.dark .office-head p,.dark .office-cat small,.dark .office-folder small,.dark .office-file small,.dark .office-empty,.dark .office-panel p,.dark .office-crumb{color:#b7b3c4}
.dark .office-cat,.dark .office-main,.dark .office-panel,.dark .office-folder,.dark .office-file{background:#171720;border-color:#34333f;color:#eee}
.dark .office-cat.is-on{background:#2a2240;border-color:#7c4ee4}
.dark .office-btn{background:#20202b;color:#eee;border-color:#3a3844}
.dark .office-btn.pri{background:#7135e7;border-color:#7135e7;color:#fff}
.dark .office-btn.danger{background:#2b1b1d;color:#f08c8c;border-color:#613336}
.dark .office-field input,.dark .office-field select,.dark .office-field textarea{background:#1b1b27;color:#eee;border-color:#3a3844}
.dark .office-ico{background:#2a2240;color:#c7aaff}
.dark .office-note{background:#3a2e14;color:#fcd34d}
.dark .office-search input,.dark .office-due-item{background:#1b1b27;color:#eee;border-color:#3a3844}
.dark .office-due{background:#3a2e14;border-color:#92400e}
.dark .office-due b{color:#fcd34d}
.dark .office-tag{background:#2a2240;color:#c7aaff}
.dark .office-tag.signed{background:#163022;color:#6ee7b7}
.dark .office-tag.expired,.dark .office-tag.over{background:#3a1515;color:#fca5a5}
.dark .office-tag.soon{background:#3a2e14;color:#fcd34d}
@media(max-width:860px){.office-layout{grid-template-columns:1fr}.office-cats{position:static;flex-direction:row;overflow:auto}.office-cat{min-width:160px}}