/*
Theme Name: kita-crm-login
Text Domain: kita-crm-login
Description: Minimal private employee CRM login theme.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

:root {
	--crm-ink: #17324d;
	--crm-ink-deep: #0c2034;
	--crm-gold: #c49a5a;
	--crm-gold-light: #ead8b5;
	--crm-paper: #f5f2ec;
	--crm-white: #fffdf9;
	--crm-line: rgba(23, 50, 77, .14);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.kita-crm-site {
	background: var(--crm-paper);
	color: var(--crm-ink);
	font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
a { color: inherit; }
.kita-crm-header {
	height: 82px;
	padding: 18px 5vw;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(245,242,236,.96);
	border-bottom: 1px solid var(--crm-line);
}
.kita-crm-brand { display: inline-flex; align-items: center; width: min(1080px, 100%); }
.kita-crm-brand img { display: block; width: 222px; height: auto; max-height: 38px; object-fit: contain; }
.kita-crm-login-page { min-height: calc(100vh - 82px); display: grid; place-items: center; padding: 6vh 5vw 8vh; }
.kita-crm-login-stage { width: min(1080px, 100%); display: grid; gap: 26px; }
.kita-crm-visual {
	position: relative; min-height: 300px; overflow: hidden; border: 1px solid rgba(196,154,90,.4);
	border-radius: 18px; background: linear-gradient(120deg, #102c45 0%, #173f5b 48%, #0b1e31 100%);
	box-shadow: 0 24px 70px rgba(12,32,52,.2);
}
.kita-crm-visual-grid {
	position: absolute; inset: 0; opacity: .22;
	background-image: linear-gradient(rgba(234,216,181,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(234,216,181,.16) 1px, transparent 1px);
	background-size: 48px 48px;
}
.kita-crm-visual-glow { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; }
.kita-crm-visual-glow-one { width: 380px; height: 380px; right: 8%; top: -52%; background: radial-gradient(circle, rgba(196,154,90,.45), transparent 68%); }
.kita-crm-visual-glow-two { width: 300px; height: 300px; left: 18%; bottom: -70%; background: radial-gradient(circle, rgba(60,153,181,.35), transparent 68%); }
.kita-crm-visual-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(234,216,181,.6); stroke-width: 1.5; }
.kita-crm-visual-lines circle { fill: var(--crm-gold-light); stroke: var(--crm-gold); stroke-width: 2; }
.kita-crm-visual-label { position: absolute; left: 28px; top: 25px; color: var(--crm-gold-light); font-size: 12px; letter-spacing: .12em; }
.kita-crm-visual-card { position: absolute; display: grid; gap: 3px; min-width: 132px; padding: 13px 15px; border: 1px solid rgba(234,216,181,.28); border-radius: 10px; background: rgba(7,24,40,.58); backdrop-filter: blur(8px); color: #fffdf9; }
.kita-crm-visual-card span, .kita-crm-visual-card small { color: rgba(234,216,181,.8); font-size: 11px; letter-spacing: .08em; }
.kita-crm-visual-card strong { font-size: 16px; letter-spacing: .06em; }
.kita-crm-visual-card-one { left: 7%; bottom: 20%; }
.kita-crm-visual-card-two { left: 43%; top: 30%; }
.kita-crm-visual-card-three { right: 7%; bottom: 18%; }
.kita-crm-login-card {
	width: 100%; margin: 0 auto; padding: 34px 38px 38px; background: var(--crm-white);
	border: 1px solid var(--crm-line); border-radius: 16px; box-shadow: 0 18px 45px rgba(23,50,77,.1);
}
.kita-crm-login-card > * { width: min(440px, 100%); margin-left: auto; margin-right: auto; }
.kita-crm-eyebrow { margin-bottom: 12px; color: var(--crm-gold); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.kita-crm-login-card h1 { margin-top: 0; color: var(--crm-ink-deep); font-size: 30px; letter-spacing: .02em; }
.kita-crm-login-note, .kita-crm-login-status { margin-top: 10px; margin-bottom: 24px; color: rgba(23,50,77,.68); font-size: 14px; }
#loginform { margin-top: 0; }
#loginform p { margin: 0 0 16px; }
#loginform label { display: block; margin-bottom: 7px; color: var(--crm-ink); font-size: 13px; font-weight: 600; }
#loginform input[type="text"], #loginform input[type="password"] { width: 100%; height: 46px; padding: 0 13px; border: 1px solid rgba(23,50,77,.22); border-radius: 8px; background: #fff; color: var(--crm-ink); font-size: 15px; }
#loginform input:focus { outline: 2px solid rgba(196,154,90,.35); border-color: var(--crm-gold); }
#loginform .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
#loginform .login-remember input { accent-color: var(--crm-gold); }
#loginform .login-submit { margin-top: 24px; }
#loginform input[type="submit"], .kita-crm-button { display: inline-flex; justify-content: center; align-items: center; width: 100%; min-height: 46px; padding: 11px 20px; border: 0; border-radius: 999px; background: var(--crm-gold); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease; }
#loginform input[type="submit"]:hover, .kita-crm-button:hover { background: #ad8145; transform: translateY(-1px); }
@media (max-width: 640px) {
	.kita-crm-header { height: 70px; padding: 16px 22px; }
	.kita-crm-brand img { width: 180px; max-height: 30px; }
	.kita-crm-login-page { min-height: calc(100vh - 70px); padding: 28px 18px 44px; }
	.kita-crm-visual { min-height: 240px; border-radius: 14px; }
	.kita-crm-visual-card { min-width: 104px; padding: 9px 10px; }
	.kita-crm-visual-card span, .kita-crm-visual-card small { font-size: 9px; }
	.kita-crm-visual-card strong { font-size: 12px; }
	.kita-crm-visual-card-two { left: 37%; top: 33%; }
	.kita-crm-visual-label { left: 18px; top: 18px; font-size: 10px; }
	.kita-crm-login-card { padding: 27px 22px 30px; }
}