* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", monospace;
  background: #0e1116;
  color: #c9d1d9;
  line-height: 1.6;
  min-height: 100vh;
}

.container { max-width: 900px; margin: 0 auto; padding: 0 1.25rem; }

header {
  border-bottom: 1px solid #21262d;
  padding: 1rem 0;
  background: #0e1116;
  position: sticky;
  top: 0;
  z-index: 10;
}
header .container { display: flex; justify-content: space-between; align-items: center; }

h1 { font-size: 1.25rem; font-weight: 600; }
h1 a { color: #58a6ff; text-decoration: none; }
h1 a:hover { color: #79c0ff; }

nav a {
  color: #8b949e;
  text-decoration: none;
  margin-left: 1rem;
  font-size: .9rem;
}
nav a:hover { color: #58a6ff; }

main { padding: 2rem 0; }

.intro { color: #8b949e; margin-bottom: 1.5rem; }

#paste-form { display: flex; flex-direction: column; gap: 1rem; }

.controls { display: flex; gap: .75rem; flex-wrap: wrap; }

select {
  background: #161b22;
  border: 1px solid #30363d;
  color: #c9d1d9;
  padding: .5rem .75rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: .9rem;
}
select:focus { outline: none; border-color: #58a6ff; }

textarea {
  background: #161b22;
  border: 1px solid #30363d;
  color: #c9d1d9;
  padding: 1rem;
  border-radius: 6px;
  min-height: 300px;
  font-family: "SF Mono", Monaco, "Cascadia Code", Consolas, monospace;
  font-size: .9rem;
  line-height: 1.5;
  resize: vertical;
}
textarea:focus { outline: none; border-color: #58a6ff; }

.actions { display: flex; align-items: center; gap: 1rem; }

button {
  background: #238636;
  color: #fff;
  border: none;
  padding: .6rem 1.25rem;
  border-radius: 6px;
  font-size: .9rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
button:hover:not(:disabled) { background: #2ea043; }
button:disabled { opacity: .5; cursor: not-allowed; }

#status { color: #8b949e; font-size: .85rem; }

.hidden { display: none; }

#result {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
}
#result a { color: #58a6ff; text-decoration: none; word-break: break-all; }
#result a:hover { text-decoration: underline; }
.raw-link { color: #8b949e; font-size: .85rem; margin-top: .5rem; }

.paste-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  color: #8b949e;
  font-size: .8rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #21262d;
}

pre {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  font-family: "SF Mono", Monaco, "Cascadia Code", Consolas, monospace;
  font-size: .9rem;
  line-height: 1.5;
}
pre code { font-family: inherit; }

footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #21262d;
  color: #8b949e;
  font-size: .8rem;
  text-align: center;
}

@media (max-width: 600px) {
  textarea { min-height: 200px; }
  .controls { flex-direction: column; }
  select { width: 100%; }
}