:root{
  --bg: #071126;
  --panel: #0b1f3a;
  --panel-alt: rgba(7, 23, 46, 0.92);
  --muted: #687085;
  --accent: #2563eb; /* blue-600 */
  --accent-2: #1e40af; /* blue-800 */
  --accent-soft: rgba(37, 99, 235, 0.18);
  --success: #16a34a;
  --border-soft: rgba(142, 192, 255, 0.22);
  --surface-shadow: 0 24px 65px rgba(5, 14, 27, 0.55);
  --text-primary: #e6eef8;
  --text-muted: rgba(230, 238, 248, 0.65);
  --glass: rgba(255,255,255,0.6);
}

/* Page layout */
html,body{height:auto;margin:0;}
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, rgba(37,99,235,0.18) 0%, rgba(7,17,38,0) 45%),
              radial-gradient(circle at 80% 0%, rgba(14,165,233,0.12) 0%, rgba(7,17,38,0) 40%),
              linear-gradient(180deg, #050d1d 0%, #040915 35%, #030611 100%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: var(--text-primary);
  line-height: 1.55;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 36px 18px 52px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container {
  box-sizing: border-box;
  width: min(1080px, 100%);
  min-height: auto;
  margin: 0 auto;
  background: transparent;
  padding: 0;
}

.app-card{
  position: relative;
  background: linear-gradient(145deg, rgba(7, 23, 46, 0.92), rgba(10, 34, 63, 0.82));
  border: 1px solid var(--border-soft);
  box-shadow: var(--surface-shadow);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 36px);
  overflow: hidden;
}

.app-card::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 10%, rgba(59,130,246,0.36), rgba(59,130,246,0) 45%),
              radial-gradient(circle at 90% 18%, rgba(8,145,178,0.28), rgba(8,145,178,0) 45%);
  opacity: 0.6;
}

.app-card > *{ position: relative; z-index: 1; }

.page-header{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.page-header h1{
  font-size: clamp(22px, 3vw, 32px);
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-subtitle{
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(14px, 2.3vw, 16px);
}

.form-section{
  background: rgba(4, 17, 33, 0.75);
  border: 1px solid rgba(142, 192, 255, 0.1);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 26px);
  margin-bottom: clamp(18px, 3.4vw, 28px);
  box-shadow: inset 0 0 0 1px rgba(11, 41, 76, 0.35);
}

.form-section--light{
  background: rgba(6, 18, 34, 0.85);
}

.section-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(14px, 3vw, 20px);
}

.section-header h2{
  margin: 0;
  font-size: clamp(16px, 2.6vw, 20px);
  font-weight: 700;
  color: #9ccbff;
  letter-spacing: 0.02em;
}

.section-subtitle{
  margin: 4px 0 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.field-grid{
  display: grid;
  gap: clamp(14px, 2.6vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.field-grid--wide{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

h1{font-size:20px;margin:0 0 12px 0}

label{display:block;width:auto;font-weight:600;color:var(--text-primary);font-size:13px}
label small{display:block;font-weight:500;color:var(--text-muted);margin-top:2px}

input[type="number"], input[type="text"], select, input[type="file"]{
  display:block; width:100%; padding: 10px 12px; box-sizing:border-box;
  border:1px solid rgba(142, 192, 255, 0.18);
  background:linear-gradient(180deg, rgba(12, 26, 45, 0.96), rgba(8, 20, 38, 0.92));
  border-radius:10px; color:#d8e7ff;
  transition: box-shadow .12s ease, transform .06s ease;
}

/* Compact trade hub select */
select#hub{ width: 260px; }

@media (max-width:720px){
  select#hub{ width:100% }
}

/* Compact single-line layout for blueprint name + runs inputs */
.form-inline{ display:flex; align-items:center; gap:10px; }
.form-inline input[type="text"], .form-inline input[type="number"]{ width: 220px; }

input#runs{ max-width: 140px; }

.field--compact input#runs{ max-width: 120px; }

/* Make sure smaller widths collapse correctly on mobile */
@media (max-width:720px){
  .form-inline{display:block}
  .form-inline label{display:block;margin-bottom:6px}
  .form-inline input[type="text"], .form-inline input[type="number"]{width:100%}
}
input[type="number"]:focus, input[type="text"]:focus, select:focus{outline:none;box-shadow:0 6px 18px rgba(37,99,235,0.08);transform:translateY(-1px)}

.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.btn{padding:10px 18px;border-radius:999px;border:1px solid transparent;cursor:pointer;font-weight:650;font-size:14px;letter-spacing:0.01em;transition:transform .12s ease, box-shadow .18s ease, background .18s ease;border-bottom: none;}
.btn.primary{background:linear-gradient(120deg,#2563eb,#1e4cd8);color:white;box-shadow:0 14px 30px rgba(37,99,235,0.28);}
.btn.primary:hover{background:linear-gradient(120deg,#1e47b8,#1a3da6);transform:translateY(-1px);}
.btn.secondary{background:rgba(14,34,60,0.88);color:#d5e5ff;border-color:rgba(142,192,255,0.35);box-shadow:0 12px 26px rgba(3,12,26,0.42);}
.btn.secondary:hover{border-color:rgba(142,192,255,0.6);transform:translateY(-1px);}

.action-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:12px}
.action-row .btn{flex:1;min-width:180px;text-align:center}

#result{margin-top:18px;white-space:pre-line;padding:16px 18px;background:rgba(3,15,32,0.85);color:#a7c4ff;border-radius:10px;font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;border:1px solid rgba(142,192,255,0.14);box-shadow:inset 0 0 0 1px rgba(16,48,93,0.35);}

.candidate-row{padding:12px;border:1px solid #eef2f7;margin:10px 0;background:linear-gradient(180deg,#fff,#fbfdff);border-radius:10px}
.candidate-row strong{display:block;margin-bottom:6px;font-size:14px}
.candidate-btns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.candidate-btns button,.candidate-btns a{padding:8px 10px;font-size:13px;border-radius:8px;text-decoration:none}
.candidate-btns a{background:var(--success);color:white;border:none}

.muted{color:var(--muted);font-size:13px}

/* Type ID toggle box */
.typeid-toggle{cursor:pointer;display:flex;align-items:center;gap:8px;margin-top:8px}
.typeid-toggle .caret{transition:transform .18s ease;font-size:12px;color:var(--muted);display:inline-block;width:14px}
.typeid-box{margin-top:8px;margin-left:240px}
.typeid-box.hidden{display:none}

/* Paste area */
/* Paste area (smaller by default) */
#pasteArea{border-radius:12px;background:rgba(7,25,46,0.78);border:2px dashed rgba(142,192,255,0.3);padding:14px 16px;color:rgba(230,238,248,0.6);cursor:text;max-width:420px;font-size:13px;margin:12px auto;text-align:center;backdrop-filter:blur(4px)}

/* Ensure preview inside paste area doesn't overflow the compact area */
#screenshotPreview{max-width:100%;height:auto;border-radius:6px}

/* OCR Progress indicator */
#ocrProgress{background:linear-gradient(90deg,#2563eb,#1e40af);color:#ffffff;font-weight:600;text-align:center;box-shadow:0 2px 8px rgba(37,99,235,0.2)}

/* Dark-mode specific for paste area and file input */
html[data-theme="dark"] #pasteArea{background:linear-gradient(180deg,#051421,#071826);border:2px dashed rgba(255,255,255,0.06);color:rgba(230,238,248,0.55)}
html[data-theme="dark"] #ocrProgress{background:linear-gradient(90deg,#1e40af,#2563eb);box-shadow:0 2px 8px rgba(37,99,235,0.3)}
html[data-theme="dark"] input[type="file"]{background:transparent;color:inherit;border-radius:8px}
/* Style file input button in dark mode (file-selector-button) */
html[data-theme="dark"] input[type="file"]::file-selector-button{background:#0b2a3a;color:#e6eef8;border-radius:6px;padding:6px 10px;border:none}

/* Responsive */
@media (max-width:720px){
  label,input[type="number"],input[type="text"],select{display:block;width:100%}
  label{margin-top:12px}
  .button-row{flex-direction:column}
  .container{padding:16px}
  .typeid-box{margin-left:0}
}

/* Small helper */
.small-muted{font-size:12px;color:var(--muted)}

/* Dark theme (applies when html[data-theme="dark"]) */
html[data-theme="dark"]{
  background: linear-gradient(180deg,#071126 0%, #071826 100%);
  color: #e6eef8;
  /* Let the UA render form controls in dark mode where supported */
  color-scheme: dark;
}
html[data-theme="dark"] .container{background:transparent;border:none;box-shadow:none;}
html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="text"], html[data-theme="dark"] select{
  background: linear-gradient(180deg, rgba(12, 26, 45, 0.96), rgba(8, 20, 38, 0.92));
  color: #e6eef8; border:1px solid rgba(142,192,255,0.2)
}
/* Make native select dropdowns and options dark */
html[data-theme="dark"] select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #8ec0ff 50%), linear-gradient(135deg, #8ec0ff 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
html[data-theme="dark"] select option{
  background: #071126;
  color: #e6eef8;
}
/* Some platforms ignore option styling; provide a fallback by styling the dropdown via shadow DOM is not possible, but color-scheme helps */

/* File input text and button styling */
html[data-theme="dark"] input[type="file"]{ color: #e6eef8; }
html[data-theme="dark"] input[type="file"]::file-selector-button{ background:#083242; color:#e6eef8; border:none }

/* Compact file input (Choose file) for screenshot control */
input[type="file"]{
  display:inline-block;
  width: auto;
  max-width:320px;
  margin: 8px auto;
  padding:10px 12px;
  font-size:14px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(12,26,45,0.96), rgba(8,20,38,0.92));
  border:1px solid rgba(142,192,255,0.2);
  color:#d8e7ff;
}

input[type="file"]::file-selector-button{
  padding:8px 12px;
  margin-right:8px;
  border-radius:999px;
  background:rgba(16, 48, 93, 0.9);
  border:1px solid rgba(142,192,255,0.25);
  cursor:pointer;
  font-weight:650;
  color:#d5e5ff;
}

@media (max-width:720px){
  input[type="file"]{ max-width:100%; width:100%; }
}

/* Make select menus' focus / open states clearer */
html[data-theme="dark"] select:focus{ box-shadow:0 6px 18px rgba(37,99,235,0.12); }
html[data-theme="dark"] .btn.secondary{background:rgba(14,34,60,0.88);color:#cfe8ff;border:1px solid rgba(142,192,255,0.28)}
html[data-theme="dark"] .btn.primary{box-shadow:0 6px 18px rgba(37,99,235,0.12)}
html[data-theme="dark"] #result{background:#021024;color:#d7eefb}
html[data-theme="dark"] .candidate-row{background:linear-gradient(180deg,#041525,#071827);border:1px solid rgba(255,255,255,0.03)}

/* Ensure the inner panel matches dark theme too (was left white causing invisible text) */
/* Remove dark-mode panel styling too so the container is not boxed */
html[data-theme="dark"] .app-card::before{opacity:0.6;}

/* Theme toggle position */
.theme-toggle{float:right;margin-top:-4px}
.theme-toggle button{padding:8px 10px;border-radius:10px}

/* Hide theme toggle (we force dark mode) */
.theme-toggle{display:none !important}

/* Force readable text colors in dark mode */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] label,
html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .small-muted,
html[data-theme="dark"] .candidate-row strong,
html[data-theme="dark"] .candidate-btns a,
html[data-theme="dark"] .candidate-btns button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] div,
html[data-theme="dark"] span{
  color: #e6eef8 !important;
}

/* In light mode, make sure headings inside the white panel are dark for contrast */
html:not([data-theme="dark"]) .panel h1,
html:not([data-theme="dark"]) .panel strong,
html:not([data-theme="dark"]) .panel label{
  color: #0b1726 !important;
}

/* Links in dark mode */
html[data-theme="dark"] a { color: #8ec0ff; }

/* Inputs/placeholders */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color: rgba(230,238,248,0.6);
}

/* Button text explicit color */
html[data-theme="dark"] .btn, html[data-theme="dark"] .candidate-btns a{ color: #e6eef8; }

/* Modal Styles */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-in;
}

.modal-content {
  background-color: #071126;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 25px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  animation: slideIn 0.3s ease-out;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 32px;
  font-weight: bold;
  color: #e6eef8;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.modal-close:hover {
  color: #2563eb;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-info-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-info-label {
  font-weight: bold;
  color: #2563eb !important;
}

.modal-info-value {
  color: #e6eef8 !important;
  text-align: right;
}