@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#080808;
  --panel:#11110f;
  --gold:#d8b866;
  --gold2:#f1dda2;
  --text:#f3eee2;
  --muted:#9b978e;
  --line:#4a3d22;
}

*{
  box-sizing:border-box
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  min-height:100vh;
}

.ambient{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(
    circle at 50% 28%,
    rgba(185,145,55,.09),
    transparent 34%
  );
}

.topbar{
  height:78px;
  border-bottom:1px solid #27231a;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 7%;
  position:relative;
  z-index:1;
}

.brand-mark{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#fff0b0,#8d6920);
  color:#111;
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:700;
  transform:rotate(-8deg);
}

.brand{
  letter-spacing:5px;
  font-family:Georgia,serif;
  font-size:14px
}

.shell{
  width:min(880px,92%);
  margin:0 auto;
  padding:80px 0 50px;
  text-align:center
}

.eyebrow{
  color:var(--gold);
  letter-spacing:6px;
  font-size:12px;
  margin-bottom:26px
}

h1{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(44px,8vw,78px);
  line-height:.9;
  font-weight:600;
}

h1 em{
  font-weight:500
}

.gold-line{
  width:220px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
  margin:35px auto
}

.lead{
  max-width:650px;
  margin:0 auto 38px;
  color:#aaa69e;
  line-height:1.9;
  font-size:16px
}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:650px;
  margin:0 auto 46px;
  border:1px solid #332b1d;
  border-radius:28px;
  overflow:hidden;
  background:#0d0d0c;
}

.stats div{
  padding:22px 10px;
  border-right:1px solid #332b1d
}

.stats div:last-child{
  border:0
}

.stats strong{
  display:block;
  font:600 30px Georgia,serif;
  color:var(--gold2)
}

.stats span{
  display:block;
  margin-top:5px;
  font-size:9px;
  letter-spacing:4px;
  color:#918b7d
}

.panel{
  background:linear-gradient(
    145deg,
    rgba(44,38,25,.82),
    rgba(12,12,11,.96)
  );
  border:1px solid #574827;
  border-radius:34px;
  padding:34px;
  box-shadow:0 20px 70px rgba(0,0,0,.45);
}

.panel h2{
  font:600 32px "Cormorant Garamond",Georgia,serif;
  margin:0 0 7px
}

.muted{
  color:#8f8a80;
  font-size:13px;
  line-height:1.6;
  margin:0 0 25px
}

.modes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:22px
}

.mode{
  cursor:pointer;
  border:1px solid #4d4026;
  background:#17150f;
  color:var(--text);
  border-radius:18px;
  padding:19px 10px;
  transition:.2s;
}

.mode:hover{
  transform:translateY(-2px);
  border-color:#a3843e
}

.mode.active{
  border-color:#d1ae5c;
  box-shadow:0 0 0 1px #8b6d2c inset
}

.mode.locked{
  opacity:.76
}

.mode b{
  display:block;
  font:600 30px Georgia,serif;
  color:var(--gold2)
}

.mode span{
  display:block;
  margin:5px 0 9px;
  font-size:12px;
  color:#aaa
}

.mode small{
  color:var(--gold);
  letter-spacing:2px;
  font-size:9px
}

.unlock{
  text-align:left;
  padding:18px;
  border:1px dashed #66532b;
  border-radius:18px;
  margin-bottom:18px;
  background:#0e0d0b
}

.unlock-title{
  color:var(--gold2);
  font-size:11px;
  letter-spacing:3px
}

.unlock p{
  font-size:13px;
  color:#99948a
}

.unlock-row{
  display:flex;
  gap:8px
}

.unlock input{
  flex:1;
  background:#080808;
  border:1px solid #43391f;
  color:#eee;
  padding:14px;
  border-radius:10px;
  outline:none
}

.unlock button,
.process{
  border:0;
  border-radius:11px;
  background:linear-gradient(
    135deg,
    #c7a04f,
    #f0d58e
  );
  color:#16120a;
  font-weight:700;
  cursor:pointer
}

.unlock button{
  padding:0 20px
}

.message{
  font-size:12px;
  margin-top:10px;
  color:#d6bd78
}

/* ========================================= */
/* UPLOAD AREA                                */
/* ========================================= */

.dropzone{
  position:relative;
  border:1px dashed #6c5930;
  border-radius:26px;
  min-height:310px;
  display:grid;
  place-items:center;
  align-content:center;
  cursor:pointer;
  background:radial-gradient(
    circle,
    rgba(170,130,45,.08),
    transparent 55%
  );
  overflow:hidden;
}

.dropzone.drag{
  border-color:#e1c77f;
  background:rgba(190,150,60,.1)
}

.dropzone input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  z-index:5
}

.upload-placeholder{
  position:relative;
  z-index:1;
  pointer-events:none;
  padding:25px 15px;
}

.upload-icon{
  width:70px;
  height:70px;
  border:1px solid #76602f;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:42px;
  color:var(--gold2);
  margin:0 auto 15px
}

.dropzone h2{
  font:600 35px "Cormorant Garamond",Georgia,serif;
  margin:0
}

.dropzone p{
  color:#9b968c;
  margin:7px 0 15px
}

.dropzone span{
  font-size:10px;
  letter-spacing:3px;
  color:#706a5e
}

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

.preview-box{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  min-height:310px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.preview-image-wrap{
  position:relative;
  width:min(100%,560px);
  max-height:220px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  border-radius:17px;
  border:1px solid #4f4125;
  background:#050505;
  box-shadow:0 12px 35px rgba(0,0,0,.45);
}

.video-preview{
  display:block;
  max-width:100%;
  max-height:220px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.preview-badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:6px 10px;
  border-radius:8px;
  background:rgba(8,8,8,.78);
  border:1px solid rgba(216,184,102,.45);
  color:var(--gold2);
  font-size:9px;
  letter-spacing:2px;
  backdrop-filter:blur(5px);
}

.preview-info{
  width:min(100%,560px);
  margin-top:12px;
  text-align:left;
}

.preview-name{
  color:#eee;
  font-size:13px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.preview-meta{
  margin-top:5px;
  color:#9b968c;
  font-size:11px;
}

.preview-change{
  margin-top:9px;
  color:#756e61;
  font-size:10px;
  letter-spacing:1px;
}

/* ========================================= */
/* FILE INFO                                  */
/* ========================================= */

.file-info{
  margin-top:15px;
  text-align:left;
  border:1px solid #39301e;
  border-radius:15px;
  padding:16px;
  color:#aaa;
  font-size:12px;
  line-height:1.8
}

.file-info b{
  color:#eee
}

.process{
  width:100%;
  padding:18px;
  margin-top:18px;
  font-size:14px;
  letter-spacing:3px
}

.process:disabled{
  opacity:.45;
  cursor:not-allowed
}

.progress{
  margin-top:20px;
  text-align:left
}

.progress-label{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#aaa;
  margin-bottom:8px
}

.bar{
  height:6px;
  background:#252117;
  border-radius:10px;
  overflow:hidden
}

.bar i{
  display:block;
  width:12%;
  height:100%;
  background:var(--gold);
  transition:width .5s
}

.progress p{
  font-size:11px;
  color:#777
}

.result{
  margin-top:15px;
  color:#d8c181;
  font-size:13px;
  line-height:1.6
}

footer{
  margin-top:48px;
  color:#5e594f;
  font-size:9px;
  letter-spacing:3px
}

footer p{
  letter-spacing:0;
  font-size:12px;
  color:#777;
  margin:12px 0
}

footer strong{
  color:#c8ad6d
}

footer small{
  letter-spacing:0;
  color:#57534c
}

.hidden{
  display:none!important
}

@media(max-width:650px){

  .shell{
    padding-top:55px
  }

  .panel{
    padding:20px;
    border-radius:26px
  }

  .modes{
    gap:7px
  }

  .mode{
    padding:15px 5px
  }

  .mode b{
    font-size:24px
  }

  .mode small{
    letter-spacing:1px
  }

  .dropzone{
    min-height:260px
  }

  .dropzone h2{
    font-size:30px
  }

  .stats{
    margin-bottom:30px
  }

  .unlock-row{
    flex-direction:column
  }

  .unlock button{
    padding:13px
  }

  .preview-box{
    min-height:260px;
    padding:15px
  }

  .preview-image-wrap{
    max-height:175px
  }

  .video-preview{
    max-height:175px
  }

  .preview-name{
    font-size:12px
  }
}