* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #14161a;
  --panel: #1d2026;
  --panel2: #24272e;
  --line: #32363e;
  --text: #e8eaee;
  --dim: #9aa0ab;
  --accent: #4f8cff;
  --accent2: #6ee7b7;
  --checker: repeating-conic-gradient(#2a2d33 0% 25%, #24272e 0% 50%) 0 0 / 16px 16px;
}

html, body { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 system-ui, "Segoe UI", sans-serif;
}
.hidden { display: none !important; }
.hint { color: var(--dim); font-size: 13px; }
.center { text-align: center; margin: 24px 0; }

.btn {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 16px; cursor: pointer; font-size: 14px;
}
.btn:hover { border-color: var(--dim); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.primary:disabled { background: var(--panel2); border-color: var(--line); color: var(--dim); cursor: not-allowed; filter: none; }
.btn.small { padding: 5px 12px; font-size: 13px; }

/* ---------- chrome ---------- */
.gate { max-width: 560px; margin: 15vh auto; text-align: center; display: flex; flex-direction: column; gap: 14px; padding: 0 20px; }
.site-head { text-align: center; padding: 34px 20px 22px; }
.site-head h1 { font-size: 30px; letter-spacing: 0.4px; }
.site-head .tagline { color: var(--dim); margin-top: 6px; }
.site-head .tagline strong { color: var(--accent2); font-weight: 600; }
.site-foot { text-align: center; padding: 30px 20px 40px; color: var(--dim); font-size: 12.5px; max-width: 720px; margin: 0 auto; }

/* ---------- gallery ---------- */
#gallery-view { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
#gallery-cats section { margin-bottom: 28px; }
#gallery-cats h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--dim); margin-bottom: 12px;
}
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tpl-card {
  background: var(--panel); border: 2px solid var(--line); border-radius: 12px;
  overflow: hidden; cursor: pointer; text-align: left; color: var(--text);
  padding: 0; font: inherit; transition: border-color 0.12s, transform 0.12s;
}
.tpl-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tpl-card .imgbox { display: flex; align-items: center; justify-content: center; height: 170px; background: var(--checker); }
.tpl-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tpl-card .label { display: block; padding: 10px 12px; }
.tpl-card .label b { display: block; font-size: 14px; margin-bottom: 2px; }
.tpl-card .label span { color: var(--dim); font-size: 12px; }

/* ---------- workspace ---------- */
#workspace-view { max-width: 1380px; margin: 0 auto; padding: 0 20px 30px; }
.ws-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.ws-head h2 { font-size: 18px; flex: 1; }
.ws-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ws-preview {
  flex: 1.6; min-width: 340px; position: relative;
  background: var(--checker); border-radius: 12px; border: 1px solid var(--line);
  min-height: 300px; display: flex; align-items: center; justify-content: center;
}
.ws-preview canvas { width: 100%; height: auto; display: block; border-radius: 12px; }
.preview-msg {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(20,22,26,0.92); border: 1px solid var(--line);
  border-radius: 999px; color: var(--text);
  font-size: 14px; padding: 10px 22px; text-align: center; z-index: 2;
  white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}
.ws-side { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 16px; }
.ws-side section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.panel-head h3 { flex: 1; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--dim); }

/* ---------- library ---------- */
.library { display: flex; flex-wrap: wrap; gap: 10px; }
.lib-item {
  width: 96px; position: relative; cursor: grab;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.lib-item:active { cursor: grabbing; }
.lib-item .imgbox { display: flex; align-items: center; justify-content: center; height: 110px; background: var(--checker); }
.lib-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lib-item .label {
  display: block; font-size: 10.5px; color: var(--dim); padding: 4px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-item .badge {
  position: absolute; top: 4px; left: 4px; font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px; background: rgba(0,0,0,0.65);
}
.badge.wrap { color: var(--accent2); }
.badge.front { color: var(--accent); }
.mini-btn {
  position: absolute; top: 4px; border: none; border-radius: 4px;
  background: rgba(0,0,0,0.65); color: var(--text); font-size: 11px;
  padding: 2px 6px; cursor: pointer;
}
.mini-btn.del { right: 4px; }
.mini-btn.del:hover { background: #f87171; color: #fff; }
.mini-btn.guides { right: 30px; }

/* ---------- slots ---------- */
.slot-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; }
.slot-row.drop { outline: 2px dashed var(--accent); outline-offset: -2px; background: rgba(79,140,255,0.08); }
.slot-row .slot-name { flex: 0 0 46%; font-size: 13.5px; }
.slot-row select {
  flex: 1; padding: 7px 9px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; outline: none; min-width: 0;
}
/* which part of a full wrap feeds this slot */
.slot-row .region-sel {
  flex: 0 0 auto; width: auto; padding: 7px 6px; font-size: 12px;
  color: var(--accent2); text-transform: capitalize;
}
.slot-row input[type=color] {
  width: 52px; height: 32px; padding: 2px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
}
.chip {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 4px; margin-left: 7px; vertical-align: 1px;
}
.chip-cover { background: #1f3a63; color: #9ec4ff; }
.chip-spine { background: #143c31; color: #6ee7b7; }
.chip-screen { background: #3d2f14; color: #fbbf24; }
.chip-accent { background: #33313d; color: #b8b3cc; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px;
}
.modal-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 12px; max-width: 96vw;
}
#guide-canvas { border-radius: 8px; cursor: ew-resize; max-width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; }

@media (max-width: 760px) {
  .ws-body { flex-direction: column; }
  .ws-preview, .ws-side { min-width: 0; width: 100%; }
}