:root{--o:#ff8a00;--n:#061326;--l:#294f78;--t:#eef6ff;--m:#9ab7d8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 10%,#102f5b,transparent 32%),#020a17;color:var(--t);font:700 16px Inter,Arial,sans-serif}.app{display:grid;grid-template-columns:340px 1fr;min-height:100vh}aside{display:flex;flex-direction:column;padding:23px 22px;background:#051325eF;border-right:1px solid #1e3b5c;box-shadow:20px 0 40px #0008}.brand{display:flex;gap:16px;align-items:center;padding:0 11px 27px;border-bottom:1px solid #1c3a59}.brand img{height:72px;width:72px;filter:drop-shadow(0 0 14px #ff8500aa)}.brand b{font-size:30px;letter-spacing:.5px}.brand b span,h1 span{color:#ffc05a}.brand small,.online small{display:block;margin-top:5px;color:#7fa4d0;font-size:12px;font-weight:600}nav{padding:16px 0;overflow:auto}.nav{width:100%;border:0;border-radius:15px;padding:11px 18px;display:flex;align-items:center;gap:18px;text-align:left;background:transparent;color:#c7d9ef;font:700 16px Inter;cursor:pointer}.nav:hover,.nav.active{color:#fff;background:linear-gradient(90deg,#753400,#21172b);box-shadow:inset 0 0 0 1px var(--o),0 0 18px #ff760066}.ico{font-size:25px;color:var(--c);width:29px;text-align:center}.arr{margin-left:auto;color:#a7c9f1;font-size:25px;font-weight:400}.online{margin-top:auto;border:1px solid #1bd6a6;border-radius:18px;padding:15px 18px;display:flex;align-items:center;gap:15px;color:#1ff2a3;background:#06252a;box-shadow:0 0 20px #14d99a33}.online div{color:#fff}.online b{font-size:16px}.online em{margin-left:auto;font-size:27px;color:#3bf3c8}main{padding:28px 38px;min-width:0}header{height:52px;max-width:1050px;margin:0 auto 35px;display:flex;gap:17px;justify-content:end}header button{width:52px;border:1px solid #294561;border-radius:15px;background:#071426;color:#fff;font-size:24px}.avatar{border-radius:50%;border-color:var(--o);color:#ffcf68}.search{margin-right:auto;max-width:520px;flex:1;display:flex;align-items:center;gap:12px;padding:0 10px 0 19px;background:#071a33;border:1px solid #28608b;border-radius:14px;color:#d8ecff;font-size:29px}.search input{min-width:0;flex:1;border:0;outline:0;background:none;color:#fff;font:600 14px Inter}.search kbd{padding:5px 9px;border:1px solid #6588ad;border-radius:7px;font:600 13px Inter}#dash,#detail{max-width:900px;margin:auto;border:1px solid #e9791c;border-radius:23px;padding:29px 40px 12px;background:linear-gradient(115deg,#07172d,#07152a 65%,#2d190f);box-shadow:inset 0 0 0 2px #12304b,0 0 24px #f8782038;overflow:hidden;position:relative}#dash:after{content:"";position:absolute;right:-25px;top:-18px;width:280px;height:125px;background:repeating-linear-gradient(135deg,transparent 0 27px,#ff8500a5 29px 32px,transparent 34px 51px);transform:rotate(-5deg)}.hero{display:flex;gap:20px;align-items:center;position:relative;z-index:1;margin-bottom:23px}.hero i{display:grid;place-items:center;width:55px;height:55px;border:1px solid var(--o);border-radius:50%;font-size:38px;color:#ffb240;box-shadow:0 0 17px #ff850066}.hero h1{margin:0;font-size:29px}.hero p{margin:7px 0;color:#96bdf0;font-size:17px}.grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}.card{min-height:69px;padding:7px 15px;display:flex;align-items:center;gap:15px;border:1px solid var(--l);border-radius:15px;background:linear-gradient(100deg,#0b2342,#07172d);color:#fff;text-align:left;cursor:pointer}.card:hover{border-color:var(--o);transform:translateY(-2px)}.box{display:grid;place-items:center;flex:0 0 55px;height:55px;border:1px solid var(--o);border-radius:13px;background:#251a17;color:#ffc05b;font-size:28px;box-shadow:0 0 13px #ff840044}.card b{display:block;font-size:16px}.card small{display:block;color:#a8c4e8;font-size:12px;margin-top:4px}.go{margin-left:auto;font-size:29px;color:#c9e5ff;font-weight:400}footer{position:relative;z-index:1;text-align:center;padding:15px 0 0;color:#9ebae0;font-size:11px;letter-spacing:2.5px}#detail{min-height:550px}#detail button{padding:10px 14px;border:1px solid #3e709e;border-radius:10px;background:#102b4d;color:#fff;font:700 14px Inter}.panel h1{color:#ffc15b;font-size:29px}.panel p{color:var(--m)}textarea{width:100%;height:250px;padding:16px;border:1px solid var(--l);border-radius:13px;background:#030e1e;color:#fff;font:600 14px Inter}.run{margin-top:14px!important;background:linear-gradient(90deg,#ff7600,#ffc24f)!important;color:#111!important;border:0!important}@media(max-width:900px){.app{grid-template-columns:250px 1fr}aside{padding:18px 12px}.brand b{font-size:22px}.brand img{width:55px;height:55px}.nav{font-size:13px}main{padding:20px}.grid{gap:9px}}@media(max-width:650px){.app{grid-template-columns:70px 1fr}aside{padding:15px 7px}.brand{justify-content:center;padding-bottom:18px}.brand img{width:43px;height:43px}.brand div,.nav span:not(.ico),.online div,.online em{display:none}.nav{justify-content:center;padding:11px 4px}.online{justify-content:center;padding:10px}.online::first-letter{font-size:15px}main{padding:15px 10px}header button{display:none}.grid{grid-template-columns:1fr}#dash,#detail{padding:22px 15px;border-radius:16px}.hero h1{font-size:22px}.hero p{font-size:13px}}
