/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0f0f12;
  color: #e8e8ea;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.05rem; color: #b8b8bc; }
hr { border: 0; border-top: 1px solid #26262c; margin: 2.5rem 0; }
code { background: #1c1c22; padding: .15rem .35rem; border-radius: 4px; font-size: .9em; }

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.5rem;
  border-bottom: 1px solid #1f1f25;
  background: #0a0a0d;
  position: sticky; top: 0; z-index: 10;
}
.logo { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.topnav { display: flex; gap: 1rem; }
.back {
  font-size: .9rem; color: #9a9aa0;
  padding: .4rem .7rem; border-radius: 6px;
  transition: background .15s;
}
.back:hover { background: #1c1c22; color: #e8e8ea; }

/* Layout */
.container { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }
.page-head { margin-bottom: 1.5rem; }
.hint { color: #7a7a82; font-size: .92rem; margin: .25rem 0 0; }
.muted { color: #7a7a82; font-size: .9rem; }

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.card {
  display: block;
  background: #16161b;
  border: 1px solid #1f1f25;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .12s, border-color .12s;
}
.card:hover { transform: translateY(-2px); border-color: #3a3a42; }
.thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #0a0a0d;
  overflow: hidden;
}
.thumb img,
.thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb video { background: #0a0a0d; }
.thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: #555; font-size: .85rem;
}
.badges {
  position: absolute; bottom: .4rem; left: .4rem; right: .4rem;
  display: flex; flex-wrap: wrap; gap: .25rem;
}
.badge {
  font-size: .65rem; font-weight: 600;
  padding: .15rem .4rem; border-radius: 4px;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
}
.badge.ok { background: rgba(40, 130, 80, .85); }
.badge.model { background: rgba(180, 110, 40, .85); }
.badge.final { background: rgba(80, 100, 200, .85); }
.card-name {
  padding: .6rem .8rem;
  font-size: .85rem;
  word-break: break-all;
  color: #c8c8ce;
}

/* Detail page */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.col { display: flex; flex-direction: column; gap: .6rem; }
.col video {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 8px;
  border: 1px solid #1f1f25;
}
.placeholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #16161b;
  border: 1px dashed #2a2a32;
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #555; font-size: .9rem;
  text-align: center;
  padding: 1rem;
  gap: .5rem;
}
.placeholder p { margin: 0; }
.dropzone-hint {
  font-size: .75rem;
  color: #6a6a72;
}

/* Dropzone */
.dropzone {
  position: relative;
  border-radius: 10px;
  transition: outline .12s ease, transform .12s ease;
  outline: 2px solid transparent;
  outline-offset: 4px;
}
.dropzone-overlay {
  position: absolute; inset: 0;
  background: rgba(59, 130, 246, 0.18);
  border: 2px dashed #3b82f6;
  border-radius: 8px;
  display: none;
  align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.dropzone-overlay p {
  background: #3b82f6; color: white;
  padding: .5rem 1rem; border-radius: 6px;
  font-weight: 600; font-size: .95rem;
  margin: 0;
}
.dropzone.dragover .dropzone-overlay { display: flex; }
.dropzone.dragover { transform: scale(1.01); }

@media (max-width: 900px) {
  .three-col { grid-template-columns: 1fr; }
  .col video, .placeholder { max-width: 360px; margin: 0 auto; }
}

/* Buttons */
.upload-btn, .btn-primary, .btn-secondary {
  display: inline-block; cursor: pointer;
  padding: .55rem 1rem;
  border-radius: 6px;
  font-size: .88rem; font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
  text-align: center;
}
.upload-btn {
  background: #2a2a32; color: #e8e8ea;
}
.upload-btn:hover { background: #353542; }
.btn-primary {
  background: #3b82f6; color: white; border: none;
}
.btn-primary:hover:not(:disabled) { background: #2563eb; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-secondary {
  background: transparent; color: #b8b8bc; border-color: #2a2a32;
  font-size: .8rem;
}
.btn-secondary:hover { background: #1c1c22; color: #e8e8ea; }
.dl {
  display: inline-block;
  font-size: .85rem;
  color: #88a8ff;
  margin-top: .3rem;
}
.dl:hover { text-decoration: underline; }

/* Final section */
.final-section {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  align-items: start;
}
.final-controls { display: flex; flex-direction: column; gap: 1rem; }
.final-player { display: flex; flex-direction: column; gap: .5rem; }
.final-player video, .final-player .placeholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  background: #000;
}

@media (max-width: 800px) {
  .final-section { grid-template-columns: 1fr; }
  .final-player { max-width: 360px; margin: 0 auto; }
}

/* Status */
.status {
  font-size: .85rem;
  padding: .4rem .7rem;
  border-radius: 6px;
  display: inline-block;
}
.status.loading { background: rgba(180, 130, 40, .15); color: #f0b060; }
.status.ok { background: rgba(40, 130, 80, .2); color: #6cd49a; }
.status.error { background: rgba(200, 60, 60, .2); color: #ff8c8c; }

/* Empty */
.empty {
  text-align: center;
  padding: 4rem 1rem;
  color: #7a7a82;
}

/* ===== Auth ===== */
.auth-card {
  max-width: 380px;
  margin: 4rem auto 0;
  background: #16161b;
  border: 1px solid #1f1f25;
  border-radius: 12px;
  padding: 2rem 1.75rem;
}
.auth-card h1 { font-size: 1.4rem; margin-bottom: 1rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form label {
  display: flex; flex-direction: column; gap: .35rem;
  font-size: .85rem; color: #b8b8bc;
}
.auth-form input {
  background: #0f0f12;
  border: 1px solid #26262c;
  color: #e8e8ea;
  padding: .6rem .75rem;
  border-radius: 7px;
  font-size: .95rem;
  font-family: inherit;
}
.auth-form input:focus { outline: 2px solid #4a90e2; border-color: transparent; }
.auth-form button { margin-top: .5rem; }

.flash {
  padding: .65rem .85rem;
  border-radius: 7px;
  margin-bottom: 1rem;
  font-size: .9rem;
}
.flash-error { background: #3a1c1f; color: #ff8a8a; border: 1px solid #5a2a30; }
.flash-ok    { background: #1c3a24; color: #8aff9c; border: 1px solid #2a5a36; }

.user-pill {
  font-size: .85rem; color: #b8b8bc;
  padding: .35rem .65rem; border-radius: 6px;
  background: #1c1c22;
}
.logout-form { margin: 0; display: inline; }
.link-btn {
  background: none; border: 0; color: #9a9aa0;
  cursor: pointer; padding: .4rem .7rem; border-radius: 6px;
  font-size: .9rem; font-family: inherit;
}
.link-btn:hover { background: #1c1c22; color: #e8e8ea; }

/* ===== Admin ===== */
.admin-section { margin: 2rem 0; }
.admin-section h2 { color: #e8e8ea; margin-bottom: 1rem; }
.users-table {
  width: 100%; border-collapse: collapse;
  background: #16161b; border: 1px solid #1f1f25; border-radius: 10px;
  overflow: hidden;
}
.users-table th, .users-table td {
  padding: .65rem .85rem; text-align: left;
  border-bottom: 1px solid #1f1f25;
}
.users-table th { color: #b8b8bc; font-weight: 500; font-size: .85rem; background: #1a1a20; }
.users-table tr:last-child td { border-bottom: 0; }
.users-table form { margin: 0; }

.inline-form {
  display: flex; gap: .75rem; align-items: center;
  background: #16161b; border: 1px solid #1f1f25; border-radius: 10px;
  padding: 1rem;
}
.inline-form input[type="text"] {
  background: #0f0f12; border: 1px solid #26262c; color: #e8e8ea;
  padding: .55rem .7rem; border-radius: 7px; font-family: inherit; flex: 1;
}
.inline-check { display: flex; gap: .35rem; align-items: center; color: #b8b8bc; font-size: .9rem; }
.btn-secondary.danger { color: #ff8a8a; border-color: #5a2a30; }
.btn-secondary.danger:hover { background: #3a1c1f; }

/* ===== Chat-cut panel ===== */
.chat-panel {
  margin-top: 1rem;
  background: #14141a;
  border: 1px solid #1f1f25;
  border-radius: 10px;
  padding: .9rem 1rem;
}
.chat-panel h3 {
  font-size: .95rem; color: #e8e8ea;
  margin-bottom: .25rem;
}
.recut-form {
  display: flex; flex-direction: column; gap: .5rem;
  margin-top: .65rem;
}
.recut-form textarea {
  background: #0f0f12; border: 1px solid #26262c; color: #e8e8ea;
  padding: .55rem .7rem; border-radius: 7px;
  font-family: inherit; font-size: .9rem; resize: vertical;
}
.recut-form button { align-self: flex-start; }

.chat-history {
  margin-top: .9rem;
  display: flex; flex-direction: column; gap: .65rem;
  max-height: 320px; overflow-y: auto;
}
.chat-entry {
  display: flex; flex-direction: column; gap: .35rem;
}
.chat-msg {
  padding: .5rem .7rem;
  border-radius: 7px;
  font-size: .88rem;
  line-height: 1.4;
}
.chat-msg.user {
  background: #1c2a3a;
  color: #b8d8ff;
  align-self: flex-end;
  max-width: 85%;
}
.chat-msg.claude {
  background: #1a1a20;
  color: #d8d8dc;
  border: 1px solid #26262c;
  max-width: 95%;
}
.chat-msg.claude p { margin: .25rem 0 0; }
.chat-meta {
  font-size: .75rem;
  color: #9a9aa0;
  font-family: ui-monospace, monospace;
}

/* ===== Upload zone ===== */
.upload-zone {
  position: relative;
  border: 2px dashed #2a2a32;
  border-radius: 12px;
  background: #14141a;
  margin: 0 0 1.5rem;
  padding: 1.4rem 1.5rem;
  transition: border-color .15s, background .15s;
}
.upload-zone.dragover {
  border-color: #4a90e2;
  background: #182030;
}
.upload-content {
  display: flex; flex-direction: column; gap: .35rem; align-items: flex-start;
}
.upload-title { margin: 0; font-weight: 600; color: #e8e8ea; }
.upload-hint  { margin: 0; color: #7a7a82; font-size: .9rem; }
.upload-btn-label {
  display: inline-block; cursor: pointer;
  margin-top: .65rem;
}
.upload-overlay {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(74, 144, 226, .12);
  border-radius: 10px; pointer-events: none;
  font-weight: 600; color: #b8d8ff;
}
.upload-zone.dragover .upload-overlay { display: flex; }

.upload-progress {
  display: flex; flex-direction: column; gap: .35rem;
  margin-top: .8rem;
}
.upload-progress:empty { margin-top: 0; }
.upload-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem;
  padding: .35rem .55rem;
  border-radius: 6px;
  background: #1a1a20;
  border: 1px solid #26262c;
}
.upload-line.loading .upload-line-status { color: #b8d8ff; }
.upload-line.ok      { border-color: #2a5a36; }
.upload-line.ok .upload-line-status { color: #8aff9c; }
.upload-line.error   { border-color: #5a2a30; }
.upload-line.error .upload-line-status { color: #ff8a8a; }
.upload-line-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%;
  font-family: ui-monospace, monospace; color: #d8d8dc;
}