/****
 *	teclab の管理画面のスタイル（各サイトの管理画面で共通。下に teclab の追加分）。
 *	teclab_weblib/assets に1つだけ置き、各サイトの root/assets/ からシンボリックリンクで使う（サイトで書き換えない）
 *	配色はすべて :root のカスタムプロパティで持つ(ライトのみ)。
 *	グラフの色も --chart-* から JS が読み出すので、ここを直せば全体が揃う。
 ****/

/* ============================================================ トークン */
:root {
	--bg:			#f4f6fa;
	--bg-elev:		#ffffff;
	--bg-sunken:	#eef1f6;
	--fg:			#1a2030;
	--fg-mute:		#5f6a83;
	--fg-faint:		#98a1b5;
	--line:			#e3e7ef;
	--line-strong:	#cdd4e2;
	--accent:		#3b6ef5;
	--accent-weak:	#e9efff;
	--accent-fg:	#ffffff;
	--ok:			#0f9b6c;
	--ok-bg:		#e2f7ef;
	--warn:			#c07208;
	--warn-bg:		#fdf1dc;
	--warn2:		#8d8000;
	--warn2-bg:		#f7f4d8;
	--dark:			#a3abbb;		/* 濃いグレーのバッジ(「未起動」など)。真っ黒は目立ちすぎるので中くらいのグレー */
	--dark-fg:		#ffffff;
	--danger:		#d92d3e;
	--danger-bg:	#fdeaec;
	--info:			#2a6fd6;
	--info-bg:		#e6efff;
	--teal:			#0d868e;
	--teal-bg:		#dff4f5;
	--mute-bg:		#eceff5;
	--row-alt:		#f7f9fd;
	--row-hover:	#eaf1ff;
	--chart-1:		#4b8ef0;
	--chart-2:		#2c5fa8;
	--chart-3:		#18a06a;
	--chart-4:		#a259d9;
	--shadow:		0 1px 2px rgba(20,30,60,.05), 0 6px 20px rgba(20,30,60,.06);
	--radius:		12px;
	--radius-sm:	8px;
	--bar-h:		52px;
	--mono:			ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;	/* 等幅の文字 */
	color-scheme:	light;
}

/* ============================================================ 基本 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
/* 画面の高さに収め、ウィンドウ側にはスクロールバーを出さない(中の領域だけがスクロールする) */
body {
	margin: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--fg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
				"Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	font-feature-settings: "palt" 1;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================ ヘッダー */
.appbar {
	position: relative;
	z-index: 30;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--bar-h);
	padding: 0 14px;
	background: var(--bg-elev);
	border-bottom: 1px solid var(--line);
}
.brand { font-size: 15px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: var(--fg); text-decoration: none; }
.brand:hover { color: var(--fg); text-decoration: none; opacity: .8; }		/* トップへのリンク。色は変えず、少し薄くするだけ */
.brand-sub { font-weight: 500; color: var(--fg-mute); margin-left: 4px; font-size: 13px; }
.spacer { flex: 1 1 auto; }
.hostchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-sunken);
	color: var(--fg-mute);
	font-size: 12px;
	white-space: nowrap;
}
.hostchip .dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--ok);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
}
/* 利用者。ホスト名の右にアドレスとログアウト */
.userchip {
	margin-left: 8px;
	color: var(--fg-mute);
	font-size: 12px;
}
.appbar .logoutform {
	display: inline-flex;
	margin: 0 0 0 8px;
}
/* 試験する人の表示レベル。本来より下げている間は警告の色にする */
.viewlevel { display: inline-flex; margin: 0 0 0 4px; }
.viewlevel label { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-mute); font-size: 12px; white-space: nowrap; }
.viewlevel.is-lowered label { color: var(--warn); font-weight: 700; }
.viewlevel.is-lowered select { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
/* ============================================================ ログイン */
/* 画面の真ん中にカードを1枚。背景は薄い色の円を2つぼかして重ねる */
.login {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	display: grid;
	place-items: center;
	padding: 24px 16px;
	background:
		radial-gradient(600px 400px at 15% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
		radial-gradient(500px 380px at 90% 95%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 70%),
		var(--bg);
}
.logincard {
	width: min(360px, 100%);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 30px 22px;
	background: var(--bg-elev);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(20,30,60,.06), 0 18px 48px rgba(20,30,60,.12);
}
.loginmark {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	margin: 0 auto;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--teal)));
	box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.loginmark svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logincard h1 { margin: 2px 0 0; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.logincard h1 span { color: var(--fg-mute); font-size: 15px; font-weight: 500; margin-left: 2px; }
.loginlead { margin: -6px 0 4px; text-align: center; color: var(--fg-mute); font-size: 12px; }
.loginerror {
	margin: 0;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	background: var(--danger-bg);
	color: var(--danger);
	font-size: 12px;
	font-weight: 600;
}
.loginwho { margin: -4px 0 0; text-align: center; font-weight: 700; font-size: 13px; word-break: break-all; }
.loginfield { display: flex; flex-direction: column; gap: 6px; }
.loginfield span { color: var(--fg-mute); font-size: 12px; font-weight: 600; }
.loginfield input {
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	background: var(--bg-elev);
	color: var(--fg);
	font: inherit;
	font-size: 14px;
	transition: border-color .12s, box-shadow .12s;
}
.loginfield input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.btn.loginbtn {
	height: 40px;
	border-radius: 10px;
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-fg);
	font-size: 14px;
}
.btn.loginbtn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, #000); border-color: color-mix(in srgb, var(--accent) 88%, #000); }
.loginnote { margin: -6px 0 0; text-align: center; color: var(--fg-faint); font-size: 11px; line-height: 1.7; }
/* 確認コードの欄は数字を大きく、間を空けて見やすくする */
.loginfield input.logincode { font-family: var(--mono); font-size: 22px; letter-spacing: .35em; text-align: center; }
/* 送り直し・入れ直しは文字だけの小さなボタン */
.loginsub { display: flex; justify-content: center; gap: 4px; margin-top: -4px; }
.btn.loginlink { border-color: transparent; background: transparent; color: var(--accent); font-weight: 500; }
.btn.loginlink:hover:not(:disabled) { border-color: transparent; background: var(--accent-weak); color: var(--accent); }
.loginhost {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 4px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	color: var(--fg-faint);
	font-size: 11.5px;
}
.loginhost .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* アカウント(manage/account/)の操作の結果 */
.accountmsg { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-sm); font-weight: 600; }
.accountmsg.is-ok { background: var(--ok-bg); color: var(--ok); }
.accountmsg.is-error { background: var(--danger-bg); color: var(--danger); }
/* アカウントの利用者の一覧は、行の上下と、表の中のボタン・選択欄を詰める(行の高さはこれらで決まる) */
.accountlist table.tbl td, .accountlist table.tbl th { padding-top: 4px; padding-bottom: 4px; }
.accountlist table.tbl .btn, .accountlist table.tbl select { height: 24px; }
.accountlist table.tbl .toolbar { gap: 6px; margin-bottom: 0; flex-wrap: nowrap; }	/* 操作のボタン(ロック解除・強制ログアウト・削除)は横に並べたまま */

/* ============================================================ サイドメニュー */
/* ヘッダーの下を左右に分け、左がメニュー・右が本文。どちらも中だけがスクロールする。
   メニュー化(.is-menu)と狭い画面では隠し、ヘッダーのボタン(☰)で上に重ねて開く */
.shell {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
}
.side {
	position: relative;
	z-index: 29;
	flex: 0 0 auto;
	width: max-content;	/* 幅は一番長い名前ぎりぎり */
	display: flex;
	flex-direction: column;
	background: var(--bg-elev);
	border-right: 1px solid var(--line);
}
.sidelist {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	padding: 4px 6px 10px;
}
.sidehead {
	padding: 9px 8px 2px;
	color: var(--fg-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	white-space: nowrap;
}
.sidelist > .sidehead:first-child { padding-top: 0; }
.sideitem {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 23px;
	padding: 0 8px;
	border-radius: var(--radius-sm);
	color: var(--fg-mute);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: color .12s, background .12s;
}
.sideitem:hover { color: var(--fg); background: var(--bg-sunken); text-decoration: none; }
.sideitem[aria-current="page"] { color: var(--accent); background: var(--accent-weak); }
.sideitem span { overflow: hidden; text-overflow: ellipsis; }
/* 問題がある時のメニューの右端の赤い太字の「!」(サーバー状態・動作環境)。
   絵文字の ❗ は太字にできず細く見えるので、ふつうの「!」を赤い太字にする */
.sideitem .sidemark {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--danger);
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 900;
	line-height: 1;
}
/* 問題のあるサーバーの名前のうしろの赤い太字の「!」(マウスを重ねると理由) */
.hostmark { margin-left: 3px; color: var(--danger); font-family: Arial, sans-serif; font-size: 13px; font-weight: 900; line-height: 1; cursor: help; }
/* 固定表示に戻すボタン(メニュー化して重ねて開いた時だけ、メニューの上の右端に出す。アイコンだけ) */
.sidetop { flex: 0 0 auto; display: none; justify-content: flex-end; padding: 3px 6px 0; }
.shell.is-menu .sidetop { display: flex; }
.shell.is-menu .sidelist { padding-top: 0; }
.sidepin {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--fg-mute);
	cursor: pointer;
	transition: color .12s, background .12s;
}
.sidepin:hover { color: var(--fg); background: var(--bg-sunken); }
.sidepin .tabicon { width: 18px; height: 18px; }
/* メニュー化(☰で開く): 広い画面でも隠し、ヘッダーの ☰ で本文の上に重ねて開く(狭い画面と同じ形) */
.shell.is-menu .side {
	position: fixed;
	top: var(--bar-h); bottom: 0; left: 0;
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform .16s ease, visibility 0s linear .16s;
	box-shadow: var(--shadow);
}
.shell.is-menu.is-open .side { transform: none; visibility: visible; transition: transform .16s ease; }
.tabicon {
	flex: 0 0 auto;
	width: 16px; height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* ヘッダーの ☰(常に出す。固定表示ならメニュー化、メニュー化していれば開く。狭い画面では開く) */
.menubtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	margin-left: -6px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--fg-mute);
	cursor: pointer;
}
.menubtn:hover { color: var(--fg); background: var(--bg-sunken); }
.menubtn .tabicon { width: 20px; height: 20px; }
.sideshade {
	position: fixed;
	inset: var(--bar-h) 0 0 0;
	z-index: 28;
	background: rgba(20,30,60,.28);
}
.sideshade[hidden] { display: none; }

/* ============================================================ ページ */
/* 本文が唯一のスクロール領域。fill を付けたページでは表の枠だけがスクロールする */
/* スクロールバーの分の幅は常に空けておく(出入りで横幅が変わると、グラフの右端が切れたりカードの並びが変わったりする) */
.page {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow: auto;
	scrollbar-gutter: stable;
	padding: 16px 14px 24px;
}
.page.fill {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-bottom: 14px;
}
.page.fill .pagehead { flex: 0 0 auto; }
.page.fill .live { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.page.fill .live > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.page.fill .cardhead { flex: 0 0 auto; }
.page.fill .tablewrap { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
.page.fill > .logwrap { flex: 1 1 auto; min-height: 0; }
.pagehead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pagehead h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .01em; }
/* 下に開くオプションの開閉ボタン。前のボタンとの間を少しあけ(行の間隔 12px に足す)、
   開いている間は山形の印を上向きにする */
.optbtn { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; }
.optbtn .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4;
	stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.optbtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* 見出しの左の「戻る」(ほかのページから開いた時)。左向きの山形と文字のボタン。押せることが分かるよう枠を付ける */
.backbtn {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 27px;
	padding: 0 12px 0 7px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--bg-elev);
	color: var(--fg-mute);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: background .12s, border-color .12s, color .12s;
}
.backbtn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); text-decoration: none; }
.backbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pagehead .backbtn + h1 { margin-left: -4px; }
/* 狭い窓では折り返す(ログ表示のツールバーは約900px あり、折り返さないと右端が切れて押せない) */
.pagetools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
/* カードが枠を持ち、中の表は枠を持たない(枠が二重に見えないようにする) */
.card {
	background: var(--bg-elev);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.card-pad { padding: 12px 14px 14px; }
.cardhead {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--bg-elev);
}
.cardhead h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.cardnote { color: var(--fg-mute); font-size: 12px; }
.card-pad > .cardhead { margin: -12px -14px 12px; }
.card > .empty { border: 0; background: transparent; }
.card + .card { margin-top: 14px; }
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 14px;
	align-items: start;
}
.grid .card + .card { margin-top: 0; }
.empty {
	margin: 0;
	padding: 28px 14px;
	color: var(--fg-mute);
	text-align: center;
	background: var(--bg-elev);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
}
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.field { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-mute); font-size: 12px; }
.note { color: var(--fg-mute); font-size: 12px; }

/* ============================================================ 自動更新まわり */
.livebar { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-mute); font-size: 12px; }
/* ページ固有のボタンの後ろに置かれる時は少し離す */
.pagetools > .livebar:not(:first-child) { margin-left: 16px; }
.livelabel { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-mute); font-size: 12px; }
.livebtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-elev);
	color: var(--fg-mute);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	white-space: nowrap;
}
button.livebtn:hover:not(:disabled):not(.is-search):not(#livestate) { border-color: var(--accent); color: var(--accent); }
button.livebtn:disabled { opacity: .45; cursor: default; }
.livebtn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); }
/* 状態の表示は文字が変わっても幅を変えない(3文字分)。右に並ぶ間隔の選択の位置がずれないように。
   4文字(一時停止・読込完了)は文字を 3/4 の大きさにして同じ幅に収める(JS が .is-long を付ける) */
#livestate { justify-content: flex-start; min-width: calc(3em + 7px + 6px + 22px + 2px); }
#livetext.is-long { font-size: .75em; }
.livebtn.is-live .dot { background: var(--ok); animation: pulse 1.6s ease-in-out infinite; }
.livebtn.is-error { border-color: var(--danger); color: var(--danger); }
.livebtn.is-error .dot { background: var(--danger); }
/* ログ表示の重さ。黄色 = 重くなってきた、赤 = 重いので最新の追いかけを止めた */
#livestate[data-load="warn"] .dot { background: var(--warn); }
#livestate[data-load="heavy"] { border-color: var(--danger); color: var(--danger); }
#livestate[data-load="heavy"] .dot { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
/* 押すと更新する状態の表示。色で更新からの時間と取得の様子を示す。
   取得中は 緑 → 3秒過ぎたら黄 → 10秒過ぎたら赤(更新後の色より優先)。更新後は --hold(設定間隔の1.5倍。10秒〜1分)まで緑、
   そこから3分かけてグレー。失敗は赤のまま。点は文字の色に合わせる。背景は塗らない(目立ちすぎる)。
   枠の線は色を薄めて(線の色と混ぜて)出す。color-mix() が使えない古いブラウザは枠の線は灰色のまま、文字の色だけ変わる。
   色はアニメーションで変えるので、マウスを載せた印は色ではなく外側の線で出す */
button#livestate .dot { background: currentColor; }
button#livestate:hover:not(:disabled) { outline: 1px solid var(--accent); outline-offset: 1px; }
#livestate.is-busy { border-color: var(--line); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); color: var(--ok);
	animation: livewarn .01s linear 3s forwards, livelate .01s linear 10s forwards; }
#livestate.is-busy .dot { animation: pulse 1.6s ease-in-out infinite; }
#livestate.is-error { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
#livestate.is-fresh { animation: livefade 180s linear var(--hold, 10s) both; }
@keyframes livefade {
	from	{ border-color: var(--line); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); color: var(--ok); }
	to		{ border-color: var(--line); color: var(--fg-mute); }
}
@keyframes livewarn { to { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); color: var(--warn); } }
@keyframes livelate { to { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); color: var(--danger); } }
.updated { font-variant-numeric: tabular-nums; color: var(--fg-faint); }
.updated.is-error { color: var(--danger); }
.skeleton {
	height: 13px;
	margin: 12px 0;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--line) 37%, var(--bg-sunken) 63%);
	background-size: 400% 100%;
	animation: shimmer 1.3s ease infinite;
}
.skeleton:nth-child(2) { width: 78%; }
.skeleton:nth-child(3) { width: 56%; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ============================================================ 表 */
/* 縦スクロールはブラウザ側だけにする(枠の中にスクロールバーを出さない) */
.tablewrap {
	overflow: auto;
	scrollbar-width: thin;
}
table.tbl {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
table.tbl th, table.tbl td {
	padding: 6px 12px;
	text-align: left;
	white-space: nowrap;
	vertical-align: middle;
	border-bottom: 1px solid var(--line);
}
table.tbl thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--bg-sunken);
	color: var(--fg-mute);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	border-bottom: 1px solid var(--line-strong);
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr.alt td { background: var(--row-alt); }
table.tbl tbody tr:hover td { background: var(--row-hover); }
table.tbl tbody tr.total td { font-weight: 700; background: var(--bg-sunken); border-top: 1px solid var(--line-strong); }
/* 代表の行。左端の太い線で示す(ID・名前は色を付けない) */
table.tbl tbody tr.is-focus td:first-child {
	box-shadow: inset 5px 0 0 var(--accent);
	font-weight: 700;
}
table.tbl tbody tr.is-cancel td { background: var(--warn-bg); }
table.tbl tbody tr.is-error  td { background: var(--danger-bg); }
table.tbl tbody tr.is-paused td.key { color: var(--warn); }
table.tbl tbody tr.is-current td { font-weight: 700; }
/* セルの種類 */
/* 基本の th/td 規則より詳細度を上げておくこと(でないと text-align が上書きされない) */
table.tbl td.num, table.tbl th.num { text-align: right; }
table.tbl td.act, table.tbl th.act { text-align: center; padding: 3px 8px; }
/* 余った幅を受け持ち、長い時は折り返さずに … で切る(max-width:0 で中身の長さが列の幅を押し広げないようにする) */
table.tbl td.memo { max-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fg-mute); }
/* … で切る値(.clip)。切れている時(is-cut)は、載せると全部(title)、押すと右へ伸ばした入力欄 .cutwide で全部を出す。
   td.clip は残りの幅に収める(操作ログの内容)。span.clip は 30 文字分(30ch)で切る(操作ログの相手) */
table.tbl td.clip { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
table.tbl td span.clip { display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
table.tbl td span.clip.is-cut { text-decoration: underline dotted var(--fg-mute); text-underline-offset: 3px; }
table.tbl td.clip.is-cut, table.tbl td:has(> span.clip.is-cut) { cursor: pointer; }
table.tbl td.bar-col, table.tbl th.bar-col { min-width: 240px; }
/* 列を中身の幅ぴったりに縮める表。表は全幅のままで、
   余った幅は grow の列か、右端の空の列(spacer)が受け持つ */
table.tbl.fitcols th { width: 1%; }
table.tbl.fitcols th.grow, table.tbl.fitcols th.spacer { width: auto; }
table.tbl th.spacer, table.tbl td.spacer { padding: 0; }
/* 列の幅を合わせるための見えない値。高さは0で、幅だけをセルと同じ字体で取る */
table.tbl thead th .sizer {
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
}
table.tbl thead th .sizer.key { font-weight: 600; }
td.key { font-weight: 600; }
td.mute, .mute { color: var(--fg-mute); }
td.mono, .mono { font-family: var(--mono); font-size: 11.5px; }
/* 文字色 */
.t-ok { color: var(--ok); }
.t-warn { color: var(--warn); }
.t-warn2 { color: var(--warn2); }
.t-danger { color: var(--danger); font-weight: 600; }
.t-info { color: var(--info); }
.t-teal { color: var(--teal); }
/* 変化したセルを一瞬光らせる */
/* to は書かない(行の背景色へ向かって戻る)。transparent まで薄れると、色付きの行(エラー・キャンセル・縞・
   マウスを乗せた行)では白くなってから終わった瞬間に元の色へパッと戻ってちらつく */
@keyframes cellflash {
	from { background: color-mix(in srgb, var(--accent) 26%, transparent); }
}
td.is-chg { animation: cellflash 1.1s ease-out; }

/* ============================================================ バッジ・バー */
.pill {
	display: inline-block;
	padding: 1px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
}
.p-ok     { background: var(--ok-bg);     color: var(--ok); }
.p-run    { background: var(--ok-bg);     color: var(--ok); }
.p-warn   { background: var(--warn-bg);   color: var(--warn); }
.p-danger { background: var(--danger-bg); color: var(--danger); }
.p-info   { background: var(--info-bg);   color: var(--info); }
.p-teal   { background: var(--teal-bg);   color: var(--teal); }
.p-mute   { background: var(--mute-bg);   color: var(--fg-mute); }
.p-plain  { background: none;            color: var(--fg); font-weight: 400; }	/* 色なし(ほかのバッジと文字の位置だけそろえる) */
.p-dark   { background: var(--dark);      color: var(--dark-fg); }
/* 状態のバッジ(is-host)は、どの状態も文字の前に文字と同じ色の●を付ける(文字の位置もそろう)。
   稼働中だけ下の .p-run::before で●を点滅させる */
.pill.is-host::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%;
	background: currentColor; vertical-align: 1px; }
.p-run::before {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	margin-right: 5px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 1px;
	animation: pulse 2s ease-in-out infinite;
}
.bar {
	display: inline-block;
	width: 160px;
	height: 6px;
	margin-right: 8px;
	border-radius: 999px;
	background: var(--mute-bg);
	overflow: hidden;
	vertical-align: middle;
}
.bar > i { display: block; height: 100%; border-radius: 999px; transition: width .35s ease; }
.b-ok     > i { background: var(--ok); }
.b-warn   > i { background: var(--warn); }
.b-danger > i { background: var(--danger); }
.bar-val { font-variant-numeric: tabular-nums; }
/* 進捗。セルの背景を --p の分だけ塗り、文字はその上に重ねる */
.progress {
	position: relative;
	z-index: 0;
	display: block;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--mute-bg);
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.progress::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: var(--p, 0%);
	background: color-mix(in srgb, var(--accent) 30%, transparent);
	transition: width .4s ease;													/* 5秒ごとの更新で滑らかに伸びる */
}

/* ============================================================ ボタン */
.actform { display: inline; margin: 0; }
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	height: 25px;
	padding: 0 11px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--bg-elev);
	color: var(--fg);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}
.btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn:disabled { opacity: .38; cursor: default; }
/* 見た目だけ押せない形のボタン */
.btn[aria-disabled="true"] { opacity: .38; cursor: default; }
.btn[aria-disabled="true"]:hover { background: var(--bg-elev); border-color: var(--line-strong); color: var(--fg); }
/* 送信中。押した手応えとして結果が返るまで回す。
   文字は透明にするだけで場所は残し、回転はその上に重ねる(ボタンの幅を変えない) */
.btn.is-busy, .btn.is-busy:disabled {
	position: relative;
	opacity: 1;
	cursor: progress;
	color: transparent;
	border-color: color-mix(in srgb, var(--accent) 50%, transparent);
	background: var(--accent-weak);
}
.btn.is-busy::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 13px;
	margin: -6.5px 0 0 -6.5px;
	border: 2px solid var(--accent);
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-primary { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-weak); }
.btn-primary:hover:not(:disabled) { color: var(--accent-fg); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }
select, input[type="date"], input[type="text"], input[type="number"] {
	height: 29px;
	padding: 0 8px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--bg-elev);
	color: var(--fg);
	font-family: inherit;
	font-size: 12px;
	vertical-align: middle;
}

/* ============================================================ 操作結果 */
iframe#status { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
.toasts {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: min(460px, calc(100vw - 32px));
}
.toast {
	padding: 9px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	border-left: 3px solid var(--ok);
	background: var(--bg-elev);
	box-shadow: var(--shadow);
	font-size: 12.5px;
	animation: toastin .22s ease-out;
}
.toast.t-error { border-left-color: var(--danger); color: var(--danger); }
/* ページの切り替え(長い一覧)。← 前へ・ページ番号・次へ → を詰めて並べる。
   番号の欄は JS がいつも同じ数の枠・同じ幅のボタンで並べるので、ページを移っても 次へ → の位置が変わらない */
.pager { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.pager .pagenos { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pager .pagenos.is-fit { flex-wrap: nowrap; overflow: hidden; }						/* JS が並べた時は1行(JS が動かない時は折り返す) */
.pager .pageprev, .pager .pagenext { flex: none; }
.pager .btn { min-width: 2.4em; justify-content: center; }
.pager .btn.is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); cursor: default; }
.pager .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.pager .pagegap { display: inline-flex; justify-content: center; flex: none; color: var(--fg-faint); }
/* 見出しに並べる時。ページの切り替えは残りの幅に広げ、← 前へ の左は件数から少し離す */
.cardhead.pagerhead { align-items: center; flex-wrap: wrap; padding-top: 5px; padding-bottom: 5px; }
.pagerhead .pager { flex: 1; padding: 0 0 0 14px; min-width: 0; }
.pagerhead .pager .btn { height: 24px; }
/* 件数は、いちばん長くなる文(2つ目の span。見えない)の幅を取り、ページを移っても ← 前へ の位置を変えない */
.pagernote { display: inline-grid; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pagernote > span { grid-area: 1 / 1; }
.pagernote > span + span { visibility: hidden; }
/* 行の上下を詰めた表(操作ログ) */
.card.is-tight table.tbl th, .card.is-tight table.tbl td { padding-top: 3px; padding-bottom: 3px; }
/* 横に長い表は左右の余白も詰める(両端だけ少し空ける。操作ログ) */
.card.is-narrow table.tbl th, .card.is-narrow table.tbl td { padding-left: 4px; padding-right: 4px; }
.card.is-narrow table.tbl th:first-child, .card.is-narrow table.tbl td:first-child { padding-left: 10px; }
.card.is-narrow table.tbl th:last-child, .card.is-narrow table.tbl td:last-child { padding-right: 10px; }
/* 確認のダイアログ(admin.js の confirmBox()。ブラウザの confirm() の代わり)。ヘッダー(30)・トースト(60)より手前に重ねる */
.confirmback {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;											/* inset は iOS 14.1 から */
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(10, 14, 22, .38);
	animation: confirmfade .12s ease-out;
}
.confirmbox {
	width: min(440px, 100%);
	max-height: calc(100vh - 32px);
	overflow: auto;
	padding: 18px 18px 14px;
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	background: var(--bg-elev);
	color: var(--fg);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
	animation: confirmin .14s ease-out;
}
.confirmbox.is-danger { border-top-color: var(--danger); }
/* エラーのダイアログ(tone: 'error')。赤い枠と背景、文の上に「エラー」 */
.confirmbox.is-error { border-color: var(--danger); border-top-color: var(--danger); background: var(--danger-bg); }
.confirmbox.is-error .confirmtext { color: var(--danger); font-weight: 600; }
.confirmbox.is-error .confirmtext::before { content: "エラー"; display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; }
/* 文の改行(\n)はそのまま出す。長い名前・URL は折り返す */
.confirmtext { font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.confirmbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.confirmbtns .btn { min-width: 6.5em; justify-content: center; }
@keyframes confirmfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirmin { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
/* うまくいった知らせ(TcAdmin の flash の ok)。緑で右下に出し、4秒で消える(JS が無くても CSS で消える)。
   マウスを乗せている間は止め、押すとすぐ閉じる(admin.js) */
.toast.t-ok {
	border-color: color-mix(in srgb, var(--ok) 35%, transparent);
	border-left-color: var(--ok);
	background: var(--ok-bg);
	color: var(--ok);
	font-weight: 600;
	cursor: pointer;
	animation: toastin .22s ease-out, toastaway .35s ease-in 4s forwards;
}
.toast.t-ok:hover { animation-play-state: paused; }
@keyframes toastaway { to { opacity: 0; transform: translateY(6px); visibility: hidden; } }
@media (max-width: 720px) {
	.toasts { left: 16px; max-width: none; }
}
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================ 狭い画面 */
@media (max-width: 720px) {
	.brand-sub, .hostchip, .userchip { display: none; }
	/* メニューは隠し、ヘッダーのボタンで本文の上に重ねて開く */
	.side {
		position: fixed;
		top: var(--bar-h); bottom: 0; left: 0;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform .16s ease, visibility 0s linear .16s;
		box-shadow: var(--shadow);
	}
	.shell.is-open .side { transform: none; visibility: visible; transition: transform .16s ease; }
	.shell.is-menu .sidetop { display: none; }
	.shell.is-menu .sidelist { padding-top: 4px; }
	.page { padding: 12px 10px 40px; }
	.pagetools { margin-left: 0; }
	.grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	/* 送信中の回転だけは「処理中」を伝える役目があるので、ゆっくり回して残す */
	.btn.is-busy::before { animation: spin 1.4s linear infinite !important; }
	/* 状態の表示(#livestate)の色は動きではなく時間による色の変化(更新後の緑 → グレー、取得中の黄・赤)なので残す。点の点滅は止める */
	#livestate.is-busy { animation: livewarn .01s linear 3s forwards, livelate .01s linear 10s forwards !important; }
	#livestate.is-fresh { animation: livefade 180s linear var(--hold, 10s) both !important; }
}

/* ============================================================ teclab の追加分 */
/* カードの見出しの右に並べるボタン */
.cardhead .cardtools { margin-left: auto; display: flex; gap: 8px; }
/* 表の中の入力欄（その場で編集する表・未登録の貸し出し中） */
/* 表（リスト）の行間は詰めて、上下 2px・行の高さ 1.5 にする（1行 23px。下の線 1px を含む）。
   表の中の入力欄・選択欄は 19px（枠が行の線にかからない）、ボタンは 21px にして行に合わせ、文字だけの行と同じ高さにする（操作の列 td.act・詰めた表 is-tight も同じ） */
table.tbl { line-height: 1.5; }
table.tbl th, table.tbl td,
table.tbl td.act,
.card.is-tight table.tbl th, .card.is-tight table.tbl td,
.accountlist table.tbl th, .accountlist table.tbl td { padding-top: 2px; padding-bottom: 2px; }
table.tbl td input[type="text"] { width: 100%; min-width: 90px; }
table.tbl td input[type="text"], table.tbl td select, .accountlist table.tbl select { height: 19px; margin-top: -1px; margin-bottom: -1px; }
table.tbl td .btn, .accountlist table.tbl .btn { height: 21px; margin-top: -2px; margin-bottom: -2px; }
table.tbl td .btn { padding: 0 8px; font-size: 11px; }
table.tbl td .btn .tabicon { width: 12px; height: 12px; margin-right: 3px; }
table.tbl td input.mac { min-width: 140px; }
table.tbl td input.ip { min-width: 115px; }
table.tbl td.grow { width: 100%; }
/* その場で編集する表（DHCP・DNS の登録。WebNetConf と admin.js の setupRowEdit()）。押した行だけ入力欄に変わる */
.rowform { display: none; }
/* 入力欄はふだんから置き、編集していない行では枠と背景を消して文字だけに見せる（押した時に大きさが変わらないように） */
table.netedit tbody tr[data-edit] td { cursor: pointer; }
table.tbl.netedit td input.ce { width: auto; min-width: 0; padding: 0 6px; font-size: inherit; font-weight: inherit; }
table.tbl.netedit td.grow input.ce { width: 100%; }
table.netedit input.ce.mac { font-family: var(--mono); }
table.netedit tbody tr[data-edit]:not(.is-editing) input.ce { border-color: transparent; background: transparent; pointer-events: none; }
/* DNS のまとまりの2行目以降の IP アドレス（1行目と同じ）は、編集を始めるまで見せない（WebNetConf） */
table.netedit tbody tr.groupsub[data-edit]:not(.is-editing) input.ce.ip { color: transparent; }
/* ドラッグして別の IP アドレスのまとまりへ移せる行（admin.js の setupRowDrag()）。動かしている行は薄く、置ける先のまとまりは色を付ける */
table.netedit tbody tr[data-drag]:not(.is-editing) { cursor: grab; }
table.netedit tbody tr.is-dragging { opacity: .4; }
table.netedit tbody tr.is-drop td { background: var(--accent-weak); }
/* 入力欄の中の文字（枠 1px + 余白 6px）と、入力欄の無いセルの文字（.cv）・列の見出しの頭をそろえる */
table.netedit td .cv { padding-left: 7px; }
table.netedit thead th:not(.act) { padding-left: 15px; }
table.netedit tbody tr.is-editing td { background: var(--accent-weak); cursor: default; }
table.netedit tbody tr.is-saving td { opacity: .6; }
table.netedit td.act { text-align: right; white-space: nowrap; }
table.netedit td.act .btn + .btn { margin-left: 4px; }
/* DNS は IP アドレスごとにまとめる。まとまりの1行目（サーバー名）の上に線を引き、名前を太字にする */
table.netedit tbody tr.grouphead td { border-top: 1px solid var(--line-strong); }
table.netedit tbody tr.grouphead td.hostname { font-weight: 600; }
table.netedit tbody tr.grouphead td.hostname .pill { font-weight: 500; }
/* 追加などの入力欄（toolbar の中の field）。メモの欄は残りの幅に広げる */
.toolbar .field.grow { flex: 1 1 200px; }
.toolbar .field.grow input { flex: 1; }
.card-pad > .toolbar:last-child { margin-bottom: 0; }
/* 説明の番号付きの一覧 */
.card-pad .note ol { margin: 0 0 6px; padding-left: 18px; color: var(--fg); }
/* phpMyAdmin を本文いっぱいに出す */
.page.fill > iframe { flex: 1 1 auto; width: 100%; border: 0; border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow); }
/* ボタン・見出しのアイコン（見て分かりやすくするため） */
.btn .tabicon { width: 13px; height: 13px; margin-right: 4px; }
/* 見出しにアイコンを付けたので、見出し・補足・ボタンは上下の真ん中でそろえる */
.cardhead { align-items: center; }
.cardhead h2 { display: inline-flex; align-items: center; gap: 6px; }
.cardnote { display: inline-flex; align-items: center; }
.cardhead h2 .tabicon { width: 15px; height: 15px; color: var(--accent); }
.pagehead h1 { display: inline-flex; align-items: center; gap: 8px; }
.pagehead h1 .tabicon { width: 20px; height: 20px; color: var(--accent); }
/* DHCP の貸し出し中の印（登録の名前の左）。貸し出し中は緑の点（.hostchip .dot と同じ）、そうでなければ薄い輪 */
.namecell { display: flex; align-items: center; gap: 7px; }
.leasemark {
	flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	border: 1.5px solid var(--line-strong); background: transparent; vertical-align: 1px;
}
.leasemark.is-on {
	border-color: var(--ok); background: var(--ok);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
}
.cardnote .leasemark { margin-right: 5px; vertical-align: 0; }
/* チェックした・回復したアラートの行は薄く（TcAlert） */
table.tbl tbody tr.is-mute td { color: var(--fg-mute); }
/* 位置をそろえるためだけの見えないボタン（DNS の「追加」の横の位置。WebNetConf） */
.btn.is-ghost { visibility: hidden; }
/* 表の中で、選択欄の中の文字（枠 1px + 余白 8px）と頭をそろえる文字（選択欄の無い行。アカウントの自分の行など） */
table.tbl td .selv { padding-left: 9px; }
/* 表（リスト）の列の左右の余白は、すべての表で 8px（操作の列 td.act も同じ） */
table.tbl th, table.tbl td, table.tbl td.act, table.tbl th.act { padding-left: 8px; padding-right: 8px; }
/* 表の中の入力欄・選択欄・ボタン・札・アカウントの操作のフォームを、文字の下の線ではなく行の真ん中にそろえる（同じ行で上下がずれないように） */
table.tbl td input[type="text"], table.tbl td select, table.tbl td .btn { vertical-align: middle; }
.accountlist table.tbl form.actform { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.accountlist table.tbl form.actform label.field { gap: 3px; }
.accountlist table.tbl form.actform input[type="checkbox"] { margin: 0; }
.accountlist table.tbl td .pill { vertical-align: middle; }
/* 開発用（環境変数 TECLAB_ENV=dev。TcAdmin が <html> に is-dev を付ける）は、本番と見分けられるよう */
/* 画面の端を内側へ薄れていく淡いオレンジにし、右下に「開発」と出す（クリックは下に通す） */
html.is-dev::before {
	content: ''; position: fixed; inset: 0; z-index: 2147483646;
	box-shadow: inset 0 0 0 1px rgba(249,115,22,.8), inset 0 0 36px 6px rgba(249,115,22,.5); pointer-events: none;
}
html.is-dev::after {
	content: '開発'; position: fixed; right: 8px; bottom: 8px; z-index: 2147483647;
	padding: 1px 10px 2px 12px; border-radius: 6px 0 0 0; background: #f97316; color: #fff;
	font-size: 12px; font-weight: 700; line-height: 1.5; pointer-events: none;
}
/* 本番の印（TcAdmin::$m_prod_mark の色のサイトだけ。<html> の is-prod-色）は、開発用と同じ形で淡く。右下の印は出さない */
/* blue = planner（--accent の #3b6ef5）、green = admin（--ok の #0f9b6c。青より薄め） */
html.is-prod-blue::before {
	content: ''; position: fixed; inset: 0; z-index: 2147483646;
	box-shadow: inset 0 0 0 1px rgba(59,110,245,.55), inset 0 0 36px 6px rgba(59,110,245,.32); pointer-events: none;
}
html.is-prod-green::before {
	content: ''; position: fixed; inset: 0; z-index: 2147483646;
	box-shadow: inset 0 0 0 1px rgba(15,155,108,.4), inset 0 0 36px 6px rgba(15,155,108,.22); pointer-events: none;
}
/* メンテナンス予定のお知らせ（TcMaintenance。上のバーの下） */
.tc-maint {
	flex: 0 0 auto; padding: 8px 16px; text-align: center; font-size: 13px; font-weight: 700;
	color: var(--warn); background: var(--warn-bg); border-bottom: 1px solid var(--line);
}