/* =====================================================================================================================
   DashTurbo  -  the skin layer

   Loaded after every other stylesheet (css/home.css holds the home page). Everything the application draws across its
   pages - panels, cards, the build wizard's parts, menus, modals, the themes page, pricing's extras - takes the site's
   corners, shadows and gradient here, so the app pages match the marketing ones.
   ===================================================================================================================== */

/* ---- The AI design feature and the showcase cards --------------------------------------------------------------- */

.aif { border-radius: 22px; box-shadow: 0 50px 100px -50px rgba(24, 0, 58, 0.8); }
.ai-show { border-radius: 16px; box-shadow: var(--shadow-card); }
.ai-show:hover, .ai-show:focus-visible { box-shadow: 0 40px 70px -30px rgba(249, 42, 117, 0.45); }
.ai-showcase .eyebrow i { color: var(--pink); }
.xp-dest { border-radius: 16px; }
.xp-cloud, .xp-name span { border-radius: 6px; }

/* ---- Cards take the site's corners and float on its shadows --------------------------------------------------------- */

.panel, .rt, .join-item, .usage, .dcard, .order-card, .support-item, .instructions-box, .sample-card, .dropzone, .theme-card, .pay-card, .success-card, .empty-state { border-radius: 16px; }
.panel, .usage, .order-card, .support-item, .instructions-box, .sample-card, .rt, .dcard, .pay-card, .empty-state { box-shadow: var(--shadow-card); }
.dropzone { border-color: rgba(249, 42, 117, 0.3); }
.dropzone:hover, .dropzone.drag { border-color: var(--pink); background: #FFF5F9; }
.dz-icon, .form-icon, .sample-card i, .empty-state i, .dcard-new i, .support-item i { background: var(--grad) !important; color: #fff !important; box-shadow: 0 18px 36px -14px rgba(249, 42, 117, 0.6); }
.build-orb { background: var(--panel-bg); color: #FF9F43; box-shadow: 0 30px 60px -20px rgba(249, 42, 117, 0.6); }
.orb-ring { border-color: rgba(249, 42, 117, 0.35); }
.build-meter span, .meter span, .dz-bar span { background: var(--grad-btn); background-size: 200% 100%; animation: meterFlow 2s linear infinite; }
@keyframes meterFlow { to { background-position: -200% 0; } }
.member-nav { border-radius: 18px; box-shadow: 0 30px 60px -34px rgba(24, 0, 58, 0.7); }
.member-nav > a { border-radius: 10px; }
.member-nav .mn-plan { border-radius: 12px; }
.member-nav .mn-plan a { color: #FFB0CB; }
.chip { border-radius: 6px; }
.menu { border-radius: 12px; border-top: 3px solid var(--pink); }
.modal { border-radius: 18px; }
.modal-head { border-bottom-style: solid; }
.modal-head h2 { font-family: var(--display); font-weight: 700; padding-top: 4px; }
.field input, .field select, .field textarea, textarea, .input { border-radius: 10px; }
.theme-filters button { border-radius: 8px; box-shadow: var(--shadow-sm); }
.theme-filters button.active { background: var(--grad); }
.quick-themes button { border-radius: 10px; }
.quick-themes .qt-all { background: var(--grad); border-color: transparent; }
.template-live { border-radius: 20px; box-shadow: var(--shadow-card); }
.own-theme-band { border-radius: 22px; }
.own-theme-band h2 i { color: #FF8DB5; }
.plan-hero { border-radius: 22px; }
.plan-hero span { color: #FFB0CB; }
.contact-cta { border-radius: 18px; }
.contact-cta .eyebrow { color: #FFB0CB; }
.contact-form h2, .pricing-guest h3 { font-family: var(--display); font-weight: 700; }
.success-icon { background: var(--grad); color: #fff; box-shadow: 0 20px 40px -14px rgba(249, 42, 117, 0.6); }
.inv-parties h4 { color: #F92A75; }
.pg-plan strong { color: #FFB0CB; }
.inv-logo { display: block; height: 36px; width: auto; }

/* ---- Pricing page: the value points as a two-by-two list, the live data panel on the night ------------------------------ */

.value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 80px 0 20px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; }
.value-strip div { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; padding: 30px 32px; border-radius: 0; background: none; box-shadow: none; }
.value-strip div:nth-child(odd) { border-right: 1px solid var(--line); }
.value-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.value-strip i { grid-row: span 2; width: 58px; height: 58px; margin: 0; border-radius: 16px; display: grid; place-items: center; font-size: 20px; color: #fff; background: var(--grad) !important; box-shadow: 0 16px 30px -14px rgba(249, 42, 117, 0.7); }
.value-strip strong { font: 700 21px/1.25 var(--display); color: var(--ink); padding-top: 4px; }
.value-strip span { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.value-strip .vs-ai { background: var(--panel-bg); }
.value-strip .vs-ai strong { color: #fff; }
.value-strip .vs-ai span { color: var(--panel-mute); }
.pc-live { border-radius: 22px; background: radial-gradient(50% 70% at 0% 0%, rgba(16, 185, 129, 0.18), transparent 62%), radial-gradient(45% 60% at 100% 100%, rgba(249, 42, 117, 0.26), transparent 62%), radial-gradient(40% 50% at 60% 40%, rgba(138, 63, 252, 0.24), transparent 70%), #12022E; }
.pc-live h2 { font-weight: 700; }
@media (max-width: 720px) {
    .value-strip { grid-template-columns: minmax(0, 1fr); }
    .value-strip div, .value-strip div:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 20px; }
}

/* ---- A dashboard starts right under the navigation ------------------------------------------------------------------ */

html.dash-mode .page { padding-top: 90px; }
@media (max-width: 900px) { html.dash-mode .page { padding-top: 82px; } }
html.embed-mode.dash-mode .page { padding-top: 0; }

/* ---- Dark mode touches ------------------------------------------------------------------------------------------------ */

[data-theme="dark"] .dropzone:hover, [data-theme="dark"] .dropzone.drag { background: var(--bg-3); }
[data-theme="dark"] .hero-kicker, [data-theme="dark"] .hero-first, [data-theme="dark"] .hero-rail { box-shadow: 0 0 0 1px var(--line), var(--shadow-card); }
[data-theme="dark"] .hero-rail { background: rgba(26, 15, 56, 0.94); }
[data-theme="dark"] .hs-no { background: var(--bg-3); box-shadow: inset 0 0 0 2px var(--line-2); }
[data-theme="dark"] .hs-card { background: rgba(30, 16, 64, 0.95); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .hs-gauge .t { stroke: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .hs-gauge .n line { stroke: #fff; }
[data-theme="dark"] .play-ring { background: var(--card); }
[data-theme="dark"] .xp-dest { background: rgba(26, 15, 56, 0.85); border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .hero-dial .d4 { stroke: rgba(255, 255, 255, 0.07); }

@media (prefers-reduced-motion: reduce) {
    .build-meter span, .meter span, .dz-bar span { animation: none !important; }
}
.auth-aside > .brand { visibility: hidden; }
@media (max-width: 1100px) { body:has(.page.active .auth-wrap) .nav:not(.solid) .brand-name b { color: var(--ink); } }

/* ---- Pricing page: the period switch, the plan comparison and the checkout under the plans ---------------------------- */

.period-toggle { display: inline-flex; gap: 4px; padding: 5px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); margin-top: 34px; backdrop-filter: blur(8px); }
.period-toggle button { border: 0; background: transparent; padding: 13px 24px; border-radius: 7px; font: 800 15px/1 var(--font); color: #fff; cursor: pointer; transition: all 0.3s ease; }
.period-toggle button.active { background: #fff; color: var(--ink); box-shadow: 0 10px 24px -10px rgba(24, 0, 58, 0.5); }
.period-toggle em { font: normal 800 11px/1 var(--font); color: #fff; background: var(--grad); padding: 4px 7px; border-radius: 5px; margin-left: 8px; }
.compare { margin: 110px 0 130px; }
.compare .table-scroll { border-radius: 16px; background: var(--card); padding: 10px 28px; box-shadow: var(--shadow-card); }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 16px 16px; border-bottom: 1px dashed var(--line-2); text-align: center; font-size: 15.5px; color: var(--ink-2); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table tbody tr { transition: background 0.2s ease; }
.compare-table tbody tr:hover { background: var(--bg-2); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--ink); padding-left: 0; }
.compare-table thead th { font: 700 22px/1.2 var(--display); color: var(--ink); border-bottom: 2px solid transparent; border-image: var(--grad-btn) 1; padding-top: 22px; padding-bottom: 18px; }
.compare-table .yes { color: var(--pink); }
.compare-table .no { color: var(--muted); }
.pricing-checkout { margin-top: 90px; scroll-margin-top: 110px; animation: checkoutIn 0.55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes checkoutIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.pricing-checkout .section-head.center p { margin: 14px auto 0; max-width: 560px; }
.pricing-checkout .checkout-summary > h1 { display: none; }
.pricing-checkout .order-card { margin-top: 0; }
.pricing-checkout .checkout-grid { gap: 30px; }
.pricing-guest { max-width: 760px; margin: 0 auto; }
.pricing-guest .panel { padding: 40px; }
.pricing-guest h3 { font-size: 28px; font-weight: 500; letter-spacing: -0.035em; margin: 22px 0 6px; }
.pricing-guest form { margin-top: 22px; }
.pricing-guest .form-footer { text-align: left; }
.pg-plan { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; background: var(--panel-bg); color: #fff; }
.pg-plan span { font-weight: 600; }
.pg-plan strong { font: 600 24px/1 var(--font); letter-spacing: -0.03em; color: #FF9F43; }
.page-top.section-head > p { margin: 22px 0 0; }
.period-toggle { border-radius: 12px; }
.compare .section-head { margin-bottom: 40px; }