:root {
    --brand-paper: #fff9ef;
    --brand-paper-soft: #f3ebdc;
    --brand-cream: #fffdf8;
    --brand-ink: #3e3128;
    --brand-muted: #6a574a;
    --brand-line: #dccfbf;
    --brand-line-soft: #efe2d2;
    --brand-coral: #b95a42;
    --brand-coral-deep: #a74a36;
    --brand-sage: #6f8d72;
    --brand-teal: #6e7ea7;
    --brand-teal-soft: #b95a42;
    --brand-danger: #a74a36;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

@keyframes brandFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, -10px, 0) scale(1.03);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(215, 152, 42, 0.34) 0%, rgba(215, 152, 42, 0) 44%),
        radial-gradient(circle at 88% 0%, rgba(111, 141, 114, 0.28) 0%, rgba(111, 141, 114, 0) 42%),
        linear-gradient(168deg, #fff9ef 0%, #f3ebdc 52%, #fff8ef 100%);
    color: var(--brand-ink);
    font-family: "Work Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    isolation: isolate;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
    opacity: 0.6;
    animation: brandFloat 15s ease-in-out infinite;
}

body::before {
    width: 360px;
    height: 360px;
    right: -140px;
    top: 14%;
    background: radial-gradient(circle, rgba(235, 166, 139, 0.42) 0%, rgba(235, 166, 139, 0) 70%);
}

body::after {
    width: 320px;
    height: 320px;
    left: -120px;
    bottom: -80px;
    background: radial-gradient(circle, rgba(169, 208, 189, 0.36) 0%, rgba(169, 208, 189, 0) 70%);
    animation-duration: 19s;
}

body.journey-auth {
    background:
        radial-gradient(circle at 14% 12%, rgba(215, 152, 42, 0.22) 0%, rgba(215, 152, 42, 0) 40%),
        radial-gradient(circle at 86% 4%, rgba(110, 126, 167, 0.2) 0%, rgba(110, 126, 167, 0) 36%),
        linear-gradient(168deg, #fffaf1 0%, #f5ecdf 52%, #fff8ef 100%);
}

body.journey-recipes {
    background:
        radial-gradient(circle at 10% 0%, rgba(185, 90, 66, 0.22) 0%, rgba(185, 90, 66, 0) 43%),
        radial-gradient(circle at 95% 85%, rgba(111, 141, 114, 0.2) 0%, rgba(111, 141, 114, 0) 34%),
        linear-gradient(165deg, #fff8ee 0%, #f4eadc 54%, #fff7ed 100%);
}

body.journey-import {
    background:
        radial-gradient(circle at 88% 8%, rgba(110, 126, 167, 0.26) 0%, rgba(110, 126, 167, 0) 40%),
        radial-gradient(circle at 5% 88%, rgba(185, 90, 66, 0.19) 0%, rgba(185, 90, 66, 0) 36%),
        linear-gradient(164deg, #fff8ef 0%, #f1e9dd 52%, #fff7ef 100%);
}

body.journey-planning {
    background:
        radial-gradient(circle at 16% 12%, rgba(111, 141, 114, 0.24) 0%, rgba(111, 141, 114, 0) 40%),
        radial-gradient(circle at 84% 92%, rgba(185, 90, 66, 0.2) 0%, rgba(185, 90, 66, 0) 34%),
        linear-gradient(168deg, #fff9ef 0%, #f2e8d9 52%, #fff9f1 100%);
}

body.journey-grocery {
    background:
        radial-gradient(circle at 8% 10%, rgba(111, 141, 114, 0.22) 0%, rgba(111, 141, 114, 0) 38%),
        radial-gradient(circle at 92% 84%, rgba(215, 152, 42, 0.2) 0%, rgba(215, 152, 42, 0) 34%),
        linear-gradient(168deg, #fffaf2 0%, #f1e8da 54%, #fff8ef 100%);
}

body.journey-billing {
    background:
        radial-gradient(circle at 88% 4%, rgba(110, 126, 167, 0.28) 0%, rgba(110, 126, 167, 0) 42%),
        radial-gradient(circle at 10% 92%, rgba(185, 90, 66, 0.18) 0%, rgba(185, 90, 66, 0) 34%),
        linear-gradient(166deg, #fff8ef 0%, #f0e6d8 54%, #fff8ef 100%);
}

body.journey-settings,
body.journey-notifications {
    background:
        radial-gradient(circle at 90% 12%, rgba(110, 126, 167, 0.2) 0%, rgba(110, 126, 167, 0) 40%),
        radial-gradient(circle at 8% 90%, rgba(185, 90, 66, 0.16) 0%, rgba(185, 90, 66, 0) 32%),
        linear-gradient(168deg, #fffaf2 0%, #f4eadc 56%, #fff9f1 100%);
}

body.journey-admin {
    background:
        radial-gradient(circle at 14% 6%, rgba(62, 49, 40, 0.1) 0%, rgba(62, 49, 40, 0) 30%),
        radial-gradient(circle at 84% 92%, rgba(110, 126, 167, 0.18) 0%, rgba(110, 126, 167, 0) 32%),
        linear-gradient(166deg, #f9f2e6 0%, #efe4d4 56%, #faf3e7 100%);
}

body.journey-auth .theme-page-heading::after {
    background: linear-gradient(90deg, rgba(215, 152, 42, 0.55), rgba(110, 126, 167, 0.45), rgba(185, 90, 66, 0.4));
}

body.journey-recipes .theme-page-heading::after {
    background: linear-gradient(90deg, rgba(185, 90, 66, 0.52), rgba(215, 152, 42, 0.45), rgba(111, 141, 114, 0.4));
}

body.journey-import .theme-page-heading::after {
    background: linear-gradient(90deg, rgba(110, 126, 167, 0.5), rgba(185, 90, 66, 0.45), rgba(215, 152, 42, 0.4));
}

body.journey-planning .theme-page-heading::after,
body.journey-grocery .theme-page-heading::after {
    background: linear-gradient(90deg, rgba(111, 141, 114, 0.52), rgba(215, 152, 42, 0.42), rgba(185, 90, 66, 0.4));
}

body.journey-billing .theme-page-heading::after {
    background: linear-gradient(90deg, rgba(110, 126, 167, 0.55), rgba(185, 90, 66, 0.44), rgba(215, 152, 42, 0.4));
}

::selection {
    background: rgba(255, 185, 140, 0.38);
    color: #173843;
}

h1,
h2,
h3,
h4 {
    font-family: "Fraunces", Georgia, serif;
    color: #3e3128;
    letter-spacing: 0.01em;
}

a {
    color: inherit;
    text-decoration-color: rgba(26, 95, 106, 0.35);
    text-underline-offset: 3px;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover {
    color: #125967;
    text-decoration-color: rgba(18, 89, 103, 0.55);
}

.skip-link {
    position: absolute;
    top: -9999px;
    left: 0.75rem;
    z-index: 9999;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    background: #3e3128;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0.75rem;
}

:focus-visible {
    outline: 3px solid #b95a42;
    outline-offset: 2px;
}

.theme-shell {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 226, 0.9));
    border: 1px solid rgba(255, 219, 186, 0.85);
    box-shadow: 0 20px 44px rgba(20, 49, 61, 0.14);
    border-radius: 24px;
}

.theme-page-heading {
    background: linear-gradient(180deg, rgba(255, 250, 243, 0.96), rgba(255, 242, 226, 0.94));
    border-bottom: 1px solid #f0d1ae;
    box-shadow: 0 10px 24px rgba(20, 49, 61, 0.1);
    position: relative;
}

.theme-page-heading::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, rgba(203, 91, 59, 0.44), rgba(44, 135, 147, 0.4), rgba(125, 154, 117, 0.35));
}

.brand-nav {
    background: rgba(255, 249, 239, 0.9);
    border-color: #f2d4b2;
    backdrop-filter: blur(9px);
    position: sticky;
    top: 0;
    z-index: 70;
}

.brand-nav-lockup {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.6rem;
    min-width: 0;
    color: #173b48;
    text-decoration: none;
}

.brand-nav-lockup img {
    width: 34px;
    height: 34px;
}

.brand-nav-mark {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    min-height: 34px;
    max-width: 34px;
    max-height: 34px;
    flex: 0 0 34px;
    display: block;
    object-fit: contain;
}

.brand-nav-lockup strong {
    display: block;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.08rem;
    line-height: 1.1;
}

.brand-nav-lockup .brand-nav-text {
    display: block;
    min-width: 0;
}

.brand-nav-lockup .brand-nav-text strong {
    display: block;
}

.brand-nav-lockup .brand-nav-text small {
    display: block;
    margin-top: 1px;
    font-family: "Work Sans", "Segoe UI", sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6f8690;
}

.brand-nav-user {
    border-color: #e0ccb6 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    color: #325663 !important;
    border-radius: 999px !important;
}

.brand-nav-user:hover {
    background: #fff3e4 !important;
    color: #173b48 !important;
}

.brand-nav-hamburger {
    color: #6f8690 !important;
}

.brand-nav-hamburger:hover,
.brand-nav-hamburger:focus {
    color: #173b48 !important;
    background: #fff3e6 !important;
}

.demo-banner {
    border-color: #cde7e8;
    background: #e9f7f8;
}

.demo-banner-content {
    color: #156674;
}

.demo-banner-btn {
    border: 1px solid #9ed2d5;
    background: rgba(255, 255, 255, 0.9);
    color: #156674;
}

.demo-banner-btn:hover {
    background: #daf0f2;
}

.brand-btn-primary {
    background: linear-gradient(135deg, var(--brand-coral) 0%, #ffc857 100%) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(173, 71, 45, 0.25) !important;
    box-shadow: 0 10px 20px rgba(173, 71, 45, 0.24);
    color: #fffdf9 !important;
    font-weight: 700 !important;
}

.brand-btn-primary:hover,
.brand-btn-primary:focus {
    background: linear-gradient(135deg, var(--brand-coral-deep) 0%, #f29c41 100%) !important;
    box-shadow: 0 12px 22px rgba(164, 63, 37, 0.3);
}

.brand-header-link {
    border: 1px solid #dcc8b3 !important;
    border-radius: 999px !important;
    color: #173b48 !important;
    background: rgba(255, 255, 255, 0.88) !important;
}

.brand-header-link:hover {
    background: #fff4e8 !important;
}

.brand-btn-secondary {
    border-color: #dcc8b3 !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #173b48 !important;
    border-radius: 999px !important;
}

.brand-btn-secondary:hover {
    background: #fff4e8 !important;
}

.brand-btn-danger {
    background: linear-gradient(135deg, var(--brand-danger), #cc5b45) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(163, 56, 41, 0.2) !important;
}

.brand-btn-danger:hover,
.brand-btn-danger:focus {
    background: linear-gradient(135deg, #a83a2a, #bb4e39) !important;
}

.brand-nav-link-active {
    border-color: var(--brand-teal-soft) !important;
    color: #173b48 !important;
    font-weight: 700 !important;
}

.brand-nav-link {
    color: #56707b !important;
    font-weight: 650 !important;
}

.brand-nav-link:hover {
    color: #173b48 !important;
    border-color: #d8c3ad !important;
}

.brand-responsive-nav-link-active {
    border-color: var(--brand-teal-soft) !important;
    color: var(--brand-teal) !important;
    background: #e7f3f4 !important;
}

.brand-responsive-nav-link {
    color: #56707b !important;
}

.brand-responsive-nav-link:hover {
    color: #173b48 !important;
    background: #fff2e4 !important;
    border-color: #dcc8b3 !important;
}

.brand-dropdown-link {
    color: #173b48 !important;
}

.brand-dropdown-link:hover,
.brand-dropdown-link:focus {
    background: #fff2e6 !important;
}

.brand-input-label {
    color: #173b48 !important;
    font-weight: 650 !important;
}

.brand-text-input {
    border-color: #dac4ae !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #173b48 !important;
}

.brand-text-input:focus {
    border-color: var(--brand-teal-soft) !important;
    box-shadow: 0 0 0 2px rgba(44, 135, 147, 0.25) !important;
}

.brand-auth-status {
    color: var(--brand-teal) !important;
}

.brand-panel {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 242, 223, 0.86)) !important;
    border: 1px solid #efcfae;
    box-shadow: 0 16px 34px rgba(20, 49, 61, 0.12) !important;
    border-radius: 22px !important;
}

.brand-panel-soft {
    background: linear-gradient(160deg, rgba(255, 248, 239, 0.94), rgba(255, 242, 224, 0.9)) !important;
    border: 1px solid #efcfae;
    box-shadow: 0 9px 20px rgba(20, 49, 61, 0.08) !important;
    border-radius: 16px !important;
}

.recipe-edit-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 0 0.5rem calc(env(safe-area-inset-bottom) + 0.5rem);
    pointer-events: none;
}

.recipe-edit-actions-inner {
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    border: 1px solid #e7d8c9;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px rgba(20, 49, 61, 0.2);
    backdrop-filter: blur(8px);
    padding: 0.75rem;
    pointer-events: auto;
}

.recipe-edit-actions-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.recipe-edit-actions-grid .brand-header-link,
.recipe-edit-actions-grid .brand-btn-primary {
    width: 100%;
}

.theme-page-heading h2 {
    font-family: "Baloo 2", "Fraunces", Georgia, serif;
    letter-spacing: 0.015em;
}

.brand-link-card {
    border: 1px solid #f1d3b2 !important;
    background: linear-gradient(168deg, rgba(255, 255, 255, 0.95), rgba(255, 247, 236, 0.9)) !important;
    box-shadow: 0 12px 24px rgba(20, 49, 61, 0.12) !important;
    border-radius: 18px !important;
}

.brand-link-card:hover {
    box-shadow: 0 18px 30px rgba(20, 49, 61, 0.18) !important;
}

.brand-chip {
    background: #fff0d6 !important;
    color: #b74a27 !important;
    border: 1px solid #f4c79f !important;
}

.brand-import-hero {
    background:
        radial-gradient(circle at 92% 16%, rgba(156, 220, 202, 0.24) 0%, rgba(156, 220, 202, 0) 36%),
        radial-gradient(circle at 6% 88%, rgba(255, 191, 159, 0.2) 0%, rgba(255, 191, 159, 0) 40%),
        linear-gradient(145deg, rgba(255, 251, 245, 0.96), rgba(255, 242, 226, 0.93));
    border-color: #e4cfba !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 10px 22px rgba(20, 49, 61, 0.07);
}

.brand-grocery-status {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid #e5d6c5;
    background: rgba(255, 253, 248, 0.85);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
}

.brand-grocery-check {
    width: 17px;
    height: 17px;
    border: 1.5px solid #c8b298;
    background: #fffdf9;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    transform: rotate(-2deg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.brand-grocery-check.is-checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #6e7350;
    border-bottom: 2px solid #6e7350;
    transform: rotate(36deg);
}

.brand-grocery-check.is-checked::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 2px;
    width: 5px;
    height: 10px;
    border-right: 1px solid rgba(72, 75, 50, 0.55);
    border-bottom: 1px solid rgba(72, 75, 50, 0.55);
    transform: rotate(33deg);
}

.brand-table-shell {
    background: rgba(255, 255, 255, 0.84) !important;
    border: 1px solid #e7d8c9;
    box-shadow: 0 12px 24px rgba(20, 49, 61, 0.08) !important;
    border-radius: 16px !important;
}

.brand-table-shell thead {
    background: #fdf0e1 !important;
}

.brand-table-shell tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.72);
}

.brand-table-shell tbody tr:nth-child(even) {
    background: rgba(254, 247, 238, 0.9);
}

.brand-kpi {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(251, 239, 223, 0.94)) !important;
    border: 1px solid #e7d8c9;
    box-shadow: 0 10px 22px rgba(20, 49, 61, 0.08) !important;
    border-radius: 16px !important;
}

.brand-link-card {
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid #e5d4c1 !important;
    box-shadow: 0 10px 20px rgba(20, 49, 61, 0.08) !important;
    color: inherit !important;
    border-radius: 14px !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.brand-link-card:hover {
    transform: translateY(-2px);
    border-color: #2c8793 !important;
    box-shadow: 0 14px 26px rgba(20, 49, 61, 0.12) !important;
}

.brand-chip {
    border-radius: 999px;
    border: 1px solid #cce5e6;
    background: #e8f4f5;
    color: #156674;
    padding: 0.1rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
}

input,
textarea,
select {
    border-color: #dac4ae !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-teal-soft) !important;
    box-shadow: 0 0 0 2px rgba(44, 135, 147, 0.23) !important;
}

input[type="checkbox"] {
    accent-color: var(--brand-teal);
}

.bg-gray-50 {
    background-color: #fbf2e6 !important;
}

.bg-gray-100 {
    background-color: #f8ecdd !important;
}

.bg-white {
    background-color: rgba(255, 255, 255, 0.86) !important;
}

.text-gray-500 {
    color: #68818b !important;
}

.text-gray-600 {
    color: #53707c !important;
}

.text-gray-700 {
    color: #355968 !important;
}

.text-gray-800 {
    color: #224a57 !important;
}

.text-gray-900 {
    color: #173d4a !important;
}

.text-slate-500,
.text-slate-600 {
    color: #53707c !important;
}

.text-slate-700,
.text-slate-800,
.text-slate-900 {
    color: #224a57 !important;
}

.border-gray-100 {
    border-color: #efe3d6 !important;
}

.border-gray-200 {
    border-color: #e7d8c9 !important;
}

.border-gray-300 {
    border-color: #dac4ae !important;
}

.text-indigo-600,
.text-indigo-700,
.text-indigo-800 {
    color: #156674 !important;
}

.bg-indigo-50,
.bg-indigo-100 {
    background-color: #e7f3f4 !important;
}

.border-indigo-400,
.border-indigo-500,
.border-indigo-700 {
    border-color: #2c8793 !important;
}

.bg-indigo-600 {
    background-color: #cb5b3b !important;
}

.bg-indigo-700 {
    background-color: #ad472d !important;
}

.hover\:bg-indigo-700:hover {
    background-color: #ad472d !important;
}

.focus\:ring-indigo-500:focus {
    --tw-ring-color: rgba(44, 135, 147, 0.42) !important;
}

.text-yellow-500 {
    color: #d7982a !important;
}

.hover\:text-yellow-500:hover {
    color: #b95a42 !important;
}

.mx-auto.max-w-7xl .rounded-lg.bg-white,
.mx-auto.max-w-6xl .rounded-lg.bg-white,
.mx-auto.max-w-5xl .rounded-lg.bg-white,
.mx-auto.max-w-4xl .rounded-lg.bg-white,
.mx-auto.max-w-2xl .rounded-lg.bg-white {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 244, 230, 0.8)) !important;
    border: 1px solid #e7d8c9;
    box-shadow: 0 12px 26px rgba(20, 49, 61, 0.09) !important;
}

@media (max-width: 640px) {
    body::before,
    body::after {
        opacity: 0.42;
    }

    .theme-page-heading::after {
        opacity: 0.8;
    }
}

@media (min-width: 640px) {
    .recipe-edit-actions {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .recipe-edit-actions-grid {
        flex-direction: row;
        justify-content: flex-end;
    }

    .recipe-edit-actions-grid .brand-header-link,
    .recipe-edit-actions-grid .brand-btn-primary {
        width: auto;
        min-width: 10rem;
    }
}