:root {
   --bg: #0b0c10;
   --panel: #12141b;
   --text: #e8eaf0;
   --muted: #a4a8b5;
   --border: #262a36;
   --accent: #5da9ff;
   --danger: #ff5d5d;
 }
 
 * {
   box-sizing: border-box;
 }
 
 body {
   margin: 0;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   background: var(--bg);
   color: var(--text);
 }
 
 a {
   color: var(--accent);
 }
 
 .topbar {
   position: sticky;
   top: 0;
   z-index: 10;
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 12px 14px;
   background: rgba(18, 20, 27, 0.92);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--border);
 }
 
 .brand {
   font-weight: 700;
   letter-spacing: 0.3px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  font-size: 3rem;
  line-height: 1;
 }

.brand:hover {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  text-underline-offset: 4px;
}
 
 .spacer {
   flex: 1;
 }
 
 .search {
   flex: 1;
   max-width: 700px;
   padding: 10px 12px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: #0f1118;
   color: var(--text);
 }
 
.actions {
   display: flex;
   gap: 10px;
  align-items: center;
 }
 
.versionBadge {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(15, 17, 24, 0.6);
  white-space: nowrap;
  user-select: none;
}

/* Dashboard: use grid so the big title stays centered */
.dashboardTopbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "search brand actions";
  align-items: center;
  column-gap: 12px;
}

.dashboardTopbar > .searchGroup {
  grid-area: search;
  width: 100%;
  max-width: 700px;
}

.searchGroup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.searchGroup > #search {
  flex: 1;
  width: 100%;
  max-width: 700px;
}

.iconButton {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(15, 17, 24, 0.6);
  color: var(--text);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.iconButton:hover {
  border-color: rgba(93, 169, 255, 0.55);
}

.helpBubble {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  background: rgba(15, 17, 24, 0.96);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  z-index: 50;
}

.helpTitle {
  font-weight: 750;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.helpBody {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
}

.helpExamples {
  margin-top: 8px;
  color: var(--muted);
  display: grid;
  gap: 6px;
}

.helpBubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--text);
}

.dashboardTopbar > .actions {
  grid-area: actions;
  justify-self: end;
}

.dashboardTopbar > .brand {
  grid-area: brand;
  justify-self: center;
}

/* Small screens: two-line layout */
@media (max-width: 680px) {
  .dashboardTopbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand brand"
      "search actions";
    row-gap: 10px;
  }

  .dashboardTopbar > .searchGroup {
    max-width: none;
  }
}

 .container {
   padding: 16px;
   max-width: 1200px;
   margin: 0 auto;
 }
 
 .container.narrow {
   max-width: 560px;
 }
 
 .grid {
   display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 12px;
 }
 
 .tile {
   position: relative;
   display: block;
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 14px;
   overflow: hidden;
   aspect-ratio: 1 / 1;
 }
 
 .tile img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 
 .tile .overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   padding: 10px;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
   opacity: 0;
   transition: opacity 120ms ease;
 }
 
 .tile:hover .overlay {
   opacity: 1;
 }
 
.tile.is-active .overlay {
  opacity: 1;
}

@media (pointer: coarse) {
  .tile:hover .overlay {
    opacity: 0;
  }
}

 .miniTags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }
 
 .chip {
   font-size: 12px;
   color: var(--text);
   background: rgba(255, 255, 255, 0.08);
   padding: 4px 8px;
   border-radius: 999px;
 }
 
 .button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid var(--border);
   background: var(--accent);
   color: #06101f;
   text-decoration: none;
   font-weight: 650;
   cursor: pointer;
 }
 
 .button.secondary {
   background: transparent;
   color: var(--text);
 }
 
 .button.danger {
   background: transparent;
   border-color: rgba(255, 93, 93, 0.45);
   color: var(--danger);
 }
 
 .row {
   display: flex;
   gap: 10px;
   align-items: center;
   flex-wrap: wrap;
   margin-top: 12px;
 }
 
 .loading,
 .empty {
   margin: 18px 0;
   color: var(--muted);
 }
 
 .dialog {
   border: 1px solid var(--border);
   background: var(--panel);
   color: var(--text);
   border-radius: 14px;
   padding: 0;
   width: min(620px, calc(100% - 26px));
 }
 
 dialog::backdrop {
   background: rgba(0, 0, 0, 0.6);
 }
 
 form {
   display: grid;
   gap: 12px;
   padding: 14px;
 }

 .confirmForm {
   padding: 16px;
 }

 .subtitle {
   margin: 0;
   color: var(--muted);
 }
 
 label {
   display: grid;
   gap: 6px;
   color: var(--muted);
   font-size: 14px;
 }
 
 input[type="text"],
 input[type="password"],
 input[type="url"],
 input[type="search"],
 input[type="file"] {
   padding: 10px 12px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: #0f1118;
   color: var(--text);
 }
 
 .uploadPreview {
   width: 100%;
   height: 260px;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: #0f1118;
   overflow: hidden;
 }
 
 .uploadPreview img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
 }
 
.editPreview {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f1118;
}

.editPreviewLabel {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.progressWrap {
  display: grid;
  gap: 8px;
}

.progressText {
  color: var(--muted);
  font-size: 13px;
}

progress.progress {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
}

progress.progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.08);
}

progress.progress::-webkit-progress-value {
  background: rgba(110, 168, 255, 0.9);
}

progress.progress::-moz-progress-bar {
  background: rgba(110, 168, 255, 0.9);
}

.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 17, 24, 0.95);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  z-index: 1000;
  max-width: min(640px, calc(100% - 24px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

 .card {
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 14px;
 }
 
 .error {
   border: 1px solid rgba(255, 93, 93, 0.35);
   background: rgba(255, 93, 93, 0.12);
   padding: 10px 12px;
   border-radius: 10px;
 }
 
 .imagePage {
   display: grid;
   grid-template-columns: 1.2fr 0.8fr;
   gap: 16px;
 }
 
 .fullImage {
   width: 100%;
   border-radius: 14px;
   border: 1px solid var(--border);
   background: var(--panel);
 }
 
 .meta {
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 14px;
 }
 
 .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
 
 .tag {
   font-size: 13px;
   padding: 5px 9px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.07);
 }
 
 @media (max-width: 840px) {
   .imagePage {
     grid-template-columns: 1fr;
   }
 }