/**
 * ConPane - スタイル
 * /conpane （OS風アカウントコンソール）専用。.cp 配下にすべてのスタイルを閉じ込める。
 */

/* ---------- サイト側のレイアウトを止める ---------- */

html.cp-locked,
html.cp-locked body {
	overflow: hidden;
	height: 100%;
}

html.cp-locked .page {
	display: none !important;
}

/* サイト側の button / a の既定スタイルを打ち消す（各コンポーネント側で指定する） */
button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 15px;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: normal;
	text-align: inherit;
	transition: none;
}

a:hover {
	font-weight: inherit;
}

/* hidden 属性はクラス指定の display より優先する（フォームの出し分け用） */
.cp [hidden] {
	display: none !important;
}

/* ---------- 変数 ---------- */

.cp {
	--cp-accent: #3b82f6;
	--cp-accent-soft: #60a5fa;
	--cp-accent-fg: #ffffff;
	--cp-mono: "IBM Plex Mono",Consolas,"Courier New",monospace;
	--cp-taskbar-h: 46px;
	--cp-titlebar-h: 38px;
	--cp-radius: 15px;
	--cp-shadow: 0 20px 60px rgba(0,0,0,.45);
	/* デスクトップアイコンの色（背景に応じて data-icon-tone で切り替える） */
	--cp-icon-fg: #ffffff;
	--cp-icon-box: rgba(255,255,255,.16);
	--cp-icon-box-ring: rgba(255,255,255,.18);
	--cp-icon-shadow: 0 1px 3px rgba(0,0,0,.65);
	--cp-icon-hover: rgba(255,255,255,.14);
	--cp-icon-hover-ring: rgba(255,255,255,.2);
	position: fixed;
	inset: 0;
	z-index: 10000;
	color: var(--cp-text);
	overflow: hidden;
	overscroll-behavior: none;
	-webkit-tap-highlight-color: transparent;
	/* 長押しで iOS の callout（リンクのプレビュー等）が出ないようにする */
	-webkit-touch-callout: none;
}

.cp *,
.cp *::before,
.cp *::after {
	box-sizing: border-box;
}

/* ダークテーマはサイト側（dark.css）の深緑に合わせる */
.cp[data-theme="dark"] {
	--cp-text: #e0e0e0;
	--cp-text-dim: #9db5a3;
	--cp-surface: rgba(18,34,26,.94);
	--cp-surface-2: rgba(26,42,30,.92);
	--cp-surface-3: rgba(36,54,40,.88);
	--cp-border: #2a3a2e;
	--cp-hover: rgba(129,199,132,.12);
	--cp-titlebar: rgba(15,26,19,.94);
	--cp-titlebar-active: rgba(24,42,30,.97);
	--cp-taskbar: rgba(11,20,14,.82);
	--cp-panel: rgba(14,26,20,.95);
	--cp-input-bg: rgba(15,23,18,.92);
	--cp-boot-bg: #0e1a14;
	--cp-accent: #4caf50;
	--cp-accent-soft: #81c784;
}

/* アイコンの白/黒（アイコン1つずつ、下の背景に合わせて切り替える） */
.cp[data-icon-tone="light"],
.cp-icon[data-tone="light"] {
	--cp-icon-fg: #ffffff;
	--cp-icon-box: rgba(255,255,255,.16);
	--cp-icon-box-ring: rgba(255,255,255,.18);
	--cp-icon-shadow: 0 1px 3px rgba(0,0,0,.65);
	--cp-icon-hover: rgba(255,255,255,.14);
	--cp-icon-hover-ring: rgba(255,255,255,.2);
}

.cp[data-icon-tone="dark"],
.cp-icon[data-tone="dark"] {
	--cp-icon-fg: #0f141d;
	--cp-icon-box: rgba(255,255,255,.62);
	--cp-icon-box-ring: rgba(255,255,255,.75);
	--cp-icon-shadow: 0 1px 2px rgba(255,255,255,.85);
	--cp-icon-hover: rgba(0,0,0,.10);
	--cp-icon-hover-ring: rgba(0,0,0,.14);
}

.cp[data-theme="light"] {
	--cp-text: #14181f;
	--cp-text-dim: #5b6572;
	--cp-surface: rgba(252,253,255,.96);
	--cp-surface-2: rgba(240,243,248,.95);
	--cp-surface-3: rgba(226,231,240,.95);
	--cp-border: rgba(15,23,42,.14);
	--cp-hover: rgba(15,23,42,.07);
	--cp-titlebar: rgba(238,241,247,.95);
	--cp-titlebar-active: rgba(255,255,255,.98);
	--cp-taskbar: rgba(244,246,250,.82);
	--cp-panel: rgba(255,255,255,.97);
	--cp-input-bg: rgba(255,255,255,.9);
	--cp-boot-bg: #ffffff;
}

/* ---------- 壁紙 ---------- */

.cp-wallpaper {
	position: absolute;
	inset: 0;
	background-color: var(--cp-wallpaper-color,#141a26);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-color .4s ease;
}

/* 壁紙は「単色」か「現地調査の画像」の2種類（画像はJSが background-image を設定する） */
.cp[data-wallpaper="solid"] .cp-wallpaper {
	background-image: none;
}

/* ---------- デスクトップ ---------- */

.cp-desktop {
	position: absolute;
	inset: 0 0 var(--cp-taskbar-h) 0;
	padding: 18px;
	overflow: hidden;
	outline: none;
}

.cp-icons {
	position: absolute;
	inset: 0;
	/* 範囲選択中にブラウザーのスクロールや文字選択が始まらないようにする */
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.cp-icon {
	position: absolute;
	width: 96px;
	/* 高さを揃えて、グリッドに等間隔で並ぶようにする */
	height: 104px;
	touch-action: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 8px 6px 6px;
	border: 1px solid transparent;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-icon-fg);
	font-family: inherit;
	font-size: 12px;
	line-height: 1.3;
	cursor: pointer;
	transition: background .12s ease,border-color .12s ease;
}

.cp-icon:hover {
	background: var(--cp-icon-hover);
	border-color: var(--cp-icon-hover-ring);
}

.cp-icon.is-selected {
	background: color-mix(in srgb,var(--cp-accent) 42%,transparent);
	border-color: var(--cp-accent-soft);
}

.cp-icon.is-dragging {
	z-index: 5;
	opacity: .85;
	cursor: grabbing;
}

/* グリッドへ吸着するときだけ移動をなめらかにする（ドラッグ中は即時追従） */
.cp-icon.is-snapping {
	transition: left .18s ease,top .18s ease,background .12s ease,border-color .12s ease;
}

/* 範囲選択（OS風のラバーバンド）。アクセント色に追従する */
.cp-marquee {
	position: absolute;
	z-index: 0;
	border: 1px solid var(--cp-accent);
	border-radius: 2px;
	background: color-mix(in srgb,var(--cp-accent) 26%,transparent);
	pointer-events: none;
}

.cp-icon-img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	font-size: 24px;
	border-radius: 15px;
	background: var(--cp-icon-box);
	box-shadow: inset 0 0 0 1px var(--cp-icon-box-ring);
	color: var(--cp-icon-fg);
}

.cp-icon--error .cp-icon-img {
	background: rgba(239,68,68,.35);
}

.cp-icon-label {
	/* 2行までにして高さを一定に保つ */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 2.6em;
	text-align: center;
	word-break: break-word;
	text-shadow: var(--cp-icon-shadow);
	font-size: 11.5px;
	line-height: 1.3;
}

.cp-desktop-empty {
	color: var(--cp-icon-fg);
	opacity: .8;
	font-size: 13px;
}

/* ---------- ウィンドウ ---------- */

.cp-windows {
	position: absolute;
	inset: 0 0 var(--cp-taskbar-h) 0;
	z-index: 300;
	/* ウィンドウが無い場所のクリックはデスクトップへ通す */
	pointer-events: none;
}

.cp-window {
	position: absolute;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	min-width: 300px;
	min-height: 180px;
	background: var(--cp-surface);
	color: var(--cp-text);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	overflow: hidden;
	opacity: 0;
	transform: scale(.97);
	transition: opacity .16s ease,transform .16s ease;
}

.cp-window--open {
	opacity: 1;
	transform: scale(1);
}

.cp-window--closed {
	opacity: 0;
	transform: scale(.97);
	pointer-events: none;
}

.cp-window[data-state="minimized"] {
	opacity: 0;
	transform: translateY(60px) scale(.92);
	pointer-events: none;
}

.cp-window[data-state="maximized"] {
	border-radius: 0;
	border-color: transparent;
}

.cp-window--active {
	box-shadow: var(--cp-shadow),0 0 0 1px var(--cp-accent);
}

.cp[data-animation="off"] .cp-window,
.cp[data-animation="off"] .cp-menu,
.cp[data-animation="off"] .cp-startmenu,
.cp[data-animation="off"] .cp-toast,
.cp[data-animation="off"] .cp-icon.is-snapping {
	transition: none !important;
	animation: none !important;
}

.cp-titlebar {
	display: flex;
	align-items: center;
	color: var(--cp-text);
	gap: 8px;
	height: var(--cp-titlebar-h);
	padding: 0 6px 0 12px;
	background: var(--cp-titlebar);
	border-bottom: 1px solid var(--cp-border);
	cursor: default;
	user-select: none;
	touch-action: none;
}

.cp-window--active .cp-titlebar {
	background: var(--cp-titlebar-active);
}

.cp-window-icon {
	display: grid;
	place-items: center;
	width: 18px;
	color: var(--cp-accent);
	font-size: 13px;
}

.cp-window-title {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cp-window-controls {
	display: flex;
	align-items: center;
	gap: 2px;
}

.cp-window-btn {
	width: 32px;
	height: 26px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text-dim);
	font-size: 12px;
	cursor: pointer;
	transition: background .12s ease,color .12s ease;
}

.cp-window-btn:hover {
	background: var(--cp-hover);
	color: var(--cp-text);
}

.cp-window-btn--close:hover {
	background: #e11d48;
	color: #fff;
}

.cp-window-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	background: var(--cp-surface);
}

.cp-resize {
	position: absolute;
	z-index: 3;
}

.cp-resize--n { top: -2px; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.cp-resize--s { bottom: -2px; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.cp-resize--e { right: -2px; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.cp-resize--w { left: -2px; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.cp-resize--ne { top: -2px; right: -2px; width: 14px; height: 14px; cursor: nesw-resize; }
.cp-resize--nw { top: -2px; left: -2px; width: 14px; height: 14px; cursor: nwse-resize; }
.cp-resize--se { bottom: -2px; right: -2px; width: 14px; height: 14px; cursor: nwse-resize; }
.cp-resize--sw { bottom: -2px; left: -2px; width: 14px; height: 14px; cursor: nesw-resize; }

.cp-window[data-state="maximized"] .cp-resize {
	display: none;
}

body.cp-dragging,
body.cp-resizing {
	cursor: grabbing;
	user-select: none;
}

.cp-snap-preview {
	position: absolute;
	z-index: 250;
	border-radius: 15px;
	background: color-mix(in srgb,var(--cp-accent) 22%,transparent);
	outline: 2px solid var(--cp-accent);
	outline-offset: -10px;
	box-shadow: 0 0 0 9999px rgba(0,0,0,.05);
	pointer-events: none;
	transition: left .12s ease,top .12s ease,width .12s ease,height .12s ease;
}

/* ---------- タスクバー ---------- */

.cp-taskbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--cp-taskbar-h);
	padding: 0 8px;
	background: var(--cp-taskbar);
	border-top: 1px solid var(--cp-border);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	color: var(--cp-text);
}

.cp-start {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 14px;
	border: 0;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .12s ease,border-color .12s ease;
}

.cp-start:hover {
	background: var(--cp-hover);
}

/* アクティブ時はタスクバーのアプリボタンと同じ見た目にする */
.cp-start.is-active {
	background: color-mix(in srgb,var(--cp-accent) 24%,transparent);
	border-color: color-mix(in srgb,var(--cp-accent) 55%,transparent);
	color: var(--cp-text);
}

.cp-tasks {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.cp-task {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 200px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text-dim);
	font-family: inherit;
	font-size: 12.5px;
	cursor: pointer;
	transition: background .12s ease,border-color .12s ease,color .12s ease;
}

.cp-task:hover {
	background: var(--cp-hover);
	color: var(--cp-text);
}

.cp-task.is-active {
	background: color-mix(in srgb,var(--cp-accent) 24%,transparent);
	border-color: color-mix(in srgb,var(--cp-accent) 55%,transparent);
	color: var(--cp-text);
}

.cp-task.is-minimized {
	opacity: .62;
}

.cp-task-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cp-tray {
	display: flex;
	align-items: center;
	gap: 4px;
}

.cp-tray-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text);
	font-family: inherit;
	font-size: 12.5px;
	cursor: pointer;
	transition: background .12s ease;
}

.cp-tray-item:hover {
	background: var(--cp-hover);
}

.cp-tray-item em {
	font-style: normal;
	color: var(--cp-text-dim);
	font-size: 11.5px;
}

.cp-clock {
	position: relative;
	display: grid;
	align-content: center;
	justify-items: end;
	gap: 1px;
	line-height: 1.15;
	padding: 0 12px;
}

.cp-clock strong {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.15;
}

.cp-clock small {
	font-size: 10.5px;
	line-height: 1.15;
	color: var(--cp-text-dim);
}

.cp-clock.is-active {
	background: var(--cp-hover);
}

/* フォーカス中は時計の右上に動く印を出す */
.cp-clock.is-focus::after {
	content: "";
	position: absolute;
	top: 3px;
	right: 5px;
	width: 7px;
	height: 7px;
	border-radius: 15px;
	background: var(--cp-accent);
	box-shadow: 0 0 0 2px var(--cp-taskbar);
	animation: cp-focus-pulse 1.6s ease-in-out infinite;
}

/* ---------- スタートメニュー ---------- */

.cp-startmenu {
	position: absolute;
	left: 10px;
	bottom: calc(var(--cp-taskbar-h) + 8px);
	z-index: 950;
	width: min(420px,calc(100vw - 20px));
	max-height: min(70vh,620px);
	display: none;
	flex-direction: column;
	background: var(--cp-panel);
	border: 1px solid var(--cp-border);
	border-radius: 14px;
	box-shadow: var(--cp-shadow);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transform-origin: bottom left;
	transition: opacity .16s ease,transform .16s ease;
}

.cp-startmenu.is-open {
	display: flex;
	opacity: 1;
	transform: translateY(0) scale(1);
}

.cp-start-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid var(--cp-border);
}

.cp-avatar {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: color-mix(in srgb,var(--cp-accent) 30%,transparent);
	color: var(--cp-text);
	font-size: 17px;
}

.cp-start-user {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cp-start-user strong {
	font-size: 14px;
}

.cp-start-user small {
	color: var(--cp-text-dim);
	font-size: 11.5px;
}

.cp-start-apps {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 10px;
}

.cp-start-group {
	padding: 8px 8px 4px;
	color: var(--cp-text-dim);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

.cp-start-app {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--cp-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .12s ease;
}

.cp-start-app:hover {
	background: var(--cp-hover);
}

.cp-start-app.is-error {
	color: #f87171;
}

.cp-start-app-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 15px;
	background: var(--cp-surface-3);
	color: var(--cp-accent-soft);
}

.cp-start-app-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cp-start-app-body strong {
	font-size: 13px;
	font-weight: 600;
}

.cp-start-app-body small {
	color: var(--cp-text-dim);
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 280px;
}

.cp-start-footer {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px;
	border-top: 1px solid var(--cp-border);
	background: color-mix(in srgb,var(--cp-surface-2) 70%,transparent);
}

.cp-start-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 0;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text);
	font-family: inherit;
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
}

.cp-start-link:hover {
	background: var(--cp-hover);
}

/* ---------- コンテキストメニュー ---------- */

.cp-menu {
	position: absolute;
	z-index: 1400;
	/* .cp-windows など pointer-events:none の親に置かれても操作できるようにする */
	pointer-events: auto;
	min-width: 190px;
	padding: 6px;
	background: var(--cp-panel);
	border: 1px solid var(--cp-border);
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(0,0,0,.4);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	animation: cp-menu-in .12s ease;
}

@keyframes cp-menu-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

.cp-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text);
	font-family: inherit;
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
}

.cp-menu-item i {
	width: 14px;
	color: var(--cp-text-dim);
}

.cp-menu-item:hover:not(:disabled) {
	background: var(--cp-hover);
}

.cp-menu-item:disabled {
	opacity: .45;
	cursor: default;
}

.cp-menu-item--danger:hover:not(:disabled) {
	background: #e11d48;
	color: #fff;
}

.cp-menu-item--danger:hover:not(:disabled) i {
	color: #fff;
}

.cp-menu-sep {
	height: 1px;
	margin: 5px 6px;
	background: var(--cp-border);
}

/* ---------- トースト ---------- */

.cp-toasts {
	position: absolute;
	right: 12px;
	bottom: calc(var(--cp-taskbar-h) + 12px);
	z-index: 1500;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	pointer-events: none;
}

.cp-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 380px;
	padding: 11px 14px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-panel);
	color: var(--cp-text);
	font-size: 12.5px;
	box-shadow: 0 12px 30px rgba(0,0,0,.35);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .2s ease,transform .2s ease;
	pointer-events: auto;
	cursor: pointer;
}

.cp-toast.show {
	opacity: 1;
	transform: none;
}

.cp-toast--success i { color: #22c55e; }
.cp-toast--warn i { color: #f59e0b; }
.cp-toast--error i { color: #ef4444; }
.cp-toast--info i { color: var(--cp-accent-soft); }

/* ---------- 起動画面 ---------- */

.cp-boot {
	position: absolute;
	inset: 0;
	z-index: 2000;
	display: grid;
	place-items: center;
	/* data-theme はHTML内のスクリプトが描画前に決めるので、テーマ色をそのまま使う */
	background: var(--cp-boot-bg,#ffffff);
	color: var(--cp-text,#14181f);
	transition: opacity .45s ease,visibility .45s ease;
}

.cp-boot .cp-boot-status {
	color: var(--cp-text-dim,#5b6572);
}

.cp-boot.is-done {
	opacity: 0;
	visibility: hidden;
}

.cp-boot-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--cp-text);
}

.cp-boot-logo {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	border-radius: 20px;
	background: color-mix(in srgb,var(--cp-accent) 30%,transparent);
	color: var(--cp-text);
	font-size: 30px;
	animation: cp-pulse 1.6s ease-in-out infinite;
}

@keyframes cp-pulse {
	0%,100% { transform: scale(1); opacity: .9; }
	50% { transform: scale(1.06); opacity: 1; }
}

.cp-boot-name {
	font-size: 20px;
	letter-spacing: .08em;
}

.cp-boot-status {
	color: var(--cp-text-dim);
	font-size: 12.5px;
}

.cp-boot-status.is-error {
	color: #f87171;
}

/* ---------- アプリ共通UI ---------- */

.cp-app {
	padding: 18px 20px 22px;
	font-size: 13px;
	line-height: 1.7;
}

.cp-app h2 {
	margin: 0 0 6px;
	font-size: 17px;
}

.cp-app h3 {
	margin: 18px 0 8px;
	font-size: 13.5px;
	letter-spacing: .02em;
}

.cp-app p {
	margin: 0 0 10px;
}

.cp-muted {
	color: var(--cp-text-dim);
	font-size: 12px;
}

.cp-section {
	margin-bottom: 18px;
}

.cp-card {
	padding: 14px 16px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
}

.cp-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.cp-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* サイト側の button（角丸15px・ホバーで明るく・無効時はグレー）にそろえる */
.cp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-3);
	color: var(--cp-text);
	font-family: inherit;
	font-size: 12.5px;
	cursor: pointer;
	transition: filter .2s ease,background .2s ease;
}

.cp-btn:hover:not(:disabled) {
	filter: brightness(1.25);
}

.cp-btn:disabled {
	filter: grayscale(.6);
	opacity: .7;
	pointer-events: none;
	cursor: not-allowed;
}

.cp-btn--primary {
	border-color: transparent;
	background: var(--cp-accent);
	/* アクセントが白のときは黒文字にする */
	color: var(--cp-accent-fg,#fff);
}

.cp-btn--ghost {
	background: transparent;
}

/* サイト側のフォーム（css/style.css）と形をそろえる。
   余白と文字サイズだけはコンパネの密度に合わせて小さくしている。 */
.cp-input,
.cp-textarea,
.cp-select {
	width: 100%;
	padding: 8px 10px;
	border: 1.5px solid var(--cp-border);
	border-radius: 15px;
	background-color: var(--cp-input-bg);
	color: var(--cp-text);
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.7;
	caret-color: var(--cp-accent);
	transition: border-color .2s ease,box-shadow .2s ease;
}

.cp-input:focus,
.cp-textarea:focus,
.cp-select:focus {
	outline: none;
	border-color: var(--cp-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb,var(--cp-accent) 50%,transparent);
}

.cp-select {
	padding-right: 34px;
	background-image: url("../data/img/select.svg");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 1.1em;
	cursor: pointer;
}

.cp[data-theme="dark"] .cp-select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c8e6c9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* 開いたときの一覧（サイト側 ::picker(select) はライト固定なので、コンパネのテーマ色で上書きする） */
.cp-select::picker(select) {
	border: 1.5px solid var(--cp-border);
	border-radius: 15px;
	padding: 5px;
	background-color: var(--cp-input-bg);
	box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* サイト側は option に background:#fff と border-radius:15px を当てているため、ここで打ち消す */
.cp-select option {
	padding: 7px 10px;
	border: 0;
	border-radius: 10px;
	margin-top: 3px;
	background-color: transparent;
	color: var(--cp-text);
	transition: background .2s;
}

.cp-select option:hover {
	background-color: color-mix(in srgb,var(--cp-accent) 20%,transparent);
	color: var(--cp-text);
}

.cp-select option:checked {
	background-color: color-mix(in srgb,var(--cp-accent) 34%,transparent);
	color: var(--cp-text);
}

.cp-select option:disabled,
.cp-select:has(option:disabled:checked) {
	color: var(--cp-text-dim);
}

.cp-select optgroup {
	color: var(--cp-text);
}

.cp-textarea {
	min-height: 200px;
	resize: vertical;
	line-height: 1.7;
}

/* チェックボックス / ラジオ（サイト側 .input[type="checkbox"] と同じ形・アクセント色） */
.cp input[type="checkbox"],
.cp input[type="radio"] {
	flex: none;
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	border: 2px solid var(--cp-accent);
	border-radius: 50%;
	background-color: var(--cp-input-bg);
	vertical-align: middle;
	cursor: pointer;
	position: relative;
	transition: background .2s,border-color .2s;
}

.cp input[type="radio"] {
	border-radius: 50%;
}

.cp input[type="checkbox"]:checked {
	background-color: var(--cp-accent);
}

.cp input[type="checkbox"]:checked::after {
	font-family: var(--fa-family-classic,"Font Awesome 7 Free");
	font-weight: 900;
	content: "\f00c";
	color: var(--cp-accent-fg,#fff);
	font-size: 14px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.cp input[type="radio"]:checked::after {
	content: "";
	width: 10px;
	height: 10px;
	background-color: var(--cp-accent);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.cp input[type="checkbox"]:focus-visible,
.cp input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb,var(--cp-accent) 22%,transparent);
}

.cp input[type="file"]::file-selector-button {
	margin-right: 8px;
	padding: 4px 10px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	color: var(--cp-text);
	font-family: inherit;
	font-size: 11.5px;
	cursor: pointer;
	transition: filter .2s ease,background .2s ease;
}

.cp input[type="file"]::file-selector-button:hover {
	filter: brightness(1.25);
}

.cp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--cp-surface-3);
	color: var(--cp-text-dim);
	font-size: 11px;
}

.cp-badge--accent {
	background: color-mix(in srgb,var(--cp-accent) 26%,transparent);
	color: var(--cp-text);
}

.cp-kv {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin: 0;
	font-size: 12.5px;
}

.cp-kv dt {
	color: var(--cp-text-dim);
}

.cp-kv dd {
	margin: 0;
	font-weight: 600;
}

.cp-error {
	margin: 16px;
	padding: 12px 14px;
	border: 1px solid rgba(239,68,68,.5);
	border-radius: 15px;
	background: rgba(239,68,68,.12);
	color: #fca5a5;
	font-size: 12.5px;
}

/* ---------- 各アプリ ---------- */

.cp-notepad {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
}

.cp-notepad .cp-textarea {
	flex: 1;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--cp-mono);
	font-size: 13px;
	resize: none;
	outline: none;
}

.cp-notepad-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 12px;
	border-top: 1px solid var(--cp-border);
	background: var(--cp-surface-2);
	color: var(--cp-text-dim);
	font-size: 11.5px;
}

/* メモ帳: 上部のリボンとタブ */

.cp-notepad-ribbon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border-bottom: 1px solid var(--cp-border);
	background: var(--cp-surface-2);
}

.cp-notepad-sep {
	width: 1px;
	height: 20px;
	margin: 0 2px;
	background: var(--cp-border);
}

.cp-notepad-search {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--cp-text-dim);
}

.cp-notepad-search .cp-input {
	width: 150px;
	padding: 4px 8px;
	font-size: 12px;
}

.cp-notepad-ribbon .cp-btn.is-active {
	border-color: var(--cp-accent);
	background: color-mix(in srgb,var(--cp-accent) 22%,transparent);
}

.cp-notepad-tabs {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	padding: 6px 8px 0;
	overflow-x: auto;
	scrollbar-width: thin;
	background: var(--cp-surface-2);
	border-bottom: 1px solid var(--cp-border);
}

.cp-note-tab-item {
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
	border: 1px solid var(--cp-border);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background: var(--cp-surface-3);
	overflow: hidden;
}

.cp-note-tab-item.is-active {
	background: var(--cp-surface);
	border-color: color-mix(in srgb,var(--cp-accent) 45%,transparent);
	box-shadow: inset 0 2px 0 var(--cp-accent);
}

.cp-note-tab {
	display: flex;
	align-items: center;
	max-width: 180px;
	padding: 6px 8px 6px 10px;
	border: 0;
	background: none;
	color: var(--cp-text-dim);
	font-family: inherit;
	font-size: 12px;
	white-space: nowrap;
	cursor: pointer;
}

.cp-note-tab-item.is-active .cp-note-tab {
	color: var(--cp-text);
}

.cp-note-tab:hover {
	background: var(--cp-hover);
}

.cp-note-tab-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.cp-note-tab-close {
	display: grid;
	place-items: center;
	width: 22px;
	border: 0;
	background: none;
	color: var(--cp-text-dim);
	font-size: 11px;
	cursor: pointer;
}

.cp-note-tab-close:hover {
	background: #e11d48;
	color: #fff;
}

.cp-note-tab-add {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-bottom: 0;
	border: 1px solid transparent;
	border-radius: 10px 10px 0 0;
	background: none;
	color: var(--cp-text-dim);
	cursor: pointer;
}

.cp-note-tab-add:hover {
	background: var(--cp-hover);
	color: var(--cp-text);
}

/* 折り返しオフのときは横スクロールにする */
.cp-notepad .cp-textarea[wrap="off"] {
	white-space: pre;
	overflow-x: auto;
}


.cp-settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
	gap: 10px;
}

.cp-choice {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 8px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	color: var(--cp-text);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	transition: border-color .12s ease,background .12s ease;
}

.cp-choice:hover {
	background: var(--cp-surface-3);
}

.cp-choice.is-active {
	border-color: var(--cp-accent);
	box-shadow: 0 0 0 1px var(--cp-accent);
}

.cp-swatch {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.cp-wallpaper-preview {
	width: 100%;
	height: 54px;
	border-radius: 15px;
	background-image: var(--cp-wallpaper);
	background-size: cover;
	background-position: center;
}

.cp-account-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.cp-account-avatar {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: color-mix(in srgb,var(--cp-accent) 30%,transparent);
	color: var(--cp-text);
	font-size: 24px;
}

.cp-app-list {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
	gap: 10px;
}

.cp-app-tile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	color: var(--cp-text);
	text-decoration: none;
	font-size: 12.5px;
	transition: background .12s ease,border-color .12s ease;
}

.cp-app-tile:hover {
	background: var(--cp-surface-3);
	border-color: var(--cp-accent);
}

.cp-app-tile i {
	color: var(--cp-accent-soft);
}

.cp-link-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cp-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text);
	text-decoration: none;
	font-size: 12.5px;
}

.cp-link:hover {
	background: var(--cp-hover);
	border-color: var(--cp-accent);
}

.cp-link i:first-child {
	width: 16px;
	color: var(--cp-accent-soft);
}

.cp-link small {
	margin-left: auto;
	color: var(--cp-text-dim);
}

.cp-keys {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 14px;
	font-size: 12.5px;
}

.cp-key {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--cp-border);
	border-bottom-width: 2px;
	border-radius: 15px;
	background: var(--cp-surface-3);
	font-family: var(--cp-mono);
	font-size: 11.5px;
}

/* ---------- レスポンシブ ---------- */

@media (max-width: 760px) {
	.cp-start span,
	.cp-task-label {
		display: none;
	}

	.cp-user span,
	.cp-user em {
		display: none;
	}

	.cp-icon {
		width: 78px;
	}

	.cp-task {
		max-width: 54px;
		padding: 0 10px;
	}

	.cp-clock {
		padding: 0 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp * {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}
/* ---------- 時計ポップアップ ---------- */

.cp-clock-popup {
	position: absolute;
	right: 10px;
	bottom: calc(var(--cp-taskbar-h) + 8px);
	z-index: 950;
	width: 320px;
	padding: 16px;
	background: var(--cp-panel);
	border: 1px solid var(--cp-border);
	border-radius: 14px;
	box-shadow: var(--cp-shadow);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	transform-origin: bottom right;

	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(.96);
	filter: blur(4px);

	transition:
		opacity .18s ease,
		transform .22s cubic-bezier(.2, .8, .2, 1),
		filter .22s ease,
		visibility 0s linear .22s;
	will-change: opacity, transform;
}

.cp-clock-popup.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	filter: blur(0);

	transition:
		opacity .22s ease,
		transform .32s cubic-bezier(.16, 1, .3, 1),
		filter .28s ease,
		visibility 0s;
}

.cp-clock-now {
	display: flex;
	align-items: baseline;
	gap: 3px;
	font-variant-numeric: tabular-nums;
}

.cp-clock-now strong {
	font-size: 42px;
	font-weight: 700;
	line-height: 1.05;
}

.cp-clock-now small {
	font-size: 17px;
	color: var(--cp-text-dim);
}

.cp-clock-date {
	margin: 2px 0 14px;
	color: var(--cp-text-dim);
	font-size: 12px;
}

.cp-calendar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 13px;
}

.cp-calendar-nav {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	color: var(--cp-text);
	font-size: 12px;
}

.cp-calendar-nav:hover {
	background: var(--cp-surface-3);
	border-color: var(--cp-accent);
}

.cp-calendar-week,
.cp-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7,1fr);
	text-align: center;
}

.cp-calendar-week span {
	padding: 4px 0;
	color: var(--cp-text-dim);
	font-size: 11px;
}

.cp-calendar-grid span {
	padding: 6px 0;
	border-radius: 15px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.cp-calendar-grid .is-empty {
	opacity: .25;
}

.cp-calendar-grid .is-sunday {
	color: #f87171;
}

.cp-calendar-grid .is-saturday {
	color: #60a5fa;
}

.cp-calendar-grid .is-today {
	background: var(--cp-accent);
	color: var(--cp-accent-fg,#fff);
	font-weight: 700;
}

/* ---------- ダイアログ ---------- */

.cp-dialog-overlay {
	position: absolute;
	inset: 0;
	z-index: 1600;
	display: grid;
	place-items: center;
	background: rgba(0,0,0,.35);
	opacity: 0;
	transition: opacity .16s ease;
}

.cp-dialog-overlay.show {
	opacity: 1;
}

.cp-dialog {
	width: min(420px,calc(100vw - 40px));
	padding: 20px;
	background: var(--cp-panel);
	border: 1px solid var(--cp-border);
	border-radius: 14px;
	box-shadow: var(--cp-shadow);
}

.cp-dialog-title {
	margin: 0 0 8px;
	font-size: 15px;
}

.cp-dialog-body {
	color: var(--cp-text-dim);
	font-size: 12.5px;
	line-height: 1.7;
}

.cp-dialog-body p {
	margin: 0;
}

.cp-dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}

.cp-btn--danger {
	border-color: transparent;
	background: #e11d48;
	color: #fff;
}

/* ---------- 設定アプリ ---------- */

.cp-swatches {
	display: grid;
	/* 窓を最大化しても1つ1つが巨大化しないよう、1マスの上限を決めておく（幅が足りないときは縮む） */
	grid-template-columns: repeat(10,minmax(0,48px));
	justify-content: start;
	gap: 7px;
}

.cp-swatch-btn {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 50%;
	background: none;
	transition: border-color .12s ease;
}

.cp-swatch-btn span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	/* 白や黒のスウォッチでも見えるように、テーマ色でふち取る */
	box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--cp-text) 28%,transparent);
}

.cp-swatch-btn.is-active {
	border-color: var(--cp-text);
}

.cp-swatch-btn.is-active::after {
	content: "\f00c";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--cp-swatch-check,#fff);
	font-family: var(--fa-family-classic,"Font Awesome 7 Free");
	font-size: 11px;
	font-weight: 900;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.cp-color-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	font-size: 12.5px;
}

.cp-color-input {
	width: 52px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	cursor: pointer;
}

.cp-color-input::-webkit-color-swatch-wrapper {
	padding: 3px;
}

.cp-color-input::-webkit-color-swatch {
	border: none;
	border-radius: 15px;
}

.cp-wallpaper-shot {
	width: 100%;
	height: 160px;
	border-radius: 15px;
	background-color: var(--cp-surface-3);
	background-size: cover;
	background-position: center;
}

.cp-code {
	font-family: var(--cp-mono);
	font-size: 11.5px;
}

/* ---------- 設定アプリ（左メニュー / 右メイン） ---------- */

.cp-settings {
	display: flex;
	height: 100%;
	min-height: 0;
}

.cp-settings-nav {
	flex: 0 0 190px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 10px;
	border-right: 1px solid var(--cp-border);
	background: var(--cp-surface-2);
	overflow-y: auto;
}

.cp-settings-nav button {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid transparent;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text);
	font-family: inherit;
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
	transition: background .12s ease,border-color .12s ease;
}

.cp-settings-nav button i {
	width: 16px;
	color: var(--cp-text-dim);
}

.cp-settings-nav button:hover {
	background: var(--cp-hover);
}

.cp-settings-nav button.is-active {
	background: color-mix(in srgb,var(--cp-accent) 22%,transparent);
	border-color: color-mix(in srgb,var(--cp-accent) 45%,transparent);
	font-weight: 600;
}

.cp-settings-nav button.is-active i {
	color: var(--cp-accent-soft);
}

.cp-settings-main {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
}

.cp-settings-main .cp-app {
	padding: 16px 20px 24px;
}

.cp-settings-title {
	margin: 0 0 12px;
	font-size: 15px;
}

@media (max-width: 640px) {
	.cp-settings {
		flex-direction: column;
	}

	/* 左メニューは横スクロールのタブバーにして、縦の占有を詰める */
	.cp-settings-nav {
		flex: 0 0 auto;
		flex-direction: row;
		gap: 4px;
		padding: 6px 8px;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--cp-border);
		scrollbar-width: none;
	}

	.cp-settings-nav::-webkit-scrollbar {
		display: none;
	}

	.cp-settings-nav button {
		flex: 0 0 auto;
		gap: 6px;
		padding: 7px 11px;
		white-space: nowrap;
	}

	.cp-settings-nav button span {
		display: none;
	}

	/* 見出しはタブと重複するのでスマホでは省く */
	.cp-settings-title {
		display: none;
	}

	.cp-settings-main .cp-app,
	.cp-admin-body {
		padding: 12px 14px 20px;
	}
}

/* ---------- アカウント系アプリ共通 ---------- */

.cp-app .fa-spinner {
	animation: cp-spin 1s linear infinite;
}

@keyframes cp-spin {
	to { transform: rotate(360deg); }
}

.cp-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
}

.cp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.cp-table th,
.cp-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--cp-border);
	text-align: left;
	white-space: nowrap;
}

.cp-table thead th {
	background: var(--cp-surface-2);
	color: var(--cp-text-dim);
	font-weight: 600;
}

.cp-table tbody tr:last-child td {
	border-bottom: 0;
}

.cp-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.cp-num.is-plus { color: #22c55e; }
.cp-num.is-minus { color: #ef4444; }

.cp-point-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cp-point-value {
	font-size: 34px;
	line-height: 1.1;
}

.cp-point-value small {
	margin-left: 4px;
	color: var(--cp-text-dim);
	font-size: 14px;
}

.cp-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	font-size: 12.5px;
}

.cp-list-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	color: var(--cp-text);
	text-decoration: none;
	font-size: 12.5px;
}

.cp-list-item.is-unread {
	border-color: color-mix(in srgb,var(--cp-accent) 50%,transparent);
	background: color-mix(in srgb,var(--cp-accent) 12%,var(--cp-surface-2));
}

.cp-list-item--link:hover {
	border-color: var(--cp-accent);
}

.cp-list-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background: var(--cp-surface-3);
	color: var(--cp-accent-soft);
}

.cp-list-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.cp-list-body small {
	color: var(--cp-text-dim);
	font-size: 11.5px;
}

/* お知らせ */

.cp-notice {
	display: flex;
	height: 100%;
	min-height: 0;
}

.cp-notice-list {
	flex: 0 0 290px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 8px 10px;
	border-right: 1px solid var(--cp-border);
	background: var(--cp-surface-2);
	overflow-y: auto;
}

.cp-notice-item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px;
	border: 1px solid transparent;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.cp-notice-item:hover { background: var(--cp-hover); }

.cp-notice-item.is-active {
	background: color-mix(in srgb,var(--cp-accent) 18%,transparent);
	border-color: color-mix(in srgb,var(--cp-accent) 45%,transparent);
}

.cp-notice-item strong { font-size: 12.5px; }
.cp-notice-item small { color: var(--cp-text-dim); font-size: 11px; }

.cp-notice-type {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: fit-content;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--cp-surface-3);
	color: var(--cp-text-dim);
	font-size: 10.5px;
}

.cp-notice-type--alert { background: rgba(239,68,68,.18); color: #f87171; }
.cp-notice-type--maintenance { background: rgba(245,158,11,.18); color: #fbbf24; }
.cp-notice-type--issue { background: rgba(168,85,247,.18); color: #c084fc; }

.cp-notice-body {
	flex: 1;
	min-width: 0;
	padding: 16px 18px;
	overflow-y: auto;
}

.cp-notice-body h3 { margin-top: 0; }

.cp-notice-content {
	font-size: 13px;
	line-height: 1.85;
}

/* リンク共有 */

.cp-link-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cp-link-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
}

.cp-link-row-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background: var(--cp-surface-3);
	color: var(--cp-accent-soft);
}

.cp-link-row-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.cp-link-row-body strong { font-size: 12.5px; }

.cp-link-row-body a {
	color: var(--cp-text-dim);
	font-size: 11.5px;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cp-link-row-body a:hover {
	color: var(--cp-accent-soft);
	text-decoration: underline;
}

/* フォーム部品 */

.cp-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
	gap: 10px;
}

.cp-form-grid label,
.cp-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: var(--cp-text-dim);
	font-size: 12px;
}

/* チェックボックス付きラベル（予備調査のレイアウト .cp-check とは別物） */
.cp-check-inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cp-text);
	font-size: 12.5px;
	cursor: pointer;
}

/* プロフィール */

.cp-profile {
	display: flex;
	align-items: center;
	gap: 16px;
}

.cp-profile-avatar {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	object-fit: cover;
	background: var(--cp-surface-3);
}

.cp-badge.is-ok { background: rgba(34,197,94,.18); color: #4ade80; }
.cp-badge.is-warn { background: rgba(245,158,11,.18); color: #fbbf24; }
.cp-badge.is-bad { background: rgba(239,68,68,.18); color: #f87171; }

/* ---------- 予備調査 ---------- */

/* 2ペインのアプリはウィンドウ側をスクロールさせず、ペイン内でスクロールする */
.cp-window-body:has(> .cp-check),
.cp-window-body:has(> .cp-notice) {
	overflow: hidden;
}

.cp-check {
	display: flex;
	height: 100%;
	min-height: 0;
}

.cp-check-list {
	flex: 0 0 280px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	border-right: 1px solid var(--cp-border);
	background: var(--cp-surface-2);
	overflow: hidden;
}

.cp-check-search {
	display: flex;
	gap: 6px;
}

.cp-check-search .cp-input {
	flex: 1;
}

.cp-check-count {
	font-size: 11px;
}

.cp-check-items {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
}

.cp-check-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.cp-check-item:hover {
	background: var(--cp-hover);
}

.cp-check-item.is-active {
	background: color-mix(in srgb,var(--cp-accent) 18%,transparent);
	border-color: color-mix(in srgb,var(--cp-accent) 45%,transparent);
}

.cp-check-item strong { font-size: 12.5px; }
.cp-check-item small { color: var(--cp-text-dim); font-size: 11px; }

.cp-check-main {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
}

.cp-required {
	color: #f87171;
}

/* ---------- 現地調査 ---------- */

.cp-survey-item {
	margin-bottom: 10px;
	padding: 12px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
}

.cp-survey-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.cp-survey-memo {
	margin: 8px 0;
	font-size: 12.5px;
	line-height: 1.7;
	white-space: pre-wrap;
}

.cp-survey-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
}

.cp-survey-thumbs img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 15px;
	border: 1px solid var(--cp-border);
}

.cp-thumb {
	position: relative;
	display: inline-flex;
}

.cp-thumb-remove {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #e11d48;
	color: #fff;
	font-size: 10px;
	cursor: pointer;
}

.cp-thumb .cp-thumb-remove {
	position: absolute;
	top: -6px;
	right: -6px;
}

.cp-badge .cp-thumb-remove {
	width: 16px;
	height: 16px;
	margin-left: 4px;
}

/* ---------- 管理パネル ---------- */

@media (min-width: 641px) {
	.cp-admin .cp-settings-nav {
		flex-basis: 210px;
	}
}

.cp-admin-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.cp-admin-toolbar .cp-input {
	flex: 1 1 260px;
	min-width: 200px;
}

.cp-admin-pager {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0;
	color: var(--cp-text-dim);
	font-size: 12px;
}

.cp-admin-sort {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.cp-admin-sort:hover {
	color: var(--cp-accent-soft);
}

.cp-admin-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
	padding: 10px 12px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	font-size: 12.5px;
}

.cp-admin-status > div {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cp-admin-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
	gap: 10px;
}

.cp-admin-tile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	color: var(--cp-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .12s ease,background .12s ease,transform .12s ease;
}

.cp-admin-tile:hover {
	border-color: color-mix(in srgb,var(--cp-accent) 45%,transparent);
	background: var(--cp-hover);
	transform: translateY(-1px);
}

.cp-admin-tile-icon {
	display: grid;
	place-items: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 15px;
	background: color-mix(in srgb,var(--cp-accent) 20%,transparent);
	color: var(--cp-accent-soft);
	font-size: 16px;
}

.cp-admin-tile-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cp-admin-tile-text strong {
	font-size: 13px;
}

.cp-admin-tile-text small {
	color: var(--cp-text-dim);
	font-size: 11.5px;
}

.cp-admin-form {
	display: grid;
	gap: 12px;
	max-width: 520px;
}

.cp-btn--small {
	padding: 4px 10px;
	border-radius: 15px;
	font-size: 11.5px;
}

.cp-admin-link {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cp-accent-soft);
	font: inherit;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

.cp-admin-pre {
	margin: 0 0 12px;
	padding: 12px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-input-bg);
	color: var(--cp-text);
	font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
	font-size: 12px;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 380px;
	overflow: auto;
}

.cp-admin-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

/* ---------- ログイン ---------- */

.cp-login-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.cp-login-icon {
	display: grid;
	place-items: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 15px;
	background: color-mix(in srgb,var(--cp-accent) 20%,transparent);
	color: var(--cp-accent-soft);
	font-size: 18px;
}

.cp-login-form {
	display: grid;
	gap: 12px;
}

/* ---------- フォームのラベル（テキストと必須マークを1行に） ---------- */

.cp-form-grid label,
.cp-field {
	display: block;
	color: var(--cp-text-dim);
	font-size: 12px;
}

.cp-form-grid label > .cp-input,
.cp-form-grid label > .cp-select,
.cp-form-grid label > .cp-textarea,
.cp-form-grid label > input,
.cp-form-grid label > select,
.cp-form-grid label > textarea,
.cp-field > .cp-input,
.cp-field > .cp-select,
.cp-field > .cp-textarea,
.cp-field > input,
.cp-field > select,
.cp-field > textarea {
	display: block;
	margin-top: 5px;
}

.cp-required {
	margin-left: 2px;
	color: #e34234;
	font-weight: 700;
}

.cp[data-theme="dark"] .cp-required {
	color: #f87171;
}

/* ---------- 世代・設備情報（上り＝赤／下り＝青） ---------- */

.cp-generation-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 10px;
}

@media (min-width: 700px) {
	.cp-generation-split {
		grid-template-columns: 1fr 1fr;
	}
}

.cp-sub-section {
	padding: 12px 14px;
	border: 1px dashed var(--cp-border);
	border-radius: 15px;
	background: color-mix(in srgb,var(--cp-surface-2) 70%,transparent);
}

.cp-sub-section .cp-sub-title {
	margin: 0 0 10px;
	font-size: 13px;
}

.cp-sub-section--up .cp-sub-title { color: #e34234; }
.cp-sub-section--down .cp-sub-title { color: #3b82f6; }

.cp-sub-section .cp-field + .cp-field { margin-top: 10px; }

/* ---------- 左メニュー付きアプリの高さ（管理パネルなど） ---------- */

.cp-window-body > .cp-app:has(> .cp-settings) {
	height: 100%;
	padding: 0;
}

.cp-admin-body {
	padding: 16px 20px 24px;
}

/* ---------- 公開範囲のタイル選択 ---------- */

.cp-visibility-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
	gap: 10px;
	margin: 12px 0;
}

.cp-visibility-tile {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	color: var(--cp-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .12s ease,background .12s ease;
}

.cp-visibility-tile:hover {
	border-color: color-mix(in srgb,var(--cp-accent) 45%,transparent);
	background: var(--cp-hover);
}

.cp-visibility-tile.is-active {
	border-color: var(--cp-accent);
	background: color-mix(in srgb,var(--cp-accent) 18%,transparent);
}

/* 「プロフィール全体」を選ぶと残り3つも非公開に含まれるため、選択中より濃い色で示す */
.cp-visibility-tile.is-covered {
	border-color: var(--cp-accent);
	background: color-mix(in srgb,var(--cp-accent) 36%,transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--cp-accent) 55%,transparent);
}

.cp-visibility-tile.is-covered .cp-visibility-tile-check {
	color: var(--cp-accent-soft);
}

.cp-visibility-tile-icon {
	display: grid;
	place-items: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: color-mix(in srgb,var(--cp-accent) 20%,transparent);
	color: var(--cp-accent-soft);
}

.cp-visibility-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-visibility-tile-body small { color: var(--cp-text-dim); font-size: 11.5px; line-height: 1.5; }
.cp-visibility-tile-check { margin-left: auto; color: var(--cp-text-dim); }

/* ---------- 地図（Top・ライン作成） ---------- */

.cp-map {
	width: 100%;
	height: 450px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	overflow: hidden;
}

.cp-map--tall {
	height: 600px;
}

.cp-map-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 8px 0;
}

.cp-map-toolbar .cp-btn.is-active {
	border-color: var(--cp-accent);
	background: color-mix(in srgb,var(--cp-accent) 22%,transparent);
}

.cp-map-line-up { color: #e34234; font-weight: 600; }
.cp-map-line-down { color: #3b82f6; font-weight: 600; }
.cp-map-note { color: var(--cp-text-dim); font-size: 11.5px; }

.cp .leaflet-popup-content-wrapper,
.cp .leaflet-popup-tip {
	background: var(--cp-panel);
	color: var(--cp-text);
}

.cp .leaflet-container a { color: var(--cp-accent-soft); }

.cp .leaflet-bar a {
	background: var(--cp-surface-2);
	color: var(--cp-text);
}

.cp .leaflet-bar a:hover { background: var(--cp-hover); }

/* ---------- 予備調査のサイドバー Top（地図） ---------- */

.cp-check-top {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 8px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	color: var(--cp-text);
	font-family: inherit;
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
}

.cp-check-top:hover { background: var(--cp-hover); }
.cp-check-top.is-active { border-color: var(--cp-accent); background: color-mix(in srgb,var(--cp-accent) 18%,transparent); }

/* 地図ビュー（Top）はペインの高さいっぱいに広げる（窓がスクロールしないように） */
.cp-check-main > .cp-app:has(> .cp-map) {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cp-check-main > .cp-app:has(> .cp-map) .cp-map {
	flex: 1 1 auto;
	height: auto;
	min-height: 240px;
}

.cp-check-main > .cp-app:has(> .cp-map) > .cp-between {
	flex: 0 0 auto;
}

/* ---------- ヘルプ（/account/help を読み込んで表示） ---------- */

/*
 * ヘルプ本文の details はサイト側（css/style.css）の明るい配色のまま表示される。
 * ダークテーマでは本文色にコンパネの --cp-text（#e0e0e0）を継承してしまい、
 * 明るい背景の上で読めなくなるため、本文の文字色だけを暗色に固定する。
 * 背景・枠・角丸・summary の緑などサイト側の見た目は変更しない。
 * summary は style.css 側で直接 color を指定しているため、この継承色の影響を受けない。
 */
.cp[data-theme="dark"] .cp-help details {
	color: #1f2a22;
}

/* ---------- ユーザー情報: 貢献度（GitHub風） ---------- */

.cp-contrib {
	/* 日別セルの色（ライトテーマ。サイト側 /account/info/graph の緑に合わせる） */
	--cp-contrib-empty: #ebedf0;
	--cp-contrib-l1: #9be9a8;
	--cp-contrib-l2: #40c463;
	--cp-contrib-l3: #30a14e;
	--cp-contrib-l4: #216e39;
	/* 既定のウィンドウ幅（840px）で12ヶ月分が収まるようにセルを小さくする
	   （54週 × (8px + 2px) + 曜日ラベル = 約566px ／ 実際の描画幅は 608px） */
	--cp-contrib-size: 8px;
	--cp-contrib-gap: 2px;
	--cp-contrib-weekday-w: 18px;
}

/* ダークテーマは暗い背景でも濃さの段階が分かる緑にする */
.cp[data-theme="dark"] .cp-contrib {
	--cp-contrib-empty: rgba(255,255,255,.09);
	--cp-contrib-l1: #0e4429;
	--cp-contrib-l2: #006d32;
	--cp-contrib-l3: #26a641;
	--cp-contrib-l4: #39d353;
}

.cp-contrib-total {
	margin: 0 0 10px;
	font-size: 13px;
}

.cp-contrib-total strong {
	font-size: 17px;
	font-weight: 700;
	margin: 0 2px;
}

.cp-contrib-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
}

.cp-contrib-badge {
	padding: 4px 10px;
	font-size: 12px;
}

.cp-contrib-badge strong {
	color: var(--cp-text);
	font-size: 12.5px;
}

.cp-contrib-graph {
	overflow-x: auto;
	padding: 2px 0 4px;
}

.cp-contrib-months {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--cp-contrib-size);
	gap: var(--cp-contrib-gap);
	margin-left: calc(var(--cp-contrib-weekday-w) + 6px);
	height: 15px;
	font-size: 10.5px;
	color: var(--cp-text-dim);
}

.cp-contrib-months span { white-space: nowrap; }

.cp-contrib-body {
	display: flex;
	gap: 6px;
}

.cp-contrib-weekdays {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 0 0 var(--cp-contrib-weekday-w);
	width: var(--cp-contrib-weekday-w);
	padding: 2px 0;
	font-size: 10.5px;
	color: var(--cp-text-dim);
}

.cp-contrib-weekdays span {
	height: var(--cp-contrib-size);
	line-height: var(--cp-contrib-size);
}

.cp-contrib-grid {
	display: flex;
	flex-direction: column;
	gap: var(--cp-contrib-gap);
}

.cp-contrib-row {
	display: flex;
	gap: var(--cp-contrib-gap);
}

.cp-contrib-cell {
	display: block;
	width: var(--cp-contrib-size);
	height: var(--cp-contrib-size);
	flex-shrink: 0;
	border-radius: 2px;
	background: var(--cp-contrib-empty);
}

.cp-contrib-cell[data-level="1"] { background: var(--cp-contrib-l1); }
.cp-contrib-cell[data-level="2"] { background: var(--cp-contrib-l2); }
.cp-contrib-cell[data-level="3"] { background: var(--cp-contrib-l3); }
.cp-contrib-cell[data-level="4"] { background: var(--cp-contrib-l4); }

.cp-contrib-cell.is-empty { background: transparent; }

.cp-contrib-cell[title]:hover {
	outline: 1px solid var(--cp-border);
	outline-offset: 1px;
}

.cp-contrib .cp-contrib-note {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--cp-text-dim);
}

/* ---------- クロック ---------- */

@media (min-width: 641px) {
	.cp-clock-app .cp-settings-nav {
		flex-basis: 176px;
	}
}

/* 大きな時刻表示（世界時計・タイマー・ストップウォッチ・フォーカスで共通） */
.cp-clock-hero {
	padding: 18px 20px 16px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: color-mix(in srgb,var(--cp-accent) 9%,var(--cp-surface-2));
	text-align: center;
	transition: border-color .2s ease,box-shadow .2s ease;
}

.cp-clock-hero.is-ringing {
	border-color: var(--cp-accent);
	animation: cp-clock-ring .7s ease-in-out 4;
}

@keyframes cp-clock-ring {
	0%,100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
	50% { box-shadow: 0 0 0 6px color-mix(in srgb,var(--cp-accent) 26%,transparent); }
}

.cp-clock-hero-phase {
	display: flex;
	justify-content: center;
	margin-bottom: 8px;
}

.cp-clock-hero-time {
	font-family: var(--cp-mono);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

.cp-clock-hero-meta {
	margin-top: 6px;
	color: var(--cp-text-dim);
	font-size: 12px;
}

.cp-clock-phase {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 15px;
	background: color-mix(in srgb,var(--cp-accent) 20%,transparent);
	color: var(--cp-accent-soft);
	font-size: 12px;
	font-weight: 600;
}

.cp-clock-phase--short { background: rgba(34,197,94,.16); color: #4ade80; }
.cp-clock-phase--long { background: rgba(96,165,250,.16); color: #60a5fa; }

/* 進捗バー */
.cp-clock-progress {
	height: 8px;
	margin-top: 12px;
	border-radius: 15px;
	background: var(--cp-surface-3);
	overflow: hidden;
}

.cp-clock-progress > span {
	display: block;
	height: 100%;
	border-radius: 15px;
	background: var(--cp-accent);
	transition: width .2s linear;
}

/* ボタン列・プリセット */
.cp-clock-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.cp-clock-presets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
}

.cp-clock-timer-inputs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.cp-clock-timer-inputs input {
	width: 72px;
	text-align: center;
	font-family: var(--cp-mono);
	font-variant-numeric: tabular-nums;
}

.cp-clock-timer-inputs span {
	margin-right: 6px;
	color: var(--cp-text-dim);
	font-size: 12px;
}

/* 世界時計 */
.cp-clock-zones {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.cp-clock-zone {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
}

.cp-clock-zone.is-home {
	border-color: color-mix(in srgb,var(--cp-accent) 42%,transparent);
	background: color-mix(in srgb,var(--cp-accent) 10%,var(--cp-surface-2));
}

.cp-clock-zone-icon {
	display: grid;
	place-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 15px;
	background: color-mix(in srgb,var(--cp-accent) 18%,transparent);
	color: var(--cp-accent-soft);
	font-size: 13px;
}

.cp-clock-zone-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.cp-clock-zone-main strong {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.cp-clock-zone-main small {
	overflow: hidden;
	color: var(--cp-text-dim);
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cp-clock-tag {
	padding: 1px 8px;
	border-radius: 15px;
	background: color-mix(in srgb,var(--cp-accent) 24%,transparent);
	color: var(--cp-accent-soft);
	font-size: 10px;
	font-weight: 600;
}

.cp-clock-zone-time {
	display: flex;
	align-items: baseline;
	gap: 8px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.cp-clock-zone-time strong {
	font-family: var(--cp-mono);
	font-size: 20px;
	font-weight: 600;
}

.cp-clock-zone-time small {
	color: var(--cp-text-dim);
	font-size: 11px;
}

/* 丸いアイコンボタン（削除など） */
.cp-clock-icon-btn {
	display: grid;
	place-items: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-3);
	color: var(--cp-text-dim);
	font-size: 12px;
	cursor: pointer;
	transition: border-color .12s ease,color .12s ease,background .12s ease;
}

.cp-clock-icon-btn:hover {
	border-color: color-mix(in srgb,var(--cp-accent) 45%,transparent);
	background: var(--cp-hover);
	color: var(--cp-text);
}

/* ストップウォッチのラップ */
.cp-clock-laps {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 240px;
	margin-top: 14px;
	overflow-y: auto;
}

.cp-clock-lap {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
	border-radius: 15px;
	background: var(--cp-surface-2);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.cp-clock-lap.is-best { color: #4ade80; }
.cp-clock-lap.is-worst { color: #f87171; }

/* フォーカスの統計 */
.cp-clock-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
	gap: 10px;
}

.cp-clock-stat {
	padding: 12px 14px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
}

.cp-clock-stat strong {
	display: block;
	font-family: var(--cp-mono);
	font-size: 20px;
	font-variant-numeric: tabular-nums;
}

.cp-clock-stat small {
	color: var(--cp-text-dim);
	font-size: 11.5px;
}

/* アラーム */
.cp-clock-days {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.cp-clock-day {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	color: var(--cp-text-dim);
	font-family: inherit;
	font-size: 11.5px;
	cursor: pointer;
	transition: background .12s ease,border-color .12s ease,color .12s ease;
}

.cp-clock-day:hover { background: var(--cp-hover); }

.cp-clock-day.is-active {
	border-color: color-mix(in srgb,var(--cp-accent) 50%,transparent);
	background: color-mix(in srgb,var(--cp-accent) 26%,transparent);
	color: var(--cp-text);
	font-weight: 700;
}

.cp-clock-alarms {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.cp-clock-alarm {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
	transition: opacity .12s ease;
}

.cp-clock-alarm.is-off { opacity: .55; }

.cp-clock-alarm-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.cp-clock-alarm-time {
	font-family: var(--cp-mono);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.cp-clock-alarm-meta { font-size: 12px; }

.cp-clock-alarm-next {
	color: var(--cp-text-dim);
	font-size: 11.5px;
}

.cp-clock-hint {
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px dashed var(--cp-border);
	border-radius: 15px;
	background: color-mix(in srgb,var(--cp-surface-2) 70%,transparent);
	color: var(--cp-text-dim);
	font-size: 11.5px;
	line-height: 1.7;
}

@media (max-width: 560px) {
	.cp-clock-hero-time { font-size: 34px; }

	/* 時差と日付が横に入りきらないので、時刻の下へ回す */
	.cp-clock-zone-time {
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
	}

	.cp-clock-zone-time strong { font-size: 17px; }

	.cp-clock-zone-time small { font-size: 10px; }
}

/* ---------- 時計ポップアップ: フォーカス連携 ---------- */

.cp-clock-focus {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cp-border);
}

.cp-focus-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.cp-focus-stepper {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
}

.cp-focus-stepper strong {
	min-width: 58px;
	text-align: center;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.cp-focus-step {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 15px;
	background: transparent;
	color: var(--cp-text-dim);
	font-size: 11px;
	cursor: pointer;
	transition: background .12s ease,color .12s ease;
}

.cp-focus-step:hover {
	background: var(--cp-hover);
	color: var(--cp-text);
}

.cp-focus-run {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cp-focus-status {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--cp-text-dim);
	font-size: 11.5px;
}

.cp-focus-status strong {
	color: var(--cp-text);
	font-family: var(--cp-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.cp-focus-dot {
	width: 7px;
	height: 7px;
	border-radius: 15px;
	background: var(--cp-accent);
	animation: cp-focus-pulse 1.6s ease-in-out infinite;
}

@keyframes cp-focus-pulse {
	0%,100% { opacity: 1; }
	50% { opacity: .3; }
}

.cp-focus-actions {
	display: flex;
	gap: 6px;
}

.cp-focus-actions .cp-btn {
	flex: 1;
	justify-content: center;
}

/* ---------- コンパネ表示中のサイト共通UI ---------- */

/* コンパネ（.cp は z-index:10000）より手前に出す。
   従来画面のモーダル・アラートは body 直下にあり、このままだと隠れてしまう */
html.cp-locked .modal,
html.cp-locked .alert {
	z-index: 20000;
}

/* ---------- レスポンシブ（スマホ） ---------- */

/* スマホ用の上部バーと戻るボタンは PC では出さない */
.cp-check-mobile,
.cp-notice-back {
	display: none;
}

@media (max-width: 640px) {
	/* 予備調査・現地調査: 上に Top、残りはメイン（検索とサイドバーは隠す） */
	.cp-check {
		flex-direction: column;
	}

	.cp-check-list {
		display: none;
	}

	.cp-check-mobile {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 7px 10px;
		border-bottom: 1px solid var(--cp-border);
		background: var(--cp-surface-2);
	}

	.cp-check-mobile .cp-check-top {
		flex: 0 0 auto;
	}

	.cp-check-mobile-title {
		min-width: 0;
		overflow: hidden;
		color: var(--cp-text-dim);
		font-size: 11.5px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cp-check-main {
		flex: 1;
		min-height: 0;
	}

	/* お知らせ: 一覧と本文を1画面ずつ切り替える */
	.cp-notice {
		flex-direction: column;
	}

	.cp-notice-list {
		flex: 1 1 auto;
		min-height: 0;
		border-right: 0;
	}

	.cp-notice-body {
		flex: 1 1 auto;
		min-height: 0;
		padding: 14px 14px 20px;
	}

	.cp-notice[data-view="list"] .cp-notice-body {
		display: none;
	}

	.cp-notice[data-view="detail"] .cp-notice-list {
		display: none;
	}

	.cp-notice-back {
		display: inline-flex;
		margin-bottom: 12px;
	}
}

/* ---------- タスクマネージャー ---------- */

/* 設定アプリ: アプリごとの表示/非表示ボタン */
.cp-app-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-left: auto;
}

.cp-tasks-heading {
	margin: 18px 0 8px;
	font-size: 13px;
}

.cp-tasks-live {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
	gap: 10px;
}

.cp-tasks-stat {
	padding: 12px 14px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-surface-2);
}

.cp-tasks-stat strong {
	display: block;
	font-family: var(--cp-mono);
	font-size: 19px;
	font-variant-numeric: tabular-nums;
}

.cp-tasks-stat small {
	color: var(--cp-text-dim);
	font-size: 11.5px;
}

.cp-spark {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 64px;
	padding: 6px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	background: var(--cp-input-bg);
}

.cp-spark i {
	flex: 1 1 auto;
	min-width: 2px;
	border-radius: 3px 3px 0 0;
	background: var(--cp-accent);
	opacity: .85;
}

.cp-tasks-name {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cp-tasks-name i {
	color: var(--cp-accent-soft);
}

.cp-tasks-row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end;
}

/* 前面のウィンドウを行ごと強調する */
.cp-tasks-table tr.is-active td {
	background: color-mix(in srgb,var(--cp-accent) 12%,transparent);
}

@media (max-width: 640px) {
	.cp-tasks-table .cp-col-optional {
		display: none;
	}

	.cp-tasks-live {
		grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
	}
}






/* ---------- 資料（/docs）エディタ ---------- */

.cp-docs .cp-docs-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--cp-border);
}

.cp-docs .cp-docs-row:last-child { border-bottom: 0; }

.cp-docs .cp-docs-row-main { min-width: 0; }
.cp-docs .cp-docs-row-main strong { display: block; }

.cp-docs-invites { border-color: var(--cp-accent); }

.cp-badge--ok {
	background: color-mix(in srgb,var(--cp-accent) 22%,transparent);
	color: var(--cp-accent);
}

.cp-docs-label {
	display: block;
	margin: 10px 0 4px;
	font-size: 12px;
	color: var(--cp-muted);
}

.cp-docs-editor .cp-card { margin-bottom: 10px; }

.cp-docs-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	align-items: center;
	padding: 6px;
	border: 1px solid var(--cp-border);
	border-bottom: 0;
	border-radius: 15px 15px 0 0;
	background: var(--cp-surface-2);
}

.cp-docs-sep {
	width: 1px;
	height: 18px;
	margin: 0 4px;
	background: var(--cp-border);
}

/* 置き換え済み: 下の『エディタのハイライト』を参照 */

.cp-docs-count { margin: 6px 0 10px; text-align: right; }

.cp-docs-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.cp-docs-image {
	position: relative;
	width: 150px;
	border: 1px solid var(--cp-border);
	border-radius: 15px;
	overflow: hidden;
	background: var(--cp-surface-2);
}

.cp-docs-thumb-badge {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px;
	border-radius: 15px;
	background: var(--cp-accent);
	color: var(--cp-accent-fg);
	font-size: 10px;
	font-weight: 700;
}

.cp-docs-image.is-thumb {
	border-color: var(--cp-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb,var(--cp-accent) 30%,transparent);
}

.cp-docs-image img { display: block; width: 100%; height: 90px; object-fit: contain; }

.cp-docs-image-actions { display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.cp-docs-image-actions .cp-btn {
	font-size: 10.5px;
	padding: 2px 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cp-docs-progress { min-height: 1em; margin: 8px 0 0; }

.cp-docs-thumb-state { margin: 8px 0 0; }

/* ---------- 資料エディタのハイライト ---------- */

.cp-docs-editor-wrap {
	position: relative;
	border: 1px solid var(--cp-border);
	border-radius: 0 0 15px 15px;
	background: var(--cp-surface);
	overflow: hidden;
}

.cp-docs-editor-wrap:focus-within { border-color: var(--cp-accent); }

.cp-docs-highlight,
.cp-docs-editor-area {
	box-sizing: border-box;
	margin: 0;
	padding: 14px 16px;
	height: 600px;
	font-family: var(--cp-mono);
	font-size: 13px;
	line-height: 1.8;
	font-variant-ligatures: none;
	tab-size: 4;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.cp-docs-highlight {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	color: var(--cp-text);
	--md-heading: #82c7ff;
	--md-strong: #ffd966;
	--md-em: #ffb86b;
	--md-code: #9ae6b4;
	--md-code-bg: rgba(255,255,255,.07);
	--md-link: #8ab4f8;
	--md-image: #f78fb3;
	--md-quote: #9db5a3;
	--md-list: #82c7ff;
	--md-hr: #6b7d72;
	--md-table: #b0bec5;
	--md-tag: #f78fb3;
	--md-attr: #ffd966;
	--md-attr-value: #9ae6b4;
	--md-punct: #9db5a3;
	--md-comment: #6b7d72;
}

.cp[data-theme="light"] .cp-docs-highlight {
	--md-heading: #0b5cad;
	--md-strong: #9a6700;
	--md-em: #a15c00;
	--md-code: #1a7f4b;
	--md-code-bg: rgba(15,23,42,.06);
	--md-link: #1a56db;
	--md-image: #b3306b;
	--md-quote: #5b6572;
	--md-list: #0b5cad;
	--md-hr: #94a3b8;
	--md-table: #475569;
	--md-tag: #b3306b;
	--md-attr: #9a6700;
	--md-attr-value: #1a7f4b;
	--md-punct: #5b6572;
	--md-comment: #94a3b8;
}

.cp-docs-editor-area {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	min-height: 340px;
	border: 0;
	background: transparent;
	color: transparent;
	caret-color: var(--cp-text);
	resize: vertical;
	outline: none;
	overflow-y: auto;
}

.cp-docs-editor-area::selection { background: color-mix(in srgb,var(--cp-accent) 35%,transparent); }
.cp-docs-editor-area::placeholder { color: var(--cp-text-dim); }

.cp-docs-highlight .md-heading { color: var(--md-heading); font-weight: 700; }
.cp-docs-highlight .md-strong { color: var(--md-strong); font-weight: 700; }
.cp-docs-highlight .md-em { color: var(--md-em); font-style: italic; }
.cp-docs-highlight .md-code { color: var(--md-code); background: var(--md-code-bg); border-radius: 4px; }
.cp-docs-highlight .md-code-block { color: var(--md-code); }
.cp-docs-highlight .md-fence { color: var(--md-heading); }
.cp-docs-highlight .md-link { color: var(--md-link); }
.cp-docs-highlight .md-image { color: var(--md-image); }
.cp-docs-highlight .md-quote-mark { color: var(--md-quote); }
.cp-docs-highlight .md-list-mark { color: var(--md-list); }
.cp-docs-highlight .md-hr { color: var(--md-hr); }
.cp-docs-highlight .md-table { color: var(--md-table); }
.cp-docs-highlight .md-tag { color: var(--md-tag); }
.cp-docs-highlight .md-attr { color: var(--md-attr); }
.cp-docs-highlight .md-attr-value { color: var(--md-attr-value); }
.cp-docs-highlight .md-punct { color: var(--md-punct); }
.cp-docs-highlight .md-comment { color: var(--md-comment); font-style: italic; }

/* ---------- 資料プレビュー ---------- */

/*
 * プレビューは公開ページと同じ css/docs.css のクラス（.docs-detail / .docs-body）で描画する。
 * ここでは色だけコンパネのテーマ変数に合わせる（レイアウト・余白・文字サイズは公開ページと共通）。
 */
.cp .docs-detail,
.cp .docs-body {
	--docs-text: var(--cp-text);
	--docs-muted: var(--cp-text-dim);
	--docs-card: var(--cp-surface);
	--docs-border: var(--cp-border);
	--docs-accent: var(--cp-accent);
	--docs-accent-soft: color-mix(in srgb,var(--cp-accent) 15%,transparent);
	--docs-shadow: var(--cp-shadow);
	color: var(--cp-text);
}

/* ---------- 資料プレビューのウィンドウ（cp-window風） ---------- */

.cp-docs-preview-window .cp-window-title {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cp-docs-preview-note {
	font-size: 11px;
	font-weight: 400;
	color: var(--cp-text-dim);
}

.cp-docs-preview-body {
	overflow: auto;
	padding: 16px 20px;
}

/* ウィンドウの中では枠・余白・高さ制限を外す */
.cp-docs-preview-body .cp-docs-preview {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	max-height: none;
	overflow: visible;
}