:root {
    --craftro-primary-500: #0b8aa2;
    --craftro-primary-600: #08788d;
    --craftro-primary-700: #065f70;
    --craftro-bg: #f1f5f9;
    --craftro-surface: #ffffff;
    --craftro-surface-muted: #f8fafc;
    --craftro-border: #dbe3ee;
    --craftro-text: #0f172a;
    --craftro-text-muted: #64748b;
    --craftro-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.05);
    --craftro-radius: 14px;
    --craftro-radius-sm: 10px;
}

.dark {
    --craftro-bg: #0a1220;
    --craftro-surface: #0f172a;
    --craftro-surface-muted: #152033;
    --craftro-border: #22324a;
    --craftro-text: #e2e8f0;
    --craftro-text-muted: #94a3b8;
}

.fi-main {
    background: var(--craftro-bg) !important;
}

.fi-topbar {
    background: color-mix(in srgb, var(--craftro-surface) 95%, transparent) !important;
    border-bottom: 1px solid var(--craftro-border) !important;
}

.fi-sidebar {
    background: color-mix(in srgb, var(--craftro-surface) 95%, transparent) !important;
    border-right: 1px solid var(--craftro-border) !important;
}

.fi-sidebar-nav-item-button {
    border-radius: var(--craftro-radius-sm) !important;
}

.fi-sidebar-item-active .fi-sidebar-nav-item-button {
    background: linear-gradient(135deg, var(--craftro-primary-500), var(--craftro-primary-700)) !important;
    color: #fff !important;
}

.fi-section,
.fi-ta,
.fi-in,
.fi-modal-window {
    border: 1px solid var(--craftro-border) !important;
    border-radius: var(--craftro-radius) !important;
    background: var(--craftro-surface) !important;
    box-shadow: var(--craftro-shadow-sm) !important;
}

.fi-section-content [class*="grid"],
.fi-section-content .fi-in-entry-wrp,
.fi-section-content .fi-fo-field-wrp {
    min-width: 0;
}

.fi-section-content .fi-in-entry-content,
.fi-ta-text-item .fi-ta {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Login/Auth polish fallback (production-safe) */
.fi-auth-layout .fi-simple-header {
    align-items: center !important;
}

.fi-auth-layout .fi-simple-header-heading,
.fi-auth-layout .fi-simple-header-subheading {
    text-align: center !important;
}

.fi-auth-layout .fi-simple-header img,
.fi-auth-layout .fi-logo {
    display: block !important;
    margin-inline: auto !important;
    height: 3.35rem !important;
    width: auto !important;
    max-width: min(92vw, 21rem) !important;
    object-fit: contain !important;
}

.fi-auth-card {
    border: 1px solid var(--craftro-border) !important;
    border-radius: var(--craftro-radius) !important;
    box-shadow: 0 28px 80px -34px rgba(15, 23, 42, 0.45) !important;
}