:root{--bg:#090909;--card:#151515;--card2:#21180e;--gold:#c99a3d;--muted:#a9a9a9;--danger:#a53a3a}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#160d05 0,#090909 28%);color:#fff;font-family:Tahoma,Arial,sans-serif;direction:rtl}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:auto;padding:18px}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;background:#101010;border-bottom:1px solid #2f2417}
.brand{color:var(--gold);font-size:22px;font-weight:800}
.nav{display:flex;gap:7px;flex-wrap:wrap}
.nav a{padding:8px 11px;border-radius:9px;background:#1a1a1a;font-size:14px}
.nav a:hover{background:#2a2116}
.card{background:rgba(21,21,21,.98);border:1px solid #302519;border-radius:15px;padding:16px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.stat{font-size:30px;color:var(--gold);font-weight:800}
label{display:block;margin:8px 0 5px;color:#ddd}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid #3c3022;border-radius:9px;background:#0e0e0e;color:#fff}
textarea{min-height:100px}
button,.btn{display:inline-block;border:0;border-radius:9px;padding:10px 14px;background:var(--gold);color:#111;font-weight:700;cursor:pointer}
.btn.secondary{background:#2d2d2d;color:#fff}
.btn.danger{background:var(--danger);color:#fff}
.actions{display:flex;gap:7px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #292929;text-align:right;vertical-align:middle}
.small{font-size:13px;color:var(--muted)}
.flash{padding:11px;border-radius:9px;background:#193821;border:1px solid #286138;margin-bottom:14px}
.badge{display:inline-block;border-radius:999px;padding:4px 8px;background:#2a2116;color:#e9c56e;font-size:12px}
.badge.off{background:#331717;color:#f0a1a1}
.thumb{width:125px;height:65px;border-radius:8px;object-fit:cover}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(420px,100%);padding:24px;border-radius:18px;background:#151515;border:1px solid #3a2c19}
code{display:block;padding:10px;border-radius:8px;background:#0b0b0b;direction:ltr;text-align:left;overflow:auto}
@media(max-width:720px){.topbar{align-items:flex-start;flex-direction:column}.container{padding:12px}table{font-size:13px}}

.topbar{box-shadow:0 8px 24px rgba(0,0,0,.30)}
.card{box-shadow:0 10px 28px rgba(0,0,0,.20)}
.card h3{margin-top:0}
button,.btn{transition:.15s ease}
button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(201,154,61,.35);border-color:#c99a3d}
.hero{padding:22px;border-radius:18px;background:linear-gradient(135deg,#2d1b0c,#151515);border:1px solid #4b341b;margin-bottom:16px}
.hero h1{margin:0 0 8px;color:#ddb45e}
.empty{padding:30px;text-align:center;color:#999}

/* RaqmeTV Control — staging visual system */
:root{--bg:#090b10;--card:#141922;--card2:#1b222e;--gold:#efbc59;--muted:#9da8b7;--danger:#b8474e;--line:#293342}
body{min-height:100vh;background:radial-gradient(circle at 83% -13%,rgba(169,96,39,.28),transparent 34%),radial-gradient(circle at 7% 29%,rgba(38,57,73,.25),transparent 34%),#090b10;color:#f6f4f0;font-family:Tahoma,"Segoe UI",Arial,sans-serif;line-height:1.6}
.container{max-width:1380px;padding:30px 32px 64px}
.topbar{padding:11px max(28px,calc((100vw - 1380px)/2 + 32px));background:rgba(12,15,21,.94);border-bottom:1px solid rgba(239,188,89,.15);backdrop-filter:blur(18px);box-shadow:0 14px 34px rgba(0,0,0,.22)}
.brand{display:flex;align-items:center;gap:12px;color:#fff;font-size:19px;line-height:1.05;letter-spacing:.02em}
.brand strong,.brand small{display:block}
.brand small{margin-top:5px;color:var(--gold);font-size:9px;letter-spacing:.3em}
.brand-mark,.login-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:linear-gradient(135deg,#ffe39a,#c7882a 60%,#8e4b21);color:#1d150b;font-weight:900;box-shadow:0 8px 22px rgba(184,116,35,.25)}
.nav{gap:3px;align-items:center}
.nav a{background:transparent;color:#cbd2dc;padding:9px 13px;border:1px solid transparent;font-size:13px;font-weight:700;white-space:nowrap}
.nav a:hover,.nav a:focus-visible{background:#24212a;border-color:#6d5432;color:#fff;outline:none}
.nav .logout{color:#e6a9a9}
.page-heading{padding:24px 28px;margin-bottom:22px;border:1px solid rgba(239,188,89,.16);border-radius:20px;background:linear-gradient(115deg,rgba(129,72,35,.25),rgba(28,36,49,.82) 56%,rgba(20,25,34,.8));box-shadow:0 22px 48px rgba(0,0,0,.16)}
.eyebrow{display:block;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.23em;direction:ltr;text-align:right}
.page-heading h1{font-size:clamp(23px,3vw,34px);margin:6px 0 2px;color:#fff}
.page-heading p{margin:0;color:var(--muted);font-size:14px}
.card{background:linear-gradient(155deg,rgba(26,32,42,.98),rgba(17,22,30,.98));border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 14px 34px rgba(0,0,0,.16)}
.card .card{background:#111821;box-shadow:none;border-color:#303b49}
.card h3{color:#fff;font-size:18px;margin:0 0 18px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-head h3{margin:3px 0 0}
.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}
.stat-card{min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.stat-card .stat{font-size:42px;line-height:1;color:#fff}
.stat-card a{font-size:12px;color:var(--gold);font-weight:700}
.grid{gap:16px}
.small{color:var(--muted)}
input,select,textarea{background:#0d121a;border:1px solid #35404d;border-radius:10px;color:#fff;padding:11px 13px;min-height:43px}
input[type=checkbox]{min-height:0;accent-color:var(--gold)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(239,188,89,.28);border-color:var(--gold)}
label{font-weight:700;color:#dce2e9;font-size:13px;margin:11px 0 6px}
button,.btn{background:linear-gradient(135deg,#ffd982,#dda647);border:1px solid #e9b95f;color:#23180a;padding:10px 18px;font-weight:800;border-radius:10px}
.btn.secondary{background:#242d39;border-color:#394756;color:#f7f7f7}
.btn.danger{background:#75313a;border-color:#a94650;color:#fff}
.actions{align-items:center;gap:8px}
.badge{background:rgba(67,131,91,.2);color:#8fe0a9;border:1px solid rgba(105,200,139,.25);padding:5px 11px}
.badge.off{background:rgba(148,63,69,.18);color:#f2a4a9;border-color:rgba(188,77,83,.25)}
th{color:#aeb9c7;font-size:12px;font-weight:800;background:#111923}
td{border-color:#2a3441;font-size:13px}
tr:hover td{background:rgba(255,255,255,.025)}
.table-scroll{overflow-x:auto}
.table-scroll table{min-width:650px}
.flash{background:#143325;border-color:#337253;color:#d4f9df}
.login-wrap{background:radial-gradient(circle at 50% 16%,rgba(195,125,45,.22),transparent 40%),#090b10}
.login-card{width:min(450px,100%);background:#151b24;border-color:#394252;padding:32px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.login-mark{width:55px;height:55px;margin-bottom:18px}
.login-card h2{color:#fff;margin:0 0 8px}
code{background:#0b121a;border:1px solid #2f3947;color:#e9c37e}
@media(max-width:1000px){.topbar{flex-direction:column;align-items:stretch}.nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.container{padding:18px 14px 45px}.topbar{padding:11px 14px}.page-heading{padding:20px}.stats-grid{grid-template-columns:1fr}.card{padding:17px}.grid{grid-template-columns:1fr}.nav a{font-size:12px;padding:8px 10px}}

/* Final responsive admin / distributor workspace */
:root{--bg:#0b0d15;--card:#161a25;--line:#2c3142;--accent:#8069f4;--accent2:#4d78ee;--gold:#e4be71;--muted:#a2a8b9}
body{background:radial-gradient(circle at 62% -8%,rgba(78,67,149,.17),transparent 36%),#0b0d15}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-scrim{display:none}
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:24px 13px 18px;background:#121620;border-left:1px solid #2b3142;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:12px;padding:7px 10px 26px;border-bottom:1px solid var(--line);min-width:0}
.side-brand img{width:48px;height:48px;border-radius:13px;object-fit:contain;background:#1b1f2b;padding:5px}
.side-brand strong,.side-brand small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-brand strong{font-size:16px;color:#f4e7c8}.side-brand small{font-size:11px;color:var(--muted)}
.side-section{padding:24px 15px 9px;color:#71798e;font-size:11px;font-weight:800;letter-spacing:.06em}
.side-link{display:flex;align-items:center;gap:13px;margin:3px 0;padding:12px 14px;border-radius:12px;color:#b8bdcc;font-size:14px;font-weight:700;transition:background .16s,color .16s}
.side-link:hover,.side-link:focus-visible{background:#22283a;color:#fff;outline:none}
.side-link.active{background:linear-gradient(100deg,rgba(114,89,230,.34),rgba(73,90,171,.17));color:#c9beff;box-shadow:inset -3px 0 #8f7bff}
.side-icon{display:grid;place-items:center;width:24px;height:24px;flex:none;font-size:20px;line-height:1}
.side-bottom{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.workspace{min-width:0}
.topbar{position:sticky;top:0;z-index:10;display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:74px;padding:10px 32px;background:rgba(16,20,30,.91);border-bottom:1px solid #2b3142}
.topbar-title,.topbar-actions{display:flex;align-items:center;gap:14px}.topbar-title{font-weight:800;font-size:16px}.topbar-logo{width:36px;height:36px;object-fit:contain}.role-chip{padding:6px 12px;border-radius:999px;background:#22273a;color:#c5cce0;font-size:12px}
.menu-button{display:none;cursor:pointer;font-size:23px;line-height:1}
.container{max-width:1500px;margin:auto;padding:30px 34px 60px}
.page-heading{background:radial-gradient(circle at 95% 0,rgba(97,79,206,.18),transparent 36%),linear-gradient(125deg,#191d2b,#111825);border-color:#30374c}
.eyebrow{color:#af9eff}
.card{background:linear-gradient(145deg,#191d29,#131722);border-color:#2e3446}
.card .card{background:#151a26}
button,.btn{background:linear-gradient(115deg,#a590fa,#6568ee);border-color:#9182f5;color:#fff;box-shadow:0 6px 24px rgba(112,95,235,.14)}
.btn.secondary{background:#262d3c;border-color:#3b465b;color:#eef0f6;box-shadow:none}
.btn.danger{background:#67323f;border-color:#985062;box-shadow:none}
input,select,textarea{background:#121723;border-color:#354056}
input:focus,select:focus,textarea:focus{outline-color:rgba(142,118,244,.3);border-color:#a38afa}
.stat-card{border-top:2px solid #8069f4}
.stat-card a{color:#c2afff}
.badge{background:#1b3930;border-color:#356752;color:#91dfbb}
.badge.off{background:#41242d;border-color:#754250;color:#f1a6ad}
code{color:#bec8de;border-color:#333b51}
.hosts-panel{max-width:1100px;margin-inline:auto}
.hosts-panel .section-head{margin-bottom:22px}.hosts-panel .section-head h3{font-size:23px;margin:3px 0}.hosts-panel .section-head p{margin:0}
.count-pill{white-space:nowrap;border:1px solid #594da1;border-radius:999px;color:#ae9fff;background:#22213c;padding:6px 13px;font-size:13px;font-weight:800}
.hosts-panel input[type=search]{margin-bottom:15px;min-height:50px}
.add-host{margin-bottom:18px}.add-host summary{display:inline-block;list-style:none;cursor:pointer}.add-host summary::-webkit-details-marker{display:none}.add-host form{margin-top:14px;padding:18px;border-radius:14px;border:1px solid var(--line);background:#101521}
.host-list{border:1px solid #32384b;border-radius:15px;overflow:hidden}
.host-head,.host-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:15px 19px}
.host-head{color:#8f99ad;font-size:12px;font-weight:800;background:#151a26}
.host-row{border-top:1px solid #2d3445;min-height:94px}.host-row:hover{background:#1d2331}.host-row[hidden]{display:none}
.host-info{min-width:0}.host-info strong{display:block;font-size:15px}.host-info code{display:block;width:max-content;max-width:100%;padding:3px 0;border:0;background:transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.host-info .small{display:block}
.host-actions{display:flex;align-items:center;gap:12px}.host-actions .btn{padding:8px 12px}
.logo-setting{display:flex;align-items:center;gap:20px;margin-bottom:22px;padding:16px;border:1px solid var(--line);border-radius:14px}.logo-setting img{width:94px;height:94px;object-fit:contain;background:#0e1420;border-radius:16px;padding:8px}.logo-setting>div{flex:1;min-width:0}
@media(max-width:950px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:30;right:0;top:0;width:min(300px,84vw);transform:translateX(105%);transition:transform .2s;box-shadow:-25px 0 60px rgba(0,0,0,.35)}.nav-toggle:checked~.shell .sidebar{transform:translateX(0)}.nav-toggle:checked~.nav-scrim{display:block;position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.62)}.menu-button{display:block}.topbar{padding:12px 20px}.container{padding:22px 20px 50px}}
@media(max-width:600px){.topbar{min-height:64px;padding:10px 15px}.topbar-title{font-size:14px}.role-chip{display:none}.container{padding:16px 12px 45px}.page-heading{padding:20px}.hosts-panel .section-head{align-items:flex-start}.host-head{display:none}.host-row{grid-template-columns:1fr;gap:10px;padding:17px}.host-actions{justify-content:space-between}.logo-setting{align-items:flex-start;gap:12px}.logo-setting img{width:64px;height:64px}.stats-grid{grid-template-columns:1fr}}
.app-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}.app-card-head{display:flex;align-items:center;gap:15px;margin-bottom:14px}.app-card-head img{width:66px;height:66px;object-fit:contain;border-radius:15px;background:#0d121e;padding:7px}.app-card-head h3{margin:0 0 6px}.app-card .actions{margin-top:18px}
.app-table-name{display:flex;align-items:center;gap:10px}.app-table-name img{width:40px;height:40px;object-fit:contain;border-radius:10px;background:#0e1320;padding:4px}
@media(max-width:720px){.responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}.responsive-table>tbody>tr:first-child{display:none}.responsive-table tr:not(:first-child){margin:0 0 13px;padding:9px 13px;border:1px solid #32394c;border-radius:13px;background:#141a27}.responsive-table td{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:45px;padding:9px 2px;border-bottom:1px solid #293143;overflow-wrap:anywhere}.responsive-table td:last-child{border-bottom:0;display:block}.responsive-table td::before{content:attr(data-label);font-size:12px;color:#8993a8;white-space:nowrap}.responsive-table td:last-child::before{display:block;margin:0 0 8px}.responsive-table code{max-width:65vw}.responsive-table .actions{justify-content:flex-start}}