/* Common Office-style UI */
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-size:14px;color:#252423;background:#f3f2f1}

/* Title Bar — Neutral branding (no MS colors) */
.titlebar{background:#1e293b;color:#fff;height:32px;display:flex;align-items:center;padding:0 12px;font-size:13px;-webkit-app-region:drag}
.titlebar.word{background:linear-gradient(90deg,#1e293b,#334155)}
.titlebar.excel{background:linear-gradient(90deg,#5f0a25,#9f1239)}
.titlebar.diagram{background:linear-gradient(90deg,#134e4a,#0f766e)}
.titlebar{height:auto;min-height:36px;padding:4px 12px}
.titlebar .app-name{font-weight:600;margin-right:12px;font-size:13px}
.titlebar .app-brand{font-weight:600;margin-right:14px;display:inline-flex;align-items:center;gap:8px;font-size:13px}
.titlebar .app-brand .brand-ic{width:22px;height:22px;background:rgba(255,255,255,.18);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:bold}
.titlebar .doc-name{flex:1;text-align:center;opacity:.9;font-size:13px}
.titlebar .qat{display:flex;gap:2px;background:rgba(255,255,255,.12);padding:2px;border-radius:4px;margin-right:12px}
.titlebar .qat-btn{background:transparent;color:#fff;border:none;padding:4px 8px;cursor:pointer;font-size:14px;border-radius:3px;line-height:1;min-width:28px;transition:background .15s}
.titlebar .qat-btn:hover{background:rgba(255,255,255,.25)}
.titlebar .qat-btn:active{background:rgba(255,255,255,.35)}
.titlebar .home-link{color:#fff;text-decoration:none;opacity:.85;font-size:12px;padding:4px 10px;border-radius:3px}
.titlebar .home-link:hover{background:rgba(255,255,255,.18);opacity:1}

/* Ribbon Tabs */
.ribbon{background:#fff;border-bottom:1px solid #e1dfdd}
.ribbon-tabs{display:flex;background:#fafafa;padding-left:8px;border-bottom:1px solid #e1dfdd}
.ribbon-tabs .tab{padding:8px 18px;cursor:pointer;border:none;background:transparent;font-size:13px;color:#444;border-bottom:2px solid transparent}
.ribbon-tabs .tab.active{color:#1e293b;background:#fff;border-bottom-color:#1e293b;font-weight:600}
.ribbon-tabs .tab:hover:not(.active){background:#f0f0f0}
.ribbon-tabs .tab.file{background:#1e293b;color:#fff;font-weight:600}
.ribbon.word .ribbon-tabs .tab.file{background:#334155}
.ribbon.word .ribbon-tabs .tab.active{color:#334155;border-bottom-color:#334155}
.ribbon.excel .ribbon-tabs .tab.file{background:#9f1239}
.ribbon.excel .ribbon-tabs .tab.active{color:#9f1239;border-bottom-color:#9f1239}
.ribbon.diagram .ribbon-tabs .tab.file{background:#0f766e}
.ribbon.diagram .ribbon-tabs .tab.active{color:#0f766e;border-bottom-color:#0f766e}

.ribbon-content{display:none;padding:6px 12px;min-height:80px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.ribbon-content.active{display:flex;gap:4px;flex-wrap:nowrap;align-items:stretch}
.ribbon-content::-webkit-scrollbar{height:6px}
.ribbon-content::-webkit-scrollbar-thumb{background:#c7c6c4;border-radius:3px}
.ribbon-content::-webkit-scrollbar-thumb:hover{background:#a19f9d}
.ribbon-group{border-right:1px solid #e1dfdd;padding:4px 10px;display:flex;flex-direction:column;align-items:stretch;min-width:60px;flex-shrink:0}
.ribbon-group:last-child{border-right:none}
.ribbon-group .grp-content{flex:1;display:flex;align-items:center;gap:4px;flex-wrap:wrap;max-width:280px}
.ribbon-group .grp-label{text-align:center;font-size:11px;color:#666;margin-top:4px;white-space:nowrap}

/* Compact mode for narrow viewports */
@media (max-width: 900px){
  .ribbon-content{padding:4px 6px;min-height:64px}
  .ribbon-group{padding:2px 6px;min-width:50px}
  .ribbon-group .grp-content{gap:2px;max-width:240px}
  .ribbon-group .grp-label{font-size:10px}
  .btn{padding:4px 6px;font-size:12px;min-height:24px}
  .btn.big{min-width:44px;padding:4px 6px;font-size:10px}
  .btn.big .ic{font-size:16px;margin-bottom:1px}
  .titlebar .qat{display:none}
  .titlebar .app-brand{font-size:12px;margin-right:8px}
  .ribbon-tabs .tab{padding:6px 12px;font-size:12px}
  select,input[type=text],input[type=number]{font-size:12px;min-height:22px;padding:2px 4px}
}
@media (max-width: 600px){
  .ribbon-content{padding:3px 4px;min-height:56px}
  .ribbon-group{padding:2px 4px;min-width:auto}
  .ribbon-group .grp-content{max-width:200px}
  .btn.big{min-width:38px}
  .btn.big .ic{font-size:14px}
  .titlebar .app-brand .brand-ic{display:none}
  .titlebar .doc-name{display:none}
  .ribbon-tabs .tab{padding:6px 8px;font-size:11px}
}

/* Scroll hint shadow at edges */
.ribbon-content{
  background-image:linear-gradient(90deg,#fff,transparent 8px),linear-gradient(-90deg,#fff,transparent 8px);
  background-attachment:local,local;
  background-repeat:no-repeat;
  background-position:left center,right center;
  background-size:20px 100%,20px 100%;
}

/* Buttons */
.btn{background:transparent;border:1px solid transparent;border-radius:3px;padding:5px 9px;cursor:pointer;font-size:13px;color:#252423;display:inline-flex;align-items:center;gap:5px;min-height:28px}
.btn:hover{background:#edebe9;border-color:#c7c6c4}
.btn.active{background:#e2e8f0;border-color:#475569}
.btn.big{flex-direction:column;min-width:54px;padding:6px 8px;font-size:11px;text-align:center;line-height:1.2}
.btn.big .ic{font-size:18px;margin-bottom:2px}
.btn.primary{background:#1e293b;color:#fff;border-color:#1e293b}
.btn.primary:hover{background:#334155}
.btn .ic{font-weight:bold;font-family:'Segoe MDL2 Assets','Segoe UI Symbol',Arial}
select,input[type=text],input[type=number]{padding:4px 6px;border:1px solid #c7c6c4;border-radius:2px;font-size:13px;font-family:inherit;background:#fff;min-height:26px}
select:focus,input:focus{outline:none;border-color:#475569}
.divider{width:1px;background:#e1dfdd;margin:2px 4px;align-self:stretch}

/* Status Bar */
.statusbar{background:#1e293b;color:#fff;font-size:12px;padding:4px 12px;display:flex;align-items:center;gap:18px;height:24px}
.statusbar.word{background:#334155}
.statusbar.excel{background:#9f1239}
.statusbar.diagram{background:#0f766e}
.statusbar .spacer{flex:1}

/* Workspace */
.workspace{flex:1;overflow:auto;background:#e7e6e6;display:flex;justify-content:center;padding:24px}
.app-shell{display:flex;flex-direction:column;height:100vh}

/* File Menu (Backstage) */
.backstage{position:fixed;inset:0;background:#fff;z-index:1000;display:none;flex-direction:row}
.backstage.show{display:flex}
.backstage .side{width:220px;background:#334155;color:#fff;padding:24px 0;display:flex;flex-direction:column}
.backstage.excel .side{background:#9f1239}
.backstage.diagram .side{background:#0f766e}
.backstage .side .close{padding:10px 24px;cursor:pointer;font-size:24px;align-self:flex-start}
.backstage .side button{background:transparent;color:#fff;border:none;text-align:left;padding:12px 24px;cursor:pointer;font-size:14px;font-family:inherit}
.backstage .side button:hover{background:rgba(255,255,255,.1)}
.backstage .side button.active{background:rgba(255,255,255,.2)}
.backstage .main{flex:1;padding:40px 60px;overflow:auto}
.backstage h2{margin:0 0 24px;font-weight:300;font-size:32px}
.backstage .templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.backstage .tpl{border:1px solid #e1dfdd;padding:16px;border-radius:4px;cursor:pointer;text-align:center;background:#fafafa;transition:all .15s}
.backstage .tpl:hover{border-color:#475569;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.backstage .tpl .preview{height:120px;background:#fff;border:1px solid #ddd;margin-bottom:8px;display:flex;align-items:center;justify-content:center;font-size:32px;color:#999}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:2000}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:6px;padding:20px 24px;min-width:360px;max-width:90vw;max-height:85vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.modal h3{margin:0 0 14px;font-size:18px}
.modal .row{margin-bottom:12px}
.modal label{display:block;margin-bottom:4px;font-size:13px;color:#444}
.modal input[type=text],.modal select{width:100%}
.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* Common scroll */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:#c7c6c4;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#a19f9d}