/*
 * Sagara UI — shared light visual language.
 * Page composition stays inside frontend/<area>/pages.
 */
.sps-portal,
.sps-company-front,
.sps-public,
.sps-public-document,
.sps-html-page,
.sps-validation,
.sps-verify-page {
    --sps-primary: #1769d2;
    --sps-primary-strong: #0c4f9f;
    --sps-primary-soft: #eaf3ff;
    --sps-accent: #0b8ca8;
    --sps-accent-soft: #e9f8fb;
    --sps-highlight: #e3942f;
    --sps-coral: #d85b65;
    --sps-canvas: #f3f7fb;
    --sps-canvas-deep: #e8eff7;
    --sps-surface: rgba(255, 255, 255, .94);
    --sps-surface-solid: #fff;
    --sps-surface-muted: #f6f9fc;
    --sps-ink: #10243e;
    --sps-text-main: #10243e;
    --sps-muted: #5c6c80;
    --sps-text-muted: #5c6c80;
    --sps-border: #d8e2ed;
    --sps-border-strong: #bdccdb;
    --sps-focus: #1769d2;
    --sps-danger: #b83d4c;
    --sps-error: #b83d4c;
    --sps-error-bg: #fff3f4;
    --sps-error-border: #edbdc4;
    --sps-success: #16765c;
    --sps-warning: #9a6419;
    --sps-gold: #b87822;
    --sps-green: #1769d2;
    --sps-green-dark: #0c4f9f;
    --sps-green-soft: #eaf3ff;
    --sps-teal: #0b8ca8;
    --sps-blue-soft: #e9f8fb;
    --sps-cream: #f3f7fb;
    --sps-cream-2: #fff;
    --sps-navy: #10243e;
    --sps-navy-soft: #e8eff7;
    --sps-white: #fff;
    --sps-radius-xs: 9px;
    --sps-radius-sm: 13px;
    --sps-radius-md: 18px;
    --sps-radius-lg: 26px;
    --sps-shadow-soft: 0 14px 36px rgba(28, 57, 90, .08);
    --sps-shadow-card: 0 22px 56px rgba(28, 57, 90, .11);
    --sps-shadow-float: 0 28px 72px rgba(18, 49, 84, .18);
    --sps-transition: 180ms cubic-bezier(.2, .8, .2, 1);
    --sps-container: min(100% - 40px, 1240px);
    color: var(--sps-text-main) !important;
    font-family: Inter, "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body.sps-standalone-portal,
body:has(.sps-verify-page) {
    margin: 0;
    min-height: 100vh;
    color: var(--sps-text-main);
    background:
        radial-gradient(circle at 7% 3%, rgba(23, 105, 210, .12), transparent 30rem),
        radial-gradient(circle at 95% 10%, rgba(11, 140, 168, .10), transparent 34rem),
        linear-gradient(145deg, #f8fbfe 0%, #eef4f9 50%, #f8fafc 100%) fixed !important;
}

.sps-portal:not(.sps-backend),
.sps-company-front,
.sps-public-document,
.sps-html-page,
.sps-verify-page {
    position: relative;
    isolation: isolate;
}

.sps-portal:not(.sps-backend)::before,
.sps-company-front::before,
.sps-public-document::before,
.sps-html-page::before,
.sps-verify-page::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: -12%;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(23, 105, 210, .09), transparent 24%),
        radial-gradient(circle at 85% 12%, rgba(11, 140, 168, .08), transparent 23%),
        radial-gradient(circle at 72% 88%, rgba(227, 148, 47, .06), transparent 24%);
    animation: spsSagaraDrift 22s ease-in-out infinite alternate;
}

.sps-portal:not(.sps-backend)::after,
.sps-company-front::after,
.sps-public-document::after,
.sps-html-page::after,
.sps-verify-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgba(48, 85, 123, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48, 85, 123, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

.sps-portal :where(h1, h2, h3),
.sps-public :where(h1, h2, h3),
.sps-company-front :where(h1, h2, h3),
.sps-public-document :where(h1, h2, h3),
.sps-verify-page :where(h1, h2, h3) {
    color: var(--sps-ink) !important;
    font-weight: 760 !important;
    letter-spacing: -.028em !important;
    text-wrap: balance;
}

.sps-portal :where(p),
.sps-public :where(p),
.sps-company-front :where(p),
.sps-public-document :where(p),
.sps-verify-page :where(p) {
    color: var(--sps-text-muted);
    text-wrap: pretty;
}

.sps-kicker,
.sps-public-kicker,
.sps-company-kicker,
.sps-public-document-kicker {
    color: var(--sps-primary-strong) !important;
    font-weight: 780 !important;
    letter-spacing: .12em !important;
}

.sps-portal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.sps-public :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.sps-verify-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 46px;
    border: 1px solid var(--sps-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--sps-ink) !important;
    box-shadow: 0 1px 2px rgba(18, 49, 84, .035) !important;
    transition: border-color var(--sps-transition), box-shadow var(--sps-transition), background var(--sps-transition) !important;
}

.sps-portal :where(input, select, textarea):focus,
.sps-public :where(input, select, textarea):focus,
.sps-verify-page :where(input, select, textarea):focus {
    border-color: rgba(23, 105, 210, .68) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(23, 105, 210, .12) !important;
}

.sps-portal :where(a, button, input, select, textarea):focus-visible,
.sps-public :where(a, button, input, select, textarea):focus-visible,
.sps-verify-page :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(23, 105, 210, .24) !important;
    outline-offset: 3px !important;
}

.sps-button,
.sps-mini-button,
.sps-company-button,
.sps-public-document-button,
.sps-public-archive-button,
.sps-open-doc,
.sps-login-submit-button,
.sps-register-submit-button,
.sps-setup-submit-button,
.sps-welcome-start {
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #0c4f9f, #1769d2 62%, #0b8ca8) !important;
    color: #fff !important;
    font-weight: 720 !important;
    box-shadow: 0 10px 24px rgba(12, 79, 159, .20) !important;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition), filter var(--sps-transition) !important;
}

.sps-button:hover,
.sps-mini-button:hover,
.sps-company-button:hover,
.sps-public-document-button:hover,
.sps-public-archive-button:hover,
.sps-open-doc:hover,
.sps-login-submit-button:hover,
.sps-register-submit-button:hover,
.sps-setup-submit-button:hover,
.sps-welcome-start:hover {
    filter: brightness(.97) saturate(1.05);
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 30px rgba(12, 79, 159, .25) !important;
}

.sps-button.ghost,
.sps-mini-button.ghost,
.sps-company-button.ghost,
.sps-public-document-button.ghost,
.sps-open-doc.secondary {
    border: 1px solid var(--sps-border) !important;
    background: #fff !important;
    color: var(--sps-primary-strong) !important;
    box-shadow: 0 6px 18px rgba(28, 57, 90, .055) !important;
}

.sps-card,
.sps-auth-card,
.sps-panel {
    border-color: var(--sps-border) !important;
    background: var(--sps-surface) !important;
    box-shadow: var(--sps-shadow-soft) !important;
}

.sps-table-wrap {
    border-color: var(--sps-border) !important;
    border-radius: var(--sps-radius-md) !important;
    background: #fff !important;
}

.sps-table th {
    border-color: var(--sps-border) !important;
    background: #edf3f8 !important;
    color: #465a70 !important;
}

.sps-table td { border-color: var(--sps-border) !important; }
.sps-table tbody tr:hover { background: #f6f9fc !important; }

.sps-badge,
.sps-public-visibility-chip,
.sps-verify-pill {
    border-color: rgba(23, 105, 210, .20) !important;
    background: var(--sps-primary-soft) !important;
    color: var(--sps-primary-strong) !important;
}

.sps-motion-ready .sps-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .58s cubic-bezier(.2, .75, .2, 1), transform .58s cubic-bezier(.2, .75, .2, 1);
    transition-delay: var(--sps-reveal-delay, 0ms);
}

.sps-motion-ready .sps-reveal.is-visible { opacity: 1; transform: none; }

@keyframes spsSagaraDrift {
    from { transform: translate3d(-1%, -.8%, 0) scale(1); }
    to { transform: translate3d(1%, .8%, 0) scale(1.025); }
}

@media (max-width: 899px) {
    .sps-portal,
    .sps-company-front,
    .sps-public,
    .sps-public-document,
    .sps-html-page,
    .sps-validation,
    .sps-verify-page { --sps-container: min(100% - 24px, 1240px); }
}

@media (max-width: 520px) {
    .sps-portal,
    .sps-company-front,
    .sps-public,
    .sps-public-document,
    .sps-html-page,
    .sps-validation,
    .sps-verify-page { --sps-container: min(100% - 20px, 1240px); --sps-radius-lg: 22px; --sps-radius-md: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .sps-portal *,
    .sps-public *,
    .sps-company-front *,
    .sps-public-document *,
    .sps-verify-page * { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .sps-motion-ready .sps-reveal { opacity: 1 !important; transform: none !important; }
}