/* =========================================
   CryptoText – Stylesheet
   Struktur:
   1) Design Tokens (CSS Vars)
   2) Base / Reset
   3) Layout
   4) Components
   5) States & Interactions
   6) Utilities
   ========================================= */

/* -----------------------------------------
 * 1) Design Tokens
 * ----------------------------------------- */
:root{
  /* Colors */
  --bg:#0f1115;
  --fg:#e6e6e6;
  --muted:#9aa3af;
  --card:#151822;
  --accent:#DF451E; /* brand accent (orange) */
  --border:#24283b;

  /* Gradient brand colors (editable) */
  --g1:#DF451E;  /* accent orange */
  --g2:#B7B4B4;  /* secondary gray */
  --g3:#FFFFFF;  /* white highlight */
  --grad-speed:8s;

  /* Layout */
  --radius-lg:12px;
  --radius-md:10px;
  --radius-sm:6px;
  --container:1000px;
  --gap:12px;
  --pad:14px;

  /* Typography */
  --font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  /* Effects */
  --shadow:0 6px 16px rgba(0,0,0,.25);
  --ring:0 0 0 2px rgba(79,70,229,.5);
  --trans:160ms ease;
}

/* -----------------------------------------
 * 2) Base / Reset
 * ----------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:focus{outline:none}
:focus-visible{box-shadow:var(--ring)}

/* Scrollbar (WebKit) */
::-webkit-scrollbar{height:12px;width:12px}
::-webkit-scrollbar-thumb{background:#1b2030;border-radius:999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* -----------------------------------------
 * 3) Layout
 * ----------------------------------------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  position:sticky;top:0;backdrop-filter:saturate(120%) blur(4px);
}
h1{font-size:16px;margin:0}

.wrap{
  max-width:var(--container);
  margin:22px auto;
  padding:0 16px;
}
.grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .grid{grid-template-columns:1fr 1fr}
}

/* -----------------------------------------
 * 4) Components
 * ----------------------------------------- */
.card{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--pad);
  box-shadow:var(--shadow);
}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1}

textarea{
  flex:1;
  width:100%;
  min-height:260px;
  background:var(--card);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px;
  font-family:var(--mono);
  resize:vertical;
  transition:border-color var(--trans), box-shadow var(--trans);
}
textarea::placeholder{color:var(--muted)}

select,
input[type="text"],
input[type="number"]{
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:9px 10px;
  transition:border-color var(--trans), box-shadow var(--trans), background var(--trans);
}

.btn{
  appearance:none;
  border:1px solid var(--border);
  background:#1b2030;
  color:var(--fg);
  padding:10px 12px;
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:transform var(--trans), background var(--trans), border-color var(--trans), box-shadow var(--trans);
  will-change:transform;
}
.btn.primary{
  border-color:#3f3bdb;
  color:var(--fg);
  background-image:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
  background-size:200% 200%;
  animation:gradientShift calc(var(--grad-speed) * 1.2) linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .btn.primary{ animation:none }
}

.hint{color:var(--muted);font-size:12px}

/* Legacy: Options grid (aktuell entfernt im Markup, hier belassen für evtl. spätere Nutzung) */
.k{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
.k label{display:flex;align-items:center;gap:6px}

.footer{color:var(--muted);text-align:center;padding:14px 0}
code{background:#0c0e14;border:1px solid var(--border);padding:2px 6px;border-radius:var(--radius-sm)}

/* -----------------------------------------
 * 5) States & Interactions
 * ----------------------------------------- */
textarea:focus-visible,
select:focus-visible,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible{border-color:var(--accent)}

select:focus-visible,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
textarea:focus-visible{
  border-color:transparent;
  box-shadow:0 0 0 2px rgba(79,70,229,.25), inset 0 0 0 1px #000, 0 0 0 1px rgba(79,70,229,.25);
  background-image:linear-gradient(var(--card),var(--card)), linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
  background-origin:border-box;
  background-clip:padding-box, border-box;
}

.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Subtle separation for the result card header row */
.card .row + textarea{margin-top:8px}

/* -----------------------------------------
 * 6) Utilities
 * ----------------------------------------- */
.is-hidden{display:none !important}
.muted{color:var(--muted)}

/* ---- Hero ---- */
.hero{
  max-width:var(--container);
  margin:28px auto 8px;
  padding:0 16px;
  text-align:left;
}
.hero-title{
  font-size:clamp(32px,8vw,72px);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0 0 6px 0;
  font-weight:800;
}
.gradient{
  background:linear-gradient(90deg,var(--g1) 0%, var(--g2) 40%, var(--g3) 80%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% 200%;
}
.gradient.animate{
  animation:gradientShift var(--grad-speed) linear infinite;
}
@keyframes gradientShift{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}
@media (prefers-reduced-motion: reduce){
  .gradient.animate{ animation:none }
}

.hero-sub{
  margin:0;
  font-size:clamp(14px,2.3vw,18px);
  color:var(--muted);
}

/* Subtle brand in top bar */
.brand{font-weight:600; color:#cbd5e1}

/* Selection color for brand consistency */
::selection{
  background:#DF451E;
  color:#fff;
}