/* ===== Top G Files — shared styles (plain CSS; Tailwind CDN can't @apply external files) ===== */

::selection { background: #4FD1FF; color: #0A0E14; }

/* ---------- Login hero animation ---------- */
.brand-title { font-family: 'Inter', sans-serif; }

.reveal-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  animation: revealUp .7s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--d, 0s);
}
.reveal-fade {
  opacity: 0;
  transform: translateY(8px);
  animation: revealUp .6s ease forwards;
  animation-delay: var(--d, 0s);
}
@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}

.anim-spin-slow { animation: spinSlow 9s linear infinite; }
@keyframes spinSlow { to { transform: rotate(405deg); } }

.scanline {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(to bottom, transparent 0%, rgba(79,209,255,.06) 50%, transparent 100%);
  height: 140px;
  animation: scan 6s ease-in-out infinite;
}
@keyframes scan {
  0% { transform: translateY(-160px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 0; }
}

.stat-chip {
  font-size: 11px; color: #94A3B8; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; padding: .75rem .25rem;
  letter-spacing: .02em;
}

.bg-grid-mobile {
  background-image: linear-gradient(rgba(79,209,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(79,209,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---------- Auth card ---------- */
.card-shell {
  border-radius: 1rem;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.15);
  animation: cardIn .55s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: .15s;
}
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }

.mode-btn { color: #64748B; }
.dark .mode-btn { color: #94A3B8; }
.mode-btn.active { background: #fff; color: #0090C7; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.dark .mode-btn.active { background: #1A2029; color: #7FE3FF; }

.field-label { display: block; font-size: .75rem; font-weight: 500; color: #64748B; margin-bottom: .375rem; }
.dark .field-label { color: #94A3B8; }
.field-input {
  width: 100%; border-radius: .5rem; border: 1px solid #E2E8F0; background: #F8FAFC;
  padding: .625rem .875rem; font-size: .875rem; outline: none; transition: all .15s;
}
.field-input::placeholder { color: #94A3B8; }
.field-input:focus { border-color: #4FD1FF; box-shadow: 0 0 0 4px rgba(79,209,255,.1); }
.dark .field-input { border-color: #232935; background: #0D1219; color: #E5E9F0; }

.submit-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .5rem; background-image: linear-gradient(to right, #12B4E8, #6D5AE0);
  color: #fff; font-weight: 600; font-size: .875rem; padding: .75rem 0;
  box-shadow: 0 10px 20px -6px rgba(18,180,232,.35); transition: transform .15s; border: none; cursor: pointer;
}
.submit-btn:hover { transform: scale(1.01); }
.submit-btn:active { transform: scale(.99); }
.submit-btn:disabled { opacity: .6; pointer-events: none; }

/* ================= APP SHELL ================= */

.rail-link {
  display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: .75rem;
  font-size: .875rem; font-weight: 500; color: #64748B; transition: colors .15s;
}
.rail-link:hover { background: #F1F5F9; color: #0F172A; }
.dark .rail-link { color: #94A3B8; }
.dark .rail-link:hover { background: #12161F; color: #fff; }
.rail-link.active { background: rgba(79,209,255,.1); color: #0090C7; }
.dark .rail-link.active { color: #7FE3FF; }

.toolbar-btn {
  display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600;
  padding: .5rem .75rem; border-radius: .5rem; border: 1px solid #E2E8F0; background: #fff;
  transition: colors .15s, border-color .15s; cursor: pointer;
}
.toolbar-btn:hover { border-color: rgba(79,209,255,.6); color: #0090C7; }
.dark .toolbar-btn { border-color: #232935; background: #12161F; color: #E5E9F0; }
.dark .toolbar-btn:hover { color: #7FE3FF; }
.toolbar-btn:disabled { opacity: .4; pointer-events: none; }
.toolbar-btn.primary {
  background-image: linear-gradient(to right, #12B4E8, #6D5AE0); color: #fff; border-color: transparent;
}
.toolbar-btn.primary:hover { filter: brightness(1.1); color: #fff; }

.crumb { font-size: .875rem; color: #64748B; cursor: pointer; transition: colors .15s; }
.crumb:hover { color: #0090C7; }
.dark .crumb { color: #94A3B8; }
.dark .crumb:hover { color: #7FE3FF; }
.crumb.current { color: #0F172A; font-weight: 600; cursor: default; }
.dark .crumb.current { color: #fff; }

/* item card (grid view) */
.item-card {
  position: relative; border-radius: .75rem; border: 1px solid transparent; background: #fff;
  padding: .75rem; cursor: pointer; transition: all .15s; user-select: none;
}
.dark .item-card { background: rgba(18,22,31,.6); }
.item-card:hover { border-color: rgba(79,209,255,.4); }
.item-card.selected { border-color: #4FD1FF; background: rgba(79,209,255,.05); }
.dark .item-card.selected { background: rgba(79,209,255,.1); }
.item-thumb {
  width: 100%; aspect-ratio: 1/1; border-radius: .5rem; overflow: hidden; background: #F1F5F9;
  display: grid; place-items: center; margin-bottom: .5rem;
}
.dark .item-thumb { background: #0D1219; }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.check-dot {
  position: absolute; top: .5rem; left: .5rem; width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  border: 2px solid rgba(255,255,255,.8); background: rgba(255,255,255,.7);
  opacity: 0; transition: opacity .15s; display: grid; place-items: center;
}
.dark .check-dot { border-color: #12161F; background: rgba(18,22,31,.7); }
.item-card:hover .check-dot, .selection-mode .check-dot { opacity: 1; }
.item-card.selected .check-dot, .check-dot.checked { opacity: 1; background: #12B4E8; border-color: #12B4E8; }

/* row (list view) */
.item-row {
  display: grid; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: .5rem;
  cursor: pointer; border: 1px solid transparent; transition: colors .15s; user-select: none;
  grid-template-columns: 28px 1fr 110px 160px 40px;
}
.item-row:hover { background: #F8FAFC; }
.dark .item-row:hover { background: rgba(18,22,31,.7); }
.item-row.selected { background: rgba(79,209,255,.05); border-color: rgba(79,209,255,.3); }

/* context menu */
.ctx-menu {
  position: fixed; z-index: 50; min-width: 190px; border-radius: .75rem; border: 1px solid #E2E8F0;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px); box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  padding: .375rem 0; font-size: .875rem;
}
.dark .ctx-menu { border-color: #232935; background: rgba(18,22,31,.97); }
.ctx-item { display: flex; align-items: center; gap: .625rem; padding: .5rem .875rem; cursor: pointer; color: #1E293B; }
.ctx-item:hover { background: #F1F5F9; }
.dark .ctx-item { color: #E2E8F0; }
.dark .ctx-item:hover { background: #1A2029; }
.ctx-item.danger { color: #F43F5E; }
.ctx-item.danger:hover { background: rgba(244,63,94,.1); }
.ctx-sep { margin: .375rem 0; border-top: 1px solid #E2E8F0; }
.dark .ctx-sep { border-color: #232935; }

/* dropzone overlay */
#dropOverlay {
  position: fixed; inset: 0; z-index: 40; background: rgba(79,209,255,.1); backdrop-filter: blur(2px);
  border: 4px dashed #4FD1FF; display: grid; place-items: center; pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
#dropOverlay.active { opacity: 1; }

/* upload tray */
#uploadTray {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 40; width: 22rem; border-radius: 1rem;
  border: 1px solid #E2E8F0; background: #fff; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  overflow: hidden; display: none; max-height: 60vh;
}
.dark #uploadTray { border-color: #232935; background: #12161F; }
.upload-row { padding: .75rem 1rem; border-bottom: 1px solid #F1F5F9; }
.dark .upload-row { border-color: #1A2029; }
.upload-row:last-child { border-bottom: none; }
.upload-stats { display: flex; align-items: center; justify-content: space-between; margin-top: .3rem; }
.upload-stats span { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: #94A3B8; }
.upload-stats .eta  { color: #4FD1FF; }
.upload-stats .spd  { color: #8B7CF6; }
.progress-track { height: .375rem; border-radius: 9999px; background: #F1F5F9; overflow: hidden; margin-top: .3rem; }
.dark .progress-track { background: #0D1219; }
.progress-bar { height: 100%; background-image: linear-gradient(to right, #4FD1FF, #8B7CF6); transition: width .2s; width: 0%; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 0 1rem; }
.modal-box {
  width: 100%; max-width: 24rem; border-radius: 1rem; border: 1px solid #E2E8F0; background: #fff;
  padding: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); animation: cardIn .2s ease forwards;
}
.dark .modal-box { border-color: #232935; background: #12161F; }

/* toast */
.toast {
  position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 50; display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem; font-weight: 500;
  background: #0D1219; color: #fff; box-shadow: 0 20px 40px -12px rgba(0,0,0,.35);
  animation: toastIn .2s ease forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* scrollbars */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 9999px; }
.dark .thin-scroll::-webkit-scrollbar-thumb { background: #232935; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

.storage-ring { transition: stroke-dashoffset .6s ease; }

.spin { animation: spin2 .8s linear infinite; }
@keyframes spin2 { to { transform: rotate(360deg); } }

/* empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem 0; color: #94A3B8; }

.shake { animation: shake .4s ease; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* drag ghost for move */
.dragging-item { opacity: .4; }
.drop-target { outline: 2px dashed #4FD1FF; outline-offset: -2px; background: rgba(79,209,255,.08); }