/* =========================================================================== Mein Makler × Oskar — globaler Marken-Layer + linke Sidebar-Navigation Wird per after_request als LETZTES in in jede Seite eingehängt (gewinnt die Kaskade). Modell: easybill Finanz-Cockpit (templates/base.html). Kernidee: eine fixierte linke Sidebar (Chrome) wird global injiziert, der bestehende Seiteninhalt rutscht per body{padding-left} nach rechts — ohne jedes Template umbauen zu müssen. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap'); :root{ --mm-blue-900:#003a6e; --mm-blue-700:#005096; --mm-blue-500:#008cd2; --mm-blue-300:#7fc9ef; --mm-blue-200:#b4def6; --mm-blue-100:#d9eef9; --mm-blue-50:#eaf6fc; --mm-orange:#f09100; --mm-orange-600:#d98200; --mm-font-display:'Poppins','Segoe UI',system-ui,sans-serif; --mm-font-body:'Open Sans','Segoe UI',system-ui,sans-serif; --mm-sidebar-w:216px; --mm-ease:cubic-bezier(.22,1,.36,1); /* Sidebar-Chrome-Tokens (eigene, kollidieren nicht mit Seiten-Tokens) */ --mm-sb-bg:#ffffff; --mm-sb-border:#dcdcda; --mm-sb-divider:#ebebeb; --mm-sb-text:#1d1d1b; --mm-sb-muted:#6f6f6c; --mm-sb-faint:#9a9a97; --mm-sb-active-bg:#d9eef9; --mm-sb-active-text:#005096; --mm-sb-hover-bg:#eaf6fc; --mm-sb-heading:#005096; --mm-sb-shadow:0 4px 16px rgba(0,51,96,.10); --mm-scrim:rgba(0,0,0,.38); --mm-logo-c:block; --mm-logo-w:none; /* === KANONISCHE SEITEN-TOKENS (Mein-Makler-Palette) ======================= Die Oskar-Formulare definieren alle dasselbe Token-Vokabular (nur mit leicht unterschiedlichen Werten). Weil diese Datei als LETZTES Stylesheet im geladen wird, gewinnt sie die Kaskade → hier gesetzt = überall gleich. Ein Satz Werte für ALLE Formulare + künftige Formulare. Dunkel: s. unten. */ /* Werte 1:1 aus dem Finanzcontrolling (easybill base.html) — warme, neutrale Grautöne + Marken-Blaus. Das ist das „echte" Mein-Makler-CI; Oskar war vorher kühler/bläulicher, wirkte dadurch wie eine andere Website. */ --bg:#f6f6f6; --page:#f6f6f6; /* easybill --surface-page */ --surface:#ffffff; --sf:#ffffff; --card:#ffffff; --cd:#ffffff; --sf2:#f0f2f4; --surface2:#f0f2f4; /* easybill --surface-muted */ --border:#dcdcda; --bd:#dcdcda; --bo:#dcdcda; /* easybill --border-subtle (warm-neutral) */ --divider:#ebebeb; --text:#1d1d1b; --tx:#1d1d1b; --ink:#1d1d1b; /* easybill --text-body (warmes Ink) */ --muted:#6f6f6c; --mu:#6f6f6c; /* easybill --text-muted */ --faint:#9a9a97; /* easybill --text-faint */ --accent:#005096; --ac:#005096; /* Primär = tiefes Marken-Blau */ --accent2:#003a6e; --ac2:#003a6e; /* dunkler (Hover/Tiefe) */ --accent-bright:#008cd2; /* helles Sekundär-Blau */ --mm-radius:12px; --mm-radius-sm:9px; /* easybill --radius */ --mm-shadow-card:0 1px 3px rgba(0,51,96,.06); /* easybill --shadow-card (dezent) */ } /* ===== Dark Mode (blau-getönt, wie Finanz-Cockpit) ========================= Setzt die häufig genutzten SEITEN-Token-Namen neu, damit token-basierte Oskar-Seiten (Dashboard, Marktpreis Finder …) mitdunkeln. Seiten mit hart codierten Farben werden schrittweise nachgezogen. */ html[data-theme="dark"]{ color-scheme:dark; --mm-sb-bg:#0b1622; --mm-sb-border:rgba(255,255,255,.08); --mm-sb-divider:rgba(255,255,255,.08); --mm-sb-text:#e9eef3; --mm-sb-muted:#92a3b3; --mm-sb-faint:#5d7385; --mm-sb-active-bg:rgba(0,140,210,.18); --mm-sb-active-text:#7fc9ef; --mm-sb-hover-bg:rgba(255,255,255,.05); --mm-sb-heading:#e9eef3; --mm-sb-shadow:0 6px 20px rgba(0,0,0,.45); --mm-scrim:rgba(0,0,0,.55); --mm-logo-c:none; --mm-logo-w:block; /* verbreitete Seiten-Tokens überschreiben (Back-Compat mit den Oskar-Seiten) */ --bg:#0e1c2a; --surface:#152838; --sf:#152838; --sf2:#16293a; --cd:#152838; --text:#e9eef3; --tx:#e9eef3; --muted:#92a3b3; --mu:#92a3b3; --border:rgba(255,255,255,.07); --bd:rgba(255,255,255,.07); --bo:rgba(255,255,255,.07); --divider:rgba(255,255,255,.07); --faint:#5d7385; --accent:#3cafe6; --ac:#3cafe6; --accent2:#7fc9ef; --ac2:#7fc9ef; } html[data-theme="dark"] body{ background:#0e1c2a; color:#e9eef3; } /* ---- Marken-Typografie überall ---- */ body{ font-family:var(--mm-font-body); } h1,h2,h3,h4,h5,h6{ font-family:var(--mm-font-display); } /* ---- Inhalt nach rechts schieben (Platz für die Sidebar) — nur wenn Sidebar da ist ---- */ body:has(#mm-sidebar){ padding-left:var(--mm-sidebar-w); transition:padding-left .2s var(--mm-ease); } /* alte schwebende „Zurück"-Ecken-Pille entfällt — Navigation liegt jetzt links */ body:has(#mm-sidebar) a.oskar-backlink{ display:none !important; } /* Navigation ausschließlich links: Dashboard-Werkzeugleiste (Zweitzeile), die Dashboard-Tableiste (#dashTabs) und die Kopf-Buttons (Verwaltung / Meine Einstellungen) werden ausgeblendet — die Elemente bleiben aber im DOM, weil die Sidebar-Deeplinks (/?tab=… , /?open=settings) sie per .click() ansteuern. */ body:has(#mm-sidebar) .hdr, body:has(#mm-sidebar) .nav.nav-secondary, body:has(#mm-sidebar) #dashTabs, body:has(#mm-sidebar) #meineEinstellungenBtn, body:has(#mm-sidebar) #verwaltungWrap{ display:none !important; } /* ============================ SIDEBAR ============================ */ #mm-sidebar{ position:fixed; top:0; left:0; height:100vh; width:var(--mm-sidebar-w); z-index:2147480000; background:var(--mm-sb-bg); border-right:1px solid var(--mm-sb-border); display:flex; flex-direction:column; padding:20px 12px 14px; font-family:var(--mm-font-body); box-sizing:border-box; transition:transform .22s var(--mm-ease); } #mm-sidebar *{ box-sizing:border-box; } #mm-sidebar .mm-brand{ padding:0 8px 6px; display:flex; align-items:center; gap:9px; } #mm-sidebar .mm-brand svg{ flex:none; } #mm-sidebar .mm-brand .mm-wordmark{ font-family:var(--mm-font-display); font-weight:700; font-size:19px; color:var(--mm-sb-heading); letter-spacing:-.01em; } /* Versions-Pille unter dem Logo → öffnet den Changelog (alle Änderungen) */ #mm-sidebar .mm-ver{ display:inline-flex; align-items:center; gap:5px; margin:0 0 4px 40px; padding:2px 9px; font-family:var(--mm-font-display); font-weight:600; font-size:10.5px; letter-spacing:.02em; text-decoration:none; color:var(--mm-sb-active-text); background:var(--mm-sb-active-bg); border-radius:999px; align-self:flex-start; transition:filter .14s var(--mm-ease); } #mm-sidebar .mm-ver:hover{ filter:brightness(.95); } #mm-sidebar .mm-ver .mm-ver-note{ color:var(--mm-sb-muted); font-weight:500; } #mm-sidebar .mm-nav-scroll{ flex:1; overflow-y:auto; margin-top:6px; scrollbar-width:thin; } #mm-sidebar .mm-nav-scroll::-webkit-scrollbar{ width:7px; } #mm-sidebar .mm-nav-scroll::-webkit-scrollbar-thumb{ background:var(--mm-sb-border); border-radius:8px; } #mm-sidebar .mm-nav-group{ margin-top:14px; } #mm-sidebar .mm-nav-group:first-child{ margin-top:2px; } #mm-sidebar .mm-nav-title{ font-family:var(--mm-font-display); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--mm-sb-faint); padding:0 10px 6px; } #mm-sidebar a.mm-nav-item, #mm-sidebar button.mm-nav-item{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 11px; border-radius:999px; font-size:13px; color:var(--mm-sb-text); background:none; border:none; cursor:pointer; text-decoration:none; margin-bottom:2px; font-family:var(--mm-font-body); transition:background .14s var(--mm-ease), color .14s var(--mm-ease); } #mm-sidebar .mm-nav-item svg{ flex:none; color:inherit; opacity:.85; } #mm-sidebar .mm-nav-item:hover{ background:var(--mm-sb-hover-bg); color:var(--mm-blue-500); } #mm-sidebar .mm-nav-item.active{ background:var(--mm-sb-active-bg); color:var(--mm-sb-active-text); font-weight:600; } #mm-sidebar .mm-nav-item .mm-soon{ margin-left:auto; font-family:var(--mm-font-display); font-size:9px; font-weight:600; letter-spacing:.08em; color:var(--mm-sb-faint); background:var(--mm-sb-hover-bg); border-radius:999px; padding:2px 7px; } /* ---- Aufklapp-Untermenü (Verwaltung): Akkordeon, Klick öffnet ---- */ #mm-sidebar .mm-has-sub .mm-chev{ margin-left:auto; flex:none; opacity:.55; transition:transform .18s var(--mm-ease); } #mm-sidebar .mm-nav-sub-wrap.mm-open .mm-has-sub .mm-chev{ transform:rotate(90deg); } #mm-sidebar .mm-subnav{ overflow:hidden; max-height:0; opacity:0; margin-left:15px; padding-left:9px; border-left:2px solid var(--mm-sb-divider); transition:max-height .24s var(--mm-ease), opacity .16s var(--mm-ease); } #mm-sidebar .mm-nav-sub-wrap.mm-open .mm-subnav{ max-height:560px; opacity:1; margin-top:3px; margin-bottom:5px; } #mm-sidebar .mm-sub-head{ display:none; } /* Titel steht bereits im Eltern-Button */ #mm-sidebar a.mm-sub-item{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:999px; font-size:12.5px; color:var(--mm-sb-text); text-decoration:none; margin-bottom:1px; font-family:var(--mm-font-body); transition:background .14s var(--mm-ease), color .14s var(--mm-ease); } #mm-sidebar .mm-sub-item svg{ flex:none; opacity:.8; } #mm-sidebar .mm-sub-item:hover{ background:var(--mm-sb-hover-bg); color:var(--mm-blue-500); } #mm-sidebar .mm-sub-item.active{ background:var(--mm-sb-active-bg); color:var(--mm-sb-active-text); font-weight:600; } /* Sidebar-Fuß: klickbarer User (→ Meine Einstellungen) + Theme-Toggle + Abmelden */ #mm-sidebar .mm-foot{ border-top:1px solid var(--mm-sb-divider); padding-top:11px; margin-top:8px; display:flex; align-items:center; gap:7px; } #mm-sidebar .mm-foot-user{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; text-decoration:none; padding:5px 6px; margin:-5px -2px -5px -6px; border-radius:12px; transition:background .14s var(--mm-ease); } #mm-sidebar .mm-foot-user:hover{ background:var(--mm-sb-hover-bg); } #mm-sidebar .mm-avatar{ width:34px; height:34px; border-radius:50%; flex:none; background:var(--mm-blue-700); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--mm-font-display); font-weight:600; font-size:13px; background-size:cover; background-position:center; } #mm-sidebar .mm-foot-gear{ flex:none; color:var(--mm-sb-faint); opacity:0; transition:opacity .14s var(--mm-ease); display:flex; } #mm-sidebar .mm-foot-user:hover .mm-foot-gear{ opacity:1; } #mm-sidebar .mm-logout:hover{ color:#d23b3b; border-color:#d23b3b; } #mm-sidebar .mm-who{ min-width:0; flex:1; } #mm-sidebar .mm-who .mm-nm{ font-family:var(--mm-font-display); font-weight:600; font-size:12px; color:var(--mm-sb-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #mm-sidebar .mm-who .mm-rl{ font-size:11px; color:var(--mm-sb-muted); } #mm-sidebar .mm-tt{ flex:none; width:34px; height:34px; border-radius:999px; border:1px solid var(--mm-sb-border); background:var(--mm-sb-bg); color:var(--mm-sb-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .14s, border-color .14s; } #mm-sidebar .mm-tt:hover{ color:var(--mm-blue-500); border-color:var(--mm-blue-500); } #mm-sidebar .mm-tt .mm-moon{ display:none; } html[data-theme="dark"] #mm-sidebar .mm-tt .mm-sun{ display:none; } html[data-theme="dark"] #mm-sidebar .mm-tt .mm-moon{ display:inline-flex; } /* Burger + Scrim (mobil) */ #mm-burger{ display:none; position:fixed; top:12px; left:12px; z-index:2147480000; width:42px; height:42px; border-radius:12px; border:1px solid var(--mm-sb-border); background:var(--mm-sb-bg); color:var(--mm-sb-text); align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--mm-sb-shadow); } #mm-scrim{ display:none; position:fixed; inset:0; background:var(--mm-scrim); z-index:2147479990; } body.mm-nav-open #mm-scrim{ display:block; } /* ---- Responsiv: unter 1024px Off-Canvas ---- */ @media (max-width:820px){ body:has(#mm-sidebar){ padding-left:0; padding-top:0; } #mm-sidebar{ width:280px; transform:translateX(-100%); box-shadow:var(--mm-sb-shadow); } body.mm-nav-open #mm-sidebar{ transform:translateX(0); } #mm-burger{ display:flex; } /* seiteneigene sticky Header etwas nach rechts, damit der Burger nicht überdeckt */ } @media (prefers-reduced-motion:reduce){ #mm-sidebar, body{ transition:none; } } /* =========================================================================== GLOBALES MEIN-MAKLER-FUNDAMENT Gilt für ALLE Oskar-Seiten (Formulare, Dashboards) + künftige Formulare. Bewusst zurückhaltende Spezifität: die kanonischen Tokens oben tragen die Farb-Vereinheitlichung; hier kommen Typo-Feinschliff, Formularfelder, Fokus und wiederverwendbare Marken-Buttons dazu, ohne bestehende Layouts zu brechen. =========================================================================== */ /* ---- Überschriften: Marken-Schrift + ruhigere Laufweite ---- */ h1,h2,h3{ letter-spacing:-.01em; text-wrap:balance; } /* ---- Formularfelder einheitlich (nur Optik: Rahmen/Radius/Fokus, NICHT Größe) ---- */ input[type="text"],input[type="email"],input[type="number"],input[type="tel"], input[type="url"],input[type="search"],input[type="password"],input[type="date"], input[type="time"],input[type="datetime-local"],input[type="month"], select,textarea{ font-family:var(--mm-font-body); color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:10px; transition:border-color .15s var(--mm-ease), box-shadow .15s var(--mm-ease); } input[type="text"]:focus,input[type="email"]:focus,input[type="number"]:focus, input[type="tel"]:focus,input[type="url"]:focus,input[type="search"]:focus, input[type="password"]:focus,input[type="date"]:focus,input[type="time"]:focus, input[type="datetime-local"]:focus,input[type="month"]:focus, select:focus,textarea:focus{ border-color:var(--accent-bright); box-shadow:0 0 0 3px rgba(0,140,210,.18); outline:none; } /* sichtbarer Tastatur-Fokus (Barrierefreiheit) */ a:focus-visible,button:focus-visible,[role="button"]:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; } /* Markierung in Markenfarbe */ ::selection{ background:rgba(0,140,210,.22); } /* ---- Wiederverwendbare Mein-Makler-Buttons (für neue Formulare/Dashboards) ---- Bestehende Buttons behalten ihre Form; ihre FARBEN vereinheitlichen sich bereits über die kanonischen Tokens. Für frische UI diese Klassen nutzen. */ .mm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--mm-font-display); font-weight:600; font-size:14px; line-height:1; padding:11px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background .15s var(--mm-ease), color .15s var(--mm-ease), border-color .15s var(--mm-ease), box-shadow .15s var(--mm-ease), transform .06s var(--mm-ease); } .mm-btn:active{ transform:translateY(1px); } .mm-btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(0,80,150,.20); } .mm-btn-primary:hover{ background:var(--accent2); } .mm-btn-secondary{ background:var(--accent-bright); color:#fff; } .mm-btn-secondary:hover{ background:var(--accent); } .mm-btn-accent{ background:var(--mm-orange); color:#fff; box-shadow:0 8px 20px rgba(240,145,0,.28); } .mm-btn-accent:hover{ background:var(--mm-orange-600); } .mm-btn-outline{ background:transparent; color:var(--accent); border-color:var(--accent); } .mm-btn-outline:hover{ background:var(--accent); color:#fff; } .mm-btn-ghost{ background:transparent; color:var(--accent); } .mm-btn-ghost:hover{ background:rgba(0,80,150,.08); } .mm-btn-sm{ padding:8px 15px; font-size:13px; } .mm-btn-lg{ padding:14px 26px; font-size:15px; } /* ---- Bestehende Buttons (.btn …) auf Mein-Makler-Pill angleichen ---- Nur Marken-Optik (Form/Schrift/Farbe der Varianten) — Innenabstände/Größe bleiben je Seite, damit keine Layouts brechen. `body:has(#mm-sidebar)` sorgt für genug Spezifität, um die Seiten-Styles zu gewinnen. */ body:has(#mm-sidebar) .btn{ font-family:var(--mm-font-display); font-weight:600; border-radius:999px; cursor:pointer; transition:background .15s var(--mm-ease), color .15s var(--mm-ease), border-color .15s var(--mm-ease), box-shadow .15s var(--mm-ease), transform .06s var(--mm-ease); } body:has(#mm-sidebar) .btn:active{ transform:translateY(1px); } body:has(#mm-sidebar) .btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(0,80,150,.20); } body:has(#mm-sidebar) .btn-primary:hover{ background:var(--accent2); } body:has(#mm-sidebar) .btn-secondary{ background:var(--accent-bright); color:#fff; } body:has(#mm-sidebar) .btn-secondary:hover{ background:var(--accent); } body:has(#mm-sidebar) .btn-danger{ background:#d23b3b; color:#fff; } body:has(#mm-sidebar) .btn-success{ background:#2e9e6b; color:#fff; } /* ---- Karten & Panels: einheitliche Form + weicher Schatten ---- Nur Rahmen/Radius/Fläche/Schatten — Innenabstände bleiben je Seite. */ body:has(#mm-sidebar) .card, body:has(#mm-sidebar) .panel{ border-radius:var(--mm-radius); border:1px solid var(--border); background:var(--surface); box-shadow:var(--mm-shadow-card); } /* =========================================================================== EINHEITLICHER SEITENKOPF (global injiziert, nur auf Werkzeug-Seiten) Ersetzt die uneinheitlichen Emoji-

/.header-Kopfzeilen der Templates. Variante A (hell/editorial) — bestätigt im Musterentwurf. =========================================================================== */ .mm-pagehead{ background:var(--surface); border-bottom:1px solid var(--border); padding:20px 30px; position:relative; font-family:var(--mm-font-body); } .mm-pagehead::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--mm-blue-500),var(--mm-blue-700)); } .mm-pagehead .mm-ph-crumb{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); opacity:.8; margin-bottom:8px; } .mm-pagehead .mm-ph-crumb b{ color:var(--muted); font-weight:600; } .mm-pagehead .mm-ph-row{ display:flex; align-items:center; gap:16px; } .mm-pagehead .mm-ph-icon{ width:50px; height:50px; border-radius:15px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(150deg,var(--mm-blue-500),var(--mm-blue-700)); box-shadow:0 8px 20px rgba(0,80,150,.26); } .mm-pagehead .mm-ph-txt{ flex:1; min-width:0; } .mm-pagehead .mm-ph-over{ font-family:var(--mm-font-display); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-bright); } .mm-pagehead .mm-ph-title{ font-family:var(--mm-font-display); font-size:25px; font-weight:700; color:var(--accent); letter-spacing:-.01em; margin-top:2px; line-height:1.12; } .mm-pagehead .mm-ph-desc{ font-size:13.5px; color:var(--muted); margin-top:3px; } html[data-theme="dark"] .mm-pagehead .mm-ph-title{ color:var(--text); } /* Optionaler Aktions-Knopf rechts im Kopf (z. B. „In neuem Fenster öffnen") */ .mm-pagehead .mm-ph-act{ flex:none; display:inline-flex; align-items:center; gap:7px; font-family:var(--mm-font-display); font-weight:600; font-size:13px; text-decoration:none; white-space:nowrap; color:#fff; background:var(--accent); padding:9px 16px; border-radius:999px; box-shadow:0 6px 16px rgba(0,80,150,.20); transition:background .15s var(--mm-ease); } .mm-pagehead .mm-ph-act:hover{ background:var(--accent2); } .mm-pagehead .mm-ph-act svg{ flex:none; } @media (max-width:820px){ .mm-pagehead .mm-ph-act span{ display:none; } } @media (max-width:820px){ .mm-pagehead{ padding:18px 20px 18px 66px; } /* Platz für den Burger oben links */ .mm-pagehead .mm-ph-title{ font-size:21px; } .mm-pagehead .mm-ph-icon{ width:44px; height:44px; } } /* =========================================================================== ZENTRALES START-COCKPIT (Route /) =========================================================================== */ .mm-cockpit{ padding:34px 34px 64px; max-width:1180px; font-family:var(--mm-font-body); } @media (max-width:820px){ .mm-cockpit{ padding:24px 18px 54px 60px; } } .mm-ck-hero{ margin-bottom:6px; } .mm-ck-over{ font-family:var(--mm-font-display); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-bright); } .mm-ck-hero h1{ font-family:var(--mm-font-display); font-size:32px; font-weight:700; color:var(--accent); letter-spacing:-.015em; margin-top:5px; line-height:1.1; } html[data-theme="dark"] .mm-ck-hero h1{ color:var(--text); } .mm-ck-sub{ color:var(--muted); font-size:14px; margin-top:6px; } .mm-ck-sec{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:30px 2px 14px; } .mm-ck-eyebrow{ font-family:var(--mm-font-display); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .mm-ck-more{ font-family:var(--mm-font-display); font-size:12.5px; font-weight:600; color:var(--accent-bright); text-decoration:none; white-space:nowrap; } .mm-ck-more:hover{ color:var(--accent); } .mm-ck-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; } .mm-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--mm-radius); padding:16px 18px; box-shadow:var(--mm-shadow-card); text-decoration:none; display:block; transition:border-color .15s var(--mm-ease), transform .15s var(--mm-ease); } .mm-kpi:hover{ border-color:var(--accent-bright); transform:translateY(-2px); } .mm-kpi-l{ display:block; font-size:12.5px; color:var(--muted); } .mm-kpi-v{ display:block; font-family:var(--mm-font-display); font-weight:700; font-size:30px; color:var(--text); margin-top:5px; letter-spacing:-.01em; } .mm-kpi-v.blue{ color:var(--accent); } .mm-kpi-v.green{ color:#2e9e6b; } .mm-kpi-v.amber{ color:#d98200; } html[data-theme="dark"] .mm-kpi-v.blue{ color:var(--accent-bright); } html[data-theme="dark"] .mm-kpi-v.amber{ color:#f7a93a; } .mm-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:16px; } .mm-tile{ display:flex; align-items:flex-start; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--mm-radius); padding:18px; box-shadow:var(--mm-shadow-card); text-decoration:none; color:inherit; transition:border-color .16s var(--mm-ease), transform .16s var(--mm-ease), box-shadow .16s var(--mm-ease); } .mm-tile:hover{ border-color:var(--accent-bright); transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,51,96,.12); } .mm-tile-ic{ width:44px; height:44px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(150deg,var(--mm-blue-500),var(--mm-blue-700)); box-shadow:0 6px 16px rgba(0,80,150,.24); } .mm-tile-tx{ flex:1; min-width:0; } .mm-tile-h{ display:block; font-family:var(--mm-font-display); font-weight:600; font-size:15px; color:var(--text); } .mm-tile-d{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.4; } .mm-tile-arr{ flex:none; align-self:center; color:var(--muted); opacity:0; transform:translateX(-4px); transition:opacity .16s var(--mm-ease), transform .16s var(--mm-ease); } .mm-tile:hover .mm-tile-arr{ opacity:1; transform:translateX(0); color:var(--accent-bright); }