:root { color: #17212b; background: #f5faf8; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 980px; margin: auto; padding: 76px 24px 96px; }
.eyebrow { margin: 0 0 10px; color: #159376; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
h1 { margin: 0; font-size: clamp(34px, 6vw, 62px); letter-spacing: -.05em; line-height: 1.02; }
.intro { max-width: 710px; margin: 18px 0 38px; color: #66737f; font-size: 17px; line-height: 1.55; }
#items { display: grid; gap: 14px; }
.card { display: grid; grid-template-columns: 42px 104px minmax(0, 1fr) 168px; align-items: center; gap: 17px; min-height: 132px; padding: 16px 20px; border: 1px solid #d8e6e1; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(13, 43, 36, .035); }
.card.no-image { grid-template-columns: 42px minmax(0, 1fr) 168px; }
.priority { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e8f7f2; color: #137c64; font-weight: 800; }
.image { width: 104px; height: 98px; border-radius: 12px; background: #eef7f4 center / contain no-repeat; }
.copy { min-width: 0; }
.copy h2 { margin: 3px 0 4px; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.category, .note { margin: 0; }
.category { color: #627481; font-size: 11px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.note { color: #70818d; font-size: 14px; }
.actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
.actions strong { font-size: 17px; white-space: nowrap; }
.counter { color: #168d75; font-size: 12px; font-weight: 800; text-align: right; }
.actions a { color: #188b73; font-size: 12px; font-weight: 800; text-decoration: none; }
.actions a:hover { text-decoration: underline; }
.custom-name, .custom-link { width: 168px; border: 1px solid #bdcfca; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12px; }
.actions button, #confirm { border: 0; border-radius: 9px; background: #168d75; color: #fff; padding: 10px 13px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.actions button:hover, #confirm:hover { background: #117962; }
.actions button.cancel { background: #f1f5f4; color: #176a59; border: 1px solid #b9d8cf; }
.actions button.cancel:hover { background: #e4f1ed; }
.card.reserved { background: #fbfcfc; }
.card.reserved .actions button { background: #c9d7d3; color: #5c6d69; cursor: not-allowed; }
dialog { width: min(420px, calc(100% - 32px)); border: 0; border-radius: 18px; padding: 26px; box-shadow: 0 20px 70px rgba(0, 0, 0, .28); }
dialog::backdrop { background: rgba(12, 27, 25, .52); }
dialog h2 { margin: 0 0 20px; font-size: 23px; line-height: 1.2; }
dialog form { position: relative; }
.close { position: absolute; right: -7px; top: -12px; border: 0; background: none; font-size: 28px; cursor: pointer; }
label { display: grid; gap: 7px; color: #465762; font-size: 13px; font-weight: 700; }
input { border: 1px solid #bdcfca; border-radius: 9px; padding: 11px; font: inherit; }
#confirm { width: 100%; margin-top: 18px; }
#error { min-height: 18px; margin: 10px 0 0; color: #bf3b42; font-size: 13px; }
.admin { max-width: 760px; }
.admin-row { margin: 0 0 12px; padding: 18px 20px; border: 1px solid #d8e6e1; border-radius: 14px; background: #fff; }
.admin-row h2 { margin: 0 0 8px; font-size: 17px; }
.admin-row ul { margin: 0; padding-left: 20px; color: #465762; }
@media (max-width: 760px) { main { padding: 46px 16px 66px; } .intro { margin-bottom: 26px; font-size: 15px; } .card, .card.no-image { grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 0; padding: 16px; } .priority { grid-column: 1; grid-row: 1 / span 2; } .copy { grid-column: 2; grid-row: 1; } .copy h2 { font-size: 18px; } .image { grid-column: 2; grid-row: 2; width: 92px; height: 76px; } .actions { grid-column: 2; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 9px 14px; padding-top: 2px; } .no-image .actions { grid-row: 2; } .actions strong { font-size: 18px; } .counter { text-align: left; } .actions a { display: inline; } .actions button { margin-left: auto; } }
@media (max-width: 430px) { main { padding-left: 12px; padding-right: 12px; } .card, .card.no-image { padding: 14px; } .copy h2 { font-size: 17px; } .actions button { width: 100%; margin-left: 0; } .actions a { width: 100%; } }