:root{
  --bg: rgba(21, 52, 41, 0.71);
  --panel: rgba(21, 52, 41, 0.71);
  --muted: #e6efe9;
  --text: #ffffff;
  --accent: #9cfbe1;
  --chip: rgba(25, 64, 49, 0.92);
  --chip-on: rgba(32, 80, 61, 1);
  --border: #69c9ab;
}
.dre-app-wrap *{box-sizing:border-box}
.dre-app-wrap{ color:var(--text); font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; }
.dre-app-wrap .paper{ background: var(--bg); padding:28px 18px 36px; }
.dre-app-wrap .diag{font-size:12px;color:#eafdf7;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:6px 8px;border-radius:8px;display:inline-block;margin-bottom:10px}
.dre-app-wrap .head-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dre-app-wrap .size select{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 8px}
.dre-app-wrap header p{margin:6px 0 0;color:var(--muted)}
.dre-app-wrap .toolbar{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0}
.dre-app-wrap .search{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--border);padding:10px 12px;border-radius:12px}
.dre-app-wrap .search input{flex:1;background:transparent;border:0;color:var(--text);font:inherit;outline:none}
.dre-app-wrap .btn{appearance:none;border:1px solid var(--border);background:var(--chip);color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer}
.dre-app-wrap .btn:hover{background:var(--chip-on)}
.dre-app-wrap .chips{display:flex;flex-wrap:wrap;gap:8px}
.dre-app-wrap .chip{border:1px solid var(--border);background:var(--chip);color:#fff;padding:8px 10px;border-radius:999px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.dre-app-wrap .chip.active{background:var(--chip-on);border-color:#b7ffe9;box-shadow:inset 0 0 0 1px #b7ffe9}
.dre-app-wrap .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.dre-app-wrap .grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
@media(min-width:720px){.dre-app-wrap .grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.dre-app-wrap .grid{grid-template-columns:repeat(3,1fr)}}
.dre-app-wrap .card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}
.dre-app-wrap .title{font-weight:700;letter-spacing:.2px}
.dre-app-wrap .badge{font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:var(--chip);color:#fff;margin:0 6px 6px 0;display:inline-block}
.dre-app-wrap .meta{color:var(--muted);font-size:13px}
.dre-app-wrap .footer{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:8px;flex-wrap:wrap}
.dre-app-wrap .footer .small{color:var(--muted);font-size:12px}
.dre-app-wrap .view-btn{font-size:12px;padding:6px 8px;border-radius:8px;background:var(--chip);border:1px solid var(--border);color:#fff;text-decoration:none}
/* Modal */
.dre-app-wrap .modal{position:fixed;inset:0;display:none;z-index:9999}
.dre-app-wrap .modal.open{display:block}
.dre-app-wrap .modal .overlay{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.dre-app-wrap .modal .dialog{position:relative;max-width:820px;margin:5vh auto;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px 20px;box-shadow:0 10px 35px rgba(0,0,0,.45)}
.dre-app-wrap .modal .close{position:absolute;top:8px;right:10px;border:1px solid var(--border);background:var(--chip);color:#fff;border-radius:10px;padding:4px 10px;cursor:pointer}
.dre-app-wrap .modal h2{margin:0 0 4px}
.dre-app-wrap .modal h3{margin:14px 0 8px}
.dre-app-wrap .modal .modal-tags{margin:8px 0 12px}
.dre-app-wrap .modal .modal-tags .badge{margin-right:6px}
.dre-app-wrap .modal .vet{color:var(--muted);font-size:12px;margin-top:12px}
.dre-app-wrap .twocol{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.dre-app-wrap .twocol{grid-template-columns:1fr 1fr}}
.dre-app-wrap .glance,.dre-app-wrap .ingredients,.dre-app-wrap .steps{margin:0;padding-left:18px}
.dre-app-wrap .glance li,.dre-app-wrap .ingredients li,.dre-app-wrap .steps li{margin:4px 0}
.dre-app-wrap .empty{padding:16px;border:1px dashed var(--border);border-radius:12px;text-align:center;color:var(--muted)}
.dre-app-wrap .err{margin-top:12px;color:#fffbfb;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:10px;border-radius:10px}