/* ==========================================================================
   GV Mediatech — the creator dashboard on /creator
   Phone first; min-width queries add the two-column desktop layout.
   Built on account.css (cards, fields, buttons) and showcase.css (the card).
   ========================================================================== */

.ap-wrap.db-wide{max-width:var(--wrap)}

/* ---- greeting ---- */
.db-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px;margin:0 0 18px}
.db-top .h2{margin:.1em 0}
.db-top-acts{display:flex;flex-wrap:wrap;gap:10px}
.db-top-acts .btn{min-height:44px}

/* ---- the tab rail: scrolls sideways on a phone, sticks under the header ---- */
.db-tabs-wrap{position:sticky;top:var(--db-top,64px);z-index:20;margin:0 -16px 20px;padding:8px 16px;
  background:rgba(251,248,242,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.db-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.db-tabs::-webkit-scrollbar{display:none}
.db-tab{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 16px;border-radius:99px;border:1.5px solid transparent;
  background:none;font:inherit;font-weight:700;font-size:.95rem;color:var(--muted);
  cursor:pointer;transition:background .2s ease,color .2s ease}
.db-tab:hover{color:var(--ink);background:rgba(16,35,26,.05)}
.db-tab.is-on{background:var(--forest);color:#fff}
.db-tab:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(12,144,108,.2)}
.db-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:99px;font-size:.74rem;background:var(--orange);color:#10231A}
.db-tab.is-on .db-count{background:var(--green-lt)}

.db-panel{animation:dbIn .35s ease both}
.db-panel:focus{outline:none}
@keyframes dbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- layout ---- */
.db-grid{display:grid;gap:20px}
.db-main,.db-side{min-width:0}
.db-side{display:grid;gap:14px;align-content:start}
.db-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 4px}
.db-card-head h3{font-size:1.12rem;font-weight:700;margin:0}
.db-inline-acts{display:flex;gap:8px;flex-wrap:wrap}
.db-hint-top{margin:-2px 0 12px}

@media (min-width:980px){
  .db-grid{grid-template-columns:minmax(0,1fr) 400px;align-items:start}
  .db-side--sticky{position:sticky;top:84px}
  .db-tabs-wrap{margin-left:0;margin-right:0;border-radius:99px;border:1px solid var(--line);
    top:calc(var(--db-top,64px) + 10px);padding:6px}
}

/* ---- KPI tiles ---- */
.db-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 20px}
@media (min-width:560px){.db-kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
.db-kpis:empty{display:none}
.db-kpi{position:relative;overflow:hidden;display:grid;gap:3px;align-content:start;
  text-align:left;padding:16px 16px 14px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);font:inherit;color:var(--ink);
  animation:dbIn .45s ease both;animation-delay:calc(var(--i,0) * 60ms)}
button.db-kpi{cursor:pointer;min-height:44px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
button.db-kpi:hover{transform:translateY(-2px);border-color:var(--green);
  box-shadow:0 12px 24px -18px rgba(6,43,26,.5)}
button.db-kpi:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.db-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.db-kpi.is-good::before{background:var(--green)}
.db-kpi.is-warn::before{background:var(--orange)}
.db-kpi.is-bad::before{background:var(--red)}
.db-kpi b{font-family:var(--display);font-weight:400;font-size:clamp(1.45rem,4.6vw,1.9rem);
  line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.db-kpi span{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.db-kpi small{font-size:.82rem;color:var(--muted)}
.db-kpis--inv{margin:0 0 16px}
.db-kpis--inv .db-kpi{background:var(--cream)}

/* ---- up next ---- */
.db-next{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.db-next-row{width:100%;display:flex;align-items:center;gap:12px;min-height:56px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--cream);
  font:inherit;text-align:left;color:var(--ink);cursor:pointer;
  animation:dbIn .4s ease both;animation-delay:calc(var(--i,0) * 50ms);
  transition:border-color .2s ease,transform .2s ease}
.db-next-row:hover{border-color:var(--green);transform:translateX(3px)}
.db-next-row:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.db-next-row span{flex:1;min-width:0;display:grid;gap:2px}
.db-next-row b{font-size:.96rem}
.db-next-row small{font-size:.84rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.db-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--green)}
.db-next-row.is-warn .db-dot{background:var(--orange)}
.db-next-row.is-bad .db-dot{background:var(--red);animation:dbPulse 1.6s ease-in-out infinite}
@keyframes dbPulse{50%{box-shadow:0 0 0 6px rgba(180,48,36,.16)}}
.db-arrow{flex:none;color:var(--muted);font-weight:700}
.db-next + .ad-empty{padding:18px 8px}

/* ---- invoices ---- */
.db-glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.db-glance div{padding:10px 12px;border-radius:12px;background:var(--cream);display:grid;gap:2px}
.db-glance b{font-size:1.05rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.db-glance span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.db-glance .is-warn b{color:#9A5A06}
.db-glance .is-bad b{color:var(--red)}
.db-glance .is-good b{color:var(--green-text)}

.db-inv{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.db-inv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;
  min-height:56px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);text-decoration:none;
  transition:border-color .2s ease,background .2s ease}
.db-inv-row:hover{border-color:var(--green);background:var(--cream)}
.db-inv-row:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.db-inv-who{display:grid;gap:2px;min-width:0}
.db-inv-who b{font-size:.96rem}
.db-inv-who span{font-size:.84rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-inv-amt{display:grid;justify-items:end;gap:1px;font-variant-numeric:tabular-nums}
.db-inv-amt b{font-size:.98rem}
.db-inv-amt small{font-size:.8rem;color:var(--muted)}
.db-inv-row .db-pill{grid-column:1 / -1;justify-self:start}
@media (min-width:640px){
  .db-inv-row{grid-template-columns:minmax(0,1fr) auto 130px}
  .db-inv-row .db-pill{grid-column:auto;justify-self:end}
}
.db-inv--mini .db-inv-row{background:var(--cream)}
.db-skel{padding:18px;border-radius:12px;color:var(--muted);
  background:linear-gradient(90deg,var(--cream) 25%,#F3EEE3 50%,var(--cream) 75%);
  background-size:200% 100%;animation:dbShimmer 1.4s linear infinite;list-style:none}
@keyframes dbShimmer{to{background-position:-200% 0}}

/* ---- pills, chips, filters ---- */
.db-pill{display:inline-flex;align-items:center;min-height:26px;padding:3px 11px;border-radius:99px;
  font-size:.76rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  background:#EEF1EF;color:var(--muted)}
.db-pill.is-good{background:#E3F4EC;color:#0A5B45}
.db-pill.is-warn{background:#FDF0DC;color:#8A5006}
.db-pill.is-bad{background:#FBE5E2;color:#8E241A}
.db-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.db-chip{min-height:44px;padding:0 16px;border-radius:99px;border:1.5px solid var(--line);
  background:var(--paper);font:inherit;font-weight:700;font-size:.9rem;color:var(--muted);cursor:pointer}
.db-chip:hover{border-color:var(--green);color:var(--ink)}
.db-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.db-chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---- share mini on the overview ---- */
.db-share-mini{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 16px;
  border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.db-share-mini p{margin:0;flex:1 1 180px;font-size:.9rem;color:var(--muted)}
.db-share-mini .linkish{min-height:44px}

/* ---- the profile card editor ---- */
.sh-socials{display:grid;gap:4px}
.sh-row{display:grid;grid-template-columns:36px minmax(0,1fr) 108px;gap:10px;align-items:end}
.sh-row .sc-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--brand,#333);color:#fff;margin-bottom:22px}
.sh-row .sc-ico b{font-weight:800}
.sh-row .ac-f{margin-bottom:12px}
.sh-row .ac-f > label{font-size:.78rem}
.sh-more{margin:4px 0 18px}
.sh-more summary{cursor:pointer;font-weight:700;color:var(--green-text);min-height:44px;
  display:flex;align-items:center}
.sh-more[open] summary{margin-bottom:8px}

.sh-themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 20px}
@media (min-width:560px){.sh-themes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sh-theme{position:relative;display:flex;align-items:flex-end;min-height:64px;padding:10px 12px;
  border-radius:14px;cursor:pointer;color:#fff;font-weight:700;font-size:.88rem;
  border:2px solid transparent;transition:transform .2s ease,border-color .2s ease}
.sh-theme input{position:absolute;opacity:0;pointer-events:none}
.sh-theme:hover{transform:translateY(-2px)}
.sh-theme:has(input:checked){border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,144,24,.25)}
.sh-theme:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.sh-theme--forest{background:linear-gradient(155deg,#062B1A,#0E4A30)}
.sh-theme--sunset{background:linear-gradient(155deg,#2B0B08,#7A2A12)}
.sh-theme--midnight{background:linear-gradient(155deg,#0A0F24,#23295A)}
.sh-theme--cream{background:linear-gradient(155deg,#FFFDF8,#F3ECDD);color:var(--ink);
  border-color:var(--line)}

/* ---- sharing ---- */
.db-switch{display:flex;align-items:center;gap:12px;min-height:44px;margin:10px 0 6px;
  cursor:pointer;font-weight:700}
.db-switch input{position:absolute;opacity:0;width:1px;height:1px}
.db-switch-ui{flex:none;position:relative;width:50px;height:30px;border-radius:99px;
  background:#C9D2CC;transition:background .2s ease}
.db-switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.db-switch input:checked + .db-switch-ui{background:var(--green)}
.db-switch input:checked + .db-switch-ui::after{transform:translateX(20px)}
.db-switch input:focus-visible + .db-switch-ui{box-shadow:0 0 0 3px rgba(12,144,108,.3)}
.db-switch input:disabled + .db-switch-ui{opacity:.5}
.db-link{display:flex;gap:8px;margin:12px 0 10px}
.db-link input{flex:1;min-width:0;padding:11px 13px;font:inherit;font-size:1rem;
  border:1.5px solid var(--line);border-radius:11px;background:var(--cream);color:var(--ink)}
.db-share-acts{margin:0 0 6px}
.db-share-acts .btn,.db-share-acts .linkish{min-height:44px;display:inline-flex;align-items:center}

.db-flash{animation:dbFlash 1.5s ease}
@keyframes dbFlash{0%,40%{box-shadow:0 0 0 4px rgba(240,144,24,.45)}100%{box-shadow:0 0 0 0 rgba(240,144,24,0)}}

@media (prefers-reduced-motion:reduce){
  .db-panel,.db-kpi,.db-next-row{animation:none}
  .db-next-row.is-bad .db-dot,.db-skel,.db-flash{animation:none}
  button.db-kpi,.db-next-row,.sh-theme{transition:none}
}


/* ---- availability picker ---- */
.sh-avail{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.sh-pick{position:relative;cursor:pointer}
.sh-pick input{position:absolute;opacity:0;pointer-events:none}
.sh-pick span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;
  border:1.5px solid var(--line);background:var(--paper);font-weight:700;font-size:.9rem;color:var(--muted)}
.sh-pick input:checked + span{background:var(--forest);border-color:var(--forest);color:#fff}
.sh-pick input:focus-visible + span{box-shadow:0 0 0 3px rgba(12,144,108,.3)}

/* ---- best work rows ---- */
.sh-work{display:grid;gap:0;margin:0 0 8px}
.sh-work-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px}
.sh-work-row .ac-f{margin-bottom:10px}
.sh-work-row .ac-f > label{font-size:.78rem}
@media (max-width:560px){.sh-work-row{grid-template-columns:1fr;gap:0;padding-bottom:6px;
  border-bottom:1px dashed var(--line);margin-bottom:10px}}

/* ---- QR ---- */
.db-qr{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:14px 0 8px;
  padding:14px;border-radius:14px;background:var(--cream)}
.db-qr-code{flex:none;width:120px;height:120px;border-radius:10px;overflow:hidden;background:#fff}
.db-qr-code svg{display:block;width:100%;height:100%}
.db-qr > div:last-child{flex:1 1 180px}
.db-qr-p{margin:0 0 10px;font-size:.88rem;color:var(--muted)}

/* ---- views chart: one series, bars from a shared baseline ---- */
.db-views{margin:4px 0 14px}
.db-views-chart{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;align-items:end;
  height:120px;padding:0 0 22px;border-bottom:1px solid var(--line);position:relative}
.db-vbar{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;
  outline:none;cursor:default}
.db-vbar i{display:block;width:min(70%,28px);height:var(--h);min-height:0;background:var(--green-lt);
  border-radius:4px 4px 0 0;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.db-vbar.is-now i{background:var(--green)}
.db-vbar span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:.7rem;color:var(--muted)}
.db-vbar:nth-child(even) span{visibility:hidden}
.db-vbar.is-now span{visibility:visible;font-weight:700;color:var(--ink)}
.db-vbar::after{content:attr(data-tip);position:absolute;bottom:calc(var(--h,0%) + 8px);left:50%;
  transform:translateX(-50%);padding:5px 9px;border-radius:8px;background:var(--ink);color:#fff;
  font-size:.74rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:2}
.db-vbar:first-child::after{left:0;transform:none}
.db-vbar:last-child::after{left:auto;right:0;transform:none}
.db-vbar:hover::after,.db-vbar:focus-visible::after{opacity:1}
.db-vbar:hover i,.db-vbar:focus-visible i{background:var(--green)}
.db-vbar:focus-visible i{box-shadow:0 0 0 3px rgba(12,144,108,.3)}
@media (prefers-reduced-motion:reduce){.db-vbar i{transition:none}}

/* ==========================================================================
   Clean and crisp (Sep 2026)
   A calmer greeting, one-step activation, and the Autopilot card.
   ========================================================================== */
.db-hello{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.02;margin:0 0 4px;color:var(--ink)}
.db-top .ac-you{margin:0;font-size:.9rem}
@media (max-width:639px){
  .db-top{gap:14px}
  .db-top-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
  .db-top-acts .btn{padding-left:8px;padding-right:8px;font-size:.84rem;white-space:normal;
    line-height:1.15;text-align:center;justify-content:center}
}

.db-activate{border-color:var(--orange);background:linear-gradient(135deg,#FFF7EA,#fff 60%)}
.db-activate h3{margin-bottom:4px}
.db-activate p{margin:0 0 12px}
.db-activate-row{display:flex;gap:8px;flex-wrap:wrap}
.db-activate-row input{flex:1 1 180px;min-height:46px;padding:10px 14px;font:inherit;font-size:1rem;
  border:1.5px solid var(--line);border-radius:12px;background:#fff}
.db-activate-row input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(12,144,108,.16)}
.db-activate-row .btn{min-height:46px}
.db-activate .ac-err{margin:10px 0 0}

.db-auto-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.db-auto-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-top:1px solid var(--line)}
.db-auto-row:first-child{border-top:0}
.db-auto-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#C9D2CC}
.db-auto-row.is-on .db-auto-dot{background:var(--green-text);box-shadow:0 0 0 4px rgba(12,144,108,.14)}
.db-auto-row.is-part .db-auto-dot{background:var(--orange);box-shadow:0 0 0 4px rgba(240,144,24,.16)}
.db-auto-txt{flex:1;min-width:0;display:grid;gap:1px}
.db-auto-txt b{font-size:.95rem}
.db-auto-txt span{font-size:.84rem;color:var(--muted);line-height:1.4}
.db-auto-state{flex:none;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green-text);background:#E4F4EC;border-radius:999px;padding:4px 10px}
.db-auto-row .btn{flex:none;min-height:44px;min-width:44px}
.db-next-row .db-arrow{flex:none;margin-left:auto}

/* ---- invoice status you can change in place ----
   The dropdown sits inside the card: to the right on a wide screen, along the
   bottom on a phone. The row link keeps the rest of the card clickable. */
.db-inv-li{position:relative}
.db-inv-li .db-inv-row{grid-template-columns:minmax(0,1fr) auto;padding-right:186px}
.db-inv-status{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:162px;
  min-height:40px;padding:6px 30px 6px 12px;border-radius:99px;border:1px solid transparent;
  font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;-webkit-appearance:none;appearance:none;
  background:#EEF1EF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2310231A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:#3C4B43}
.db-inv-status.is-good{background-color:#E3F4EC;color:#0A5B45}
.db-inv-status.is-warn{background-color:#FDF0DC;color:#8A5006}
.db-inv-status.is-bad{background-color:#FBE5E2;color:#8E241A}
.db-inv-status:hover{border-color:rgba(16,35,26,.25)}
.db-inv-status:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.db-inv-status:disabled{opacity:.6;cursor:progress}
@media (max-width:559px){
  .db-inv-li .db-inv-row{padding-right:14px;padding-bottom:58px}
  .db-inv-status{top:auto;bottom:10px;left:14px;right:auto;transform:none;min-height:44px;width:212px;max-width:calc(100% - 28px)}
}

/* ==========================================================================
   Invoice tracking (Sep 2026)
   A stage bar that filters, a card per invoice with its four steps and a
   paid bar, and a payments panel for recording what came in.
   ========================================================================== */
.db-inv-filter.db-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:4px 0 14px}
.db-stage{display:grid;gap:2px;text-align:left;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;min-height:44px;
  transition:border-color .2s ease,box-shadow .2s ease}
.db-stage:hover{border-color:rgba(16,35,26,.3)}
.db-stage.is-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.db-stage-k{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.db-stage-k em{font-style:normal;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  margin-left:4px;border-radius:99px;background:#EEF1EF;color:var(--ink);font-size:.78rem;letter-spacing:0}
.db-stage b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.db-stage small{font-size:.78rem;color:var(--muted)}
.db-stage.is-open em{background:#FDF0DC;color:#8A5006}
.db-stage.is-overdue em{background:#FBE5E2;color:#8E241A}
.db-stage.is-paid em{background:#E3F4EC;color:#0A5B45}

.db-inv--cards{gap:10px}
.db-invc{border:1px solid var(--line);border-left:4px solid #C9D2CC;border-radius:14px;background:var(--paper);
  padding:14px 16px 12px}
.db-invc.is-warn{border-left-color:var(--orange)}
.db-invc.is-bad{border-left-color:var(--red)}
.db-invc.is-good{border-left-color:var(--green-text)}
.db-invc-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.db-invc-top .db-inv-status{position:static;transform:none;grid-column:1 / -1;justify-self:start;width:auto;min-width:170px}
@media (min-width:640px){
  .db-invc-top{grid-template-columns:minmax(0,1fr) auto 190px}
  .db-invc-top .db-inv-status{grid-column:auto;justify-self:end;width:100%}
}

.db-track{list-style:none;margin:14px 0 10px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative}
.db-step{position:relative;display:grid;justify-items:center;text-align:center;gap:2px;padding-top:4px}
.db-step::before{content:"";position:absolute;top:11px;left:-50%;right:50%;height:2px;background:#DDE3DF}
.db-step:first-child::before{display:none}
.db-step.is-done::before{background:var(--green-text)}
.db-step i{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--paper);
  border:2px solid #C9D2CC}
.db-step.is-done i{background:var(--green-text);border-color:var(--green-text)}
.db-step.is-part i{background:linear-gradient(90deg,var(--orange) 50%,var(--paper) 50%);border-color:var(--orange)}
.db-step.is-bad i{background:var(--red);border-color:var(--red)}
.db-step.is-bad::before{background:var(--red)}
.db-step b{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-top:4px}
.db-step span{font-size:.78rem;color:var(--muted)}
.db-step.is-bad span{color:var(--red);font-weight:700}
.db-track.is-off{opacity:.45}

.db-payprog{height:6px;border-radius:6px;background:#EEF1EF;overflow:hidden;margin:4px 0 10px}
.db-payprog i{display:block;height:100%;background:linear-gradient(90deg,var(--green-text),#3FB98D);border-radius:6px}
.db-invc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.db-invc-paid{flex:1 1 180px;font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums}
.db-invc-foot .btn{min-height:44px}
.db-invc-foot .linkish{min-height:44px;display:inline-flex;align-items:center;font-size:.86rem}

.db-pay{margin-top:12px;padding:14px;border-radius:12px;background:var(--cream);border:1px solid var(--line)}
.db-pay-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.db-pay-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;
  border-radius:10px;background:var(--paper);font-size:.9rem}
.db-pay-list li > span{min-width:0;overflow-wrap:anywhere}
.db-pay-rm{min-height:44px;color:var(--red);font-size:.84rem;flex:none}
.db-pay-none{margin:0 0 12px;font-size:.9rem;color:var(--muted)}
.db-pay-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}
@media (min-width:760px){.db-pay-form{grid-template-columns:1fr 1fr 1fr 1.4fr auto}}
.db-pay-f{display:grid;gap:4px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.db-pay-f input,.db-pay-f select{min-height:44px;padding:8px 10px;font:inherit;font-size:1rem;letter-spacing:0;
  text-transform:none;color:var(--ink);border:1.5px solid var(--line);border-radius:10px;background:var(--paper);min-width:0}
.db-pay-f input:focus,.db-pay-f select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(12,144,108,.16)}
.db-pay-f.is-wide{grid-column:1 / -1}
@media (min-width:760px){.db-pay-f.is-wide{grid-column:auto}}
.db-pay-form .btn{min-height:44px;grid-column:1 / -1;justify-self:start}
@media (min-width:760px){.db-pay-form .btn{grid-column:auto}}
.db-pay-err{grid-column:1 / -1;margin:0;color:var(--red);font-size:.88rem}

/* ---- campaign cards: the next step and the track ---- */
.mp-next{margin:8px 0 2px;font-size:.92rem;font-weight:600;color:var(--muted)}
.mp-next b{font-weight:800}
.mp-next.is-warn{color:#8A5006}
.mp-next.is-bad{color:#8E241A}
.mp-next.is-good{color:#0A5B45}
.mp-track{margin:10px 0 6px;max-width:560px}
.mp-track .db-step b{font-size:.75rem}
.db-rates .db-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.db-rates .db-card-head .btn{min-height:44px}
.db-rates-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 8px}
.db-rates-list > div{padding:10px;border-radius:12px;background:var(--cream);border:1px solid var(--line)}
.db-rates-list dt{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.db-rates-list dd{margin:2px 0 0;font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums}
.db-rates-note{margin:0;font-size:.84rem;color:var(--muted);line-height:1.45}

/* ==========================================================================
   Readability and touch (Sep 2026 audit of /creator): nothing under 12px,
   hints that pass contrast, and every control a thumb can hit at tablet width.
   ========================================================================== */
.ac-f > label,.ac-f label,.ac-legend,.db-kpi span,.db-glance span,.mp-record span,
.mp-do-f span,.db-stage-k,.db-step b{font-size:.78rem}
.ac-opt{font-size:.78rem;color:#5E6E64}
.db-count{font-size:.75rem;min-width:24px;height:24px}
.sc-label{font-size:.75rem}
details.mp-brief > summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.mp-draft-send input,.mp-draft-send .btn{min-height:44px}
#mpSignOut{min-height:44px}
.db-card-head .linkish,.db-invc-foot .linkish{min-height:44px;display:inline-flex;align-items:center}
.db-inv-status{min-height:44px}
.ac-page .btn--sm{min-height:44px}
.ac-header .brand{min-height:44px;min-width:44px}
.sc-foot a{display:inline-block;padding:10px 0}

/* ---- profile strength ---- */
.db-strength{border-color:rgba(12,144,108,.35);background:linear-gradient(135deg,#F1FAF5,#fff 65%)}
.db-strength h3{display:flex;align-items:center;gap:8px}
.db-strength-pct{font-size:.9rem;font-weight:800;color:var(--green-text)}
.db-strength-bar{height:8px;border-radius:8px;background:#E3ECE6;overflow:hidden;margin:6px 0 10px}
.db-strength-bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--green-text),#3FB98D);transition:width .5s ease}
.db-strength-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.db-strength-go{min-height:44px;padding:8px 14px;border-radius:99px;border:1.5px dashed rgba(12,144,108,.5);
  background:#fff;color:var(--green-text);font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.db-strength-go:hover{border-style:solid;background:#F1FAF5}
.db-strength-go::before{content:"+ "}
/* snapchat's yellow needs a dark letter */
.sh-row [style*="#F5C400"] b{color:#10231A}
.sc-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.cd-app-acts .linkish,.mp-do-acts .linkish{min-height:44px;display:inline-flex;align-items:center}
/* the creator's own outlet + slot on a multi-outlet campaign */
.mp-slot{margin:6px 0 2px;padding:6px 10px;border-radius:8px;background:#EEF6F1;color:#0B4A33;font-size:.9rem;display:inline-block}
.mp-slot b{font-weight:800}