/* =========================================================
   Tool UI
   ========================================================= */

.tool-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-16);
  margin-bottom: var(--s-16);
}
.tool-title { margin: 0; font-size: var(--fs-24); font-weight: 950; letter-spacing: -0.02em; }
.tool-desc { margin: var(--s-8) 0 0; color: var(--muted); font-weight: 650; }
.tool-head-actions { display: flex; gap: var(--s-10); flex-wrap: wrap; }

.tool-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-16);
  align-items: start;
}
.tool-options { margin-top: var(--s-12); display: grid; gap: var(--s-10); }
.tool-buttons { margin-top: var(--s-14); display: flex; gap: var(--s-10); flex-wrap: wrap; }

.results-card {
  border-radius: var(--r-20);
  border: 1px solid rgba(11, 92, 255, 0.18);
  background:
    radial-gradient(900px 280px at 20% 0%, rgba(11, 92, 255, 0.12), transparent 55%),
    radial-gradient(900px 260px at 80% 10%, rgba(42, 166, 255, 0.10), transparent 55%),
    var(--surface);
  box-shadow: 0 18px 60px rgba(11, 92, 255, 0.12), 0 10px 30px rgba(2, 8, 23, 0.10);
  padding: var(--s-18);
  position: relative;
  overflow: hidden;
  animation: resultsIn var(--dur-3) var(--ease-out) both;
}
@keyframes resultsIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}
.results-title {
  font-weight: 950;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
}
.updated-pill {
  font-size: var(--fs-12);
  font-weight: 900;
  color: var(--blue-700);
  background: rgba(11, 92, 255, 0.08);
  border: 1px solid rgba(11, 92, 255, 0.18);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}
.updated-pill.is-pulse {
  animation: pulse 700ms var(--ease-out) 1;
}
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(11, 92, 255, 0); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(11, 92, 255, 0.10); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(11, 92, 255, 0); }
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-12);
}
.metric {
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--r-16);
  padding: var(--s-12) var(--s-14);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
}
.metric-label { font-size: var(--fs-12); color: var(--muted); font-weight: 850; }
.metric-value {
  font-size: clamp(var(--fs-20), 1.7vw, var(--fs-28));
  font-weight: 980;
  margin-top: var(--s-6);
  letter-spacing: -0.02em;
}
.metric-value.is-bump { animation: bump 320ms var(--ease-out) 1; }
@keyframes bump {
  0% { transform: translateY(0); }
  40% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

.results-section { margin-top: var(--s-14); }
.results-subhead {
  font-weight: 950;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-10);
  margin-bottom: var(--s-10);
}
.longest-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--s-8);
}
.longest-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-10);
  color: var(--text-2);
  line-height: 1.45;
}
.word-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(11, 92, 255, 0.18);
  background: rgba(11, 92, 255, 0.06);
  color: var(--blue-700);
  font-weight: 900;
  font-size: var(--fs-12);
}

.breakdown {
  padding: var(--s-12) var(--s-10) var(--s-16);
  display: grid;
  gap: var(--s-10);
}
.break-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--r-16);
  padding: var(--s-10) var(--s-12);
  background: rgba(255,255,255,0.75);
}
.break-word {
  font-weight: 900;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}
.break-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  color: var(--muted);
  font-weight: 800;
  font-size: var(--fs-13);
}

.empty-state {
  border-radius: var(--r-20);
  border: 1px dashed rgba(11, 92, 255, 0.25);
  background: rgba(11, 92, 255, 0.04);
  padding: var(--s-24);
  text-align: left;
}
.empty-icon {
  width: 44px; height: 44px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(11, 92, 255, 0.10);
  border: 1px solid rgba(11, 92, 255, 0.18);
  color: var(--blue-700);
  font-weight: 900;
  margin-bottom: var(--s-12);
}
.empty-title { font-weight: 950; font-size: var(--fs-18); }
.empty-desc { margin-top: var(--s-8); color: var(--text-2); line-height: var(--lh-relaxed); }

.steps { margin: var(--s-12) 0 0; padding-left: 1.2rem; color: var(--text-2); }
.steps li { margin: var(--s-8) 0; }

.related { margin-top: var(--s-24); }
.related-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-12); }
.related-grid { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-12); }
.mini-card {
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  background: var(--surface);
  padding: var(--s-14);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.mini-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.mini-title { font-weight: 950; }
.mini-desc { margin-top: var(--s-6); color: var(--muted); font-weight: 700; font-size: var(--fs-13); }

@media (max-width: 980px) {
  .tool-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .results-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   1-Syllable Words — Pinterest-vibe Board Styles (append)
   ========================================================= */

.osw-shell {
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(11, 92, 255, 0.10), transparent 55%),
    radial-gradient(900px 300px at 80% 10%, rgba(255, 99, 132, 0.08), transparent 55%),
    radial-gradient(900px 300px at 50% 100%, rgba(46, 213, 115, 0.07), transparent 55%),
    var(--surface);
}

.osw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-16);
  margin-bottom: var(--s-16);
}
.osw-head-actions { display: flex; gap: var(--s-10); flex-wrap: wrap; }

.osw-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--s-16);
  align-items: start;
}

.osw-controls {
  display: grid;
  gap: var(--s-14);
}

.osw-search {
  border-radius: 999px;
  background:
    radial-gradient(600px 260px at 20% 20%, rgba(11, 92, 255, 0.08), transparent 55%),
    rgba(246, 249, 255, 0.95);
}

.osw-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-10);
}
.osw-stat {
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  background: rgba(255,255,255,0.75);
  padding: var(--s-12) var(--s-14);
}
.osw-stat-label { font-size: var(--fs-12); color: var(--muted); font-weight: 900; }
.osw-stat-value { margin-top: var(--s-6); font-weight: 980; font-size: var(--fs-20); letter-spacing: -0.02em; }

.osw-letters {
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  background: rgba(246, 249, 255, 0.75);
  padding: var(--s-14);
}
.osw-letters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-10);
  margin-bottom: var(--s-10);
}
.osw-letter-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-8);
}
.osw-letter {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.75);
  padding: 0.5rem 0.25rem;
  font-weight: 950;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.osw-letter:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.osw-letter.is-active {
  background: rgba(11, 92, 255, 0.10);
  border-color: rgba(11, 92, 255, 0.28);
  color: var(--blue-700);
}

.osw-help { padding: var(--s-18); }
.osw-note { padding: 0 var(--s-6); }

.osw-board {
  min-height: 420px;
}
.osw-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}
.osw-board-title {
  font-weight: 950;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
}
.osw-board-actions { display: flex; gap: var(--s-10); flex-wrap: wrap; }

.osw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-12);
}

.osw-pin {
  text-align: left;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 22px;
  padding: var(--s-14) var(--s-14);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 10px 28px rgba(2, 8, 23, 0.07);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.osw-pin:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(2, 8, 23, 0.10); }
.osw-pin:active { transform: translateY(0px); }

.osw-pin.is-selected {
  border-color: rgba(11, 92, 255, 0.30);
  box-shadow: 0 20px 60px rgba(11, 92, 255, 0.16), 0 10px 30px rgba(2, 8, 23, 0.10);
}

.osw-pin::before {
  content: "";
  position: absolute;
  inset: -2px;
  opacity: 0.9;
  pointer-events: none;
  background: radial-gradient(700px 220px at 18% 0%, rgba(11, 92, 255, 0.12), transparent 60%);
}

.osw-pin--v1::before { background: radial-gradient(700px 220px at 18% 0%, rgba(11, 92, 255, 0.14), transparent 60%); }
.osw-pin--v2::before { background: radial-gradient(700px 220px at 18% 0%, rgba(255, 99, 132, 0.12), transparent 60%); }
.osw-pin--v3::before { background: radial-gradient(700px 220px at 18% 0%, rgba(46, 213, 115, 0.10), transparent 60%); }
.osw-pin--v4::before { background: radial-gradient(700px 220px at 18% 0%, rgba(255, 206, 86, 0.12), transparent 60%); }
.osw-pin--v5::before { background: radial-gradient(700px 220px at 18% 0%, rgba(155, 89, 182, 0.10), transparent 60%); }
.osw-pin--v6::before { background: radial-gradient(700px 220px at 18% 0%, rgba(52, 152, 219, 0.12), transparent 60%); }

.osw-pin-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-10);
  position: relative;
}
.osw-pin-word {
  font-weight: 980;
  letter-spacing: -0.02em;
  font-size: var(--fs-20);
}
.osw-pin-chip {
  font-size: var(--fs-12);
  font-weight: 900;
  color: var(--muted);
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.65);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
}
.osw-pin-sub {
  margin-top: var(--s-8);
  color: var(--text-2);
  font-weight: 650;
  font-size: var(--fs-13);
  position: relative;
}

.osw-empty { margin-top: var(--s-12); }
.osw-sentinel { height: 1px; }

@media (max-width: 1100px) {
  .osw-layout { grid-template-columns: 1fr; }
  .osw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .osw-letter-grid { grid-template-columns: repeat(9, 1fr); }
}
@media (max-width: 560px) {
  .osw-grid { grid-template-columns: 1fr; }
  .osw-letter-grid { grid-template-columns: repeat(7, 1fr); }
}

/* =========================================================
   Modal (Word details)
   ========================================================= */

.osw-modal[hidden] { display: none; }
.osw-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--s-16);
}
.osw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 23, 0.42);
  backdrop-filter: blur(10px);
}
.osw-modal-card {
  position: relative;
  width: min(720px, calc(100% - 2rem));
  border-radius: 26px;
  border: 1px solid rgba(11, 92, 255, 0.18);
  background:
    radial-gradient(1000px 380px at 20% 0%, rgba(11, 92, 255, 0.16), transparent 58%),
    radial-gradient(900px 360px at 90% 20%, rgba(255, 99, 132, 0.10), transparent 60%),
    rgba(255,255,255,0.96);
  box-shadow: 0 30px 90px rgba(2, 8, 23, 0.30);
  overflow: hidden;
  outline: none;
  animation: oswPop var(--dur-3) var(--ease-out) both;
}
@keyframes oswPop {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.osw-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-12);
  padding: var(--s-16) var(--s-16) var(--s-12);
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
.osw-modal-title { display: grid; gap: var(--s-6); }
.osw-word {
  font-size: clamp(var(--fs-28), 2.2vw, var(--fs-44));
  line-height: var(--lh-tight);
  font-weight: 980;
  letter-spacing: -0.03em;
}
.osw-phon {
  color: var(--text-2);
  font-weight: 800;
  font-size: var(--fs-14);
}
.osw-modal-actions { display: flex; gap: var(--s-10); }

.osw-modal-body { padding: var(--s-16); }
.osw-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}
.osw-modal-badges { display: flex; gap: var(--s-10); flex-wrap: wrap; }
.osw-audio-wrap { display: flex; gap: var(--s-10); flex-wrap: wrap; }

.osw-meaning {
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.70);
  border-radius: 20px;
  padding: var(--s-14);
  margin-top: var(--s-12);
}
.osw-pos {
  font-weight: 950;
  color: var(--blue-700);
  margin-bottom: var(--s-10);
}
.osw-defs {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: var(--s-10);
}
.osw-def-text { color: var(--text); font-weight: 750; }
.osw-def-ex {
  margin-top: var(--s-6);
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: 1.55;
}
.osw-syn {
  margin-top: var(--s-8);
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  align-items: center;
}
.osw-syn-label { font-weight: 900; color: var(--muted); font-size: var(--fs-12); }
.osw-syn-pill {
  display: inline-flex;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(11, 92, 255, 0.18);
  background: rgba(11, 92, 255, 0.06);
  color: var(--blue-700);
  font-weight: 900;
  font-size: var(--fs-12);
}

.osw-src { margin-top: var(--s-12); display: flex; gap: var(--s-10); align-items: center; }
.osw-src-link { font-weight: 900; color: var(--blue-700); }
.osw-src-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.osw-modal-foot {
  padding: var(--s-12) var(--s-16) var(--s-14);
  border-top: 1px solid rgba(15, 23, 42, 0.10);
}

/* Skeleton */
.osw-skeleton { display: grid; gap: var(--s-10); }
.sk-line {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(11, 92, 255, 0.10),
    rgba(11, 92, 255, 0.04),
    rgba(11, 92, 255, 0.10)
  );
  background-size: 200% 100%;
  animation: sk 1.1s linear infinite;
}
@keyframes sk { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.sk-w-60 { width: 60%; }
.sk-w-70 { width: 70%; }
.sk-w-85 { width: 85%; }
.sk-w-90 { width: 90%; }