:root {
	--bg: #f6f7fb;
	--panel: #fff;
	--panel-border: #e5e7eb;
	--panel-muted: #f8fafc;
	--text: #111827;
	--text-muted: #4b5563;
	--accent: #2563eb;
	--danger: #dc2626;
	--topbar: #1f2937;
}

.theme-dark {
	--bg: #0f172a;
	--panel: #111827;
	--panel-border: #1f2937;
	--panel-muted: #0b1221;
	--text: #e5e7eb;
	--text-muted: #9ca3af;
	--accent: #60a5fa;
	--danger: #f87171;
	--topbar: #0b1221;
}

.theme-gray {
	--bg: #eef1f4;
	--panel: #ffffff;
	--panel-border: #cdd3dc;
	--panel-muted: #e6eaef;
	--text: #0f172a;
	--text-muted: #475569;
	--accent: #374151;
	--danger: #dc2626;
	--topbar: #111827;
}

.theme-coal {
	--bg: #111314;
	--panel: #1a1c1e;
	--panel-border: #2b2f33;
	--panel-muted: #16181a;
	--text: #e5e7eb;
	--text-muted: #9ca3af;
	--accent: #6b7280;
	--danger: #f87171;
	--topbar: #0c0d0f;
}

.theme-rust {
	--bg: #fdf8f4;
	--panel: #fff9f5;
	--panel-border: #f2d6c7;
	--panel-muted: #fdeee4;
	--text: #3d2b23;
	--text-muted: #6b4a3c;
	--accent: #c2410c;
	--danger: #b91c1c;
	--topbar: #7c2d12;
}

.theme-navy {
	--bg: #eef2ff;
	--panel: #ffffff;
	--panel-border: #c7d2fe;
	--panel-muted: #e0e7ff;
	--text: #0f172a;
	--text-muted: #334155;
	--accent: #1d4ed8;
	--danger: #dc2626;
	--topbar: #0b1b42;
}

.theme-sage {
	--bg: #f3f7f4;
	--panel: #ffffff;
	--panel-border: #c7dcd1;
	--panel-muted: #e6f1eb;
	--text: #1b2b21;
	--text-muted: #3f4f44;
	--accent: #2f855a;
	--danger: #d14343;
	--topbar: #1f3a2d;
}

.theme-amber {
	--bg: #fff7ec;
	--panel: #ffffff;
	--panel-border: #f6e0c3;
	--panel-muted: #fff0d9;
	--text: #3b2f1c;
	--text-muted: #6b5535;
	--accent: #d97706;
	--danger: #c2410c;
	--topbar: #92400e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--text); }
.topbar { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--topbar); color: #fff; width: 100%; }
.topbar > * { min-width: 0; }
.logo { font-weight: 700; letter-spacing: 0.05em; }
.mobile-nav-btn { display: none; }
.search { flex: 1; min-width: 0; padding: 0.5rem 0.75rem; border-radius: 6px; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); }
.actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.theme-picker { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 6px; padding: 0.25rem 0.5rem; }
.theme-picker select { border: none; background: transparent; color: var(--text); font: inherit; outline: none; }
.theme-picker option { color: #000; }
.hamburger-floating { position: fixed; top: 72px; left: 12px; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.layout { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 56px); }
.sidebar { background: var(--panel); border-right: 1px solid var(--panel-border); display: flex; flex-direction: column; }
.sidebar-hidden .layout { grid-template-columns: 1fr; }
.sidebar-hidden .sidebar { display: none; }
.menu-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; font-weight: 600; }
.tree { flex: 1; padding: 0 0.75rem; overflow-y: auto; }
.tree-node { padding: 0.15rem 0; }
.tree-category { display: flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.5rem; border-radius: 6px; cursor: pointer; border: 1px solid transparent; background: transparent; }
.tree-category:hover { border-color: #cbd5e1; background: var(--panel-muted); }
.tree-arrow { font-size: 0.8rem; color: #6b7280; width: 1rem; text-align: center; }
.tree-label { font-weight: 600; color: var(--text); }
.tree-children { margin-left: 1.25rem; border-left: 1px dashed #e5e7eb; padding-left: 0.5rem; }
.tree-collapsed .tree-children { display: none; }
.tree-leaf { display: block; width: 100%; text-align: left; margin: 0.2rem 0; padding: 0.35rem 0.5rem; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; color: var(--text); }
.tree-leaf:hover { border-color: #cbd5e1; background: var(--panel-muted); }
.home-btn { margin: 0 0.75rem 0.5rem; }
.separator { height: 1px; background: #e5e7eb; margin: 0.5rem 0; }
.utils { display: grid; gap: 0.35rem; padding: 0.75rem; }
.content { padding: 1rem; }
.card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.results-header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.results-summary { margin: 0.15rem 0 0; color: #4b5563; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.result-card { display: grid; grid-template-rows: 150px auto; border: 1px solid var(--panel-border); border-radius: 10px; overflow: hidden; background: var(--panel-muted); cursor: pointer; text-align: left; }
.result-thumb { width: 100%; height: 150px; object-fit: cover; background: #e5e7eb; display: block; }
.result-body { padding: 0.65rem 0.75rem; display: grid; gap: 0.25rem; }
.result-title { font-weight: 700; margin: 0; color: var(--text); }
.result-meta { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.markdown, .gallery, .ingredients, .steps, .rating, .comments { margin-top: 1rem; }
.markdown ul, .ingredients ul, .steps ul { margin: 0.1rem 0 0.45rem 1rem; padding-left: 1rem; }
.markdown li, .ingredients li, .steps li { margin: 0.05rem 0; line-height: 1.28; }
.gallery { display: block; width: 100%; }
.gallery-img { width: 100%; border-radius: 8px; border: 1px solid #e5e7eb; object-fit: cover; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; }
.carousel { position: relative; width: 100%; max-width: 100%; height: min(90vh, 900px); background: var(--panel-muted); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 8px; }
.carousel-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center; background: var(--panel); }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.75); border: none; border-radius: 50%; width: 38px; height: 38px; font-size: 1.4rem; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.16); }
.carousel-btn:hover { background: rgba(255,255,255,0.95); }
.carousel-btn:active { transform: translateY(-50%) scale(0.97); }
.carousel-btn#carousel-prev { left: 10px; }
.carousel-btn#carousel-next { right: 10px; }
.carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.carousel-dots button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: rgba(255,255,255,0.6); padding: 0; cursor: pointer; }
.carousel-dots button.active { background: #fff; }
.rating-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.tags-row { flex-wrap: wrap; color: var(--text-muted); font-size: 0.95rem; }
.comment-form { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.comment-card { border: 1px solid var(--panel-border); padding: 0.5rem 0.75rem; border-radius: 8px; background: var(--panel-muted); margin-bottom: 0.5rem; }
textarea { width: 100%; border-radius: 6px; border: 1px solid #cbd5e1; padding: 0.5rem; font-family: inherit; }
.btn { border: none; border-radius: 6px; padding: 0.45rem 0.75rem; background: var(--accent); color: #fff; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.danger { background: var(--danger); }
.btn.small { padding: 0.35rem 0.65rem; font-size: 0.9rem; }
.actions-row { display: flex; gap: 0.5rem; margin-top: 1rem; }
.theme-switch { display: inline-flex; align-items: center; gap: 0.25rem; color: #c7d2fe; }
@media (max-width: 900px) {
	.layout { grid-template-columns: 1fr; }
	.mobile-nav-btn { display: inline-flex; align-items: center; justify-content: center; }
	.sidebar { position: fixed; top: 56px; left: 0; bottom: 0; width: 260px; max-width: 82vw; background: #fff; border-right: 1px solid #e5e7eb; box-shadow: 0 14px 36px rgba(0,0,0,0.18); transform: translateX(-105%); transition: transform 0.25s ease, box-shadow 0.25s ease; z-index: 30; display: flex; }
	.sidebar-hidden .sidebar { display: flex; transform: translateX(-105%); }
	body:not(.sidebar-hidden) .sidebar { transform: translateX(0); }
	body:not(.sidebar-hidden)::after { content: ""; position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,0.32); z-index: 25; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
	.topbar { flex-wrap: wrap; row-gap: 0.5rem; }
	.mobile-nav-btn { order: 0; }
	.logo { order: 1; }
	.actions { order: 2; }
	.search { order: 3; width: 100%; flex: 0 0 100%; min-width: 0; }
}

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 20; }
.modal { background: #fff; border-radius: 12px; padding: 1rem; width: min(720px, 92vw); max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.18); border: 1px solid #e5e7eb; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.form-grid { display: grid; gap: 0.75rem; }
.form-grid label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; }
.scrape-row { display: flex; gap: 0.5rem; align-items: center; }
.scrape-row input { flex: 1; }
.form-grid input, .form-grid select { padding: 0.45rem 0.55rem; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }
.form-grid textarea { padding: 0.45rem 0.55rem; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 0.5rem !important; }
.link-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 0.5rem; align-items: center; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.organizer-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.organizer-list { display: grid; gap: 0.35rem; }
.organizer-row { display: grid; grid-template-columns: 1fr 180px; gap: 0.5rem; align-items: center; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; cursor: grab; position: relative; }
.organizer-row.dragging { opacity: 0.5; }
.organizer-row.drop-target { outline: 2px dashed #2563eb; background: #e0e7ff; }
.organizer-name { font-weight: 600; }
.organizer-name::before { content: ""; display: inline-block; width: var(--indent, 0px); }
.organizer-parent { width: 100%; }
.print-only { display: none; }

@media print {
	html, body { background: #fff !important; color: #000 !important; margin: 0; padding: 0; }
	* { box-shadow: none !important; }
	.topbar, .sidebar, .actions, .search, .utils, .menu-header, .actions-row, #search-results, .rating, .comments, .organizer-modal, .modal-backdrop, .mobile-nav-btn, #toggle-menu, #mobile-menu-toggle, .hamburger-floating { display: none !important; }
	body::after { display: none !important; content: none !important; }
	.layout { display: block !important; }
	.sidebar { display: none !important; }
	.content { padding: 0 !important; }
	.card { box-shadow: none !important; border: 0 !important; background: #fff !important; color: #000 !important; }
	#recipe-view { display: block !important; width: 100% !important; }
	h1, .meta, .markdown, .ingredients, .steps { color: #000 !important; }
	.carousel { display: none !important; }
	.gallery { margin-top: 0.5rem !important; }
	.gallery-grid { display: block !important; margin-top: 0.5rem !important; }
	.print-only { display: block !important; margin-top: 0.5rem; }
	.gallery-grid img, img { max-width: 100% !important; height: auto !important; display: block !important; }
	.markdown, .ingredients, .steps { page-break-inside: avoid; }
	.markdown, .ingredients, .steps { display: block !important; overflow: visible !important; }
}