/* ====== БАЗА ====== */
:root{
  --bg: #0f0f10;
  --fg: #e9e9ea;
  --muted:#a0a0a7;
  --card:#161618;
  --border:#222226;
  --accent:#8e8eff;
  --accent-2:#6366f1;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --font: 15px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f7f8; --fg:#121212; --muted:#666; --card:#ffffff; --border:#e8e8ec;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
  }
}
html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0; font:400 var(--font)/1.55 ui-sans-serif, -apple-system, Segoe UI, Roboto, Inter, Arial;
  background:var(--bg); color:var(--fg);
}

/* ====== ЛЕЙАУТ ====== */
.container{max-width:1100px; margin:0 auto; padding:24px;}
.site-header{position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in oklab, var(--bg), transparent 8%); border-bottom:1px solid var(--border); z-index:20;}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px;}
.logo{display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.title{margin:0; font-weight:700; letter-spacing:.3px}
.site-footer{padding-block:40px; display:flex; justify-content:center}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width: 980px){ .grid{grid-template-columns:1fr} }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.card-head{padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:end; justify-content:space-between; gap:12px}
.card-head h2{margin:0; font-size:16px}
.card-body{padding:16px 20px}
.tool + .tool{border-top:1px dashed var(--border)}

.muted{color:var(--muted)}
.hint{margin-top:10px; color:var(--muted)}
.status{margin-left:8px; color:var(--muted)}

/* ====== КНОПКИ / ИНПУТЫ ====== */
.btn{
  appearance:none; border:1px solid transparent; background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff; border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:600; transition:transform .05s ease, box-shadow .2s ease;
  box-shadow:0 8px 18px rgba(99,102,241,.3);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.btn-lite{
  background:transparent; color:var(--fg); border-color:var(--border); border-width:1px; border-style:solid;
  box-shadow:none;
}
.btn-ghost{
  background:transparent; color:var(--fg); border:1px solid var(--border); box-shadow:none;
}
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

textarea{
  width:100%; min-height:48vh; resize:vertical; border-radius:12px; padding:12px 14px;
  border:1px solid var(--border); background:color-mix(in oklab, var(--card), black 2%);
  color:var(--fg); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:14px;
}
textarea[readonly]{opacity:.95}
kbd{
  background:color-mix(in oklab, var(--card), white 10%); border:1px solid var(--border); border-radius:6px; padding:2px 6px; font-family:ui-monospace, monospace; font-size:12px;
}

/* ====== СНИППЕТЫ ====== */
.pre, code{
  display:block; width:100%; background:color-mix(in oklab, var(--card), black 4%); color:var(--fg);
  border:1px solid var(--border); border-radius:10px; padding:12px; overflow:auto; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px;
}
.snippet{display:flex; gap:10px; align-items:center}
.snippet code{flex:1}

/* ====== ДРУГОЕ ====== */
a{color:var(--accent)}