/* ==========================================================================
   Studocu Downloader - Native Scoped Styles for DD Studio
   Monochrome Obsidian Palette with Silver Border Beam & High Density Typography
   ========================================================================== */

@keyframes border-beam-spin {
  0%, 100% {
    opacity: 0.70;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.008);
  }
}

@keyframes border-beam-entrance {
  0% {
    opacity: 0;
    transform: scale(0.985);
  }
  30% {
    opacity: 0.95;
    transform: scale(1.002);
  }
  75% {
    opacity: 0.60;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes terminal-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#studocuWorkspaceRoot,
#scribdWorkspaceRoot {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary, #09090b);
}

html.dark #studocuWorkspaceRoot,
.dark #studocuWorkspaceRoot,
html.dark #scribdWorkspaceRoot,
.dark #scribdWorkspaceRoot {
  color: #f4f4f5;
}

/* 1. Main Hero Card with Silver/Indigo Border Beam & Specular Glass */
.border-beam-card,
.studocu-hero-card {
  position: relative;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 22px 20px;
  overflow: hidden;
  isolation: isolate;
  /* Dual-layer specular border & soft ambient elevation (0 FPS idle cost) */
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
    0 1px 3px 0 rgba(0, 0, 0, 0.04),
    0 10px 30px -10px rgba(99, 102, 241, 0.10);
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .border-beam-card,
.dark .border-beam-card,
html.dark .studocu-hero-card,
.dark .studocu-hero-card {
  background: radial-gradient(85% 60% at 50% 0%, rgba(99, 102, 241, 0.09) 0%, transparent 100%), #111114 !important;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 12px 36px -10px rgba(0, 0, 0, 0.70),
    0 0 30px -10px rgba(99, 102, 241, 0.15);
}

/* Focus & Interaction: Awakening Ambient Glow */
.border-beam-card:focus-within,
.studocu-hero-card:focus-within {
  border-color: rgba(99, 102, 241, 0.40);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(99, 102, 241, 0.30),
    0 16px 40px -8px rgba(99, 102, 241, 0.22);
}

html.dark .border-beam-card:focus-within,
.dark .border-beam-card:focus-within,
html.dark .studocu-hero-card:focus-within,
.dark .studocu-hero-card:focus-within {
  border-color: rgba(129, 140, 248, 0.45);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(129, 140, 248, 0.25),
    0 20px 48px -10px rgba(0, 0, 0, 0.85),
    0 0 40px -6px rgba(99, 102, 241, 0.35);
}

/* Entrance Shimmer (Single-pass on mount) */
.border-beam-card::before,
.studocu-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent 60deg,
    rgba(99, 102, 241, 0.08) 100deg,
    rgba(99, 102, 241, 0.45) 150deg,
    rgba(165, 180, 252, 0.95) 180deg,
    rgba(99, 102, 241, 0.45) 210deg,
    rgba(99, 102, 241, 0.08) 260deg,
    transparent 300deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: border-beam-entrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
  will-change: transform, opacity;
}

html.dark .border-beam-card::before,
.dark .border-beam-card::before,
html.dark .studocu-hero-card::before,
.dark .studocu-hero-card::before {
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent 60deg,
    rgba(255, 255, 255, 0.08) 100deg,
    rgba(255, 255, 255, 0.65) 150deg,
    rgba(255, 255, 255, 0.98) 180deg,
    rgba(255, 255, 255, 0.65) 210deg,
    rgba(255, 255, 255, 0.08) 260deg,
    transparent 300deg,
    transparent 360deg
  );
}

.border-beam-card::after,
.studocu-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Active Processing State: Continuous 120 FPS Composited Pulse */
.border-beam-card.is-processing::before,
.studocu-hero-card.is-processing::before {
  inset: 0;
  border-radius: 16px;
  padding: 1.5px;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent 45deg,
    rgba(99, 102, 241, 0.06) 75deg,
    rgba(99, 102, 241, 0.35) 120deg,
    rgba(79, 70, 229, 0.85) 180deg,
    rgba(99, 102, 241, 0.35) 240deg,
    rgba(99, 102, 241, 0.06) 285deg,
    transparent 315deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: border-beam-spin 3s ease-in-out infinite;
  z-index: 2;
  opacity: 0.95;
  will-change: transform, opacity;
}

html.dark .border-beam-card.is-processing::before,
.dark .border-beam-card.is-processing::before,
html.dark .studocu-hero-card.is-processing::before,
.dark .studocu-hero-card.is-processing::before {
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent 45deg,
    rgba(255, 255, 255, 0.04) 75deg,
    rgba(255, 255, 255, 0.35) 120deg,
    rgba(255, 255, 255, 0.98) 180deg,
    rgba(255, 255, 255, 0.35) 240deg,
    rgba(255, 255, 255, 0.04) 285deg,
    transparent 315deg,
    transparent 360deg
  );
}

.border-beam-card.is-processing::after,
.studocu-hero-card.is-processing::after {
  inset: -2px;
  border-radius: 18px;
  padding: 3px;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent 55deg,
    rgba(99, 102, 241, 0.10) 105deg,
    rgba(79, 70, 229, 0.60) 180deg,
    rgba(99, 102, 241, 0.10) 255deg,
    transparent 305deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: border-beam-spin 3s ease-in-out infinite;
  z-index: 1;
  opacity: 0.65;
  will-change: transform, opacity;
}

html.dark .border-beam-card.is-processing::after,
.dark .border-beam-card.is-processing::after,
html.dark .studocu-hero-card.is-processing::after,
.dark .studocu-hero-card.is-processing::after {
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent 55deg,
    rgba(255, 255, 255, 0.08) 105deg,
    rgba(255, 255, 255, 0.78) 180deg,
    rgba(255, 255, 255, 0.08) 255deg,
    transparent 305deg,
    transparent 360deg
  );
}

@media (prefers-reduced-motion: reduce) {
  .border-beam-card::before,
  .border-beam-card::after,
  .studocu-hero-card::before,
  .studocu-hero-card::after,
  .border-beam-card.is-processing::before,
  .border-beam-card.is-processing::after,
  .studocu-hero-card.is-processing::before,
  .studocu-hero-card.is-processing::after {
    animation: none !important;
  }
}

/* 2. Hero Pill Paste Button (Balanced & Ergonomic) */
.btn-hero-paste {
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.95) !important;
  border-radius: 9999px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 0.875rem !important;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
  user-select: none;
}

html.dark .btn-hero-paste,
.dark .btn-hero-paste {
  background: linear-gradient(180deg, #ffffff 0%, #ececef 100%) !important;
  color: #09090b !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}

.btn-hero-paste:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

html.dark .btn-hero-paste:hover,
.dark .btn-hero-paste:hover {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.38);
}

.btn-hero-paste:active {
  transform: translateY(0);
}

.btn-hero-downloading {
  background: #f4f4f5 !important;
  color: #71717a !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

html.dark .btn-hero-downloading,
.dark .btn-hero-downloading {
  background: #18181b !important;
  color: #a1a1aa !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.btn-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

html.dark .btn-hero-badge,
.dark .btn-hero-badge {
  background: rgba(0, 0, 0, 0.08);
}

/* 3. Terminal Chrome & macOS Dots */
.terminal-dots { display: flex; align-items: center; gap: 6px; }
.terminal-dots .dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ef4444; }
.dot.yellow { background: #f59e0b; }
.dot.green { background: #10b981; }

.terminal-screen {
  background: #050507;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: #a1a1aa;
  padding: 12px 14px;
  scroll-padding-top: 10px;
  scroll-padding-bottom: 16px;
  height: 240px;
  overflow-y: auto;
  line-height: 1.65;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

.terminal-screen::-webkit-scrollbar { width: 6px; }
.terminal-screen::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }

/* 4. Terminal Log Lines */
.log-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2.5px 6px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.log-line:hover { background: rgba(255, 255, 255, 0.03); }
.log-num { font-size: 0.7rem; color: #52525b; min-width: 18px; user-select: none; line-height: 1.6; }
.log-badge-icon {
  font-size: 0.68rem;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.log-text { flex: 1; word-break: break-word; }

.log-normal .log-badge-icon { background: rgba(255, 255, 255, 0.06); color: #71717a; }
.log-normal .log-text { color: #e4e4e7; }
.log-progress .log-badge-icon { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }
.log-progress .log-text { color: #7dd3fc; font-weight: 500; }
.log-success .log-badge-icon { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.log-success .log-text { color: #86efac; font-weight: 500; }
.log-warn .log-badge-icon { background: rgba(234, 179, 8, 0.15); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.3); }
.log-warn .log-text { color: #fde047; }
.log-error .log-badge-icon { background: rgba(239, 68, 68, 0.18); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.log-error .log-text { color: #fca5a5; font-weight: 600; }
.log-accent .log-badge-icon { background: rgba(192, 132, 252, 0.15); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.3); }
.log-accent .log-text { color: #d8b4fe; font-weight: 500; }
.log-active { background: rgba(255, 255, 255, 0.02); }
.log-active .log-text::after { content: " ▌"; animation: terminal-blink 0.9s infinite; color: #38bdf8; font-weight: bold; }

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  margin-bottom: 6px;
  transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease, transform 0.15s ease;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.file-item:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background-color: #f8f9fa;
}

html.dark .file-item,
.dark .file-item {
  background-color: #0d0d10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
html.dark .file-item:hover,
.dark .file-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background-color: #121216;
}

.file-item-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.file-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.file-name {
  font-weight: 500;
  color: #09090b;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.88rem;
  cursor: pointer;
  transition: color 0.15s;
}
.file-name:hover { color: #0284c7; }

html.dark .file-name,
.dark .file-name { color: #f4f4f5; }
html.dark .file-name:hover,
.dark .file-name:hover { color: #38bdf8; }

.file-type-badge { width: 38px; height: 28px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.badge-type-pdf { background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.22); color: #e11d48; }
html.dark .badge-type-pdf,
.dark .badge-type-pdf { color: #fda4af; }
.badge-type-md { background: rgba(129, 140, 248, 0.1); border: 1px solid rgba(129, 140, 248, 0.22); color: #6366f1; }
html.dark .badge-type-md,
.dark .badge-type-md { color: #c4b5fd; }

.file-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  color: #52525b;
}
html.dark .meta-pill,
.dark .meta-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
}
.meta-user {
  color: #2563eb;
  border-color: rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.06);
}
html.dark .meta-user,
.dark .meta-user {
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.22);
  background: rgba(59, 130, 246, 0.06);
}

/* Segmented Control Filter Tabs */
.file-filter-tabs {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  background: #f4f4f5;
  padding: 2.5px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
html.dark .file-filter-tabs,
.dark .file-filter-tabs {
  background: #0d0d10;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-tab {
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid transparent;
  background: transparent;
  color: #71717a;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}
.filter-tab:hover { color: #09090b; }
html.dark .filter-tab,
.dark .filter-tab { color: #a1a1aa; }
html.dark .filter-tab:hover,
.dark .filter-tab:hover { color: #f4f4f5; }

.filter-tab.active {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #09090b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
html.dark .filter-tab.active,
.dark .filter-tab.active {
  background: #18181b;
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.filter-count {
  background: rgba(0, 0, 0, 0.06);
  color: #52525b;
  padding: 1px 5px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', monospace;
}
html.dark .filter-count,
.dark .filter-count {
  background: rgba(255, 255, 255, 0.06);
  color: #71717a;
}
.filter-tab.active .filter-count {
  background: rgba(0, 0, 0, 0.08);
  color: #09090b;
}
html.dark .filter-tab.active .filter-count,
.dark .filter-tab.active .filter-count {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.filter-tab.filter-tab-trash.active {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.25);
  color: #e11d48;
}
html.dark .filter-tab.filter-tab-trash.active,
.dark .filter-tab.filter-tab-trash.active {
  color: #fca5a5;
}

/* Action Buttons */
.file-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.btn-action {
  padding: 5px 9px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #52525b;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.btn-action:hover {
  background-color: #f4f4f5;
  color: #09090b;
  border-color: rgba(0, 0, 0, 0.2);
}
html.dark .btn-action,
.dark .btn-action {
  background-color: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}
html.dark .btn-action:hover,
.dark .btn-action:hover {
  background-color: #1c1c22;
  color: #f4f4f5;
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-action.btn-view:hover { color: #0284c7; border-color: rgba(2, 132, 199, 0.35); }
html.dark .btn-action.btn-view:hover,
.dark .btn-action.btn-view:hover { color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); }
.btn-action.btn-tab:hover { color: #4f46e5; border-color: rgba(79, 70, 229, 0.35); }
html.dark .btn-action.btn-tab:hover,
.dark .btn-action.btn-tab:hover { color: #818cf8; border-color: rgba(129, 140, 248, 0.35); }

.btn-action.btn-drive {
  color: #4f46e5;
  border-color: rgba(79, 70, 229, 0.25);
  background-color: rgba(79, 70, 229, 0.05);
}
.btn-action.btn-drive:hover {
  background-color: #4f46e5;
  border-color: #4338ca;
  color: #ffffff;
}
html.dark .btn-action.btn-drive,
.dark .btn-action.btn-drive {
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.3);
  background-color: rgba(99, 102, 241, 0.1);
}
html.dark .btn-action.btn-drive:hover,
.dark .btn-action.btn-drive:hover {
  background-color: #4f46e5;
  border-color: #6366f1;
  color: #ffffff;
}

/* Prominent Download Button (High visibility, light/dark contrast) */
.btn-action.btn-dl {
  background-color: #ecfdf5;
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #047857;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.12);
}
.btn-action.btn-dl:hover {
  background-color: #10b981;
  border-color: #059669;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.28);
  transform: translateY(-1px);
}
.btn-action.btn-dl:active {
  transform: translateY(0);
}
html.dark .btn-action.btn-dl,
.dark .btn-action.btn-dl {
  background-color: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.38);
  color: #34d399;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
html.dark .btn-action.btn-dl:hover,
.dark .btn-action.btn-dl:hover {
  background-color: #059669;
  border-color: #10b981;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}
html.dark .btn-action.btn-dl:active,
.dark .btn-action.btn-dl:active {
  transform: translateY(0);
}

/* Highlighted Border for Downloaded Files */
.file-item.file-item-downloaded {
  border: 1.5px solid #10b981 !important;
  background-color: rgba(16, 185, 129, 0.035) !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18), 0 2px 8px rgba(16, 185, 129, 0.08) !important;
  position: relative;
}

.file-item.file-item-downloaded:hover {
  border-color: #059669 !important;
  background-color: rgba(16, 185, 129, 0.06) !important;
  box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.25), 0 4px 12px rgba(16, 185, 129, 0.12) !important;
}

html.dark .file-item.file-item-downloaded,
.dark .file-item.file-item-downloaded {
  border: 1.5px solid rgba(52, 211, 153, 0.65) !important;
  background-color: rgba(16, 185, 129, 0.06) !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25), 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

html.dark .file-item.file-item-downloaded:hover,
.dark .file-item.file-item-downloaded:hover {
  border-color: #34d399 !important;
  background-color: rgba(16, 185, 129, 0.1) !important;
  box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.35), 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

.file-item.file-item-just-downloaded {
  animation: file-download-pulse 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes file-download-pulse {
  0% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.5), 0 4px 14px rgba(16, 185, 129, 0.3) !important;
    transform: scale(1.008);
  }
  50% {
    box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.3), 0 2px 10px rgba(16, 185, 129, 0.2) !important;
  }
  100% {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18), 0 2px 8px rgba(16, 185, 129, 0.08) !important;
    transform: scale(1);
  }
}

.btn-action.btn-restore { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.25); color: #059669; }
html.dark .btn-action.btn-restore,
.dark .btn-action.btn-restore { color: #6ee7b7; }
.btn-action.btn-del:hover { background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.3); color: #e11d48; }
html.dark .btn-action.btn-del:hover,
.dark .btn-action.btn-del:hover { background: rgba(244, 63, 94, 0.15); color: #fb7185; }

/* Mobile Viewport Optimizations */
@media (max-width: 640px) {
  #studocuWorkspaceRoot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .border-beam-card { padding: 16px 14px; }
  .btn-hero-badge { display: none !important; }
  .terminal-screen { height: 200px; padding: 12px 14px; scroll-padding-top: 10px; scroll-padding-bottom: 16px; font-size: 0.72rem; }
  .file-item { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px; }
  .file-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .file-actions .btn-action { flex: 1 1 calc(25% - 6px); justify-content: center; min-height: 34px; padding: 6px 6px; font-size: 0.72rem; }
}