/* ===== MAIN STYLES ===== */
body {
  font-family: system-ui, sans-serif;
  background: #f7f7f9;
  color: #252525;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  min-height: 100vh;
}

h1 {
  margin-top: 32px;
  font-size: 2.2rem;
}

/* ===== FORM STYLES ===== */
form {
  margin: 32px 0 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

textarea {
  width: 90vw;
  max-width: 500px;
  min-height: 80px;
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 1rem;
  margin-bottom: 12px;
}

button {
  background: #0098ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  padding: 10px 24px;
  cursor: pointer;
  box-shadow: 0 0.5px 0 rgba(0,0,0,0.03);
  transition: background 0.2s;
}

button:active { 
  background: #007ad4;
}

/* ===== OUTPUT SECTION ===== */
#output-section {
  margin: 30px 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 9px rgba(0,0,0,0.04);
  padding: 24px 20px 24px 20px;
  min-width: 260px;
  max-width: 600px;
  width: 90vw;
}

.label {
  font-size: 1rem;
  color: #818187;
  margin-bottom: 7px;
  letter-spacing: 0.03em;
}

#result {
  font-size: 1.17rem;
  color: #27283b;
  white-space: pre-line;
}

.small {
  margin-top: 36px;
  color: #aaa;
  font-size: .98rem;
  text-align: center;
}

#loading {
  margin-top: 18px;
  color: #444;
  font-size: 1.16rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ===== LANGUAGE STEPS BAR ===== */
.steps-desc {
  color: #5e6370;
  font-size: 0.98em;
  margin-top: -10px;
  margin-bottom: 24px;
  text-align: center;
  max-width: 500px;
  line-height: 1.6;
}

#lang-steps-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  gap: 5px;
}

.lang-step-chip {
  background: #e7eefc;
  color: #2061bc;
  font-size: 0.98em;
  font-weight: 500;
  border-radius: 12px;
  padding: 4px 13px;
  border: none;
  margin: 0 1px;
  opacity: 0.82;
  cursor: pointer;
  transition: background .17s;
}

.lang-step-chip.selected {
  background: #188be9;
  color: #fff;
  opacity: 1;
}

.lang-step-chip:hover {
  background: #50aaff;
  color: #fff;
  opacity: 1;
}

.plus {
  color: #c1c9e3;
  font-size: 1.04em;
}

/* ===== SUSHI SUBREDDIT BUTTON ===== */
.sushi-btn-link {
  display: inline-block;
  margin: 38px auto 22px auto;
  padding: 0;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  background: #fff;
  transition: box-shadow .18s, background .17s;
}

.sushi-btn-link:active {
  background: #f6f8fd;
  box-shadow: 0 0.5px 2px rgba(0,0,0,0.03);
}

.sushi-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: inherit;
  font-weight: 500;
  font-size: 1.03rem;
  color: #188be9;
  background: none;
  border: none;
  padding: 13px 34px 13px 20px;
  cursor: pointer;
}

.sushi-btn .icon {
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
}

.sushi-btn-link:hover,
.sushi-btn-link:focus {
  background: #e7eefc;
  color: #1770b5;
  box-shadow: 0 2px 12px #e6ecfb;
  outline: none;
}

/* ===== SETTINGS MODAL STYLES ===== */
#settings-gear-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  font-size: 1.6em;
  background: #fff;
  border: 1.7px solid #c2d3ef;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  color: #298ee6;
  box-shadow: 0 1px 7px #99bade18;
  z-index: 1111;
  cursor: pointer;
  display: flex; 
  align-items: center; 
  justify-content: center;
  transition: background .16s, border .16s, color .18s;
}

#settings-gear-btn:hover {
  background: #f3f8ff;
  color: #1770b5;
  border: 1.7px solid #88bffc;
}

#settings-modal-bg {
  position: fixed;
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0;
  background: #283153a6;
  z-index: 2000;
  display: none; /* toggled by JS */
  align-items: center; 
  justify-content: center;
  animation: settingsfade 0.2s;
}

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

#settings-modal {
  background: #fafdff;
  border-radius: 14px;
  box-shadow: 0 4px 44px #0000001c, 0 1.5px 22px #98beff22;
  padding: 30px 32px 21px 32px;
  min-width: 400px;
  max-width: 90vw;
  width: 500px;
  color: #133259;
  font-size: 1.06em;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  margin: 20px;
}

#settings-modal h2 {
  margin-top: 0;
  font-size: 1.26em;
  font-weight: 700;
  margin-bottom: 17px;
  color: #188be9;
}

#settings-close-btn {
  position: absolute;
  right: 11px; 
  top: 11px;
  font-size: 1.28em;
  border: none;
  background: none;
  color: #879ad7;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

#settings-close-btn:hover {
  background: #e7eefc;
  color: #188be9;
}

.settings-row {
  margin-bottom: 21px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.settings-label {
  color: #7da6e7;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
  font-size: 1em;
}

.settings-slider-row {
  display: flex; 
  align-items: center; 
  gap: 13px;
}

#lang-count-slider {
  accent-color: #298ee6;
  width: 110px;
  min-width: 80px;
  margin-right: 7px;
}

#lang-count-num {
  font-size: 1.1em;
  font-weight: 500;
  background: #e7eefc;
  color: #226ad8;
  border-radius: 6px;
  padding: 3px 9px;
  margin-left: 4px;
  min-width: 36px;
  text-align: center;
  display: inline-block;
}

.settings-desc {
  font-size: 0.99em;
  color: #7581ad;
  max-width: 340px;
  margin-bottom: 9px;
  line-height: 1.65;
}

.settings-row:last-child {
  margin-bottom: 0;
}

.settings-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-checkbox-row input[type="checkbox"] {
  accent-color: #298ee6;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.settings-checkbox-row label {
  cursor: pointer;
  font-size: 1em;
  color: #133259;
}

.settings-checkbox-row label {
  color: #dbe6ff;
}

.settings-checkbox-row input[type="checkbox"] {
  accent-color: #5bc1fa;
}

/* ===== THEME TOGGLE BUTTON ===== */
#theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.4em;
  z-index: 1000;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.16s;
  padding: 6px 12px 6px 8px;
  opacity: 0.72;
}

#theme-toggle:hover { 
  background: #dde8ff30; 
  opacity: 1;
}

/* ===== CREDITS STYLES ===== */
.credits-hint {
  /* @tweakable Opacity of the credits hover tooltip */
  opacity: 0;
  position: absolute;
  left: 115%;
  top: 50%;
  transform: translateY(-50%);
  background: #20294a;
  color: #fff;
  padding: 7px 13px;
  border-radius: 7px;
  font-size: 0.94em;
  white-space: pre-line;
  box-shadow: 0 1px 11px #0b192730;
  pointer-events: none;
  /* @tweakable Z-index of the credits tooltip to ensure it appears above all other elements */
  z-index: 9999;
  transition: opacity .17s;
  max-width: 245px;
}

.credits:hover .credits-hint,
.credits:focus .credits-hint {
  opacity: 1;
  pointer-events: auto;
}

/* ===== DARK THEME STYLES ===== */
@media (prefers-color-scheme: dark) {
  body {
    background: #14171f;
    color: #ededf2;
  }
  
  h1 {
    color: #f1faff;
    text-shadow: 0 1px 0 #1e2633, 0 0.5px 0 #23407320;
  }
  
  .steps-desc {
    color: #bbcae8;
  }
  
  form textarea {
    background: #252839;
    border: 1px solid #354264;
    color: #eaeaff;
  }
  
  form button,
  button {
    background: #226ad8;
    color: #f4f8ff;
  }
  
  button:active, 
  form button:active { 
    background: #144c9c; 
  }
  
  #output-section {
    background: #182130;
    color: #e6eeff;
    box-shadow: 0 1px 12px #10152c;
  }
  
  .label {
    color: #5893e3;
  }
  
  #result {
    color: #eaf5ff;
  }
  
  .small {
    color: #4c5978;
  }
  
  #loading {
    color: #a2bffc;
  }
  
  .lang-step-chip {
    background: #234073;
    color: #9dc7ff;
  }
  
  .lang-step-chip.selected {
    background: #0e5adf;
    color: #faffe1;
  }
  
  .lang-step-chip:hover {
    background: #4f85fb;
    color: #fff;
  }
  
  .plus {
    color: #365991;
  }
  
  .sushi-btn-link {
    background: #171f2d;
    box-shadow: 0 2px 9px #0c0f2033;
  }
  
  .sushi-btn-link:active {
    background: #212e49;
  }
  
  .sushi-btn-link:hover, 
  .sushi-btn-link:focus {
    background: #264577;
    box-shadow: 0 2px 15px #3742793b;
    color: #e5edff;
  }
  
  .sushi-btn {
    color: #68a6ff;
  }
  
  /* Reddit logo fallback (mostly white/orange) so it's visible on dark */
  .sushi-btn .icon svg {
    filter: drop-shadow(0 0 2px #0a0a0e) brightness(1.1);
  }
  
  #settings-gear-btn {
    background: #182236;
    border: 1.7px solid #3b4a67;
    color: #99cbff;
    box-shadow: 0 2px 14px #1534597b;
  }
  
  #settings-gear-btn:hover {
    background: #263e5b;
    color: #88bffc;
    border: 1.7px solid #497dcc;
  }
  
  #settings-modal-bg {
    background: #081021d0;
  }
  
  #settings-modal {
    background: #172336;
    color: #dbe6ff;
    box-shadow: 0 7px 42px #03112560, 0 1.5px 22px #0e324a30;
  }
  
  #settings-modal h2 { 
    color: #5bc1fa; 
  }
  
  #settings-close-btn:hover {
    background: #274478;
    color: #74c6ff;
  }
  
  #lang-count-num {
    background: #21375e;
    color: #8cbdff;
  }
  
  #theme-toggle:hover { 
    background: #213b6e; 
  }
  
  .credits-hint {
    background: #0c1833;
    color: #bde9ff;
    box-shadow: 0 2px 16px #081b2f44;
  }
}