/* ============================================================
   doc-dropper · stylesheet
   Aesthetic: refined utility · dark · monospace accents
   ============================================================ */

:root {
	--bg-base: #0a0a0a;
	--bg-elevated: #131313;
	--bg-raised: #1a1a1a;
	--bg-hover: #1f1f1f;
	--border-subtle: #1f1f1f;
	--border-default: #2a2a2a;
	--border-strong: #3a3a3a;

	--text-primary: #cdd6e0;
	--text-secondary: #a8a8a8;
	--text-tertiary: #6e6e6e;
	--text-disabled: #4a4a4a;

	--accent: #d4ff5e;
	--accent-dim: #94b340;
	--accent-bg: rgba(212, 255, 94, 0.08);

	--success: #4ade80;
	--warning: #fbbf24;
	--danger: #f87171;
	--danger-bg: rgba(248, 113, 113, 0.1);
	--info: #60a5fa;

	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 40px;
	--space-2xl: 64px;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	--ease: cubic-bezier(0.2, 0, 0, 1);
	--dur-fast: 120ms;
	--dur-med: 200ms;
	--dur-slow: 400ms;
}

/* ---------- Reset & base ---------- */

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

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}

body {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-primary);
	background: var(--bg-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	user-select: none;
}

.activity-log, .modal-container, input, textarea, .selectable {
	user-select: text;
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

::selection { background: var(--accent); color: var(--bg-base); }

[hidden] { display: none !important; }

/* ---------- App shell ---------- */

.app-shell {
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

.view {
	display: none;
	flex: 1;
	min-height: 0;
	flex-direction: column;
}

.view-active { display: flex; }

/* ---------- Logo ---------- */

.logo-mark {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-family: var(--font-mono);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text-primary);
}

.logo-mark-large { font-size: 32px; gap: 4px; }
.logo-mark-small { font-size: 14px; }

.logo-bracket { color: var(--accent); font-weight: 700; }
.logo-text { color: var(--text-primary); }

/* v1.9.15: app icon to the left of the home-header logo.
   v1.9.17: switched from raster PNG to inline outline SVG, bigger, lime-colored. */
.logo-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-right: 8px;
	flex-shrink: 0;
	color: var(--accent);
}

.logo-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Loading view ---------- */

#view-loading { align-items: center; justify-content: center; }

.loading-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xl);
}

.loading-spinner {
	width: 24px;
	height: 24px;
	border: 2px solid var(--border-default);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 700ms linear infinite;
}

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

/* ---------- Welcome view ---------- */

#view-welcome {
	align-items: center;
	justify-content: center;
	padding: var(--space-xl);
	position: relative;
	background:
		radial-gradient(ellipse at top, rgba(212, 255, 94, 0.04), transparent 50%),
		var(--bg-base);
}

.welcome-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 420px;
	width: 100%;
	text-align: center;
	gap: var(--space-lg);
	animation: fadeInUp var(--dur-slow) var(--ease);
}

.welcome-tagline {
	font-size: 16px;
	color: var(--text-secondary);
	margin: 0;
	margin-top: var(--space-sm);
}

.welcome-fineprint {
	font-size: 12px;
	color: var(--text-tertiary);
	margin: 0;
	margin-top: var(--space-md);
	line-height: 1.7;
}

.welcome-footer {
	position: absolute;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-tertiary);
}

.footer-label { letter-spacing: 0.05em; }
.footer-sep { color: var(--text-disabled); }
.footer-link {
	color: var(--text-tertiary);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.footer-link:hover { color: var(--accent); }

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- Sign-in form ---------- */

.signin-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
	margin-top: var(--space-md);
	text-align: left;
}

.signin-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.token-input-wrap { position: relative; display: flex; }

.token-input {
	flex: 1;
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	padding: 12px 44px 12px 14px;
	color: var(--text-primary);
	font-family: var(--font-mono);
	font-size: 13px;
	min-height: 44px;
	transition: all var(--dur-fast) var(--ease);
	outline: none;
}

.token-input:focus {
	border-color: var(--accent);
	background: var(--bg-raised);
	box-shadow: 0 0 0 3px var(--accent-bg);
}

.token-input::placeholder { color: var(--text-disabled); font-family: var(--font-mono); }

.token-toggle {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	color: var(--text-tertiary);
	transition: color var(--dur-fast) var(--ease);
}

.token-toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
.token-toggle.is-active { color: var(--accent); }

.btn-full { width: 100%; }

.btn-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 700ms linear infinite;
	display: inline-block;
}

.signin-error {
	background: var(--danger-bg);
	border: 1px solid var(--danger);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	color: var(--danger);
	font-size: 13px;
	line-height: 1.5;
	animation: shake var(--dur-med) var(--ease);
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: 10px 16px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--bg-elevated);
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	min-height: 44px;
	transition: all var(--dur-fast) var(--ease);
	white-space: nowrap;
}

.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
	background: var(--accent);
	color: var(--bg-base);
	border-color: var(--accent);
	font-weight: 600;
}

.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
.btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); }

.btn-lg { padding: 14px 24px; font-size: 15px; min-height: 52px; }
.btn-sm { padding: 6px 12px; min-height: 32px; font-size: 13px; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); border-color: transparent; }

.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.btn-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	color: var(--text-secondary);
	font-size: 18px;
	transition: all var(--dur-fast) var(--ease);
}

.btn-back:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---------- App header ---------- */

.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--border-subtle);
	background: var(--bg-base);
	flex-shrink: 0;
	gap: var(--space-md);
}

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }

.user-info {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-tertiary);
}

.user-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	overflow: hidden;
}

.user-avatar img { width: 100%; height: 100%; display: block; }

/* ---------- Home view ---------- */

.home-main {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-xl) var(--space-lg);
	padding-bottom: var(--space-lg);
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
}

.home-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
	margin-bottom: var(--space-2xl);
}

/* v1.9.14: home page footer (small "doc-dropper vX" link below project tiles).
   Sit close to the tiles instead of two-empty-rows-away. */
.app-footer {
	display: flex;
	justify-content: center;
	margin: var(--space-md) 0 0 0;
	padding: 0;
}

.app-footer-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-tertiary);
	text-decoration: none;
	letter-spacing: 0.04em;
	transition: color var(--dur-fast) var(--ease);
}

.app-footer-link:hover {
	color: var(--accent);
}

.app-footer-version {
	color: var(--text-disabled);
}

@media (max-width: 640px) { .home-actions { grid-template-columns: 1fr; } }

.action-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
	padding: var(--space-lg);
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	color: var(--text-primary);
	text-align: left;
	transition: all var(--dur-fast) var(--ease);
	min-height: 120px;
}

.action-card:hover { background: var(--bg-hover); border-color: var(--border-strong); transform: translateY(-1px); }
.action-card:active { transform: translateY(0); }

.action-card-primary {
	background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-raised) 100%);
	border-color: var(--border-strong);
}

.action-card-primary:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-bg); }

.action-icon {
	font-family: var(--font-mono);
	font-size: 24px;
	font-weight: 600;
	color: var(--accent);
	line-height: 1;
	margin-bottom: var(--space-sm);
}

.action-label { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.action-sub { font-size: 13px; color: var(--text-tertiary); }

/* ---------- Sections ---------- */

.section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-md);
}

.section-title {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
	margin: 0;
}

.section-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }

.section-actions {
	display: inline-flex;
	align-items: center;
	gap: var(--space-md);
}

/* Prominent circular/pill text-button used in section headers (Reorder, Done, Reset order) */
.btn-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--bg-elevated);
	border: 1px solid var(--accent);
	padding: 8px 18px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--accent);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	min-height: 36px;
	border-radius: 9999px;
}

.btn-link-icon {
	display: inline-flex;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

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

.btn-link.is-active {
	color: var(--bg-base);
	background: var(--accent);
	border-color: var(--accent);
}

.btn-link.is-active:hover {
	background: var(--accent-dim);
	border-color: var(--accent-dim);
	color: var(--bg-base);
}

.btn-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Reorder mode visual treatment */
.project-list.is-reorder .project-card {
	cursor: grab;
	border-style: dashed;
	border-color: var(--border-strong);
	padding-left: 36px; /* leave room for grip */
	position: relative;
}

.project-list.is-reorder .project-card:active,
.project-list.is-reorder .project-card.is-draggable:active { cursor: grabbing; }

.project-list.is-reorder .project-card:hover { transform: none; } /* don't lift on hover during reorder */

.project-card-grip {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -3px;
	color: var(--text-tertiary);
	user-select: none;
	pointer-events: none;
}

.project-card.is-dragging { opacity: 0.4; }

.project-card.is-drop-target {
	border-color: var(--accent);
	background: var(--accent-bg);
}

/* ---------- Project list (home) ---------- */

.project-list { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Grid layout — applied when there are projects to show */
.project-list.project-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

@media (max-width: 1024px) {
	.project-list.project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.project-list.project-grid { grid-template-columns: 1fr; }
}

/* Two-column layout: Apps | Games (used when project-list has .project-columns) */
.project-list.project-columns { display: block; }

.project-columns-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
}

@media (max-width: 720px) {
	.project-columns-wrap {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
}

.project-column {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

.project-column-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-xs);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--border-subtle);
}

.project-column-title {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0;
}

.project-column-count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-tertiary);
}

.project-column-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
}

@media (max-width: 1100px) {
	.project-column-list { grid-template-columns: 1fr; }
}

/* Archived section */

.project-archived {
	margin-top: var(--space-2xl);
	border-top: 1px solid var(--border-subtle);
	padding-top: var(--space-lg);
}

.project-archived-header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: transparent;
	border: none;
	padding: 8px 0;
	color: var(--text-secondary);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease);
}

.project-archived-header:hover { color: var(--accent); }
.project-archived-chevron { font-size: 11px; color: var(--text-tertiary); width: 16px; }
.project-archived-title { flex: 1; text-align: left; }
.project-archived-count { color: var(--text-tertiary); font-size: 10px; }

.project-archived-body {
	margin-top: var(--space-md);
	animation: fadeIn var(--dur-med) var(--ease);
}

.project-archived-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

@media (max-width: 1024px) {
	.project-archived-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.project-archived-list { grid-template-columns: 1fr; }
}

.project-card.is-archived-card {
	opacity: 0.6;
}

.project-card.is-archived-card:hover {
	opacity: 1;
}

/* Kind picker (App / Game segmented control in modals) */

.kind-picker {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	padding: 4px;
}

.kind-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	user-select: none;
}

.kind-option:hover { background: var(--bg-hover); color: var(--text-primary); }

.kind-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kind-option.is-checked {
	background: var(--accent);
	color: var(--bg-base);
	font-weight: 600;
}

.kind-option.is-checked .kind-option-icon { color: var(--bg-base); }

.kind-option-icon {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--accent);
}

.kind-option-label {
	font-size: 13px;
}

/* Settings modal action layout (Delete | Archive | Cancel | Save) */

.settings-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between !important;
}

.settings-actions-right {
	display: flex;
	gap: var(--space-sm);
	margin-left: auto;
}

.project-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-xs);
	padding: var(--space-md);
	background: var(--bg-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: 16px;
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	color: var(--text-primary);
	text-align: left;
	font-family: inherit;
	min-height: 92px;
}

.project-card:hover { background: var(--bg-hover); border-color: var(--border-default); transform: translateY(-1px); }
.project-card:active { transform: translateY(0); }
.project-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.project-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-sm);
	min-width: 0;
}

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

.project-card-badge {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-tertiary);
	padding: 2px 6px;
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	letter-spacing: 0.04em;
}

.project-card-dest {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-tertiary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* ---------- Empty state ---------- */

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-2xl) var(--space-lg);
	text-align: center;
	border: 1px dashed var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--bg-elevated);
}

.empty-state-small { padding: var(--space-lg); }

.empty-text { font-size: 14px; color: var(--text-secondary); margin: 0; }
.empty-sub { font-size: 13px; color: var(--text-tertiary); margin: var(--space-xs) 0 0 0; }

/* ---------- Sync status (home view) ---------- */

.sync-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin: -8px 0 var(--space-md) 0;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-tertiary);
	letter-spacing: 0.04em;
}

.sync-status-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--text-disabled);
	flex-shrink: 0;
}

.sync-status.is-syncing .sync-status-dot {
	background: var(--info);
	animation: pulse 1.4s ease-in-out infinite;
}

.sync-status.is-synced .sync-status-dot { background: var(--success); }
.sync-status.is-error .sync-status-dot { background: var(--danger); }
.sync-status.is-error { color: var(--danger); }

@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.85); }
}

/* Activity item briefly flashes when it's freshly added */
.activity-item-fresh {
	animation: activityLand var(--dur-slow) var(--ease);
}

@keyframes activityLand {
	0% {
		background: var(--accent-bg);
		transform: translateX(-4px);
	}
	100% {
		background: var(--bg-elevated);
		transform: translateX(0);
	}
}

/* ---------- Sync status END ---------- */

/* ---------- Project detail view ---------- */

.project-title-area {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-xs);
}

.project-detail-name {
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.02em;
	color: var(--accent);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	line-height: 1.2;
}

/* v1.9.14: outer container stacks the link rows vertically, centered.
   v1.9.15: gap tightened from 4 to 0 — each row has its own padding so
   adding container gap was creating double whitespace. */
.project-detail-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	max-width: 600px;
	margin: 0 auto;
	width: 100%;
}

/* Each row spans all 3 grid columns; its inner children align to those columns */
.project-detail-link {
	display: contents;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-secondary);
	text-decoration: none;
	cursor: pointer;
}

/* Wrap so hover/focus still works visually — apply to the spans inside */
.project-detail-link > .project-detail-link-icon,
.project-detail-link > .project-detail-link-label,
.project-detail-link > .project-detail-link-text {
	padding: 4px 0;
	transition: color var(--dur-fast) var(--ease);
}

.project-detail-link:hover > .project-detail-link-icon,
.project-detail-link:hover > .project-detail-link-text {
	color: var(--accent);
}

.project-detail-link:hover > .project-detail-link-label {
	color: var(--text-secondary);
}

.project-detail-link:focus-visible {
	outline: none;
}
.project-detail-link:focus-visible > .project-detail-link-icon,
.project-detail-link:focus-visible > .project-detail-link-text {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.project-detail-link.is-pending,
.project-detail-link.is-disabled {
	opacity: 0.42;
	cursor: not-allowed;
	pointer-events: none;
}

.project-detail-link.is-disabled .project-detail-link-text {
	text-decoration: line-through;
}

.project-detail-link.is-disabled .project-detail-link-label {
	color: var(--text-tertiary);
}

.project-detail-link-icon {
	display: inline-flex;
	align-items: center;
	color: var(--accent);
	flex-shrink: 0;
	grid-column: 1;
}

.project-detail-link-icon svg {
	display: block;
}

.project-detail-link-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-tertiary);
	flex-shrink: 0;
	grid-column: 2;
	white-space: nowrap;
}

.project-detail-link-text {
	grid-column: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.project-detail-link-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.project-detail-link-pending {
	font-size: 10px;
	color: var(--warning);
	font-style: italic;
	flex-shrink: 0;
	margin-left: var(--space-xs);
}

/* In the centered header, header-actions and back button stay on the sides — but now
   we want them slightly less prominent so they don't pull focus from the centered title.
   To keep the title truly centered, give both side groups equal flex-basis. */
#view-project .app-header .header-actions {
	flex-shrink: 0;
	flex-basis: auto;
	justify-content: flex-end;
	gap: var(--space-sm);
}

/* v1.9.14: project-view top banner is more compact than home banner */
#view-project .app-header {
	padding: var(--space-sm) var(--space-md);
}

/* Project view's circle buttons slightly smaller for compact header */
#view-project .app-header .btn-icon-circle,
#view-project .app-header .btn-back-circle {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px;
	min-height: 36px;
	max-width: 36px;
	max-height: 36px;
	flex: 0 0 36px !important;
}

/* Left group: sidepanel toggle + back button. Equal flex-basis to keep title centered,
   but DON'T let flex stretch the buttons — they need to stay round 40x40. */
#view-project .app-header .btn-back {
	flex: 0 0 auto;
}
#view-project .app-header .btn-back-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.project-main {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-xl) var(--space-lg);
	padding-bottom: calc(var(--space-xl) + var(--banner-height, 0px));
	max-width: 880px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

/* v1.9.18: on PC, split project-main into two columns:
   ACTIVITY on the left, UPLOAD ZONE (dropzone) on the right.
   v1.9.19: wrapping section is .project-upload now, not the dropzone directly. */
@media (min-width: 900px) {
	.project-main {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: min-content;
		gap: var(--space-xl);
		max-width: 1200px;
		align-items: start;
	}
	.project-main > .project-upload {
		order: 2;
	}
	.project-main > .project-activity {
		order: 1;
		min-width: 0;
	}
	.project-upload .dropzone {
		min-height: 280px;
	}
}

/* Pages status block (project settings modal) */

.pages-status {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.pages-status-on, .pages-status-off {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
}

.pages-status-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.pages-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.pages-status-dot-on { background: var(--success); box-shadow: 0 0 6px var(--success); }
.pages-status-dot-off { background: var(--text-tertiary); }

.pages-status-text { font-size: 13px; color: var(--text-secondary); }

.pages-status-url {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--accent);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pages-status-url:hover { text-decoration: underline; }

.pages-status-on .pages-status-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.pages-status-on { padding: var(--space-md); }
.pages-status-on .pages-status-dot { background: var(--success); }

.pages-status-off button { align-self: flex-start; margin-top: var(--space-xs); }

/* ---------- Dropzone ---------- */

.dropzone {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	padding: var(--space-2xl);
	background: var(--bg-elevated);
	border: 2px dashed var(--border-default);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--dur-med) var(--ease);
}

.dropzone:hover, .dropzone:focus { border-color: var(--border-strong); background: var(--bg-hover); outline: none; }

.dropzone.is-dragging {
	border-color: var(--accent);
	background: var(--accent-bg);
	border-style: solid;
}

.dropzone-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); pointer-events: none; }

.dropzone-icon { font-family: var(--font-mono); font-size: 48px; color: var(--text-tertiary); line-height: 1; }
.dropzone.is-dragging .dropzone-icon { color: var(--accent); }

.dropzone-text { font-size: 16px; font-weight: 500; color: var(--text-primary); margin: 0; }
.dropzone-sub { font-size: 13px; color: var(--text-tertiary); margin: 0; }

/* ---------- Activity log ---------- */

.activity-log {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.activity-item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md);
	background: var(--bg-elevated);
	font-size: 13px;
}

.activity-info { flex: 1; min-width: 0; }
.activity-summary { color: var(--text-primary); font-weight: 500; }
.activity-detail {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-tertiary);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.activity-time {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-tertiary);
	flex-shrink: 0;
}

.activity-link {
	color: var(--accent);
	text-decoration: none;
	font-size: 14px;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	transition: background var(--dur-fast) var(--ease);
}

.activity-link:hover { background: var(--accent-bg); }

/* ---------- Modal ---------- */

.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	z-index: 100;
	animation: fadeIn var(--dur-fast) var(--ease);
}

.modal-container {
	position: relative;
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	padding-right: var(--space-xl);
	max-width: 520px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	animation: scaleIn var(--dur-med) var(--ease);
}

.modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	color: var(--text-tertiary);
	font-size: 18px;
	line-height: 1;
	transition: all var(--dur-fast) var(--ease);
	z-index: 1;
}

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

.modal-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 var(--space-sm) 0;
	padding-right: var(--space-lg);
}

.modal-body {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: var(--space-md);
}

.modal-body p { margin: 0 0 var(--space-md) 0; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-body code {
	font-family: var(--font-mono);
	font-size: 12px;
	background: var(--bg-raised);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	color: var(--accent);
}

.modal-body a { color: var(--accent); text-decoration: none; }
.modal-body a:hover { text-decoration: underline; }

.modal-meta {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-tertiary);
	margin-top: -8px !important;
	margin-bottom: var(--space-md) !important;
}

.modal-actions {
	display: flex;
	gap: var(--space-sm);
	justify-content: flex-end;
	margin-top: var(--space-md);
}

/* Modal forms */

.modal-form { display: flex; flex-direction: column; gap: var(--space-sm); }

.form-label { display: flex; flex-direction: column; gap: 2px; }

.form-label-text {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.form-input {
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	padding: 10px 12px;
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: 14px;
	min-height: 40px;
	outline: none;
	transition: all var(--dur-fast) var(--ease);
}

.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.form-input[readonly] { background: var(--bg-elevated); color: var(--text-secondary); cursor: default; }
.form-input-mono { font-family: var(--font-mono); font-size: 13px; }

.form-hint {
	font-size: 12px;
	color: var(--text-tertiary);
	margin: 0;
}

.form-error {
	background: var(--danger-bg);
	border: 1px solid var(--danger);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	color: var(--danger);
	font-size: 13px;
	line-height: 1.5;
}

/* Choice grid (modal) */

.choice-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
	margin: var(--space-md) 0;
}

@media (max-width: 480px) { .choice-grid { grid-template-columns: 1fr; } }

.choice-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
	padding: var(--space-lg);
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	text-align: left;
	transition: all var(--dur-fast) var(--ease);
}

.choice-card:hover {
	border-color: var(--accent);
	background: var(--bg-hover);
	box-shadow: 0 0 0 1px var(--accent-bg);
}

.choice-icon {
	font-family: var(--font-mono);
	font-size: 22px;
	font-weight: 600;
	color: var(--accent);
	line-height: 1;
	margin-bottom: var(--space-xs);
}

.choice-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.choice-sub { font-size: 12px; color: var(--text-tertiary); }

/* Token modal display */

.token-display {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	margin: var(--space-md) 0;
	font-family: var(--font-mono);
	font-size: 12px;
	word-break: break-all;
}

.token-display-text { flex: 1; color: var(--text-primary); user-select: all; }
.token-display-actions { display: flex; gap: var(--space-xs); flex-shrink: 0; }

.token-warning {
	background: rgba(251, 191, 36, 0.08);
	border: 1px solid var(--warning);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	color: var(--warning);
	font-size: 12px;
	margin-top: var(--space-md);
}

/* Repo list (link existing GitHub) */

.repo-list {
	max-height: 240px;
	overflow-y: auto;
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	padding: var(--space-xs);
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.repo-list-loading, .repo-list-empty {
	padding: var(--space-md);
	text-align: center;
	color: var(--text-tertiary);
	font-size: 13px;
}

.repo-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	color: var(--text-primary);
	text-align: left;
	font-size: 13px;
	transition: all var(--dur-fast) var(--ease);
}

.repo-row:hover { background: var(--bg-hover); }
.repo-row.is-selected { background: var(--accent-bg); border-color: var(--accent); }

.repo-row-name { flex: 1; font-family: var(--font-mono); font-size: 12px; }

.repo-row-badge {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-tertiary);
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	padding: 1px 6px;
}

/* Mismatch warning modal */

.mismatch-comparison {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-md);
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	margin: var(--space-md) 0;
}

.mismatch-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 0;
}

.mismatch-row + .mismatch-row {
	border-top: 1px solid var(--border-subtle);
}

.mismatch-label {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.mismatch-value {
	font-size: 13px;
	color: var(--text-primary);
	background: transparent;
	padding: 0;
}

code.mismatch-value {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--accent);
}

.mismatch-row-warn .mismatch-value {
	color: var(--warning);
	font-weight: 600;
}

.mismatch-hint {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.5;
}

/* Mismatch warning END */

/* Drop preview file list */

.file-list-details {
	margin-top: var(--space-sm);
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.file-list-summary {
	padding: var(--space-sm) var(--space-md);
	cursor: pointer;
	color: var(--text-secondary);
	font-size: 13px;
	user-select: none;
}

.file-list-summary:hover { color: var(--text-primary); }

.file-list {
	max-height: 220px;
	overflow-y: auto;
	border-top: 1px solid var(--border-default);
	background: var(--bg-elevated);
}

.file-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 6px 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	border-bottom: 1px solid var(--border-subtle);
}

.file-row:last-child { border-bottom: none; }

.file-row-path {
	color: var(--text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.file-row-size { color: var(--text-tertiary); flex-shrink: 0; }

/* Drop result stats */

.result-stats {
	list-style: none;
	padding: 0;
	margin: var(--space-md) 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.result-stats li {
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	color: var(--text-secondary);
}

.result-stats-num {
	font-family: var(--font-mono);
	font-weight: 600;
	color: var(--accent);
	font-size: 16px;
	min-width: 32px;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

/* ---------- Toast ---------- */

.toast-container {
	position: fixed;
	bottom: var(--space-lg);
	right: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	z-index: 200;
	pointer-events: none;
}

.toast {
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-left: 3px solid var(--accent);
	padding: var(--space-md);
	border-radius: var(--radius-md);
	font-size: 13px;
	max-width: 360px;
	pointer-events: auto;
	animation: slideInRight var(--dur-med) var(--ease);
}

.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }

@keyframes slideInRight {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}

/* ---------- Scrollbars ---------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--border-default);
	border-radius: 5px;
	border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ---------- Side panel (project switcher) ---------- */

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	color: var(--text-secondary);
	font-size: 18px;
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	flex-shrink: 0;
}

.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Backdrop behind panel */
.sidepanel-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 90;
	transition: background var(--dur-med) var(--ease);
}
.sidepanel-backdrop.is-open { background: rgba(0, 0, 0, 0.5); }

/* Slide-out panel anchored to the left edge */
.sidepanel {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 320px;
	max-width: 85vw;
	background: var(--bg-elevated);
	border-right: 1px solid var(--border-default);
	z-index: 95;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform var(--dur-med) var(--ease);
	overflow: hidden;
}

.sidepanel.is-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4); }

.sidepanel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--border-subtle);
	flex-shrink: 0;
}

.sidepanel-title {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin: 0;
}

.sidepanel-body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-md) var(--space-lg);
	/* Reserve space at the bottom equal to the floating banner stack so the
	   last items in the panel are always reachable when banners are visible. */
	padding-bottom: calc(var(--space-md) + var(--banner-height, 0px));
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.sidepanel-group { display: flex; flex-direction: column; gap: var(--space-xs); }

.sidepanel-group-title {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	padding: 0 4px;
	margin-bottom: var(--space-xs);
}

.sidepanel-group-count {
	font-size: 10px;
	color: var(--text-tertiary);
	font-weight: 400;
}

.sidepanel-list { display: flex; flex-direction: column; gap: 2px; }

.sidepanel-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	padding: 10px 12px;
	color: var(--text-primary);
	text-align: left;
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	width: 100%;
	min-width: 0;
}

.sidepanel-item:hover {
	background: var(--bg-raised);
	border-color: var(--border-subtle);
}

.sidepanel-item.is-current {
	background: var(--accent-bg);
	border-color: var(--accent);
}

.sidepanel-item.is-current .sidepanel-item-name { color: var(--accent); }

.sidepanel-item-name {
	font-size: 14px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.sidepanel-item-dest {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-tertiary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* ---------- Pinned side panel layout ---------- */

/* When the project view has the pinned class, it becomes a flex row:
   panel on the left (relative, not fixed), content takes the rest.
   IMPORTANT: All these rules must NOT set `display`. The `display` is governed
   exclusively by `.view` / `.view-active` / `.view-active.is-sidepanel-pinned`
   so that navigating away properly hides the project view. */
#view-project.is-sidepanel-pinned {
	flex-direction: row;
	min-height: 0;
	height: 100%;
}

/* Belt-and-suspenders: when the project view is NOT the active view, force-hide
   it and everything inside (regardless of any pinned-mode classes). This is the
   guard that prevents pinned-panel bleed-through onto the home view. */
#view-project:not(.view-active) {
	display: none !important;
}
#view-project:not(.view-active) .sidepanel,
#view-project:not(.view-active) .sidepanel-backdrop {
	display: none !important;
}

#view-project.is-sidepanel-pinned .sidepanel {
	position: relative;
	width: 280px;
	max-width: 280px;
	flex-shrink: 0;
	transform: none !important;
	box-shadow: none;
	z-index: auto;
	transition: none;
	border-right: 1px solid var(--border-subtle);
}

#view-project.is-sidepanel-pinned .sidepanel-backdrop {
	display: none !important;
}

/* When pinned, the project content + header stack vertically on the right */
#view-project.is-sidepanel-pinned .app-header,
#view-project.is-sidepanel-pinned .project-main {
	min-width: 0;
}

#view-project.is-sidepanel-pinned > .app-header,
#view-project.is-sidepanel-pinned > .project-main {
	/* Body content sits to the RIGHT of the panel.
	   We use a wrapper-less approach: app-header and main get pushed by the panel. */
}

/* Wrapper trick: since we can't change HTML structure easily for the pinned layout,
   use a CSS Grid in the project view so the panel takes col 1 and the rest takes col 2.
   IMPORTANT: scoped to .view-active so it doesn't override `.view { display: none }`
   when the user navigates back to home. */
#view-project.is-sidepanel-pinned.view-active {
	display: grid;
	grid-template-columns: 280px 1fr;
	grid-template-rows: auto 1fr;
	overflow: hidden;
}

#view-project.is-sidepanel-pinned > .sidepanel {
	grid-column: 1;
	grid-row: 1 / -1;
	height: 100%;
}

#view-project.is-sidepanel-pinned > .app-header {
	grid-column: 2;
	grid-row: 1;
}

#view-project.is-sidepanel-pinned > .project-main {
	grid-column: 2;
	grid-row: 2;
	overflow-y: auto;
}

/* When pinned, hide the toggle hamburger (panel is always there) */
#view-project.is-sidepanel-pinned #btn-toggle-sidepanel {
	display: none;
}

/* Pin button active state — lime-tinted background */
#btn-pin-sidepanel.is-active {
	background: var(--accent-bg);
	color: var(--accent);
	border-color: var(--accent);
}

/* Header row in side panel */
.sidepanel-header-actions {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

/* On narrow windows, allow normal display:flex (override) */
@media (max-width: 899px) {
	#view-project.is-sidepanel-pinned.view-active {
		display: flex;
		flex-direction: column;
	}
	#view-project.is-sidepanel-pinned > .sidepanel {
		display: none;
	}
	#view-project.is-sidepanel-pinned #btn-toggle-sidepanel {
		display: inline-flex;
	}
}

/* ---------- Warning modal style ---------- */

/* Apply to .modal-container when showing a hard warning (mismatch, duplicate). */
.modal-container.is-warning {
	border-color: var(--danger);
	box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15);
}

.modal-container.is-warning .modal-title {
	color: var(--danger);
	font-weight: 700;
}

/* The "Continue anyway" button on warning modals — danger-styled */
.modal-container.is-warning .btn-primary[data-action="confirm-mismatch"],
.modal-container.is-warning .btn-primary[data-action="confirm-duplicate"] {
	background: transparent;
	color: var(--danger);
	border: 1px solid var(--danger);
}

.modal-container.is-warning .btn-primary[data-action="confirm-mismatch"]:hover,
.modal-container.is-warning .btn-primary[data-action="confirm-duplicate"]:hover {
	background: var(--danger-bg);
	color: var(--danger);
}

/* ---------- Banner stack (global upload status, anchored to bottom) ---------- */

/* ---------- Banner stack ----------
   v1.9.14: was a full-width bar anchored to the BOTTOM. Now a floating
   column of cards in the TOP-RIGHT (matches toast placement). Each banner
   is its own self-contained card with a colored border-left accent; the
   container has no background of its own.
   v1.9.17: top offset increased so the banner clears the app-header and
   doesn't cover the project title underneath it. */
.banner-stack {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + 80px);
	right: var(--space-md);
	bottom: auto;
	left: auto;
	width: min(360px, calc(100vw - 32px));
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	background: transparent;
	box-shadow: none;
	border-top: 0;
	max-height: none;
	overflow: visible;
	padding: 0;
	pointer-events: none; /* container ignores; banners re-enable below */
}

/* On phone the app-header is more compact (no padding/big logo combo) */
@media (max-width: 768px) {
	.banner-stack {
		top: calc(env(safe-area-inset-top, 0px) + 64px);
	}
}

.banner-stack[hidden] {
	display: none;
}

.banner {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-left-width: 3px;
	border-radius: var(--radius-md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
	font-size: 13px;
	margin: 0;
	max-height: none;
	overflow: hidden;
	animation: banner-slide-in-top 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
	opacity: 1;
}

@keyframes banner-slide-in-top {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Fade-out applied right before auto-dismiss for success rows */
.banner.is-fading {
	animation: banner-slide-out-top 200ms ease forwards;
}

@keyframes banner-slide-out-top {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-12px);
	}
}

.banner-uploading { border-left-color: var(--accent); }
.banner-success { border-left-color: var(--success); }
.banner-error {
	border-left-color: var(--danger);
	background: rgba(248, 113, 113, 0.06);
}

/* v1.9.14: short success-banner title "Uploaded ✓" */
.banner-success .banner-title {
	font-weight: 600;
}

.banner-check {
	color: var(--success);
	font-weight: 700;
	margin-left: 2px;
}

.banner-success .banner-detail {
	font-size: 12px;
	opacity: 0.75;
	margin-top: 2px;
}

.banner-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 16px;
	font-weight: 700;
}

.banner-uploading .banner-icon { color: var(--accent); }
.banner-success .banner-icon { color: var(--success); }
.banner-error .banner-icon { color: var(--danger); }

.banner-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--border-default);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 700ms linear infinite;
}

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

.banner-title {
	font-size: 13px;
	color: var(--text-primary);
	font-weight: 500;
}

.banner-detail {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-tertiary);
}

.banner-error .banner-detail { color: var(--danger); }

.banner-progress {
	margin-top: 4px;
	height: 3px;
	background: var(--border-subtle);
	border-radius: 2px;
	overflow: hidden;
}

.banner-progress-bar {
	height: 100%;
	background: var(--accent);
	transition: width var(--dur-fast) linear;
}

.banner-actions {
	display: inline-flex;
	gap: var(--space-sm);
	align-items: center;
	flex-shrink: 0;
}

.banner-action {
	background: transparent;
	border: 1px solid var(--border-default);
	color: var(--text-primary);
	padding: 4px 12px;
	border-radius: var(--radius-sm);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	min-height: 28px;
}

.banner-action:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }

.banner-action-link {
	text-decoration: none;
	color: var(--accent);
	border-color: var(--accent);
}

.banner-action-link:hover { background: var(--accent-bg); }

.banner-error .banner-action {
	border-color: var(--danger);
	color: var(--danger);
}
.banner-error .banner-action:hover {
	background: var(--danger-bg);
	color: var(--danger);
}

.banner-close {
	background: transparent;
	border: none;
	color: var(--text-tertiary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	transition: all var(--dur-fast) var(--ease);
}

.banner-close:hover { color: var(--text-primary); background: var(--bg-hover); }


/* ---------- Hosting picker (Settings modal) ---------- */

.hosting-picker {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	padding: 6px;
}

.hosting-option {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	user-select: none;
}

.hosting-option:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.hosting-option input[type="radio"] {
	margin: 2px 0 0 0;
	flex-shrink: 0;
	accent-color: var(--accent);
}

.hosting-option.is-checked {
	background: var(--accent-bg, rgba(212, 255, 94, 0.08));
	color: var(--text-primary);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.hosting-option-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hosting-option-label {
	font-size: 13px;
	font-weight: 600;
}

.hosting-option-sub {
	font-size: 11px;
	font-family: var(--font-mono);
	color: var(--text-tertiary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hosting-option.is-checked .hosting-option-sub {
	color: var(--text-secondary);
}

/* Detail panes shown below the picker */
.hosting-detail {
	margin-top: var(--space-sm);
	padding: var(--space-sm) 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.hosting-detail[hidden] {
	display: none !important;
}

/* Read-only note used for non-GitHub projects */
.form-readonly-note {
	font-size: 12px;
	color: var(--text-tertiary);
	font-style: italic;
	padding: 8px 0;
}

/* ---------- Project card hosting icon (home grid) ---------- */

.project-card-hosting-icon {
	font-size: 12px;
	line-height: 1;
	margin-left: 6px;
	margin-right: 4px;
	opacity: 0.85;
	flex-shrink: 0;
}

.project-card-hosting-icon:hover {
	opacity: 1;
}


/* ---------- Cloudflare button dot indicator ---------- */

.cloudflare-btn-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--text-tertiary);
	margin: 0;
	transition: background var(--dur-fast) var(--ease);
	vertical-align: middle;
	flex-shrink: 0;
}

.cloudflare-btn-dot.is-on {
	background: var(--accent);
	box-shadow: 0 0 6px var(--accent);
}

/* ---------- Cloudflare modal — connect form ---------- */

.cloudflare-help {
	background: var(--bg-raised);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	font-size: 12px;
	color: var(--text-secondary);
}

.cloudflare-help summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--text-primary);
	padding: 4px 0;
	list-style: none;
}

.cloudflare-help summary::-webkit-details-marker {
	display: none;
}

.cloudflare-help summary::before {
	content: '▸ ';
	color: var(--text-tertiary);
}

.cloudflare-help[open] summary::before {
	content: '▾ ';
}

.cloudflare-help-steps {
	margin: 8px 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cloudflare-help-steps li {
	line-height: 1.6;
}

.cloudflare-help-steps code {
	background: var(--bg-base);
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 11px;
	color: var(--accent);
}

.cloudflare-help-steps a {
	color: var(--accent);
}

/* ---------- Cloudflare modal — connected status ---------- */

.cloudflare-status {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--bg-raised);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: 12px 16px;
	margin: 8px 0;
}

.cloudflare-status-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cloudflare-status-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.cloudflare-status-value {
	font-size: 13px;
	color: var(--text-primary);
}

.cloudflare-status-id {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--accent);
	background: transparent;
	padding: 0;
	user-select: all;
}

/* ---------- Cloudflare account picker ---------- */

.cloudflare-account-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	padding: 6px;
	max-height: 280px;
	overflow-y: auto;
}

.cloudflare-account-option {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
}

.cloudflare-account-option:hover {
	background: var(--bg-hover);
}

.cloudflare-account-option:has(input:checked) {
	background: var(--accent-bg, rgba(212, 255, 94, 0.08));
	box-shadow: inset 0 0 0 1px var(--accent);
}

.cloudflare-account-option input[type="radio"] {
	margin: 2px 0 0 0;
	flex-shrink: 0;
	accent-color: var(--accent);
}

.cloudflare-account-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cloudflare-account-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
}

.cloudflare-account-id {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-tertiary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Cloudflare test connection result ---------- */

.cloudflare-test-result {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: var(--radius-md);
	font-size: 12px;
	font-family: var(--font-mono);
}

.cloudflare-test-result.is-testing {
	background: var(--bg-raised);
	color: var(--text-secondary);
}

.cloudflare-test-result.is-ok {
	background: rgba(74, 222, 128, 0.08);
	color: var(--success);
	border: 1px solid var(--success);
}

.cloudflare-test-result.is-error {
	background: rgba(248, 113, 113, 0.08);
	color: var(--danger);
	border: 1px solid var(--danger);
}

.form-intro {
	font-size: 13px;
	color: var(--text-secondary);
	margin: 0;
}


/* ---------- Cloudflare create project summary box ---------- */

.cf-create-summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--bg-raised);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	margin: 6px 0;
}

.cf-create-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-md);
	font-size: 12px;
}

.cf-create-summary-label {
	color: var(--text-tertiary);
	flex-shrink: 0;
}

.cf-create-summary-value {
	color: var(--text-secondary);
	text-align: right;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cf-create-summary-mono {
	font-family: var(--font-mono);
	color: var(--accent);
}

/* ---------- Settings → Hosting → "Convert to Cloudflare" CTA ---------- */

.hosting-convert {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-subtle);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: flex-start;
}


/* ============================================================
   v1.5 — Icons + redesigned controls
   ============================================================ */

/* ---------- Icon defaults ---------- */
.icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

[data-icon] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-icon {
	/* No margin — parent uses `gap` for spacing. */
}

/* ---------- Header buttons (top right) — fancier ---------- */
.header-actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 999px;
	transition: all var(--dur-fast) var(--ease);
}

.header-actions .btn > .btn-icon {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.header-actions .btn:hover {
	background: var(--bg-hover);
	transform: translateY(-1px);
}

.header-actions .btn .icon {
	width: 14px;
	height: 14px;
	opacity: 0.7;
}

.header-actions .btn:hover .icon {
	opacity: 1;
}

/* ---------- Fancier top-of-home action buttons ---------- */
.home-actions-v2 {
	display: flex;
	gap: var(--space-md);
	align-items: stretch;
	margin-bottom: var(--space-xl);
}

.action-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-radius: var(--radius-lg, 12px);
	border: 1px solid var(--border-default);
	background: var(--bg-raised);
	color: var(--text-primary);
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	transition: all var(--dur-fast) var(--ease);
	text-align: left;
	min-height: 48px;
}

.action-pill:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	border-color: var(--accent);
}

.action-pill-secondary {
	flex: 0 0 auto;
	color: var(--text-secondary);
	padding: 10px 14px;
	min-height: 44px;
}

.action-pill-secondary .action-pill-icon .icon {
	width: 14px;
	height: 14px;
}

.action-pill-secondary:hover {
	color: var(--text-primary);
}

.action-pill-primary {
	flex: 1 1 auto;
	background: linear-gradient(135deg, rgba(212, 255, 94, 0.06), rgba(212, 255, 94, 0.02));
	border-color: rgba(212, 255, 94, 0.25);
}

.action-pill-primary:hover {
	border-color: var(--accent);
	background: linear-gradient(135deg, rgba(212, 255, 94, 0.12), rgba(212, 255, 94, 0.04));
	box-shadow: 0 4px 16px rgba(212, 255, 94, 0.18);
}

.action-pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.action-pill-icon .icon {
	width: 20px;
	height: 20px;
	color: var(--accent);
}

.action-pill-secondary .action-pill-icon .icon {
	color: var(--text-secondary);
}

.action-pill-label {
	font-weight: 600;
	font-size: 14px;
}

.action-pill-sub {
	color: var(--text-tertiary);
	font-size: 12px;
	margin-left: 10px;
}

@media (max-width: 640px) {
	.home-actions-v2 {
		flex-direction: column;
	}
	.action-pill-secondary {
		align-self: stretch;
	}
	.action-pill-sub {
		display: none;
	}
}

/* ---------- 3-button choice row (Create New modal) ---------- */
.choice-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	margin-top: var(--space-md);
}

.choice-row .choice-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 12px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--bg-raised);
	color: var(--text-primary);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	text-align: center;
	min-height: 130px;
}

.choice-row .choice-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.choice-row .choice-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(212, 255, 94, 0.08);
	color: var(--accent);
	margin-bottom: 4px;
}

.choice-row .choice-icon .icon {
	width: 22px;
	height: 22px;
}

.choice-row .choice-label {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
}

.choice-row .choice-sub {
	font-size: 11px;
	color: var(--text-tertiary);
	line-height: 1.4;
}

@media (max-width: 580px) {
	.choice-row {
		grid-template-columns: 1fr;
	}
	.choice-row .choice-card {
		flex-direction: row;
		text-align: left;
		min-height: 0;
		padding: 12px;
	}
	.choice-row .choice-icon {
		margin-bottom: 0;
		flex-shrink: 0;
	}
}

/* ---------- Privacy toggle ---------- */
.privacy-toggle-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.privacy-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 6px;
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	color: var(--text-primary);
	transition: all var(--dur-fast) var(--ease);
	width: auto;
	align-self: flex-start;
}

.privacy-toggle:hover {
	border-color: var(--accent);
}

.privacy-toggle-track {
	position: relative;
	width: 44px;
	height: 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	transition: background var(--dur-fast) var(--ease);
	flex-shrink: 0;
}

.privacy-toggle.is-private .privacy-toggle-track {
	background: rgba(212, 255, 94, 0.25);
}

.privacy-toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--text-primary);
	transition: transform var(--dur-fast) var(--ease);
}

.privacy-toggle.is-private .privacy-toggle-thumb {
	transform: translateX(22px);
	background: var(--accent);
}

.privacy-toggle-labels {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-right: 10px;
	font-size: 12px;
	font-weight: 500;
}

.privacy-toggle-label-public,
.privacy-toggle-label-private {
	display: inline-flex;
	align-items: center;
	color: var(--text-tertiary);
}

.privacy-toggle.is-public .privacy-toggle-label-public {
	color: var(--text-primary);
}

.privacy-toggle.is-private .privacy-toggle-label-private {
	color: var(--accent);
}

.privacy-toggle-state-text {
	min-width: 50px;
	text-align: center;
}

/* ---------- Hosting option: disabled state ---------- */
.hosting-option.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.hosting-option.is-disabled .hosting-option-label {
	text-decoration: line-through;
}

/* ---------- Delete cleanup options ---------- */
.delete-cleanup-group {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-subtle);
}

.delete-cleanup-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	background: var(--bg-raised);
	border: 1px solid var(--border-subtle);
	margin-top: 6px;
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
}

.delete-cleanup-option:hover {
	border-color: var(--danger);
}

.delete-cleanup-option input[type="checkbox"] {
	margin: 2px 0 0 0;
	flex-shrink: 0;
	accent-color: var(--danger);
}

.delete-cleanup-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.delete-cleanup-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
}

.delete-cleanup-sub {
	font-size: 11px;
	color: var(--text-tertiary);
	line-height: 1.5;
}

/* ---------- Make the project-card grip icon work without emoji ---------- */
.project-card-grip {
	display: inline-flex;
	align-items: center;
	color: var(--text-tertiary);
	margin-right: 4px;
}

/* ---------- Hosting icon on card ---------- */
.project-card-hosting-icon .icon {
	width: 14px;
	height: 14px;
}


/* ============================================================
   v1.6 — Hero button, update banner, Settings simplification
   ============================================================ */

/* ---------- Hero "Create New Project" button ---------- */

.home-actions-hero {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

.action-hero {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	overflow: hidden;
	border-radius: 16px;
	min-height: 96px;
	isolation: isolate;
	transition: transform var(--dur-fast) var(--ease);
}

.action-hero:hover {
	transform: translateY(-2px);
}

.action-hero:active {
	transform: translateY(0);
}

.action-hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 0%, rgba(212, 255, 94, 0.20) 0%, transparent 50%),
		radial-gradient(circle at 100% 100%, rgba(212, 255, 94, 0.12) 0%, transparent 60%),
		linear-gradient(135deg, #1a1a1a 0%, #131313 100%);
	border: 1px solid rgba(212, 255, 94, 0.30);
	border-radius: 16px;
	z-index: -1;
	transition: all var(--dur-base) var(--ease);
}

.action-hero:hover .action-hero-bg {
	border-color: var(--accent);
	box-shadow:
		0 12px 32px rgba(212, 255, 94, 0.22),
		0 4px 12px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.action-hero-content {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 22px 28px;
	color: var(--text-primary);
	text-align: left;
}

.action-hero-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(212, 255, 94, 0.20) 0%, rgba(212, 255, 94, 0.05) 70%);
	border: 1px solid rgba(212, 255, 94, 0.35);
	color: var(--accent);
	transition: all var(--dur-base) var(--ease);
}

.action-hero:hover .action-hero-icon {
	border-color: var(--accent);
	background: radial-gradient(circle, rgba(212, 255, 94, 0.30) 0%, rgba(212, 255, 94, 0.08) 70%);
	transform: rotate(90deg);
}

.action-hero-icon .icon {
	width: 32px;
	height: 32px;
	stroke-width: 2;
}

.action-hero-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.action-hero-label {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--text-primary);
}

.action-hero-sub {
	font-size: 13px;
	color: var(--text-tertiary);
	line-height: 1.4;
}

/* Setup Existing — small secondary, positioned below the hero */
.home-actions-hero .action-pill-secondary {
	align-self: flex-start;
	font-size: 12px;
	padding: 8px 14px;
	min-height: 36px;
}

@media (max-width: 580px) {
	.action-hero-content {
		padding: 18px 20px;
		gap: 14px;
	}
	.action-hero-icon {
		width: 44px;
		height: 44px;
	}
	.action-hero-icon .icon {
		width: 24px;
		height: 24px;
	}
	.action-hero-label {
		font-size: 17px;
	}
	.action-hero-sub {
		font-size: 12px;
	}
}

/* ---------- Update banner ---------- */

.update-banner {
	position: fixed;
	bottom: max(var(--banner-height, 0), 20px);
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--bg-raised);
	border: 1px solid var(--accent);
	border-radius: 12px;
	padding: 12px 12px 12px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow:
		0 12px 32px rgba(0, 0, 0, 0.45),
		0 0 24px rgba(212, 255, 94, 0.18);
	z-index: 1500;
	max-width: calc(100vw - 32px);
	font-size: 13px;
	color: var(--text-primary);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
	pointer-events: none;
}

.update-banner.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.update-banner-text {
	font-weight: 500;
}

.update-banner-refresh {
	background: var(--accent);
	color: #0a0a0a;
	border: none;
	padding: 7px 14px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	transition: all var(--dur-fast) var(--ease);
}

.update-banner-refresh:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(212, 255, 94, 0.4);
}

.update-banner-dismiss {
	background: transparent;
	color: var(--text-tertiary);
	border: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all var(--dur-fast) var(--ease);
}

.update-banner-dismiss:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}


/* ============================================================
   v1.6.1 — Circular nav buttons, grid-aligned URL rows
   ============================================================ */

/* ---------- Circular back button + sidepanel toggle ---------- */

.btn-back-circle,
.btn-icon-circle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px;
	min-height: 40px;
	max-width: 40px;
	max-height: 40px;
	flex: 0 0 40px !important;
	padding: 0;
	border-radius: 50% !important;
	background: var(--bg-raised);
	border: 1px solid var(--border-default);
	color: var(--text-primary);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	box-sizing: border-box;
}

.btn-back-circle:hover,
.btn-icon-circle:hover {
	background: var(--bg-hover);
	border-color: var(--accent);
	color: var(--accent);
	transform: translateX(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-icon-circle:hover {
	transform: scale(1.05);
}

.btn-back-circle:focus-visible,
.btn-icon-circle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.btn-back-circle [data-icon],
.btn-icon-circle [data-icon] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/* ============================================================
   v1.6.2 — Project switch animation
   ============================================================ */

/* Subtle fade + lift when switching between projects (or opening a project).
   Triggers via .is-swapping class toggled in renderProjectDetail().
   Kept short (180ms) and gentle so it feels responsive, not flashy. */

@keyframes project-swap-in {
	from {
		opacity: 0.4;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#view-project.is-swapping .project-title-area,
#view-project.is-swapping .project-main {
	animation: project-swap-in 180ms var(--ease, ease-out);
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
	#view-project.is-swapping .project-title-area,
	#view-project.is-swapping .project-main {
		animation: none;
	}
}


/* ============================================================
   v1.7 — Build status badge + creation progress
   ============================================================ */

/* ---------- Build status badge on CF URL row ---------- */

.project-detail-link.is-building {
	opacity: 1; /* Not disabled in the visual sense; show it as active */
	cursor: default;
	pointer-events: none;
}

.project-detail-link.is-building .project-detail-link-icon {
	color: var(--accent);
	animation: build-icon-pulse 2s ease-in-out infinite;
}

@keyframes build-icon-pulse {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

.build-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(212, 255, 94, 0.10);
	border: 1px solid rgba(212, 255, 94, 0.30);
	font-size: 11px;
	font-weight: 500;
	color: var(--accent);
	letter-spacing: 0.04em;
}

/* v1.9.26: center the badge horizontally within its row container. */
.project-detail-link.is-building {
	justify-content: center;
	text-align: center;
}
.project-detail-link.is-building .project-detail-link-text {
	display: flex;
	justify-content: center;
	width: 100%;
}

.build-status-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	animation: build-dot-pulse 1.4s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes build-dot-pulse {
	0%, 100% { transform: scale(0.7); opacity: 0.6; }
	50% { transform: scale(1.1); opacity: 1; }
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
	.project-detail-link.is-building .project-detail-link-icon,
	.build-status-badge-dot {
		animation: none;
	}
}

/* ---------- Create modal progress steps ---------- */

.creation-progress {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: var(--space-md);
}

.creation-step {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: var(--radius-md);
	background: var(--bg-raised);
	border: 1px solid var(--border-subtle);
	color: var(--text-tertiary);
	font-size: 13px;
	transition: all var(--dur-fast) var(--ease);
}

.creation-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.creation-step-icon-pending {
	color: var(--text-tertiary);
	opacity: 0.4;
}

.creation-step-icon-active {
	color: var(--accent);
}

.creation-step-icon-active::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--accent);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.creation-step-icon-done {
	color: var(--accent);
}

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

.creation-step.is-active {
	color: var(--text-primary);
	border-color: rgba(212, 255, 94, 0.30);
	background: rgba(212, 255, 94, 0.05);
}

.creation-step.is-done {
	color: var(--text-secondary);
}

.creation-step-label {
	flex: 1;
}


/* ============================================================
   v1.9 — 3-button card, touch-friendly, version footer
   ============================================================ */

/* ---------- 3-button project card ---------- */

.project-card-v2 {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--bg-raised);
	transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.project-card-v2:hover {
	border-color: var(--accent);
}

.project-card-v2.is-archived-card {
	opacity: 0.6;
}

.project-card-v2 .project-card-top {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 22px;
}

.project-card-v2 .project-card-name {
	flex: 1;
	font-weight: 600;
	font-size: 14px;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-card-v2 .project-card-hosting-icon {
	display: inline-flex;
	align-items: center;
	color: var(--accent);
	opacity: 0.85;
	flex-shrink: 0;
}

.project-card-v2 .project-card-badge {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--bg-hover);
	color: var(--text-tertiary);
	flex-shrink: 0;
}

.project-card-v2 .project-card-dest {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-tertiary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-card-v2 .project-card-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 6px;
	margin-top: 4px;
}

.project-card-v2 .project-card-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 6px;
	min-height: 64px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
	background: var(--bg-base, #0a0a0a);
	color: var(--text-primary);
	cursor: pointer;
	font-family: inherit;
	transition: all var(--dur-fast) var(--ease);
}

.project-card-v2 .project-card-btn:hover {
	border-color: var(--accent);
	background: var(--bg-hover);
	color: var(--accent);
	transform: translateY(-1px);
}

.project-card-v2 .project-card-btn:active {
	transform: translateY(0);
}

.project-card-v2 .project-card-btn.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.project-card-v2 .project-card-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.project-card-v2 .project-card-btn-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Primary button — Open is the most common action, slightly emphasized */
.project-card-v2 .project-card-btn-open {
	background: rgba(212, 255, 94, 0.04);
	border-color: rgba(212, 255, 94, 0.20);
}

.project-card-v2 .project-card-btn-open .project-card-btn-icon {
	color: var(--accent);
}

.project-card-v2 .project-card-btn-open:hover {
	background: rgba(212, 255, 94, 0.10);
}

/* Mobile/tablet: even bigger touch targets */
@media (max-width: 768px) {
	.project-card-v2 .project-card-btn {
		min-height: 72px;
	}
	.project-card-v2 .project-card-btn-icon .icon {
		width: 26px;
		height: 26px;
	}
}

/* ---------- Dropzone touch / drag text ---------- */

.dropzone-text-touch { display: none; }
.dropzone-text-drag { display: block; }

/* On touch-only devices, swap to "Tap to upload" and hide the "or click" hint */
@media (hover: none) and (pointer: coarse) {
	.dropzone-text-touch { display: block; }
	.dropzone-text-drag { display: none; }
	.dropzone-sub-drag { display: none; }
}

.dropzone-icon {
	color: var(--accent);
	margin-bottom: 8px;
}

.dropzone-icon .icon {
	width: 32px;
	height: 32px;
}

/* ---------- Settings version footer ---------- */

.settings-version-footer {
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--border-subtle);
	font-size: 10px;
	color: var(--text-tertiary);
	text-align: center;
	font-family: var(--font-mono);
	letter-spacing: 0.04em;
}


/* ============================================================
   v1.9.2 — Name save button, side-stack tile buttons
   ============================================================ */

/* ---------- Inline save button on text input ---------- */

.input-with-action {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.input-with-action .form-input {
	flex: 1;
	min-width: 0;
}

.input-save-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: auto;
	min-height: 36px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-default);
	background: var(--bg-raised);
	color: var(--text-tertiary);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	padding: 0;
}

.input-save-btn.is-disabled,
.input-save-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.input-save-btn.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--bg-base, #0a0a0a);
}

.input-save-btn.is-active:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(212, 255, 94, 0.30);
}

.input-save-btn:active {
	transform: translateY(0);
}

/* ---------- Tile with side-stacked buttons (name+badge body + Live/Upload stack on right) ---------- */

.project-card-v2 {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: stretch;
}

.project-card-v2 .project-card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	min-height: 88px;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	border-radius: var(--radius-md);
	transition: background var(--dur-fast) var(--ease);
}

.project-card-v2 .project-card-body:hover {
	background: rgba(212, 255, 94, 0.04);
}

.project-card-v2 .project-card-body:active {
	background: rgba(212, 255, 94, 0.08);
}

.project-card-v2 .project-card-side-buttons {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 14px;
	padding: 8px 8px 8px 0;
}

.project-card-v2 .project-card-side-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 64px;
	min-height: 38px;
	padding: 6px 10px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
	background: var(--bg-base, #0a0a0a);
	color: var(--text-primary);
	cursor: pointer;
	font-family: inherit;
	transition: all var(--dur-fast) var(--ease);
}

.project-card-v2 .project-card-side-btn:hover {
	border-color: var(--accent);
	background: var(--bg-hover);
	color: var(--accent);
}

.project-card-v2 .project-card-side-btn:active {
	transform: scale(0.97);
}

.project-card-v2 .project-card-side-btn.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.project-card-v2 .project-card-side-btn .project-card-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.project-card-v2 .project-card-side-btn .project-card-btn-label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* The old 3-column .project-card-buttons grid is no longer used in v1.9.2 — hide it */
.project-card-v2 .project-card-buttons {
	display: none;
}

/* Mobile/tablet: bump button widths so they're easier to tap */
@media (max-width: 768px) {
	.project-card-v2 .project-card-side-btn {
		min-width: 70px;
		min-height: 44px;
	}
}


/* ============================================================
   v1.9.3 — Tile overflow fix + mobile header
   ============================================================ */

/* ---------- Tile overflow fix ---------- */

/* Allow the body column to actually shrink. Default `1fr` won't shrink below
   content size; minmax(0, 1fr) does. */
.project-card-v2 {
	grid-template-columns: minmax(0, 1fr) auto;
	overflow: hidden;
	box-sizing: border-box;
}

.project-card-v2 .project-card-body {
	min-width: 0;
}

.project-card-v2 .project-card-top {
	min-width: 0;
	overflow: hidden;
}

.project-card-v2 .project-card-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-card-v2 .project-card-dest {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Mobile-friendly header ---------- */

/* On narrow screens, the header is too crowded with text labels next to
   every button (Token / Cloudflare / Sign out). Drop the labels — show
   icons only — and tighten paddings. */
@media (max-width: 768px) {
	.app-header {
		padding: var(--space-sm) var(--space-md);
		gap: var(--space-sm);
	}

	.logo-mark .logo-text {
		font-size: 13px;
	}

	.header-actions { gap: 4px; }

	.header-actions .btn-sm {
		padding: 6px 8px;
		min-width: 36px;
	}

	/* Hide all text inside header buttons — icons only on phone.
	   The icon span sits in btn-icon; we keep that visible. */
	.header-actions .btn-sm > span:not(.btn-icon):not(.cloudflare-btn-dot) {
		display: none;
	}

	/* User info ("Auto-signed in as oskar617-cmyk") takes too much horizontal
	   space. Hide it on phone — sign-out button still works. */
	#user-info {
		display: none;
	}
}

/* Very narrow screens (under 380px): make hero stack vertically */
@media (max-width: 480px) {
	.home-actions-hero {
		flex-direction: column;
		align-items: stretch;
	}
	.action-hero,
	.action-pill {
		width: 100%;
	}
}


/* ============================================================
   v1.9.4 — Mobile polish: tile space, project header, URL rows, long-press
   ============================================================ */

/* ---------- Suppress browser long-press menus on tiles (outside reorder mode) ---------- */

.project-card-v2:not(.is-draggable) {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.project-card-v2 .project-card-body,
.project-card-v2 .project-card-side-btn {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

/* ---------- Mobile-specific tile improvements ---------- */

@media (max-width: 768px) {
	/* Give the tile body MORE space by making side buttons smaller */
	.project-card-v2 .project-card-side-btn {
		min-width: 56px;
		min-height: 40px;
		padding: 4px 6px;
	}

	.project-card-v2 .project-card-side-btn .project-card-btn-label {
		font-size: 9px;
	}

	.project-card-v2 .project-card-side-btn .project-card-btn-icon .icon {
		width: 16px;
		height: 16px;
	}

	.project-card-v2 .project-card-side-buttons {
		gap: 4px;
		padding: 6px 6px 6px 0;
	}

	.project-card-v2 .project-card-body {
		padding: 10px;
		min-height: 76px;
	}

	.project-card-v2 .project-card-name {
		font-size: 14px;
	}

	.project-card-v2 .project-card-dest {
		font-size: 10px;
	}

	/* Allow name to wrap to 2 lines on phone (instead of clipping after ~12 chars) */
	.project-card-v2 .project-card-name {
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.2;
	}

	/* Reorder button: smaller, less prominent */
	.section-actions .btn {
		padding: 6px 10px;
		font-size: 12px;
	}
}

/* ---------- Project view header: smaller title, fewer breakers ---------- */

@media (max-width: 768px) {
	#view-project .app-header {
		flex-wrap: wrap;
		padding: var(--space-sm) var(--space-sm);
		gap: 8px;
	}

	#view-project .project-detail-title,
	#view-project .app-header > h1,
	#view-project .app-header .project-title {
		font-size: 22px;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#view-project .btn-back-circle,
	#view-project #btn-toggle-sidepanel {
		width: 36px !important;
		height: 36px !important;
	}

	#view-project #btn-project-settings {
		font-size: 12px;
		padding: 6px 10px;
	}
}

/* ---------- URL rows: phone-friendly stacked layout ---------- */

@media (max-width: 600px) {
	/* On phone, the 3 URL rows have an inline grid that doesn't fit. Stack them. */
	.project-detail-link {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		gap: 2px 8px;
		padding: 8px 10px;
		align-items: center;
	}

	.project-detail-link-icon {
		grid-row: 1 / span 2;
		grid-column: 1;
	}

	.project-detail-link-label {
		grid-row: 1;
		grid-column: 2;
		font-size: 10px;
		opacity: 0.65;
	}

	.project-detail-link-text {
		grid-row: 2;
		grid-column: 2;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}
}


/* ============================================================
   v1.9.5 — Sidepanel width, project header layout, toast on phone
   ============================================================ */

/* ---------- Sidepanel width on phone ---------- */

@media (max-width: 768px) {
	.sidepanel {
		max-width: 85vw;
		width: 320px;
	}
}

@media (max-width: 480px) {
	.sidepanel {
		max-width: 88vw;
	}
}

/* ---------- Project view header: clean grid layout on phone ---------- */

@media (max-width: 768px) {
	/* Mobile project header: flex with wrap. Menu/back/Settings on row 1,
	   title-area takes ENTIRE row 2, with name + URLs stacked vertically. */
	#view-project .app-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		padding: var(--space-sm);
	}

	#view-project #btn-toggle-sidepanel,
	#view-project #btn-back-home {
		flex-shrink: 0;
	}

	#view-project .header-actions {
		flex-shrink: 0;
		margin-left: auto; /* pushes Settings to the right edge on row 1 */
	}

	/* Title area: full-width on its own row */
	#view-project .project-title-area {
		flex-basis: 100%;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding-top: 6px;
		border-top: 1px solid var(--border-subtle);
		margin-top: 6px;
	}

	#view-project .project-title-area > .project-detail-name {
		font-size: 22px;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 1.1;
	}

	#view-project .project-title-area > .project-detail-links {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
}

/* On VERY narrow screens, replace "Settings" text with gear icon to save space */
@media (max-width: 380px) {
	#view-project #btn-project-settings {
		font-size: 0;
		padding: 8px;
		min-width: 36px;
		position: relative;
	}
	#view-project #btn-project-settings::before {
		content: "⚙";
		font-size: 18px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

/* ---------- Upload progress toast / banner on phone ---------- */

@media (max-width: 768px) {
	.toast,
	.upload-toast,
	.activity-item {
		max-width: calc(100vw - 24px);
		box-sizing: border-box;
		font-size: 12px;
	}

	.activity-item-filename,
	.toast-filename,
	.upload-toast-filename {
		font-size: 11px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}

	/* Activity items in project view — tighten padding */
	.activity-item {
		padding: 10px;
	}
}


/* ============================================================
   v1.9.6 — Activity sync UI
   ============================================================ */

.activity-device {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-tertiary);
	background: var(--bg-hover);
	border-radius: 4px;
	padding: 1px 6px;
	margin-left: 8px;
	letter-spacing: 0.04em;
}

.activity-item-synced {
	border-left: 2px solid rgba(212, 255, 94, 0.18);
}


/* ============================================================
   v1.9.9 — 3-line tile body, header icon-with-name, reset button
   ============================================================ */

/* ---------- 3-line project card body ---------- */

.project-card-v2 .project-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
	min-height: 88px;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	border-radius: var(--radius-md);
	transition: background var(--dur-fast) var(--ease);
	min-width: 0;
}

.project-card-v2 .project-card-line {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.project-card-v2 .project-card-line-name {
	min-height: 22px;
}

.project-card-v2 .project-card-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	font-size: 14px;
	color: var(--text-primary);
}

.project-card-v2 .project-card-line-badge {
	gap: 6px;
}

/* v1.9.14: empty row of space between badge line and commit-message line.
   v1.9.25: increased to ~22px (one full line-height) for a clearer gap. */
.project-card-v2 .project-card-line-url {
	margin-top: 22px;
}

.project-card-v2 .project-card-live-url {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

.project-card-v2 .project-card-live-url.is-empty {
	color: var(--text-tertiary);
	font-style: italic;
	opacity: 0.7;
}

/* Mobile: name line allowed to wrap to 2 lines */
@media (max-width: 768px) {
	.project-card-v2 .project-card-name {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.2;
	}

	.project-card-v2 .project-card-line-name {
		align-items: flex-start;
	}
}

/* ---------- Project view title row (icon + name together) ---------- */

.project-detail-title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: var(--space-md);
}

.project-detail-name-icon {
	display: inline-flex;
	align-items: center;
	color: var(--accent);
	flex-shrink: 0;
}

.project-detail-title-row .project-detail-name {
	margin: 0;
}

@media (max-width: 768px) {
	.project-detail-title-row {
		justify-content: flex-start;
		margin-bottom: var(--space-sm);
	}
	.project-detail-title-row .project-detail-name {
		font-size: 22px;
		line-height: 1.1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}
}

/* ---------- Settings: Clear cache & reload button ---------- */

.settings-reset-btn {
	display: inline-block;
	margin-left: 12px;
	padding: 4px 10px;
	font-size: 10px;
	font-family: var(--font-mono);
	color: var(--text-tertiary);
	background: transparent;
	border: 1px solid var(--border-subtle);
	border-radius: 999px;
	cursor: pointer;
	letter-spacing: 0.04em;
	transition: all var(--dur-fast) var(--ease);
}

.settings-reset-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}

@media (max-width: 480px) {
	.settings-version-footer {
		flex-direction: column;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.settings-reset-btn {
		margin-left: 0;
	}
}


/* ============================================================
   v1.9.10 — Tile icon alignment, project URL row layout, no pin on phone
   ============================================================ */

/* ---------- Hide pin button on phone (no horizontal space to pin to) ---------- */

@media (max-width: 900px) {
	#btn-pin-sidepanel {
		display: none !important;
	}
}


/* ---------- Project URL rows: stacked layout (icon+label, URL on row 2) ---------- */

/* Override the previous grid layout — use a more explicit 2-row layout where
   icon+label sit on row 1 and the URL value sits on row 2 indented under the label. */
.project-detail-link {
	display: grid;
	grid-template-columns: 24px 1fr;
	grid-template-rows: auto auto;
	column-gap: 8px;
	row-gap: 2px;
	align-items: center;
	padding: 10px 14px;
	border-radius: var(--radius-md);
	transition: background var(--dur-fast) var(--ease);
}

.project-detail-link-icon {
	grid-row: 1 / span 2;
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	flex-shrink: 0;
}

.project-detail-link-label {
	grid-row: 1;
	grid-column: 2;
	font-size: 10px;
	font-family: var(--font-mono);
	letter-spacing: 0.08em;
	color: var(--text-tertiary);
	text-transform: uppercase;
	line-height: 1.2;
}

.project-detail-link-text {
	grid-row: 2;
	grid-column: 2;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	line-height: 1.2;
}

.project-detail-link.is-disabled {
	opacity: 0.5;
}

.project-detail-link.is-disabled .project-detail-link-text {
	text-decoration: line-through;
	color: var(--text-tertiary);
}

a.project-detail-link:hover {
	background: var(--bg-hover);
}

a.project-detail-link:hover .project-detail-link-text {
	color: var(--accent);
}

/* On phone, make the address line smaller so long URLs fit */
@media (max-width: 768px) {
	.project-detail-link {
		padding: 8px 10px;
	}
	.project-detail-link-text {
		font-size: 12px;
	}
}

/* The pending-build state: badge sits where the URL text would normally be */
.project-detail-link.is-building .project-detail-link-text {
	display: flex;
	align-items: center;
}


/* ============================================================
   v1.9.11 — Equal header icon spacing, URL row stacked at left edge
   ============================================================ */

/* ---------- Header buttons: equal width on phone ---------- */

@media (max-width: 768px) {
	.header-actions .btn-sm {
		min-width: 40px;
		justify-content: center;
		position: relative;
	}

	/* Cloudflare button has an extra .cloudflare-btn-dot child that makes it
	   wider than the others. Position the dot absolutely so it doesn't add
	   width — all three buttons end up the same size. */
	#btn-cloudflare {
		position: relative;
	}
	#btn-cloudflare .cloudflare-btn-dot {
		position: absolute;
		top: 4px;
		right: 4px;
		margin: 0;
	}

	.header-actions {
		gap: 6px;
	}
}

/* ---------- Project view URL rows: icon on label row, URL on row 2 left-aligned ---------- */

/* Replaces the v1.9.10 grid layout with a flex-wrap row.
   Children render as: [icon] [LABEL]    (row 1, flex)
                       [URL value]       (row 2, wraps because 100% width)
   v1.9.14: justify-content: center so the icon+label group is centered
   within the row, and the URL line below is centered too.
   v1.9.15: tightened padding (was 10/14, now 4/14) to bring rows closer
   together — block was too tall on phone. */
.project-detail-link {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 8px;
	row-gap: 0;
	padding: 4px 14px;
	border-radius: var(--radius-md);
	transition: background var(--dur-fast) var(--ease);
	text-align: center;
}

.project-detail-link > .project-detail-link-icon {
	flex: 0 0 auto;
	order: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
}

.project-detail-link > .project-detail-link-label {
	flex: 0 0 auto;       /* don't stretch — sit snug next to the icon */
	order: 2;
	font-size: 10px;
	font-family: var(--font-mono);
	letter-spacing: 0.08em;
	color: var(--text-tertiary);
	text-transform: uppercase;
	line-height: 1.2;
	min-width: 0;
}

/* `flex: 0 0 100%` forces this child onto its own row (line break inside the flex container) */
.project-detail-link > .project-detail-link-text {
	flex: 0 0 100%;
	order: 3;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	line-height: 1.3;
	margin-top: 0;
}

.project-detail-link.is-disabled .project-detail-link-text {
	text-decoration: line-through;
	color: var(--text-tertiary);
	opacity: 0.7;
}

/* v1.9.17: On desktop (PC), each URL row collapses to ONE line:
   icon + LABEL + url, all on one line. On phone the existing stacked
   layout above (URL on its own line) is preserved.
   v1.9.18: title + 3 rows all centered horizontally on PC. */
@media (min-width: 769px) {
	.project-detail-link {
		flex-wrap: nowrap;
		justify-content: center;
		text-align: left;
		gap: 10px;
		padding: 4px 14px;
	}
	.project-detail-link > .project-detail-link-text {
		flex: 0 1 auto;
		order: 3;
		min-width: 0;
		margin-top: 0;
		max-width: 50vw;
	}
	/* Each row sized to its own content, all rows centered as a block. */
	.project-detail-links {
		max-width: 720px;
		width: 100%;
		align-items: center;
	}
}

a.project-detail-link:hover {
	background: var(--bg-hover);
}

a.project-detail-link:hover .project-detail-link-text {
	color: var(--accent);
}

@media (max-width: 768px) {
	.project-detail-link {
		padding: 8px 10px;
	}
	.project-detail-link > .project-detail-link-text {
		font-size: 12px;
	}
}


/* ============================================================
   v1.9.12 — App name bigger/centered, CF dot inline, bigger card buttons, tile shows latest activity
   ============================================================ */

/* ---------- Home header: bigger + centered logo ---------- */

#view-home .app-header {
	position: relative;
}

#view-home .app-header .logo-mark {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 22px;
	pointer-events: none; /* don't block taps that should pass to header buttons */
	z-index: 1;
}

#view-home .app-header .logo-mark .logo-text {
	color: var(--accent);
}

/* Mobile: a hair smaller so 12-char logo doesn't crowd icons */
@media (max-width: 480px) {
	#view-home .app-header .logo-mark {
		font-size: 18px;
	}
}

/* ---------- CF dot: back inline next to cloud icon with proper spacing ---------- */

@media (max-width: 768px) {
	/* Undo the v1.9.11 absolute positioning */
	#btn-cloudflare .cloudflare-btn-dot {
		position: static;
		margin-left: 4px;
	}

	/* Make all three header buttons match width by giving them equal min-width
	   AND aligning the cloud + dot pair to the centre */
	#btn-cloudflare {
		gap: 4px;
	}
}

/* ---------- Tile: icon perfectly left-aligned with name and URL above/below ---------- */

/* Make sure all three project-card-line elements have zero left padding so
   their children all start at the exact same x-coordinate. */
.project-card-v2 .project-card-body {
	padding: 12px;
}

.project-card-v2 .project-card-line {
	padding-left: 0;
	margin-left: 0;
}

.project-card-v2 .project-card-line-badge {
	gap: 6px;
}

/* The hosting icon was 14px; bump to 16px so it visually matches the height
   of the badge pill and aligns better with the name above */
.project-card-v2 .project-card-hosting-icon {
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ---------- Bigger thumb-friendly Live/Upload buttons on mobile ---------- */

@media (max-width: 768px) {
	.project-card-v2 .project-card-side-btn {
		min-width: 78px;
		min-height: 56px;
		padding: 8px 10px;
	}

	.project-card-v2 .project-card-side-btn .project-card-btn-icon .icon {
		width: 22px;
		height: 22px;
	}

	.project-card-v2 .project-card-side-btn .project-card-btn-label {
		font-size: 11px;
	}

	.project-card-v2 .project-card-side-buttons {
		gap: 6px;
		padding: 10px 10px 10px 0;
	}
}

/* ---------- Tile line 3: latest activity (commit msg + timestamp) ---------- */

.project-card-v2 .project-card-latest {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* v1.9.14: allow commit message to wrap to multiple lines (was single-line ellipsis) */
.project-card-v2 .project-card-latest-msg {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-secondary);
	overflow: hidden;
	white-space: normal;
	word-break: break-word;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: 1.35;
}

.project-card-v2 .project-card-latest-time {
	font-family: var(--font-mono);
	font-size: 9px;
	color: var(--text-tertiary);
	letter-spacing: 0.04em;
}

.project-card-v2 .project-card-latest.is-empty {
	font-style: italic;
	opacity: 0.6;
}


/* ============================================================
   v1.9.13 — Logo left + bigger, tile icon nudge, bigger buttons
   ============================================================ */

/* ---------- Logo: left-aligned, bigger, no longer centered ---------- */

#view-home .app-header {
	position: static;
}

#view-home .app-header .logo-mark {
	position: static;
	transform: none;
	pointer-events: auto;
	font-size: 26px;
}

#view-home .app-header .logo-icon {
	width: 40px;
	height: 40px;
	margin-right: 10px;
}

@media (max-width: 480px) {
	#view-home .app-header .logo-mark {
		font-size: 22px;
	}
	#view-home .app-header .logo-icon {
		width: 32px;
		height: 32px;
		margin-right: 8px;
	}
}

/* Header actions group stays on the right via space-between (parent flex) */

/* ---------- Tile icon: nudge left to visually align with name ---------- */

/* The hosting icon's SVG bounding box has stroke padding that makes it look
   offset from a text baseline. Pull it left by 2px to optically align with
   the project name on the line above. */
.project-card-v2 .project-card-hosting-icon {
	margin-left: -2px;
}

/* ---------- Even bigger thumb-friendly buttons ---------- */

@media (max-width: 768px) {
	.project-card-v2 .project-card-side-btn {
		min-width: 88px;
		min-height: 64px;
		padding: 10px 12px;
	}

	.project-card-v2 .project-card-side-btn .project-card-btn-icon .icon {
		width: 24px;
		height: 24px;
	}

	.project-card-v2 .project-card-side-btn .project-card-btn-label {
		font-size: 12px;
		margin-top: 2px;
	}

	.project-card-v2 .project-card-side-buttons {
		gap: 16px;
		padding: 12px 12px 12px 0;
	}
}