html, body, * {
  font-style: normal !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Variable', 'Helvetica Neue', Arial, sans-serif !important;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;
  background:#1e1e1e;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2rem 1rem;
}

.card{
  background:#2a2a2a;
  border-radius:16px;
  padding:2rem 1.75rem 1.5rem;
  width:100%;
  max-width:340px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0;
  margin:auto;
}
.logo-row{display:flex;align-items:center;gap:8px;margin-bottom:1.25rem}
.logo-text{font-size:15px;font-weight:500;color:#e8e8e8;letter-spacing:-0.2px;font-style:normal}
.logo-text .drive{color:#4A90D9}
.divider{width:100%;border:none;border-top:0.5px solid #3a3a3a;margin-bottom:1.75rem}
.file-icon-wrap{width:68px;height:68px;background:#333;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.file-name{font-size:15px;font-weight:500;color:#e8e8e8;margin-bottom:4px;letter-spacing:-0.1px;word-break:break-all;font-style:normal}
.file-meta{font-size:13px;color:#888;margin-bottom:1.5rem;font-style:normal}
.download-btn{
  width:100%;
  background:#4A90D9;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:12px 20px;
  font-size:14px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background 0.15s;
  letter-spacing:0.1px;
  position:relative;
  overflow:hidden;
  margin-bottom:1.25rem;
  min-height:44px;
  font-style:normal;
}
.download-btn:hover:not(:disabled){background:#3a7fc4}
.download-btn:disabled{cursor:default;opacity:0.85}
.btn-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;transition:opacity 0.2s}
.progress-bar{position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,0.5);width:0%;transition:width 0.1s linear;border-radius:0 0 8px 8px}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.started-text{color:#fff}
.hosted-link{font-size:12px;color:#555;font-style:normal}
.hosted-link a{color:#4A90D9;text-decoration:none}
.hosted-link a:hover{text-decoration:underline}
.secured-text{font-size:11px;color:#666;font-style:italic;margin-top:4px;display:flex;align-items:center;gap:4px}
.admin-link{font-size:11px;color:#444;margin-top:8px;cursor:pointer;text-decoration:none;font-style:normal}
.admin-link:hover{color:#4A90D9}

.admin-card{
  background:#2a2a2a;
  border-radius:16px;
  padding:2rem 1.75rem;
  width:100%;
  max-width:600px;
  margin:auto;
}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.admin-title{font-size:18px;font-weight:500;color:#e8e8e8;font-style:normal}
.logout-btn{background:transparent;border:1px solid #444;color:#888;padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;font-family:inherit;font-style:normal}
.logout-btn:hover{border-color:#666;color:#aaa}

.upload-zone{
  border:2px dashed #444;
  border-radius:12px;
  padding:3rem 2rem;
  text-align:center;
  cursor:pointer;
  transition:border-color 0.2s,background 0.2s;
  margin-bottom:2rem;
  background:#252525;
}
.upload-zone:hover{border-color:#4A90D9;background:#282828}
.upload-zone.dragover{border-color:#4A90D9;background:#2d2d2d}
.upload-icon{width:48px;height:48px;margin:0 auto 12px;opacity:0.6}
.upload-text{font-size:14px;color:#888;margin-bottom:4px;font-style:normal}
.upload-hint{font-size:12px;color:#666;font-style:normal}
#fileInputAdmin{display:none}

.file-list{margin-top:2rem}
.file-list-title{font-size:15px;font-weight:500;color:#e8e8e8;margin-bottom:12px;font-style:normal}
.file-item{
  background:#252525;
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:10px;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
}
.file-info{flex:1;min-width:160px;}
.file-info-name{font-size:14px;font-weight:500;color:#e8eaed;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal}
.file-info-meta{font-size:12px;color:#9aa0a6;font-style:normal}
.file-actions{display:flex;gap:4px;flex-shrink:0;flex-wrap:wrap;}
.action-btn{
  background:transparent;
  border:1px solid transparent;
  color:#9aa0a6;
  padding:6px 14px;
  border-radius:16px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:all 0.15s ease;
  font-style:normal;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.action-btn:hover{background:rgba(255,255,255,0.06);color:#e8eaed}
.action-btn.delete:hover{background:rgba(234,67,53,0.1);color:#ea4335}

.login-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 22px 70px rgba(0,0,0,0.24);
  backdrop-filter:blur(20px);
  border-radius:24px;
  margin:auto;
  padding:2.25rem 2rem;
  width:100%;
  max-width:380px;
  text-align:left;
}
.login-title{font-size:22px;font-weight:600;color:#fff;margin-bottom:0.35rem;font-style:normal}
.login-subtitle{font-size:13px;color:#a9b5d1;margin-bottom:1.8rem;line-height:1.5}
.input-group{margin-bottom:18px;text-align:left}
.input-label{font-size:12px;color:#a1a8c2;margin-bottom:8px;display:block;font-style:normal}
.input-field{
  width:100%;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  padding:14px 14px;
  border-radius:12px;
  font-size:14px;
  font-family:inherit;
  transition:border-color 0.15s,box-shadow 0.15s;
  font-style:normal;
}
.input-field:focus{outline:none;border-color:rgba(74,144,217,0.9);box-shadow:0 0 0 4px rgba(66,144,244,0.14)}
.login-btn{
  width:100%;
  background:linear-gradient(135deg,#4A90D9,#2f78d5);
  color:#fff;
  border:none;
  border-radius:14px;
  padding:14px 20px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:transform 0.15s,box-shadow 0.15s,background 0.15s;
  font-style:normal;
}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(74,144,217,0.22)}
.back-link{display:block;font-size:13px;color:#a1a8c2;margin-top:18px;text-align:center;cursor:pointer;font-style:normal}
.back-link:hover{color:#d6e9ff}

.empty-state{text-align:center;padding:2rem 0;color:#666;font-size:14px;font-style:normal}

.toast{
  position:fixed;
  top:20px;
  right:20px;
  background:#333;
  color:#e8e8e8;
  padding:12px 20px;
  border-radius:8px;
  border:1px solid #444;
  font-size:14px;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  z-index:1000;
  animation:slideIn 0.3s ease;
  font-style:normal;
}
@keyframes slideIn{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}

.password-strength {
  margin-top: 4px;
  height: 4px;
  background: #333;
  border-radius: 2px;
  overflow: hidden;
}
.admin-actions{display:flex;gap:8px;align-items:center}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:12px;margin-bottom:1.5rem}
.panel-card{background:#252525;border:1px solid #383838;border-radius:14px;padding:14px}
.panel-label{font-size:12px;color:#888;margin-bottom:8px}
.panel-value{font-size:20px;font-weight:600;color:#fff}
.activity-section{margin-top:2rem}
.activity-log{background:#1f1f1f;border:1px solid #333;border-radius:12px;padding:14px;max-height:220px;overflow-y:auto}
.activity-item{font-size:12px;color:#ccc;line-height:1.5;border-bottom:1px solid #2b2b2b;padding:8px 0}
.activity-item:last-child{border-bottom:none}
.activity-meta{display:block;font-size:11px;color:#999;margin-top:6px;line-height:1.4}
.preview-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;z-index:10000}
.preview-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7)}
.preview-content{position:relative;background:#1f1f1f;border-radius:18px;padding:20px;max-width:90vw;max-height:90vh;overflow:auto;z-index:1;box-shadow:0 24px 72px rgba(0,0,0,0.35)}
#previewInner{min-height:200px;color:#fff}
body.admin-theme-light #adminView.admin-card,
body.admin-theme-light #adminView .upload-zone,
body.admin-theme-light #adminView .file-item,
body.admin-theme-light #previewModal .preview-content{
  background:#ffffff;
  border-color:#e0e0e0;
}
body.admin-theme-light #adminView .upload-zone{background:#f8f9fb;border:1px dashed #d5d7df}
body.admin-theme-light #adminView .upload-zone:hover{background:#eef0f4;border-color:#aab3c3}
body.admin-theme-light #adminView .file-info-name{color:#111}
body.admin-theme-light #adminView .file-info-meta,
body.admin-theme-light #adminView .file-list-title,
body.admin-theme-light #adminView .file-list-header,
body.admin-theme-light #adminView .breadcrumbs,
body.admin-theme-light #adminView .upload-text,
body.admin-theme-light #adminView .upload-hint,
body.admin-theme-light #adminView .input-label,
body.admin-theme-light #adminView .hosted-link,
body.admin-theme-light #adminView .admin-title,
body.admin-theme-light #adminView .activity-item{
  color:#444;
}
body.admin-theme-light #adminView .input-field{background:#fff;color:#111;border:1px solid #ccc}
body.admin-theme-light #adminView .action-btn,
body.admin-theme-light #adminView .logout-btn,
body.admin-theme-light #adminView .download-btn{
  color:#111;
  border-color:#ccc;
  background:#f5f6fa;
}
body.admin-theme-light #adminView .action-btn:hover,
body.admin-theme-light #adminView .logout-btn:hover,
body.admin-theme-light #adminView .download-btn:hover{
  background:#e8eaef;
}
body.admin-theme-light #adminView.admin-card,
body.admin-theme-light #adminView .login-card{box-shadow:0 18px 40px rgba(0,0,0,0.08)}
body.admin-theme-light #previewModal .preview-content{box-shadow:0 18px 40px rgba(0,0,0,0.08)}
.file-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.file-list-controls{display:flex;gap:8px}
#searchInput{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;width:200px}
.breadcrumbs{font-size:12px;color:#9aa3b1;margin-bottom:10px}
.expired{opacity:0.6}
.file-checkbox{accent-color:#4A90D9;width:16px;height:16px;flex-shrink:0;cursor:pointer;}
/* file-item-main: top row (checkbox + thumb + info) */
.file-item-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.glass-bg {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(80px) brightness(0.65);
  z-index: -1;
  opacity: 0;
  transition: opacity 1s ease;
  transform: scale(1.1);
}

/* Upload Progress UI */
.upload-progress-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 320px;
  background: #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  border: 1px solid #3a3a3a;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-style: normal;
}
.upload-progress-header {
  background: #333;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #444;
}
.upload-progress-title {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.upload-progress-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Hide scrollbar for swipable batch bar */
.scrollable-batch::-webkit-scrollbar {
  display: none;
}
.scrollable-batch {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media (max-width: 480px) {
  .batch-text { display: none; }
  .batch-btn { padding: 6px 6px !important; }
}

.progress-file-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.progress-file-name {
  color: #e8e8e8;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.progress-speed {
  color: #4A90D9;
  font-size: 12px;
  font-weight: 500;
}
.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: #444;
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: #4A90D9;
  width: 0%;
  transition: width 0.2s ease;
}
.progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #888;
}

body.admin-theme-light .upload-progress-container {
  background: #fff;
  border-color: #e0e0e0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
body.admin-theme-light .upload-progress-header {
  background: #f5f6fa;
  border-bottom-color: #e0e0e0;
}
body.admin-theme-light .upload-progress-title {
  color: #111;
}
body.admin-theme-light .progress-file-name {
  color: #444;
}
body.admin-theme-light .progress-bar-bg {
  background: #e0e0e0;
}

/* Floating Batch Action Bar */
.floating-batch-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(42, 42, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  padding: 12px 20px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 1000;
}
.batch-count {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.batch-actions {
  display: flex;
  gap: 10px;
}
.batch-btn-zip {
  background: #4A90D9 !important;
  color: #fff !important;
  border: none !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.batch-btn-clear {
  background: transparent !important;
  color: #aaa !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.batch-btn-clear:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; }

/* ── Mobile Responsive ───────────────────────────────────────── */
@media (max-width: 600px) {
  body { 
    padding: 1rem 0.5rem; 
  }

  /* Force cards to center vertically within the body column, horizontal stays center via body */
  .card, .login-card, .admin-card, .password-change-card {
    margin: auto;
  }

  /* Download page card */
  .card {
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: 14px;
    width: 90%;
  }

  /* Admin card */
  .admin-card {
    padding: 1.25rem 1rem;
    border-radius: 12px;
    width: 95%;
  }

  /* Dashboard stat grid — 2 cols on mobile */
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .panel-card { padding: 12px 10px; }
  .panel-value { font-size: 18px; }

  /* Admin header — stack on mobile */
  .admin-header { flex-wrap: wrap; gap: 10px; }
  .admin-actions { flex-wrap: wrap; gap: 6px; }

  /* File list header — stack vertically */
  .file-list-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .file-list-controls { width: 100%; flex-wrap: wrap; gap: 6px; }
  .file-list-controls input[type="text"] { flex: 1; min-width: 0; width: auto; }
  .file-list-controls button { flex-shrink: 0; }

  /* File items — stack info + actions on mobile */
  .file-item { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .file-info { min-width: 0; flex: 1 1 180px; }
  .file-info-name { font-size: 13px; }
  .file-info-meta { font-size: 11px; }
  .file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
  }
  .action-btn { font-size: 11px; padding: 5px 9px; }

  /* Login card */
  .login-card { padding: 1.75rem 1.25rem; border-radius: 18px; }

  /* Upload zone */
  .upload-zone { padding: 2rem 1.25rem; margin-bottom: 1.5rem; }

  /* Activity log */
  .activity-log { max-height: 160px; }
  .activity-item { font-size: 11px; }

  /* Preview modal */
  .preview-content { padding: 14px; border-radius: 12px; max-width: 95vw; }

  /* Bundle view — keep file info + download button on one row (never wrap) */
  #bundleView { max-width: 96vw !important; padding: 1.5rem 1rem 1.25rem; }
  #bundleView .file-item { flex-wrap: nowrap; align-items: center; padding: 10px 12px; gap: 10px; }
  #bundleView .file-info { flex: 1; min-width: 0; }
  #bundleView .file-info-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  #bundleView .file-info-meta { font-size: 11px; }
  #bundleView .file-actions { width: auto; margin-top: 0; flex-shrink: 0; }
  #bundleView .action-btn { white-space: nowrap; }
}

@media (max-width: 400px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-value { font-size: 16px; }
}

/* ─── Edit File Modal ────────────────────────────────────────── */
.edit-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.edit-modal {
  background: #252525;
  border: 1px solid #3a3a3a;
  border-radius: 16px;
  padding: 1.75rem;
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 1.1rem;
  max-height: 90vh; overflow-y: auto;
}
.edit-modal-title {
  font-size: 15px; font-weight: 600; color: #e8e8e8;
  margin-bottom: 0.25rem;
}
.edit-modal-filename {
  font-size: 12px; color: #666; word-break: break-all;
  margin-top: -0.75rem;
}
.edit-modal .field-group { display: flex; flex-direction: column; gap: 6px; }
.edit-modal .field-label { font-size: 12px; color: #888; font-weight: 500; }
.edit-modal .field-input {
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 8px;
  color: #e8e8e8; font-size: 14px; padding: 9px 12px;
  font-family: inherit; width: 100%; outline: none; transition: border 0.15s;
}
.edit-modal .field-input:focus { border-color: #4A90D9; }
.edit-modal .field-input::placeholder { color: #555; }
.edit-modal select.field-input { cursor: pointer; }
.edit-modal .field-row { display: flex; gap: 10px; }
.edit-modal .field-row .field-group { flex: 1; }
.edit-modal .field-hint { font-size: 11px; color: #555; margin-top: -2px; }
.edit-modal .field-error { font-size: 11px; color: #e25c5c; margin-top: -2px; }
.edit-modal-actions { display: flex; gap: 10px; margin-top: 0.5rem; }
.edit-modal-actions .save-btn {
  flex: 1; background: #4A90D9; color: #fff; border: none;
  border-radius: 8px; padding: 11px; font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: background 0.15s;
}
.edit-modal-actions .save-btn:hover { background: #3a7fc4; }
.edit-modal-actions .cancel-btn {
  background: transparent; color: #888; border: 1px solid #3a3a3a;
  border-radius: 8px; padding: 11px 18px; font-size: 14px;
  font-family: inherit; cursor: pointer; transition: all 0.15s;
}
.edit-modal-actions .cancel-btn:hover { border-color: #555; color: #e8e8e8; }
.link-preview-row {
  display: flex; align-items: center; gap: 8px;
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 8px;
  padding: 9px 12px; font-size: 12px; color: #4A90D9; word-break: break-all;
}
.link-copy-btn {
  flex-shrink: 0; background: #333; border: none; border-radius: 6px;
  color: #aaa; padding: 4px 8px; font-size: 11px; cursor: pointer;
}
.link-copy-btn:hover { background: #444; color: #fff; }

/* ─── QR Code Modal ──────────────────────────────────────────── */
.qr-modal {
  background: #252525; border: 1px solid #3a3a3a; border-radius: 16px;
  padding: 1.75rem; text-align: center; max-width: 300px; width: 100%;
}
.qr-modal h3 { font-size: 14px; color: #e8e8e8; margin-bottom: 1rem; }
.qr-modal canvas { border-radius: 8px; }
.qr-modal .qr-url { font-size: 11px; color: #555; margin-top: 0.75rem; word-break: break-all; }

/* ─── Storage Bar ────────────────────────────────────────────── */
.storage-bar-wrap { margin-top: 0.5rem; }
.storage-bar-bg {
  background: #333; border-radius: 100px; height: 6px; overflow: hidden;
}
.storage-bar-fill {
  height: 100%; background: #4A90D9; border-radius: 100px;
  transition: width 0.4s ease;
}
.storage-bar-label { font-size: 11px; color: #666; margin-top: 5px; }

/* ─── User Auth Overlay (Registration / Login) ───────────────── */
.user-auth-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.user-auth-card {
  background: #252525; border: 1px solid #3a3a3a; border-radius: 20px;
  padding: 2rem 1.75rem; width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 1rem;
}
.user-auth-title { font-size: 17px; font-weight: 600; color: #e8e8e8; }
.user-auth-subtitle { font-size: 13px; color: #666; margin-top: -0.5rem; }
.user-auth-card .input-group { display: flex; flex-direction: column; gap: 6px; }
.user-auth-card .input-label { font-size: 12px; color: #888; font-weight: 500; }
.user-auth-card .input-field {
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 8px;
  color: #e8e8e8; font-size: 14px; padding: 10px 12px;
  font-family: inherit; width: 100%; outline: none; transition: border 0.15s;
}
.user-auth-card .input-field:focus { border-color: #4A90D9; }
.user-auth-card .input-field.error { border-color: #e25c5c; }
.user-auth-card .input-field.success { border-color: #52b788; }
.field-validation-msg { font-size: 11px; margin-top: -2px; }
.field-validation-msg.error { color: #e25c5c; }
.field-validation-msg.success { color: #52b788; }
.user-auth-card .login-btn {
  width: 100%; background: #4A90D9; color: #fff; border: none;
  border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: background 0.15s;
}
.user-auth-card .login-btn:hover { background: #3a7fc4; }
.auth-switch-text { font-size: 12px; color: #555; text-align: center; }
.auth-switch-text a { color: #4A90D9; cursor: pointer; text-decoration: none; }
.auth-switch-text a:hover { text-decoration: underline; }

/* ─── Storage Tier Selection ──────────────────────────────────── */
.storage-tier-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 0.25rem;
}
.storage-tier-card {
  background: #1e1e1e; border: 2px solid #3a3a3a; border-radius: 12px;
  padding: 1rem; cursor: pointer; text-align: center;
  transition: all 0.2s; position: relative; overflow: hidden;
}
.storage-tier-card:hover { border-color: #4A90D9; }
.storage-tier-card.selected { border-color: #4A90D9; background: #1a2a3a; }
.storage-tier-card.premium { opacity: 0.75; }
.storage-tier-card.premium:hover { opacity: 1; border-color: #f0a500; }
.storage-tier-size { font-size: 18px; font-weight: 700; color: #e8e8e8; }
.storage-tier-label { font-size: 11px; color: #666; margin-top: 4px; }
.storage-tier-badge {
  display: inline-block; background: #f0a500; color: #1e1e1e;
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 100px;
  margin-top: 6px; letter-spacing: 0.5px; text-transform: uppercase;
}
.storage-tier-badge.free { background: #52b788; }

/* ─── WhatsApp Upgrade Popup ─────────────────────────────────── */
.whatsapp-popup {
  background: #252525; border: 1px solid #3a3a3a; border-radius: 16px;
  padding: 1.75rem; max-width: 340px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.whatsapp-popup h3 { font-size: 16px; font-weight: 600; color: #e8e8e8; }
.whatsapp-popup p { font-size: 13px; color: #888; line-height: 1.5; }
.whatsapp-btn {
  display: flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff; border: none; border-radius: 8px;
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none;
  transition: background 0.15s;
}
.whatsapp-btn:hover { background: #1ebe5d; }

/* ─── User Dashboard ─────────────────────────────────────────── */
.user-dashboard {
  background: #2a2a2a; border-radius: 16px; padding: 2rem 1.75rem;
  width: 100%; max-width: 600px; margin: auto;
}
.user-dashboard-logo {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.user-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem;
}
.user-greeting { font-size: 15px; font-weight: 500; color: #e8e8e8; }
.user-greeting span { color: #4A90D9; }

/* ─── Admin Users Tab ────────────────────────────────────────── */
.users-table { width: 100%; border-collapse: collapse; }
.users-table th {
  font-size: 11px; color: #666; text-align: left; padding: 0 0 8px 0;
  border-bottom: 1px solid #333; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
}
.users-table td {
  font-size: 13px; color: #ccc; padding: 12px 8px 12px 0;
  border-bottom: 1px solid #2a2a2a; vertical-align: middle;
}
.users-table td:first-child { color: #e8e8e8; font-weight: 500; }
.storage-select {
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 6px;
  color: #e8e8e8; font-size: 12px; padding: 4px 8px; font-family: inherit;
  cursor: pointer; outline: none;
}
.storage-select:focus { border-color: #4A90D9; }
.tab-nav {
  display: flex; gap: 6px; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.tab-btn {
  background: transparent; border: 1px solid #3a3a3a; border-radius: 8px;
  color: #888; font-size: 13px; padding: 7px 14px; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.tab-btn:hover { border-color: #555; color: #e8e8e8; }
.tab-btn.active { background: #4A90D9; border-color: #4A90D9; color: #fff; }
.viewing-banner {
  background: #1a2a3a; border: 1px solid #4A90D9; border-radius: 8px;
  padding: 10px 14px; font-size: 13px; color: #4A90D9;
  margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
}

/* --- Custom Dialog System ----------------------------------------------------- */
.storiqo-dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: dialogFadeIn 0.15s ease;
}
@keyframes dialogFadeIn { from { opacity: 0; } to { opacity: 1; } }
.storiqo-dialog {
  background: linear-gradient(145deg, #2a2a2a, #222);
  border: 1px solid #3a3a3a;
  border-radius: 20px;
  padding: 2rem 1.75rem 1.5rem;
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  animation: dialogSlideUp 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes dialogSlideUp {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.storiqo-dialog-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0; margin-bottom: 0.25rem;
}
.storiqo-dialog-icon.danger  { background: rgba(226,92,92,0.15); }
.storiqo-dialog-icon.warning { background: rgba(240,165,0,0.15); }
.storiqo-dialog-icon.info    { background: rgba(74,144,217,0.15); }
.storiqo-dialog-icon.success { background: rgba(82,183,136,0.15); }
.storiqo-dialog-title {
  font-size: 16px; font-weight: 600; color: #f0f0f0; line-height: 1.3;
}
.storiqo-dialog-message { font-size: 13.5px; color: #888; line-height: 1.6; }
.storiqo-dialog-input {
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 10px;
  color: #e8e8e8; font-size: 14px; padding: 11px 14px;
  font-family: inherit; width: 100%; outline: none; transition: border-color 0.15s;
}
.storiqo-dialog-input:focus { border-color: #4A90D9; }
.storiqo-dialog-input::placeholder { color: #555; }
.storiqo-dialog-actions { display: flex; gap: 10px; margin-top: 0.25rem; }
.storiqo-dialog-actions button {
  flex: 1; border: none; border-radius: 10px;
  padding: 11px 14px; font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: all 0.15s;
}
.storiqo-btn-cancel { background: #2e2e2e; color: #888; border: 1px solid #3a3a3a !important; }
.storiqo-btn-cancel:hover { background: #383838; color: #e8e8e8; border-color: #555 !important; }
.storiqo-btn-confirm { background: #4A90D9; color: #fff; }
.storiqo-btn-confirm:hover { background: #3a7fc4; }
.storiqo-btn-confirm.danger  { background: #e25c5c; }
.storiqo-btn-confirm.danger:hover { background: #c94a4a; }
.storiqo-btn-confirm.warning { background: #f0a500; color: #111; }
.storiqo-btn-confirm.warning:hover { background: #d99300; }
.storiqo-btn-confirm.success { background: #52b788; }
.storiqo-btn-confirm.success:hover { background: #44a077; }