@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root{
  --bg:#ffffff;
  --bg-soft:#E8F8F6;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#e8eef0;
  --mint-brand:#00BDA2;
  --mint:#5DD0C0;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --radius:18px;
  --max:1100px;
}

*{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:transparent;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img, video, iframe{
  max-width:100%;
  height:auto;
  display:block;
}

button, input, select, textarea{
  font:inherit;
}

p{
  line-height:1.6;
  margin:0;
}

h1, h2, h3, h4, p, div, span{
  overflow-wrap:break-word;
}

.center{
  text-align:center;
}

.accent{
  color:var(--mint);
}

.muted{
  color:var(--muted);
}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* NAV */
.nav{
  position:sticky;
  top:0;
  z-index:999;
  background:#ffffff;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.nav__inner{
  max-width:1400px;
  margin:0 auto;
  padding:10px 28px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}

.brand{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  height:38px;
  width:auto;
  object-fit:contain;
  display:block;
}

.logo--full{
  height:42px;
}

.nav__links{
  justify-self:center;
  display:flex;
  gap:32px;
  color:#374151;
  font-weight:600;
}

.nav__actions{
  justify-self:end;
  display:flex;
  gap:12px;
  align-items:center;
}

.chip{
  border:1px solid var(--line);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
}

.chip--lang{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
}

.langIcon{
  font-size:14px;
  opacity:.75;
  line-height:1;
}

.nav__burger{
  display:none;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:6px;
}

.nav__burger span{
  display:block;
  width:22px;
  height:2px;
  background:#111827;
  margin:5px 0;
}

.nav__mobile{
  display:none;
  border-top:1px solid var(--line);
  background:#fff;
}

.nav__mobileInner{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 0;
}

.nav__mobileActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* HERO */
main#top{
  position: relative;
  background: none;
}

main#top::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:900px; /* desktop */
  background-image:url("hero-bg.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  z-index:0;
  pointer-events:none;
}

@media (max-width: 768px){
  main#top::before{
    height:680px;
    background-position:center top;
    background-size:cover;
  }
}

.hero{
  padding:58px 0 48px;
  min-height:auto;
  background:transparent;
}

.hero__inner,
.section .container,
.cta__inner{
  position:relative;
  z-index:1;
}

.hero__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}

.hero + .section{
  background:transparent;
}

.hero h1{
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.05;
  margin:0;
}

.hero p{
  max-width:780px;
  margin:6px 0 0;
  color:#374151;
}

.hero__cta{
  margin-top:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

/* SECTIONS */
.section{
  padding:56px 0;
}

#como-funciona{
  padding-top:46px;
}

.sectionSubtitle{
  margin:-6px 0 26px;
  font-size:13px;
  color:#6b7280;
  line-height:1.4;
}

.section--soft,
.section--mint,
.cta{
  background:transparent;
}

h2{
  margin:0 0 12px;
  font-size:clamp(26px, 3vw, 34px);
  font-weight:800;
  letter-spacing:-0.02em;
  color:#111827;
}

h3{
  margin:0 0 6px;
}

h4{
  margin:0 0 10px;
}

.badgeTitle{
  display:block;
  margin:0 auto 24px;
  padding:0;
  background:none;
  border:none;
  font-weight:900;
  letter-spacing:.01em;
  color:#5ED0C0;
  text-align:center;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  border:0;
  cursor:pointer;
  transition:all .18s ease;
  text-align:center;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.btn--brand{
  background:#00BDA2;
  color:#fff;
}

.btn--ghost{
  background:rgba(0,189,162,.18);
  color:#00BDA2;
  border:0;
}

.btn--primary{
  background:#5ED0C0;
  color:#fff;
  border:0;
}

.btn--outline{
  background:#fff;
  border:2px solid #5ED0C0;
  color:#5ED0C0;
}

/* STEPS */
.steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:28px;
  margin-top:26px;
  align-items:start;
}

.step{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  min-width:0;
}

.step__n{
  font-weight:900;
  font-size:44px;
  line-height:1;
  color:rgba(93,208,192,.80);
  margin-bottom:12px;
}

.step h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
}

.step p{
  margin:0;
  color:#4b5563;
  font-size:16px;
  line-height:1.55;
  max-width:none;
}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:28px;
  margin-top:26px;
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
}

.card{
  min-width:0;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:28px;
  padding:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.05);
}

.card h3{
  margin:0 0 10px;
  font-size:18px;
  color:var(--mint);
  font-weight:800;
  line-height:1.25;
}

.card p{
  color:#4b5563;
  font-size:15px;
  line-height:1.55;
}

/* REQ */
.req{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}

.req__col{
  list-style:none;
  margin:0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:#fff;
}

.req__col li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px dashed #edf2f7;
}

.req__col li:last-child{
  border-bottom:0;
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--mint);
}

.req2{
  display:grid;
  grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);
  column-gap:44px;
  max-width:1040px;
  margin:34px auto 0;
  align-items:start;
}

.req2__col{
  min-width:0;
  width:100%;
  padding:0;
  display:grid;
  gap:22px;
}

.req2__divider{
  width:2px;
  align-self:stretch;
  min-height:100%;
  background:linear-gradient(
    to bottom,
    rgba(93,208,192,0) 0%,
    rgba(93,208,192,.45) 12%,
    rgba(93,208,192,.45) 88%,
    rgba(93,208,192,0) 100%
  );
}

.req2__item{
  margin:0;
}

.req2__title{
  color:var(--mint);
  font-weight:800;
  font-size:20px;
  line-height:1.2;
  margin-bottom:6px;
}

.req2__desc{
  color:#4b5563;
  font-size:16px;
  line-height:1.55;
}

/* PAY */
#pago .container{
  text-align:center;
}

.pay{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}

.pay__box{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

.pay__box p{
  margin:0;
  color:#374151;
}

/* FAQ */
.faq{
  max-width:720px;
  margin:18px auto 0;
  gap:0;
}

.faqTitle,
.faq h2{
  color:var(--mint);
  font-weight:900;
}

details{
  border:0;
  border-bottom:1px solid #e5e7eb;
  border-radius:0;
  padding:14px 0;
  background:transparent;
  box-shadow:none;
}

summary{
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}

summary::after{
  content:"⌄";
  font-size:18px;
  color:#9ca3af;
  transform:translateY(-1px);
}

details[open] summary::after{
  content:"⌃";
}

/* CTA */
.cta{
  padding:54px 0;
}

.cta__inner{
  text-align:center;
}

.cta__actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* FOOTER */
.footer{
  background:#5ED0C0;
  color:#fff;
  padding:20px 0 10px;
  margin-top:0;
}

.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:80px;
  align-items:start;
  max-width:1100px;
  margin:0 auto;
}

.footer__brand{
  margin-bottom:14px;
}

.footer__logo{
  height:56px;
  width:auto;
  display:block;
}

.footer__desc{
  color:#fff;
  font-size:18px;
  line-height:1.25;
  max-width:360px;
  margin:0;
}

.footer__col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer__col h4{
  margin:0 0 18px;
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
}

.footer__col a{
  display:block;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  line-height:1.8;
  margin-bottom:10px;
}

.footer__col a:hover,
.footer__legal a:hover{
  opacity:.85;
}

.footer__bottom--final{
  border-top:1px solid rgba(255,255,255,.35);
  margin-top:22px;
  padding-top:14px;
  justify-content:center;
  text-align:center;
  color:#fff;
  font-size:14px;
}

.footer__bottom{
  border-top:1px solid rgba(255,255,255,.35);
  margin-top:20px;
  padding-top:10px;
  color:#fff;
  font-size:14px;
  display:flex;
  justify-content:flex-end;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

.footer__legal{
  max-width:1100px;
  margin:14px auto 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px 24px;
  padding-bottom:18px;
}

.footer__legal a{
  color:#fff;
  font-size:14px;
  line-height:1.6;
  text-decoration:none;
}

/* EXTRA UI */
.brand__logo{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111827;
  line-height:1;
}

.brand__logo--image{
  width:auto;
  height:auto;
}

.brand__logo--image .logo{
  flex-shrink:0;
}

.brand__text span,
.accent,
.step__n,
.card h3,
.req2__title,
.faqTitle{
  color:#5ED0C0;
}

.info-list{
  margin:12px 0 0;
  padding-left:18px;
}

.info-list li{
  margin:8px 0;
  line-height:1.45;
  color:#374151;
}

.panel-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:24px;
  padding:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.05);
  margin-bottom:24px;
}

.panel-card h3{
  margin:0 0 10px;
}

.admin-list{
  margin:12px 0 0;
  padding-left:20px;
}

.admin-list li{
  margin:8px 0;
  line-height:1.45;
  color:#374151;
}

.admin-flow{
  margin:12px 0 0;
  padding-left:22px;
}

.admin-flow li{
  margin:12px 0;
  line-height:1.5;
  color:#374151;
}

.admin-code{
  display:block;
  background:#f3f4f6;
  border:1px solid rgba(15,23,42,.08);
  border-radius:10px;
  padding:12px 14px;
  font-family:monospace;
  font-size:14px;
  color:#111827;
  margin-top:8px;
  word-break:break-word;
}

.admin-user-card{
  min-width:0;
  padding:18px 0;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.admin-user-header{
  font-size:18px;
  margin-bottom:8px;
  color:#111827;
}

.admin-user-meta{
  font-size:14px;
  color:#6b7280;
  margin:4px 0;
}

.admin-user-status-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.admin-user-status-label{
  font-size:14px;
  font-weight:700;
  color:#111827;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}

.status-badge--pending{
  background:rgba(245, 158, 11, .14);
  color:#b45309;
}

.status-badge--approved{
  background:rgba(16, 185, 129, .14);
  color:#047857;
}

.status-badge--rejected{
  background:rgba(239, 68, 68, .14);
  color:#b91c1c;
}

/* ===== TABLET ===== */
@media (max-width: 1024px){
  .container{
    padding-left:18px;
    padding-right:18px;
  }

  .steps{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .cards{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .req,
  .pay{
    grid-template-columns:1fr;
  }

  .req2{
    grid-template-columns:1fr;
    row-gap:24px;
    column-gap:0;
  }

  .req2__divider{
    display:none;
  }

  .req2__col,
  .req2__col:first-child,
  .req2__col:last-child{
    padding:0;
  }

  .admin-participant-card__snapshot{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .admin-participant-card__details-grid{
    grid-template-columns:1fr;
  }

  .footer__grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }

  .footer__legal{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* ===== MOBILE ===== */
@media (max-width: 768px){
  body{
    font-size:16px;
  }

  .container{
    padding-left:16px;
    padding-right:16px;
  }

  .nav__links,
  .nav__actions{
    display:none;
  }

  .nav__burger{
    display:block;
  }

  .nav__mobile{
    display:block;
  }

  .nav__mobile[aria-hidden="true"]{
    display:none;
  }

  .nav__inner{
    grid-template-columns:1fr auto;
    padding:10px 18px;
  }

  .admin-pagination-bar,
  .admin-participant-card__actions,
  .admin-participant-card__summary{
    flex-direction:column;
    align-items:stretch;
  }

  .admin-participant-card__badges{
    justify-content:flex-start;
  }

  .admin-participant-card__snapshot{
    grid-template-columns:1fr;
  }

  .admin-participant-card__topline{
    flex-direction:column;
    align-items:flex-start;
  }

  .nav,
  header{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  h1{
    font-size:34px !important;
    line-height:1.1 !important;
  }

  h2{
    font-size:28px !important;
    line-height:1.15 !important;
  }

  h3{
    font-size:22px !important;
    line-height:1.2 !important;
  }

  p,
  li,
  .muted{
    font-size:16px !important;
    line-height:1.55 !important;
  }

  .hero__cta,
  .cta__actions{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:10px;
  }

  .hero__cta .btn,
  .cta__actions .btn{
    width:100%;
  }

  .steps{
    grid-template-columns:1fr;
    gap:26px;
    margin-top:24px;
  }

  .step{
    padding:0;
  }

  .step__n{
    font-size:56px;
    margin-bottom:10px;
  }

  .step h3{
    font-size:22px;
    margin-bottom:8px;
  }

  .step p{
    font-size:16px;
    line-height:1.6;
    max-width:100%;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .card{
    padding:18px !important;
    border-radius:18px !important;
  }

  .req,
  .pay{
    grid-template-columns:1fr;
  }

  .req2{
    grid-template-columns:1fr;
    row-gap:24px;
    column-gap:0;
    margin-top:24px;
  }

  .req2__divider{
    display:none;
  }

  .req2__col,
  .req2__col:first-child,
  .req2__col:last-child{
    padding:0;
  }

  .req2__item{
    margin-bottom:18px;
  }

  .req2__title{
    font-size:18px;
    line-height:1.2;
  }

  .req2__desc{
    font-size:16px;
    line-height:1.5;
  }

  .footer{
    padding:28px 0 14px;
  }

  .footer__grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .footer__desc{
    max-width:100%;
    font-size:16px;
    line-height:1.4;
  }

  .footer__col{
    gap:4px;
  }

  .footer__col a{
    margin-bottom:2px;
    line-height:1.5;
  }

  .footer__bottom{
    justify-content:flex-start;
    text-align:left;
    padding-top:14px;
  }

  .footer__legal{
    grid-template-columns:1fr;
    gap:8px;
    margin-top:12px;
  }

  .footer__legal a{
    font-size:13px;
    line-height:1.45;
  }
}

/* ===== MOBILE CHICO ===== */
@media (max-width: 480px){
  .container{
    padding-left:14px;
    padding-right:14px;
  }

  h1{
    font-size:30px !important;
  }

  h2{
    font-size:24px !important;
  }
}

/* =========================
   ADMIN HEADER
========================= */
.admin-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.admin-header__brand {
  min-width: 0;
}

.admin-header__desktop {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.admin-header__burger {
  display: none;
}

.admin-mobile-menu {
  display: none;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

.admin-mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* =========================
   ADMIN RESPONSIVE GLOBAL
========================= */
.admin-user-card,
.panel-card,
.card,
.tasks-card,
.ops-card,
.ops-user-card,
.ops-panel,
.stat-card,
.card-soft,
.pipeline-card,
.buyer-card,
.kpi-card,
.summary-card,
.module-card {
  min-width: 0;
}

.admin-user-header,
.admin-user-meta,
.card h3,
.card p,
.ops-user-title,
.ops-user-sub,
.ops-meta-box__value,
.ops-summary-box__text,
.stat-card__label,
.stat-card__value,
.pipeline-card__title,
.pipeline-card__count,
.buyer-card__title,
.buyer-card__subtitle {
  word-break: normal;
  overflow-wrap: break-word;
}

@media (max-width: 1024px) {
  .cards[style*="repeat(4,1fr)"],
  .cards[style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .admin-header {
    grid-template-columns: 1fr auto;
  }

  .admin-header__desktop {
    display: none;
  }

  .admin-header__burger {
    display: block;
  }

  .admin-mobile-menu[aria-hidden="false"] {
    display: block;
  }

  .cards,
  .steps,
  .req,
  .pay {
    grid-template-columns: 1fr !important;
  }

  .card,
  .panel-card,
  .admin-user-card,
  .tasks-card,
  .ops-card,
  .ops-user-card,
  .ops-panel,
  .stat-card,
  .card-soft,
  .buyer-card {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .card h3,
  .panel-card h3,
  .admin-user-header,
  .ops-user-title,
  .buyer-card__title {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .admin-user-meta,
  .card p,
  .ops-user-sub,
  .meta-item__value,
  .notes-box__value {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .status-badge,
  .ops-mini-pill,
  .task-badge,
  .badge {
    white-space: normal !important;
    text-align: center;
  }

  .actions-row,
  .task-actions,
  .ops-actions,
  .ops-inline-actions,
  .hero__cta,
  .cta__actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .actions-row .btn,
  .task-actions .btn,
  .ops-actions .btn,
  .ops-inline-actions .btn,
  .hero__cta .btn,
  .cta__actions .btn {
    width: 100% !important;
  }

  .toolbar,
  .form-grid,
  .commercial-grid,
  .stats-row,
  .pipeline-row,
  .meta-grid,
  .export-grid,
  .ops-kpis,
  .ops-form-grid,
  .ops-meta-grid,
  .ops-summary-grid,
  .tasks-grid--2,
  .tasks-form-grid {
    grid-template-columns: 1fr !important;
  }

  #deliveriesLayout {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:340px 1fr"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  table {
    min-width: 700px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .card h3,
  .panel-card h3,
  .admin-user-header,
  .ops-user-title,
  .buyer-card__title {
    font-size: 17px !important;
  }
}

.dashboard-cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .dashboard-cards-4,
  .dashboard-cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard-cards-4,
  .dashboard-cards-3 {
    grid-template-columns: 1fr;
  }
}

/* =========================
   FOOTER NUEVO
========================= */
.footer--new{
  background: linear-gradient(180deg, #57cfc1 0%, #45c5b6 100%);
  padding: 32px 0 18px;
}

.footer__top{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items:start;
}

.footer__brandBlock{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.footer__linksWrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.footer__socials{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.footer__social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-weight:700;
  transition:.18s ease;
}

.footer__social:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

.footer__legal--new{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px 24px;
}

/* =========================
   CONTACT
========================= */
.contact-form label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
  color:#111827;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
}

.contact-form textarea{
  resize:vertical;
}

.contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}

/* =========================
   TASK STATES
========================= */
.status-badge--paused{
  background:rgba(59,130,246,.12);
  color:#1d4ed8;
}

.status-badge--closed{
  background:rgba(107,114,128,.14);
  color:#374151;
}

.task-closed-box{
  margin-top:16px;
  padding:14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #cbd5e1;
}

.task-paused-box{
  margin-top:16px;
  padding:14px;
  border-radius:14px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px){
  .footer__top{
    grid-template-columns:1fr;
    gap:24px;
  }

  .footer__linksWrap{
    grid-template-columns:1fr;
    gap:20px;
  }

  .footer__legal--new{
    grid-template-columns:1fr;
    gap:8px;
  }

  .footer__bottom--final{
    justify-content:flex-start;
    text-align:left;
  }
}

/* =========================
   FOOTER DISEÑADORA
========================= */
.footer-designer{
  background:#63cfc6;
  color:#fff;
  padding:46px 0 26px;
  margin-top:0;
}

.footer-designer__inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}

.footer-designer__top{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:64px;
  align-items:start;
}

.footer-designer__brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-designer__logo{
  width:260px;
  max-width:100%;
  height:auto;
  margin-bottom:18px;
}

.footer-designer__desc{
  color:#fff;
  font-size:18px;
  line-height:1.2;
  max-width:430px;
  margin:0 0 22px 0;
}

.footer-designer__socials{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.footer-designer__social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  color:#fff;
  opacity:.95;
  transition:transform .18s ease, opacity .18s ease;
}

.footer-designer__social:hover{
  transform:translateY(-1px);
  opacity:1;
}

.footer-designer__social svg{
  width:26px;
  height:26px;
  fill:currentColor;
  display:block;
}

.footer-designer__navWrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  justify-self:end;
  min-width:320px;
}

.footer-designer__col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.footer-designer__col h4{
  margin:0 0 6px;
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
}

.footer-designer__col a{
  color:#fff;
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  opacity:.96;
}

.footer-designer__col a:hover,
.footer-designer__legalRow a:hover{
  opacity:.82;
}

.footer-designer__legalRow{
  margin-top:42px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.35);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:#fff;
  font-size:14px;
  line-height:1.6;
}

.footer-designer__legalRow a{
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}

.footer-designer__legalRow span{
  opacity:.85;
}

.footer-designer__bottom{
  display:flex;
  justify-content:flex-end;
  padding-top:18px;
  color:#fff;
  font-size:14px;
  text-align:right;
}

/* responsive */
@media (max-width: 900px){
  .footer-designer__top{
    grid-template-columns:1fr;
    gap:36px;
  }

  .footer-designer__navWrap{
    justify-self:start;
    min-width:0;
  }

  .footer-designer__bottom{
    justify-content:flex-start;
    text-align:left;
  }
}

@media (max-width: 640px){
  .footer-designer{
    padding:36px 0 22px;
  }

  .footer-designer__inner{
    padding:0 18px;
  }

  .footer-designer__logo{
    width:220px;
  }

  .footer-designer__desc{
    font-size:16px;
    max-width:100%;
  }

  .footer-designer__navWrap{
    grid-template-columns:1fr;
    gap:28px;
  }

  .footer-designer__legalRow{
    gap:6px;
    font-size:13px;
  }

  .footer-designer__legalRow a{
    white-space:normal;
  }

  .footer-designer__bottom{
    font-size:13px;
  }
}

/* =========================
   QC REVIEW FINAL
========================= */

body:has(#qcReviewPanel) .container{
  max-width:1480px;
  width:100%;
  padding-left:18px;
  padding-right:18px;
}

#qcReviewPanel{
  width:100%;
}

.qc-review-layout--practical{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  width:100%;
}

.qc-main{
  min-width:0;
  width:100%;
}

/* top info */
.qc-topbar-grid{
  display:grid;
  grid-template-columns:2fr 1.2fr 1fr .8fr .8fr;
  gap:10px;
  margin-bottom:10px;
}

.qc-topbar-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:12px 14px;
  min-width:0;
}

.qc-topbar-label{
  font-size:11px;
  font-weight:800;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}

.qc-topbar-value{
  font-size:14px;
  font-weight:800;
  color:#111827;
  line-height:1.25;
  word-break:break-word;
}

/* header task + clips */
.qc-header-strip{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin-bottom:10px;
}

.qc-task-box{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:14px;
}

.qc-task-box__title{
  font-size:17px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:4px;
}

.qc-clips-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:8px;
  align-items:stretch;
}

.qc-clip-btn{
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  cursor:pointer;
  transition:.18s ease;
  min-height:100%;
}

.qc-clip-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}

.qc-clip-btn.is-active{
  border:2px solid rgba(59,130,246,.35);
  background:rgba(59,130,246,.05);
}

/* player area */
.qc-player-shell--practical{
  margin-bottom:10px;
}

.qc-player-stage--practical{
  background:#06152d;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  padding:10px;
}

.qc-player-stage--with-sideinfo{
  display:grid;
  grid-template-columns:180px minmax(0,1fr) 180px;
  gap:10px;
  align-items:stretch;
  background:#06152d;
}

.qc-video-center{
  min-width:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.qc-editor-shell{
  width:100%;
  background:#0f172a;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}

.qc-video-frame-stack{
  position:relative;
  width:100%;
  min-height:clamp(320px,60vh,720px);
  height:clamp(320px,60vh,720px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px 12px 0 0;
  background:#000;
}

.qc-video-viewport{
  position:relative;
  width:100%;
  height:100%;
}

.qc-player-video--practical{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  max-height:none;
  min-height:0;
  background:#000;
  border-radius:12px 12px 0 0;
  object-fit:contain;
  display:block;
  transform:translate(-50%, -50%);
}

.qc-hands-overlay{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  pointer-events:none;
  transform:translate(-50%, -50%);
}

.qc-hands-status{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(6,21,45,.82);
  color:#e2e8f0;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
}

/* side panels */
.qc-video-sidecard{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
  color:#e5eefc;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
}

.qc-sidecard-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8fb3d9;
  margin-bottom:4px;
}

.qc-sidecard-value{
  font-size:14px;
  font-weight:800;
  line-height:1.25;
  color:#fff;
  word-break:break-word;
}

.qc-sidecard-value--small{
  font-size:12px;
  font-weight:600;
  color:#d6e3f5;
}

.qc-side-mini-stack{
  display:grid;
  gap:8px;
  margin-top:14px;
}

.qc-side-mini-box{
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.qc-side-mini-label{
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  color:#9fb8d8;
  text-transform:uppercase;
  margin-bottom:3px;
}

.qc-side-mini-value{
  font-size:13px;
  font-weight:800;
  color:#fff;
}

.qc-side-speed-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:12px;
}

.qc-side-speed-row--wide{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* speed buttons */
.qc-speed-btn{
  min-width:0;
  width:100%;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:#ffffff;
  color:#111827;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
  transition:.18s ease;
}

.qc-speed-btn:hover{
  transform:translateY(-1px);
}

.qc-speed-btn.is-active{
  background:#5ED0C0;
  color:#fff;
  border-color:#5ED0C0;
}

/* timeline */
.qc-timeline-shell{
  background:#151b26;
  border-top:1px solid rgba(255,255,255,.06);
}

.qc-timeline-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:#1a2230;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.qc-timeline-toolbar-left,
.qc-timeline-toolbar-right{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}

.qc-timeline-toolbar-left{
  flex:1;
}

.qc-timeline-btn{
  min-height:30px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:#0f172a;
  color:#e5e7eb;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}

.qc-timeline-btn:hover{
  background:#111c2d;
  border-color:rgba(255,255,255,.22);
}

.qc-timeline-btn.is-accent{
  background:#0f766e;
  border-color:#14b8a6;
  color:#fff;
}

.qc-timeline-btn.is-danger{
  background:#7f1d1d;
  border-color:#ef4444;
  color:#fff;
}

.qc-timeline-btn.is-danger:hover{
  background:#991b1b;
}

.qc-timeline-ruler{
  padding:8px 10px 0;
  background:#151b26;
}

.qc-timeline-ruler-track{
  height:20px;
  border-radius:8px 8px 0 0;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.08) 0,
      rgba(255,255,255,.08) 1px,
      transparent 1px,
      transparent 48px
    ),
    #1f2937;
  border:1px solid rgba(255,255,255,.06);
  border-bottom:0;
}

.qc-timeline-ruler-labels{
  display:flex;
  justify-content:space-between;
  color:#aeb8c8;
  font-size:11px;
  padding:4px 2px 6px;
}

.qc-timeline-body{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:0;
  padding:0 10px 10px;
}

.qc-timeline-left{
  display:grid;
  grid-template-rows:26px minmax(84px, auto);
}

.qc-timeline-left-top{
  background:#1f2937;
  border-left:1px solid rgba(255,255,255,.06);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.qc-timeline-left-track{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1f2937;
  color:#e5e7eb;
  font-size:13px;
  font-weight:700;
  border-left:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  border-radius:0 0 0 10px;
}

.qc-timeline-main{
  min-width:0;
}

.qc-timeline-track{
  position:relative;
  min-height:84px;
  border:1px solid rgba(255,255,255,.06);
  border-left:0;
  border-radius:0 0 10px 0;
  overflow:hidden;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.08) 0,
      rgba(255,255,255,.08) 1px,
      transparent 1px,
      transparent 48px
    ),
    #0f172a;
  cursor:pointer;
}

.qc-timeline-frames{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(56px,1fr);
  height:84px;
  width:100%;
  z-index:1;
}

.qc-timeline-frame{
  width:100%;
  height:84px;
  object-fit:cover;
  display:block;
  border-right:1px solid rgba(255,255,255,.06);
  background:#111827;
}

.qc-timeline-frame--empty{
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    #111827;
}

.qc-timeline-selection{
  position:absolute;
  top:0;
  bottom:0;
  background:rgba(94,208,192,.18);
  border-left:2px solid #5ED0C0;
  border-right:2px solid #5ED0C0;
  z-index:3;
}

.qc-timeline-mark{
  position:absolute;
  top:0;
  bottom:0;
  width:3px;
  z-index:4;
}

.qc-timeline-mark--in{
  background:#5ED0C0;
}

.qc-timeline-mark--out{
  background:#ef4444;
}

.qc-timeline-playhead{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:#fff;
  z-index:5;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}

.qc-timeline-playhead::before{
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  width:12px;
  height:12px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#fff;
}

.qc-cut-hint{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#dbe7f5;
  font-size:11px;
  line-height:1.35;
}

/* lower panels */
.qc-actions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:start;
}

.qc-panel-box{
  padding:14px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
}

.qc-panel-box--wide{
  grid-column:1 / -1;
}

.qc-auto-header{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}

.qc-auto-loading,
.qc-auto-error,
.qc-auto-empty{
  display:grid;
  gap:10px;
}

.qc-auto-loading__bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}

.qc-auto-loading__bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#5ED0C0,#34d399);
}

.qc-auto-card{
  display:grid;
  gap:16px;
}

.qc-auto-topline{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.qc-auto-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  color:#0f766e;
}

.qc-auto-score{
  font-size:38px;
  font-weight:900;
  color:#0f172a;
  line-height:1;
}

.qc-auto-score span{
  font-size:18px;
  color:#64748b;
  margin-left:4px;
}

.qc-auto-metrics{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.qc-auto-metric{
  padding:12px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
}

.qc-auto-metric__label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#64748b;
}

.qc-auto-metric__value{
  margin-top:6px;
  font-size:22px;
  font-weight:900;
  color:#0f172a;
}

.qc-auto-details{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  color:#334155;
  font-size:13px;
}

.qc-auto-alerts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.qc-auto-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(245,158,11,.12);
  color:#b45309;
  border:1px solid rgba(245,158,11,.2);
  font-size:12px;
  font-weight:700;
}

.qc-auto-chip--good{
  background:rgba(16,185,129,.12);
  color:#047857;
  border-color:rgba(16,185,129,.2);
}

.qc-auto-sections{
  display:grid;
  grid-template-columns:1.35fr .85fr;
  gap:12px;
}

.qc-auto-subtitle{
  font-size:13px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:8px;
}

.qc-auto-flags{
  display:grid;
  gap:8px;
}

.qc-auto-flag{
  padding:10px 12px;
  border-radius:12px;
  background:#fff7ed;
  border:1px solid rgba(249,115,22,.18);
}

.qc-auto-flag__time{
  font-size:12px;
  font-weight:800;
  color:#9a3412;
}

.qc-auto-flag__reasons{
  margin-top:4px;
  font-size:13px;
  color:#7c2d12;
}

.qc-auto-trim-box{
  padding:12px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
}

.qc-ops-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.qc-ops-card{
  padding:16px;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 26px rgba(15,23,42,.04);
}

.qc-ops-card__label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0f766e;
}

.qc-ops-card__value{
  margin-top:10px;
  font-size:34px;
  font-weight:900;
  line-height:1;
  color:#0f172a;
}

.qc-ops-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.qc-ops-incidents{
  margin-top:16px;
  display:grid;
  gap:10px;
}

.qc-ops-section-title{
  font-size:13px;
  font-weight:800;
  color:#0f172a;
}

.qc-ops-incident{
  padding:12px 14px;
  border-radius:14px;
  background:#fffaf0;
  border:1px solid rgba(245,158,11,.18);
}

.qc-ops-incident__title{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
}

.qc-quality-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.qc-quality-card{
  padding:16px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}

.qc-quality-card__label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0369a1;
}

.qc-quality-card__value{
  margin-top:10px;
  font-size:34px;
  font-weight:900;
  line-height:1;
  color:#0f172a;
}

.qc-quality-trends{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.qc-quality-sections{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:14px;
  margin-top:16px;
}

.qc-quality-reasons,
.qc-quality-hotspots{
  display:grid;
  gap:10px;
}

.qc-quality-reason{
  padding:12px 14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
}

.qc-quality-reason__label{
  font-size:13px;
  font-weight:800;
  color:#0f172a;
}

.qc-quality-reason__meta{
  margin-top:4px;
  font-size:12px;
  color:#64748b;
}

.qc-quality-hotspot{
  padding:14px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 8px 20px rgba(15,23,42,.03);
}

.qc-quality-hotspot__title{
  font-size:15px;
  font-weight:900;
  color:#0f172a;
}

.qc-quality-hotspot__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
  margin-top:12px;
  color:#334155;
  font-size:13px;
}

.qc-auto-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.qc-toolbar-left,
.qc-toolbar-right{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.qc-toolbar-left{
  margin-bottom:8px;
}

.qc-toolbar-left .btn,
.qc-cut-actions .btn,
.qc-decision-actions .btn{
  min-height:34px;
  padding:6px 12px;
  font-size:12px;
}

.qc-range-row--compact{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.qc-mini-box{
  padding:8px 10px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}

.qc-mini-box__label{
  font-size:9px;
  font-weight:700;
  color:#6b7280;
  margin-bottom:2px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.qc-mini-box__value{
  font-size:13px;
  font-weight:800;
  color:#111827;
  line-height:1.15;
}

.qc-cut-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}

.qc-cut-status{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#334155;
  font-size:13px;
}

.qc-cut-status--ok{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}

.qc-cut-status--bad{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}

.qc-check-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

.qc-check-grid label{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:12px;
  line-height:1.15;
  color:#f3f4f6;
}

.qc-check-grid input[type="checkbox"]{
  margin-top:2px;
}

.qc-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.qc-form-grid select,
.qc-form-grid input{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  margin-top:4px;
  font-size:12px;
}

.qc-decision-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.08);
}

/* responsive */
@media (max-width:1200px){
  .qc-topbar-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .qc-player-stage--with-sideinfo{
    grid-template-columns:1fr;
  }

  .qc-video-sidecard{
    order:2;
  }

  .qc-video-center{
    order:1;
  }

  .qc-player-video--practical{
    max-height:none;
  }

  .qc-auto-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .qc-ops-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .qc-quality-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .qc-auto-details,
  .qc-auto-sections{
    grid-template-columns:1fr;
  }

  .qc-quality-sections{
    grid-template-columns:1fr;
  }
}

@media (max-width:1024px){
  .qc-header-strip{
    grid-template-columns:1fr;
  }

  .qc-actions-grid{
    grid-template-columns:1fr;
  }

  .qc-range-row--compact{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:768px){
  body:has(#qcReviewPanel) .container{
    padding-left:12px;
    padding-right:12px;
  }

  .qc-topbar-grid,
  .qc-form-grid{
    grid-template-columns:1fr;
  }

  .qc-toolbar-left,
  .qc-cut-actions,
  .qc-decision-actions,
  .qc-timeline-toolbar{
    flex-direction:column;
    align-items:stretch;
  }

  .qc-timeline-toolbar-left,
  .qc-timeline-toolbar-right{
    width:100%;
  }

  .qc-timeline-body{
    grid-template-columns:1fr;
  }

  .qc-timeline-left{
    display:none;
  }

  .qc-side-speed-row{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .qc-side-speed-row--wide{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .qc-speed-btn{
    flex:none;
  }

  .qc-range-row--compact{
    grid-template-columns:1fr 1fr;
  }

  .qc-player-video--practical{
    max-height:none;
    min-height:0;
  }

  .qc-video-frame-stack{
    min-height:clamp(220px,52vh,460px);
    height:clamp(220px,52vh,460px);
  }

  .qc-hands-status{
    left:10px;
    right:10px;
    bottom:10px;
    font-size:11px;
  }

  .qc-auto-metrics{
    grid-template-columns:1fr;
  }

  .qc-ops-grid{
    grid-template-columns:1fr;
  }

  .qc-quality-grid,
  .qc-quality-hotspot__grid{
    grid-template-columns:1fr;
  }

  .qc-auto-score{
    font-size:30px;
  }
}

.qc-delete-ranges-layer{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.qc-delete-range{
  position:absolute;
  top:0;
  bottom:0;
  background:rgba(239,68,68,.22);
  border-left:2px solid #ef4444;
  border-right:2px solid #ef4444;
}

.qc-range-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.qc-range-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  color:#111827;
}

.qc-range-chip__remove{
  border:0;
  background:#fee2e2;
  color:#b91c1c;
  width:20px;
  height:20px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  line-height:1;
}

.qc-job-note{
  width:100%;
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  font-size:12px;
  line-height:1.4;
}

.qc-preview-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(94,208,192,.16);
  color:#0f766e;
  font-size:12px;
  font-weight:700;
}

.qc-timeline-selection{
  background:rgba(239,68,68,.18);
  border-left:2px solid #ef4444;
  border-right:2px solid #ef4444;
}

.task-recorder-overlay{
  position:fixed;
  inset:0;
  z-index:3000;
  background:#05070a;
  color:#fff;
  margin-top:0 !important;
  display:block !important;
  overflow:hidden;
}

.task-recorder-overlay[hidden]{
  display:none !important;
}

.task-recorder-video{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  background:#000 !important;
  border-radius:0 !important;
  display:block;
}

.task-recorder-video[hidden]{
  display:none !important;
}

.task-recorder-topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:calc(env(safe-area-inset-top, 0px) + 16px) 16px 18px;
  background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%);
}

.task-recorder-topcopy{
  display:none;
}

.task-recorder-timer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.42);
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
}

.task-recorder-close{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 16px);
  left:16px;
  z-index:3002;
  width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:28px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.task-recorder-bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:24px 16px calc(env(safe-area-inset-bottom, 0px) + 26px);
  background:linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 100%);
}

.task-recorder-toggle{
  width:88px;
  height:88px;
  border:4px solid rgba(255,255,255,.88);
  border-radius:999px;
  background:rgba(255,255,255,.14);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}

.task-recorder-toggle:hover{
  transform:scale(1.02);
}

.task-recorder-toggle__inner{
  width:56px;
  height:56px;
  border-radius:999px;
  background:#ff546d;
  transition:all .18s ease;
}

.task-recorder-toggle[data-state="recording"] .task-recorder-toggle__inner{
  width:30px;
  height:30px;
  border-radius:10px;
  background:#ff546d;
}

.task-recorder-preview-actions{
  width:100%;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.task-recorder-preview-actions[hidden]{
  display:none !important;
}

.task-recorder-legacy-actions,
.task-recorder-overlay [id^="recording-settings-"],
.task-recorder-overlay [id^="recording-landscape-"]{
  display:none !important;
}

@media (max-width: 720px){
  .task-recorder-topbar{
    padding:calc(env(safe-area-inset-top, 0px) + 14px) 14px 16px;
  }

  .task-recorder-bottom{
    padding:18px 14px calc(env(safe-area-inset-bottom, 0px) + 22px);
  }

  .task-recorder-preview-actions{
    flex-direction:column;
  }

.task-recorder-preview-actions .btn{
    width:100%;
  }
}

.qc-enterprise-list{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.qc-enterprise-item{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,252,.96) 100%);
}

.qc-enterprise-item__title{
  font-weight:800;
  color:#0f172a;
}

/* =========================
   APP UX REFRESH
========================= */
.app-page,
.app-page button,
.app-page input,
.app-page select,
.app-page textarea{
  font-family:"Manrope", "Segoe UI", sans-serif;
}

.app-page{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(93,208,192,.18), transparent 32%),
    linear-gradient(180deg, #f7fbff 0%, #effaf6 42%, #f8fbff 100%);
}

.app-page .nav{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
}

.app-page .section{
  padding:34px 0 64px;
}

.user-header{
  grid-template-columns:auto auto 1fr auto;
  gap:18px;
}

.user-header__brand{
  min-width:0;
  display:flex;
  align-items:center;
}

.user-header__context{
  display:grid;
  gap:2px;
}

.user-header__eyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
  font-weight:800;
}

.user-header__page{
  font-size:15px;
  color:#0f172a;
}

.user-header__desktop{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}

.user-header__tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.78);
  color:#475569;
  font-weight:700;
  transition:all .18s ease;
}

.user-header__tab:hover{
  transform:translateY(-1px);
  border-color:rgba(94,208,192,.55);
  color:#0f172a;
}

.user-header__tab--active{
  background:linear-gradient(135deg, #5ed0c0 0%, #00bda2 100%);
  border-color:transparent;
  color:#ffffff;
  box-shadow:0 14px 34px rgba(0,189,162,.22);
}

.user-header__tab[data-nav-current="true"],
.admin-header__tab[data-nav-current="true"],
.user-mobile-menu__link[data-nav-current="true"],
.admin-mobile-menu__link[data-nav-current="true"],
.user-bottom-nav__item[data-nav-current="true"]{
  cursor:default;
}

.user-header__burger{
  display:none;
}

.user-mobile-menu{
  display:none;
  border-top:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
}

.user-mobile-menu__inner{
  display:grid;
  gap:12px;
  padding:14px 0 18px;
}

.user-mobile-menu__link{
  display:block;
  padding:13px 16px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(148,163,184,.18);
  font-weight:700;
  color:#334155;
}

.user-mobile-menu__link--active{
  background:linear-gradient(135deg, rgba(94,208,192,.16), rgba(0,189,162,.14));
  border-color:rgba(0,189,162,.22);
  color:#0f172a;
}

.user-mobile-menu__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.header-lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
}

.header-lang-toggle__eyebrow{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#64748b;
}

.header-lang-toggle .langLabel{
  font-weight:800;
  color:#0f172a;
}

.page-stack{
  display:grid;
  gap:24px;
}

.page-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(280px, .95fr);
  gap:18px;
  align-items:stretch;
}

.page-hero__panel,
.page-hero__aside{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(148,163,184,.16);
  border-radius:32px;
  padding:28px;
  box-shadow:0 24px 60px rgba(15,23,42,.08);
}

.page-hero__panel{
  background:
    radial-gradient(circle at top right, rgba(94,208,192,.24), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,251,255,.94));
}

.page-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  color:#0f172a;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.page-hero__title{
  margin:14px 0 8px;
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.02;
  color:#0f172a;
}

.page-hero__lead{
  color:#475569;
  max-width:64ch;
}

.page-hero__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.page-hero__aside{
  display:grid;
  gap:14px;
  align-content:start;
}

.hero-status{
  display:grid;
  gap:10px;
}

.hero-status__label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}

.hero-status__value{
  font-size:20px;
  font-weight:800;
  color:#0f172a;
  line-height:1.2;
}

.hero-status__text{
  color:#475569;
  line-height:1.55;
}

.hero-status__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.surface{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(148,163,184,.14);
  border-radius:28px;
  padding:24px;
  box-shadow:0 18px 40px rgba(15,23,42,.05);
}

.surface--soft{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,251,255,.95));
}

.surface--warning{
  background:linear-gradient(180deg, #fffaf2, #ffffff);
  border-color:#f3dfb6;
}

.surface--success{
  background:linear-gradient(180deg, #f0fdf7, #ffffff);
  border-color:rgba(16,185,129,.18);
}

.surface__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.surface__eyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#94a3b8;
}

.surface__title{
  margin:0;
  font-size:22px;
  font-weight:800;
  color:#0f172a;
}

.surface__subtitle{
  margin-top:6px;
  color:#64748b;
}

.surface__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.metric-grid{
  display:grid;
  gap:16px;
}

.metric-grid--2{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.metric-grid--3{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.metric-grid--4{
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.metric-card{
  min-width:0;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(148,163,184,.16);
  border-radius:24px;
  padding:20px;
  box-shadow:0 14px 34px rgba(15,23,42,.05);
}

.metric-card__label{
  display:block;
  margin-bottom:10px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#64748b;
}

.metric-card__value{
  display:block;
  font-size:30px;
  font-weight:800;
  color:#0f172a;
  line-height:1;
}

.metric-card__hint{
  display:block;
  margin-top:8px;
  color:#64748b;
  line-height:1.5;
}

.content-grid{
  display:grid;
  gap:24px;
}

.content-grid--sidebar{
  grid-template-columns:minmax(0, 1.45fr) minmax(280px, .9fr);
  align-items:start;
}

.stack-sm{
  display:grid;
  gap:12px;
}

.stack-md{
  display:grid;
  gap:16px;
}

.stack-lg{
  display:grid;
  gap:20px;
}

.notice-stack{
  display:grid;
  gap:14px;
}

.notice{
  display:grid;
  gap:10px;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.92);
}

.notice--warning{
  border-color:rgba(245,158,11,.26);
  background:rgba(255,251,235,.9);
}

.notice--danger{
  border-color:rgba(239,68,68,.24);
  background:rgba(254,242,242,.9);
}

.notice--info{
  border-color:rgba(59,130,246,.2);
  background:rgba(239,246,255,.9);
}

.notice--success{
  border-color:rgba(16,185,129,.18);
  background:rgba(240,253,247,.92);
}

.notice__title{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#0f172a;
}

.notice__body{
  color:#475569;
}

.progress-list,
.detail-list,
.summary-list{
  display:grid;
  gap:12px;
}

.progress-item{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.14);
  background:#ffffff;
}

.progress-item__title{
  font-weight:800;
  color:#0f172a;
}

.progress-item__text{
  margin-top:4px;
  color:#64748b;
  font-size:14px;
}

.summary-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.summary-item{
  min-width:0;
  padding:16px 18px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid rgba(148,163,184,.14);
}

.summary-item__label{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#94a3b8;
}

.summary-item__value{
  display:block;
  color:#0f172a;
  font-weight:700;
  line-height:1.45;
}

.quick-list{
  display:grid;
  gap:10px;
}

.quick-list__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:#ffffff;
}

.quick-list__item strong{
  color:#0f172a;
}

.quick-list__item span{
  color:#64748b;
}

.compact-checklist{
  display:grid;
  gap:8px;
  padding-left:18px;
  margin:0;
}

.compact-checklist li{
  color:#475569;
  line-height:1.5;
}

.info-collapse{
  border-radius:24px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.94);
  overflow:hidden;
}

.info-collapse > summary{
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  font-weight:800;
  color:#0f172a;
}

.info-collapse > summary::-webkit-details-marker{
  display:none;
}

.info-collapse__meta{
  color:#64748b;
  font-weight:600;
  font-size:14px;
}

.info-collapse__body{
  padding:0 20px 20px;
}

.form-layout{
  display:grid;
  gap:24px;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  align-items:start;
}

.form-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.field{
  min-width:0;
}

.field--full{
  grid-column:1 / -1;
}

.field label{
  display:block;
  margin-bottom:6px;
  font-weight:700;
  color:#0f172a;
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.28);
  background:#ffffff;
  color:#0f172a;
}

.field input:disabled{
  background:#f8fafc;
  color:#64748b;
  cursor:not-allowed;
}

.field__help{
  margin-top:6px;
  color:#64748b;
  font-size:14px;
}

.section-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.task-list,
.submission-list,
.payment-list{
  display:grid;
  gap:16px;
}

.task-card,
.submission-card,
.payment-card,
.admin-user-card{
  min-width:0;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.14);
  background:#ffffff;
  box-shadow:0 14px 34px rgba(15,23,42,.04);
}

.task-card__header,
.submission-card__header,
.payment-card__header,
.admin-user-header{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-start;
  margin-bottom:14px;
}

.task-card__title,
.submission-card__title,
.payment-card__title{
  margin:0;
  font-size:22px;
  line-height:1.12;
  color:#0f172a;
}

.task-card__meta,
.submission-card__meta,
.payment-card__meta,
.admin-user-meta,
.data-lines{
  display:grid;
  gap:10px;
}

.data-line{
  color:#475569;
  line-height:1.55;
}

.admin-user-meta{
  color:#475569;
  line-height:1.55;
}

.admin-user-meta strong{
  color:#0f172a;
}

.data-line strong{
  color:#0f172a;
}

.admin-participants-list{
  display:grid;
  gap:18px;
}

.admin-pagination-bar{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.admin-participant-card{
  display:grid;
  gap:18px;
}

.admin-participant-card__summary{
  margin-bottom:0;
}

.admin-participant-card__identity{
  min-width:0;
  display:grid;
  gap:8px;
}

.admin-participant-card__topline{
  display:flex;
  gap:10px 14px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.admin-participant-card__name{
  margin:0;
  font-size:24px;
  line-height:1.08;
  color:#0f172a;
}

.admin-participant-card__id{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.16);
  color:#64748b;
  font-size:12px;
  font-weight:700;
  word-break:break-all;
}

.admin-participant-card__subtitle{
  color:#0f172a;
  font-weight:700;
  line-height:1.45;
}

.admin-participant-card__context{
  display:flex;
  gap:8px 10px;
  flex-wrap:wrap;
  color:#64748b;
  font-size:14px;
  line-height:1.5;
}

.admin-participant-card__context span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(248,250,252,.9);
  border:1px solid rgba(148,163,184,.14);
}

.admin-participant-card__badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.admin-participant-card__snapshot{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.admin-participant-stat{
  min-width:0;
  display:grid;
  gap:6px;
  padding:14px 16px;
  border-radius:18px;
  background:#f8fbff;
  border:1px solid rgba(59,130,246,.10);
}

.admin-participant-stat__value{
  font-size:24px;
  line-height:1;
  font-weight:900;
  color:#0f172a;
}

.admin-participant-stat__label{
  color:#64748b;
  font-size:13px;
  line-height:1.4;
}

.admin-participant-checklist{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.admin-participant-checklist__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  border:1px solid rgba(148,163,184,.18);
}

.admin-participant-checklist__item--ok{
  background:rgba(16,185,129,.08);
  color:#047857;
}

.admin-participant-checklist__item--missing{
  background:rgba(245,158,11,.10);
  color:#b45309;
}

.admin-participant-checklist__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
}

.admin-participant-card__note{
  display:grid;
  gap:6px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(94,208,192,.12), rgba(255,255,255,.95));
  border:1px solid rgba(94,208,192,.16);
  color:#475569;
  line-height:1.55;
}

.admin-participant-card__note strong{
  color:#0f172a;
}

.admin-participant-card__actions{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.admin-participant-card__details{
  display:grid;
  gap:14px;
  padding:16px 18px 18px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid rgba(148,163,184,.14);
}

.admin-participant-card__details > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  font-weight:800;
  color:#0f172a;
  list-style:none;
}

.admin-participant-card__details > summary::-webkit-details-marker{
  display:none;
}

.admin-participant-card__details > summary::after{
  content:"+";
  font-size:22px;
  line-height:1;
  color:#64748b;
  transition:transform .18s ease, color .18s ease;
}

.admin-participant-card__details[open] > summary::after{
  transform:rotate(45deg);
  color:#0f172a;
}

.admin-participant-card__details-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.admin-participant-detail{
  min-width:0;
  display:grid;
  gap:12px;
  padding:16px 18px;
  border-radius:18px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.14);
}

.admin-participant-detail--wide{
  grid-column:1 / -1;
}

.admin-participant-detail__title{
  margin:0;
  font-size:16px;
  line-height:1.2;
  color:#0f172a;
}

.admin-participant-pill-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.admin-participant-task-list{
  display:grid;
  gap:10px;
}

.admin-participant-task{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.14);
  background:#ffffff;
}

.admin-participant-task__header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.admin-participant-task__title{
  font-weight:800;
  color:#0f172a;
  line-height:1.35;
}

.task-uploader,
.payment-summary-box,
.identity-links{
  margin-top:16px;
  padding:16px 18px;
  border-radius:20px;
  background:#f8fbff;
  border:1px solid rgba(59,130,246,.12);
}

.task-uploader__title{
  margin:0 0 8px;
  font-size:15px;
  font-weight:800;
  color:#1d4ed8;
}

.task-uploader__actions,
.submission-card__actions,
.identity-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.task-state-box{
  margin-top:16px;
  padding:16px 18px;
  border-radius:20px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.18);
  color:#475569;
}

.highlight-box{
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.14);
  background:#ffffff;
}

.highlight-box__title{
  margin:0 0 8px;
  font-size:15px;
  font-weight:800;
  color:#0f172a;
}

.admin-workspace-grid{
  display:grid;
  gap:18px;
  grid-template-columns:minmax(320px, 0.88fr) minmax(0, 1.12fr);
  align-items:start;
}

.admin-payment-queue,
.admin-video-queue{
  display:grid;
  gap:18px;
}

.admin-video-queue{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.admin-payment-card,
.admin-video-task-card{
  min-width:0;
  display:grid;
  gap:18px;
  text-align:left;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.16);
  background:#ffffff;
  box-shadow:0 14px 34px rgba(15,23,42,.04);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.admin-payment-card:hover,
.admin-video-task-card:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(15,23,42,.06);
}

.admin-payment-card.is-active,
.admin-video-task-card.is-active{
  border-color:rgba(59,130,246,.28);
  background:rgba(239,246,255,.92);
  box-shadow:0 18px 40px rgba(59,130,246,.10);
}

.admin-payment-card__summary,
.admin-video-task-card__summary{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.admin-payment-card__identity,
.admin-video-task-card__identity{
  min-width:0;
  display:grid;
  gap:8px;
}

.admin-payment-card__topline,
.admin-video-task-card__topline{
  display:flex;
  gap:10px 14px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.admin-payment-card__name,
.admin-video-task-card__name{
  margin:0;
  font-size:22px;
  line-height:1.08;
  color:#0f172a;
}

.admin-payment-card__id,
.admin-video-task-card__id{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.16);
  color:#64748b;
  font-size:12px;
  font-weight:700;
  word-break:break-all;
}

.admin-payment-card__subtitle,
.admin-video-task-card__subtitle{
  color:#0f172a;
  font-weight:700;
  line-height:1.45;
}

.admin-payment-card__context,
.admin-video-task-card__context{
  display:flex;
  gap:8px 10px;
  flex-wrap:wrap;
  color:#64748b;
  font-size:14px;
  line-height:1.5;
}

.admin-payment-card__context span,
.admin-video-task-card__context span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(248,250,252,.9);
  border:1px solid rgba(148,163,184,.14);
}

.admin-payment-card__badges,
.admin-video-task-card__badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.admin-payment-card__snapshot,
.admin-video-task-card__snapshot{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.admin-payment-stat,
.admin-video-task-stat{
  min-width:0;
  display:grid;
  gap:6px;
  padding:14px 16px;
  border-radius:18px;
  background:#f8fbff;
  border:1px solid rgba(59,130,246,.10);
}

.admin-payment-stat__value,
.admin-video-task-stat__value{
  font-size:22px;
  line-height:1.05;
  font-weight:900;
  color:#0f172a;
}

.admin-payment-stat__label,
.admin-video-task-stat__label{
  color:#64748b;
  font-size:13px;
  line-height:1.4;
}

.admin-payment-card__note,
.admin-video-task-card__note{
  display:grid;
  gap:6px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(94,208,192,.12), rgba(255,255,255,.95));
  border:1px solid rgba(94,208,192,.16);
  color:#475569;
  line-height:1.55;
}

.admin-payment-card__note strong,
.admin-video-task-card__note strong{
  color:#0f172a;
}

.admin-payment-detail{
  display:grid;
  gap:18px;
}

.admin-payment-detail__hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}

.admin-payment-detail__hero-copy{
  min-width:0;
  display:grid;
  gap:6px;
}

.admin-payment-detail__name{
  font-size:28px;
  line-height:1.05;
  font-weight:900;
  color:#0f172a;
}

.admin-payment-detail__grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
}

.admin-payment-panel{
  padding:22px;
}

.admin-payment-panel__title{
  margin:0;
  font-size:20px;
  line-height:1.12;
  color:#0f172a;
}

.admin-payment-panel__subtitle{
  margin:8px 0 16px;
}

.admin-payment-form{
  display:grid;
  gap:16px;
}

.admin-payment-form textarea,
.admin-payment-form input,
.admin-payment-form select{
  width:100%;
}

.admin-payment-panel__summary{
  display:grid;
  gap:8px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:#f8fafc;
}

.admin-payment-panel__summary-value{
  color:#0f172a;
  font-weight:800;
  line-height:1.5;
}

.admin-payment-panel__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.admin-payment-history{
  display:grid;
  gap:12px;
}

.admin-payment-history__item{
  display:grid;
  gap:10px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:#ffffff;
}

.admin-payment-history__topline{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.admin-payment-history__amount{
  font-size:18px;
  font-weight:900;
  color:#0f172a;
}

.admin-payment-history__actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}

.admin-payment-detail__details{
  display:grid;
  gap:14px;
  padding:16px 18px 18px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid rgba(148,163,184,.14);
}

.admin-payment-detail__details > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  list-style:none;
  font-weight:800;
  color:#0f172a;
}

.admin-payment-detail__details > summary::-webkit-details-marker{
  display:none;
}

.admin-payment-detail__details > summary::after{
  content:"+";
  font-size:22px;
  line-height:1;
  color:#64748b;
  transition:transform .18s ease, color .18s ease;
}

.admin-payment-detail__details[open] > summary::after{
  transform:rotate(45deg);
  color:#0f172a;
}

.admin-payment-detail__clip-list{
  display:grid;
  gap:10px;
}

.admin-payment-detail__clip-card{
  display:grid;
  gap:6px;
  padding:14px 16px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.14);
}

.admin-payment-detail__clip-title{
  font-weight:800;
  color:#0f172a;
}

.insight-collapsible{
  border-radius:28px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 40px rgba(15,23,42,.04);
  overflow:hidden;
}

.insight-collapsible > summary{
  list-style:none;
  cursor:pointer;
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.insight-collapsible > summary::-webkit-details-marker{
  display:none;
}

.insight-collapsible__title{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:#0f172a;
}

.insight-collapsible__subtitle{
  margin-top:6px;
  color:#64748b;
}

.insight-collapsible__body{
  padding:0 24px 24px;
  display:grid;
  gap:18px;
}

.insight-collapsible__grid{
  display:grid;
  gap:18px;
}

.admin-focus-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.admin-summary-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.admin-module-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}

.admin-module-card{
  min-width:0;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.14);
  background:#ffffff;
  box-shadow:0 14px 34px rgba(15,23,42,.04);
}

.admin-module-card h3{
  margin:0 0 8px;
  color:#0f172a;
}

.admin-module-card p{
  margin:0 0 14px;
  color:#64748b;
}

.admin-shell-note{
  color:#64748b;
  font-size:14px;
}

.filters-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
}

.filters-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:18px;
}

.two-up-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}

@media (max-width: 1180px){
  .page-hero,
  .content-grid--sidebar,
  .form-layout,
  .admin-summary-grid{
    grid-template-columns:1fr;
  }

  .metric-grid--4,
  .admin-focus-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 1024px){
  .user-header{
    grid-template-columns:auto 1fr auto;
  }

  .user-header__desktop{
    display:none;
  }

  .user-header__context{
    justify-self:start;
  }

  .user-header__burger{
    display:block;
  }

  .user-mobile-menu[aria-hidden="false"]{
    display:block;
  }
}

@media (max-width: 768px){
  .app-page .section{
    padding:22px 0 48px;
  }

  .page-hero__panel,
  .page-hero__aside,
  .surface,
  .metric-card,
  .task-card,
  .submission-card,
  .payment-card,
  .admin-module-card{
    padding:20px;
    border-radius:24px;
  }

  .page-hero__title{
    font-size:30px;
  }

  .page-hero__actions,
  .hero-status__actions,
  .section-actions,
  .task-uploader__actions,
  .submission-card__actions,
  .filters-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .metric-grid--2,
  .metric-grid--3,
  .metric-grid--4,
  .summary-grid,
  .form-grid,
  .admin-focus-grid,
  .two-up-grid,
  .insight-collapsible__grid{
    grid-template-columns:1fr;
  }

  .progress-item,
  .quick-list__item,
  .surface__header,
  .task-card__header,
  .submission-card__header,
  .payment-card__header{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================
   POLISH PASS
========================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(0,189,162,.28);
  outline-offset:3px;
}

.surface,
.metric-card,
.admin-module-card,
.task-card,
.submission-card,
.payment-card,
.admin-user-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.surface:hover,
.metric-card:hover,
.admin-module-card:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 44px rgba(15,23,42,.08);
  border-color:rgba(94,208,192,.22);
}

.page-stack > *{
  scroll-margin-top:96px;
}

.info-collapse > summary::after,
.insight-collapsible > summary::after{
  content:"+";
  font-size:20px;
  font-weight:700;
  color:#64748b;
  transition:transform .18s ease, color .18s ease;
}

.info-collapse[open] > summary::after,
.insight-collapsible[open] > summary::after{
  transform:rotate(45deg);
  color:#0f172a;
}

.page-hero__panel{
  position:relative;
  overflow:hidden;
}

.page-hero__panel::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-48px;
  bottom:-62px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(94,208,192,.24) 0%, rgba(94,208,192,0) 70%);
  pointer-events:none;
}

.page-hero__aside{
  border-style:dashed;
}

.metric-card .btn{
  margin-top:14px;
  width:100%;
}

.summary-item__value .status-badge{
  align-self:flex-start;
}

.admin-header{
  grid-template-columns:auto auto 1fr auto;
  gap:18px;
}

.admin-header__context{
  display:grid;
  gap:2px;
}

.admin-header__brand{
  display:flex;
  align-items:center;
}

.admin-header__eyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
  font-weight:800;
}

.admin-header__page{
  font-size:15px;
  color:#0f172a;
}

.admin-header__desktop{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

.admin-header__tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 15px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.2);
  background:rgba(255,255,255,.75);
  color:#475569;
  font-weight:700;
  transition:all .18s ease;
}

.admin-header__tab:hover{
  transform:translateY(-1px);
  border-color:rgba(94,208,192,.45);
  color:#0f172a;
}

.admin-header__tab--active{
  background:#0f172a;
  border-color:#0f172a;
  color:#ffffff;
  box-shadow:0 14px 28px rgba(15,23,42,.18);
}

.admin-mobile-menu__link{
  display:block;
  padding:13px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:#ffffff;
  color:#334155;
  font-weight:700;
}

.admin-mobile-menu__link--active{
  background:#0f172a;
  border-color:#0f172a;
  color:#ffffff;
}

.admin-mobile-menu__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.user-bottom-nav{
  display:none;
}

@media (max-width: 1024px){
  .admin-header{
    grid-template-columns:auto 1fr auto;
  }

  .admin-header__desktop{
    display:none;
  }

  .admin-header__context{
    justify-self:start;
  }

  .admin-header__burger{
    display:block;
  }

  .admin-mobile-menu[aria-hidden="false"]{
    display:block;
  }
}

@media (max-width: 768px){
  .app-page--user{
    padding-bottom:88px;
  }

  .app-page--user .nav{
    position:sticky;
    top:0;
  }

  .user-header{
    grid-template-columns:auto 1fr auto;
    padding-top:12px;
    padding-bottom:12px;
  }

  .logo--full{
    height:36px;
  }

  .user-header__context{
    min-width:0;
  }

  .user-header__page,
  .admin-header__page{
    font-size:14px;
  }

  .page-stack{
    gap:18px;
  }

  .page-hero{
    gap:14px;
  }

  .page-hero__panel::after{
    width:120px;
    height:120px;
    right:-24px;
    bottom:-34px;
  }

  .metric-card__value{
    font-size:26px;
  }

  .surface__title,
  .insight-collapsible__title{
    font-size:20px;
  }

  .task-card__title,
  .submission-card__title,
  .payment-card__title{
    font-size:20px;
  }

  .user-mobile-menu__actions,
  .admin-mobile-menu__actions{
    flex-direction:column;
    align-items:stretch;
  }

  .user-bottom-nav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index:1200;
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:8px;
    padding:10px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:24px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    box-shadow:0 18px 40px rgba(15,23,42,.18);
  }

  .user-bottom-nav__item{
    min-width:0;
    display:grid;
    justify-items:center;
    gap:6px;
    padding:10px 6px;
    border-radius:16px;
    color:#64748b;
    text-align:center;
  }

  .user-bottom-nav__dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:rgba(148,163,184,.6);
    transition:all .18s ease;
  }

  .user-bottom-nav__label{
    font-size:11px;
    font-weight:800;
    line-height:1.1;
    letter-spacing:.01em;
  }

  .user-bottom-nav__item--active{
    background:linear-gradient(135deg, rgba(94,208,192,.18), rgba(0,189,162,.16));
    color:#0f172a;
  }

  .user-bottom-nav__item--active .user-bottom-nav__dot{
    width:28px;
    background:#00bda2;
  }
}

@media (max-width: 1200px){
  .admin-workspace-grid,
  .admin-payment-detail__grid{
    grid-template-columns:1fr;
  }

  .admin-video-queue{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .admin-payment-card__snapshot,
  .admin-video-task-card__snapshot{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .admin-workspace-grid{
    gap:16px;
  }

  .admin-payment-card,
  .admin-video-task-card,
  .admin-payment-panel{
    padding:18px;
  }

  .admin-payment-card__summary,
  .admin-video-task-card__summary,
  .admin-payment-detail__hero,
  .admin-payment-history__topline,
  .admin-payment-history__actions{
    flex-direction:column;
    align-items:stretch;
  }

  .admin-payment-card__badges,
  .admin-video-task-card__badges{
    justify-content:flex-start;
  }

  .admin-payment-card__topline,
  .admin-video-task-card__topline{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-payment-card__snapshot,
  .admin-video-task-card__snapshot{
    grid-template-columns:1fr;
  }

  .admin-payment-detail__name{
    font-size:24px;
  }
}