.vd-tarjous {
--dark:   #0E2418;
  --brand:  #2C5F2D;
  --accent: #54A924;
  --lime:   #7ED321;
  --orange: #F2811D;
  --ink:    #1C2220;
  --muted:  #6B7A70;
  --line:   #E2E8DF;
  --panel:  #F3F6F2;
  --paper:  #F9FBF8;
  --white:  #FFFFFF;
  --red:    #C0392B;
  --gold:   #D4870A;
  --blue:   #1A6CB5;
}

/* ── App shell ── */

.vd-tarjous .topsearch {
flex: 1 !important; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 7px 13px; font-size: 13px; color: rgba(255,255,255,.4); pointer-events: none;
}

.vd-tarjous .topicons {
display: flex !important; gap: 8px;
}

.vd-tarjous .topico {
width: 34px; height: 34px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px; cursor: pointer; color: rgba(255,255,255,.7);
}

/* ── Views ── */

.vd-tarjous .view {
display: none !important; background: var(--white); border-radius: 0 0 14px 14px; overflow: hidden !important; box-shadow: 0 8px 32px rgba(14,36,24,.12);
}

.vd-tarjous .view.active {
display: block !important;
}

/* ── List header ── */

.vd-tarjous .list-hdr {
padding: 16px 20px; display: flex !important; align-items: center !important; justify-content: space-between !important; border-bottom: 1px solid var(--line);
}

.vd-tarjous .list-hdr-left .eyebrow {
font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}

.vd-tarjous .list-hdr-title {
font-family: Archivo,sans-serif; font-weight: 800; font-size: 20px; color: var(--dark); letter-spacing: -.3px;
}

/* ── Hero KPI-palkki ── */

.vd-tarjous .quotes-hero {
background: var(--dark); padding: 14px 20px;
}

.vd-tarjous .quotes-hero-kpis {
display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 1px; background: rgba(255,255,255,.08); border-radius: 10px; overflow: hidden !important; margin-top: 10px;
}

.vd-tarjous .qkpi {
background: rgba(255,255,255,.05); padding: 10px 14px; display: flex !important; flex-direction: column !important; gap: 3px;
}

.vd-tarjous .qkpi-lbl {
font-size: 9px; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em;
}

.vd-tarjous .qkpi-val {
font-family: 'Space Mono',monospace; font-size: 15px; font-weight: 700; color: #fff;
}

.vd-tarjous .qkpi-val.ok {
color: #9DE054;
}

.vd-tarjous .qkpi-val.warn {
color: #F4C26A;
}

.vd-tarjous .qkpi-val.hi {
color: var(--orange);
}

/* ── Konversioputki ── */

.vd-tarjous .conv-pipe {
display: grid !important; grid-template-columns: repeat(5,1fr) !important; gap: 1px; background: rgba(255,255,255,.06);
}

.vd-tarjous .conv-step {
background: rgba(255,255,255,.04); padding: 8px 10px 0; text-align: center; cursor: pointer; border-top: 3px solid transparent; transition: background .12s, border-top-color .15s;
}

.vd-tarjous .conv-step:hover {
background: rgba(255,255,255,.08);
}

.vd-tarjous .conv-step.on {
background: rgba(84,169,36,.12); border-top-color: var(--accent);
}

.vd-tarjous .conv-num {
font-size: 8.5px; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .07em;
}

.vd-tarjous .conv-name {
font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.65); margin-top: 1px; white-space: nowrap !important;
}

.vd-tarjous .conv-step.on .conv-name {
color: #fff;
}

.vd-tarjous .conv-count {
font-family: 'Space Mono',monospace; font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px;
}

.vd-tarjous .conv-step.on .conv-count {
color: var(--accent);
}

.vd-tarjous .conv-bar {
height: 3px; background: rgba(255,255,255,.08); margin-top: 8px; overflow: hidden !important;
}

.vd-tarjous .conv-bar-fill {
height: 100%; background: var(--accent);
}

/* ── Suodattimet ── */

.vd-tarjous .filters {
display: flex !important; gap: 5px; padding: 10px 20px; background: var(--paper); border-bottom: 1px solid var(--line); overflow-x: auto !important; -webkit-overflow-scrolling: touch;
}

.vd-tarjous .fchip {
padding: 5px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap !important; transition: all .12s; flex-shrink: 0 !important;
}

.vd-tarjous .fchip.on {
border-color: var(--brand); background: rgba(44,95,45,.07); color: var(--brand);
}

.vd-tarjous .fchip:hover {
border-color: var(--brand); color: var(--brand);
}

/* ── Tarjousrivi (Design D -tyyli) ── */

.vd-tarjous .q-list {
display: flex !important; flex-direction: column !important; gap: 10px; padding: 14px; background: var(--panel);
}

.vd-tarjous .q-row {
display: flex !important; background: #fff; border-radius: 13px; border: 1px solid var(--line); overflow: hidden !important; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .15s, border-color .15s; box-shadow: 0 1px 4px rgba(14,36,24,.06);
}

.vd-tarjous .q-row:hover {
box-shadow: 0 4px 20px rgba(14,36,24,.13); border-color: #c8d4c5;
}

.vd-tarjous .q-stripe {
width: 4px; flex-shrink: 0 !important;
}

.vd-tarjous .q-body {
flex: 1 !important; min-width: 0 !important;
}

/* Yläosa */

.vd-tarjous .q-top {
padding: 11px 14px 7px; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px;
}

.vd-tarjous .q-top-left {
min-width: 0 !important; flex: 1 !important;
}

.vd-tarjous .q-nro {
font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px;
}

.vd-tarjous .q-asiakas {
font-family: Archivo,sans-serif; font-weight: 700; font-size: 14.5px; color: var(--dark); line-height: 1.3;
}

.vd-tarjous .q-kohde {
font-size: 12px; color: var(--muted); margin-top: 2px;
}

.vd-tarjous .q-badge {
font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 6px; white-space: nowrap !important; flex-shrink: 0 !important; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; align-self: flex-start;
}

/* Summaviiva (tumma palkki kuten projektissa) */

.vd-tarjous .q-finance {
background: #0A1C10; padding: 8px 14px; display: flex !important; align-items: center !important; gap: 0;
}

.vd-tarjous .q-fin-col {
display: flex !important; flex-direction: column !important; gap: 1px; padding-right: 12px; flex-shrink: 0 !important;
}

.vd-tarjous .q-fin-sep {
width: 1px; height: 26px; background: rgba(255,255,255,.1); margin-right: 12px; flex-shrink: 0 !important;
}

.vd-tarjous .q-fin-lbl {
font-size: 9px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .06em; text-transform: uppercase;
}

.vd-tarjous .q-fin-val {
font-family: 'Space Mono',monospace; font-size: 13px; font-weight: 700; color: #fff;
}

.vd-tarjous .q-fin-val.ok {
color: #9DE054;
}

.vd-tarjous .q-fin-val.warn {
color: #F4C26A;
}

/* Voittoprosentti-palkki */

.vd-tarjous .q-winwrap {
flex: 1 !important; min-width: 70px !important; display: flex !important; flex-direction: column !important; gap: 4px;
}

.vd-tarjous .q-win-header {
display: flex !important; justify-content: space-between !important; align-items: center !important;
}

.vd-tarjous .q-win-lbl {
font-size: 9px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .06em; text-transform: uppercase;
}

.vd-tarjous .q-win-val {
font-family: 'Space Mono',monospace; font-size: 11.5px; font-weight: 700;
}

.vd-tarjous .q-win-track {
height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden !important;
}

.vd-tarjous .q-win-fill {
height: 100%; border-radius: 3px;
}

/* Voimassaolo-rivi */

.vd-tarjous .q-validity {
padding: 7px 14px 10px; display: flex !important; align-items: center !important; gap: 9px; background: #fff;
}

.vd-tarjous .q-val-lbl {
font-size: 11px; color: var(--muted); white-space: nowrap !important; flex-shrink: 0 !important;
}

.vd-tarjous .q-val-track {
flex: 1 !important; height: 4px; background: var(--line); border-radius: 2px; overflow: visible !important; position: relative;
}

.vd-tarjous .q-val-fill {
height: 100%; border-radius: 2px;
}

.vd-tarjous .q-val-now {
position: absolute; top: -3px; width: 2px; height: 10px; background: var(--orange); border-radius: 1px;
}

.vd-tarjous .q-val-pct {
font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap !important; flex-shrink: 0 !important; font-family: 'Space Mono',monospace;
}

/* ── Tarjous detalji ── */

.vd-tarjous .detail-hero {
background: var(--dark); padding: 16px 20px 0;
}

.vd-tarjous .dh-toprow {
display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px; margin-bottom: 12px;
}

.vd-tarjous .dh-back {
font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.5); cursor: pointer; display: flex !important; align-items: center !important; gap: 5px; padding: 5px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(255,255,255,.05); transition: background .12s; white-space: nowrap !important; flex-shrink: 0 !important;
}

.vd-tarjous .dh-back:hover {
background: rgba(255,255,255,.1);
}

.vd-tarjous .dh-meta {
flex: 1 !important; min-width: 0 !important;
}

.vd-tarjous .dh-nro {
font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px;
}

.vd-tarjous .dh-asiakas {
font-family: Archivo,sans-serif; font-weight: 900; font-size: 19px; color: #fff; line-height: 1.2; letter-spacing: -.3px;
}

.vd-tarjous .dh-kohde {
font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px;
}

.vd-tarjous .dh-badge {
padding: 4px 13px; border-radius: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0 !important; align-self: flex-start;
}

/* Hero KPI-neliöt */

.vd-tarjous .dh-kpis {
display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 1px; background: rgba(255,255,255,.06); border-radius: 10px 10px 0 0; overflow: hidden !important; margin-top: 4px;
}

.vd-tarjous .dhkpi {
background: rgba(255,255,255,.05); padding: 10px 14px; display: flex !important; flex-direction: column !important; gap: 3px; transition: background .12s;
}

.vd-tarjous .dhkpi:hover {
background: rgba(255,255,255,.09);
}

.vd-tarjous .dhkpi-lbl {
font-size: 9px; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em;
}

.vd-tarjous .dhkpi-val {
font-family: 'Space Mono',monospace; font-size: 15px; font-weight: 700; color: #fff;
}

.vd-tarjous .dhkpi-val.ok {
color: #9DE054;
}

.vd-tarjous .dhkpi-val.warn {
color: #F4C26A;
}

.vd-tarjous .dhkpi-sub {
font-size: 10px; color: rgba(255,255,255,.3);
}

/* Hero metrit — kate-ennuste + voimassaolo */

.vd-tarjous .dh-meters {
display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px; padding: 12px 0 0;
}

.vd-tarjous .dh-meter {
display: flex !important; flex-direction: column !important; gap: 5px;
}

.vd-tarjous .dh-m-header {
display: flex !important; justify-content: space-between !important; align-items: center !important;
}

.vd-tarjous .dh-m-lbl {
font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em;
}

.vd-tarjous .dh-m-big {
font-family: 'Space Mono',monospace; font-size: 18px; font-weight: 700;
}

.vd-tarjous .dh-m-unit {
font-size: 11px; color: rgba(255,255,255,.4);
}

.vd-tarjous .dh-m-track {
height: 7px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden !important; position: relative;
}

.vd-tarjous .dh-m-fill-kate {
height: 100%; border-radius: 4px;
}

.vd-tarjous .dh-m-fill-valid {
height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.6));
}

.vd-tarjous .dh-m-marker {
position: absolute; top: -2px; width: 3px; height: 11px; background: var(--orange); border-radius: 2px;
}

.vd-tarjous .dh-m-sub {
font-size: 10px; color: rgba(255,255,255,.3);
}

/* Tarjouksen vaihe-navigaatio */

.vd-tarjous .q-steps {
display: flex !important; background: #0A1C10; overflow-x: auto !important; scrollbar-width: none;
}

.vd-tarjous .q-steps::-webkit-scrollbar {
display: none !important;
}

.vd-tarjous .q-step {
flex: 1 !important; min-width: 80px !important; padding: 9px 10px 0; cursor: pointer; border-top: 3px solid transparent; border-right: 1px solid rgba(255,255,255,.06); text-align: center; transition: background .12s, border-top-color .15s;
}

.vd-tarjous .q-step:last-child {
border-right: none;
}

.vd-tarjous .q-step:hover {
background: rgba(255,255,255,.06);
}

.vd-tarjous .q-step.on {
background: rgba(84,169,36,.12); border-top-color: var(--accent);
}

.vd-tarjous .q-step .s-num {
font-size: 8.5px; font-weight: 700; color: rgba(255,255,255,.3); letter-spacing: .07em; text-transform: uppercase;
}

.vd-tarjous .q-step .s-name {
font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.65); margin-top: 1px; white-space: nowrap !important;
}

.vd-tarjous .q-step.on .s-name {
color: #fff;
}

.vd-tarjous .q-step .s-sub {
font-family: 'Space Mono',monospace; font-size: 10.5px; color: rgba(255,255,255,.3); margin-top: 2px; white-space: nowrap !important;
}

.vd-tarjous .q-step.on .s-sub {
color: var(--accent);
}

.vd-tarjous .q-step .s-bar {
height: 3px; background: rgba(255,255,255,.08); margin-top: 8px; overflow: hidden !important;
}

.vd-tarjous .q-step .s-bar-fill {
height: 100%; background: var(--accent);
}

/* ── Sisältö ── */

.vd-tarjous .d-body {
background: var(--panel); padding: 16px; display: flex !important; flex-direction: column !important; gap: 12px;
}

.vd-tarjous .dsec {
display: none !important; flex-direction: column !important; gap: 12px;
}

.vd-tarjous .dsec.on {
display: flex !important;
}

/* Card */

.vd-tarjous .dc {
background: #fff; border-radius: 13px; border: 1px solid var(--line); overflow: hidden !important; box-shadow: 0 1px 4px rgba(14,36,24,.06);
}

.vd-tarjous .dc-head {
padding: 11px 16px; display: flex !important; align-items: center !important; justify-content: space-between !important; border-bottom: 1px solid var(--line); background: var(--paper);
}

.vd-tarjous .dc-title {
font-family: Archivo,sans-serif; font-weight: 800; font-size: 13px; color: var(--dark); display: flex !important; align-items: center !important; gap: 7px;
}

.vd-tarjous .dc-cnt {
font-size: 11px; font-weight: 600; color: var(--muted); background: var(--panel); padding: 1px 8px; border-radius: 99px;
}

.vd-tarjous .dc-add {
font-size: 12px; font-weight: 700; color: var(--brand); cursor: pointer; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-family: inherit;
}

.vd-tarjous .dc-add:hover {
background: var(--panel);
}

.vd-tarjous .dc-body {
padding: 12px 16px;
}

/* Kenttäruudukko */

.vd-tarjous .fgrid {
display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px;
}

.vd-tarjous .fld {
display: flex !important; flex-direction: column !important; gap: 3px; padding: 9px 11px; border-radius: 8px; border: 1px solid transparent; background: var(--panel); cursor: text; transition: border-color .12s, background .12s;
}

.vd-tarjous .fld:hover {
border-color: var(--accent); background: #fff;
}

.vd-tarjous .fld:focus-within {
border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(84,169,36,.1);
}

.vd-tarjous .fld-lbl {
font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
}

.vd-tarjous .fld-val {
font-size: 13.5px; color: var(--ink); font-weight: 500; outline: none; background: transparent; border: none; font-family: inherit; line-height: 1.4;
}

/* Tyyppikytkimet */

.vd-tarjous .type-tog {
display: flex !important; gap: 6px; background: #fff; padding: 5px; border-radius: 11px; border: 1px solid var(--line);
}

.vd-tarjous .type-btn {
flex: 1 !important; padding: 10px 12px; border-radius: 8px; border: 2px solid transparent; background: transparent; cursor: pointer; display: flex !important; align-items: center !important; gap: 9px; transition: all .14s; text-align: left; font: inherit;
}

.vd-tarjous .type-btn.on {
background: rgba(44,95,45,.07); border-color: var(--brand);
}

.vd-tarjous .type-btn .tb-ico {
font-size: 22px; flex-shrink: 0 !important;
}

.vd-tarjous .type-btn .tb-name {
font-size: 13px; font-weight: 700; color: var(--dark);
}

.vd-tarjous .type-btn .tb-sub {
font-size: 11px; color: var(--muted); margin-top: 1px;
}

.vd-tarjous .type-btn.on .tb-name {
color: var(--brand);
}

.vd-tarjous .tb-check {
width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: flex !important; align-items: center !important; justify-content: center !important; margin-left: auto; flex-shrink: 0 !important; transition: all .14s;
}

.vd-tarjous .type-btn.on .tb-check {
background: var(--brand); border-color: var(--brand);
}

.vd-tarjous .type-btn.on .tb-check::after {
content: '✓'; font-size: 10px; color: #fff; font-weight: 700;
}

/* Laskentarivi */

.vd-tarjous .calc-row {
display: flex !important; align-items: center !important; gap: 10px; padding: 10px 12px; background: var(--paper); border-radius: 8px; border: 1px solid var(--line); margin-bottom: 6px; cursor: pointer; transition: border-color .12s;
}

.vd-tarjous .calc-row:hover {
border-color: var(--accent); background: #fff;
}

.vd-tarjous .calc-idx {
width: 22px; height: 22px; border-radius: 7px; background: var(--panel); display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px; font-weight: 700; color: var(--muted); flex-shrink: 0 !important;
}

.vd-tarjous .calc-info {
flex: 1 !important; min-width: 0 !important;
}

.vd-tarjous .calc-name {
font-size: 13px; font-weight: 600; color: var(--ink);
}

.vd-tarjous .calc-sub {
font-size: 11px; color: var(--muted); margin-top: 1px;
}

.vd-tarjous .calc-amount {
font-family: 'Space Mono',monospace; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap !important;
}

.vd-tarjous .calc-arrow {
color: var(--line); font-size: 18px; flex-shrink: 0 !important;
}

/* Yhteenvetorivi laskennassa */

.vd-tarjous .calc-total {
display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 14px; background: var(--dark); border-radius: 10px; margin-top: 8px;
}

.vd-tarjous .ct-lbl {
display: flex !important; flex-direction: column !important;
}

.vd-tarjous .ct-name {
font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8);
}

.vd-tarjous .ct-sub {
font-size: 11px; color: rgba(255,255,255,.4); margin-top: 2px;
}

.vd-tarjous .ct-val {
font-family: 'Space Mono',monospace; font-size: 19px; font-weight: 700; color: var(--accent);
}

.vd-tarjous .ct-kate {
font-size: 12px; font-weight: 700; color: #F4C26A; margin-top: 2px; text-align: right;
}

/* Lähetyspaikka */

.vd-tarjous .send-row {
display: flex !important; align-items: center !important; gap: 12px; padding: 12px 14px; background: #fff; border-radius: 9px; border: 1px solid var(--line); margin-bottom: 6px; transition: border-color .12s;
}

.vd-tarjous .send-row:hover {
border-color: var(--accent);
}

.vd-tarjous .send-ico {
width: 36px; height: 36px; border-radius: 10px; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px; flex-shrink: 0 !important;
}

.vd-tarjous .send-info {
flex: 1 !important;
}

.vd-tarjous .send-name {
font-size: 13px; font-weight: 600; color: var(--ink);
}

.vd-tarjous .send-sub {
font-size: 11px; color: var(--muted); margin-top: 1px;
}

.vd-tarjous .send-status {
font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap !important;
}

.vd-tarjous .ss-ok {
background: #E3F5D5; color: #2D7A14;
}

.vd-tarjous .ss-wait {
background: #FFF4DE; color: #8A5900;
}

.vd-tarjous .ss-new {
background: #EEF3FF; color: #2A4AB5;
}

/* Aktiviteettiloki */

.vd-tarjous .log-item {
display: flex !important; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line);
}

.vd-tarjous .log-item:last-child {
border-bottom: none;
}

.vd-tarjous .log-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 !important; margin-top: 5px;
}

.vd-tarjous .log-text {
font-size: 13px; color: var(--ink); flex: 1 !important;
}

.vd-tarjous .log-time {
font-size: 11px; color: var(--muted); white-space: nowrap !important; flex-shrink: 0 !important;
}

/* Buttons */

.vd-tarjous .btn-p {
background: var(--brand); color: #fff; border: none; border-radius: 9px; padding: 9px 18px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .12s; white-space: nowrap !important;
}

.vd-tarjous .btn-p:hover {
background: #245026;
}

.vd-tarjous .btn-g {
background: var(--panel); color: var(--dark); border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s;
}

.vd-tarjous .btn-g:hover {
background: var(--line);
}

.vd-tarjous .btn-orange {
background: var(--orange); color: #fff; border: none; border-radius: 9px; padding: 9px 18px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}

@media (max-width: 600px) {
.vd-tarjous .dh-kpis, .vd-tarjous .quotes-hero-kpis {
grid-template-columns: repeat(2,1fr) !important;
}

.vd-tarjous .dh-meters {
grid-template-columns: 1fr !important;
}

.vd-tarjous .fgrid {
grid-template-columns: 1fr !important;
}

.vd-tarjous .q-fin-col:nth-child(5), .vd-tarjous .q-fin-sep:nth-child(6) {
display: none !important;
}

.vd-tarjous .conv-pipe, .vd-tarjous .q-steps {
grid-template-columns: repeat(3,1fr) !important;
}
}
/* ════════════════════════════════════════════════════════════
   VELO LIGHT OVERRIDE (era 10) — tarjousnäkymä vaaleaksi.
   Tumma hero + KPI:t -> vaalea pinta + ink; topbar-pillit vaaleiksi.
   ════════════════════════════════════════════════════════════ */
.ui-velo .vd-tarjous .quotes-hero{ background:#FFFFFF !important; border:1px solid #E3E6E9 !important; border-radius:14px !important; }
.ui-velo .vd-tarjous .quotes-hero-kpis{ background:#E3E6E9 !important; }
.ui-velo .vd-tarjous .qkpi{ background:#FFFFFF !important; }
.ui-velo .vd-tarjous .qkpi-lbl{ color:#727A82 !important; }
.ui-velo .vd-tarjous .qkpi-val{ color:#1B1F23 !important; }
.ui-velo .vd-tarjous .qkpi-val.pos,
.ui-velo .vd-tarjous .qkpi-val.ok{ color:#2E7D52 !important; }
/* Topbar-pillit vaaleiksi (näkyvät sekä vaalealla että tummalla) */
.ui-velo .vd-tarjous .topsearch{ background:#F4F5F6 !important; border:1px solid #E3E6E9 !important; color:#727A82 !important; }
.ui-velo .vd-tarjous .topico{ background:#ECEEF0 !important; border:1px solid #E3E6E9 !important; color:#2B3036 !important; }

/* ── era 17: Tarjoukset-yhteenvedon kontrastikorjaus — quotes-hero vaalennettiin, mutta sisateksti (konversiosuppilo) jai valkoiseksi -> valkoinen valkoisella. Flipataan inkiksi. ── */
.ui-velo .vd-tarjous .conv-pipe{ background:#E3E6E9 !important; }
.ui-velo .vd-tarjous .conv-step{ background:#F4F5F6 !important; }
.ui-velo .vd-tarjous .conv-step:hover{ background:#ECEEF0 !important; }
.ui-velo .vd-tarjous .conv-step.on{ background:rgba(46,125,82,.12) !important; border-top-color:#2E7D52 !important; }
.ui-velo .vd-tarjous .conv-num{ color:#727A82 !important; }
.ui-velo .vd-tarjous .conv-name{ color:#3A4248 !important; }
.ui-velo .vd-tarjous .conv-step.on .conv-name{ color:#1B1F23 !important; }
.ui-velo .vd-tarjous .conv-count{ color:#727A82 !important; }
.ui-velo .vd-tarjous .conv-step.on .conv-count{ color:#2E7D52 !important; }
.ui-velo .vd-tarjous .conv-bar{ background:#E3E6E9 !important; }
.ui-velo .vd-tarjous .qkpi-val.warn{ color:#B26B00 !important; }
.ui-velo .vd-tarjous .qkpi-val.hi{ color:#C77D2A !important; }
/* Varmistus: jos quotes-herossa on otsikko/eyebrow valkoisena -> ink */
.ui-velo .vd-tarjous .quotes-hero > .eyebrow,
.ui-velo .vd-tarjous .quotes-hero-title{ color:#1B1F23 !important; }

/* ══════════════════════════════════════════════════════════════════
   era 39: Tarjoukset-hero kayttaa rewo-qd-* luokkia, mutta ui-velo-overridet
   osoittivat vanhoihin (qkpi/conv/quotes-hero-title) -> tekstit jaivat tumman
   ui-v2-teeman vareilla (valkoinen/vaalea) valkoisella herolla. Kohdistetaan
   OIKEISIIN luokkiin -> sama vaalea tyyli kuin Projektit-hero.
   ══════════════════════════════════════════════════════════════════ */
.ui-velo .vd-tarjous .quotes-hero{ background:#FFFFFF !important; border:1px solid #E3E6E9 !important; }
.ui-velo .vd-tarjous .rewo-qd-eyebrow{ color:#727A82 !important; }
.ui-velo .vd-tarjous .rewo-qd-hero-title{ color:#1B1F23 !important; }
.ui-velo .vd-tarjous .rewo-qd-kpis{ background:#E3E6E9 !important; }
.ui-velo .vd-tarjous .rewo-qd-kpi{ background:#FFFFFF !important; }
.ui-velo .vd-tarjous .rewo-qd-kpi-lbl{ color:#727A82 !important; }
.ui-velo .vd-tarjous .rewo-qd-kpi-val{ color:#1B1F23 !important; }
.ui-velo .vd-tarjous .rewo-qd-ok{ color:#2E7D52 !important; }
.ui-velo .vd-tarjous .rewo-qd-warn{ color:#C77D2A !important; }
.ui-velo .vd-tarjous .rewo-qd-pipe{ background:#E3E6E9 !important; }
.ui-velo .vd-tarjous .rewo-qd-pipe-step{ background:#F4F5F6 !important; border-color:#E3E6E9 !important; }
.ui-velo .vd-tarjous .rewo-qd-pipe-step:hover{ background:#ECEEF0 !important; }
.ui-velo .vd-tarjous .rewo-qd-pipe-step--on{ background:rgba(46,125,82,.12) !important; border-top-color:#2E7D52 !important; }
.ui-velo .vd-tarjous .rewo-qd-pipe-num{ color:#1B1F23 !important; }
.ui-velo .vd-tarjous .rewo-qd-pipe-name{ color:#727A82 !important; }
.ui-velo .vd-tarjous .rewo-qd-pipe-step--on .rewo-qd-pipe-name{ color:#1B1F23 !important; }
/* Hero-topin nappien inline-valkoiset varit ylikirjoitetaan vaalealla herolla luettaviksi */
.ui-velo .vd-tarjous .rewo-qd-hero-top .rewo-btn-ghost{ background:#ECEEF0 !important; border:1px solid #E3E6E9 !important; color:#1B1F23 !important; }