:root {
	--bg: #f6f7f9;
	--fg: #1b1f24;
	--muted: #6b7280;
	--card: #ffffff;
	--border: #d9dde3;
	--accent: #6d28d9;
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #111317;
		--fg: #e6e8eb;
		--muted: #9aa1ab;
		--card: #1b1e24;
		--border: #2c3038;
		--accent: #a78bfa;
	}
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
	background: var(--bg);
	color: var(--fg);
	font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
[hidden] { display: none !important; }

#home, .login {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 16px;
}
h1 { margin: 0; font-size: 2.4rem; letter-spacing: -0.02em; }
#home form, .login form { width: min(640px, 100%); display: flex; gap: 8px; }
input {
	width: 100%;
	padding: 14px 18px;
	font: inherit;
	color: var(--fg);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 999px;
	outline: none;
}
input:focus { border-color: var(--accent); }
button {
	font: inherit;
	color: var(--fg);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 8px 16px;
	cursor: pointer;
}
button:hover { border-color: var(--accent); }
#error, .err { color: #dc2626; min-height: 1.4em; margin: 0; }

#browser { position: fixed; inset: 0; display: flex; flex-direction: column; }
#bar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 8px;
	background: var(--card);
	border-bottom: 1px solid var(--border);
}
#bar button { padding: 4px 10px; border-color: transparent; background: transparent; }
#bar button:hover { border-color: var(--border); }
#bar-form { flex: 1; min-width: 0; }
#bar input { padding: 6px 14px; font-size: 14px; background: var(--bg); }
#frame { flex: 1; width: 100%; border: 0; background: #fff; }
#b-show {
	position: fixed;
	top: 0;
	right: 12px;
	z-index: 10;
	padding: 0 10px;
	border-radius: 0 0 8px 8px;
	opacity: 0.6;
}
#b-show:hover { opacity: 1; }

#account {
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	font-size: 14px;
	color: var(--muted);
}
#account a { color: var(--muted); }
#account a:hover { color: var(--accent); }
#avatar { width: 28px; height: 28px; border-radius: 50%; }
.google-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	color: var(--fg);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 500;
}
.google-btn:hover { border-color: var(--accent); }
@media (max-width: 560px) {
	#account { font-size: 12px; gap: 8px; }
	#email { display: none; }
}
body:has(#browser:not([hidden])) #account { display: none; }

/* --- Logótipo e textos --- */
.logo { border-radius: 22%; box-shadow: 0 10px 30px rgb(79 70 229 / 0.35); }
.muted { color: var(--muted); margin: 0; }
.link-btn { border: 0; background: none; color: var(--muted); font-size: 14px; padding: 4px 8px; }
.link-btn:hover { color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- Atalhos --- */
.shortcuts-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(640px, 100%); }
.shortcuts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 8px;
	width: 100%;
}
.tile { position: relative; }
.tile-btn {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 6px 10px;
	border-radius: 16px;
	border: 1px solid transparent;
	background: transparent;
}
.tile-btn:hover { background: var(--card); border-color: var(--border); }
.tile-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 600;
	font-size: 20px;
}
.tile-add .tile-icon { background: var(--card); color: var(--muted); border: 1px dashed var(--border); }
.tile-label { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-del {
	position: absolute;
	top: 2px;
	right: 10px;
	width: 24px;
	height: 24px;
	padding: 0;
	line-height: 1;
	font-size: 16px;
	border-radius: 50%;
	background: #dc2626;
	border-color: #dc2626;
	color: #fff;
}

/* --- Diálogos --- */
dialog {
	border: 1px solid var(--border);
	border-radius: 18px;
	background: var(--card);
	color: var(--fg);
	padding: 22px;
	width: min(400px, calc(100% - 32px));
}
dialog::backdrop { background: rgb(0 0 0 / 0.45); }
dialog h2 { margin: 0 0 14px; font-size: 1.15rem; }
dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
dialog input { border-radius: 12px; padding: 10px 14px; }
dialog ol { padding-left: 20px; line-height: 1.8; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* --- App instalada (iPhone com notch, etc.) --- */
#bar { padding-top: max(6px, env(safe-area-inset-top)); }
#account { padding-top: max(12px, env(safe-area-inset-top)); }
#home, .login { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* --- Gerir sessões --- */
.home-actions { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; }
.small { font-size: 13px; }
dialog p.small { margin: 0 0 12px; }
.check-all { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--fg) !important; }
.sessions-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 50vh; overflow-y: auto; }
.sessions-list label {
	flex-direction: row !important;
	align-items: center;
	gap: 10px !important;
	margin: 0 !important;
	padding: 8px 4px;
	border-top: 1px solid var(--border);
	color: var(--fg) !important;
	cursor: pointer;
}
.sessions-list input, .check-all input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.tile-icon.small { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; flex: none; }
.session-text { display: flex; flex-direction: column; min-width: 0; }
.session-text b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.session-text small { color: var(--muted); }
button.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
button:disabled { opacity: 0.5; cursor: default; }