:root{
  --ace-red:#c81f2e;
  --ace-black:#0a0a0c;
  --ace-panel:#16161a;
  --ace-line:#2a2a30;
  --ace-cream:#f5f3e6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'IBM Plex Mono',monospace;
  background:
    radial-gradient(circle at 20% 0%, #1a1a20 0%, transparent 55%),
    radial-gradient(circle at 90% 100%, #201014 0%, transparent 50%),
    #0a0a0c;
  color:var(--ace-cream);
  min-height:100vh;
}
.ace-app{display:flex;flex-direction:column;}

/* header */
.ace-header{
  text-align:center;padding:1.6rem 1rem 1.1rem;
  border-bottom:3px solid var(--ace-red);
  background:linear-gradient(180deg,#0d0d10,#0a0a0c);
  animation:fadeDown .6s ease both;
}
.ace-title{
  font-family:'VT323',monospace;
  font-size:clamp(2.2rem,6vw,3.8rem);
  margin:0;letter-spacing:1px;
  color:var(--ace-cream);
  text-shadow:0 0 14px rgba(200,31,46,.5);
  cursor:help;
}
.ace-sub{
  margin:.2rem 0 0;color:#8a8a92;font-size:.9rem;letter-spacing:.05em;
}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}

/* main layout */
.ace-main{
  flex:1;display:grid;gap:1.4rem;
  grid-template-columns:minmax(0,1fr) 320px;
  max-width:1200px;width:100%;margin:0 auto;padding:1.6rem 1rem;
  align-items:start;
}
@media(max-width:860px){
  .ace-main{grid-template-columns:1fr;}
}

/* display */
.ace-display-col{display:flex;flex-direction:column;gap:.7rem;}
.ace-status-row{display:flex;align-items:center;gap:.5rem;font-size:.8rem;letter-spacing:.15em;}
.ace-led{width:12px;height:12px;border-radius:50%;display:inline-block;transition:all .3s;}
.ace-status-text{color:#9a9aa2;}

.ace-bezel{
  position:relative;
  background:linear-gradient(145deg,#1c1c22,#0c0c0e);
  border:2px solid #2c2c34;
  border-radius:16px;
  padding:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.6), inset 0 0 0 3px #000;
}
.ace-canvas{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;
  border-radius:6px;
  background:#050505;
  filter:brightness(1.05);
}
.ace-focus-layer{
  position:absolute;inset:14px;border-radius:6px;
  outline:none;cursor:text;
}
.ace-focus-layer:focus{box-shadow:0 0 0 2px var(--ace-red), 0 0 18px rgba(200,31,46,.4);}
.ace-bezel.scan .ace-canvas{
  position:relative;
}
.ace-bezel.scan::after{
  content:'';position:absolute;inset:14px;border-radius:6px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0px,rgba(0,0,0,.28) 1px,transparent 2px,transparent 4px);
  mix-blend-mode:multiply;
}
.ace-placeholder{
  position:absolute;inset:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  font-family:'VT323',monospace;font-size:1.8rem;color:var(--ace-cream);
  pointer-events:none;text-shadow:0 0 8px rgba(51,255,102,.4);
}
.ace-hint{font-size:.72rem;color:#6a6a72;margin:0;}

/* controls */
.ace-controls{display:flex;flex-direction:column;gap:1rem;}
.ace-panel{
  background:var(--ace-panel);
  border:1px solid var(--ace-line);
  border-radius:12px;padding:1rem;
  display:flex;flex-direction:column;gap:.75rem;
}
.ace-panel-label{
  font-family:'VT323',monospace;font-size:1.2rem;color:var(--ace-red);
  letter-spacing:.08em;text-transform:uppercase;
}
.ace-btn-row{display:flex;gap:.5rem;flex-wrap:wrap;}
.ace-btn{
  flex:1;min-width:80px;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.85rem;
  padding:.6rem .5rem;border-radius:8px;
  background:linear-gradient(180deg,#26262c,#18181c);
  color:var(--ace-cream);border:1px solid #34343c;
  border-bottom:3px solid #000;cursor:pointer;
  transition:transform .08s, background .2s;
}
.ace-btn:hover:not(:disabled){background:linear-gradient(180deg,#30303a,#1c1c22);}
.ace-btn:active:not(:disabled){transform:translateY(2px);border-bottom-width:1px;}
.ace-btn:disabled{opacity:.4;cursor:not-allowed;}
.ace-btn.primary{
  background:linear-gradient(180deg,#e02a3a,#a8151f);
  border-color:#7a0d14;border-bottom-color:#500;color:#fff;
}
.ace-btn.wide{width:100%;flex:none;}
.ace-btn.ghost{background:transparent;border-style:dashed;border-bottom-width:1px;}

.ace-ctrl{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;color:#b0b0b8;}
.ace-ctrl.checkbox{flex-direction:row;align-items:center;gap:.5rem;}
.ace-ctrl input[type=range]{width:100%;accent-color:var(--ace-red);}
.ace-ctrl input[type=checkbox]{accent-color:var(--ace-red);width:16px;height:16px;}
.ace-select{
  background:#0d0d10;color:var(--ace-cream);border:1px solid #34343c;
  border-radius:6px;padding:.4rem;font-family:'IBM Plex Mono',monospace;
}

/* drop zone */
.ace-drop{
  border:2px dashed #3a3a44;border-radius:10px;
  padding:1.1rem;text-align:center;cursor:pointer;
  transition:all .2s;color:#b0b0b8;font-size:.8rem;
}
.ace-drop:hover,.ace-drop.over{border-color:var(--ace-red);background:rgba(200,31,46,.08);color:var(--ace-cream);}
.ace-cart-icon{font-size:2rem;color:var(--ace-red);line-height:1;}
.ace-drop-sub{font-size:.68rem;color:#6a6a72;margin-top:.3rem;}

/* debug */
.ace-panel.debug{gap:.5rem;font-family:'IBM Plex Mono',monospace;}
.reg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;}
.reg-cell{display:flex;flex-direction:column;background:#0d0d10;border-radius:5px;padding:.3rem;text-align:center;}
.reg-name{font-size:.62rem;color:var(--ace-red);}
.reg-val{font-size:.85rem;color:#33ff66;letter-spacing:.05em;}
.reg-line{font-size:.75rem;color:#b0b0b8;}
.reg-line.small{font-size:.68rem;color:#7a7a82;}
.flags-row{display:flex;gap:.35rem;}
.flag{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:4px;background:#0d0d10;color:#444;font-size:.75rem;font-weight:700;
  border:1px solid #222;
}
.flag.on{color:#050505;background:#33ff66;border-color:#33ff66;box-shadow:0 0 8px rgba(51,255,102,.5);}

/* footer */
.ace-footer{
  text-align:center;padding:1.5rem 1rem;border-top:1px solid var(--ace-line);
  color:#6a6a72;font-size:.78rem;
}
.ace-footer p{margin:0 0 .5rem;max-width:600px;margin-inline:auto;}
.remix-link{color:var(--ace-red);text-decoration:none;font-weight:600;border-bottom:1px dotted var(--ace-red);}
.remix-link:hover{color:#ff5566;}

/* toast */
.ace-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#e02a3a,#a8151f);color:#fff;
  padding:.7rem 1.3rem;border-radius:10px;font-size:.85rem;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:50;
  animation:toastIn .3s ease both;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,20px);}to{opacity:1;transform:translate(-50%,0);}}