/* ============================================================
   Cookbook Design System
   ============================================================ */
:root {
    --paper:        #fdf8ef;
    --paper-md:     #f5ede0;
    --paper-dk:     #ede0cc;
    --cream:        #fffef9;
    --ink:          #1c1208;
    --ink-md:       #3d2e1a;
    --ink-lt:       #6b5540;
    --tan:          #cbb99a;
    --tan-lt:       #e8ddd0;
    --tan-pale:     #f5efe5;

    --green-900:    #0e2214;
    --green-800:    #162f1d;
    --green-700:    #1e4029;
    --green-600:    #2d5c1e;
    --green-500:    #3d7a28;
    --green-400:    #5a9e3f;
    --green-200:    #b8dda4;
    --green-100:    #ddf0d4;
    --green-50:     #f2faee;

    --gold:         #b87322;
    --gold-lt:      #fdf0dc;
    --red-ink:      #8b2635;

    --color-primary:    var(--green-600);
    --color-primary-dk: var(--green-700);
    --color-accent:     var(--green-400);
    --color-bg:         var(--paper);
    --color-surface:    var(--cream);
    --color-text:       var(--ink);
    --color-muted:      var(--ink-lt);
    --color-border:     var(--tan);
    --color-border-lt:  var(--tan-lt);

    --radius-card:  10px;
    --radius-sm:    6px;
    --shadow-card:  0 2px 8px rgba(60,35,10,.08), 0 1px 3px rgba(60,35,10,.05);
    --shadow-hover: 0 6px 24px rgba(60,35,10,.14), 0 2px 6px rgba(60,35,10,.08);
    --shadow-lift:  0 12px 40px rgba(60,35,10,.18);

    --font-head:    'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-hand:    'Inter', system-ui, sans-serif;
    --font-ui:      'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
    font-family:   var(--font-body);
    background:    var(--paper);
    color:         var(--ink);
    display:       flex;
    flex-direction: column;
    min-height:    100vh;
    font-size:     .9375rem;
    line-height:   1.65;
    -webkit-font-smoothing: antialiased;
    /* subtle paper grain */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
}

main { flex: 1; }
img { max-width: 100%; }

/* ============================================================
   Bootstrap overrides
   ============================================================ */
.btn {
    font-family:   var(--font-ui);
    font-weight:   500;
    font-size:     .875rem;
    border-radius: var(--radius-sm);
    transition:    all .18s;
    letter-spacing: .01em;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--color-primary-dk);
    border-color: var(--color-primary-dk);
    color: #fff;
}
.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline-primary:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.btn-success { background: var(--green-500); border-color: var(--green-500); }
.btn-success:hover { background: var(--green-600); border-color: var(--green-600); }

.form-control, .form-select {
    font-family:  var(--font-ui);
    border-color: var(--tan);
    border-radius: var(--radius-sm);
    font-size:    .9rem;
    background:   var(--cream);
    color:        var(--ink);
    min-height:   42px;
    transition:   border-color .18s, box-shadow .18s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--green-500);
    box-shadow:   0 0 0 3px rgba(45,92,30,.13);
    background:   #fff;
}
.form-control::placeholder { color: var(--tan); font-style: italic; }
.form-label {
    font-family:   var(--font-ui);
    font-weight:   600;
    font-size:     .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:         var(--ink-md);
    margin-bottom: .3rem;
}
.form-label.required::after { content: ' *'; color: var(--red-ink); font-size: .75rem; }
.form-text { font-family: var(--font-ui); color: var(--ink-lt); font-size: .78rem; }

.table { font-family: var(--font-ui); font-size: .875rem; }
.table thead th {
    background: var(--paper-md);
    color: var(--green-700);
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--tan);
}

.alert { border-radius: var(--radius-card); font-family: var(--font-ui); font-size: .9rem; }
.alert-success { background: var(--green-50); border-color: var(--green-200); color: var(--green-700); }
.alert-danger  { background: #fef5f5; border-color: #f5c6c6; color: #7a1f1f; }

.badge { font-family: var(--font-ui); font-weight: 600; border-radius: 5px; }

/* ============================================================
   Navbar — cookbook cover
   ============================================================ */
.navbar {
    background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
    box-shadow: 0 3px 16px rgba(0,0,0,.35);
    padding:    .55rem 0;
    position:   sticky;
    top:        0;
    z-index:    1030;
    border-bottom: 3px solid var(--gold);
}
.navbar-brand {
    font-family:    var(--font-head);
    font-size:      1.35rem;
    color:          #fff !important;
    letter-spacing: .02em;
}
.navbar-brand i { color: var(--gold); }
.navbar-brand span { font-style: normal; font-weight: 600; }

.navbar .nav-link {
    font-family:  var(--font-ui);
    color:        rgba(255,255,255,.82) !important;
    font-size:    .85rem;
    font-weight:  500;
    padding:      .4rem .7rem;
    border-radius: var(--radius-sm);
    transition:   all .18s;
    min-height:   38px;
    display:      flex;
    align-items:  center;
}
.navbar .nav-link:hover { background: rgba(255,255,255,.1); color: #fff !important; }
.navbar .btn-nav { border: 1px solid rgba(255,255,255,.2); }
.navbar .btn-nav:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }

.navbar .dropdown-menu {
    font-family:   var(--font-ui);
    border:        1px solid var(--tan-lt);
    border-radius: var(--radius-card);
    box-shadow:    var(--shadow-lift);
    padding:       .4rem;
    margin-top:    .3rem;
    background:    var(--cream);
}
.navbar .dropdown-item {
    border-radius: var(--radius-sm);
    font-size:     .875rem;
    padding:       .5rem .75rem;
    color:         var(--ink);
    min-height:    38px;
    display:       flex;
    align-items:   center;
}
.navbar .dropdown-item:hover { background: var(--green-50); color: var(--green-700); }
.navbar .dropdown-item.text-danger:hover { background: #fef5f5; color: var(--red-ink) !important; }
.navbar .dropdown-divider { border-color: var(--tan-lt); }
.user-avatar {
    width:  32px; height: 32px;
    border-radius: 50%;
    background: var(--green-500);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.22);
    font-family: var(--font-ui);
}
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--green-800);
        border-radius: var(--radius-card);
        margin-top: .5rem;
        padding: .75rem;
        border: 1px solid rgba(255,255,255,.08);
    }
    .navbar .dropdown-menu {
        background: transparent; border: none; box-shadow: none; padding: 0 0 0 1rem;
    }
    .navbar .dropdown-item { color: rgba(255,255,255,.8); }
    .navbar .dropdown-item:hover { background: rgba(255,255,255,.08); color: #fff; }
}

/* ============================================================
   Footer
   ============================================================ */
footer {
    background:  var(--green-900);
    border-top:  3px solid var(--gold);
    color:       rgba(255,255,255,.5);
    font-family: var(--font-ui);
    font-size:   .82rem;
}
footer a { color: var(--gold); text-decoration: none; }
footer a:hover { color: #f5d08a; }

/* ============================================================
   Flash messages
   ============================================================ */
.alert-dismissible .btn-close { font-size: .75rem; }

/* ============================================================
   Page hero — chapter opening style
   ============================================================ */
.page-header h1 {
    font-family: var(--font-head);
    font-size:   clamp(1.5rem, 4vw, 2rem);
    color:       var(--ink);
}

.page-hero {
    text-align:    center;
    padding:       1.75rem 1rem 1.25rem;
    position:      relative;
}
.page-hero::before {
    content:   '';
    display:   block;
    width:     80px;
    height:    3px;
    background: var(--gold);
    margin:    0 auto .75rem;
    border-radius: 2px;
}
.page-hero__title {
    font-family:   var(--font-head);
    font-size:     clamp(1.8rem, 4vw, 2.8rem);
    color:         var(--ink);
    letter-spacing: -.01em;
}
.page-hero__subtitle {
    font-family: var(--font-body);
    font-style:  italic;
    color:       var(--ink-lt);
    font-size:   1rem;
}
.page-hero__hand {
    font-family: var(--font-hand);
    font-size:   1.3rem;
    color:       var(--green-600);
    display:     block;
    margin-top:  .25rem;
}

/* Search */
.search-form { max-width: 540px; margin: 0 auto; }
.search-form .input-group {
    box-shadow:    var(--shadow-card);
    border-radius: var(--radius-sm);
    overflow:      hidden;
    border:        1px solid var(--tan);
}
.search-form .form-control {
    border: none;
    min-height: 46px;
}
.search-form .input-group-text { background: var(--cream); border: none; }
.search-form .btn { min-height: 46px; border-radius: 0; }

/* ============================================================
   Tag pills
   ============================================================ */
.tag-pill {
    display:        inline-flex;
    align-items:    center;
    padding:        .2rem .65rem;
    border-radius:  999px;
    background:     var(--paper-md);
    border:         1px solid var(--tan);
    color:          var(--ink-md);
    font-family:    var(--font-hand);
    font-size:      .95rem;
    text-decoration: none;
    transition:     all .16s;
    white-space:    nowrap;
}
.tag-pill:hover, .tag-pill.active {
    background:    var(--green-600);
    border-color:  var(--green-600);
    color:         #fff;
    text-decoration: none;
}

/* ============================================================
   Recipe Card — index card / recipe card aesthetic
   ============================================================ */
.recipe-card {
    background:     var(--cream);
    border-radius:  var(--radius-card);
    border:         1px solid var(--tan);
    box-shadow:     var(--shadow-card);
    overflow:       hidden;
    transition:     box-shadow .22s, transform .22s;
    display:        flex;
    flex-direction: column;
    height:         100%;
    position:       relative;
}
.recipe-card::after {
    content:  '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height:   3px;
    background: var(--gold);
    opacity:  0;
    transition: opacity .2s;
}
.recipe-card:hover {
    box-shadow: var(--shadow-hover);
    transform:  translateY(-3px);
}
.recipe-card:hover::after { opacity: 1; }

.recipe-card__img-link { display: block; overflow: hidden; height: 170px; }
.recipe-card__img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s; display: block;
}
.recipe-card:hover .recipe-card__img { transform: scale(1.04); }

.recipe-card__placeholder {
    height:          170px;
    background:      linear-gradient(135deg, var(--paper-md), var(--tan-lt));
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       2.5rem;
    color:           var(--tan);
}

.recipe-card__body {
    padding:        1rem 1.1rem 1.1rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
}
.recipe-card__title {
    font-family:   var(--font-head);
    font-size:     1.05rem;
    line-height:   1.3;
    margin-bottom: .4rem;
}
.recipe-card__title a { color: var(--ink); text-decoration: none; }
.recipe-card__title a:hover { color: var(--green-600); }
.recipe-card__desc {
    font-family:   var(--font-body);
    font-size:     .83rem;
    color:         var(--ink-lt);
    margin-bottom: .5rem;
    line-height:   1.4;
}
.recipe-card__meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         .4rem;
    align-items: center;
    font-family: var(--font-ui);
    font-size:   .76rem;
    color:       var(--ink-lt);
    margin-top:  auto;
    padding-top: .5rem;
    border-top:  1px solid var(--tan-lt);
}
.meta-item { display: flex; align-items: center; gap: .2rem; }
.meta-item i { color: var(--green-500); }
.recipe-card__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; }
.recipe-card__tags .tag-pill { font-size: .85rem; padding: .1rem .5rem; }

/* ============================================================
   Recipe Detail — rp-* components
   ============================================================ */

/* Top bar */
.rp-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             .75rem;
    padding:         .65rem 1rem;
    background:      var(--cream);
    border:          1px solid var(--tan);
    border-radius:   var(--radius-card);
    box-shadow:      var(--shadow-card);
}

.rp-topbar__left {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    min-width:   0;
}

.rp-back-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      white;
    border:          1px solid var(--tan);
    color:           var(--text-muted);
    text-decoration: none;
    flex-shrink:     0;
    transition:      background .15s, color .15s, border-color .15s;
}
.rp-back-btn:hover {
    background:   var(--gold);
    border-color: var(--gold);
    color:        white;
}

.rp-topbar .breadcrumb {
    font-family:   var(--font-ui);
    font-size:     .82rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.rp-topbar .breadcrumb-item.active {
    max-width:     30ch;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.rp-topbar__actions {
    display:     flex;
    align-items: center;
    gap:         .35rem;
    flex-shrink: 0;
}

.rp-action-divider {
    width:        1px;
    height:       22px;
    background:   var(--tan);
    margin-inline: .15rem;
}

/* Individual action buttons */
.rp-action-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .35rem;
    padding:         .3rem .75rem;
    border-radius:   6px;
    font-size:       .82rem;
    font-weight:     500;
    font-family:     var(--font-ui);
    border:          1px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    background:      none;
    transition:      background .15s, color .15s, border-color .15s;
    white-space:     nowrap;
}
.rp-action-btn--edit {
    color:        var(--green-600);
    border-color: var(--green-600);
    background:   white;
}
.rp-action-btn--edit:hover {
    background:   var(--green-600);
    border-color: var(--green-600);
    color:        white;
}
.rp-action-btn--delete {
    color:        #dc3545;
    border-color: #f5c6cb;
    background:   white;
}
.rp-action-btn--delete:hover {
    background:   #dc3545;
    border-color: #dc3545;
    color:        white;
}
.rp-action-btn--public {
    color:        #198754;
    border-color: #a3cfbb;
    background:   #d1e7dd;
}
.rp-action-btn--public:hover {
    background:   #198754;
    border-color: #198754;
    color:        white;
}
.rp-action-btn--private {
    color:        var(--text-muted);
    border-color: var(--tan);
    background:   white;
}
.rp-action-btn--private:hover {
    background:   var(--tan);
    color:        var(--text-dark);
}

.rp-public-badge {
    display:      inline-flex;
    align-items:  center;
    gap:          .35rem;
    font-size:    .8rem;
    font-weight:  500;
    color:        #198754;
    background:   #d1e7dd;
    border:       1px solid #a3cfbb;
    border-radius: 6px;
    padding:      .3rem .75rem;
}

/* Share box (public recipe) */
.rp-share-box {
    background:    #f2faee;
    border:        1px solid var(--green-200);
    border-left:   4px solid var(--green-500);
    border-radius: var(--radius-card);
    padding:       1rem 1.25rem;
    display:       flex;
    flex-direction: column;
    gap:           .65rem;
}
.rp-share-box__header {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    font-size:   .9rem;
}
.rp-share-box__url {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    background:    white;
    border:        1px solid var(--green-200);
    border-radius: 6px;
    padding:       .4rem .75rem;
    font-size:     .85rem;
    font-family:   monospace;
    color:         var(--ink-md);
    flex-wrap:     wrap;
}
.rp-share-box__url span {
    flex:         1;
    word-break:   break-all;
    min-width:    0;
}
.rp-copy-btn {
    display:      inline-flex;
    align-items:  center;
    gap:          .3rem;
    padding:      .25rem .65rem;
    font-size:    .8rem;
    font-weight:  500;
    border:       1px solid var(--green-400);
    border-radius: 5px;
    background:   white;
    color:        var(--green-600);
    cursor:       pointer;
    white-space:  nowrap;
    transition:   background .15s, color .15s;
}
.rp-copy-btn:hover {
    background: var(--green-600);
    color:      white;
}
.rp-share-box__socials {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
}
.rp-social-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .35rem;
    padding:         .28rem .7rem;
    border-radius:   5px;
    font-size:       .8rem;
    font-weight:     500;
    text-decoration: none;
    transition:      opacity .15s;
}
.rp-social-btn:hover { opacity: .82; }
.rp-social-btn--wa { background: #25D366; color: white; }
.rp-social-btn--fb { background: #1877F2; color: white; }
.rp-social-btn--tw { background: #000;    color: white; }
.rp-social-btn--pi { background: #E60023; color: white; }

/* Hero */
.rp-hero {
    display:               grid;
    grid-template-columns: 220px 1fr;
    gap:                   1.25rem;
    align-items:           start;
}
.rp-hero__info--full { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .rp-hero { grid-template-columns: 1fr; gap: 1rem; } }

.rp-hero__img-wrap {
    border-radius: var(--radius-card);
    overflow:      hidden;
    box-shadow:    var(--shadow-hover);
    aspect-ratio:  1/1;
    border:        3px solid var(--tan);
}
.rp-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rp-title {
    font-family:    var(--font-head);
    font-size:      clamp(1.5rem, 2.5vw, 2rem);
    line-height:    1.2;
    color:          var(--ink);
    margin-bottom:  .35rem;
    letter-spacing: -.01em;
}
.rp-description {
    font-family:   var(--font-body);
    color:         var(--ink-lt);
    font-size:     .9rem;
    line-height:   1.6;
    margin-bottom: .75rem;
}

/* Meta strip */
.rp-meta-strip {
    display:       flex;
    flex-wrap:     wrap;
    gap:           .5rem;
    margin-bottom: .85rem;
}
.rp-meta-item {
    display:       flex;
    align-items:   center;
    gap:           .4rem;
    background:    var(--paper-md);
    border:        1px solid var(--tan);
    border-radius: var(--radius-sm);
    padding:       .35rem .65rem;
    min-width:     80px;
    font-family:   var(--font-ui);
}
.rp-meta-item--accent { background: var(--green-50); border-color: var(--green-200); }
.rp-meta-item--accent i { color: var(--green-600); }
.rp-meta-item i { font-size: 1rem; color: var(--green-500); flex-shrink: 0; }
.rp-meta-item div { display: flex; flex-direction: column; line-height: 1.2; }
.rp-meta-label { font-size: .63rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-lt); }
.rp-meta-item strong { font-size: .85rem; color: var(--ink); }
.diff-easy   { color: var(--green-600) !important; }
.diff-medium { color: #b45a00 !important; }
.diff-hard   { color: var(--red-ink) !important; }

/* Tags + source */
.rp-footer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: .4rem; }
.rp-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.rp-source-link {
    font-family:     var(--font-ui);
    font-size:       .8rem;
    color:           var(--ink-lt);
    text-decoration: none;
    display:         flex;
    align-items:     center;
    gap:             .25rem;
    border:          1px solid var(--tan);
    border-radius:   999px;
    padding:         .2rem .65rem;
    transition:      all .15s;
    background:      var(--paper-md);
}
.rp-source-link:hover { border-color: var(--gold); color: var(--gold); }

/* Body layout */
.rp-body {
    display:               grid;
    grid-template-columns: 260px 1fr;
    gap:                   1.5rem;
    align-items:           start;
    margin-top:            1.25rem;
}
@media (max-width: 991.98px) { .rp-body { grid-template-columns: 1fr; gap: 1rem; } }
.rp-ingredients-col { position: sticky; top: 68px; }
@media (max-width: 991.98px) { .rp-ingredients-col { position: static; } }

/* Section cards */
.rp-section {
    background:    var(--cream);
    border:        1px solid var(--tan);
    border-radius: var(--radius-card);
    padding:       1.25rem 1.4rem;
    box-shadow:    var(--shadow-card);
}
.rp-section__title {
    font-family:    var(--font-head);
    font-size:      1.1rem;
    display:        flex;
    align-items:    center;
    gap:            .4rem;
    margin-bottom:  1rem;
    padding-bottom: .6rem;
    border-bottom:  2px solid var(--tan-lt);
    color:          var(--ink);
}
.rp-section__title i { color: var(--green-600); }
.rp-ing-count {
    margin-left:   auto;
    font-family:   var(--font-hand);
    font-size:     1rem;
    color:         var(--green-600);
    font-weight:   700;
}

.rp-check-hint {
    font-family:   var(--font-ui);
    font-size:     .73rem;
    color:         var(--ink-lt);
    margin-bottom: .6rem;
    font-style:    italic;
}

/* Ingredient list — lined paper style */
.rp-ing-list { list-style: none; padding: 0; margin: 0; }
.rp-ing-item {
    display:       flex;
    align-items:   baseline;
    gap:           .6rem;
    padding:       .5rem .35rem;
    border-bottom: 1px solid var(--tan-lt);
    cursor:        pointer;
    border-radius: 4px;
    transition:    background .15s;
    position:      relative;
}
.rp-ing-item:last-child { border-bottom: none; }
.rp-ing-item:hover { background: var(--green-50); }
.rp-ing-item--done .rp-ing-qty,
.rp-ing-item--done .rp-ing-name { text-decoration: line-through; opacity: .45; }
.rp-ing-check {
    margin-left: auto; color: var(--green-500);
    font-size: .95rem; flex-shrink: 0; opacity: 0; transition: opacity .15s;
}
.rp-ing-item--done .rp-ing-check { opacity: 1; }

.rp-ing-qty {
    min-width:   60px;
    font-family: var(--font-hand);
    font-size:   1rem;
    font-weight: 700;
    color:       var(--green-700);
    white-space: nowrap;
    flex-shrink: 0;
}
.rp-ing-name {
    font-family: var(--font-body);
    font-size:   .88rem;
    flex:        1;
    line-height: 1.4;
}
.rp-ing-notes {
    display:    block;
    font-style: italic;
    font-size:  .76rem;
    color:      var(--ink-lt);
}
.rp-reset-btn {
    margin-top:   .75rem;
    background:   none;
    border:       1px solid var(--tan);
    border-radius: 999px;
    color:        var(--ink-lt);
    font-family:  var(--font-ui);
    font-size:    .75rem;
    padding:      .25rem .75rem;
    cursor:       pointer;
    transition:   all .15s;
    display:      flex;
    align-items:  center;
    background:   var(--paper-md);
}
.rp-reset-btn:hover { border-color: var(--green-400); color: var(--green-700); }

/* Steps */
.rp-steps-list {
    list-style:     none; padding: 0; margin: 0;
    display:        flex;
    flex-direction: column;
    gap:            .85rem;
}
.rp-step {
    display:       flex;
    gap:           1rem;
    align-items:   flex-start;
    background:    var(--paper);
    border:        1px solid var(--tan-lt);
    border-radius: var(--radius-card);
    border-left:   3px solid var(--green-400);
    padding:       .9rem 1rem;
    transition:    border-color .2s, box-shadow .2s;
}
.rp-step:hover { border-left-color: var(--green-600); box-shadow: var(--shadow-card); }
.rp-step__num {
    flex-shrink:     0;
    width:           2rem; height: 2rem;
    border-radius:   50%;
    background:      var(--green-600);
    color:           #fff;
    display:         flex; align-items: center; justify-content: center;
    font-family:     var(--font-hand);
    font-size:       1.1rem;
    font-weight:     700;
    box-shadow:      0 2px 6px rgba(45,92,30,.3);
    margin-top:      .05rem;
}
.rp-step__text {
    flex:        1;
    font-family: var(--font-body);
    font-size:   .93rem;
    line-height: 1.7;
    color:       var(--ink);
}

/* ============================================================
   Form sections
   ============================================================ */
.card-section {
    background:    var(--cream);
    border-radius: var(--radius-card);
    border:        1px solid var(--tan);
    padding:       1.25rem 1.4rem;
    box-shadow:    var(--shadow-card);
}
@media (max-width: 575.98px) { .card-section { padding: 1rem; } }
.section-title {
    font-family:   var(--font-head);
    font-size:     1.05rem;
    margin-bottom: 1rem;
    color:         var(--ink);
    display:       flex;
    align-items:   center;
    gap:           .35rem;
}
.section-title i { color: var(--green-600); }

/* Ingredient step preview */
.ingredient-row { transition: opacity .2s; }
.step-preview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.step-preview-item {
    display:       flex;
    align-items:   flex-start;
    gap:           .6rem;
    background:    var(--paper-md);
    border:        1px solid var(--tan-lt);
    border-left:   3px solid var(--green-400);
    border-radius: var(--radius-sm);
    padding:       .45rem .65rem;
    font-family:   var(--font-body);
    font-size:     .875rem;
    line-height:   1.45;
}
.step-preview-num {
    flex-shrink:     0;
    width:  1.5rem; height: 1.5rem;
    border-radius:   50%;
    background:      var(--green-600);
    color:           #fff;
    display:         flex; align-items: center; justify-content: center;
    font-family:     var(--font-hand);
    font-size:       .9rem;
    font-weight:     700;
    margin-top:      .1rem;
}
.step-preview-text { flex: 1; color: var(--ink); }

/* ── Manage zone (edit form bottom) ─────────────────────────────────────── */
.manage-zone {
    border:        1px solid var(--tan);
    border-radius: var(--radius-card);
    overflow:      hidden;
}
.manage-zone__item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         1rem 1.25rem;
    background:      white;
}
.manage-zone__item + .manage-zone__item {
    border-top: 1px solid var(--tan);
}
.manage-zone__item--danger {
    background: #fff8f8;
}
.manage-zone__info {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    font-size:   .9rem;
}
.manage-zone__info i {
    font-size:   1.2rem;
    flex-shrink: 0;
}
.manage-zone__confirm {
    padding:     1rem 1.25rem;
    background:  #fff3cd;
    border-top:  1px solid #ffc107;
    font-size:   .88rem;
    color:       #664d03;
}
.step-form-num {
    flex-shrink:     0;
    width:  1.6rem; height: 1.6rem;
    border-radius:   50%;
    background:      var(--green-600);
    color:           #fff;
    display:         flex; align-items: center; justify-content: center;
    font-family:     var(--font-hand);
    font-size:       .9rem;
    font-weight:     700;
    margin-top:      .25rem;
}

/* ============================================================
   Quick parse
   ============================================================ */
.parsed-list { max-height: 340px; overflow-y: auto; }
.parsed-item { font-size: .875rem; line-height: 1.45; }
.parsed-step { display: flex; gap: .5rem; align-items: flex-start; padding: .4rem 0; border-bottom: 1px solid var(--tan-lt); }
.parsed-step:last-child { border-bottom: none; }
.step-num-sm {
    flex-shrink:     0; width: 1.4rem; height: 1.4rem;
    border-radius:   50%;
    background:      var(--green-600); color: #fff;
    display:         flex; align-items: center; justify-content: center;
    font-family:     var(--font-hand); font-size: .85rem; font-weight: 700; margin-top: .1rem;
}

/* ============================================================
   Empty state
   ============================================================ */
.empty-state { padding: 3rem 1.5rem; text-align: center; }
.empty-state i { color: var(--tan); }
.empty-state h3 { font-family: var(--font-head); color: var(--ink-lt); }

/* ============================================================
   Bookmarklet
   ============================================================ */
.btn-bookmarklet {
    background:  linear-gradient(135deg, var(--green-600), var(--green-400));
    color: #fff; font-weight: 600; font-size: 1.05rem;
    padding: .8rem 2rem; border-radius: 999px; border: none;
    box-shadow: 0 4px 16px rgba(45,92,30,.35);
    cursor: grab; transition: all .2s; text-decoration: none; display: inline-block;
}
.btn-bookmarklet:hover { color: #fff; box-shadow: 0 6px 22px rgba(45,92,30,.5); transform: translateY(-2px); text-decoration: none; }
.btn-bookmarklet:active { cursor: grabbing; }
.how-to-steps { display: flex; flex-direction: column; gap: 1.2rem; }
.how-to-step { display: flex; gap: 1rem; align-items: flex-start; }
.how-to-num {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--green-600); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-hand); font-size: 1.1rem; font-weight: 700;
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb { font-family: var(--font-ui); font-size: .82rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--tan); }
.breadcrumb-item a { color: var(--green-600); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ============================================================
   Modals
   ============================================================ */
.modal-content { border: none; border-radius: var(--radius-card); box-shadow: var(--shadow-lift); background: var(--cream); }
.modal-header { border-bottom: 1px solid var(--tan-lt); }
.modal-footer { border-top: 1px solid var(--tan-lt); }

/* ============================================================
   Advanced search layout
   ============================================================ */
.search-layout { padding-top: .25rem; }
.search-layout__inner { display: flex; gap: 1.25rem; align-items: flex-start; }

.search-sidebar {
    flex-shrink:  0; width: 230px;
    position:     sticky; top: 68px;
    max-height:   calc(100vh - 85px);
    overflow-y:   auto; scrollbar-width: thin;
}
.sidebar-section {
    background:    var(--cream);
    border:        1px solid var(--tan);
    border-radius: var(--radius-card);
    padding:       .8rem .95rem;
    margin-bottom: .55rem;
    box-shadow:    var(--shadow-card);
}
.sidebar-heading {
    font-family:    var(--font-hand);
    font-size:      1rem;
    font-weight:    700;
    color:          var(--green-700);
    margin-bottom:  .55rem;
    display:        flex;
    align-items:    center;
    gap:            .3rem;
}
.sidebar-heading i { color: var(--gold); font-size: .85rem; }
.sidebar-check { margin-bottom: .2rem; }
.sidebar-check .form-check-label { font-family: var(--font-ui); font-size: .84rem; cursor: pointer; color: var(--ink-md); }
.sidebar-check .form-check-input:checked { background-color: var(--green-600); border-color: var(--green-600); }
.sidebar-tag-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 138px; text-transform: capitalize;
    font-family: var(--font-hand); font-size: .95rem;
}
.sidebar-tag-count {
    flex-shrink: 0; font-family: var(--font-ui); font-size: .7rem;
    background: var(--green-100); color: var(--green-700); font-weight: 700;
    border-radius: 999px; padding: .1rem .45rem; min-width: 1.4rem; text-align: center;
}
.sidebar-tags-list { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.sidebar-clear-link { font-family: var(--font-ui); font-size: .72rem; color: var(--ink-lt); text-decoration: none; font-weight: 400; text-transform: none; letter-spacing: 0; }
.sidebar-clear-link:hover { color: var(--red-ink); }

.search-results { flex: 1; min-width: 0; }
.results-header { border-bottom: 1px solid var(--tan-lt); padding-bottom: .75rem; }
.results-count { font-family: var(--font-ui); font-size: .88rem; }
.results-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

.active-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--paper-md); border: 1px solid var(--tan);
    color: var(--ink-md); border-radius: 999px;
    padding: .18rem .6rem; font-family: var(--font-ui); font-size: .76rem;
    font-weight: 500; text-decoration: none; transition: all .15s; white-space: nowrap;
}
.filter-chip:hover { background: #fef5f5; border-color: #f5c6c6; color: var(--red-ink); text-decoration: none; }

@media (max-width: 991.98px) {
    .search-layout__inner { flex-direction: column; gap: 0; }
    .search-sidebar { width: 100%; position: static; max-height: none; margin-bottom: 1rem; }
    .search-sidebar.collapsing, .search-sidebar.show { display: block !important; }
}

/* ============================================================
   Utilities & Mobile
   ============================================================ */
.font-monospace { font-family: 'SFMono-Regular', Consolas, monospace !important; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tan); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-lt); }

@media (max-width: 575.98px) {
    main.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .rp-hero { gap: 1rem; }
    .rp-body { gap: .85rem; }
    .rp-section { padding: 1rem; }
    .page-hero { padding: 1.25rem .5rem .85rem; }
    .btn-lg { font-size: .95rem; padding: .55rem 1.1rem; }
}
@media (max-width: 767.98px) {
    .d-flex.gap-2.mt-4 { flex-wrap: wrap; }
    .d-flex.gap-2.mt-4 .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
}

/* ============================================================
   Navbar brand — misrecetas.me
   ============================================================ */
.navbar-brand-tld { opacity: .65; font-weight: 400; }
.navbar-brand img { filter: brightness(0) invert(1); }

/* Admin nav button */
.admin-nav-btn {
    border-color: rgba(184,115,34,.5) !important;
    color: var(--gold) !important;
}
.admin-nav-btn:hover {
    background: rgba(184,115,34,.12) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

/* ============================================================
   Landing page
   ============================================================ */
body.landing-page {
    background: var(--paper);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.landing-page main { flex: 1; }

/* Nav */
.landing-nav {
    background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
    border-bottom: 3px solid var(--gold);
    box-shadow: 0 3px 16px rgba(0,0,0,.3);
}
.landing-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.landing-brand-link img { filter: brightness(0) invert(1); }
.landing-brand-text {
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .01em;
}
.brand-tld { opacity: .65; font-weight: 400; }

/* Hero */
.landing-hero {
    padding: 5rem 0 4rem;
    text-align: center;
}
.landing-logo-hero img {
    filter: drop-shadow(0 4px 16px rgba(45,92,30,.25));
}
.landing-headline {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 1.2rem;
}
.landing-headline em {
    font-style: italic;
    color: var(--green-600);
}
.landing-subhead {
    font-size: 1.1rem;
    color: var(--ink-lt);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}
.landing-ctas .btn-lg {
    font-size: 1rem;
    padding: .75rem 2rem;
    border-radius: var(--radius-sm);
}

/* Features */
.landing-features {
    padding: 4rem 0 5rem;
    background: var(--paper-md);
    border-top: 1px solid var(--tan-lt);
    border-bottom: 1px solid var(--tan-lt);
}
.landing-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    color: var(--ink);
}
.feature-card {
    background: var(--cream);
    border: 1px solid var(--tan-lt);
    border-radius: var(--radius-card);
    padding: 1.75rem 1.5rem;
    height: 100%;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s, transform .2s;
}
.feature-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}
.feature-icon {
    width: 48px;
    height: 48px;
    background: var(--green-50);
    border: 1px solid var(--green-200);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--green-600);
    margin-bottom: 1rem;
}
.feature-title {
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .5rem;
}
.feature-desc {
    font-size: .875rem;
    color: var(--ink-lt);
    line-height: 1.65;
    margin: 0;
}

/* Final CTA */
.landing-final-cta {
    padding: 5rem 0 4.5rem;
    text-align: center;
}
.landing-final-cta img { filter: drop-shadow(0 3px 12px rgba(45,92,30,.2)); }
.landing-final-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .4rem;
}
.landing-final-sub { color: var(--ink-lt); font-size: 1rem; margin-bottom: 0; }

/* Footer */
.landing-footer {
    background: var(--paper-md);
    border-top: 1px solid var(--tan-lt);
    padding: 1.25rem 0;
    font-size: .85rem;
    color: var(--ink-md);
}