:root{
  --bg: #000000;
  --text: #ffffff;
  --muted: #bfbfbf;
  --accent: #ff00ff; /* requested button color */
  --panel-bg: rgba(255,255,255,0.04);
  --panel-strong: rgba(255,255,255,0.06);
  --panel-border: rgba(255,255,255,0.10);
  --radius: 10px;
  --gap: 22px;
  --left-width: 480px;

  /* modal spacing variable used for consistent gaps */
  --modal-gap: 16px;
  /* separate variable for label->input gap so it can be tuned independently */
  --modal-gap-label: 22px;
}

/* reset / base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}

/* app shell */
.app{min-height:100vh;display:flex;flex-direction:column}
.app-header{padding:18px 24px;border-bottom:1px solid rgba(255,255,255,0.04);text-align:center}
.app-header h1{margin:0;font-size:20px;color:var(--text)}

.columns{
  display:flex;
  gap:var(--gap);
  padding:0 26px;    /* left/right only, no top/bottom */
  flex:1;
  align-items:stretch;
  justify-content:center;
  max-width:1200px;
  margin:0 auto;
}

/* left and right columns */
.col{padding:12px;border-radius:var(--radius);background:transparent;display:flex;flex-direction:column}
.col-left{flex:0 0 var(--left-width);max-width:var(--left-width);min-width:260px;align-items:stretch}
.col-right{flex:1;display:flex;align-items:center;justify-content:center}

/* panel improved contrast */
.panel{
  width:100%;
  background: linear-gradient(180deg, var(--panel-strong), var(--panel-bg));
  padding:14px;
  border-radius:10px;
  margin-bottom:14px;
  border: 1px solid var(--panel-border);
  box-shadow: 0 8px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* labels, help text, inputs */
.panel .label{display:block;margin-bottom:8px;color:var(--text);font-weight:700}
.panel .help{font-size:12px;color:var(--muted);margin-top:8px}
.input, .textarea, select{width:100%;padding:9px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:var(--text);outline:none}
.textarea{font-family:monospace;min-height:80px;resize:vertical}

/* buttons */
.panel-actions{display:flex;gap:33px;align-items:center;justify-content:center;margin-top:6px}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;border:none;cursor:pointer;background:transparent;color:var(--text);font-weight:700}
.btn.small{padding:6px 8px;font-size:13px}
.btn:disabled{opacity:0.6;cursor:default}

.btn-render, .btn-download{
  background: var(--accent);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 28px rgba(255,0,255,0.08);
}
.btn-render:hover, .btn-download:hover{filter:brightness(1.05);}

/* divider between columns */
.divider{
  width:1px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border-radius:1px;
  align-self:stretch;
  margin-top:6px;
  margin-bottom:6px;
}

/* area rows and layout */
.area-panel .row{display:flex;gap:10px;align-items:center;margin-top:10px;width:100%}
.area-panel .row > .input{flex:1}
.area-panel .label-row{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* color attach */
.color-attach{display:flex;gap:8px;align-items:center}
.color-attach input[type="color"]{width:40px;height:40px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent}
.color-attach .color-hex{width:110px;padding:8px}

/* preview frame and box */
.preview-wrap{width:100%;display:flex;align-items:center;justify-content:center;height:100%}
.preview-frame{
  border: 3px solid #ffffff;
  border-radius:12px;
  padding:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  width:100%;
  max-width:820px;
  box-sizing:border-box;
}
.preview-box{
  width:100%;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:360px;
  position:relative;
  background: transparent;
  overflow:hidden;
}
.preview-box img{max-width:100%;max-height:100%;border-radius:6px;display:block;object-fit:contain}
.preview-box .placeholder{
  position:absolute;
  color:var(--muted);
  font-size:14px;
  text-align:center;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

/* diagnostics */
.panel-diagnostics pre.diag{white-space:pre-wrap;color:#fff;background:transparent;border-radius:6px;padding:8px;font-family:monospace;font-size:12px;max-height:320px;overflow:auto}

/* footer small muted text */
.app-footer{padding:12px 20px;border-top:1px solid rgba(255,255,255,0.04);color:var(--muted);text-align:center}

/* =========================
   Consistency fixes for area panels only
   ========================= */

/* area panel label-row and label tweaks */
.area-panel .label-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.area-panel .label { margin-bottom: 6px; }
.area-panel .label-row + .row { margin-top: 6px; }
.area-panel .row > .input { flex:1; }
.area-panel .label-row .color-attach { margin-left:12px; display:flex; gap:8px; align-items:center; }

/* ======= LANGUAGES PANEL ALIGN FIX ======= */
.panel-languages .label { margin-bottom: 0; }
.panel-languages {
  max-width: 1200px;
  width: 100%;
  margin: 8px auto 16px auto;
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--panel-strong), var(--panel-bg));
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  box-shadow: 0 8px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  padding: 14px 0; /* <-- no side padding here */
}
.panel-languages-inner-row {
  display: flex;
  flex-direction: row;
}

/* fixed spacer matches col-left width */
.panel-languages-spacer {
  flex: 0 0 var(--left-width);
  max-width: var(--left-width);
  min-width: 260px;
  margin-right: var(--gap);
  /* invisible; occupies the "column" left of the real grid */
}

/* contents for alignment with col-right */
.panel-languages-main {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.languages-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 8px 12px;
  margin-top: 10px;
  max-height: 240px;
  overflow: auto;
  padding-right: 6px;
}
.lang-item { display:flex; align-items:center; gap:8px; }
.lang-item input[type="checkbox"] { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.lang-item label { cursor:pointer; user-select:none; color:var(--text); font-size:14px; }

.langs-summary { margin-top: 10px; display:flex; flex-direction:column; gap:8px; }
.lang-chips { display:flex; flex-wrap:wrap; gap:8px; }
.lang-chip { display:inline-block; background: rgba(255,255,255,0.04); color:var(--text); padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.06); font-size:13px; }

/* modal styles */
.modal { display:none; position:fixed; inset:0; z-index:1200; }
.modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }

.modal-dialog {
  position:relative;
  max-width:520px;
  margin:80px auto;
  border-radius:12px;
  padding:18px;
  border:1px solid rgba(255,0,255,0.30);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.modal-naming { background: linear-gradient(180deg, rgba(255,0,255,0.22), rgba(255,0,255,0.18)); color: var(--text); }

.modal-naming p { margin-bottom: var(--modal-gap); }
.modal-dialog.modal-naming label.label { margin-top: 0; margin-bottom: var(--modal-gap-label); }
.modal-dialog.modal-naming .modal-filename-input { margin-top: calc(var(--modal-gap-label)); }

.modal-naming .modal-filename-input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.36);
  background: rgba(0,0,0,0.14);
  color: var(--text);
  outline: none;
  width: 100%;  
  box-sizing: border-box;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.modal-naming .modal-filename-input:focus { border-color: rgba(255,0,255,0.95); box-shadow: 0 8px 24px rgba(255,0,255,0.12); }

/* progress modal */
.modal-progress { background: linear-gradient(180deg, rgba(255,0,255,0.14), rgba(255,0,255,0.10)); color: var(--text); }
.modal-dialog h3 { margin:0 0 8px 0; font-size:16px; }

.progress-bar-outer { width:100%; height:14px; border-radius:10px; background: rgba(255,255,255,0.06); overflow:hidden; border:1px solid rgba(255,255,255,0.04); }
.progress-bar-inner { height:100%; width:0%; background: linear-gradient(90deg, rgba(255,0,255,0.95), rgba(255,120,255,0.9)); transition: width 240ms linear; }
.progress-bar-inner.indeterminate { position:relative; width:100%; background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,0,255,0.95), rgba(255,255,255,0.06)); animation: prog-indeterminate 1.2s linear infinite; background-size: 200% 100%; }
@keyframes prog-indeterminate { 0% { background-position: -40% 0%; } 100% { background-position: 140% 0%; }

}

/* Make Template C main textareas compact (matching font-size input frame) */
.compact-textarea {
  min-height: 40px !important;
  height: 40px !important;
  resize: none !important;
  padding: 8px !important;
  line-height: 1.0;
  font-family: inherit;
}

@media (max-width:900px){
  .languages-grid { grid-template-columns: repeat(2, 1fr); }
  .columns{flex-direction:column;padding:12px}
  .col-left{max-width:none;width:100%}
  .col-right{order:2}
  .divider{display:none}
  .preview-frame{max-width:100%}
  .panel-languages-inner-row { flex-direction:column; }
  .panel-languages-spacer { display: none !important;}
}