/* Base styles (layout, components, responsive rules) */
* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text-primary);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

header {
  padding:1.5rem 2rem;
  border-bottom:1px solid var(--border);
  background:var(--bg-elevated);
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  position:sticky;
  top:0;
  z-index:10;
}

.brand {
  display:flex;
  align-items:center;
  gap:0.8rem;
  font-weight:600;
  font-size:1.1rem;
}

.brand-logo {
  width:40px;
  height:40px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--accent), #1e293b);
  color:white;
  display:grid;
  place-items:center;
  font-weight:900;
  box-shadow:0 0 0 2px rgba(56,189,248,.4);
}

.header-actions {
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
}

.container {
  max-width:1100px;
  margin:0 auto;
  padding:2rem;
  flex:1 0 auto;
}

.card {
  background:var(--bg-elevated);
  border-radius:var(--radius-lg);
  padding:2rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.btn {
  background:var(--accent);
  color:white;
  border:none;
  padding:.7rem 1.4rem;
  border-radius:var(--radius-pill);
  cursor:pointer;
  font-weight:600;
  box-shadow:0 8px 25px rgba(56,189,248,0.3);
  transition:all .2s;
  white-space:nowrap;
  font-size:0.95rem;
}
.btn:hover { transform:translateY(-2px); }
.btn-outline {
  background:transparent;
  color:var(--text-muted);
  border:1px solid var(--border);
  box-shadow:none;
}
.btn-success { background:var(--success); }

.btn-sm {
  padding:0.3rem 0.7rem;
  font-size:0.8rem;
  box-shadow:none;
}
.btn-danger {
  border-color:var(--danger);
  color:var(--danger);
  background:transparent;
}
.btn-danger:hover {
  background:rgba(248,113,113,0.1);
}

table {
  width:100%;
  border-collapse:collapse;
  margin-top:1.5rem;
}
th, td {
  padding:1rem;
  text-align:left;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
th { background:var(--bg-soft); }
tr:hover { background:var(--bg-soft); }

pre {
  background:#0f172a;
  color:#e2e8f0;
  padding:1.5rem;
  border-radius:1rem;
  overflow-x:auto;
  white-space:pre-wrap;
  font-family:ui-monospace,monospace;
}

.never { color:var(--success); font-weight:600; }
.empty { text-align:center; padding:5rem 0; color:var(--text-muted); font-size:1.3rem; }

.mode-toggle-row {
  display:flex;
  justify-content:center;
  gap:1rem;
  margin-bottom:2rem;
  flex-wrap:wrap;
}

.mode-toggle-row .btn {
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--text-muted);
  box-shadow:none;
}
.mode-toggle-row .btn.active {
  background:var(--accent);
  color:#ffffff;
  border-color:var(--accent);
  box-shadow:0 8px 25px rgba(56,189,248,0.3);
}

.expiry-row {
  display:flex;
  justify-content:center;
  gap:0.8rem;
  flex-wrap:wrap;
  margin-bottom:2.5rem;
}

.expiry-btn {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.expiry-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.expiry-btn.active {
  background: var(--success);
  color: #ffffff;
  border-color: var(--success);
}

.auth-row {
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  margin-bottom:1.5rem;
}
.auth-fields {
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  align-items:center;
}
.auth-fields input {
  padding:0.55rem 0.75rem;
  border-radius:0.75rem;
  border:1px solid var(--border);
  background:var(--bg-soft);
  color:var(--text-primary);
  min-width:0;
  flex:1 1 150px;
}
.auth-meta {
  font-size:0.85rem;
  color:var(--text-muted);
}
.auth-status {
  font-size:0.85rem;
  min-height:1.2em;
}
.auth-status.error {
  color:#f97373;
}
.auth-status.ok {
  color:var(--success);
}

.logged-in-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.5rem;
  margin-bottom:1.5rem;
}

footer {
  text-align:center;
  padding:1.5rem 0;
  color:var(--text-muted);
  font-size:0.85rem;
  border-top:1px solid var(--border);
  margin-top:2rem;
  flex-shrink:0;
}

.pill {
  display:inline-block;
  padding:0.2rem 0.6rem;
  border-radius:999px;
  font-size:0.75rem;
  border:1px solid var(--border);
  color:var(--text-muted);
}

.pill-admin { border-color:var(--accent); color:var(--accent); }

/* Dashboard thumbnails */
.thumb { width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; border-radius:6px; background:var(--surface); }
.thumb img { max-width:100%; max-height:100%; display:block; object-fit:cover; }
.pill-mod { border-color:var(--success); color:var(--success); }
.pill-banned { border-color:var(--danger); color:var(--danger); }

@media (max-width: 768px) {
  header {
    padding:1rem 1.25rem;
    flex-direction:column;
    align-items:flex-start;
    gap:0.75rem;
  }

  .container {
    padding:1.25rem 1rem;
  }

  .card {
    padding:1.5rem 1.25rem;
  }

  .brand-logo {
    width:32px;
    height:32px;
    font-size:0.9rem;
  }

  .header-actions {
    width:100%;
    justify-content:flex-start;
    gap:0.75rem;
  }

  .header-actions .btn {
    padding:.55rem 1.1rem;
    font-size:0.9rem;
  }

  .mode-toggle-row {
    gap:0.6rem;
  }
  .mode-toggle-row .btn {
    flex:1 1 45%;
    text-align:center;
  }

  .expiry-row {
    gap:0.5rem;
  }
  .expiry-btn {
    flex:1 1 45%;
    text-align:center;
    font-size:0.85rem;
    padding:0.4rem 0.75rem;
  }

  #fileDropzone {
    padding:2.5rem 1.5rem !important;
  }
  #fileDropzone div:first-child {
    font-size:1.4rem !important;
  }

  #pasteInput {
    min-height:200px !important;
    font-size:0.95rem !important;
  }

  table {
    display:block;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
  }
  th, td {
    padding:0.75rem 0.5rem;
    font-size:0.9rem;
  }

  .auth-fields {
    flex-direction:column;
    align-items:stretch;
  }
  .auth-fields input {
    width:100%;
  }
  .auth-fields .btn {
    width:100%;
    justify-content:center;
    text-align:center;
  }
}