/* Gleiche Design-Sprache wie im FA Projektmanager: Farben, Schriften und Grundkomponenten sind bewusst 1:1 von dort übernommen, damit sich beide Tools wie aus einem Guss anfühlen. */ :root { --bg: #141414; --panel: #1C1C1C; --panel-2: #232323; --border: #2E2E2E; --text: #ECECEC; --text-dim: #999999; --text-faint: #6B6B6B; --amber: #E3A548; --pink: #D9578B; --blue: #5B8DEF; --red: #E2574C; --green: #4FAE8E; --radius: 10px; } /* Heller Modus - über das Zahnrad umschaltbar (Klasse auf , nicht nur , damit z.B. auch der Overscroll-Bereich auf iOS korrekt hell bleibt), gleiche Werte wie im Projektmanager: nur Hintergrund/Rahmen/Text ändern sich, die Akzentfarben (Blau/Rot/Grün/…) bleiben gleich. */ html.light { --bg: #EFF1F3; --panel: #FFFFFF; --panel-2: #F5F6F8; --border: #DDE1E6; --text: #1B1D21; --text-dim: #5B616B; --text-faint: #8B909A; } * { box-sizing: border-box; } /* Der graue/schwarze "Tap-Highlight"-Blitz, den mobile Browser standardmäßig beim Antippen von Buttons/Links/Kacheln zeigen, wird abgeschaltet - die :active-Regeln unten übernehmen die (blaue) Rückmeldung stattdessen. Zusätzlich direkt auf den interaktiven Elementen selbst gesetzt (nicht nur über "*"), da einzelne mobile Browser das sonst nicht zuverlässig übernehmen. */ *, html, body, button, select, a, summary, .entry-summary, .tabs button, .icon-btn, .theme-toggle button, .settings-row-clickable, .settings-logout-btn, .trash-btn, .delete-confirm-yes, .delete-confirm-no { -webkit-tap-highlight-color: transparent; } html { background: var(--bg); } body { margin: 0; font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); } #app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); } h1, h2, h3 { font-family: 'Avenir Next', 'Proxima Nova', sans-serif; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; background: var(--panel); border-bottom: 1px solid var(--border); } .topbar h1 { font-size: 18px; margin: 0; letter-spacing: 0.01em; } .topbar .brand { display: flex; align-items: center; gap: 12px; } .topbar .brand img { height: 32px; width: auto; } /* Logo ist dunkel gezeichnet - im Dunkelmodus zu Weiß invertiert, im Hellmodus unverändert (gleiches Prinzip wie im Projektmanager). */ html:not(.light) .logo-invert { filter: brightness(0) invert(1); } .topbar .who { font-size: 12.5px; color: var(--text-dim); } .topbar .actions { display: flex; align-items: center; gap: 12px; position: relative; } .icon-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); padding: 0; } .icon-btn:hover, .icon-btn:active, .icon-btn.active { color: var(--text); border-color: #3A3F48; background: var(--panel-2); } /* Eckiger (nicht pillenförmiger) Umschalter, passend zur restlichen, kantigen Formensprache der App (z.B. Tabs) - wird sowohl im "Darstellung"-Bereich der Einstellungen verwendet als auch (mit .theme-toggle-inline, ohne festen Außenabstand) in dessen Zeile. */ .theme-toggle { display: flex; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 4px; margin: 0 6px 10px; } .theme-toggle.theme-toggle-inline { margin: 0; flex-shrink: 0; } .theme-toggle button { flex: 1; background: transparent; color: var(--text-dim); font-weight: 700; padding: 7px 10px; font-size: 13px; } .theme-toggle button:hover, .theme-toggle button:active { background: transparent; } .theme-toggle button.active { background: var(--blue); color: #fff; } /* ---------- Einstellungen: eigene, vollflächige Seite statt kleinem Dropdown (Zahnrad öffnet diese Seite, siehe renderEinstellungen()). ---------- */ .settings-header-title { font-size: 17px; font-weight: 700; margin-bottom: 18px; } .settings-body { max-width: 480px; margin: 0 auto; } .settings-profile-card { display: flex; align-items: center; gap: 14px; padding: 18px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 22px; } .settings-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; } .settings-profile-info { min-width: 0; } .settings-profile-name { font-size: 16px; font-weight: 700; } .settings-profile-email { font-size: 12.5px; color: var(--text-faint); margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-section-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); margin: 0 4px 8px; } .settings-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 22px; } .settings-row { display: flex; align-items: center; gap: 12px; padding: 14px; } .settings-row + .settings-row { border-top: 1px solid var(--border); } .settings-row-clickable { cursor: pointer; } .settings-row-clickable:hover, .settings-row-clickable:active { background: var(--panel-2); } .settings-row-icon { display: flex; color: var(--text-dim); flex-shrink: 0; } .settings-row-label { flex-grow: 1; font-size: 13px; font-weight: 600; } .settings-row-hint { font-size: 12px; color: var(--text-faint); } .settings-row-chevron { color: var(--text-faint); flex-shrink: 0; } .settings-logout-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 12px; border: 1px solid #3a2323; background: rgba(226,87,76,0.08); color: var(--red); font-size: 13px; font-weight: 700; } .settings-logout-btn:hover, .settings-logout-btn:active { background: var(--red); color: #fff; border-color: var(--red); } html.light .settings-logout-btn { border-color: rgba(226,87,76,0.35); } /* Segmentierte Tab-Leiste: eckig, ohne Lücken - ein Button geht direkt in den nächsten über (gemeinsame Trennlinie statt Abstand). Der aktive Tab ist farblich voll hinterlegt, mit invertierter (heller) Schrift statt nur einer dünnen Unterstreichung. Bricht auf schmalen Bildschirmen nicht um, sondern lässt sich (wie die Tabellen) horizontal durchscrollen. */ .tabs { display: flex; gap: 0; padding: 0; background: var(--panel); border-bottom: 1px solid var(--border); overflow-x: auto; } .tabs button { border: none; border-right: 1px solid var(--border); border-radius: 0; background: transparent; padding: 14px 18px; font-size: 13px; cursor: pointer; flex: 1 1 auto; color: var(--text-dim); white-space: nowrap; font-family: 'Proxima Nova', sans-serif; font-weight: 700; transition: color 0.15s ease, background 0.15s ease; } .tabs button:last-child { border-right: none; } .tabs button:hover { color: var(--text); background: var(--panel-2); } .tabs button.active { color: #fff; background: var(--blue); } .content { flex: 1; padding: 22px; width: 100%; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } button { cursor: pointer; border: none; border-radius: 8px; padding: 9px 16px; font-size: 13px; font-family: 'Proxima Nova', sans-serif; font-weight: 700; background: var(--blue); color: #fff; } button:hover, button:active { background: var(--blue); } button.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); } /* Hover und Antippen zeigen dieselbe blaue Rückmeldung (weiße Schrift) wie bei allen anderen Buttons - vorher wurde der Button (z.B. "Statistik") beim Hovern fast schwarz. */ button.secondary:hover, button.secondary:active { border-color: var(--blue); background: var(--blue); color: #fff; } button.secondary.hover-lock:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); } button.danger { background: var(--red); } button.danger:hover, button.danger:active { background: #c9483e; } button:disabled { opacity: .5; cursor: not-allowed; } /* Segmentierte Tab-Leiste: beim Antippen (mobil) soll der Button genau wie im ausgewählten Zustand aussehen (blau, weiße Schrift) statt kurz zu schwarz zu "blitzen". */ .tabs button:active { color: #fff; background: var(--blue); } /* Löschen exakt wie im Projektmanager: kleiner Papierkorb-Button (Hover rot), danach inline "Wirklich löschen?" mit "Ja" / "Abbrechen". */ .delete-action { display: inline-flex; align-items: center; gap: 6px; } .trash-btn svg { display: block; } .trash-btn { display: flex; align-items: center; justify-content: center; padding: 9px; flex-shrink: 0; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim); } .trash-btn:hover, .trash-btn:active { background: var(--panel-2); color: var(--red); border-color: var(--red); } .delete-confirm-text { font-size: 0.8em; color: var(--text-dim); white-space: nowrap; } .delete-confirm-yes { background: var(--red); color: #2A0E0C; border: 1px solid var(--red); border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700; } .delete-confirm-yes:hover, .delete-confirm-yes:active { background: var(--red); } .delete-confirm-no { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700; } .delete-confirm-no:hover, .delete-confirm-no:active { background: var(--panel-2); color: var(--text); } input, select, textarea { /* iOS Safari zoomt beim Fokussieren eines Feldes automatisch rein, sobald dessen Schriftgröße unter 16px liegt (z.B. beim Passwort-Login) - und zoomt danach nicht von selbst wieder raus. 16px ist die kleinste Schriftgröße, bei der Safari das nicht auslöst. */ font-size: 16px; font-family: 'Proxima Nova', sans-serif; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text); width: 100%; } /* Browser rendern - trotz gleichem Padding -, daher hier eine feste, gemeinsame Höhe statt nur Padding, damit Dropdowns (z.B. Projekt/Tätigkeit) und Text-/Datumsfelder exakt gleich hoch sind. */ input, select { height: 40px; } /* Buttons und Dropdowns/Auswahlfelder haben überall dieselbe Schriftgröße (13px wie "Bearbeiten"); Ausnahme sind nur Einstempeln/Ausstempeln/ Startzeit anpassen (.clock-big). Freie Textfelder bleiben bei 16px. */ select, input[type="date"], input[type="datetime-local"], input[type="time"] { font-size: 13px; } /* Der gewählte Wert im Dropdown hat dieselbe Schrift wie Datum/Uhrzeit (fett); die aufgeklappte Liste bleibt normal. */ select { font-weight: 700; } select option { font-weight: 400; } /* Mobile Browser rendern Datum-/Zeit-Felder von Haus aus mit eigener, nicht per Padding/Höhe kontrollierbarer Optik (iOS Safari zeigt z.B. ein komplett natives Steuerelement mit eigener Mindesthöhe). "appearance: none" schaltet diese native Optik ab, damit das Feld sich wie ein normales Text-/Dropdown-Feld verhält und exakt so groß wird wie Projekt/Tätigkeit. */ input[type="date"], input[type="datetime-local"], input[type="time"] { -webkit-appearance: none; appearance: none; padding-top: 0; padding-bottom: 0; line-height: 38px; text-align: left; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { padding: 0; margin-left: 4px; } input[type="date"]::-webkit-datetime-edit, input[type="datetime-local"]::-webkit-datetime-edit, input[type="time"]::-webkit-datetime-edit { padding: 0; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); } label { font-size: 11.5px; color: var(--text-dim); display: block; margin-bottom: 4px; } .field { margin-bottom: 12px; } .row { display: flex; gap: 12px; flex-wrap: wrap; } .row > .field { flex: 1; min-width: 160px; } /* Statistik-Kacheln (Diese Woche/Dieser Monat/Dieses Jahr) */ .stat-tiles { display: flex; gap: 12px; flex-wrap: wrap; } .stat-tile { flex: 1 1 140px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .stat-tile-value { font-size: 22px; font-weight: 700; color: var(--blue); } .stat-tile-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; } .status-badge { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 14px; text-align: center; } .elapsed-clock { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 14px; text-align: center; } .elapsed-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .elapsed-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dot.in { background: var(--green); } .dot.out { background: var(--text-faint); } .dot.break { background: var(--amber); } .clock-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .clock-actions button { flex: 1; min-width: 140px; } /* Einstempeln / Ausstempeln: doppelte Höhe (normal ca. 35px), Breite unverändert. */ /* Einstempeln: grün (Ausstempeln bleibt rot) - bleibt beim Hovern grün. */ .clock-actions button.clock-in { background: var(--green); color: #fff; } .clock-actions button.clock-in:hover, .clock-actions button.clock-in:active { background: #43987c; } .clock-actions button.clock-big { min-height: 52px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; } .clock-actions button.clock-normalcase { text-transform: none; letter-spacing: normal; } /* Tabellen können (v.a. mit vielen Spalten wie Status/Aktionen) breiter als der Bildschirm werden - statt Spalten/Buttons zusammenzuquetschen, wird dann horizontal gescrollt (v.a. auf dem Handy wichtig). */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13.5px; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } td.wrap-cell { white-space: normal; min-width: 220px; } th { color: var(--text-dim); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; } tr:last-child td { border-bottom: none; } .edited-flag { color: var(--amber); font-size: 11.5px; margin-left: 6px; } /* "Andere" beim Einstempeln: noch nicht angelegtes/zugeordnetes Projekt bzw. Tätigkeit, gut sichtbar bis der Admin es aufgelöst hat. */ .pending-flag { color: var(--amber); } /* Schmale Auswertungstabellen (Monatsübersicht, Tätigkeiten je Monat) haben nur 2 kurze Spalten - die allgemeine Mindestbreite für Tabellen (wegen vieler Spalten/Aktionen anderswo) würde hier nur unnötig zum seitlichen Scrollen auf dem Handy zwingen. */ .stat-table { min-width: 0; width: 100%; } .stat-table th, .stat-table td { white-space: normal; } /* Bearbeiten/Löschen (bzw. die Lösch-Bestätigung) bleiben in der Aktions- Spalte immer nebeneinander in einer Zeile - kein Umbrechen untereinander, egal wie schmal der Bildschirm ist (die Tabelle scrollt stattdessen). */ .row-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; white-space: nowrap; } .login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-card { width: 340px; max-width: 90vw; padding: 32px 28px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); } .login-card .login-logo { display: block; height: 48px; width: auto; margin: 0 auto 16px; } /* Anmelden / Link anfordern / Passwort speichern: genauso hoch wie die Textfelder (40px). */ .login-card button[type="submit"] { width: 100%; height: 40px; padding: 0 16px; font-size: 13px; } .login-card h1 { text-align: center; margin-bottom: 24px; font-size: 20px; } /* "Passwort vergessen?" / "Zurück zur Anmeldung" / "Neuen Link anfordern" - dezenter Link-Button statt eines vollflächigen Buttons. */ .login-link-btn { display: block; width: 100%; text-align: center; margin-top: 10px; background: none; border: none; padding: 8px; color: var(--blue); font-size: 13px; font-family: 'Proxima Nova', sans-serif; cursor: pointer; } .login-link-btn:hover, .login-link-btn:active { text-decoration: underline; background: none; color: var(--blue); } .error { color: var(--red); font-size: 12.5px; margin: 8px 0; line-height: 1.4; } .hint { color: var(--text-dim); font-size: 12.5px; } .muted { color: var(--text-faint); } .section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; } .section-title h2 { margin: 0; font-size: 16px; } /* "+ Zeit nachtragen" und "Statistik" sollen exakt gleich groß sein statt sich an der Textlänge zu orientieren - beide teilen sich die Breite. */ /* Button-Zeile allein in einer Karte: kein zusätzlicher Abstand nach unten, damit der Innenabstand der Karte oben/unten/links/rechts gleich ist. */ .section-title.btn-row { margin-bottom: 0; } .section-title.btn-row-equal { justify-content: stretch; } .section-title.btn-row-equal button { flex: 1; min-width: 0; } .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border); } .pill.admin { background: rgba(91,141,239,0.15); color: var(--blue); border-color: rgba(91,141,239,0.35); } .list-actions { display: flex; gap: 8px; } /* "Meine Zeiten" auf dem Handy: grobe Übersicht (Datum + Arbeitszeit) statt der PC-Tabelle, per Antippen zu einer Detailansicht mit Bearbeiten/ Löschen aufklappbar. Beide Varianten liegen im DOM, CSS blendet je nach Bildschirmbreite die passende ein. */ .entries-mobile-list { display: none; } @media (max-width: 680px) { .entries-table-desktop { display: none; } .entries-mobile-list { display: block; } } .entry-item { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .entry-item[open] { border-color: #3A3F48; } .entry-summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; } .entry-summary::-webkit-details-marker { display: none; } .entry-summary-main { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .entry-date { font-weight: 700; font-size: 14px; } .entry-hours { font-weight: 700; font-size: 14px; color: var(--blue); } .entry-summary-sub { font-size: 12.5px; color: var(--text-dim); } .entry-detail { padding: 0 14px 14px; border-top: 1px solid var(--border); padding-top: 10px; } .entry-detail-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; } .entry-detail-row span:first-child { color: var(--text-dim); } .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; } .modal { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; } .modal h3 { margin-top: 0; font-size: 16px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } /* Impressum / Datenschutz unter der Anmelde-Maske */ .legal-links { display: flex; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--text-faint); } .legal-links a { color: var(--text-dim); text-decoration: none; } .legal-links a:hover { color: var(--blue); text-decoration: underline; } .running-label { display: inline-flex; align-items: center; gap: 6px; } /* Datum-/Zeit-Eingabe: Schnellwahl-Chips, zwei Uhrzeitfelder nebeneinander, Live-Arbeitszeit */ .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } /* Chips sehen aus wie die übrigen (sekundären) Buttons der App: gleiche Schrift, Größe, Höhe und Ecken. */ .chip { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700; font-family: 'Proxima Nova', sans-serif; text-align: center; } .chip:hover, .chip:active, .chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } /* Gleich große Chips über die volle Breite (Heute | Gestern) */ .chip-row.equal { flex-wrap: nowrap; } .chip-row.equal .chip { flex: 1; min-width: 0; } .time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .time-row.single { grid-template-columns: 1fr; } .time-pick label.cap { display: block; font-size: 11.5px; color: var(--text-dim); margin-bottom: 4px; } /* Antippbare Anzeige (Datum / Uhrzeit), öffnet die Scroll-Auswahl */ .pick-box { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-weight: 700; } .pick-box:hover, .pick-box:active { background: var(--panel-2); color: var(--text); border-color: var(--blue); } .pick-time { justify-content: center; font-size: 13px; font-variant-numeric: tabular-nums; padding: 8px 12px; } .pick-date { font-size: 13px; font-family: 'Proxima Nova', sans-serif; } /* Scroll-Auswahl (Stunden | Minuten, Tag | Monat | Jahr) */ .wheel-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 20px; } .wheel-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; width: 100%; max-width: 340px; } .wheel-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; } .wheel-stage { position: relative; } .wheel-cols { display: flex; gap: 8px; } .wheel-col { flex: 1; min-width: 0; } .wheel-col-label { font-size: 11px; height: 16px; line-height: 16px; color: var(--text-dim); text-align: center; text-transform: uppercase; letter-spacing: .04em; } .wheel-scroll { height: 200px; overflow-y: auto; scroll-snap-type: y mandatory; padding-block: 80px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); } .wheel-scroll::-webkit-scrollbar { display: none; } .wheel-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; } .wheel-item { height: 40px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-size: 20px; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--text); } .wheel-band { position: absolute; left: 0; right: 0; top: 96px; height: 40px; border-top: 1px solid var(--blue); border-bottom: 1px solid var(--blue); pointer-events: none; } .wheel-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } .duration-info { font-size: 13px; color: var(--text-dim); margin: 8px 0 12px; } .duration-info strong { color: var(--text); }