.slotlink {
	--sl-text: #37352f;
	--sl-muted: #8a8a85;
	--sl-faint: #c4c4c0;
	--sl-border: #e9e9e7;
	--sl-chip: #f1f1ef;
	--sl-hover: #f7f7f5;
	--sl-ink: #37352f;
	max-width: 860px;
	margin: 1.5em auto;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: var(--sl-text);
	transition: opacity .15s;
}
.slotlink *, .slotlink *::before, .slotlink *::after { box-sizing: border-box; }
.slotlink.is-loading { opacity: .55; pointer-events: none; }
.slotlink button { font-family: inherit; }

.sl-card {
	display: grid;
	grid-template-columns: 160px minmax(300px, 1fr) 1fr;
	background: #fff;
	border: 1px solid var(--sl-border);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 15, 15, .04), 0 8px 24px rgba(15, 15, 15, .05);
	overflow: hidden;
	min-height: 380px;
}
.sl-card.is-narrow { grid-template-columns: 230px 1fr; }
.sl-card > section { padding: 24px; }

/* Left info column */
.sl-info {
	display: flex; flex-direction: column; gap: 14px;
	padding: 24px; border-right: 1px solid var(--sl-border);
}
.sl-host { color: var(--sl-muted); font-weight: 500; }
.sl-title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--sl-text); }
.sl-rows { display: flex; flex-direction: column; gap: 8px; }
.sl-row { display: flex; align-items: flex-start; gap: 10px; color: var(--sl-muted); }
.sl-row span:last-child { color: var(--sl-text); opacity: .75; }
.sl-ico { display: inline-flex; flex: none; margin-top: 1px; color: var(--sl-muted); }
.sl-tz { margin-top: auto; }

/* Calendar */
.sl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sl-month { font-size: 15px; }
.sl-month strong { font-weight: 700; }
.sl-year { color: var(--sl-muted); font-weight: 500; }
.sl-navbtns { display: flex; gap: 2px; }
.sl-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border: 0; border-radius: 6px; background: none;
	color: var(--sl-muted); cursor: pointer; padding: 0;
}
.sl-arrow:hover:not(:disabled) { background: var(--sl-chip); color: var(--sl-text); }
.sl-arrow:disabled { opacity: .35; cursor: default; }

.sl-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sl-dow { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--sl-muted); padding: 2px 0 8px; }
.sl-day {
	position: relative; aspect-ratio: 1 / 1; min-height: 34px;
	border: 0; border-radius: 8px; padding: 0; cursor: pointer;
	background: var(--sl-chip); color: var(--sl-text);
	font-size: 14px; font-weight: 500;
	display: flex; align-items: center; justify-content: center;
	transition: background .1s, color .1s;
}
.sl-day:hover:not(:disabled) { background: #e6e6e3; }
.sl-day:disabled { background: transparent; color: var(--sl-faint); cursor: default; font-weight: 400; }
.sl-day.is-today::after {
	content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
	width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6;
}
.sl-day.is-selected, .sl-day.is-selected:hover { background: var(--sl-ink); color: #fff; }

/* Time column */
.sl-times { border-left: 1px solid var(--sl-border); }
.sl-dayhead { font-size: 15px; margin-bottom: 14px; height: 28px; display: flex; align-items: center; gap: 4px; }
.sl-dayhead strong { font-weight: 700; }
.sl-hint { color: var(--sl-muted); margin: 0; }
.sl-times .sl-hint { padding-top: 5px; }
.sl-slots { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.sl-slot {
	width: 100%; padding: 9px 12px; border: 1px solid var(--sl-border); border-radius: 8px;
	background: #fff; color: var(--sl-text); font-size: 14px; font-weight: 500; cursor: pointer;
	transition: background .1s, border-color .1s;
}
.sl-slot:hover { background: var(--sl-hover); border-color: #d6d6d2; }

/* Form */
.sl-formwrap { max-width: 420px; }
.sl-form label { display: block; margin-bottom: 14px; font-weight: 500; font-size: 13px; color: var(--sl-text); }
.sl-form input, .sl-form textarea {
	display: block; width: 100%; margin-top: 6px; padding: 9px 11px;
	border: 1px solid var(--sl-border); border-radius: 8px; background: #fff;
	font: inherit; color: var(--sl-text); resize: vertical; box-shadow: none;
}
.sl-form input:focus, .sl-form textarea:focus { outline: none; border-color: #9b9a97; box-shadow: 0 0 0 3px rgba(55, 53, 47, .08); }
.sl-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.sl-actions { display: flex; gap: 8px; margin-top: 4px; }
.sl-submit, .sl-back {
	padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
}
.sl-submit { flex: 1; background: var(--sl-ink); color: #fff; border: 1px solid var(--sl-ink); }
.sl-submit:hover { background: #000; color: #fff; }
.sl-submit:disabled { opacity: .6; cursor: default; }
.sl-back { background: #fff; color: var(--sl-text); border: 1px solid var(--sl-border); }
.sl-back:hover { background: var(--sl-hover); }
.sl-msg { color: #c4332b; margin: 0 0 12px; }

/* Confirmation */
.sl-done { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sl-done h3 { margin: 10px 0 0; font-size: 20px; font-weight: 700; }
.sl-done p { margin: 0; }
.sl-check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%; background: #e8f5ec; color: #1a7f37;
}
.sl-meet { flex: none; margin: 14px 0 6px; }

/* Mobile */
@media (max-width: 760px) {
	.sl-card, .sl-card.is-narrow { grid-template-columns: 1fr; }
	.sl-info { border-right: 0; border-bottom: 1px solid var(--sl-border); }
	.sl-tz { margin-top: 0; }
	.sl-times { border-left: 0; border-top: 1px solid var(--sl-border); }
	.sl-slots { max-height: none; display: grid; grid-template-columns: repeat(2, 1fr); }
}