:root {
--bg: #0f172a; /* slate-900 */
--card: #111827; /* gray-900 */
--text: #e5e7eb; /* gray-200 */
--muted: #9ca3af; /* gray-400 */
--accent: #22c55e; /* green-500 */
}

* { box-sizing: border-box; }

body {
margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background: linear-gradient(180deg, #0b1021, #05070f);
color: var(--text);
}

.container {
max-width: 860px; margin: 40px auto; padding: 0 16px;
}
h1 { font-weight: 700; letter-spacing: 0.02em; margin-bottom: 16px; }
.card {
background: rgba(17, 24, 39, 0.75);
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: 16px; padding: 20px; margin: 16px 0;
backdrop-filter: blur(6px);
}

label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }

select, input {
width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #243047;
background: #0b1222; color: var(--text);
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.subject { border-top: 1px dashed rgba(148, 163, 184, 0.2); padding-top: 14px; margin-top: 14px; }

.subject h3 { margin: 0 0 8px; font-size: 16px; }

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

button {
padding: 12px 18px; border: none; border-radius: 12px; cursor: pointer; font-weight: 700;
background: var(--accent); color: #052e18; box-shadow: 0 8px 16px rgba(34, 197, 94, 0.25);
}

.breakdown { margin: 8px 0 0; }

.breakdown li { line-height: 1.9; }

.badge { display: inline-block; background: #0b1222; padding: 4px 8px; border-radius: 999px; font-size: 12px; color: var(--muted); border:1px solid #1f2937 }

.hidden { display: none; }

.note { color: var(--muted); font-size: 12px; }