.tml-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 999999;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tml-modal.is-open { display: flex; }
.tml-modal-backdrop { position: absolute; inset: 0; background: rgba(4, 18, 36, .66); backdrop-filter: blur(2px); }
.tml-modal-dialog {
	position: relative;
	width: min(440px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 28px;
	border: 1px solid #dfe7ef;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(4, 18, 36, .25);
	color: #10233f;
}
.tml-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #617087;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.tml-modal-close:hover { background: #f1f5f9; color: #0b2545; }
.tml-modal-brand {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: #edf8fb;
	color: #0b7891;
}
.tml-modal-brand svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tml-modal h2 { margin: 0; text-align: center; font-size: 20px; line-height: 1.35; color: #0b2545; }
.tml-modal-subtitle { margin: 8px auto 18px; max-width: 340px; color: #6c7a8d; text-align: center; font-size: 12px; line-height: 1.6; }
.tml-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 16px 0 18px; padding: 3px; border: 1px solid #dce5ee; border-radius: 8px; background: #f8fafc; }
.tml-tab { min-height: 38px; border: 0; border-radius: 6px; background: transparent; color: #5a6879; font-weight: 600; cursor: pointer; }
.tml-tab.is-active { background: #0b2545; color: #fff; box-shadow: 0 2px 6px rgba(11,37,69,.16); }
.tml-panel { display: none; }
.tml-panel.is-active { display: block; }
.tml-panel label:not(.tml-check) { display: block; margin: 0 0 13px; }
.tml-panel label > span:first-child { display: block; margin-bottom: 6px; color: #263b56; font-size: 12px; font-weight: 600; }
.tml-panel input[type="text"],
.tml-panel input[type="email"],
.tml-panel input[type="password"] {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #d5e0ea;
	border-radius: 7px;
	outline: none;
	background: #fff;
	color: #10233f;
	font-size: 13px;
	box-sizing: border-box;
}
.tml-panel input:focus { border-color: #20b8d7; box-shadow: 0 0 0 3px rgba(32,184,215,.12); }
.tml-password-wrap { position: relative; display: block; }
.tml-password-wrap input { padding-right: 46px !important; }
.tml-password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: transparent; color: #8090a3; cursor: pointer; }
.tml-password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.tml-check { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; color: #6c7a8d; font-size: 12px; cursor: pointer; }
.tml-submit { width: 100%; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 7px; background: #0b2545; color: #fff; font-weight: 700; cursor: pointer; }
.tml-submit:hover { background: #07182e; }
.tml-submit[disabled] { opacity: .65; cursor: wait; }
.tml-link-button { display: block; margin: 11px auto 0; padding: 5px 7px; border: 0; background: transparent; color: #1688a2; font-size: 12px; cursor: pointer; }
.tml-link-button:hover { text-decoration: underline; }
.tml-form-help { margin: 0 0 14px; color: #748397; font-size: 11px; line-height: 1.6; text-align: center; }
.tml-notice { display: none; margin: 0 0 14px; padding: 10px 12px; border-radius: 6px; font-size: 12px; line-height: 1.5; }
.tml-notice.is-visible { display: block; }
.tml-notice.is-error { background: #fff2f2; color: #a23a3a; border: 1px solid #f2cccc; }
.tml-notice.is-success { background: #eefaf4; color: #276a49; border: 1px solid #cce9da; }
body.tml-modal-open { overflow: hidden; }
@media (max-width: 520px) {
	.tml-modal { padding: 12px; align-items: flex-end; }
	.tml-modal-dialog { width: 100%; max-height: calc(100vh - 12px); padding: 24px 18px 20px; border-radius: 16px 16px 8px 8px; }
}