:root { color-scheme: dark; --bg:#07090c; --panel:#11151a; --line:#303640; --ink:#f7f8fa; --muted:#9ca3ad; --brand:#ff6b00; --brand2:#ff8a33; --danger:#ff756b; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% 0,#241207 0,#090b0e 34%,#050607 72%); color:var(--ink); font-family:Inter,Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
a { color:var(--brand2); }
.topbar { min-height:76px; padding:0 max(24px,calc((100vw - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #1e232a; background:rgba(5,6,7,.86); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand strong { font-size:38px; letter-spacing:-4px; }
.brand span { color:var(--muted); font-size:10px; line-height:1.2; }
.shell { width:min(1160px,calc(100% - 32px)); margin:0 auto; padding:54px 0 80px; }
.auth-layout { min-height:calc(100vh - 210px); display:grid; grid-template-columns:1fr 460px; gap:70px; align-items:center; }
.intro h1,.portal-head h1 { margin:10px 0 18px; font-size:clamp(42px,7vw,82px); line-height:.95; letter-spacing:-.055em; }
.intro>p:last-child { max-width:600px; color:var(--muted); font-size:18px; line-height:1.6; }
.eyebrow { margin:0; color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.15em; }
.card,dialog { border:1px solid var(--line); border-radius:18px; background:rgba(16,19,24,.96); box-shadow:0 24px 90px rgba(0,0,0,.35); }
.auth-card,.new-ticket,.tickets-card { padding:28px; }
.tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:25px; padding:4px; background:#090b0e; border-radius:11px; }
.tab { min-height:44px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.tab.active { background:#20252c; color:var(--ink); }
form { display:grid; gap:16px; }
label { display:grid; gap:8px; color:#d7dbe0; font-size:13px; font-weight:700; }
label small { color:var(--muted); font-size:11px; font-weight:400; line-height:1.4; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:10px; background:#090c10; color:var(--ink); padding:13px 14px; outline:none; }
textarea { resize:vertical; line-height:1.45; }
input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,107,0,.15); }
.primary,.secondary,.link-button,.icon-button { border:0; cursor:pointer; font-weight:800; }
.primary { min-height:48px; padding:0 18px; border-radius:10px; background:var(--brand); color:#090b0e; }
.primary:hover { background:var(--brand2); }
.secondary { min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:10px; background:#171b21; color:var(--ink); }
.link-button { background:transparent; color:var(--brand2); padding:10px; }
.icon-button { width:40px; height:40px; border-radius:50%; background:#1b2027; color:var(--ink); font-size:25px; }
button:disabled { opacity:.55; cursor:wait; }
.code-row { display:grid; grid-template-columns:1fr 150px; gap:10px; align-items:end; }
.check { display:flex; grid-template-columns:auto 1fr; align-items:start; font-weight:400; line-height:1.4; }
.check input { width:18px; height:18px; margin:1px 0 0; }
.message { min-height:20px; margin:12px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }
.message.error { color:var(--danger); }
.portal-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:34px; }
.portal-head h1 { font-size:clamp(38px,6vw,68px); margin-bottom:0; }
.identity { text-align:right; display:grid; gap:5px; }
.identity span { font-size:20px; font-weight:800; }
.identity small { color:var(--muted); }
.portal-grid { display:grid; grid-template-columns:420px 1fr; gap:22px; align-items:start; }
.new-ticket h2,.tickets-card h2,dialog h2 { margin:8px 0 22px; font-size:28px; }
.section-title,.thread-head,.reply-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ticket-list { display:grid; gap:10px; }
.ticket { width:100%; padding:16px; border:1px solid var(--line); border-radius:12px; background:#0b0e12; color:var(--ink); text-align:left; cursor:pointer; }
.ticket:hover { border-color:#59616e; }
.ticket-top { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; }
.ticket strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ticket small,.ticket-meta { color:var(--muted); font-size:11px; }
.ticket-meta { display:flex; justify-content:space-between; gap:12px; }
.badge { color:var(--brand2); }
.empty { color:var(--muted); text-align:center; padding:35px 10px; }
dialog { width:min(760px,calc(100% - 24px)); max-height:90vh; padding:26px; color:var(--ink); }
dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(3px); }
.thread-messages { display:flex; flex-direction:column; gap:12px; max-height:48vh; overflow:auto; padding:10px 3px 20px; }
.bubble { max-width:82%; padding:13px 15px; border-radius:14px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.bubble.user { align-self:flex-end; background:#35200f; border:1px solid #6d3b18; }
.bubble.support { align-self:flex-start; background:#191e25; border:1px solid var(--line); }
.bubble small { display:block; margin-top:7px; color:var(--muted); font-size:10px; }
.reply-form { border-top:1px solid var(--line); padding-top:18px; }
@media (max-width:850px) { .auth-layout,.portal-grid { grid-template-columns:1fr; } .auth-layout { gap:28px; } .portal-head { align-items:start; } }
@media (max-width:520px) { .shell { width:min(100% - 20px,1160px); padding-top:32px; } .auth-card,.new-ticket,.tickets-card,dialog { padding:20px; } .code-row { grid-template-columns:1fr; } .portal-head { display:block; } .identity { margin-top:20px; text-align:left; } .reply-actions { align-items:stretch; flex-direction:column-reverse; } .reply-actions button { width:100%; } }