/* ---------------------------------------------------
   CSS 変数 - 3テーマ対応（Light / Dark / Console）
--------------------------------------------------- */
:root {
	--bg: #0a0a0f;
	--bg-main: #0a0a0f;
	--bg-gradient: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a0f 50%, #050508 100%);
	--fg: #e8e8ed;
	--text-primary: #e8e8ed;
	--text-secondary: rgba(255, 255, 255, 0.6);
	--text-muted: rgba(255, 255, 255, 0.35);
	--card-bg: rgba(20, 22, 35, 0.8);
	--card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(79, 156, 255, 0.03);
	--card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(79, 156, 255, 0.1);
	--accent: #4f9cff;
	--accent-secondary: #ff7b00;
	--accent-glow: rgba(79, 156, 255, 0.4);
	--accent-secondary-glow: rgba(255, 123, 0, 0.4);
	--border-subtle: rgba(255, 255, 255, 0.08);
	--border-glow: rgba(79, 156, 255, 0.3);
	--muted: rgba(255, 255, 255, 0.5);
	--stat-bg: rgba(79, 156, 255, 0.08);
	--glass: rgba(255, 255, 255, 0.03);
	--particle-color: rgba(79, 156, 255, 0.6);
	--card-radius: 20px;
	--btn-radius: 12px;
}

:root[data-theme="light"] {
	--bg: #ffffff;
	--bg-main: #f5f5f5;
	--bg-gradient: radial-gradient(ellipse at top, #ffffff 0%, #ffffff 50%, #fafafa 100%);
	--fg: #1a1a2e;
	--text-primary: #1a1a2e;
	--text-secondary: rgba(26, 26, 46, 0.6);
	--text-muted: rgba(26, 26, 46, 0.35);
	--card-bg: rgba(255, 255, 255, 0.95);
	--card-shadow: 0 4px 24px rgba(112, 51, 204, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
	--card-shadow-hover: 0 12px 40px rgba(112, 51, 204, 0.15), 0 4px 12px rgba(0, 0, 0, 0.06);
	--accent: #7033cc;
	--accent-secondary: #9945ff;
	--accent-glow: rgba(112, 51, 204, 0.2);
	--accent-secondary-glow: rgba(153, 69, 255, 0.2);
	--border-subtle: rgba(112, 51, 204, 0.1);
	--border-glow: rgba(112, 51, 204, 0.25);
	--muted: rgba(26, 26, 46, 0.5);
	--stat-bg: rgba(112, 51, 204, 0.05);
	--glass: rgba(112, 51, 204, 0.02);
	--particle-color: rgba(112, 51, 204, 0.25);
	--card-radius: 20px;
	--btn-radius: 12px;
}

:root[data-theme="console"] {
	--bg: #030508;
	--bg-main: #030508;
	--bg-gradient: radial-gradient(ellipse at top, #0a1628 0%, #030508 60%, #000 100%);
	--fg: #00d4ff;
	--text-primary: #00d4ff;
	--text-secondary: rgba(0, 180, 255, 0.6);
	--text-muted: rgba(0, 180, 255, 0.35);
	--card-bg: rgba(0, 15, 30, 0.9);
	--card-shadow: 0 0 20px rgba(0, 180, 255, 0.1), inset 0 0 30px rgba(0, 180, 255, 0.02);
	--card-shadow-hover: 0 0 40px rgba(0, 180, 255, 0.2), inset 0 0 40px rgba(0, 180, 255, 0.05);
	--accent: #00b4ff;
	--accent-secondary: #00ffcc;
	--accent-glow: rgba(0, 180, 255, 0.4);
	--accent-secondary-glow: rgba(0, 255, 204, 0.4);
	--border-subtle: rgba(0, 180, 255, 0.15);
	--border-glow: rgba(0, 180, 255, 0.4);
	--muted: rgba(0, 180, 255, 0.5);
	--stat-bg: rgba(0, 180, 255, 0.08);
	--glass: rgba(0, 180, 255, 0.03);
	--particle-color: rgba(0, 180, 255, 0.5);
	--card-radius: 2px;
	--btn-radius: 2px;
}

/* ---------------------------------------------------
   Layout base
--------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 40px 20px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	background: var(--bg);
	background-image: var(--bg-gradient);
	color: var(--fg);
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	transition: background 0.4s ease, color 0.3s ease;
}

/* パーティクル背景 */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(1px 1px at 20px 30px, var(--particle-color), transparent),
		radial-gradient(1px 1px at 40px 70px, var(--particle-color), transparent),
		radial-gradient(1.5px 1.5px at 50px 160px, var(--particle-color), transparent),
		radial-gradient(1px 1px at 90px 40px, var(--particle-color), transparent),
		radial-gradient(1.5px 1.5px at 130px 80px, var(--particle-color), transparent),
		radial-gradient(1px 1px at 160px 120px, var(--particle-color), transparent),
		radial-gradient(2px 2px at 200px 200px, var(--accent-secondary-glow), transparent),
		radial-gradient(1px 1px at 250px 50px, var(--particle-color), transparent),
		radial-gradient(1.5px 1.5px at 300px 150px, var(--particle-color), transparent),
		radial-gradient(1px 1px at 350px 90px, var(--particle-color), transparent);
	background-size: 400px 400px;
	animation: particleFloat 60s linear infinite;
	pointer-events: none;
	z-index: 0;
	opacity: 0.7;
}

@keyframes particleFloat {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-400px);
	}
}

/* グリッドライン背景 */
body::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		linear-gradient(var(--border-subtle) 1px, transparent 1px),
		linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
	z-index: 0;
	opacity: 0.3;
	mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.page {
	max-width: 1120px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------
   Header / Logo - Cyber Edition
--------------------------------------------------- */
.header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--border-subtle);
	position: relative;
	animation: headerSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes headerSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.header::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 200px;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--accent-secondary), transparent);
	animation: headerLineGlow 3s ease-in-out infinite;
}

@keyframes headerLineGlow {

	0%,
	100% {
		opacity: 1;
		width: 200px;
	}

	50% {
		opacity: 0.7;
		width: 300px;
	}
}

.header-brand {
	display: flex;
	align-items: center;
	gap: 20px;
}

.header-icon {
	width: 60px;
	height: auto;
	filter: drop-shadow(0 0 12px var(--accent-glow)) drop-shadow(0 0 24px var(--accent-secondary-glow));
	animation: iconFloat 3s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes iconFloat {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-4px);
	}
}

.header-text {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.logo-title {
	font-size: 44px;
	font-weight: 800;
	margin: 0;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-family: 'Orbitron', sans-serif;
	position: relative;
	display: inline-block;
}

.logo-title .lab-logo {
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--accent-secondary);
	text-shadow:
		0 0 10px var(--accent-secondary-glow),
		0 0 20px var(--accent-secondary-glow),
		0 0 40px var(--accent-secondary-glow);
	display: inline-block;
	animation: labPulse 2s ease-in-out infinite;
}

@keyframes labPulse {

	0%,
	100% {
		text-shadow:
			0 0 10px var(--accent-secondary-glow),
			0 0 20px var(--accent-secondary-glow),
			0 0 40px var(--accent-secondary-glow);
	}

	50% {
		text-shadow:
			0 0 15px var(--accent-secondary-glow),
			0 0 30px var(--accent-secondary-glow),
			0 0 60px var(--accent-secondary-glow);
	}
}

.header-subtitle {
	font-family: 'SF Mono', ui-monospace, monospace;
	font-size: 12px;
	opacity: 0.5;
	letter-spacing: 0.08em;
	margin: 2px 0 0 0;
	text-transform: uppercase;
	animation: fadeInUp 0.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 0.5;
		transform: translateY(0);
	}
}

/* Console mode header */
:root[data-theme="console"] .header {
	border-bottom-color: var(--border-glow);
}

:root[data-theme="console"] .header::after {
	background: linear-gradient(90deg, var(--accent), var(--accent-secondary), transparent);
	box-shadow: 0 0 10px var(--accent);
}

:root[data-theme="console"] .logo-title {
	text-shadow: 0 0 30px var(--accent-glow);
}

:root[data-theme="console"] .logo-title .lab-logo {
	color: var(--accent);
	text-shadow:
		0 0 10px var(--accent-glow),
		0 0 20px var(--accent-glow),
		0 0 40px var(--accent-glow),
		0 0 60px var(--accent-glow);
}

:root[data-theme="console"] .header-subtitle {
	letter-spacing: 0.1em;
}

:root[data-theme="console"] .header-icon {
	filter:
		drop-shadow(0 0 8px var(--accent-glow)) drop-shadow(0 0 20px var(--accent-glow)) drop-shadow(0 0 40px var(--accent-glow));
}

:root[data-theme="light"] .header-icon {
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

/* ---------------------------------------------------
   Breadcrumb（パンくずリスト）- Enhanced
--------------------------------------------------- */
.breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	margin-top: 16px;
	flex-wrap: wrap;
	padding: 10px 16px;
	background: var(--glass);
	border-radius: 8px;
	border: 1px solid var(--border-subtle);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	animation: fadeInUp 0.6s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.breadcrumb a {
	color: var(--accent);
	text-decoration: none;
	transition: all 0.2s ease;
	padding: 4px 8px;
	border-radius: 4px;
}

.breadcrumb a:hover {
	background: var(--accent-glow);
	text-shadow: 0 0 10px var(--accent-glow);
}

.breadcrumb-sep {
	opacity: 0.3;
	font-size: 14px;
	color: var(--accent);
}

.breadcrumb-current {
	opacity: 0.8;
	font-weight: 600;
	color: var(--accent-secondary);
}

/* ---------------------------------------------------
   Dashboard（統計ダッシュボード）- Holographic Edition
--------------------------------------------------- */
.dashboard {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 16px;
	padding: 10px;
	background: linear-gradient(135deg, var(--glass) 0%, transparent 100%);
	border-radius: 12px;
	border: 1px solid var(--border-subtle);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	position: relative;
	overflow: hidden;
	animation: dashboardFadeIn 0.8s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dashboardFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.dashboard::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 200%;
	height: 100%;
	background: linear-gradient(90deg,
			transparent,
			rgba(79, 156, 255, 0.03),
			transparent);
	animation: dashboardShine 8s ease-in-out infinite;
}

@keyframes dashboardShine {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(100%);
	}
}

.stat-card {
	text-align: center;
	padding: 10px 8px;
	background: var(--card-bg);
	border-radius: 10px;
	box-shadow: var(--card-shadow);
	border: 1px solid var(--border-subtle);
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.stat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--card-shadow-hover);
	border-color: var(--border-glow);
}

.stat-card:hover::before {
	opacity: 1;
}

.stat-value {
	font-size: 22px;
	font-weight: 700;
	font-family: 'Orbitron', sans-serif;
	color: var(--accent);
	position: relative;
}

/* グラデーションテキスト（対応ブラウザのみ） */
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.stat-value {
		background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.stat-value.counting {
	animation: countPulse 0.1s ease-out;
}

@keyframes countPulse {
	0% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

.stat-label {
	font-size: 9px;
	opacity: 0.6;
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
}

/* Console mode dashboard */
:root[data-theme="console"] .dashboard {
	border-color: var(--border-glow);
	background: linear-gradient(180deg, rgba(0, 20, 15, 0.9) 0%, rgba(0, 10, 8, 0.95) 100%);
}

:root[data-theme="console"] .dashboard::before {
	background: linear-gradient(90deg, transparent, rgba(0, 180, 255, 0.05), transparent);
}

:root[data-theme="console"] .stat-card {
	border-radius: var(--card-radius);
	border-color: var(--border-glow);
	font-family: 'SF Mono', monospace;
}

:root[data-theme="console"] .stat-card::before {
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent);
}

:root[data-theme="console"] .stat-value {
	background: none;
	-webkit-text-fill-color: var(--accent);
	color: var(--accent);
	text-shadow: 0 0 20px var(--accent-glow);
}

/* ---------------------------------------------------
   Recently Updated Section
--------------------------------------------------- */
.recent-section {
	margin-bottom: 32px;
}

.recent-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font-family: 'Orbitron', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent);
}

.recent-icon {
	font-size: 18px;
}

.recent-grid {
	margin-top: 0;
}

/* Console mode recent section */
:root[data-theme="console"] .recent-header {
	text-shadow: 0 0 10px var(--accent-glow);
}

/* Grid セクションヘッダー（All / フォルダ表示時） */
.grid-section-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	margin-top: 8px;
	font-family: 'Orbitron', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent);
	animation: toolbarFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.grid-section-icon {
	font-size: 18px;
}

:root[data-theme="console"] .grid-section-header {
	text-shadow: 0 0 10px var(--accent-glow);
}

/* ---------------------------------------------------
   Folder Tab Navigation
--------------------------------------------------- */
.folder-nav {
	position: relative;
	margin-bottom: 16px;
	background: var(--card-bg);
	border-radius: var(--btn-radius);
	border: 1px solid var(--border-subtle);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	animation: toolbarFadeIn 0.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
	box-shadow: var(--card-shadow);
}

.folder-nav::-webkit-scrollbar {
	display: none;
}

.folder-nav-track {
	display: flex;
	gap: 2px;
	position: relative;
	min-width: max-content;
}

.folder-nav-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: none;
	background: transparent;
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	border-radius: calc(var(--btn-radius) - 2px);
	transition: color 0.2s ease, background 0.2s ease;
	white-space: nowrap;
	position: relative;
	z-index: 1;
}

.folder-nav-tab:hover {
	color: var(--fg);
	background: var(--glass);
}

.folder-nav-tab.active {
	color: var(--fg);
}

.folder-nav-tab-icon {
	font-size: 14px;
}

.folder-nav-count {
	font-size: 9px;
	padding: 1px 5px;
	border-radius: 99px;
	background: var(--glass);
	border: 1px solid var(--border-subtle);
	color: var(--accent);
	font-weight: 600;
}

.folder-nav-indicator {
	position: absolute;
	bottom: 4px;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
	border-radius: 2px;
	box-shadow: 0 0 8px var(--accent-glow);
	pointer-events: none;
	z-index: 0;
	transition: opacity 0.2s ease;
}

body[data-edit-mode="on"] .folder-nav-indicator {
	opacity: 0;
}

/* 外部ドメインタブ */
.folder-nav-tab-external .fa-globe {
	color: #f97316;
}

/* +ボタン */
.folder-nav-add {
	display: none;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 1px dashed var(--border-subtle);
	background: transparent;
	color: var(--text-secondary);
	font-size: 13px;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.2s ease;
	padding: 0;
}

.folder-nav-add:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(255, 255, 255, 0.05);
}

body[data-edit-mode="on"] .folder-nav-add {
	display: flex;
}

/* ✕ボタン（Edit Mode時のみ） */
.folder-nav-remove {
	display: none;
	margin-left: 4px;
	font-size: 10px;
	color: var(--text-secondary);
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.2s ease;
}

.folder-nav-remove:hover {
	color: #ef4444;
	opacity: 1;
}

body[data-edit-mode="on"] .folder-nav-remove {
	display: inline;
}

/* 表示/非表示トグル（Edit Mode時のみ） */
.folder-nav-visibility {
	display: none;
	margin-left: 4px;
	font-size: 10px;
	color: var(--accent);
	cursor: pointer;
	opacity: 0.7;
	transition: all 0.2s ease;
}

.folder-nav-visibility:hover {
	opacity: 1;
}

body[data-edit-mode="on"] .folder-nav-visibility {
	display: inline;
}

/* 非表示状態のタブ */
.folder-nav-tab.tab-hidden {
	display: none;
}

/* Edit Mode中は非表示タブも薄く表示 */
body[data-edit-mode="on"] .folder-nav-tab.tab-hidden {
	display: inline-flex;
	opacity: 0.35;
}

/* 非表示タブの目アイコン色 */
.folder-nav-tab.tab-hidden .folder-nav-visibility {
	color: var(--muted);
}

/* タブラベル（編集可能） */
.folder-nav-tab-label {
	pointer-events: none;
}

body[data-edit-mode="on"] .folder-nav-tab-label {
	pointer-events: auto;
	cursor: text;
	border-bottom: 1px dashed transparent;
	transition: border-color 0.2s ease;
}

body[data-edit-mode="on"] .folder-nav-tab-label:hover {
	border-bottom-color: var(--accent);
}

.folder-nav-tab-input {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--accent);
	color: var(--fg);
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	padding: 0;
	margin: 0;
	outline: none;
	width: 80px;
	min-width: 40px;
}

/* --- タブ ドラッグ&ドロップ並び替え --- */
body[data-edit-mode="on"] .folder-nav-tab[draggable="true"] {
	cursor: grab;
}

body[data-edit-mode="on"] .folder-nav-tab[draggable="true"]:active {
	cursor: grabbing;
}

.folder-nav-tab.tab-dragging {
	opacity: 0.35;
}

.folder-nav-tab.tab-drag-over-left::before,
.folder-nav-tab.tab-drag-over-right::after {
	content: '';
	position: absolute;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background: var(--accent);
	border-radius: 1px;
	box-shadow: 0 0 6px var(--accent-glow);
}

.folder-nav-tab.tab-drag-over-left::before {
	left: -2px;
}

.folder-nav-tab.tab-drag-over-right::after {
	right: -2px;
}

:root[data-theme="console"] .folder-nav {
	border-color: var(--border-glow);
	font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

:root[data-theme="console"] .folder-nav-tab {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 11px;
}

:root[data-theme="console"] .folder-nav-indicator {
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent-glow);
}

/* ---------------------------------------------------
   Inline Filter Toolbar
--------------------------------------------------- */
.toolbar-inline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	padding: 8px 12px;
	background: var(--card-bg);
	border-radius: var(--btn-radius);
	border: 1px solid var(--border-subtle);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	animation: toolbarFadeIn 0.6s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
	box-shadow: var(--card-shadow);
	flex-wrap: nowrap;
}

.toolbar-inline::-webkit-scrollbar {
	display: none;
}

.toolbar-inline-group {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-shrink: 0;
}

.toolbar-inline-divider {
	width: 1px;
	height: 20px;
	background: var(--border-subtle);
	flex-shrink: 0;
}

.toolbar-inline .filter-btn {
	padding: 5px 10px;
	font-size: 10px;
}

.toolbar-inline .filter-btn .filter-count {
	font-size: 8px;
	padding: 1px 4px;
}

.toolbar-inline .view-btn {
	padding: 5px 10px;
	font-size: 10px;
}

:root[data-theme="console"] .toolbar-inline {
	border-color: var(--border-glow);
	box-shadow: 0 0 20px var(--accent-glow);
}

/*
   Toolbar（フィルター・表示切替）- Theme Adaptive
--------------------------------------------------- */
.toolbar-top {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100;
	display: flex;
	gap: 8px;
	align-items: center;
}

@keyframes toolbarFadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ボタンスタイル - テーマ適応 */
.filter-btn,
.view-btn,
.theme-toggle {
	border: 1px solid var(--border-subtle);
	border-radius: var(--btn-radius);
	padding: 8px 14px;
	background: var(--glass);
	color: var(--fg);
	cursor: pointer;
	font-size: 11px;
	font-weight: 500;
	font-family: inherit;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
}

/* Console mode buttons */
:root[data-theme="console"] .filter-btn,
:root[data-theme="console"] .view-btn,
:root[data-theme="console"] .theme-toggle {
	font-family: 'SF Mono', ui-monospace, monospace;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.filter-btn::before,
.view-btn::before,
.theme-toggle::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
	transition: left 0.4s ease;
}

.filter-btn:hover:not(:disabled),
.view-btn:hover,
.theme-toggle:hover {
	background: var(--accent-glow);
	border-color: var(--accent);
	box-shadow: 0 0 15px var(--accent-glow), inset 0 0 20px rgba(255, 255, 255, 0.02);
	transform: translateY(-1px);
}

.filter-btn:hover:not(:disabled)::before,
.view-btn:hover::before,
.theme-toggle:hover::before {
	left: 100%;
}

.filter-btn:active:not(:disabled),
.view-btn:active,
.theme-toggle:active {
	transform: scale(0.98);
}

.filter-btn.active,
.view-btn.active {
	background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 100%);
	border-color: var(--accent);
	box-shadow:
		0 0 20px var(--accent-glow),
		inset 0 0 30px rgba(255, 255, 255, 0.03),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.filter-btn.active::after,
.view-btn.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent);
}

.filter-btn .filter-count {
	background: var(--glass);
	color: var(--accent);
	font-size: 9px;
	padding: 2px 6px;
	border-radius: var(--btn-radius);
	margin-left: 4px;
	font-weight: 600;
	border: 1px solid var(--border-subtle);
}

.filter-btn.active .filter-count {
	background: rgba(255, 255, 255, 0.15);
	color: var(--fg);
	border-color: rgba(255, 255, 255, 0.2);
}

/* ステータスボタン専用スタイル - コンソール版 */
.filter-btn.status-btn {
	border-color: color-mix(in srgb, var(--status-color) 40%, transparent);
}

.filter-btn.status-btn:hover:not(:disabled) {
	border-color: var(--status-color);
	background: color-mix(in srgb, var(--status-color) 15%, transparent);
	box-shadow: 0 0 15px color-mix(in srgb, var(--status-color) 30%, transparent), inset 0 0 20px color-mix(in srgb, var(--status-color) 10%, transparent);
}

.filter-btn.status-btn.active {
	background: linear-gradient(135deg, color-mix(in srgb, var(--status-color) 30%, transparent) 0%, color-mix(in srgb, var(--status-color) 10%, transparent) 100%);
	border-color: var(--status-color);
	box-shadow:
		0 0 20px color-mix(in srgb, var(--status-color) 30%, transparent),
		inset 0 0 30px color-mix(in srgb, var(--status-color) 10%, transparent);
}

.filter-btn.status-btn.active::after {
	background: var(--status-color);
	box-shadow: 0 0 10px var(--status-color);
}

.filter-btn.status-btn .filter-count {
	background: color-mix(in srgb, var(--status-color) 30%, transparent);
	color: var(--status-color);
	border-color: color-mix(in srgb, var(--status-color) 40%, transparent);
}

.filter-btn.status-btn.active .filter-count {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* disabled状態 */
.filter-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.filter-btn:disabled::before {
	display: none;
}

/* 表示切り替えボタン（右寄せ） */
.toolbar-inline-group:last-child {
	margin-left: auto;
}

.console-view-group {
	display: flex;
	gap: 0;
	border: 1px solid var(--border-subtle);
	border-radius: var(--btn-radius);
	overflow: hidden;
}

.console-view-group .view-btn {
	border: none;
	border-radius: 0;
	border-right: 1px solid var(--border-subtle);
}

.console-view-group .view-btn:last-child {
	border-right: none;
}

/* ソート/ビュー間の区切り線 */
.console-view-divider {
	width: 1px;
	align-self: stretch;
	background: var(--border-subtle);
	flex-shrink: 0;
	margin: 2px 0;
}

/* ソートボタン */
.sort-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 5px 10px;
	border: none;
	background: transparent;
	color: var(--muted);
	font-size: 11px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
	white-space: nowrap;
	position: relative;
}

.sort-btn:hover {
	color: var(--fg);
	background: var(--glass);
}

.sort-btn.active {
	color: var(--accent);
	background: var(--glass);
}

.console-view-group .sort-btn {
	border: none;
	border-radius: 0;
	border-right: 1px solid var(--border-subtle);
}

.console-view-group .sort-btn:last-of-type {
	border-right: none;
}

/* ---------------------------------------------------
   Grid - Staggered Animation
--------------------------------------------------- */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 28px;
}

.grid.list-view {
	grid-template-columns: 1fr;
	gap: 12px;
}

/* ---------------------------------------------------
   Card - Adaptive Theme Edition
--------------------------------------------------- */
.card {
	display: flex;
	flex-direction: column;
	padding: 22px 22px 18px;
	background: var(--card-bg);
	border-radius: var(--card-radius);
	text-decoration: none;
	color: var(--fg);
	box-shadow: var(--card-shadow);
	border: 1px solid var(--border-subtle);
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	opacity: 0;
	transform: translateY(30px);
	animation: cardAppear 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	min-height: 130px;
}

/* スタガーアニメーション */
.card:nth-child(1) {
	animation-delay: 0.1s;
}

.card:nth-child(2) {
	animation-delay: 0.15s;
}

.card:nth-child(3) {
	animation-delay: 0.2s;
}

.card:nth-child(4) {
	animation-delay: 0.25s;
}

.card:nth-child(5) {
	animation-delay: 0.3s;
}

.card:nth-child(6) {
	animation-delay: 0.35s;
}

.card:nth-child(7) {
	animation-delay: 0.4s;
}

.card:nth-child(8) {
	animation-delay: 0.45s;
}

.card:nth-child(9) {
	animation-delay: 0.5s;
}

.card:nth-child(10) {
	animation-delay: 0.55s;
}

.card:nth-child(n+11) {
	animation-delay: 0.6s;
}

@keyframes cardAppear {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ホログラフィックシャイン効果（Light/Dark） */
.card::before {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	width: 200%;
	height: 100%;
	background: linear-gradient(115deg,
			transparent 20%,
			rgba(255, 255, 255, 0.05) 40%,
			rgba(255, 255, 255, 0.1) 50%,
			rgba(255, 255, 255, 0.05) 60%,
			transparent 80%);
	transition: left 0.7s ease;
}

.card:hover::before {
	left: 150%;
}

/* 上部のグラデーションライン */
.card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--accent-secondary), var(--accent));
	background-size: 200% 100%;
	opacity: 0;
	transition: opacity 0.3s ease;
	animation: gradientFlow 3s linear infinite;
}

@keyframes gradientFlow {
	0% {
		background-position: 0% 0%;
	}

	100% {
		background-position: 200% 0%;
	}
}

/* ===== Console Mode Card Overrides ===== */
:root[data-theme="console"] .card {
	font-family: 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace;
	border-color: var(--border-glow);
}

/* Console: スキャンライン */
:root[data-theme="console"] .card::before {
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(0deg,
			transparent,
			transparent 2px,
			rgba(0, 180, 255, 0.02) 2px,
			rgba(0, 180, 255, 0.02) 4px);
	transition: none;
	opacity: 1;
}

:root[data-theme="console"] .card:hover::before {
	left: 0;
}

/* Console: データスキャンエフェクト */
:root[data-theme="console"] .card .card-scan {
	position: absolute;
	top: -100%;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg,
			transparent 0%,
			rgba(0, 180, 255, 0.08) 50%,
			transparent 100%);
	transition: top 0.6s ease;
	pointer-events: none;
}

:root[data-theme="console"] .card:hover .card-scan {
	top: 150%;
}

/* Console: ボーダーグロー */
:root[data-theme="console"] .card::after {
	height: 2px;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent);
	animation: none;
}

:root[data-theme="console"] .card:hover {
	border-color: var(--accent);
	box-shadow:
		0 0 30px rgba(0, 180, 255, 0.15),
		inset 0 0 40px rgba(0, 180, 255, 0.03);
}

/* Console: インジケーター */
:root[data-theme="console"] .card-indicator {
	display: block;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 8px;
	height: 8px;
	background: var(--accent);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--accent);
	animation: indicatorBlink 2s ease-in-out infinite;
}

@keyframes indicatorBlink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

:root:not([data-theme="console"]) .card-indicator {
	display: none;
}

:root:not([data-theme="console"]) .card-scan {
	display: none;
}

/* Light mode: カードに薄いボーダーを追加 */
:root[data-theme="light"] .card {
	border: 1px solid rgba(112, 51, 204, 0.08);
	box-shadow: var(--card-shadow);
}

:root[data-theme="light"] .card:hover {
	border-color: rgba(112, 51, 204, 0.2);
}

/* Light mode: ダッシュボードの背景調整 */
:root[data-theme="light"] .dashboard {
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(112, 51, 204, 0.08);
}

.card:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow:
		var(--card-shadow-hover),
		0 0 40px var(--accent-glow);
	border-color: var(--border-glow);
}

.card:hover::after {
	opacity: 1;
}

/* プロジェクトタイプ別のアクセントカラー */
.card[data-type="project"]:hover {
	box-shadow:
		var(--card-shadow-hover),
		0 0 40px var(--accent-secondary-glow),
		inset 0 0 30px rgba(255, 123, 0, 0.03);
}

.card[data-type="project"]::after {
	background: linear-gradient(90deg, var(--accent-secondary), var(--accent), var(--accent-secondary));
	background-size: 200% 100%;
}

/* リスト表示時のカード */
.grid.list-view .card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	padding: 16px 20px;
	border-radius: calc(var(--card-radius) * 0.7);
	min-height: auto;
}

.grid.list-view .card::before {
	display: none;
}

.grid.list-view .card::after {
	width: 4px;
	height: 100%;
	top: 0;
	left: 0;
	right: auto;
	border-radius: calc(var(--card-radius) * 0.2) 0 0 calc(var(--card-radius) * 0.2);
}

.grid.list-view .card:hover {
	transform: translateX(8px) scale(1.01);
}

/* Console: リスト表示のスキャンライン復活 */
:root[data-theme="console"] .grid.list-view .card::before {
	display: block;
}

.grid.list-view .card-title {
	margin-bottom: 0;
	flex: 1;
}

.grid.list-view .card-desc {
	display: none;
}

.grid.list-view .card-info-row {
	flex-shrink: 0;
	gap: 16px;
}

.grid.list-view .card-meta {
	margin: 0;
}

.grid.list-view .card-updated {
	margin: 0;
	white-space: nowrap;
}

.grid.list-view .entry-toggle {
	margin: 0;
}

.grid.list-view .status-toggle {
	margin: 0;
}

.grid.list-view .progress-bar-wrap {
	margin-top: 6px;
	gap: 6px;
}

.grid.list-view .progress-bar-track {
	height: 4px;
}

.grid.list-view .progress-bar-label {
	font-size: 9px;
	min-width: 24px;
}

/* タイトル */
.card-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 1;
	min-width: 0;
}

/* 説明文（1行） */
.card-desc {
	display: block;
	font-size: 11.5px;
	color: var(--text-secondary, var(--muted));
	opacity: 0.7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	line-height: 1.3;
	min-height: 0;
}

.card-desc:empty {
	display: none;
}

[data-edit-mode="on"] .card-desc:empty {
	display: block;
	min-height: 15px;
}

[data-edit-mode="on"] .card-desc:empty::before {
	content: '+ Add description';
	opacity: 0.3;
	font-style: italic;
}

/* メタ情報行（PROJECT + 更新時間） */
.card-info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	position: relative;
	z-index: 1;
	min-width: 0;
}

/* フォルダ名メタ情報 */
.card-meta {
	font-size: 11px;
	font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	opacity: 0.5;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* 更新日時 */
.card-updated {
	font-size: 11px;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* カードリンク */
.card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	flex: 1;
	min-width: 0;
}

/* ステータス表示（通常モード: 表示のみ / 編集モード: 操作可能） */
/* エントリーバッジ（通常モードでは非表示、Edit modeのみ表示） */
.entry-toggle {
	display: none;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	padding: 5px 10px;
	border-radius: 999px;
	margin-top: 12px;
	font-weight: 500;
	font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
	letter-spacing: 0.02em;
	position: relative;
	z-index: 2;
	border: 1px solid var(--border-subtle);
	background: var(--glass);
	color: var(--muted);
	pointer-events: none;
	cursor: default;
	transition: all 0.2s ease;
	white-space: nowrap;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* フォルダでは通常時エントリーバッジ非表示 */
.card[data-type="folder"] .entry-toggle {
	display: none;
}

/* エントリーインラインinput */
.entry-input {
	font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
	font-size: 10px;
	padding: 2px 6px;
	border: 1px solid var(--accent);
	border-radius: 4px;
	background: var(--bg);
	color: var(--fg);
	width: 120px;
	outline: none;
	box-shadow: 0 0 4px var(--accent-glow);
}

.status-toggle {
	display: inline-flex;
	align-items: center;
	cursor: default;
	pointer-events: none;
	gap: 6px;
	font-size: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	margin-top: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	position: relative;
	z-index: 2;
	border: 1px solid var(--border-subtle);
	background: var(--glass);
	color: var(--muted);
	transition: all 0.2s ease;
}

.status-toggle:hover {
	border-color: var(--border-glow);
	background: var(--accent-glow);
	color: var(--fg);
	transform: scale(1.05);
}

/* ステータス選択メニュー */
.status-menu {
	position: fixed;
	z-index: 1000;
	background: var(--card-bg);
	border: 1px solid var(--border-glow);
	border-radius: 12px;
	padding: 8px;
	min-width: 160px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(20px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.status-menu.active {
	opacity: 1;
	visibility: visible;
}

.status-menu-header {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 8px 12px;
	color: var(--muted);
	border-bottom: 1px solid var(--border-subtle);
	margin-bottom: 4px;
}

.status-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: none;
	background: transparent;
	color: var(--fg);
	font-size: 13px;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.15s ease;
	text-align: left;
}

.status-menu-item:hover {
	background: var(--accent-glow);
}

.status-menu-item .status-menu-icon {
	font-size: 16px;
}

.status-menu-clear {
	margin-top: 4px;
	border-top: 1px solid var(--border-subtle);
	padding-top: 10px;
	color: var(--muted);
}

.status-menu-clear:hover {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.status-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: none;
}

.status-menu-overlay.active {
	display: block;
	background: rgba(0, 0, 0, 0.5);
}

/* Console mode: ステータスメニュー */
:root[data-theme="console"] .status-menu {
	border-color: var(--accent);
	box-shadow: 0 0 30px var(--accent-glow);
}

/* Light mode: ステータスメニュー */
:root[data-theme="light"] .status-menu {
	background: rgba(255, 255, 255, 0.98);
	border-color: rgba(112, 51, 204, 0.15);
}

/* モバイル用ステータスメニュー */
@media (max-width: 768px) {
	.status-menu {
		min-width: 200px;
		max-width: 280px;
		width: 80vw;
	}

	.status-menu-item {
		padding: 14px 16px;
		font-size: 15px;
	}

	.status-menu-item .status-menu-icon {
		font-size: 20px;
	}
}

/* ---------------------------------------------------
   Icon Picker Menu
--------------------------------------------------- */
.icon-menu {
	position: fixed;
	z-index: 1000;
	background: var(--card-bg);
	border: 1px solid var(--border-glow);
	border-radius: 12px;
	padding: 8px;
	min-width: 200px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(20px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.icon-menu.active {
	opacity: 1;
	visibility: visible;
}

.icon-menu-header {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 8px 12px 6px;
	color: var(--muted);
	border-bottom: 1px solid var(--border-subtle);
	margin-bottom: 6px;
}

.icon-menu-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
	padding: 4px;
}

.icon-menu-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: var(--fg);
	font-size: 16px;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.15s ease;
}

.icon-menu-item:hover {
	background: var(--accent-glow);
	transform: scale(1.15);
}

.icon-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: none;
}

.icon-menu-overlay.active {
	display: block;
	background: rgba(0, 0, 0, 0.5);
}

:root[data-theme="console"] .icon-menu {
	border-color: var(--accent);
	box-shadow: 0 0 30px var(--accent-glow);
}

:root[data-theme="light"] .icon-menu {
	background: rgba(255, 255, 255, 0.98);
	border-color: rgba(112, 51, 204, 0.15);
}

@media (max-width: 768px) {
	.icon-menu {
		min-width: 220px;
	}

	.icon-menu-item {
		width: 42px;
		height: 42px;
		font-size: 20px;
	}
}

/* フォルダアイコン */
.card-title-icon {
	font-size: 20px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	transition: transform 0.3s ease, filter 0.3s ease;
}

.card:hover .card-title-icon {
	transform: scale(1.15) rotate(-5deg);
}

/* ========================================
   ステータス別アイコン カラー＆グローアニメ
======================================== */

/* --- Concept (紫) --- */
.card[data-status="concept"] .card-title-icon {
	color: #a855f7;
	animation: iconGlowPulse 3s ease-in-out infinite;
	--glow-color: rgba(168, 85, 247, 0.6);
	--glow-color-strong: rgba(168, 85, 247, 0.9);
}

/* --- Dev (アンバー) --- */
.card[data-status="dev"] .card-title-icon {
	color: #f59e0b;
	animation: iconGlowPulse 2.5s ease-in-out infinite;
	--glow-color: rgba(245, 158, 11, 0.6);
	--glow-color-strong: rgba(245, 158, 11, 0.9);
}

/* --- Beta (ブルー) --- */
.card[data-status="beta"] .card-title-icon {
	color: #3b82f6;
	animation: iconGlowPulse 2.8s ease-in-out infinite;
	--glow-color: rgba(59, 130, 246, 0.6);
	--glow-color-strong: rgba(59, 130, 246, 0.9);
}

/* --- Release (グリーン) --- */
.card[data-status="release"] .card-title-icon {
	color: #10b981;
	animation: iconGlowPulse 3.2s ease-in-out infinite;
	--glow-color: rgba(16, 185, 129, 0.6);
	--glow-color-strong: rgba(16, 185, 129, 0.9);
}

/* --- Paused (グレー) --- */
.card[data-status="paused"] .card-title-icon {
	color: #6b7280;
	animation: none;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* --- Archive (ダークグレー) --- */
.card[data-status="archive"] .card-title-icon {
	color: #4b5563;
	animation: none;
	opacity: 0.7;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* グロー脈動アニメーション */
@keyframes iconGlowPulse {

	0%,
	100% {
		filter: drop-shadow(0 0 4px var(--glow-color)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	}

	50% {
		filter: drop-shadow(0 0 10px var(--glow-color-strong)) drop-shadow(0 0 20px var(--glow-color)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	}
}

/* ホバーでグローMAX */
.card[data-status="concept"]:hover .card-title-icon,
.card[data-status="dev"]:hover .card-title-icon,
.card[data-status="beta"]:hover .card-title-icon,
.card[data-status="release"]:hover .card-title-icon {
	filter: drop-shadow(0 0 14px var(--glow-color-strong)) drop-shadow(0 0 28px var(--glow-color)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Console テーマ: グローをさらに強化 */
:root[data-theme="console"] .card[data-status="concept"] .card-title-icon,
:root[data-theme="console"] .card[data-status="dev"] .card-title-icon,
:root[data-theme="console"] .card[data-status="beta"] .card-title-icon,
:root[data-theme="console"] .card[data-status="release"] .card-title-icon {
	animation-name: iconGlowPulseConsole;
}

@keyframes iconGlowPulseConsole {

	0%,
	100% {
		filter: drop-shadow(0 0 6px var(--glow-color)) drop-shadow(0 0 12px var(--glow-color)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	}

	50% {
		filter: drop-shadow(0 0 14px var(--glow-color-strong)) drop-shadow(0 0 30px var(--glow-color)) drop-shadow(0 0 50px var(--glow-color)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	}
}

/* 非表示カード */
.card.hidden {
	display: none !important;
}

/* サブフォルダアイテム（フィルター時に表示） */

/* ---------------------------------------------------
   Empty State（空状態）- Mystical
--------------------------------------------------- */
.empty-state {
	text-align: center;
	padding: 80px 20px;
	color: var(--muted);
	animation: emptyFadeIn 0.8s ease-out;
}

@keyframes emptyFadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.empty-state-icon {
	font-size: 64px;
	margin-bottom: 20px;
	animation: emptyFloat 3s ease-in-out infinite;
}

@keyframes emptyFloat {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

.empty-state-text {
	font-size: 18px;
	margin: 0;
	font-weight: 500;
}

.empty-state-sub {
	font-size: 14px;
	margin-top: 12px;
	opacity: 0.6;
}

/* フィルター結果なし */
.no-results {
	text-align: center;
	padding: 60px 20px;
	color: var(--muted);
	display: none;
}

.no-results.show {
	display: block;
	animation: emptyFadeIn 0.4s ease-out;
}

/* ---------------------------------------------------
   Footer - Cyber Signature
--------------------------------------------------- */
.footer {
	margin-top: 80px;
	padding: 20px 0 0px;
	border-top: 1px solid var(--border-subtle);
	text-align: center;
	font-size: 12px;
	position: relative;
}

.footer::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent), var(--accent-secondary), transparent);
}

.footer-inner {
	font-family: 'Orbitron', sans-serif;
	opacity: 0.5;
	letter-spacing: 0.15em;
	transition: opacity 0.3s ease;
}

.footer-inner p {
	font-size: 80%;
	margin: 5px 0;
}

.footer:hover .footer-inner {
	opacity: 0.8;
}

.logout-link {
	margin-left: 20px;
	color: inherit;
	text-decoration: none;
	font-size: 10px;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.logout-link:hover {
	opacity: 1;
}

/* ---------------------------------------------------
   Responsive
--------------------------------------------------- */
@media (max-width: 768px) {
	body {
		padding: 24px 16px;
	}

	.header-brand {
		gap: 14px;
	}

	.header-icon {
		width: 44px;
	}

	.logo-title {
		font-size: 32px;
	}

	.header-subtitle {
		font-size: 13px;
	}

	.toolbar-top {
		top: 12px;
		right: 12px;
	}

	.dashboard {
		grid-template-columns: repeat(4, 1fr);
		padding: 8px;
		gap: 6px;
		margin-bottom: 12px;
	}

	.stat-value {
		font-size: 18px;
	}

	.stat-label {
		font-size: 8px;
	}

	.toolbar-inline {
		padding: 6px 8px;
		gap: 6px;
	}

	.toolbar-inline .filter-btn {
		padding: 4px 8px;
		font-size: 9px;
	}

	.toolbar-inline .view-btn {
		padding: 4px 8px;
		font-size: 9px;
	}

	.folder-nav {
		margin-bottom: 12px;
	}

	.folder-nav-tab {
		padding: 6px 12px;
		font-size: 11px;
	}

	.grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.card {
		padding: 16px;
	}

	/* モバイル用カードレイアウト */
	.card-title {
		font-size: 16px;
		gap: 8px;
		margin-bottom: 6px;
	}

	.card-title-icon {
		font-size: 18px;
	}

	.card-info-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.card-meta {
		font-size: 10px;
	}

	.card-updated {
		font-size: 10px;
	}

	.status-toggle {
		margin-top: 10px;
		font-size: 9px;
		padding: 4px 10px;
	}

	/* モバイルでは常にグリッド表示（リスト表示を無効化） */
	.grid.list-view {
		display: grid;
	}

	.grid.list-view .card {
		display: block;
		padding: 16px;
	}

	.grid.list-view .card-title {
		margin-bottom: 6px;
	}

	.grid.list-view .card-info-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.grid.list-view .status-toggle {
		margin-top: 10px;
	}

	.grid.list-view .progress-bar-wrap {
		margin-top: 8px;
	}
}

/* ---------------------------------------------------
   カスタムスクロールバー
--------------------------------------------------- */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg);
}

::-webkit-scrollbar-thumb {
	background: var(--border-subtle);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent-glow);
}

/* ---------------------------------------------------
   Selection
--------------------------------------------------- */
::selection {
	background: var(--accent-glow);
	color: var(--fg);
}

/* ---------------------------------------------------
   Console Boot Effect
--------------------------------------------------- */
.console-boot {
	animation: consoleBoot 0.8s ease-out;
}

@keyframes consoleBoot {
	0% {
		filter: brightness(0) contrast(1.5);
	}

	20% {
		filter: brightness(2) contrast(1.5);
	}

	40% {
		filter: brightness(0.5) contrast(1.2);
	}

	60% {
		filter: brightness(1.5) contrast(1.1);
	}

	100% {
		filter: brightness(1) contrast(1);
	}
}

/* Console mode breadcrumb */
:root[data-theme="console"] .breadcrumb {
	border-radius: var(--btn-radius);
	border-color: var(--border-glow);
	font-family: 'SF Mono', monospace;
}

/* Console mode フッター */
:root[data-theme="console"] .footer::before {
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	box-shadow: 0 0 10px var(--accent);
}

:root[data-theme="console"] .footer-inner {
	color: var(--accent);
	text-shadow: 0 0 10px var(--accent-glow);
}

/* ---------------------------------------------------
   タイトルインライン編集
--------------------------------------------------- */
.card-title-text {
	cursor: pointer;
	border-bottom: 1px dashed transparent;
	transition: border-color 0.2s ease;
	border-radius: 2px;
	padding: 0 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.card-title-text:hover {
	border-bottom-color: transparent;
}

.card-title-input {
	font: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: var(--fg);
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid var(--accent);
	border-radius: 4px;
	padding: 2px 6px;
	outline: none;
	width: 100%;
	min-width: 0;
	box-shadow: 0 0 8px var(--accent-glow);
}

.card-title-input::placeholder {
	color: var(--muted);
}

/* Light theme */
:root[data-theme="light"] .card-title-input {
	background: rgba(255, 255, 255, 0.9);
}

/* Console theme */
:root[data-theme="console"] .card-title-input {
	background: rgba(0, 10, 20, 0.9);
	font-family: 'SF Mono', monospace;
	box-shadow: 0 0 12px var(--accent-glow);
}

.card-desc-input {
	font-size: 11.5px;
	color: var(--fg);
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid var(--accent);
	border-radius: 4px;
	padding: 2px 6px;
	outline: none;
	width: 100%;
	min-width: 0;
	box-shadow: 0 0 6px var(--accent-glow);
}

.card-desc-input::placeholder {
	color: var(--muted);
}

:root[data-theme="light"] .card-desc-input {
	background: rgba(255, 255, 255, 0.9);
}

:root[data-theme="console"] .card-desc-input {
	background: rgba(0, 10, 20, 0.9);
	font-family: 'SF Mono', monospace;
}

/* ---------------------------------------------------
   Edit Mode 切り替えボタン
--------------------------------------------------- */
.edit-toggle {
	border: 1px solid var(--border-subtle);
	border-radius: var(--btn-radius);
	padding: 8px 14px;
	background: var(--glass);
	color: var(--fg);
	cursor: pointer;
	font-size: 11px;
	font-weight: 500;
	font-family: inherit;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
}

.edit-toggle::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
	transition: left 0.4s ease;
}

.edit-toggle:hover {
	background: var(--accent-glow);
	border-color: var(--accent);
	box-shadow: 0 0 15px var(--accent-glow), inset 0 0 20px rgba(255, 255, 255, 0.02);
	transform: translateY(-1px);
}

.edit-toggle:hover::before {
	left: 100%;
}

.edit-toggle:active {
	transform: scale(0.98);
}

.edit-toggle.active {
	background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 100%);
	border-color: var(--accent);
	box-shadow: 0 0 20px var(--accent-glow);
}

:root[data-theme="console"] .edit-toggle {
	font-family: 'SF Mono', ui-monospace, monospace;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------------------------------------------------
   非表示トグルボタン
--------------------------------------------------- */
.hidden-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	padding: 4px 10px;
	border-radius: 999px;
	margin-top: 8px;
	border: 1px solid var(--border-subtle);
	background: var(--glass);
	color: var(--muted);
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	z-index: 2;
}

.hidden-toggle:hover {
	border-color: var(--border-glow);
	background: var(--accent-glow);
	color: var(--fg);
	transform: scale(1.05);
}

/* ---------------------------------------------------
   非表示カード — デフォルトでは非表示
--------------------------------------------------- */
.card[data-hidden="true"] {
	display: none;
}

/* ---------------------------------------------------
   Progress Bar - Animated & Exciting
--------------------------------------------------- */
.progress-bar-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

/* フォルダではプログレスバー非表示 */
.card[data-type="folder"] .progress-bar-wrap {
	display: none;
}

.progress-bar-track {
	flex: 1;
	height: 6px;
	background: var(--border-subtle);
	border-radius: 3px;
	pointer-events: none;
	position: relative;
	overflow: hidden;
}

.progress-bar-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.3s ease;
	min-width: 0;
	background: var(--accent);
	position: relative;
	overflow: hidden;
}

.progress-bar-thumb {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent);
	transform: translate(-50%, -50%);
	transition: left 0.3s ease, opacity 0.2s ease, transform 0.2s ease;
	opacity: 0;
	pointer-events: none;
}

.progress-bar-label {
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 10px;
	color: var(--text-muted);
	min-width: 28px;
	text-align: right;
}

/* ========================================
   Dev (amber) — エレクトリックフロー
======================================== */
.card[data-status="dev"] .progress-bar-fill {
	background: linear-gradient(90deg,
			#f59e0b 0%, #fbbf24 25%, #f59e0b 50%, #fcd34d 75%, #f59e0b 100%) !important;
	background-size: 300% 100% !important;
	animation: progressFlow 3s linear infinite;
	box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.card[data-status="dev"] .progress-bar-fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg,
			transparent,
			transparent 8px,
			rgba(255, 255, 255, 0.15) 8px,
			rgba(255, 255, 255, 0.15) 16px);
	background-size: 32px 100%;
	animation: stripeMove 0.8s linear infinite;
}

.card[data-status="dev"] .progress-bar-track {
	background: rgba(245, 158, 11, 0.1);
}

/* ========================================
   Beta (blue) — 充電中シマー
======================================== */
.card[data-status="beta"] .progress-bar-fill {
	background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6) !important;
	background-size: 200% 100% !important;
	animation: progressCharge 2s ease-in-out infinite;
	box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.card[data-status="beta"] .progress-bar-fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.35) 40%,
			rgba(255, 255, 255, 0.5) 50%,
			rgba(255, 255, 255, 0.35) 60%,
			transparent 100%);
	background-size: 200% 100%;
	animation: shimmerSweep 2s ease-in-out infinite;
}

.card[data-status="beta"] .progress-bar-track {
	background: rgba(59, 130, 246, 0.1);
}

/* ========================================
   Release (green) — コンプリート・グロー
======================================== */
.card[data-status="release"] .progress-bar-fill {
	background: linear-gradient(90deg,
			#10b981 0%, #34d399 30%, #6ee7b7 50%, #34d399 70%, #10b981 100%) !important;
	background-size: 200% 100% !important;
	animation: progressComplete 3s ease-in-out infinite;
	box-shadow: 0 0 12px rgba(16, 185, 129, 0.5), 0 0 24px rgba(16, 185, 129, 0.15);
}

.card[data-status="release"] .progress-bar-fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
			transparent 20%,
			rgba(255, 255, 255, 0.25) 35%,
			rgba(255, 255, 255, 0.5) 50%,
			rgba(255, 255, 255, 0.25) 65%,
			transparent 80%);
	background-size: 300% 100%;
	animation: shimmerCelebrate 2.5s ease-in-out infinite;
}

.card[data-status="release"] .progress-bar-track {
	background: rgba(16, 185, 129, 0.1);
}

/* ========================================
   Keyframes
======================================== */
@keyframes progressCharge {

	0%,
	100% {
		background-position: 0% 0;
	}

	50% {
		background-position: 100% 0;
	}
}

@keyframes shimmerSweep {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

@keyframes progressFlow {
	0% {
		background-position: 0% 0;
	}

	100% {
		background-position: 300% 0;
	}
}

@keyframes stripeMove {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 32px 0;
	}
}

@keyframes progressComplete {

	0%,
	100% {
		background-position: 0% 0;
		box-shadow: 0 0 12px rgba(16, 185, 129, 0.5), 0 0 24px rgba(16, 185, 129, 0.15);
	}

	50% {
		background-position: 100% 0;
		box-shadow: 0 0 18px rgba(16, 185, 129, 0.7), 0 0 36px rgba(16, 185, 129, 0.25);
	}
}

@keyframes shimmerCelebrate {
	0% {
		background-position: 300% 0;
	}

	100% {
		background-position: -300% 0;
	}
}

/* ========================================
   Console テーマ: バーにグロー強化
======================================== */
:root[data-theme="console"] .progress-bar-fill {
	box-shadow: 0 0 6px currentColor;
}

:root[data-theme="console"] .progress-bar-track {
	background: rgba(0, 255, 65, 0.1);
}

:root[data-theme="console"] .progress-bar-thumb {
	box-shadow: 0 0 6px currentColor;
}

:root[data-theme="console"] .card[data-status="dev"] .progress-bar-fill {
	box-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 0 0 20px rgba(245, 158, 11, 0.2);
}

:root[data-theme="console"] .card[data-status="beta"] .progress-bar-fill {
	box-shadow: 0 0 10px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.2);
}

:root[data-theme="console"] .card[data-status="release"] .progress-bar-fill {
	box-shadow: 0 0 14px rgba(16, 185, 129, 0.7), 0 0 30px rgba(16, 185, 129, 0.3);
}

/* ---------------------------------------------------
   Edit Mode ON の表示ルール
--------------------------------------------------- */
body[data-edit-mode="on"] .entry-toggle {
	display: inline-flex;
	pointer-events: auto;
	cursor: text;
	border-color: var(--border-glow);
}

/* フォルダはEdit modeでエントリー設定UI表示 */
body[data-edit-mode="on"] .card[data-type="folder"] .entry-toggle {
	display: inline-flex;
	border-style: dashed;
	opacity: 0.6;
}

body[data-edit-mode="on"] .card[data-type="folder"] .entry-toggle:hover {
	opacity: 1;
}

body[data-edit-mode="on"] .entry-toggle:hover {
	background: var(--accent-glow);
	color: var(--fg);
	border-color: var(--accent);
}

body[data-edit-mode="on"] .status-toggle {
	cursor: pointer;
	pointer-events: auto;
}

body[data-edit-mode="on"] .hidden-toggle {
	display: inline-flex;
}

body[data-edit-mode="on"] .card-title-text {
	cursor: text;
}

body[data-edit-mode="on"] .card-title-text:hover {
	border-bottom-color: var(--accent);
}

body[data-edit-mode="on"] .card-title-icon {
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.15s ease;
}

body[data-edit-mode="on"] .card-title-icon:hover {
	background: var(--accent-glow);
}

/* フォルダはアイコン変更不可 */
body[data-edit-mode="on"] .card[data-type="folder"] .card-title-icon {
	cursor: default;
}

body[data-edit-mode="on"] .card[data-type="folder"] .card-title-icon:hover {
	background: transparent;
}

/* 編集モードON: 非表示カードを半透明で表示 */
body[data-edit-mode="on"] .card[data-hidden="true"] {
	display: block;
	opacity: 0.45;
}

body[data-edit-mode="on"] .card[data-hidden="true"]:hover {
	opacity: 0.7;
}

body[data-edit-mode="on"] .progress-bar-track {
	pointer-events: auto;
	cursor: pointer;
	height: 6px;
	transition: height 0.2s ease;
}

body[data-edit-mode="on"] .progress-bar-thumb {
	opacity: 1;
	pointer-events: none;
}

body[data-edit-mode="on"] .progress-bar-track:hover .progress-bar-thumb {
	transform: translate(-50%, -50%) scale(1.3);
}

/* Dev/未設定以外はEdit modeでも編集不可 */
body[data-edit-mode="on"] .card[data-status="concept"] .progress-bar-track,
body[data-edit-mode="on"] .card[data-status="beta"] .progress-bar-track,
body[data-edit-mode="on"] .card[data-status="release"] .progress-bar-track,
body[data-edit-mode="on"] .card[data-status="paused"] .progress-bar-track,
body[data-edit-mode="on"] .card[data-status="archive"] .progress-bar-track {
	cursor: default;
	pointer-events: none;
}

body[data-edit-mode="on"] .card[data-status="concept"] .progress-bar-thumb,
body[data-edit-mode="on"] .card[data-status="beta"] .progress-bar-thumb,
body[data-edit-mode="on"] .card[data-status="release"] .progress-bar-thumb,
body[data-edit-mode="on"] .card[data-status="paused"] .progress-bar-thumb,
body[data-edit-mode="on"] .card[data-status="archive"] .progress-bar-thumb {
	opacity: 0;
}

/* ---------------------------------------------------
   Edit Mode ボーダーグロー（画面端にアクセントカラーの枠）
--------------------------------------------------- */
body[data-edit-mode="on"]::before {
	content: "";
	position: fixed;
	inset: 0;
	border: 2px solid var(--accent);
	box-shadow:
		inset 0 0 30px var(--accent-glow),
		0 0 20px var(--accent-glow);
	pointer-events: none;
	z-index: 9999;
	border-radius: 0;
	animation: editGlowPulse 2s ease-in-out infinite alternate;
	transition: opacity 0.3s ease;
}

@keyframes editGlowPulse {
	from {
		box-shadow:
			inset 0 0 20px var(--accent-glow),
			0 0 15px var(--accent-glow);
		opacity: 0.7;
	}

	to {
		box-shadow:
			inset 0 0 40px var(--accent-glow),
			0 0 25px var(--accent-glow);
		opacity: 1;
	}
}

/* ---------------------------------------------------
   Analyze Section
--------------------------------------------------- */
.analyze-section {
	animation: dashboardFadeIn 0.8s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.analyze-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-family: 'Orbitron', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent);
}

.analyze-icon {
	font-size: 18px;
}

.analyze-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.analyze-panel-wide {
	grid-column: 1 / -1;
}

.analyze-panel {
	background: var(--card-bg);
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	padding: 20px;
	box-shadow: var(--card-shadow);
}

.analyze-panel-title {
	margin: 0 0 16px 0;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 8px;
}

.analyze-panel-title i {
	color: var(--accent);
	font-size: 14px;
}

.analyze-panel-badge {
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 8px;
	border-radius: 10px;
	margin-left: auto;
}

/* --- Sort Toggle --- */
.analyze-sort-toggle {
	display: inline-flex;
	gap: 4px;
	margin-left: 8px;
}

.analyze-sort-btn {
	background: transparent;
	border: 1px solid var(--border-subtle);
	color: var(--text-secondary);
	width: 28px;
	height: 28px;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	transition: all 0.2s ease;
	padding: 0;
}

.analyze-sort-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.analyze-sort-btn.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.analyze-sort-btn i {
	color: inherit;
}

/* --- Item Status Icon --- */
.analyze-item-status {
	flex-shrink: 0;
	font-size: 13px;
	width: 18px;
	text-align: center;
}

/* --- Status Distribution (横棒グラフ) --- */
.analyze-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.analyze-bar-label {
	font-size: 12px;
	font-weight: 600;
	min-width: 100px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.analyze-bar-label-muted {
	color: #9ca3af !important;
}

.analyze-bar-track {
	flex: 1;
	height: 20px;
	background: var(--border-subtle);
	border-radius: 4px;
	overflow: hidden;
}

.analyze-bar-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	min-width: 2px;
}

.analyze-bar-count {
	font-size: 13px;
	font-weight: 700;
	min-width: 24px;
	text-align: right;
	color: var(--text-primary);
}

/* --- Progress Distribution (縦棒ヒストグラム) --- */
.analyze-histogram {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 16px;
	height: 160px;
	padding-top: 10px;
}

.analyze-bucket {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	height: 100%;
}

.analyze-bucket-bar-wrap {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

.analyze-bucket-count {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 4px;
	color: var(--text-primary);
}

.analyze-bucket-bar {
	width: 100%;
	max-width: 60px;
	border-radius: 6px 6px 0 0;
	min-height: 4px;
	transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.analyze-bucket-label {
	font-size: 11px;
	font-weight: 600;
	margin-top: 6px;
	color: var(--text-secondary);
	white-space: nowrap;
}

/* --- Item Lists (stalled / almostDone / noStatus) --- */
.analyze-item-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 280px;
	overflow-y: auto;
}

.analyze-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid transparent;
	transition: all 0.2s ease;
}

.analyze-item:hover {
	border-color: var(--border-subtle);
	background: rgba(255, 255, 255, 0.06);
}

.analyze-item-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex-shrink: 1;
}

.analyze-item-path {
	font-size: 11px;
	color: var(--text-secondary);
	opacity: 0.6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1;
}

.analyze-item-time {
	font-size: 11px;
	color: var(--accent);
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}

/* --- Mini Progress Bar --- */
.analyze-mini-progress {
	position: relative;
	width: 50%;
	height: 16px;
	background: var(--border-subtle);
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}

.analyze-mini-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #3b82f6, #10b981);
	border-radius: 8px;
	transition: width 0.4s ease;
}

.analyze-mini-progress-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- Empty State --- */
.analyze-empty {
	text-align: center;
	padding: 24px;
	color: var(--text-secondary);
	font-size: 13px;
	opacity: 0.7;
}

.analyze-empty i {
	color: #10b981;
	margin-right: 6px;
}

/* --- Console Theme --- */
:root[data-theme="console"] .analyze-header {
	text-shadow: 0 0 10px var(--accent-glow);
}

:root[data-theme="console"] .analyze-bar-fill {
	box-shadow: 0 0 8px currentColor;
}

:root[data-theme="console"] .analyze-bucket-bar {
	box-shadow: 0 0 8px currentColor;
}

:root[data-theme="console"] .analyze-item:hover {
	box-shadow: 0 0 10px var(--accent-glow);
}

:root[data-theme="console"] .analyze-mini-progress-fill {
	box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

/* --- Light Theme --- */
:root[data-theme="light"] .analyze-item {
	background: rgba(0, 0, 0, 0.02);
}

:root[data-theme="light"] .analyze-item:hover {
	background: rgba(0, 0, 0, 0.04);
}

/* --- Mobile --- */
@media (max-width: 768px) {
	.analyze-grid {
		grid-template-columns: 1fr;
	}

	.analyze-panel {
		padding: 14px;
	}

	.analyze-bar-label {
		min-width: 80px;
		font-size: 11px;
	}

	.analyze-histogram {
		height: 120px;
	}
}

/* ---------------------------------------------------
   Login Screen
--------------------------------------------------- */
.login-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-main);
	z-index: 10000;
}

.login-card {
	width: 380px;
	max-width: 90vw;
	padding: 48px 40px;
	background: var(--card-bg);
	border: 1px solid var(--border-subtle);
	border-radius: 20px;
	box-shadow: var(--card-shadow), 0 0 60px rgba(249, 115, 22, 0.08);
	text-align: center;
	animation: loginCardIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes loginCardIn {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.login-logo {
	margin-bottom: 16px;
	animation: loginLogoGlow 3s ease-in-out infinite alternate;
}

.login-logo-img {
	width: 72px;
	height: 72px;
	filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.5));
}

@keyframes loginLogoGlow {
	from {
		filter: drop-shadow(0 0 15px rgba(249, 115, 22, 0.3));
	}

	to {
		filter: drop-shadow(0 0 30px rgba(249, 115, 22, 0.6));
	}
}

.login-title {
	font-family: 'Orbitron', sans-serif;
	font-size: 28px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 32px 0;
	letter-spacing: 0.12em;
}

.login-title-accent {
	color: #f97316;
	text-shadow: 0 0 20px rgba(249, 115, 22, 0.5);
}

.login-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.login-input-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-subtle);
	border-radius: 10px;
	transition: border-color 0.2s ease;
}

.login-input-wrap:focus-within {
	border-color: var(--accent);
}

.login-input-wrap i {
	color: var(--text-secondary);
	font-size: 14px;
	flex-shrink: 0;
}

.login-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-size: 15px;
	color: var(--text-primary);
	font-family: inherit;
}

.login-input::placeholder {
	color: var(--text-secondary);
	opacity: 0.5;
}

.login-btn {
	padding: 14px;
	background: linear-gradient(135deg, #f97316, #ea580c);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	font-family: 'Orbitron', sans-serif;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.login-btn:hover {
	filter: brightness(1.15);
	transform: translateY(-2px);
	box-shadow: 0 6px 25px rgba(249, 115, 22, 0.45);
}

.login-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px rgba(249, 115, 22, 0.3);
}

.login-error {
	color: #ef4444;
	font-size: 13px;
	margin: 0;
}

.login-message {
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 1.6;
}

/* ---------------------------------------------------
   外部ドメイン追加モーダル
   --------------------------------------------------- */
.ext-modal-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 9000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.ext-modal-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

.ext-modal {
	width: 440px;
	max-width: 92vw;
	background: var(--card-bg);
	border: 1px solid var(--border-subtle);
	border-radius: 16px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(249, 115, 22, 0.06);
	transform: translateY(20px) scale(0.96);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}

.ext-modal-overlay.active .ext-modal {
	transform: translateY(0) scale(1);
}

.ext-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 24px 28px 16px;
	border-bottom: 1px solid var(--border-subtle);
}

.ext-modal-icon {
	font-size: 20px;
	color: #f97316;
	filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.4));
}

.ext-modal-title {
	margin: 0;
	font-family: 'Orbitron', monospace, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	letter-spacing: 0.06em;
}

.ext-modal-body {
	padding: 20px 28px 8px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ext-modal-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ext-modal-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-secondary);
}

.ext-modal-label i {
	color: var(--accent);
	margin-right: 4px;
	font-size: 10px;
}

.ext-modal-input {
	width: 100%;
	padding: 10px 14px;
	font-size: 14px;
	font-family: 'JetBrains Mono', monospace, sans-serif;
	color: var(--text-primary);
	background: var(--bg-main);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}

.ext-modal-input:focus {
	border-color: #f97316;
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.ext-modal-input-error {
	border-color: #ef4444 !important;
	animation: extModalShake 0.4s ease;
}

@keyframes extModalShake {

	0%,
	100% {
		transform: translateX(0);
	}

	20%,
	60% {
		transform: translateX(-6px);
	}

	40%,
	80% {
		transform: translateX(6px);
	}
}

.ext-modal-input::placeholder {
	color: var(--text-muted);
	font-size: 13px;
}

.ext-modal-check-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.ext-modal-check-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
	cursor: pointer;
}

.ext-modal-hint {
	font-size: 11px;
	color: var(--text-muted);
	padding-left: 2px;
}

.ext-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 28px 24px;
}

.ext-modal-btn {
	padding: 9px 22px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	letter-spacing: 0.02em;
}

.ext-modal-cancel {
	background: transparent;
	color: var(--text-secondary);
	border: 1px solid var(--border-subtle);
}

.ext-modal-cancel:hover {
	background: var(--bg-main);
	color: var(--text-primary);
}

.ext-modal-submit {
	background: linear-gradient(135deg, #f97316, #ea580c);
	color: #fff;
	box-shadow: 0 2px 12px rgba(249, 115, 22, 0.3);
}

.ext-modal-submit:hover {
	box-shadow: 0 4px 20px rgba(249, 115, 22, 0.5);
	transform: translateY(-1px);
}

.ext-modal-submit:active {
	transform: translateY(0);
}

.ext-modal-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}