:root {
    --primary: #2563EB;
    --background: #0F172A;
    --sidebar: #1E293B;
    --surface: #111C31;
    --surface-soft: #17233A;
    --border: rgba(248, 250, 252, .09);
    --text: #F8FAFC;
    --muted: #94A3B8;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
}

* { letter-spacing: 0; }
body { background: var(--background); color: var(--text); min-height: 100vh; }
a { text-decoration: none; }
.app-shell { min-height: 100vh; display: flex; background: radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 34%), var(--background); }
.sidebar { width: 292px; background: rgba(30, 41, 59, .96); color: var(--text); padding: 1rem; border-right: 1px solid var(--border); backdrop-filter: blur(16px); }
.sidebar-brand { display: flex; gap: .75rem; align-items: center; padding: .5rem .35rem 1.1rem; }
.brand-mark { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), #38BDF8); font-weight: 800; box-shadow: 0 16px 35px rgba(37,99,235,.32); }
.brand-copy strong { display: block; line-height: 1; }
.brand-copy small { display: block; color: var(--muted); font-size: .76rem; margin-top: .25rem; }
.sidebar-nav { display: grid; gap: .25rem; }
.sidebar-nav .nav-link { color: #CBD5E1; border-radius: 8px; padding: .82rem .85rem; display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.sidebar-nav .nav-link i { font-size: 1.08rem; width: 22px; text-align: center; }
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { color: #fff; background: rgba(37, 99, 235, .18); box-shadow: inset 3px 0 0 var(--primary); }
.sidebar-footer { margin-top: 1rem; padding-top: 1rem; display: grid; gap: .8rem; }
.user-pill { display: flex; align-items: center; gap: .65rem; padding: .75rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(15,23,42,.36); }
.user-pill small { display: block; color: var(--muted); }
.content { flex: 1; padding: 1.25rem; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.topbar h1 { margin: 0; font-size: 1.72rem; font-weight: 800; }
.topbar-logout { white-space: nowrap; }
.eyebrow { color: #93C5FD; font-size: .78rem; text-transform: uppercase; font-weight: 700; }
.global-search { display: flex; align-items: center; gap: .65rem; width: min(460px, 44vw); background: rgba(15,23,42,.64); border: 1px solid var(--border); border-radius: 8px; padding: .72rem .9rem; }
.global-search input { width: 100%; color: var(--text); background: transparent; border: 0; outline: 0; }
.global-search input::placeholder { color: var(--muted); }
.icon-btn { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; color: var(--text); background: rgba(248,250,252,.08); border: 1px solid var(--border); }
.panel, .metric-card { background: rgba(17, 28, 49, .92); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 18px 45px rgba(2, 6, 23, .26); }
.panel { padding: 1rem; }
.metric-card .card-body { padding: 1rem; }
.metric-card .icon { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: rgba(37,99,235,.17); color: #93C5FD; font-size: 1.25rem; }
.metric-value { font-size: 1.6rem; font-weight: 800; color: var(--text); }
.metric-card h2.metric-value, .metric-card .metric-value, .metric-card .metric-value.text-success, .metric-card .metric-value.text-danger { color: var(--text) !important; }
.text-muted, .form-text { color: var(--muted) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-hover-bg: rgba(37,99,235,.08); --bs-table-hover-color: var(--text); }
.form-control, .form-select { background-color: rgba(15,23,42,.68); border-color: var(--border); color: var(--text); border-radius: 8px; }
.form-control:focus, .form-select:focus { background-color: rgba(15,23,42,.95); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(37,99,235,.18); }
.form-control::placeholder { color: var(--muted); }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-warning { background: var(--warning); border-color: var(--warning); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.fra-badge { border-radius: 999px; padding: .42rem .62rem; }
.fra-badge.success { background: rgba(16,185,129,.16); color: #6EE7B7; }
.fra-badge.warning { background: rgba(245,158,11,.16); color: #FCD34D; }
.fra-badge.danger { background: rgba(239,68,68,.16); color: #FCA5A5; }
.fra-badge.info { background: rgba(37,99,235,.18); color: #93C5FD; }
.fra-badge.muted { background: rgba(148,163,184,.16); color: #CBD5E1; }
.server-dot { width: .72rem; height: .72rem; display: inline-block; border-radius: 50%; margin-right: .45rem; box-shadow: 0 0 0 3px rgba(248,250,252,.08); vertical-align: -1px; }
.client-list-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.client-list-controls { display: flex; align-items: center; gap: .75rem; flex: 1 1 640px; flex-wrap: wrap; }
.client-page-search { display: flex; width: 100%; max-width: 420px; margin: 0; }
.client-filter-select { width: min(260px, 100%); flex: 0 0 auto; }
.client-new-button { white-space: nowrap; }
.client-row-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.mini-stat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .72rem .8rem; min-height: 52px; border-radius: 8px; border: 1px solid var(--border); background: rgba(15,23,42,.46); color: var(--text); }
.mini-stat i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(248,250,252,.08); }
.mini-stat span { color: var(--muted); font-size: .72rem; font-weight: 800; }
.mini-stat strong { font-size: 1.1rem; }
.mini-stat:hover, .mini-stat.active { color: #fff; border-color: rgba(37,99,235,.7); background: rgba(37,99,235,.16); }
.mini-stat.stat-active i { color: #6EE7B7; }
.mini-stat.stat-suspended i { color: #CBD5E1; }
.mini-stat.stat-today i { color: #93C5FD; }
.client-search { width: 100%; }
.filter-group .btn.active { background: rgba(37,99,235,.22); border-color: rgba(37,99,235,.8); color: #fff; }
.history-item { display: grid; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.history-item strong { font-size: .92rem; }
.history-item span, .history-item small { color: var(--muted); font-size: .82rem; }
.client-screen { padding: 1rem; }
.fra-tabs { gap: .35rem; border-bottom: 1px solid var(--border); }
.fra-tabs .nav-link { color: var(--muted); border: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; padding: .75rem .9rem; display: flex; align-items: center; gap: .45rem; }
.fra-tabs .nav-link:hover { color: var(--text); background: rgba(248,250,252,.05); }
.fra-tabs .nav-link.active { color: #fff; background: rgba(37,99,235,.14); border-bottom-color: var(--primary); }
.client-table { border-collapse: separate; border-spacing: 0 .55rem; }
.client-table thead th { color: var(--muted); font-size: .75rem; text-transform: uppercase; border: 0; padding-bottom: .35rem; }
.client-table tbody tr { background: rgba(15,23,42,.38); box-shadow: inset 4px 0 0 var(--due-color, var(--success)); }
.client-table tbody td { vertical-align: middle; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .85rem .75rem; }
.client-table tbody td:first-child { border-left: 1px solid var(--border); border-radius: 8px 0 0 8px; }
.client-table tbody td:last-child { border-right: 1px solid var(--border); border-radius: 0 8px 8px 0; }
.due-row.due-expired { --due-color: var(--danger); background: rgba(239,68,68,.06); }
.due-row.due-today { --due-color: var(--primary); background: rgba(37,99,235,.06); }
.due-row.due-tomorrow { --due-color: var(--warning); background: rgba(245,158,11,.07); }
.due-row.due-active { --due-color: var(--success); }
.due-row.due-suspended { --due-color: #64748B; background: rgba(100,116,139,.08); }
.client-name-cell { display: flex; align-items: center; gap: .7rem; min-width: 190px; }
.client-avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 800; color: #DBEAFE; background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(20,184,166,.9)); box-shadow: 0 10px 24px rgba(2,6,23,.28); }
.server-badge { display: inline-flex; align-items: center; gap: .2rem; max-width: 190px; padding: .34rem .56rem; border-radius: 999px; color: var(--text); border: 1px solid color-mix(in srgb, var(--server-color) 60%, transparent); background: color-mix(in srgb, var(--server-color) 18%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-badge .server-dot { margin-right: .2rem; box-shadow: none; }
.icon-action { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; }
.action-menu { background: #0F172A; border: 1px solid var(--border); border-radius: 8px; padding: .35rem; min-width: 180px; box-shadow: 0 24px 50px rgba(2,6,23,.36); }
.action-menu .dropdown-item { color: var(--text); border-radius: 6px; display: flex; align-items: center; gap: .55rem; padding: .55rem .65rem; background: transparent; border: 0; width: 100%; }
.action-menu .dropdown-item:hover { background: rgba(37,99,235,.14); color: #fff; }
.action-menu form { margin: 0; }
.empty-state { min-height: 320px; display: grid; place-items: center; align-content: center; gap: .55rem; text-align: center; border: 1px dashed var(--border); border-radius: 8px; background: rgba(15,23,42,.34); padding: 2rem; }
.empty-state i { font-size: 2rem; color: #93C5FD; }
.empty-state p { color: var(--muted); margin: 0 0 .35rem; }
.form-section { border: 1px solid var(--border); border-radius: 8px; background: rgba(15,23,42,.32); padding: 1rem; margin-bottom: 1rem; }
.form-section h2 { color: #BFDBFE; margin-bottom: .85rem; font-weight: 800; text-transform: uppercase; font-size: .78rem; }
.iptv-section { background: linear-gradient(135deg, rgba(20,184,166,.11), rgba(37,99,235,.08)); }
.client-card-list { display: grid; gap: .75rem; }
.client-mobile-list { display: none; }
.client-card-mobile { border: 1px solid var(--border); border-left: 4px solid var(--due-color, var(--success)); border-radius: 8px; background: rgba(15,23,42,.46); padding: .85rem; }
.client-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; margin-bottom: .75rem; }
.client-card-title { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.client-card-head strong { display: block; margin-bottom: .25rem; }
.client-card-phone { display: block; color: var(--muted); font-size: .85rem; }
.server-dot-only { display: inline-flex; align-items: center; justify-content: center; min-width: 1rem; padding-top: .2rem; }
.server-dot-only .server-dot { margin-right: 0; }
.client-card-meta { display: grid; gap: .45rem; color: var(--muted); font-size: .86rem; margin-bottom: .55rem; }
.client-card-meta span { display: flex; align-items: center; gap: .45rem; }
.client-card-status { margin-bottom: .75rem; }
.client-card-status .fra-badge { display: inline-flex; }
.client-card-actions { display: flex; align-items: stretch; gap: .45rem; flex-wrap: nowrap; }
.client-card-actions form { flex: 1 1 0; margin: 0; }
.client-card-actions .btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; }
.client-card-actions form .btn { width: 100%; }
.chart-bars { min-height: 210px; display: flex; align-items: end; gap: .75rem; }
.chart-column { flex: 1; min-width: 48px; height: 190px; display: grid; grid-template-rows: 1fr auto auto; gap: .35rem; align-items: end; text-align: center; }
.chart-bar { width: 100%; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #38BDF8, var(--primary)); min-height: 8px; }
.chart-column small, .chart-column span { color: var(--muted); font-size: .72rem; }
.chart-line { display: grid; gap: .45rem; margin-bottom: 1rem; }
.progress.slim { height: 8px; background: rgba(15,23,42,.7); border-radius: 999px; }
.progress-bar.success { background: var(--success); }
.progress-bar.warning { background: var(--warning); }
.progress-bar.danger { background: var(--danger); }
.chart-bar-group { display: flex; align-items: end; gap: .25rem; height: 150px; justify-content: center; }
.chart-bar.income { background: linear-gradient(180deg, #6EE7B7, var(--success)); }
.chart-bar.expense { background: linear-gradient(180deg, #FCA5A5, var(--danger)); }
.chart-compare .chart-column { min-width: 56px; }
.chart-legend { display: flex; gap: 1rem; color: var(--muted); font-size: .82rem; }
.chart-legend .legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .35rem; vertical-align: -2px; }
.chart-legend .legend.income { background: var(--success); }
.chart-legend .legend.expense { background: var(--danger); }
.qr-box { display: inline-block; padding: .75rem; border-radius: 8px; background: #fff; border: 1px solid var(--border); }
.login-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top left, rgba(37,99,235,.28), transparent 36%), var(--background); padding: 1rem; }
.login-screen { --login-bg: #050B1F; --login-card: rgba(8,20,48,.84); --login-border: rgba(59,130,246,.42); --login-primary: #2563EB; --login-primary-light: #38BDF8; --login-text: #F8FAFC; --login-muted: #94A3B8; --login-input: rgba(5,16,40,.78); position: relative; isolation: isolate; overflow: hidden; display: block; padding: clamp(1.25rem, 4vw, 3.5rem); background: radial-gradient(ellipse 70% 55% at 95% 0%, rgba(30,64,175,.36), transparent 68%), linear-gradient(135deg, #020716 0%, #071B43 52%, #030918 100%); }
.login-ambient { position: fixed; z-index: -2; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.login-ambient-top { width: min(70vw, 920px); aspect-ratio: 1; top: -36vw; left: -16vw; background: radial-gradient(circle, rgba(37,99,235,.42), rgba(14,165,233,.13) 42%, transparent 69%); }
.login-ambient-bottom { width: min(68vw, 940px); aspect-ratio: 1; right: -24vw; bottom: -40vw; background: radial-gradient(circle, rgba(56,189,248,.26), rgba(37,99,235,.08) 43%, transparent 70%); }
.login-grid { position: fixed; z-index: -1; inset: auto 0 0; height: min(36vh, 360px); pointer-events: none; opacity: .26; background-image: linear-gradient(rgba(96,165,250,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,.15) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, transparent, #000 65%); }
.login-shell { min-height: calc(100vh - clamp(2.5rem, 8vw, 7rem)); display: grid; place-items: center; }
.login-card { width: min(100%, 520px); padding: clamp(1.7rem, 4vw, 2.8rem); position: relative; background: linear-gradient(145deg, rgba(16,38,84,.9), var(--login-card)); border: 1px solid var(--login-border); border-radius: 25px; box-shadow: 0 34px 92px rgba(0,0,0,.56), 0 0 48px rgba(37,99,235,.16), inset 0 1px 0 rgba(255,255,255,.11), inset 0 -35px 70px rgba(2,8,25,.23); backdrop-filter: blur(20px); animation: login-card-enter .6s cubic-bezier(.2,.75,.25,1) both; }
.login-card::before { content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: linear-gradient(110deg, rgba(56,189,248,.8), transparent 23%, transparent 76%, rgba(37,99,235,.75)); opacity: .48; filter: blur(.2px); }
.login-brand { display: grid; justify-items: center; text-align: center; margin-bottom: 1.9rem; }
.login-brand-main { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.login-logo-wrap { width: 82px; height: 82px; padding: 5px; border-radius: 23px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(96,165,250,.25), rgba(37,99,235,.05)); border: 1px solid rgba(96,165,250,.42); box-shadow: 0 17px 40px rgba(37,99,235,.3), inset 0 1px rgba(255,255,255,.14); animation: login-logo-float 4.5s ease-in-out infinite; }
.login-logo { width: 100%; height: 100%; display: block; }
.login-official-logo-frame { width: min(100%, 430px); height: clamp(108px, 18vw, 148px); overflow: hidden; position: relative; border: 1px solid rgba(191,219,254,.48); border-radius: 17px; background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(219,234,254,.95)); box-shadow: 0 14px 34px rgba(2,6,23,.28), 0 0 28px rgba(56,189,248,.15), inset 0 1px rgba(255,255,255,.88); }
.login-official-logo-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.36), transparent 37%, rgba(255,255,255,.12)); }
.login-official-logo { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; }
.login-wordmark { text-align: left; }
.login-wordmark h1 { margin: 0; color: var(--login-text); font-weight: 850; letter-spacing: .02em; font-size: clamp(1.8rem, 5vw, 2.32rem); line-height: 1; }
.login-wordmark h1 span { color: #F8FAFC; }
.login-wordmark h1 strong { font-weight: 850; background: linear-gradient(110deg, #93C5FD, #38BDF8 56%, #2563EB); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-wordmark p { margin: .42rem 0 0; color: #9CB8E4; font-size: .84rem; }
.login-divider { display: flex; width: 100%; align-items: center; margin: 1.55rem 0 1rem; height: 2px; background: linear-gradient(90deg, transparent, rgba(59,130,246,.25) 18%, rgba(59,130,246,.25) 82%, transparent); }
.login-divider span { width: 42px; height: 2px; margin: auto; border-radius: 99px; background: #38BDF8; box-shadow: 0 0 12px 3px rgba(56,189,248,.8); }
.login-kicker { display: inline-flex; align-items: center; gap: .42rem; color: #93C5FD; font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.login-form { display: grid; gap: 1.1rem; }
.login-field { display: grid; gap: .48rem; }
.login-field label { color: #DCE8FF; font-size: .85rem; font-weight: 700; }
.login-input-wrap { position: relative; display: flex; align-items: center; }
.login-input-wrap > i { position: absolute; left: 1rem; z-index: 1; color: #7DB5FF; font-size: 1.05rem; pointer-events: none; }
.login-input-wrap .form-control { min-height: 56px; width: 100%; padding: .75rem 3rem .75rem 2.85rem; border-radius: 13px; color: var(--login-text); background: linear-gradient(105deg, rgba(7,20,49,.9), var(--login-input)); border: 1px solid rgba(96,165,250,.26); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 6px 16px rgba(0,0,0,.12); }
.login-input-wrap .form-control:focus { border-color: var(--login-primary-light); background: rgba(7,18,45,.98); box-shadow: 0 0 0 .24rem rgba(37,99,235,.18), 0 0 25px rgba(37,99,235,.18), inset 0 1px rgba(255,255,255,.04); }
.login-password-toggle { position: absolute; right: .45rem; width: 42px; height: 42px; display: grid; place-items: center; color: #8FB8F8; background: transparent; border: 0; border-radius: 10px; }
.login-password-toggle:hover { color: #E0F2FE; background: rgba(96,165,250,.12); }
.login-password-toggle:focus-visible { outline: 2px solid var(--login-primary-light); outline-offset: 1px; }
.login-submit { min-height: 56px; margin-top: .45rem; display: inline-flex; align-items: center; justify-content: center; gap: .58rem; border: 1px solid rgba(147,197,253,.5); border-radius: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #1748C5, #2563EB 52%, #0EA5E9); box-shadow: 0 16px 29px rgba(37,99,235,.31), 0 0 19px rgba(37,99,235,.16), inset 0 1px rgba(255,255,255,.27); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.login-submit:hover { color: #fff; filter: brightness(1.11); transform: translateY(-2px); box-shadow: 0 22px 37px rgba(37,99,235,.43), 0 0 25px rgba(56,189,248,.19), inset 0 1px rgba(255,255,255,.29); }
.login-submit:focus-visible { color: #fff; outline: 3px solid rgba(125,211,252,.75); outline-offset: 3px; }
.login-alert { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; border: 1px solid rgba(248,113,113,.35); border-left: 3px solid #FB7185; border-radius: 13px; font-size: .88rem; box-shadow: 0 10px 22px rgba(127,29,29,.14); }
.login-security { display: flex; justify-content: center; align-items: center; gap: .65rem; margin-top: 1.55rem; padding-top: 1.15rem; color: var(--login-muted); border-top: 1px solid rgba(148,163,184,.13); }
.login-security-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #7DD3FC; background: rgba(14,165,233,.11); border: 1px solid rgba(56,189,248,.17); border-radius: 10px; }
.login-security strong, .login-security small { display: block; }
.login-security strong { color: #DCE8FF; font-size: .78rem; }
.login-security small { margin-top: .08rem; font-size: .71rem; }
.login-security em { align-self: center; margin-left: auto; color: rgba(147,197,253,.46); font-size: .62rem; font-style: normal; font-weight: 800; letter-spacing: .09em; }
@keyframes login-card-enter { from { opacity: 0; transform: translateY(12px) scale(.986); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes login-logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Refinamento final do login: lockup vetorial integrado ao fundo escuro. */
.login-screen .login-card { width: min(100%, 620px); max-width: 620px; padding: 44px 48px; background: linear-gradient(145deg, rgba(14,35,79,.9), rgba(5,16,42,.92)); border-color: rgba(59,130,246,.48); box-shadow: 0 36px 100px rgba(0,0,0,.58), 0 0 56px rgba(37,99,235,.19), inset 0 1px 0 rgba(255,255,255,.09); }
.login-screen .login-brand { margin-bottom: 2rem; }
.login-screen .login-brand-main { gap: 1.15rem; }
.login-screen .login-logo { width: 94px; height: 94px; flex: 0 0 94px; display: block; filter: drop-shadow(0 14px 22px rgba(37,99,235,.38)); animation: login-logo-float 4.5s ease-in-out infinite; }
.login-screen .login-wordmark { text-align: left; }
.login-screen .login-wordmark-title { color: #F8FAFC; font-size: clamp(2rem, 4vw, 2.7rem); line-height: .98; font-weight: 900; letter-spacing: .018em; white-space: nowrap; }
.login-screen .login-wordmark-title span { color: #F8FAFC; }
.login-screen .login-wordmark-title strong { font-weight: 900; background: linear-gradient(110deg, #93C5FD, #38BDF8 56%, #2563EB); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-screen .login-wordmark p { margin: .5rem 0 0; color: #9BB9E7; font-size: 1rem; letter-spacing: .01em; }
.login-screen .login-divider { margin: 1.8rem 0 1.15rem; }
.login-screen .login-kicker { font-size: .72rem; }
.login-screen .login-form { gap: 1.2rem; }
.login-screen .login-input-wrap .form-control { min-height: 58px; font-size: 1rem; }
.login-screen .login-input-wrap .form-control:-webkit-autofill,
.login-screen .login-input-wrap .form-control:-webkit-autofill:hover,
.login-screen .login-input-wrap .form-control:-webkit-autofill:focus { -webkit-text-fill-color: #F8FAFC; -webkit-box-shadow: 0 0 0 1000px #07152F inset, 0 0 0 .24rem rgba(37,99,235,.18); transition: background-color 9999s ease-out 0s; }
.login-screen .login-submit { min-height: 58px; font-size: 1.04rem; }
.login-screen .login-security { margin-top: 1.75rem; }

.whatsapp-qr-box {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1rem;
    border: 1px dashed rgba(56, 189, 248, .38);
    border-radius: 18px;
    background: rgba(15, 23, 42, .46);
}

.whatsapp-qr-box img {
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
}
@media (min-width: 1200px) { .login-screen .login-card { max-width: 640px; padding: 48px 52px; } .login-screen .login-logo { width: 102px; height: 102px; flex-basis: 102px; } }
@media (min-width: 576px) and (max-width: 991.98px) { .login-screen .login-card { max-width: 540px; padding: 38px 40px; } }
@media (max-width: 575.98px) { .login-screen .login-card { width: calc(100% - 32px); max-width: 420px; padding: 28px 24px; } .login-screen .login-brand { margin-bottom: 1.55rem; } .login-screen .login-brand-main { gap: .75rem; } .login-screen .login-logo { width: 68px; height: 68px; flex-basis: 68px; } .login-screen .login-wordmark-title { font-size: 1.55rem; } .login-screen .login-wordmark p { margin-top: .34rem; font-size: .76rem; } .login-screen .login-divider { margin: 1.3rem 0 .85rem; } .login-screen .login-input-wrap .form-control { min-height: 54px; } }
.collapsed-sidebar .sidebar { width: 92px; }
.collapsed-sidebar .brand-copy, .collapsed-sidebar .sidebar-nav span, .collapsed-sidebar .sidebar-footer span, .collapsed-sidebar .user-pill div { display: none; }
.collapsed-sidebar .sidebar-nav .nav-link { justify-content: center; }
@media (min-width: 992px) { .sidebar { position: static; min-height: 100vh; height: auto; display: flex; flex-direction: column; transition: width .2s ease; } }
@media (max-width: 991.98px) { .content { padding: 1rem; } .topbar h1 { font-size: 1.35rem; } .sidebar { max-width: 88vw; } }
@media (max-width: 768px) { body { overflow-x: hidden; } .client-desktop-list { display: none; } .client-mobile-list { display: grid; } .client-list-controls { flex-direction: column; align-items: stretch; } .client-page-search, .client-filter-select, .client-new-button { width: 100%; max-width: none; } .global-search { width: 100%; } .client-card-actions .btn { font-size: .76rem; padding-left: .35rem; padding-right: .35rem; } }
@media (max-width: 575.98px) { .panel { padding: .85rem; } .metric-value { font-size: 1.25rem; } .topbar { align-items: flex-start; flex-wrap: wrap; } .topbar-logout span { display: none; } .login-screen { padding: 1rem; } .login-shell { min-height: calc(100vh - 2rem); } .login-card { padding: 1.55rem 1.25rem; border-radius: 20px; } .login-logo-wrap { width: 70px; height: 70px; } .login-official-logo-frame { height: 106px; border-radius: 14px; } .login-brand { margin-bottom: 1.45rem; } .login-brand-main { gap: .78rem; } .login-wordmark h1 { font-size: 1.65rem; } .login-wordmark p { font-size: .76rem; } .login-security em { display: none; } }

/* =========================================================
   FRA HUB SaaS landing + login
   ========================================================= */
body.landing-login-page {
    --landing-bg: #020716;
    --landing-card: rgba(7, 18, 43, .82);
    --landing-card-strong: rgba(11, 31, 74, .92);
    --landing-border: rgba(96, 165, 250, .28);
    --landing-border-strong: rgba(56, 189, 248, .42);
    --landing-primary: #2563EB;
    --landing-cyan: #38BDF8;
    --landing-text: #F8FAFC;
    --landing-muted: #9DB5D8;
    --landing-input: rgba(5, 15, 36, .82);
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 16% 12%, rgba(37, 99, 235, .35), transparent 30rem),
        radial-gradient(circle at 88% 4%, rgba(14, 165, 233, .22), transparent 32rem),
        linear-gradient(135deg, #020716 0%, #071C45 48%, #030816 100%);
    color: var(--landing-text);
}
.landing-login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(96, 165, 250, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 165, 250, .055) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 100%);
    z-index: -3;
}
.landing-orb {
    position: fixed;
    border-radius: 999px;
    filter: blur(12px);
    pointer-events: none;
    z-index: -2;
}
.landing-orb-a { width: 22rem; height: 22rem; left: -7rem; top: 9rem; background: rgba(37, 99, 235, .18); }
.landing-orb-b { width: 28rem; height: 28rem; right: -9rem; bottom: 4rem; background: rgba(14, 165, 233, .13); }
.landing-grid-bg {
    position: fixed;
    right: -8vw;
    bottom: -18vh;
    width: 72vw;
    height: 52vh;
    pointer-events: none;
    opacity: .48;
    transform: perspective(760px) rotateX(62deg) rotateZ(-6deg);
    background-image:
        radial-gradient(circle, rgba(56, 189, 248, .72) 1px, transparent 1.4px),
        linear-gradient(90deg, rgba(37, 99, 235, .18) 1px, transparent 1px);
    background-size: 18px 18px, 72px 72px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 84%, transparent 100%);
    z-index: -1;
}
.landing-container {
    width: min(100% - 32px, 1180px);
    margin-inline: auto;
}
.landing-header {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(18px);
    background: linear-gradient(180deg, rgba(2, 7, 22, .86), rgba(2, 7, 22, .58));
    border-bottom: 1px solid rgba(96, 165, 250, .14);
}
.landing-nav { min-height: 76px; padding: .65rem 0; }
.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: #fff;
}
.landing-brand:hover { color: #fff; }
.landing-brand img {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 12px 24px rgba(37, 99, 235, .48));
}
.landing-brand strong {
    display: block;
    font-size: 1.02rem;
    letter-spacing: .06em;
    line-height: 1;
}
.landing-brand em {
    color: var(--landing-cyan);
    font-style: normal;
}
.landing-brand small {
    display: block;
    color: var(--landing-muted);
    font-size: .74rem;
    margin-top: .22rem;
}
.landing-toggler {
    color: #fff;
    border: 1px solid var(--landing-border);
    border-radius: 14px;
    padding: .55rem .7rem;
    box-shadow: none;
}
.landing-links {
    align-items: center;
    gap: .25rem;
    padding-top: .75rem;
}
.landing-links .nav-link {
    color: #BFD7F7;
    border-radius: 999px;
    padding: .62rem .9rem;
}
.landing-links .nav-link:hover { color: #fff; background: rgba(96, 165, 250, .12); }
.landing-link-button { border: 1px solid rgba(96, 165, 250, .2); }
.landing-link-primary {
    color: #fff !important;
    background: linear-gradient(135deg, #2563EB, #0EA5E9);
    box-shadow: 0 14px 32px rgba(37, 99, 235, .25);
}
.landing-hero {
    display: grid;
    gap: clamp(2rem, 6vw, 4.75rem);
    padding: clamp(2.4rem, 7vw, 6.6rem) 0 clamp(2.4rem, 7vw, 5rem);
}
.landing-hero-copy {
    display: grid;
    align-content: center;
}
.landing-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    color: #BAE6FD;
    background: rgba(14, 165, 233, .12);
    border: 1px solid rgba(56, 189, 248, .24);
    border-radius: 999px;
    padding: .48rem .75rem;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .045em;
}
.landing-hero h1 {
    margin: 1.05rem 0 0;
    font-size: clamp(2.15rem, 8vw, 4.85rem);
    line-height: .96;
    font-weight: 900;
    letter-spacing: -.055em;
    max-width: 10ch;
}
.landing-lead {
    margin: 1.2rem 0 0;
    max-width: 660px;
    color: #BED1EE;
    font-size: clamp(1rem, 2.5vw, 1.18rem);
    line-height: 1.72;
}
.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.55rem;
}
.landing-cta,
.auth-submit {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 45%, #0EA5E9 100%);
    box-shadow: 0 18px 44px rgba(37, 99, 235, .34), inset 0 1px 0 rgba(255,255,255,.22);
}
.landing-cta:hover,
.auth-submit:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 22px 54px rgba(37, 99, 235, .46), 0 0 24px rgba(56, 189, 248, .2);
}
.landing-ghost {
    color: #DCEBFF;
    border: 1px solid rgba(96, 165, 250, .28);
    background: rgba(5, 15, 36, .58);
}
.landing-ghost:hover { color: #fff; border-color: rgba(56, 189, 248, .55); background: rgba(37, 99, 235, .16); }
.landing-actions .btn,
.landing-plan-card .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-radius: 15px;
    padding: .8rem 1.05rem;
    font-weight: 800;
}
.landing-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.3rem;
    color: #CFE6FF;
    font-size: .9rem;
}
.landing-trust-row span {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
}
.landing-trust-row i { color: #67E8F9; }
.auth-panel {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    padding: clamp(1.35rem, 5vw, 3rem);
    border: 1px solid var(--landing-border-strong);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(15, 44, 98, .78), rgba(3, 13, 34, .92)),
        rgba(8, 20, 48, .86);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .48),
        0 0 64px rgba(37, 99, 235, .18),
        inset 0 1px 0 rgba(255,255,255,.1);
    overflow: hidden;
}
.auth-panel::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 27px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.13), transparent 28%, rgba(56,189,248,.14) 72%, transparent);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    padding: 1px;
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}
.auth-panel-glow {
    position: absolute;
    left: 50%;
    top: 0;
    width: 55%;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #38BDF8, transparent);
    box-shadow: 0 0 28px #38BDF8;
    opacity: .9;
    z-index: -1;
}
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: left;
}
.auth-logo {
    width: clamp(74px, 15vw, 102px);
    height: clamp(74px, 15vw, 102px);
    filter: drop-shadow(0 16px 30px rgba(37, 99, 235, .5));
}
.auth-brand h2 {
    margin: 0;
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: .94;
    font-weight: 900;
    letter-spacing: .02em;
}
.auth-brand h2 span {
    color: transparent;
    background: linear-gradient(135deg, #67E8F9, #2563EB);
    -webkit-background-clip: text;
    background-clip: text;
}
.auth-brand p {
    margin: .45rem 0 0;
    color: #A9C5EA;
    font-size: clamp(.78rem, 2vw, 1rem);
}
.auth-divider {
    position: relative;
    height: 1px;
    margin: 1.5rem 0 1.2rem;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .32), transparent);
}
.auth-divider span {
    position: absolute;
    inset: -1px auto auto 50%;
    width: 54px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #38BDF8;
    box-shadow: 0 0 18px #38BDF8;
}
.landing-alert {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    border-radius: 16px;
    font-size: .9rem;
}
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    padding: .35rem;
    border: 1px solid rgba(96, 165, 250, .18);
    border-radius: 16px;
    background: rgba(5, 15, 36, .5);
}
.auth-tabs .nav-link {
    width: 100%;
    color: #AFC7E9;
    border-radius: 12px;
    font-weight: 800;
    border: 0;
}
.auth-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(37, 99, 235, .9), rgba(14, 165, 233, .72));
    box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
}
.auth-tab-content { padding-top: 1.15rem; }
.auth-form {
    display: grid;
    gap: 1rem;
}
.auth-field {
    display: grid;
    gap: .48rem;
    color: #DCEBFF;
    font-weight: 800;
    font-size: .88rem;
}
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input-wrap > i {
    position: absolute;
    left: 1rem;
    color: #82B7FF;
    z-index: 2;
}
.auth-input-wrap .form-control {
    min-height: 56px;
    padding-left: 2.85rem;
    padding-right: 3rem;
    color: #fff;
    border-radius: 15px;
    border-color: rgba(96, 165, 250, .25);
    background-color: var(--landing-input);
}
.auth-input-wrap .form-control:focus {
    border-color: rgba(56, 189, 248, .78);
    box-shadow: 0 0 0 .24rem rgba(37, 99, 235, .2), 0 0 22px rgba(56, 189, 248, .12);
}
.auth-password-toggle {
    position: absolute;
    right: .7rem;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #9CC4FF;
    border: 0;
    background: transparent;
    border-radius: 12px;
}
.auth-password-toggle:hover { background: rgba(96, 165, 250, .12); color: #fff; }
.auth-submit {
    min-height: 58px;
    border-radius: 16px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}
.auth-google {
    width: 100%;
    min-height: 52px;
    color: #DCEBFF;
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 15px;
    background: rgba(5, 15, 36, .58);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    opacity: .72;
}
.auth-google small { color: #94A3B8; }
.auth-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .95rem 0;
    color: #8EACD2;
    font-size: .78rem;
    text-transform: uppercase;
    font-weight: 800;
}
.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(96, 165, 250, .2);
}
.auth-terms,
.onboarding-terms {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: #BFD7F7;
    font-size: .9rem;
    line-height: 1.45;
}
.auth-terms input,
.onboarding-terms input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: .12rem;
    accent-color: #2563EB;
}
.auth-security {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .7rem;
    margin-top: 1.45rem;
    padding-top: 1.05rem;
    border-top: 1px solid rgba(96, 165, 250, .16);
    color: #BFD7F7;
}
.auth-security > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #67E8F9;
    background: rgba(14, 165, 233, .12);
    border: 1px solid rgba(56, 189, 248, .22);
}
.auth-security strong,
.auth-security small { display: block; }
.auth-security small { color: #8EA8CD; font-size: .78rem; }
.auth-security em {
    color: rgba(191, 219, 254, .38);
    font-style: normal;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.landing-section {
    padding: clamp(2.4rem, 7vw, 5rem) 0;
}
.landing-section-head {
    display: grid;
    gap: .8rem;
    max-width: 760px;
    margin-bottom: 1.45rem;
}
.landing-section-head h2 {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.035em;
}
.landing-section-head p {
    margin: 0;
    color: #B7CCE9;
    line-height: 1.7;
}
.benefit-grid,
.faq-grid {
    display: grid;
    gap: 1rem;
}
.benefit-card,
.faq-card,
.landing-plan-card {
    border: 1px solid rgba(96, 165, 250, .18);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(10, 27, 60, .82), rgba(5, 15, 36, .72));
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}
.benefit-card,
.faq-card {
    padding: 1.15rem;
}
.benefit-card i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #67E8F9;
    background: rgba(14, 165, 233, .13);
    border: 1px solid rgba(56, 189, 248, .2);
    margin-bottom: .9rem;
}
.benefit-card h3,
.faq-card h3 {
    font-size: 1.02rem;
    font-weight: 900;
    margin: 0 0 .45rem;
}
.benefit-card p,
.faq-card p {
    color: #AFC7E9;
    margin: 0;
    line-height: 1.6;
}
.plan-grid {
    display: grid;
    gap: 1rem;
}
.landing-plan-card {
    position: relative;
    padding: 1.2rem;
    display: grid;
    gap: .85rem;
}
.landing-plan-card.featured {
    border-color: rgba(56, 189, 248, .52);
    box-shadow: 0 24px 70px rgba(37, 99, 235, .2);
}
.plan-badge {
    position: absolute;
    right: 1rem;
    top: 1rem;
    color: #05112A;
    background: #67E8F9;
    border-radius: 999px;
    padding: .28rem .55rem;
    font-size: .72rem;
    font-weight: 900;
}
.landing-plan-card h3 {
    margin: .2rem 0 0;
    font-size: 1.35rem;
    font-weight: 900;
}
.landing-plan-card p {
    color: #AFC7E9;
    margin: 0;
    min-height: 2.6em;
}
.plan-price {
    display: flex;
    align-items: baseline;
    gap: .2rem;
}
.plan-price strong {
    font-size: 2rem;
    font-weight: 900;
}
.plan-price small,
.plan-price span { color: #9DB5D8; }
.plan-limit {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    color: #BAE6FD;
    font-weight: 800;
}
.landing-plan-card ul,
.frahub-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .55rem;
    color: #C7DAF3;
}
.landing-plan-card li,
.frahub-feature-list li {
    display: flex;
    gap: .45rem;
    align-items: flex-start;
}
.landing-plan-card li i,
.frahub-feature-list li i { color: #67E8F9; }
.landing-footer {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: 2rem 0 6rem;
    color: #8EA8CD;
    border-top: 1px solid rgba(96, 165, 250, .14);
}
.landing-mobile-sticky {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    color: #fff;
    border-radius: 18px;
    font-weight: 900;
    background: linear-gradient(135deg, #1D4ED8, #0EA5E9);
    box-shadow: 0 18px 46px rgba(37, 99, 235, .46);
}
.landing-mobile-sticky:hover { color: #fff; }

/* FRA HUB SaaS usage and onboarding */
.frahub-plan-panel {
    display: grid;
    gap: 1rem;
    align-items: center;
    border-color: rgba(56, 189, 248, .22);
    background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(15, 23, 42, .86));
}
.frahub-plan-copy h2 { margin: .15rem 0 .35rem; font-weight: 900; }
.frahub-plan-copy p { margin: 0; color: var(--muted); }
.frahub-plan-meter { min-width: min(100%, 280px); display: grid; gap: .4rem; }
.frahub-plan-meter small { color: var(--muted); }
.frahub-upgrade-hero {
    display: grid;
    gap: 1rem;
    align-items: center;
    background: radial-gradient(circle at top right, rgba(56, 189, 248, .16), transparent 36%), rgba(17, 28, 49, .92);
}
.frahub-upgrade-hero h2 { margin: .2rem 0 .5rem; font-weight: 900; }
.frahub-upgrade-hero p { margin: 0; color: var(--muted); max-width: 760px; }
.frahub-usage-ring {
    width: 138px;
    height: 138px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-align: center;
    margin-inline: auto;
    background:
        radial-gradient(circle at center, #111C31 58%, transparent 60%),
        conic-gradient(var(--primary) var(--usage), rgba(148, 163, 184, .18) 0);
}
.frahub-usage-ring strong,
.frahub-usage-ring small { display: block; }
.frahub-usage-ring strong { font-size: 1.65rem; line-height: 1; }
.frahub-usage-ring small { max-width: 86px; color: var(--muted); font-size: .75rem; line-height: 1.2; }
.frahub-upgrade-card {
    color: var(--text);
    background: rgba(17, 28, 49, .92);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.frahub-upgrade-card.current { border-color: rgba(56, 189, 248, .46); box-shadow: 0 20px 48px rgba(37, 99, 235, .14); }
.frahub-plan-price {
    display: flex;
    align-items: baseline;
    gap: .25rem;
}
.frahub-plan-price strong { font-size: 2rem; font-weight: 900; }
.frahub-plan-price span,
.frahub-plan-price small { color: var(--muted); }
.onboarding-wrap {
    min-height: calc(100vh - 180px);
    display: grid;
    place-items: start center;
}
.onboarding-card {
    width: min(100%, 760px);
    border-radius: 18px;
    background: radial-gradient(circle at top left, rgba(56, 189, 248, .14), transparent 32%), rgba(17, 28, 49, .94);
}
.onboarding-hero h2 {
    margin: .25rem 0 .55rem;
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    font-weight: 900;
}
.onboarding-hero p { color: var(--muted); margin-bottom: 1rem; }
.onboarding-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(56, 189, 248, .2);
    border-radius: 16px;
    background: rgba(37, 99, 235, .12);
    margin-bottom: 1rem;
}
.onboarding-plan span,
.onboarding-plan small { display: block; color: var(--muted); }
.onboarding-plan strong { display: block; font-size: 1.35rem; }
.onboarding-plan i { color: #67E8F9; font-size: 1.8rem; }

@media (min-width: 576px) {
    .benefit-grid,
    .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .landing-links { padding-top: 0; }
    .landing-hero { grid-template-columns: minmax(0, 1.06fr) minmax(480px, .94fr); align-items: center; }
    .auth-panel { max-width: 620px; padding: 44px 48px; }
    .landing-mobile-sticky { display: none; }
    .frahub-plan-panel { grid-template-columns: minmax(0, 1fr) minmax(240px, .42fr) auto; }
    .frahub-upgrade-hero { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 1200px) {
    .auth-panel { max-width: 640px; padding: 48px 52px; }
    .plan-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .landing-plan-card { padding: 1.05rem; }
    .landing-plan-card h3 { font-size: 1.18rem; }
    .landing-plan-card p { font-size: .9rem; }
    .landing-plan-card .btn { padding-inline: .75rem; }
}
@media (max-width: 991.98px) {
    .landing-links {
        align-items: stretch;
        border: 1px solid rgba(96, 165, 250, .14);
        border-radius: 20px;
        padding: .8rem;
        margin-top: .7rem;
        background: rgba(5, 15, 36, .82);
    }
    .landing-links .nav-link { text-align: center; }
    .landing-hero-copy { text-align: center; justify-items: center; }
    .landing-hero h1 { max-width: 12ch; }
    .landing-section-head { text-align: center; justify-items: center; margin-inline: auto; }
}
@media (max-width: 575.98px) {
    .landing-container { width: min(100% - 24px, 420px); }
    .landing-nav { min-height: 66px; }
    .landing-brand img { width: 42px; height: 42px; }
    .landing-brand small { display: none; }
    .landing-hero { padding-top: 1.75rem; }
    .landing-hero h1 { font-size: clamp(2.05rem, 13vw, 3.1rem); }
    .landing-actions { width: 100%; }
    .landing-actions .btn { width: 100%; }
    .landing-trust-row { justify-content: center; }
    .auth-panel {
        max-width: 420px;
        padding: 28px 24px;
        border-radius: 24px;
    }
    .auth-brand { gap: .7rem; }
    .auth-logo { width: 68px; height: 68px; }
    .auth-brand h2 { font-size: 1.68rem; }
    .auth-brand p { font-size: .72rem; }
    .auth-input-wrap .form-control { min-height: 54px; }
    .auth-security { grid-template-columns: auto 1fr; }
    .auth-security em { display: none; }
    .benefit-card,
    .faq-card,
    .landing-plan-card { border-radius: 18px; }
    .landing-footer { padding-bottom: 5.5rem; justify-content: center; text-align: center; }
    .frahub-usage-ring { width: 118px; height: 118px; }
    .onboarding-plan { align-items: flex-start; }
}

/* Base visual FRA HUB — acabamento premium e comportamento responsivo global. */
:root {
    --primary-strong: #3B82F6;
    --primary-soft: rgba(59, 130, 246, .16);
    --surface-elevated: #17243d;
    --surface-input: rgba(8, 18, 38, .76);
    --border-strong: rgba(148, 163, 184, .18);
    --shadow-card: 0 18px 44px rgba(2, 6, 23, .24);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
}

html { min-width: 320px; scroll-behavior: smooth; }
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }
button, .btn, .nav-link, .dropdown-item { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(125, 211, 252, .88); outline-offset: 3px; }

.app-shell { position: relative; isolation: isolate; }
.app-shell::after {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    content: "";
    background: radial-gradient(circle at 84% 3%, rgba(59, 130, 246, .11), transparent 24%), radial-gradient(circle at 18% 100%, rgba(14, 165, 233, .07), transparent 28%);
}
.sidebar {
    width: 300px;
    padding: 1rem .85rem;
    background: linear-gradient(180deg, rgba(22, 35, 60, .98), rgba(14, 25, 45, .98));
    border-right-color: var(--border-strong);
}
.sidebar-brand { gap: .8rem; padding: .55rem .45rem 1.3rem; }
.brand-mark {
    width: 46px;
    height: 46px;
    padding: 3px;
    border-radius: var(--radius-md);
    letter-spacing: -.04em;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .3), inset 0 1px rgba(255, 255, 255, .22);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sidebar-close { display: none; }
.skip-link {
    position: fixed;
    z-index: 2000;
    top: .75rem;
    left: 50%;
    padding: .65rem .9rem;
    border-radius: 10px;
    color: #07152F;
    background: #E0F2FE;
    font-weight: 800;
    transform: translate(-50%, -160%);
    transition: transform .16s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }
.brand-copy strong { font-size: .96rem; letter-spacing: .01em; }
.brand-copy small { max-width: 170px; font-size: .7rem; line-height: 1.3; }
.sidebar-nav { gap: .35rem; }
.sidebar-nav .nav-link {
    min-height: 46px;
    padding: .78rem .85rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: .92rem;
    font-weight: 650;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.sidebar-nav .nav-link:hover { transform: translateX(2px); border-color: rgba(96, 165, 250, .14); }
.sidebar-nav .nav-link.active {
    border-color: rgba(96, 165, 250, .24);
    background: linear-gradient(90deg, rgba(37, 99, 235, .28), rgba(37, 99, 235, .08));
    box-shadow: inset 3px 0 0 #60A5FA, 0 8px 18px rgba(2, 6, 23, .13);
}
.sidebar-footer { padding: 1.2rem .15rem .15rem; }
.user-pill {
    border-radius: var(--radius-md);
    border-color: var(--border-strong);
    background: linear-gradient(135deg, rgba(15, 23, 42, .78), rgba(30, 41, 59, .48));
}
.user-pill > i { color: #93C5FD; font-size: 1.25rem; }

.content { max-width: 1920px; padding: clamp(1rem, 2vw, 2rem); }
.topbar {
    min-height: 72px;
    margin-bottom: clamp(1.15rem, 2vw, 1.85rem);
    padding: .8rem 1rem;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, .46);
    box-shadow: 0 12px 26px rgba(2, 6, 23, .12);
    backdrop-filter: blur(12px);
}
.topbar h1 { font-size: clamp(1.35rem, 2vw, 1.78rem); letter-spacing: -.025em; }
.eyebrow { display: block; margin-bottom: .15rem; color: #93C5FD; letter-spacing: .075em; }
.topbar-logout { min-height: 38px; border-color: rgba(148, 163, 184, .28); }

.panel, .metric-card {
    overflow: hidden;
    border-color: rgba(148, 163, 184, .14);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.panel { padding: clamp(1rem, 1.6vw, 1.35rem); }
.metric-card {
    position: relative;
    background: linear-gradient(145deg, rgba(25, 40, 67, .96), rgba(14, 25, 45, .96));
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.metric-card:hover { transform: translateY(-2px); border-color: rgba(96, 165, 250, .3); box-shadow: 0 22px 45px rgba(2, 6, 23, .32); }
.metric-card .card-body { padding: clamp(1rem, 1.6vw, 1.25rem); }
.metric-card .icon { border-radius: 12px; background: linear-gradient(145deg, rgba(59, 130, 246, .25), rgba(14, 165, 233, .11)); }
.metric-value { letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

.btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: 9px;
    font-weight: 700;
    line-height: 1.15;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { min-height: 32px; }
.btn-primary { box-shadow: 0 9px 18px rgba(37, 99, 235, .24); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 13px 24px rgba(37, 99, 235, .34); }
.btn-outline-light { border-color: rgba(203, 213, 225, .3); }
.btn-outline-light:hover { background: rgba(248, 250, 252, .1); border-color: rgba(248, 250, 252, .58); }
.icon-btn { min-width: 42px; min-height: 42px; border-radius: 10px; }
.icon-action { min-width: 34px; min-height: 34px; border-radius: 9px; }

.form-label { margin-bottom: .42rem; color: #CBD5E1; font-size: .84rem; font-weight: 700; }
.form-control, .form-select {
    min-height: 42px;
    padding: .6rem .75rem;
    border-color: rgba(148, 163, 184, .2);
    border-radius: 10px;
    background-color: var(--surface-input);
}
.form-select { background-position: right .8rem center; }
textarea.form-control { min-height: 104px; resize: vertical; }
.form-control:hover, .form-select:hover { border-color: rgba(148, 163, 184, .36); }
.form-control:focus, .form-select:focus { border-color: #60A5FA; box-shadow: 0 0 0 .22rem rgba(59, 130, 246, .16); }
.form-text { margin-top: .42rem; font-size: .78rem; }
.form-section { border-color: rgba(148, 163, 184, .15); border-radius: var(--radius-md); padding: clamp(1rem, 1.7vw, 1.25rem); }
.form-section h2 { letter-spacing: .08em; }

.table-responsive { width: 100%; border: 1px solid rgba(148, 163, 184, .13); border-radius: 12px; }
.table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .82rem .9rem; vertical-align: middle; }
.table > thead > tr > * {
    border-bottom-width: 1px;
    color: #94A3B8;
    background: rgba(15, 23, 42, .68);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table > tbody > tr { transition: background-color .15s ease; }
.table > tbody > tr:hover > * { background: rgba(37, 99, 235, .07); }
.client-table { margin: 0 -1px; }
.client-table thead th { background: transparent; }
.client-table tbody td { padding: .82rem .75rem; }
.action-menu { border-color: rgba(148, 163, 184, .2); border-radius: 12px; }
.fra-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 1px; }
.fra-tabs .nav-link { flex: 0 0 auto; min-height: 42px; border-radius: 10px 10px 0 0; font-size: .88rem; font-weight: 700; }
.fra-tabs .nav-link.active { background: linear-gradient(180deg, rgba(37, 99, 235, .2), rgba(37, 99, 235, .08)); }

.mini-stat { min-height: 58px; border-radius: 12px; border-color: rgba(148, 163, 184, .14); transition: transform .16s ease, border-color .16s ease, background-color .16s ease; }
.mini-stat:hover { transform: translateY(-1px); }
.empty-state { min-height: 260px; border-radius: var(--radius-md); }
.empty-state .btn { margin-top: .35rem; }
.history-item { padding: .9rem 0; }
.feature-status-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.15rem, 2vw, 1.45rem);
    border: 1px solid rgba(148, 163, 184, .17);
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, rgba(22, 37, 63, .94), rgba(13, 24, 44, .94));
    box-shadow: var(--shadow-card);
}
.feature-status-ready { border-color: rgba(16, 185, 129, .28); }
.feature-status-planned { border-color: rgba(96, 165, 250, .24); }
.feature-status-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #DCFCE7;
    background: rgba(16, 185, 129, .16);
    font-size: 1.35rem;
}
.feature-status-planned .feature-status-icon { color: #BFDBFE; background: rgba(59, 130, 246, .16); }
.feature-status-kicker { display: block; margin-bottom: .35rem; color: #93C5FD; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.chart-bars { min-width: 0; overflow-x: auto; padding: .25rem .15rem .5rem; }
.chart-column { flex: 0 0 clamp(50px, 8vw, 78px); }
.chart-legend { flex-wrap: wrap; }

@media (min-width: 992px) {
    .content { min-height: 100vh; }
    .topbar { position: static; }
    .collapsed-sidebar .sidebar { width: 88px; }
    .collapsed-sidebar .sidebar-brand { justify-content: center; }
    .collapsed-sidebar .brand-mark { width: 44px; height: 44px; }
}

@media (max-width: 991.98px) {
    .sidebar { width: min(88vw, 330px); padding: 1rem .8rem; }
    .sidebar-brand { padding-top: .4rem; }
    .sidebar-close { display: inline-grid; }
    .content { padding: 1rem; }
    .topbar { min-height: 64px; margin-bottom: 1.2rem; }
}

@media (max-width: 767.98px) {
    .content { padding: .8rem; }
    .topbar { gap: .7rem; padding: .7rem .75rem; border-radius: 12px; }
    .topbar h1 { font-size: 1.28rem; }
    .eyebrow { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .panel { padding: 1rem; border-radius: 12px; }
    .metric-card { border-radius: 12px; }
    .metric-card .card-body { padding: .9rem; }
    .metric-card .icon { width: 38px; height: 38px; font-size: 1.05rem; }
    .metric-value { font-size: 1.35rem; }
    .filter-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .filter-group .btn { width: 100%; }
    .fra-tabs { margin-right: -.15rem; }
    .fra-tabs .nav-link { padding: .66rem .72rem; font-size: .82rem; }
    .form-section { padding: .9rem; }
    .table-responsive { border-radius: 10px; }
    .table > :not(caption) > * > * { padding: .72rem .75rem; }
    .table-responsive:has(> table[data-mobile-cards="true"]) { overflow: visible; border: 0; background: transparent; }
    .table[data-mobile-cards="true"],
    .table[data-mobile-cards="true"] tbody,
    .table[data-mobile-cards="true"] tr,
    .table[data-mobile-cards="true"] td { display: block; width: 100%; }
    .table[data-mobile-cards="true"] thead { display: none; }
    .table[data-mobile-cards="true"] tbody { display: grid; gap: .7rem; }
    .table[data-mobile-cards="true"] tbody tr {
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .16);
        border-radius: 12px;
        background: rgba(15, 23, 42, .56);
        box-shadow: 0 10px 24px rgba(2, 6, 23, .14);
    }
    .table[data-mobile-cards="true"] tbody td {
        display: grid;
        grid-template-columns: minmax(92px, 42%) minmax(0, 1fr);
        align-items: center;
        gap: .75rem;
        min-height: 44px;
        padding: .7rem .8rem;
        border: 0;
        border-bottom: 1px solid rgba(148, 163, 184, .11);
        text-align: right;
    }
    .table[data-mobile-cards="true"] tbody td:last-child { border-bottom: 0; }
    .table[data-mobile-cards="true"] tbody td::before {
        content: attr(data-label);
        color: #94A3B8;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
    }
    .table[data-mobile-cards="true"] tbody td[data-label=""] { display: flex; justify-content: flex-end; }
    .table[data-mobile-cards="true"] tbody td[data-label=""]::before { display: none; }
    .table[data-mobile-cards="true"] tbody td[colspan] { display: block; text-align: left; }
    .table[data-mobile-cards="true"] tbody td[colspan]::before { display: none; }
    .table[data-mobile-cards="true"] tbody td .btn { min-height: 36px; }
    .table[data-mobile-cards="true"] tbody td .d-flex { justify-content: flex-end; }
    .chart-bars { gap: .55rem; }
    .chart-column { flex-basis: 54px; }
    .feature-status-card { gap: .8rem; padding: 1rem; }
    .feature-status-icon { flex-basis: 40px; width: 40px; height: 40px; font-size: 1.15rem; }
}

@media (max-width: 420px) {
    .content { padding: .65rem; }
    .topbar { align-items: center; }
    .topbar-logout { min-width: 38px; padding-inline: .55rem; }
    .metric-value { font-size: 1.2rem; }
    .panel { padding: .85rem; }
    .filter-group { grid-template-columns: 1fr; }
    .client-card-actions { flex-wrap: wrap; }
    .client-card-actions form, .client-card-actions > .btn { flex: 1 1 calc(50% - .3rem); }
}

/* Final SaaS overrides kept after legacy global rules */
.frahub-plan-panel {
    display: grid;
    gap: 1rem;
    align-items: center;
    border-color: rgba(56, 189, 248, .22);
    background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(15, 23, 42, .86));
}
.frahub-upgrade-hero {
    display: grid;
    gap: 1rem;
    align-items: center;
    background: radial-gradient(circle at top right, rgba(56, 189, 248, .16), transparent 36%), rgba(17, 28, 49, .92);
}
.onboarding-card {
    width: min(100%, 760px);
    border-radius: 18px;
    background: radial-gradient(circle at top left, rgba(56, 189, 248, .14), transparent 32%), rgba(17, 28, 49, .94);
}
@media (min-width: 992px) {
    .frahub-plan-panel { grid-template-columns: minmax(0, 1fr) minmax(240px, .42fr) auto; }
    .frahub-upgrade-hero { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Landing v2 - fluxo separado: apresentação, cadastro e login limpo */
.landing-login-page .landing-container {
    width: min(100% - 40px, 1440px);
}
.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: #7DD3FC;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.landing-hero-wide {
    min-height: calc(100vh - 86px);
    padding-block: clamp(3rem, 7vw, 7rem);
}
.landing-hero-wide .landing-hero-copy {
    max-width: 780px;
}
.landing-hero-wide .landing-hero-copy h1 {
    max-width: 13ch;
    font-size: clamp(2.8rem, 5.8vw, 5.8rem);
    line-height: .95;
}
.landing-hero-wide .landing-lead {
    max-width: 720px;
    font-size: clamp(1.04rem, 1.45vw, 1.28rem);
}
.landing-proof-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1.5rem;
}
.landing-proof-row div {
    padding: .9rem;
    border: 1px solid rgba(96, 165, 250, .18);
    border-radius: 18px;
    background: rgba(5, 15, 36, .58);
}
.landing-proof-row strong,
.landing-proof-row span {
    display: block;
}
.landing-proof-row strong {
    color: #F8FAFC;
    font-size: .92rem;
}
.landing-proof-row span {
    color: #9DB5D8;
    font-size: .82rem;
    margin-top: .2rem;
}
.landing-demo-card {
    width: min(100%, 560px);
    justify-self: end;
    align-self: center;
    padding: clamp(1.2rem, 2vw, 1.7rem);
    border: 1px solid rgba(56, 189, 248, .34);
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, .18), transparent 35%),
        linear-gradient(145deg, rgba(12, 38, 88, .86), rgba(3, 12, 31, .92));
    box-shadow: 0 34px 90px rgba(0, 0, 0, .42), 0 0 70px rgba(37, 99, 235, .16);
}
.demo-card-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(96, 165, 250, .16);
}
.demo-card-head img {
    width: 58px;
    height: 58px;
    filter: drop-shadow(0 14px 24px rgba(37, 99, 235, .42));
}
.demo-card-head strong,
.demo-card-head span {
    display: block;
}
.demo-card-head strong {
    font-size: 1.12rem;
}
.demo-card-head span {
    color: #9DB5D8;
    font-size: .86rem;
}
.demo-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    margin: 1rem 0;
}
.demo-metrics div {
    padding: 1rem .8rem;
    border: 1px solid rgba(96, 165, 250, .16);
    border-radius: 18px;
    background: rgba(5, 15, 36, .56);
}
.demo-metrics span,
.demo-metrics strong {
    display: block;
}
.demo-metrics span {
    color: #9DB5D8;
    font-size: .78rem;
}
.demo-metrics strong {
    margin-top: .25rem;
    font-size: 1.7rem;
    line-height: 1;
}
.demo-client-list {
    display: grid;
    gap: .75rem;
}
.demo-client-list div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .85rem;
    border: 1px solid rgba(96, 165, 250, .15);
    border-radius: 16px;
    background: rgba(15, 23, 42, .52);
}
.demo-client-list i {
    color: #67E8F9;
}
.demo-client-list span {
    color: #DCEBFF;
}
.demo-client-list strong {
    color: #9DB5D8;
    font-size: .82rem;
    text-align: right;
}
.register-section {
    padding-top: clamp(2rem, 5vw, 4rem);
}
.register-head {
    max-width: 920px;
}
.register-layout {
    display: grid;
    gap: 1.2rem;
}
.register-panel {
    max-width: none;
    margin: 0;
}
.register-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.register-panel-head h3 {
    margin: .25rem 0 0;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 900;
}
.register-panel-head img {
    width: 74px;
    height: 74px;
    filter: drop-shadow(0 14px 24px rgba(37, 99, 235, .42));
}
.selected-plan-strip {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(56, 189, 248, .28);
    border-radius: 18px;
    background: rgba(14, 165, 233, .11);
}
.selected-plan-strip span,
.selected-plan-strip small {
    color: #9DB5D8;
}
.selected-plan-strip strong {
    color: #F8FAFC;
    font-size: 1.2rem;
}
.register-side-card {
    padding: 1.35rem;
    border: 1px solid rgba(96, 165, 250, .18);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(10, 27, 60, .82), rgba(5, 15, 36, .72));
}
.register-side-card h3 {
    margin: .35rem 0 1rem;
    font-size: 1.45rem;
    font-weight: 900;
}
.register-side-card ul {
    display: grid;
    gap: .85rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.register-side-card li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    color: #BFD7F7;
}
.register-side-card i {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: #67E8F9;
    border: 1px solid rgba(56, 189, 248, .22);
    border-radius: 14px;
    background: rgba(14, 165, 233, .12);
}
.register-side-card strong {
    color: #fff;
}
.landing-plan-card.selected {
    border-color: rgba(103, 232, 249, .76);
    box-shadow: 0 24px 78px rgba(37, 99, 235, .26), inset 0 0 0 1px rgba(103, 232, 249, .18);
}
.landing-register-teaser {
    display: grid;
    gap: 1rem;
    align-items: center;
    padding: 1.4rem;
    border: 1px solid rgba(56, 189, 248, .25);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(14, 165, 233, .11), rgba(5, 15, 36, .72));
}
.landing-register-teaser h2 {
    margin: .35rem 0 .45rem;
    font-size: clamp(1.45rem, 3vw, 2.4rem);
    font-weight: 900;
}
.landing-register-teaser p {
    margin: 0;
    color: #B7CCE9;
}
.steps-grid {
    display: grid;
    gap: 1rem;
}
.step-card {
    padding: 1.2rem;
    border: 1px solid rgba(96, 165, 250, .18);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(10, 27, 60, .82), rgba(5, 15, 36, .72));
}
.step-card > strong {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #06112A;
    border-radius: 14px;
    background: #67E8F9;
}
.step-card h3 {
    margin: .9rem 0 .45rem;
    font-size: 1.08rem;
    font-weight: 900;
}
.step-card p {
    color: #AFC7E9;
    margin: 0;
}
.login-only-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}
.login-only-card {
    max-width: 540px;
}
.auth-brand h1 {
    margin: 0;
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: .94;
    font-weight: 900;
    letter-spacing: .02em;
}
.auth-brand h1 span {
    color: transparent;
    background: linear-gradient(135deg, #67E8F9, #2563EB);
    -webkit-background-clip: text;
    background-clip: text;
}
.login-back-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #BFD7F7;
    margin-bottom: 1rem;
}
.login-back-link:hover {
    color: #fff;
}
.login-register-callout {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .9rem;
    border: 1px solid rgba(96, 165, 250, .16);
    border-radius: 16px;
    background: rgba(5, 15, 36, .48);
}
.login-register-callout span {
    color: #9DB5D8;
}
.login-register-callout a {
    color: #7DD3FC;
    font-weight: 800;
}
@media (min-width: 576px) {
    .steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .landing-hero-wide { grid-template-columns: minmax(0, 1.1fr) minmax(430px, .9fr); }
    .register-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr); align-items: start; }
    .landing-register-teaser { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 1400px) {
    .landing-login-page .plan-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .landing-demo-card { justify-self: center; }
    .landing-proof-row { grid-template-columns: 1fr; width: 100%; }
}
@media (max-width: 575.98px) {
    .landing-login-page .landing-container { width: min(100% - 24px, 440px); }
    .landing-hero-wide .landing-hero-copy h1 { max-width: 11ch; font-size: clamp(2.25rem, 13vw, 3.3rem); }
    .landing-proof-row div { text-align: left; }
    .demo-metrics { grid-template-columns: 1fr; }
    .demo-client-list div { grid-template-columns: auto minmax(0, 1fr); }
    .demo-client-list strong { grid-column: 2; text-align: left; }
    .selected-plan-strip { grid-template-columns: 1fr; }
    .register-panel-head img { width: 58px; height: 58px; }
    .login-register-callout { display: grid; }
}