:root {
  --primary: #6366f1; --primary-hover: #4f46e5; --success: #22c55e;
  --bg: #f8fafc; --card-bg: #ffffff; --text: #1e293b; --text-secondary: #64748b;
  --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; padding:24px; }
.container { max-width:1200px; margin:0 auto; }
header { padding:32px 0; }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
header p { color:var(--text-secondary); margin-top:8px; }
.header-btn { flex-grow:0; flex-shrink:0; padding:5px 12px; font-size:0.8rem; white-space:nowrap; width:auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:20px; padding:16px 0; }

.card {
  background:var(--card-bg); border-radius:16px; padding:24px; box-shadow:var(--shadow);
  border:1px solid var(--border); display:flex; flex-direction:column; gap:16px; position:relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.card-offline { background:#f1f5f9; }
.card-offline:hover { transform:none; box-shadow:var(--shadow); }
.card-offline .card-icon { opacity:0.5; }
.card-offline .card-title { color:var(--text-secondary); }
.card-live { cursor:pointer; }

.card-header { display:flex; align-items:center; gap:12px; padding-right:80px; }
.card-icon {
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg, var(--primary), var(--primary-hover));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:1.2rem;
}
.card-title { font-size:1.25rem; font-weight:600; }
.card-roomid { font-size:0.8rem; color:var(--text-secondary); font-family:ui-monospace, monospace; word-break:break-all; }

.status-badge {
  position:absolute; top:20px; right:20px; padding:4px 10px; border-radius:20px;
  font-size:0.75rem; font-weight:600; display:flex; align-items:center; gap:6px; user-select:none;
  transition: background 0.2s, transform 0.1s;
}
.status-badge::before { content:''; width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-live { background:#dcfce7; color:#166534; }
.status-live::before { background:#22c55e; box-shadow:0 0 0 2px #bbf7d0; animation:pulse 2s infinite; }
.status-offline {
  background:var(--primary); color:#fff; cursor:pointer; padding:6px 14px;
  box-shadow:0 2px 8px rgba(99,102,241,0.3);
}
.status-offline::before { display:none; }
.status-offline:hover { background:var(--primary-hover); transform:scale(1.05); }
.status-offline:active { transform:scale(0.97); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

.card-actions { display:flex; gap:12px; margin-top:8px; }
.btn {
  padding:12px 16px; border:none; border-radius:10px; font-weight:500; font-size:0.95rem;
  cursor:pointer; transition:background 0.2s, transform 0.1s; display:flex; align-items:center;
  justify-content:center; gap:6px;
}
.btn:active { transform:scale(0.98); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#16a34a; }

.stream-url {
  background:#f1f5f9; border-radius:8px; padding:12px; font-family:ui-monospace, monospace;
  font-size:0.85rem; word-break:break-all; display:none; margin-top:8px; border:1px dashed var(--border);
}
.stream-url.show { display:block; animation:slideDown 0.2s ease; }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.copy-tip { font-size:0.8rem; color:var(--success); margin-top:6px; display:none; font-weight:500; }
.copy-tip.show { display:block; }

.error { text-align:center; padding:48px 24px; color:#ef4444; background:#fef2f2; border-radius:12px; border:1px solid #fecaca; }
.loading { text-align:center; padding:48px; color:var(--text-secondary); }
.loading::after { content:'...'; animation:dots 1.5s steps(4, end) infinite; }
@keyframes dots { 0%,20%{content:'.'} 40%{content:'..'} 60%,100%{content:'...'} }

@media(max-width:640px){ .grid{grid-template-columns:1fr} .card-actions{flex-direction:column} }
@media(max-width:480px){ .header-row{flex-direction:column;text-align:center} .modal{width:95%;margin:40px auto} }

/* 弹窗 */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000;
  display:none; align-items:center; justify-content:center;
  animation:fadeIn 0.15s ease;
}
.modal-overlay.show { display:flex; }
.modal {
  background:var(--card-bg); border-radius:var(--card-radius,16px); width:400px; max-width:92%;
  box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:slideUp 0.2s ease; overflow:hidden;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 0; font-size:1.1rem; font-weight:600;
}
.modal-close {
  background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--text-secondary);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px;
}
.modal-close:hover { background:var(--border); }
.modal-body { padding:20px 24px; }
.modal-body .input-group { display:flex; flex-direction:column; gap:6px; }
.modal-body .input-group label { font-size:0.85rem; color:var(--text-secondary); font-weight:500; }
.modal-body .input-group input {
  width:100%; padding:12px 16px; border-radius:10px; border:1px solid var(--border);
  font-size:0.95rem; outline:none; transition:border-color 0.2s;
  background:var(--bg); color:var(--text);
}
.modal-body .input-group input:focus { border-color:var(--primary); }
.modal-footer {
  display:flex; gap:12px; padding:0 24px 20px; justify-content:flex-end;
}
.modal-footer .btn { flex:0 0 auto; min-width:80px; }
.btn-outline {
  background:transparent; border:1px solid var(--border); color:var(--text);
}
.btn-outline:hover { background:var(--border); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }