:root {
    --bg: #1a1b26;
    --fg: #c0caf5;
    --muted: #6b7089
}

* {
    box-sizing: border-box
}

body {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
    background: var(--bg);
    color: var(--fg);
    min-height: 100vh;
    margin: 0
}

.container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px
}

h1 {
    margin: 0 0 12px
}

textarea {
    width: 100%;
    height: 360px;
    padding: 12px;
    border: 1px solid #2a2b3a;
    background: #0f1117;
    color: var(--fg);
    font-family: inherit;
    font-size: 14px;
    resize: vertical
}

.actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px
}

button {
    background: #7aa2f7;
    color: #041025;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 2px;
    font-weight: 600
}

.result {
    margin-top: 12px;
    color: var(--muted)
}

pre {
    background: #0f1117;
    padding: 12px;
    border-radius: 6px;
    overflow: auto
}

/* Code view with line numbers */
.code-wrap{display:flex;align-items:flex-start;gap:12px}
.gutter{user-select:none;color:var(--muted);text-align:right;padding:12px 6px;border-radius:6px 0 0 6px;background:#0b0c10}
.gutter span{display:block;padding:0 6px;color:#6b7089}
.code-pre{flex:1;margin:0;padding:0;background:transparent}
.code{display:block;padding:0;background:transparent}

/* per-line alignment */
.gutter-line, .code-line{
    line-height:20px; /* fixed line height for alignment */
    font-family: inherit;
    font-size:13px;
}
.code-line{white-space:pre}
.code-pre{padding:12px}



/* Open a paste section */
.open-section{
    margin-top:18px;
    background:#0d0f14;
    border:1px solid #232431;
    padding:12px;
    border-radius:8px;
}
.open-section h1, .open-section h2{margin:0 0 8px}
.open-row{display:flex;gap:8px;align-items:center}
#openId{flex:1;padding:10px 12px;border-radius:6px;border:1px solid #2a2b3a;background:#0f1117;color:var(--fg);font-family:inherit;font-size:14px}
#openId:focus{outline:none;box-shadow:0 0 0 3px rgba(122,162,247,0.12);border-color:#7aa2f7}
.open-btn{background:#7aa2f7;color:#041025;border:none;padding:10px 14px;border-radius:6px;font-weight:700;cursor:pointer}
.open-btn:hover{filter:brightness(0.95)}
.open-help{margin:8px 0 0;color:var(--muted);font-size:13px}

/* Loading and result blocks */
.loading,.result{margin-top:12px;color:var(--muted);background:#0f1117;border:1px solid #232431;padding:10px;border-radius:6px}
.result a{color:#7dcfff;word-break:break-all}