* { box-sizing: border-box; }
:root { --bg: #f7f6f2; --card: #fff; --line: #d3d1c7; --text: #2c2c2a; --muted: #888780; --accent: #1d9e75; --danger: #a32d2d; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
input, textarea, select, button { font: inherit; }
input, textarea, select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
textarea { resize: vertical; }
button, .btn { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; }
button:disabled { opacity: .4; cursor: default; }
.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.danger { color: var(--danger); }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
label input, label textarea, label output { margin-top: 2px; color: var(--text); font-size: 14px; }
label output { display: block; padding: 6px 0; font-weight: 600; }

.login { max-width: 320px; margin: 15vh auto; display: grid; gap: 10px; }
.err { color: var(--danger); }

.top { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.top a { margin-left: auto; color: var(--muted); }
.status { font-size: 12px; color: var(--muted); }
.status.error { color: var(--danger); }

.layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 45px); }
aside { padding: 12px; border-right: 1px solid var(--line); background: var(--card); }
aside button { width: 100%; margin-bottom: 10px; }
#projects { list-style: none; margin: 0; padding: 0; }
#projects li { padding: 8px; border-radius: 6px; cursor: pointer; }
#projects li:hover, #projects li.active { background: #e1f5ee; }
.pt { display: block; font-weight: 600; }
.ps { display: block; font-size: 12px; color: var(--muted); }

main { padding: 16px; max-width: 1100px; }
.empty { color: var(--muted); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.panel h2 { font-size: 15px; margin: 0 0 8px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
details summary { cursor: pointer; font-weight: 600; }
details textarea { margin: 8px 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.toolbar .danger { margin-left: auto; }

.shots { display: grid; gap: 12px; margin-bottom: 12px; }
.shot { display: grid; grid-template-columns: 320px 1fr; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.frame { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #f1efe8; display: flex; align-items: center; justify-content: center; }
.frame svg { width: 100%; height: 100%; display: block; }
.placeholder, .spinner { color: var(--muted); font-size: 12px; }
.spinner { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.fields { display: grid; gap: 6px; align-content: start; }
.row { display: flex; gap: 6px; align-items: center; }
.row select { width: 90px; flex: none; }
.row input[type=number] { width: 70px; flex: none; }
.num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12px; }
.actions { justify-content: flex-end; }
.offer { margin-bottom: 6px; }
.offer input:first-child { width: 200px; flex: none; }
.offer .price { width: 110px; flex: none; }
.grow { flex: 1; }

@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .shot { grid-template-columns: 1fr; }
}

.usage { margin-right: auto; color: var(--muted); font-size: 12px; align-self: center; }