/* Mellow Sports Scouting – mobile-first app styles (rood / zwart / grijs, formulier-look) */
.mys-app,
.mys-app * {
	box-sizing: border-box;
}
.mys-app {
	--mys-red: #E30613;
	--mys-red-dark: #B8000C;
	--mys-red-soft: #FDE9EA;
	--mys-black: #111111;
	--mys-dark: #1E1E1E;
	--mys-dark-2: #2E2E2E;
	--mys-gray: #6F6F6F;
	--mys-gray-mid: #9A9A9A;
	--mys-gray-light: #C9C9C9;
	--mys-gray-line: #D9D9D9;
	--mys-gray-bg: #EFEFEF;
	--mys-bg: #F4F4F4;
	--mys-white: #ffffff;
	--mys-green: #2e9935;
	--mys-radius: 3px;
	font-family: Questrial, "Helvetica Neue", Arial, sans-serif;
	color: var(--mys-dark);
	background: var(--mys-bg);
	max-width: 720px;
	margin: 0 auto;
	min-height: 70vh;
	line-height: 1.45;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	position: relative;
}
.mys-app h1, .mys-app h2, .mys-app h3, .mys-app h4 {
	font-family: inherit;
	font-weight: 700;
	color: var(--mys-black);
	margin: 0 0 .5rem;
	line-height: 1.2;
}
.mys-app h1 { font-size: 1.6rem; }
.mys-app h2 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: 1px; font-size: 1.05rem; }
.mys-app h3 { font-size: 1.05rem; }
.mys-app p { margin: 0 0 .75rem; color: var(--mys-gray); }
.mys-app a { color: var(--mys-red); text-decoration: none; }
.mys-app .mys-accent { color: var(--mys-red); }

/* Header */
.mys-header {
	background: var(--mys-black);
	color: #fff;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 20;
}
.mys-header .mys-logo { display: block; height: auto; width: auto; max-height: 50px; max-width: 220px; object-fit: contain; }
.mys-header .mys-logo-wrap { flex: 1; min-width: 0; }
.mys-header .mys-logo-wrap { display: flex; align-items: center; gap: 10px; }
.mys-header .mys-user { font-size: .78rem; color: #bdbdbd; text-align: right; line-height: 1.2; }
.mys-header .mys-user strong { color: #fff; display: block; font-weight: 400; font-size: .9rem; }
.mys-header .mys-back {
	background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; padding: 4px 10px 4px 0; cursor: pointer; font-family: inherit;
}
.mys-header .mys-title { font-size: .95rem; color: #fff; margin: 0; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; }
.mys-accent-bar { height: 4px; background: var(--mys-red); }

/* Content & bottom nav */
.mys-content { padding: 16px 16px 92px; }
.mys-nav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
	background: var(--mys-black);
	border-top: 3px solid var(--mys-red);
	display: flex;
	max-width: 720px;
	margin: 0 auto;
	padding-bottom: env(safe-area-inset-bottom);
}
.mys-nav button {
	flex: 1; background: none; border: 0; padding: 10px 4px 8px; font-family: inherit;
	color: var(--mys-gray-mid); font-size: .68rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
	text-transform: uppercase; letter-spacing: .5px;
}
.mys-nav button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.mys-nav button.active { color: #fff; }
.mys-nav button.mys-nav-new { color: #fff; }
.mys-nav button.mys-nav-new span.mys-fab {
	background: var(--mys-red); width: 46px; height: 46px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; margin-top: -28px; box-shadow: 0 3px 8px rgba(0,0,0,.4); border: 3px solid var(--mys-black);
}
.mys-nav button.mys-nav-new span.mys-fab svg { stroke: #fff; width: 26px; height: 26px; }
.mys-nav button.mys-nav-new small { color: #fff; }

/* Cards */
.mys-card {
	background: var(--mys-white);
	border-radius: var(--mys-radius);
	padding: 14px 16px;
	margin-bottom: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
	border-top: 3px solid var(--mys-black);
}
.mys-card.mys-clickable { cursor: pointer; transition: transform .1s; }
.mys-card.mys-clickable:active { transform: scale(.99); }
.mys-card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mys-card-title h3 { margin: 0; }
.mys-meta { font-size: .82rem; color: var(--mys-gray); }
.mys-hero {
	background: var(--mys-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='70' fill='none' stroke='%23E30613' stroke-opacity='.25' stroke-width='3'/%3E%3Ccircle cx='80' cy='80' r='6' fill='%23E30613' fill-opacity='.5'/%3E%3C/svg%3E") right -30px top -30px no-repeat;
	color: #fff; padding: 22px 18px; border-radius: var(--mys-radius); margin-bottom: 14px; border-left: 4px solid var(--mys-red);
}
.mys-hero h1 { color: #fff; margin-bottom: 2px; }
.mys-hero p { color: #bdbdbd; margin: 0; }
.mys-hero .mys-tag { color: var(--mys-red); font-size: .74rem; letter-spacing: 3px; text-transform: uppercase; }

.mys-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mys-stat { background: #fff; padding: 12px 10px; border-radius: var(--mys-radius); text-align: center; border-bottom: 3px solid var(--mys-red); }
.mys-stat b { display: block; font-size: 1.5rem; color: var(--mys-black); }
.mys-stat span { font-size: .7rem; color: var(--mys-gray); text-transform: uppercase; letter-spacing: 1px; }

/* Buttons */
.mys-app .mys-btn, .mys-app a.mys-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: inherit; font-size: .95rem; padding: 12px 20px; border-radius: var(--mys-radius);
	border: 2px solid var(--mys-black); color: var(--mys-black); background: transparent; cursor: pointer;
	text-decoration: none; line-height: 1.2; transition: background .15s, color .15s; text-transform: uppercase; letter-spacing: 1px;
	-webkit-tap-highlight-color: transparent;
}
.mys-app .mys-btn:hover, .mys-app a.mys-btn:hover { background: var(--mys-gray-bg); }
.mys-app .mys-btn-primary, .mys-app a.mys-btn-primary { background: var(--mys-red); border-color: var(--mys-red); color: #fff; }
.mys-app .mys-btn-primary:hover, .mys-app a.mys-btn-primary:hover { background: var(--mys-red-dark); border-color: var(--mys-red-dark); color: #fff; }
.mys-app .mys-btn-dark, .mys-app a.mys-btn-dark { background: var(--mys-black); border-color: var(--mys-black); color: #fff; }
.mys-app .mys-btn-ghost, .mys-app a.mys-btn-ghost { border-color: var(--mys-gray-light); color: var(--mys-gray); }
.mys-app .mys-btn-danger, .mys-app a.mys-btn-danger { border-color: var(--mys-red); color: var(--mys-red); }
.mys-app .mys-btn-block, .mys-app a.mys-btn-block { display: flex; width: 100%; }
.mys-app .mys-btn-sm, .mys-app a.mys-btn-sm { padding: 7px 12px; font-size: .8rem; }
.mys-app .mys-btn[disabled], .mys-app a.mys-btn[disabled] { opacity: .5; cursor: default; }
.mys-actions { display: flex; gap: 10px; margin-top: 14px; }
.mys-actions .mys-btn { flex: 1; }

/* Forms (klassiek) */
.mys-field { margin-bottom: 14px; }
.mys-field label, .mys-label { display: block; font-size: .74rem; color: var(--mys-gray); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.mys-field label .req, .mys-line label .req, .mys-block-head .req { color: var(--mys-red); }
.mys-app input[type=text], .mys-app input[type=date], .mys-app input[type=number], .mys-app input[type=url], .mys-app select, .mys-app textarea {
	width: 100%; font-family: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--mys-gray-line); border-radius: var(--mys-radius);
	background: #fff; color: var(--mys-black); -webkit-appearance: none; appearance: none; margin: 0; line-height: 1.3;
}
.mys-app select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236F6F6F' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.mys-app input:focus, .mys-app select:focus, .mys-app textarea:focus { outline: none; border-color: var(--mys-red); box-shadow: 0 0 0 3px rgba(227,6,19,.15); }
.mys-app textarea { min-height: 90px; resize: vertical; }
.mys-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.mys-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.mys-check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--mys-dark); }
.mys-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--mys-red); }
.mys-help { font-size: .74rem; color: var(--mys-gray-mid); margin-top: 3px; }
.mys-error { background: var(--mys-red-soft); color: var(--mys-red-dark); padding: 10px 12px; border-radius: var(--mys-radius); margin-bottom: 12px; font-size: .9rem; border-left: 3px solid var(--mys-red); }
.mys-success { background: #e7f6e8; color: #1e6b25; padding: 10px 12px; border-radius: var(--mys-radius); margin-bottom: 12px; font-size: .9rem; }
.mys-notice { background: var(--mys-gray-bg); color: var(--mys-dark); padding: 10px 12px; border-radius: var(--mys-radius); margin-bottom: 12px; font-size: .85rem; border-left: 3px solid var(--mys-red); }

/* ---------- Formulier-look (zoals het papieren scoutingboekje) ---------- */
.mys-sheet-card {
	background: var(--mys-white);
	border: 1px solid var(--mys-gray-line);
	border-radius: var(--mys-radius);
	margin-bottom: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.mys-block-head {
	background: var(--mys-black); color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: 2px; padding: 8px 12px; font-weight: 700;
}
.mys-block-head small { text-transform: none; letter-spacing: 0; font-weight: 400; color: #bdbdbd; }
.mys-block-head-red { background: var(--mys-red); }
.mys-block-head-split { display: flex; justify-content: space-between; align-items: center; }
.mys-block-head-split .mys-avg { background: #fff; color: var(--mys-black); padding: 1px 8px; border-radius: 10px; margin-left: 6px; font-size: .78rem; }
.mys-block-head-red .mys-avg { color: var(--mys-red); }
.mys-sub-head {
	display: flex; justify-content: space-between; background: var(--mys-dark-2); color: #fff; font-size: .74rem; text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 12px; margin-top: 2px;
}
.mys-sub-head-red { background: var(--mys-red); }
/* Invulregel: label links op grijze balk, invulveld rechts met lijn */
.mys-line { display: grid; grid-template-columns: 42% 58%; align-items: stretch; border-bottom: 1px solid var(--mys-gray-line); min-height: 44px; }
.mys-sheet-card > .mys-line:last-child, .mys-row .mys-line:last-child { border-bottom: 0; }
.mys-row .mys-line { grid-template-columns: 1fr; border-bottom: 1px solid var(--mys-gray-line); }
.mys-row .mys-line label { font-size: .66rem; min-height: 0; padding: 4px 10px 0; background: var(--mys-white); color: var(--mys-gray); border-right: 0; }
.mys-line label {
	display: flex; align-items: center; background: var(--mys-gray-bg); color: var(--mys-black); font-size: .72rem; text-transform: uppercase; letter-spacing: 1px;
	padding: 8px 10px; border-right: 1px solid var(--mys-gray-line); margin: 0; line-height: 1.2;
}
.mys-line-input { display: flex; align-items: center; padding: 4px 8px; }
.mys-line-input > input, .mys-line-input > select { border: 0 !important; border-radius: 0; padding: 8px 4px; background: transparent; box-shadow: none !important; }
.mys-line-input > input:focus, .mys-line-input > select:focus { background: var(--mys-red-soft); }
.mys-line-input .mys-help { display: none; }
.mys-line-input { flex-wrap: wrap; }
.mys-line-input .mys-seg + .mys-help { display: block; flex-basis: 100%; margin: 0 0 4px 2px; }
.mys-static { font-size: .98rem; color: var(--mys-black); padding: 8px 4px; }
.mys-line-ro .mys-static { color: var(--mys-dark); }
.mys-score-box { justify-content: flex-end; gap: 8px; font-weight: 700; color: var(--mys-black); }
.mys-score-box .mys-bar { width: 60px; margin: 0; }
.mys-score-box b { min-width: 20px; text-align: right; }
/* Segmentkeuze (HOOG / GEM. / LAAG, R / L / BEIDE …) */
.mys-seg { display: flex; gap: 4px; flex: 1; padding: 2px 0; }
.mys-seg button {
	flex: 1; font-family: inherit; font-size: .74rem; text-transform: uppercase; letter-spacing: 1px; padding: 8px 4px; border: 1px solid var(--mys-gray-line);
	background: #fff; color: var(--mys-gray); cursor: pointer; border-radius: 2px; -webkit-tap-highlight-color: transparent;
}
.mys-seg button.on { background: var(--mys-black); border-color: var(--mys-black); color: #fff; font-weight: 700; }
/* Gelinieerd tekstvak */
.mys-app textarea.mys-lined, .mys-lined-text {
	border: 0; border-radius: 0; padding: 4px 12px; line-height: 28px; min-height: 112px; font-size: .95rem; color: var(--mys-black);
	background: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--mys-gray-line) 27px, var(--mys-gray-line) 28px);
	background-attachment: local;
}
.mys-app textarea.mys-lined:focus { box-shadow: none; }
.mys-lined-text { white-space: pre-wrap; }

/* Cijferregel 1-10 */
.mys-score { padding: 7px 10px 8px; border-bottom: 1px solid var(--mys-gray-line); }
.mys-cat-alt .mys-score:nth-child(even) { background: #fafafa; }
.mys-score:last-child { border-bottom: 0; }
.mys-score-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.mys-score-head span { font-size: .8rem; color: var(--mys-black); text-transform: uppercase; letter-spacing: .8px; }
.mys-score-head b { color: var(--mys-red); min-width: 34px; min-height: 1.55em; display: inline-block; text-align: center; font-size: .9rem; border: 1px solid var(--mys-gray-line); border-radius: 2px; padding: 1px 6px; background: #fff; line-height: 1.3; }
.mys-score-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.mys-score-row button {
	font-family: inherit; font-size: .8rem; padding: 8px 0; border: 1px solid var(--mys-gray-line); background: #fff; color: var(--mys-gray); cursor: pointer;
	border-radius: 2px; -webkit-tap-highlight-color: transparent;
}
.mys-score-row button.on { background: var(--mys-red); border-color: var(--mys-red); color: #fff; font-weight: 700; }
.mys-score-row button.low.on { background: var(--mys-gray); border-color: var(--mys-gray); }
.mys-score-row button.high.on { background: var(--mys-black); border-color: var(--mys-black); }
.mys-cat { margin-bottom: 14px; }

/* Steps */
.mys-steps { display: flex; gap: 6px; margin-bottom: 14px; }
.mys-steps button { flex: 1; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
.mys-steps button span { display: block; height: 5px; background: var(--mys-gray-light); border-radius: 3px; }
.mys-steps button small { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .5px; color: var(--mys-gray-mid); margin-top: 3px; }
.mys-steps button.done span { background: var(--mys-black); }
.mys-steps button.done small { color: var(--mys-black); }
.mys-steps button.current span { background: var(--mys-red); }
.mys-steps button.current small { color: var(--mys-red); font-weight: 700; }
.mys-draft-bar { text-align: center; margin-top: 12px; }
.mys-draft-bar a { font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; }
.mys-draft-bar .mys-help { display: block; margin-top: 4px; }
.mys-missing { margin: 6px 0 8px 18px; padding: 0; }
.mys-missing li { margin: 2px 0; }
.mys-missing a { color: var(--mys-red-dark); text-decoration: underline; }
.mys-clubpick { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mys-clubpick input[hidden] { display: none; }
.mys-line-input .mys-clubpick select, .mys-line-input .mys-clubpick input { border: 0; padding: 8px 4px; background: transparent; box-shadow: none; }
.mys-line-input .mys-clubpick input:not([hidden]) { border-bottom: 1px dashed var(--mys-red) !important; }
.mys-step-label { font-size: .74rem; color: var(--mys-gray); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4px; }

/* Chips / choice grid */
.mys-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.mys-card .mys-choices { padding: 0; }
.mys-choices button {
	font-family: inherit; font-size: .88rem; text-align: left; padding: 10px 12px; border: 1px solid var(--mys-gray-line); background: #fff; color: var(--mys-black);
	border-radius: var(--mys-radius); cursor: pointer; line-height: 1.25;
}
.mys-choices button.on { border-color: var(--mys-red); background: var(--mys-red-soft); box-shadow: inset 0 0 0 1px var(--mys-red); }
.mys-choices button small { display: block; color: var(--mys-gray); font-size: .75rem; }
.mys-choices-letters button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.mys-choices-letters button b { width: 28px; height: 28px; border-radius: 2px; background: var(--mys-black); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem; }
.mys-choices-letters button.on b { background: var(--mys-red); }
.mys-choices-letters button span { font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; }
.mys-chip { display: inline-block; font-size: .7rem; padding: 2px 8px; border-radius: 2px; background: var(--mys-gray-bg); color: var(--mys-gray); margin-right: 4px; margin-bottom: 3px; white-space: nowrap; text-transform: uppercase; letter-spacing: .5px; }
.mys-chip-red { background: var(--mys-red); color: #fff; }
.mys-chip-dark { background: var(--mys-black); color: #fff; }
.mys-chip-green { background: #e3f4e4; color: #1e6b25; }
.mys-chip-scout { background: #fff; color: var(--mys-black); border: 1px solid var(--mys-black); }
html.mys-app-page footer, html.mys-app-page #footer, html.mys-app-page .site-footer, html.mys-app-page #colophon, html.mys-app-page .footer-widgets, html.mys-app-page .site-info { display: none !important; }

/* Search */
.mys-search { position: relative; margin-bottom: 12px; }
.mys-search input { padding-left: 38px !important; }
.mys-search svg { position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; stroke: var(--mys-gray); fill: none; stroke-width: 2; }
.mys-list-empty { text-align: center; color: var(--mys-gray); padding: 30px 10px; }

/* Player row */
.mys-player-row { display: flex; align-items: center; gap: 12px; }
.mys-avatar {
	width: 44px; height: 44px; border-radius: 50%; background: var(--mys-black); color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: .95rem; flex-shrink: 0; letter-spacing: 1px;
}
.mys-avatar.mys-avatar-red { background: var(--mys-red); }
.mys-player-row .mys-grow { flex: 1; min-width: 0; }
.mys-player-row h3 { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mys-pos { background: var(--mys-red); color: #fff; font-size: .72rem; padding: 3px 7px; border-radius: 2px; font-weight: 700; }

/* Ranking */
.mys-rank-row { display: flex; align-items: center; gap: 10px; }
.mys-rank-nr { width: 34px; font-size: 1.3rem; font-weight: 700; color: var(--mys-red); text-align: center; flex-shrink: 0; }
.mys-index { text-align: right; flex-shrink: 0; }
.mys-index b { display: block; font-size: 1.3rem; line-height: 1; }
.mys-index small { color: var(--mys-gray); font-size: .7rem; }
.mys-bar { height: 6px; background: var(--mys-gray-bg); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.mys-bar i { display: block; height: 100%; background: var(--mys-red); }
.mys-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; -webkit-overflow-scrolling: touch; }
.mys-filters button { white-space: nowrap; font-family: inherit; font-size: .8rem; padding: 7px 14px; border-radius: 2px; border: 1px solid var(--mys-gray-light); background: #fff; color: var(--mys-gray); cursor: pointer; text-transform: uppercase; letter-spacing: .5px; }
.mys-filters button.on { background: var(--mys-black); border-color: var(--mys-black); color: #fff; }

/* Score grid (detail) */
.mys-grid-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.mys-grid-scores div { background: var(--mys-gray-bg); padding: 8px 4px; text-align: center; border-radius: var(--mys-radius); border-bottom: 2px solid var(--mys-black); }
.mys-grid-scores b { display: block; font-size: 1.15rem; color: var(--mys-black); }
.mys-grid-scores span { font-size: .6rem; color: var(--mys-gray); text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mys-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: .9rem; }
.mys-kv span { color: var(--mys-gray); font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; display: block; }
.mys-divider { border: 0; border-top: 1px solid var(--mys-gray-line); margin: 14px 0; }
.mys-report-text { white-space: pre-wrap; font-size: .95rem; color: var(--mys-dark); }

/* Modal / sheet */
.mys-sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.mys-sheet { background: #fff; width: 100%; max-width: 720px; max-height: 88vh; overflow: auto; border-radius: 10px 10px 0 0; padding: 18px 16px 24px; }

/* Splash (laadscherm over de hele pagina, verdwijnt zodra de app geladen is) */
.mys-splash { position: fixed; inset: 0; z-index: 9999; background: #8B0000 center / cover no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12vh; transition: opacity .35s; }
.mys-splash.mys-splash-hide { opacity: 0; pointer-events: none; }
.mys-splash-spinner { width: 44px; height: 44px; border: 4px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: mys-spin .8s linear infinite; }
/* Gelijke hoogte voor alle invoervelden (iOS geeft een lege datum anders een lagere hoogte) */
.mys-app input[type=text], .mys-app input[type=date], .mys-app input[type=number], .mys-app input[type=url], .mys-app select { min-height: 46px; }
.mys-app input[type=date] { display: block; -webkit-appearance: none; appearance: none; text-align: left; }
.mys-app input[type=date]::-webkit-date-and-time-value { text-align: left; }
.mys-line-input > input[type=date] { min-height: 40px; }
.mys-line label.mys-loc, .mys-loc { background: none; border: 0; padding: 0; display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--mys-gray); text-transform: none; letter-spacing: 0; flex-basis: 100%; margin: 2px 0 4px; }
.mys-loc input { width: 18px; height: 18px; accent-color: var(--mys-red); min-height: 0; }
.mys-autosave { font-size: .72rem; color: var(--mys-gray-mid); display: block; margin-top: 2px; }

/* Loading / login */
.mys-loading { text-align: center; padding: 60px 20px; color: var(--mys-gray); }
.mys-spinner { width: 34px; height: 34px; border: 3px solid var(--mys-gray-light); border-top-color: var(--mys-red); border-radius: 50%; margin: 0 auto 12px; animation: mys-spin .8s linear infinite; }
@keyframes mys-spin { to { transform: rotate(360deg); } }
.mys-login { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: flex-end; justify-content: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: #7a0008 center / cover no-repeat; max-width: none; min-height: 0; margin: 0; overflow: auto; }
.mys-login::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.mys-login-card { position: relative; background: rgba(17,17,17,.88); color: #fff; padding: 22px 20px; text-align: center; max-width: 380px; width: 100%; border-top: 4px solid var(--mys-red); border-radius: var(--mys-radius); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mys-login-card h2 { color: #fff; margin-bottom: 4px; }
.mys-login-card p { color: #bdbdbd; font-size: .9rem; }
.mys-login-card .mys-logo { max-height: 60px; max-width: 100%; width: auto; height: auto; margin-bottom: 12px; }
.mys-login-card form { text-align: left; margin-top: 10px; }
.mys-login-card form p { margin: 0 0 10px; color: #bdbdbd; }
.mys-login-card form label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: #bdbdbd; margin-bottom: 4px; }
.mys-login-card form input[type=text], .mys-login-card form input[type=password] { width: 100%; font: inherit; font-size: 1rem; padding: 11px 12px; border: 1px solid #444; border-radius: var(--mys-radius); background: #1e1e1e; color: #fff; -webkit-appearance: none; min-height: 46px; }
.mys-login-card form input:focus { outline: none; border-color: var(--mys-red); }
.mys-login-card form .login-remember label { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: .85rem; }
.mys-login-card form .login-remember input { width: 18px; height: 18px; accent-color: var(--mys-red); }
.mys-login-card form input[type=submit] { width: 100%; font: inherit; font-size: .95rem; text-transform: uppercase; letter-spacing: 1px; padding: 13px; background: var(--mys-red); color: #fff; border: 0; border-radius: var(--mys-radius); cursor: pointer; -webkit-appearance: none; }
.mys-login-card .mys-login-links { margin-top: 10px; font-size: .8rem; }
.mys-login-card .mys-login-links a { color: #bdbdbd; }
.mys-login-error { background: var(--mys-red); color: #fff; padding: 8px 10px; border-radius: var(--mys-radius); font-size: .85rem; margin-bottom: 10px; }
.mys-toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); background: var(--mys-black); color: #fff; padding: 10px 18px; border-radius: 2px; font-size: .9rem; z-index: 50; box-shadow: 0 3px 10px rgba(0,0,0,.3); border-left: 3px solid var(--mys-red); }

@media (min-width: 600px) {
	.mys-choices { grid-template-columns: 1fr 1fr 1fr; }
	.mys-choices-letters { grid-template-columns: 1fr 1fr; }
	.mys-content { padding: 20px 20px 92px; }
	.mys-grid-scores { grid-template-columns: repeat(6, 1fr); }
}