*{box-sizing:border-box}body{margin:0;background:#020617;color:#e5e7eb;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body.login-page{background:#050910;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}a{color:#22c55e;text-decoration:none}header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#020617;border-bottom:1px solid #111827;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:8px}.badge,.logo-badge{border-radius:999px;background:radial-gradient(circle at 30% 0%,#bbf7d0,#22c55e);display:flex;align-items:center;justify-content:center;color:#022c22}.badge{width:28px;height:28px;font-size:16px}.logo-badge{width:32px;height:32px;font-weight:700}.subtitle,.emp-line,.small,.meta,.live-meta{font-size:12px;color:#9ca3af}.logout-btn,.back,.btn-gallery,.view-link,.btn-secondary{font-size:12px;border-radius:999px;padding:6px 10px;border:1px solid #1f2937;display:inline-flex;align-items:center;gap:6px}.logout-btn{color:#9ca3af}.logout-btn:hover{border-color:#ef4444;color:#fecaca}.back:hover,.btn-gallery:hover,.btn-secondary:hover{border-color:#22c55e;color:#bbf7d0}main{padding:16px}.stats-box{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}.stat-item{background:#111827;padding:8px 14px;border-radius:8px;font-size:14px;border:1px solid #1f2937}.stat-online{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.5);color:#bbf7d0}.stat-offline{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#fecaca}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.card{background:#020617;border-radius:12px;border:1px solid #111827;overflow:hidden;display:flex;flex-direction:column}.card-header{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #111827}.name{font-size:14px;font-weight:600}.status{font-size:11px;padding:2px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}.online{background:rgba(34,197,94,.15);color:#bbf7d0;border:1px solid rgba(34,197,94,.6)}.offline{background:rgba(248,113,113,.12);color:#fecaca;border:1px solid rgba(239,68,68,.5)}.card-body{padding:10px 12px 12px}.live-thumb{width:100%;border-radius:8px;border:1px solid #111827;max-height:150px;object-fit:cover;margin:10px 0}.login-card{background:#0f172a;padding:24px;border-radius:12px;width:100%;max-width:360px;box-shadow:0 20px 40px rgba(0,0,0,.6)}h1{font-size:16px;margin:0 0 8px}.login-card h1{font-size:20px;margin-bottom:4px}.login-card p{margin-top:0;color:#9ca3af;font-size:13px}label{font-size:13px;color:#9ca3af;display:block;margin-bottom:4px}input,textarea{width:100%;padding:8px;border-radius:8px;border:1px solid #1f2937;background:#020617;color:#e5e7eb;font-size:12px}body.login-page input{padding:12px;font-size:15px;margin-bottom:14px}input:focus,textarea:focus{outline:none;border-color:#22c55e;box-shadow:0 0 0 1px rgba(34,197,94,.4)}button{padding:6px 10px;border-radius:999px;border:none;background:#22c55e;color:#02140b;font-size:12px;font-weight:500;cursor:pointer}body.login-page button{width:100%;padding:12px;border-radius:8px;font-size:15px}button:hover{background:#16a34a}.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fecaca;padding:10px;border-radius:8px;font-size:13px;margin-bottom:12px}.logo{display:flex;align-items:center;gap:10px;margin-bottom:18px}table{width:100%;border-collapse:collapse;font-size:12px}th,td{border-bottom:1px solid #111827;padding:6px}th{color:#9ca3af;font-weight:500}.pill{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid #1f2937;color:#9ca3af}.pill-online{border-color:rgba(34,197,94,.6);color:#bbf7d0;background:rgba(34,197,94,.12)}.pill-offline{border-color:rgba(248,113,113,.6);color:#fecaca;background:rgba(248,113,113,.12)}.live-box,.chart-box{background:#020617;border-radius:12px;border:1px solid #111827;padding:10px;margin-bottom:14px}.live-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.live-img{width:100%;max-height:420px;object-fit:contain;border-radius:8px;border:1px solid #111827;background:#020617;cursor:pointer}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;padding:10px}.shot{background:#020617;border:1px solid #111827;border-radius:8px;padding:4px;cursor:pointer;font-size:11px;color:#9ca3af}.shot img{width:100%;height:120px;object-fit:cover;border-radius:6px;margin-bottom:4px}#modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;align-items:center;justify-content:center}#modal img{max-width:95%;max-height:95%;border-radius:12px}#modal-close{position:absolute;top:15px;right:15px;cursor:pointer;font-size:24px;color:#e5e7eb}


body{background:radial-gradient(circle at top left,rgba(34,197,94,.12),transparent 30%),#020617}.app-header{backdrop-filter:blur(16px);background:rgba(2,6,23,.82)}.brand-title{font-size:14px;font-weight:700;letter-spacing:.02em}.header-actions{display:flex;gap:10px;align-items:center}.hero-panel,.detail-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:18px;padding:18px;border:1px solid rgba(148,163,184,.14);border-radius:18px;background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(2,6,23,.72));box-shadow:0 20px 60px rgba(0,0,0,.28)}.eyebrow{margin:0 0 6px;color:#86efac;text-transform:uppercase;letter-spacing:.12em;font-size:11px}.hero-panel h1,.detail-hero h1{font-size:24px;margin:0 0 4px}.stats-box{margin:0}.stat-item{cursor:pointer;color:#e5e7eb;display:flex;gap:8px;align-items:center;transition:.18s ease;background:rgba(15,23,42,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.stat-item:hover,.stat-item.active{transform:translateY(-1px);border-color:#22c55e;box-shadow:0 12px 30px rgba(34,197,94,.12)}.section-title{margin:4px 0 12px;color:#cbd5e1;font-size:13px}.grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.card{background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(2,6,23,.98));border-color:rgba(148,163,184,.14);box-shadow:0 16px 40px rgba(0,0,0,.24);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.card:hover{transform:translateY(-3px);border-color:rgba(34,197,94,.45);box-shadow:0 24px 55px rgba(0,0,0,.34)}.card-header{padding:14px}.status span{width:8px;height:8px;border-radius:999px;background:currentColor}.card-body{padding:14px}.meta-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#94a3b8;margin-bottom:10px}.meta-row b{color:#e2e8f0;font-weight:600;text-align:right}.info-box{min-height:48px;line-height:1.5}.thumb-wrap{position:relative;margin:12px 0;border-radius:14px;overflow:hidden;background:#050915;border:1px solid rgba(148,163,184,.14);min-height:210px;display:flex;align-items:center;justify-content:center}.live-thumb{height:220px;max-height:none;margin:0;border:0;border-radius:0;object-fit:cover}.thumb-wrap.is-offline .live-thumb{filter:brightness(.42) saturate(.8)}.offline-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(127,29,29,.28);color:#fecaca;font-size:34px;font-weight:900;letter-spacing:.18em;text-shadow:0 4px 18px rgba(0,0,0,.8)}.thumb-placeholder{width:100%;height:220px;display:flex;align-items:center;justify-content:center;color:#64748b}.hidden{display:none!important}.view-link{width:100%;justify-content:center;padding:10px 12px;background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.28)}.detail-main{padding:16px;max-width:1800px;margin:0 auto}.detail-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}.detail-meta{margin-top:8px}.live-box-large{padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(2,6,23,.95));border-color:rgba(148,163,184,.16)}.live-header b{display:block}.live-header .subtitle{display:block;margin-top:2px}.live-img{height:calc(100vh - 245px);min-height:460px;max-height:none;background:#050915;border-color:rgba(148,163,184,.16)}.live-meta{padding-top:10px}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:16px}.shot{background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(2,6,23,.98));border-color:rgba(148,163,184,.14)}.shot img{height:150px}@media(max-width:720px){main,.detail-main{padding:12px}.grid{grid-template-columns:1fr}.header-actions{gap:6px}.hero-panel,.detail-hero{padding:14px;align-items:flex-start}.stats-box{width:100%;display:grid;grid-template-columns:1fr}.detail-actions{align-items:flex-start}.live-img{height:62vh;min-height:300px}.thumb-wrap,.thumb-placeholder{min-height:180px}.live-thumb,.thumb-placeholder{height:180px}.offline-watermark{font-size:26px}.btn-secondary{display:none}}
.dashboard-main{max-width:1480px;margin:0 auto;width:100%}.empty-state{border:1px dashed rgba(148,163,184,.28);border-radius:18px;background:rgba(15,23,42,.58);color:#cbd5e1;display:flex;align-items:center;justify-content:center;min-height:180px;margin:16px 0;padding:24px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.stat-item b{font-size:18px;line-height:1}.stat-item span{color:#cbd5e1}.stat-item.active span{color:#fff}.thumb-wrap.is-offline .thumb-placeholder{filter:brightness(.72);color:#cbd5e1}.btn-gallery{opacity:.78;background:rgba(15,23,42,.55)}.btn-gallery:hover{opacity:1}.app-header{padding-left:max(16px,calc((100vw - 1480px)/2 + 16px));padding-right:max(16px,calc((100vw - 1480px)/2 + 16px))}
.toolbar-panel{margin:0 0 14px;padding:12px;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:linear-gradient(135deg,rgba(15,23,42,.82),rgba(2,6,23,.68));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.search-wrap{display:flex;align-items:center;gap:10px;margin:0;color:#86efac}.search-wrap input{height:42px;border-radius:14px;background:rgba(2,6,23,.85);border-color:rgba(148,163,184,.20);font-size:14px}.url-text{display:inline-block;max-width:100%;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#93c5fd}.btn-focus{border:1px solid rgba(34,197,94,.38);background:rgba(34,197,94,.14);color:#bbf7d0}.btn-focus:hover{background:rgba(34,197,94,.24)}.live-stage{position:relative;border-radius:10px;overflow:hidden;background:#050915}.mouse-cursor{position:absolute;width:18px;height:18px;border:2px solid #fff;border-radius:999px;background:radial-gradient(circle,rgba(34,197,94,.95) 0 30%,rgba(34,197,94,.28) 31% 100%);box-shadow:0 0 18px rgba(34,197,94,.95),0 0 3px rgba(0,0,0,.9);transform:translate(-50%,-50%);pointer-events:none;z-index:3}.activity-panel{background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(2,6,23,.94));border:1px solid rgba(148,163,184,.16);border-radius:18px;padding:14px;margin-bottom:18px}.activity-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.activity-head b{display:block}.activity-list{display:flex;flex-direction:column;gap:8px}.activity-item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:14px;background:rgba(15,23,42,.62);border:1px solid rgba(148,163,184,.10)}.activity-item b,.activity-item span{display:block}.activity-item span{font-size:12px;color:#94a3b8;max-width:900px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-time{text-align:right;min-width:150px}.activity-time b{color:#bbf7d0}.focus-mode{overflow:hidden;background:#000}.focus-mode .focus-hide{display:none!important}.focus-mode .detail-main{max-width:none;padding:0;height:100vh}.focus-mode .live-box-large{height:100vh;margin:0;border:0;border-radius:0;padding:8px;background:#000}.focus-mode .live-header{position:absolute;top:10px;left:10px;right:10px;z-index:4;padding:8px 10px;border-radius:12px;background:rgba(2,6,23,.58);backdrop-filter:blur(12px)}.focus-mode .live-stage{height:calc(100vh - 16px);border-radius:0}.focus-mode .live-img{height:100%;min-height:0;border:0;border-radius:0}.focus-mode .live-meta{display:none}@media(max-width:720px){.activity-item{flex-direction:column}.activity-time{text-align:left}.toolbar-panel{padding:10px}.search-wrap input{height:38px}}

.btn-stream{border:1px solid rgba(250,204,21,.42);background:rgba(250,204,21,.14);color:#fde68a}.btn-stream:hover,.btn-stream.active{background:rgba(250,204,21,.26);border-color:rgba(250,204,21,.75);color:#fef3c7}.btn-stream.active{box-shadow:0 0 0 1px rgba(250,204,21,.16),0 10px 24px rgba(250,204,21,.10)}