* {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: system-ui, sans-serif;
	background: #f3f4f6;
	color: #111827;
}
#app {
	max-width: 900px;
	margin: 0 auto;
	padding: 16px;
}
.tabs{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}
.tab{
    flex:1;
}
.tab.active{
    background:#2563eb;
    color:#fff;
}
.hidden {
	display: none !important;
}
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
h1, h2 {
	margin: 0;
}
.card {
	background: white;
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
input, button {
	font: inherit;
}
input {
	width: 100%;
	padding: 12px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	margin: 8px 0;
}
input[type=checkbox] {
	width: unset;
}
button {
	border: 0;
	border-radius: 10px;
	padding: 10px 14px;
	background: #2563eb;
	color: white;
	cursor: pointer;
}
button.secondary {
	background: #6b7280;
}
.error {
	color: #b91c1c;
}
.notice {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
	padding: 12px;
	border-radius: 12px;
	margin-bottom: 16px;
}
.todayTitle {
	font-weight: 700;
	margin-bottom: 8px;
}
.intentionText {
	font-size: 1.15rem;
	font-weight: 600;
}
.meta {
	color: #6b7280;
	font-size: .9rem;
	margin-top: 6px;
}
.calendarHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
.weekdays, #calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}
.weekdays div {
	text-align: center;
	font-weight: 700;
	color: #6b7280;
	font-size: .85rem;
}
.day {
	min-height: 76px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 8px;
	cursor: pointer;
}
.day.empty {
	background: transparent;
	border: 0;
	cursor: default;
}
.day.today {
    border: 4px solid #7c3aed;
    border-radius: 14px;
}
.dayNumber {
	font-weight: 700;
}
.day.hasIntentions {
	background: #eff6ff;
	border-color: #93c5fd;
}
.day.completed {
	background: #ecfdf5;
	border-color: #86efac;
}
.day.multi {
	background: #fef3c7;
	border-color: #facc15;
}
.badge {
	display: inline-block;
	margin-top: 5px;
	font-size: .75rem;
	color: #374151;
}
.detailItem {
	border-top: 1px solid #e5e7eb;
	padding: 12px 0;
}
.detailItem:first-child {
	border-top: 0;
}
@media (max-width: 600px) {
	#app {
		padding: 10px;
	}
	.day {
		min-height: 58px;
		padding: 5px;
	}
	.badge {
		font-size: .7rem;
	}
}
textarea {
	width: 100%;
	min-height: 90px;
	padding: 12px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	margin: 8px 0;
	font: inherit;
	resize: vertical;
}
label {
	display: block;
	margin-top: 8px;
	font-weight: 600;
}
.actionRow {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 10px;
}
button.danger {
	background: #dc2626;
}
button.success {
	background: #16a34a;
}
.modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 30;
}
.modalBox {
	background: white;
	border-radius: 16px;
	padding: 16px;
	width: min(520px, 100%);
	max-height: 90vh;
	overflow-y: auto;
}
.modalActions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.topBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.topBar h1 {
	font-size: 1.25rem;
}

.topActions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.topActions button,
.searchBar input {
	font-size: .9rem;
	padding: 8px 10px;
}

.searchBar {
	position: relative;
	margin-bottom: 12px;
}

.searchBar input {
	margin: 0;
}

.searchResults {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: white;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(0,0,0,.16);
	padding: 12px;
	z-index: 20;
	max-height: 70vh;
	overflow-y: auto;
}

.calendarLayout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.calendarCard {
	min-width: 0;
}

.dayPanel {
	align-self: start;
}

@media (min-width: 900px) {
	.calendarLayout {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}

	.dayPanel {
		position: sticky;
		top: 12px;
		max-height: calc(100vh - 24px);
		overflow-y: auto;
	}
}

@media (max-width: 600px) {
	.topBar {
		align-items: flex-start;
	}

	.topActions button {
		font-size: .8rem;
		padding: 7px 8px;
	}
}

.detailItem {
	cursor: pointer;
}

.detailItem .actionRow {
	display: none;
}

.detailItem.open .actionRow {
	display: flex;
}

.seriesList {
	margin-top: 12px;
	border-top: 1px solid #e5e7eb;
}

.seriesItem {
	padding: 10px 0;
	border-bottom: 1px solid #e5e7eb;
}
#waitingList {
	max-height: 80dvh;
	overflow: auto;
}

.dateField{
    position:relative;
}
.dateField input{
    width:100%;
    padding-right:40px;
}
.clearDate{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#666;
    font-weight:bold;
    user-select:none;
}
.clearDate:hover{
    color:#dc2626;
}