/* =========================================================
   CREATIVITY BUSINESS SOLUTION - PUBLIC / LOGIN SHELL
   File: /SiteMaster/PublicStyle.css
   Uses the same WebsiteAppearance variables as the authenticated app.
   ========================================================= */

.cbs-public-body {
    overflow-x:hidden;
    background:transparent !important;
}

.cbs-public-body #MainForm {
    position:relative;
    min-height:100dvh;
    isolation:isolate;
    background:transparent;
}

.cbs-public-body .cbs-ambient-background { z-index:-1; }

.cbs-public-header {
    isolation:isolate;
    overflow:hidden;
    border-bottom-color:color-mix(in srgb,var(--cbs-accent) 35%,var(--cbs-border));
    background:color-mix(in srgb,var(--cbs-header) 94%,var(--cbs-accent) 6%);
    box-shadow:0 8px 28px rgba(0,0,0,.08);
}
.cbs-public-header > * { position:relative; z-index:2; }
.cbs-public-header::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
        color-mix(in srgb,var(--cbs-accent) 12%,transparent),
        transparent 28%,
        transparent 72%,
        color-mix(in srgb,var(--cbs-accent) 10%,transparent));
}
.cbs-public-header::after {
    content:"";
    position:absolute;
    z-index:1;
    top:-72px;
    left:18%;
    width:420px;
    height:118px;
    border-radius:0 0 150px 150px;
    pointer-events:none;
    background:linear-gradient(110deg,
        color-mix(in srgb,var(--cbs-accent) 19%,transparent),
        color-mix(in srgb,var(--cbs-accent) 3%,transparent));
    transform:translate3d(0,0,0) skewX(-18deg);
    animation:cbsPublicHeaderBand 18s ease-in-out infinite alternate;
}
@keyframes cbsPublicHeaderBand {
    from { transform:translate3d(-38px,0,0) skewX(-18deg); }
    to { transform:translate3d(118px,0,0) skewX(-18deg); }
}

.cbs-brand img {
    filter:drop-shadow(0 0 10px color-mix(in srgb,var(--cbs-accent) 22%,transparent));
}
.cbs-brand-copy strong { color:var(--cbs-text); font-size:calc(16px * var(--cbs-font-scale)); }
.cbs-brand-copy small { color:var(--cbs-accent); font-size:var(--cbs-font-secondary); }

.cbs-public-nav {
    padding:4px;
    border:1px solid color-mix(in srgb,var(--cbs-accent) 18%,var(--cbs-border));
    border-radius:calc(var(--cbs-radius) + 2px);
    background:color-mix(in srgb,var(--cbs-surface) 78%,transparent);
}
.cbs-public-nav a {
    font-size:var(--cbs-font-primary);
    transition:color 150ms ease,background 150ms ease,transform 150ms ease;
}
.cbs-public-nav a:hover {
    transform:translateY(-1px);
    color:var(--cbs-accent);
    background:var(--cbs-accent-faint);
}

.cbs-public-actions .cbs-icon-button,
.cbs-public-actions .cbs-button {
    box-shadow:0 0 0 1px color-mix(in srgb,var(--cbs-accent) 5%,transparent);
}
.cbs-public-install { color:var(--cbs-accent); border-color:var(--cbs-accent-border); background:var(--cbs-accent-faint); }

.cbs-public-main {
    position:relative;
    z-index:1;
    background:transparent !important;
}
.cbs-public-grid {
    width:min(1480px,100%);
    grid-template-columns:minmax(0,1.28fr) minmax(390px,470px);
    gap:clamp(34px,5vw,82px);
}

.cbs-public-intro { position:relative; }
.cbs-public-kicker {
    width:fit-content;
    margin-bottom:14px;
    padding:7px 10px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--cbs-accent-border);
    border-radius:999px;
    color:var(--cbs-accent);
    background:var(--cbs-accent-faint);
    box-shadow:0 0 18px color-mix(in srgb,var(--cbs-accent-glow) 42%,transparent);
    font-size:var(--cbs-font-label);
    font-weight:900;
    letter-spacing:.085em;
    text-transform:uppercase;
}
.cbs-public-kicker-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cbs-accent);
    box-shadow:0 0 10px var(--cbs-accent-glow);
}
.cbs-public-intro h1 {
    max-width:920px;
    color:var(--cbs-text);
    font-size:clamp(calc(40px * var(--cbs-font-scale)),5vw,calc(72px * var(--cbs-font-scale)));
    line-height:.98;
    letter-spacing:-.055em;
}
.cbs-public-intro h1 .cbs-accent-word {
    color:var(--cbs-accent);
    text-shadow:0 0 24px color-mix(in srgb,var(--cbs-accent-glow) 58%,transparent);
}
.cbs-public-lead {
    color:var(--cbs-text-2);
    font-size:calc(16px * var(--cbs-font-scale));
}

.cbs-public-proof-row {
    margin-top:18px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.cbs-public-proof {
    min-height:32px;
    padding:0 10px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--cbs-border);
    border-radius:999px;
    color:var(--cbs-text-2);
    background:color-mix(in srgb,var(--cbs-surface) 88%,transparent);
    font-size:var(--cbs-font-secondary);
    font-weight:700;
}
.cbs-public-proof .cbs-icon { width:14px; height:14px; color:var(--cbs-accent); }

.cbs-feature-grid { gap:11px; }
.cbs-feature-card {
    position:relative;
    overflow:hidden;
    min-height:94px;
    border-color:color-mix(in srgb,var(--cbs-accent) 26%,var(--cbs-border));
    background:color-mix(in srgb,var(--cbs-surface) 94%,var(--cbs-accent) 6%);
    box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent),0 12px 28px rgba(0,0,0,.07);
    transition:transform 150ms ease,border-color 150ms ease,box-shadow 150ms ease,background 150ms ease;
}
.cbs-feature-card::before {
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:var(--cbs-accent);
    opacity:.72;
}
.cbs-feature-card:hover {
    transform:translateY(-2px);
    border-color:var(--cbs-accent-border);
    background:color-mix(in srgb,var(--cbs-surface) 89%,var(--cbs-accent) 11%);
    box-shadow:0 0 22px color-mix(in srgb,var(--cbs-accent-glow) 42%,transparent),0 14px 30px rgba(0,0,0,.08);
}
.cbs-feature-icon {
    width:44px;
    height:44px;
    border-color:var(--cbs-accent-border);
    background:var(--cbs-accent-faint);
    box-shadow:0 0 16px color-mix(in srgb,var(--cbs-accent-glow) 35%,transparent);
}
.cbs-feature-card strong { font-size:var(--cbs-font-primary); }
.cbs-feature-card small { font-size:var(--cbs-font-secondary); }

.cbs-public-note {
    border-color:color-mix(in srgb,var(--cbs-accent) 30%,var(--cbs-border));
    background:color-mix(in srgb,var(--cbs-accent-faint) 78%,var(--cbs-surface));
}

.cbs-public-preview {
    border-color:color-mix(in srgb,var(--cbs-accent) 32%,var(--cbs-border));
    box-shadow:0 18px 44px rgba(0,0,0,.14),0 0 28px color-mix(in srgb,var(--cbs-accent-glow) 24%,transparent);
}

.cbs-login-card {
    position:relative;
    overflow:hidden;
    border-color:color-mix(in srgb,var(--cbs-accent) 42%,var(--cbs-border));
    background:color-mix(in srgb,var(--cbs-surface) 95%,var(--cbs-accent) 5%);
    box-shadow:0 24px 60px rgba(0,0,0,.18),0 0 34px color-mix(in srgb,var(--cbs-accent-glow) 30%,transparent);
}
.cbs-login-card::before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:3px;
    background:linear-gradient(90deg,transparent,var(--cbs-accent),transparent);
    box-shadow:0 0 16px var(--cbs-accent-glow);
}
.cbs-login-card::after {
    content:"";
    position:absolute;
    z-index:0;
    top:-130px;
    right:-110px;
    width:290px;
    height:290px;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle,color-mix(in srgb,var(--cbs-accent) 13%,transparent),transparent 68%);
}
.cbs-login-card > * { position:relative; z-index:1; }
.cbs-login-heading img {
    border:1px solid var(--cbs-accent-border);
    border-radius:14px;
    background:#fff;
    padding:5px;
    box-shadow:0 0 18px color-mix(in srgb,var(--cbs-accent-glow) 38%,transparent);
}
.cbs-login-heading span { color:var(--cbs-accent); font-size:var(--cbs-font-label); }
.cbs-login-heading h2 { font-size:calc(24px * var(--cbs-font-scale)); }

.cbs-login-meta {
    margin:-8px 0 20px 61px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.cbs-login-meta span {
    padding:4px 7px;
    border:1px solid var(--cbs-border);
    border-radius:999px;
    color:var(--cbs-muted);
    background:var(--cbs-bg-raised);
    font-size:var(--cbs-font-label);
    font-weight:750;
}

.cbs-form-group label { font-size:var(--cbs-font-secondary); }
.cbs-input-shell {
    min-height:var(--cbs-form-control-height,50px);
    border-color:var(--cbs-border);
    background:color-mix(in srgb,var(--cbs-input) 94%,var(--cbs-accent) 6%);
}
.cbs-input-shell:hover { border-color:var(--cbs-accent-border); }
.cbs-input-shell:focus-within {
    border-color:var(--cbs-accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--cbs-accent) 13%,transparent),0 0 18px color-mix(in srgb,var(--cbs-accent-glow) 35%,transparent);
}
.cbs-input { font-size:var(--cbs-font-primary); }
.cbs-login-button {
    min-height:calc(var(--cbs-form-control-height,40px) + 6px);
    box-shadow:0 0 22px color-mix(in srgb,var(--cbs-accent-glow) 58%,transparent);
}
.cbs-login-button:hover { transform:translateY(-1px); }
.cbs-login-footnote { font-size:var(--cbs-font-secondary); }

.cbs-login-install-row {
    margin-top:12px;
    display:flex;
    justify-content:center;
}
.cbs-login-install-row .cbs-button { min-height:36px; padding:0 12px; font-size:var(--cbs-font-secondary); }

.cbs-public-footer {
    isolation:isolate;
    overflow:hidden;
    border-top-color:color-mix(in srgb,var(--cbs-accent) 28%,var(--cbs-border));
    background:color-mix(in srgb,var(--cbs-footer) 95%,var(--cbs-accent) 5%);
}
.cbs-public-footer strong { color:var(--cbs-accent); }

/* Public theme panel gets the same controls used inside the application. */
.cbs-public-body .cbs-theme-panel {
    border-color:var(--cbs-accent-border);
    background:var(--cbs-surface);
    box-shadow:0 18px 46px rgba(0,0,0,.22),0 0 26px color-mix(in srgb,var(--cbs-accent-glow) 28%,transparent);
}
.cbs-public-body .cbs-theme-mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cbs-public-body .cbs-theme-font-select { width:100%; }

/* Logout uses the exact same public shell. */
.cbs-logout-body .cbs-public-main { place-items:center; }
.cbs-logout-card { width:min(500px,100%); }
.cbs-logout-title { font-size:calc(28px * var(--cbs-font-scale)); }
.cbs-logout-text { font-size:var(--cbs-font-primary); }

html[data-mode="light"] .cbs-public-header,
html[data-mode="light"] .cbs-public-footer {
    box-shadow:0 8px 26px rgba(27,50,78,.06);
}

@media (max-width:1100px) {
    .cbs-public-grid { grid-template-columns:minmax(0,1fr) minmax(360px,430px); gap:28px; }
    .cbs-public-intro h1 { font-size:clamp(38px,5.4vw,58px); }
}

@media (max-width:860px) {
    .cbs-public-grid { grid-template-columns:1fr; }
    .cbs-login-card { order:-1; }
    .cbs-public-intro h1 { font-size:clamp(34px,8.5vw,54px); }
    .cbs-public-nav { display:none; }
}

@media (max-width:560px) {
    .cbs-public-header { padding-left:10px; padding-right:10px; }
    .cbs-public-actions { gap:5px; }
    .cbs-public-actions .cbs-public-signin { display:none; }
    .cbs-login-card { padding:18px 14px; }
    .cbs-login-meta { margin-left:0; }
    .cbs-feature-grid { grid-template-columns:1fr; }
    .cbs-public-proof-row { gap:6px; }
    .cbs-public-proof { font-size:calc(10px * var(--cbs-font-scale)); }
}

@media (prefers-reduced-motion:reduce) {
    .cbs-public-header::after,
    .cbs-feature-card,
    .cbs-public-nav a { animation:none !important; transition:none !important; }
}