:root {
	--tdi-bg: #343434;
	--tdi-ink: #181716;
	--tdi-muted: #766f68;
	--tdi-soft: #f5efe5;
	--tdi-surface: rgba(255, 253, 250, .78);
	--tdi-glass: rgba(255, 255, 255, .42);
	--tdi-dark: #151817;
	--tdi-dark-2: #252725;
	--tdi-red: #a92c38;
	--tdi-red-2: #7d202b;
	--tdi-gold: #d9ad57;
	--tdi-gold-soft: #f6e7b7;
	--tdi-line: rgba(255,255,255,.54);
	--tdi-shadow: 0 22px 54px rgba(70, 49, 33, .16), inset 0 1px 0 rgba(255,255,255,.62);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { overflow-y: scroll; scrollbar-gutter: stable; background: #f7f2ea; touch-action: manipulation; }
body.tdi-pwa-body { margin: 0; min-width: 0; min-height: 100dvh; background: #f7f2ea; color: var(--tdi-ink); touch-action: manipulation; }
body.tdi-pwa-body.modal-open { overflow: hidden; overscroll-behavior: contain; }
body.tdi-pwa-body::before,
body.tdi-pwa-body::after { display: none; }
button, input, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.tdi-pwa-app {
	display: block;
	min-height: calc(100dvh + env(safe-area-inset-top));
	margin-top: calc(-1 * env(safe-area-inset-top));
	padding-top: 0;
	background:
		radial-gradient(circle at 18% 8%, rgba(217,173,87,.20), transparent 18rem),
		radial-gradient(circle at 84% 18%, rgba(169,44,56,.13), transparent 16rem),
		linear-gradient(145deg, #f8f3ec, #efe6d9);
}

.tdi-pwa-frame {
	position: relative;
	width: min(100%, 430px);
	min-height: calc(100dvh + env(safe-area-inset-top));
	margin: 0 auto;
	padding-bottom: calc(156px + env(safe-area-inset-bottom));
	background:
		radial-gradient(circle at 20% 2%, rgba(246,231,183,.58), transparent 11rem),
		linear-gradient(180deg, rgba(255,255,255,.34), rgba(245,239,229,.72)),
		var(--tdi-soft);
	overflow-x: hidden;
	padding-top: 0;
	scroll-padding-bottom: calc(138px + env(safe-area-inset-bottom));
}
.tdi-pwa-frame.is-busy { cursor: progress; }
.tdi-pwa-frame.is-busy button, .tdi-pwa-frame.is-busy input, .tdi-pwa-frame.is-busy select { cursor: progress; }

.tdi-pwa-loading {
	display: grid;
	gap: 14px;
	place-items: center;
	min-height: 100svh;
	color: var(--tdi-ink);
	background: linear-gradient(145deg, #f8f3ec, #efe6d9);
	font-size: 14px;
	font-weight: 850;
}
.tdi-pwa-loading::before {
	content: "";
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: url("./icons/tdi-logo-ui.png") center / cover no-repeat;
	box-shadow: 0 12px 34px rgba(70,49,33,.16);
	animation: tdiLoadPulse 1.1s ease-in-out infinite alternate;
}
.tdi-pwa-loading::after {
	content: "Đang mở TDI Practice App";
	color: rgba(24,23,22,.62);
}
@keyframes tdiLoadPulse { from { transform: scale(.96); opacity: .72; } to { transform: scale(1); opacity: 1; } }

body.tdi-pwa-body .gtranslate_wrapper,
body.tdi-pwa-body .gt_float_switcher,
body.tdi-pwa-body .gt_switcher_wrapper,
body.tdi-pwa-body .gt_container,
body.tdi-pwa-body .gt_container--hich1m,
body.tdi-pwa-body .gt_languages,
body.tdi-pwa-body .gt-current-lang,
body.tdi-pwa-body .gt_selected,
body.tdi-pwa-body .gt_options,
body.tdi-pwa-body .gt_switcher-popup,
body.tdi-pwa-body iframe[src*="translate"],
body.tdi-pwa-body iframe[src*="gtranslate"],
body.tdi-pwa-body [id^="gt_float_wrapper"],
body.tdi-pwa-body [id*="google_translate"],
body.tdi-pwa-body [class*="gtranslate"],
body.tdi-pwa-body [class*="gt_"],
body.tdi-pwa-body [class*="translate"],
body.tdi-pwa-body [data-gt-widget],
body.tdi-pwa-body .tdi-language-switcher,
body.tdi-pwa-body .tdi-language-toggle,
body.tdi-pwa-body .tdi-mobile-language-toggle,
body.tdi-pwa-body .language-switcher {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
.glass-card, .glass-nav, .glass-depth {
	border: 1px solid var(--tdi-line);
	background: var(--tdi-surface);
	box-shadow: var(--tdi-shadow);
	backdrop-filter: blur(22px) saturate(145%);
	-webkit-backdrop-filter: blur(22px) saturate(145%);
}

.tdi-header {
	margin-top: 0;
	padding: calc(env(safe-area-inset-top) + 10px) 20px 64px;
	color: #fff;
	background:
		radial-gradient(circle at 86% 12%, rgba(217,173,87,.22), transparent 9rem),
		linear-gradient(180deg, rgba(21,24,23,.96), rgba(37,39,37,.88));
	border-radius: 0 0 34px 34px;
}

.tdi-header-row { display: grid; grid-template-columns: minmax(0,1fr) 132px; gap: 18px; align-items: flex-start; }
.tdi-logo { display: block; width: 52px; height: 52px; margin-bottom: 9px; object-fit: contain; background: transparent; filter: drop-shadow(0 12px 18px rgba(125,32,43,.22)); }
.tdi-logo-auth { width: 86px; height: 86px; margin: 0 auto 14px; }
.tdi-header p, .tdi-header h1 { margin: 0; }
.tdi-header p { color: rgba(255,255,255,.68); font-size: 15px; font-weight: 780; }
.tdi-header h1 { margin-top: 4px; font-size: 31px; line-height: 1.05; font-weight: 950; }
.tdi-header-side { display: grid; justify-items: end; gap: 18px; width: 132px; padding-top: 4px; }
.tdi-icon { justify-self: end; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 26px rgba(0,0,0,.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); line-height: 1; }
.tdi-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tdi-icon.is-on { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.32); }
.tdi-tibetan-chip { width: 132px; min-width: 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; color: #fff; background: rgba(255,255,255,.08); text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: translateY(4px); }
.tdi-tibetan-chip small { display: block; color: rgba(255,255,255,.56); font-size: 12px; font-weight: 850; }
.tdi-tibetan-chip strong { display: block; margin-top: 3px; font-size: 14px; line-height: 1.15; font-weight: 950; }

.tdi-card { margin: 14px 16px 0; padding: 16px; border-radius: 30px; }
.tdi-event { margin-top: -48px; border-color: rgba(217,173,87,.34); background: linear-gradient(145deg, rgba(255,250,239,.86), rgba(235,204,132,.42)); box-shadow: 0 22px 54px rgba(96,69,38,.16), inset 0 1px 0 rgba(255,255,255,.72); }
.tdi-event small { color: rgba(0,0,0,.52); font-weight: 950; }
.tdi-event-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tdi-event-head span { flex: 0 0 auto; color: rgba(24,23,22,.62); font-size: 12px; font-weight: 950; }
.tdi-event h2 { margin: 8px 0; font-size: 20px; line-height: 1.15; }
.tdi-event p, .tdi-muted { color: var(--tdi-muted); font-size: 13px; font-weight: 560; line-height: 1.38; }
.tdi-event-lines { display: grid; gap: 6px; margin-top: 12px; }
.tdi-event-lines span { display: block; padding: 8px 10px; border-radius: 14px; color: rgba(32,24,18,.74); background: rgba(255,255,255,.46); font-size: 12px; line-height: 1.25; font-weight: 900; }
.tdi-event-list { display: grid; gap: 7px; margin-top: 12px; }
.tdi-event-row { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 10px; align-items: center; width: 100%; min-height: 56px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.62); border-radius: 17px; background: rgba(255,255,255,.52); text-align: left; }
.tdi-event-time { display: grid; place-items: center; min-height: 38px; height: 100%; padding: 0 7px; border-radius: 13px; color: #7d202b; background: rgba(246,231,183,.62); font-size: 10.5px; font-weight: 950; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; line-height: 1; letter-spacing: 0; }
.tdi-event-row b { display: block; min-width: 0; overflow: hidden; color: var(--tdi-ink); text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.2; font-weight: 950; }
.tdi-event-row div > span { display: block; min-width: 0; overflow: hidden; margin-top: 3px; color: rgba(32,24,18,.58); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 760; }
.tdi-event-note, .tdi-event-more { margin: 8px 0 0; color: rgba(32,24,18,.56); font-size: 11px; line-height: 1.3; font-weight: 620; }
.tdi-event-more { color: #8a5d16; }
.tdi-pill, .tdi-chip-btn { display: inline-flex; border-radius: 999px; padding: 7px 10px; color: rgba(32,24,18,.74); background: rgba(255,255,255,.46); font-size: 12px; font-weight: 900; }
.tdi-sync-banner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; margin-top: -48px; background: rgba(255,255,255,.64); }
.tdi-sync-banner + .tdi-event { margin-top: 12px; }
.tdi-sync-banner strong, .tdi-sync-banner span { display: block; }
.tdi-sync-banner strong { font-size: 14px; font-weight: 950; }
.tdi-sync-banner span { margin-top: 3px; color: var(--tdi-muted); font-size: 11px; line-height: 1.35; font-weight: 560; }
.tdi-sync-banner .tdi-secondary { min-height: 38px; padding: 0 12px; border-radius: 999px; font-size: 12px; }

.tdi-week-wrap { margin: 16px; }
.tdi-week-toggle { width: 100%; min-height: 34px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.56); border-radius: 999px; color: rgba(24,23,22,.62); background: rgba(255,255,255,.52); font-size: 12px; font-weight: 950; }
.tdi-week { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; }
.tdi-week button { display: grid; gap: 4px; place-items: center; min-height: 54px; border: 1px solid rgba(255,255,255,.64); border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 12px 26px rgba(62,45,31,.08); font-weight: 950; }
.tdi-week span { color: rgba(24,23,22,.48); font-size: 10px; text-transform: capitalize; }
.tdi-week strong { color: var(--tdi-ink) !important; font-size: 16px; }
.tdi-week .active { color: #fff; border-color: rgba(255,255,255,.24); background: var(--tdi-dark); box-shadow: 0 14px 28px rgba(24,23,22,.18), inset 0 1px 0 rgba(255,255,255,.16); }
.tdi-week .active span { color: rgba(255,255,255,.84); }
.tdi-week .active strong { color: #fff !important; }

.tdi-section-head, .tdi-month-head, .tdi-top, .tdi-practice-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tdi-section-head { margin-bottom: 12px; }
.tdi-section-head h2, .tdi-top h1 { margin: 0; }
.tdi-section-head h2 { font-size: 20px; }
.tdi-section-head strong { color: var(--tdi-red); }
.tdi-add-practice { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: #fff; background: rgba(87,94,95,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.24); backdrop-filter: blur(22px) saturate(155%); -webkit-backdrop-filter: blur(22px) saturate(155%); }
.tdi-add-practice svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tdi-top { margin-top: 0; padding: calc(env(safe-area-inset-top) + 18px) 20px 0; }
.tdi-top h1 { font-size: 30px; font-weight: 950; }

.tdi-practice-list, .tdi-list { display: grid; gap: 10px; }
.tdi-practice { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; padding: 13px; border-left: 4px solid var(--tdi-red); border-radius: 21px; background: rgba(255,255,255,.54); box-shadow: inset 0 1px 0 rgba(255,255,255,.62); }
.tdi-practice.is-entered { border-left-color: #17a36b; background: rgba(245,255,250,.62); }
.tdi-practice h3, .tdi-practice p { margin: 0; }
.tdi-practice h3 { font-size: 16px; }
.tdi-practice-title span { color: var(--tdi-red); font-size: 13px; font-weight: 950; }
.tdi-practice p { margin-top: 4px; color: var(--tdi-muted); font-size: 12px; font-weight: 560; }
.tdi-practice-meta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-top: 8px; line-height: 1.2; }
.tdi-practice-meta span { display: grid; min-width: 0; gap: 3px; padding: 9px; border-radius: 13px; background: rgba(255,255,255,.50); }
.tdi-practice-meta em { min-width: 0; overflow: visible; color: rgba(24,23,22,.50); text-overflow: clip; white-space: normal; font-style: normal; font-size: 10px; font-weight: 780; }
.tdi-practice-meta strong { min-width: 0; overflow: visible; color: var(--tdi-ink); text-overflow: clip; white-space: nowrap; font-size: 15px; font-weight: 940; }
.tdi-practice-meta span:nth-child(2) strong { font-size: 16px; }
.tdi-practice-actions { display: grid; gap: 8px; }
.tdi-count-entry { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; align-items: end; }
.tdi-count-entry label { display: grid; gap: 4px; min-width: 0; }
.tdi-count-entry span { color: rgba(24,23,22,.48); font-size: 10px; font-weight: 900; }
.tdi-count-entry input { width: 100%; min-height: 40px; border: 1px solid rgba(255,255,255,.78); border-radius: 15px; padding: 0 14px; color: var(--tdi-ink); background: rgba(255,255,255,.58); box-shadow: 0 10px 20px rgba(62,45,31,.06), inset 0 1px 0 rgba(255,255,255,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 16px; font-weight: 900; outline: 0; }
.tdi-count-entry input::placeholder { color: rgba(24,23,22,.36); font-size: 13px; font-weight: 850; }
.tdi-count-entry input:focus { border-color: rgba(169,44,56,.38); box-shadow: 0 0 0 4px rgba(169,44,56,.09), inset 0 1px 0 rgba(255,255,255,.78); }
.tdi-row-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tdi-add, .tdi-mini, .tdi-quick-add { min-height: 40px; border: 0; border-radius: 15px; font-size: 12px; font-weight: 950; }
.tdi-add { color: #fff; background: linear-gradient(135deg, var(--tdi-red), var(--tdi-red-2)); box-shadow: 0 10px 18px rgba(169,44,56,.18); }
.tdi-mini { color: rgba(24,23,22,.72); background: rgba(255,255,255,.68); }
.tdi-quick-add { color: #0f7b55; background: linear-gradient(145deg, rgba(223,248,235,.88), rgba(246,231,183,.50)); box-shadow: inset 0 1px 0 rgba(255,255,255,.70); }
.tdi-progress { height: 5px; overflow: hidden; margin-top: 8px; border-radius: 999px; background: rgba(0,0,0,.08); }
.tdi-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #35c989, #17a36b); }

.tdi-nav { position: fixed !important; left: 50%; bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px)); z-index: 80; width: min(276px, calc(100vw - 48px)); transform: translate3d(-50%,0,0); display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 5px; border-radius: 999px; background: rgba(21,24,23,.82); box-shadow: 0 14px 34px rgba(24,23,22,.20), inset 0 1px 0 rgba(255,255,255,.16); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); will-change: transform, opacity; transition: transform .18s ease, opacity .18s ease; }
.tdi-nav.is-hidden { transform: translate3d(-50%, calc(100% + 32px + env(safe-area-inset-bottom)), 0); opacity: 0; pointer-events: none; }
.tdi-nav-indicator { position: absolute; top: 5px; left: calc(5px + (((100% - 10px) / 4) * var(--tdi-nav-active)) + ((((100% - 10px) / 4) - 42px) / 2)); width: 42px; height: 42px; border-radius: 50%; background: rgba(155,162,162,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); transition: left .24s cubic-bezier(.22,1,.36,1), background-color .18s ease; pointer-events: none; }
.tdi-nav button { position: relative; z-index: 1; display: grid; place-items: center; justify-self: center; width: 42px; height: 42px; min-height: 0; overflow: hidden; border: 0; border-radius: 50%; color: rgba(255,255,255,.74); background: transparent; font-size: 11px; font-weight: 850; transition: color .18s ease, transform .18s ease; }
.tdi-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tdi-nav button[aria-label="Home"] svg { transform: translate(1px, -1px); }
.tdi-nav .active { color: #fff; }
.tdi-toast { position: fixed; right: max(24px, calc((100vw - 430px) / 2 + 24px)); bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px)); left: max(24px, calc((100vw - 430px) / 2 + 24px)); z-index: 150; padding: 13px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; color: #fff; background: rgba(21,24,23,.90); box-shadow: 0 18px 38px rgba(24,23,22,.26), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-size: 13px; font-weight: 900; text-align: center; }
.tdi-toast.is-error { background: rgba(125,32,43,.94); }

.tdi-calendar-hero { display: grid; gap: 13px; overflow: hidden; color: #fff; background: linear-gradient(145deg, rgba(125,32,43,.95), rgba(35,26,22,.96)); box-shadow: 0 24px 58px rgba(80,47,35,.18), inset 0 1px 0 rgba(255,255,255,.18); }
.tdi-calendar-hero-image { margin: -16px -16px 0; overflow: hidden; border: 0; border-radius: 30px 30px 20px 20px; background: rgba(255,255,255,.10); }
.tdi-calendar-hero-image img { display: block; width: 100%; max-height: 170px; object-fit: cover; }
.tdi-calendar-hero-main { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; align-items: stretch; }
.tdi-calendar-hero-main > span { display: grid; align-content: center; min-width: 0; min-height: 84px; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.10); }
.tdi-calendar-hero-main > span em { display: block; margin-bottom: 5px; color: rgba(255,255,255,.56); font-style: normal; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.tdi-calendar-hero-main > span strong { display: block; min-width: 0; color: #fff; font-size: 13px; line-height: 1.15; font-weight: 950; white-space: nowrap; }
.tdi-calendar-hero h2 { margin: 8px 0 0; font-size: 32px; line-height: .98; }
.tdi-hero-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.tdi-hero-meta span { min-width: 0; padding: 9px 10px; border-radius: 16px; background: rgba(255,255,255,.10); overflow-wrap: anywhere; font-size: 12px; font-weight: 900; }
.tdi-hero-meta em { display: block; margin-bottom: 3px; color: rgba(255,255,255,.56); font-style: normal; font-size: 10px; text-transform: uppercase; }
.tdi-hero-flags { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.tdi-hero-flags span { display: grid; justify-items: start; width: 100%; padding: 10px 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 16px; background: rgba(255,255,255,.13); text-align: left; font-size: 12px; font-weight: 900; }
.tdi-hero-flags em { display: block; margin-bottom: 4px; color: rgba(255,255,255,.58); font-style: normal; font-size: 10px; text-transform: uppercase; }
.tdi-hero-flags strong { display: block; color: #fff; font-size: 14px; line-height: 1.25; }
.tdi-hero-flags small { display: block; margin-top: 4px; color: rgba(255,255,255,.70); font-size: 11px; line-height: 1.35; font-weight: 650; }
.tdi-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
.tdi-flags span, .tdi-passcode { display: inline-flex; border-radius: 999px; padding: 7px 10px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 900; }
.tdi-filter-row { display: flex; gap: 10px; margin: 18px 16px 14px; overflow-x: auto; scrollbar-width: none; }
.tdi-filter-row::-webkit-scrollbar { display: none; }
.tdi-filter-row button { flex: 0 0 auto; min-height: 40px; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; padding: 0 13px; color: rgba(24,23,22,.68); background: rgba(255,255,255,.50); box-shadow: 0 12px 26px rgba(62,45,31,.08); font-size: 12px; font-weight: 850; }
.tdi-filter-row .active { color: #fff; border-color: rgba(255,255,255,.30); background: linear-gradient(135deg, var(--tdi-red), var(--tdi-red-2)); box-shadow: 0 14px 26px rgba(125,32,43,.18), inset 0 1px 0 rgba(255,255,255,.18); }
.tdi-filter-help { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 16px 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.58); border-radius: 18px; color: rgba(24,23,22,.62); background: rgba(255,255,255,.46); box-shadow: 0 12px 26px rgba(62,45,31,.07), inset 0 1px 0 rgba(255,255,255,.72); font-size: 11px; line-height: 1.35; font-weight: 850; }
.tdi-filter-help span { min-width: 0; }
.tdi-filter-help strong { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; color: #2d4737; background: rgba(223,248,235,.72); font-size: 11px; }
.tdi-calendar-list-head span { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 999px; color: #2d4737; background: rgba(223,248,235,.72); font-size: 12px; font-weight: 950; }
.tdi-calendar-filter-card { display: grid; gap: 10px; margin-top: 8px; }
.tdi-calendar-panel { border-color: rgba(255,255,255,.62); background: linear-gradient(145deg, rgba(255,253,250,.88), rgba(250,244,233,.70)); box-shadow: 0 18px 42px rgba(70,49,33,.12), inset 0 1px 0 rgba(255,255,255,.70); }
.tdi-calendar-tools { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.58); border-radius: 18px; background: rgba(255,255,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.70); }
.tdi-calendar-search { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 0 11px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; background: rgba(255,253,250,.76); box-shadow: 0 10px 22px rgba(62,45,31,.06), inset 0 1px 0 rgba(255,255,255,.82); }
.tdi-calendar-search svg { width: 17px; height: 17px; fill: none; stroke: rgba(125,32,43,.72); stroke-width: 2.2; stroke-linecap: round; }
.tdi-calendar-search input { width: 100%; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--tdi-ink); font-size: 13px; font-weight: 850; }
.tdi-calendar-search input::placeholder { color: rgba(24,23,22,.42); }
.tdi-calendar-search button { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; color: rgba(24,23,22,.54); background: rgba(255,255,255,.72); font-size: 18px; line-height: 1; }
.tdi-calendar-suggestions { display: flex; flex-wrap: wrap; gap: 7px; overflow: visible; padding-bottom: 0; scrollbar-width: none; }
.tdi-calendar-suggestions::-webkit-scrollbar { display: none; }
.tdi-calendar-suggestions button { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid rgba(255,255,255,.62); border-radius: 999px; color: rgba(24,23,22,.64); background: rgba(255,255,255,.58); font-size: 11px; font-weight: 900; box-shadow: 0 8px 18px rgba(62,45,31,.06); }
.tdi-calendar-suggestions button.active { color: #fff; border-color: rgba(255,255,255,.28); background: linear-gradient(135deg, var(--tdi-red), var(--tdi-red-2)); }
.tdi-calendar-suggestions span { margin-left: 3px; color: inherit; opacity: .66; font-size: 10px; }
.tdi-calendar-tools > small { color: rgba(24,23,22,.52); font-size: 10px; font-weight: 850; }
.tdi-combination-list .tdi-day-note small { margin-top: 2px; }
.tdi-next-milestone { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 20px; background: linear-gradient(135deg, rgba(125,32,43,.92), rgba(35,26,22,.90)); color: #fff; text-align: left; }
.tdi-next-milestone img, .tdi-milestone-row img { width: 72px; height: 58px; object-fit: cover; border-radius: 15px; background: rgba(255,255,255,.16); }
.tdi-next-milestone small, .tdi-next-milestone span { display: block; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 650; }
.tdi-next-milestone strong { display: block; margin: 2px 0; font-size: 15px; line-height: 1.18; }
.tdi-next-milestone p { margin: 5px 0 0; color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.35; font-weight: 620; }
.tdi-milestone-card { overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.64); }
.tdi-milestone-row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px; border: 1px solid rgba(255,255,255,.58); border-radius: 17px; background: transparent; text-align: left; }
.tdi-milestone-card.is-open .tdi-milestone-row { border-bottom-color: rgba(112,84,55,.10); border-radius: 17px 17px 0 0; }
.tdi-milestone-row img { width: 54px; height: 46px; border-radius: 13px; }
.tdi-milestone-row span { min-width: 0; }
.tdi-milestone-row strong, .tdi-milestone-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdi-milestone-row strong { color: var(--tdi-ink); font-size: 13px; }
.tdi-milestone-row small { color: var(--tdi-muted); font-size: 11px; font-weight: 560; }
.tdi-milestone-row em { display: block; min-width: 0; margin-top: 3px; overflow: hidden; color: rgba(24,23,22,.54); text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 10px; line-height: 1.25; font-weight: 650; }
.tdi-milestone-row b { color: rgba(24,23,22,.42); font-size: 18px; }
.tdi-milestone-detail { display: grid; gap: 6px; padding: 10px 12px 12px 72px; border: 1px solid rgba(255,255,255,.58); border-top: 0; border-radius: 0 0 17px 17px; background: rgba(255,253,250,.42); }
.tdi-milestone-detail strong { color: var(--tdi-ink); font-size: 13px; font-weight: 950; }
.tdi-milestone-detail p { margin: 0; color: rgba(24,23,22,.62); font-size: 11px; line-height: 1.35; font-weight: 650; }
.tdi-milestone-detail span { color: rgba(24,23,22,.50); font-size: 10px; font-weight: 850; }
.tdi-pagination { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 7px; margin-top: 2px; overflow: visible; padding: 0 1px 6px; scrollbar-width: none; }
.tdi-pagination::-webkit-scrollbar { display: none; }
.tdi-pagination button { flex: 0 0 auto; min-width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.62); border-radius: 999px; color: rgba(24,23,22,.66); background: rgba(255,255,255,.56); font-size: 12px; font-weight: 950; box-shadow: 0 8px 18px rgba(62,45,31,.07); }
.tdi-pagination button.active { color: #fff; border-color: rgba(255,255,255,.30); background: linear-gradient(135deg, var(--tdi-red), var(--tdi-red-2)); box-shadow: 0 12px 22px rgba(125,32,43,.16), inset 0 1px 0 rgba(255,255,255,.18); }
.tdi-pagination span { flex: 0 0 auto; display: grid; width: 18px; height: 34px; place-items: center; color: rgba(24,23,22,.48); font-size: 14px; font-weight: 950; }
.tdi-variant-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.tdi-variant-row::-webkit-scrollbar { display: none; }
.tdi-variant-row button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; border: 1px solid rgba(255,255,255,.62); border-radius: 999px; padding: 0 12px; color: rgba(24,23,22,.66); background: rgba(255,255,255,.54); box-shadow: 0 10px 22px rgba(62,45,31,.07); font-size: 12px; font-weight: 950; }
.tdi-variant-row button strong { display: inline-grid; min-width: 22px; height: 22px; place-items: center; border-radius: 999px; color: #2d4737; background: rgba(223,248,235,.74); font-size: 10px; }
.tdi-variant-row button.active { color: var(--tdi-ink); border-color: rgba(255,255,255,.74); background: rgba(232,226,216,.92); }
.tdi-variant-row button.active strong { color: #2d4737; background: rgba(223,248,235,.78); }
.tdi-list-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.tdi-list-controls .tdi-load-more:only-child { grid-column: 1 / -1; }
.tdi-load-more { width: 100%; min-height: 42px; margin-top: 10px; border: 1px solid rgba(255,255,255,.62); border-radius: 16px; color: rgba(24,23,22,.72); background: rgba(255,255,255,.56); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); font-size: 13px; font-weight: 950; }
.tdi-collapse-list { color: #5d4214; background: rgba(246,231,183,.56); }
.tdi-month-head { margin-bottom: 12px; }
.tdi-month-head button, .tdi-chip-btn { border: 0; }
.tdi-month-card.is-focus, .tdi-day-detail-card.is-focus { border-color: rgba(217,173,87,.42); background: rgba(255,253,250,.84); }
.tdi-month-head button { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.68); font-size: 20px; font-weight: 950; }
.tdi-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; }
.tdi-month-grid span, .tdi-month-grid button { min-height: 38px; border: 0; border-radius: 13px; background: transparent; font-size: 13px; font-weight: 900; }
.tdi-month-grid .weekday { display: grid; place-items: center; min-height: 24px; color: rgba(24,23,22,.46); font-size: 11px; }
.tdi-month-grid button { position: relative; background: rgba(255,255,255,.42); }
.tdi-month-grid button:not(.active) { color: var(--tdi-ink); }
.tdi-month-grid button.active { color: #fff; background: var(--tdi-dark); }
.tdi-month-grid button.is-today:not(.active) { box-shadow: inset 0 0 0 2px rgba(217,173,87,.72); background: rgba(255,255,255,.62); }
.tdi-month-grid button.has-event::after { content: ""; position: absolute; right: 8px; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--tdi-gold); }
.tdi-month-grid button.has-flag::after { content: ""; position: absolute; right: 8px; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--tdi-red); box-shadow: 0 0 0 2px rgba(255,255,255,.46); }
.tdi-calendar-legend { display: flex; gap: 12px; margin-top: 12px; color: rgba(24,23,22,.54); font-size: 11px; font-weight: 700; }
.tdi-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tdi-calendar-legend i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--tdi-gold); }
.tdi-calendar-legend span + span i { background: var(--tdi-red); }
.tdi-calendar-legend span:nth-child(3) i { background: transparent; box-shadow: inset 0 0 0 2px rgba(217,173,87,.72); }
.tdi-home-month { margin-top: -2px; padding-top: 12px; }
.tdi-day-note { display: grid; gap: 5px; padding: 12px; border: 1px solid rgba(255,255,255,.54); border-radius: 18px; background: rgba(255,255,255,.44); }
.tdi-compact-list .tdi-day-note { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 14px; }
.tdi-compact-list .tdi-day-note strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdi-compact-list .tdi-day-note span { white-space: nowrap; }
.tdi-day-note strong { font-size: 14px; line-height: 1.3; }
.tdi-day-note span { color: var(--tdi-muted); font-size: 12px; font-weight: 850; }
.tdi-day-note small { color: rgba(24,23,22,.54); font-size: 12px; line-height: 1.35; font-weight: 760; }
.tdi-event-note { border-left: 4px solid var(--tdi-red); }
.tdi-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 12px 0 16px; }
.tdi-data-grid p { min-width: 0; margin: 0; padding: 10px 11px; border: 1px solid rgba(255,255,255,.54); border-radius: 16px; background: rgba(255,255,255,.42); }
.tdi-data-grid span, .tdi-data-block > span { display: block; color: rgba(24,23,22,.52); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.tdi-data-grid strong { display: block; min-width: 0; margin-top: 4px; overflow-wrap: anywhere; color: var(--tdi-ink); font-size: 12px; line-height: 1.3; font-weight: 950; }
.tdi-data-block { margin: 0 0 16px; }
.tdi-calendar-info-list { display: grid; gap: 0; margin-top: 12px; overflow: hidden; border: 1px solid rgba(112,84,55,.12); border-radius: 22px; background: rgba(255,253,250,.70); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); }
.tdi-calendar-info-item { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; align-items: center; min-height: 62px; padding: 11px 13px; border: 0; border-bottom: 1px solid rgba(112,84,55,.10); border-radius: 0; background: transparent; box-shadow: none; }
.tdi-calendar-info-item:last-child { border-bottom: 0; }
.tdi-calendar-info-item:nth-child(odd) { background: rgba(255,255,255,.26); }
.tdi-calendar-info-item i { display: grid; width: 34px; height: 34px; place-items: center; justify-self: center; border-radius: 50%; color: #7d202b; background: linear-gradient(145deg, rgba(246,231,183,.92), rgba(255,255,255,.60)); box-shadow: inset 0 1px 0 rgba(255,255,255,.80), 0 8px 18px rgba(96,69,38,.10); font-style: normal; line-height: 1; }
.tdi-calendar-info-item i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tdi-calendar-info-item span { min-width: 0; align-self: center; padding-left: 1px; }
.tdi-calendar-info-item strong, .tdi-calendar-info-item small { display: block; min-width: 0; }
.tdi-calendar-info-item strong { color: var(--tdi-ink); font-size: 14px; line-height: 1.2; font-weight: 920; }
.tdi-calendar-info-item small { margin-top: 3px; color: rgba(24,23,22,.60); font-size: 12px; line-height: 1.36; font-weight: 590; }
.tdi-calendar-groups { display: grid; gap: 16px; }
.tdi-calendar-groups h3 { margin: 0 0 8px; font-size: 14px; font-weight: 950; }
.tdi-detail-tabs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.tdi-detail-tabs::-webkit-scrollbar { display: none; }
.tdi-detail-tabs button { flex: 0 0 auto; min-height: 39px; border: 1px solid rgba(255,255,255,.62); border-radius: 999px; padding: 0 13px; color: rgba(24,23,22,.66); background: rgba(255,255,255,.54); box-shadow: 0 10px 22px rgba(62,45,31,.07); font-size: 13px; font-weight: 950; }
.tdi-detail-tabs button.active { color: #fff; border-color: rgba(255,255,255,.30); background: linear-gradient(135deg, var(--tdi-red), var(--tdi-red-2)); box-shadow: 0 14px 26px rgba(125,32,43,.16), inset 0 1px 0 rgba(255,255,255,.18); }
.tdi-calendar-info-list.is-tabbed .tdi-calendar-info-item { grid-template-columns: 42px minmax(0,1fr); min-height: 64px; padding: 12px 14px; }
.tdi-calendar-info-list.is-tabbed .tdi-calendar-info-item span { padding-left: 0; }
.tdi-calendar-info-item i.tone-gold { color: #7d4f07; background: linear-gradient(145deg, rgba(246,231,183,.96), rgba(255,252,235,.72)); }
.tdi-calendar-info-item i.tone-red { color: #8d1f2c; background: linear-gradient(145deg, rgba(255,222,226,.92), rgba(255,249,249,.72)); }
.tdi-calendar-info-item i.tone-green { color: #0f7650; background: linear-gradient(145deg, rgba(223,248,235,.96), rgba(248,255,251,.72)); }
.tdi-calendar-info-item i.tone-blue { color: #145d9c; background: linear-gradient(145deg, rgba(222,239,255,.96), rgba(249,252,255,.72)); }
.tdi-calendar-info-item i.tone-violet { color: #65409a; background: linear-gradient(145deg, rgba(237,229,255,.96), rgba(255,250,255,.72)); }

.tdi-zoom h2 { margin: 0 0 4px; font-size: 16px; }
.tdi-zoom-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tdi-zoom-head > span { flex: 0 0 auto; min-height: 27px; padding: 6px 9px; border-radius: 999px; color: #24503f; background: rgba(223,248,235,.72); font-size: 11px; font-weight: 850; }
.tdi-zoom-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.tdi-zoom-meta p { display: grid; gap: 3px; margin: 0; padding: 9px 10px; border-radius: 13px; background: rgba(255,255,255,.42); }
.tdi-zoom-meta span { color: rgba(24,23,22,.52); font-size: 10px; font-weight: 820; text-transform: uppercase; }
.tdi-zoom-meta strong { min-width: 0; overflow-wrap: anywhere; color: var(--tdi-ink); font-size: 12px; }
.tdi-zoom-locked { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 28px; background: linear-gradient(145deg, rgba(255,253,250,.84), rgba(246,231,183,.34)); }
.tdi-lock-mark { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; background: rgba(255,255,255,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.tdi-zoom-locked h2 { margin: 0; font-size: 22px; line-height: 1.12; }
.tdi-zoom-locked p { margin: 0; }
.tdi-zoom-locked .tdi-primary { width: fit-content; min-height: 44px; padding: 0 18px; border-radius: 999px; }
.tdi-zoom-times { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.tdi-zoom-times p { display: grid; grid-template-columns: minmax(68px,1fr) auto; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 13px; color: var(--tdi-muted); background: rgba(255,255,255,.42); font-size: 12px; font-weight: 600; }
.tdi-zoom-times span { min-width: 0; color: rgba(24,23,22,.54); white-space: nowrap; }
.tdi-zoom-times strong { color: var(--tdi-ink); text-align: right; white-space: nowrap; font-weight: 950; }
.tdi-zoom a, .tdi-zoom-join { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 0; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #2d8cff, #0b5cff); text-decoration: none; font-size: 13px; font-weight: 950; box-shadow: 0 12px 22px rgba(11,92,255,.20); }
.tdi-zoom-join.is-disabled, .tdi-zoom-join:disabled { color: rgba(24,23,22,.46); background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.70); cursor: not-allowed; }
.tdi-zoom footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.tdi-passcode { color: var(--tdi-ink); background: var(--tdi-gold-soft); }
.accent { color: var(--tdi-red); }
.tdi-install-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
.tdi-install-card h2 { margin: 0 0 5px; font-size: 18px; }
.tdi-install-card p { margin: 0; }
.tdi-install-card .tdi-secondary { min-height: 42px; padding: 0 14px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.tdi-install-steps { display: grid; gap: 9px; margin-top: 12px; }
.tdi-install-steps article { display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(255,255,255,.56); border-radius: 17px; background: rgba(255,255,255,.48); }
.tdi-install-steps strong { font-size: 13px; }
.tdi-install-steps span { color: var(--tdi-muted); font-size: 12px; line-height: 1.38; font-weight: 560; }

.tdi-form { display: grid; gap: 12px; }
.tdi-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.tdi-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.tdi-form input, .tdi-form select { min-height: 50px; width: 100%; border: 1px solid rgba(255,255,255,.72); border-radius: 17px; padding: 0 13px; background: rgba(255,255,255,.70); box-shadow: inset 0 1px 0 rgba(255,255,255,.76); color: var(--tdi-ink); font-size: 16px; font-weight: 760; outline: 0; }
.tdi-form input:focus, .tdi-form select:focus { border-color: rgba(169,44,56,.44); box-shadow: 0 0 0 4px rgba(169,44,56,.10), inset 0 1px 0 rgba(255,255,255,.76); }
.tdi-primary, .tdi-danger, .tdi-secondary { min-height: 48px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--tdi-red), var(--tdi-red-2)); font-weight: 950; }
.tdi-danger { background: #2f2522; }
.tdi-secondary { color: var(--tdi-ink); background: rgba(255,255,255,.62); }
.tdi-web-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.tdi-secondary:disabled { color: rgba(24,23,22,.42); background: rgba(255,255,255,.38); cursor: not-allowed; }
.tdi-auth-notice { margin: 0; padding: 11px 12px; border: 1px solid rgba(217,173,87,.34); border-radius: 15px; color: rgba(69,49,21,.88); background: rgba(246,231,183,.46); font-size: 12px; line-height: 1.35; font-weight: 860; }
.tdi-auth-notice.is-error { border-color: rgba(169,44,56,.24); color: var(--tdi-red); background: rgba(255,241,241,.88); }
.tdi-link { border: 0; color: var(--tdi-red); background: transparent; font-weight: 900; }
.tdi-toggle { display: flex !important; align-items: center; justify-content: space-between; }
.tdi-toggle input { width: auto; min-height: 0; }
.tdi-top + .tdi-card .tdi-form { gap: 10px; }
.tdi-top + .tdi-card .tdi-form label { gap: 5px; font-size: 12px; }
.tdi-top + .tdi-card .tdi-form input, .tdi-top + .tdi-card .tdi-form select { min-height: 42px; border-radius: 14px; font-size: 13px; }
.tdi-top + .tdi-card .tdi-primary, .tdi-top + .tdi-card .tdi-danger, .tdi-top + .tdi-card .tdi-secondary { min-height: 42px; border-radius: 14px; font-size: 13px; }
.tdi-top + .tdi-card .tdi-muted, .tdi-top + .tdi-card .tdi-link { font-size: 12px; }
.tdi-top ~ .tdi-card h2 { font-size: 20px; line-height: 1.12; }
.tdi-top ~ .tdi-card .tdi-muted { font-size: 12px; line-height: 1.34; }
.tdi-top ~ .tdi-card .tdi-form { gap: 10px; }
.tdi-top ~ .tdi-card .tdi-form label { gap: 5px; font-size: 12px; }
.tdi-top ~ .tdi-card .tdi-form input, .tdi-top ~ .tdi-card .tdi-form select { min-height: 44px; border: 1px solid rgba(118,111,104,.18); border-radius: 15px; background: rgba(255,255,255,.64); box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 0 0 1px rgba(255,255,255,.40); font-size: 13px; }
.tdi-top ~ .tdi-card .tdi-form input:focus, .tdi-top ~ .tdi-card .tdi-form select:focus { border-color: rgba(169,44,56,.32); box-shadow: 0 0 0 3px rgba(169,44,56,.08), inset 0 1px 0 rgba(255,255,255,.72); }
.tdi-top ~ .tdi-card .tdi-primary, .tdi-top ~ .tdi-card .tdi-danger, .tdi-top ~ .tdi-card .tdi-secondary { min-height: 44px; border-radius: 15px; font-size: 13px; }
.tdi-top ~ .tdi-card .tdi-link { font-size: 12px; }
.tdi-preset-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.tdi-preset-grid button { min-height: 40px; border: 1px solid rgba(255,255,255,.62); border-radius: 14px; color: var(--tdi-red); background: rgba(255,255,255,.54); font-size: 12px; font-weight: 950; }
.tdi-sheet-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; padding: 4px 0 max(2px, env(safe-area-inset-bottom)); background: transparent; }
.tdi-sheet-actions.one { grid-template-columns: 1fr; }
.tdi-zone-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.tdi-zone-grid p { display: grid; gap: 2px; margin: 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.56); border-radius: 13px; background: rgba(255,255,255,.42); }
.tdi-zone-grid span { color: rgba(24,23,22,.54); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.tdi-zone-grid strong { color: var(--tdi-ink); font-size: 16px; font-weight: 950; }
.tdi-history-list { display: grid; gap: 8px; margin-top: 12px; padding-bottom: 18px; }
.tdi-history-list > .tdi-muted { min-height: 132px; display: grid; align-items: center; justify-items: center; text-align: center; padding: 24px 14px; border: 1px dashed rgba(35,31,29,.18); border-radius: 20px; background: rgba(255,255,255,.42); }
.tdi-history-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.58); border-radius: 17px; background: rgba(255,255,255,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.tdi-history-list strong, .tdi-history-list b { display: block; color: var(--tdi-ink); font-size: 14px; font-weight: 950; }
.tdi-history-list span, .tdi-history-list small { display: block; color: var(--tdi-muted); font-size: 11px; font-weight: 560; }
.tdi-history-list b { color: #16865a; text-align: right; }
.tdi-history-list small { text-align: right; }
.tdi-confirm-count { display: grid; gap: 5px; margin: 14px 0; padding: 14px; border: 1px solid rgba(255,255,255,.58); border-radius: 20px; background: rgba(255,255,255,.54); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.tdi-confirm-count span { color: var(--tdi-muted); font-size: 12px; font-weight: 850; }
.tdi-confirm-count strong { color: #16865a; font-size: 30px; line-height: 1; font-weight: 950; }
.tdi-settings-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #fff; background: linear-gradient(135deg, rgba(125,32,43,.94), rgba(35,26,22,.92)); }
.tdi-settings-hero h2, .tdi-settings-hero p { margin: 0; }
.tdi-settings-hero h2 { font-size: 22px; line-height: 1.12; }
.tdi-settings-hero p { margin-top: 4px; color: rgba(255,255,255,.68); font-size: 12px; font-weight: 560; }
.tdi-settings-hero > span { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: var(--tdi-dark); background: var(--tdi-gold-soft); font-size: 11px; font-weight: 900; }
.tdi-settings-hero-guest { align-items: flex-start; }
.tdi-settings-kicker { display: inline-flex; margin-bottom: 8px; padding: 5px 9px; border-radius: 999px; color: var(--tdi-dark); background: var(--tdi-gold-soft); font-size: 10px; font-weight: 950; }
.tdi-auth-card { margin-top: 10px; border-radius: 24px; background: rgba(255,253,250,.86); }
.tdi-settings-card { display: grid; gap: 10px; }
.tdi-settings-block h2 { margin: 0; font-size: 18px; line-height: 1.15; }
.tdi-profile-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid rgba(118,111,104,.14); border-radius: 18px; background: rgba(255,255,255,.50); }
.tdi-profile-summary strong, .tdi-profile-summary span { display: block; }
.tdi-profile-summary strong { font-size: 15px; font-weight: 950; }
.tdi-profile-summary span { margin-top: 2px; color: var(--tdi-muted); font-size: 11px; font-weight: 650; }
.tdi-profile-summary b { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: #24503f; background: rgba(223,248,235,.82); font-size: 11px; }
.tdi-profile-editor { gap: 8px; }
.tdi-profile-editor:not([open]) .tdi-form { display: none; }
.tdi-profile-editor .tdi-form { margin-top: 10px; }
.tdi-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 10px 12px; border: 1px solid rgba(118,111,104,.14); border-radius: 16px; color: var(--tdi-ink); background: rgba(255,255,255,.48); text-align: left; text-decoration: none; }
.tdi-setting-row span { min-width: 0; }
.tdi-setting-row strong, .tdi-setting-row small { display: block; min-width: 0; }
.tdi-setting-row strong { font-size: 13px; line-height: 1.2; }
.tdi-setting-row small { margin-top: 3px; color: var(--tdi-muted); font-size: 11px; line-height: 1.3; font-weight: 560; }
.tdi-setting-row b { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: rgba(24,23,22,.54); background: rgba(255,255,255,.52); font-size: 11px; }
.tdi-setting-row b.is-on { color: #0f7b55; background: rgba(223,248,235,.80); }
.tdi-setting-row.is-static { cursor: default; }
.tdi-segmented { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; padding: 5px; border-radius: 17px; background: rgba(255,255,255,.42); }
.tdi-segmented button { min-height: 38px; border: 0; border-radius: 13px; color: rgba(24,23,22,.62); background: transparent; font-size: 12px; font-weight: 820; }
.tdi-segmented .active { color: #fff; background: var(--tdi-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.tdi-logout-row { justify-content: center; min-height: 44px; border-radius: 15px; background: rgba(255,241,241,.72); text-align: center; }
.tdi-settings-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.tdi-settings-mini-grid article { display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(118,111,104,.14); border-radius: 18px; background: rgba(255,255,255,.44); }
.tdi-settings-mini-grid strong { font-size: 13px; font-weight: 950; }
.tdi-settings-mini-grid span { color: var(--tdi-muted); font-size: 11px; line-height: 1.35; font-weight: 560; }
.tdi-settings-mini-grid .tdi-secondary { min-height: 36px; border-radius: 13px; font-size: 12px; }
.tdi-settings-more { display: grid; gap: 10px; }
.tdi-settings-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 14px; border: 1px solid rgba(118,111,104,.14); border-radius: 15px; background: rgba(255,255,255,.52); color: var(--tdi-ink); font-size: 13px; font-weight: 900; cursor: pointer; }
.tdi-settings-more summary::-webkit-details-marker { display: none; }
.tdi-settings-more summary::after { content: "⌄"; color: rgba(24,23,22,.48); font-size: 16px; line-height: 1; }
.tdi-settings-more[open] summary::after { content: "⌃"; }

.tdi-auth { position: fixed; inset: 0; z-index: 50; display: grid; align-content: end; justify-items: center; padding: 20px; color: #fff; background: linear-gradient(180deg, var(--tdi-dark) 0 42%, var(--tdi-soft) 42% 100%); }
.tdi-auth .tdi-card { width: min(100%, 430px); margin: 0; color: var(--tdi-ink); }
.tdi-auth-head { margin: 0 auto 32px; max-width: 300px; color: var(--tdi-ink); text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.32); }
.tdi-auth-head h1 { margin: 0; font-size: 30px; }
.tdi-auth-head p { color: rgba(24,23,22,.62); font-weight: 850; }
.tdi-error { margin: 0; padding: 12px; border-radius: 16px; color: var(--tdi-red); background: #fff1f1; font-size: 13px; font-weight: 800; }

.tdi-scrim { position: fixed; inset: 0; z-index: 120; border: 0; background: rgba(0,0,0,.35); }
.tdi-sheet { position: fixed; right: max(8px, calc((100vw - 430px) / 2 + 8px)); bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, calc((100vw - 430px) / 2 + 8px)); z-index: 130; display: flex; flex-direction: column; max-height: calc(100dvh - 72px); overflow: hidden; padding: 10px 18px max(14px, env(safe-area-inset-bottom)); border-radius: 30px; }
.tdi-sheet.is-practice-history { min-height: min(520px, calc(100dvh - 72px)); max-height: calc(100dvh - 72px); }
.bottom-sheet__content { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 1px max(8px, env(safe-area-inset-bottom)); }
.tdi-handle { width: 54px; height: 5px; margin: 0 auto 14px; border-radius: 999px; background: rgba(0,0,0,.18); }
.tdi-close { position: absolute; top: 14px; right: 16px; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: rgba(24,23,22,.62); background: rgba(255,255,255,.58); font-size: 22px; line-height: 1; }
.tdi-sheet h2 { margin: 2px 0 8px; font-size: 22px; }
.tdi-sheet.is-confirm-count { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.tdi-sheet.is-confirm-count .bottom-sheet__content { padding-bottom: 0; }

@media (min-width: 768px) {
	.tdi-pwa-app { margin-top: 0; padding: 28px; }
	.tdi-pwa-frame { min-height: calc(100svh - 56px); border-radius: 38px; box-shadow: 0 26px 90px rgba(0,0,0,.30); }
	.tdi-header { margin-top: 0; padding-top: 18px; }
	.tdi-top { margin-top: 0; padding-top: 18px; }
}

@media (min-width: 768px) and (max-width: 1180px) {
	body.tdi-pwa-body { background: #171918; }
	.tdi-pwa-app {
		min-height: 100dvh;
		margin-top: 0;
		padding: clamp(18px, 3vw, 34px);
		background:
			radial-gradient(circle at 14% 4%, rgba(217,173,87,.22), transparent 20rem),
			radial-gradient(circle at 90% 18%, rgba(169,44,56,.13), transparent 18rem),
			linear-gradient(145deg, #f8f3ec, #efe6d9);
	}
	.tdi-pwa-frame {
		width: min(100%, 980px);
		min-height: calc(100dvh - clamp(36px, 6vw, 68px));
		padding-bottom: 124px;
		border-radius: 36px;
		overflow: hidden;
		box-shadow: 0 30px 96px rgba(0,0,0,.26);
	}
	.tdi-card {
		margin: 18px 28px 0;
		padding: 22px;
		border-radius: 28px;
	}
	.tdi-header {
		padding: calc(env(safe-area-inset-top) + 26px) 36px 92px;
		border-radius: 0 0 42px 42px;
	}
	.tdi-header-row {
		grid-template-columns: minmax(0,1fr) 230px;
		align-items: center;
	}
	.tdi-logo { width: 66px; height: 66px; margin-bottom: 14px; }
	.tdi-header p { font-size: 17px; }
	.tdi-header h1 { max-width: 520px; font-size: clamp(40px, 5vw, 54px); }
	.tdi-header-side { width: 230px; gap: 22px; }
	.tdi-icon { width: 54px; height: 54px; }
	.tdi-tibetan-chip {
		width: 210px;
		padding: 14px 16px;
		border-radius: 22px;
	}
	.tdi-tibetan-chip small { font-size: 13px; }
	.tdi-tibetan-chip strong { font-size: 18px; }
	.tdi-sync-banner,
	.tdi-event {
		margin-inline: 28px;
		margin-top: -64px;
	}
	.tdi-sync-banner + .tdi-event { margin-top: 18px; }
	.tdi-event h2 { font-size: 24px; }
	.tdi-event-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
	.tdi-event-row {
		grid-template-columns: 122px minmax(0,1fr);
		min-height: 66px;
		border-radius: 20px;
	}
	.tdi-event-time { min-height: 44px; font-size: 11px; }
	.tdi-week-wrap { margin: 18px 28px; }
	.tdi-week { gap: 10px; }
	.tdi-week button { min-height: 70px; border-radius: 22px; }
	.tdi-week span { font-size: 12px; }
	.tdi-week strong { font-size: 22px; }
	.tdi-practice-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
	.tdi-practice {
		align-content: start;
		min-height: 240px;
		padding: 16px;
		border-radius: 24px;
	}
	.tdi-practice h3 { font-size: 18px; }
	.tdi-practice-meta strong { font-size: 17px; }
	.tdi-practice-meta span:nth-child(2) strong { font-size: 19px; }
	.tdi-count-entry { grid-template-columns: minmax(0,1fr) 88px; }
	.tdi-add, .tdi-mini, .tdi-quick-add { min-height: 44px; }

	.tdi-top {
		grid-column: 1 / -1;
		padding: 28px 34px 2px;
	}
	.tdi-top h1 { font-size: 42px; }
	.tdi-top ~ .tdi-card h2 { font-size: 23px; }

	.tdi-calendar-hero {
		grid-template-columns: minmax(280px,.95fr) minmax(0,1.05fr);
		align-items: stretch;
		gap: 18px;
		min-height: 372px;
	}
	.tdi-calendar-hero-image {
		height: 100%;
		min-height: 328px;
		margin: -22px 0 -22px -22px;
		border-radius: 28px 18px 18px 28px;
	}
	.tdi-calendar-hero-image img {
		height: 100%;
		max-height: none;
	}
	.tdi-calendar-hero h2 { font-size: 42px; }
	.tdi-calendar-hero-main {
		grid-template-columns: repeat(2, minmax(0,1fr));
		align-self: center;
	}
	.tdi-calendar-hero-main > span {
		min-height: 92px;
		border-radius: 22px;
	}
	.tdi-calendar-hero-main > span strong { font-size: 16px; }
	.tdi-hero-meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.tdi-variant-row,
	.tdi-detail-tabs,
	.tdi-pagination,
	.tdi-calendar-suggestions { justify-content: center; }
	.tdi-calendar-panel { padding: 24px; }
	.tdi-month-card {
		max-width: 720px;
		margin-inline: auto;
	}
	.tdi-month-grid { gap: 9px; }
	.tdi-month-grid span,
	.tdi-month-grid button {
		min-height: 54px;
		border-radius: 17px;
		font-size: 17px;
	}
	.tdi-month-grid .weekday { min-height: 32px; font-size: 13px; }
	.tdi-calendar-info-list.is-tabbed {
		grid-template-columns: repeat(2, minmax(0,1fr));
		gap: 10px;
		overflow: visible;
		border: 0;
		background: transparent;
		box-shadow: none;
	}
	.tdi-calendar-info-list.is-tabbed .tdi-calendar-info-item {
		min-height: 82px;
		border: 1px solid rgba(112,84,55,.10);
		border-radius: 20px;
		background: rgba(255,253,250,.68);
	}
	.tdi-calendar-info-list.is-tabbed .tdi-calendar-info-item:last-child { border-bottom: 1px solid rgba(112,84,55,.10); }
	.tdi-next-milestone {
		grid-template-columns: 112px minmax(0,1fr);
		padding: 14px;
		border-radius: 24px;
	}
	.tdi-next-milestone img,
	.tdi-milestone-row img {
		width: 112px;
		height: 82px;
		border-radius: 18px;
	}
	.tdi-milestone-row {
		grid-template-columns: 86px minmax(0,1fr) auto;
		min-height: 86px;
		padding: 12px;
	}
	.tdi-milestone-row img { width: 86px; height: 66px; }
	.tdi-milestone-detail { padding-left: 112px; }
	.tdi-combination-list .tdi-day-note,
	.tdi-compact-list .tdi-day-note {
		grid-template-columns: minmax(0,1fr) auto;
	}

	.tdi-list {
		grid-template-columns: repeat(2, minmax(0,1fr));
		gap: 16px;
		margin-inline: 28px;
	}
	.tdi-list > .tdi-card {
		margin: 0;
	}
	.tdi-zoom-meta,
	.tdi-zoom-times { gap: 9px; }
	.tdi-zoom h2 { font-size: 18px; }
	.tdi-zoom footer { justify-content: stretch; }
	.tdi-zoom-join { width: 100%; min-height: 48px; }

	.is-tab-settings,
	.is-tab-settings.is-guest {
		display: grid;
		grid-template-columns: repeat(2, minmax(0,1fr));
		align-content: start;
		column-gap: 0;
	}
	.is-tab-settings .tdi-top,
	.is-tab-settings .tdi-settings-hero,
	.is-tab-settings .tdi-auth-card {
		grid-column: 1 / -1;
	}
	.is-tab-settings .tdi-card { align-self: start; }
	.tdi-settings-card { gap: 12px; }
	.tdi-setting-row {
		min-height: 62px;
		padding: 12px 14px;
		border-radius: 18px;
	}
	.tdi-setting-row strong { font-size: 15px; }
	.tdi-setting-row small { font-size: 12px; }
	.tdi-settings-mini-grid article { min-height: 92px; }
	.tdi-profile-summary strong { font-size: 18px; }

	.tdi-sheet {
		right: calc((100vw - min(100vw - 56px, 760px)) / 2);
		left: calc((100vw - min(100vw - 56px, 760px)) / 2);
		max-height: min(720px, calc(100dvh - 80px));
		border-radius: 34px;
	}
	.tdi-toast {
		right: calc((100vw - min(100vw - 56px, 560px)) / 2);
		left: calc((100vw - min(100vw - 56px, 560px)) / 2);
	}
	.tdi-nav {
		width: 344px;
		bottom: max(16px, calc(env(safe-area-inset-bottom) + 14px));
		padding: 6px;
	}
	.tdi-nav-indicator {
		top: 6px;
		left: calc(6px + (((100% - 12px) / 4) * var(--tdi-nav-active)) + ((((100% - 12px) / 4) - 48px) / 2));
		width: 48px;
		height: 48px;
	}
	.tdi-nav button {
		width: 48px;
		height: 48px;
	}
	.tdi-nav svg { width: 22px; height: 22px; }
}

@media (min-width: 1000px) and (max-width: 1180px) {
	.tdi-pwa-frame { width: min(100%, 1040px); }
	.tdi-event-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.tdi-practice-list,
	.tdi-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.is-tab-settings { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.is-tab-settings .tdi-top,
	.is-tab-settings .tdi-settings-hero,
	.is-tab-settings .tdi-auth-card { grid-column: 1 / -1; }
}

@media (min-width: 768px) and (max-width: 1366px) {
	body.tdi-pwa-body { background: #d9d2c6; }
	.tdi-pwa-app {
		min-height: 100dvh;
		margin-top: 0;
		padding: max(18px, env(safe-area-inset-top)) clamp(18px, 3vw, 40px) max(18px, env(safe-area-inset-bottom));
		background:
			radial-gradient(circle at 16% 6%, rgba(217,173,87,.22), transparent 24rem),
			radial-gradient(circle at 88% 14%, rgba(169,44,56,.12), transparent 20rem),
			linear-gradient(145deg, #f7f1e8, #ece3d6);
	}
	.tdi-pwa-frame {
		width: min(100%, 1180px);
		min-height: calc(100dvh - 36px);
		padding: 0 0 172px;
		border-radius: 36px;
		overflow-x: hidden;
		box-shadow: 0 28px 90px rgba(46,37,28,.20);
		scroll-padding-bottom: 170px;
	}
	.tdi-card {
		margin: 18px clamp(24px, 3vw, 44px) 0;
		padding: 22px;
		border-radius: 28px;
	}
	.tdi-top {
		padding: 30px clamp(28px, 3.4vw, 48px) 0;
	}
	.tdi-top h1 {
		font-size: clamp(38px, 4vw, 52px);
		line-height: 1;
	}
	.tdi-header {
		padding: calc(env(safe-area-inset-top) + 28px) clamp(34px, 4vw, 56px) 78px;
		border-radius: 0 0 42px 42px;
	}
	.tdi-header-row {
		grid-template-columns: minmax(0,1fr) minmax(190px, 250px);
		align-items: center;
	}
	.tdi-logo { width: 64px; height: 64px; margin-bottom: 14px; }
	.tdi-header p { font-size: 16px; }
	.tdi-header h1 {
		max-width: 560px;
		font-size: clamp(42px, 5vw, 58px);
	}
	.tdi-header-side {
		width: auto;
		justify-items: end;
		gap: 22px;
	}
	.tdi-icon { width: 56px; height: 56px; }
	.tdi-tibetan-chip {
		width: 220px;
		padding: 14px 16px;
		border-radius: 22px;
		transform: none;
	}
	.tdi-tibetan-chip strong { font-size: 18px; }
	.tdi-sync-banner,
	.tdi-event {
		margin-inline: clamp(28px, 3.4vw, 48px);
	}
	.tdi-sync-banner { margin-top: -46px; }
	.tdi-event { margin-top: -46px; }
	.tdi-sync-banner + .tdi-event { margin-top: 18px; }
	.tdi-event {
		padding: 22px 26px;
		border-radius: 28px;
	}
	.tdi-event-list {
		grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
		gap: 12px;
		align-items: stretch;
	}
	.tdi-event-row {
		grid-template-columns: 128px minmax(0,1fr);
		min-height: 64px;
		padding: 9px 12px;
		border-radius: 19px;
	}
	.tdi-event-time {
		min-height: 42px;
		font-size: 11px;
	}
	.tdi-week-wrap {
		margin: 18px clamp(28px, 3.4vw, 48px);
	}
	.tdi-week-toggle {
		min-height: 32px;
		margin-bottom: 8px;
	}
	.tdi-week {
		gap: 10px;
	}
	.tdi-week button {
		min-height: 52px;
		border-radius: 18px;
		box-shadow: 0 10px 22px rgba(62,45,31,.07);
	}
	.tdi-week span { font-size: 11px; }
	.tdi-week strong { font-size: 19px; }
	.tdi-practice-list {
		grid-template-columns: repeat(2, minmax(0,1fr));
		gap: 14px;
	}
	.tdi-practice {
		min-height: 0;
		padding: 16px;
		border-radius: 22px;
	}
	.tdi-practice h3 {
		font-size: 18px;
		line-height: 1.18;
	}
	.tdi-practice-meta span { padding: 8px; }
	.tdi-practice-meta strong,
	.tdi-practice-meta span:nth-child(2) strong { font-size: 18px; }
	.tdi-count-entry {
		grid-template-columns: minmax(0,1fr) 86px;
	}
	.tdi-add, .tdi-mini, .tdi-quick-add { min-height: 42px; }
	.tdi-list {
		grid-template-columns: repeat(2, minmax(0,1fr));
		gap: 18px;
		margin-inline: clamp(28px, 3.4vw, 48px);
	}
	.tdi-list > .tdi-card { margin: 0; }
	.tdi-zoom {
		display: grid;
		align-content: space-between;
		min-height: 292px;
		padding: 22px;
	}
	.tdi-zoom h2 {
		font-size: 18px;
		line-height: 1.25;
	}
	.tdi-zoom-meta,
	.tdi-zoom-times { gap: 9px; }
	.tdi-zoom-meta p,
	.tdi-zoom-times p {
		border-radius: 14px;
		background: rgba(255,255,255,.46);
	}
	.tdi-zoom footer { justify-content: stretch; }
	.tdi-zoom-join {
		width: 100%;
		min-height: 48px;
		border-radius: 18px;
	}
	.tdi-calendar-hero {
		grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
		grid-auto-flow: dense;
		gap: 18px;
		min-height: 0;
		padding: 22px;
	}
	.tdi-calendar-hero-image {
		grid-row: span 2;
		height: 280px;
		min-height: 0;
		margin: 0;
		border-radius: 24px;
	}
	.tdi-calendar-hero-image img {
		height: 100%;
		max-height: none;
		object-fit: cover;
	}
	.tdi-calendar-hero-main {
		align-self: end;
		grid-template-columns: repeat(2, minmax(0,1fr));
		gap: 10px;
	}
	.tdi-calendar-hero-main > span {
		min-height: 86px;
		border-radius: 20px;
	}
	.tdi-calendar-hero-main > span strong {
		font-size: 17px;
		white-space: normal;
	}
	.tdi-hero-flags {
		align-self: start;
	}
	.tdi-hero-meta {
		grid-column: 1 / 2;
		grid-template-columns: repeat(2, minmax(0,1fr));
	}
	.tdi-filter-row {
		margin-inline: clamp(28px, 3.4vw, 48px);
		justify-content: flex-start;
	}
	.tdi-month-card {
		width: min(100% - 56px, 820px);
		margin-inline: auto;
		padding: 24px 28px 72px;
		scroll-margin-bottom: 150px;
	}
	.tdi-month-grid {
		gap: 9px;
	}
	.tdi-month-grid span,
	.tdi-month-grid button {
		min-height: 48px;
		border-radius: 16px;
		font-size: 17px;
	}
	.tdi-month-grid .weekday {
		min-height: 30px;
		font-size: 13px;
	}
	.tdi-day-detail-card {
		width: min(100% - 56px, 960px);
		margin-inline: auto;
		scroll-margin-bottom: 150px;
	}
	.tdi-calendar-info-list.is-tabbed {
		grid-template-columns: repeat(2, minmax(0,1fr));
		gap: 10px;
		overflow: visible;
		border: 0;
		background: transparent;
		box-shadow: none;
	}
	.tdi-calendar-info-list.is-tabbed .tdi-calendar-info-item {
		min-height: 78px;
		border: 1px solid rgba(112,84,55,.10);
		border-radius: 20px;
		background: rgba(255,253,250,.70);
	}
	.tdi-calendar-info-list.is-tabbed .tdi-calendar-info-item:last-child {
		border-bottom: 1px solid rgba(112,84,55,.10);
	}
	.tdi-calendar-panel {
		width: min(100% - 56px, 1120px);
		margin-inline: auto;
		padding: 24px 24px 42px;
		scroll-margin-bottom: 150px;
	}
	.tdi-pagination {
		justify-content: center;
		margin-top: 16px;
		margin-bottom: 18px;
	}
	.tdi-calendar-suggestions {
		justify-content: flex-start;
	}
	.tdi-combination-list .tdi-day-note {
		min-height: 116px;
		padding: 15px 16px;
	}
	.tdi-combination-list .tdi-day-note strong {
		font-size: 16px;
		line-height: 1.2;
	}
	.tdi-combination-list .tdi-day-note span {
		font-size: 13px;
		white-space: normal;
	}
	.tdi-combination-list .tdi-day-note small {
		font-size: 13px;
	}
	.tdi-milestone-card.is-open {
		grid-column: 1 / -1;
	}
	.tdi-milestone-card.is-open .tdi-milestone-row {
		grid-template-columns: 116px minmax(0,1fr) auto;
		min-height: 96px;
		padding: 12px;
	}
	.tdi-milestone-card.is-open .tdi-milestone-row img {
		width: 116px;
		height: 78px;
		border-radius: 16px;
	}
	.tdi-milestone-card.is-open .tdi-milestone-row strong,
	.tdi-milestone-card.is-open .tdi-milestone-row small,
	.tdi-milestone-card.is-open .tdi-milestone-row em {
		white-space: normal;
	}
	.tdi-milestone-card.is-open .tdi-milestone-detail {
		padding: 14px 18px 18px 146px;
	}
	.tdi-milestone-card.is-open .tdi-milestone-detail p {
		max-width: 780px;
		font-size: 13px;
	}
	.is-tab-settings,
	.is-tab-settings.is-guest {
		display: grid;
		grid-template-columns: repeat(2, minmax(0,1fr));
		align-content: start;
		column-gap: 10px;
	}
	.is-tab-settings .tdi-top,
	.is-tab-settings .tdi-settings-hero,
	.is-tab-settings .tdi-auth-card {
		grid-column: 1 / -1;
	}
	.is-tab-settings .tdi-settings-hero {
		min-height: 112px;
		padding: 22px 26px;
	}
	.is-tab-settings .tdi-card {
		align-self: start;
	}
	.tdi-settings-card {
		gap: 12px;
	}
	.tdi-setting-row {
		min-height: 60px;
		padding: 12px 14px;
		border-radius: 18px;
	}
	.tdi-setting-row strong { font-size: 15px; }
	.tdi-setting-row small { font-size: 12px; }
	.tdi-settings-mini-grid article {
		min-height: 92px;
	}
	.tdi-nav {
		width: 320px;
		bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px));
		padding: 5px;
	}
	.tdi-toast {
		bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px));
	}
	.tdi-nav-indicator {
		top: 5px;
		left: calc(5px + (((100% - 10px) / 4) * var(--tdi-nav-active)) + ((((100% - 10px) / 4) - 44px) / 2));
		width: 44px;
		height: 44px;
	}
	.tdi-nav button {
		width: 44px;
		height: 44px;
	}
	.tdi-nav svg {
		width: 22px;
		height: 22px;
	}
}

@media (min-width: 1000px) and (max-width: 1366px) {
	.tdi-pwa-frame {
		width: min(100%, 1240px);
	}
	.tdi-practice-list,
	.tdi-list {
		grid-template-columns: repeat(3, minmax(0,1fr));
	}
	.tdi-event-list {
		grid-template-columns: repeat(auto-fit, minmax(320px, 370px));
	}
	.is-tab-settings {
		grid-template-columns: repeat(3, minmax(0,1fr));
		column-gap: 16px;
	}
	.is-tab-settings .tdi-top,
	.is-tab-settings .tdi-settings-hero,
	.is-tab-settings .tdi-auth-card {
		grid-column: 1 / -1;
	}
	.is-tab-settings.is-guest {
		grid-template-columns: repeat(2, minmax(0,1fr));
	}
	.tdi-calendar-hero-image {
		height: 320px;
	}
	.tdi-calendar-hero-main,
	.tdi-hero-meta,
	.tdi-hero-flags {
		grid-column: 2;
	}
	.tdi-hero-meta {
		align-self: start;
	}
}

@media (min-width: 1181px) and (max-width: 1366px) {
	.is-tab-settings {
		grid-template-columns: repeat(4, minmax(0,1fr));
	}
	.is-tab-settings .tdi-settings-card,
	.is-tab-settings .tdi-card {
		min-width: 0;
	}
	.tdi-list {
		grid-template-columns: repeat(3, minmax(280px,1fr));
	}
	.tdi-zoom h2 {
		font-size: 20px;
		line-height: 1.22;
	}
	.tdi-calendar-panel {
		width: min(100% - 72px, 1120px);
	}
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 940px) {
	body.tdi-pwa-body {
		overflow: hidden;
		background: #171918;
	}
	body.tdi-pwa-body::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 300;
		display: block;
		background:
			radial-gradient(circle at 25% 15%, rgba(217,173,87,.22), transparent 16rem),
			linear-gradient(145deg, #1f211f, #111312);
	}
	body.tdi-pwa-body::after {
		content: "Vui lòng xoay dọc điện thoại để dùng TDI Practice App";
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 301;
		display: grid;
		width: min(430px, calc(100vw - 48px));
		min-height: 122px;
		place-items: center;
		padding: 24px;
		border: 1px solid rgba(255,255,255,.18);
		border-radius: 28px;
		color: #fff;
		background: rgba(255,255,255,.08);
		box-shadow: 0 26px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
		backdrop-filter: blur(20px) saturate(145%);
		-webkit-backdrop-filter: blur(20px) saturate(145%);
		transform: translate(-50%,-50%);
		text-align: center;
		font-size: 18px;
		font-weight: 950;
		line-height: 1.3;
	}
}

@media (max-width: 360px) {
	.tdi-card { margin-inline: 10px; }
	.tdi-header { padding-inline: 16px; }
	.tdi-header-row { grid-template-columns: minmax(0,1fr) 118px; gap: 10px; }
	.tdi-header-side, .tdi-tibetan-chip { width: 118px; }
	.tdi-header-side { gap: 14px; }
	.tdi-event-row { grid-template-columns: 96px minmax(0,1fr); gap: 8px; padding-inline: 9px; }
	.tdi-event-time { padding-inline: 4px; font-size: 9.5px; }
	.tdi-calendar-hero-main { grid-template-columns: 1fr; }
	.tdi-calendar-hero-main > span strong { font-size: 15px; }
	.tdi-hero-meta, .tdi-data-grid { grid-template-columns: 1fr; }
	.tdi-calendar-info-item { grid-template-columns: 38px minmax(0,1fr); gap: 9px; min-height: 58px; padding: 10px; }
	.tdi-calendar-info-item i { width: 30px; height: 30px; }
	.tdi-next-milestone { grid-template-columns: 62px minmax(0,1fr); }
	.tdi-next-milestone img { width: 62px; height: 54px; }
	.tdi-practice-meta { grid-template-columns: 1fr; }
	.tdi-practice { grid-template-columns: 1fr; }
	.tdi-nav { left: 50%; right: auto; width: min(280px, calc(100vw - 30px)); }
	.tdi-preset-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.tdi-form-grid { grid-template-columns: 1fr; }
	.tdi-zoom-meta, .tdi-zoom-times { grid-template-columns: 1fr; }
	.tdi-settings-hero { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 410px) {
	.tdi-practice { grid-template-columns: 1fr; }
	.tdi-count-entry { grid-template-columns: minmax(0,1fr) 72px; }
}