/* ============================================================
   /api/dashboard — the Business dashboard.

   Borrows the app shell (app.css) and the filter bar, stats, banner and table (admin.css). This
   file only adds what neither has: onboarding, the key panel, model cards, plan cards, the pager,
   the photo sheet and a toast.
   ============================================================ */

.pane__h{font-size:16px; font-weight:700; letter-spacing:-.01em; margin:var(--s4) 0 var(--s2)}
section[data-pane] > .pane__h:first-child{margin-top:0}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em}

/* ---------- onboarding ---------- */
.onb{min-height:100vh; display:grid; place-items:center; padding:var(--gutter); background:var(--bg-2)}
.onb__card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-md);
  padding:clamp(26px,5vw,42px); width:min(480px, 100%); display:flex; flex-direction:column; gap:var(--s3);
}
.onb__card img.mark{height:32px; width:auto; align-self:flex-start}
.onb__card h1{font-size:clamp(22px,3.8vw,27px); font-weight:700; letter-spacing:-.022em}
.whoami__text{display:flex; flex-direction:column; min-width:0; font-size:14px}
.whoami__text span{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis}

.main .notice.is-on{margin-bottom:var(--s3)}

/* ---------- overview ---------- */
.checklist{background:var(--pink-tint-2); border:1px solid #F6D5DF; border-radius:var(--r-lg); padding:var(--s3); margin-bottom:var(--s3)}
.checklist:empty{display:none}
.checklist .pane__h{margin-top:0}
.checklist__list{display:grid; gap:10px; padding-left:0; list-style:none; counter-reset:step}
.checklist__list li{counter-increment:step; display:flex; align-items:center; gap:10px; font-size:14.5px}
.checklist__list li::before{
  content:counter(step); width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:#fff; border:1px solid var(--line); color:var(--ink-2);
}
.checklist__list li.is-done::before{content:"✓"; background:#2E9E5B; border-color:#2E9E5B; color:#fff}
.checklist__list li.is-done a{color:var(--ink-3); text-decoration:line-through}
.checklist__list a{color:var(--ink); font-weight:600}

/* ---------- tables (narrower than the operations table) ---------- */
.tbl--biz{min-width:720px}
.tbl tr.is-link{cursor:pointer}
.tbl code{background:var(--bg-2); border-radius:6px; padding:2px 6px}
.tbl a{color:var(--pink-dark); font-weight:600}


/* ---------- models ---------- */
.mform{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s3); margin-bottom:var(--s4)}
.mform .pane__h{margin-top:0}
.mform__grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:var(--s2); margin-bottom:var(--s2)}
.mform__grid .field[hidden]{display:none}
.mgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--s3)}
.mcard{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:opacity .2s}
.mcard.is-hidden{opacity:.55}
.mcard__img{aspect-ratio:3/4; background:var(--bg-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--ink-2); font-size:13px}
.mcard__img img{width:100%; height:100%; object-fit:cover}
.mcard__body{padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.mcard__title{font-weight:700; display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.mcard__tag{font-size:11px; font-weight:600; color:var(--ink-2); background:var(--bg-2); border-radius:99px; padding:2px 8px}
.mcard__id{display:flex; align-items:center; gap:6px; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:6px 8px; text-align:left; min-width:0; max-width:100%}
.mcard__id code{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.mcard__id .icon{width:15px; height:15px; flex:none; color:var(--ink-3)}

.switch{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-2); cursor:pointer}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.switch span{width:36px; height:20px; border-radius:99px; background:#DDD5D8; position:relative; flex:none; transition:background .2s}
.switch span::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s var(--ease)}
.switch input:checked + span{background:var(--pink)}
.switch input:checked + span::after{transform:translateX(16px)}
.switch input:focus-visible + span{outline:2px solid var(--pink); outline-offset:2px}

/* ---------- API key ---------- */
.keypane{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3); max-width:860px}
.keycard{min-width:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s3); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:var(--s2)}
.keycard__head{display:flex; align-items:center; gap:14px}
.keycard__icon{width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--pink-tint); color:var(--pink-dark)}
.keycard__icon .icon{width:22px; height:22px}
.keycard__title{flex:1; min-width:0}
.keycard__title h2, .keycard__h{font-size:16px; font-weight:700; letter-spacing:-.01em}
.keycard__title p, .keycard__sub{color:var(--ink-2); font-size:13.5px; margin-top:2px}
.keycard__row{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s2)}
.keycard__link{color:var(--pink-dark); font-size:13.5px; font-weight:600; white-space:nowrap}
.keycard__hint{background:#FFF8EA; border:1px solid #F0DDBB; color:#7A5418; border-radius:10px; padding:10px 12px; font-size:13.5px}
.keycard__hint a{color:inherit; font-weight:700}

.keystatus{display:inline-flex; align-items:center; gap:6px; flex:none; font-size:12px; font-weight:700; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); border-radius:99px; padding:5px 10px}
.keystatus::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ink-3)}
.keystatus--live{color:#1F7A45; background:#EEF8F2; border-color:#CFE9D9}
.keystatus--live::before{background:#2E9E5B}

/* The key, or any one value, in a field with its buttons inside. */
.keyfield{display:flex; align-items:center; gap:4px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:5px 5px 5px 14px; min-width:0}
.keyfield__value{flex:1; min-width:0; font-size:14px; letter-spacing:.02em; overflow-x:auto; white-space:nowrap; scrollbar-width:none; padding:8px 0; color:var(--ink-2)}
.keyfield__value.is-shown{color:var(--ink); user-select:all}
.keyfield__label{flex:none; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-right:6px}
.keyfield__btn{display:inline-flex; align-items:center; gap:6px; flex:none; height:36px; padding:0 12px; border-radius:9px; background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink); transition:background-color .2s, border-color .2s, color .2s}
.keyfield__btn:hover{background:var(--pink-tint-2); border-color:#F6D5DF}
.keyfield__btn .icon{width:16px; height:16px}
.keyfield__btn--main{background:var(--pink); border-color:var(--pink); color:#fff}
.keyfield__btn--main:hover{background:var(--pink-dark); border-color:var(--pink-dark)}
.keyfield__btn.is-done{background:#EEF8F2; border-color:#CFE9D9; color:#1F7A45}
.keyfield--quiet{background:#fff}

.keyfacts{margin:0; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4)}
.keyfacts dt{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.keyfacts dd{margin:2px 0 0; font-size:14px}

.keycode{position:relative; min-width:0; background:#1A1A1A; border-radius:12px}
.keycode pre{margin:0; padding:16px 104px 16px 16px; color:#F3EEF0; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; line-height:1.6; overflow-x:auto; white-space:pre}
.keycode .keyfield__btn{position:absolute; top:10px; right:10px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#fff}
.keycode .keyfield__btn:hover{background:rgba(255,255,255,.16)}
.keycode .keyfield__btn.is-done{background:#2E9E5B; border-color:#2E9E5B}

.keynotes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.keynotes__item{display:flex; gap:10px; align-items:flex-start; border-radius:var(--r); padding:12px 14px; font-size:13.5px; line-height:1.5; border:1px solid}
.keynotes__item .icon{width:18px; height:18px; flex:none; margin-top:1px}
.keynotes__item--red{background:#FDF1EF; border-color:#F3D6D1; color:#8E2C1F}
.keynotes__item--amber{background:#FFF8EA; border-color:#F0DDBB; color:#7A5418}

.keydanger{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); border:1px solid #F3D6D1; border-radius:var(--r-lg); padding:var(--s3); background:#fff}
.keydanger .btn{flex:none}

/* Before the first plan. */

/* ---------- plans ---------- */
.plangrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:var(--s3); margin-bottom:var(--s3)}
.plancard{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s3); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:4px}
.plancard__name{font-weight:700}
.plancard__images{font-size:22px; font-weight:700; letter-spacing:-.02em}
.plancard__price{font-size:16px; color:var(--ink); margin-top:6px}
.plancard__per{font-size:12.5px; color:var(--ink-3); margin-bottom:var(--s2)}
.plancard .btn{margin-top:auto}

/* ---------- profile ---------- */
.pform{display:grid; gap:var(--s3); max-width:520px}
.pform .btn{justify-self:start}

/* ---------- one request's photos ---------- */
.jobd{padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:var(--s3)}
.jobd__facts{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:var(--s2)}
.jobd__facts dt{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
.jobd__facts dd{margin:0; font-size:14px}
.jobd__wide{grid-column:1 / -1}
.jobd__grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:var(--s2)}
.jobd__img{display:flex; flex-direction:column; gap:6px; color:var(--ink-3); font-size:12px; text-decoration:none}
.jobd__img img{width:100%; border-radius:var(--r); background:var(--bg-2); border:1px solid var(--line)}

@media (max-width:640px){
  .pager__info{margin-left:0; width:100%}
  .keycard__head{flex-wrap:wrap}
  .keycard__row, .keydanger{flex-direction:column; align-items:stretch}
  .keynotes{grid-template-columns:1fr}
  .keyfield__btn span{display:none}
  .keyfield__btn{padding:0 10px}
  .keycode .keyfield__btn span{display:inline}
  .keycode pre{padding-top:52px; padding-right:16px}
}

/* ---------- locked panes (no plan yet) ---------- */
.lockhero{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4vw,48px); align-items:center;
  background:radial-gradient(120% 90% at 100% 0%, var(--pink-tint) 0%, rgba(253,238,242,0) 55%), #fff;
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-md); padding:clamp(24px,4.5vw,48px);
  animation:lockIn .5s var(--ease, ease) both}
.lockhero[hidden]{display:none}
.lockhero__copy{display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-width:0}
.lockhero__eyebrow{display:inline-flex; align-items:center; gap:6px; background:var(--pink-tint); color:var(--pink-dark); font-size:12.5px; font-weight:700; letter-spacing:.02em; padding:6px 12px 6px 10px; border-radius:99px}
.lockhero__eyebrow .icon{width:14px; height:14px}
.lockhero h2{font-size:clamp(22px,3.2vw,28px); font-weight:800; letter-spacing:-.025em; line-height:1.15}
.lockhero__copy > p{color:var(--ink-2); font-size:15px; line-height:1.55; max-width:48ch}
.lockhero__feats{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:12px; width:100%}
.lockhero__feats li{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.lockhero__feats li > span{width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--pink-tint-2); border:1px solid var(--pink-tint); color:var(--pink)}
.lockhero__feats .icon{width:18px; height:18px}
.lockhero__feats strong{display:block; color:var(--ink); font-size:14.5px; font-weight:700}
.lockhero__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.lockhero__cta .btn{gap:6px}
.lockhero__cta .btn .icon{width:16px; height:16px}
.lockhero__meta{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:13px; color:var(--ink-3)}
.lockhero__meta:not(:has(.lockhero__from:not(:empty), .lockhero__offer:not([hidden]))){display:none}
.lockhero__offer{color:var(--pink-dark); font-weight:700}
.lockhero__offer[hidden]{display:none}

.lockhero__art{position:relative; display:grid; place-items:center; min-height:260px}
.lockart{width:100%; filter:blur(1.5px) saturate(.9); opacity:.9; transform:rotate(-3deg); pointer-events:none; user-select:none}
.lockart__badge{position:absolute; top:50%; left:50%; width:64px; height:64px; margin:-32px 0 0 -32px; display:grid; place-items:center; border-radius:20px;
  background:linear-gradient(145deg, var(--pink), var(--pink-dark)); color:#fff; box-shadow:0 14px 34px rgba(198,61,98,.4), 0 0 0 8px rgba(255,255,255,.75);
  animation:lockFloat 3.2s ease-in-out infinite}
.lockart__badge .icon{width:28px; height:28px}

.lockart--models{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.lockart__model{aspect-ratio:3/4; border-radius:16px; background:linear-gradient(180deg, #fff 0%, var(--pink-tint-2) 100%); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:12px; gap:6px; position:relative; overflow:hidden}
.lockart__model i{position:absolute; left:50%; top:18%; width:36%; aspect-ratio:1; margin-left:-18%; border-radius:50%; background:#F6D5DE}
.lockart__model i::after{content:""; position:absolute; left:-55%; top:115%; width:210%; height:170%; border-radius:50% 50% 0 0; background:#F6D5DE}
.lockart__model b{position:relative; display:block; height:7px; width:70%; border-radius:99px; background:#fff; opacity:.9}
.lockart__model b + b{width:45%}
.lockart__model:nth-child(2) i, .lockart__model:nth-child(2) i::after{background:#EFD9C9}
.lockart__model:nth-child(3) i, .lockart__model:nth-child(3) i::after{background:#E3D3EA}
.lockart__model:nth-child(4) i, .lockart__model:nth-child(4) i::after{background:#D6E2EE}

.lockart--key{display:flex; flex-direction:column; gap:12px}
.lockart__key{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-sm)}
.lockart__key .icon{width:20px; height:20px; color:var(--pink); flex:none}
.lockart__key code{font-size:13.5px; color:var(--ink); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lockart__code{margin:0; background:#1F1A1C; color:#EDE6E8; border-radius:14px; padding:16px 18px; font-size:12.5px; line-height:1.6; box-shadow:var(--shadow-md); overflow:hidden; white-space:pre}
.lockart__code .c{color:#8C8286}
.lockart__code .k{color:#F59DB5}
.lockart__code .s{color:#A8E0C0}

@keyframes lockIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes lockFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){ .lockhero, .lockart__badge{animation:none} }

@media (max-width: 860px){
  .lockhero{grid-template-columns:1fr}
  .lockhero__art{order:-1; min-height:0; max-width:340px; width:100%; justify-self:center}
  .lockart--models{grid-template-columns:repeat(4,1fr); gap:8px}
  .lockart__model{padding:8px; border-radius:12px}
}
@media (max-width: 480px){
  .lockhero__cta{width:100%}
  .lockhero__cta .btn{flex:1 1 100%}
}