/* =========================================
   DROP-BBB complete neon theme
   final mobile-friendly version
   ========================================= */

:root{
  --bg-top:#060914;
  --bg-mid:#05070f;
  --bg-bottom:#020308;

  --text:#f3f7ff;
  --muted:rgba(233,239,255,.72);

  --panel:rgba(8,11,22,.78);

  --line-soft:rgba(118,164,255,.22);
  --line-strong:rgba(120,190,255,.92);

  --btn-a:#6f8dff;
  --btn-b:#b07dff;
}

.noise{
  display:none !important;
}

body{
  color:var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(55,90,255,.18) 0%, rgba(55,90,255,0) 28%),
    radial-gradient(circle at 50% 24%, rgba(92,133,255,.12) 0%, rgba(92,133,255,0) 30%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.80) 0 1px, transparent 1.6px),
    radial-gradient(circle at 28% 12%, rgba(255,255,255,.55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 16%, rgba(255,255,255,.70) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 26%, rgba(255,255,255,.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 18% 44%, rgba(255,255,255,.55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 66% 42%, rgba(255,255,255,.52) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 58%, rgba(255,255,255,.70) 0 1px, transparent 1.6px),
    radial-gradient(circle at 24% 70%, rgba(255,255,255,.50) 0 1px, transparent 1.6px),
    radial-gradient(circle at 62% 78%, rgba(255,255,255,.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 92% 68%, rgba(255,255,255,.50) 0 1px, transparent 1.6px);
}

.shell{
  max-width:760px;
  margin:0 auto;
  padding:22px 18px 36px;
}

.hero-card{
  position:relative;
  overflow:hidden;
  border:none;
  border-radius:30px;
  background:transparent;
  box-shadow:none;
  padding-top:10px;
}

.brand-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  margin-bottom:10px;
}

.brand-row-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:18px;
}

.site-logo-image{
  display:block;
  width:min(100%, 420px);
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 0 18px rgba(90,160,255,.18))
    drop-shadow(0 0 38px rgba(90,160,255,.10));
}

.brand-mark{
  position:relative;
  width:92px;
  height:92px;
  min-width:92px;
  border-radius:0;
  background:transparent;
  color:transparent;
  box-shadow:none;
  overflow:visible;
}

.brand-mark::before{
  content:"";
  position:absolute;
  inset:16px;
  border:3px solid #7eb6ff;
  transform:rotate(45deg);
  border-radius:10px;
  box-shadow:
    0 0 18px rgba(107,177,255,.95),
    0 0 40px rgba(107,177,255,.28);
}

.brand-mark::after{
  content:"";
  position:absolute;
  width:34px;
  height:34px;
  left:50%;
  top:50%;
  transform:translate(-50%,-42%) rotate(45deg);
  background:linear-gradient(135deg,#6fd7ff 0%, #6b8fff 56%, #b680ff 100%);
  border-radius:6px;
  box-shadow:0 0 12px rgba(107,177,255,.55);
}

.eyebrow{
  margin:0 0 8px;
  color:rgba(212,225,255,.88);
  letter-spacing:.20em;
  font-size:12px;
  font-weight:600;
}

h1{
  margin:0;
  font-size:56px;
  line-height:1;
  letter-spacing:.02em;
  font-weight:900;
  color:#eef5ff;
  text-transform:uppercase;
  text-shadow:
    0 0 10px rgba(110,172,255,.55),
    0 0 25px rgba(110,172,255,.15);
}

.subtitle{
  margin:10px 0 0;
  font-size:22px;
  line-height:1.25;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(221,231,255,.82);
}

.feature-pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:18px 0 24px;
}

.feature-pills span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:12px 20px;
  line-height:1;
  font-size:16px;
  border-radius:999px;
  background:rgba(18,24,40,.72);
  border:1px solid rgba(126,152,255,.16);
  color:rgba(236,242,255,.84);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 12px rgba(90,110,255,.04);
}

.glass-inner,
.file-panel,
.result-card,
.access-box,
.download-card{
  background:var(--panel);
  border:1px solid rgba(128,162,255,.14);
  border-radius:26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 30px rgba(0,0,0,.28);
}

.uploader{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

.drop-zone{
  position:relative;
  padding:42px 28px 34px;
  border-radius:34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(83,145,255,.12) 0%, rgba(83,145,255,0) 40%),
    linear-gradient(180deg, rgba(12,18,36,.88) 0%, rgba(8,12,24,.94) 100%);
  border:2px solid var(--line-strong);
  box-shadow:
    0 0 18px rgba(70,160,255,.45),
    0 0 38px rgba(70,160,255,.18),
    inset 0 0 18px rgba(70,160,255,.08);
  text-align:center;
  overflow:visible;
}

.drop-zone::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:40px;
  border:2px solid rgba(120,190,255,.92);
  box-shadow:
    0 0 14px rgba(90,190,255,.70),
    0 0 32px rgba(90,190,255,.35);
  pointer-events:none;
}

.drop-zone::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:28px;
  border:1px solid rgba(150,210,255,.35);
  pointer-events:none;
}

.drop-zone h2{
  margin:14px 0 10px;
  font-size:34px;
  line-height:1.2;
  font-weight:800;
  color:#f6f9ff;
  text-shadow:0 0 12px rgba(88,176,255,.12);
}

.drop-zone p{
  margin:0 0 24px;
  font-size:18px;
  line-height:1.5;
  color:rgba(224,233,255,.82);
}

.drop-icon{
  width:104px;
  height:104px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border-radius:28px;
  background:rgba(255,255,255,.04);
  color:#d8e6ff;
  font-size:46px;
  text-shadow:0 0 12px rgba(107,177,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.primary-btn{
  border:none;
  border-radius:28px;
  background:linear-gradient(90deg, var(--btn-a) 0%, var(--btn-b) 100%);
  color:#fff;
  font-weight:800;
  box-shadow:
    0 10px 24px rgba(105,126,255,.22),
    0 0 12px rgba(127,131,255,.16);
}

#pickButton{
  min-width:320px;
  min-height:88px;
  font-size:30px;
  letter-spacing:.02em;
}

.file-panel{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:28px;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.progress-wrap{
  order:1;
  margin-top:0;
}

.file-main{
  order:2;
  margin-bottom:0;
}

.file-name{
  margin:0 0 4px;
  font-size:28px;
  line-height:1.25;
  font-weight:800;
  color:#f7f9ff;
}

.file-meta{
  font-size:18px;
  color:rgba(225,233,255,.70);
}

.ghost-btn,
.anchor-btn{
  border-radius:24px;
  background:rgba(15,20,36,.88);
  color:#eef3ff;
  border:1px solid rgba(120,154,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

#resetButton{
  width:100%;
  min-height:78px;
  margin-top:18px;
  font-size:28px;
  font-weight:800;
  border-radius:26px;
}

.progress-bar{
  height:22px;
  border-radius:999px;
  background:rgba(15,20,36,.88);
  border:none;
  overflow:hidden;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.45),
    0 0 10px rgba(65,150,255,.08);
}

.progress-bar span{
  background:linear-gradient(90deg, #74e8ff 0%, #7a93ff 48%, #c970ff 100%);
  box-shadow:
    0 0 16px rgba(96,147,255,.28),
    0 0 28px rgba(180,105,255,.18);
}

.progress-row{
  margin-top:10px;
  font-size:18px;
  color:rgba(229,236,255,.84);
}

#progressPercent{
  font-size:22px;
  font-weight:800;
}

#uploadButton{
  display:none !important;
}

.result-card{
  position:relative;
  margin-top:26px;
  padding:24px 22px 22px;
  border-radius:30px;
  background:
    linear-gradient(180deg, rgba(13,18,34,.92) 0%, rgba(8,11,22,.95) 100%);
  border:1px solid rgba(122,156,255,.28);
  box-shadow:
    0 0 18px rgba(72,140,255,.16),
    0 0 32px rgba(179,101,255,.12),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.result-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(85,226,255,0) 0%, rgba(85,226,255,.42) 6%, rgba(85,226,255,0) 12%) top left/100% 2px no-repeat,
    linear-gradient(90deg, rgba(130,105,255,0) 0%, rgba(190,105,255,.42) 80%, rgba(190,105,255,0) 100%) bottom right/100% 2px no-repeat;
}

.section-label{
  margin-bottom:14px;
  font-size:16px;
  letter-spacing:.20em;
  color:rgba(223,232,255,.88);
}

/* スマホは縦並び */
.url-box{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:14px !important;
  background:none;
  border:none;
  box-shadow:none;
  padding:0;
}

.url-input{
  width:100% !important;
  min-height:auto !important;
  height:auto !important;
  border-radius:22px;
  border:1px solid rgba(120,154,255,.22);
  background:rgba(13,18,34,.88);
  color:#f2f6ff;
  font-size:18px;
  line-height:1.5 !important;
  padding:18px 16px;
  white-space:normal !important;
  word-break:break-all !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

#copyButton{
  width:100% !important;
  min-height:78px;
  margin-top:0 !important;
  font-size:28px;
  font-weight:800;
  border-radius:24px;
  grid-column:auto !important;
}

#shareButton,
#downloadPageButton,
.result-actions{
  display:none !important;
}

.qr-wrap{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  grid-column:auto !important;
  grid-row:auto !important;
  margin-top:10px;
  position:relative;
}

.qr-image{
  width:180px !important;
  max-width:100%;
  border-radius:20px;
  background:#fff;
  padding:10px;
  box-shadow:
    0 0 25px rgba(84,184,255,.60),
    0 0 50px rgba(84,184,255,.20);
}

.qr-wrap::before{
  content:"";
  position:absolute;
  inset:-12px -12px -12px -12px;
  border-radius:24px;
  border:2px solid rgba(120,190,255,.85);
  box-shadow:
    0 0 14px rgba(84,184,255,.65),
    0 0 28px rgba(84,184,255,.18);
  pointer-events:none;
}

.qr-wrap::after{
  content:"SCAN TO DOWNLOAD";
  display:block;
  margin-top:10px;
  font-size:15px;
  letter-spacing:.14em;
  color:rgba(224,233,255,.88);
}

.result-note{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:18px;
  color:rgba(226,234,255,.80);
}

#progressText{
  font-weight:700;
}

.mini-notes{
  display:none !important;
}

.text-input{
  border-radius:22px;
  min-height:64px;
  font-size:20px;
  background:rgba(10,14,28,.90);
  border:1px solid rgba(122,156,255,.22);
  color:#fff;
}

.download-shell .hero-card{
  padding-top:0;
}

.download-card{
  border-radius:30px;
  background:
    linear-gradient(180deg, rgba(13,18,34,.92) 0%, rgba(8,11,22,.95) 100%);
  border:1px solid rgba(122,156,255,.24);
}

.download-title{
  font-size:32px;
  line-height:1.25;
  color:#f6f9ff;
}

.download-meta-grid{
  gap:14px;
}

.download-meta-grid > div{
  background:rgba(13,18,34,.84);
  border:1px solid rgba(120,154,255,.16);
  border-radius:20px;
}

.download-meta-grid span{
  color:rgba(224,233,255,.58);
}

.download-meta-grid strong{
  color:#f5f8ff;
}

.toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translateX(-50%) translateY(20px);
  background:rgba(10,14,28,.96);
  color:#fff;
  padding:14px 18px;
  border-radius:16px;
  border:1px solid rgba(122,156,255,.22);
  box-shadow:
    0 14px 36px rgba(0,0,0,.30),
    0 0 14px rgba(84,184,255,.10);
  opacity:0;
  transition:all .25s ease;
  z-index:9999;
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@media (max-width: 640px){
  .shell{
    padding:16px 14px 28px;
  }

  .site-logo-image{
    width:min(100%, 320px);
  }

  h1{
    font-size:34px;
  }

  .subtitle{
    font-size:13px;
    letter-spacing:.16em;
  }

  .feature-pills{
    gap:8px;
    margin:14px 0 20px;
  }

  .feature-pills span{
    padding:10px 16px;
    font-size:14px;
  }

  .drop-zone{
    padding:34px 18px 24px;
    border-radius:28px;
  }

  .drop-zone::before{
    inset:-10px;
    border-radius:34px;
    border-width:2px;
  }

  .drop-zone::after{
    inset:8px;
    border-radius:22px;
  }

  .drop-zone h2{
    font-size:26px;
  }

  .drop-zone p{
    font-size:16px;
    margin-bottom:18px;
  }

  .drop-icon{
    width:82px;
    height:82px;
    font-size:34px;
    border-radius:22px;
  }

  #pickButton{
    min-width:0;
    width:100%;
    min-height:72px;
    font-size:24px;
    border-radius:22px;
  }

  .file-name{
    font-size:22px;
  }

  .file-meta{
    font-size:16px;
  }

  #resetButton{
    min-height:64px;
    font-size:22px;
    border-radius:22px;
  }

  .progress-bar{
    height:16px;
  }

  .progress-row{
    font-size:16px;
  }

  #progressPercent{
    font-size:18px;
  }

  .result-card{
    padding:18px 16px 18px;
    border-radius:24px;
  }

  .url-input{
    font-size:15px;
    padding:16px 14px;
  }

  #copyButton{
    min-height:60px;
    font-size:20px;
    border-radius:18px;
  }

  .qr-image{
    width:180px !important;
    max-width:100%;
    border-radius:14px;
    padding:7px;
  }

  .qr-wrap::before{
    inset:-6px -6px -6px -6px;
    border-radius:18px;
  }

  .qr-wrap::after{
    margin-top:6px;
    font-size:11px;
    letter-spacing:.10em;
  }

  .result-note{
    font-size:16px;
    margin-top:18px;
    padding-top:14px;
  }
}
.download-shell .primary-btn{
  background:linear-gradient(90deg,#6f8dff 0%,#b07dff 100%);
  color:#fff;
  font-weight:800;
  border:none;
  border-radius:28px;
  box-shadow:
    0 10px 24px rgba(105,126,255,.30),
    0 0 18px rgba(127,131,255,.35);
}

.download-shell .primary-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 28px rgba(105,126,255,.40),
    0 0 28px rgba(127,131,255,.45);
}
.download-shell .primary-btn{
  min-height:80px;
  font-size:28px;
}
/* ===============================
   DOWNLOAD BUTTON 強調
   =============================== */

.download-shell a[href*="file=1"]{
  display:block;
  width:100%;
  text-align:center;

  background:linear-gradient(90deg,#6f8dff 0%,#b07dff 100%) !important;
  color:#fff !important;

  font-size:26px;
  font-weight:800;

  padding:22px 20px;
  border-radius:28px;

  box-shadow:
    0 12px 30px rgba(110,140,255,.35),
    0 0 22px rgba(160,110,255,.35);

  border:none;
}

.download-shell a[href*="file=1"]:active{
  transform:scale(.98);
}
/* ============================
   DOWNLOAD PAGE FINAL UI
   ============================ */

/* ファイル名（控えめ） */
.download-title{
  font-size:20px !important;
  font-weight:600 !important;
  opacity:.7;
  margin-top:6px;
  margin-bottom:18px;
  text-align:center;
}

/* READYラベル */
.download-card .section-label{
  text-align:center;
  letter-spacing:.25em;
  font-size:14px;
  opacity:.7;
}

/* サイズなどの情報カード */
.download-meta-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:26px;
}

/* 各情報ボックス */
.download-meta-grid > div{
  background:rgba(15,20,36,.88);
  border:1px solid rgba(120,154,255,.15);
  border-radius:20px;
  padding:18px 20px;
  text-align:center;
}

/* ラベル */
.download-meta-grid span{
  display:block;
  font-size:14px;
  opacity:.6;
  margin-bottom:6px;
}

/* 値 */
.download-meta-grid strong{
  font-size:22px;
  font-weight:800;
  color:#ffffff;
}

/* サイズだけ強調 */
.download-meta-grid div:first-child strong{
  font-size:28px;
  color:#9fd0ff;
  text-shadow:
    0 0 10px rgba(100,170,255,.6),
    0 0 20px rgba(100,170,255,.25);
}

/* ============================
   DOWNLOAD BUTTON
   ============================ */

.download-shell a[href*="file=1"]{
  display:block;
  width:100%;
  text-align:center;

  background:linear-gradient(90deg,#6f8dff 0%,#b07dff 100%) !important;
  color:#fff !important;

  font-size:28px;
  font-weight:800;

  padding:24px 20px;
  border-radius:28px;

  box-shadow:
    0 12px 30px rgba(110,140,255,.35),
    0 0 25px rgba(160,110,255,.35);

  border:none;
  margin-top:8px;

  transition:all .2s ease;
}

/* ボタンホバー */
.download-shell a[href*="file=1"]:active{
  transform:scale(.98);
}

/* Downloadテキスト強調 */
.download-shell a[href*="file=1"]::before{
  content:"⬇ ";
}

/* 注意テキスト */
.result-note{
  margin-top:20px;
  text-align:center;
  font-size:16px;
  opacity:.7;
}

/* スマホ最適化 */
@media (max-width:640px){

  .download-title{
    font-size:18px !important;
  }

  .download-meta-grid strong{
    font-size:20px;
  }

  .download-meta-grid div:first-child strong{
    font-size:26px;
  }

  .download-shell a[href*="file=1"]{
    font-size:24px;
    padding:20px;
  }

}
/* ============================
   VIDEO PREVIEW
   ============================ */

.video-preview{
  margin:20px 0 24px;
  border-radius:20px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(120,154,255,.18);
  box-shadow:
    0 0 20px rgba(80,140,255,.15),
    inset 0 0 10px rgba(80,140,255,.08);
}

.video-preview video{
  width:100%;
  display:block;
  border-radius:20px;
}