/* --- Login: 08 soft, with the circled 趙 --- */
body.task-login,
html.dark-mode body.task-login {
	background: #f2f2f0 !important;
	color: #161616;
	font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Segoe UI", sans-serif;
}
body.task-login::before,
html.dark-mode body.task-login::before {
	content: "";
	position: fixed;
	z-index: 0;
	left: 40px;
	bottom: 40px;
	width: 270px;
	height: 96px;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 100'%3E%3Cpath d='M0 24C42 8 82 40 126 24C170 8 210 40 254 24' fill='none' stroke='%23161616' stroke-width='1.2' stroke-opacity='0.4' stroke-linecap='round'/%3E%3Cpath d='M12 50C54 34 94 66 138 50C182 34 222 66 266 50' fill='none' stroke='%23161616' stroke-width='1.2' stroke-opacity='0.28' stroke-linecap='round'/%3E%3Cpath d='M24 76C66 60 106 92 150 76C194 60 226 84 264 76' fill='none' stroke='%23161616' stroke-width='1.2' stroke-opacity='0.16' stroke-linecap='round'/%3E%3C/svg%3E") center / 270px 96px no-repeat;
}

body.task-login #layout::before,
html.dark-mode body.task-login #layout::before {
	content: "";
	position: fixed;
	z-index: -1;
	left: 50%;
	bottom: 16px;
	width: min(920px, 92vw);
	height: 200px;
	transform: translateX(-50%);
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20210%22%3E%3Cpath%20d%3D%22M40%20198H600%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%220.9%22%20stroke-opacity%3D%220.38%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M52%20170V62H588V170%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M40%2062H600M40%2052H600%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M40%2052V62M600%2052V62%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.45%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M52%20170H78M176%20170H588%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.45%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M252%2086H348L386%20124L348%20162H252L214%20124Z%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.45%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M268%2098H332L358%20124L332%20150H268L242%20124Z%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.55%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M292%20156V108M318%20156V100M318%20118L332%20110M318%20118L306%20112%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.55%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M86%20184C76%20164%2082%20142%2098%20130C88%20116%20102%20100%20120%2098C138%2094%20154%20110%20148%20126C162%20120%20174%20138%20164%20156C176%20166%20168%20184%20148%20186C126%20194%2098%20190%2086%20184%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.45%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22124%22%20cy%3D%22132%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.45%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%22154%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.55%22%2F%3E%3Cpath%20d%3D%22M498%20170V96M516%20170V86M480%20170V112%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.45%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M516%20108L534%2098M516%20108L502%20100M516%20126L534%20118M516%20126L500%20120M498%20120L514%20112M498%20120L486%20114M480%20130L494%20122%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.55%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center bottom / contain no-repeat;
}


/* Painted jar left, dou right, bronze mirror above. See login-objects.md. */
body.task-login #layout::after,
html.dark-mode body.task-login #layout::after {
	content: "";
	position: fixed;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20232%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2270%22%20cy%3D%2226%22%20rx%3D%2224%22%20ry%3D%227%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20stroke-width%3D%221.5%22%20d%3D%22M46%2026%20C46%2036%2054%2040%2056%2044%20C52%2054%2046%2066%2040%2086%20C32%20114%2036%20150%2054%20166%20C62%20174%2070%20178%2070%20178%20C70%20178%2078%20174%2086%20166%20C104%20150%20108%20114%20100%2086%20C94%2066%2088%2054%2084%2044%20C86%2040%2094%2036%2094%2026%22%2F%3E%3Cpath%20stroke-width%3D%221.5%22%20d%3D%22M56%20176%20H84%20L80%20186%20H60%20Z%22%2F%3E%3Cpath%20stroke-width%3D%221.45%22%20d%3D%22M44%2096%20C26%2092%2024%20116%2046%20118%22%2F%3E%3Cpath%20stroke-width%3D%221.45%22%20d%3D%22M96%2096%20C114%2092%20116%20116%2094%20118%22%2F%3E%3Cpath%20stroke-width%3D%221.05%22%20stroke-opacity%3D%220.55%22%20d%3D%22M48%20100%20H92%20M50%20148%20H90%22%2F%3E%3Cpath%20stroke-width%3D%221.15%22%20stroke-opacity%3D%220.7%22%20d%3D%22M58%20124%20C70%20108%2096%20114%2090%20132%20C84%20148%2062%20146%2058%20132%20C56%20122%2070%20118%2076%20128%22%2F%3E%3Ccircle%20cx%3D%2274%22%20cy%3D%22130%22%20r%3D%221.8%22%20fill%3D%22%23161616%22%20stroke%3D%22none%22%20opacity%3D%220.7%22%2F%3E%3C%2Fg%3E%3Ctext%20x%3D%2270.0%22%20y%3D%22208.7%22%20text-anchor%3D%22middle%22%20fill%3D%22%23161616%22%20font-family%3D%22Songti%20SC%2C%20STSong%2C%20Noto%20Serif%20SC%2C%20serif%22%20font-size%3D%2214.7%22%3E%E5%BD%A9%E9%99%B6%E5%A3%BA%3C%2Ftext%3E%3Ctext%20x%3D%2270.0%22%20y%3D%22226.1%22%20text-anchor%3D%22middle%22%20fill%3D%22%23161616%22%20fill-opacity%3D%220.72%22%20font-family%3D%22Avenir%20Next%2C%20PingFang%20SC%2C%20sans-serif%22%20font-size%3D%2212.4%22%3EPainted%20jar%3C%2Ftext%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20170%20213%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2285%22%20cy%3D%2234%22%20rx%3D%2260%22%20ry%3D%228%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20stroke-width%3D%221.5%22%20d%3D%22M30%2038%20C32%2086%20138%2086%20140%2038%22%2F%3E%3Cpath%20stroke-width%3D%221.05%22%20stroke-opacity%3D%220.5%22%20d%3D%22M44%2042%20C48%2068%20122%2068%20126%2042%22%2F%3E%3Cpath%20stroke-width%3D%221.5%22%20d%3D%22M74%2082%20V146%20M96%2082%20V146%22%2F%3E%3Cpath%20stroke-width%3D%221.5%22%20d%3D%22M62%20146%20H108%22%2F%3E%3Cpath%20stroke-width%3D%221.5%22%20d%3D%22M36%20146%20C32%20166%20138%20166%20134%20146%22%2F%3E%3Cpath%20stroke-width%3D%221.05%22%20stroke-opacity%3D%220.55%22%20d%3D%22M52%2058%20C66%2046%2076%2058%2085%2050%20C94%2058%20104%2046%20118%2058%22%2F%3E%3C%2Fg%3E%3Ctext%20x%3D%2285.0%22%20y%3D%22188.9%22%20text-anchor%3D%22middle%22%20fill%3D%22%23161616%22%20font-family%3D%22Songti%20SC%2C%20STSong%2C%20Noto%20Serif%20SC%2C%20serif%22%20font-size%3D%2214.9%22%3E%E9%99%B6%E8%B1%86%3C%2Ftext%3E%3Ctext%20x%3D%2285.0%22%20y%3D%22206.6%22%20text-anchor%3D%22middle%22%20fill%3D%22%23161616%22%20fill-opacity%3D%220.72%22%20font-family%3D%22Avenir%20Next%2C%20PingFang%20SC%2C%20sans-serif%22%20font-size%3D%2212.6%22%3EStemmed%20bowl%3C%2Ftext%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20181%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%2260%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%2252%22%20stroke-width%3D%221.05%22%20stroke-opacity%3D%220.4%22%2F%3E%3Cpath%20stroke-width%3D%221.3%22%20d%3D%22M80%2046%20C94%2052%2098%2068%2080%2078%20C62%2068%2066%2052%2080%2046%20Z%22%2F%3E%3Cpath%20stroke-width%3D%221.3%22%20d%3D%22M114%2080%20C108%2094%2092%2098%2082%2080%20C92%2062%20108%2066%20114%2080%20Z%22%2F%3E%3Cpath%20stroke-width%3D%221.3%22%20d%3D%22M80%20114%20C66%20108%2062%2092%2080%2082%20C98%2092%2094%20108%2080%20114%20Z%22%2F%3E%3Cpath%20stroke-width%3D%221.3%22%20d%3D%22M46%2080%20C52%2066%2068%2062%2078%2080%20C68%2098%2052%2094%2046%2080%20Z%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%225%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fg%3E%3Ctext%20x%3D%2280.0%22%20y%3D%22159.8%22%20text-anchor%3D%22middle%22%20fill%3D%22%23161616%22%20font-family%3D%22Songti%20SC%2C%20STSong%2C%20Noto%20Serif%20SC%2C%20serif%22%20font-size%3D%2211.8%22%3E%E9%8A%85%E9%8F%A1%3C%2Ftext%3E%3Ctext%20x%3D%2280.0%22%20y%3D%22174.8%22%20text-anchor%3D%22middle%22%20fill%3D%22%23161616%22%20fill-opacity%3D%220.72%22%20font-family%3D%22Avenir%20Next%2C%20PingFang%20SC%2C%20sans-serif%22%20font-size%3D%2210.0%22%3EBronze%20mirror%3C%2Ftext%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-size: 124px auto, 148px auto, auto 199px;
	/* 400px card, about 331px tall. Sides sit in the side gaps; the mirror sits in the gap above the card. */
	background-position: calc(25vw - 162px) center, calc(75vw + 26px) center, center calc(25vh - 171px);
}
@media (max-width: 900px) {
	body.task-login #layout::after,
	html.dark-mode body.task-login #layout::after {
		content: none;
	}
}

body.task-login::after,
html.dark-mode body.task-login::after {
	content: "趙";
	position: fixed;
	z-index: 5;
	top: 36px;
	left: 40px;
	width: 64px;
	height: 64px;
	box-sizing: border-box;
	border: 1.5px solid #161616;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 1;
	color: #161616;
	background: transparent;
	pointer-events: none;
}
body.task-login #layout,
body.task-login #layout-content,
html.dark-mode body.task-login #layout,
html.dark-mode body.task-login #layout-content {
	background: transparent !important;
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
body.task-login #logo {
	display: none !important;
}
body.task-login #login-form,
html.dark-mode body.task-login #login-form {
	display: flex;
	flex-direction: column;
	top: auto;
	margin: 0;
	width: 400px;
	max-width: calc(100% - 48px);
	background: #fff;
	color: #161616;
	border: 0;
	border-radius: 28px;
	padding: 40px 36px 32px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.04);
	backdrop-filter: none;
	text-align: left;
}
body.task-login #login-form::before {
	content: "HoHoMail";
	order: 1;
	display: block;
	width: 100%;
	font-size: 24px;
	font-weight: 560;
	letter-spacing: -0.03em;
	line-height: 1.2;
	text-align: center;
	color: #161616;
}
body.task-login #login-footer,
html.dark-mode body.task-login #login-footer {
	order: 2;
	flex: none;
	align-self: stretch;
	width: 100%;
	margin: 6px 0 26px;
	padding: 0;
	background: none;
	color: #8a847c;
	font-size: 0;
}
body.task-login #login-footer::before {
	content: "Simple, Secure and Cool";
	display: block;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-align: center;
	color: #8a847c;
}
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr {
	display: block;
	width: 100%;
}
body.task-login #login-form table {
	order: 3;
	margin: 0;
	border: 0;
}
body.task-login #login-form tr {
	position: relative;
	margin-top: 10px;
}
body.task-login #login-form td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: transparent;
}
body.task-login #login-form td.title {
	position: absolute;
	left: 18px;
	top: 0;
	height: 48px;
	display: flex !important;
	align-items: center;
	margin: 0;
	pointer-events: none;
	z-index: 2;
}
body.task-login #login-form .input-group-prepend {
	display: none !important;
}
body.task-login #login-form input.form-control::placeholder {
	color: transparent;
}
body.task-login #login-form td.title label {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	color: #9a9a96;
}
body.task-login #login-form tr:focus-within td.title,
body.task-login #login-form tr:has(input:valid) td.title {
	opacity: 0;
}
body.task-login #login-form input.form-control,
html.dark-mode body.task-login #login-form input.form-control {
	width: 100%;
	height: 48px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: #f3f3f1;
	color: #161616;
	padding: 0 18px;
	font-size: 15px;
	box-shadow: none;
}
body.task-login #login-form input.form-control:focus,
html.dark-mode body.task-login #login-form input.form-control:focus {
	outline: none;
	border: 0;
	box-shadow: none;
	background: #ececea;
	color: #161616;
}
body.task-login #login-form input::-webkit-contacts-auto-fill-button,
body.task-login #login-form input::-webkit-credentials-auto-fill-button,
body.task-login #login-form input::-webkit-strong-password-auto-fill-button {
	visibility: hidden !important;
	display: none !important;
	pointer-events: none;
	width: 0;
	height: 0;
	margin: 0;
}
body.task-login #login-form input.form-control:-webkit-autofill,
body.task-login #login-form input.form-control:-webkit-autofill:hover,
body.task-login #login-form input.form-control:-webkit-autofill:focus,
html.dark-mode body.task-login #login-form input.form-control:-webkit-autofill,
html.dark-mode body.task-login #login-form input.form-control:-webkit-autofill:hover,
html.dark-mode body.task-login #login-form input.form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: #161616;
	caret-color: #161616;
	box-shadow: 0 0 0 1000px #f3f3f1 inset;
	-webkit-box-shadow: 0 0 0 1000px #f3f3f1 inset;
	transition: background-color 9999s ease-out;
}
body.task-login #login-form .formbuttons {
	order: 4;
	margin: 16px 0 0;
}
body.task-login #rcmloginsubmit,
html.dark-mode body.task-login #rcmloginsubmit {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #161616;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 48px;
	box-shadow: none;
	text-shadow: none;
	text-transform: none !important;
}