.account-wrap { max-width: 900px; padding: 46px 0 64px; }
.account-wrap.account-authenticated { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .85fr); grid-template-areas: "summary summary" "main side" "signin signin"; gap: 16px; align-items: start; }
.account-authenticated .account-summary { grid-area: summary; }
.account-authenticated .account-main-column { grid-area: main; }
.account-authenticated .account-side-column { grid-area: side; }
.account-authenticated .account-signin { grid-area: signin; }
.account-main-column, .account-side-column { display: grid; gap: 16px; min-width: 0; align-content: start; }
.account-side-column .account-renew { order: 1; }
.account-side-column .account-slots { order: 2; }
.account-side-column .account-promo { order: 3; }
.account-side-column .account-payments { order: 4; }
.account-wrap .panel { margin: 0 0 16px; padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, var(--surface-raised), var(--surface)); box-shadow: 0 12px 28px rgba(0, 0, 0, .13); }
.account-wrap .panel { position: relative; overflow: hidden; border-color: rgba(72,120,131,.46); background: linear-gradient(145deg, rgba(20,31,35,.96), rgba(9,17,20,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 18px 42px rgba(0,0,0,.19); }
.account-wrap .panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(43,205,225,.46), rgba(224,79,179,.25), transparent); }
.account-authenticated .panel { margin-bottom: 0; }
.account-wrap .account-hero { border-color: rgba(224,89,180,.45); background: linear-gradient(135deg, rgba(107,31,101,.16), rgba(17,27,30,.98) 54%, rgba(34,142,161,.08)); }
.account-wrap h1 { max-width: none; font-size: clamp(28px, 5vw, 43px); }
.account-wrap h1 em { color: var(--mint); font-style: normal; }
.account-wrap h2 { margin-bottom: 16px; font-size: 19px; }
.account-wrap p { color: var(--muted); font-size: 14px; }
.account-wrap .eyebrow { margin-bottom: 10px; }
.account-wrap .time { display: flex; align-items: baseline; gap: 12px; }
.account-wrap .time strong { color: var(--mint); font: 500 46px Unbounded, sans-serif; }
.account-wrap .time span { color: var(--text); font-size: 14px; }
.account-wrap button, .account-wrap .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 9px 16px; border: 1px solid var(--mint); border-radius: 12px; background: var(--mint-deep); color: var(--text); font: 800 13px Manrope, sans-serif; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.account-wrap button:hover, .account-wrap .button:hover { border-color: #9af0db; background: #205146; }
.account-wrap .vk-button { border-color: #54a8ff; background: linear-gradient(135deg, #2787f5, #1465c7); color: #fff; box-shadow: 0 8px 22px rgba(39, 135, 245, .24); }
.account-wrap .vk-button:hover { border-color: #a6d3ff; background: linear-gradient(135deg, #3996ff, #1d75df); color: #fff; box-shadow: 0 10px 26px rgba(39, 135, 245, .38); }
.account-wrap .vk-button svg { width: 24px; height: 24px; flex: none; border-radius: 6px; box-shadow: 0 1px 5px rgba(0, 0, 0, .2); }
.account-wrap .telegram-button { border-color: #68c9f6; background: linear-gradient(135deg, #2aabee, #147bbd); color: #fff; box-shadow: 0 8px 22px rgba(42, 171, 238, .24); }
.account-wrap .telegram-button:hover { border-color: #b0e7ff; background: linear-gradient(135deg, #42b8f5, #168bcf); color: #fff; box-shadow: 0 10px 26px rgba(42, 171, 238, .36); }
.account-wrap .telegram-button svg { width: 23px; height: 23px; fill: #fff; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)); }
.account-wrap .green { border-color: var(--mint); background: #1b6758; }
.account-wrap .profile-import-button { width: 100%; min-height: 52px; justify-content: center; border-color: #74ef9b; color: #062310; background: linear-gradient(135deg, #27b95b 0%, #45d877 52%, #77ec9b 100%); box-shadow: 0 10px 28px rgba(38,201,100,.25), 0 0 22px rgba(66,220,122,.12), inset 0 1px 0 rgba(255,255,255,.35); letter-spacing: .035em; text-shadow: 0 1px 0 rgba(255,255,255,.2); }
.account-wrap .profile-import-button:hover { border-color: #c1ffd4; color: #031b0b; background: linear-gradient(135deg, #35cb68 0%, #5ae589 52%, #91f5ae 100%); box-shadow: 0 13px 34px rgba(38,201,100,.38), 0 0 26px rgba(66,220,122,.18), inset 0 1px 0 rgba(255,255,255,.48); transform: translateY(-2px); }
.account-wrap .profile-import-button:active { transform: translateY(0); }
.account-wrap .profile-import-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-wrap .row, .account-wrap .login-options, .account-wrap .account-plans { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.account-wrap .row input { flex: 1; min-width: 180px; }
.account-wrap .login-options { margin: 20px 0; align-items: stretch; }
.account-wrap .social { display: grid; align-content: center; gap: 5px; min-height: 75px; padding: 8px 12px; border: 1px solid var(--line); background: var(--surface-raised); }
.account-wrap .social-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.account-wrap .social-label svg { width: 20px; height: 20px; fill: #48a8e9; }
.account-wrap .social small { color: var(--muted); font-size: 11px; }
.account-wrap .divider { margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--warm); font-weight: 800; font-size: 13px; }
.account-wrap input, .account-wrap select { max-width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #445955; border-radius: 11px; background: var(--ink); color: var(--text); font: 14px Manrope, sans-serif; }
.account-wrap .account-plans form { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); }
.account-authenticated .account-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.account-authenticated .account-plans form { min-width: 0; padding: 0; border: 0; background: transparent; }
.account-authenticated .account-plans button { width: 100%; min-height: 54px; }
.account-authenticated .account-slots .account-plans form { padding: 10px; border: 1px solid var(--line); background: var(--surface-raised); }
.account-wrap .account-plans label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.account-wrap .account-plans input[type=number] { width: 70px; }
.account-wrap input[readonly] { width: 100%; font-size: 12px; }
.account-wrap .steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.account-wrap .steps span { padding: 8px 10px; border: 1px solid rgba(240, 164, 93, .32); border-left: 3px solid var(--warm); border-radius: 10px; background: var(--ink); color: var(--text); font-size: 12px; }
.account-wrap .device { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.account-wrap .device small { display: block; margin-top: 3px; color: var(--muted); }
.account-wrap .device details { color: var(--muted); font-size: 13px; }
.account-wrap .device summary { cursor: pointer; }
.account-wrap .payment-list>div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.account-wrap .payment-list span { color: var(--muted); }
.account-wrap .text-button { padding-left: 0; border: 0; background: none; color: var(--mint); }
.account-wrap .profile-tools { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 5px; }
.account-wrap .profile-tool { color: var(--muted); font-size: 12px; }
.account-wrap .profile-tool summary, .account-wrap .revoke-profile-button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid rgba(99,215,191,.25); border-radius: 11px; color: #bce9df; background: rgba(99,215,191,.045); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .01em; cursor: pointer; transition: .18s ease; list-style: none; }
.account-wrap .profile-tool summary::-webkit-details-marker { display: none; }
.account-wrap .profile-tool summary:hover { border-color: rgba(99,215,191,.55); color: #e2fff8; background: rgba(99,215,191,.09); }
.account-wrap .profile-tool summary > svg, .account-wrap .revoke-profile-button svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-wrap .profile-tool summary > i { width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.account-wrap .profile-tool[open] summary > i { transform: rotate(225deg) translate(-2px, -2px); }
.account-wrap .profile-tool-content { margin-top: 7px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0,0,0,.13); }
.account-wrap .profile-tool-content > p:first-child { margin-top: 0; }
.account-wrap .profile-tool-content > p:last-child { margin-bottom: 0; }
.account-wrap .profile-tool-content input { width: 100%; }
.account-wrap .profile-qr-content { display: grid; justify-items: center; gap: 10px; text-align: center; }
.account-wrap .profile-qr-content img { width: min(220px, 72vw); height: min(220px, 72vw); padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.24); }
.account-wrap .profile-qr-content p { max-width: 330px; margin: 0; }
.account-wrap .profile-client-links { display: flex; flex-wrap: wrap; gap: 7px; }
.account-wrap .profile-client-links a { padding: 6px 9px; border: 1px solid rgba(99,215,191,.22); border-radius: 8px; background: rgba(99,215,191,.04); }
.account-wrap .revoke-profile-button { justify-content: flex-start; border-color: rgba(255,100,112,.42); color: #ff9ba4; background: rgba(255,74,89,.06); }
.account-wrap .revoke-profile-button:hover { border-color: rgba(255,112,123,.78); color: #ffd3d7; background: rgba(255,74,89,.13); box-shadow: 0 8px 24px rgba(126,22,34,.2); transform: translateY(-1px); }
.account-wrap .revoke-profile-button:active { transform: translateY(0); }
.account-wrap .revoke-profile-button:focus-visible { outline: 2px solid rgba(255,130,140,.65); outline-offset: 3px; }
.account-wrap .revoke-profile-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-wrap .hint { color: var(--muted); font-size: 12px; }
.account-wrap .identity-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.account-wrap .identity-head > div:nth-child(2) { min-width: 0; }
.account-wrap .identity-avatar { position: relative; display: grid; flex: none; width: 46px; height: 46px; place-items: center; overflow: hidden; border: 2px solid var(--mint); border-radius: 50%; background: linear-gradient(145deg, #224f49, #18312f); box-shadow: 0 0 0 3px rgba(104, 225, 193, .1); color: var(--text); font: 700 19px Unbounded, sans-serif; }
.account-wrap .identity-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.account-wrap .identity-head span, .account-wrap .identity-head strong { display: block; }
.account-wrap .identity-head span { color: var(--muted); font-size: 11px; }
.account-wrap .identity-head strong { font-size: 15px; }
.account-wrap .identity-head strong { overflow-wrap: anywhere; }
.account-wrap .account-device-count { margin-left: auto; padding: 6px 9px; border: 1px solid rgba(99, 215, 191, .45); border-radius: 999px; color: var(--mint); font-size: 10px; font-weight: 800; white-space: nowrap; background: rgba(99, 215, 191, .06); }
.account-wrap .login-error { padding: 12px; border-left: 3px solid #f0a45d; background: #372719; color: #ffe1bd; }
.account-wrap .promo-success { padding: 12px; border-left: 3px solid var(--mint); background: var(--mint-deep); color: var(--text); }
.account-wrap .mobile-link-note { padding: 12px; border-left: 3px solid var(--mint); background: var(--mint-deep); color: var(--text); }
.account-wrap .access-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.account-wrap .access-meta span, .account-wrap .section-head > span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; background: rgba(255, 255, 255, .02); }
.account-wrap .account-renew-cta { width: fit-content; min-width: 150px; border-color: var(--mint); box-shadow: 0 10px 28px rgba(99, 215, 191, .16); }
.account-wrap .account-summary { padding: 16px 20px; }
.account-access-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.access-compact { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 10px; min-width: 0; }
.access-state { grid-column: 1 / -1; color: var(--mint); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.access-state.expired { color: #ff7a74; }
.access-compact .time { grid-row: 2 / span 2; }
.access-compact .time strong { font-size: 34px; }
.access-compact .time span { font-size: 12px; }
.access-compact > small { grid-column: 2; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.account-wrap .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.account-wrap .section-head .eyebrow { margin-bottom: 6px; }
.account-wrap .device { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #101718; }
.account-wrap .device { scroll-margin-top: 24px; }
.account-wrap .device-new { border-color: rgba(99, 215, 191, .82); box-shadow: 0 0 0 2px rgba(99, 215, 191, .1), 0 14px 30px rgba(0, 0, 0, .22); }
.account-wrap .device + .device { margin-top: 10px; }
.account-wrap .device-kind { display: block; margin-bottom: 5px; color: var(--warm); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.account-wrap .device-state { align-self: start; padding: 5px 8px; border: 1px solid rgba(99, 215, 191, .45); border-radius: 999px; color: var(--mint); font-size: 9px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.account-wrap .device-primary { border-color: rgba(99, 215, 191, .42); background: linear-gradient(120deg, #112522, #101718); }
.account-wrap .device-inactive { border-color: rgba(240, 164, 93, .42); }
.account-wrap .device-inactive .device-state { border-color: rgba(240, 164, 93, .55); color: var(--warm); }
.account-wrap .device details, .account-wrap .device form, .account-wrap .device > .hint, .account-wrap .device > .login-error, .account-wrap .device > .button { grid-column: 1 / -1; }
.account-authenticated .account-plans { gap: 9px; }
.account-authenticated .account-plans button { position: relative; display: grid; min-height: 118px; padding: 12px; overflow: hidden; text-align: left; border: 1px solid var(--line); background: #101718; }
.account-authenticated .account-plans button:hover { border-color: var(--mint); background: #132220; }
.account-authenticated .account-plans button span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.account-authenticated .account-plans button strong { color: var(--text); font: 500 22px Unbounded, sans-serif; }
.account-authenticated .account-plans button small { color: var(--mint); font-size: 10px; font-weight: 800; }
.plan-card-head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
.account-authenticated .account-plans button .plan-icon { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(99, 215, 191, .36); border-radius: 9px; background: rgba(99, 215, 191, .08); color: var(--mint); }
.plan-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-authenticated .account-plans button .plan-level { flex: 1; min-width: 0; color: var(--warm); font-size: 7px; line-height: 1.2; letter-spacing: .055em; white-space: nowrap; }
.account-authenticated .account-plans button .plan-duration { margin-top: 2px; color: var(--muted); font-size: 9px; }
.account-authenticated .account-plans .plan-card-2 { border-color: rgba(99, 215, 191, .38); }
.account-authenticated .account-plans .plan-card-3 { border-color: rgba(240, 164, 93, .48); background: linear-gradient(145deg, #191a17, #101718); }
.account-authenticated .account-plans .plan-card-3 .plan-icon { border-color: rgba(240, 164, 93, .52); background: rgba(240, 164, 93, .1); color: var(--warm); }
.account-authenticated .account-plans .plan-card-4 { border-color: rgba(193, 113, 255, .5); background: linear-gradient(145deg, #191522, #101718); }
.account-authenticated .account-plans .plan-card-4 .plan-icon { border-color: rgba(193, 113, 255, .54); background: rgba(193, 113, 255, .1); color: #d19aff; }
.device-wizard { margin: 16px 0 22px; padding: 16px; border: 1px solid rgba(99, 215, 191, .28); border-radius: 16px; background: linear-gradient(145deg, #0d1516, #101b1b); }
.wizard-intro { max-width: 560px; margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.device-wizard [hidden] { display: none !important; }
.wizard-progress { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.account-wrap .wizard-progress button { display: flex; min-width: 0; min-height: 48px; padding: 8px 11px; border: 1px solid #31413f; border-radius: 11px; background: linear-gradient(145deg,#121c1d,#0e1617); color: #8ba09d; font-size: 9px; font-weight: 800; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease; }
.account-wrap .wizard-progress button:not(:disabled) { cursor: pointer; }
.account-wrap .wizard-progress button:disabled { cursor: default; opacity: .72; }
.account-wrap .wizard-progress button.active { border-color: rgba(99, 215, 191, .46); color: #b8e7de; opacity: 1; }
.account-wrap .wizard-progress button.current { transform: translateY(-1px); border-color: var(--mint); background: linear-gradient(145deg,rgba(32,94,84,.42),rgba(18,40,38,.7)); color: #73ecd6; box-shadow: 0 8px 20px rgba(25,130,110,.12),inset 0 1px 0 rgba(255,255,255,.08); }
.account-wrap .wizard-progress button.complete .wizard-step-icon { border-color: var(--mint); background: var(--mint); color: #0b1514; }
.wizard-step-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border: 1px solid currentColor; border-radius: 9px; background: rgba(255,255,255,.025); font-size: 9px; line-height: 1; }
.wizard-step-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.account-wrap .wizard-progress button:nth-child(2) .wizard-step-icon { color: #79aeee; }
.account-wrap .wizard-progress button:nth-child(3) .wizard-step-icon { color: #eda0d8; }
.account-wrap .wizard-progress button.current .wizard-step-icon { border-color: #69e5cf; background: rgba(99,215,191,.12); color: #7ef0dc; box-shadow: 0 0 14px rgba(99,215,191,.12); }
.wizard-step > p { margin: 0 0 12px; color: var(--text); font-weight: 700; }
.platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.account-wrap .platform-card { display: grid; min-height: 88px; padding: 12px; border-color: #31413f; background: linear-gradient(145deg,#142021,#101819); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.account-wrap .platform-card:hover { transform: translateY(-2px); border-color: var(--mint); background: linear-gradient(145deg,#19302d,#132221); box-shadow: 0 10px 22px rgba(0,0,0,.18),0 0 16px rgba(99,215,191,.06); }
.platform-card b { color: var(--warm); font: 700 23px Unbounded, sans-serif; }
.platform-card img { display: block; width: 36px; height: 36px; margin: 0 auto 4px; object-fit: contain; filter: drop-shadow(0 5px 9px rgba(0,0,0,.3)); }
.platform-card span { color:#edf7f5;font-size: 11px; letter-spacing:.01em; }
.account-wizard-panel .device-wizard { margin-bottom: 0; }
.account-device-profiles .section-head { margin-bottom: 4px; }
.devices-empty { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 13px; border: 1px dashed #38504c; border-radius: 13px; background: rgba(255,255,255,.018); }
.devices-empty > span { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(99,215,191,.08); color: var(--mint); font-size: 20px; }
.devices-empty strong, .devices-empty small { display: block; }
.devices-empty strong { color: var(--text); font-size: 12px; }
.devices-empty small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.account-wrap .client-card { justify-content: flex-start; min-height: 76px; padding: 11px; border-color: var(--line); background: #121c1d; text-align: left; }
.account-wrap .client-card:hover { border-color: var(--mint); background: #172624; }
.client-card > span:last-child { min-width: 0; }
.client-card strong, .client-card small { display: block; }
.client-card strong { margin-bottom: 3px; color: var(--text); font-size: 13px; }
.client-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.client-logo { position: relative; display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: linear-gradient(145deg, #243c3a, #12201f); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 7px 16px rgba(0,0,0,.22); color: #fff; font: 800 13px Unbounded, sans-serif; }
.client-logo img { width: 100%; height: 100%; object-fit: cover; }
.client-incy .client-logo, .client-logo-incy { background: linear-gradient(145deg, #9168ff, #4432bb); }
.client-justvpn .client-logo, .client-logo-justvpn { background: radial-gradient(circle at 35% 25%, #56ead0, #173e3a 62%, #0e1819); border-color: rgba(99,215,191,.7); color: var(--mint); text-shadow: 0 0 12px rgba(99,215,191,.7); }
.client-incy .client-logo i { position: absolute; width: 25px; height: 25px; border: 3px solid rgba(255,255,255,.8); border-radius: 50%; }
.client-incy .client-logo b { position: relative; font-size: 9px; }
.client-hiddify .client-logo, .client-logo-hiddify { background: linear-gradient(145deg, #3edcc4, #147b87); }
.client-happ .client-logo, .client-logo-happ { background: linear-gradient(145deg, #ffb454, #ef615f); }
.client-happ .client-logo i { position: absolute; inset: 6px; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; }
.client-happ .client-logo b { position: relative; font-size: 19px; }
.client-v2rayn .client-logo, .client-logo-v2rayn { background: linear-gradient(145deg, #5797ff, #2955b7); }
.client-router .client-logo, .client-logo-router { background: linear-gradient(145deg, #677573, #273331); }
.client-router .client-logo img, .client-logo-router img { width: 28px; height: 28px; object-fit: contain; }
.wizard-back { min-height: 0 !important; margin: 0 0 13px; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--mint) !important; font-size: 11px !important; }
.wizard-choice { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #121c1d; }
.wizard-choice small, .wizard-choice strong, .wizard-choice span { display: block; }
.wizard-choice small { color: var(--muted); font-size: 9px; font-weight: 800; }
.wizard-choice strong { margin: 2px 0; color: var(--text); }
.wizard-choice > div > span { color: var(--warm); font-size: 11px; }
.install-steps { display: grid; gap: 8px; margin: 0 0 15px; padding: 0; list-style: none; }
.install-steps li { display: flex; gap: 10px; padding: 10px; border-left: 2px solid var(--warm); background: #111a1b; }
.install-steps li > b { display: grid; flex: 0 0 25px; height: 25px; place-items: center; border-radius: 50%; background: rgba(240,164,93,.14); color: var(--warm); }
.install-steps strong, .install-steps span { display: block; }
.install-steps strong { color: var(--text); font-size: 12px; }
.install-steps span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.wizard-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.wizard-actions form { display: contents; }
.account-wrap .wizard-actions .wizard-create { border-color: rgba(85,225,164,.55); background: linear-gradient(135deg,#176748,#28a76f); color:#f2fff8; box-shadow:0 10px 24px rgba(35,178,112,.15); }
.account-wrap .wizard-actions .wizard-create:hover { border-color:#7df0b3; background:linear-gradient(135deg,#1c7854,#31bc7d); }
.device-client { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.device-client .client-logo { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; font-size: 10px; }
.device-client small, .device-client strong { display: block; }
.device-client small { color: var(--muted); font-size: 8px; font-weight: 800; }
.device-client strong { color: var(--text); font-size: 12px; }
.profile-ready { grid-column: 1 / -1; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; border: 1px solid rgba(99, 215, 191, .48); border-radius: 14px; background: linear-gradient(135deg, rgba(99, 215, 191, .1), rgba(16, 23, 24, .92)); }
.profile-ready img { width: 112px; height: 112px; padding: 7px; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .22); }
.profile-ready span, .profile-ready strong { display: block; }
.profile-ready span { margin-bottom: 4px; color: var(--mint); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.profile-ready strong { color: var(--text); font-size: 15px; }
.profile-ready p { margin: 5px 0 0; font-size: 11px; line-height: 1.45; }
@media (max-width: 800px) { .account-wrap.account-authenticated { display: block; max-width: 900px; } .account-authenticated .panel { margin-bottom: 0; } .account-authenticated .account-summary, .account-main-column, .account-side-column { margin-bottom: 16px; } }
@media (max-width: 650px) { .account-wrap { width: min(100% - 28px, 900px); padding-top: 24px; } .account-wrap .panel { padding: 17px; } .account-wrap .account-summary { padding: 14px; } .account-wrap .row>* { width: 100%; } .account-wrap .time strong { font-size: 31px; } .account-wrap .payment-list>div { display: grid; } .site-header nav { gap: 8px; } .site-header nav a { font-size: 11px; } .account-wrap .identity-head { flex-wrap: nowrap; } .account-wrap .account-device-count { margin-left: auto; } .account-access-row { gap: 10px; } .access-compact .time { gap: 7px; } .access-compact .time span { max-width: 90px; font-size: 10px; } .account-wrap .account-renew-cta { min-width: 112px; width: auto; padding-inline: 10px; font-size: 11px; } .account-authenticated .account-plans { grid-template-columns: 1fr 1fr; } .account-wrap .device { grid-template-columns: 1fr; } .account-wrap .device-state { justify-self: start; } .account-wrap .section-head { display: grid; } .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-grid { grid-template-columns: 1fr; } .wizard-actions > * { width: 100%; } .account-wrap .wizard-progress button { display: grid; justify-items: center; min-height: 52px; padding: 6px 3px; gap: 3px; font-size: 8px; } .profile-ready { grid-template-columns: 1fr; justify-items: center; gap: 15px; padding: 18px; text-align: center; } .profile-ready img { width: min(190px, 68vw); height: min(190px, 68vw); padding: 10px; border-radius: 14px; } .profile-ready p { max-width: 290px; margin: 7px auto 0; } }