:root {
    --abc-base: #d8e18f;
    --abc-base-soft: #f0f4cf;
    --abc-base-pale: #fafbea;
    --abc-forest: #173f2d;
    --abc-moss: #436b2f;
    --abc-leaf: #6d8f37;
    --abc-ink: #17251d;
    --abc-muted: #637064;
    --abc-bg: #f6f7eb;
    --abc-panel: #ffffff;
    --abc-line: #dce4b5;
    --abc-shadow: 0 18px 45px rgba(23, 63, 45, 0.12);
    --abc-ui-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --abc-display-font: "Fraunces", Georgia, serif;
}

body {
    background:
        radial-gradient(circle at top left, rgba(216, 225, 143, 0.55), transparent 34rem),
        linear-gradient(180deg, #fbfcf1 0%, var(--abc-bg) 42%, #eef3dc 100%);
    color: var(--abc-ink);
    font-family: var(--abc-ui-font);
    font-size: 16px;
    letter-spacing: 0;
}

h1,
h2,
h3,
.navbar-brand {
    color: var(--abc-forest);
}

h1,
.display-5 {
    font-family: var(--abc-display-font);
    letter-spacing: 0;
}

.lead {
    font-weight: 500;
}

.app-shell {
    min-height: 100vh;
}

.topbar {
    border-bottom: 1px solid var(--abc-line);
    background: rgba(250, 251, 234, 0.92);
    backdrop-filter: blur(14px);
}

.hero-brand .navbar-brand {
    color: #fff;
}

.hero-brand .btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.64);
    --bs-btn-hover-color: var(--abc-forest);
    --bs-btn-hover-bg: var(--abc-base);
    --bs-btn-hover-border-color: var(--abc-base);
}

.brand-mark {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: var(--abc-forest);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(23, 63, 45, 0.22);
}

.brand-mark img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

.btn-dark {
    --bs-btn-bg: var(--abc-forest);
    --bs-btn-border-color: var(--abc-forest);
    --bs-btn-hover-bg: #0f3021;
    --bs-btn-hover-border-color: #0f3021;
}

.btn-outline-dark,
.btn-outline-secondary {
    --bs-btn-color: var(--abc-forest);
    --bs-btn-border-color: #9fab68;
    --bs-btn-hover-bg: var(--abc-forest);
    --bs-btn-hover-border-color: var(--abc-forest);
    --bs-btn-hover-color: #fff;
}

.hero {
    padding: 58px 0 40px;
    background:
        radial-gradient(circle at 14% 20%, rgba(244, 255, 185, 0.55) 0 3.8rem, transparent 4rem),
        radial-gradient(circle at 82% 18%, rgba(216, 225, 143, 0.5) 0 5.5rem, transparent 5.8rem),
        radial-gradient(circle at 68% 72%, rgba(176, 210, 105, 0.4) 0 4.8rem, transparent 5.1rem),
        radial-gradient(circle at 24% 84%, rgba(255, 255, 255, 0.22) 0 3.2rem, transparent 3.5rem),
        linear-gradient(135deg, rgba(36, 91, 61, 0.82), rgba(114, 143, 55, 0.66)),
        url("https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?auto=format&fit=crop&w=1800&q=80");
    background-size: auto, auto, auto, auto, cover, cover;
    background-position: center;
    color: #fff;
    border-bottom: 6px solid var(--abc-base);
}

.hero h1,
.hero .display-5 {
    color: #fff;
    max-width: 14ch;
}

.hero .lead {
    color: #f5f8df;
    max-width: 48rem;
}

.hero .badge {
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--abc-forest) !important;
    box-shadow: 0 8px 22px rgba(10, 31, 22, 0.12);
}

.hero-notice {
    display: inline-block;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #f8fbdf;
}

.search-panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--abc-line);
    border-radius: 8px;
    box-shadow: var(--abc-shadow);
}

.form-label {
    color: var(--abc-forest);
}

.form-control,
.form-select {
    border-color: #cbd6a0;
    color: var(--abc-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--abc-leaf);
    box-shadow: 0 0 0 0.22rem rgba(216, 225, 143, 0.48);
}

.input-group-text {
    border-color: #cbd6a0;
    color: var(--abc-forest);
}

.drop-zone {
    min-height: 132px;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px dashed #90a55d;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--abc-base-pale), #fff);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.drop-zone [data-lucide="camera"] {
    width: 34px;
    height: 34px;
    color: var(--abc-forest);
}

.drop-zone:hover,
.drop-zone.is-dragging {
    border-color: var(--abc-forest);
    background: var(--abc-base-soft);
    box-shadow: 0 12px 28px rgba(67, 107, 47, 0.14);
    transform: translateY(-1px);
}

.result-card,
.admin-panel,
.fraction-card {
    border: 1px solid var(--abc-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 28px rgba(23, 63, 45, 0.07);
}

.result-card {
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.result-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(23, 63, 45, 0.11);
}

.result-card-primary {
    border-color: #aebc57;
    background: linear-gradient(180deg, #ffffff 0%, var(--abc-base-pale) 100%);
    box-shadow: 0 18px 44px rgba(67, 107, 47, 0.15);
}

.fraction-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.muted {
    color: var(--abc-muted);
}

.icon-btn {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(23, 63, 45, 0.14);
}

.help-panel {
    position: sticky;
    top: 88px;
}

.help-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--abc-base-soft);
    color: var(--abc-forest);
}

.preview-img {
    max-height: 190px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--abc-line);
    background: #fff;
}

.badge.text-bg-warning {
    background: var(--abc-base) !important;
    color: var(--abc-forest) !important;
}

.text-warning {
    color: #96a026 !important;
}

.table td,
.table th {
    vertical-align: middle;
}

.table {
    --bs-table-hover-bg: var(--abc-base-pale);
}

.alert-success {
    --bs-alert-bg: var(--abc-base-soft);
    --bs-alert-border-color: var(--abc-line);
    --bs-alert-color: var(--abc-forest);
}

.alert-warning {
    --bs-alert-bg: #fff6d8;
    --bs-alert-border-color: #f1d487;
    --bs-alert-color: #5c4310;
}

.ask-answer {
    border-left: 4px solid var(--abc-base);
    background: var(--abc-base-pale);
    border-radius: 8px;
    padding: 1rem;
    white-space: pre-wrap;
}

@media (max-width: 767.98px) {
    .hero {
        padding: 38px 0 28px;
    }

    .display-5 {
        font-size: 2.25rem;
    }

    .hero h1,
    .hero .display-5 {
        max-width: 100%;
    }

    .search-panel {
        margin-top: -0.5rem;
    }

    .drop-zone {
        min-height: 150px;
    }
}