/* ---------- PALETTE ---------- */
:root{
  --bg-grad-start:#c7d2fe; --bg-grad-end:#e0f2fe;

  --blue-600:#2563eb;      /* Convert */
  --blue-600-d:#1d4ed8;    /* Convert active */
  --blue-500:#3b82f6;      /* Copy / Add 2nd */
  --blue-400:#60a5fa;      /* Info */
  --red-500 :#f07d7d;      /* Exclude */

  --glass:rgba(255,255,255,.25);
  --glass-border:rgba(255,255,255,.35);
  --text-main:#111827;
  --text-invert:#f3f4f6;
}
[data-theme="dark"]{
  --bg-grad-start:#1e293b; --bg-grad-end:#334155;
  --glass:rgba(0,0,0,.45);
  --glass-border:rgba(255,255,255,.15);
  --text-main:#f3f4f6;
  --text-invert:#111827;
}

/* ---------- BACKGROUND ---------- */
html,body{
  height:100%;
  margin:0;
  font-family:system-ui,sans-serif;
  background:linear-gradient(120deg,var(--bg-grad-start),var(--bg-grad-end));
  background-size:100% 100%; /* Remove the animated background */
  /* animation:aurora 18s ease-in-out infinite; */ /* Comment out animation */
}
/* @keyframes aurora{
  0%  {background-position:0 50%}
  50% {background-position:100% 50%}
  100%{background-position:0 50%}
} */

/* ---------- CARD ---------- */
.card{
  max-width:820px;
  margin:4rem auto;
  padding:2rem;
  border-radius:18px;
  background:var(--glass);
  /* backdrop-filter:blur(12px); */ /* Remove blur effect */
  border:1px solid var(--glass-border);
  color:var(--text-main);
  box-shadow:0 10px 20px -5px rgba(0,0,0,.15);
}

/* ---------- FORM CONTROLS ---------- */
textarea,select{
  width:100%;
  min-height:140px;
  padding:.5rem;
  font-family:monospace;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.1);
  border-radius:6px;
  color:var(--text-main);
}
[data-theme="dark"] textarea,
[data-theme="dark"] select{
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.25);
}
[data-theme="dark"] textarea::placeholder{color:#9ca3af}

label{
  font-weight:600;
  margin:1rem 0 .4rem;
  display:block;
}
select{margin-left:.5rem}

/* ---------- BUTTONS ---------- */
button{
  margin-top:1rem;
  padding:.55rem 1.2rem;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:transform .08s,background .15s;
}
button:active{transform:scale(.96)}
button:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px}

#convert{background:var(--blue-600);color:var(--text-invert);}
#convert:active{background:var(--blue-600-d);}

#copy,#copy2,#add2{background:var(--blue-500);color:var(--text-invert);}
#copy.copied,#copy2.copied{background:#38d57a!important}

#info{background:var(--blue-400);color:var(--text-invert);}

#add2{margin-left:auto;}           /* Push to right */

#clear{
  background:var(--glass);
  color:var(--blue-600);
  border:1px solid var(--blue-600);
}
#clear:hover{background:var(--blue-600);color:var(--text-invert);}

#exclude{background:var(--red-500);color:var(--text-invert);}

/* ---------- TOGGLES ---------- */
.top-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  margin-bottom:.75rem;
}
.toggle-wrap{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-weight:600;
  font-size:.85rem;
}
.toggle-wrap input{width:16px;height:16px;}

/* ---------- THEME TOGGLE ---------- */
#themeToggle, #videoButton, #helpButton {
  position:fixed;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  line-height:1;
  border:none;
  border-radius:50%;
  cursor:pointer;
  background:var(--glass);
  border:1px solid var(--glass-border);
  box-shadow:0 3px 8px rgba(0,0,0,.15);
  backdrop-filter:blur(4px);
  transition:transform .08s;
  z-index:10000;
}
#themeToggle {
  top:1rem;
  right:1rem;
}
#videoButton {
  top:5rem;
  right:1rem;
}
#helpButton {
  top:9rem;
  right:1rem;
}
#themeToggle:active, #videoButton:active, #helpButton:active {transform:scale(.9);}
@keyframes wiggle{0%{transform:rotate(0)}50%{transform:rotate(-20deg)}100%{transform:rotate(0)}}
#themeToggle.wiggle{animation:wiggle .4s ease;}
#themeToggle span{filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));}
[data-theme="dark"] #themeToggle span{filter:drop-shadow(0 1px 1px rgba(255,255,255,.15));}

/* ---------- MODALS ---------- */
.modal{
  position:fixed;inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  box-sizing:border-box;
  z-index:10001;
}
.modalBackdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(3px);
}
.modalCard{
  position:relative;
  max-width:600px;
  width:90%;
  padding:1.5rem;
  border-radius:14px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  color:var(--text-main);
}
#infoModal .modalCard{
  display:flex;
  flex-direction:column;
  max-height:min(80vh,720px);
  width:min(600px,100%);
}
#infoModal h2{
  flex:0 0 auto;
  padding-right:2rem;
}
#infoBody{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:.35rem;
}
.infoTextBlock{
  margin:0;
  padding:.85rem 1rem;
  border-radius:10px;
  background:rgba(255,255,255,.25);
  border:1px solid var(--glass-border);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.infoSection{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.infoSection h3{
  margin:0;
  font-size:1rem;
}
.infoList{
  width:100%;
  min-height:8rem;
  max-height:16rem;
  padding:.85rem 1rem;
  box-sizing:border-box;
  resize:vertical;
  border-radius:10px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.2);
  color:var(--text-main);
  font:inherit;
  font-family:monospace;
  line-height:1.4;
}
[data-theme="dark"] .infoTextBlock,
[data-theme="dark"] .infoList{
  background:rgba(0,0,0,.2);
}
.closeBtn{
  position:absolute;
  top:8px;right:12px;
  font-size:1.4rem;line-height:1;
  background:none;border:none;
  color:var(--text-main);cursor:pointer;font-weight:700;
}
pre{white-space:pre-wrap;margin:.75rem 0;font-family:monospace;}

#charGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
  gap:.5rem;
  margin:1rem 0;
}
#charGrid label{display:flex;align-items:center;gap:.25rem;font-weight:500;}

.form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

.form-row label {
  margin: 0;
  white-space: nowrap;
}

.form-row select {
  width: auto;
  min-width: 180px;
  min-height: unset;
  height: 2.2rem;
}

/* ---------- RAINING CAT & DOGS ---------- */
.rain-emoji{
  position:fixed;
  top:-5vh;
  font-size:2rem;
  pointer-events:none;
  opacity:.9;
  z-index:20000;
  animation:drop linear 4s forwards;
}
@keyframes drop{to{transform:translateY(110vh) rotate(360deg);} }