*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --noir-black:#0a0a0a;
  --noir-red:#e50914;
  --noir-red-dim:#8b0000;
  --panel-bg:#111;
  --panel-border:#1e1e1e;
  --text-primary:#d4d4d4;
  --text-dim:#666;
  --surface:#181818;
  --surface-hover:#222;
}

html{font-size:14px}

body{
  background:var(--noir-black);
  color:var(--text-primary);
  font-family:'Noto Sans SC','Helvetica Neue',sans-serif;
  font-weight:300;
  min-height:100vh;
  overflow-x:hidden;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.site-header{
  padding:1.5rem 2.5rem;
  display:flex;
  align-items:center;
  gap:1.5rem;
  border-bottom:1px solid var(--panel-border);
  position:relative;
}

.site-header::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--noir-red) 20%,var(--noir-red) 80%,transparent);
  opacity:.4;
}

.logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.8rem;
  letter-spacing:.15em;
  color:var(--noir-red);
  display:flex;
  align-items:center;
  gap:.6rem;
  user-select:none;
}

.logo svg{width:28px;height:28px;fill:var(--noir-red)}

.header-sub{
  font-size:.75rem;
  color:var(--text-dim);
  letter-spacing:.3em;
  text-transform:uppercase;
  margin-top:2px;
}

.app-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  min-height:calc(100vh - 64px);
}

.control-panel{
  background:var(--panel-bg);
  border-right:1px solid var(--panel-border);
  padding:1.8rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  overflow-y:auto;
  max-height:calc(100vh - 64px);
  scrollbar-width:thin;
  scrollbar-color:var(--noir-red-dim) transparent;
}

.control-panel::-webkit-scrollbar{width:4px}
.control-panel::-webkit-scrollbar-thumb{background:var(--noir-red-dim);border-radius:2px}

.section{display:flex;flex-direction:column;gap:.8rem}

.section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.05rem;
  letter-spacing:.18em;
  color:var(--noir-red);
  padding-bottom:.4rem;
  border-bottom:1px solid var(--panel-border);
  display:flex;
  align-items:center;
  gap:.5rem;
}

.section-title svg{width:16px;height:16px;fill:var(--noir-red);opacity:.7}

.upload-zone{
  border:1px dashed var(--text-dim);
  border-radius:4px;
  padding:2rem 1rem;
  text-align:center;
  cursor:pointer;
  transition:all .3s;
  position:relative;
  overflow:hidden;
}

.upload-zone::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(229,9,20,.05),transparent);
  opacity:0;
  transition:opacity .3s;
}

.upload-zone:hover,
.upload-zone:focus-visible,
.upload-zone.drag-active{border-color:var(--noir-red)}

.upload-zone:hover::before,
.upload-zone:focus-visible::before,
.upload-zone.drag-active::before{opacity:1}

.upload-zone svg{
  width:36px;
  height:36px;
  fill:var(--text-dim);
  margin-bottom:.5rem;
  transition:fill .3s;
}

.upload-zone:hover svg,
.upload-zone:focus-visible svg,
.upload-zone.drag-active svg{fill:var(--noir-red)}

.upload-zone p{font-size:.8rem;color:var(--text-dim);line-height:1.6}

.upload-zone .file-name{
  font-size:.75rem;
  color:var(--noir-red);
  margin-top:.3rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.upload-zone:focus-visible,
.toggle:focus-visible,
.palette-swatch:focus-visible,
.save-btn:focus-visible,
.text-input:focus-visible,
input[type="color"]:focus-visible,
input[type="range"]:focus-visible{
  outline:2px solid rgba(229,9,20,.7);
  outline-offset:2px;
}

#fileInput{display:none}

.control-row{display:flex;flex-direction:column;gap:.35rem}

.control-row-inline{
  flex-direction:row;
  gap:8px;
  align-items:center;
}

.control-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.78rem;
  color:var(--text-dim);
}

.control-label-inline{flex:1}

.control-label span:last-child{
  font-family:'Bebas Neue',sans-serif;
  font-size:.9rem;
  color:var(--text-primary);
  letter-spacing:.05em;
}

input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:3px;
  background:var(--panel-border);
  border-radius:2px;
  border:none;
  cursor:pointer;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  background:var(--noir-red);
  border-radius:50%;
  border:2px solid var(--noir-black);
  box-shadow:0 0 6px rgba(229,9,20,.5);
  transition:transform .15s;
}

input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.25)}

input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  background:var(--noir-red);
  border-radius:50%;
  border:2px solid var(--noir-black);
  box-shadow:0 0 6px rgba(229,9,20,.5);
}

.toggle-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.8rem;
  color:var(--text-dim);
}

.toggle{
  width:40px;
  height:20px;
  background:var(--panel-border);
  border-radius:10px;
  position:relative;
  cursor:pointer;
  transition:background .25s;
  flex-shrink:0;
}

.toggle.active{background:var(--noir-red)}

.toggle::after{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  background:#fff;
  border-radius:50%;
  transition:transform .25s;
}

.toggle.active::after{transform:translateX(20px)}

.text-input{
  width:100%;
  padding:.55rem .7rem;
  background:var(--surface);
  border:1px solid var(--panel-border);
  border-radius:3px;
  color:var(--text-primary);
  font-family:'Noto Sans SC',sans-serif;
  font-size:.82rem;
  transition:border-color .2s;
}

.text-input:focus{border-color:var(--noir-red)}

#titleText{text-transform:uppercase}

.palette-grid{display:flex;flex-wrap:wrap;gap:6px}

.palette-swatch{
  width:36px;
  height:36px;
  border-radius:4px;
  border:2px solid transparent;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:border-color .2s,transform .15s;
  background:none;
}

.palette-swatch:hover{transform:scale(1.1)}

.palette-swatch.active{
  border-color:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.3);
}

.palette-swatch::before,
.palette-swatch::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
}

.palette-swatch::before{left:0}
.palette-swatch::after{right:0}

.color-input{
  width:32px;
  height:26px;
  border:none;
  background:none;
  cursor:pointer;
  padding:0;
}

.save-btn{
  margin-top:auto;
  padding:.85rem;
  background:var(--noir-red);
  color:#fff;
  border:none;
  border-radius:3px;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.1rem;
  letter-spacing:.2em;
  cursor:pointer;
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  position:relative;
  overflow:hidden;
}

.save-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
  opacity:0;
  transition:opacity .2s;
}

.save-btn:hover::before{opacity:1}
.save-btn:hover{box-shadow:0 0 20px rgba(229,9,20,.4)}
.save-btn:active{transform:scale(.98)}
.save-btn:disabled{opacity:.3;cursor:not-allowed}
.save-btn svg{width:18px;height:18px;fill:#fff}

.canvas-area{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  position:relative;
  background:
    radial-gradient(circle at 30% 40%,rgba(229,9,20,.03),transparent 60%),
    radial-gradient(circle at 70% 60%,rgba(229,9,20,.02),transparent 50%),
    var(--noir-black);
}

.canvas-area::after{
  content:'';
  position:absolute;
  inset:1.2rem;
  border:1px dashed transparent;
  border-radius:8px;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s,border-color .25s,background-color .25s;
}

.canvas-area.drag-active::after{
  opacity:1;
  border-color:rgba(229,9,20,.55);
  background:rgba(229,9,20,.04);
}

.canvas-wrapper{
  position:relative;
  max-width:100%;
  max-height:calc(100vh - 100px);
}

.canvas-wrapper canvas{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 100px);
  object-fit:contain;
  box-shadow:
    0 0 0 1px rgba(229,9,20,.15),
    0 20px 60px rgba(0,0,0,.8),
    0 0 80px rgba(229,9,20,.06);
}

.empty-state{
  text-align:center;
  user-select:none;
  animation:fadeIn .8s ease;
}

.empty-state .icon-large{
  width:80px;
  height:80px;
  fill:var(--panel-border);
  margin-bottom:1.2rem;
  animation:pulse 3s ease-in-out infinite;
}

.empty-state h2{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  font-weight:700;
  font-style:italic;
  color:var(--text-dim);
  margin-bottom:.5rem;
}

.empty-state p{font-size:.8rem;color:var(--text-dim);opacity:.6}

@keyframes pulse{
  0%,100%{opacity:.3;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.05)}
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

@media(max-width:860px){
  .site-header{padding:1rem 1.2rem;gap:.8rem;flex-wrap:wrap}
  .logo{font-size:1.4rem}
  .header-sub{font-size:.65rem;letter-spacing:.2em}

  .app-layout{
    grid-template-columns:1fr;
    grid-template-rows:1fr auto;
  }

  .canvas-area{
    order:-1;
    padding:1rem;
    min-height:40vh;
  }

  .canvas-wrapper canvas{max-height:50vh}
  .empty-state h2{font-size:1.2rem}
  .empty-state .icon-large{width:56px;height:56px}

  .control-panel{
    max-height:none;
    border-right:none;
    border-top:1px solid var(--panel-border);
    border-bottom:none;
    padding:1.2rem 1rem;
    gap:1.2rem;
    position:relative;
  }

  .control-panel::before{
    content:'';
    display:block;
    width:36px;
    height:4px;
    background:var(--text-dim);
    opacity:.3;
    border-radius:2px;
    margin:0 auto .5rem;
  }

  input[type="range"]{height:6px}
  input[type="range"]::-webkit-slider-thumb{width:22px;height:22px;border-width:3px}
  input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-width:3px}
  .toggle{width:48px;height:26px}
  .toggle::after{width:20px;height:20px;top:3px;left:3px}
  .toggle.active::after{transform:translateX(22px)}

  .section-title{font-size:.95rem}
  .control-label{font-size:.82rem}
  .toggle-row{font-size:.82rem;min-height:36px}
  .text-input{padding:.7rem;font-size:.9rem}
  .upload-zone{padding:1.5rem .8rem}

  .save-btn{
    padding:1rem;
    font-size:1.15rem;
    margin-top:.5rem;
    position:sticky;
    bottom:0;
    z-index:10;
  }
}

@media(max-width:400px){
  .site-header{padding:.8rem 1rem}
  .logo{font-size:1.2rem}
  .logo svg{width:22px;height:22px}
  .header-sub{display:none}
  .control-panel{padding:1rem .8rem}
  .canvas-area{padding:.6rem}
}