:root {
  --bg:#fff; --bg-sub:#f3f3f3; --bg-side:#f9f9f9;
  --bd:#e5e5e5; --text:#1a1a1a; --muted:#666;
  --word:#2b579a; --excel:#217346; --ppt:#b7472a;
  --pdf:#d13438; --folder:#caa23d; --zip:#767676;
  --img:#5c2d91; --txt:#444; --other:#0a61a4;
}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;color:var(--text)}
.od-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--bg-sub);border-bottom:1px solid var(--bd)}
.od-brand{display:flex;align-items:center;gap:10px;font-weight:600}
.od-brand .cloud{width:22px;height:22px;background:#0078d4;border-radius:4px;position:relative}
.od-brand .cloud::after{content:"";position:absolute;left:4px;top:6px;right:4px;bottom:6px;background:#fff;border-radius:10px/12px;opacity:.85}
.od-right{display:flex;gap:10px;align-items:center}
.od-avatar{width:32px;height:32px;border-radius:50%;background:#0078d4;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.od-icon-btn{width:34px;height:34px;border:1px solid var(--bd);border-radius:6px;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer}
.od-wrap{display:flex;height:calc(100vh - 50px)}
.od-side{width:240px;background:var(--bg-side);border-right:1px solid var(--bd);padding:14px}
.side-title{font-size:12px;color:var(--muted);margin:8px 6px;text-transform:uppercase}
.side-link{display:flex;align-items:center;gap:8px;padding:6px 10px;text-decoration:none;color:inherit;border-radius:6px}
.side-link:hover{background:#ececec}
.od-main{flex:1;display:flex;flex-direction:column;overflow:auto}
.od-toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--bd);background:#fff}
.btn{padding:6px 12px;border:1px solid var(--bd);border-radius:6px;background:#fff;cursor:pointer}
.spacer{flex:1}
.search{display:flex;align-items:center;border:1px solid var(--bd);border-radius:6px;padding:6px 10px;background:#fff;min-width:200px}
.search input{border:none;flex:1;outline:none}
.filter{padding:6px 10px;border:1px solid var(--bd);border-radius:6px}
.qa-wrap{padding:14px 16px;border-bottom:1px solid var(--bd);background:#fff}
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.qa-card{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--bd);border-radius:8px;text-decoration:none;color:inherit}
.qa-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.grid{width:100%;border-collapse:collapse;font-size:14px}
.grid th{background:var(--bg-sub);border-bottom:1px solid var(--bd);padding:8px;text-align:left}
.grid td{padding:8px;border-bottom:1px solid #eee}
.file{display:flex;align-items:center;gap:8px}
.badge{width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff}

/* Color-coded badges */
.badge.word {background:var(--word);}
.badge.excel {background:var(--excel);}
.badge.ppt {background:var(--ppt);}
.badge.pdf {background:var(--pdf);}
.badge.folder {background:var(--folder);color:#fff}
.badge.zip {background:var(--zip);}
.badge.img {background:var(--img);}
.badge.txt {background:var(--txt);}
.badge.other {background:var(--other);}