:root {
  --bg: #f9fafb;
  --card-bg: #fff;
  --border: #e5e7eb;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --secondary: #6b7280;
  --radius: 12px;
  --shadow: 0 4px 8px rgba(0,0,0,0.05);
}

body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: #111;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

header { text-align:center; margin-bottom:2rem; }
header h1 { margin:0; font-size:2rem; }
header .subtitle { color:#555; margin-top:.25rem; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

h2 { margin-top:0; font-size:1.3rem; }

textarea {
  flex:1;
  padding:.6rem;
  border-radius: var(--radius);
  border:1px solid var(--border);
  font-family: monospace;
  resize: vertical;
  min-height:100px;
}

.row { display:flex; gap:.5rem; margin-bottom:1rem; align-items:flex-start; }
.link-row { display:flex; gap:.5rem; margin:.4rem 0; }

button {
  border:none;
  border-radius: var(--radius);
  padding:.6rem 1rem;
  cursor:pointer;
  font-weight:500;
  transition: background .2s;
}

button.primary {
  background: var(--primary);
  color:#fff;
}
button.primary:hover { background: var(--primary-hover); }

button.secondary {
  background: #f3f4f6;
  color: var(--secondary);
}
button.secondary:hover { background: #e5e7eb; }

.result { margin-top:1rem; }

.note { font-size:.85rem; color:#666; margin-top:.3rem; }

#toast {
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
  background:#111; color:#fff;
  padding:.6rem 1rem; border-radius:var(--radius);
  opacity:0; transition:opacity .25s;
  pointer-events:none;
}
#toast.show { opacity:1; }

/* Responsivita pro mobily */
@media (max-width: 640px) {
  body { padding: 0 .5rem; }
  .row, .link-row {
    flex-direction: column;
    align-items: stretch;
  }
  textarea { min-height: 140px; }
  button { width: 100%; }
}

/* Grid layout pro široké obrazovky */
.grid {
  display: block;
}

@media (min-width: 1024px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .left-col, .right-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}