@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg: #14161c;
  --panel: #1a1d26;
  --panel-2: #20242f;
  --amber: #e3a94c;
  --teal: #5ba8a0;
  --text: #ece8df;
  --text-muted: #8b8f9c;
  --text-faint: #5b5f6b;
  --danger: #d97373;
  --border: #2a2e39;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 15% -10%, rgba(227,169,76,.06), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(91,168,160,.05), transparent 35%);
}

.wrap{ max-width: 1180px; margin: 0 auto; padding: 36px 24px 80px; }

header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 20px; margin-bottom: 34px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 22px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{
  width: 42px; height: 30px; border-radius: 4px;
  background: linear-gradient(135deg, #f7f3ea, #e8e1cf);
  position:relative; flex-shrink:0;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.brand-mark::before, .brand-mark::after{
  content:""; position:absolute; left:8px; right:12px; height:2px; background:#c9c0a8;
}
.brand-mark::before{ top:11px; }
.brand-mark::after{ top:17px; right:20px; }
h1{ font-family:'Fraunces', serif; font-weight:600; font-size: 30px; margin:0; letter-spacing: -0.01em; }
.tagline{ color: var(--text-muted); font-size: 13.5px; margin-top: 2px; }

.stat-strip{ display:flex; gap: 28px; }
.stat{ text-align:right; }
.stat .num{ font-family:'Fraunces', serif; font-size: 28px; font-weight:600; color: var(--amber); line-height:1; }
.stat .lbl{ font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

.layout{ display:grid; grid-template-columns: 360px 1fr; gap: 26px; align-items:start; }
@media (max-width: 860px){ .layout{ grid-template-columns: 1fr; } }

.panel{ background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 22px; }
.panel h2{ font-family:'Fraunces', serif; font-size: 17px; font-weight:600; margin: 0 0 4px; }
.panel .sub{ color: var(--text-muted); font-size: 12.5px; margin-bottom: 18px; }

.slot-row{ display:flex; gap: 12px; }
.slot{
  flex:1; aspect-ratio: 1.586/1; border-radius: 8px;
  border: 1.5px dashed var(--text-faint);
  background: var(--panel-2);
  position: relative; overflow:hidden; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.slot input{ display:none; }
.slot .empty{ text-align:center; color: var(--text-faint); font-size: 12px; padding: 8px; }
.slot .empty .plus{ font-size: 20px; display:block; margin-bottom: 4px; }
.slot img{ width:100%; height:100%; object-fit:cover; display:block; }
.slot .tag{
  position:absolute; top:6px; left:6px; font-size: 10px; letter-spacing:.03em;
  background: rgba(20,22,28,.75); color: var(--text-muted); padding: 3px 7px; border-radius: 4px;
}
.slot.scanning::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(227,169,76,.35), transparent);
  animation: sweepDown 1.1s ease-in-out infinite;
}
@keyframes sweepDown{ 0%{ transform: translateY(-100%); } 100%{ transform: translateY(100%); } }

button{ font-family: inherit; cursor:pointer; }
.btn-primary{
  width:100%; margin-top: 16px; padding: 12px 16px;
  background: var(--amber); color: #241b09; border:none; border-radius: 7px;
  font-weight: 600; font-size: 14px;
}
.btn-primary:hover:not(:disabled){ filter: brightness(1.08); }
.btn-primary:disabled{ opacity:.35; cursor:not-allowed; }

.progress-line{ margin-top: 14px; }
.progress-track{ height:4px; background: var(--panel-2); border-radius: 3px; overflow:hidden; }
.progress-fill{ height:100%; width:30%; background: var(--amber); animation: indet 1.1s ease-in-out infinite; }
@keyframes indet{ 0%{ margin-left:-30%; } 100%{ margin-left:100%; } }
.progress-label{ font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.progress-line.is-error .progress-label{ color: var(--danger); line-height:1.5; }
.progress-line.is-error .progress-track{ display:none; }

.hint{ font-size: 11.5px; color: var(--text-faint); margin-top: 14px; line-height:1.5; }

.lib-banner{
  display:none; background: rgba(217,115,115,.12); border: 1px solid var(--danger);
  color: var(--danger); font-size: 12.5px; padding: 10px 14px; border-radius: 7px;
  margin-bottom: 18px; line-height:1.5;
}
.lib-banner.show{ display:block; }

.dash-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 4px; }

.empty-state{ text-align:center; padding: 54px 20px; color: var(--text-muted); }
.empty-state svg{ margin-bottom: 14px; opacity:.6; }
.empty-state .t1{ font-family:'Fraunces', serif; font-size: 17px; color: var(--text); margin-bottom:6px; }
.empty-state .t2{ font-size: 13px; max-width: 340px; margin: 0 auto; line-height:1.6; }

.entry{ border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; background: var(--panel-2); overflow:hidden; }
.entry.just-added{ animation: addPulse 1.3s ease; }
@keyframes addPulse{
  0%{ background: rgba(227,169,76,.22); border-color: var(--amber); }
  100%{ background: var(--panel-2); border-color: var(--border); }
}
.entry-head{ display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; cursor:pointer; gap: 12px; }
.entry-head .left{ display:flex; align-items:center; gap: 12px; min-width:0; }
.entry-head .who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.entry-head .name{ font-family:'Fraunces', serif; font-size: 15.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entry-head .co{ font-size: 12px; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entry-head .right{ display:flex; align-items:center; gap: 12px; flex-shrink:0; }
.chip{ font-size: 10.5px; color: var(--text-faint); font-family:'IBM Plex Mono', monospace; }
.caret{ color: var(--text-faint); transition: transform .15s ease; font-size:12px; }
.entry.open .caret{ transform: rotate(90deg); }

.avatar{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:600; font-size: 14px; color: #1a1d26;
}
.idx-chip{ font-family:'IBM Plex Mono', monospace; font-size: 10px; color: var(--text-faint); margin-right: 5px; }
.field-dots{ display:flex; gap: 5px; align-items:center; margin-top: 3px; }
.field-dots span{ width: 5px; height: 5px; border-radius: 50%; background: var(--border); }
.field-dots span.on{ background: var(--teal); }

.entry-body{ display:none; padding: 4px 16px 18px; }
.entry.open .entry-body{ display:block; }

.details-view{ display:flex; flex-direction:column; gap: 12px; margin-bottom: 4px; }
.entry.editing .details-view{ display:none; }
.detail-row .dlabel{ display:block; font-size: 10.5px; color: var(--text-faint); margin-bottom: 3px; }
.detail-row .dval{ font-size: 13.5px; color: var(--text); line-height: 1.45; word-break: break-word; }
.detail-row .dval-empty{ color: var(--text-faint); font-style: italic; }

.field-grid{ display:none; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.entry.editing .field-grid{ display:grid; }
@media (max-width:520px){ .field-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap: 4px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: 10.5px; color: var(--text-faint); }
.field input, .field textarea{
  background: var(--panel); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text); font-family: inherit; font-size: 13px; padding: 7px 9px;
}
.field input:focus, .field textarea:focus{ outline: 1.5px solid var(--teal); border-color: var(--teal); }
.field textarea{ resize: vertical; min-height: 40px; }

.entry-actions{ display:flex; justify-content:space-between; align-items:center; margin-top: 12px; }
.link-danger{ background:none; border:none; color: var(--danger); font-size: 12px; font-weight:500; }
.link-danger:hover{ text-decoration: underline; }
.btn-edit-toggle{
  background: none; border: 1px solid var(--teal); color: var(--teal);
  font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 6px;
}
.btn-edit-toggle:hover{ background: rgba(91,168,160,.1); }
.entry.editing .btn-edit-toggle{ background: var(--teal); color: #0e1f1c; }

.export-btn{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  background: var(--teal); color: #0e1f1c; padding: 10px 16px; border:none; border-radius:7px;
  font-weight:600; font-size: 13.5px;
}
.export-btn:hover{ filter: brightness(1.08); }