*{box-sizing:border-box}body{margin:0;background:#08096b;font-family:Arial,Helvetica,sans-serif;color:#fff;min-height:100vh}.page{padding:10px}.xat-wrap{max-width:1536px;margin:auto;background:linear-gradient(135deg,#061070,#071987 40%,#02064e);border:1px solid #111a86;border-radius:8px;box-shadow:inset 0 0 35px rgba(255,255,255,.08),0 10px 40px rgba(0,0,0,.55);padding:16px;display:grid;grid-template-columns:minmax(0,1fr) 365px;gap:18px;min-height:720px}.main{display:grid;grid-template-rows:minmax(420px,1fr) 74px 154px;gap:14px}.screen{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.55);border-radius:8px;background:linear-gradient(160deg,rgba(182,186,222,.72),rgba(82,95,189,.72)),var(--chat-bg,none);background-size:cover;background-position:center;box-shadow:inset 0 0 55px rgba(0,0,0,.25),0 8px 16px rgba(0,0,0,.45)}.screen:before{content:"xat";position:absolute;left:42%;top:46%;transform:translate(-50%,-50%);font-weight:900;font-size:92px;letter-spacing:-7px;color:rgba(255,255,255,.28);text-shadow:0 2px 0 rgba(0,0,0,.15)}.planet{position:absolute;width:240px;height:240px;right:120px;top:235px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#9eeeff,#54b7f3 50%,#2072c5);box-shadow:0 0 42px #7bdfff}.planet:before{content:"";position:absolute;width:420px;height:38px;background:linear-gradient(90deg,transparent,#ffc528,#ffe266,#ffbd36,transparent);left:-90px;top:105px;border-radius:50%;transform:rotate(-16deg);filter:blur(.5px)}.crown{position:absolute;right:240px;top:205px;font-size:64px;transform:rotate(-8deg)}.welcome{position:relative;z-index:2;font-size:28px;font-weight:700;color:#050505;padding:34px 34px;line-height:1.5}.messages{position:absolute;left:20px;right:20px;bottom:52px;max-height:55%;overflow:auto;z-index:4;padding-right:10px}.msg{font-size:18px;padding:6px 8px;margin:4px 0;background:rgba(0,0,60,.14);border-radius:8px;backdrop-filter:blur(2px)}.msg b{text-shadow:1px 1px #000}.input-strip{position:absolute;left:0;bottom:0;width:330px;height:48px;background:rgba(235,239,255,.28);border-top:1px solid rgba(255,255,255,.65);border-right:1px solid rgba(255,255,255,.65);border-radius:0 0 0 8px;display:flex;align-items:center;gap:10px;padding:8px 12px;color:#111;font-size:24px}.input-strip input{flex:1;background:transparent;border:0;outline:0;font-size:22px}.send-corner{position:absolute;left:330px;bottom:0;width:52px;height:48px;background:rgba(235,239,255,.35);border-left:1px solid rgba(0,0,0,.35);display:grid;place-items:center;color:#000;font-size:24px;cursor:pointer}.emoji-row{display:flex;align-items:center;gap:13px;overflow:auto;padding:8px 4px}.emoji{min-width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:43px;cursor:pointer;filter:drop-shadow(0 2px 1px #000);transition:.15s}.emoji:hover{transform:scale(1.18) rotate(-7deg)}.bottom{display:grid;grid-template-columns:1fr 66px;gap:18px}.radio-box{border:1px solid rgba(255,255,255,.5);border-radius:9px;background:linear-gradient(160deg,rgba(196,200,230,.72),rgba(87,98,177,.82));box-shadow:inset 0 0 35px rgba(255,255,255,.1);display:grid;place-items:center;text-align:center;font-size:28px}.radio-small{font-size:20px;color:#111}.radio-logo{font-weight:800}.radio-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}.radio-controls button,.radio-controls input{font-size:16px}.return-btn{border-radius:10px;background:linear-gradient(#071ac7,#050568);display:grid;place-items:center;font-size:34px}.side{display:grid;grid-template-rows:1fr 226px;gap:18px}.user-panel{border:1px solid rgba(255,255,255,.55);border-radius:8px;background:linear-gradient(160deg,rgba(188,190,222,.78),rgba(80,88,166,.74));position:relative;overflow:hidden;color:#111;padding:9px}.panel-title{height:43px;background:linear-gradient(#fff,#e6e6e6);border-radius:5px;border:1px solid #ddd;text-align:center;font-size:26px;font-weight:900;padding-top:5px}.online-list{padding:18px 0;font-size:25px;font-weight:800}.online-user{margin:10px 0}.role-dj{height:44px;border:1px solid #03033d;background:linear-gradient(#111ac7,#050568);border-radius:6px;color:white;text-align:center;font-size:26px;font-weight:900;padding:7px}.role-owner{height:44px;background:linear-gradient(#d88916,#8a3600);border-radius:6px;color:white;text-align:center;font-size:26px;font-weight:900;padding:7px;margin-top:10px}.tabs{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;font-size:26px;font-weight:900}.tabs div{padding:13px;border-top:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.14)}.side-bottom{display:grid;grid-template-columns:1fr;gap:14px}.icons{display:flex;align-items:center;justify-content:space-around;font-size:45px}.btn-big{height:70px;border:0;border-radius:10px;background:linear-gradient(#101ec5,#050568);box-shadow:inset 0 1px rgba(255,255,255,.25);color:white;font-size:30px;font-weight:900;cursor:pointer;text-decoration:none;display:grid;place-items:center}.xat-logo{font-size:52px;font-weight:900}.auth{max-width:430px;margin:60px auto;background:linear-gradient(#6e79d8,#17208d);padding:25px;border-radius:12px;border:2px solid #000}.auth input,.auth select{width:100%;padding:13px;margin:8px 0;border-radius:8px;border:1px solid #111}.auth button{width:100%;padding:13px;margin-top:10px;border:0;border-radius:8px;background:#0611a5;color:#fff;font-size:18px;font-weight:700}.admin-grid{max-width:900px;margin:20px auto;background:#111481;padding:20px;border-radius:12px}.admin-grid input,.admin-grid textarea{width:100%;padding:10px;margin:7px 0}.admin-grid button{padding:12px 20px}.notice{background:#fff;color:#111;padding:10px;border-radius:8px;margin:8px 0}@media(max-width:820px){.page{padding:0}.xat-wrap{grid-template-columns:1fr;gap:8px;padding:7px;min-height:100vh;border-radius:0}.main{grid-template-rows:58vh 64px auto}.side{grid-template-rows:260px auto}.welcome{font-size:16px;padding:14px}.screen:before{font-size:60px}.planet{width:140px;height:140px;right:30px;top:210px}.planet:before{width:260px;left:-55px;top:62px}.crown{right:115px;top:190px;font-size:38px}.emoji-row{gap:8px}.emoji{min-width:44px;height:44px;font-size:34px}.bottom{grid-template-columns:1fr}.return-btn{display:none}.radio-box{font-size:19px;min-height:110px}.user-panel{min-height:250px}.panel-title,.online-list,.role-dj,.role-owner,.tabs{font-size:18px}.btn-big{height:56px;font-size:22px}.icons{font-size:33px}.messages{bottom:48px}.msg{font-size:14px}.input-strip{width:82%;font-size:18px}.send-corner{left:82%;width:18%}}