/* ─────────────────────────────────────────────────────────────────────────
   Shared styles — navbar, dialog system, base layout.
   Used by: index.html, profile.html, tools/*_preview.html.
   Dialog vocabulary follows the editor / object_preview / model_preview
   convention (.dialog-overlay + .dialog + .dialog-header + .dialog-close).
   ──────────────────────────────────────────────────────────────────────── */

html { color-scheme: dark; }

/* Never allow whole-page horizontal scroll — on any page, at any viewport.
   A stray wide element gets clipped rather than pushing the document sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ★ + like-count badge on map/model cards (index, library, search). Count is
   0 until likes are persisted server-side. Parent thumb must be positioned. */
.like-badge {
  position: absolute; bottom: 6px; right: 6px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 600; color: #fff; line-height: 1;
  pointer-events: none;
}
.like-badge .lb-star {
  width: 10px; height: 10px; flex: 0 0 auto; background: #fff;
  -webkit-mask: url('/assets/icon/ic_star.svg') no-repeat center / contain;
  mask: url('/assets/icon/ic_star.svg') no-repeat center / contain;
}
/* Digits sit optically a hair high next to the star — nudge down to align. */
.like-badge .lb-count { position: relative; top: 1px; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #2a2a2a;
  color: #eef2ff;
}

/* ─── Navbar / header ─── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #00000087;
}
header h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: #d0d0d0;
  border: none;
  cursor: pointer;
  transition: color 0.12s ease;
}
.btn-back:hover { color: #ffffff; }
.btn-back svg { display: block; width: 20px; height: 20px; }
.btn-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 26px;
  background: #333;
  color: #d0d0d0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn-header:hover {
  background: #3a3a3a;
  border-color: rgba(255, 255, 255, 0.22);
}
.btn-header.active {
  background: #404040;
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}
.btn-header.active:hover {
  background: #4a4a4a;
}
.btn-header svg { flex-shrink: 0; }
.btn-header[hidden] { display: none; }
.btn-header.user-chip {
  cursor: pointer;
  color: #b8b8b8;
  background: transparent;
  border: none;
  padding: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 26px;
}
.btn-header.user-chip:hover {
  background: transparent;
  border-color: transparent;
  color: #ffffff;
}

/* ─── Dialog system ─── */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  box-sizing: border-box;
}
.dialog-overlay[hidden] { display: none; }
.dialog {
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  width: min(900px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dialog-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.dialog-close {
  background: transparent;
  border: none;
  color: #d0d0d0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.dialog-close:hover { background: #243055; }
.dialog-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

/* ─── Dialog form controls ─── */
.form-row { display: flex; flex-direction: column; gap: 5px; }
.form-row label {
  font-size: 10px;
  color: #888;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.form-input {
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #eef2ff;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.form-input:focus { border-color: rgba(255, 255, 255, 0.3); }

/* Shared checkbox styling — apply `.app-checkbox` to any <input type="checkbox">
   so every page renders the same white-accent box (instead of the browser's
   default blue). */
.app-checkbox {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: #ffffff;
  cursor: pointer;
}

/* ─── Dialog action buttons ─── */
/* Shared button styles for dialog actions ("Save", "Add", "Cancel", "Delete", …).
   Mirrors the editor's dialog-actions buttons so every page looks the same.
   Markup pattern:
     <div class="dialog-actions">
       <button class="danger">Delete</button>   (optional, pushed to the left)
       <button>Cancel</button>                  (neutral / cancel)
       <button class="primary">Save</button>    (confirm action)
     </div>
*/
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.dialog-actions button {
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  color: #eef2ff;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.18s ease;
}
.dialog-actions button:hover { background: #243055; }
.dialog-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.dialog-actions button:disabled:hover { background: transparent; }
.dialog-actions button.primary { background: #404040; }
.dialog-actions button.primary:hover { background: #525252; }
.dialog-actions button.danger {
  margin-right: auto;
  background: #6e2a2a;
  color: #ffd9d3;
}
.dialog-actions button.danger:hover { background: #944141; }

.dialog-error {
  font-size: 12px;
  color: #ff7b7b;
  min-height: 16px;
}
.dialog-error.success { color: #69db7c; }

/* ─── Auth panels (used in multi-tab auth dialog) ─── */
.auth-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-panel[hidden] { display: none; }

/* ─── Tab bar (used in auth dialog) ─── */
.tab-bar {
  display: flex;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tab-bar[hidden] { display: none; }
.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #909090;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.tab-btn:hover { color: #d0d0d0; }
.tab-btn.active {
  color: #fff;
  border-bottom-color: #4c6ef5;
}

/* ─── Inline text link (used inside dialogs) ─── */
.text-link {
  background: transparent;
  border: none;
  color: #8aa7ff;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
  align-self: flex-start;
}
.text-link:hover { color: #aac4ff; }

/* ─── Footer ─── */
footer {
  padding: 14px 24px;
  font-size: 11px;
  color: #707070;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── Horizontal tab bar ───
   Scrollable row of text tabs with an underline indicator on the active one.
   No container chrome (no radius / border / background) — just the tabs.
   Active tab = white text + white underline. Reused by the library
   sub-filter and the editor's Add-Model source tabs. */
.htab-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.htab-bar::-webkit-scrollbar { display: none; }
.htab-bar button {
  flex-shrink: 0;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #888;
  font-size: 12.5px;
  line-height: 1;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.htab-bar button:hover { color: #d0d0d0; }
.htab-bar button.active {
  color: #fff;
  border-bottom-color: #fff;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME (the default). Dark stays the base CSS above; these overrides
   apply when <html data-theme="light"> (set on load unless the user picked
   dark). Scoped to the shared chrome — pages add their own light overrides.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body { background: #f4f5f7; color: #1c1d1f; }

html[data-theme="light"] header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] header h1 { color: #1c1d1f; }
html[data-theme="light"] .btn-back { color: #555; }
html[data-theme="light"] .btn-back:hover { color: #000; }

html[data-theme="light"] .btn-header {
  background: #ffffff; color: #333; border-color: rgba(0, 0, 0, 0.14);
}
html[data-theme="light"] .btn-header:hover { background: #eef0f3; border-color: rgba(0, 0, 0, 0.22); }
html[data-theme="light"] .btn-header.active { background: #e4e7ec; color: #000; border-color: rgba(0, 0, 0, 0.28); }
html[data-theme="light"] .btn-header.user-chip { background: transparent; color: #555; }
html[data-theme="light"] .btn-header.user-chip:hover { color: #000; }

html[data-theme="light"] .dialog { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
html[data-theme="light"] .dialog-header { border-bottom-color: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .dialog-close { color: #555; }
html[data-theme="light"] .dialog-close:hover { background: #e7ecff; }
html[data-theme="light"] .form-row label { color: #777; }
html[data-theme="light"] .form-input { background: #f4f5f7; border-color: rgba(0, 0, 0, 0.14); color: #1c1d1f; }
html[data-theme="light"] .form-input:focus { border-color: rgba(0, 0, 0, 0.35); }
html[data-theme="light"] .dialog-actions button { color: #1c1d1f; }
html[data-theme="light"] .dialog-actions button:hover { background: #e7ecff; }
html[data-theme="light"] .dialog-actions button.primary { background: #4c6ef5; color: #fff; }
html[data-theme="light"] .dialog-actions button.primary:hover { background: #3b5ce0; }
html[data-theme="light"] .dialog-actions button.danger { background: #f8d7d4; color: #a8261b; }
html[data-theme="light"] .dialog-actions button.danger:hover { background: #f3c0bb; }

html[data-theme="light"] .tab-bar { border-bottom-color: rgba(0, 0, 0, 0.1); }
html[data-theme="light"] .tab-btn { color: #888; }
html[data-theme="light"] .tab-btn:hover { color: #333; }
html[data-theme="light"] .tab-btn.active { color: #1c1d1f; }

html[data-theme="light"] footer { color: #888; border-top-color: rgba(0, 0, 0, 0.08); }

html[data-theme="light"] .htab-bar button { color: #888; }
html[data-theme="light"] .htab-bar button:hover { color: #333; }
html[data-theme="light"] .htab-bar button.active { color: #1c1d1f; border-bottom-color: #1c1d1f; }

/* Like badge: overlay-on-image variants keep the dark pill + white star.
   Badges placed on the page background (inside .body) flip to dark ink. */
html[data-theme="light"] .body .like-badge { color: #666; }
html[data-theme="light"] .body .like-badge .lb-star { background: #666; }