/* QR Free Tech motor skin — night HUD; markup & tab order untouched */
:root {
  --bg: #061014 !important;
  --text: #d7fff4 !important;
  --muted: #7aa89a !important;
  --accent: #24f0c8 !important;
  --accent2: #9dff4a !important;
  --blue: #24f0c8 !important;
  --yellow: #9dff4a !important;
  --focus: #24f0c8 !important;
  --panel: #0c1c22;
  --panel2: #08161b;
  --line: #1e3d44;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
}

.kiln,
.dock {
  --bg: #061014;
  --panel: #0c1c22;
  --panel2: #08161b;
  --line: #1e3d44;
  --text: #d7fff4;
  --muted: #7aa89a;
  --accent: #24f0c8;
  --accent2: #9dff4a;
  --focus: #24f0c8;
}

.kiln .layout,
.kiln .panel,
.kiln .preview-col,
.dock .layout,
.dock .panel,
.dock .preview-col {
  background: transparent !important;
  border-color: var(--line) !important;
  overflow-anchor: none;
  min-width: 0;
  max-width: 100%;
}

.kiln .tabs,
.dock .tabs {
  flex-wrap: wrap !important;
  overflow: visible !important;
  max-width: 100%;
}

.dock .tab-business { flex: 0 0 auto !important; }

.generate-qr-cta #btn-make-dynamic,
.btn-gen-another,
.file-picker-btn,
.btn-code-stats,
.keep-stats-open,
.qrg-color-done,
.rig #btn-make-dynamic,
.rig .btn-gen-another,
.rig .btn-code-stats {
  background: #9dff4a !important;
  border: 1px solid #9dff4a !important;
  color: #061014 !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  box-shadow: 0 0 14px rgba(157, 255, 74, 0.35) !important;
  font-family: "Share Tech Mono", var(--font-body) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  transform: skewX(-3deg) !important;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.generate-qr-cta #btn-make-dynamic:hover,
.btn-gen-another:hover,
.file-picker-btn:hover,
.btn-code-stats:hover,
.keep-stats-open:hover,
.qrg-color-done:hover,
.rig #btn-make-dynamic:hover,
.rig .btn-gen-another:hover,
.rig .btn-code-stats:hover {
  background: #24f0c8 !important;
  color: #061014 !important;
  box-shadow: 0 0 18px rgba(36, 240, 200, 0.5) !important;
  transform: skewX(-3deg) translate(-2px, -1px) !important;
}

.rig #btn-png,
.actions button:nth-child(1),
#btn-png {
  background: transparent !important;
  border: 1px solid #24f0c8 !important;
  color: #24f0c8 !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%) !important;
  transform: skewX(-6deg) !important;
  font-family: "Share Tech Mono", var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.rig #btn-svg,
.actions button:nth-child(2),
#btn-svg {
  background: rgba(36, 240, 200, 0.08) !important;
  border: 1px dashed #24f0c8 !important;
  color: #24f0c8 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
  font-family: "Share Tech Mono", var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.rig #btn-copy,
.actions button:nth-child(3),
#btn-copy {
  background: transparent !important;
  border: 1px solid #9dff4a !important;
  color: #9dff4a !important;
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px) !important;
  transform: skewX(4deg) !important;
  font-family: "Share Tech Mono", var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.rig #btn-png:hover,
.rig #btn-svg:hover,
.rig #btn-copy:hover,
#btn-png:hover,
#btn-svg:hover,
#btn-copy:hover {
  background: #24f0c8 !important;
  color: #061014 !important;
  border-style: solid !important;
}

.tab.active,
.style-studio-tab.is-on,
.style-studio-tab[aria-selected="true"] {
  background: rgba(36, 240, 200, 0.16) !important;
  border-color: #24f0c8 !important;
  color: #24f0c8 !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%) !important;
}

.tab,
.style-studio-tab,
.style-chip,
.ecc-chip,
.type-chip {
  clip-path: none !important;
  border-radius: 0 !important;
  border: 1px solid #1e3d44 !important;
  background: #08161b !important;
  color: #d7fff4 !important;
}

/* Visual variety — order of tabs unchanged */
.tabs .tab:nth-child(3n),
.tabs .more-toggle {
  transform: skewX(-5deg) !important;
  border-color: #24f0c8 !important;
}

.tabs .tab:nth-child(4n) {
  transform: translateY(3px) !important;
  border-style: dashed !important;
}

.tabs .tab:nth-child(5n) {
  background: rgba(157, 255, 74, 0.06) !important;
  border-color: #9dff4a !important;
}

.tabs .tab-business {
  transform: skewX(6deg) !important;
  border-color: #ff6b3d !important;
  color: #ff6b3d !important;
  margin-left: 8px !important;
}

.tabs .tab,
.tabs .more-toggle,
.tabs .tab-business,
.tabs .tab:not(.active):not(.tab-business),
.tabs .more-toggle:not(.active) {
  color: #d7fff4 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

.more-menu,
.tabs .more-menu,
#more-menu,
#vcard-menu {
  background: #031014 !important;
  border: 1px solid #24f0c8 !important;
  box-shadow: 0 0 18px rgba(36, 240, 200, 0.22) !important;
}

.more-menu .more-option,
.tabs .more-option,
.more-menu li,
.more-menu a,
.more-menu button,
.more-option,
.more-option span,
.more-option .option-label,
.more-option .option-icon,
.tabs .option-icon {
  color: #d7fff4 !important;
}

.more-option:hover,
.tabs .more-option:hover,
.more-option:focus-visible {
  background: rgba(36, 240, 200, 0.14) !important;
  color: #24f0c8 !important;
}

.more-option:hover .option-icon,
.tabs .more-option:hover .option-icon {
  color: #24f0c8 !important;
}

.more-option.active,
.more-option[aria-selected="true"] {
  background: rgba(36, 240, 200, 0.16) !important;
  color: #24f0c8 !important;
}

.qr-link-hint { color: #24f0c8 !important; }

.dock #t-data:empty,
.dock #t-code:empty { display: none !important; }

.dynamic-stat-banner,
.hint,
.cloud-note,
.payload-hint,
.qr-fact-hint,
.qr-fact-value,
.style-studio-hint,
.stats-cta-label,
.stats-cta-label span,
.keep-stats-warn {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: var(--muted) !important;
}

.kiln label,
.dock label {
  color: var(--muted) !important;
  text-transform: none !important;
  font-size: 13px !important;
  font-family: "Share Tech Mono", var(--font-body) !important;
  letter-spacing: 0.04em !important;
}

.kiln input,
.kiln select,
.kiln textarea,
.dock input,
.dock select,
.dock textarea {
  background: #031014 !important;
  color: #d7fff4 !important;
  border: 1px solid #1e3d44 !important;
  border-radius: 0 !important;
}

.kiln input:focus,
.kiln select:focus,
.kiln textarea:focus,
.dock input:focus,
.dock select:focus,
.dock textarea:focus {
  border-color: #24f0c8 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(36, 240, 200, 0.22) !important;
}

.dynamic-create-account,
.dynamic-create-account:hover,
.dynamic-create-account:focus-visible {
  background: transparent !important;
  border: 1px solid #24f0c8 !important;
  color: #24f0c8 !important;
  clip-path: none !important;
  border-radius: 0 !important;
}

.keep-stats-modal.modal-overlay {
  background: rgba(6, 16, 20, 0.84) !important;
  z-index: 100080 !important;
}

.keep-stats-card,
#keep-stats-modal .keep-stats-card,
#keep-stats-modal .modal-card {
  background: #0c1c22 !important;
  color: #d7fff4 !important;
  border: 1px solid #24f0c8 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: 0 0 24px rgba(36, 240, 200, 0.28) !important;
}

#keep-stats-modal h2,
#keep-stats-title {
  color: #24f0c8 !important;
  font-family: "Share Tech Mono", var(--font-body) !important;
  text-transform: none !important;
}

.keep-stats-open {
  background: #9dff4a !important;
  border: 1px solid #9dff4a !important;
  color: #061014 !important;
  clip-path: none !important;
  border-radius: 0 !important;
}

.keep-stats-saved,
#keep-stats-saved {
  background: #24f0c8 !important;
  border: 1px solid #24f0c8 !important;
  color: #061014 !important;
  clip-path: none !important;
  border-radius: 0 !important;
}

#flagship-modal .flagship-card,
#flagship-modal .modal-card {
  background: #0c1c22 !important;
  color: #d7fff4 !important;
  border: 1px solid #24f0c8 !important;
  border-radius: 0 !important;
}

#flagship-modal .btn-flagship-go,
#flagship-modal .flagship-go-domain {
  background: #9dff4a !important;
  color: #061014 !important;
  border: 1px solid #9dff4a !important;
  border-radius: 0 !important;
}

.kiln #stage,
.dock #stage,
.preview-col #stage {
  display: grid !important;
  place-items: center !important;
  width: min(360px, 100%) !important;
  max-width: 360px !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border: 1px dashed #24f0c8 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

.kiln #stage .size-badge,
.dock #stage .size-badge,
.preview-col #stage .size-badge {
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  background: #061014 !important;
  color: #24f0c8 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 0 !important;
  border: 1px solid #24f0c8 !important;
  font-family: "Share Tech Mono", sans-serif !important;
}

.kiln #stage #qr,
.dock #stage #qr,
.preview-col #stage #qr {
  display: block !important;
  width: 100% !important;
  background: #fff !important;
}

.kiln .fields:not(.hidden),
.dock .fields:not(.hidden) { display: grid; gap: 12px; }

.qrg-cal-trigger {
  background: #031014 !important;
  color: #d7fff4 !important;
  border: 1px solid #1e3d44 !important;
  border-radius: 0 !important;
}

.qrg-cal-trigger:hover,
.qrg-cal.is-open .qrg-cal-trigger {
  border-color: #24f0c8 !important;
}

.qrg-cal-pop {
  background: #0c1c22 !important;
  border: 1px solid #24f0c8 !important;
  border-radius: 0 !important;
  color: #d7fff4 !important;
}

.qrg-cal-month { color: #24f0c8 !important; }

.frame-options {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid #1e3d44;
  border-radius: 0;
  background: #08161b;
}
.frame-options[hidden] { display: none !important; }