.kellokortti-app {
	--kk-bg: #eef1f0;
	--kk-surface: #ffffff;
	--kk-surface-2: #e4e9e7;
	--kk-ink: #16211d;
	--kk-ink-soft: #48564f;
	--kk-line: #ccd4cf;
	--kk-accent: #1f6f5c;
	--kk-accent-ink: #f4fbf8;
	--kk-accent-soft: #dceee7;
	--kk-positive: #1f6f5c;
	--kk-negative: #b54b2a;
	--kk-positive-soft: #dceee7;
	--kk-negative-soft: #f6e4dc;
	--kk-holiday: #7c6fa8;
	--kk-holiday-soft: #ede9f5;
	--kk-weekend-soft: #e4e9e7;
	--kk-shadow: 0 1px 2px rgba(22, 33, 29, 0.06), 0 10px 24px -14px rgba(22, 33, 29, 0.35);

	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 20px 32px;
	background: var(--kk-bg);
	border-radius: 16px;
	color: var(--kk-ink);
	font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.45;
}

.kellokortti-app *,
.kellokortti-app *::before,
.kellokortti-app *::after {
	box-sizing: border-box;
}

.kellokortti-app.kellokortti-locked {
	text-align: center;
	padding: 40px 20px;
}

.kk-loading,
.kk-error {
	color: var(--kk-ink-soft);
	text-align: center;
	padding: 24px 0;
}

.kk-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.kk-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 0.01em;
}

.kk-title-mark {
	color: var(--kk-accent);
	font-size: 22px;
}

.kk-who {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--kk-ink-soft);
	font-size: 14px;
}

.kk-link-btn {
	background: none;
	border: none;
	color: var(--kk-accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 2px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kk-link-btn-danger {
	color: var(--kk-negative);
}

.kk-viewing-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--kk-holiday-soft);
	color: var(--kk-ink);
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
}

.kk-hero {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 10px;
	margin-bottom: 18px;
}

@media (max-width: 520px) {
	.kk-hero {
		grid-template-columns: 1fr;
	}
}

.kk-tile {
	background: var(--kk-surface);
	border-radius: 12px;
	padding: 16px;
	box-shadow: var(--kk-shadow);
}

.kk-tile-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kk-ink-soft);
	margin-bottom: 6px;
}

.kk-tile-number {
	font-family: 'Big Shoulders Display', 'Public Sans', sans-serif;
	font-weight: 800;
	font-size: 42px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.kk-tile-number-sm {
	font-size: 24px;
	font-weight: 700;
}

.kk-tile-sub {
	margin-top: 6px;
	font-size: 12px;
	color: var(--kk-ink-soft);
}

.kk-tile-balance.kk-positive .kk-tile-number {
	color: var(--kk-positive);
}

.kk-tile-balance.kk-negative .kk-tile-number {
	color: var(--kk-negative);
}

.kk-settings {
	background: var(--kk-surface);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 18px;
	box-shadow: var(--kk-shadow);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kk-settings-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.kk-settings-row label {
	min-width: 160px;
	font-size: 13px;
	color: var(--kk-ink-soft);
	font-weight: 600;
}

.kk-settings-admin-note {
	margin: 4px 0 0;
	font-size: 13px;
}

.kellokortti-app input[type='number'],
.kellokortti-app input[type='date'],
.kellokortti-app input[type='text'],
.kellokortti-app select {
	font: inherit;
	font-family: 'IBM Plex Mono', 'Public Sans', monospace;
	background: var(--kk-surface-2);
	border: 1px solid var(--kk-line);
	border-radius: 8px;
	padding: 7px 10px;
	color: var(--kk-ink);
	min-width: 0;
}

.kellokortti-app input[type='text'] {
	font-family: 'Public Sans', sans-serif;
	flex: 1;
}

.kk-btn {
	background: var(--kk-accent);
	color: var(--kk-accent-ink);
	border: none;
	border-radius: 8px;
	padding: 9px 16px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.kk-btn:hover {
	filter: brightness(1.05);
}

.kk-save-status {
	font-size: 12px;
	color: var(--kk-ink-soft);
	min-height: 16px;
}

.kk-admin {
	background: var(--kk-surface);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 18px;
	box-shadow: var(--kk-shadow);
	border: 1px solid var(--kk-holiday);
}

.kk-admin-title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 10px;
}

.kk-admin-subtitle {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--kk-ink-soft);
	margin: 16px 0 8px;
}

.kk-req-empty {
	color: var(--kk-ink-soft);
	font-size: 13px;
	margin: 0;
}

.kk-req-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kk-req-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--kk-holiday-soft);
	border-radius: 8px;
	padding: 10px 12px;
}

.kk-req-summary {
	font-size: 13px;
}

.kk-req-note {
	color: var(--kk-ink-soft);
}

.kk-req-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.kk-req-status {
	font-size: 12px;
	color: var(--kk-ink-soft);
}

.kk-admin-direct {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.kk-btn-sm {
	padding: 6px 12px;
	font-size: 13px;
}

.kk-day-tag-pending {
	color: var(--kk-holiday);
}

.kk-day-tag-rejected {
	color: var(--kk-negative);
}

.kk-editor-current {
	font-size: 13px;
	color: var(--kk-ink-soft);
	margin: 0 0 8px;
}

.kk-editor-locked-note {
	font-size: 13px;
	background: var(--kk-holiday-soft);
	color: var(--kk-ink);
	border-radius: 8px;
	padding: 8px 10px;
	margin: 0 0 12px;
}

.kk-editor-rejected {
	background: var(--kk-negative-soft);
}

.kk-calendar {
	background: var(--kk-surface);
	border-radius: 12px;
	padding: 16px;
	box-shadow: var(--kk-shadow);
}

.kk-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.kk-cal-title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.01em;
}

.kk-nav-btn {
	background: var(--kk-surface-2);
	border: none;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	font-size: 16px;
	color: var(--kk-ink);
	cursor: pointer;
}

.kk-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-bottom: 6px;
}

.kk-cal-weekday {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--kk-ink-soft);
}

.kk-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.kk-day {
	aspect-ratio: 1;
	border-radius: 8px;
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	cursor: pointer;
	padding: 2px;
	min-width: 0;
}

.kk-day-empty {
	visibility: hidden;
	cursor: default;
}

.kk-day-num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	font-weight: 600;
}

.kk-day-hours {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	font-weight: 600;
	color: var(--kk-accent);
}

.kk-day-tag {
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--kk-holiday);
	text-align: center;
}

.kk-day-weekend {
	background: var(--kk-weekend-soft);
}

.kk-day-holiday {
	background: var(--kk-holiday-soft);
	border-color: var(--kk-holiday);
}

.kk-day-today {
	border-color: var(--kk-accent);
	border-width: 2px;
}

.kk-day-selected {
	box-shadow: 0 0 0 2px var(--kk-accent) inset;
}

.kk-day-has-entry.kk-type-tyo {
	background: var(--kk-accent-soft);
}

.kk-day-has-entry.kk-type-loma {
	background: var(--kk-holiday-soft);
}

.kk-day-has-entry.kk-type-sairas {
	background: var(--kk-negative-soft);
}

.kk-day-has-entry.kk-type-muu {
	background: var(--kk-weekend-soft);
}

.kk-editor {
	background: var(--kk-surface);
	border-radius: 12px;
	padding: 16px;
	margin-top: 12px;
	box-shadow: var(--kk-shadow);
	border: 1px solid var(--kk-accent);
}

.kk-editor-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.kk-editor-date {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: 17px;
	text-transform: capitalize;
}

.kk-editor-types {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.kk-type-btn {
	border: 1px solid var(--kk-line);
	background: var(--kk-surface-2);
	color: var(--kk-ink);
	border-radius: 999px;
	padding: 6px 14px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.kk-type-btn.kk-type-active {
	background: var(--kk-accent);
	color: var(--kk-accent-ink);
	border-color: var(--kk-accent);
}

.kk-editor-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.kk-editor-row label {
	min-width: 80px;
	font-size: 13px;
	font-weight: 600;
	color: var(--kk-ink-soft);
}

.kk-editor-target {
	font-size: 12px;
	color: var(--kk-ink-soft);
}

.kk-editor-footer {
	justify-content: space-between;
}

.kk-footnote {
	margin-top: 14px;
	text-align: center;
	font-size: 12px;
	color: var(--kk-ink-soft);
}

.kellokortti-app a {
	color: var(--kk-accent);
}