/* ============================================================================
   Dieta con IA: estilos heredados (antes en <style> de templates/diet/diet.html)
   Se conservan los de modales, lista de compras, consentimiento, plan gratis,
   progreso e historial. Lo rediseñado vive en bog-diet.css.
   ============================================================================ */
    :root {
        --primary: #667eea;
        --primary-dark: #764ba2;
        --secondary: #f5576c;
        --success: #4facfe;
        --success-light: #00f2fe;
        --card-bg: rgba(255, 255, 255, 0.95);
        --text-primary: #2d3748;
        --text-secondary: #718096;
        --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.15);
        --border-radius: 20px;
        --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        --favorite-color: #ff6b6b;
        --favorite-color-light: #ff8e8e;
        --shopping-color: #48bb78;
        --shopping-color-light: #68d391;
        --water-color: #4facfe;
        --water-color-light: #6bc5e0;
        --water-color-dark: #3182ce;
    }

    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @keyframes barGrow {
        from { height: 0; }
        to { height: var(--target-height); }
    }

    @keyframes countUp {
        from { opacity: 0; transform: scale(0.8); }
        to { opacity: 1; transform: scale(1); }
    }

    @keyframes heartBeat {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    @keyframes favoriteGlow {
        0% { box-shadow: 0 0 5px rgba(255, 107, 107, 0.3); }
        50% { box-shadow: 0 0 20px rgba(255, 107, 107, 0.6); }
        100% { box-shadow: 0 0 5px rgba(255, 107, 107, 0.3); }
    }

    @keyframes slideInFromRight {
        from { opacity: 0; transform: translateX(30px); }
        to { opacity: 1; transform: translateX(0); }
    }

    @keyframes waterDrop {
        0% { transform: scale(1) rotate(0deg); opacity: 1; }
        50% { transform: scale(1.2) rotate(5deg); opacity: 0.8; }
        100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }

    @keyframes fillWater {
        0% { height: 0%; background: var(--water-color-light); }
        100% { height: 100%; background: var(--water-color); }
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    @keyframes celebration {
        0% { transform: scale(1) rotate(0deg); }
        25% { transform: scale(1.1) rotate(5deg); }
        50% { transform: scale(1.2) rotate(-5deg); }
        75% { transform: scale(1.1) rotate(5deg); }
        100% { transform: scale(1) rotate(0deg); }
    }

    /* Base styles */
    * {
        box-sizing: border-box;
    }

    .form-control {
        color: rgb(0, 0, 0) !important;
        border: 2px solid rgba(102, 126, 234, 0.2);
        border-radius: 15px;
        padding: 12px 18px;
        font-weight: 500;
        transition: var(--transition);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
        outline: none;
        transform: translateY(-1px);
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        backdrop-filter: blur(5px);
        overflow-y: auto;
    }

    .modal-content {
        background: var(--card-bg);
        margin: 5% auto;
        padding: 0;
        border-radius: var(--border-radius);
        width: 90%;
        max-width: 600px;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        animation: fadeInUp 0.3s ease;
    }

    .modal-content.shopping-list-modal {
        max-width: 700px;
        max-height: 85vh;
    }

    .preparation-steps {
        list-style: none;
        padding-left: 0;
        counter-reset: step-counter;
    }

    .preparation-steps li {
        counter-increment: step-counter;
        padding: 15px 0 15px 40px;
        position: relative;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .preparation-steps li:before {
        content: counter(step-counter);
        position: absolute;
        left: 0;
        top: 15px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid rgba(102, 126, 234, 0.2);
        border-top: 4px solid var(--primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
    }

    .favorites-empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-secondary);
    }

    .favorites-loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
    }

    /* Shopping list styles */
    .shopping-category {
        margin-bottom: 25px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        overflow: hidden;
        background: white;
    }

    .shopping-category-header {
        background: linear-gradient(135deg, var(--shopping-color), var(--shopping-color-light));
        color: white;
        padding: 15px 20px;
        font-weight: 700;
        font-size: clamp(0.9rem, 2.5vw, 1rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        word-wrap: break-word;
    }

    .shopping-category-count {
        background: rgba(255, 255, 255, 0.2);
        padding: 4px 8px;
        border-radius: 12px;
        font-size: clamp(0.7rem, 2vw, 0.8rem);
        font-weight: 600;
    }

    .shopping-items-list {
        padding: 15px 20px;
    }

    .shopping-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: var(--transition);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .shopping-item:last-child {
        border-bottom: none;
    }

    .shopping-item:hover {
        background: rgba(72, 187, 120, 0.05);
        margin: 0 -20px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 8px;
    }

    .shopping-item-name {
        font-weight: 600;
        color: var(--text-primary);
        flex-grow: 1;
        font-size: clamp(0.8rem, 2vw, 0.9rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin-right: 10px;
    }

    .shopping-item-quantity {
        color: var(--shopping-color);
        font-weight: 600;
        font-size: clamp(0.7rem, 2vw, 0.9rem);
        margin-left: 10px;
        min-width: 60px;
        text-align: right;
        flex-shrink: 0;
    }

    .shopping-item-frequency {
        background: rgba(72, 187, 120, 0.1);
        color: var(--shopping-color);
        padding: 3px 6px;
        border-radius: 12px;
        font-size: 0.6rem;
        font-weight: 600;
        margin-left: 5px;
        flex-shrink: 0;
    }

    .shopping-summary {
        background: rgba(72, 187, 120, 0.1);
        border-radius: 12px;
        padding: 20px 15px;
        margin-bottom: 20px;
        text-align: center;
    }

    .shopping-summary-title {
        font-weight: 700;
        color: var(--shopping-color);
        font-size: clamp(1rem, 3vw, 1.1rem);
        margin-bottom: 10px;
        word-wrap: break-word;
    }

    .shopping-summary-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 15px;
        margin-top: 15px;
    }

    .shopping-stat {
        text-align: center;
    }

    .shopping-stat-number {
        display: block;
        font-size: clamp(1.4rem, 4vw, 1.8rem);
        font-weight: 800;
        color: var(--shopping-color);
        line-height: 1;
    }

    .shopping-stat-label {
        display: block;
        font-size: clamp(0.7rem, 2vw, 0.8rem);
        color: var(--text-secondary);
        margin-top: 5px;
        word-wrap: break-word;
    }

    .shopping-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        padding: 20px 15px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(0, 0, 0, 0.02);
    }

    .shopping-btn {
        background: var(--shopping-color);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: clamp(0.8rem, 2vw, 0.9rem);
        min-width: 120px;
        justify-content: center;
        text-align: center;
    }

    .shopping-btn:hover {
        background: var(--shopping-color-light);
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
    }

    .shopping-btn.secondary {
        background: transparent;
        color: var(--shopping-color);
        border: 2px solid var(--shopping-color);
    }

    .shopping-btn.secondary:hover {
        background: var(--shopping-color);
        color: white;
    }

    .shopping-empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-secondary);
    }

    .shopping-loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
    }

    /* Week progress dots */
    .progress-dot {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.68rem;
        font-weight: 700;
        border: 2px solid rgba(102,126,234,0.2);
        background: rgba(102,126,234,0.05);
        color: var(--text-secondary);
        transition: all 0.35s ease;
        position: relative;
        flex-direction: column;
        gap: 0;
    }
    .progress-dot .dot-label {
        font-size: 0.6rem;
        font-weight: 800;
        line-height: 1;
    }
    .progress-dot .dot-meals {
        font-size: 0.55rem;
        line-height: 1;
        opacity: 0.8;
        margin-top: 1px;
    }
    .progress-dot.done {
        background: #48bb78;
        border-color: #48bb78;
        color: white;
    }
    .progress-dot.done::after {
        content: '✓';
        position: absolute;
        top: -6px;
        right: -6px;
        background: #276749;
        color: white;
        border-radius: 50%;
        width: 14px;
        height: 14px;
        font-size: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-weight: 900;
    }
    .progress-dot.current {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        border-color: transparent;
        color: white;
        animation: pulse 1s ease-in-out infinite;
        box-shadow: 0 0 0 4px rgba(102,126,234,0.2);
    }

    /* Historial modal */
    .history-week-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 18px;
        border-radius: 12px;
        border: 1.5px solid rgba(102,126,234,0.15);
        background: rgba(102,126,234,0.04);
        cursor: pointer;
        transition: var(--transition);
        margin-bottom: 10px;
        gap: 12px;
        flex-wrap: wrap;
    }
    .history-week-item:hover {
        background: rgba(102,126,234,0.1);
        border-color: rgba(102,126,234,0.35);
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }
    .history-week-item.active-week {
        background: rgba(102,126,234,0.12);
        border-color: var(--primary);
    }
    .history-week-trimester {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 10px;
        font-size: 0.72rem;
        font-weight: 700;
        background: rgba(245,87,108,0.1);
        color: var(--secondary);
    }
    .history-week-trimester.t1 { background: rgba(72,187,120,0.12); color: #276749; }
    .history-week-trimester.t2 { background: rgba(79,172,254,0.12); color: #2b6cb0; }
    .history-week-trimester.t3 { background: rgba(245,87,108,0.12); color: #c53030; }

    /* Mobile optimizations */
    @media (max-width: 767px) {

        .modal-content {
            width: 95%;
            margin: 5% auto;
            max-width: calc(100vw - 20px);
        }

        .shopping-actions {
            flex-direction: column;
            gap: 10px;
        }

        .shopping-btn {
            width: 100%;
            justify-content: center;
            min-width: auto;
        }

        .shopping-summary-stats {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .preparation-steps li {
            padding: 15px 0 15px 35px;
        }

        .preparation-steps li:before {
            width: 25px;
            height: 25px;
            font-size: 0.8rem;
        }

        .shopping-category-header {
            padding: 12px 15px;
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
        }

        .shopping-items-list {
            padding: 10px 15px;
        }

        .shopping-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
        }

        .shopping-item-quantity {
            margin-left: 0;
            text-align: left;
        }

        .shopping-item:hover {
            margin: 0 -15px;
            padding-left: 15px;
            padding-right: 15px;
        }}

    /* Extra small devices */
    @media (max-width: 480px) {

        .shopping-summary-stats {
            grid-template-columns: 1fr;
            gap: 8px;
        }}

    /* Ensure no horizontal scroll */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Fix for long text content */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* ============ Indicador de dietas gratis / Premium (.dpl) ============ */
    .dpl { --dpl-line:#e6ebf3; --dpl-track:#dff3fb; --dpl-soft:#94a3b8; --dpl-muted:#64748b;
        border:1.5px solid var(--dpl-line); border-radius:18px; padding:.95rem 1rem; margin:0 0 15px;
        background:#fff; }
    .dpl-head { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
    .dpl-title { font-weight:800; font-size:.98rem; line-height:1.3; color:var(--text-primary); }
    .dpl-count { font-size:.8rem; font-weight:700; color:#0ea5e9; white-space:nowrap; }
    .dpl--full .dpl-count { color:#f59e0b; }
    .dpl-sub { font-size:.8rem; color:var(--dpl-muted); line-height:1.4; margin-top:.15rem; }

    .dpl-weeks { list-style:none; padding:0; margin:.85rem 0 .3rem;
        display:grid; grid-template-columns:repeat(3,1fr) auto; gap:.45rem; align-items:stretch; }
    .dpl-week { border-radius:12px; padding:.5rem .4rem; text-align:center;
        border:1.5px dashed var(--dpl-track); background:transparent; }
    .dpl-week b { display:block; font-size:.95rem; }
    .dpl-week small { display:block; font-size:.66rem; font-weight:600; color:var(--dpl-soft); margin-top:.1rem; }
    .dpl-week.used { border-style:solid; border-color:transparent;
        background:linear-gradient(135deg,#38bdf8,#06b6d4); color:#fff; }
    .dpl-week.used small { color:rgba(255,255,255,.85); }
    .dpl-week.free b { color:#0ea5e9; }
    .dpl--full .dpl-week.used { background:linear-gradient(135deg,#94a3b8,#64748b); }
    .dpl-week.more { border-style:solid; border-color:rgba(139,92,246,.35);
        background:linear-gradient(135deg,rgba(139,92,246,.10),rgba(236,72,153,.08)); padding:.5rem .6rem; }
    .dpl-week.more b { color:#8b5cf6; }

    .dpl-grid { display:grid; grid-template-columns:1fr; gap:.55rem; margin-top:.9rem; }
    @media (min-width:460px) { .dpl-grid { grid-template-columns:1fr 1fr; }}
    .dpl-col { border-radius:14px; padding:.7rem .8rem; }
    .dpl-col--free { background:#eef1f7; border:1px solid var(--dpl-line); }
    .dpl-col--prem { background:linear-gradient(135deg,rgba(139,92,246,.10),rgba(236,72,153,.08));
        border:1px solid rgba(139,92,246,.28); }
    .dpl-col h6 { font-size:.8rem; font-weight:800; margin:0 0 .45rem; color:var(--text-primary); }
    .dpl-col ul { list-style:none; padding:0; margin:0; }
    .dpl-col li { display:flex; gap:.45rem; font-size:.78rem; color:var(--dpl-muted); line-height:1.35; margin-bottom:.32rem; }
    .dpl-col li b { flex:0 0 auto; }
    .dpl-col--free li b { color:#10b981; }
    .dpl-col--prem li b { color:#8b5cf6; }

    .dpl-cta { display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%;
        margin-top:.8rem; padding:.72rem 1rem; border-radius:999px;
        background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; font-weight:700;
        font-size:.88rem; text-decoration:none; box-shadow:0 4px 12px rgba(99,102,241,.28); }
    .dpl-cta:hover { color:#fff; text-decoration:none; transform:translateY(-1px); }
    .dpl-cta small { font-weight:600; opacity:.85; }
    .dpl--premium { display:flex; align-items:center; gap:.7rem; }
    .dpl-ok { width:36px; height:36px; border-radius:11px; display:flex; align-items:center;
        justify-content:center; background:rgba(16,185,129,.14); color:#10b981; font-weight:800; flex:0 0 auto; }

    /* ═══ Hoja de consentimiento — Dieta con IA ═══ */
    .dp-overlay { position:fixed; inset:0; z-index:1060; display:none; align-items:flex-end; justify-content:center;
        background:rgba(17,24,39,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
    .dp-overlay.is-open { display:flex; }
    .dp-sheet { position:relative; width:100%; max-width:480px; max-height:92vh; overflow-y:auto; overscroll-behavior:contain;
        background:#fff; border-radius:24px 24px 0 0; padding:10px 20px calc(20px + env(safe-area-inset-bottom));
        box-shadow:0 -10px 40px rgba(17,24,39,.25); animation:dpUp .28s cubic-bezier(.2,.8,.2,1); font-family:'Inter',sans-serif; }
    .dp-sheet *, .dp-sheet label { text-transform:none; letter-spacing:normal; }
    @keyframes dpUp { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
    .dp-grab { width:40px; height:5px; border-radius:3px; background:#e2e8f0; margin:0 auto 10px; }
    .dp-close { position:absolute; top:10px; right:10px; width:44px; height:44px; border:none; border-radius:50%;
        background:transparent; color:#94a3b8; font-size:1.25rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .dp-close:hover, .dp-close:focus-visible { background:#f1f5f9; color:var(--text-primary); }
    .dp-icon { width:52px; height:52px; border-radius:16px; margin:6px auto 12px; display:flex; align-items:center; justify-content:center;
        background:linear-gradient(135deg, var(--success), var(--primary)); color:#fff; font-size:1.4rem;
        box-shadow:0 8px 20px rgba(79,172,254,.35); }
    .dp-title { margin:0; text-align:center; font-size:1.2rem; font-weight:800; color:var(--text-primary); line-height:1.3; }
    .dp-lead { margin:6px auto 16px; text-align:center; font-size:.9rem; color:var(--text-secondary); line-height:1.5; max-width:34ch; }
    .dp-points { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; }
    .dp-point { display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:14px; background:#f8fafc; }
    .dp-point-ic { flex-shrink:0; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
        background:rgba(79,172,254,.14); color:#1d74c9; font-size:1rem; }
    .dp-point strong { display:block; font-size:.88rem; color:var(--text-primary); line-height:1.35; }
    .dp-point div > span { display:block; font-size:.8rem; color:var(--text-secondary); line-height:1.45; margin-top:1px; }
    .dp-link { background:none; border:none; padding:0; color:#1d74c9; font-weight:600; font-size:.8rem; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
    .dp-toggle { width:100%; display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; margin:0 0 6px;
        background:none; border:none; color:#1d74c9; font-weight:600; font-size:.86rem; cursor:pointer; border-radius:10px; }
    .dp-toggle:hover, .dp-toggle:focus-visible { background:rgba(79,172,254,.08); }
    .dp-toggle svg { transition:transform .2s; }
    .dp-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
    .dp-full { display:none; max-height:38vh; overflow-y:auto; margin:0 0 12px; padding:14px 16px; border:1px solid #e2e8f0; border-radius:14px; background:#fcfcfd; }
    .dp-full.is-open { display:block; }
    .dp-full h3 { font-size:.84rem; font-weight:700; color:var(--text-primary); margin:0 0 4px; }
    .dp-full p { font-size:.8rem; color:var(--text-secondary); line-height:1.55; margin:0 0 12px; }
    .dp-full p:last-child { margin-bottom:0; }
    .dp-consent { display:flex; gap:12px; align-items:flex-start; margin:0 0 14px; padding:14px; border-radius:14px; cursor:pointer;
        border:2px solid #e2e8f0; background:#fff; transition:border-color .2s, background .2s; font-weight:500; }
    .dp-consent:hover { border-color:#bcdcfb; }
    .dp-consent.is-checked { border-color:var(--success); background:rgba(79,172,254,.07); }
    .dp-consent input { position:absolute; opacity:0; width:1px; height:1px; }
    .dp-box { flex-shrink:0; width:24px; height:24px; border-radius:7px; border:2px solid #94a3b8; background:#fff; margin-top:1px;
        display:flex; align-items:center; justify-content:center; color:transparent; transition:all .15s; }
    .dp-consent.is-checked .dp-box { color:#fff; background:linear-gradient(135deg, var(--success), #2b8be0); border-color:#2b8be0; }
    .dp-consent input:focus-visible + .dp-box { outline:3px solid rgba(79,172,254,.5); outline-offset:2px; }
    .dp-consent-text { font-size:.86rem; color:var(--text-primary); line-height:1.45; }
    .dp-actions { display:grid; gap:8px; }
    .dp-btn-primary { min-height:50px; border:none; border-radius:14px; font-weight:700; font-size:1rem; color:#fff; cursor:pointer;
        background:linear-gradient(135deg, #1f78c8, #5a67d8); box-shadow:0 8px 20px rgba(31,120,200,.3); transition:transform .15s, opacity .2s; }
    .dp-btn-primary:hover:not(:disabled) { transform:translateY(-1px); }
    .dp-btn-primary:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
    .dp-btn-ghost { min-height:44px; border:none; background:none; color:var(--text-secondary); font-weight:600; font-size:.9rem; cursor:pointer; border-radius:12px; }
    .dp-btn-ghost:hover, .dp-btn-ghost:focus-visible { background:#f1f5f9; }
    .dp-note { margin:8px 0 0; text-align:center; font-size:.74rem; color:#94a3b8; }
    @media (min-width:576px) {
        .dp-overlay { align-items:center; padding:20px; }
        .dp-sheet { border-radius:24px; padding:14px 28px 24px; box-shadow:0 20px 60px rgba(17,24,39,.3); }
        .dp-grab { display:none; }}
    @media (prefers-reduced-motion:reduce) { .dp-sheet { animation:none; } .dp-toggle svg, .dp-consent, .dp-box { transition:none; }}