@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');

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

:root {
  --bg:       #0c0c0a;
  --bg2:      #111110;
  --bg3:      #171714;
  --bg4:      #1e1e1a;
  --green:         #5a9e68;
  --green-bright:  #6dbd7a;
  --green-dim:     #2d4d35;
  --green-faint:   #1a2e1e;
  --text:          #b8b8a4;
  --text-dim:      #5a5a4a;
  --text-bright:   #e0e0cc;
  --text-faint:    #333328;
  --border:        #222220;
  --border-mid:    #2e2e28;
  --border-green:  #2a4a2e;
  --mono: 'Space Mono', 'Courier New', monospace;
  --mono2: 'DM Mono', monospace;
  --font-size-base: 11px;
  --panel-w-left: 240px;
  --panel-w-right: 210px;
  --ascii-zoom: 7px;
}

/* LIGHT THEME */
body.light {
  --bg:            #f2f2ee;
  --bg2:           #e8e8e2;
  --bg3:           #dededa;
  --bg4:           #d4d4ce;
  --green:         #1e7a32;
  --green-bright:  #1a6e2c;
  --green-dim:     #6ab87a;
  --green-faint:   #d0ead4;
  --text:          #2c2c22;
  --text-dim:      #5e5e50;
  --text-bright:   #0e0e08;
  --text-faint:    #a0a090;
  --border:        #c0c0b8;
  --border-mid:    #a8a8a0;
  --border-green:  #7ab888;
}

/* Light theme — ensure all UI text uses theme vars (no hardcoded colors) */
body.light .param-val        { color: var(--green-bright); }
body.light .panel-id         { color: var(--green-dim); }
body.light .section-count    { color: var(--green-dim); }
body.light .section-bullet   { background: var(--green-bright); }
body.light .histo-fill       { background: var(--green-bright); }
body.light .dot--green       { background: var(--green-bright); }
body.light .status-text      { color: var(--green-bright); }
body.light .slider-val       { color: var(--green-bright); }
body.light .logo-accent      { color: var(--green-bright); }
body.light .render-btn       { border-color: var(--green-bright); color: var(--green-bright); background: var(--green-faint); }
body.light .render-btn:hover { background: var(--green-dim); color: #fff; }
body.light .exp-btn:hover    { border-color: var(--green-bright); color: var(--green-bright); }
body.light .icon-btn:hover   { border-color: var(--green-bright); color: var(--green-bright); }
body.light .style-item.active { border-color: var(--green-bright); }
body.light .style-item.active .style-preview { color: var(--green-bright); }
body.light .style-item.active .style-name    { color: var(--text-bright); }
body.light .upload-zone:hover,
body.light .upload-zone.dragover { border-color: var(--green-bright); background: var(--green-faint); }
body.light .toggle--on        { background: var(--green-faint); border-color: var(--green-bright); }
body.light .toggle--on .toggle-thumb { background: var(--green-bright); }
body.light #upload-filename   { color: var(--green-bright); }
body.light .canvas-drop-label { color: var(--green-bright); }
body.light .canvas-drop-overlay { border-color: var(--green-bright); background: rgba(240,245,240,0.92); }
body.light .fullscreen-close  { color: var(--green-bright); border-color: var(--green-bright); }
body.light .ascii-output      { color: var(--text-bright); }
body.light .gallery-item:hover { border-color: var(--green-bright); }
body.light .zoom-label         { color: var(--text-dim); }

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: var(--font-size-base); overflow: hidden; }

/* SCANLINES */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
}
.noise-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 998; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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");
}

/* APP CONTAINER */
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* TOPBAR */
.topbar {
  background: var(--bg2); border-bottom: 0.5px solid var(--border);
  padding: 0 16px; height: 38px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.logo { font-size: 15px; font-weight: 700; color: var(--text-bright); letter-spacing: 0.08em; }
.logo-accent { color: var(--green-bright); }
.version-tag { font-size: 9px; color: var(--text-dim); font-family: var(--mono); }
.sys-tag {
  font-size: 9px; color: var(--text-dim); border: 0.5px solid var(--border);
  padding: 2px 6px; background: var(--bg);
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.status-indicator { display: flex; align-items: center; gap: 5px; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot--green { background: var(--green-bright); }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.status-text { font-size: 9px; color: var(--green-bright); }

/* LAYOUT */
.layout {
  display: grid;
  grid-template-columns: var(--panel-w-left) 1fr var(--panel-w-right);
  flex: 1; overflow: hidden;
}

/* PANELS */
.panel { background: var(--bg2); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.panel--left { border-right: 0.5px solid var(--border); }
.panel--right { border-left: 0.5px solid var(--border); }
.panel::-webkit-scrollbar { width: 3px; }
.panel::-webkit-scrollbar-track { background: var(--bg2); }
.panel::-webkit-scrollbar-thumb { background: var(--border-mid); }

.panel-header {
  padding: 7px 12px; border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); flex-shrink: 0;
}
.panel-label { font-size: 9px; color: var(--text-dim); letter-spacing: 0.08em; }
.panel-id { font-size: 9px; color: var(--green-dim); }

/* SECTION */
.section { border-bottom: 0.5px solid var(--border); }
.section-title {
  padding: 7px 12px; font-size: 9px; color: var(--text-dim);
  letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px;
}
.section-bullet { width: 3px; height: 3px; background: var(--green-bright); display: block; }
.section-count { color: var(--green-dim); }

/* UPLOAD ZONE */
.upload-zone {
  margin: 10px; border: 0.5px dashed var(--border-green);
  padding: 16px 10px; text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--green-bright); background: var(--green-faint); }
.upload-ascii { font-size: 8px; line-height: 1.4; color: var(--green-dim); font-family: var(--mono); white-space: pre; }
.upload-label { font-size: 10px; color: var(--text-dim); }
.upload-sub { font-size: 8px; color: var(--text-faint); }
#upload-filename { font-size: 8px; color: var(--green-bright); min-height: 10px; }

/* STYLE GRID */
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); margin: 0 10px 10px; }
.style-item {
  background: var(--bg2); padding: 7px 8px; cursor: pointer;
  transition: background 0.1s; border: 0.5px solid transparent;
}
.style-item:hover { background: var(--bg4); }
.style-item.active { background: var(--bg4); border-color: var(--green-bright); }
.style-preview { font-size: 6.5px; line-height: 1.3; color: var(--green-dim); margin-bottom: 4px; white-space: pre; height: 26px; overflow: hidden; }
.style-item.active .style-preview { color: var(--green-bright); }
.style-name { font-size: 9px; color: var(--text-dim); }
.style-item.active .style-name { color: var(--text-bright); }

/* SLIDERS */
.sliders { padding: 4px 0; }
.slider-row { padding: 5px 12px; display: flex; align-items: center; gap: 8px; }
.slider-label { font-size: 9px; color: var(--text-dim); min-width: 72px; }
.slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 2px; background: var(--border-mid); outline: none; cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px;
  background: var(--green-bright); cursor: pointer;
}
.slider::-moz-range-thumb { width: 10px; height: 10px; background: var(--green-bright); border: none; cursor: pointer; }
.slider:hover { background: var(--border-green); }
.slider-val { font-size: 9px; color: var(--green-bright); min-width: 28px; text-align: right; }

/* TOGGLES */
.toggles-row { padding: 7px 12px 10px; display: flex; gap: 16px; flex-wrap: wrap; }
.toggle-item { display: flex; align-items: center; gap: 6px; }
.toggle-label { font-size: 9px; color: var(--text-dim); }
.toggle {
  width: 28px; height: 14px; background: var(--border-mid); border: 0.5px solid var(--border-mid);
  cursor: pointer; position: relative; display: flex; align-items: center; padding: 2px;
  transition: background 0.15s, border-color 0.15s;
}
.toggle--on { background: var(--green-faint); border-color: var(--green-bright); }
.toggle-thumb {
  width: 10px; height: 10px; background: var(--text-dim);
  transition: transform 0.15s, background 0.15s;
}
.toggle--on .toggle-thumb { transform: translateX(14px); background: var(--green-bright); }

/* RENDER BUTTON */
.render-section { padding: 10px; }
.render-btn {
  width: 100%; padding: 9px; background: var(--green-faint);
  border: 0.5px solid var(--green-bright); color: var(--green-bright);
  font-family: var(--mono); font-size: 10px; cursor: pointer;
  position: relative; overflow: hidden; transition: background 0.15s;
}
.render-btn:hover { background: var(--green-dim); }
.render-btn:active { transform: scale(0.99); }
.render-progress {
  position: absolute; top: 0; left: 0; height: 100%;
  background: rgba(109,189,122,0.1); width: 0%;
  transition: width 0.3s;
}
.render-btn-text { position: relative; z-index: 1; }

/* CANVAS AREA */
.canvas-wrap { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.canvas-header {
  padding: 7px 14px; border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg2); flex-shrink: 0;
}
.canvas-meta { font-size: 9px; color: var(--text-dim); display: flex; gap: 8px; align-items: center; }
.canvas-sep { color: var(--border-mid); }
.canvas-right { display: flex; align-items: center; gap: 12px; }
.cursor-pos { font-size: 9px; color: var(--green-bright); min-width: 70px; }
.icon-btn { background: transparent; border: 0.5px solid var(--border); color: var(--text-dim); font-size: 12px; width: 24px; height: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.1s, color 0.1s; }
.icon-btn:hover { border-color: var(--green-bright); color: var(--green-bright); }

.ascii-canvas { flex: 1; overflow: auto; position: relative; padding: 12px; }
.ascii-canvas::-webkit-scrollbar { width: 4px; height: 4px; }
.ascii-canvas::-webkit-scrollbar-track { background: var(--bg); }
.ascii-canvas::-webkit-scrollbar-thumb { background: var(--border-mid); }

.ascii-output { font-family: var(--mono); font-size: var(--ascii-zoom); line-height: 1.22; white-space: pre; color: var(--text-bright); display: inline-block; min-width: 100%; }

/* Colored spans for matrix */
.ascii-output .c0 { color: #1a2e1a; }
.ascii-output .c1 { color: #2a4a2a; }
.ascii-output .c2 { color: #3a6a3a; }
.ascii-output .c3 { color: #4a8a4a; }
.ascii-output .c4 { color: #5aaa5a; }
.ascii-output .c5 { color: var(--green-bright); }
.ascii-output .c6 { color: #9ae0a0; }
.ascii-output .c7 { color: #ccf0cc; }

/* Braille */
.ascii-output .br0 { color: #1a1a2e; }
.ascii-output .br1 { color: #2a2a5a; }
.ascii-output .br2 { color: #4a4aaa; }
.ascii-output .br3 { color: #7a7add; }
.ascii-output .br4 { color: #9a9aee; }
.ascii-output .br5 { color: #bf5af2; }

/* Cyberpunk */
.ascii-output .cy0 { color: #001a2a; }
.ascii-output .cy1 { color: #003a5a; }
.ascii-output .cy2 { color: #005a8a; }
.ascii-output .cy3 { color: #0080bb; }
.ascii-output .cy4 { color: #00aadd; }
.ascii-output .cy5 { color: #00d4ff; }

/* PLACEHOLDER */
.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 300px; gap: 12px; }
.placeholder-art { font-size: 7px; line-height: 1.3; color: var(--text-faint); white-space: pre; font-family: var(--mono); }
.placeholder-hint { font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; }

/* ANNOTATIONS */
.annotations { position: absolute; inset: 0; pointer-events: none; }
.ann { position: absolute; display: flex; align-items: center; gap: 4px; }
.ann-tag { font-size: 8px; color: var(--green-bright); border: 0.5px solid var(--green-bright); padding: 1px 5px; background: rgba(10,20,10,0.85); white-space: nowrap; }
.ann-line--h { width: 30px; height: 0.5px; background: var(--green-bright); display: inline-block; }
.ann--tr { flex-direction: row-reverse; }

/* CANVAS DROP OVERLAY */
.ascii-canvas { position: relative; }
.canvas-drop-overlay {
  display: none; position: absolute; inset: 0; z-index: 10;
  border: 2px dashed var(--green-bright); background: rgba(10,20,10,0.88);
  align-items: center; justify-content: center; pointer-events: none;
}
.canvas-drop-overlay.active { display: flex; }
.canvas-drop-label {
  font-size: 14px; font-family: var(--mono); color: var(--green-bright);
  letter-spacing: 0.15em; animation: blink 0.7s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }

/* CANVAS FOOTER */
.canvas-footer {
  padding: 7px 14px; border-top: 0.5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg2); flex-shrink: 0;
}
.export-btns { display: flex; gap: 5px; }
.exp-btn {
  font-size: 9px; font-family: var(--mono); color: var(--text-dim);
  border: 0.5px solid var(--border); padding: 3px 8px; cursor: pointer;
  background: transparent; transition: all 0.1s;
}
.exp-btn:hover { border-color: var(--green-bright); color: var(--green-bright); }
.footer-right { display: flex; align-items: center; gap: 10px; }
.footer-tag { font-size: 9px; color: var(--text-dim); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-btn {
  font-size: 9px; font-family: var(--mono);
  background: var(--green-bright); color: #0a1a0a;
  border: none; padding: 4px 14px; cursor: pointer; font-weight: 700;
  transition: background 0.1s;
}
.share-btn:hover { background: #8de89a; }

/* RIGHT PANEL */
.params-list {}
.param-row {
  padding: 5px 12px; display: flex; justify-content: space-between;
  border-bottom: 0.5px solid var(--bg4);
}
.param-key { font-size: 9px; color: var(--text-dim); }
.param-val { font-size: 9px; color: var(--green-bright); }

/* HISTOGRAM */
.histogram { padding: 8px 12px; }
.histo-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.histo-lbl { font-size: 10px; color: var(--text-dim); min-width: 12px; }
.histo-bg { flex: 1; height: 5px; background: var(--border); }
.histo-fill { height: 5px; background: var(--green-bright); transition: width 0.4s; }
.histo-num { font-size: 8px; color: var(--text-dim); min-width: 26px; text-align: right; }

/* MINIMAP */
.minimap-wrap { margin: 8px 10px; border: 0.5px solid var(--border); }
.minimap-label { padding: 3px 8px; border-bottom: 0.5px solid var(--border); font-size: 8px; color: var(--text-dim); }
.minimap-ascii { font-size: 4.5px; line-height: 1.2; padding: 5px 6px; color: var(--green-dim); font-family: var(--mono); white-space: pre; overflow: hidden; max-height: 56px; }

/* GALLERY */
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px 10px 12px; }
.gallery-item {
  background: var(--bg); border: 0.5px solid var(--border);
  padding: 4px; cursor: pointer; transition: border-color 0.1s;
}
.gallery-item:hover { border-color: var(--green-bright); }
.gallery-ascii { font-size: 4px; line-height: 1.2; color: var(--green-dim); font-family: var(--mono); white-space: pre; height: 34px; overflow: hidden; }
.gallery-tag { font-size: 7px; color: var(--text-dim); margin-top: 3px; }

/* FULLSCREEN */
.fullscreen-overlay {
  display: none; position: fixed; inset: 0; background: var(--bg);
  z-index: 1000; flex-direction: column;
}
.fullscreen-overlay.active { display: flex; }
.fullscreen-header {
  padding: 10px 20px; border-bottom: 0.5px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg2);
}
.fullscreen-label { font-size: 10px; color: var(--text-dim); }
.fullscreen-close {
  font-family: var(--mono); font-size: 10px; color: var(--green-bright);
  background: transparent; border: 0.5px solid var(--green-bright);
  padding: 3px 10px; cursor: pointer;
}
.fullscreen-content {
  flex: 1; overflow: auto; padding: 20px;
  font-family: var(--mono); font-size: 8px; line-height: 1.22; white-space: pre; color: var(--text-bright);
}
/* Colored spans work in fullscreen too since they use inline styles */
.fullscreen-content span { display: inline; }

/* TOAST */
.toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 2000;
  background: var(--green-faint); border: 0.5px solid var(--green-bright);
  color: var(--green-bright); font-family: var(--mono); font-size: 10px;
  padding: 8px 16px; transform: translateY(60px); opacity: 0;
  transition: transform 0.2s, opacity 0.2s;
  pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* HIDDEN SM */
@media (max-width: 1100px) { .hidden-sm { display: none; } }

/* Scrollbar for canvas */
.ascii-canvas { scrollbar-width: thin; scrollbar-color: var(--border-mid) var(--bg); }

/* ZOOM LABEL */
.zoom-label { font-size: 9px; color: var(--text-dim); font-family: var(--mono); min-width: 32px; text-align: center; }

/* LIGHT THEME — scanlines invisible */
body.light .scanlines { opacity: 0; }
body.light .noise-overlay { opacity: 0; }
body.light .ascii-output .c0 { color: #c8e8c8; }
body.light .ascii-output .c1 { color: #9acc9a; }
body.light .ascii-output .c2 { color: #6aaa6a; }
body.light .ascii-output .c3 { color: #3a883a; }
body.light .ascii-output .c4 { color: #1e6a1e; }
body.light .ascii-output .c5 { color: #0e500e; }
body.light .ascii-output .c6 { color: #083808; }
body.light .ascii-output .c7 { color: #042404; }

/* MOBILE */
@media (max-width: 768px) {
  :root {
    --panel-w-left: 0px;
    --panel-w-right: 0px;
  }

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

  .panel--left {
    display: none;
    position: fixed; inset: 0; top: 38px; z-index: 500;
    width: 280px; border-right: 0.5px solid var(--border);
    overflow-y: auto;
  }
  .panel--left.mobile-open { display: flex; }

  .panel--right { display: none; }

  .canvas-wrap { grid-row: 1 / -1; }

  /* Mobile topbar extras */
  .mobile-menu-btn { display: flex !important; }
  .status-text { display: none; }
  .cursor-pos { display: none; }
  .zoom-label { display: none; }
}

/* Mobile menu button — hidden on desktop */
.mobile-menu-btn {
  display: none;
  background: transparent; border: 0.5px solid var(--border);
  color: var(--text-dim); font-size: 14px; width: 28px; height: 28px;
  cursor: pointer; align-items: center; justify-content: center;
  font-family: var(--mono);
}
.mobile-menu-btn:hover { border-color: var(--green-bright); color: var(--green-bright); }

/* Mobile overlay backdrop */
.mobile-backdrop {
  display: none; position: fixed; inset: 0; z-index: 499;
  background: rgba(0,0,0,0.5);
}
.mobile-backdrop.active { display: block; }