:root{
  --bg:#0f1216; --card:#171c22; --card2:#1d242c; --line:#2a333d;
  --txt:#e8edf2; --muted:#8b98a6; --primary:#2f81f7; --ok:#2ecc71;
  --warn:#f0b429; --err:#ef5350; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  padding:18px; max-width:860px; margin:0 auto;
}
h1,h2,h3{margin:0 0 6px; font-weight:650}
h2{font-size:17px} h3{font-size:16px}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:14px}
.row{display:flex; align-items:center}
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end}
.row.gap{gap:8px}
.field{margin:12px 0}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px}
input,textarea,select{
  width:100%; background:var(--card2); color:var(--txt); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; font:inherit; outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--primary)}
textarea{resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px}
button{
  background:var(--card2); color:var(--txt); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px; font:inherit; cursor:pointer;
}
button:hover{border-color:#3d4b5a}
button.primary{background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600}
button.primary:hover{background:#4a92f8}
button.ghost{background:transparent}
button.small{padding:6px 10px; font-size:13px}
button.danger{color:var(--err); border-color:#4a2b2b}
button:disabled{opacity:.5; cursor:not-allowed}
a.link{color:var(--primary); text-decoration:none; padding:6px 10px}

.login{min-height:70vh; display:grid; place-items:center}
.login-card{width:100%; max-width:360px}
.login-card h1{font-size:20px}
.login-card input{margin:14px 0}
.login-card button{width:100%}
.err{color:var(--err); font-size:13px; min-height:18px; margin:6px 0 0}

.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.brand{display:flex; align-items:center; gap:8px}
.dot{width:9px; height:9px; border-radius:50%; background:#4a5563; display:inline-block}
.dot.live{background:var(--ok); box-shadow:0 0 0 0 rgba(46,204,113,.7); animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
.chip{font-size:12.5px; padding:4px 10px; border-radius:999px; background:#2a3138; color:var(--muted)}
.chip.live{background:rgba(46,204,113,.15); color:var(--ok)}

.copyline{display:flex; align-items:center; gap:8px; background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.copyline code{flex:1; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; overflow-x:auto; white-space:nowrap}

.targets{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.target{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:12px}
.target .head{display:flex; align-items:center; gap:8px; justify-content:space-between}
.target .name{font-weight:600}
.target .url{font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--muted); word-break:break-all; margin:6px 0}
.target .ops{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.badge{font-size:11.5px; padding:2px 8px; border-radius:999px; background:#2a3138; color:var(--muted)}
.badge.running{background:rgba(46,204,113,.16); color:var(--ok)}
.badge.starting,.badge.retrying{background:rgba(240,180,41,.16); color:var(--warn)}
.badge.failed{background:rgba(239,83,80,.16); color:var(--err)}
.badge.stopped{background:#2a3138; color:var(--muted)}
.log{font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--muted); margin-top:6px; max-height:44px; overflow:hidden}

.empty{color:var(--muted); font-size:13.5px; text-align:center; padding:18px 0}
.history{list-style:none; padding:0; margin:8px 0 0; font-size:13px}
.history li{padding:7px 0; border-bottom:1px solid var(--line); color:var(--muted); display:flex; gap:10px}
.history li:last-child{border-bottom:0}
.history time{color:#5f6c7b; font-variant-numeric:tabular-nums; flex:none}

dialog{border:1px solid var(--line); background:var(--card); color:var(--txt); border-radius:16px; padding:20px; width:min(520px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.platforms{display:flex; flex-wrap:wrap; gap:6px}
.platforms button{padding:6px 10px; font-size:13px}
.platforms button.active{border-color:var(--primary); color:var(--primary)}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:#243040; border:1px solid var(--line); color:var(--txt); padding:10px 16px; border-radius:10px;
  opacity:0; pointer-events:none; transition:.22s; font-size:13.5px; max-width:88vw}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{border-color:#5a2b2b; color:#ffb4b2}

/* ============ 手机适配 ============ */
@media (max-width: 640px){
  body{padding:12px 12px 28px; font-size:15px}

  /* 顶部栏：标题和按钮分两行 */
  .topbar{flex-wrap:wrap; gap:10px; margin-bottom:12px}
  .brand{font-size:15px; flex:1 1 100%}
  .topbar .actions{flex:1 1 100%; display:flex; gap:8px}
  .topbar .actions button{flex:1}

  .card{padding:14px; border-radius:12px}

  /* 卡片头部：标题一行，按钮换到下一行并平分 */
  .card .row.between{flex-wrap:wrap; gap:10px}
  .card .row.between > div:first-child{flex:1 1 100%}
  .card .row.between > .row.gap{flex:1 1 100%; display:flex; gap:8px}
  .card .row.between > .row.gap button{flex:1; padding:9px 6px; font-size:13px; white-space:nowrap}
  .card .row.between > .row.gap button.primary{flex:1.2}

  /* 状态标签：绝对定位到右上角，不占行 */
  .card > .row.between{position:relative; padding-right:76px}
  .card > .row.between > .chip{
    position:absolute; top:0; right:0;
    white-space:nowrap; font-size:12px; padding:4px 9px;
  }
  /* 有按钮的那一行不用预留 */
  .card > .row.between:has(.row.gap){padding-right:0}

  /* 地址行：地址和按钮同一行，地址可换行 */
  .copyline{flex-wrap:nowrap; align-items:flex-start; padding:10px}
  .copyline code{
    flex:1 1 auto; min-width:0; white-space:normal; word-break:break-all;
    font-size:12px; line-height:1.55;
  }
  .copyline button, .copyline a.link{
    flex:0 0 auto; font-size:13px; padding:7px 12px; white-space:nowrap;
  }

  /* 目标卡片 */
  .target .head{flex-wrap:wrap}
  .target .ops{gap:8px}
  .target .ops button{flex:1 1 auto; min-width:calc(50% - 4px); padding:9px 8px}

  /* 历史记录：时间单独一行 */
  .history li{flex-direction:column; gap:2px; padding:9px 0}
  .history time{font-size:11.5px}

  /* 弹窗全屏化 */
  dialog{width:100vw; max-width:100vw; margin:0; border-radius:16px 16px 0 0;
         position:fixed; bottom:0; top:auto; padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  dialog[open]{animation:slideUp .22s ease-out}
  @keyframes slideUp{from{transform:translateY(30px); opacity:.6} to{transform:translateY(0); opacity:1}}
  dialog .row.end.gap button{flex:1}

  input, textarea, select{font-size:16px} /* 防止 iOS 自动放大 */
  .field{margin:14px 0}
}

/* 超窄屏（iPhone SE 等） */
@media (max-width: 380px){
  .card .row.between > .row.gap button{font-size:12px; padding:8px 4px}
  .target .ops button{min-width:100%}
}

/* ============ 推流 / 拉流 两张卡片的视觉区分 ============ */
.card-push{border-left:3px solid #f0b429}
.card-pull{border-left:3px solid #2f81f7}

.tag{
  display:inline-block; font-size:11.5px; font-weight:600;
  padding:2px 8px; border-radius:6px; margin-right:8px;
  vertical-align:middle; position:relative; top:-1px;
}
.tag-push{background:rgba(240,180,41,.16); color:#f0b429}
.tag-pull{background:rgba(47,129,247,.16); color:#5aa3ff}

/* 拉流卡片里三个地址靠紧一点，一眼能对比 */
.card-pull .field{margin:10px 0}

@media (max-width: 640px){
  .card-push,.card-pull{border-left-width:3px}
  .tag{font-size:11px; padding:2px 7px; margin-right:6px}
}

/* 目标卡片：实时码率 */
.target .meta{margin-top:6px; display:flex; align-items:center; gap:8px}
.target .bitrate{
  font-family:ui-monospace,Menlo,monospace; font-size:12.5px;
  color:#2ecc71; background:rgba(46,204,113,.12);
  padding:2px 8px; border-radius:6px;
}
.target .bitrate.low{color:#f0b429; background:rgba(240,180,41,.12)}
.target .failmsg{font-size:12px; color:#ef5350}

/* 用量与状态 */
.sysgrid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin-top:14px;
}
.sysitem{
  background:var(--card2); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px;
}
.syslabel{display:block; font-size:11.5px; color:var(--muted); margin-bottom:4px}
.sysitem strong{font-size:15px; font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .sysgrid{grid-template-columns:repeat(2,1fr); gap:8px}
  .sysitem{padding:9px 10px}
  .sysitem strong{font-size:14px}
}