:root { --link: #004488; --bar: #6898d0; --pale: #eaf1fc; --accent: #fd7e00; }
* { box-sizing: border-box; }
body { margin: 6px; background: white; color: #353535; font: 11px Verdana, Arial, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #ff3e3e; text-decoration: underline; }
button { background: var(--bar); color: white; font: bold 11px Verdana, Arial, sans-serif; border: 1px solid #dadada; cursor: pointer; padding: 3px 7px; }
button:disabled { cursor: not-allowed; opacity: .6; }
input, select, textarea { font: inherit; color: #353535; border: 1px solid var(--input-border, #acc6db); padding: 3px; max-width: 100%; }
input[type=checkbox] { vertical-align: middle; }
input[type=range] { width: 100%; }
textarea { width: 100%; }
h1 { font-size: 16px; color: var(--heading, var(--link)); margin-top: 22px; }
h2 { font-size: 12px; }
.site-header { display: flex; justify-content: space-between; align-items: center; min-height: 70px; padding-bottom: 8px; }
.site-header img { max-width: 100%; object-fit: contain; }
.site-header time { color: #e25a3e; font-size: 10px; padding-right: 25px; }
.layout { display: grid; grid-template-columns: 15% minmax(0, 1fr) 15%; gap: 12px; }
main { min-width: 0; }
.panel { margin-bottom: 18px; border: 1px solid var(--border, #b9c3ce); background: var(--panel, #fafaff); }
.panel h2, .search-panel h2 { background: var(--bar); color: white; margin: 0; padding: 4px 10px; font-size: 11px; border-radius: 5px 5px 0 0; }
.panel h2::before { content: '>> '; color: #ffc055; }
.panel h2 a { color: white; }
.panel nav { background: var(--menu, var(--pale)); padding: 4px; }
.panel nav a, .recipe-links a, .alphabet a, .category-grid a { color: var(--category-link, var(--link)); }
.panel nav a:hover, .recipe-links a:hover, .alphabet a:hover, .category-grid a:hover { color: #ff3e3e; }
.panel nav a { display: block; line-height: 1.7; }
.panel nav a::before { content: '> '; color: #e45a45; }
.panel form { padding: 6px; }
.recipe-links { list-style: none; padding: 5px; margin: 0; line-height: 1.35; }
.small-action { margin-left: 5px; font-size: 10px; }
.search-panel { background: linear-gradient(var(--search, var(--pale)), white); min-height: 55px; }
.search-panel h2 { display: inline-block; }
.search-form { display: flex; align-items: center; gap: 6px; padding: 8px 5px; flex-wrap: wrap; }
.search-form input[type=search] { width: 165px; }
.intro { display: flex; align-items: flex-start; gap: 5px; padding: 14px 20px 0; min-height: 95px; }
.intro img { border-radius: 10px; }
.intro p { margin-top: 0; }
.home-count, .home-title { text-align: center; }
.home-count { margin-top: 32px; }
.home-title { color: var(--accent); font-size: 12px; }
.category-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 25px; max-width: 700px; padding: 0 35px; }
.category-grid a { font-weight: bold; }
.category-grid li::before { content: '>> '; color: var(--accent); }
.category-grid em { font-size: 10px; }
.random-link { margin: 25px 35px; }
.alphabet { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 30px; font-weight: bold; }
.alphabet strong { color: var(--accent); }
body:has(.home-title) .alphabet { margin-top: 0; }
footer { text-align: center; margin: 65px 0 20px; }
.listing { border-collapse: collapse; width: 100%; margin: 15px 0; text-align: left; }
.listing th { background: var(--bar); color: white; }
.listing td, .listing th { padding: 7px; border-bottom: 1px solid #dadada; }
.listing tr:nth-child(even) { background: var(--pale); }
.table-scroll { overflow-x: auto; }
.sort-form, .recipe-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.recipe-actions { margin: 16px 0; }
.recipe-photo { display: block; margin: 18px auto; width: 300px; height: 250px; object-fit: cover; max-width: 100%; }
.section-heading { color: var(--heading, var(--link)); padding: 5px; background: var(--pale); margin-top: 20px; }
.recipe-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
.rating-panel { margin: 28px 0 24px; padding: 16px; border: 1px solid var(--border, #b9c3ce); border-top: 3px solid var(--bar); border-radius: 5px; background: var(--pale); }
.rating-panel h2 { margin: 0 0 12px; color: var(--heading, var(--link)); font-size: 13px; }
.rating-panel form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rating-panel label { display: flex; align-items: center; gap: 8px; }
.edit-form { max-width: 720px; margin: 16px 0; }
.edit-form > label { display: block; margin: 12px 0; }
.edit-form > label > input:not([type=checkbox]), .edit-form > label > select, .edit-form textarea { display: block; width: 100%; margin-top: 5px; }
.comment, .admin-entry { padding: 12px 0; border-bottom: 1px solid #dadada; }
.notice { background: #fff9dc; border: 1px solid #dec475; padding: 12px; font-size: 12px; }
.danger { margin: 18px 0; color: #a22222; }
.danger form { margin-top: 10px; }
.pagination { display: flex; gap: 15px; justify-content: center; margin: 20px; }
#crop-preview { display: block; width: 300px; max-width: 100%; height: auto; border: 1px solid #aaa; background: #eee; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.print-page .left-sidebar, .print-page .right-sidebar, .print-page .search-panel, .print-page .alphabet, .print-page footer, .print-page time { display: none; }
.print-page .layout { display: block; max-width: 800px; margin: auto; }
@media (max-width: 800px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .left-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .right-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .site-header time { display: none; }
  .category-grid { gap: 12px; padding: 0 10px; }
}
@media print {
  .left-sidebar, .right-sidebar, .search-panel, .alphabet, footer, .print-button, .site-header time, .rating-panel { display: none !important; }
  .layout { display: block; }
  body { font-size: 12px; color: black; margin: 0; }
  .recipe-text { font-size: 12px; }
  a { color: black; }
}