/* Прототип без дизайна: только чтобы было читаемо и удобно тыкать */
body { font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; color: #111; background: #fff; }
.proto-bar { background: #222; color: #eee; padding: 6px 16px; font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.proto-bar a { color: #9cf; }
.proto-bar a.on { color: #fff; font-weight: bold; text-decoration: none; }
.proto-bar button { font-size: 12px; }
header { background: #f2f2f2; border-bottom: 1px solid #ccc; padding: 8px 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
header a { color: #111; text-decoration: none; }
header a.on { font-weight: bold; text-decoration: underline; }
header .right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
main { padding: 16px; max-width: 1280px; }
h1 { font-size: 22px; margin: 4px 0 12px; }
h2 { font-size: 17px; margin: 24px 0 8px; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
h3 { font-size: 15px; margin: 16px 0 6px; }
table { border-collapse: collapse; width: 100%; margin: 4px 0 8px; }
th, td { border: 1px solid #ccc; padding: 4px 6px; text-align: left; vertical-align: top; }
th { background: #f6f6f6; font-weight: 600; }
td.n, th.n { text-align: right; white-space: nowrap; }
tr.total td { font-weight: 600; background: #fafafa; }
tr.muted td { color: #888; }
input, select, textarea, button { font: inherit; }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=password], select, textarea { padding: 3px 4px; border: 1px solid #aaa; }
button { padding: 3px 10px; cursor: pointer; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin: 6px 0; }
.row label { display: flex; flex-direction: column; font-size: 12px; color: #555; }
.grid { display: grid; grid-template-columns: 220px 1fr; gap: 6px 12px; max-width: 760px; }
.grid label, .grid .k { color: #555; padding-top: 4px; }
.muted { color: #777; }
.note { background: #eef5ff; border-left: 4px solid #6a9be8; padding: 6px 10px; margin: 8px 0; font-size: 13px; color: #234; }
.note b { color: #123; }
.warn { background: #fdecea; border-left: 4px solid #d9534f; padding: 6px 10px; margin: 8px 0; }
.ok { color: #1a7f37; }
.bad { color: #b42318; }
.tag { display: inline-block; padding: 0 6px; border: 1px solid #bbb; border-radius: 3px; font-size: 12px; background: #fafafa; }
.tag.hi { border-color: #d9534f; color: #b42318; }
.tag.hidden { border-color: #999; color: #666; background: #eee; }
.cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.card { border: 1px solid #ccc; padding: 8px 12px; min-width: 180px; }
.card .v { font-size: 17px; font-weight: 600; }
.photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.ph { width: 140px; height: 100px; background: #ddd repeating-linear-gradient(45deg, #ddd 0 10px, #e8e8e8 10px 20px); display: flex; align-items: center; justify-content: center; color: #555; font-size: 12px; border: 1px solid #bbb; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } .grid { grid-template-columns: 1fr; } }
a { color: #1f4fa3; }
.toast { position: fixed; right: 16px; bottom: 16px; background: #333; color: #fff; padding: 10px 14px; border-radius: 4px; max-width: 360px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }
body.no-notes .note { display: none; }