:root{
 --p:#003265;--pd:#002449;--sand:#b9ab8e;--a:#d8007b;
 --bg:#f5f7fa;--text:#102a43;--muted:#66788a;--border:#dfe6ed;
 --sidebar:230px;--sidebar-small:68px;
 font-family:Inter,"Segoe UI",Arial,sans-serif
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--text);font-size:13px;line-height:1.45}
a{color:var(--p);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit}
.shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);transition:grid-template-columns .18s ease}
.shell.collapsed{grid-template-columns:var(--sidebar-small) minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;background:var(--pd);color:#fff;padding:14px 10px;display:flex;flex-direction:column;overflow:hidden}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.brand,.loginbrand{display:flex;align-items:center;gap:9px;min-width:0}
.brand{color:#fff;padding:4px}
.brand:hover{text-decoration:none}
.brand b,.loginbrand b{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--a);display:grid;place-items:center;font-size:17px}
.brand span,.loginbrand span{font-weight:800;white-space:nowrap}
.brand small,.loginbrand small,.sidebar footer small,td small{display:block;font-size:11px;color:#9fb3c8}
.icon-button{width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid #ffffff20;background:#ffffff0d;color:#fff;border-radius:7px;cursor:pointer}
.sidebar nav{display:grid;gap:3px}
.sidebar nav a{display:flex;align-items:center;gap:10px;color:#cbd8e6;padding:8px 10px;border-radius:7px;font-weight:700;white-space:nowrap;min-height:34px}
.sidebar nav a.active,.sidebar nav a:hover{background:#ffffff18;color:#fff;text-decoration:none}
.nav-icon{width:16px;display:grid;place-items:center;flex:0 0 auto}
.sidebar footer{margin-top:auto;padding-top:12px;border-top:1px solid #ffffff20}
.sidebar footer form{margin-top:9px}
.signout{width:100%;display:flex;gap:8px;justify-content:center}
.shell.collapsed .brand span,.shell.collapsed .nav-label,.shell.collapsed .admin-identity,.shell.collapsed .signout span{display:none}
.shell.collapsed .sidebar-top{flex-direction:column}
.shell.collapsed .sidebar nav a{justify-content:center;padding-inline:6px}
.shell main{padding:18px 22px 30px;min-width:0}
.shell main>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.shell h1,.editor-header h1{font-size:20px;margin:0}
.shell header p,.editor-header p{margin:4px 0 0;color:var(--muted)}
.prod{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);padding:6px 9px;border-radius:7px;color:var(--muted)}
.prod i{width:6px;height:6px;background:var(--sand);border-radius:50%}
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.metrics article,.panel{background:#fff;border:1px solid var(--border);border-radius:10px}
.metrics article{padding:12px 14px}
.metrics span{display:block;color:var(--muted);font-size:11px}
.metrics strong{font-size:19px;color:var(--pd)}
.panel{padding:14px;margin-bottom:14px;overflow:auto}
.panel h2,.report h2{font-size:14px;margin:0 0 12px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.02em}
td small{color:var(--muted)}
em{display:inline-flex;padding:3px 7px;background:#e9eff5;color:var(--p);border-radius:999px;font-size:10px;font-style:normal;font-weight:700;text-transform:capitalize}
.filters{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.filters input{min-width:260px}
input,select,textarea{width:100%;padding:8px 9px;border:1px solid #cbd5df;border-radius:7px;background:#fff;color:var(--text)}
textarea{resize:vertical}
.filters select{width:auto;min-width:150px}
label{display:grid;gap:5px;margin-bottom:12px;font-weight:700}
button,.button{display:inline-flex;justify-content:center;align-items:center;gap:6px;border:0;border-radius:7px;padding:8px 11px;background:#e8edf2;color:var(--text);font-weight:700;cursor:pointer}
.primary{background:var(--p);color:#fff}
.primary:hover{background:#003b78;text-decoration:none}
dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
dl div{padding-bottom:9px;border-bottom:1px solid var(--border)}
dt{font-size:10px;color:var(--muted);text-transform:uppercase}
dd{margin:3px 0 0;font-weight:700}
.media{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.media article{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.media img,.placeholder{width:100%;height:130px;object-fit:cover;background:#e9eef3}
.placeholder{display:grid;place-items:center;font-weight:800;color:var(--muted)}
.media strong,.media small{display:block;padding:0 8px}
.media strong{padding-top:8px}
.media small{color:var(--muted);padding-bottom:8px}
.record,.report{border:1px solid var(--border);border-radius:8px;padding:11px;margin-bottom:10px}
.record p,.report p{color:var(--muted)}
pre{max-height:330px;overflow:auto;background:#0f2235;color:#dbe7f2;padding:12px;border-radius:8px;white-space:pre-wrap}
.narrow{max-width:760px}
.ok,.err{padding:10px 12px;border-radius:8px;margin-bottom:14px}
.ok{background:#e5f6ef;color:#116947}
.err{background:#fdeaea;color:#982222}
.tabs{min-width:0}
.tabbar{position:sticky;top:0;z-index:5;display:flex;gap:4px;overflow:auto;background:var(--bg);padding:0 0 10px}
.tabbar button{background:#fff;border:1px solid var(--border);white-space:nowrap}
.tabbar button.active{background:var(--p);border-color:var(--p);color:#fff}
.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.package-heading{display:flex;justify-content:space-between;gap:10px}
.package-heading small{color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.checks{display:flex;gap:16px}
.check{display:flex;align-items:center;gap:7px;font-weight:500}
.check input{width:auto}
.inline-form{display:flex;align-items:center;gap:6px}
.inline-form select{min-width:120px}
.page-actions{display:flex;justify-content:flex-end;margin-bottom:10px}
.pager{margin-top:14px}
.pager svg{width:16px;height:16px}
.focus-body{background:var(--bg)}
.focus-header{height:58px;padding:0 18px;background:var(--pd);color:#fff;display:flex;align-items:center;justify-content:space-between}
.focus-header a{display:flex;align-items:center;gap:6px;color:#fff}
.focus-header div{text-align:right}
.focus-header small{display:block;color:#b9c7d6;font-size:11px}
.focus-main{padding:18px;max-width:1380px;margin:auto}
.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}
.editor-side{position:sticky;top:14px;height:max-content}
.editor-body{min-height:520px}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top right,#d8007b22,transparent 34%),var(--pd)}
.login{width:min(400px,100%);background:#fff;padding:28px;border-radius:14px;box-shadow:0 24px 70px #0004}
.loginbrand{margin-bottom:24px}
.login h1{margin:0;font-size:22px}
.login>p{color:var(--muted)}
.login form{margin-top:20px}
.login button{width:100%}
@media(max-width:1180px){.metrics{grid-template-columns:repeat(3,1fr)}.package-grid{grid-template-columns:1fr 1fr}.media{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.shell,.shell.collapsed{grid-template-columns:1fr}.sidebar{position:static;height:auto}.sidebar-top{flex-direction:row!important}.brand span,.nav-label,.admin-identity,.signout span{display:block!important}.sidebar nav{grid-template-columns:repeat(2,1fr)}.sidebar nav a{justify-content:flex-start!important}.cols,.editor-grid{grid-template-columns:1fr}.editor-side{position:static}.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.shell main,.focus-main{padding:14px}.metrics,.media,dl,.package-grid,.form-grid{grid-template-columns:1fr}.filters{align-items:stretch;flex-direction:column}.filters input,.filters select{width:100%;min-width:0}.sidebar nav{grid-template-columns:1fr 1fr}.checks{flex-direction:column;gap:0}}


body{background:radial-gradient(circle at 85% 5%,rgba(0,50,101,.18),transparent 28%),var(--bg);color:var(--text)}
.panel,.metrics article,.tabbar button,.prod,.login,.admin-dialog{background:var(--surface);border-color:var(--border);color:var(--text)}
input,select,textarea{background:var(--input);color:var(--text);border-color:var(--border)}.button,button{background:var(--surface-2);color:var(--text)}
.header-actions,.editor-actions{display:flex;align-items:center;gap:8px}.theme-toggle .sun{display:none}:root[data-theme="light"] .theme-toggle .sun{display:block}:root[data-theme="light"] .theme-toggle .moon{display:none}
.package-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.admin-dialog{width:min(720px,calc(100% - 30px));border:1px solid var(--border);border-radius:12px;padding:16px}.admin-dialog::backdrop{background:#0009}
.dialog-heading,.dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.dialog-actions{justify-content:flex-end;margin-top:14px}
.sticky-editor-actions{position:sticky;top:0;z-index:30;background:var(--bg);padding:10px 0}.editor-tabs{position:sticky;top:68px;z-index:25;display:flex;gap:5px;background:var(--bg);padding-bottom:10px}.editor-tabs button.active{background:var(--p);color:#fff}
.editor-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:14px}.editor-preview-rail{position:sticky;top:116px;height:calc(100vh - 135px);overflow:auto;border:1px solid var(--border);border-radius:11px;background:var(--surface);padding:12px}.editor-preview-rail.mobile .editorial-preview{max-width:350px;margin:auto}
.preview-toolbar{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;text-transform:uppercase;margin-bottom:10px}.editorial-preview{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;overflow:hidden}.preview-cover{height:220px;background:linear-gradient(135deg,var(--pd),var(--a));display:grid;place-items:center;color:#fff}.preview-cover img{width:100%;height:100%;object-fit:cover}.preview-copy{padding:18px}.preview-category{color:var(--a);font-size:11px;font-weight:800;text-transform:uppercase}.preview-excerpt{color:var(--muted)}
.rich-toolbar{display:flex;flex-wrap:wrap;gap:5px;padding:8px;border:1px solid var(--border);border-bottom:0;border-radius:8px 8px 0 0;background:var(--surface-2)}.rich-editor{min-height:540px;border:1px solid var(--border);border-radius:0 0 8px 8px;background:var(--input);padding:18px;outline:none;line-height:1.65}.rich-editor:empty:before{content:attr(data-placeholder);color:var(--muted)}.rich-editor img,.preview-body img{max-width:100%;height:auto;border-radius:8px}
.media-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.inline-upload{display:flex;gap:7px}.editor-media-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px;margin-top:14px}.editor-media-item{display:block;padding:0;overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}.editor-media-item img{width:100%;height:95px;object-fit:cover}.editor-media-item span{display:block;padding:7px}.focus-header{display:grid;grid-template-columns:1fr auto auto;gap:12px}.focus-brand{text-align:right}
@media(max-width:980px){.editor-studio{grid-template-columns:1fr}.editor-preview-rail{position:static;height:auto}.media-upload-grid{grid-template-columns:1fr}}


:root[data-theme="dark"]{
 --bg:#11161d;
 --text:#e8eef5;
 --muted:#98a8b8;
 --border:#293645;
 --surface:#18212b;
 --surface-2:#1e2a36;
 --input:#121a23;
 color-scheme:dark
}
:root[data-theme="light"]{
 --bg:#f5f7fa;
 --text:#102a43;
 --muted:#66788a;
 --border:#dfe6ed;
 --surface:#ffffff;
 --surface-2:#f8fafc;
 --input:#ffffff;
 color-scheme:light
}

/* Milestone 5C-A compact professional refinement */
body{
 font-size:12px;
 line-height:1.4;
 font-weight:400
}
.shell h1,
.editor-header h1{
 font-size:18px;
 font-weight:700;
 letter-spacing:-.01em
}
.shell header p,
.editor-header p{
 font-size:11.5px
}
.sidebar nav a{
 font-size:12px;
 font-weight:600
}
.sidebar footer strong{
 font-size:12px
}
button,
.button{
 font-size:11.5px;
 font-weight:600;
 padding:7px 10px
}
label{
 font-size:11.5px;
 font-weight:600;
 margin-bottom:10px
}
input,
select,
textarea{
 font-size:12px;
 padding:7px 8px
}
.panel{
 padding:12px
}
.panel h2,
.report h2,
.dialog-heading h2{
 font-size:13px;
 font-weight:700
}
.package-heading h2{
 font-size:13px;
 font-weight:700
}
.package-heading small,
.dialog-heading p{
 font-size:11px
}
.package-card{
 border-radius:9px
}
.package-card .form-grid{
 gap:0 9px
}
.package-card .checks{
 margin-top:2px
}
.check{
 font-size:11.5px;
 font-weight:500
}
.tabbar button,
.editor-tabs button{
 font-size:11.5px;
 font-weight:600
}
.editor-tabs{
 gap:4px
}
.rich-toolbar button{
 font-size:11px;
 font-weight:600;
 padding:6px 8px
}
.rich-editor{
 font-size:13px
}
.preview-toolbar,
.preview-category{
 font-size:10px
}
.preview-copy h1{
 font-size:22px;
 font-weight:700
}
.admin-dialog{
 width:min(700px,calc(100% - 30px))
}
.admin-dialog .form-grid{
 gap:0 10px
}
.admin-dialog input,
.admin-dialog select{
 min-height:36px
}
.header-actions{
 gap:7px
}
.header-actions > .theme-toggle{
 flex:0 0 auto
}

/* 5C layout recovery: keep all page content directly under the page header */
.shell > main{
 display:block;
 min-height:100vh
}
.shell > main > header{
 min-height:44px
}
.shell > main > header + .metrics,
.shell > main > header + .cols,
.shell > main > header + .panel,
.shell > main > header + .tabs,
.shell > main > header + .page-actions,
.shell > main > header + .ok,
.shell > main > header + .err{
 margin-top:0
}
.metrics,
.tabs,
.page-actions,
.panel{
 align-self:start
}

/* 5C professional workspaces */
.dashboard-groups{
 display:grid;
 gap:12px;
 margin-bottom:14px
}
.dashboard-group{
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:10px;
 padding:12px
}
.dashboard-group>header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:10px
}
.dashboard-group h2{
 margin:0;
 font-size:13px;
 font-weight:700
}
.dashboard-group p{
 margin:2px 0 0;
 color:var(--muted);
 font-size:10.5px
}
.metric-strip{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(125px,1fr));
 gap:8px
}
.metric-strip article{
 background:var(--surface-2);
 border:1px solid var(--border);
 border-radius:8px;
 padding:9px 10px
}
.metric-strip span{
 display:block;
 color:var(--muted);
 font-size:10.5px
}
.metric-strip strong{
 display:block;
 margin-top:3px;
 color:var(--text);
 font-size:16px;
 font-weight:650
}
.revenue-metric{
 grid-column:span 2
}
.dashboard-queues .panel{
 margin-bottom:0
}
.package-summary-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:12px
}
.package-summary-card{
 display:flex;
 flex-direction:column;
 gap:12px;
 min-height:260px
}
.package-summary-head{
 display:flex;
 justify-content:space-between;
 gap:10px
}
.package-summary-head h2{
 margin:0
}
.package-summary-head small{
 color:var(--muted)
}
.package-price strong{
 display:block;
 font-size:18px;
 font-weight:700
}
.package-price span{
 color:var(--muted);
 font-size:10.5px
}
.package-limits,
.package-public-limits{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:6px
}
.package-limits div,
.package-public-limits div{
 background:var(--surface-2);
 border:1px solid var(--border);
 border-radius:7px;
 padding:7px
}
.package-limits span,
.package-public-limits span{
 display:block;
 color:var(--muted);
 font-size:9.5px
}
.package-limits strong,
.package-public-limits strong{
 font-size:12px
}
.package-flags{
 display:flex;
 justify-content:space-between;
 color:var(--muted);
 font-size:10.5px
}
.package-edit-link{
 margin-top:auto
}
.package-editor-grid{
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(300px,380px);
 gap:14px
}
.package-preview-rail{
 position:sticky;
 top:76px;
 height:max-content;
 border:1px solid var(--border);
 border-radius:10px;
 background:var(--surface);
 padding:12px
}
.package-public-preview{
 background:linear-gradient(145deg,rgba(0,50,101,.2),rgba(216,0,123,.08)),var(--surface-2);
 border:1px solid var(--border);
 border-radius:10px;
 padding:18px
}
.package-public-preview h2{
 font-size:21px;
 margin:12px 0 3px
}
.package-public-preview p{
 margin:0;
 color:var(--muted)
}
.package-public-price{
 margin:18px 0
}
.package-public-price strong{
 display:block;
 font-size:22px
}
.package-public-price span,
.package-public-note{
 color:var(--muted);
 font-size:11px
}
.rich-toolbar{
 position:sticky;
 top:0;
 z-index:8;
 border-radius:8px 8px 0 0
}
.rich-editor{
 height:calc(100vh - 265px);
 min-height:420px;
 max-height:650px;
 overflow-y:auto;
 overscroll-behavior:contain
}
.editor-workspace-scroll{
 min-height:0
}
.media-source-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:12px;
 margin-bottom:12px
}
.media-source-card{
 border:1px solid var(--border);
 border-radius:9px;
 padding:12px;
 background:var(--surface-2)
}
.media-source-card h2{
 margin:0 0 4px
}
.media-source-card p{
 margin:0 0 12px;
 color:var(--muted);
 font-size:10.5px
}
.media-library-dialog,
.crop-dialog{
 width:min(1100px,calc(100% - 28px));
 max-height:calc(100vh - 28px);
 padding:0;
 border:1px solid var(--border);
 border-radius:12px;
 background:var(--surface);
 color:var(--text)
}
.media-library-dialog::backdrop,
.crop-dialog::backdrop{
 background:rgba(0,0,0,.78)
}
.media-library-shell,
.crop-shell{
 padding:14px
}
.media-library-header,
.crop-shell>header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:12px;
 margin-bottom:12px
}
.media-library-header h2,
.crop-shell h2{
 margin:0;
 font-size:15px
}
.media-library-header p,
.crop-shell p{
 margin:2px 0 0;
 color:var(--muted);
 font-size:10.5px
}
.media-library-tools{
 display:grid;
 grid-template-columns:minmax(280px,1fr) minmax(180px,300px);
 gap:10px;
 align-items:center;
 margin-bottom:12px
}
.media-library-layout{
 display:grid;
 grid-template-columns:minmax(0,1fr) 310px;
 gap:12px;
 min-height:520px
}
.media-library-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
 align-content:start;
 gap:9px;
 max-height:62vh;
 overflow-y:auto;
 padding-right:5px
}
.editor-media-item.selected{
 outline:2px solid var(--a);
 outline-offset:1px
}
.media-inspector{
 border:1px solid var(--border);
 border-radius:9px;
 padding:10px;
 background:var(--surface-2)
}
.media-inspector-preview{
 height:300px;
 display:grid;
 place-items:center;
 overflow:hidden;
 border-radius:8px;
 background:var(--input)
}
.media-inspector-preview img{
 width:100%;
 height:100%;
 object-fit:contain
}
.media-inspector-meta{
 padding:10px 0
}
.media-inspector-meta small{
 display:block;
 color:var(--muted)
}
.media-inspector-actions{
 display:grid;
 gap:7px
}
.crop-stage{
 display:grid;
 place-items:center;
 background:var(--input);
 border:1px solid var(--border);
 border-radius:9px;
 overflow:auto;
 padding:10px
}
#cropCanvas{
 max-width:100%;
 height:auto
}
.crop-controls{
 display:flex;
 align-items:end;
 gap:12px;
 margin-top:12px
}
.crop-controls label{
 flex:1;
 margin:0
}
@media(max-width:900px){
 .package-editor-grid,
 .media-library-layout{
  grid-template-columns:1fr
 }
 .package-preview-rail{
  position:static
 }
 .media-inspector-preview{
  height:230px
 }
 .media-source-grid{
  grid-template-columns:1fr
 }
}

/* Editorial and media catalogs */
.catalog-toolbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:12px;
 margin-bottom:12px
}
.catalog-search{
 margin:0;
 flex:1
}
.catalog-actions{
 display:flex;
 align-items:center;
 gap:8px
}
.view-toggle{
 display:flex;
 gap:3px;
 padding:3px;
 border:1px solid var(--border);
 border-radius:8px;
 background:var(--surface)
}
.view-toggle button{
 padding:5px 9px;
 font-size:10.5px
}
.view-toggle button.active{
 background:var(--p);
 color:#fff
}
.editorial-catalog{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
 gap:12px
}
.editorial-card{
 display:flex;
 flex-direction:column;
 overflow:hidden;
 border:1px solid var(--border);
 border-radius:10px;
 background:var(--surface);
 min-height:330px
}
.editorial-card-cover{
 display:block;
 height:155px;
 background:var(--surface-2)
}
.editorial-card-cover img{
 width:100%;
 height:100%;
 object-fit:cover
}
.editorial-card-placeholder{
 height:100%;
 display:grid;
 place-items:center;
 color:var(--muted);
 background:
 linear-gradient(135deg,rgba(0,50,101,.22),rgba(216,0,123,.10)),
 var(--surface-2)
}
.editorial-card-body{
 display:flex;
 flex-direction:column;
 flex:1;
 padding:12px
}
.editorial-card-meta,
.editorial-card-footer{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:8px;
 color:var(--muted);
 font-size:10px
}
.editorial-card-meta>span{
 color:var(--a);
 font-weight:700;
 text-transform:uppercase
}
.editorial-card h2{
 margin:10px 0 6px;
 font-size:14px
}
.editorial-card p{
 margin:0;
 color:var(--muted);
 font-size:11px;
 line-height:1.5
}
.editorial-card-footer{
 margin-top:auto;
 padding-top:12px;
 border-top:1px solid var(--border)
}
.editorial-catalog[data-view-mode="list"]{
 display:block
}
.editorial-catalog[data-view-mode="list"] .editorial-card{
 display:grid;
 grid-template-columns:150px minmax(0,1fr);
 min-height:0;
 margin-bottom:8px
}
.editorial-catalog[data-view-mode="list"] .editorial-card-cover{
 height:118px
}
.media-catalog-layout{
 display:grid;
 grid-template-columns:minmax(0,1fr) 300px;
 gap:12px
}
.media-catalog-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
 align-content:start;
 gap:9px
}
.media-catalog-item{
 display:block;
 padding:0;
 overflow:hidden;
 text-align:left;
 border:1px solid var(--border);
 border-radius:9px;
 background:var(--surface)
}
.media-catalog-item.selected{
 outline:2px solid var(--a);
 outline-offset:1px
}
.media-catalog-thumb{
 height:115px;
 background:var(--input)
}
.media-catalog-thumb img{
 width:100%;
 height:100%;
 object-fit:cover
}
.media-catalog-copy{
 padding:8px
}
.media-catalog-copy strong,
.media-catalog-copy small,
.media-catalog-copy span{
 display:block
}
.media-catalog-copy strong{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:11px
}
.media-catalog-copy small,
.media-catalog-copy span{
 color:var(--muted);
 font-size:9.5px
}
.media-catalog-grid[data-view-mode="list"]{
 display:block
}
.media-catalog-grid[data-view-mode="list"] .media-catalog-item{
 display:grid;
 grid-template-columns:90px minmax(0,1fr);
 width:100%;
 margin-bottom:7px
}
.media-catalog-grid[data-view-mode="list"] .media-catalog-thumb{
 height:70px
}
.media-detail-panel{
 position:sticky;
 top:76px;
 height:max-content;
 border:1px solid var(--border);
 border-radius:10px;
 background:var(--surface);
 padding:10px
}
.media-detail-preview{
 height:260px;
 display:grid;
 place-items:center;
 overflow:hidden;
 border-radius:8px;
 background:var(--input);
 color:var(--muted)
}
.media-detail-preview img{
 width:100%;
 height:100%;
 object-fit:contain
}
.media-detail-content{
 padding-top:10px
}
.media-detail-content h2{
 font-size:13px;
 margin:0 0 10px
}
.media-detail-content dl{
 grid-template-columns:1fr;
 gap:7px;
 margin-bottom:10px
}
.media-upload-dialog{
 width:min(640px,calc(100% - 30px))
}
.upload-preview{
 height:230px;
 display:grid;
 place-items:center;
 overflow:hidden;
 border:1px solid var(--border);
 border-radius:8px;
 background:var(--input);
 color:var(--muted);
 margin-bottom:8px
}
.upload-preview img{
 width:100%;
 height:100%;
 object-fit:contain
}
.empty-catalog{
 grid-column:1/-1;
 min-height:240px;
 display:grid;
 place-items:center;
 align-content:center;
 gap:7px;
 border:1px dashed var(--border);
 border-radius:10px;
 color:var(--muted);
 text-align:center
}
.empty-catalog p{
 margin:0
}
@media(max-width:850px){
 .catalog-toolbar{
  align-items:stretch;
  flex-direction:column
 }
 .catalog-actions{
  justify-content:space-between
 }
 .media-catalog-layout{
  grid-template-columns:1fr
 }
 .media-detail-panel{
  position:static
 }
}

/* Direct editorial upload and fullscreen media preview */
.inline-upload-status{
 align-self:center;
 color:var(--muted);
 font-size:10px;
 padding:0 4px
}
.media-catalog-full{
 grid-template-columns:repeat(auto-fill,minmax(170px,1fr))
}
.media-catalog-item{
 display:flex;
 flex-direction:column
}
.media-card-actions{
 display:flex;
 gap:6px;
 padding:0 8px 8px
}
.media-card-actions>*{
 flex:1;
 text-align:center
}
.media-type-badge{
 position:absolute;
 top:6px;
 right:6px;
 padding:3px 6px;
 border-radius:999px;
 background:rgba(0,0,0,.72);
 color:#fff;
 font-size:9px;
 text-transform:uppercase
}
.media-catalog-thumb{
 position:relative
}
.media-catalog-thumb video{
 width:100%;
 height:100%;
 object-fit:cover
}
.media-full-preview-dialog{
 width:min(1180px,calc(100% - 24px));
 max-height:calc(100vh - 24px);
 padding:0;
 border:1px solid var(--border);
 border-radius:12px;
 background:var(--surface);
 color:var(--text)
}
.media-full-preview-dialog::backdrop{
 background:rgba(0,0,0,.84)
}
.media-full-preview-shell{
 padding:14px
}
.media-full-preview-shell>header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:12px;
 margin-bottom:12px
}
.media-full-preview-shell h2{
 margin:0;
 font-size:15px
}
.media-full-preview-shell p{
 margin:2px 0 0;
 color:var(--muted);
 font-size:10.5px
}
.media-full-preview-stage{
 width:100%;
 height:min(68vh,720px);
 display:grid;
 place-items:center;
 overflow:hidden;
 border:1px solid var(--border);
 border-radius:10px;
 background:#0b1016
}
.media-full-preview-stage img,
.media-full-preview-stage video{
 max-width:100%;
 max-height:100%;
 width:auto;
 height:auto;
 object-fit:contain
}
.media-full-preview-meta{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:8px;
 margin-top:10px
}
.media-full-preview-meta>div{
 padding:8px;
 border:1px solid var(--border);
 border-radius:8px;
 background:var(--surface-2)
}
.media-full-preview-meta span,
.media-full-preview-meta strong{
 display:block
}
.media-full-preview-meta span{
 color:var(--muted);
 font-size:9.5px;
 text-transform:uppercase
}
.media-full-preview-meta strong{
 margin-top:3px;
 font-size:11px
}
.upload-preview video{
 width:100%;
 height:100%;
 object-fit:contain
}
@media(max-width:760px){
 .media-full-preview-meta{
  grid-template-columns:1fr 1fr
 }
}