/* mtc. brand layer for FlashPaper. Tokens from the mtc. Brand Bible. */
:root {
	--blue: #0F55C4; --blue-dark: #0A3D8F; --blue-light: #3A7AE0; --green: #51C69C;
	--navy: #0D1B2A; --charcoal: #2F353F; --mid-grey: #6B7280; --light-grey: #E5E7EB; --white: #FFFFFF;
	--bg: #F5F7FA; --card: var(--white); --text: var(--charcoal); --muted: var(--mid-grey);
	--field: var(--white); --border: var(--light-grey); --heading: var(--navy);
}
@media (prefers-color-scheme: dark) {
	:root { --bg: var(--navy); --card: #14263A; --text: #E5E7EB; --muted: #9CA3AF;
		--field: #0D1B2A; --border: #2A3F57; --heading: var(--white); }
}
html, body { min-height: 100%; }
body {
	margin: 0; background: var(--bg); color: var(--text);
	font-family: 'Avenir Next', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px; line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh;
}
.mtc-bar { background: var(--navy); border-bottom: 3px solid var(--green); }
.mtc-bar .inner { max-width: 760px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.mtc-bar img { width: 80px; height: auto; display: block; }
.mtc-bar .tool { color: var(--white); font-weight: 600; font-size: 15px; opacity: .85; border-left: 1px solid rgba(255,255,255,.25); padding-left: 14px; }
.mtc-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; box-sizing: border-box; }
.mtc-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; box-shadow: 0 8px 24px rgba(13,27,42,.06); }
.mtc-card.center { text-align: center; }
.mtc-h1 { color: var(--heading); font-weight: 700; font-size: 32px; line-height: 1.15; margin: 0 0 8px; }
.mtc-sub { color: var(--muted); margin: 0 0 20px; }
.mtc-card textarea, .mtc-card .form-control, .mtc-card .form-select {
	width: 100%; min-height: 200px; padding: 14px 16px; box-sizing: border-box; resize: vertical;
	background: var(--field) !important; color: var(--text) !important; border: 1px solid var(--border);
	border-radius: 12px; font-size: 15px; opacity: 1;
}
.mtc-card .form-select { min-height: 0; padding: 12px 40px 12px 14px; width: auto; }
.mtc-card textarea:focus, .mtc-card .form-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15,85,196,.2); }
.mtc-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 20px; }
.btn-primary, .btn-primary:focus {
	background: var(--blue); border: 0; color: var(--white); font-weight: 600; font-size: 16px;
	padding: 12px 28px; border-radius: 100px; transition: background .2s;
}
.btn-primary:hover { background: var(--blue-dark); color: var(--white); }
.mtc-foot { color: var(--muted); font-size: 13px; text-align: center; padding: 20px 16px; }
.mtc-foot a { color: var(--blue-light); }
@media (max-width: 560px) { .mtc-card { padding: 22px; } .mtc-h1 { font-size: 26px; } .mtc-actions > * { width: 100%; } .mtc-actions .btn-primary, .mtc-card .form-select { width: 100%; } }
.mtc-card .mtc-link { min-height: 0; font-family: 'SF Mono', ui-monospace, monospace; font-size: 14px; }
.mtc-ghost, .mtc-ghost:focus { background: transparent; color: var(--blue-light); border: 2px solid var(--blue-light); border-radius: 100px; padding: 10px 26px; font-weight: 600; }
.mtc-ghost:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.mtc-actions .mtc-ghost { margin-left: 0; }
.mtc-note { margin: 18px 0 0; font-size: 14px; } .mtc-note a { color: var(--blue-light); }
@media (min-width: 561px) { .mtc-card .mtc-actions:has(.mtc-ghost) { justify-content: flex-start; } }
@media (max-width: 560px) { .mtc-ghost { width: 100%; text-align: center; } }