:root{--bg:#f4f7fb;--panel:#fff;--text:#172033;--muted:#718096;--line:#e4eaf2;--nav:#111827;--blue:#2563eb;--green:#059669;--red:#dc2626;--shadow:0 8px 30px rgba(27,45,75,.07)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 Inter,"PingFang HK","Microsoft JhengHei","Microsoft YaHei",system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.shell{min-height:100vh}.side{position:fixed;inset:0 auto 0 0;width:226px;background:var(--nav);color:#cbd5e1;padding:24px 16px;display:flex;flex-direction:column;z-index:5}.brand{font-size:24px;font-weight:800;color:#fff;padding:0 12px 27px}.brand span,.login-mark{display:inline-grid;place-items:center;background:var(--blue);border-radius:11px;color:#fff;font-weight:800}.brand span{width:36px;height:36px;margin-right:7px;font-size:16px}.side nav{display:grid;gap:5px}.side nav a{padding:11px 14px;border-radius:9px;font-weight:600}.side nav a:hover,.side nav a.active{background:#253247;color:#fff}.side-foot{margin-top:auto;border-top:1px solid #2a3548;padding:15px 9px 0;display:flex;justify-content:space-between;align-items:center}.side-foot form{margin:0}.side-foot button{border:0;background:none;color:#93c5fd;cursor:pointer}main{margin-left:226px;padding:25px 30px 50px;min-width:0}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}header h1{margin:0;font-size:25px}header p{margin:2px 0 0;color:var(--muted)}.status{font-style:normal;background:#fff7ed;color:#b45309;border:1px solid #fed7aa;border-radius:999px;padding:5px 10px;font-size:12px}.status.ok{background:#ecfdf5;color:#047857;border-color:#a7f3d0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);margin-bottom:20px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.panel h2,.panel-head h2{margin:0;font-size:17px}.panel-head p{margin:3px 0 0;color:var(--muted)}.btn{border:1px solid #d4dce8;background:#fff;color:#344258;border-radius:8px;padding:8px 13px;cursor:pointer;font-weight:600;white-space:nowrap}.btn:hover{background:#f8fafc}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.wide{width:100%;padding:11px}.alert{padding:12px 15px;border-radius:9px;margin:0 0 18px;border:1px solid}.alert.success{background:#ecfdf5;border-color:#a7f3d0;color:#076f4e}.alert.error{background:#fef2f2;border-color:#fecaca;color:#a71919}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:20px}.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px 21px;box-shadow:var(--shadow)}.stat span{color:var(--muted);display:block}.stat strong{font-size:27px;display:block;margin:7px 0 1px}.stat small{color:#94a0b2}.grid-2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:20px}.stack{display:grid;gap:14px}.stack label,.edit label,.login-card label,.upload label{display:grid;gap:6px;font-weight:600;color:#3c4a60}.stack small{font-weight:400;color:var(--muted)}input,select{width:100%;border:1px solid #d7e0eb;border-radius:8px;padding:10px 11px;background:#fff;outline:none}input:focus,select:focus{border-color:#75a1f7;box-shadow:0 0 0 3px #dbeafe}.actions,.site-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.note{background:#f8fbff}.note p,.note li{color:#526077}.note ul{padding-left:19px}.recent-list{display:grid}.recent-list a{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid var(--line)}.recent-list a:last-child{border:0}.recent-list div{display:grid;min-width:0}.recent-list b,.recent-list span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-list span{color:var(--muted);font-size:12px}.type{display:grid;place-items:center;width:48px;height:40px;border-radius:8px;background:#eef2ff;color:#3730a3;font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase}.type.video{background:#fff1f2;color:#be123c}.type.image{background:#ecfdf5;color:#047857}.type.style,.type.script{background:#fffbeb;color:#a16207}.type.font{background:#f5f3ff;color:#6d28d9}.type.pdf{background:#fef2f2;color:#b91c1c}.type.template,.type.attachment{background:#f1f5f9;color:#475569}.type.big{width:82px;height:62px;font-size:15px}.category-list{display:grid;gap:10px}.category-list>div{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}.category-list small{color:var(--muted)}.upload{padding:15px 18px}.upload form{display:flex;align-items:end;gap:11px}.upload label{min-width:180px}.upload .file input{position:absolute;opacity:0;width:1px;height:1px}.upload .file span{border:1px dashed #aebbd0;padding:9px 16px;border-radius:8px;text-align:center;cursor:pointer;background:#fafcff}.upload>p{margin:10px 0 0;color:var(--muted);font-size:12px}.filter{margin:0 0 17px}.filter form{display:flex;gap:8px}.filter select{width:150px}.filter input{width:260px}.asset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.asset-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 5px 18px rgba(30,50,80,.05);min-width:0}.preview{height:165px;display:grid;place-items:center;background:#eef2f6}.preview img,.preview video{width:100%;height:100%;object-fit:cover}.asset-card>div{padding:11px;display:grid;gap:3px;min-width:0}.asset-card b,.asset-card span,.asset-card code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-card span{font-size:12px;color:var(--muted)}.asset-card code{font-size:11px;color:#64748b}.card-actions{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:8px;margin-top:6px}.card-actions form{margin:0 0 0 auto}.link{border:0;background:none;color:var(--blue);padding:0;cursor:pointer;font-size:12px}.link.danger{color:var(--red)}.badge{font-style:normal;font-size:11px;border-radius:999px;padding:2px 7px;background:#fff7ed;color:#b45309}.badge.ready{background:#ecfdf5;color:#047857}.token-box{padding:17px 19px;border-radius:12px;background:#fffbeb;border:1px solid #fde68a;margin-bottom:20px}.token-box>div{display:flex;gap:10px;margin:9px 0}.token-box code{padding:9px 12px;background:#fff;border:1px solid #f5d76e;border-radius:7px;word-break:break-all;flex:1}.token-box p{margin:0;color:#826516}.site-list{display:grid;gap:10px}.site-list details{border:1px solid var(--line);border-radius:10px;overflow:hidden}.site-list summary{cursor:pointer;list-style:none;padding:13px 15px;display:flex;justify-content:space-between;align-items:center}.site-list summary div{display:grid}.site-list summary span{font-size:12px;color:var(--muted)}.edit{padding:15px;border-top:1px solid var(--line);background:#fafcff;display:grid;grid-template-columns:1fr 1fr;gap:12px}.edit fieldset,.stack fieldset{border:1px solid var(--line);border-radius:8px;padding:10px}.edit fieldset{grid-column:1/-1}.check{display:inline-flex!important;align-items:center;gap:5px!important;margin:4px 13px 4px 0!important;font-weight:500!important}.check input{width:auto}.site-actions{padding:0 15px 15px;background:#fafcff}.site-actions form{margin:0}.empty{text-align:center;padding:42px;color:var(--muted)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 11px;border-bottom:1px solid var(--line);white-space:nowrap;max-width:380px;overflow:hidden;text-overflow:ellipsis}th{color:var(--muted);font-size:12px}.pager{text-align:center;margin:22px 0}.pager ul{list-style:none;display:flex;justify-content:center;gap:5px;padding:0}.pager li,.pager a,.pager span{display:inline-block}.pager a,.pager span{padding:6px 10px;background:#fff;border:1px solid var(--line);border-radius:6px}.docs{max-width:900px}.docs pre{background:#101827;color:#d7e4f5;border-radius:10px;padding:16px;overflow:auto;line-height:1.65}.docs code{font-family:"Cascadia Code",Consolas,monospace}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#dbeafe,transparent 40%),linear-gradient(145deg,#f8fafc,#eef2ff)}.login-card{width:380px;background:#fff;padding:34px;border-radius:18px;box-shadow:0 25px 80px rgba(38,59,98,.15);text-align:center}.login-card h1{margin:13px 0 3px;font-size:22px}.login-card>p{margin:0 0 24px;color:var(--muted)}.login-card form{display:grid;gap:15px;text-align:left}.login-mark{width:54px;height:54px;font-size:18px}@media(max-width:1200px){.stats{grid-template-columns:repeat(2,1fr)}.asset-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:820px){.side{position:static;width:auto;padding:14px}.side .brand{padding:0 0 12px}.side nav{display:flex;overflow:auto}.side-foot{display:none}main{margin:0;padding:18px 14px}.grid-2{grid-template-columns:1fr}.asset-grid{grid-template-columns:repeat(2,1fr)}.upload form,.filter form{align-items:stretch;flex-direction:column}.upload label,.filter input,.filter select{width:100%;min-width:0}.edit{grid-template-columns:1fr}.edit fieldset{grid-column:auto}}@media(max-width:500px){.stats,.asset-grid{grid-template-columns:1fr}.login-card{width:calc(100% - 28px);padding:26px}}.realtime-status{width:100%;min-height:58px;margin:0 0 20px;padding:10px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:28px}.realtime-status>div{display:flex;align-items:center;gap:8px;white-space:nowrap}.realtime-status>div:first-child{margin-right:auto}.realtime-status span{font-weight:800}.realtime-status small{color:var(--muted)}.realtime-status b{font-weight:700}.realtime-status b.ok{color:var(--green)}.realtime-status b.bad{color:var(--red)}.live-dot{color:var(--green);font-size:12px}.realtime-status time{color:var(--muted);font-size:12px;white-space:nowrap}@media(max-width:700px){.realtime-status{gap:12px;flex-wrap:wrap}.realtime-status>div:first-child{width:100%;margin-right:0}.realtime-status time{margin-left:auto}}
/* Resource browser: compact thumbnails, metadata above preview, and image lightbox. */
.asset-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.asset-card{display:flex;flex-direction:column}.asset-meta{padding:9px 10px 7px!important;gap:2px!important;min-height:76px}.asset-meta b{font-size:12px}.asset-meta span{font-size:11px!important}.asset-meta code{font-size:10px!important}.asset-card .preview{border:0;border-radius:0;width:100%;height:112px;flex:none;cursor:pointer}.asset-card .image-preview{padding:0}.asset-card .preview img,.asset-card .preview video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .18s ease}.asset-card .image-preview:hover img{transform:scale(1.04)}.asset-card>.card-actions{margin-top:auto;padding:8px 10px;border-top:1px solid var(--line)}.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}.pager-hint{color:var(--muted);font-size:12px}.lightbox[hidden]{display:none}.lightbox{position:fixed;inset:0;z-index:20;background:rgba(8,15,29,.84);display:grid;place-items:center;padding:34px}.lightbox figure{max-width:min(1100px,94vw);max-height:90vh;margin:0;display:grid;gap:10px;justify-items:center}.lightbox img{display:block;max-width:94vw;max-height:calc(90vh - 42px);object-fit:contain;background:#fff;border-radius:8px;box-shadow:0 16px 60px rgba(0,0,0,.35)}.lightbox figcaption{max-width:90vw;color:#fff;font-size:13px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lightbox-close{position:fixed;top:16px;right:22px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:30px;line-height:1;cursor:pointer}.lightbox-close:hover{background:rgba(255,255,255,.28)}body.lightbox-open{overflow:hidden}@media(max-width:1400px){.asset-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:1100px){.asset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:820px){.asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.asset-card .preview{height:105px}}@media(max-width:560px){.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.asset-card .preview{height:100px}.lightbox{padding:20px}}/* Keep every thumbnail inside the fixed preview box without distortion or overflow. */
.asset-card .preview{display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;min-height:0;background:#eef2f6}
.asset-card .preview img,.asset-card .preview video{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain}