@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
:root{color-scheme:dark;--bg:#0b1426;--card:#141f33;--line:#2a3446;--cream:#f3e8d3;--muted:#a8afbc;--accent:#efb34f}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 20%,#23334a 0,transparent 50%),var(--bg);color:var(--cream);font-family:Tajawal,Arial,sans-serif}header,main,footer{max-width:1280px;margin:auto}header{height:108px;display:flex;align-items:center;gap:32px;padding:0 40px;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.brand{font:bold 23px Arial;letter-spacing:2px}.brand b{color:var(--accent);font-size:12px}.mark{color:var(--accent);font-size:35px;vertical-align:middle}.badge{color:var(--muted);font-size:14px}header button{margin-inline-start:auto}main{padding:70px 40px;display:grid;grid-template-columns:1.1fr 1fr;gap:60px}.eyebrow{font-size:13px;color:var(--accent);letter-spacing:1px}h1{font-size:64px;line-height:1.16;margin:22px 0;font-weight:800}em{font-style:normal;color:var(--accent)}p{color:var(--muted);line-height:1.9}h2{font-size:26px;margin:15px 0 25px}.panel{align-self:start;background:linear-gradient(145deg,#1d2a40,#121c2f);padding:36px;border:1px solid #354056;border-radius:24px;box-shadow:0 30px 80px #0003}.tabs{display:flex;background:#0b1426;border-radius:12px;padding:5px;margin:24px 0}.tabs button{flex:1;background:transparent;border:0}.tabs .active{background:#2b3548;color:var(--cream)}button,input{font:inherit}button{border:1px solid var(--line);border-radius:9px;background:#202c40;color:var(--cream);padding:12px 18px;cursor:pointer}button:hover,button:focus-visible{border-color:var(--accent);outline:2px solid #efb34f66}button:disabled{opacity:.5;cursor:wait}.primary{background:var(--accent);border:0;color:#172135;font-weight:800;width:100%;margin-top:12px}label{display:block;font-size:14px;margin:18px 0}input{width:100%;display:block;border:1px solid #3b4559;background:#0d1728;border-radius:10px;color:var(--cream);padding:15px;margin-top:9px;outline:none}input:focus{border-color:var(--accent)}#code{text-align:center;letter-spacing:7px;font-size:30px}.text{border:0;background:transparent;color:var(--muted);font-size:13px}.fine{font-size:12px}.steps{display:flex;gap:22px;margin:30px 0;color:var(--accent);font-size:12px}.steps b{color:var(--cream);display:block;margin-top:8px;font-size:14px}.tv{max-width:460px;padding:25px;border:5px solid #354056;border-radius:18px;background:#0b1426;transform:perspective(1000px) rotateY(-6deg);box-shadow:0 15px 30px #0004}.tv>span{font:12px Arial;letter-spacing:3px;color:var(--accent)}.tv>div{display:flex;gap:10px;margin:25px 0 12px}.tv i{font-style:normal;background:#1b2940;flex:1;border-radius:9px;padding:15px 5px;text-align:center;font-size:25px;color:var(--accent)}.tv small{display:block;color:var(--cream);font-size:11px;margin-top:10px}#notice{margin-top:18px;line-height:1.7;color:var(--accent);white-space:pre-wrap}#devicesSection{grid-column:1/-1}.sectionTitle{display:flex;justify-content:space-between;align-items:center}#devices{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px}.device{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:25px}.device h3{margin:0;font-size:23px}.device .status{color:var(--muted);font-size:12px;margin:10px 0}.device .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.danger{color:#ffad9e}footer{padding:25px 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}@media(max-width:800px){header{padding:0 22px;height:85px}.badge{display:none}main{grid-template-columns:1fr;padding:35px 22px;gap:30px}h1{font-size:46px}.tv{display:none}.panel{padding:25px}.intro p{margin-bottom:0}.steps{margin-bottom:0}footer{padding:25px 22px}}