/* Variables */
:root {
	--icon-close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none"><g stroke="%23000" stroke-width="1.4" opacity=".86"><path d="m2.495 2.505 7 7M9.505 2.505l-7 7"/></g></svg>');
	--preloader: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 16" width="32" height="16"><style>%23c1{animation:c1 900ms linear infinite}@keyframes c1{0%25{opacity:.2}16.67%25{opacity:.4}33.33%25{opacity:.6}50%25{opacity:.8}66.67%25{opacity:.6}83.33%25{opacity:.4}100%25{opacity:.2}}%23c2{animation:c2 900ms linear infinite}@keyframes c2{0%25{opacity:.4}16.67%25{opacity:.6}33.33%25{opacity:.8}50%25{opacity:.6}66.67%25{opacity:.4}83.33%25{opacity:.2}100%25{opacity:.4}}%23c3{animation:c3 900ms linear infinite}@keyframes c3{0%25{opacity:.6}16.67%25{opacity:.8}33.33%25{opacity:.6}50%25{opacity:.4}66.67%25{opacity:.2}83.33%25{opacity:.4}100%25{opacity:.6}}%23c4{animation:c4 900ms linear infinite}@keyframes c4{0%25{opacity:.8}16.67%25{opacity:.6}33.33%25{opacity:.4}50%25{opacity:.2}66.67%25{opacity:.4}83.33%25{opacity:.6}100%25{opacity:.8}}</style><circle id="c1" cx="2.5" cy="7.5" r="1.5" fill="%23676767" opacity=".2"/><circle id="c2" cx="10.5" cy="7.5" r="1.5" fill="%23676767" opacity=".4"/><circle id="c3" cx="18.5" cy="7.5" r="1.5" fill="%23676767" opacity=".6"/><circle id="c4" cx="26.5" cy="7.5" r="1.5" fill="%23676767" opacity=".8"/></svg>');
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
body, html { margin: 0; }
body, input, textarea, button {
	font-size: 15px; line-height: 24px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: rgba(0 0 0 / 86%);
}

/* Typography */
.serif { font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
small { font-size: 15px; font-weight: 400; color: rgba(0 0 0 / 50%); }
h2 { font-size: 22px; line-height: 28px; margin: 0 0 14px 0; font-weight: 700; }

/* Form elements */
input, textarea { padding: 4px 8px; border: 1px solid rgba(0 0 0 / 16%); border-radius: 5px; }
input:focus, textarea:focus { outline: none; border-color: #0086D3; box-shadow: inset 0 0 0 0.5px #0086D3; }
input { height: 40px; }
textarea { resize: none; }
input::placeholder, textarea::placeholder { color: rgba(0 0 0 / 40%); }

/* Search input (gray background, no border) */
input.search {
	border: 0 none transparent; background: #F5F5F5;
}
input.search:focus { outline: none; box-shadow: none; }

/* Links */
a { color: #006CB9; }
a:hover { color: #00406E; }
a.gray { color: rgba(0 0 0 / 50%); }
a.gray:hover { color: rgba(0 0 0 / 70%); }
a.gray:active { color: rgba(0 0 0 / 70%); }

/* Utility classes */
.hidden { display: none !important; }
.gray { color: rgba(0 0 0 / 50%); font-size: 15px; }
.empty { color: rgba(0 0 0 / 50%); }
.loading { opacity: 0.5; pointer-events: none; }

/* Big orange button (public pages) */
button.bigOrange {
	padding: 0 28px; height: 44px;
	background-image: radial-gradient(at 50% 0%, #FF7C3D 0%, #F95627 100%);
	box-shadow: inset 0 -1px 1px 0 rgba(148,30,0,0.62);
	border: none 0 transparent; border-radius: 25px;
	color: #FFF; text-decoration: none;
	font-size: 16px; font-weight: 500; letter-spacing: 0.4px; text-shadow: 0 -0.5px 1px rgba(194,43,0,0.70);
	cursor: pointer;
}
button.bigOrange:hover {
	background-image: radial-gradient(at 50% 5%, #FF8E4D 0%, #FF5315 65%, #E43300 97%);
	box-shadow: inset 0 -1px 2px 0 rgba(148,30,0,0.62);
}
button.bigOrange:active { transform: scale(0.9888); }
button.bigOrange:disabled { opacity: 0.6; cursor: default; }

/* Primary button (admin pages) */
button.primary { padding: 0 20px; height: 40px; background: #123253; border: none; border-radius: 20px; color: #FFF; font-size: 15px; font-weight: 500; cursor: pointer; }
button.primary:hover { background: #1a4470; }
button.primary:active { transform: scale(0.98); }
button.primary:disabled { opacity: 0.6; cursor: default; }

/* Secondary (cancel link style) */
a.secondary { color: rgba(0 0 0 / 70%); text-decoration: underline; }
a.secondary:hover { color: rgba(0 0 0 / 86%); }

/* Section header (title + link) */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.section-header h2 { margin: 0; font-size: 20px; }
.section-header a { font-size: 14px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0 0 0 / 40%); display: none; align-items: center; justify-content: center; z-index: 100; }
.modal-overlay.show { display: flex; }
.modal { background: #fff; padding: 24px 32px 32px 32px; border-radius: 8px; width: 100%; max-width: 400px; }
.modal h2 { margin-top: 0; }
.modal p { margin-bottom: 24px; }
.modal button { display: block; margin-left: auto; }

/* Toggle Group */
.toggleGroup { display: flex; flex-shrink: 0; height: 32px; background: #F5F5F5; border-radius: 5px; padding: 2px; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.toggleGroup.nongrowing { width: fit-content; }
.toggleGroup::-webkit-scrollbar { display: none; }
.toggleGroup a { position: relative; flex-shrink: 0; flex-grow: 1; height: 28px; line-height: 28px; text-align: center; text-decoration: none; color: rgba(0 0 0 / 70%); border-radius: 4px; font-size: 14px; padding: 0 12px; white-space: nowrap; }
.toggleGroup a:hover { color: rgba(0 0 0 / 86%); }
.toggleGroup a.selected { background: #fff; color: rgba(0 0 0 / 86%); box-shadow: 0 0 1px rgba(0 0 0 / 15%), 0 0 3px rgba(0 0 0 / 4%); }
.toggleGroup a::before { content: ''; position: absolute; left: -2px; top: 6px; bottom: 6px; width: 1px; background: rgba(0 0 0 / 10%); }
.toggleGroup a:first-child::before, .toggleGroup a.selected::before, .toggleGroup a.selected + a::before { display: none; }