:root{
	/* Farben - kühl, ruhig, "verschlüsseltes Notizbuch" statt warmes Papier */
	--bg:#f4f6f1;
	--surface:#fff;
	--surface-alt:#fbfbf8;
	--border:#dde4d6;
	
	--ink:#12181a;
	--ink-muted:#5b6770;
	--ink-faint:#8b959d;
	
	--accent:#2f5c2c;
	--accent-strong:#21400f;
	--accent-soft:#e9f1e5;
	--accent-contrast:#fff;
	
	--danger:#a8442c;
	--danger-soft:#f7e9e5;
	--success:#506273;
	
	--mark-yellow:#fde68a;
	--mark-green:#bbf7d0;
	--mark-pink:#fbcfe8;
	--mark-blue:#bfdbfe;
	
	--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	
	--radius:10px;
	--radius-sm:6px;
	--shadow:0 1px 2px rgba(15, 23, 26, 0.05);
	
	color-scheme:light;
}

html[data-theme="dark"]{
	color-scheme:dark;
	
	--bg:#0f1416;
	--surface:#171d20;
	--surface-alt:#1f2629;
	--border:#2b3336;
	
	--ink:#e7edee;
	--ink-muted:#9aa6ab;
	--ink-faint:#6b7679;
	
	--accent:#2dd4bf;
	--accent-strong:#5eead4;
	--accent-soft:#163430;
	--accent-contrast:#06231f;
	
	--danger:#f87171;
	--danger-soft:#3a1f1f;
	--success:#4ade80;
	
	--shadow:0 1px 3px rgba(0, 0, 0, 0.3);
}

*{
	box-sizing:border-box;
}

body{
	margin:0;
	font-family:var(--font-sans), sans-serif;
	background:var(--bg);
	color:var(--ink);
	line-height:1.55;
	font-size:15px;
	transition:background-color 0.2s ease, color 0.2s ease;
}

.hidden{
	display:none !important;
}

#app{
	max-width:720px;
	margin:0 auto;
	padding:0 1.25rem 4rem;
}

@media (prefers-reduced-motion:reduce){
	*{
		transition:none !important;
		animation:none !important;
	}
}

/* --- Header --- */

header#app-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:1.6rem 0 1.1rem;
	border-bottom:1px solid var(--border);
	margin-bottom:1.75rem;
	flex-wrap:wrap;
	gap:0.6rem;
}

header#app-header h1{
	font-size:1.25rem;
	font-weight:700;
	letter-spacing:-0.01em;
	margin:0;
	display:flex;
	align-items:center;
}

.lock-badge{
	display:inline-block;
	width:11px;
	height:9px;
	margin-right:0.6rem;
	background:var(--accent);
	border-radius:2px;
	position:relative;
}

.lock-badge::before{
	content:'';
	position:absolute;
	left:50%;
	top:-6px;
	width:8px;
	height:7px;
	border:2px solid var(--accent);
	border-bottom:none;
	border-radius:50% 50% 0 0;
	transform:translateX(-50%);
}

.header-actions{
	display:flex;
	flex-wrap:wrap;
	gap:0.4rem;
}

@media (max-width:480px){
	header#app-header{
		flex-direction:column;
		align-items:flex-start;
	}
}

/* --- Buttons --- */

button{
	font-family:inherit;
	font-size:0.92rem;
	padding:0.55rem 1.05rem;
	border:1px solid var(--accent);
	border-radius:var(--radius-sm);
	background:var(--accent);
	color:var(--accent-contrast);
	cursor:pointer;
	transition:background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button:hover{
	background:var(--accent-strong);
	border-color:var(--accent-strong);
}

button.secondary{
	background:transparent;
	color:var(--ink-muted);
	border-color:var(--border);
}

button.secondary:hover{
	color:var(--accent);
	border-color:var(--accent);
	background:transparent;
}

/* Kopfzeilen-Aktionen wirken als ruhige, textartige Buttons statt gefüllter Flächen */
.header-actions button{
	background:transparent;
	color:var(--ink-muted);
	border-color:transparent;
	padding:0.4rem 0.6rem;
}

.header-actions button:hover{
	color:var(--accent);
	background:var(--accent-soft);
}

.icon-button{
	padding:0.4rem 0.55rem !important;
	min-width:2.1rem;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-family:var(--font-mono), monospace;
	font-weight:600;
}

.theme-icon{
	width:13px;
	height:13px;
	border-radius:50%;
	display:inline-block;
	box-shadow:inset -4px -2px 0 0 var(--ink-muted);
	background:transparent;
}
.toolbar-button svg{
	color:var(--ink-muted);
}

button:focus-visible,
input:focus-visible,
[contenteditable]:focus-visible,
select:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:2px;
}

/* --- Inputs --- */

input[type="password"],
input[type="text"],
input[type="date"]{
	font-family:inherit;
	font-size:0.98rem;
	padding:0.6rem 0.75rem;
	border:1px solid var(--border);
	border-radius:var(--radius-sm);
	width:100%;
	margin-bottom:0.6rem;
	background:var(--surface);
	color:var(--ink);
}

/* --- Cards --- */

.card{
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:1.6rem 1.75rem;
	transition:background-color 0.2s ease, border-color 0.2s ease;
}

#help-panel ul{
	color:var(--ink-muted);
	font-size:0.9rem;
	padding-left:1.1rem;
	margin:0 0 1rem;
}

#help-panel li{
	margin-bottom:0.55rem;
}

#help-panel strong{
	color:var(--ink);
}

#view-login .card,
#view-setup .card{
	max-width:420px;
	margin:2.5rem auto 0;
}

.card h2{
	margin-top:0;
	font-size:1.15rem;
	letter-spacing:-0.01em;
}

.card h3{
	margin-top:0;
	font-size:1rem;
	letter-spacing:-0.01em;
}

.card p{
	color:var(--ink-muted);
	font-size:0.9rem;
}

.view{
	padding-top:1rem;
}

.error{
	color:var(--danger);
	font-size:0.87rem;
	min-height:1.2em;
}

.success{
	color:var(--success);
	font-size:0.87rem;
}

/* --- Suche --- */

#search-bar{
	display:flex;
	gap:0.5rem;
	margin-bottom:1.5rem;
	flex-wrap:wrap;
}

#search-bar input{
	flex:1;
	margin-bottom:0;
	min-width:140px;
}

#search-results{
	margin-bottom:2rem;
	padding-bottom:1.5rem;
	border-bottom:1px dashed var(--border);
}

#search-results h3{
	font-size:0.92rem;
	color:var(--ink-muted);
	font-weight:600;
	margin-bottom:0.75rem;
}

/* --- Passwort ändern --- */

#help-panel{
	margin-bottom:1.75rem;
}

#password-change-bar{
	margin-bottom:1.75rem;
}

.progress-track{
	height:8px;
	background:var(--surface-alt);
	border-radius:999px;
	overflow:hidden;
	margin:0.9rem 0 0.6rem;
}

.progress-fill{
	height:100%;
	background:var(--accent);
	width:0;
	transition:width 0.2s ease;
}

.progress-text{
	font-size:0.85rem;
	color:var(--ink-muted);
	margin:0 0 0.9rem;
	font-family:var(--font-mono), monospace;
}

/* --- Compose-Box --- */

#compose{
	margin-bottom:2.25rem;
}

.compose-date-row{
	display:flex;
	align-items:center;
	gap:0.5rem;
	margin-bottom:0.8rem;
	font-size:0.87rem;
	color:var(--ink-muted);
}

.compose-date-row input[type="date"]{
	width:auto;
	margin-bottom:0;
}

/* --- Editor (Compose + Bearbeiten) --- */

.editor-toolbar{
	display:flex;
	align-items:center;
	gap:0.35rem;
	margin-bottom:0.7rem;
	flex-wrap:wrap;
}

.editor-toolbar button{
	padding:0.32rem 0.6rem;
	font-size:0.85rem;
	background:var(--surface-alt);
	color:var(--ink-muted);
	border-color:var(--border);
	min-width:2.1rem;
}

.editor-toolbar button:hover{
	background:var(--accent-soft);
	color:var(--accent);
	border-color:var(--accent);
}

.editor-toolbar select{
	font-family:inherit;
	font-size:0.85rem;
	padding:0.32rem 0.5rem;
	border:1px solid var(--border);
	border-radius:var(--radius-sm);
	background:var(--surface);
	color:var(--ink-muted);
}

.editor-text{
	min-height:5.5rem;
	padding:0.75rem 0.95rem;
	border:1px solid var(--border);
	border-radius:var(--radius-sm);
	background:var(--surface);
	font-size:0.98rem;
	line-height:1.55;
	margin-bottom:0.75rem;
}

.editor-text:focus{
	border-color:var(--accent);
}

.editor-text:empty::before{
	content:attr(data-placeholder);
	color:var(--ink-faint);
}

.editor-images{
	display:flex;
	flex-wrap:wrap;
	gap:0.5rem;
	margin-bottom:0.5rem;
}

.editor-image-thumb{
	position:relative;
	width:88px;
	height:88px;
}

.editor-image-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:var(--radius-sm);
	border:1px solid var(--border);
}

.editor-image-thumb .remove-image{
	position:absolute;
	top:-8px;
	right:-8px;
	width:22px;
	height:22px;
	padding:0;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	font-size:0.72rem;
}

.editor-add-image-row{
	margin-bottom:0.75rem;
}

.editor-add-image-row input[type="file"]{
	display:none;
}

.editor-tags{
	margin-bottom:0.85rem;
}

.editor-actions,
.compose-actions{
	display:flex;
	align-items:center;
	gap:0.75rem;
	flex-wrap:wrap;
}

/* Highlight-Markierungen: execCommand('hiliteColor') erzeugt <span style="background-color:...">,
   nicht <mark> - daher zusätzlich per Attribut-Selektor abdecken. Die Pastellfarbe ist fest im
   gespeicherten HTML verankert und passt sich NICHT ans Theme an - der Text darüber muss deshalb
   immer dunkel bleiben, sonst wäre er im Dark Mode auf hellem Gelb/Grün/Pink/Blau unlesbar. */
.entry-text mark,
.entry-text span[style*="background-color"],
.editor-text mark,
.editor-text span[style*="background-color"]{
	border-radius:3px;
	padding:0.05em 0.15em;
	color:#1a1a1a;
}

/* --- Feed: Log-/Zeitleisten-Signatur --- */

#feed{
	position:relative;
	padding-left:28px;
}

#feed::before{
	content:'';
	position:absolute;
	top:6px;
	bottom:6px;
	left:9px;
	width:2px;
	background:var(--border);
}

.day{
	position:relative;
	margin-bottom:2.5rem;
}

.day-heading{
	position:relative;
	font-size:0.98rem;
	font-weight:700;
	letter-spacing:-0.01em;
	color:var(--ink);
	padding-bottom:0.5rem;
	margin-bottom:1.1rem;
	border-bottom:1px solid var(--border);
	text-transform:capitalize;
}

.day-heading::before{
	content:'';
	position:absolute;
	left:-24px;
	top:4px;
	width:11px;
	height:11px;
	border-radius:50%;
	background:var(--surface);
	border:2px solid var(--accent);
	box-sizing:border-box;
}

.entry{
	position:relative;
	padding:0.15rem 0 1.1rem;
	/*border-bottom:1px solid var(--surface-alt);*/
}

.day .entry:last-child{
	border-bottom:none;
	padding-bottom:0;
}

#feed .entry::before{
	content:'';
	position:absolute;
	left:-22.5px;
	top:8px;
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--ink-faint);
}

/* Suchergebnisse sind eine gefilterte flache Liste, keine durchgehende Chronologie -
   die Zeitleisten-Optik (Linie + Punkt) würde dort ohne den Feed-Einzug falsch sitzen
   und ergibt inhaltlich auch keinen Sinn. Der Punkt bleibt daher auf #feed beschränkt
   (siehe Regel oben); hier nur noch die Rand-Linie am letzten Eintrag entfernen. */
#search-results .entry:last-child{
	border-bottom:none;
}

.entry-time{
	font-family:var(--font-mono), monospace;
	font-size:0.78rem;
	color:var(--ink-faint);
	margin-bottom:0.4rem;
	letter-spacing:0.01em;
	display:none;
}

.entry-text{
	font-size:1rem;
	white-space:pre-wrap;
	word-wrap:break-word;
}

.entry-images{
	display:flex;
	flex-wrap:wrap;
	gap:0.5rem;
	margin-top:0.85rem;
}

.entry-images img{
	max-width:160px;
	max-height:160px;
	object-fit:cover;
	border-radius:var(--radius-sm);
	border:1px solid var(--border);
	cursor:zoom-in;
	transition:transform 0.15s ease;
}

.entry-images img:hover{
	transform:scale(1.03);
}

.entry-tags{
	margin-top:0.75rem;
	display:flex;
	flex-wrap:wrap;
	gap:0.4rem;
}

.tag{
	font-size:0.76rem;
	background:var(--accent-soft);
	color:var(--accent-strong);
	padding:0.16rem 0.65rem;
	border-radius:999px;
}

.entry-actions{
	margin-top:0.85rem;
	display:flex;
	gap:0.4rem;
}

.entry-actions button{
	font-size:0.78rem;
	padding:0.28rem 0.65rem;
	background:transparent;
	color:var(--ink-faint);
	border-color:transparent;
}

.entry-actions button:hover{
	color:var(--accent);
	background:var(--accent-soft);
	border-color:transparent;
}

.entry-actions .btn-delete:hover{
	color:var(--danger);
	background:var(--danger-soft);
}

#feed-loading,
#feed-end,
#feed-empty{
	text-align:center;
	color:var(--ink-faint);
	font-size:0.87rem;
	padding:1.5rem 0;
}

@media (max-width:480px){
	#feed{
		padding-left:22px;
	}
	
	#feed::before{
		left:7px;
	}
	
	#feed .day-heading::before{
		left:-19px;
		width:10px;
		height:10px;
	}
	
	#feed .entry::before{
		left:-17.5px;
	}
}

/* --- Lightbox --- */

#lightbox{
	position:fixed;
	inset:0;
	background:rgba(10, 14, 16, 0.92);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1000;
}

#lightbox img{
	max-width:92vw;
	max-height:92vh;
	object-fit:contain;
	border-radius:4px;
	box-shadow:0 12px 40px rgba(0, 0, 0, 0.5);
}

#lightbox-close{
	position:fixed;
	top:1.2rem;
	right:1.2rem;
	width:2.4rem;
	height:2.4rem;
	padding:0;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:rgba(255, 255, 255, 0.12);
	border-color:transparent;
	color:#fff;
	font-size:1.05rem;
}

#lightbox-close:hover{
	background:rgba(255, 255, 255, 0.22);
}

.lightbox-nav{
	position:fixed;
	top:50%;
	transform:translateY(-50%);
	width:2.8rem;
	height:2.8rem;
	padding:0;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:rgba(255, 255, 255, 0.12);
	border-color:transparent;
	color:#fff;
	font-size:1.7rem;
}

.lightbox-nav:hover{
	background:rgba(255, 255, 255, 0.22);
}

#lightbox-prev{
	left:1.2rem;
}

#lightbox-next{
	right:1.2rem;
}

#lightbox-counter{
	position:fixed;
	bottom:1.3rem;
	left:50%;
	transform:translateX(-50%);
	color:rgba(255, 255, 255, 0.75);
	font-family:var(--font-mono), monospace;
	font-size:0.85rem;
}