.account-page { --account-acid:#c9ff3d; --account-gold:#ffb53d; --account-blue:#59d8ff; --account-green:#50d89d; --account-red:#ff677b; --account-panel:#111620; --account-line:rgba(255,255,255,.09); background:#07090e; }
.account-page > .trending { display:none; }
.account-v2 { min-height:100vh; color:#dfe3dc; background:radial-gradient(circle at 82% 4%,rgba(255,181,61,.08),transparent 25%),#07090e; }
.account-hero { padding:155px 0 70px; border-bottom:1px solid var(--account-line); background:linear-gradient(130deg,#0b0e14,#121720); }
.account-hero-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.account-identity { display:flex; align-items:center; gap:20px; }
.account-avatar { position:relative; display:block; width:78px; height:78px; flex:0 0 auto; padding:3px; border-radius:22px; background:linear-gradient(135deg,var(--account-acid),var(--account-gold)); box-shadow:0 18px 45px rgba(0,0,0,.35); }
.account-avatar img { width:100%; height:100%; object-fit:cover; border:3px solid #10151d; border-radius:19px; }
.account-avatar i { position:absolute; right:-2px; bottom:-2px; width:17px; height:17px; border:4px solid #10151d; border-radius:50%; background:var(--account-green); }
.account-eyebrow { color:var(--account-acid); font-size:13px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.account-identity h1 { margin:5px 0 4px; color:#f6f7f3; font-size:clamp(30px,4vw,52px); font-weight:900; letter-spacing:-.05em; }
.account-identity p { margin:0; color:#747e8c; font-size:15px; }
.account-balance-card { min-width:235px; padding:17px 19px; border:1px solid rgba(201,255,61,.22); border-radius:15px; background:rgba(201,255,61,.045); }
.account-balance-card span { display:block; color:#737c88; font-size:13px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.account-balance-card strong { display:block; margin:5px 0 9px; color:#f2f4ee; font-size:24px; font-weight:900; }
.account-balance-card a { color:var(--account-acid); font-size:13px; font-weight:900; }
.account-balance-card a i { margin-left:4px; }
.account-workspace { padding:32px 0 70px; }
.account-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.account-summary-grid article { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; min-height:84px; padding:15px 17px; border:1px solid var(--account-line); border-radius:13px; background:linear-gradient(145deg,#121720,#0d1118); }
.account-summary-grid article > i { display:grid; width:38px; height:38px; place-items:center; color:var(--account-acid); border-radius:10px; background:rgba(201,255,61,.07); }
.account-summary-grid article div { display:flex; flex-direction:column; }
.account-summary-grid span,.account-summary-grid small { color:#69727f; font-size:13px; font-weight:800; text-transform:uppercase; }
.account-summary-grid strong { color:#edf0e9; font-size:17px; font-weight:900; }
.account-summary-grid small { justify-self:end; text-transform:none; }
.account-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-bottom:14px; padding:7px; border:1px solid var(--account-line); border-radius:14px; background:#0d1118; }
.account-tabs button { display:flex; min-height:58px; align-items:center; gap:10px; padding:10px 13px; color:#737d89; border:1px solid transparent; border-radius:10px; background:transparent; text-align:left; }
.account-tabs button > i { display:grid; width:31px; height:31px; flex:0 0 auto; place-items:center; border-radius:8px; background:#171d26; font-size:14px; }
.account-tabs button span { display:flex; flex-direction:column; color:#c9ced5; font-size:13px; font-weight:900; }
.account-tabs button small { color:#59626e; font-size:13px; font-weight:700; }
.account-tabs button:hover { background:rgba(255,255,255,.025); }
.account-tabs button.active { color:#101609; border-color:rgba(201,255,61,.35); background:var(--account-acid); }
.account-tabs button.active > i { background:rgba(8,13,3,.12); }
.account-tabs button.active span,.account-tabs button.active small { color:#11170b; }
.account-panel { display:none; overflow:hidden; border:1px solid var(--account-line); border-radius:16px; background:linear-gradient(145deg,#121720,#0c1017); box-shadow:0 25px 75px rgba(0,0,0,.18); }
.account-panel.active { display:block; }
.account-panel-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:21px 23px; border-bottom:1px solid var(--account-line); }
.account-panel-header > div > span { color:var(--account-acid); font-size:13px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.account-panel-header h2 { margin:3px 0 2px; color:#f0f2ed; font-size:20px; font-weight:900; letter-spacing:-.035em; }
.account-panel-header p { margin:0; color:#68717d; font-size:13px; }
.account-panel-header > a,.account-empty a { display:inline-flex; align-items:center; gap:7px; min-height:35px; padding:0 12px; color:#11170b; border-radius:8px; background:var(--account-acid); font-size:13px; font-weight:900; }
.account-history-list { display:grid; gap:10px; padding:16px; }
.account-history-card { position:relative; display:grid; grid-template-columns:48px minmax(220px,1.35fr) minmax(120px,.65fr) minmax(145px,.7fr); align-items:center; gap:18px; padding:17px 18px; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:linear-gradient(120deg,rgba(255,255,255,.025),rgba(255,255,255,.008)); transition:border-color .2s ease,transform .2s ease,background .2s ease; }
.account-history-card::before { position:absolute; top:0; bottom:0; left:0; width:3px; content:""; background:var(--account-green); }
.account-history-card:hover { border-color:rgba(201,255,61,.18); background:linear-gradient(120deg,rgba(201,255,61,.035),rgba(255,255,255,.008)); transform:translateY(-1px); }
.account-history-icon { display:grid; width:48px; height:48px; place-items:center; color:var(--account-green); border:1px solid rgba(80,216,157,.18); border-radius:13px; background:rgba(80,216,157,.07); font-size:16px; }
.account-history-icon.order { color:var(--account-acid); border-color:rgba(201,255,61,.18); background:rgba(201,255,61,.07); }
.account-history-main { display:flex; min-width:0; flex-direction:column; gap:3px; }
.account-history-label,.account-meta-label,.account-order-value span { color:#596573; font-size:13px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.account-history-main strong { overflow:hidden; color:#f0f3ed; font-size:15px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.account-history-main time { display:flex; align-items:center; gap:6px; color:#7f8996; font-size:14px; }
.account-history-main time i { color:#5f6976; }.account-history-main time span { color:#5f6976; }
.account-history-meta { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.account-country { display:inline-flex; align-items:center; gap:7px; padding:7px 9px; color:#c8ced5; border:1px solid rgba(255,255,255,.07); border-radius:7px; background:#171d26; font-size:13px; font-weight:900; }
.account-country i { color:var(--account-gold); }
.account-history-status { display:flex; align-items:flex-end; justify-content:center; flex-direction:column; gap:8px; }
.account-amount { color:var(--account-green); font-size:20px; font-weight:950; letter-spacing:-.035em; }
.account-status { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; color:#969eaa; border:1px solid rgba(255,255,255,.07); border-radius:999px; background:rgba(255,255,255,.025); font-size:13px; font-weight:850; white-space:nowrap; }
.account-status i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.account-status.success { color:var(--account-green); }.account-status.pending,.account-status.warning { color:var(--account-gold); }.account-status.hold { color:var(--account-blue); }.account-status.danger { color:var(--account-red); }
.account-order-list { gap:12px; }
.account-order-card { overflow:hidden; border:1px solid rgba(255,255,255,.085); border-radius:14px; background:linear-gradient(120deg,#111720,#0c1118); transition:border-color .2s ease,transform .2s ease; }
.account-order-card:hover,.account-order-card.expanded { border-color:rgba(201,255,61,.23); transform:translateY(-1px); }
.account-order-summary { display:grid; grid-template-columns:48px minmax(200px,1.35fr) minmax(110px,.55fr) minmax(125px,.6fr) auto; align-items:center; gap:18px; padding:17px 18px; }
.account-order-number { display:flex; min-width:0; flex-direction:column; color:#edf0e9; font-size:15px; font-weight:900; }
.account-order-number span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-order-number small { margin-top:3px; color:#687381; font-size:13px; font-weight:700; }
.account-order-value { display:flex; flex-direction:column; gap:4px; }
.account-order-value strong { color:var(--account-gold); font-size:16px; font-weight:950; }
.account-order-state { display:flex; align-items:center; }
.account-order-toggle { display:inline-flex; min-height:37px; align-items:center; justify-content:center; gap:8px; padding:0 12px; color:#cfd5dc; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:#0a0e14; font-size:13px; font-weight:900; white-space:nowrap; }
.account-order-toggle:hover { color:#101609; border-color:var(--account-acid); background:var(--account-acid); }
.account-order-toggle i { transition:transform .2s ease; }.order-row.expanded .account-order-toggle i { transform:rotate(180deg); }
.account-order-details { border-top:1px solid rgba(255,255,255,.07); background:#090d12; }
.account-order-details[hidden] { display:none; }
.account-order-items { display:grid; gap:8px; padding:13px 18px 18px 84px; box-shadow:inset 3px 0 var(--account-acid); }
.account-order-items > div { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:14px; padding:10px 12px; border:1px solid rgba(255,255,255,.055); border-radius:10px; background:#10151d; }
.account-item-image { display:grid; width:64px; height:48px; place-items:center; border-radius:8px; background:#0a0e14; }
.account-item-image img { width:90%; height:90%; object-fit:contain; }
.account-order-items > div > span:nth-child(2) { display:flex; flex-direction:column; }
.account-order-items strong { color:#dce0d9; font-size:14px; }.account-order-items small { margin-top:3px; color:#626b78; font-size:13px; }.account-order-items b { color:var(--account-gold); font-size:14px; }
.account-settings-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.8fr); gap:55px; padding:40px; }
.account-settings-copy { max-width:500px; }
.account-settings-icon { display:grid; width:52px; height:52px; margin-bottom:20px; place-items:center; border-radius:14px; font-size:21px; }
.account-settings-icon.steam { color:#fff; background:linear-gradient(135deg,#273a4d,#111820); }.account-settings-icon.mail { color:var(--account-gold); background:rgba(255,181,61,.09); }
.account-settings-copy h2 { margin:6px 0 10px; color:#f0f2ed; font-size:28px; font-weight:900; letter-spacing:-.04em; }
.account-settings-copy p { color:#77808c; font-size:14px; line-height:1.7; }
.account-settings-copy ul { display:grid; gap:8px; margin:20px 0 0; padding:0; list-style:none; }
.account-settings-copy li { color:#9ba3ae; font-size:13px; }.account-settings-copy li i { margin-right:8px; color:var(--account-green); }
.account-settings-form { align-self:center; padding:21px; border:1px solid var(--account-line); border-radius:13px; background:#0a0e14; }
.account-settings-form label { display:block; margin-bottom:7px; color:#919aa6; font-size:13px; font-weight:850; text-transform:uppercase; }
.account-input-icon { display:flex; align-items:center; overflow:hidden; border:1px solid #29313d; border-radius:9px; background:#10151d; }
.account-input-icon i { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; color:var(--account-acid); border-right:1px solid #29313d; }
.account-input-icon input { width:100%; height:42px; padding:0 12px; color:#e3e6df; border:0; outline:0; background:transparent; font-size:13px; }
.account-settings-form > small { display:block; margin:7px 0 15px; color:#59626f; font-size:13px; line-height:1.5; }
.account-settings-form button { display:flex; width:100%; min-height:40px; align-items:center; justify-content:center; gap:7px; color:#101609; border:0; border-radius:8px; background:var(--account-acid); font-size:13px; font-weight:900; }
.account-help-link { display:block; margin-top:11px; color:#858e9a; font-size:13px; text-align:center; }.account-help-link i { margin-left:4px; }
.account-form-status { min-height:15px; margin:10px 0 0; font-size:13px; text-align:center; }
.account-empty { display:flex; min-height:290px; align-items:center; justify-content:center; flex-direction:column; gap:6px; color:#68717e; }
.account-empty > i { margin-bottom:8px; color:var(--account-acid); font-size:24px; }.account-empty strong { color:#dce0d9; }.account-empty span { font-size:13px; }.account-empty a { margin-top:8px; }

.account-ticket-flash { margin:14px 18px 0; padding:11px 13px; color:var(--account-green); border:1px solid rgba(85,214,158,.24); border-radius:9px; background:rgba(85,214,158,.06); font-size:13px; }.account-ticket-flash.error { color:var(--account-red); border-color:rgba(255,102,122,.25); background:rgba(255,102,122,.06); }.account-ticket-flash i { margin-right:7px; }
.account-ticket-layout { display:grid; min-height:570px; grid-template-columns:330px minmax(0,1fr); }
.account-ticket-list { overflow-y:auto; border-right:1px solid var(--account-line); background:#0a0e14; }
.account-ticket-list>a { display:block; padding:15px 17px; color:#d8dcd6; border-bottom:1px solid rgba(255,255,255,.06); }
.account-ticket-list>a:hover,.account-ticket-list>a.active { color:#fff; background:#141a23; box-shadow:inset 3px 0 var(--account-acid); }
.account-ticket-list>a>span { display:flex; align-items:center; justify-content:space-between; gap:8px; }.account-ticket-list b { color:var(--account-acid); font-size:13px; }.account-ticket-list strong { display:block; margin:9px 0 5px; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.account-ticket-list small { color:#59636f; font-size:13px; }
.account-ticket-status { display:inline-flex; padding:5px 7px; color:#9da6b1; border-radius:999px; background:rgba(255,255,255,.06); font-size:13px; font-style:normal; font-weight:900; text-transform:uppercase; white-space:nowrap; }.account-ticket-status.new { color:var(--account-acid); background:rgba(201,255,61,.08); }.account-ticket-status.open { color:var(--account-blue); background:rgba(101,223,255,.08); }.account-ticket-status.waiting_customer { color:var(--account-gold); background:rgba(255,181,61,.09); }.account-ticket-status.resolved { color:var(--account-green); background:rgba(85,214,158,.09); }
.account-ticket-detail { min-width:0; padding:23px; }.account-ticket-detail>header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:17px; border-bottom:1px solid var(--account-line); }.account-ticket-detail>header span { color:var(--account-acid); font-size:13px; font-weight:900; }.account-ticket-detail h3 { margin:5px 0 0; color:#f1f3ee; font-size:20px; font-weight:900; letter-spacing:-.035em; }
.account-ticket-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:13px 0; }.account-ticket-meta span { display:flex; flex-direction:column; padding:10px; color:#b6bdc5; border:1px solid var(--account-line); border-radius:8px; background:#0a0e14; font-size:13px; }.account-ticket-meta b { margin-bottom:3px; color:#59636f; font-size:13px; text-transform:uppercase; }
.account-ticket-conversation { display:flex; max-height:315px; flex-direction:column; gap:9px; overflow-y:auto; padding:5px 3px 15px; }.account-ticket-conversation article { max-width:86%; padding:12px 14px; border:1px solid var(--account-line); border-radius:11px; background:#090d13; }.account-ticket-conversation article.customer { align-self:flex-end; border-color:rgba(201,255,61,.18); background:rgba(201,255,61,.045); }.account-ticket-conversation article>div { display:flex; align-items:center; justify-content:space-between; gap:15px; }.account-ticket-conversation strong { color:#dfe3dc; font-size:13px; }.account-ticket-conversation time { color:#59636f; font-size:13px; }.account-ticket-conversation p { margin:7px 0 0; color:#9ba3ad; font-size:13px; line-height:1.65; }
.account-ticket-reply { display:grid; grid-template-columns:1fr 130px; align-items:end; gap:10px; padding-top:14px; border-top:1px solid var(--account-line); }.account-ticket-reply label { margin:0; }.account-ticket-reply label>span { display:block; margin-bottom:6px; color:#737d89; font-size:13px; font-weight:850; text-transform:uppercase; }.account-ticket-reply textarea { width:100%; min-height:90px; padding:11px; color:#e2e5df; border:1px solid var(--account-line); border-radius:9px; outline:0; background:#090d13; font:500 13px Inter,sans-serif; resize:vertical; }.account-ticket-reply textarea:focus { border-color:rgba(201,255,61,.4); }.account-ticket-reply button { min-height:42px; color:#0a0f07; border:0; border-radius:8px; background:var(--account-acid); font-size:13px; font-weight:900; }.account-ticket-closed { margin:15px 0 0; padding:12px; color:#8b95a1; border:1px solid var(--account-line); border-radius:8px; background:#0a0e14; font-size:13px; }.account-ticket-closed i { margin-right:7px; color:var(--account-gold); }
.account-ticket-reply button:disabled { cursor:wait; opacity:.55; }.account-ticket-honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width:991px) { .account-summary-grid { grid-template-columns:1fr; }.account-tabs { grid-template-columns:repeat(2,1fr); }.account-settings-layout { grid-template-columns:1fr; gap:30px; }.account-settings-copy { max-width:none; }.account-ticket-layout { grid-template-columns:270px minmax(0,1fr); }.account-ticket-meta { grid-template-columns:1fr; }.account-order-summary { grid-template-columns:48px minmax(180px,1fr) minmax(105px,.45fr) auto; }.account-order-state { grid-column:2; }.account-order-toggle { grid-column:4; grid-row:1 / span 2; }.account-history-card { grid-template-columns:48px minmax(190px,1fr) minmax(130px,.65fr); }.account-history-status { grid-column:3; grid-row:1; }.account-history-meta { grid-column:2; } }
@media (max-width:767px) { .account-hero { padding:125px 0 45px; }.account-hero-inner { align-items:flex-start; flex-direction:column; }.account-balance-card { width:100%; }.account-tabs { grid-template-columns:1fr; }.account-panel-header { align-items:flex-start; flex-direction:column; }.account-summary-grid small { display:none; }.account-settings-layout { padding:24px 18px; }.account-ticket-layout { grid-template-columns:1fr; }.account-ticket-list { max-height:280px; border-right:0; border-bottom:1px solid var(--account-line); }.account-ticket-detail { padding:17px; }.account-ticket-reply { grid-template-columns:1fr; }.account-history-list { padding:12px; }.account-history-card { grid-template-columns:43px 1fr auto; gap:12px; padding:14px; }.account-history-icon { width:43px; height:43px; }.account-history-meta { grid-column:2; }.account-history-status { grid-column:3; grid-row:1 / span 2; }.account-history-status .account-status { align-self:flex-end; }.account-amount { font-size:17px; }.account-order-summary { grid-template-columns:43px 1fr auto; gap:12px; padding:14px; }.account-order-value { grid-column:2; }.account-order-state { grid-column:2; }.account-order-toggle { width:39px; grid-column:3; grid-row:1 / span 3; padding:0; }.account-order-toggle span { display:none; }.account-order-items { padding:12px; box-shadow:inset 3px 0 var(--account-acid); } }
@media (max-width:480px) { .account-identity { align-items:flex-start; flex-direction:column; }.account-avatar { width:66px; height:66px; }.account-tabs button small { display:none; }.account-history-card { grid-template-columns:43px 1fr; }.account-history-status { grid-column:1 / -1; grid-row:auto; align-items:center; justify-content:space-between; flex-direction:row; padding-top:11px; border-top:1px solid rgba(255,255,255,.07); }.account-history-meta { grid-column:2; }.account-order-summary { grid-template-columns:43px 1fr 39px; }.account-order-state { grid-column:1 / span 2; }.account-order-toggle { grid-column:3; grid-row:1 / span 3; }.account-order-items > div { grid-template-columns:52px 1fr; }.account-item-image { width:52px; height:42px; }.account-order-items b { grid-column:2; } }
