/* ============================================
   DROPEALO.COM — Cyberpunk Glitch Theme v2.0
   SPECTACULAR Edition
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg-void: #020609;
  --bg-deep: #060d14;
  --bg-panel: rgba(6, 16, 24, 0.92);
  --bg-panel-solid: #081420;
  --bg-surface: rgba(10, 28, 42, 0.75);
  --bg-hover: rgba(0, 255, 224, 0.06);
  --cyan-primary: #00ffe0;
  --cyan-dim: #00b8a0;
  --cyan-glow: rgba(0, 255, 224, 0.35);
  --cyan-subtle: rgba(0, 255, 224, 0.08);
  --cyan-ultra: rgba(0, 255, 224, 0.6);
  --blue-accent: #1a8fff;
  --blue-glow: rgba(26, 143, 255, 0.3);
  --red-alert: #ff3044;
  --red-glow: rgba(255, 48, 68, 0.3);
  --yellow-warn: #ffc800;
  --magenta-accent: #ff00aa;
  --text-primary: #c8e6f0;
  --text-secondary: #6a8a9a;
  --text-dim: #3a5a6a;
  --text-bright: #e8f8ff;
  --border-subtle: rgba(0, 255, 224, 0.1);
  --border-active: rgba(0, 255, 224, 0.35);
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --scanline-opacity: 0.025;
  --glow-spread: 15px;
  --transition-smooth: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* === KEYFRAMES === */
@keyframes glitchFlicker {
  0%, 100% { opacity: 1; }
  3% { opacity: 0.85; }
  6% { opacity: 1; }
  44% { opacity: 0.9; transform: translate(-1px, 0); }
  46% { opacity: 1; transform: translate(0); }
  94% { opacity: 0.88; }
  96% { opacity: 1; }
}
@keyframes scanlineMove {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes borderPulse {
  0%, 100% { border-color: var(--border-subtle); box-shadow: 0 0 5px transparent; }
  50% { border-color: var(--border-active); box-shadow: 0 0 var(--glow-spread) var(--cyan-glow); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px var(--cyan-glow), inset 0 0 5px rgba(0,255,224,0.02); }
  50% { box-shadow: 0 0 25px var(--cyan-glow), 0 0 50px rgba(0,255,224,0.06), inset 0 0 12px rgba(0,255,224,0.03); }
}
@keyframes glowPulseIntense {
  0%, 100% { box-shadow: 0 0 15px var(--cyan-glow), 0 0 30px rgba(0,255,224,0.08); }
  50% { box-shadow: 0 0 30px var(--cyan-glow), 0 0 60px rgba(0,255,224,0.12), 0 0 90px rgba(0,255,224,0.04); }
}
@keyframes navSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cornerGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}
@keyframes loadBar {
  0% { width: 0%; }
  100% { width: 100%; }
}
@keyframes dataStream {
  0% { background-position: 0 0; }
  100% { background-position: 0 -200px; }
}
@keyframes textGlitch {
  0%, 100% { text-shadow: 2px 0 var(--red-alert), -2px 0 var(--cyan-primary); clip-path: inset(0 0 0 0); }
  20% { text-shadow: -2px 0 var(--red-alert), 2px 0 var(--cyan-primary); clip-path: inset(10% 0 60% 0); }
  60% { text-shadow: -1px 0 var(--red-alert), 1px 0 var(--cyan-primary); clip-path: inset(70% 0 5% 0); }
  80% { text-shadow: 1px 0 var(--red-alert), -1px 0 var(--cyan-primary); clip-path: inset(0 0 0 0); }
}

/* === GLOBAL RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--cyan-dim) var(--bg-deep); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--cyan-dim); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-primary); }

body {
  width: 100%; height: 100%; margin: 0; padding: 0;
  color: var(--text-primary); font-family: var(--font-body);
  font-weight: 400; font-size: 15px; line-height: 1.5;
  background-color: var(--bg-void);
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(0,255,224,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(26,143,255,0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(255,0,170,0.02) 0%, transparent 50%);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::after {
  content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,224,var(--scanline-opacity)) 2px, rgba(0,255,224,var(--scanline-opacity)) 4px);
  mix-blend-mode: overlay;
}
body::before {
  content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--cyan-primary) 40%, var(--blue-accent) 60%, transparent 100%);
  opacity: 0.12; z-index: 9998; animation: scanlineMove 7s linear infinite; pointer-events: none; filter: blur(1px);
}
@media (max-width: 768px) { body { position: fixed; background-color: var(--bg-void); overflow-y: scroll; } }
::selection { background: var(--cyan-primary); color: var(--bg-void); }

/* === NOTIFICATIONS === */
.notification { background: var(--bg-panel); border: 1px solid var(--border-active); color: var(--text-primary); border-radius: 2px; font-family: var(--font-mono); font-size: 13px; padding: 12px 16px; }
.notification.is-info { background: rgba(0,255,224,0.08); border-color: var(--cyan-primary); color: var(--cyan-primary); }
.notification .delete { background: transparent; border: 1px solid var(--text-dim); }
.notification .delete:hover { border-color: var(--red-alert); }
.notification .delete::before, .notification .delete::after { background-color: var(--text-secondary); }

/* === BUTTONS === */
.button {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; font-size: 12px; border-radius: 2px;
  border: 1px solid var(--cyan-primary);
  background: linear-gradient(135deg, rgba(0,255,224,0.08), rgba(0,255,224,0.02));
  color: var(--cyan-primary); padding: 10px 28px; height: auto;
  transition: all var(--transition-smooth); position: relative; overflow: hidden; cursor: pointer;
}
.button::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,224,0.1), transparent);
  transition: left 0.5s ease;
}
.button:hover::before { left: 100%; }
.button:hover {
  background: linear-gradient(135deg, rgba(0,255,224,0.15), rgba(0,255,224,0.06));
  color: var(--text-bright); box-shadow: 0 0 20px var(--cyan-glow), inset 0 0 20px rgba(0,255,224,0.05);
  border-color: var(--cyan-primary); text-shadow: 0 0 8px var(--cyan-glow);
}
.button:active { transform: scale(0.97); }
.button.is-info, .button.is-primary { background: linear-gradient(135deg, rgba(0,255,224,0.18), rgba(0,255,224,0.06)); border: 1px solid var(--cyan-primary); color: var(--cyan-primary); }
.button.is-info:hover, .button.is-primary:hover { background: linear-gradient(135deg, rgba(0,255,224,0.28), rgba(0,255,224,0.1)) !important; box-shadow: 0 0 25px var(--cyan-glow), 0 0 50px rgba(0,255,224,0.08); }
.button.is-info:focus, .button.is-primary:focus { box-shadow: 0 0 12px var(--cyan-glow); }
.button.is-danger { border-color: var(--red-alert); color: var(--red-alert); background: rgba(255,48,68,0.08); }
.button.is-danger:hover { background: rgba(255,48,68,0.18); box-shadow: 0 0 20px var(--red-glow); }
.button.is-light { border-color: var(--text-dim); color: var(--text-secondary); background: rgba(255,255,255,0.03); }
.button.is-light:hover { border-color: var(--cyan-dim); color: var(--cyan-dim); }
.button[disabled] { opacity: 0.35; cursor: not-allowed; }

/* === INPUTS === */
.input, .textarea, .select select {
  background: rgba(0,255,224,0.03); border: 1px solid var(--border-subtle); border-radius: 2px;
  color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; box-shadow: none; transition: all var(--transition-smooth);
}
.input:focus, .textarea:focus, .select select:focus { border-color: var(--cyan-primary); box-shadow: 0 0 12px var(--cyan-glow); outline: none; }
.input::placeholder, .textarea::placeholder { color: var(--text-dim); font-style: italic; }
.label { color: var(--text-secondary); font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }

/* === TAGS === */
.tag { background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; border-radius: 2px; }
.tag.is-light { background: rgba(0,255,224,0.06); border-color: var(--cyan-dim); color: var(--cyan-dim) !important; }
.tag .remove { cursor: pointer; margin-left: 6px; }
.tag .remove:hover { color: var(--red-alert); }

/* === MAIN LOGO === */
.main-logo {
  position: fixed; top: 10px; left: 0; max-height:100px; padding: 8px 18px 8px 14px;
  border-bottom-right-radius: 3px; border-top-right-radius: 3px;
  z-index: 10;
  transition: all var(--transition-smooth);
}
.main-logo:hover { filter: drop-shadow(0 0 18px var(--cyan-glow)); border-color: var(--border-active); }
@media (max-width: 768px) { .main-logo { display: none; } }

/* === MOBILE NAV === */
.mobile-nav { display: none; font-size: 13px; font-family: var(--font-display); letter-spacing: 1px; }
@media (max-width: 768px) { .mobile-nav { display: block; position: absolute; width: 100%; z-index: 20; } }
.mobile-nav .navbar { background: var(--bg-panel) !important; border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(12px); }
.mobile-nav .navbar-item, .mobile-nav .navbar-link { color: var(--text-primary) !important; font-family: var(--font-display); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.mobile-nav .navbar-item:hover { background: var(--bg-hover) !important; color: var(--cyan-primary) !important; }
.mobile-nav .navbar-burger span { background-color: var(--cyan-primary) !important; height: 2px; }
.mobile-nav .navbar-menu { background: var(--bg-panel-solid) !important; border-top: 1px solid var(--border-subtle); }
.mobile-nav .navbar-brand .navbar-item img { filter: drop-shadow(0 0 5px var(--cyan-glow)); }

/* === BACKGROUND === */
.background { position: fixed !important; left: 0; top: 0; width: 100% !important; height: 100% !important; z-index: 0 !important; cursor: pointer; background: var(--bg-void); }
@media (max-width: 768px) { .background { display: none; } }
.background .vegas-timer { display: none; }
.background .vegas-slide-inner { position: absolute; width: 100%; height: 100%; }
.background::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(2,6,9,0.6) 100%),
    linear-gradient(to right, rgba(2,6,9,0.7) 0%, transparent 30%, transparent 70%, rgba(2,6,9,0.4) 100%);
  pointer-events: none; z-index: 1;
}

/* === DROP OVERLAY === */
.drop-overlay {
  pointer-events: none; display: none; position: fixed; z-index: 10;
  border: 2px dashed var(--cyan-primary); top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0,255,224,0.04); backdrop-filter: blur(4px);
}
.drop-overlay p {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 22px; font-family: var(--font-display); font-weight: 700;
  letter-spacing: 6px; text-transform: uppercase; color: var(--cyan-primary);
  text-shadow: 0 0 30px var(--cyan-glow), 0 0 60px rgba(0,255,224,0.15);
}

/* === TABS (NAVIGATION) — REDESIGNED === */
.tabs:not(.core) { position: fixed; top: 12px; right: 14px; z-index: 15; border-bottom: none; }
.tabs:not(.core) ul { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; border-bottom: none; }
@media (max-width: 768px) { .tabs:not(.core) { display: none; } }
.tabs:not(.core) li { font-size: 10px; animation: navSlideIn 0.4s ease-out both; }
.tabs:not(.core) li:nth-child(1) { animation-delay: 0.1s; }
.tabs:not(.core) li:nth-child(2) { animation-delay: 0.2s; }
.tabs:not(.core) li:nth-child(3) { animation-delay: 0.3s; }
.tabs:not(.core) li:nth-child(4) { animation-delay: 0.4s; }
.tabs:not(.core) li a {
  display: block; background: var(--bg-panel); color: var(--text-secondary);
  font-family: var(--font-display); font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; padding: 8px 18px; border: 1px solid var(--border-subtle);
  border-radius: 2px; transition: all var(--transition-smooth); text-decoration: none;
  font-size: 10px; position: relative; backdrop-filter: blur(8px);
}
.tabs:not(.core) li a::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 1px; background: var(--cyan-primary); transition: width var(--transition-smooth);
}
.tabs:not(.core) li a:hover { color: var(--cyan-primary); background: rgba(0,255,224,0.06); border-color: var(--border-active); text-shadow: 0 0 8px var(--cyan-glow); }
.tabs:not(.core) li a:hover::after { width: 60%; }
.tabs:not(.core) li.is-active a { background: rgba(0,255,224,0.1); color: var(--cyan-primary); border-color: var(--cyan-primary); box-shadow: 0 0 15px var(--cyan-glow); }
.tabs:not(.core) li.is-active a::after { width: 80%; box-shadow: 0 0 8px var(--cyan-glow); }

/* === TAB WINDOW (SIDE PANEL) === */
.tab-window { position: fixed; right: 0; top: 0; bottom: 0; width: 0; min-width: 0; max-width: 1150px; background: var(--bg-panel-solid); border-left: 1px solid var(--border-active); transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: none; justify-content: center; z-index: 15; }
.tab-window.active { display: flex; width: auto; min-width: 750px; z-index: 15; box-shadow: -10px 0 60px rgba(0,0,0,0.6), -2px 0 20px rgba(0,255,224,0.05); }
@media (max-width: 768px) { .tab-window.active { min-width: 100%; max-width: 100%; margin-top: 50px; } }
.tab-window .close-btn { position: absolute; left: 20px; top: 15px; font-size: 18px; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-smooth); z-index: 2; }
.tab-window .close-btn:hover { color: var(--cyan-primary); text-shadow: 0 0 10px var(--cyan-glow); transform: scale(1.1); }
.tab-window hr { position: absolute; width: 100%; top: 38px; background: linear-gradient(90deg, transparent, var(--border-subtle), transparent); height: 1px; border: none; }
.tab-window .tab { display: none; width: 90%; min-width: 300px; margin: 80px 50px 50px 50px; overflow-y: auto; }
.tab-window .tab.active { display: block; animation: fadeInScale 0.4s ease-out; }
.tab-window .tab.large { max-width: 900px; }
.tab-window .tab.extra-large { max-width: 1000px; }
.tab-window .tab h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text-bright); margin-bottom: 20px; text-shadow: 0 0 20px rgba(0,255,224,0.1); }
.tab-window .tab h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: 1.5px; color: var(--cyan-primary); margin-bottom: 10px; }
.tab-window .tab p { color: var(--text-secondary); line-height: 1.7; }
@media (max-width: 768px) { .tab-window .tab { width: 100%; margin: 70px 20px 20px 20px; } .tab-window .tab h1 { font-size: 22px; } .tab-window .tab.large { min-width: 300px; } }
.tab-window .tab-logo { position: absolute; bottom: 10px; right: 10px; max-width: 50px; opacity: 0.2; filter: drop-shadow(0 0 5px var(--cyan-glow)); }

/* === UPLOAD BLOCK (MAIN) === */
.upload-block { display: flex; height: 100vh; align-items: center; margin-left: 60px; overflow-y: hidden; position: relative; z-index: 2; }
@media (max-width: 768px) { .upload-block { height: 100%; margin: 0; flex-direction: column; padding-top: 53px; } }

/* Upload card — SPECTACULAR */
.upload-block .upload-block-inner {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(6,16,24,0.95), rgba(8,20,32,0.9));
  width: 340px; height: 500px; border-radius: 4px;
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  overflow: hidden; animation: glowPulseIntense 5s ease-in-out infinite;
  transition: all 0.5s ease;
}
.upload-block .upload-block-inner:hover { border-color: var(--border-active); transform: translateY(-2px); }
.upload-block .upload-block-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan-primary), var(--blue-accent), var(--magenta-accent), transparent); z-index: 5; }
.upload-block .upload-block-inner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent); z-index: 5; }
@media (max-width: 768px) { .upload-block .upload-block-inner { width: 100%; height: 100%; border-radius: 0; border: none; box-shadow: none; animation: none; } }
.upload-block.with-logo .upload-block-inner { height: 580px; }

/* Upload block logo */
.upload-block .upload-block-logo { height: 80px; width: 100%; text-align: center; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(0,255,224,0.03), transparent); position: relative; }
.upload-block .upload-block-logo::after { content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent); }
.upload-block .upload-block-logo img { display: inline-block; height: 50px; margin: 10px 0; filter: drop-shadow(0 0 12px var(--cyan-glow)); transition: filter var(--transition-smooth); }
.upload-block .upload-block-logo img:hover { filter: drop-shadow(0 0 20px var(--cyan-ultra)); }

/* Upload content */
.upload-block .upload-block-content { display: none; align-items: center; justify-content: center; flex-wrap: wrap; flex-grow: 1; width: 100%; height: 100%; scrollbar-width: thin; }
.upload-block .upload-block-content::-webkit-scrollbar { width: 3px; }
.upload-block .upload-block-content.active { display: flex; }
.upload-block .upload-block-content.start-top { align-items: start; }
@media (max-width: 768px) { .upload-block .upload-block-content lord-icon { height: 100px !important; } }
.upload-block .upload-block-content#upload > .button-block > button { width: 70%; }
.upload-block .upload-block-content#upload > .button-block > button.options { width: 40px; min-width: 0; margin-left: 16px; }
.upload-block .upload-block-content .inline-content { width: inherit; }
.upload-block .upload-block-content .add-files { width: 300px; height: 300px; cursor: pointer; transition: transform var(--transition-smooth); }
.upload-block .upload-block-content .add-files:hover { transform: scale(1.02); }
.upload-block .upload-block-content span.description { display: block; width: 100%; text-align: center; padding: 0 10px; color: var(--text-secondary); font-family: var(--font-mono); font-size: 13px; }
.upload-block .upload-block-content span.folder-select { display: block; text-align: center; font-size: 11px; text-decoration: none; padding-top: 5px; color: var(--cyan-dim); font-family: var(--font-mono); cursor: pointer; transition: all var(--transition-smooth); border-bottom: 1px dashed var(--cyan-dim); width: fit-content; margin: 5px auto 0; }
.upload-block .upload-block-content span.folder-select:hover { color: var(--cyan-primary); border-color: var(--cyan-primary); text-shadow: 0 0 6px var(--cyan-glow); }

/* Button block */
.upload-block .upload-block-content .button-block { background: linear-gradient(180deg, rgba(6,16,24,0.6), var(--bg-panel)); height: 70px; width: 100%; border-top: 1px solid var(--border-subtle); margin-top: auto; display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; }
.upload-block .upload-block-content .button-block::before { content: ''; position: absolute; top: 0; left: 10%; width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-active), transparent); }
.upload-block .upload-block-content .button-block button { min-width: 50%; }
.upload-block .upload-block-content .button-block button.options { width: 40px; min-width: 0; margin-left: 16px; border-style: dashed; }

/* === DOWNLOAD SECTION === */
.upload-block .upload-block-content#download #download-form { max-width: 100%; height: 100%; }
@media (max-width: 768px) { .upload-block .upload-block-content#download #download-form { width: 100%; } }
.upload-block .upload-block-content#download #download-form form { display: flex; flex-direction: column; height: inherit; }
.upload-block .upload-block-content#download .password-block { display: flex; flex-direction: column; justify-content: center; text-align: center; margin: 0 20px; flex-grow: 1; }
.upload-block .upload-block-content#download .password-block h1 { font-family: var(--font-display); font-size: 24px; color: var(--text-bright); letter-spacing: 2px; text-transform: uppercase; }
.upload-block .upload-block-content#download .password-block .field { width: 100%; }
.upload-block .upload-block-content#download .block-icon { width: 70%; margin-top: 30px; }
.upload-block .upload-block-content#download .block-icon.sm { width: 40%; margin-top: 15px; }
.upload-block .upload-block-content#download .top { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.upload-block .upload-block-content#download .top h1 { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 1.5px; max-width: 80%; text-align: center; margin-top: 20px; color: var(--text-bright); }
.upload-block .upload-block-content#download .top .expire { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.upload-block .upload-block-content#download #download-started { display: none; flex-direction: column; height: 100%; }
.upload-block .upload-block-content#download #download-started.active { display: flex; }
.upload-block .upload-block-content#download #download-started .top { flex-grow: 1; }
.upload-block .upload-block-content#download #download-started h1 { font-size: 16px; }
.upload-block .upload-block-content#download .upload-message { width: 100%; flex-grow: 1; min-height: 60px; max-height: 90px; padding: 20px; font-size: 13px; overflow-y: auto; white-space: pre-wrap; color: var(--text-secondary); font-family: var(--font-mono); border-bottom: 1px solid var(--border-subtle); background: rgba(0,255,224,0.02); }
.upload-block .upload-block-content#download .selected-files { max-height: 150px; overflow-y: auto; border-top: 1px solid var(--border-subtle); }
@media (max-width: 768px) { .upload-block .upload-block-content#download .selected-files { max-height: none; } }
.upload-block .upload-block-content#download .selected-files ul li:last-child { border-bottom: none; }
.upload-block .upload-block-content#download .rounded-side-button { width: 40px; min-width: 40px; margin-right: 40px; }
.upload-block .upload-block-content#download .rounded-side-button i { font-weight: 700; }

/* === UPLOAD FORM === */
.upload-form { display: flex; flex-direction: column; flex-grow: 1; width: 100%; max-height: calc(100% - 70px); min-height: calc(100% - 70px); overflow-y: auto; }
.upload-form .select-first-files { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; border-bottom: 1px solid var(--border-subtle); min-height: 150px; }
.upload-form .select-first-files .outside-container { margin-top: -15px; cursor: pointer; transition: transform var(--transition-smooth); }
.upload-form .select-first-files .outside-container:hover { transform: scale(1.05); }
@media (max-width: 768px) { .upload-form .select-first-files .outside-container lord-icon { height: 100px !important; } }
.upload-form form input[type="file"], .upload-form form .emailToInput { visibility: hidden; height: 0; width: 0; position: absolute; }
.upload-form form .input-group { width: auto; margin: 5px 15px; position: relative; }
.upload-form form .input-group input, .upload-form form .input-group textarea, .upload-form form .input-group select { margin: 0; padding: 0 8px; font-size: 13px; height: 40px; border: none; width: 100%; border-bottom: 1px solid var(--border-subtle); border-radius: 0; outline: none !important; color: var(--text-primary); background: transparent; box-shadow: none; font-family: var(--font-mono); transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth); }
.upload-form form .input-group input:focus, .upload-form form .input-group textarea:focus, .upload-form form .input-group select:focus { border-bottom-color: var(--cyan-primary); box-shadow: 0 1px 0 0 var(--cyan-primary), 0 4px 12px -4px var(--cyan-glow); }
.upload-form form .input-group select { padding: 0 4px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.upload-form form .input-group input::placeholder, .upload-form form .input-group textarea::placeholder { color: var(--text-dim); font-style: italic; }
.upload-form form .input-group span.label { font-family: var(--font-display); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0; }
.upload-form form .input-group span.label[data-help] { cursor: pointer; }
.upload-form form .input-group span.label[data-help]:hover { color: var(--cyan-primary); }
.upload-form form .input-group textarea { height: auto; min-height: 80px; padding-top: 10px; }
.upload-form form .input-group .recipients { margin-top: 5px; }
.upload-form form .input-group .recipients span { position: relative; display: inline-block; height: auto; margin-right: 5px; }
.upload-form form .input-group .recipients span .remove { display: none; position: absolute; width: 20px; text-align: center; right: 0; top: 0; background: var(--bg-panel); color: var(--red-alert); font-weight: bold; cursor: pointer; font-size: 11px; }
.upload-form form .input-group .recipients :hover .remove { display: block; }
.upload-form form .input-group .recipients .tag:not(body).is-light { color: var(--cyan-dim) !important; }
.upload-form form .advanced-options { position: relative; background: linear-gradient(180deg, rgba(0,255,224,0.03), rgba(0,255,224,0.01)); display: none; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.upload-form form .advanced-options .input-group { margin-bottom: 10px; }
.upload-form form .advanced-options input, .upload-form form .advanced-options textarea, .upload-form form .advanced-options select { background: transparent; color: var(--text-secondary); opacity: 1; }
.upload-form form .advanced-options select[name="expire"]:hover { cursor: pointer; }
.upload-form form .advanced-options h1 { font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-left: 20px; padding-top: 10px; font-weight: 700; color: var(--cyan-dim); }
.upload-form form .advanced-options .input-group.disabled { opacity: 0.3; pointer-events: none; }

/* Radio group */
.upload-form .radio-group { width: auto; display: flex; align-content: stretch; flex-wrap: nowrap; font-size: 0.79em; }
.upload-form .radio-group .radio { display: inline-block; flex: 1; font-family: var(--font-mono); background: transparent; text-align: center; padding: 5px 10px; margin: 0; color: var(--text-secondary); border: 1px solid var(--border-subtle); cursor: pointer; transition: all var(--transition-smooth); }
.upload-form .radio-group .radio.selected { background: rgba(0,255,224,0.12); color: var(--cyan-primary); font-weight: 700; border-color: var(--cyan-primary); box-shadow: inset 0 0 8px rgba(0,255,224,0.05); }
.upload-form .radio-group .radio:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.upload-form .radio-group .radio:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }

/* === TOOLTIP === */
.upload-block .upload-block-tooltip { display: none; justify-content: center; align-items: center; flex-wrap: wrap; padding: 14px; width: 210px; height: 270px; margin-left: 24px; background: linear-gradient(170deg, rgba(6,16,24,0.95), rgba(8,20,32,0.92)); border: 1px solid var(--border-subtle); color: var(--text-primary); border-radius: 4px; z-index: 1; backdrop-filter: blur(12px); position: relative; }
.upload-block .upload-block-tooltip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent); }
.upload-block .upload-block-tooltip.active { display: flex; animation: fadeInScale 0.3s ease-out; }
.upload-block .upload-block-tooltip .content { display: none; text-align: center; }
.upload-block .upload-block-tooltip .content img { width: 80px; height: auto; margin-bottom: 10px; filter: brightness(0.8) contrast(1.2); }
.upload-block .upload-block-tooltip .content p { display: block; font-size: 13px; font-family: var(--font-mono); color: var(--text-secondary); }
.upload-block .upload-block-tooltip .content.active { display: block; }
@media (max-width: 768px) { .upload-block .upload-block-tooltip { width: 100%; margin: 0; border-radius: 0; height: 80px; border: none; border-top: 1px solid var(--border-subtle); } .upload-block .upload-block-tooltip .content.active { display: flex; align-items: center; } .upload-block .upload-block-tooltip .content.active img { width: 40px; margin-right: 16px; } }

/* === PROGRESS BAR === */
.upload-block .upload-progress-bar { display: block; position: relative; width: 220px; height: 220px; font-size: 38px; font-family: var(--font-display); margin-top: 20px; color: var(--cyan-primary); }
.upload-block .upload-progress-bar svg path:first-child { stroke: var(--border-subtle) !important; }
.upload-block .upload-progress-bar svg path:last-child { stroke: var(--cyan-primary) !important; filter: drop-shadow(0 0 8px var(--cyan-glow)); }
.upload-block .upload-progress-bar .progressbar-text { color: var(--cyan-primary) !important; font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: 2px; text-shadow: 0 0 15px var(--cyan-glow); }
.upload-block .upload-progress-details { font-size: 12px; font-family: var(--font-mono); color: var(--text-secondary); }
.upload-block .upload-progress-details span { display: block; text-align: center; margin-bottom: 4px; }
@media (max-width: 768px) { .upload-block .upload-progress-details { width: 80%; } }

/* === UPLOAD FINISHED === */
.upload-block .upload-finished-details, .upload-block .upload-verify-details { text-align: center; }
.upload-block .upload-finished-details h1, .upload-block .upload-verify-details h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan-primary); text-shadow: 0 0 15px var(--cyan-glow); }
@media (max-width: 768px) { .upload-block .upload-finished-details h1, .upload-block .upload-verify-details h1 { font-size: 18px; } .upload-block .upload-finished-details, .upload-block .upload-verify-details { width: 80%; } }
.upload-block .upload-finished-details .upload-finished-message { display: none; }
.upload-block .upload-finished-details .upload-finished-message.active { display: block; }
.upload-block .upload-finished-details .upload-finished-message p { font-size: 13px; padding: 5px 20px 20px 20px; color: var(--text-secondary); font-family: var(--font-body); }
@media (max-width: 768px) { .upload-block .upload-finished-details .upload-finished-message p { padding: 0 20px; } }
.upload-block .upload-finished-details .upload-finished-message input { width: 90%; background: rgba(0,255,224,0.04); border: 1px solid var(--border-active); color: var(--cyan-primary); font-family: var(--font-mono); font-size: 12px; padding: 10px 14px; border-radius: 2px; text-align: center; cursor: pointer; transition: all var(--transition-smooth); }
.upload-block .upload-finished-details .upload-finished-message input:hover, .upload-block .upload-finished-details .upload-finished-message input:focus { border-color: var(--cyan-primary); box-shadow: 0 0 15px var(--cyan-glow); }
.upload-block .upload-verify-details { padding: 0 20px; }
.upload-block .upload-verify-details h1 { margin-bottom: 10px; }
.upload-block .upload-verify-details p { margin-bottom: 20px; color: var(--text-secondary); }
.upload-block .upload-verify-details p span { font-weight: 700; color: var(--cyan-primary); }
.upload-block .upload-verify-details input { margin-bottom: 30px; background: rgba(0,255,224,0.04); border: 1px solid var(--border-active); border-radius: 2px; color: var(--cyan-primary); font-family: var(--font-mono); font-size: 16px; text-align: center; padding: 10px; letter-spacing: 8px; }

/* === SELECTED FILES === */
.selected-files { display: none; background: rgba(0,255,224,0.03); border-top-left-radius: 3px; border-top-right-radius: 3px; padding: 5px 15px; }
.selected-files.active { display: flex; flex-direction: column; flex-grow: 1; }
@media (max-width: 768px) { .selected-files { border-radius: 0 !important; } }
.selected-files ul { flex-grow: 1; list-style: none; padding: 0; margin: 0; }
.selected-files ul li { position: relative; display: flex; justify-content: center; flex-wrap: wrap; height: 40px; padding: 0 10px; width: 100%; border-bottom: 1px solid var(--border-subtle); font-size: 12px; align-items: center; transition: background var(--transition-smooth); }
.selected-files ul li:hover { background: rgba(0,255,224,0.05); }
.selected-files ul li span { display: block; width: 100%; text-align: left; }
.selected-files ul li span.name { font-family: var(--font-mono); font-size: 12px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text-primary); }
.selected-files ul li span.size { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); }
.selected-files ul li span.delete { position: absolute; display: none; right: 5px; top: 9px; color: var(--red-alert); cursor: pointer; font-size: 11px; font-weight: 700; }
.selected-files ul li:hover span.delete { display: block; }
.selected-files ul li:last-child input, .selected-files ul li:last-child textarea { border-bottom: none; }
.selected-files .stats { display: flex; align-items: center; justify-content: center; margin: 5px 0; }
.selected-files .stats span { display: block; font-size: 10px; flex-grow: 1; text-align: center; font-family: var(--font-mono); color: var(--text-dim); }
.selected-files .add-buttons { display: flex; width: 100%; }
.selected-files .add-buttons .button { flex-grow: 1; padding: 2px; font-size: 10px; }
.selected-files .add-buttons .button:first-child { margin-right: 2.5px; }
.selected-files .add-buttons .button:last-child { margin-left: 2.5px; }
.selected-files.with-preview { margin-top: 60px; justify-content: center; }
@media (max-width: 768px) { .selected-files.with-preview { position: absolute; width: 100%; bottom: 70px; margin-top: 0; } }
.selected-files.with-preview .stats span:first-child { text-align: left; font-size: 10px; padding-left: 10px; }
.selected-files.with-preview .stats span:last-child { text-align: right; font-size: 14px; padding-right: 10px; color: var(--cyan-primary); font-weight: 600; }
.selected-files button { margin-top: 5px; }

/* === LOGIN BLOCK === */
.login-block { position: fixed; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, var(--bg-panel-solid), rgba(6,14,22,0.98)); width: 40%; max-width: 800px; min-width: 400px; top: 0; left: 0; bottom: 0; border-right: 1px solid var(--border-subtle); }
.login-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 49.5%, rgba(0,255,224,0.02) 49.5%, rgba(0,255,224,0.02) 50.5%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(0,255,224,0.02) 49.5%, rgba(0,255,224,0.02) 50.5%, transparent 50.5%); background-size: 60px 60px; pointer-events: none; opacity: 0.3; }
@media (max-width: 768px) { .login-block { position: relative; top: unset; left: unset; bottom: unset; height: 100vh; width: 100%; max-width: 100%; min-width: 100%; border-right: none; } }
.login-block form { display: block; width: 50%; min-width: 300px; position: relative; z-index: 1; }
.login-block form .logo { display: block; max-width: 250px; height: auto; margin: 0 auto 50px auto; filter: drop-shadow(0 0 15px var(--cyan-glow)); }
@media (max-width: 768px) { .login-block form .logo { margin: 0 auto 30px auto; } }
.login-block form .button { border-radius: 2px; margin-top: 25px; width: 100%; }
.login-block form .field { margin-top: 15px; }
.login-block form .field .input { background: rgba(0,255,224,0.03); border: 1px solid var(--border-subtle); color: var(--text-primary); font-family: var(--font-mono); }
.login-block form .field .input:focus { border-color: var(--cyan-primary); box-shadow: 0 0 12px var(--cyan-glow); }

/* === ADS === */
.ad-bottom { position: fixed; bottom: 0; left: calc(50% - 364px); width: 728px; height: 90px; }
@media (max-width: 768px) { .ad-bottom { display: none; } }
.ad-sidebar { position: fixed; right: 0; top: calc(50% - 300px); width: 160px; height: 600px; }
@media (max-width: 768px) { .ad-sidebar { display: none; } }
.mobile-ad-block { display: none; width: 100vw; overflow-x: hidden; }
@media (max-width: 768px) { .mobile-ad-block { display: block; } }

/* === FILE GALLERY === */
.tab .files { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; gap: 16px; }
.tab .files .file { position: relative; display: inline-block; border: 1px solid var(--border-subtle); border-radius: 3px; text-align: center; flex-grow: 1; width: 400px; background: var(--bg-surface); overflow: hidden; transition: all var(--transition-smooth); }
.tab .files .file:hover { border-color: var(--border-active); box-shadow: 0 0 20px var(--cyan-glow), 0 4px 20px rgba(0,0,0,0.3); transform: translateY(-2px); }
.tab .files .file .file-content-block { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 150px; max-height: 250px; background: rgba(0,255,224,0.02); }
.tab .files .file a { text-decoration: none; color: var(--text-primary); }
.tab .files .file img { width: auto; height: auto; max-height: 250px; padding: 5px; }
.tab .files .file .file-details { position: relative; display: inline-flex; box-sizing: border-box; background: var(--bg-panel); padding: 10px 12px; border-top: 1px solid var(--border-subtle); text-align: left; width: 0; min-width: 100%; }
.tab .files .file .file-details .details { max-width: 80%; }
.tab .files .file .file-details .details .name { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 13px; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.tab .files .file .file-details .details .size { display: block; font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.tab .files .file .file-details .download { display: block; color: var(--cyan-primary); margin: 4px 5px 0 auto; font-size: 22px; transition: all var(--transition-smooth); }
.tab .files .file .file-details .download:hover { color: var(--text-bright); text-shadow: 0 0 12px var(--cyan-glow); transform: scale(1.1); }
.tab .files .file .file-details .play { display: block; color: var(--cyan-primary); margin: 7px 5px 0 10px; font-size: 18px; }

/* === VIDEO MODAL === */
.video-modal { position: relative; width: 80%; height: 80%; overflow: hidden; border: 1px solid var(--border-active); border-radius: 3px; box-shadow: 0 0 40px rgba(0,255,224,0.1); }
.modal-background { background: rgba(2,6,9,0.92) !important; backdrop-filter: blur(8px); }
.modal-close { background: var(--bg-panel) !important; border: 1px solid var(--border-subtle); }
.modal-close::before, .modal-close::after { background-color: var(--text-secondary) !important; }
.modal-close:hover { border-color: var(--red-alert); }
.modal-close:hover::before, .modal-close:hover::after { background-color: var(--red-alert) !important; }

/* === CONTACT FORM === */
.contact-form .field .label { color: var(--text-secondary); }
.contact-form .field .input, .contact-form .field .textarea { background: rgba(0,255,224,0.03); border: 1px solid var(--border-subtle); color: var(--text-primary); font-family: var(--font-mono); }
.contact-form .field .input:focus, .contact-form .field .textarea:focus { border-color: var(--cyan-primary); box-shadow: 0 0 12px var(--cyan-glow); }

/* === LANGUAGE PICKER === */
#languagePicker { background: var(--bg-panel); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; padding: 4px 8px; border-radius: 2px; cursor: pointer; }
#languagePicker:focus { border-color: var(--cyan-primary); outline: none; }

/* === UTILITIES === */
.glitch-text { position: relative; animation: glitchFlicker 3s infinite; }
.text-glow { text-shadow: 0 0 10px var(--cyan-glow), 0 0 25px rgba(0,255,224,0.12); }
.border-glow { border-color: var(--cyan-primary) !important; box-shadow: 0 0 12px var(--cyan-glow); }
video { border: 1px solid var(--border-subtle); border-radius: 2px; background: #000; }

/* === PRINT === */
@media print { body::before, body::after { display: none !important; } .background, .tabs, .mobile-nav { display: none !important; } }

/* ═══════════════════════════════════════════════════
   DROPEALO v1.0.1 — UNIQUE ELEMENTS
   Terminal HUD Interface — by iNTERVOLUTIONS
   ═══════════════════════════════════════════════════ */

/* === TERMINAL HEADER BAR === */
.terminal-header {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: linear-gradient(90deg, rgba(0,255,224,0.06), rgba(6,16,24,0.98), rgba(26,143,255,0.04));
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  z-index: 6;
  flex-shrink: 0;
}
.terminal-header .terminal-dots {
  display: flex;
  gap: 6px;
  margin-right: 14px;
}
.terminal-header .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.8;
}
.terminal-header .dot-red { background: #ff5f57; }
.terminal-header .dot-yellow { background: #ffbd2e; }
.terminal-header .dot-green { background: #28c840; }
.terminal-header .terminal-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 2px;
  flex-grow: 1;
}
.terminal-header .terminal-status {
  color: var(--cyan-dim);
  font-size: 13px;
  opacity: 0.6;
}

/* === HUD SIDEBARS === */
.hud-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  z-index: 2;
}
.hud-sidebar.hud-left {
  margin-right: 24px;
}
.hud-sidebar.hud-right {
  margin-left: 24px;
  justify-content: flex-start;
}
@media (max-width: 768px) {
  .hud-sidebar { display: none !important; }
}

.hud-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  min-width: 80px;
  backdrop-filter: blur(8px);
  transition: all var(--transition-smooth);
}
.hud-widget:hover {
  border-color: var(--border-active);
  box-shadow: 0 0 12px var(--cyan-glow);
}
.hud-widget .hud-label {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.hud-widget .hud-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 1px;
}
.hud-widget .hud-value.online {
  color: #28c840;
  text-shadow: 0 0 8px rgba(40,200,64,0.4);
}

.hud-line-vert {
  width: 1px;
  flex-grow: 1;
  background: linear-gradient(180deg, var(--border-active), transparent);
  opacity: 0.3;
  min-height: 40px;
}

/* === DOWNLOAD READY ICON (replaces PNG icons) === */
.download-ready-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 10px;
  font-size: 32px;
  color: var(--cyan-primary);
  background: rgba(0,255,224,0.06);
  border: 2px solid var(--border-active);
  box-shadow: 0 0 20px var(--cyan-glow), inset 0 0 15px rgba(0,255,224,0.03);
  animation: glowPulse 3s ease-in-out infinite;
}
.download-ready-icon.started {
  color: #28c840;
  border-color: rgba(40,200,64,0.4);
  background: rgba(40,200,64,0.06);
  box-shadow: 0 0 20px rgba(40,200,64,0.2);
}
.download-ready-icon.error-state {
  color: var(--red-alert);
  border-color: rgba(255,48,68,0.3);
  background: rgba(255,48,68,0.06);
  box-shadow: 0 0 20px var(--red-glow);
  animation: none;
}

/* === LOGIN TERMINAL WRAPPER === */
.login-block {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  background: transparent;
  z-index: 2;
}
.login-terminal {
  background: linear-gradient(170deg, rgba(6,16,24,0.96), rgba(8,20,32,0.92));
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  width: 380px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  animation: glowPulseIntense 5s ease-in-out infinite;
  position: relative;
}
.login-terminal::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-primary), var(--blue-accent), var(--magenta-accent), transparent);
  z-index: 5;
}
.login-terminal form {
  padding: 30px 30px 20px;
}
.login-terminal form .logo {
  display: block;
  max-width: 220px;
  height: auto;
  margin: 0 auto 30px;
  filter: drop-shadow(0 0 12px var(--cyan-glow));
}
.login-terminal form .button {
  margin-top: 20px;
  width: 100%;
}
.login-terminal form .field {
  margin-top: 14px;
}
.login-terminal form .field .input {
  background: rgba(0,255,224,0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.login-terminal form .field .input:focus {
  border-color: var(--cyan-primary);
  box-shadow: 0 0 12px var(--cyan-glow);
}
.login-footer-copy {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  text-align: center;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-subtle);
  letter-spacing: 0.5px;
  background: rgba(0,255,224,0.02);
}
@media (max-width: 768px) {
  .login-terminal {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    animation: none;
  }
}

/* === FOOTER === */
.dropealo-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}
.dropealo-footer .footer-inner {
  pointer-events: auto;
  padding: 0 20px 8px;
}
.dropealo-footer .footer-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
  margin-bottom: 8px;
}
.dropealo-footer .footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dropealo-footer .footer-copy,
.dropealo-footer .footer-theme {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.dropealo-footer .footer-copy strong,
.dropealo-footer .footer-theme strong {
  color: var(--text-secondary);
  font-weight: 400;
}
.dropealo-footer .footer-separator {
  color: var(--border-subtle);
  font-size: 9px;
}
@media (max-width: 768px) {
  .dropealo-footer { display: none; }
}

/* === OVERRIDE: Upload block now uses the terminal header === */
.upload-block .upload-block-inner {
  height: 520px;
}
.upload-block.with-logo .upload-block-inner {
  height: 600px;
}

/* Button icons spacing */
.button i.lni { margin-right: 6px; }
.button.options i.lni { margin-right: 0; }

/* Download page: replace old PNG icons with CSS icons */
.upload-block .upload-block-content#download .block-icon { display: none; }
.upload-block .upload-block-content#download .block-icon.sm { display: none; }

/* ═══════════════════════════════════════════════════
   CINEMATIC FAKE TERMINAL — The Star of the Show
   ═══════════════════════════════════════════════════ */

@keyframes terminalBoot {
  0% { opacity: 0; transform: scaleY(0.01); }
  30% { opacity: 1; transform: scaleY(0.01); }
  50% { transform: scaleY(1.02); }
  70% { transform: scaleY(0.98); }
  100% { transform: scaleY(1); }
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes termCursorBlink {
  0%, 100% { border-right-color: var(--cyan-primary); }
  50% { border-right-color: transparent; }
}

@keyframes matrixRain {
  0% { background-position: 0 0; }
  100% { background-position: 0 1000px; }
}

.cyber-terminal {
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 420px;
  height: 520px;
  margin-left: 28px;
  background: linear-gradient(170deg, rgba(3,8,12,0.97), rgba(5,12,18,0.95));
  border: 1px solid rgba(0,255,224,0.12);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  animation: terminalBoot 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0.5s;
  box-shadow:
    0 0 30px rgba(0,255,224,0.06),
    0 0 60px rgba(0,0,0,0.4),
    inset 0 0 60px rgba(0,255,224,0.01);
}
/* Subtle CRT curvature illusion */
.cyber-terminal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
  z-index: 10;
}
/* Top accent bar */
.cyber-terminal::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-primary), var(--blue-accent), transparent);
  z-index: 11;
}

@media (max-width: 1200px) {
  .cyber-terminal { width: 340px; max-width: 340px; }
}
@media (max-width: 900px) {
  .cyber-terminal { display: none !important; }
}

/* Terminal header */
.cyber-terminal-header {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  background: rgba(0,255,224,0.04);
  border-bottom: 1px solid rgba(0,255,224,0.08);
  flex-shrink: 0;
  z-index: 2;
}
.cyber-terminal-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  flex-grow: 1;
  margin-left: 10px;
}
.cyber-terminal-badge {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ff3044;
  background: rgba(255,48,68,0.12);
  border: 1px solid rgba(255,48,68,0.3);
  padding: 1px 8px;
  border-radius: 2px;
  animation: livePulse 2s ease-in-out infinite;
}

/* Terminal body */
.cyber-terminal-body {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  scrollbar-width: none;
  position: relative;
}
.cyber-terminal-body::-webkit-scrollbar { display: none; }

/* Scanline on terminal body */
.cyber-terminal-body::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0,255,224,0.015) 1px,
    rgba(0,255,224,0.015) 2px
  );
  pointer-events: none;
  z-index: 1;
}

/* Terminal output lines */
.cyber-terminal-output {
  position: relative;
  z-index: 2;
}

.term-line {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre;
  padding: 0;
  margin: 0;
  transition: opacity 0.3s, height 0.3s;
  overflow: hidden;
}
.term-line.typing {
  border-right: 2px solid var(--cyan-primary);
  animation: termCursorBlink 0.7s step-end infinite;
  padding-right: 2px;
}

/* Line type colors */
.term-sys {
  color: var(--text-dim);
}
.term-cmd {
  color: var(--cyan-primary);
  font-weight: 400;
  margin-top: 8px;
  margin-bottom: 2px;
  text-shadow: 0 0 6px var(--cyan-glow);
}
.term-ok {
  color: #28c840;
}
.term-warn {
  color: var(--yellow-warn);
}
.term-info {
  color: var(--text-secondary);
}
.term-data {
  color: var(--blue-accent);
}
.term-ascii {
  color: var(--cyan-dim);
  font-size: 9px;
  line-height: 1.3;
  opacity: 0.8;
}

/* Status bar */
.cyber-terminal-statusbar {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  background: rgba(0,255,224,0.03);
  border-top: 1px solid rgba(0,255,224,0.08);
  gap: 14px;
  flex-shrink: 0;
  z-index: 2;
}
.statusbar-item {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.statusbar-item i { font-size: 10px; color: var(--cyan-dim); }
.statusbar-item.session-id { margin-left: auto; }

/* === Adjust upload-block for terminal layout === */
.upload-block {
  gap: 0;
  margin-left: 40px;
}
@media (max-width: 768px) {
  .upload-block { margin-left: 0; }
}

/* When tooltip needs to show, position it floating */
.upload-block > .upload-block-tooltip {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  margin: 0;
  z-index: 20;
}
@media (max-width: 768px) {
  .upload-block > .upload-block-tooltip {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    border-radius: 0;
    height: 60px;
  }
}