:root {
  --bg: #0b0f12;
  --card: #12181d;
  --muted: #96a3b0;
  --text: #e8eef5;
  --primary: #4ca773;
  --danger: #d9534f;
  --border: #22303a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
button, input, select { font: inherit; }
button { background: #1f2a33; color: var(--text); border: 1px solid var(--border); padding: 10px 14px; border-radius: 12px; cursor: pointer; }
button.primary { background: var(--primary); border-color: transparent; color: #08140c; font-weight: 600; }
button.outline { background: transparent; }
button.danger { background: var(--danger); border-color: transparent; color: white; }
.buttonlike { display:inline-block; background:#1f2a33; border:1px solid var(--border); padding:10px 14px; border-radius:12px; cursor:pointer; }
.app-header { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border); position: sticky; top:0; background: rgba(11,15,18,0.8); backdrop-filter: blur(6px); z-index: 2; }
.title { font-weight: 700; font-size: 18px; }
.version-badge { background:#1f2a33; border:1px solid var(--border); padding:6px 10px; border-radius: 999px; font-size:12px; }
.toolbar, .filters { display:flex; gap:10px; padding: 12px 16px; flex-wrap: wrap; }
.filters input[type="search"] { flex:1; min-width: 160px; padding:10px 12px; border-radius: 10px; background:#0f151a; border:1px solid var(--border); color:var(--text); }
.filters select { padding:10px 12px; border-radius:10px; background:#0f151a; border:1px solid var(--border); color:var(--text); }
.card-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:12px; padding: 0 16px 80px; }
.card { background: var(--card); border:1px solid var(--border); border-radius: 16px; overflow: hidden; display:flex; min-height: 120px; }
.card .info { padding:12px; flex: 1; display:flex; flex-direction:column; gap:6px; }
.card .top-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.card .name { font-weight:700; font-size:16px; }
.card .id { font-size:12px; color: var(--muted); }
.card .category { color: var(--muted); font-size: 13px; }
.card .actions { margin-top:auto; display:flex; gap:8px; }
.card .photo { width: 40%; min-width: 120px; background:#0f151a; display:flex; align-items:center; justify-content:center; }
.card .photo img { width:100%; height:100%; object-fit: cover; display:block; }
.empty { text-align:center; padding: 40px 16px; color: var(--muted); }
.screen { position: fixed; inset: 0; background: var(--bg); display:flex; flex-direction:column; z-index: 5; }
.hidden { display:none !important; }
.screen-header { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid var(--border); }
.screen form { display:flex; flex-direction: column; gap: 16px; padding: 16px; }
label span { display:block; margin-bottom:6px; color: var(--muted); font-size: 13px; }
input[type="text"], input[type="search"], select { background:#0f151a; color:var(--text); border:1px solid var(--border); padding:10px 12px; border-radius: 10px; width:100%; }
.row { display:flex; align-items:center; }
.row.gap { gap:8px; }
.row.end { justify-content: flex-end; }
.icon-btn { background: transparent; border: none; font-size: 18px; }
.photo-row { display:flex; gap: 8px; align-items:center; }
.preview-wrap { border:1px dashed var(--border); border-radius: 12px; padding: 8px; display:flex; justify-content:center; align-items:center; min-height: 160px; }
.preview-wrap img { max-width: 100%; max-height: 240px; border-radius: 8px; }
.modal { position: fixed; inset:0; background: rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index: 10; }
.modal-card { background: var(--card); border:1px solid var(--border); border-radius: 16px; padding: 16px; width: min(92vw, 420px); }
.toast { position: fixed; left:50%; transform: translateX(-50%); bottom: 20px; background: #1f2a33; color: var(--text); border:1px solid var(--border); padding: 10px 14px; border-radius: 999px; display:flex; gap: 10px; align-items:center; z-index: 15; }


/* Selection mode styles */
.select-box {
  position: absolute;
  top: 8px;
  left: 8px;
  transform: scale(1.4);
  z-index: 2;
}
.card.select-mode {
  position: relative;
  border: 2px dashed #4ca773;
}