:root {
    color-scheme: dark;
    --page: #171925;
    --surface: #202333;
    --surface-soft: #262a3b;
    --border: rgba(172, 183, 220, .11);
    --text: #f3f4fb;
    --muted: #9299b2;
    --blue: #3449b3;
    --blue-bright: #586fec;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: var(--page); color: var(--text); font-family: "DM Sans", sans-serif; font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.page-container { max-width: 1440px; padding-right: 40px; padding-left: 40px; }

.topbar { height: 72px; background: #30439f; position: relative; z-index: 20; }
.topbar-inner { max-width: 1440px; height: 100%; padding: 0 40px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.8px; }
.brand:hover { color: #fff; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid rgba(255,255,255,.78); border-radius: 10px; font-size: 18px; transform: rotate(-5deg); }
.brand-light { font-weight: 500; opacity: .8; }
.topbar-actions { display: flex; align-items: center; gap: 22px; }
.signed-in-label { display: inline-flex; align-items: center; gap: 8px; color: #f5f6ff; font-size: 12px; font-weight: 600; }
.signed-in-label i { font-size: 16px; }
.logout-form { margin: 0; }
.logout-button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #ffffff35; border-radius: 8px; color: #fff; background: #ffffff0b; font-size: 11px; font-weight: 700; }
.logout-button:hover { background: #ffffff1a; }
.logout-button i { font-size: 14px; }

.main-nav { min-height: 62px; background: #1d202e; border-bottom: 1px solid var(--border); }
.nav-inner { min-height: 62px; display: flex; align-items: center; }
.main-nav-links { display: flex; align-items: stretch; gap: 8px; min-height: 62px; }
@media (min-width: 721px) { .main-nav-links.collapse { display: flex !important; } }
.nav-link { display: inline-flex; align-items: center; gap: 10px; padding: 0 18px; color: #a8aec2; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; transition: color .2s, border-color .2s; }
.nav-link i { font-size: 16px; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-link.active { border-bottom-color: #7185ff; }
.nav-link-muted { color: #858da5; }
.mobile-menu-button { display: none; align-items: center; gap: 8px; color: #dce0ee; background: none; border: 0; font-size: 12px; }
.mobile-menu-button i { font-size: 18px; }

.dashboard { padding-top: 31px; padding-bottom: 26px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 23px; }
.eyebrow { margin-bottom: 5px; color: #8294ff; font-size: 10px; font-weight: 800; letter-spacing: 1.25px; }
.page-heading h1 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.5px; }
.welcome-copy { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.welcome-banner { min-height: 165px; position: relative; display: flex; align-items: center; overflow: hidden; padding: 28px 32px; margin-bottom: 22px; border: 1px solid rgba(137,155,255,.18); border-radius: 15px; background: linear-gradient(105deg, #3448ae 0%, #3b50ba 62%, #3449ac 100%); box-shadow: 0 18px 40px #0c0f1b38; }
.banner-content { position: relative; z-index: 2; max-width: 650px; }
.banner-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; margin-bottom: 9px; border-radius: 30px; background: #ffffff1f; color: #f4f6ff; font-size: 9px; font-weight: 800; letter-spacing: .55px; }
.banner-pill span { width: 6px; height: 6px; border-radius: 50%; background: #51dfba; box-shadow: 0 0 0 3px #51dfba22; }
.welcome-banner h2 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.7px; }
.welcome-banner p { margin: 6px 0 0; color: #e0e5ff; font-size: 12px; line-height: 1.6; }
.banner-symbol { position: absolute; right: 12%; bottom: -72px; z-index: 1; display: grid; place-items: center; width: 260px; height: 260px; border: 1px solid #ffffff12; border-radius: 50%; color: #ffffff18; font-size: 84px; }
.banner-symbol::before, .banner-symbol::after { position: absolute; content: ""; border: 1px solid #ffffff12; border-radius: 50%; }
.banner-symbol::before { inset: 18px; }.banner-symbol::after { inset: 38px; }
.banner-decoration { position: absolute; border-radius: 50%; background: #fff; opacity: .035; }
.decoration-one { width: 290px; height: 290px; right: -32px; top: -168px; }.decoration-two { width: 140px; height: 140px; right: 25%; bottom: -94px; }

.account-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.panel { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.panel-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--border); }
.panel-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #b7c1ff; background: #5267e21a; font-size: 18px; }
.panel-heading h2 { margin: 0; font-size: 14px; font-weight: 700; }
.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.profile-details { display: grid; gap: 0; margin: 0; }
.profile-details > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.profile-details > div:last-child { padding-bottom: 0; border-bottom: 0; }
.profile-details dt { color: #8991aa; font-size: 11px; font-weight: 500; }
.profile-details dd { margin: 0; color: #e5e8f2; font-size: 11px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.dashboard-footer { display: flex; justify-content: space-between; padding: 22px 2px 0; color: #6d758c; font-size: 10px; }

.auth-page { min-height: 100vh; padding: 0 max(24px, calc((100vw - 1180px) / 2)); display: flex; flex-direction: column; }
.auth-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 82px; }
.auth-topbar-copy { color: #858da5; font-size: 11px; font-weight: 600; letter-spacing: .2px; }
.auth-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .8fr); align-items: center; gap: clamp(42px, 8vw, 120px); padding: 20px 0 40px; }
.auth-intro { position: relative; min-height: 470px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 42px 0; }
.intro-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #a8b4ff; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.intro-kicker > span { width: 7px; height: 7px; border-radius: 50%; background: #50d6b0; box-shadow: 0 0 0 4px #50d6b01f; }
.auth-intro h1 { max-width: 590px; margin: 0; color: #f4f5fb; font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -2px; }
.auth-intro > p { max-width: 420px; margin: 20px 0 0; color: #969db4; font-size: 14px; line-height: 1.75; }
.intro-bottom { position: absolute; right: 0; bottom: 0; left: 0; height: 100px; overflow: hidden; }
.intro-orbit { position: absolute; border: 1px solid #7384f51c; border-radius: 50%; }
.orbit-a { right: 20px; bottom: -200px; width: 420px; height: 420px; }.orbit-b { right: 68px; bottom: -155px; width: 330px; height: 330px; }
.intro-mark { position: absolute; right: 185px; bottom: 8px; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #7f90ff39; border-radius: 16px; color: #aab6ff; background: #5267e21a; font-size: 22px; }
.intro-caption { position: absolute; right: 0; bottom: 23px; color: #6f7894; font-size: 10px; letter-spacing: .25px; }
.auth-card { width: 100%; max-width: 460px; justify-self: end; padding: 31px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg, #222638, #1e2130); box-shadow: 0 24px 70px #090a1270; }
.auth-card-heading { display: flex; align-items: center; gap: 13px; }
.auth-card-icon { display: grid; flex: 0 0 auto; place-items: center; width: 46px; height: 46px; border: 1px solid #8494ff26; border-radius: 14px; color: #aebaff; background: #6478ee1a; font-size: 19px; }
.auth-card-heading .eyebrow { margin-bottom: 4px; }
.auth-card-heading h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.auth-subtitle { margin: 14px 0 22px; color: #969db4; font-size: 12px; }
.setup-notice, .form-alert { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; margin: 0 0 17px; border: 1px solid #e7b94b2e; border-radius: 9px; color: #eccd82; background: #e7b94b0c; font-size: 10px; line-height: 1.55; }
.setup-notice i, .form-alert i { flex: 0 0 auto; margin-top: 1px; font-size: 14px; }
.form-alert { border-color: #ef69702e; color: #f0959a; background: #ef535e0d; }
.auth-form { display: grid; gap: 17px; }
.field-group { min-width: 0; }
.field-group > label, .label-row label { display: block; margin: 0 0 7px; color: #d6daea; font-size: 11px; font-weight: 600; }
.label-row { display: flex; justify-content: space-between; align-items: center; }
.label-row label { margin-bottom: 7px; }
.disabled-link { margin-bottom: 7px; color: #7987d2; font-size: 10px; }.disabled-link:hover { color: #a8b5ff; }
.input-wrap { position: relative; }
.input-wrap > i { position: absolute; top: 50%; left: 13px; z-index: 2; color: #7c85a0; font-size: 14px; transform: translateY(-50%); pointer-events: none; }
.input-wrap input { width: 100%; height: 44px; padding: 0 43px 0 39px; border: 1px solid #ffffff18; border-radius: 9px; outline: 0; color: #f4f5fb; background: #171925; font-size: 11px; transition: border-color .18s, box-shadow .18s; }
.input-wrap input::placeholder { color: #70788f; }.input-wrap input:focus { border-color: #7185ff; box-shadow: 0 0 0 3px #7185ff20; }
.password-toggle { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 42px; height: 44px; border: 0; color: #7c85a0; background: transparent; }.password-toggle:hover { color: #c2c9e4; }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; margin-top: 2px; border-radius: 9px; font-size: 12px; font-weight: 700; box-shadow: 0 8px 20px #4057d033; }
.auth-submit:disabled { cursor: not-allowed; opacity: .48; }
.btn-primary { --bs-btn-bg: #4057d0; --bs-btn-border-color: #4057d0; --bs-btn-hover-bg: #4e64e3; --bs-btn-hover-border-color: #4e64e3; --bs-btn-active-bg: #3449b3; --bs-btn-active-border-color: #3449b3; }
.auth-switch { margin-top: 20px; color: #969db4; font-size: 11px; text-align: center; }
.auth-switch a { color: #aebaff; font-weight: 700; }.auth-switch a:hover { color: #d0d7ff; }
.auth-security { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 16px; margin-top: 18px; border-top: 1px solid var(--border); color: #737c95; font-size: 9px; }
.auth-security i { color: #53c69f; font-size: 12px; }
.auth-footer { display: flex; justify-content: space-between; min-height: 48px; padding: 12px 0; color: #6d758c; font-size: 9px; }

/* Loja e área de gestão */
.nav-link { white-space: nowrap; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-bottom: 22px; }
.metric-card { position: relative; display: flex; min-height: 166px; flex-direction: column; padding: 20px 21px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: transform .18s,border-color .18s; }
.metric-card:hover { color: var(--text); transform: translateY(-2px); border-color: #7384f553; }
.metric-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #b5bbcd; font-size: 13px; font-weight: 600; }
.metric-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; font-size: 19px; }
.metric-blue { background: #354bb4; }.metric-green { background: #00bb91; }.metric-amber { background: #ffbd2e; }.metric-red { background: #ff5058; }
.metric-card > strong { margin-top: 7px; color: #f4f5fb; font-size: 25px; font-weight: 600; letter-spacing: -.5px; }
.metric-link { margin-top: auto; color: #7f8ce5; font-size: 10px; }
.dashboard-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel-heading-link { margin-left: auto; color: #929ff4; font-size: 10px; white-space: nowrap; }
.panel-heading-link:hover { color: #c5ccff; }
.empty-state { display: flex; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; color: #9299b2; text-align: center; font-size: 11px; }
.empty-state > i { color: #737fce; font-size: 21px; }
.empty-state a { color: #aebaff; font-weight: 700; }
.data-list { display: grid; }
.data-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 59px; border-bottom: 1px solid var(--border); color: #dfe2ed; font-size: 11px; }
.data-row:last-child { border-bottom: 0; }.data-row > span:first-child { display: grid; gap: 4px; }.data-row small { color: #8991aa; font-size: 10px; }
.status-badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 8px; border: 1px solid #56d6af35; border-radius: 30px; color: #7bdfbb; background: #2ab48712; font-size: 9px; font-weight: 700; white-space: nowrap; }
.welcome-banner .banner-cta { position: relative; z-index: 2; padding: 9px 13px; margin-top: 14px; border: 0; border-radius: 8px; color: #3145a6; background: #f4f5ff; font-size: 10px; font-weight: 800; }
.welcome-banner .banner-cta:hover { color: #263886; background: #fff; }
.store-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 4px 0 22px; }
.store-intro h2 { margin: 0; color: #edf0fb; font-size: 17px; font-weight: 700; }.store-intro p { margin: 5px 0 0; color: #939bb3; font-size: 11px; }
.cycle-switch { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cycle-switch a { padding: 8px 12px; border-radius: 7px; color: #989fb6; font-size: 10px; font-weight: 700; }.cycle-switch a.selected { color: #fff; background: #4057d0; }.cycle-switch span { padding: 0 8px; color: #61d4ad; font-size: 9px; }
.plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 18px; }
.plan-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 23px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.plan-card.plan-popular { border-color: #677cf3a6; box-shadow: 0 0 0 1px #677cf326,0 17px 42px #090b1840; }
.popular-ribbon { position: absolute; top: 15px; right: -29px; width: 120px; padding: 5px 0; color: #fff; background: #4057d0; text-align: center; font-size: 8px; font-weight: 800; transform: rotate(38deg); }
.plan-card-heading { min-height: 112px; }.plan-symbol { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 12px; border: 1px solid #7384f532; border-radius: 11px; color: #aebaff; background: #586fec18; font-size: 17px; }
.plan-card-heading h2 { margin: 0; color: #f3f4fb; font-size: 17px; font-weight: 700; }.plan-card-heading p { margin: 5px 0 0; color: #9299b2; font-size: 10px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 15px; color: #9299b2; font-size: 10px; }.plan-price strong { color: #f5f6fc; font-size: 27px; font-weight: 700; letter-spacing: -.8px; }.plan-equivalent { margin-top: 1px; color: #838ba4; font-size: 9px; }
.trial-note { display: flex; align-items: center; gap: 7px; padding: 11px 0; margin: 10px 0 15px; border-bottom: 1px solid var(--border); color: #86dfbf; font-size: 10px; }
.plan-features { flex: 1; }.plan-features h3 { margin: 0 0 11px; color: #d9ddeb; font-size: 10px; font-weight: 700; }.plan-features ul { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }.plan-features li { display: flex; align-items: flex-start; gap: 8px; color: #aab1c6; font-size: 10px; line-height: 1.5; }.plan-features li i { color: #55d4ac; font-size: 12px; }
.plan-button { display: flex; justify-content: center; align-items: center; width: 100%; padding: 11px; margin-top: 21px; border: 1px solid #5268de; border-radius: 8px; color: #fff; background: #4057d0; font-size: 11px; font-weight: 700; }.plan-button:hover { color: #fff; background: #5066e1; }.plan-popular .plan-button { color: #fff; background: #4057d0; }
.notice-panel { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid #54d3a640; border-radius: 9px; color: #a9e9d3; background: #1eaa8010; font-size: 11px; }.notice-panel i { font-size: 15px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(270px,.75fr); align-items: start; gap: 20px; }.checkout-form-panel .panel-heading { margin-bottom: 20px; }.checkout-form { display: grid; gap: 12px; }
.domain-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 5px; }.domain-option { position: relative; display: flex; gap: 10px; min-height: 82px; padding: 13px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }.domain-option:has(input:checked) { border-color: #687df0a0; background: #5267e211; }.domain-option input { accent-color: #657af0; }.domain-option span { display: grid; align-content: center; gap: 4px; }.domain-option span > i { display: none; }.domain-option b { color: #e2e5f0; font-size: 10px; }.domain-option small { color: #9098b0; font-size: 9px; overflow-wrap: anywhere; }
.checkout-form .form-label { margin: 3px 0 -5px; color: #d6daea; font-size: 10px; font-weight: 700; }.domain-input .form-control,.domain-input .input-group-text { min-height: 43px; border-color: #ffffff18; color: #edf0fb; background: #171925; font-size: 10px; }.domain-input .form-control { box-shadow: none; }.domain-input .form-control:focus { border-color: #7185ff; }.domain-input .input-group-text { color: #8992ae; }.form-hint { margin: -5px 0 4px; color: #838ba4; font-size: 9px; }.order-summary { position: sticky; top: 20px; }.order-summary h2 { margin: 8px 0 4px; font-size: 20px; }.order-summary > p { margin: 0 0 18px; color: #9299b2; font-size: 10px; }.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); color: #9299b2; font-size: 10px; }.summary-row strong { color: #e8eaf3; text-align: right; }.summary-note { display: flex; gap: 8px; padding: 11px; margin-top: 10px; border-radius: 8px; color: #dbc58f; background: #e3b44c0d; font-size: 9px; line-height: 1.5; }.summary-note i { flex: 0 0 auto; }
.app-table { margin: 0; color: #dfe2ed; --bs-table-bg: transparent; --bs-table-color: #dfe2ed; --bs-table-border-color: var(--border); --bs-table-hover-bg: #ffffff06; --bs-table-hover-color: #fff; font-size: 10px; vertical-align: middle; }.app-table th { padding: 13px 12px; color: #8f98b1; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }.app-table td { padding: 13px 12px; }.table-subline { display: block; margin-top: 4px; color: #858ea8; font-size: 9px; }.app-table .btn { font-size: 9px; }
.admin-secondary-link { padding-top: 14px; border-top: 1px solid var(--border); }.admin-secondary-link a { color: #aebaff; font-size: 10px; font-weight: 700; }.popular-mini { padding: 3px 6px; border-radius: 20px; color: #ffd879; background: #ffbd2e18; font-size: 8px; }
.admin-form-panel { max-width: 900px; }.admin-form-panel .panel-heading { margin-bottom: 20px; }.admin-plan-form { display: grid; gap: 18px; }.admin-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.admin-fields label { display: grid; gap: 7px; color: #d6daea; font-size: 10px; font-weight: 600; }.admin-fields .full-field { grid-column: 1/-1; }.admin-fields label small { color: #9299b2; font-weight: 400; }.admin-fields .form-control { min-height: 41px; border-color: #ffffff18; color: #f4f5fb; background: #171925; font-size: 11px; }.admin-fields .form-control:focus { border-color: #7185ff; box-shadow: 0 0 0 3px #7185ff20; }.admin-fields textarea.form-control { min-height: 130px; }.form-check-row { display: flex; flex-wrap: wrap; gap: 20px; }.form-check-row label { display: flex; align-items: center; gap: 8px; color: #b6bdd0; font-size: 10px; }.form-check-row input { accent-color: #566ce2; }.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 15px; border-top: 1px solid var(--border); }.form-actions .btn { font-size: 10px; }.btn-outline-light { --bs-btn-color:#c4c9d9;--bs-btn-border-color:#ffffff24;--bs-btn-hover-bg:#ffffff12;--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#ffffff45; }
.inline-admin-actions { display: flex; flex-wrap: wrap; gap: 5px; }.inline-admin-actions .btn { white-space: nowrap; }.inline-admin-actions .btn-success { --bs-btn-bg:#159875;--bs-btn-border-color:#159875;--bs-btn-hover-bg:#1aaa83;--bs-btn-hover-border-color:#1aaa83; }
.status-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.status-card { display: flex; align-items: center; gap: 14px; }.status-light { width: 10px; height: 10px; border-radius: 50%; background: #ff626d; box-shadow: 0 0 0 5px #ff626d19; }.status-light.online { background: #42d4a3; box-shadow: 0 0 0 5px #42d4a319; }.status-card h2 { margin: 0; font-size: 12px; }.status-card p { margin: 4px 0 0; color: #9299b2; font-size: 10px; }
.ticket-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(290px,.8fr); align-items: start; gap: 18px; }.ticket-layout .panel-heading { margin-bottom: 12px; }.ticket-create-panel { position: sticky; top: 18px; }.ticket-form,.ticket-reply-form { display: grid; gap: 13px; }.ticket-form label,.ticket-reply-form label,.smtp-test-form label { display: grid; gap: 7px; color: #d6daea; font-size: 10px; font-weight: 600; }.ticket-form .form-control,.ticket-reply-form .form-control,.smtp-test-form .form-control { border-color: #ffffff18; color: #f4f5fb; background: #171925; font-size: 11px; }.ticket-form .form-control:focus,.ticket-reply-form .form-control:focus,.smtp-test-form .form-control:focus { border-color: #7185ff; box-shadow: 0 0 0 3px #7185ff20; }.ticket-form .btn,.ticket-reply-form .btn { justify-self: start; font-size: 10px; }
.ticket-detail { max-width: 980px; }.ticket-detail-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }.ticket-detail-heading h2 { margin: 4px 0; font-size: 18px; }.ticket-detail-heading p { margin: 0; color: #9098b0; font-size: 10px; }.ticket-status-form { display: flex; align-items: center; gap: 7px; }.ticket-status-form .form-select { min-width: 160px; border-color: #ffffff18; color: #e9ebf5; background-color: #171925; font-size: 10px; }.ticket-status-form .btn { white-space: nowrap; font-size: 9px; }
.conversation { display: grid; gap: 12px; padding: 17px 0; }.message-bubble { padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; background: #191c29; }.message-bubble.message-staff { border-color: #576bdc42; background: #4057d014; }.message-bubble header { display: flex; justify-content: space-between; gap: 12px; color: #bfc5d8; font-size: 10px; }.message-bubble time { color: #7e879f; font-size: 9px; }.message-bubble p { margin: 9px 0 0; color: #d9deeb; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }.ticket-reply-form { padding-top: 16px; border-top: 1px solid var(--border); }.ticket-reply-form textarea { min-height: 90px; }
.settings-page { display: grid; gap: 15px; max-width: 1080px; }.settings-page .panel-heading { margin-bottom: 18px; }.settings-page .panel-heading p { max-width: 540px; line-height: 1.5; }.config-state { margin-left: auto; padding: 5px 8px; border: 1px solid #ffca6d39; border-radius: 20px; color: #e5c17c; background: #e5aa2410; font-size: 9px; font-weight: 700; white-space: nowrap; }.config-state.configured { border-color: #58d1a339; color: #77dfb7; background: #2ab48712; }
.settings-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.settings-fields label { display: grid; align-content: start; gap: 6px; color: #d6daea; font-size: 10px; font-weight: 600; }.settings-fields .full-field { grid-column: 1/-1; }.settings-fields .form-control,.settings-fields .form-select { min-height: 41px; border-color: #ffffff18; color: #f4f5fb; background-color: #171925; font-size: 10px; }.settings-fields .form-control:focus,.settings-fields .form-select:focus { border-color: #7185ff; box-shadow: 0 0 0 3px #7185ff20; }.settings-fields small { color: #9199b1; font-size: 9px; font-weight: 400; line-height: 1.5; }.settings-check { display: flex !important; align-items: center; gap: 8px !important; }.settings-check input { accent-color: #566ce2; }.settings-save-form { display: flex; justify-content: flex-end; padding: 0 0 3px; }.settings-save-form .btn { font-size: 10px; }.smtp-test-form { display: flex; align-items: flex-end; gap: 9px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }.smtp-test-form label { flex: 1; }.smtp-test-form .btn { min-height: 38px; font-size: 9px; }
.dns-instructions { padding: 16px 18px; margin-top: 14px; border: 1px solid #7384f521; border-radius: 10px; background: #17192580; }.dns-instructions h3 { margin: 2px 0 5px; font-size: 12px; }.dns-instructions p { margin: 0 0 10px; color: #9299b2; font-size: 10px; }.dns-instructions > div:not(.eyebrow) { display: flex; justify-content: space-between; gap: 15px; padding: 7px 0; border-top: 1px solid var(--border); color: #9ba3ba; font-size: 10px; }.dns-instructions code { color: #d6dcff; font-size: 10px; overflow-wrap: anywhere; }.payment-return-panel { max-width: 560px; margin: 10vh auto 0; text-align: center; }.payment-return-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; color: #63d8ad; background: #2ab48719; font-size: 23px; }.payment-return-panel h2 { font-size: 17px; }.payment-return-panel p { margin: 7px auto 17px; color: #a3abc0; font-size: 11px; line-height: 1.7; }.payment-return-panel .btn { margin: 4px; font-size: 10px; }

@media (max-width: 1000px) {
    .page-container { padding-right: 25px; padding-left: 25px; }
    .topbar-inner { padding-right: 25px; padding-left: 25px; }
    .auth-page { padding: 0 30px; }
    .auth-layout { gap: 42px; grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); }
    .auth-intro h1 { font-size: 42px; }
    .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .main-nav-links { flex-wrap: wrap; gap: 0; }
}
@media (max-width: 720px) {
    .topbar { height: 64px; }.topbar-inner { padding: 0 18px; }.brand { font-size: 17px; }.brand-mark { width: 31px; height: 31px; }
    .topbar-actions { gap: 12px; }.signed-in-label { max-width: 145px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }
    .logout-button { padding: 8px; }.logout-button span { display: none; }
    .main-nav { min-height: 49px; }.nav-inner { display: block; min-height: 48px; padding: 0 18px; }.mobile-menu-button { display: flex; height: 48px; }
    .main-nav-links { min-height: unset; flex-direction: column; gap: 3px; padding: 0 0 9px; }
    .main-nav-links:not(.show) { display: none; }.nav-link { min-height: 41px; padding: 0 10px; border: 0; border-radius: 7px; }.nav-link.active { color: #fff; background: #ffffff0b; }
    .dashboard { padding: 23px 18px 20px; }.page-heading h1 { font-size: 21px; }.welcome-copy { font-size: 11px; }
    .main-nav-links { align-items: stretch; }.main-nav-links.collapse { display: none !important; }.main-nav-links.collapse.show { display: flex !important; }
    .nav-link { white-space: normal; }
    .metric-grid { gap: 10px; margin-bottom: 13px; }.metric-card { min-height: 135px; padding: 14px 13px; }.metric-top { font-size: 10px; }.metric-icon { width: 38px; height: 38px; font-size: 15px; }.metric-card > strong { font-size: 20px; }.dashboard-lower { grid-template-columns: 1fr; gap: 12px; }
    .store-intro { align-items: flex-start; flex-direction: column; }.cycle-switch { width: 100%; }.cycle-switch a { flex: 0 0 auto; }.cycle-switch span { margin-left: auto; }
    .plan-grid { grid-template-columns: 1fr; gap: 12px; }.plan-card { padding: 19px; }.plan-card-heading { min-height: 0; }.plan-price { margin-top: 13px; }.plan-features { margin-top: 4px; }
    .checkout-layout { grid-template-columns: 1fr; }.order-summary { position: static; }.domain-options { grid-template-columns: 1fr; }.admin-fields { grid-template-columns: 1fr; }.admin-fields .full-field { grid-column: auto; }.status-grid { grid-template-columns: 1fr; }
    .ticket-layout { grid-template-columns: 1fr; }.ticket-create-panel { position: static; }.ticket-detail-heading { flex-direction: column; }.ticket-status-form { width: 100%; }.ticket-status-form .form-select { flex: 1; }.settings-fields { grid-template-columns: 1fr; }.settings-fields .full-field { grid-column: auto; }.smtp-test-form { align-items: stretch; flex-direction: column; }.smtp-test-form .btn { align-self: flex-start; }.dns-instructions > div:not(.eyebrow) { align-items: flex-start; flex-direction: column; gap: 3px; }
    .app-table { min-width: 650px; }.panel-heading-link { font-size: 9px; }.data-row { font-size: 10px; }
    .welcome-banner { min-height: 170px; padding: 21px; }.welcome-banner h2 { max-width: 280px; font-size: 22px; }.welcome-banner p { max-width: 300px; font-size: 11px; }.banner-symbol { right: -66px; bottom: -57px; opacity: .75; }
    .account-grid { grid-template-columns: 1fr; gap: 13px; }.panel { padding: 17px 15px; }
    .auth-page { min-height: 100vh; padding: 0 18px; }.auth-topbar { min-height: 68px; }.auth-topbar-copy { font-size: 10px; }
    .auth-layout { display: block; padding: 20px 0 28px; }.auth-intro { min-height: 0; padding: 12px 0 20px; }.intro-kicker { margin-bottom: 11px; font-size: 9px; }.auth-intro h1 { max-width: 520px; font-size: clamp(27px, 7vw, 37px); letter-spacing: -1.2px; }.auth-intro > p { margin-top: 10px; font-size: 11px; }.intro-bottom { display: none; }
    .auth-card { max-width: none; padding: 23px 19px; }.auth-card-heading h2 { font-size: 18px; }.auth-subtitle { margin: 12px 0 18px; }.auth-form { gap: 14px; }.auth-footer { font-size: 8px; }
}
@media (max-width: 380px) {
    .signed-in-label { max-width: 100px; }.topbar-actions { gap: 8px; }.brand { gap: 7px; font-size: 15px; }
    .auth-topbar-copy { display: none; }.auth-card { padding: 20px 16px; }.profile-details > div { gap: 9px; }
}