*{box-sizing:border-box} :root{--blue:#1677ef;--ink:#1c2638;--muted:#7b8798;--line:#e8edf3;--pale:#f5f7fa}
body{margin:0;background:#f7f8fa;color:var(--ink);font:15px/1.5 "Segoe UI",Arial,sans-serif}
button,input,select{font:inherit}.app-top{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:30px;height:30px;border-radius:8px;background:#e9f2ff;color:var(--blue);display:grid;place-items:center;font-size:17px}.brand b{font-size:14px}.brand small{display:block;color:#8a95a5;font-size:14px}
.top-right{display:flex;align-items:center;gap:12px}.status-badge{font-size:13px;border-radius:20px;padding:5px 10px}.status-badge.online{background:#eaf8ef;color:#18834b}.status-badge.idle{background:#fff2e8;color:#b65b13}
.app-shell{min-height:calc(100vh - 58px);display:grid;grid-template-columns:230px minmax(0,1fr);background:#fff}
.filters-panel{border-right:1px solid var(--line);background:#fff;min-height:calc(100vh - 58px);display:flex;flex-direction:column;position:relative}
.filter-heading{height:48px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f2f5}.filter-heading b{font-size:14px}.filter-count,.tiny-count{background:#1677ef;color:#fff;border-radius:20px;font-size:13px;padding:2px 5px;margin-left:3px}.plain-icon{border:0;background:none;font-size:21px;color:#667085;cursor:pointer}
.filter-summary{padding:15px 18px 12px;border-bottom:1px solid #f0f2f5}.filter-summary>b{font-size:14px}.text-button{float:right;border:0;background:none;color:#7a8797;font-size:14px;cursor:pointer}.chip{display:inline-block;margin-top:9px;margin-right:5px;border-radius:12px;background:#eaf2ff;color:#4382d6;padding:3px 8px;font-size:13px}
.filter-section{padding:0 18px;border-bottom:1px solid #f0f2f5}.filter-section-title{width:100%;border:0;background:none;padding:14px 0;display:flex;justify-content:space-between;font-size:13px;font-weight:650;color:#354052;cursor:pointer}.filter-options{display:flex;flex-direction:column;gap:9px;padding:0 0 14px 2px;color:#697587;font-size:14px}.filter-options label{display:flex;align-items:center;gap:8px}.filter-options input{accent-color:var(--blue);width:13px;height:13px;margin:0}
.filter-footer{margin-top:auto;padding:12px 14px;display:flex;gap:7px;border-top:1px solid var(--line)}.secondary,.primary{border:1px solid #e3e8ef;border-radius:5px;padding:9px 11px;background:#fff;color:#536174;font-size:14px;cursor:pointer}.primary{background:#0876ee;border-color:#0876ee;color:#fff;font-weight:600}.filter-footer button{flex:1}
.library-main{min-width:0;padding:0 18px 16px;background:#fff}.breadcrumb{height:42px;display:flex;align-items:center;gap:7px;color:#8591a1;font-size:14px}.breadcrumb button{border:0;background:none;color:#6d7a8b;padding:0;cursor:pointer;font-size:14px}.breadcrumb b{color:#39465a;font-weight:600}
.page-heading{display:flex;align-items:center;justify-content:space-between;margin:2px 0 20px}.page-heading h1{font-size:19px;margin:0 0 3px;font-weight:650}.page-heading p{margin:0;color:#8994a4;font-size:14px}.heading-actions{display:flex;gap:6px;position:relative}.upload-main{display:inline-flex;align-items:center;gap:8px;background:#0876ee;color:white;padding:8px 13px;border-radius:4px;font-size:14px;cursor:pointer}.icon-button{width:30px;height:30px;border:1px solid #e7ebf0;background:white;border-radius:5px;color:#475467;font-size:19px;cursor:pointer}.more-menu{position:absolute;z-index:5;right:0;top:35px;background:white;border:1px solid var(--line);box-shadow:0 5px 20px #15243a18;border-radius:6px;padding:5px;min-width:130px}.more-menu[hidden]{display:none}.more-menu button{display:block;width:100%;text-align:left;border:0;background:white;padding:8px;font-size:13px;cursor:pointer}
.library-toolbar{height:44px;display:flex;align-items:center;gap:8px;margin-bottom:12px}.search-field{height:32px;border:1px solid #dfe5ed;border-radius:4px;display:flex;align-items:center;gap:7px;padding:0 10px;width:min(280px,38%);color:#8390a1}.search-field input{border:0;outline:0;min-width:0;width:100%;font-size:14px}.outline-button,.view-button,.sort-select{height:32px;border:1px solid #dfe5ed;border-radius:4px;background:#fff;color:#59677a;padding:0 10px;font-size:14px;cursor:pointer}.outline-button{color:#3175cf}.sort-select{min-width:82px}.view-button{width:30px;padding:0;font-size:15px}.view-button.active{background:#edf4ff;color:#1677ef;border-color:#b8d2f7}
.selection-toolbar{display:flex;align-items:center;gap:14px;padding:7px 2px 12px;color:#7c8797;font-size:14px}.selection-toolbar label{display:flex;align-items:center;gap:6px;color:#586579}.selection-toolbar input{accent-color:var(--blue)}.selection-actions{margin-left:auto;display:flex;gap:6px}.selection-actions button{border:1px solid #e2e8f0;background:#fff;border-radius:4px;padding:5px 10px;color:#5b6879;font-size:14px;cursor:pointer}.selection-actions button:disabled{opacity:.4;cursor:not-allowed}.selection-actions .delete-action{color:#c43d45}
.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:12px;align-content:start;min-height:230px}.media-card{position:relative;min-width:0;border:1px solid #f0f2f5;border-radius:6px;background:#fff;box-shadow:0 2px 9px #1d2b4208;overflow:hidden;transition:box-shadow .15s,border-color .15s}.media-card:hover{border-color:#d5e4f8;box-shadow:0 4px 14px #1d2b4212}.card-check{position:absolute;left:9px;top:9px;z-index:2;width:14px;height:14px;accent-color:var(--blue)}
.card-open{width:100%;height:96px;border:0;background:linear-gradient(180deg,#fff,#fbfcfe);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;padding:12px 9px 5px}.asset-icon{font-size:29px;line-height:1}.asset-icon.folder{font-size:31px;filter:saturate(1.1)}.card-open strong{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:14px;color:#273449;font-weight:650}.card-meta{padding:5px 9px 8px;display:flex;align-items:center;justify-content:space-between;gap:5px;color:#8a95a4;font-size:13px}.tag{border:1px solid #e8edf2;border-radius:10px;padding:2px 5px;white-space:nowrap}.card-actions{display:flex;gap:3px;padding:0 7px 7px;opacity:0;transition:opacity .15s}.media-card:hover .card-actions,.media-card:focus-within .card-actions{opacity:1}.card-actions button{border:0;background:#f4f7fb;color:#627086;border-radius:3px;padding:3px 5px;font-size:13px;cursor:pointer}
.file-grid.list-mode{display:flex;flex-direction:column;gap:5px}.list-mode .media-card{display:grid;grid-template-columns:28px 1fr 150px auto;align-items:center;padding:0 10px}.list-mode .card-check{position:static;grid-column:1;grid-row:1}.list-mode .card-open{height:42px;flex-direction:row;justify-content:flex-start;grid-column:2;grid-row:1;padding:0;background:none}.list-mode .asset-icon{font-size:20px}.list-mode .card-open strong{text-align:left}.list-mode .card-meta{grid-column:3;grid-row:1}.list-mode .card-actions{grid-column:4;grid-row:1;opacity:1;padding:0}
.empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:55px 10px;color:#8994a4;gap:5px}.empty-state div{font-size:30px}.empty-state b{color:#344054;font-size:14px}.empty-state span{font-size:14px}
.pagination-footer{display:flex;align-items:center;gap:15px;border-top:1px solid #f0f2f5;margin-top:15px;padding:10px 3px;color:#8b96a5;font-size:14px}.pagination-footer label{display:flex;align-items:center;gap:7px}.pagination-footer select{border:1px solid #e2e8f0;border-radius:4px;padding:5px;background:#fff;font-size:14px}.pagination-footer #pageInfo{margin-left:auto}.page-controls{display:flex;align-items:center;gap:8px}.page-controls button{border:0;background:none;font-size:18px;color:#65748a;cursor:pointer}.page-controls button:disabled{opacity:.3}
.connect-card{border:1px solid var(--line);border-radius:8px;padding:20px;max-width:680px}.connect-card h2{margin:0 0 4px;font-size:16px}.connect-card p{margin:0 0 16px;color:#7d8999;font-size:13px}.connect-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.connect-grid label{font-size:14px;color:#64748b}.connect-grid input:not([type=checkbox]){display:block;width:100%;margin-top:5px;border:1px solid #dfe5ed;border-radius:4px;padding:8px}.connect-grid .passive{display:flex;align-items:center;gap:6px}.connect-grid .passive input{accent-color:var(--blue)}
.status-message{white-space:pre-line;color:#3375bf;font-size:14px;padding:7px 2px}.status-message.error{color:#bd3845}.progress-wrap{padding:10px 0}.progress-label{display:flex;justify-content:space-between;font-size:14px;margin-bottom:5px}.progress{height:6px;background:#e7effb;border-radius:10px;overflow:hidden}.progress span{display:block;height:100%;background:#1677ef;width:0}
.modal{position:fixed;inset:0;background:#18263d66;display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}.modal[hidden]{display:none}.dialog{width:min(380px,100%);background:white;border-radius:8px;padding:22px;position:relative}.dialog h2{margin:0 0 16px;font-size:16px}.dialog label{font-size:14px;color:#657185}.dialog input{display:block;width:100%;padding:9px;border:1px solid #dfe5ed;border-radius:4px;margin:6px 0 15px}.dialog-actions{display:flex;justify-content:flex-end;gap:7px}.close{position:absolute;right:12px;top:9px;border:0;background:none;font-size:20px;cursor:pointer}
@media(max-width:800px){.app-shell{grid-template-columns:1fr}.filters-panel{display:none;position:fixed;z-index:10;left:0;top:58px;bottom:0;width:260px;box-shadow:5px 0 25px #16243b22}.filters-panel.filters-open{display:flex}.library-main{padding:0 12px}.file-grid{grid-template-columns:repeat(auto-fill,minmax(125px,1fr))}.card-actions{opacity:1}.app-top{padding:0 12px}}
@media(max-width:480px){.page-heading{align-items:flex-start;gap:8px}.page-heading h1{font-size:17px}.library-toolbar{gap:5px}.search-field{width:38%;flex:1}.outline-button{padding:0 7px}.file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.connect-grid{grid-template-columns:1fr}.list-mode .media-card{grid-template-columns:23px 1fr auto}.list-mode .card-meta{display:none}.list-mode .card-actions{grid-column:3}.pagination-footer{gap:7px}}

/* Readability and responsive sizing update */
.brand b{font-size:16px}.brand small{font-size:12px}
.filter-heading b{font-size:14px}.filter-summary>b{font-size:12px}
.filter-section-title{font-size:14px;padding:15px 0}
.filter-options{font-size:13px;gap:11px}
.filter-options input{width:16px;height:16px}
.text-button,.chip{font-size:11px}
.page-heading h1{font-size:22px}.page-heading p{font-size:13px}
.breadcrumb,.breadcrumb button{font-size:12px}
.upload-main,.outline-button,.sort-select,.selection-toolbar,.selection-actions button{font-size:12px}
.search-field input{font-size:13px}
.card-open strong{font-size:13px}
.card-meta{font-size:11px}.tag{font-size:10px}
.card-actions button{font-size:11px;padding:5px 7px}
.pagination-footer,.pagination-footer select{font-size:12px}
.status-message{font-size:12px}
.connect-card h2{font-size:18px}.connect-card p{font-size:13px}
.connect-grid label{font-size:12px}
.secondary,.primary{font-size:12px;min-height:34px}
.icon-button,.view-button{min-width:34px;min-height:34px}
.media-card{border-radius:8px}
.card-open{min-height:112px}
@media(max-width:800px){
  .app-top{height:60px}
  .filters-panel{top:60px}
  .library-main{padding:0 14px 18px}
  .filter-section-title{font-size:14px}
  .filter-options{font-size:13px}
  .card-open{height:108px}
  .card-open strong{font-size:13px}
  .card-meta{font-size:11px}
  .card-actions{opacity:1}
  .card-actions button{padding:6px 8px}
}
@media(max-width:480px){
  body{font-size:14px}
  .app-top{padding:0 10px}
  .library-main{padding:0 10px 16px}
  .page-heading h1{font-size:20px}
  .page-heading p{font-size:12px}
  .library-toolbar{height:auto;min-height:44px;flex-wrap:wrap}
  .search-field{width:100%;flex-basis:100%;height:38px}
  .outline-button,.sort-select,.view-button{height:36px}
  .file-grid{gap:10px}
  .media-card{min-width:0}
  .card-open{height:105px;padding:10px 8px 5px}
  .card-open strong{font-size:12px}
  .card-meta{font-size:10px;flex-wrap:wrap}
  .card-actions{gap:4px;flex-wrap:wrap}
  .card-actions button{font-size:10px;padding:5px 6px}
  .selection-toolbar{font-size:12px;gap:9px;flex-wrap:wrap}
  .pagination-footer{font-size:11px;flex-wrap:wrap}
  .pagination-footer #pageInfo{margin-left:0}
  .connect-grid{gap:10px}
  .connect-grid input:not([type=checkbox]){font-size:14px;padding:10px}
}

.upload-folder{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#1677ef;border:1px solid #b9d3f5;padding:8px 13px;border-radius:4px;font-size:12px;cursor:pointer}
.upload-folder:hover{background:#f1f7ff}
@media(max-width:480px){.upload-folder,.upload-main{min-height:36px;justify-content:center}}

/* Folder-only navigation sidebar */
.folder-sidebar-note{padding:14px 18px 8px;color:#8a95a5;font-size:13px}
.folder-navigation{display:flex;flex-direction:column;gap:3px;padding:4px 10px 16px;overflow-y:auto}
.folder-nav-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 9px;border:0;border-radius:6px;background:transparent;color:#344054;font-size:14px;cursor:pointer;overflow:hidden}
.folder-nav-item:hover{background:#f0f6ff;color:#126bd1}
.folder-nav-item span:first-child{font-size:18px;flex:none}
.folder-nav-item span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-nav-empty{padding:12px 9px;color:#8994a4;font-size:13px;line-height:1.6}

.new-folder-button{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#1677ef;border:1px solid #b9d3f5;padding:8px 13px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}.new-folder-button:hover{background:#f1f7ff}@media(max-width:480px){.new-folder-button{min-height:36px;padding:7px 9px;font-size:12px}}
.folder-nav-item.active{background:#eaf1ff;border-color:#b8ccff;color:#174ea6;font-weight:700}
.folder-nav-item.active{background:#eaf1ff;border-color:#b8ccff;color:#174ea6;font-weight:700}

.modal-location{font-size:13px;color:#53647a;background:#f3f7fc;border:1px solid #e2eaf4;border-radius:5px;padding:9px 10px;margin:0 0 14px;overflow-wrap:anywhere}

/* Per-folder overflow menu */
.media-card{position:relative}
.folder-menu-wrap{position:absolute;right:8px;top:7px;z-index:5}
.folder-menu-trigger{width:32px;height:30px;border:1px solid #e3e9f0;border-radius:8px;background:#fff;color:#46556a;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 7px #1b2b4210}
.folder-menu-trigger:hover,.folder-menu-trigger[aria-expanded="true"]{background:#eef4ff;border-color:#c9d9f4}
.folder-menu{position:absolute;right:0;top:34px;min-width:150px;padding:5px;background:#fff;border:1px solid #e4eaf1;border-radius:9px;box-shadow:0 10px 28px #14233b24;display:flex;flex-direction:column;gap:2px}
.folder-menu[hidden]{display:none}
.folder-menu button{border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:6px;color:#344256;font-size:13px;cursor:pointer;white-space:nowrap}
.folder-menu button:hover{background:#f1f5fb}

/* Keep each folder's options menu above neighbouring cards and outside card clipping. */
.file-grid{overflow:visible;}
.media-card{overflow:visible;}
.media-card:has(.folder-menu:not([hidden])){z-index:40;}
.folder-menu-wrap{z-index:100;}
.folder-menu{z-index:101;max-height:min(70vh,260px);overflow-y:auto;}
.folder-menu button{min-height:36px;}

/* Keep file action buttons above the card content so they never get clipped. */
.file-grid:not(.list-mode) .media-card{overflow:visible;}
.file-grid:not(.list-mode) .media-card:hover,
.file-grid:not(.list-mode) .media-card:focus-within{z-index:30;}
.file-grid:not(.list-mode) .card-actions{
  position:absolute;
  top:7px;
  right:7px;
  z-index:8;
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  padding:0;
  opacity:0;
  white-space:nowrap;
  background:rgba(255,255,255,.96);
  border-radius:6px;
}
.file-grid:not(.list-mode) .media-card:hover .card-actions,
.file-grid:not(.list-mode) .media-card:focus-within .card-actions{opacity:1;}
.file-grid:not(.list-mode) .card-actions button{font-size:11px;padding:6px 8px;box-shadow:0 1px 4px #17243a12;}
@media(max-width:800px){.file-grid:not(.list-mode) .card-actions{opacity:1;}}