:root { color-scheme: light; --navy:#071a3d; --ink:#12213f; --muted:#61708d; --blue:#4169e1; --blue-dark:#3157c8; --line:#d7dfec; --success:#15865f; --warning:#ad6a00; --danger:#bd444a; font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 91% 0%,rgba(105,141,234,.12),transparent 32%),linear-gradient(145deg,#f8f9fd 0%,#f1f4fa 100%); -webkit-font-smoothing:antialiased; }
button,select { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #87a9ff; outline-offset:3px; }
.hidden { display:none !important; }
.skip-link { position:fixed; z-index:50; top:-100px; left:1rem; padding:.8rem 1rem; border-radius:8px; color:white; background:var(--navy); }.skip-link:focus { top:1rem; }
.app-shell { width:min(1100px,100% - 3rem); margin-inline:auto; }
.demo-ribbon { background:#0c2752; color:#eaf1ff; }
.ribbon-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:43px; font-size:.75rem; font-weight:800; letter-spacing:.08em; }
.ribbon-inner > span { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }.ribbon-inner i { width:7px; height:7px; border-radius:50%; background:#a8e3b8; box-shadow:0 0 0 4px rgba(168,227,184,.13); }.ribbon-inner small { color:#9db5d8; font-size:.72rem; font-weight:500; letter-spacing:0; }.ribbon-inner a { color:white; font-size:.75rem; letter-spacing:0; }.ribbon-inner a:hover { text-decoration:underline; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2.3rem 0 2rem; }
.brand-block { display:flex; align-items:center; gap:1.1rem; min-width:0; }.brand-block img { width:60px; height:60px; border-radius:13px; object-fit:cover; box-shadow:0 9px 20px rgba(17,46,93,.09); }
.eyebrow { display:block; color:var(--blue-dark); font-size:.74rem; font-weight:800; letter-spacing:.14em; }.brand-block h1 { margin:.25rem 0 .2rem; color:var(--navy); font-size:1.77rem; line-height:1.17; letter-spacing:-.04em; }.brand-block p { margin:0; color:var(--muted); font-size:.92rem; }
.user-block { display:flex; align-items:center; gap:1.1rem; }.user-copy { display:grid; gap:.19rem; text-align:right; }.user-copy strong { color:var(--navy); font-size:.8rem; }.user-copy span { color:var(--muted); font-size:.72rem; }.text-button { border:0; padding:.45rem .2rem; color:#315bd0; background:none; font-size:.86rem; font-weight:800; white-space:nowrap; }.text-button:hover { color:#1c409f; text-decoration:underline; }
.workspace,.dashboard-view { display:grid; gap:1.15rem; padding-bottom:5rem; }
.panel { min-width:0; padding:1.3rem; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.96); box-shadow:0 18px 44px rgba(24,48,92,.06); }
.section-title { display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }.section-title h2 { margin:0; color:var(--navy); font-size:1.15rem; letter-spacing:-.025em; }.section-title-spread { justify-content:space-between; }.section-title-spread > div { display:flex; align-items:center; gap:.7rem; }
.step { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; color:white; background:var(--blue); font-size:.8rem; font-weight:800; }
.saved-companies { border:1px solid #dbe3f0; border-radius:12px; overflow:hidden; background:#fbfcff; }.saved-header { display:flex; align-items:center; gap:.5rem; padding:.8rem 1rem; border-bottom:1px solid #e4eaf4; color:#3a4f72; font-size:.86rem; }.count-badge { display:inline-grid; place-items:center; min-width:23px; min-height:23px; padding:0 5px; border-radius:50%; color:var(--blue-dark); background:#edf2ff; font-size:.7rem; font-weight:800; }
.saved-list { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; padding:.7rem; }.company-choice { display:grid; gap:.3rem; min-width:0; padding:.9rem 1rem; border:1px solid #dce4f1; border-radius:9px; color:var(--ink); background:white; text-align:left; }.company-choice:hover { border-color:#9fb9f4; }.company-choice[aria-pressed="true"] { border-color:#83a2f6; background:#f4f7ff; box-shadow:inset 0 0 0 1px rgba(65,105,225,.09); }.company-choice strong { color:var(--navy); font-size:.88rem; }.company-choice span { overflow:hidden; color:var(--muted); font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }.company-summary { margin:1rem 0 0; color:#687a96; font-size:.85rem; line-height:1.55; }
.section-help { margin:-.35rem 0 1.05rem; color:var(--muted); font-size:.84rem; }.certificates-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.certificate-card { position:relative; display:flex; flex-direction:column; min-width:0; min-height:162px; overflow:hidden; border:1px solid #cfd9ea; border-radius:14px; background:#fcfdff; transition:border-color .2s ease,background .2s ease; }.certificate-card:hover { border-color:#a7bff0; }.certificate-card.selected { border-color:#83a2f6; background:#f8faff; }
.certificate-select { display:flex; align-items:flex-start; gap:.7rem; flex:1; padding:1rem 3.1rem .75rem 1rem; cursor:pointer; }.certificate-select input { flex:0 0 auto; width:21px; height:21px; margin:0; accent-color:#4169e1; cursor:pointer; }.certificate-copy { display:grid; align-content:start; gap:.38rem; min-width:0; }.certificate-copy strong { color:var(--navy); font-size:.91rem; line-height:1.25; }.certificate-copy small { color:#586f93; font-size:.78rem; }.certificate-copy > span { color:#607598; font-size:.75rem; font-weight:600; line-height:1.35; }
.edit-glyph { position:absolute; top:.85rem; right:.85rem; display:grid; place-items:center; width:27px; height:27px; border:1px solid #d0dcf0; border-radius:8px; color:#4569b8; background:white; font-size:.9rem; }
.certificate-destination { display:flex; align-items:center; gap:.6rem; min-height:47px; margin:0 .9rem; padding:.6rem 0; border-top:1px solid #dde5f2; }.folder-glyph { color:#4e72d6; font-size:1.35rem; line-height:1; }.certificate-destination > span:nth-child(2) { display:grid; gap:.16rem; color:#617390; font-size:.68rem; }.certificate-destination strong { color:#2f4265; font-size:.76rem; }.certificate-destination button { margin-left:auto; min-height:28px; padding:0 .65rem; border:1px solid #c9d7f1; border-radius:8px; color:#3159c6; background:white; font-size:.72rem; font-weight:800; }.certificate-destination button:hover { border-color:#8fa9e8; background:#f3f7ff; }
.demo-hint { margin:1rem 0 0; color:#7c8da7; font-size:.75rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:45px; padding:.7rem 1rem; border:1px solid transparent; border-radius:10px; font-size:.85rem; font-weight:800; transition:transform .18s ease,background .18s ease; }.button:hover:not(:disabled) { transform:translateY(-1px); }.button:disabled { opacity:.6; cursor:wait; }.button-primary { color:white; background:linear-gradient(135deg,#4b71e7,#3e62da); box-shadow:0 9px 19px rgba(64,99,219,.18); }.button-primary:hover:not(:disabled) { background:#345acb; }.button-outline { border-color:#cbd6e8; color:#2f4166; background:white; }.button-small { min-height:38px; padding:.5rem .9rem; font-size:.78rem; }
.actions-row { position:sticky; bottom:.75rem; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.97); box-shadow:0 8px 24px rgba(30,54,100,.09); }.actions-row p { max-width:550px; margin:0; color:#70809a; font-size:.78rem; line-height:1.5; }.actions-row .button { flex:0 0 auto; }
.emission-queue { padding:1rem; border:1px solid #cbd8f1; border-radius:14px; background:linear-gradient(115deg,#f8faff,#f1f5ff); }.queue-heading { display:flex; align-items:center; gap:.7rem; color:#263e70; }.queue-heading > span:nth-child(2) { display:grid; gap:.22rem; flex:1; }.queue-heading strong { color:var(--navy); font-size:.86rem; }.queue-heading small { color:#52698c; font-size:.75rem; }.queue-heading b { font-size:.78rem; }.queue-indicator { width:13px; height:13px; border:3px solid #b7c8f2; border-top-color:var(--blue); border-radius:50%; }.emission-queue progress { display:block; width:100%; height:8px; margin:.85rem 0; border:0; border-radius:5px; accent-color:var(--blue); }.emission-queue p { margin:0; color:#546a90; font-size:.8rem; }
.dashboard-view > .button { justify-self:start; }.dashboard-intro h2 { margin:.38rem 0 .4rem; color:var(--navy); font-size:1.7rem; letter-spacing:-.03em; }.dashboard-intro p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.6; }
.dashboard-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }.dashboard-card { --accent:#4564e8; display:grid; align-content:start; gap:.55rem; min-width:0; min-height:118px; padding:1rem .9rem; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:14px; color:var(--navy); background:white; text-align:left; }.dashboard-card[data-filter="valid"] { --accent:#08855f; }.dashboard-card[data-filter="warning"] { --accent:#ad6a00; }.dashboard-card[data-filter="expired"] { --accent:#c33c4c; }.dashboard-card:hover,.dashboard-card[aria-pressed="true"] { border-color:var(--accent); background:#f8faff; }.dashboard-card span { font-size:.76rem; font-weight:800; }.dashboard-card strong { color:var(--accent); font-size:1.75rem; line-height:1; }.dashboard-card small { color:var(--muted); font-size:.68rem; line-height:1.45; }
.dashboard-columns { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:1rem; align-items:start; }.dashboard-list-panel,.dashboard-chart { min-width:0; border:1px solid var(--line); border-radius:17px; background:white; box-shadow:0 18px 44px rgba(24,48,92,.06); }.dashboard-list-heading { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:1.15rem; border-bottom:1px solid var(--line); }.dashboard-list-heading h3,.dashboard-chart h3 { margin:0 0 .3rem; color:var(--navy); font-size:.93rem; }.dashboard-list-heading p,.dashboard-chart > p { margin:0; color:var(--muted); font-size:.75rem; line-height:1.5; }.dashboard-list { display:grid; gap:.8rem; padding:.8rem; }
.dashboard-company { min-width:0; overflow:hidden; border:1px solid #d7e0ee; border-radius:12px; }.dashboard-company-header { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.9rem; background:#f7f9ff; }.dashboard-company-header h4 { margin:0 0 .3rem; color:var(--navy); font-size:.87rem; }.dashboard-company-header p { margin:0; color:var(--muted); font-size:.72rem; }.dashboard-company-header .button { min-height:31px; padding:.45rem .7rem; font-size:.7rem; }
.dashboard-certificate { padding:.85rem .9rem; border-top:1px solid #e5ebf4; }.dashboard-cert-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }.dashboard-cert-head > div { display:grid; gap:.18rem; min-width:0; }.dashboard-cert-head strong { color:var(--navy); font-size:.81rem; }.dashboard-cert-head small { color:var(--muted); font-size:.71rem; }.dashboard-status { flex:0 0 auto; padding:.3rem .5rem; border-radius:7px; font-size:.67rem; font-weight:800; white-space:nowrap; }.dashboard-status.valid { color:#197044; background:#eaf8f0; }.dashboard-status.warning { color:#8b6000; background:#fff3d6; }.dashboard-status.expired { color:#ad363d; background:#fff0f1; }.dashboard-dates { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.65rem 0 0; color:#65758f; font-size:.7rem; }.dashboard-dates b { color:#294064; font-weight:700; }
.dashboard-chart { padding:1.15rem; }.dashboard-bar { margin-top:1.25rem; }.dashboard-bar-label { display:flex; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; color:#526582; font-size:.72rem; }.dashboard-bar-label strong { color:var(--navy); }.bar-track { height:7px; overflow:hidden; border-radius:6px; background:#edf1f7; }.bar-track i { display:block; height:100%; border-radius:inherit; background:#08855f; }.dashboard-bar.warning i { background:#b67800; }.dashboard-bar.expired i { background:#c33c4c; }.chart-total { display:flex; justify-content:space-between; margin-top:1.3rem; padding-top:.9rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }.chart-total strong { color:var(--navy); }.dashboard-empty { padding:1.6rem; color:var(--muted); font-size:.84rem; text-align:center; }
@media (max-width:900px) { .topbar { align-items:flex-start; flex-wrap:wrap; }.user-block { margin-left:0; }.dashboard-columns { grid-template-columns:1fr; } }
@media (max-width:680px) { .app-shell { width:min(100% - 2rem,1100px); }.ribbon-inner { padding-block:.55rem; }.ribbon-inner small { display:none; }.topbar { padding:1.7rem 0; gap:1rem; }.brand-block img { width:46px; height:46px; }.brand-block h1 { font-size:1.4rem; }.brand-block p { font-size:.78rem; }.user-block { width:100%; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }.user-copy { text-align:left; margin-right:auto; }.panel { padding:1rem; }.saved-list,.certificates-grid { grid-template-columns:1fr; }.certificate-card { min-height:140px; }.dashboard-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.actions-row { align-items:stretch; flex-direction:column; }.actions-row .button { width:100%; }.dashboard-intro h2 { font-size:1.5rem; } }
@media (max-width:400px) { .brand-block { gap:.7rem; }.brand-block h1 { font-size:1.22rem; }.brand-block p { max-width:260px; }.user-copy { display:none; }.company-choice span { font-size:.68rem; }.dashboard-card { min-height:110px; padding:.8rem .65rem; }.dashboard-card small { font-size:.62rem; }.dashboard-certificate { padding:.75rem; }.dashboard-dates { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }