*{box-sizing:border-box}
body{margin:0;font:14px/1.5 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:#f3f5f8;color:#222}
header{display:flex;align-items:center;gap:24px;background:#1f2d3d;color:#fff;padding:0 20px;height:52px}
.brand{font-weight:600;font-size:16px}
nav{display:flex;gap:4px;flex:1}
nav a{color:#c9d3df;text-decoration:none;padding:6px 14px;border-radius:6px}
nav a.active,nav a:hover{background:#34495e;color:#fff}
main{padding:16px 20px;max-width:1400px;margin:0 auto}
button{background:#2d7ff9;color:#fff;border:0;border-radius:6px;padding:6px 14px;cursor:pointer;font-size:13px}
button:hover{filter:brightness(1.08)}
button.ghost{background:#fff;color:#2d7ff9;border:1px solid #c8d6ec}
button.danger{color:#e14b4b;border-color:#f1c5c5}
button.small{padding:3px 9px;font-size:12px}
header button.ghost{background:transparent;color:#c9d3df;border-color:#4a5d72}
select,input[type=text],input[type=number],input[type=time],input[type=password]{border:1px solid #ccd5e0;border-radius:6px;padding:5px 8px;font-size:13px;background:#fff}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.muted{color:#7a8899;font-size:12px}
.hidden{display:none!important}
.warnbar{background:#fff4e0;color:#9a5b00;padding:8px 20px;border-bottom:1px solid #f3d9a8}
.pin-banner{background:#fff0f0;border:1px solid #f5c2c2;color:#b33;padding:8px 12px;border-radius:8px;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.upload{border:2px dashed #b8c6d9;border-radius:10px;padding:16px;background:#fff;margin-bottom:14px;text-align:center}
.upload.drag{border-color:#2d7ff9;background:#eef5ff}
.upload-opts{margin-top:8px;color:#556}
.link{color:#2d7ff9;cursor:pointer;text-decoration:underline}
#uploadList{text-align:left;margin-top:8px}
.up-row{display:flex;align-items:center;gap:10px;margin:4px 0;font-size:12px}
.up-row .nm{width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{flex:1;height:8px;background:#e6ebf2;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:#2d7ff9;transition:width .2s}
.up-row.ok .bar i{background:#2fb36b}.up-row.err .bar i{background:#e14b4b}
.up-row .st{width:220px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05)}
th,td{padding:8px 10px;border-bottom:1px solid #eef1f5;text-align:left;vertical-align:middle}
th{background:#f8fafc;font-weight:500;color:#556;font-size:12px}
tr.dragging{opacity:.4}
tr.over td{border-top:2px solid #2d7ff9}
tr.disabled td{opacity:.5}
tr.pinned{background:#fff6f6}
.handle{cursor:grab;color:#99a;font-size:18px;user-select:none}
.thumb{width:72px;height:48px;object-fit:contain;background:#111;border-radius:4px;display:block}
.badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;background:#eef2f7;color:#456;margin-right:4px}
.badge.video{background:#e8f0ff;color:#2d62c9}.badge.image{background:#e9f8ef;color:#23824c}
.badge.tc-run{background:#fff2dc;color:#936000}.badge.tc-ok{background:#e9f8ef;color:#23824c}
.badge.warn{background:#fff2dc;color:#a56400}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:#bbb}
.dot.on{background:#2fb36b}
.switch{position:relative;display:inline-block;width:38px;height:20px}
.switch input{display:none}
.switch span{position:absolute;inset:0;background:#cdd5df;border-radius:20px;transition:.2s;cursor:pointer}
.switch span:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+span{background:#2fb36b}
.switch input:checked+span:before{transform:translateX(18px)}
.switch.pin input:checked+span{background:#e14b4b}
.sched{font-size:12px;color:#556}
.sched-edit{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px}
.sched-edit label{white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.card{background:#fff;border-radius:10px;padding:10px;box-shadow:0 1px 2px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:6px}
.card img{width:100%;height:140px;object-fit:contain;background:#111;border-radius:6px}
.card .nm{font-weight:500;word-break:break-all}
.card .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px}
.help{background:#fff;padding:16px 24px;border-radius:10px;max-width:900px}
.help h3{margin-top:18px}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#333;color:#fff;padding:8px 18px;border-radius:20px;z-index:99}
.login-body{display:flex;align-items:center;justify-content:center;height:100vh;background:#1f2d3d}
.login-box{background:#fff;padding:32px;border-radius:12px;width:320px;display:flex;flex-direction:column;gap:14px}
.login-box h1{font-size:20px;margin:0 0 6px;text-align:center}
.login-box input{padding:10px}
.login-box button{padding:10px}
.err{color:#e14b4b;min-height:20px;text-align:center}
td input[type=number]{width:70px}
td input.name{width:150px}
/* v1.1 素材库为中心 */
.sep{flex:1}
input.search{border:1px solid #ccd5e0;border-radius:6px;padding:5px 10px;font-size:13px;min-width:200px}
input.wide{width:100%;padding:8px}
.bulkbar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:8px 12px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.bulkbar button:disabled{opacity:.45;cursor:not-allowed}
#dropZone{padding:10px;font-size:13px;color:#667}
.card{position:relative}
.card.sel{outline:2px solid #2d7ff9}
.card .ck{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.9);border-radius:4px;padding:2px 4px;z-index:2}
.card .ck input{width:16px;height:16px;cursor:pointer}
.card .title{cursor:text;border-bottom:1px dashed transparent}
.card .title:hover{border-bottom-color:#9ab}
.card input.rename{width:100%;font-size:13px;padding:4px 6px;border:1px solid #2d7ff9;border-radius:4px}
.card input[type=number]{width:64px}
button.icon{background:none;color:#7a8899;padding:0 4px;font-size:13px}
.badge.o-portrait{background:#f3eaff;color:#7040b0}.badge.o-landscape{background:#e7f6fb;color:#16708a}.badge.o-any{background:#eef2f7;color:#456}
.chips{gap:4px}
.chip{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;border:1px solid #cde}
.chip.on{background:#e9f8ef;color:#23824c;border-color:#bfe6cd}
.chip.pin{background:#fff0f0;color:#c33;border-color:#f5c2c2}
.chip.off{background:#f3f4f6;color:#889;border-color:#dde}
.chip.bad{background:#fff2dc;color:#a56400;border-color:#f3d9a8;text-decoration:line-through}
.empty{padding:40px;text-align:center}
.panel{background:#fff;border-radius:10px;padding:14px;margin-top:16px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
tr.cur td{background:#f0f6ff}
tr.incompat td{background:#fffaf0}
td input.grp{width:90px}
.badge.pinb{background:#fff0f0;color:#c33}
.modal{position:fixed;inset:0;background:rgba(20,30,45,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-box{background:#fff;border-radius:12px;width:min(640px,94vw);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #eef1f5;font-size:15px}
.modal-body{padding:12px 18px;overflow:auto}
.modal-body h4{margin:14px 0 4px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid #eef1f5}
button.danger.solid{background:#e14b4b;color:#fff}
.danger-text{color:#c33}
.picker{border:1px solid #e3e8ef;border-radius:8px;padding:8px 10px}
.dev-list{max-height:300px;overflow:auto}
.dev-opt{display:flex;align-items:center;gap:6px;padding:5px 2px;border-bottom:1px solid #f3f5f8;cursor:pointer;flex-wrap:wrap}
.dev-opt.all{border-bottom:1px solid #dde4ee}
.dev-opt.off{opacity:.6;cursor:not-allowed}
.grp{padding:6px 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:#556}
.pick-list{max-height:380px;overflow:auto;margin-top:8px}
.pick-row{display:flex;gap:10px;align-items:center;padding:6px 2px;border-bottom:1px solid #f3f5f8;cursor:pointer}
.pick-row.off{opacity:.6;cursor:not-allowed}

/* ===== v1.1.1 手机端适配（≤640px 生效，桌面端不受影响） ===== */
.mv{display:none}
@media (max-width:640px){
  body{font-size:15px;-webkit-text-size-adjust:100%}
  /* 顶栏：品牌+退出一行，标签页独占一行，吸顶，避开刘海 */
  header{position:sticky;top:0;z-index:40;flex-wrap:wrap;height:auto;gap:0;padding:calc(6px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left))}
  .brand{flex:1;font-size:16px;line-height:40px;white-space:nowrap}
  header button.ghost{order:2;padding:6px 12px;white-space:nowrap}
  nav{order:3;flex:0 0 100%;gap:0;margin:4px -12px 0;border-top:1px solid #34495e}
  nav a{flex:1;text-align:center;white-space:nowrap;padding:10px 0;border-radius:0;font-size:15px;border-bottom:3px solid transparent}
  nav a.active,nav a:hover{background:transparent;color:#fff;border-bottom-color:#2d7ff9}
  .warnbar{padding:8px 12px}
  main{padding:12px calc(12px + env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}
  /* 触控尺寸 + iOS 输入框 ≥16px 防止聚焦自动放大 */
  button{min-height:38px;padding:8px 14px;font-size:14px;white-space:nowrap}
  button.small{min-height:34px;padding:6px 11px;font-size:13px}
  button.icon{min-height:0}
  select,input[type=text],input[type=number],input[type=time],input[type=password],input[type=search],input.search{font-size:16px;min-height:38px;padding:6px 8px}
  input[type=checkbox]{width:20px;height:20px}
  /* 素材库筛选：搜索整行，筛选两列 */
  #tab-media>.toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  #tab-media>.toolbar #btnUpload{grid-column:1}
  #tab-media>.toolbar #fQ{grid-column:1/-1;grid-row:2;min-width:0;width:100%}
  #tab-media>.toolbar label{min-width:0;display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;color:#556}
  #tab-media>.toolbar label select{flex:1;min-width:0}
  #mediaCount{grid-column:2;grid-row:1;align-self:center;text-align:right}
  /* 批量操作栏：不换行；有选中时固定在底部（避开 Safari 底部栏） */
  .bulkbar{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .bulkbar>label{display:flex;align-items:center;gap:4px;white-space:nowrap}
  .bulkbar #selInfo{flex:1 1 60%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bulkbar button.small{flex:1 1 0;padding:6px 4px}
  .bulkbar.is-active{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;border-radius:12px 12px 0 0;box-shadow:0 -4px 16px rgba(0,0,0,.15);padding:10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}
  #dropZone{display:none}
  .grid{grid-template-columns:1fr}
  .card img{height:200px}
  .card .ck{top:12px;left:12px}
  .card .row select{flex:1;min-width:0}
  .card{min-width:0}
  .card .row:last-child button{flex:1}
  .chip{padding:3px 10px;font-size:12px}
  /* 设备页：表格改卡片 */
  #tab-devices>.toolbar{gap:8px}
  #tab-devices>.toolbar .sep{display:none}
  table.devices,table.devices tbody{display:block;background:transparent;box-shadow:none}
  table.devices thead{display:none}
  table.devices tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;background:#fff;border-radius:10px;padding:12px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
  table.devices tr.cur{outline:2px solid #2d7ff9}
  table.devices tr.cur td{background:transparent}
  table.devices td{display:block;border:0;padding:0;min-width:0;font-size:13px}
  table.devices td::before{display:block;color:#7a8899;font-size:11px;margin-bottom:2px}
  table.devices td:nth-child(1){grid-column:1/-1;order:-1}
  table.devices td:nth-child(2){grid-column:1/-1}
  table.devices td:nth-child(3)::before{content:"屏幕方向"}
  table.devices td:nth-child(4)::before{content:"分组"}
  table.devices td:nth-child(5){grid-column:1/-1}
  table.devices td:nth-child(5)::before{content:"投放内容"}
  table.devices td:nth-child(6)::before{content:"最后心跳"}
  table.devices td:nth-child(7)::before{content:"正在播放 / 缓存"}
  table.devices td:nth-child(8){grid-column:1/-1}
  table.devices td:nth-child(8)::before{content:"IP / 版本"}
  table.devices td:nth-child(9){grid-column:1/-1;display:flex;gap:8px}
  table.devices td:nth-child(9) br{display:none}
  table.devices td:nth-child(5) button{margin-top:6px}
  table.devices td[colspan]{grid-column:1/-1}
  table.devices td[colspan]::before{content:none}
  td input.name{width:100%}
  td input.grp{width:100%}
  table.devices td select{width:100%}
  /* 设备内容管理：列表改卡片，↑↓ 代替拖动 */
  .panel{padding:12px;margin-left:-4px;margin-right:-4px}
  #devDetail{scroll-margin-top:100px}
  #devDetail>.toolbar{display:grid;grid-template-columns:1fr auto;gap:8px}
  #devDetail>.toolbar h3{grid-column:1/-1;font-size:16px}
  #devDetail>.toolbar #ddQ{grid-column:1/-1;grid-row:3;min-width:0;width:100%}
  #devDetail>.toolbar #ddMeta{grid-column:1/-1}
  .pin-banner{display:block}
  .pin-banner button{display:block;margin-top:8px;width:100%}
  table.items,table.items tbody{display:block;box-shadow:none;background:transparent}
  table.items thead{display:none}
  table.items tr{display:grid;grid-template-columns:80px 1fr 1fr;gap:6px 10px;border:1px solid #eef1f5;border-radius:10px;padding:10px;margin-bottom:8px;background:#fff}
  table.items tr.pinned{background:#fff6f6}
  table.items td{display:block;border:0;padding:0;min-width:0;font-size:13px}
  table.items td::before{display:block;color:#7a8899;font-size:11px}
  table.items td:nth-child(1){display:none}
  table.items td:nth-child(2){grid-row:1/3}
  table.items td:nth-child(3){grid-column:2/-1;word-break:break-all}
  table.items td:nth-child(4){grid-column:2/-1}
  table.items td:nth-child(5)::before{content:"时长（秒）"}
  table.items td:nth-child(6)::before{content:"启用"}
  table.items td:nth-child(7)::before{content:"常驻显示"}
  table.items td:nth-child(8){grid-column:1/-1}
  table.items td:nth-child(8)::before{content:"排期"}
  table.items td:nth-child(9){grid-column:1/-1;display:flex;gap:8px}
  table.items td:nth-child(9) .mv{display:inline-block;flex:1}
  table.items td[colspan]{grid-column:1/-1;display:block}
  table.items td[colspan]::before{content:none}
  table.items .thumb{width:80px;height:80px}
  td input[type=number]{width:100%}
  .sched-edit{gap:8px}
  /* 弹窗：底部抽屉式，按钮放大 */
  .modal{align-items:flex-end}
  .modal-box{width:100%;max-height:92vh;max-height:92dvh;border-radius:14px 14px 0 0}
  .modal-head{padding:12px 16px}
  .modal-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px}
  .modal-body{padding:10px 16px;-webkit-overflow-scrolling:touch}
  .modal-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .modal-foot button{flex:1;min-height:44px}
  .dev-opt,.pick-row{padding:9px 2px}
  .dev-list,.pick-list{max-height:none}
  .up-row{flex-wrap:wrap}
  .up-row .nm{width:100%}
  .up-row .st{width:auto}
  .toast{bottom:calc(90px + env(safe-area-inset-bottom));max-width:90vw;text-align:center}
  .help{padding:12px 16px}
  .help ol,.help ul{padding-left:20px}
  /* 登录页 */
  .login-body{height:100vh;height:100dvh;padding:0 16px}
  .login-box{width:100%;max-width:360px;padding:24px}
  .login-box input{font-size:16px}
  .login-box button{min-height:44px;font-size:16px}
}

/* ===== v1.1.2 手机端修正 ===== */
@media (max-width:640px){
  #bulkBarSpacer{display:block;height:var(--bulkbar-space,0px)}
  button,button.small{min-height:44px}
  button.icon{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;vertical-align:middle}
  select,input[type=text],input[type=number],input[type=time],input[type=password],input[type=search],input.search{min-height:44px}
  .bulkbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .bulkbar #selInfo{grid-column:span 2}
  .bulkbar button.small{min-width:0;white-space:nowrap}
  #mClose{min-width:44px;min-height:44px}
  nav{flex-basis:calc(100% + 24px + env(safe-area-inset-left) + env(safe-area-inset-right));margin-left:calc(-12px - env(safe-area-inset-left));margin-right:calc(-12px - env(safe-area-inset-right))}
}

/* ===== v1.1.3 上传进度/取消 ===== */
#uploadIndicator[hidden],#uploadList button[hidden],#upCancel[hidden],#uploadIndicator button[hidden]{display:none}
#uploadIndicator{position:sticky;top:var(--up-top,0px);z-index:10;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#eef5ff;border:1px solid #c8d6ec;border-radius:8px;padding:10px 12px;margin-bottom:12px;overflow-wrap:anywhere}
#uploadSummary{flex:1;min-width:0}
#uploadIndicator.has-errors{background:#fff0f0;border-color:#f5c2c2;color:#b33}
.up-indicator-actions{display:flex;gap:8px;flex-wrap:wrap}
#uploadList .up-row{flex-wrap:wrap;min-width:0}
#uploadList .nm{max-width:100%}
#uploadList .st{width:auto;flex:1 1 220px;overflow-wrap:anywhere}
#uploadList .bar{min-width:60px}
#uploadList button:disabled,#upStart:disabled{opacity:.5;cursor:default}
@media (max-width:640px){
  #uploadIndicator{flex-wrap:nowrap;gap:6px;padding:5px}
  #uploadSummary{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
  .up-indicator-actions{flex-shrink:0;flex-wrap:nowrap;gap:4px}
  #uploadIndicator button,#uploadList button{min-height:44px}
  #uploadIndicator button{min-width:44px;padding:6px 4px}
  #uploadList .st{flex-basis:100%}
  #mFoot:has(#upStart){flex-wrap:wrap}
}
