* { box-sizing: border-box; } 
:root { 
    --fp-blue: #005ca9; 
    --fp-navy: #07376f; 
    --fp-pink: #e5007d; 
    --fp-green: #15965a; 
    --fp-orange: #e58a00; 
    --fp-bg: #f4f7fa; 
    --fp-card: #ffffff; 
    --fp-text: #152238; 
    --fp-muted: #64748b; 
    --fp-line: #d9e3ec; 
    --fp-shadow: 0 16px 40px rgba(7, 55, 111, .09); 
} 
html, body { min-height: 100%; } 
body { margin: 0; font-family: Inter, Aptos, Arial, sans-serif; color: var(--fp-text); background: var(--fp-bg); } 
a { color: inherit; } 
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; } 
.sidebar { background: #fff; border-right: 1px solid var(--fp-line); padding: 26px 20px; display: flex; flex-direction: column; gap: 28px; } 
.brand { 
    display: flex; 
    align-items: center; 
    gap: 13px; 
    padding-bottom: 10px; 
    text-decoration: none; 
} 
 
.brand-logo { 
    display: block; 
    width: 58px; 
    height: 58px; 
    flex: 0 0 58px; 
    object-fit: contain; 
    border-radius: 14px; 
} 
 
.brand-copy { 
    display: flex; 
    min-width: 0; 
    flex-direction: column; 
    line-height: 1; 
} 
 
.brand-title { 
    display: block; 
    white-space: nowrap; 
    font-size: 17px; 
    font-weight: 800; 
    letter-spacing: -0.025em; 
} 
 
.brand-title-finance { 
    color: #005ca9; 
    font-weight: 500; 
} 
 
.brand-title-passion { 
    color: #07376f; 
    font-weight: 850; 
} 
 
.brand-subtitle { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    margin-top: 6px; 
    white-space: nowrap; 
    font-size: 8px; 
    font-weight: 800; 
    letter-spacing: 0.11em; 
} 
 
.brand-subtitle::before, 
.brand-subtitle::after { 
    content: ""; 
    display: block; 
    width: 12px; 
    height: 1px; 
    background: #0078d4; 
} 
 
.brand-subtitle-ionity { 
    color: #e5007d; 
} 
 
.brand-subtitle-management { 
    color: #64748b; 
} 
.navigation { display: grid; gap: 8px; } 
.nav-item { padding: 12px 14px; border-radius: 12px; text-decoration: none; color: #334155; font-weight: 700; } 
.nav-item.active { color: var(--fp-blue); background: #eaf4fb; } 
.nav-item.disabled { color: #94a3b8; cursor: not-allowed; } 
.user-box { margin-top: auto; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding-top: 18px; border-top: 1px solid var(--fp-line); } 
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--fp-navy); font-weight: 800; } 
.user-meta strong, .user-meta small { display: block; } 
.user-meta small { color: var(--fp-muted); } 
.logout-link { grid-column: 2; color: var(--fp-blue); font-size: 13px; } 
.main-content { padding: 36px; overflow: hidden; } 
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 26px; } 
.page-header h1 { margin: 4px 0 5px; color: var(--fp-navy); font-size: clamp(26px, 3vw, 38px); } 
.page-header p { margin: 0; color: var(--fp-muted); } 
.eyebrow { margin: 0; color: var(--fp-pink) !important; font-size: 11px; font-weight: 800; letter-spacing: .16em; } 
.status-chip { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; } 
.status-chip.success { color: #0d7544; background: #e8f7ef; } 
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } 
.kpi-card, .content-card { padding: 22px; border: 1px solid var(--fp-line); border-radius: 20px; background: var(--fp-card); box-shadow: var(--fp-shadow); } 
.kpi-card span, .kpi-card small { display: block; color: var(--fp-muted); } 
.kpi-card strong { display: block; margin: 12px 0 8px; color: var(--fp-navy); font-size: 28px; } 
.kpi-card.accent { border-top: 4px solid var(--fp-pink); } 
.content-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-top: 18px; } 
.content-card h2 { margin-top: 0; color: var(--fp-navy); } 
.hero-card { position: relative; overflow: hidden; } 
.hero-card::after { content: ''; position: absolute; width: 180px; height: 180px; right: -70px; bottom: -90px; border-radius: 50%; background: linear-gradient(135deg, rgba(0,92,169,.14), rgba(229,0,125,.13)); } 
.progress-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } 
.progress-list span { padding: 8px 11px; border-radius: 999px; color: var(--fp-blue); background: #eaf4fb; font-size: 12px; font-weight: 800; } 
code { display: block; padding: 12px; border-radius: 12px; color: var(--fp-navy); background: #f1f5f9; overflow-wrap: anywhere; } 
.message { margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; } 
.message.error { color: #9f1239; background: #fff1f2; } 
.message.warning { color: #8a4b00; background: #fff7e8; } 
.public-content { min-height: 100vh; } 
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 620px) 1fr; } 
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 8vw; background: #fff; } 
.login-brand { 
    display: flex; 
    align-items: center; 
    gap: 18px; 
    margin-bottom: 46px; 
} 
 
.login-logo { 
    display: block; 
    width: 104px; 
    height: 104px; 
    flex: 0 0 104px; 
    object-fit: contain; 
    border-radius: 24px; 
} 
 
.login-brand-copy { 
    display: flex; 
    flex-direction: column; 
    line-height: 1; 
} 
 
.login-brand-title { 
    white-space: nowrap; 
    font-size: 25px; 
    font-weight: 850; 
    letter-spacing: -0.03em; 
} 
 
.login-brand-subtitle { 
    display: flex; 
    align-items: center; 
    gap: 7px; 
    margin-top: 8px; 
    white-space: nowrap; 
    font-size: 9px; 
    font-weight: 800; 
    letter-spacing: 0.15em; 
} 
 
.login-brand-subtitle::before, 
.login-brand-subtitle::after { 
    content: ""; 
    display: block; 
    width: 18px; 
    height: 1px; 
    background: #0078d4; 
} 
 
.login-brand-subtitle .brand-subtitle-ionity { 
    color: #e5007d; 
} 
 
.login-brand-subtitle .brand-subtitle-management { 
    color: #64748b; 
}
.login-panel h1 { margin: 5px 0; color: var(--fp-navy); font-size: 38px; } 
.lead { color: var(--fp-muted); } 
.login-form { display: grid; gap: 18px; margin-top: 28px; } 
.login-form label { display: grid; gap: 7px; color: #334155; font-weight: 700; } 
.login-form input { width: 100%; padding: 13px 14px; border: 1px solid #cbd5e1; border-radius: 12px; font: inherit; } 
.login-form input:focus { outline: 3px solid rgba(0,92,169,.14); border-color: var(--fp-blue); } 
.primary-button { padding: 14px 18px; border: 0; border-radius: 12px; color: #fff; background: var(--fp-blue); font: inherit; font-weight: 800; cursor: pointer; } 
.login-visual { display: grid; place-items: center; padding: 50px; background: radial-gradient(circle at 80% 20%, rgba(229,0,125,.23), transparent 35%), linear-gradient(135deg, #07376f, #005ca9); } 
.visual-card { width: min(430px, 100%); padding: 32px; border: 1px solid rgba(255,255,255,.25); border-radius: 26px; color: #fff; background: rgba(255,255,255,.13); backdrop-filter: blur(12px); box-shadow: 0 26px 70px rgba(0,0,0,.25); } 
.visual-card span, .visual-card small { display: block; opacity: .82; } 
.visual-card strong { display: block; margin: 14px 0; font-size: 42px; } 
@media (max-width: 1050px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .content-grid { grid-template-columns: 1fr; } } 
@media (max-width: 780px) { 
    .app-shell { grid-template-columns: 1fr; padding-bottom: 76px; } 
    .sidebar { position: fixed; z-index: 10; inset: auto 0 0; display: block; padding: 8px 10px; border: 0; border-top: 1px solid var(--fp-line); } 
    .sidebar .brand, .sidebar .user-box { display: none; } 
    .navigation { display: flex; justify-content: space-around; overflow-x: auto; } 
    .nav-item { min-width: max-content; padding: 10px; font-size: 12px; } 
    .nav-item.disabled:nth-of-type(n+5) { display: none; } 
    .main-content { padding: 22px 14px; } 
    .page-header { display: grid; } 
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; } 
    .kpi-card { padding: 16px; border-radius: 16px; } 
    .kpi-card strong { font-size: 22px; } 
    .login-page { grid-template-columns: 1fr; } 
    .login-panel { min-height: 100vh; padding: 28px 22px; } 
    .login-visual { display: none; }
    .login-brand { 
        align-items: center; 
        gap: 13px; 
        margin-bottom: 34px; 
    } 
 
    .login-logo { 
        width: 76px; 
        height: 76px; 
        flex-basis: 76px; 
        border-radius: 18px; 
    } 
 
    .login-brand-title { 
        font-size: 20px; 
    } 
 
    .login-brand-subtitle { 
        gap: 4px; 
        margin-top: 6px; 
        font-size: 7px; 
        letter-spacing: 0.1em; 
    } 
 
    .login-brand-subtitle::before, 
    .login-brand-subtitle::after { 
        width: 9px; 
    }
} 
.message.success { 
    color: #0d7544; 
    background: #e8f7ef; 
} 
 
.status-chip.inactive { 
    color: #64748b; 
    background: #edf1f5; 
} 
 
.button-link { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none; 
} 
 
.secondary-button { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 12px 16px; 
    border: 1px solid #b8cadb; 
    border-radius: 12px; 
    color: var(--fp-navy); 
    background: #ffffff; 
    font: inherit; 
    font-weight: 800; 
    cursor: pointer; 
} 
 
.secondary-button.small { 
    padding: 8px 11px; 
    border-radius: 10px; 
    font-size: 12px; 
} 
 
.text-button { 
    border: 0; 
    padding: 6px; 
    font: inherit; 
    font-size: 12px; 
    font-weight: 800; 
    background: transparent; 
    cursor: pointer; 
} 
 
.text-button.danger { color: #b42318; } 
.text-button.success-text { color: var(--fp-green); } 
.text-button:disabled { color: #aab5c2; cursor: not-allowed; } 
.inline-form { display: inline; } 
 
.table-card { padding: 0; overflow: hidden; } 
.table-scroll { overflow-x: auto; } 
.data-table { width: 100%; border-collapse: collapse; } 
.data-table th, 
.data-table td { padding: 15px 18px; border-bottom: 1px solid var(--fp-line); text-align: left; vertical-align: middle; } 
.data-table th { color: #526277; background: #f8fafc; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } 
.data-table tbody tr:last-child td { border-bottom: 0; } 
.data-table tbody tr:hover { background: #fbfdff; } 
.align-right { text-align: right !important; } 
.actions-cell { white-space: nowrap; } 
.person-cell { display: flex; align-items: center; gap: 11px; min-width: 180px; } 
.person-cell strong, .person-cell small { display: block; } 
.person-cell small { margin-top: 3px; color: var(--fp-muted); } 
.person-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--fp-blue), var(--fp-pink)); font-weight: 800; } 
.profile-layout { 
    display: grid; 
    grid-template-columns: 220px minmax(0, 1fr); 
    gap: 28px; 
    align-items: start; 
} 
 
.profile-image-panel { 
    display: grid; 
    gap: 14px; 
} 
 
.profile-preview { 
    display: grid; 
    place-items: center; 
    width: 180px; 
    height: 180px; 
    overflow: hidden; 
    border: 1px solid var(--fp-line); 
    border-radius: 24px; 
    color: #ffffff; 
    background: linear-gradient(135deg, var(--fp-blue), var(--fp-pink)); 
    box-shadow: 0 14px 30px rgba(7, 55, 111, .13); 
} 
 
.profile-preview img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 
 
.profile-preview span { 
    font-size: 54px; 
    font-weight: 850; 
} 
 
.file-label { 
    display: grid; 
    gap: 7px; 
    font-weight: 750; 
} 
 
.file-label input[type="file"] { 
    width: 100%; 
    padding: 9px; 
    border: 1px dashed #a8bfd3; 
    border-radius: 11px; 
    background: #f8fafc; 
} 
 
.file-label small { 
    color: var(--fp-muted); 
    font-weight: 500; 
} 
 
.remove-image-row { 
    display: flex !important; 
    align-items: center; 
    gap: 9px; 
    color: #b42318 !important; 
    font-size: 13px; 
    font-weight: 750; 
} 
 
.remove-image-row input { 
    width: 18px !important; 
    height: 18px; 
    accent-color: #b42318; 
} 
 
.profile-fields { 
    align-self: stretch; 
} 
 
.person-avatar-image { 
    object-fit: cover; 
    background: #eaf4fb; 
} 
 
@media (max-width: 900px) { 
    .profile-layout { 
        grid-template-columns: 1fr; 
    } 
 
    .profile-image-panel { 
        max-width: 360px; 
    } 
} 
 
@media (max-width: 780px) { 
    .profile-preview { 
        width: 132px; 
        height: 132px; 
        border-radius: 20px; 
    } 
 
    .profile-preview span { 
        font-size: 42px; 
    } 
}
.role-chip { display: inline-flex; padding: 7px 10px; border-radius: 999px; color: var(--fp-blue); background: #eaf4fb; font-size: 12px; font-weight: 800; } 
.empty-state { padding: 38px !important; color: var(--fp-muted); text-align: center !important; } 
 
.user-form { display: grid; gap: 18px; max-width: 980px; } 
.form-section { box-shadow: none; } 
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 20px; } 
.section-heading h2 { margin: 4px 0 0; } 
.form-grid { display: grid; gap: 18px; } 
.form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
.form-grid label { display: grid; gap: 7px; color: #334155; font-weight: 750; } 
.form-grid input, 
.form-grid select { width: 100%; padding: 12px 13px; border: 1px solid #cbd5e1; border-radius: 11px; color: var(--fp-text); background: #fff; font: inherit; } 
.form-grid input:focus, 
.form-grid select:focus { outline: 3px solid rgba(0, 92, 169, .13); border-color: var(--fp-blue); } 
.form-grid label > small { color: var(--fp-muted); font-weight: 500; } 
.full-width { grid-column: 1 / -1; } 
.toggle-row { display: flex !important; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--fp-line); border-radius: 12px; background: #f8fafc; } 
.toggle-row input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--fp-blue); } 
.toggle-row strong, .toggle-row small { display: block; } 
.toggle-row small { margin-top: 3px; color: var(--fp-muted); font-weight: 500; } 
.form-actions { display: flex; justify-content: flex-end; gap: 12px; } 
 
@media (max-width: 780px) { 
    .page-header .primary-button, 
    .page-header .secondary-button { width: 100%; } 
    .form-grid.two-columns { grid-template-columns: 1fr; } 
    .form-actions { display: grid; grid-template-columns: 1fr; } 
    .form-actions .primary-button, 
    .form-actions .secondary-button { width: 100%; } 
    .data-table thead { display: none; } 
    .data-table, 
    .data-table tbody, 
    .data-table tr, 
    .data-table td { display: block; width: 100%; } 
    .data-table tr { padding: 14px; border-bottom: 1px solid var(--fp-line); } 
    .data-table td { display: grid; grid-template-columns: 115px 1fr; gap: 10px; padding: 8px 0; border: 0; } 
    .data-table td::before { content: attr(data-label); color: var(--fp-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } 
    .data-table .actions-cell { display: flex; justify-content: flex-start; align-items: center; padding-top: 12px; } 
    .data-table .actions-cell::before { display: none; } 
    .person-cell { min-width: 0; } 
    .align-right { text-align: left !important; } 
}
.verification-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.verification-list{display:grid;gap:10px}
.verification-row{display:grid;grid-template-columns:1.1fr 1fr 1.3fr .7fr auto;gap:16px;align-items:center;text-decoration:none;box-shadow:none}
.verification-row span,.verification-row strong{display:block}
.verification-row div>span{color:var(--fp-muted);font-size:11px;font-weight:800;text-transform:uppercase}
.verification-row strong{margin-top:4px;color:var(--fp-navy)}
.verification-detail-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.75fr);gap:18px}
.pdf-preview-card{min-height:760px;padding:10px}
.pdf-preview-card iframe{width:100%;height:740px;border:0;border-radius:12px;background:#eef2f7}
.verification-panel{box-shadow:none}
.verification-data{display:grid;gap:0;margin:0}
.verification-data div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--fp-line)}
.verification-data dt{color:var(--fp-muted)}
.verification-data dd{margin:0;color:var(--fp-navy);font-weight:800;text-align:right}
.verification-form{display:grid;gap:12px;margin-top:18px}
.verification-form label{display:grid;gap:7px;font-weight:800}
.verification-form textarea{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:11px;font:inherit;resize:vertical}
.verified-box{display:grid;gap:4px;margin-top:18px;padding:14px;border-radius:12px;color:#087443;background:#eaf8f1}
.verified-box span{font-size:12px}@media(max-width:1050px){.verification-detail-grid{grid-template-columns:1fr}
.verification-row{grid-template-columns:1fr 1fr}
.verification-row>.status-chip{justify-self:start}}@media(max-width:700px){.verification-kpis,.verification-row{grid-template-columns:1fr}
.pdf-preview-card{min-height:520px}
.pdf-preview-card iframe{height:500px}} 
.assignment-kpis { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 18px; 
  margin-bottom: 18px; 
} 
.assignment-list { display: grid; gap: 14px; } 
.assignment-card { 
  display: grid; 
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr); 
  gap: 24px; 
  box-shadow: none; 
} 
.assignment-data { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 16px; 
} 
.assignment-data span, 
.assignment-data strong { display: block; } 
.assignment-data span { 
  color: var(--fp-muted); 
  font-size: 11px; 
  font-weight: 800; 
  text-transform: uppercase; 
} 
.assignment-data strong { margin-top: 5px; color: var(--fp-navy); } 
.assignment-form { display: grid; gap: 12px; } 
.assignment-form label { display: grid; gap: 6px; font-weight: 800; } 
.assignment-form select, 
.assignment-form input { 
  width: 100%; 
  padding: 11px 12px; 
  border: 1px solid #cbd5e1; 
  border-radius: 11px; 
  font: inherit; 
} 
@media (max-width: 980px) { 
  .assignment-card { grid-template-columns: 1fr; } 
} 
@media (max-width: 700px) { 
  .assignment-kpis, 
  .assignment-data { grid-template-columns: 1fr; } 
}
.parser-control-card{display:flex;justify-content:space-between;gap:28px;align-items:center;margin-bottom:18px;box-shadow:none}
.parser-control-card h2{margin:4px 0 8px}
.parser-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
.parser-table td strong,.parser-table td small{display:block}.parser-table td small{margin-top:4px;color:var(--fp-muted)}
.parser-table code{display:block;max-width:280px;white-space:normal;overflow-wrap:anywhere;font-size:10px}@media(max-width:980px){.parser-control-card{display:grid}
.parser-control-card .primary-button{width:100%}}
@media(max-width:780px){.parser-kpis{grid-template-columns:1fr}} 
.page-header-actions { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
} 
 
.import-control-card { 
    display: flex; 
    justify-content: space-between; 
    gap: 28px; 
    align-items: center; 
    margin-bottom: 18px; 
    box-shadow: none; 
} 
 
.import-control-card h2 { 
    margin: 4px 0 8px; 
} 
 
.import-control-card p:last-child { 
    max-width: 780px; 
    margin-bottom: 0; 
    color: var(--fp-muted); 
} 
 
.import-kpis { 
    display: grid; 
    grid-template-columns: repeat(5, minmax(0, 1fr)); 
    gap: 14px; 
    margin-bottom: 18px; 
} 
 
.import-result-card, 
.import-history-card { 
    margin-bottom: 18px; 
    box-shadow: none; 
} 
 
.import-result-card h2, 
.import-history-card h2 { 
    margin: 4px 0 16px; 
} 
 
.import-result-list { 
    display: grid; 
    gap: 8px; 
} 
 
.import-result-row { 
    display: grid; 
    grid-template-columns: 95px minmax(180px, .8fr) minmax(220px, 1fr); 
    gap: 12px; 
    align-items: center; 
    padding: 10px 12px; 
    border: 1px solid var(--fp-line); 
    border-radius: 11px; 
    background: #f8fafc; 
} 
 
.import-result-row.downloaded { 
    border-color: #9bd5b7; 
    background: #f0fbf5; 
} 
 
.import-result-row.duplicate { 
    border-color: #f3c87a; 
    background: #fff9ec; 
} 
 
.import-result-row.failed { 
    border-color: #f0a9a9; 
    background: #fff5f5; 
} 
 
.import-status { 
    font-size: 10px; 
    font-weight: 850; 
    text-transform: uppercase; 
} 
 
@media (max-width: 1100px) { 
    .import-kpis { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    } 
} 
 
@media (max-width: 780px) { 
    .page-header-actions, 
    .page-header-actions .button-link { 
        width: 100%; 
    } 
 
    .import-control-card { 
        display: grid; 
    } 
 
    .import-control-card .primary-button { 
        width: 100%; 
    } 
 
    .import-kpis { 
        grid-template-columns: 1fr; 
    } 
 
    .import-result-row { 
        grid-template-columns: 1fr; 
    } 
}
.message-kpis { 
    display: grid; 
    grid-template-columns: repeat(4, minmax(0, 1fr)); 
    gap: 18px; 
    margin-bottom: 18px; 
} 
 
.message-toolbar { 
    display: grid; 
    grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.4fr) auto; 
    gap: 18px; 
    align-items: end; 
    margin-bottom: 18px; 
    box-shadow: none; 
} 
 
.message-path span, 
.message-path strong { 
    display: block; 
} 
 
.message-path span { 
    color: var(--fp-muted); 
    font-size: 11px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: .06em; 
} 
 
.message-path strong { 
    margin-top: 6px; 
    color: var(--fp-navy); 
    overflow-wrap: anywhere; 
} 
 
.message-toolbar label { 
    display: grid; 
    gap: 7px; 
    color: var(--fp-navy); 
    font-weight: 800; 
} 
 
.message-toolbar input { 
    width: 100%; 
    padding: 12px 14px; 
    border: 1px solid #cbd5e1; 
    border-radius: 12px; 
    font: inherit; 
} 
 
.message-filters { 
    display: flex; 
    gap: 7px; 
} 
 
.filter-button { 
    padding: 10px 12px; 
    border: 1px solid #b8cadb; 
    border-radius: 999px; 
    color: var(--fp-navy); 
    background: #ffffff; 
    font: inherit; 
    font-size: 12px; 
    font-weight: 800; 
    cursor: pointer; 
} 
 
.filter-button.active { 
    border-color: var(--fp-blue); 
    color: #ffffff; 
    background: var(--fp-blue); 
} 
 
.message-list { 
    display: grid; 
    gap: 12px; 
} 
 
.message-card { 
    padding: 18px 20px; 
    box-shadow: none; 
} 
 
.message-card[hidden] { 
    display: none; 
} 
 
.message-card-main { 
    display: grid; 
    grid-template-columns: 10px minmax(0, 1fr); 
    gap: 14px; 
} 
 
.message-state { 
    width: 8px; 
    min-height: 64px; 
    border-radius: 999px; 
} 
 
.message-state.read { 
    background: #cbd5e1; 
} 
 
.message-state.unread { 
    background: var(--fp-pink); 
} 
 
.message-title-row { 
    display: flex; 
    justify-content: space-between; 
    gap: 18px; 
    align-items: flex-start; 
} 
 
.message-title-row h2 { 
    margin: 0; 
    color: var(--fp-navy); 
    font-size: 18px; 
} 
 
.message-title-row time { 
    flex: 0 0 auto; 
    color: var(--fp-muted); 
    font-size: 12px; 
    font-weight: 750; 
} 
 
.message-sender { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
    margin: 7px 0 12px; 
    color: var(--fp-muted); 
} 
 
.message-sender strong { 
    color: #334155; 
} 
 
.message-badges { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 7px; 
} 
 
.metadata-chip { 
    display: inline-flex; 
    padding: 7px 10px; 
    border-radius: 999px; 
    color: #526277; 
    background: #f1f5f9; 
    font-size: 11px; 
    font-weight: 800; 
} 
 
.metadata-chip.important { 
    color: #9f1239; 
    background: #fff1f2; 
} 
 
.attachment-details { 
    margin: 15px 0 0 24px; 
    padding-top: 12px; 
    border-top: 1px solid var(--fp-line); 
} 
 
.attachment-details summary { 
    color: var(--fp-blue); 
    font-size: 12px; 
    font-weight: 800; 
    cursor: pointer; 
} 
 
.attachment-list { 
    display: grid; 
    gap: 7px; 
    margin-top: 10px; 
} 
 
.attachment-row { 
    display: grid; 
    grid-template-columns: 50px minmax(160px, 1fr) minmax(130px, .7fr) 80px; 
    gap: 10px; 
    align-items: center; 
    padding: 9px 11px; 
    border: 1px solid var(--fp-line); 
    border-radius: 10px; 
    background: #f8fafc; 
} 
 
.attachment-row.pdf { 
    border-color: #efafd0; 
    background: #fff7fb; 
} 
 
.attachment-icon { 
    color: var(--fp-pink); 
    font-size: 11px; 
    font-weight: 850; 
} 
 
.attachment-name { 
    color: var(--fp-navy); 
    font-weight: 750; 
    overflow-wrap: anywhere; 
} 
 
.attachment-type, 
.attachment-size { 
    color: var(--fp-muted); 
    font-size: 11px; 
} 
 
.attachment-size { 
    text-align: right; 
} 
 
.empty-message-list { 
    color: var(--fp-muted); 
    text-align: center; 
    box-shadow: none; 
} 
 
@media (max-width: 1050px) { 
    .message-kpis { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    } 
 
    .message-toolbar { 
        grid-template-columns: 1fr; 
        align-items: stretch; 
    } 
} 
 
@media (max-width: 780px) { 
    .messages-header .secondary-button { 
        width: 100%; 
    } 
 
    .message-kpis { 
        grid-template-columns: 1fr 1fr; 
        gap: 10px; 
    } 
 
    .message-filters { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
    } 
 
    .message-title-row { 
        display: grid; 
        gap: 6px; 
    } 
 
    .attachment-row { 
        grid-template-columns: 45px minmax(0, 1fr); 
    } 
 
    .attachment-type, 
    .attachment-size { 
        grid-column: 2; 
        text-align: left; 
    } 
} 
 
@media (max-width: 430px) { 
    .message-kpis { 
        grid-template-columns: 1fr; 
    } 
 
    .message-filters { 
        grid-template-columns: 1fr; 
    } 
}
.graph-actions { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: 12px; 
    margin-top: 24px; 
} 
 
.graph-actions .graph-test-form { 
    margin-top: 0; 
} 
 
.explorer-kpis { 
    display: grid; 
    grid-template-columns: 180px minmax(0, 1fr) 180px; 
    gap: 18px; 
    margin-bottom: 18px; 
} 
 
.path-kpi { 
    font-size: 18px !important; 
    overflow-wrap: anywhere; 
} 
 
.explorer-toolbar { 
    display: grid; 
    grid-template-columns: auto minmax(220px, 1fr) auto auto; 
    gap: 12px; 
    align-items: center; 
    margin-bottom: 18px; 
    box-shadow: none; 
} 
 
.explorer-toolbar label { 
    color: var(--fp-navy); 
    font-weight: 800; 
} 
 
.explorer-toolbar input { 
    width: 100%; 
    padding: 12px 14px; 
    border: 1px solid #cbd5e1; 
    border-radius: 12px; 
    font: inherit; 
} 
 
.folder-tree-card { 
    padding: 16px; 
} 
 
.folder-tree { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
 
.nested-tree { 
    margin: 5px 0 7px 30px; 
    padding-left: 14px; 
    border-left: 1px solid #cbd5e1; 
} 
 
.folder-node { 
    margin: 5px 0; 
} 
 
.folder-node > details > summary { 
    display: grid; 
    grid-template-columns: 18px 34px minmax(200px, 1fr) auto auto; 
    gap: 10px; 
    align-items: center; 
    padding: 10px 12px; 
    border: 1px solid transparent; 
    border-radius: 12px; 
    cursor: pointer; 
    list-style: none; 
} 
 
.folder-node > details > summary::-webkit-details-marker { 
    display: none; 
} 
 
.folder-node > details > summary:hover { 
    border-color: #c8d9e7; 
    background: #f8fbfd; 
} 
 
.folder-chevron { 
    color: var(--fp-muted); 
    font-size: 23px; 
    transform: rotate(0deg); 
    transition: transform .15s ease; 
} 
 
.folder-node > details[open] > summary .folder-chevron { 
    transform: rotate(90deg); 
} 
 
.folder-icon { 
    display: grid; 
    place-items: center; 
    width: 30px; 
    height: 30px; 
    border-radius: 9px; 
    color: var(--fp-blue); 
    background: #eaf4fb; 
    font-size: 12px; 
    font-weight: 850; 
} 
 
.folder-main strong, 
.folder-main small { 
    display: block; 
} 
 
.folder-main strong { 
    color: var(--fp-navy); 
} 
 
.folder-main small { 
    margin-top: 3px; 
    color: var(--fp-muted); 
    overflow-wrap: anywhere; 
} 
 
.folder-metrics { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: flex-end; 
    gap: 6px; 
} 
 
.folder-metrics span { 
    padding: 5px 7px; 
    border-radius: 999px; 
    color: #526277; 
    background: #f1f5f9; 
    font-size: 10px; 
    font-weight: 750; 
} 
 
.folder-technical { 
    display: grid; 
    gap: 6px; 
    margin: 0 12px 8px 62px; 
} 
 
.folder-technical code { 
    padding: 7px 9px; 
    font-size: 10px; 
} 
 
.path-folder > details > summary { 
    border-color: #9fc8e6; 
    background: #f0f8fd; 
} 
 
.target-folder > details > summary { 
    border-color: #e5007d; 
    background: #fff2f8; 
} 
 
.target-badge { 
    padding: 6px 9px; 
    border-radius: 999px; 
    color: #ffffff; 
    background: var(--fp-pink); 
    font-size: 10px; 
    font-weight: 850; 
    white-space: nowrap; 
} 
 
.search-hidden { 
    display: none; 
} 
 
.search-match > details > summary { 
    box-shadow: inset 0 0 0 2px var(--fp-pink); 
} 
 
.duplicate-card { 
    margin-top: 18px; 
    box-shadow: none; 
} 
 
.duplicate-card h2 { 
    margin: 4px 0 16px; 
} 
 
.duplicate-group { 
    display: grid; 
    gap: 7px; 
    padding: 13px 0; 
    border-bottom: 1px solid var(--fp-line); 
} 
 
.duplicate-group code { 
    font-size: 10px; 
} 
 
@media (max-width: 1050px) { 
    .explorer-kpis { 
        grid-template-columns: 1fr; 
    } 
 
    .explorer-toolbar { 
        grid-template-columns: 1fr 1fr; 
    } 
 
    .explorer-toolbar label, 
    .explorer-toolbar input { 
        grid-column: 1 / -1; 
    } 
 
    .folder-node > details > summary { 
        grid-template-columns: 18px 34px minmax(160px, 1fr) auto; 
    } 
 
    .target-badge { 
        grid-column: 3 / -1; 
        justify-self: start; 
    } 
} 
@media (max-width: 780px) { 
    .explorer-header .secondary-button { 
        width: 100%; 
    } 
 
    .explorer-toolbar { 
        grid-template-columns: 1fr; 
    } 
 
    .explorer-toolbar label, 
    .explorer-toolbar input { 
        grid-column: auto; 
    } 
 
    .folder-node > details > summary { 
        grid-template-columns: 16px 30px minmax(0, 1fr); 
        padding: 9px 7px; 
    } 
 
    .folder-metrics, 
    .target-badge { 
        grid-column: 3; 
        justify-content: flex-start; 
        justify-self: start; 
    } 
 
    .folder-technical { 
        margin-left: 48px; 
    } 
 
    .nested-tree { 
        margin-left: 16px; 
        padding-left: 8px; 
    } 
}
.graph-grid { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); 
    gap: 18px; 
} 
 
.graph-config-card, 
.graph-result-card { 
    min-height: 390px; 
} 
 
.detail-list { 
    display: grid; 
    gap: 0; 
    margin: 0; 
} 
 
.detail-list > div { 
    display: grid; 
    grid-template-columns: 128px minmax(0, 1fr); 
    gap: 16px; 
    padding: 13px 0; 
    border-bottom: 1px solid var(--fp-line); 
} 
 
.detail-list dt { 
    color: var(--fp-muted); 
    font-size: 12px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: .05em; 
} 
 
.detail-list dd { 
    margin: 0; 
    color: var(--fp-navy); 
    font-weight: 750; 
    overflow-wrap: anywhere; 
} 
 
.graph-test-form { 
    margin-top: 24px; 
} 
 
.graph-test-form .primary-button:disabled { 
    cursor: not-allowed; 
    opacity: .5; 
} 
 
.graph-error { 
    display: grid; 
    gap: 4px; 
} 
 
.inline-notice { 
    margin-top: 18px; 
    padding: 12px 14px; 
    border-radius: 12px; 
    font-size: 13px; 
} 
 
.inline-notice.warning { 
    color: #8a4b00; 
    background: #fff7e8; 
} 
 
.empty-result { 
    display: grid; 
    place-items: center; 
    min-height: 260px; 
    text-align: center; 
} 
 
.empty-result-icon { 
    display: grid; 
    place-items: center; 
    width: 62px; 
    height: 62px; 
    border-radius: 20px; 
    color: #ffffff; 
    background: linear-gradient(135deg, var(--fp-blue), var(--fp-pink)); 
    font-size: 24px; 
    font-weight: 850; 
} 
 
.empty-result h3 { 
    margin: 15px 0 3px; 
    color: var(--fp-navy); 
} 
 
.empty-result p { 
    max-width: 420px; 
    margin: 0; 
    color: var(--fp-muted); 
} 
 
.technical-details { 
    margin-top: 18px; 
    padding: 12px 14px; 
    border: 1px solid var(--fp-line); 
    border-radius: 12px; 
    background: #f8fafc; 
} 
 
.technical-details summary { 
    color: var(--fp-blue); 
    font-weight: 800; 
    cursor: pointer; 
} 
 
.technical-details code { 
    margin-top: 10px; 
    font-size: 11px; 
} 
 
.graph-scope-card { 
    margin-top: 18px; 
    border-left: 4px solid var(--fp-pink); 
    box-shadow: none; 
} 
 
.graph-scope-card h2 { 
    margin: 4px 0 8px; 
} 
 
.graph-scope-card p:last-child { 
    margin-bottom: 0; 
    color: var(--fp-muted); 
} 
 
@media (max-width: 980px) { 
    .graph-grid { 
        grid-template-columns: 1fr; 
    } 
} 
 
@media (max-width: 780px) { 
    .detail-list > div { 
        grid-template-columns: 1fr; 
        gap: 4px; 
    } 
 
    .graph-test-form .primary-button { 
        width: 100%; 
    } 
}
@media (max-width: 430px) { .kpi-grid { grid-template-columns: 1fr; } }
/* ========================================================= 
   financePASSION V0.8 - Dashboard Premium Transformation 
   ========================================================= */ 
 
.navigation { gap: 6px; } 
.nav-section-label { 
    margin: 14px 12px 4px; 
    color: #94a3b8; 
    font-size: 9px; 
    font-weight: 850; 
    letter-spacing: .12em; 
    text-transform: uppercase; 
} 
.nav-section-label:first-child { margin-top: 0; } 
.nav-item { 
    display: grid; 
    grid-template-columns: 28px minmax(0, 1fr) auto; 
    gap: 10px; 
    align-items: center; 
    min-height: 44px; 
    padding: 9px 12px; 
    transition: background .16s ease, color .16s ease, transform .16s ease; 
} 
a.nav-item:hover { color: var(--fp-blue); background: #f4f9fd; transform: translateX(2px); } 
.nav-icon { 
    display: grid; 
    place-items: center; 
    width: 28px; 
    height: 28px; 
    border-radius: 9px; 
    color: var(--fp-blue); 
    background: #eef6fc; 
    font-size: 14px; 
    font-weight: 850; 
} 
.nav-item.active .nav-icon { color: #fff; background: var(--fp-blue); } 
.nav-label { min-width: 0; } 
.nav-badge { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-width: 22px; 
    height: 22px; 
    padding: 0 7px; 
    border-radius: 999px; 
    color: #fff; 
    background: var(--fp-pink); 
    font-size: 10px; 
    font-weight: 850; 
} 
.nav-badge-beta { min-width: auto; background: linear-gradient(135deg, var(--fp-pink), #b100c9); } 
.nav-item-featured { background: #fff7fb; } 
 
.dashboard-hero { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    gap: 24px; 
    margin-bottom: 20px; 
    padding: 24px 26px; 
    overflow: hidden; 
    border: 1px solid #dbe7f1; 
    border-radius: 22px; 
    background: 
        radial-gradient(circle at 82% 18%, rgba(229, 0, 125, .18), transparent 26%), 
        linear-gradient(135deg, #ffffff 0%, #f2f8fd 62%, #fdf1f8 100%); 
    box-shadow: var(--fp-shadow); 
} 
.dashboard-hero h1 { margin: 5px 0 5px; color: var(--fp-navy); font-size: clamp(28px, 3vw, 40px); } 
.dashboard-hero p { margin: 0; color: var(--fp-muted); } 
.dashboard-hero-status { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; color: #0d7544; background: #e8f7ef; font-size: 12px; font-weight: 850; white-space: nowrap; } 
.status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #18a663; box-shadow: 0 0 0 4px rgba(24,166,99,.12); } 
 
.dashboard-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } 
.dashboard-kpi-card { 
    position: relative; 
    display: grid; 
    grid-template-columns: 48px minmax(0, 1fr) auto; 
    gap: 14px; 
    align-items: center; 
    min-height: 132px; 
    padding: 20px; 
    border: 1px solid var(--fp-line); 
    border-radius: 20px; 
    background: #fff; 
    box-shadow: var(--fp-shadow); 
    transition: transform .18s ease, box-shadow .18s ease; 
} 
.dashboard-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(7,55,111,.13); } 
.kpi-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; font-size: 19px; font-weight: 900; } 
.kpi-pink .kpi-icon { background: linear-gradient(135deg, #ff1493, #c600d9); } 
.kpi-green .kpi-icon { background: linear-gradient(135deg, #19b96b, #078f50); } 
.kpi-blue .kpi-icon { background: linear-gradient(135deg, #168de2, #0065bd); } 
.kpi-orange .kpi-icon { background: linear-gradient(135deg, #ff9e29, #f06b00); } 
.kpi-copy span, .kpi-copy small { display: block; color: var(--fp-muted); } 
.kpi-copy span { font-size: 13px; } 
.kpi-copy strong { display: block; margin: 7px 0 5px; color: var(--fp-navy); font-size: clamp(22px, 2vw, 29px); line-height: 1; overflow-wrap: anywhere; } 
.kpi-copy small { line-height: 1.35; } 
.kpi-arrow { color: var(--fp-blue); font-size: 18px; font-weight: 900; } 
 
.period-overview-card, .dashboard-panel { 
    margin-top: 16px; 
    padding: 22px; 
    border: 1px solid var(--fp-line); 
    border-radius: 20px; 
    background: #fff; 
    box-shadow: var(--fp-shadow); 
} 
.section-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; } 
.section-title-row h2 { margin: 4px 0 0; color: var(--fp-navy); } 
.section-title-row.compact h2 { font-size: 18px; } 
.period-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, .75fr)) minmax(240px, 1.3fr); gap: 16px; align-items: center; margin-top: 20px; } 
.period-metric { display: flex; align-items: center; gap: 11px; padding: 13px; border-radius: 15px; background: #f8fbfd; } 
.period-metric-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; color: var(--fp-blue); background: #eaf4fb; font-weight: 900; } 
.period-metric small, .period-metric strong { display: block; } 
.period-metric small { color: var(--fp-muted); } 
.period-metric strong { margin-top: 3px; color: var(--fp-navy); font-size: 18px; } 
.period-progress-wrap { padding: 13px 0; } 
.period-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--fp-muted); font-size: 12px; } 
.period-progress-label strong { color: var(--fp-blue); } 
.period-progress { height: 9px; overflow: hidden; border-radius: 999px; background: #e6edf4; } 
.period-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--fp-blue), #1599e5); } 
 
.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .72fr); gap: 16px; } 
.dashboard-panel { margin-top: 0; } 
.dashboard-panel-wide { grid-row: span 2; } 
.panel-tag { display: inline-flex; padding: 7px 10px; border-radius: 999px; color: var(--fp-blue); background: #eaf4fb; font-size: 10px; font-weight: 850; white-space: nowrap; } 
.panel-tag-pink { color: #9f0058; background: #ffe8f5; } 
.dashboard-empty-state { display: grid; place-items: center; min-height: 235px; margin-top: 16px; padding: 26px; border: 1px dashed #bfd0df; border-radius: 16px; text-align: center; background: #fbfdff; } 
.empty-state-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 12px; border-radius: 17px; color: #fff; background: linear-gradient(135deg, var(--fp-blue), var(--fp-pink)); font-size: 20px; font-weight: 900; } 
.dashboard-empty-state strong { color: var(--fp-navy); } 
.dashboard-empty-state p { max-width: 460px; margin: 7px 0 0; color: var(--fp-muted); } 
.quick-actions { display: grid; gap: 9px; margin-top: 16px; } 
.quick-action { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--fp-line); border-radius: 12px; color: var(--fp-navy); background: #f8fbfd; text-decoration: none; font-size: 12px; font-weight: 800; } 
.quick-action.primary { border-color: transparent; color: #fff; background: linear-gradient(90deg, var(--fp-blue), #087dce); } 
a.quick-action:hover { border-color: #9fc8e6; } 
.quick-action.disabled { color: #94a3b8; cursor: not-allowed; } 
.mail-preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } 
.mail-preview-stats > div { padding: 13px; border-radius: 13px; background: #f8fbfd; } 
.mail-preview-stats span, .mail-preview-stats strong, .mail-preview-stats small { display: block; } 
.mail-preview-stats span, .mail-preview-stats small { color: var(--fp-muted); } 
.mail-preview-stats strong { margin: 5px 0; color: var(--fp-navy); font-size: 23px; } 
.mail-preview-notice { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 12px; border-radius: 12px; color: #526277; background: #f1f5f9; font-size: 11px; } 
 
@media (max-width: 1220px) { 
    .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
    .period-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
} 
@media (max-width: 980px) { 
    .dashboard-lower-grid { grid-template-columns: 1fr; } 
    .dashboard-panel-wide { grid-row: auto; } 
} 
@media (max-width: 780px) { 
    .nav-section-label { display: none; } 
    .nav-item { display: flex; flex-direction: column; gap: 3px; min-width: 76px; min-height: 58px; padding: 5px 7px; font-size: 10px; } 
    .nav-icon { width: 26px; height: 26px; } 
    .nav-badge { position: absolute; margin: -2px 0 0 28px; height: 18px; min-width: 18px; padding: 0 5px; } 
    .nav-badge-beta { display: none; } 
    .dashboard-hero { display: grid; padding: 20px; } 
    .dashboard-hero-status { justify-self: start; } 
    .dashboard-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; } 
    .dashboard-kpi-card { grid-template-columns: 40px minmax(0, 1fr); min-height: 118px; padding: 15px; } 
    .kpi-icon { width: 40px; height: 40px; border-radius: 12px; } 
    .kpi-arrow { display: none; } 
    .period-metrics { grid-template-columns: 1fr; } 
} 
@media (max-width: 520px) { 
    .dashboard-kpi-grid { grid-template-columns: 1fr; } 
    .mail-preview-stats { grid-template-columns: 1fr; } 
    .section-title-row { display: grid; } 
}
/* ========================================================= 
   financePASSION V0.9 - Import Center Foundation 
   ========================================================= */ 
.import-center-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; } 
.importcenter-kpi { padding:18px; border:1px solid var(--fp-line); border-radius:18px; background:#fff; box-shadow:var(--fp-shadow); } 
.import-center-kpi span,.import-center-kpi strong,.import-center-kpi small { display:block; } 
.import-center-kpi span,.import-center-kpi small { color:var(--fp-muted); } 
.importcenter-kpi strong { margin:8px 0 5px; color:var(--fp-navy); font-size:29px; } 
.import-center-kpi.danger { border-top:4px solid var(--fp-pink); } 
.import-center-tabs { display:flex; gap:7px; margin-bottom:16px; padding:6px; border:1px solid var(--fp-line); border-radius:14px; background:#fff; width:max-content; } 
.import-center-tabs a { padding:9px 14px; border-radius:10px; color:var(--fp-muted); text-decoration:none; font-size:12px; font-weight:850; } 
.import-center-tabs a.active { color:#fff; background:var(--fp-blue); } 
.import-center-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,.65fr); gap:16px; align-items:start; } 
.import-center-stream,.import-center-runs { padding:21px; border:1px solid var(--fp-line); border-radius:20px; background:#fff; box-shadow:var(--fp-shadow); } 
.import-center-list,.run-list { display:grid; gap:11px; margin-top:16px; } 
.import-center-message { display:grid; grid-template-columns:7px minmax(0,1fr); gap:14px; padding:15px; border:1px solid var(--fp-line); border-radius:15px; background:#fbfdff; } 
.importmessage-state { min-height:86px; border-radius:999px; background:var(--fp-green); } 
.import-center-message.has-error .import-message-state { background:var(--fp-pink); } 
.import-message-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; } 
.import-message-heading h3 { margin:0 0 4px; color:var(--fp-navy); font-size:16px; } 
.import-message-heading span,.import-message-meta,.import-filenames { color:var(--fp-muted); font-size:11px; } 
.import-message-meta,.import-message-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; } 
.import-message-meta span,.import-message-tags span { padding:6px 8px; border-radius:999px; background:#eef4f8; font-size:10px; font-weight:800; } 
.import-filenames { margin:10px 0 0; overflow-wrap:anywhere; } 
.danger-text,.run-error { color:#a1144f !important; } 
.run-card { padding:14px; border:1px solid var(--fp-line); border-radius:14px; background:#f8fbfd; } 
.run-card>div:first-child { display:flex; justify-content:space-between; gap:10px; } 
.run-card small { display:block; margin-top:4px; color:var(--fp-muted); } 
.run-status { padding:5px 8px; border-radius:999px; background:#e5edf4; font-size:9px; font-weight:900; text-transform:uppercase; } 
.run-status.success { color:#087443; background:#e8f7ef; } 
.run-status.failed { color:#9f1239; background:#fff1f2; } 
.run-status.partial { color:#8a4b00; background:#fff7e8; } 
.run-card dl { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0 0; } 
.run-card dl div { display:flex; justify-content:space-between; padding:7px; border-radius:9px; background:#fff; } 
.run-card dt { color:var(--fp-muted); font-size:10px; }.run-card dd { margin:0; color:var(--fp-navy); font-weight:850; } 
.run-error { margin:10px 0 0; font-size:10px; overflow-wrap:anywhere; } 
.compact-empty { min-height:220px; }.mail-center-empty-note { color:var(--fp-muted); } 
@media(max-width:1120px){.import-center-kpis{grid-template-columns:repeat(2,1fr)}.import-center-layout{grid-template-columns:1fr}} 
@media(max-width:650px){.import-center-kpis{grid-template-columns:1fr 1fr}.import-center-tabs{display:grid;width:100%}.import-message-heading{display:grid}.import-center-stream,.import-center-runs{padding:15px}} 
@media(max-width:430px){.import-center-kpis{grid-template-columns:1fr}} 
 
/* financePASSION V0.9.1 - Importarchiv */ 
.archive-control-card { display:grid; grid-template-columns:minmax(0,1.4fr) auto; gap:20px; align-items:center; margin-bottom:16px; padding:22px; border:1px solid var(--fp-line); border-radius:20px; background:#fff; box-shadow:var(--fp-shadow); } 
.archive-control-card h2,.archive-list-card h2 { margin:4px 0 8px; color:var(--fp-navy); } 
.archive-control-card p:last-child { margin-bottom:0; color:var(--fp-muted); } 
.archive-preview-counts { display:grid; grid-template-columns:1fr 1fr; gap:10px; } 
.archive-preview-counts div { min-width:125px; padding:13px; border-radius:13px; background:#f8fbfd; } 
.archive-preview-counts span,.archive-preview-counts strong { display:block; }
.archive-preview-counts span { color:var(--fp-muted); font-size:11px; }
.archive-preview-counts strong { margin-top:4px; color:var(--fp-navy); font-size:23px; } 
.archive-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; }
.archive-actions form { margin:0; }
.archive-actions button:disabled { opacity:.45; cursor:not-allowed; } 
.archive-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } 
.archive-list-card { padding:20px; border:1px solid var(--fp-line); border-radius:20px; background:#fff; box-shadow:var(--fp-shadow); } 
.archive-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; padding:12px 0; border-bottom:1px solid var(--fp-line); }
.archive-row:last-child { border-bottom:0; }
.archive-row strong { color:var(--fp-navy); overflow-wrap:anywhere; }
.archive-row span { color:var(--fp-muted); font-size:11px; }
.archive-row small { grid-column:1/-1; color:var(--fp-muted); } 
@media(max-width:900px){.archive-control-card,.archive-grid{grid-template-columns:1fr}
.archive-actions{justify-content:stretch;display:grid}
.archive-actions button{width:100%}} 
@media(max-width:520px){.archive-preview-counts{grid-template-columns:1fr}
.archive-row{grid-template-columns:1fr}}
/* financePASSION V1.0 - Administratives Mail Center */ 
.mail-admin-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.mail-admin-kpis article{padding:18px;border:1px solid var(--fp-line);border-radius:18px;background:#fff;box-shadow:var(--fp-shadow)}
.mail-admin-kpis span,.mail-admin-kpis strong,.mail-admin-kpis small{display:block}
.mail-admin-kpis span,.mail-admin-kpis small{color:var(--fp-muted)}
.mail-admin-kpis strong{margin:8px 0 5px;color:var(--fp-navy);font-size:28px}
.mail-admin-kpis .danger{border-top:4px solid var(--fp-pink)}
.mail-date-value{font-size:15px!important;overflow-wrap:anywhere}
.mail-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mail-admin-card{display:grid;gap:15px;padding:22px;border:1px solid var(--fp-line);border-radius:20px;background:#fff;box-shadow:var(--fp-shadow)}
.mail-admin-card h2{margin:0;color:var(--fp-navy)}
.mail-admin-card label{display:grid;gap:7px;color:#334155;font-weight:750}
.mail-admin-card input,.mail-admin-card select{width:100%;padding:12px 13px;border:1px solid #cbd5e1;border-radius:11px;background:#fff;font:inherit}
.mail-admin-card label small{color:var(--fp-muted);font-weight:500}
.mail-admin-actions{grid-column:1/-1;display:flex;justify-content:flex-end;padding:16px;border:1px solid var(--fp-line);border-radius:18px;background:#fff}
.mail-status-box{display:grid;gap:5px;padding:14px;border-radius:13px;background:#f8fbfd}
.mail-status-box span,.mail-status-box small{color:var(--fp-muted)}
.mail-test-card{margin-top:16px}
.mail-test-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}@media(max-width:1000px){.mail-admin-kpis{grid-template-columns:1fr 1fr}
.mail-admin-grid{grid-template-columns:1fr}}@media(max-width:620px){.mail-admin-kpis{grid-template-columns:1fr}
.mail-test-form{grid-template-columns:1fr}
.mail-admin-actions .primary-button,.mail-test-form .secondary-button{width:100%}}
 
/* financePASSION V1.1 - Freigaben & Rechnungspruefung */ 
.dashboard-kpi-link{text-decoration:none}
.approval-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.approval-tabs{display:flex;gap:7px;width:max-content;margin-bottom:16px;padding:6px;border:1px solid var(--fp-line);border-radius:14px;background:#fff}
.approval-tabs a{padding:9px 14px;border-radius:10px;color:var(--fp-muted);text-decoration:none;font-size:12px;font-weight:850}
.approval-tabs a.active{color:#fff;background:var(--fp-blue)}
.approval-list{display:grid;gap:10px}
.approval-row{display:grid;grid-template-columns:42px 1.15fr 1.5fr 1fr .65fr auto 20px;gap:14px;align-items:center;padding:15px 17px;border:1px solid var(--fp-line);border-radius:16px;background:#fff;box-shadow:var(--fp-shadow);text-decoration:none;transition:transform .16s ease,border-color .16s ease}
.approval-row:hover{transform:translateY(-2px);border-color:#9fc8e6}
.approval-row small,.approval-row strong,.approval-row span{display:block}
.approval-row small,.approval-row span{color:var(--fp-muted)}
.approval-row strong{margin-top:4px;color:var(--fp-navy)}
.approval-icon,.invoice-mini-icon{display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--fp-pink),#b100c9);font-weight:900}
.approval-icon{width:42px;height:42px}.approval-arrow{color:var(--fp-blue)!important;font-size:18px;font-weight:900}
.approval-detail-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,.68fr);gap:16px;align-items:start}
.approval-pdf-card,.approval-side-card{border:1px solid var(--fp-line);border-radius:20px;background:#fff;box-shadow:var(--fp-shadow)}
.approval-pdf-card{min-height:780px;padding:10px}
.approval-pdf-card iframe{width:100%;height:760px;border:0;border-radius:13px;background:#eef2f7}
.approval-side-card{padding:20px}
.approval-data{display:grid;margin:12px 0 0}
.approval-data>div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--fp-line)}
.approval-data dt{color:var(--fp-muted)}
.approval-data dd{margin:0;color:var(--fp-navy);font-weight:800;text-align:right}
.approval-total dd{font-size:18px}
.approval-form{display:grid;gap:13px;margin-top:18px}
.approval-form label{display:grid;gap:7px;color:#334155;font-weight:800}
.approval-form select,.approval-form textarea{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:11px;background:#fff;font:inherit}
.approval-submit{width:100%}
.back-link{display:inline-flex;margin-bottom:12px;color:var(--fp-blue);text-decoration:none;font-weight:800}
.dashboard-invoice-list{display:grid;gap:8px;margin-top:15px}
.dashboard-invoice-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:11px;align-items:center;padding:10px 12px;border:1px solid var(--fp-line);border-radius:12px;background:#fbfdff;text-decoration:none}
.invoice-mini-icon{width:34px;height:34px}
.dashboard-invoice-row small{display:block;margin-top:3px;color:var(--fp-muted)} 
@media(max-width:1100px){.approval-row{grid-template-columns:42px 1fr 1fr auto}
.approval-row>div:nth-of-type(4),.approval-row>div:nth-of-type(5){grid-column:2}
.approval-detail-grid{grid-template-columns:1fr}
.approval-pdf-card{min-height:620px}
.approval-pdf-card iframe{height:600px}} 
@media(max-width:700px){.approval-kpis{grid-template-columns:1fr}
.approval-tabs{display:grid;width:100%}
.approval-row{grid-template-columns:38px minmax(0,1fr) auto}
.approval-row>div{grid-column:2}
.approval-row>.status-chip{grid-column:3;grid-row:1}
.approval-arrow{display:none}
.dashboard-invoice-row{grid-template-columns:34px minmax(0,1fr)}
.dashboard-invoice-row>.status-chip,.dashboard-invoice-row>strong{grid-column:2;justify-self:start}}
.approval-pdf-card { 
    overflow: auto; 
} 
.approval-pdf-preview { 
    display: block; 
    width: 100%; 
    height: auto; 
    border-radius: 13px; 
    background: #ffffff; 
} 
.approval-pdf-download { 
    display: inline-flex; 
    margin: 12px; 
}
/* financePASSION V1.2 - Abrechnungsperioden */ 
.period-create-card,.period-actions-card,.period-invoice-list{padding:20px;border:1px solid var(--fp-line);border-radius:20px;background:#fff;box-shadow:var(--fp-shadow)}
.period-create-form{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:12px;align-items:end;margin-top:15px}
.period-create-form label{display:grid;gap:6px;color:#334155;font-weight:800}
.period-create-form input{padding:11px;border:1px solid #cbd5e1;border-radius:11px;font:inherit}
.period-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.period-card{padding:20px;border:1px solid var(--fp-line);border-radius:20px;background:#fff;box-shadow:var(--fp-shadow);text-decoration:none}
.period-card h2{margin:3px 0;color:var(--fp-navy)}
.period-card p{color:var(--fp-muted)}
.period-card-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.period-card-metrics div{padding:11px;border-radius:12px;background:#f7fafc}
.period-card-metrics span,.period-card-metrics strong{display:block}
.period-card-metrics span{color:var(--fp-muted);font-size:10px}
.period-card-metrics strong{margin-top:4px;color:var(--fp-navy)}
.period-detail-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.period-detail-kpis article{padding:18px;border:1px solid var(--fp-line);border-radius:16px;background:#fff}
.period-detail-kpis span,.period-detail-kpis strong{display:block}
.period-detail-kpis span{color:var(--fp-muted)}
.period-detail-kpis strong{margin-top:8px;color:var(--fp-navy);font-size:23px}
.period-actions-card{display:flex;justify-content:flex-end;gap:10px;margin-bottom:16px}
.period-actions-card form{margin:0}
.period-invoice-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--fp-line);text-decoration:none}
.period-invoice-row:last-child{border-bottom:0}
.period-invoice-row strong{color:var(--fp-navy)}
.period-invoice-row small{display:block;margin-top:3px;color:var(--fp-muted)} 
@media(max-width:1100px){.period-create-form{grid-template-columns:1fr 1fr}
.period-detail-kpis{grid-template-columns:1fr 1fr}} 
@media(max-width:700px){.period-list-grid,.period-detail-kpis{grid-template-columns:1fr}
.period-create-form{grid-template-columns:1fr}
.period-actions-card{display:grid}
.period-invoice-row{grid-template-columns:1fr}
.period-invoice-row>*{justify-self:start}}
/* financePASSION V1.3 - Kreditkarten */ 
.card-import-card,.manual-match-card,.card-transaction-list{padding:20px;border:1px solid var(--fp-line);border-radius:20px;background:#fff;box-shadow:var(--fp-shadow)}
.card-import-form{display:grid;grid-template-columns:1.2fr 1.5fr auto;gap:12px;align-items:end}
.card-import-form label,.manual-match-card label{display:grid;gap:6px;font-weight:800}
.card-import-form select,.card-import-form input,.manual-match-card select{padding:11px;border:1px solid #cbd5e1;border-radius:11px;font:inherit}
.card-statement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.card-statement-card{padding:20px;border:1px solid var(--fp-line);border-radius:20px;background:#fff;box-shadow:var(--fp-shadow);text-decoration:none}
.card-statement-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.card-statement-metrics div{padding:10px;border-radius:12px;background:#f7fafc}
.card-statement-metrics span,.card-statement-metrics strong{display:block}
.card-match-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.card-match-kpis article{padding:18px;border:1px solid var(--fp-line);border-radius:16px;background:#fff}
.card-match-kpis span,.card-match-kpis strong{display:block}
.card-match-kpis strong{margin-top:8px;font-size:24px;color:var(--fp-navy)}
.card-transaction-row{display:grid;grid-template-columns:minmax(0,1.5fr) auto auto minmax(180px,.8fr);gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--fp-line)}
.card-transaction-row:last-child{border-bottom:0}
.card-transaction-row small{display:block;margin-top:3px;color:var(--fp-muted)}
.card-transaction-row.muted{opacity:.55}
.manual-match-card{margin-top:16px}
.manual-match-card form{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end} 
@media(max-width:900px){.card-import-form,.manual-match-card form{grid-template-columns:1fr}
.card-statement-grid,.card-match-kpis{grid-template-columns:1fr 1fr}
.card-transaction-row{grid-template-columns:1fr auto}} 
@media(max-width:600px){.card-statement-grid,.card-match-kpis{grid-template-columns:1fr}
.card-transaction-row{grid-template-columns:1fr}}
/* ========================================================= 
   financePASSION V1.4A - Dashboard & Nutzerauswertung 
   ========================================================= */ 
.dashboard-hero-v14 { position: relative; } 
.panel-subtitle { margin: 5px 0 0; color: var(--fp-muted); } 
.period-metrics-v14 { grid-template-columns: repeat(4, minmax(0, 1fr)); } 
.dashboard-insight-grid { 
    display: grid; 
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .72fr); 
    gap: 16px; 
    margin-top: 16px; 
} 
.dashboard-insight-grid .dashboard-panel { margin-top: 0; } 
.dashboard-user-usage-list { display: grid; gap: 10px; margin-top: 16px; } 
.dashboard-user-usage-row { 
    display: grid; 
    grid-template-columns: 44px minmax(0, 1fr) auto; 
    gap: 12px; 
    align-items: center; 
    padding: 12px; 
    border: 1px solid var(--fp-line); 
    border-radius: 14px; 
    background: #fbfdff; 
} 
.dashboard-user-avatar { 
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    object-fit: cover; 
    background: #eaf4fb; 
} 
.dashboard-user-initials { 
    display: grid; 
    place-items: center; 
    color: #fff; 
    background: linear-gradient(135deg, var(--fp-blue), var(--fp-pink)); 
    font-size: 12px; 
    font-weight: 850; 
} 
.dashboard-user-main { min-width: 0; } 
.dashboard-user-heading { display: flex; justify-content: space-between; gap: 12px; } 
.dashboard-user-heading strong { color: var(--fp-navy); } 
.dashboard-user-heading span, 
.dashboard-user-main small { color: var(--fp-muted); font-size: 11px; } 
.dashboard-user-bar { 
    height: 8px; 
    margin: 8px 0 6px; 
    overflow: hidden; 
    border-radius: 999px; 
    background: #e7eef5; 
} 
.dashboard-user-bar span { 
    display: block; 
    height: 100%; 
    min-width: 5px; 
    border-radius: inherit; 
    background: linear-gradient(90deg, var(--fp-blue), #1599e5); 
} 
.dashboard-user-usage-row:nth-child(2n) .dashboard-user-bar span { 
    background: linear-gradient(90deg, var(--fp-green), #37c478); 
} 
.dashboard-user-usage-row:nth-child(3n) .dashboard-user-bar span { 
    background: linear-gradient(90deg, var(--fp-orange), #ffc431); 
} 
.dashboard-user-amount { color: var(--fp-navy); white-space: nowrap; } 
.compact-empty-state { min-height: 175px; } 
.status-ring-wrap { 
    display: grid; 
    grid-template-columns: 170px 1fr; 
    gap: 20px; 
    align-items: center; 
    margin-top: 20px; 
} 
.status-ring { 
    display: grid; 
    place-items: center; 
    width: 160px; 
    height: 160px; 
    border-radius: 50%; 
    background: conic-gradient( 
        var(--fp-green) 0 45%, 
        var(--fp-orange) 45% 72%, 
        var(--fp-blue) 72% 100% 
    ); 
} 
.status-ring > div { 
    display: grid; 
    place-items: center; 
    width: 105px; 
    height: 105px; 
    border-radius: 50%; 
    background: #fff; 
    box-shadow: inset 0 0 0 1px var(--fp-line); 
} 
.status-ring strong, 
.status-ring span { display: block; } 
.status-ring strong { color: var(--fp-navy); font-size: 29px; } 
.status-ring span { color: var(--fp-muted); font-size: 10px; } 
.status-legend { display: grid; gap: 12px; } 
.status-legend > div { 
    display: grid; 
    grid-template-columns: 12px 32px minmax(0, 1fr); 
    gap: 8px; 
    align-items: center; 
} 
.status-legend strong { color: var(--fp-navy); } 
.status-legend small { color: var(--fp-muted); } 
.legend-dot { width: 10px; height: 10px; border-radius: 50%; } 
.legend-blue { background: var(--fp-blue); } 
.legend-orange { background: var(--fp-orange); } 
.legend-green { background: var(--fp-green); } 
.dashboard-lower-grid-v14 { margin-top: 16px; } 
@media (max-width: 1120px) { 
    .period-metrics-v14 { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
    .dashboard-insight-grid { grid-template-columns: 1fr; } 
} 
@media (max-width: 700px) { 
    .period-metrics-v14 { grid-template-columns: 1fr; } 
    .dashboard-user-usage-row { grid-template-columns: 40px minmax(0, 1fr); } 
    .dashboard-user-avatar { width: 40px; height: 40px; } 
    .dashboard-user-amount { grid-column: 2; justify-self: start; } 
    .dashboard-user-heading { display: grid; gap: 3px; } 
    .status-ring-wrap { grid-template-columns: 1fr; } 
    .status-ring { justify-self: center; } 
}
/* financePASSION V1.4A.1 - Zuordnung & Automatch */ 
.status-chip.warning{color:#8a4b00;background:#fff3d6} 
.approval-kpis a.kpi-card{text-decoration:none;transition:transform .16s ease,border-color .16s ease} 
.approval-kpis a.kpi-card:hover{transform:translateY(-2px);border-color:#9fc8e6} 
.approval-kpis a.kpi-card.accent{border-top:4px solid var(--fp-pink)} 
.card-transaction-row .status-chip{justify-self:start;text-align:center} 
@media(max-width:900px){.approval-tabs{width:100%;overflow-x:auto}.approval-tabs a{white-space:nowrap}}
/* financePASSION V1.4A.2 - Kostenentwicklung */ 
.dashboard-insight-grid-v142 { 
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(300px, .72fr); 
} 
.cost-development-panel { min-width: 0; } 
.cost-chart-legend { display: flex; gap: 12px; color: var(--fp-muted); font-size: 11px; } 
.cost-chart-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; } 
.cost-legend-cost::before { background: linear-gradient(180deg, var(--fp-pink), #9f20d1); } 
.cost-legend-kwh::before { background: var(--fp-blue); border-radius: 50% !important; } 
.cost-chart { 
    display: grid; 
    grid-template-columns: repeat(6, minmax(44px, 1fr)); 
    gap: 9px; 
    align-items: end; 
    min-height: 235px; 
    margin-top: 18px; 
    padding: 18px 8px 0; 
    border-bottom: 1px solid var(--fp-line); 
    background: repeating-linear-gradient(to top, transparent 0, transparent 43px, #edf2f7 44px); 
} 
.cost-chart-column { display: grid; gap: 5px; min-width: 0; text-align: center; } 
.cost-chart-plot { position: relative; height: 165px; display: flex; align-items: end; justify-content: center; } 
.cost-bar { width: min(30px, 72%); min-height: 2px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, var(--fp-pink), #9f20d1); box-shadow: 0 7px 16px rgba(229,0,125,.16); } 
.cost-kwh-point { position: absolute; left: 50%; z-index: 2; width: 10px; height: 10px; transform: translate(-50%, 50%); border: 3px solid #fff; border-radius: 50%; background: var(--fp-blue); box-shadow: 0 0 0 2px rgba(0,92,169,.18); } 
.cost-chart-column strong { overflow: hidden; color: var(--fp-navy); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; } 
.cost-chart-column small { color: var(--fp-muted); font-size: 9px; } 
@media (max-width: 1250px) { 
    .dashboard-insight-grid-v142 { grid-template-columns: 1fr 1fr; } 
    .status-overview-panel { grid-column: 1 / -1; } 
} 
@media (max-width: 850px) { 
    .dashboard-insight-grid-v142 { grid-template-columns: 1fr; } 
    .status-overview-panel { grid-column: auto; } 
    .cost-chart { overflow-x: auto; grid-template-columns: repeat(6, minmax(65px, 1fr)); } 
}
/* financePASSION V1.6 - Laufende Periode */ 
.running-period-panel{ 
  margin-top:16px; 
  border:1px solid #cfe2f2; 
  background:linear-gradient(135deg,#ffffff 0%,#f7fbff 68%,#eef8ff 100%); 
} 
.running-period-panel .section-title-row{align-items:flex-start} 
.running-period-note{margin:5px 0 0;color:var(--fp-muted)} 
.period-metrics-v16{margin-top:18px} 
.running-period-status-row{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:10px 18px; 
  align-items:center; 
  margin-top:14px; 
  padding:13px 15px; 
  border-radius:14px; 
  background:#eef6fc; 
  color:var(--fp-muted); 
  font-size:13px; 
} 
.running-period-status-row strong{color:var(--fp-navy)} 
.running-period-status-row a{ 
  margin-left:auto; 
  color:var(--fp-blue); 
  font-weight:850; 
  text-decoration:none; 
} 
.running-period-status-row a:hover{text-decoration:underline} 
@media(max-width:760px){ 
  .running-period-status-row{align-items:flex-start;flex-direction:column} 
  .running-period-status-row a{margin-left:0} 
}
/* financePASSION V1.7.2 - Mitbenutzerportal */ 
.member-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0} 
.member-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.7fr);gap:18px} 
.member-list{display:grid;gap:10px;margin-top:16px} 
.member-list-row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px;border:1px solid var(--fp-line);border-radius:14px;background:#f8fbfd} 
.member-list-row strong,.member-list-row small{display:block}.member-list-row small{margin-top:4px;color:var(--fp-muted)} 
.member-statement-focus{display:grid;gap:10px;margin-top:18px}.member-statement-focus>strong{color:var(--fp-navy);font-size:34px}.member-statement-focus>small{color:var(--fp-muted)} 
.member-statement-list{display:grid;gap:12px}.member-statement-row{display:grid;grid-template-columns:minmax(220px,1.4fr) .55fr .55fr auto auto;gap:18px;align-items:center;box-shadow:none}.member-statement-row h2{margin:4px 0}.member-statement-row div>span,.member-statement-row div>strong{display:block}.member-statement-row div>span{color:var(--fp-muted);font-size:11px;font-weight:800;text-transform:uppercase} 
.member-profile-card{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:start}.member-profile-image,.member-profile-initials{width:180px;height:180px;border-radius:24px}.member-profile-image{object-fit:cover}.member-profile-initials{display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--fp-blue),var(--fp-pink));font-size:54px;font-weight:850}.member-profile-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.member-profile-data div{padding:16px;border:1px solid var(--fp-line);border-radius:14px;background:#f8fafc}.member-profile-data span,.member-profile-data strong{display:block}.member-profile-data span{color:var(--fp-muted);font-size:11px;font-weight:800;text-transform:uppercase}.member-profile-data strong{margin-top:6px;color:var(--fp-navy)} 
@media(max-width:980px){.member-kpi-grid,.member-dashboard-grid{grid-template-columns:1fr}.member-statement-row{grid-template-columns:1fr 1fr}.member-statement-row>div:first-child{grid-column:1/-1}.member-profile-card{grid-template-columns:1fr}} 
@media(max-width:700px){.member-profile-data,.member-statement-row{grid-template-columns:1fr}.member-profile-image,.member-profile-initials{width:132px;height:132px}.member-list-row{align-items:flex-start}} 

/* V1.7.2 Korrektur - Member-KPI ohne reservierte Iconspalte */ 
.member-kpi-grid .dashboard-kpi-card { 
    display: block; 
    min-width: 0; 
    min-height: 132px; 
    padding: 20px; 
} 
.member-kpi-grid .dashboard-kpi-card .kpi-copy { 
    width: 100%; 
    min-width: 0; 
} 
.member-kpi-grid .dashboard-kpi-card .kpi-copy strong { 
    white-space: nowrap; 
    overflow-wrap: normal; 
    word-break: normal; 
}
/* ========================================================= 
   V1.7.3 FINAL - Mein Profil bearbeiten 
   ========================================================= */ 
.profile-layout { 
  display: grid; 
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.7fr); 
  gap: 1.25rem; 
  align-items: start; 
} 
.profile-main-column { 
  display: grid; 
  gap: 1.25rem; 
} 
.profile-card { 
  padding: 1.5rem; 
} 
.profile-summary-card { 
  position: sticky; 
  top: 1rem; 
} 
.profile-image-preview { 
  display: flex; 
  justify-content: center; 
  margin-bottom: 1rem; 
} 
.profile-image-preview .member-profile-image, 
.profile-image-preview .member-profile-initials { 
  width: 128px; 
  height: 128px; 
  border-radius: 50%; 
} 
.profile-image-preview .member-profile-image { 
  display: block; 
  object-fit: cover; 
  border: 4px solid rgba(11, 107, 114, 0.14); 
  box-shadow: 0 12px 30px rgba(16, 33, 59, 0.14); 
} 
.profile-image-preview .member-profile-initials { 
  display: grid; 
  place-items: center; 
  background: linear-gradient(135deg, #10213b, #0b6b72); 
  color: #ffffff; 
  font-size: 2.25rem; 
  font-weight: 800; 
  letter-spacing: 0.04em; 
} 
.profile-summary-text { 
  text-align: center; 
  margin-bottom: 1.25rem; 
} 
.profile-summary-text h2, 
.profile-section-heading h2 { 
  margin: 0.2rem 0 0; 
} 
.profile-summary-text p:last-child { 
  margin-bottom: 0; 
  color: var(--text-muted, #64748b); 
  overflow-wrap: anywhere; 
} 
.profile-locked-data { 
  display: grid; 
  gap: 0.75rem; 
  margin: 0 0 1rem; 
} 
.profile-locked-data > div { 
  display: flex; 
  justify-content: space-between; 
  gap: 1rem; 
  padding-bottom: 0.75rem; 
  border-bottom: 1px solid rgba(100, 116, 139, 0.18); 
} 
.profile-locked-data dt { 
  color: var(--text-muted, #64748b); 
} 
.profile-locked-data dd { 
  margin: 0; 
  text-align: right; 
  font-weight: 700; 
} 
.profile-section-heading { 
  display: flex; 
  justify-content: space-between; 
  gap: 1rem; 
  margin-bottom: 1.25rem; 
} 
.profile-form { 
  display: grid; 
  gap: 1rem; 
} 
.form-grid { 
  display: grid; 
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  gap: 1rem; 
} 
.form-field { 
  display: grid; 
  gap: 0.45rem; 
  min-width: 0; 
} 
.form-field-full { 
  grid-column: 1 / -1; 
} 
.form-field > span { 
  font-weight: 700; 
  color: var(--text-strong, #10213b); 
} 
.form-field input[type="email"], 
.form-field input[type="tel"], 
.form-field input[type="date"], 
.form-field input[type="password"], 
.form-field input[type="file"] { 
  width: 100%; 
  min-height: 44px; 
  box-sizing: border-box; 
} 
.form-field small, 
.profile-hint { 
  color: var(--text-muted, #64748b); 
  line-height: 1.5; 
} 
.profile-checkbox { 
  display: flex; 
  align-items: flex-start; 
  gap: 0.65rem; 
  padding: 0.85rem 1rem; 
  border-radius: 12px; 
  background: rgba(100, 116, 139, 0.08); 
} 
.profile-checkbox input { 
  margin-top: 0.2rem; 
} 
.profile-actions { 
  display: flex; 
  justify-content: flex-end; 
  padding-top: 0.25rem; 
} 
.alert { 
  margin-bottom: 1rem; 
  padding: 0.9rem 1rem; 
  border-radius: 12px; 
  font-weight: 700; 
} 
.alert-success { 
  color: #155d3b; 
  background: #e8f5ee; 
  border: 1px solid #b8dec9; 
} 
.alert-error { 
  color: #8a1f2d; 
  background: #fff0f2; 
  border: 1px solid #f0bcc4; 
} 
@media (max-width: 900px) { 
  .profile-layout { 
    grid-template-columns: 1fr; 
  } 
 
  .profile-summary-card { 
    position: static; 
  } 
} 
 
@media (max-width: 640px) { 
  .profile-card { 
    padding: 1rem; 
  } 
 
  .form-grid { 
    grid-template-columns: 1fr; 
  } 
 
  .form-field-full { 
    grid-column: auto; 
  } 
 
  .profile-actions { 
    justify-content: stretch; 
  } 
 
  .profile-actions .button { 
    width: 100%; 
  } 
 
  .profile-locked-data > div { 
    align-items: flex-start; 
    flex-direction: column; 
    gap: 0.2rem; 
  } 
 
  .profile-locked-data dd { 
    text-align: left; 
  } 
}
/* ========================================================== 
   financePASSION V1.7.4 - Originale IONITY-Rechnung 
   ========================================================== */ 
.member-charge-row { 
    cursor: pointer; 
    transition: 
        background-color 160ms ease, 
        box-shadow 160ms ease; 
} 
 
.member-charge-row:hover, 
.member-charge-row:focus-visible { 
    background: rgba(7, 104, 184, 0.055); 
    box-shadow: inset 4px 0 0 #0768b8; 
    outline: none; 
} 
 
.charge-invoice-link { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-width: 58px; 
    min-height: 38px; 
    padding: 0 14px; 
    border: 1px solid rgba(7, 104, 184, 0.30); 
    border-radius: 12px; 
    background: #ffffff; 
    color: #082f6b; 
    font-weight: 900; 
    text-decoration: none; 
    transition: 
        color 160ms ease, 
        background-color 160ms ease, 
        border-color 160ms ease, 
        transform 160ms ease; 
} 
 
.charge-invoice-link:hover, 
.charge-invoice-link:focus-visible { 
    border-color: #0768b8; 
    background: #0768b8; 
    color: #ffffff; 
    outline: none; 
    transform: translateY(-1px); 
} 
 
@media (max-width: 760px) { 
    .member-charge-table .charge-invoice-link { 
        width: 100%; 
        margin-top: 4px; 
    } 
}
/* ========================================================== 
   financePASSION V1.8 - PWA und iPhone-Ansicht 
   ========================================================== */ 
html { 
    background: var(--fp-bg); 
    -webkit-text-size-adjust: 100%; 
} 
body { 
    min-height: 100dvh; 
    overscroll-behavior-y: none; 
    -webkit-tap-highlight-color: transparent; 
} 
button, a, input, select, textarea { 
    touch-action: manipulation; 
} 
@media (display-mode: standalone) { 
    body { user-select: none; } 
    input, textarea { user-select: text; } 
} 
@media (max-width: 780px) { 
    .app-shell { 
        min-height: 100dvh; 
        padding-bottom: calc(82px + env(safe-area-inset-bottom)); 
    } 
    .sidebar { 
        padding: 
            8px 
            max(10px, env(safe-area-inset-right)) 
            calc(8px + env(safe-area-inset-bottom)) 
            max(10px, env(safe-area-inset-left)); 
        background: rgba(255, 255, 255, .96); 
        backdrop-filter: blur(18px); 
        -webkit-backdrop-filter: blur(18px); 
        box-shadow: 0 -10px 30px rgba(7, 55, 111, .10); 
    } 
    .mobile-app-navigation { 
        justify-content: space-between; 
        gap: 4px; 
        scrollbar-width: none; 
    } 
    .mobile-app-navigation::-webkit-scrollbar { display: none; } 
    .mobile-app-navigation .nav-item { 
        flex: 1 1 25%; 
        min-width: 68px; 
        min-height: 58px; 
        border-radius: 14px; 
    } 
    .mobile-app-navigation .nav-item.active { 
        color: var(--fp-blue); 
        background: #eaf4fb; 
    } 
    .main-content { 
        padding: 
            calc(18px + env(safe-area-inset-top)) 
            max(14px, env(safe-area-inset-right)) 
            22px 
            max(14px, env(safe-area-inset-left)); 
    } 
    .dashboard-hero { 
        margin-bottom: 14px; 
        padding: 18px; 
        border-radius: 18px; 
    } 
    .dashboard-hero h1 { font-size: 27px; } 
    .member-kpi-grid { gap: 10px; margin: 14px 0; } 
    .member-kpi-grid .dashboard-kpi-card { 
        min-height: 0; 
        padding: 17px; 
        border-radius: 17px; 
    } 
    .member-dashboard-grid { gap: 12px; } 
    .dashboard-panel { padding: 17px; border-radius: 17px; } 
    .member-list-row { min-height: 62px; } 
    .primary-button, .secondary-button, .button-link { 
        min-height: 46px; 
    } 
} 
@media (max-width: 520px) { 
    .member-kpi-grid { grid-template-columns: 1fr; } 
    .dashboard-hero-status { display: none; } 
    .page-header h1 { font-size: 28px; } 
} 
.member-list-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.member-list-link:hover,
.member-list-link:focus-visible {
    border-color: #9fc8e6;
    background: #f2f8fd;
    outline: none;
}

/* ========================================================== 
   financePASSION V1.9 - Benutzer-Selbstzuordnung 
   ========================================================== */ 
.self-assignment-section { 
    margin-bottom: 20px; 
    padding: 22px; 
    border: 1px solid #f0b8d7; 
    border-radius: 20px; 
    background: linear-gradient(135deg, #ffffff, #fff5fa); 
    box-shadow: var(--fp-shadow); 
} 
.self-assignment-section h2 { margin: 4px 0 5px; color: var(--fp-navy); } 
.self-assignment-section p { margin: 0; color: var(--fp-muted); } 
.self-assignment-grid { display: grid; gap: 12px; margin-top: 18px; } 
.self-assignment-card { 
    display: grid; 
    gap: 13px; 
    padding: 17px; 
    border: 1px solid var(--fp-line); 
    border-radius: 16px; 
    background: #ffffff; 
} 
.self-assignment-heading { 
    display: flex; 
    justify-content: space-between; 
    gap: 16px; 
    align-items: flex-start; 
} 
.self-assignment-heading strong, 
.self-assignment-heading span { display: block; } 
.self-assignment-heading strong { color: var(--fp-navy); } 
.self-assignment-heading span { margin-top: 4px; color: var(--fp-muted); } 
.self-assignment-metrics { display: flex; flex-wrap: wrap; gap: 8px; } 
.self-assignment-metrics span { 
    padding: 7px 10px; 
    border-radius: 999px; 
    color: var(--fp-blue); 
    background: #eaf4fb; 
    font-size: 11px; 
    font-weight: 800; 
} 
.self-assignment-actions { display: flex; justify-content: flex-end; gap: 10px; } 
.self-assignment-actions form { margin: 0; } 
@media (max-width: 620px) { 
    .self-assignment-section { padding: 16px; border-radius: 17px; } 
    .self-assignment-heading { display: grid; } 
    .self-assignment-actions { display: grid; grid-template-columns: 1fr; } 
    .self-assignment-actions .primary-button, 
    .self-assignment-actions .secondary-button { width: 100%; } 
}