/* ============================================================
      IMPORTANT:
      - ALL styles are scoped under .req-root to prevent collisions.
      - No header/footer injection. No fixed bottom bar.
      - No global overflow hacks; scrolling stays inside needed wrappers.
    ============================================================ */

    .req-root{
      --req-cyan:#36b8b5;
      --req-lp:#982587;
      --req-dp:#612466;
      --req-ink:#0b0b10;
      --req-muted: rgba(11,11,16,.65);
      --req-line: rgba(11,11,16,.10);
      --req-soft: rgba(11,11,16,.04);
      --req-shadow: 0 18px 58px rgba(12,12,18,.09);
      --req-radius: 22px;
      --req-radius2: 18px;
      --req-focus: 0 0 0 3px rgba(54,184,181,.26);
      --req-danger: rgba(239,68,68,.92);
      --req-ok: rgba(34,197,94,.92);

      color: var(--req-ink);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Inter, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      -webkit-text-size-adjust: 100%;
      max-width: 100%;
      overflow-x: clip;
    }
    @supports not (overflow-x: clip){ .req-root{ overflow-x:hidden; } }

    .req-root, .req-root *{ box-sizing: border-box; }

    .req-page{ max-width: 1160px; margin:0 auto; padding: 24px 16px 60px; }

    /* HERO */
    .req-hero{
      border:1px solid var(--req-line);
      border-radius: calc(var(--req-radius) + 10px);
      background:
        radial-gradient(circle at 10% 18%, rgba(54,184,181,.16), transparent 42%),
        radial-gradient(circle at 90% 18%, rgba(152,37,135,.14), transparent 45%),
        radial-gradient(circle at 70% 90%, rgba(97,36,102,.10), transparent 45%),
        linear-gradient(180deg, #fff 0%, #f7f8fc 100%);
      box-shadow: var(--req-shadow);
      overflow:hidden;
      padding: 22px;
      position: relative;
    }
    .req-heroTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      flex-wrap:wrap;
    }
    .req-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      border:1px solid rgba(54,184,181,.30);
      background: rgba(255,255,255,.78);
      box-shadow: 0 12px 35px rgba(12,12,18,.06);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(97,36,102,.86);
      width: fit-content;
      user-select:none;
    }
    .req-dot{ width:8px; height:8px; border-radius:999px; background: var(--req-cyan); }

    .req-h1{
      margin: 12px 0 8px;
      font-size: clamp(24px, 3.1vw, 44px);
      letter-spacing: -0.045em;
      line-height: 1.12;
    }
    .req-sub{
      margin:0;
      color: var(--req-muted);
      line-height: 1.72;
      max-width: 92ch;
      font-size: 15px;
    }

    /* BUTTONS */
    .req-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border-radius: 999px;
      padding: 10px 16px;
      border:1px solid var(--req-line);
      background: rgba(255,255,255,.92);
      color: rgba(11,11,16,.88);
      font-weight: 900;
      font-size: 14px;
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      text-decoration:none;
      white-space: nowrap;
    }
    .req-btn:hover{ transform: translateY(-1px); background: rgba(11,11,16,.03); }
    .req-btn:focus-visible{ outline:none; box-shadow: var(--req-focus); }
    .req-btnPrimary{
      background: var(--req-ink);
      border-color: var(--req-ink);
      color:#fff;
    }
    .req-btnPrimary:hover{ background: rgba(11,11,16,.92); }

    .req-btnDanger{
      border-color: rgba(239,68,68,.25);
      background: rgba(239,68,68,.06);
      color: rgba(239,68,68,.9);
      font-weight: 950;
    }

    /* NEW: Actions section between header and wizard */
    .req-actionStrip{
      margin-top: 14px;
  
      border-radius: var(--req-radius);
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(12px);
  
      padding: 12px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      flex-wrap:wrap;
    }
    .req-actionStrip strong{ font-size: 13px; letter-spacing:-0.01em; }
    .req-actionStrip span{ font-size: 12px; color: rgba(11,11,16,.62); }
    .req-actionStrip .req-left{ display:flex; flex-direction:column; gap:2px; }
    .req-actionStrip .req-right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

    /* WIZARD SHELL */
    .req-shell{
      margin-top: 16px;
      border:1px solid var(--req-line);
      border-radius: var(--req-radius);
      background:#fff;
      box-shadow: var(--req-shadow);
      overflow:hidden;
    }
    .req-shellTop{
      padding: 14px 16px;
      border-bottom:1px solid var(--req-line);
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
      backdrop-filter: blur(12px);
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
    }
    .req-titleWrap{ display:grid; gap:2px; min-width: 220px; }
    .req-titleWrap strong{ font-size:14px; letter-spacing:-0.01em; }
    .req-titleWrap span{ font-size:12px; color: rgba(11,11,16,.60); }

    .req-chips{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      justify-content:flex-end;
    }
    .req-chip{
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 1px solid var(--req-line);
      background: rgba(11,11,16,.03);
      color: rgba(97,36,102,.88);
      user-select:none;
    }
    .req-chip.req-active{
      background: linear-gradient(90deg, rgba(54,184,181,.18), rgba(152,37,135,.12));
      border-color: rgba(54,184,181,.32);
    }
    .req-chip.req-done{
      background: rgba(34,197,94,.10);
      border-color: rgba(34,197,94,.25);
      color: rgba(20,120,60,.95);
    }

    .req-bar{ height: 2px; background: rgba(11,11,16,.06); }
    .req-bar > i{
      display:block;
      height:2px;
      width: 20%;
      background: linear-gradient(90deg, rgba(54,184,181,.98), rgba(152,37,135,.95));
      transition: width .25s ease;
    }

    .req-panel{ padding: 18px 16px 20px; }
    .req-hidden{ display:none !important; }

    .req-sectionHead{ display:grid; gap:6px; margin-bottom: 14px; }
    .req-sectionHead small{
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(97,36,102,.74);
    }
    .req-sectionHead h2{
      margin:0;
      font-size: clamp(18px, 2.2vw, 26px);
      letter-spacing:-0.03em;
    }
    .req-sectionHead p{
      margin:0;
      color: var(--req-muted);
      line-height:1.7;
      font-size:14px;
      max-width: 92ch;
    }

    /* FIELDS */
    .req-grid2{ display:grid; gap:12px; grid-template-columns: 1fr; }
    @media (min-width: 768px){ .req-grid2{ grid-template-columns: 1fr 1fr; } }
    .req-grid3{ display:grid; gap:12px; grid-template-columns: 1fr; }
    @media (min-width: 980px){ .req-grid3{ grid-template-columns: 1fr 1fr 1fr; } }

    .req-label{ display:block; font-weight: 900; font-size: 13px; color: rgba(11,11,16,.86); }
    .req-help{ margin-top: 6px; font-size: 12px; color: rgba(11,11,16,.58); line-height: 1.55; }
    .req-field{
      margin-top: 8px;
      width: 100%;
      border: 1px solid var(--req-line);
      border-radius: 16px;
      padding: 12px 12px;
      font-size: 14px;
      background: #fff;
      color: rgba(11,11,16,.92);
    }
    .req-field:focus{ outline:none; box-shadow: var(--req-focus); border-color: rgba(54,184,181,.40); }
    textarea.req-field{ min-height: 96px; resize: vertical; }

    /* Inline validation */
    .req-invalid .req-field{ border-color: rgba(239,68,68,.40); box-shadow: 0 0 0 3px rgba(239,68,68,.14); }
    .req-err{ margin-top: 6px; font-size: 12px; color: rgba(239,68,68,.95); display:none; }
    .req-invalid .req-err{ display:block; }

    /* Service picks */
    .req-cards{ display:grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
    @media (min-width: 820px){ .req-cards{ grid-template-columns: 1fr 1fr; } }
    .req-pick{
      border:1px solid var(--req-line);
      border-radius: var(--req-radius2);
      padding: 14px;
      background:#fff;
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      display:flex;
      gap: 12px;
      align-items:flex-start;
    }
    .req-pick:hover{ transform: translateY(-1px); background: rgba(11,11,16,.02); }
    .req-pick input{ margin-top: 2px; }
    .req-pick strong{ display:block; font-size: 14px; letter-spacing:-0.01em; }
    .req-pick span{ display:block; font-size: 12px; color: var(--req-muted); margin-top: 4px; line-height: 1.5; }
    .req-pick small{
      display:inline-flex;
      margin-top: 8px;
      font-weight: 900;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(11,11,16,.55);
    }

    .req-actions{
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      gap: 10px;
      margin-top: 16px;
      align-items:center;
    }
    .req-note{
      font-size: 12px;
      color: rgba(11,11,16,.62);
      line-height: 1.6;
      margin:0;
    }

    /* Quick tags */
    .req-tagRow{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
    .req-tagPill{
      border:1px solid var(--req-line);
      background:#fff;
      border-radius:999px;
      padding: 8px 10px;
      font-weight: 950;
      font-size: 12px;
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      color: rgba(11,11,16,.80);
    }
    .req-tagPill:hover{
      transform: translateY(-1px);
      background: rgba(54,184,181,.10);
      border-color: rgba(54,184,181,.35);
    }
    .req-tagPill:focus-visible{ outline:none; box-shadow: var(--req-focus); }

    .req-searchRow{
      display:flex;
      gap: 10px;
      align-items:center;
      flex-wrap:wrap;
      margin-top: 10px;
    }
    .req-searchRow input{ flex: 1; min-width: 220px; }

    .req-mutedBox{
      border:1px solid var(--req-line);
      background: rgba(11,11,16,.02);
      border-radius: var(--req-radius2);
      padding: 12px;
    }

    /* Toast (kept, but no resume/dismiss UI) */
    .req-toast{
      position: fixed;
      right: 14px;
      bottom: 14px;
      z-index: 50;
      max-width: 420px;
      border: 1px solid var(--req-line);
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(12px);
      border-radius: 18px;
      box-shadow: var(--req-shadow);
      padding: 12px 12px;
      display:none;
    }
    .req-toast.req-show{ display:flex; gap: 10px; align-items:flex-start; }
    .req-toast i{
      width: 10px; height: 10px; border-radius: 999px; background: var(--req-cyan);
      margin-top: 5px;
      flex: 0 0 auto;
    }
    .req-toast strong{ display:block; font-size: 13px; letter-spacing:-0.01em; }
    .req-toast span{ display:block; font-size: 12px; color: rgba(11,11,16,.62); margin-top: 2px; }

    /* RESPONSIVE TABLE */
    .req-tableShell{
      border:1px solid var(--req-line);
      border-radius: var(--req-radius2);
      background:#fff;
      overflow:hidden;
    }
    .req-tableHead{
      padding: 12px 12px;
      border-bottom: 1px solid var(--req-line);
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80));
    }
    .req-tableHead strong{ font-size: 13px; letter-spacing:-0.01em; }
    .req-tableHead span{ font-size: 12px; color: rgba(11,11,16,.60); }

    .req-tableScroll{
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      touch-action: pan-x;
      scrollbar-gutter: stable both-edges;
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
      position: relative;
    }
    .req-tableShell:hover .req-tableScroll{
      scrollbar-color: rgba(11,11,16,.32) rgba(11,11,16,.08);
    }
    .req-tableScroll::-webkit-scrollbar{ height: 10px; }
    .req-tableScroll::-webkit-scrollbar-track{ background: transparent; border-radius: 999px; }
    .req-tableShell:hover .req-tableScroll::-webkit-scrollbar-track{ background: rgba(11,11,16,.06); }
    .req-tableScroll::-webkit-scrollbar-thumb{
      background: transparent;
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    .req-tableShell:hover .req-tableScroll::-webkit-scrollbar-thumb{
      background: linear-gradient(90deg, rgba(11,11,16,.18), rgba(11,11,16,.38));
    }

    .req-table{
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      min-width: 980px;
      text-align: left;
    }
    .req-thead th{
      position: sticky;
      top: 0;
      z-index: 1;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(11,11,16,.62);
      padding: 14px 14px;
      border-bottom:1px solid var(--req-line);
      white-space: nowrap;
    }
    .req-tbody td{
      padding: 14px 14px;
      border-bottom: 1px solid rgba(11,11,16,.07);
      font-size: 14px;
      color: rgba(11,11,16,.88);
      vertical-align: top;
      background:#fff;
    }
    .req-tbody tr:hover td{ background: rgba(11,11,16,.02); }

    .req-miniBtn{
      border:1px solid var(--req-line);
      background: rgba(11,11,16,.03);
      color: rgba(11,11,16,.85);
      border-radius: 999px;
      padding: 8px 10px;
      font-weight: 950;
      font-size: 12px;
      cursor: pointer;
      transition: transform .15s ease, background .15s ease;
    }
    .req-miniBtn:hover{ background: rgba(11,11,16,.06); transform: translateY(-1px); }
    .req-miniBtn:focus-visible{ outline:none; box-shadow: var(--req-focus); }
    .req-miniBtn.req-danger{
      border-color: rgba(239,68,68,.22);
      background: rgba(239,68,68,.06);
      color: rgba(239,68,68,.92);
    }

    /* Mobile card mode (<768px) */
    @media (max-width: 767.98px){
      .req-table{ min-width: 0; }
      .req-thead{
        position:absolute;
        width:1px;height:1px;
        padding:0;margin:-1px;
        overflow:hidden;
        clip: rect(0,0,0,0);
        white-space:nowrap;
        border:0;
      }
      .req-tbody, .req-tbody tr, .req-tbody td{ display:block; }
      .req-tbody tr{
        margin: 12px 12px 14px;
        border:1px solid var(--req-line);
        border-radius: var(--req-radius);
        overflow:hidden;
        box-shadow: 0 14px 40px rgba(12,12,18,.06);
      }
      .req-tbody td{
        border:0;
        border-top: 1px solid rgba(11,11,16,.07);
        padding: 12px 12px;
      }
      .req-tbody td:first-child{ border-top: 0; }
      .req-tbody td::before{
        content: attr(data-label);
        display:block;
        font-size: 11px;
        font-weight: 950;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: rgba(11,11,16,.55);
        margin-bottom: 6px;
      }
      .req-tableScroll{ overflow-x: hidden; }
    }

    .req-srOnly{
      position:absolute !important;
      width:1px;height:1px;
      padding:0;margin:-1px;
      overflow:hidden;clip:rect(0,0,0,0);
      white-space:nowrap;border:0;
    }

    /* Summary cards */
    .req-summaryGrid{
      display:grid;
      gap: 10px;
      grid-template-columns: 1fr;
      margin-top: 12px;
    }
    @media (min-width: 900px){ .req-summaryGrid{ grid-template-columns: 1fr 1fr; } }
    .req-summaryCard{
      border:1px solid var(--req-line);
      border-radius: var(--req-radius2);
      background:#fff;
      padding: 14px;
    }
    .req-summaryCard strong{ display:block; font-size: 14px; letter-spacing:-0.01em; }
    .req-summaryCard p{ margin: 6px 0 0; font-size: 13px; color: rgba(11,11,16,.68); line-height: 1.6; }

    .req-kv{ display:grid; gap: 8px; margin-top: 10px; }
    .req-kvRow{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      justify-content:space-between;
      border-top: 1px solid rgba(11,11,16,.06);
      padding-top: 10px;
      font-size: 13px;
    }
    .req-kvRow:first-child{ border-top: 0; padding-top: 0; }
    .req-kvRow b{ color: rgba(11,11,16,.88); }
    .req-kvRow span{ color: rgba(11,11,16,.66); text-align:right; max-width: 70%; }

    /* Timeline */
    .req-timeline{ margin-top: 14px; display:grid; gap: 10px; }
    .req-tItem{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      border: 1px solid var(--req-line);
      border-radius: 18px;
      padding: 12px;
      background: rgba(11,11,16,.02);
    }
    .req-tDot{
      width: 10px; height: 10px; border-radius: 999px; background: rgba(11,11,16,.20);
      margin-top: 5px;
      flex: 0 0 auto;
    }
    .req-tItem.req-active .req-tDot{ background: var(--req-cyan); }
    .req-tItem.req-done .req-tDot{ background: var(--req-ok); }
    .req-tItem strong{ display:block; font-size: 13px; }
    .req-tItem span{ display:block; font-size: 12px; color: rgba(11,11,16,.62); margin-top: 2px; line-height: 1.55; }