/* Shared style for the darkrelay.net translator pages.
   Each page sets --accent1 / --accent2 in its own <style>. */
:root{
  --bg:#0b0f14;
  --panel:#111826;
  --panel2:#0e1520;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --border:#243244;
  --accent1:#34d399;
  --accent2:#fbbf24;
  --link:#60a5fa;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  background: radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 60%),
              radial-gradient(1000px 600px at 110% 10%, color-mix(in srgb, var(--accent1) 14%, transparent), transparent 55%),
              var(--bg);
  color:var(--text);
  min-height:100vh;
}
.wrap{max-width:920px;margin:0 auto;padding:32px 18px 64px}
header{padding:10px 0 8px}
a.back{color:var(--muted);text-decoration:none;font-size:.9rem}
a.back:hover{color:var(--text)}
h1{margin:6px 0 0;font-size:2.2rem;letter-spacing:-.02em}
h1 .flag{font-size:1.6rem;vertical-align:middle}
.tag{color:var(--muted);margin:6px 0 0;font-size:1.02rem}
.tag b{color:var(--accent2);font-weight:600}

.panel{
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  margin-top:22px;
}
label{display:block;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
textarea{
  width:100%;
  min-height:120px;
  resize:vertical;
  background:#0a0e14;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  font-size:1.05rem;
  font-family:inherit;
  line-height:1.5;
}
textarea:focus{outline:none;border-color:var(--accent1)}

.output{
  width:100%;
  min-height:120px;
  background:#0a0e14;
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  font-size:1.15rem;
  line-height:1.6;
  white-space:pre-wrap;
  word-wrap:break-word;
}
.output:empty::before{content:attr(data-empty);color:#475569}

.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
button{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent1) 30%, #0d1420),
    color-mix(in srgb, var(--accent1) 16%, #0d1420));
  color:var(--text);
  border:1px solid color-mix(in srgb, var(--accent1) 50%, #0d1420);
  border-radius:10px;
  padding:10px 18px;
  font-size:1rem;
  font-family:inherit;
  cursor:pointer;
  transition:filter .12s;
}
button:hover{filter:brightness(1.25)}
button.secondary{background:linear-gradient(180deg,#1a2333,#141b28);border-color:var(--border)}
button.gold{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent2) 30%, #0d1420),
    color-mix(in srgb, var(--accent2) 16%, #0d1420));
  border-color:color-mix(in srgb, var(--accent2) 50%, #0d1420);
}

.slider-box{display:flex;align-items:center;gap:12px;flex:1;min-width:260px}
.slider-box input[type=range]{flex:1;accent-color:var(--accent2)}
.level-label{font-size:.95rem;color:var(--accent2);min-width:110px;font-weight:600;text-align:right}

.copied{color:var(--accent1);font-size:.9rem;opacity:0;transition:opacity .3s}
.copied.show{opacity:1}

footer{margin-top:34px;color:var(--muted);font-size:.85rem;text-align:center}
footer a{color:var(--link);text-decoration:none}

/* Hub page cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:24px}
a.card{
  display:block;
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  color:var(--text);
  text-decoration:none;
  transition:transform .12s, border-color .12s;
}
a.card:hover{transform:translateY(-2px);border-color:var(--c,#60a5fa)}
.card .emoji{font-size:1.9rem}
.card h2{margin:8px 0 4px;font-size:1.2rem}
.card .dialect{color:var(--c,#60a5fa);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.card .sample{color:var(--muted);font-size:.92rem;margin-top:8px;font-style:italic}

@media (max-width:600px){ h1{font-size:1.7rem} }