:root {
    --bg:         #0d1117;
    --bg-card:    #161b22;
    --border:     #30363d;
    --fg:         #c9d1d9;
    --fg-bright:  #e6edf3;
    --fg-dim:     #8b949e;
    --accent:     #58a6ff;
    --accent-dim: #1f6feb;
    --green:      #3fb950;
    --red:        #f85149;
    --radius:     6px;
}

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

body {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1.65;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(13, 17, 23, 0.92);
    backdrop-filter: blur(12px);
}

.brand {
    font-weight: 600;
    font-size: 15px;
    color: var(--fg-bright);
}

.prompt { color: var(--green); font-weight: 400; }

.header-subtitle {
    font-size: 12px;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-nav {
    margin-left: auto;
    display: flex;
    gap: 16px;
    font-size: 11px;
}

.header-nav a { color: var(--fg-dim); }
.header-nav a:hover { color: var(--fg-bright); text-decoration: none; }

/* Main */
main {
    flex: 1;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Lifecycle rail */
.lifecycle-rail {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.lifecycle-rail .stage {
    color: var(--fg-dim);
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
}

.lifecycle-rail .stage-active {
    color: var(--accent);
    opacity: 1;
}

.lifecycle-rail .arrow {
    color: var(--border);
    font-size: 10px;
}

.btn-reset {
    margin-left: auto;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    background: transparent;
    color: var(--fg-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.btn-reset:hover {
    color: var(--fg);
    border-color: var(--fg-dim);
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--fg-bright);
    margin-bottom: 8px;
}

h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-bright);
    margin-bottom: 16px;
}

.description {
    font-size: 13px;
    color: var(--fg-dim);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Form */
.input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

label {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-dim);
    letter-spacing: 0.2px;
}

.unit-note {
    font-size: 11px;
    color: var(--fg-dim);
    margin-bottom: 16px;
}

input[type="number"] {
    font-family: inherit;
    font-size: 14px;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg-bright);
    outline: none;
    transition: border-color 0.15s;
}

input[type="number"]:focus {
    border-color: var(--accent);
}

button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 28px;
    background: var(--accent-dim);
    color: var(--fg-bright);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

button:hover {
    background: var(--accent);
    border-color: var(--accent);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Summary grid */
.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.summary-item {
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.summary-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.summary-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-bright);
}

.summary-primary .summary-value {
    font-size: 20px;
    color: var(--green);
}

/* Results table */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
}

tbody tr:last-child td { border-bottom: none; }

.num { text-align: right; }
.dim { color: var(--fg-dim); }

.table-caption {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-dim);
    margin-bottom: 8px;
    letter-spacing: 0.2px;
}

.result-note {
    font-size: 11px;
    color: var(--fg-dim);
    margin-top: 12px;
}

/* Lifecycle metadata */
.meta-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.meta-line {
    font-size: 12px;
    color: var(--fg-dim);
}

.status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}

.status-badge::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.status-draft { color: var(--accent); }
.status-draft::before { background: var(--accent); }

.status-released { color: var(--green); }
.status-released::before { background: var(--green); }

.hash {
    font-size: 11px;
    color: var(--fg-dim);
    font-family: inherit;
}

.btn-release {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 20px;
    background: transparent;
    color: var(--green);
    border: 1px solid var(--green);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}

.btn-release:hover {
    background: rgba(63, 185, 80, 0.1);
}

.btn-release:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.empty-state {
    font-size: 13px;
    color: var(--fg-dim);
}

.runtime-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 11px;
    color: var(--fg-dim);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.meta-sep { color: var(--border); }

/* Worksheet viewer dark theme overrides */
.ws-viewer {
    --ws-font-family: 'JetBrains Mono', ui-monospace, monospace;
    --ws-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --ws-font-size: 12px;
    --ws-header-bg: #161b22;
    --ws-header-border: #30363d;
    --ws-cell-border: #21262d;
    --ws-row-hover-bg: rgba(88, 166, 255, 0.06);
    --ws-error-bg: rgba(248, 81, 73, 0.1);
    --ws-error-color: #f85149;
    --ws-flag-info-color: #58a6ff;
    --ws-flag-warning-color: #d29922;
    --ws-flag-error-color: #f85149;
    --ws-summary-bg: rgba(210, 153, 34, 0.08);
    --ws-summary-border: #30363d;
    --ws-provenance-bg: #0d1117;
    --ws-provenance-border: #30363d;
    --ws-text-color: #c9d1d9;
    --ws-text-dim: #8b949e;
}

.ws-table-container {
    border-color: var(--border);
}

.ws-viewer .ws-table tbody td {
    color: var(--fg);
}

.ws-viewer .ws-table thead th {
    color: var(--fg-dim);
}

/* Artifact inspector panel */
.artifact-panel {
    background: var(--bg);
    border-style: dashed;
}

.artifact-heading {
    font-size: 13px;
    letter-spacing: 0.2px;
}

.section-explain {
    font-size: 11px;
    color: var(--fg-dim);
    line-height: 1.6;
    margin-bottom: 16px;
}

#worksheet-container {
    margin-bottom: 4px;
}

/* Note */
.note {
    font-size: 12px;
    color: var(--fg-dim);
    line-height: 1.7;
    padding: 0 4px;
}

.note p { margin: 0; }
.note a { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 2px; }
.note a:hover { color: var(--fg-bright); }

.note details { margin-top: 6px; }
.note summary {
    cursor: pointer;
    font-size: 11px;
    color: var(--fg-dim);
}
.note summary:hover { color: var(--fg); }
.note details p { margin-top: 6px; font-size: 11px; line-height: 1.7; }

/* Error */
.error-card { border-color: var(--red); }
.error-card h2 { color: var(--red); }
.error-card p { font-size: 13px; color: var(--fg); }

/* Hidden */
.hidden { display: none; }

/* Footer */
footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--fg-dim);
    text-align: center;
}

.footer-sep { margin: 0 6px; color: var(--border); }

/* Responsive */
@media (max-width: 480px) {
    .input-grid { grid-template-columns: 1fr; }
    .summary-grid { grid-template-columns: 1fr; }
    .header-nav { display: none; }
    main { padding: 20px 16px; }
}