:root { --danger-soft: rgba(229,72,95,.10); --success-soft: rgba(19,168,118,.10); }
.main-area { min-height: 100vh; margin-inline-start: var(--sidebar-width); transition: margin .3s ease; }
.topbar { grid-template-columns: minmax(0, 1fr) auto; }
.topbar-actions { grid-column: 2; }
.toolbar-form { margin: 0; }
.toolbar-form .icon-btn { width: 42px; }
.alert { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid; border-radius: 14px; font-size: 13px; line-height: 1.6; }
.alert svg { width: 19px; height: 19px; flex: 0 0 auto; }
.alert ul { margin: 5px 0 0; padding-inline-start: 18px; }
.alert-success { color: var(--success); border-color: rgba(19,168,118,.23); background: var(--success-soft); }
.alert-danger { color: var(--danger); border-color: rgba(229,72,95,.22); background: var(--danger-soft); }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 20px; align-items: start; }
.card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.table-wrap .data-table th:first-child, .table-wrap .data-table td:first-child { padding-inline-start: 20px; }
.table-actions { display: flex; align-items: center; gap: 8px; }
.table-actions .btn { min-height: 34px; padding: 0 12px; font-size: 11px; }
.filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filters .form-control { min-width: 180px; }
.filters .search-grow { flex: 1; min-width: 230px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-stack { display: grid; gap: 16px; }
.form-label { font-size: 12px; }
.form-label > span:first-child { color: var(--text); font-weight: 700; }
textarea.form-control { min-height: 110px; padding-top: 12px; resize: vertical; }
select.form-control { width: 100%; }
.checkbox-row { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.checkbox-row input { margin-top: 3px; }
.form-hint { color: var(--muted); font-size: 11px; line-height: 1.6; }
.detail-list { display: grid; gap: 0; }
.detail-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.detail-row:last-child { border-bottom: 0; }
.detail-row span { color: var(--muted); }
.detail-row strong { text-align: end; }
.empty-state { padding: 54px 24px; text-align: center; color: var(--muted); }
.empty-state svg { width: 45px; height: 45px; margin: 0 auto 15px; opacity: .55; }
.empty-state h3 { color: var(--text); margin-bottom: 7px; }
.progress-track { height: 8px; overflow: hidden; border-radius: 20px; background: var(--surface-soft); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-blue), var(--brand-indigo)); }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.service-option { position: relative; display: block; }
.service-option input { position: absolute; opacity: 0; }
.service-option-card { height: 100%; display: block; padding: 21px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); cursor: pointer; transition: .2s ease; }
.service-option input:checked + .service-option-card { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0,189,245,.09), var(--shadow-sm); }
.service-option-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.service-option-head strong { font-size: 15px; }
.service-price { color: var(--brand-blue); font-weight: 800; }
.service-option p { min-height: 45px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.upload-box { display: grid; place-items: center; min-height: 190px; padding: 30px; text-align: center; border: 1px dashed rgba(0,189,245,.35); border-radius: 18px; background: rgba(0,189,245,.035); }
.upload-box svg { width: 38px; height: 38px; margin: 0 auto 12px; color: var(--brand-blue); }
.upload-box input { max-width: 100%; }
.file-list-real { display: grid; gap: 9px; }
.file-row { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.file-row > svg { width: 20px; color: var(--brand-blue); }
.file-row-copy { min-width: 0; flex: 1; }
.file-row-copy strong, .file-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.ticket-thread { display: grid; gap: 15px; }
.message { max-width: 78%; display: grid; gap: 5px; }
.message.staff { margin-inline-start: auto; }
[dir="rtl"] .message.staff { margin-inline-start: 0; margin-inline-end: auto; }
.message-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.message-bubble { padding: 14px 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); font-size: 13px; line-height: 1.75; white-space: pre-wrap; }
.message.staff .message-bubble { border-color: rgba(0,189,245,.18); background: linear-gradient(120deg, rgba(0,189,245,.08), rgba(98,104,255,.06)); }
.invoice-total-box { padding: 18px; border: 1px solid rgba(0,189,245,.18); border-radius: 16px; background: linear-gradient(120deg, rgba(0,189,245,.08), rgba(98,104,255,.06)); }
.invoice-total-box strong { display: block; margin-top: 7px; font-size: 30px; }
.code-token { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid rgba(40,217,154,.22); border-radius: 12px; background: rgba(40,217,154,.07); }
.code-token code { min-width: 0; flex: 1; overflow-wrap: anywhere; color: var(--success); }
.dialog-card { width: min(92vw, 660px); padding: 0; color: var(--text); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.dialog-card::backdrop { background: rgba(3,8,17,.72); backdrop-filter: blur(4px); }
.dialog-content { padding: 24px; }
.dialog-head-real { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mini-form { display: flex; align-items: center; gap: 8px; }
.mini-form .form-control { min-width: 105px; }
.admin-mode .sidebar { background: radial-gradient(circle at 5% 0, rgba(149,101,255,.2), transparent 31%), linear-gradient(165deg, #0b1022, #070914); }
.admin-note { padding: 13px; color: var(--warning); border: 1px solid rgba(233,155,36,.2); border-radius: 12px; background: rgba(233,155,36,.08); font-size: 12px; line-height: 1.6; }
.admin-note summary { cursor: pointer; font-weight: 700; }
.text-danger { color: var(--danger); }

/* Authentication experience */
.auth-body { min-height: 100vh; overflow-x: hidden; background: #050914; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1.05fr) minmax(500px, .95fr); }
.auth-brand-panel { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; gap: 42px; padding: 38px clamp(34px, 5vw, 76px) 42px; color: #f1f7ff; background: radial-gradient(circle at 12% 7%, rgba(0,189,245,.22), transparent 28%), radial-gradient(circle at 88% 82%, rgba(111,78,255,.25), transparent 34%), linear-gradient(145deg, #071221 0%, #070b17 52%, #0a0d21 100%); }
.auth-grid-pattern { position: absolute; z-index: -3; inset: 0; opacity: .26; background-image: linear-gradient(rgba(126,166,220,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(126,166,220,.07) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.auth-grid-pattern::after { content: ""; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 0 45%, rgba(69,211,255,.06) 45.2% 45.5%, transparent 45.7% 100%); }
.auth-orb { position: absolute; z-index: -2; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.auth-orb-one { width: 370px; height: 370px; inset-inline-start: -210px; top: 18%; background: radial-gradient(circle, rgba(0,195,248,.18), transparent 68%); }
.auth-orb-two { width: 420px; height: 420px; inset-inline-end: -250px; bottom: -80px; background: radial-gradient(circle, rgba(126,85,255,.2), transparent 69%); }
.auth-brand { position: relative; z-index: 2; width: max-content; display: flex; align-items: center; gap: 14px; }
.auth-brand .brand-mark { width: 56px; height: 56px; border-radius: 17px; }
.auth-brand .brand-logo { width: 43px; height: 43px; }
.auth-brand .brand-title { display: block; color: #f4f8ff; font-size: 25px; line-height: 1.1; }
.auth-brand > span:last-child > small { display: block; margin-top: 5px; color: #6f83a2; font-size: 9px; font-weight: 700; letter-spacing: 1.35px; text-transform: uppercase; }
.auth-brand-content { position: relative; z-index: 2; display: grid; gap: clamp(28px, 4vh, 46px); }
.auth-brand-copy { max-width: 670px; }
.auth-brand-copy .hero-badge { margin-bottom: 19px; color: #aebdd3; background: rgba(255,255,255,.045); }
.auth-brand-copy h1 { max-width: 720px; margin: 0 0 20px; font-size: clamp(40px, 5vw, 72px); line-height: .98; letter-spacing: -3.2px; text-wrap: balance; background: linear-gradient(115deg, #fff 0%, #d7efff 48%, #a9afff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-brand-copy p { max-width: 600px; margin: 0; color: #91a5c2; font-size: 15px; line-height: 1.9; }
.decode-visual { width: min(100%, 690px); display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: center; }
.decode-window { position: relative; min-height: 150px; overflow: hidden; border: 1px solid rgba(129,160,204,.16); border-radius: 18px; background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 25px 70px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.decode-window::after { content: ""; position: absolute; inset: auto -15% -65% 35%; height: 130px; border-radius: 50%; background: rgba(0,189,245,.08); filter: blur(30px); }
.decode-window-result { border-color: rgba(45,220,165,.2); background: linear-gradient(150deg, rgba(30,219,161,.075), rgba(255,255,255,.025)); }
.decode-window-bar { height: 37px; display: flex; align-items: center; gap: 6px; padding: 0 13px; border-bottom: 1px solid rgba(129,160,204,.12); background: rgba(4,11,22,.24); }
.decode-window-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #ff5b78; }
.decode-window-bar > span:nth-child(2) { background: #ffb648; }
.decode-window-bar > span:nth-child(3) { background: #2ad99b; }
.decode-window-bar small { margin-inline-start: 5px; color: #7186a6; font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.encrypted-lines, .code-lines { display: grid; gap: 10px; padding: 22px 20px; }
.encrypted-lines i, .code-lines i { display: block; height: 6px; border-radius: 10px; }
.encrypted-lines i { background: linear-gradient(90deg, rgba(111,134,171,.35), rgba(111,134,171,.08)); }
.encrypted-lines i:nth-child(1) { width: 88%; }.encrypted-lines i:nth-child(2) { width: 67%; }.encrypted-lines i:nth-child(3) { width: 94%; }.encrypted-lines i:nth-child(4) { width: 56%; }.encrypted-lines i:nth-child(5) { width: 76%; }
.code-lines i { background: linear-gradient(90deg, rgba(44,218,162,.65) 0 14%, rgba(92,160,255,.42) 14% 41%, rgba(139,112,255,.28) 41% 75%, transparent 75%); }
.code-lines i:nth-child(2) { width: 72%; margin-inline-start: 12%; }.code-lines i:nth-child(3) { width: 86%; margin-inline-start: 6%; }.code-lines i:nth-child(4) { width: 61%; margin-inline-start: 18%; }.code-lines i:nth-child(5) { width: 78%; }
.decode-lock, .decode-check { position: absolute; inset-inline-end: 14px; bottom: 13px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; }
.decode-lock { color: #65d8ff; background: rgba(0,189,245,.12); }.decode-check { color: #35dfa5; background: rgba(40,217,154,.12); }
.decode-lock svg, .decode-check svg { width: 14px; height: 14px; }
.decode-flow { position: relative; display: grid; justify-items: center; gap: 7px; color: #63d7ff; }
.decode-flow::before, .decode-flow::after { content: ""; position: absolute; top: 17px; width: 27px; border-top: 1px dashed rgba(99,215,255,.3); }
.decode-flow::before { inset-inline-start: 0; }.decode-flow::after { inset-inline-end: 0; }
.decode-flow > span { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(99,215,255,.2); border-radius: 50%; background: rgba(0,189,245,.08); box-shadow: 0 0 25px rgba(0,189,245,.12); }
.decode-flow svg { width: 15px; height: 15px; }.decode-flow small { color: #7488a7; font-size: 8px; font-weight: 750; white-space: nowrap; }
.auth-trust-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.auth-trust-grid > span { min-width: 0; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 13px 14px; border: 1px solid rgba(131,159,200,.13); border-radius: 14px; background: rgba(255,255,255,.032); }
.auth-trust-grid > span > svg { grid-row: 1 / 3; width: 18px; height: 18px; color: #55d6ff; }
.auth-trust-grid strong { overflow: hidden; color: #e9f3ff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.auth-trust-grid small { margin-top: 3px; color: #6f83a1; font-size: 8px; }
.auth-form-panel { position: relative; isolation: isolate; min-height: 100vh; display: grid; place-items: center; padding: 88px clamp(22px, 4vw, 62px) 38px; overflow: hidden; background: radial-gradient(circle at 90% 0, rgba(98,104,255,.11), transparent 29%), radial-gradient(circle at 5% 94%, rgba(0,189,245,.08), transparent 28%), var(--bg); }
.auth-form-backdrop { position: absolute; z-index: -1; width: 560px; height: 560px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 50%; opacity: .38; }
.auth-form-backdrop::before, .auth-form-backdrop::after { content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); border-radius: 50%; }
.auth-form-backdrop::before { inset: 75px; }.auth-form-backdrop::after { inset: 150px; }
.auth-toolbar { position: absolute; z-index: 3; top: 22px; inset-inline-end: 25px; display: flex; gap: 8px; }
.auth-toolbar form { margin: 0; }.auth-toolbar .icon-btn { width: auto; min-width: 43px; padding: 0 10px; gap: 5px; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(12px); }
.auth-card-wrap { width: min(100%, 570px); }
.auth-card-wrap > .alert { margin-bottom: 14px; border-radius: 15px; box-shadow: var(--shadow-sm); }
.auth-card { position: relative; overflow: hidden; padding: clamp(27px, 3.2vw, 38px); border: 1px solid color-mix(in srgb, var(--line) 88%, var(--brand-indigo)); border-radius: 28px; background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 97%, var(--brand-blue)), var(--surface)); box-shadow: 0 35px 100px rgba(10,22,52,.18), inset 0 1px color-mix(in srgb, #fff 45%, transparent); }
html[data-theme="dark"] .auth-card { box-shadow: 0 38px 110px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.035); }
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,189,245,.78), rgba(112,92,255,.78), transparent); }
.auth-card::after { content: ""; position: absolute; width: 180px; height: 180px; inset-inline-end: -115px; top: -120px; border-radius: 50%; background: rgba(98,104,255,.08); filter: blur(2px); pointer-events: none; }
.auth-card-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.auth-card-head .eyebrow { margin-bottom: 5px; font-size: 10px; }.auth-card-head h2 { margin: 0; font-size: clamp(25px, 3vw, 31px); letter-spacing: -.8px; }
.auth-card-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; color: #119fd7; border: 1px solid rgba(0,189,245,.18); border-radius: 15px; background: linear-gradient(145deg, rgba(0,189,245,.13), rgba(98,104,255,.07)); box-shadow: inset 0 1px rgba(255,255,255,.22); }
.auth-card-icon-violet { color: #786df4; border-color: rgba(98,104,255,.2); background: linear-gradient(145deg, rgba(98,104,255,.14), rgba(149,101,255,.08)); }.auth-card-icon-rose { color: #e84b77; border-color: rgba(255,66,111,.18); background: linear-gradient(145deg, rgba(255,66,111,.12), rgba(149,101,255,.07)); }
.auth-card-icon svg { width: 22px; height: 22px; }
.auth-card > p { position: relative; z-index: 1; margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.google-auth-button { position: relative; z-index: 1; min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 15px; color: var(--text); border: 1px solid color-mix(in srgb, var(--line) 82%, var(--brand-blue)); border-radius: 15px; background: color-mix(in srgb, var(--surface-soft) 86%, transparent); font-size: 13px; font-weight: 780; box-shadow: 0 8px 25px rgba(20,42,84,.04); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.google-auth-button:hover { transform: translateY(-1px); border-color: rgba(66,133,244,.45); box-shadow: 0 13px 30px rgba(66,133,244,.1); }
.google-auth-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: #fff; box-shadow: 0 3px 12px rgba(20,40,80,.12); }.google-auth-icon svg { width: 20px; height: 20px; }
.google-auth-arrow { margin-inline-start: auto; color: var(--muted); }.google-auth-arrow svg { width: 15px; height: 15px; }
.auth-divider { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; margin: 19px 0; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.auth-form { position: relative; z-index: 1; gap: 15px; }
.auth-field { gap: 7px; }.auth-field > span:first-child, .auth-label-row { color: color-mix(in srgb, var(--text) 88%, var(--muted)); font-size: 11px; font-weight: 760; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.auth-label-row a { color: var(--brand-indigo); font-size: 10px; font-weight: 760; }
.auth-input-wrap { position: relative; display: block; }.auth-input-wrap > svg { position: absolute; z-index: 1; width: 17px; height: 17px; top: 50%; inset-inline-start: 15px; color: var(--muted); transform: translateY(-50%); pointer-events: none; transition: color .2s ease; }
.auth-input-wrap:focus-within > svg { color: var(--brand-indigo); }.auth-input-wrap .form-control { width: 100%; min-height: 51px; padding-inline-start: 45px; border-radius: 14px; background: color-mix(in srgb, var(--surface-soft) 92%, var(--surface)); font-size: 13px; }
.auth-input-wrap .form-control:focus { border-color: rgba(98,104,255,.55); box-shadow: 0 0 0 4px rgba(98,104,255,.09); }
.auth-password-grid { gap: 12px; }.auth-password-hint { display: flex; align-items: center; gap: 7px; margin-top: -4px; color: var(--muted); font-size: 9px; line-height: 1.5; }.auth-password-hint svg { width: 13px; height: 13px; color: var(--success); }
.auth-remember, .auth-terms { width: max-content; max-width: 100%; color: var(--muted); font-size: 10px; }.auth-remember input, .auth-terms input { accent-color: var(--brand-indigo); }.auth-terms { align-items: flex-start; line-height: 1.55; }
.auth-submit { position: relative; min-height: 54px; margin-top: 2px; border-radius: 15px; background: linear-gradient(115deg, #00bdf5 0%, #6268ff 62%, #795fff 100%); box-shadow: 0 15px 32px rgba(70,94,235,.23); }.auth-submit span { flex: 1; text-align: center; }.auth-submit svg { width: 17px; height: 17px; }
.auth-security-note { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 11px 12px; color: var(--muted); border: 1px solid color-mix(in srgb, var(--success) 15%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--success) 5%, var(--surface-soft)); font-size: 9px; line-height: 1.55; }.auth-security-note svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--success); }
.auth-links { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; margin-top: 19px; color: var(--muted); font-size: 11px; }.auth-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-indigo); font-weight: 780; }.auth-links a svg { width: 13px; height: 13px; }.auth-links-centered { justify-content: center; text-align: center; }
.recovery-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin: 4px 0 23px; }.recovery-steps > span { display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: 8px; white-space: nowrap; }.recovery-steps i { width: 27px; height: 27px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; background: var(--surface-soft); font-style: normal; font-size: 9px; font-weight: 800; }.recovery-steps .active { color: var(--brand-indigo); }.recovery-steps .active i { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--brand-blue), var(--brand-indigo)); box-shadow: 0 7px 17px rgba(83,104,232,.22); }.recovery-steps b { height: 1px; background: linear-gradient(90deg, var(--line), rgba(98,104,255,.35), var(--line)); }
.auth-card-state { text-align: center; }.auth-state-icon { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 18px; color: #ec5278; border: 1px solid rgba(255,66,111,.18); border-radius: 21px; background: linear-gradient(145deg, rgba(255,66,111,.13), rgba(98,104,255,.07)); }.auth-state-icon svg { width: 29px; height: 29px; }.auth-card-state .eyebrow { justify-content: center; }.auth-card-state > p { max-width: 390px; margin-inline: auto; }
.auth-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; padding: 0 7px; color: var(--muted); font-size: 8px; }.auth-footer > span { display: inline-flex; align-items: center; gap: 5px; }.auth-footer svg { width: 11px; height: 11px; color: var(--success); }
[dir="rtl"] .auth-submit svg, [dir="rtl"] .google-auth-arrow svg, [dir="rtl"] .decode-flow svg { transform: rotate(180deg); }

/* Settings and OAuth administration */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.settings-sidebar-card { position: sticky; top: 88px; }.settings-toggle, .oauth-switch { align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }.settings-toggle span, .oauth-switch span { display: block; }.settings-toggle strong, .oauth-switch strong { display: block; margin-bottom: 4px; font-size: 12px; }.settings-toggle small, .oauth-switch small { display: block; color: var(--muted); font-size: 10px; line-height: 1.55; }
.oauth-settings-card { position: relative; overflow: hidden; }.oauth-settings-card::after { content: "G"; position: absolute; inset-inline-end: -18px; bottom: -52px; color: rgba(66,133,244,.035); font: 900 170px/1 Arial, sans-serif; pointer-events: none; }
.oauth-title-row { display: flex; align-items: center; gap: 12px; }.google-mini-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: #4285f4; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(40,70,120,.09); font-size: 20px; font-weight: 800; }
.oauth-callback-box { position: relative; z-index: 1; display: grid; gap: 11px; margin-bottom: 19px; padding: 15px; border: 1px solid rgba(0,189,245,.16); border-radius: 15px; background: linear-gradient(125deg, rgba(0,189,245,.065), rgba(98,104,255,.04)); }.oauth-callback-box strong, .oauth-callback-box small { display: block; }.oauth-callback-box strong { font-size: 12px; }.oauth-callback-box small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.55; }.oauth-callback-value { display: flex; align-items: center; gap: 9px; }.oauth-callback-value code { min-width: 0; flex: 1; overflow-wrap: anywhere; padding: 11px 12px; color: var(--brand-indigo); border: 1px solid var(--line); border-radius: 11px; background: var(--surface); font-size: 10px; }.oauth-callback-value .btn { min-height: 39px; flex: 0 0 auto; font-size: 10px; }.oauth-callback-value .btn svg { width: 14px; height: 14px; }
.oauth-settings-card .form-label small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }.oauth-switches { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 17px; }.oauth-danger-switch { border-color: rgba(240,82,108,.18); background: rgba(240,82,108,.045); }.oauth-note { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; color: var(--muted); }.oauth-note > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand-blue); }

.installer-body { min-height: 100vh; padding: 45px 20px; background: radial-gradient(circle at 20% 0, rgba(0,189,245,.12), transparent 35%), var(--bg); }
.installer-shell { width: min(100%, 1100px); margin: 0 auto; }
.installer-head { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.installer-head > span:last-child, .installer-head strong, .installer-head small { display: block; }
.installer-head strong { font-size: 20px; }
.installer-head small { margin-top: 4px; color: var(--muted); }
.installer-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.requirement-list { display: grid; gap: 10px; }
.requirement-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border-radius: 11px; background: var(--surface-soft); font-size: 11px; }
.requirement-item i { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgba(229,72,95,.08); }
.requirement-item.ok i { background: var(--success); box-shadow: 0 0 0 4px rgba(19,168,118,.08); }
.requirement-item span { min-width: 0; flex: 1; }
.requirement-item small { color: var(--muted); text-align: end; }
@media (max-width: 980px) {
  .main-area { margin-inline-start: 0; }
  .section-grid, .installer-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand-panel { min-height: 360px; padding: 35px 28px; }
  .auth-brand-copy h1 { font-size: 40px; }
  .auth-trust-grid { display: none; }
  .auth-form-panel { min-height: 650px; }
}
@media (max-width: 640px) {
  .content { padding: 22px 15px 35px; }
  .form-grid, .stats-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .topbar-actions .user-details { display: none; }
  .auth-brand-panel { min-height: 300px; }
  .auth-brand-copy h1 { font-size: 34px; }
  .auth-form-panel { padding-inline: 15px; }
  .auth-card { padding: 24px 19px; }
  .message { max-width: 94%; }
}


@media (max-width: 1120px) {
  .auth-shell { grid-template-columns: minmax(430px, .9fr) minmax(480px, 1.1fr); }
  .auth-brand-panel { padding-inline: 34px; }
  .auth-brand-copy h1 { font-size: 48px; }
  .decode-visual { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); }
  .auth-trust-grid > span { grid-template-columns: 24px 1fr; padding: 11px; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar-card { position: static; }
}
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand-panel { min-height: auto; gap: 28px; padding: 28px clamp(22px, 6vw, 54px) 34px; }
  .auth-brand-content { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); align-items: center; gap: 26px; }
  .auth-brand-copy h1 { font-size: clamp(35px, 7vw, 52px); }
  .decode-visual { grid-template-columns: 1fr; }
  .decode-window-source, .decode-flow { display: none; }
  .decode-window { min-height: 130px; }
  .auth-trust-grid { display: none; }
  .auth-form-panel { min-height: auto; padding-block: 82px 35px; }
}
@media (max-width: 640px) {
  .auth-brand-panel { gap: 24px; padding: 22px 19px 29px; }
  .auth-brand .brand-mark { width: 48px; height: 48px; }.auth-brand .brand-logo { width: 37px; height: 37px; }.auth-brand .brand-title { font-size: 21px; }
  .auth-brand-content { grid-template-columns: 1fr; }
  .auth-brand-copy h1 { margin-bottom: 14px; font-size: 36px; letter-spacing: -1.8px; }.auth-brand-copy p { font-size: 12px; line-height: 1.75; }
  .decode-visual { display: none; }
  .auth-form-panel { padding: 76px 12px 27px; }
  .auth-toolbar { top: 17px; inset-inline-end: 14px; }
  .auth-card { padding: 25px 19px; border-radius: 22px; }
  .auth-card-head { align-items: flex-start; }.auth-card-icon { width: 43px; height: 43px; }.auth-card-head h2 { font-size: 25px; }
  .auth-password-grid { grid-template-columns: 1fr; }
  .auth-footer { align-items: flex-start; flex-direction: column; }
  .recovery-steps { gap: 5px; }.recovery-steps > span { font-size: 7px; }
  .oauth-switches { grid-template-columns: 1fr; }
  .oauth-callback-value { align-items: stretch; flex-direction: column; }.oauth-callback-value .btn { width: 100%; }
}