:root {
    		--panel: rgba(153, 246, 228, 0.40);
			--panel-border: rgba(255, 255, 255, 0.14);
			--text: #e5eefc;
			--muted: #9fb0d1;
			--primary: #60a5fa;
			--primary-2: #38bdf8;
			--success: #34d399;
			--danger: #fb7185;
			--warning: #fbbf24;
			--shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
			--radius: 18px;
		}
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: Inter, Arial, sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 30%),
                radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 30%),
                linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
            min-height: 100vh;
        }
        .page {
            width: min(1500px, calc(100% - clamp(16px, 3vw, 36px)));
            margin: 24px auto;
        }
        .hero,
		.card {
			background: rgba(190, 215, 210, 0.30);
			border: 1px solid var(--panel-border);
			border-radius: 24px;
			backdrop-filter: blur(16px);
			box-shadow: var(--shadow);
		}
		.auth-box {
			background: transparent;
			border: 0;
			border-radius: 24px;
			backdrop-filter: none;
			box-shadow: none;
		}
        .hero {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            padding: 28px;
            margin-bottom: 24px;
        }
        .hero-title-wrap {
			display: flex;
			align-items: center;
			gap: 22px;
			margin-bottom: 16px;
		}
		.hero-brand {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 0 0 auto;
		}
		.hero-brand img {
			display: block;
			width: 150px;
			height: 122px;
		}
		.hero-brand-text {
			margin-top: 8px;
			font-size: 16px;
			line-height: 1.2;
			color: #ff4df0;
			text-align: center;
		}
		.hero h1 {
			margin: 0;
			font-size: clamp(28px, 4vw, 42px);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 10px;
		}
		.auth-hero-copy .auth-title {
			margin: 0 0 8px;
			font-size: 24px;
			display: flex;
			flex-direction: row;
			align-items: baseline;
			justify-content: flex-start;
			gap: 10px;
			white-space: nowrap;
			text-align: left;
		}
		.auth-hero-copy .auth-title-brand,
		.auth-hero-copy .auth-title-main {
			display: inline;
			white-space: nowrap;
		}
		.auth-hero-copy .auth-title-brand {
			color: #ff4df0;
		}
		.auth-hero-copy .auth-title-main {
			color: #e5eefc;
		}
		.hero-title-top {
			display: block;
			color: #ff4df0;
			line-height: 1;
		}
		.hero-title-main {
			display: block;
			line-height: 1;
		}
		        .hero p,
        .muted {
            margin: 0;
            color: var(--muted);
            line-height: 1.5;
        }
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }
        .user-chip {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 999px;
            border: 1px solid var(--panel-border);
            background: rgba(255,255,255,0.06);
        }
        .stats {
			display: grid;
			grid-template-columns: repeat(5, minmax(120px, 1fr));
			gap: 12px;
			width: min(700px, 100%);
		}
		.stats-actions {
			display: grid;
			grid-template-columns: repeat(5, minmax(120px, 1fr));
			gap: 12px;
			width: 100%;
			margin-top: 12px;
			grid-column: 1 / -1;
		}
		.status-visibility-row {
			display: grid;
			grid-template-columns: repeat(5, minmax(120px, 1fr));
			gap: 12px;
			width: 100%;
			margin-top: 10px;
			grid-column: 1 / -1;
		}
		.status-visibility-item {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			min-height: 34px;
			padding: 6px 10px;
			border-radius: 14px;
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(255, 255, 255, 0.14);
			color: var(--text);
			font-size: 13px;
			cursor: pointer;
		}
		.status-visibility-item input[type="checkbox"] {
			width: 16px;
			height: 16px;
			accent-color: #60a5fa;
		}
				.stat-filter-btn {
			min-height: 34px;
			padding: 8px 12px;
			border-radius: 16px;
			font-weight: 600;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 2px;
			line-height: 1.15;
			transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
		}
		.stat-filter-label {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			font-size: 13px;
			color: var(--muted);
		}
		.stat-filter-count {
			display: block;
			font-size: 16px;
			font-weight: 700;
			color: var(--text);
		}
		.stat-filter-btn:hover {
			transform: translateY(-1px);
		}
		.stat-filter-created,
		.stat-filter-started,
		.stat-filter-onhold,
		.stat-filter-cancelled,
		.stat-filter-completed {
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid var(--panel-border);
			color: var(--text);
		}
		.stat-filter-created.is-active,
		.stat-filter-started.is-active,
		.stat-filter-onhold.is-active,
		.stat-filter-cancelled.is-active,
		.stat-filter-completed.is-active {
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.20);
			color: var(--text);
		}
        .stat {
            padding: 12px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid var(--panel-border);
            border-radius: 16px;
            text-align: center;
        }
        .stat strong {
            display: block;
            font-size: 26px;
            margin-bottom: 4px;
        }
        .stat span {
            color: var(--muted);
            font-size: 13px;
        }
		.stat-pending {
			background: rgba(253, 230, 138, 0.38);
			border: 1px solid rgba(251, 191, 36, 0.45);
		}
		.stat-late {
			background: rgba(254, 205, 211, 0.38);
			border: 1px solid rgba(251, 113, 133, 0.45);
		}
		.stat-clickable {
			cursor: pointer;
		}
        .left-col,
        .right-col {
            display: flex;
            flex-direction: column;
            gap: 24px;
            min-width: 0;
        }
        .card,
        .calendar-shell,
        .table-wrap,
        #calendar,
        .description-field-shell,
        .auth-box {
            min-width: 0;
        }
        .card {
            padding: 22px;
            border-radius: var(--radius);
            overflow: hidden;
        }
        .card h2 {
            margin: 0 0 18px;
            font-size: 22px;
        }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 18px;
        }
        .mode-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 92px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid var(--panel-border);
            color: var(--text);
            font-size: 12px;
            font-weight: 700;
        }
        .mode-pill.edit {
            background: rgba(251, 191, 36, 0.14);
            border-color: rgba(251, 191, 36, 0.25);
            color: #fde68a;
        }
        .full { grid-column: 1 / -1; }
        label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #d9e6ff;
        }
        input,
        select,
        textarea,
        button {
            font: inherit;
        }
        input,
		select,
		textarea {
			width: 100%;
			padding: 12px 14px;
			border-radius: 12px;
			border: 1px solid rgba(255, 255, 255, 0.08);
			background: rgba(255, 255, 255, 0.05);
			color: var(--text);
			outline: none;
		}
		select option {
			background-color: #f8fafc;
			color: #0f172a;
		}
		select option:checked,
		select option:hover {
			background-color: #cbd5e1;
			color: #0f172a;
		}
		.category-color-field {
			transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
		}
		.category-color-field.is-empty {
			background: rgba(255, 255, 255, 0.05);
			border-color: rgba(255, 255, 255, 0.08);
			color: var(--text);
		}
        .has-dropdown-arrow {
            padding-right: 44px !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' fill='none' stroke='%23e5eefc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            background-size: 14px 14px;
        }
		.category-combobox {
			position: relative;
		}
		.category-filter-trigger {
			cursor: pointer;
		}
		.category-menu {
			position: absolute;
			top: calc(100% + 6px);
			left: 0;
			right: 0;
			z-index: 50;
			max-height: 260px;
			overflow-y: auto;
			padding: 8px;
			border-radius: 14px;
			border: 1px solid var(--panel-border);
			background: rgba(15, 23, 42, 0.96);
			box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
			backdrop-filter: blur(12px);
		}
		.category-menu-option {
			width: 100%;
			border: 0;
			border-radius: 12px;
			padding: 10px 12px;
			margin: 0 0 6px;
			text-align: left;
			font: inherit;
			cursor: pointer;
			transition: transform 0.15s ease, opacity 0.15s ease;
		}
		.category-menu-option:last-child {
			margin-bottom: 0;
		}
		.category-menu-option:hover {
			transform: translateY(-1px);
			opacity: 0.96;
		}
		.category-menu-empty {
			padding: 10px 12px;
			border-radius: 12px;
			color: var(--muted);
			background: rgba(255, 255, 255, 0.05);
		}
        textarea {
            resize: vertical;
            min-height: 100px;
        }
        input::placeholder,
        textarea::placeholder { color: #8da0c3; }
        input:focus,
        select:focus,
        textarea:focus {
            border-color: rgba(96, 165, 250, 0.55);
            box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
        }
        .description-field-shell {
            position: relative;
        }
        .description-field-shell textarea {
            padding-right: 56px;
        }
        .handwriting-trigger {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            padding: 0;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.10);
            color: var(--text);
        }
        .handwriting-trigger:hover {
            background: rgba(96, 165, 250, 0.18);
        }
        .handwriting-trigger:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
        }
        .handwriting-hint {
            margin-top: 8px;
            color: var(--muted);
            font-size: 12px;
        }
		.alarm-box {
			margin-top: 18px;
			padding: 16px;
			border-radius: 14px;
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid rgba(255, 255, 255, 0.08);
		}
		.alarm-box-title {
			margin: 0 0 12px;
			font-size: 15px;
			font-weight: 700;
			color: #d9e6ff;
		}
		.alarm-toggle-row {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 14px;
		}
		.alarm-toggle-row input[type="checkbox"] {
			width: 18px;
			height: 18px;
			accent-color: #60a5fa;
		}
		.alarm-grid {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 14px;
		}
		.alarm-disabled {
			opacity: 0.5;
			pointer-events: none;
		}
		.recurrence-box {
			margin-top: 18px;
			padding: 16px;
			border-radius: 14px;
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid rgba(255, 255, 255, 0.08);
		}
		.recurrence-box-title {
			margin: 0 0 12px;
			font-size: 15px;
			font-weight: 700;
			color: #d9e6ff;
		}
		.recurrence-toggle-row {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 14px;
		}
		.recurrence-toggle-row input[type="checkbox"] {
			width: 18px;
			height: 18px;
			accent-color: #60a5fa;
		}
		.recurrence-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 14px;
		}
		.recurrence-disabled {
			opacity: 0.5;
			pointer-events: none;
		}
		.recurrence-pattern-interval,
		.recurrence-pattern-ordinal {
			display: none;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 14px;
		}
		.recurrence-pattern-interval.show,
		.recurrence-pattern-ordinal.show {
			display: grid;
		}
		.recurrence-pattern-ordinal .full,
		.recurrence-pattern-interval .full {
			grid-column: 1 / -1;
		}
		.recurrence-end-fields {
			display: none;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 14px;
		}

		.recurrence-end-fields.show {
			display: grid;
		}

		.recurrence-end-fields .full {
			grid-column: 1 / -1;
		}
		.button-row {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        button {
            border: 0;
            border-radius: 12px;
            padding: 12px 16px;
            cursor: pointer;
            transition: transform 0.18s ease;
        }
        button:hover { transform: translateY(-1px); }
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--primary-2));
            color: #08111f;
            font-weight: 700;
        }
        .btn-secondary {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text);
            border: 1px solid var(--panel-border);
        }
        .btn-danger {
            background: rgba(251, 113, 133, 0.14);
            color: #fecdd3;
            border: 1px solid rgba(251, 113, 133, 0.25);
        }
        .btn-success {
            background: rgba(52, 211, 153, 0.16);
            color: #bbf7d0;
            border: 1px solid rgba(52, 211, 153, 0.25);
        }
        .btn-warning {
            background: rgba(251, 191, 36, 0.16);
            color: #fde68a;
            border: 1px solid rgba(251, 191, 36, 0.25);
        }
        .calendar-shell {
            min-height: 520px;
            overflow: hidden;
        }
        #calendar {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            padding: 12px;
            width: 100%;
            overflow-x: auto;
        }
		#calendar.calendar-bg-pending {
			background: rgba(251, 191, 36, 0.22);
		}
		#calendar.calendar-bg-late {
			background: rgba(251, 113, 133, 0.22);
		}
        .fc .fc-toolbar-title,
		.fc .fc-daygrid-day-number {
			color: var(--text);
		}
		.fc .fc-col-header-cell-cushion {
			color: #334155;
			font-weight: 600;
		}
        .fc .fc-toolbar {
            flex-wrap: wrap;
            gap: 10px;
        }
        .fc .fc-toolbar-title {
            font-size: clamp(1.05rem, 2vw, 1.5rem);
        }
        .fc .fc-button {
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(255, 255, 255, 0.08);
			color: var(--text);
			box-shadow: none;
		}
		.fc .fc-button.fc-today-button {
			background: rgba(187, 247, 208, 0.45);
			border-color: rgba(187, 247, 208, 0.45);
			color: #0f172a;
		}
		.fc .fc-button-primary:not(:disabled).fc-button-active,
		.fc .fc-button-primary:not(:disabled):active,
		.fc .fc-button:hover {
			background: rgba(96, 165, 250, 0.25);
			border-color: rgba(96, 165, 250, 0.25);
		}
		.fc .fc-button.fc-today-button:hover,
		.fc .fc-button.fc-today-button:active,
		.fc .fc-button.fc-today-button.fc-button-active {
			background: rgba(187, 247, 208, 0.45);
			border-color: rgba(187, 247, 208, 0.45);
			color: #0f172a;
		}
        .fc-theme-standard td,
        .fc-theme-standard th,
        .fc-theme-standard .fc-scrollgrid {
            border-color: rgba(255, 255, 255, 0.08);
        }
        .fc .fc-daygrid-day.fc-day-today {
			background: rgba(187, 247, 208, 0.45);
		}
        .fc-event.fc-task-created {
            background: linear-gradient(135deg, rgba(96, 165, 250, 0.95), rgba(56, 189, 248, 0.95));
            border: none;
            color: #04111c;
        }
        .fc-event.fc-task-started {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.94), rgba(245, 158, 11, 0.94));
            border: none;
            color: #2a1700;
        }
        .fc-event.fc-task-onhold {
            background: linear-gradient(135deg, rgba(192, 132, 252, 0.94), rgba(139, 92, 246, 0.94));
            border: none;
            color: #1e1037;
        }
        .fc-event.fc-task-cancelled {
            background: linear-gradient(135deg, rgba(251, 113, 133, 0.94), rgba(239, 68, 68, 0.94));
            border: none;
            color: #2b0a0f;
        }
        .fc-event.fc-task-completed {
            background: linear-gradient(135deg, rgba(52, 211, 153, 0.92), rgba(16, 185, 129, 0.92));
            border: none;
            color: #052317;
        }
		.fc-daygrid-event-dot {
			display: none;
		}
		.fc .fc-daygrid-dot-event .fc-event-title {
			margin-left: 4px;
		}
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
        }
        .badge-created {
            background: rgba(96, 165, 250, 0.14);
            color: #bfdbfe;
        }
        .badge-started {
            background: rgba(251, 191, 36, 0.16);
            color: #fde68a;
        }
        .badge-onhold {
            background: rgba(192, 132, 252, 0.16);
            color: #e9d5ff;
        }
        .badge-cancelled {
            background: rgba(251, 113, 133, 0.16);
            color: #fecdd3;
        }
        .badge-completed {
            background: rgba(52, 211, 153, 0.14);
            color: #bbf7d0;
        }
		.table-wrap {
			overflow-x: hidden;
		}
		table {
			width: 100%;
			border-collapse: collapse;
			table-layout: fixed;
		}
		th,
		td {
			padding: 14px 12px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.08);
			text-align: left;
			vertical-align: top;
			overflow-wrap: anywhere;
		}
		.task-main-row td {
			border-bottom: 0;
			padding-bottom: 8px;
		}
		.task-actions-row td {
			padding-top: 0;
			padding-bottom: 16px;
		}
		.task-group-light td {
			background: rgba(255, 255, 255, 0.25);
		}
		.task-group-dark td {
			background: rgba(255, 255, 255, 0.10);
		}
		.task-group-pending-light td {
			background: rgba(251, 191, 36, 0.22);
		}
		.task-group-pending-dark td {
			background: rgba(251, 191, 36, 0.12);
		}
		.task-group-late-light td {
			background: rgba(251, 113, 133, 0.22);
		}
		.task-group-late-dark td {
			background: rgba(251, 113, 133, 0.12);
		}
		.task-description-box {
			width: 100%;
			padding: 12px 14px;
			border-radius: 12px;
			background: transparent;
			color: var(--text);
			line-height: 1.5;
			white-space: normal;
			overflow-wrap: anywhere;
		}
		.task-title-cell {
			width: 30%;
			min-width: 0;
		}
		.task-category-cell {
			width: 18%;
		}
		.task-owner-cell,
		.task-executor-cell {
			width: 11%;
		}
		.task-start-cell,
		.task-end-cell {
			width: 10%;
			white-space: nowrap;
		}
		.task-status-cell {
			width: 10%;
		}
		.task-title-text {
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 0;
		}
		.task-title-text strong {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.status-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 18px;
			min-width: 18px;
			font-size: 14px;
			font-weight: 700;
			line-height: 1;
		}
		.calendar-task-title {
			display: flex;
			align-items: center;
			gap: 6px;
			min-width: 0;
		}
		.calendar-task-title-text {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.task-description-row td {
			padding-top: 0;
			padding-bottom: 10px;
			border-bottom: 0;
		}
		.task-description-cell {
			padding-left: 12px;
			padding-right: 12px;
		}
		.task-actions-cell {
			padding-left: 12px;
			padding-right: 12px;
		}
		.table-actions-inline {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			gap: 8px;
			overflow-x: auto;
			padding-bottom: 2px;
		}
		.table-actions-inline button {
			flex: 0 0 auto;
			white-space: nowrap;
			padding: 8px 10px;
			border-radius: 10px;
			font-size: 13px;
		}
        .empty-state {
            padding: 26px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.04);
            text-align: center;
            color: var(--muted);
        }
        .toast {
            position: fixed;
            top: 22px;
            right: 22px;
            z-index: 3000;
            padding: 14px 16px;
            border-radius: 14px;
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: var(--shadow);
            color: var(--text);
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        .toast.show { opacity: 1; transform: translateY(0); }
        .toast.error { border-color: rgba(251, 113, 133, 0.28); color: #fecdd3; }
        .modal {
			position: fixed;
			inset: 0;
			display: none;
			align-items: center;
			justify-content: center;
			background: rgba(30, 41, 59, 0.45);
			padding: 20px;
			z-index: 2500;
		}
        .modal.show { display: flex; }
        .modal-card {
			width: min(700px, 100%);
			background: #475569;
			border: 1px solid rgba(255, 255, 255, 0.18);
			border-radius: 20px;
			padding: 24px;
			box-shadow: var(--shadow);
		}
		.info-box {
			padding: 14px;
			border-radius: 14px;
			background: rgba(255, 255, 255, 0.12);
		}
        .info-box small {
            display: block;
            color: var(--muted);
            margin-bottom: 6px;
        }
        .ink-modal {
            position: fixed;
            inset: 0;
            z-index: 5000;
            display: none;
            flex-direction: column;
            background: #dbeafe;
        }
        .ink-modal.show {
            display: flex;
        }
        .ink-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            padding: 16px 20px;
            background: #08111f;
            color: #e5eefc;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
        }
        .ink-toolbar strong {
            display: block;
            margin-bottom: 4px;
        }
        .ink-toolbar .muted {
            color: #b9c8e6;
        }
        .ink-stage {
            flex: 1;
            padding: 16px;
        }
        #inkCanvas {
            width: 100%;
            height: 100%;
            display: block;
            background: #ffffff;
            border-radius: 18px;
            box-shadow: 0 24px 48px rgba(15, 23, 42, 0.20);
            touch-action: none;
            -ms-touch-action: none;
            cursor: crosshair;
        }
        .auth-wrapper {
            min-height: calc(100vh - 48px);
            display: grid;
            place-items: center;
        }
        .auth-box {
            width: min(980px, 100%);
            padding: 28px;
        }
        .auth-title {
			margin: 0 0 8px;
			font-size: clamp(28px, 4vw, 40px);
			line-height: 1.05;
			display: inline-flex;
			flex-direction: row;
			align-items: baseline;
			gap: 12px;
			flex-wrap: nowrap;
			white-space: nowrap;
		}
		.auth-title span {
			display: inline;
			white-space: nowrap;
		}
                                				.grid {
			display: grid;
			grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
			gap: 24px;
			align-items: start;
		}
		.form-grid,
		.filters,
		.auth-grid,
		.modal-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 14px;
		}
		#taskForm.form-grid,
		#taskForm .form-grid,
		.task-form-grid {
			display: grid;
			grid-template-columns: minmax(0, 1fr) !important;
			gap: 14px;
			width: 100%;
			min-width: 0;
		}
		#taskForm,
		#taskForm > div,
		#taskForm .form-grid > div,
		#taskForm .description-field-shell {
			width: 100%;
			min-width: 0;
			max-width: 100%;
		}
		#taskForm input,
		#taskForm select,
		#taskForm textarea,
		#taskForm button {
			max-width: 100%;
		}
		#taskForm textarea {
			display: block;
		}
		.left-col .card {
			overflow: hidden;
		}
    .auth-hero-wrap {
		display: flex;
		align-items: center;
		gap: 20px;
	}
	.auth-hero-brand {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.auth-hero-brand img {
		display: block;
		width: 150px;
		height: 122px;
	}
	.auth-hero-brand-text {
		margin-top: 8px;
		font-size: 16px;
		line-height: 1.2;
		color: #ff4df0;
		text-align: center;
	}
	.auth-hero-copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 8px;
	}
	.auth-title-brand {
		color: #ff4df0;
		display: inline;
	}
	.auth-title-main {
		color: #e5eefc;
		display: inline;
	}
	.auth-title.auth-title-inline {
		white-space: nowrap;
		text-align: left;
	}
	.auth-title.auth-title-inline .auth-title-brand,
	.auth-title.auth-title-inline .auth-title-main-inline {
		display: inline !important;
		vertical-align: baseline;
	}
	.auth-title.auth-title-inline .auth-title-brand {
		color: #ff4df0;
	}
	.auth-title.auth-title-inline .auth-title-main-inline {
		color: #e5eefc;
	}

        .hero-spaced { margin-bottom: 24px; }
        .auth-title-large { font-size: 36px; }
        .brand-accent { color: #ff4df0; }
        .brand-main { color: #ffffff; }
        .mt-18 { margin-top: 18px; }
        .label-no-margin { margin: 0; }
        .is-hidden { display: none; }
        .section-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 14px;
        }
        .section-title-tight { margin-bottom: 6px; }
        .modal-header {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: flex-start;
        }
        .modal-title-tight { margin: 0 0 6px; }
        .modal-actions { justify-content: flex-end; }
        .modal-grid-spaced { margin-top: 18px; }

@media (max-width: 760px) {
			.hero-title-wrap {
				flex-direction: column;
				align-items: flex-start;
			}
			.hero-brand {
				align-items: flex-start;
			}
			.hero-brand-text {
				text-align: left;
			}
		}

@media (max-width: 900px) {
			.status-visibility-row {
				grid-template-columns: 1fr;
			}
		}

@media (max-width: 760px) {
			.recurrence-grid,
			.recurrence-pattern-interval,
			.recurrence-pattern-ordinal,
			.alarm-grid {
				grid-template-columns: 1fr;
			}
		}

@media (max-width: 1320px) {
			.grid {
				grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
				gap: 20px;
			}
			.card {
				padding: 20px;
			}
		}

@media (max-width: 900px) {
            .hero,
            .topbar,
            .section-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .stats {
                width: 100%;
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

@media (max-width: 760px) {
            .stats,
            .form-grid,
            .filters,
            .auth-grid,
            .modal-grid {
                grid-template-columns: 1fr;
            }
            .page {
                width: min(100% - 16px, 1500px);
                margin: 12px auto;
            }
            .card,
            .auth-box {
                padding: 18px;
            }
            .calendar-shell {
                min-height: 420px;
            }
        }

@media (max-width: 520px) {
            .stats {
                grid-template-columns: 1fr;
            }
            .button-row {
                gap: 10px;
            }
            .button-row button {
                width: 100%;
            }
            .handwriting-trigger {
                top: 10px;
                right: 10px;
            }
        }

@media (max-width: 1180px) {
			.grid {
				grid-template-columns: 1fr;
			}
			#taskForm.form-grid,
			#taskForm .form-grid,
			.task-form-grid,
			.filters,
			.modal-grid {
				grid-template-columns: 1fr !important;
			}
		}

@media (max-width: 760px) {
		.auth-hero-wrap {
			flex-direction: column;
			align-items: flex-start;
		}
	}

/* ── Kalender-header met prullenbak ────────────────────────── */
		.calendar-header-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;
		}
		.calendar-header-row h2 {
			margin: 0;
		}
		.btn-bin {
			background: transparent;
			border: 1.5px solid rgba(255,255,255,0.15);
			border-radius: 8px;
			color: rgba(255,255,255,0.55);
			cursor: pointer;
			font-size: 18px;
			line-height: 1;
			padding: 6px 9px;
			transition: background 0.15s, color 0.15s, border-color 0.15s;
		}
		.btn-bin:hover {
			background: rgba(239,68,68,0.15);
			border-color: rgba(239,68,68,0.5);
			color: #ef4444;
		}

/* ── Bulk-verwijder modal ──────────────────────────────────── */
		.bulk-scope-row {
			display: flex;
			flex-direction: column;
			gap: 8px;
			margin-top: 6px;
		}
		.bulk-radio-label {
			display: flex;
			align-items: center;
			gap: 8px;
			cursor: pointer;
			font-size: 14px;
			color: var(--color-text-primary, #e5eefc);
		}
		.bulk-radio-label input[type="radio"] {
			accent-color: var(--color-accent, #60a5fa);
			width: 16px;
			height: 16px;
			cursor: pointer;
		}
		.bulk-range-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 14px;
		}
		.bulk-delete-preview {
			font-size: 13px;
			color: var(--color-text-secondary, #94a3b8);
			min-height: 20px;
		}
		.bulk-delete-footer {
			margin-top: 20px;
			padding-top: 16px;
			border-top: 1px solid rgba(255,255,255,0.08);
		}

/* ── Punten 21-29: Toegankelijkheid & Gebruikersbeheer ──────── */
		.btn-link {
			background: transparent;
			border: none;
			color: var(--color-accent, #60a5fa);
			cursor: pointer;
			font-size: 14px;
			padding: 0;
			text-decoration: underline;
			text-underline-offset: 3px;
		}
		.btn-link:hover { opacity: .8; }

		.modal-card-sm { max-width: 480px; }

		.account-section-title {
			font-size: 13px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: .05em;
			color: var(--color-text-secondary, #94a3b8);
			padding-bottom: 4px;
			border-bottom: 1px solid rgba(255,255,255,.08);
		}
		.account-danger-title { color: #f87171; border-color: rgba(248,113,113,.25); margin-top: 8px; }

		.session-warning-modal .modal-card {
			border: 1.5px solid rgba(251,191,36,.4);
			background: #1e1a0e;
		}
		.session-warning-modal .modal-title-tight { color: #fbbf24; }

/* ── Verwijder-knop als icoon in takenoverzicht ──────────────── */
		.btn-icon-only {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 6px 10px;
			min-width: unset;
		}
		.btn-icon-only svg {
			display: block;
			flex-shrink: 0;
		}

/* ── Alarmherhaling interval-rij ─────────────────────────── */
		.alarm-repeat-cell { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; }
		.alarm-repeat-controls {
			display: flex;
			gap: 8px;
			align-items: center;
			flex-wrap: wrap;
		}
		.alarm-repeat-controls > select { flex-shrink: 0; }
		.alarm-interval-row {
			display: flex;
			gap: 8px;
			align-items: center;
			flex: 1;
		}
		.alarm-interval-row input[type="number"] {
			width: 64px;
			flex-shrink: 0;
		}
		.alarm-interval-row select { flex: 1; }