@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

:root {
    --ui-bg: #f3f7fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fbff;
    --ui-border: #dbe5f0;
    --ui-border-strong: #c7d6e6;
    --ui-text: #0f172a;
    --ui-text-soft: #475569;
    --ui-accent: #0ea5a4;
    --ui-accent-2: #2563eb;
    --ui-danger: #dc2626;
    --ui-shadow: 0 18px 34px -28px rgba(15, 23, 42, 0.75);
}

body.app-redesign-body,
body.public-redesign-body {
    font-family: "Manrope", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.08), transparent 36%),
        radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.08), transparent 30%),
        linear-gradient(180deg, #eef4fa 0%, #f6fbff 22%, #fbfdff 100%);
    color: var(--ui-text);
}

.app-redesign-scope,
.public-redesign-scope {
    color: var(--ui-text);
}

.app-redesign-scope h1,
.app-redesign-scope h2,
.app-redesign-scope h3,
.public-redesign-scope h1,
.public-redesign-scope h2,
.public-redesign-scope h3 {
    font-family: "Plus Jakarta Sans", "Manrope", sans-serif;
    letter-spacing: -0.01em;
    color: var(--ui-text);
}

.app-redesign-scope p,
.app-redesign-scope label,
.public-redesign-scope p,
.public-redesign-scope label {
    color: var(--ui-text-soft);
}

/* Card system */
.app-redesign-scope .bg-white.rounded-lg,
.app-redesign-scope .bg-white.rounded-xl,
.app-redesign-scope .bg-white.rounded-2xl,
.app-redesign-scope .bg-white.border,
.public-redesign-scope .bg-white.rounded-lg,
.public-redesign-scope .bg-white.rounded-xl,
.public-redesign-scope .bg-white.rounded-2xl,
.public-redesign-scope .bg-white.border {
    background: linear-gradient(180deg, var(--ui-surface) 0%, #fbfdff 100%);
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow);
}

.app-redesign-scope .bg-gray-50,
.public-redesign-scope .bg-gray-50 {
    background: var(--ui-surface-soft) !important;
}

/* Form controls */
.app-redesign-scope input[type="text"],
.app-redesign-scope input[type="email"],
.app-redesign-scope input[type="number"],
.app-redesign-scope input[type="date"],
.app-redesign-scope input[type="search"],
.app-redesign-scope input[type="password"],
.app-redesign-scope input[type="tel"],
.app-redesign-scope select,
.app-redesign-scope textarea,
.public-redesign-scope input[type="text"],
.public-redesign-scope input[type="email"],
.public-redesign-scope input[type="number"],
.public-redesign-scope input[type="date"],
.public-redesign-scope input[type="search"],
.public-redesign-scope input[type="password"],
.public-redesign-scope input[type="tel"],
.public-redesign-scope select,
.public-redesign-scope textarea {
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 0.72rem !important;
    background: #ffffff;
    transition: all 0.2s ease;
    color: var(--ui-text);
}

.app-redesign-scope input:focus,
.app-redesign-scope select:focus,
.app-redesign-scope textarea:focus,
.public-redesign-scope input:focus,
.public-redesign-scope select:focus,
.public-redesign-scope textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--ui-accent-2) 55%, #c7d6e6) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Buttons */
.app-redesign-scope button,
.app-redesign-scope a[class*="btn"],
.public-redesign-scope button,
.public-redesign-scope a[class*="btn"] {
    border-radius: 0.72rem;
}

.app-redesign-scope .bg-blue-600,
.app-redesign-scope button.bg-blue-600,
.app-redesign-scope a.bg-blue-600,
.public-redesign-scope .bg-blue-600,
.public-redesign-scope button.bg-blue-600,
.public-redesign-scope a.bg-blue-600 {
    box-shadow: 0 12px 20px -14px rgba(37, 99, 235, 0.8);
}

/* Tables */
.app-redesign-scope table,
.public-redesign-scope table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ui-border);
    border-radius: 0.88rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: var(--ui-shadow);
}

.app-redesign-scope table thead,
.public-redesign-scope table thead {
    background: linear-gradient(90deg, #eff6ff 0%, #f4fbff 100%);
}

.app-redesign-scope table th,
.public-redesign-scope table th {
    color: #1e293b;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #d7e4f2;
}

.app-redesign-scope table td,
.public-redesign-scope table td {
    border-bottom: 1px solid #e8eff7;
    color: #334155;
}

.app-redesign-scope table tbody tr:hover,
.public-redesign-scope table tbody tr:hover {
    background: #f4faff;
}

/* Utility polish */
.app-redesign-scope .border,
.public-redesign-scope .border {
    border-color: var(--ui-border) !important;
}

.app-redesign-scope .shadow,
.app-redesign-scope .shadow-sm,
.app-redesign-scope .shadow-md,
.public-redesign-scope .shadow,
.public-redesign-scope .shadow-sm,
.public-redesign-scope .shadow-md {
    box-shadow: var(--ui-shadow) !important;
}

.app-redesign-scope .rounded,
.public-redesign-scope .rounded {
    border-radius: 0.65rem !important;
}

.app-redesign-scope .rounded-lg,
.public-redesign-scope .rounded-lg {
    border-radius: 0.82rem !important;
}

.app-redesign-scope .rounded-xl,
.public-redesign-scope .rounded-xl {
    border-radius: 1rem !important;
}

.app-redesign-scope .rounded-2xl,
.public-redesign-scope .rounded-2xl {
    border-radius: 1.15rem !important;
}

/* Public pages stronger hero sections if already gradient */
.public-redesign-scope .bg-gradient-to-r,
.public-redesign-scope .bg-gradient-to-br {
    box-shadow: 0 20px 36px -28px rgba(15, 23, 42, 0.85);
}

@media (max-width: 768px) {
    .app-redesign-scope table,
    .public-redesign-scope table {
        font-size: 0.85rem;
    }
}