/* app.css */
:root{
      --bg-deep:#000000 !important;
      --grad:linear-gradient(130deg,#000000 0%,#18042527 50%,#0218127e 100%);
      --menu:#000000e1 ;
      --glass:#0000006e;
      --glass-2:#11101012;
      --border:#ffffff1a;
      --ink:#dcdbf0e1;
      --muted:#c6d0f0a6;
      --brand:#1ca490da;
      --brand-600:#21bca5;
      --brandsoft:#21bca588;
      --brand-purp: #a200ffc5;
  
      --aura:
        0 4px 18px rgba(255, 255, 255, 0.123),
        0 8px 18px rgba(33, 188, 165, 0.185),
        1px 8px 18px rgba(162, 0, 255, 0.132);
        
      --radius:16px;
      --radius-sm:12px;
      --maxw: clamp(1200px, 90vw, 1600px);
      --nav-maxw: clamp(1200px, 96vw, 1900px);

    }
    *{box-sizing:border-box}
    html,body{ margin:0; padding:0; font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:transparent !important; }
    a{color:inherit;text-decoration:none}
    .hidden{display:none !important}

    /* ====== STARFIELD + BACKGROUND ====== */
    #bg-stars{ position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; opacity:0; animation: fvStarFade 3.7s ease forwards; }
    .bg{ position:fixed; inset:0; z-index:-2; background:var(--grad); filter:blur(6px) brightness(.9) saturate(1.05); transform:scale(1.03); }
    .global-darken{ position:fixed; inset:0; z-index:-0.5; background:rgba(0,0,0,0.25); pointer-events:none; }
    @keyframes fvStarFade{ 0%{opacity:0} 60%{opacity:.2} 100%{opacity:.55} }

    /* ====== HEADER ====== */
    header{ position:sticky; top:0; z-index:50; -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px); background:var(--glass); border-bottom:1px solid var(--border); }
    .nav{ max-width:var(--nav-maxw); margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .brand{ display:flex; align-items:center; gap:10px; }
    .logo { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:transparent; box-shadow: 0 0 0 2px rgba(92,140,69,.25), 0 10px 20px rgba(92,140,69,.18);}
    .logo img { width:100%; height:100%; object-fit:contain; display:block;}
    .brand-title{ font-weight:700; }
    .brand-sub{ font-size:.85rem; color:var(--muted); }

    /* ====== BUTTONS ====== */
    .cta{
      background:linear-gradient(180deg, var(--brand), var(--brand-600));
      color:#05120f; font-weight:800;
      border:none; border-radius:12px;
      padding:10px 16px; cursor:pointer;
      box-shadow:var(--bg-deep);
    }

    .cta:hover{ background: var(--grad); border-color:rgba(34, 1, 63, 0.747); color: var(--ink); box-shadow:var(--aura); transform: translateY(-3px); }
    
    .btn{
      background:var(--glass-2);
      color:var(--ink);
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px 16px;
      cursor:pointer;
      font-weight: 600;
    }
    .btn:hover{ background:rgba(33,188,165,0.12); border-color:rgba(33,188,165,0.35); color: var(--brand); transform: translateY(-2px); }


    /* ====== DROPDOWN ====== */
    .dev-nav ul{ list-style:none; margin:0; padding:0 }
    .dropdown{ position:relative }
    .dropdown-toggle {
      background: none;
      border: none;
      outline: none;
      box-shadow: none;
      -webkit-tap-highlight-color: transparent;
    }

    .dropdown-toggle:focus,
    .dropdown-toggle:focus-visible {
      outline: none;
      box-shadow: none;
    }

    .dropdown-toggle:hover{ background:none; border: none; transform: translateY(-2px); }
    .dropdown-menu{
      display:none; position:absolute; top:110%; right:0;
      background:var(--menu); border:1px solid rgba(255,255,255,0.12);
      border-radius:var(--radius-sm); box-shadow:var(--aura);
      min-width:240px; padding:8px 0; z-index:100;
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      backdrop-filter:blur(14px) saturate(160%);
    }
    .dropdown-menu li span.menu-section{
      display:block; padding:8px 16px 4px;
      font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
      color:var(--brand-600); font-weight:700; opacity:.9;
    }
    .dropdown-menu li a{
      display:block; padding:8px 16px;
      color:var(--ink); font-size:.9rem; font-weight:500;
      transition:.2s ease;
    }
    .dropdown-menu li a:hover{ background:rgba(33,188,165,0.12); color:var(--brand-600); }
    .dropdown.open .dropdown-menu{ display:block; }

    .dropdown-toggle svg,
    .dropdown-toggle path {
      pointer-events: none;
    }

    /* ====== PAGE LAYOUT ====== */
    .page{ max-width:var(--maxw); margin:48px auto; padding:0 20px 40px; }
    .glass{ background:var(--glass); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--aura); }
    .panel{ padding:20px; display:flex; flex-direction:column; gap:16px; background:var(--glass-2); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
    .row{ display:flex; gap:16px; flex-wrap:wrap; }
    .col{ flex:1 1 320px; }
    .muted{ color:var(--muted) }
    .hero h1{
  background: linear-gradient(
    130deg,
    var(--ink) 5%,
    var(--brand-600) 20%,
    var(--brand-purp) 45%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

    .hero p{ margin:0; font-size:1.02rem; line-height:1.6; color:var(--muted) }
    .hero .row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  margin-top:22px;
}

@media (max-width: 820px){
  .hero .row{
    grid-template-columns: 1fr;
  }
  .hero h1{
  background: linear-gradient(
    130deg,
    var(--ink) 10%,
    var(--brand-600) 40%,
    var(--brand-purp) 90%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  }
}

.hero .login-panel{
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.hero .login-panel strong{
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: var(--brand-600);
}

.hero .login-panel .muted{
  position:relative;
  padding-left:16px;
  line-height:1.55;
}

.hero .login-panel .muted::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:6px;
  height:2px;
  background: var(--brand-600);
  opacity:.6;
}

.hero .row::before{
  content:"";
  grid-column:1 / -1;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
  margin-bottom:14px;
}


    /* ====== VIEWER / CONSOLE ====== */
    .login-panel{ padding:14px; border-radius:var(--radius-sm); background:var(--glass-2); border:1px solid var(--border); font-size:.9rem; }
    .viewer{ min-height:260px; padding:16px; background:var(--glass); border-radius:var(--radius-sm); border:1px solid var(--border); font-size:.9rem; overflow:auto; color:var(--brand-600); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); }
    pre{ white-space:pre-wrap; word-break:break-word; margin:0; }

    .copy-btn{
      padding:6px 12px; font-size:.85rem;
      border-radius:12px; border:1px solid var(--brand-600);
      background:var(--glass-2); color:var(--brand-600);
      cursor:pointer; transition:.2s ease;
    }
    .copy-btn:hover{ background:rgba(33,188,165,0.12); transform:translateY(-2px); }

    /* ====== MODAL (Agreement/README) ====== */
    .modal-overlay{ position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.55); display:none; }
    .modal-overlay.is-open{ display:block; }
    .modal{ position:fixed; inset:0; z-index:10001; display:none; place-items:center; }
    .modal.is-open{ display:grid; }
    .modal-card{
      width:min(980px, 92vw); max-height:86vh;
      background:var(--glass); border:1px solid var(--border);
      border-radius:var(--radius); box-shadow:var(--aura);
      overflow:hidden; display:grid; grid-template-rows:auto 1fr auto;
      -webkit-backdrop-filter:blur(14px) saturate(160%);
      backdrop-filter:blur(14px) saturate(160%);
    }
    .modal-head{ padding:14px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; background:var(--glass-2); }
    .modal-title{ margin:0; font-weight:800; }
    .modal-close{ background:none; border:0; color:var(--muted); cursor:pointer; font-weight:700; }
    .modal-body{ overflow:auto; background:#0a0f19; }
    .md-view { padding: 18px 22px; color: #dfe7ff; font-size: .98rem; line-height: 1.55; }
    .md-view h1,.md-view h2,.md-view h3,.md-view h4 { margin: 1.1em 0 .5em; }
    .md-view pre { background: #0f1626; padding: 10px 12px; border-radius: 10px; overflow: auto; }
    .md-view code { background: #0f1626; padding: 2px 6px; border-radius: 6px; }

    /* tables inside Markdown preview */
    .md-view table { width: 100%; border-collapse: collapse; margin: 10px 0; }
    .md-view th, .md-view td { padding: 8px; border: 1px solid var(--border); }
    .md-view thead th { background: var(--glass); color: var(--ink); text-align: left; }
    .modal-foot{ border-top:1px solid var(--border); padding:12px 16px; background:var(--glass-2); display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
    .ack{ display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:.95rem; }
    .ack input{ accent-color: var(--brand-600); margin-top:4px; }
    .actions{ display:flex; gap:10px; }
    .primary[disabled]{ opacity:.6; pointer-events:none; }

    /* ====== WIZARD ====== */
    .wizard{ padding:20px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--glass-2); }
    .wizard .step{ display:none; }
    .wizard .step.is-active{ display:block; }
    .badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:#ffffff12; border:1px solid #ffffff22; font-size:.8rem; color:var(--muted); }
    .field{ flex:1 1 260px; }
    .hint{ color:var(--muted); font-size:.9rem; }
    /* Generic visual key/value rows */
    .kv{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); }
    .kv:last-child{ border-bottom:none; }
    .k{ opacity:.75; font-size:13px; }
    .v{ font-size:13px; text-align:right; overflow-wrap:anywhere; max-width:65%; }
    .pill{ display:inline-flex; padding:3px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); font-size:12px; opacity:.95;}
  /* ===== Catalog Drawer + Cards (Ping Visual) ===== */
.catalog-drawer{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background: rgba(255,255,255,.03);
  overflow:hidden;
}

.catalog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background: rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.catalog-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
  padding:12px;
  max-height:320px;           /* scroll container */
  overflow:auto;
}

.catalog-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background: rgba(0,0,0,.18);
  padding:12px;
}

.catalog-title{
  font-weight:800;
  color: rgba(255,255,255,.92);
  margin-bottom:6px;
  font-size:.95rem;
}

.catalog-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.catalog-price{
  font-weight:900;
  font-size:1.1rem;
  color: var(--brand-600);
}

.catalog-sub{
  font-size:.85rem;
  color: var(--muted);
  margin-top:6px;
}

.catalog-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
    /* ===========================
   DNA FINALIZATION LOADER (OPTION B)
   Two bead trains + opposite phase + depth swap
   =========================== */
.dnaSwirl{
  position: relative;
  width: 100%;
  height: 56px;
  overflow: hidden;
  border-radius: 14px;
  pointer-events:none;
}

.dna-container{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px;
}

.dna-text{ display:flex; flex-direction:column; gap:4px; }
.dna-label{ white-space:nowrap; font-size:.95rem; color:var(--muted); }
.dna-sub{ white-space:nowrap; font-size:.82rem; opacity:.75; }

/* Track area */
.dna-track{
  position:relative;
  width:240px;
  height:34px;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border:1px solid rgba(255,255,255,0.10);
  animation:dnaBreath 3.2s ease-in-out infinite;
}

@keyframes dnaBreath{
  0%,100% { box-shadow: 0 0 0 rgba(33,188,165,0.0); }
  50%     { box-shadow: 0 0 18px rgba(33,188,165,0.14); }
}

/* lock mode: tighter, "complete" look */
.dna-container[data-dna="lock"] .dna-track{
  border-color: rgba(33,188,165,0.45);
  box-shadow: 0 0 22px rgba(33,188,165,0.18);
}

/* ===== Strands ===== */
.dna-strand{
  position:absolute;
  top:50%;
  left:-60px;
  width:380px;
  height:0;
  border-top:2px dotted rgba(33,188,165,0.85);
  filter:drop-shadow(0 0 7px rgba(33,188,165,0.45));
  will-change:transform, opacity;
}

/* Strand A (teal) */
.strand-a{ opacity:.95; }

/* Strand B (purple) — boosted so it's clearly visible */
.strand-b{
  opacity:.82;
  border-top-color: rgba(108,92,231,0.90);
  filter:drop-shadow(0 0 9px rgba(108,92,231,0.48));
}

/* ===== Helix motion ===== */
.dna-container[data-dna="idle"] .strand-a { animation: dnaWaveA 1.75s linear infinite; }
.dna-container[data-dna="idle"] .strand-b { animation: dnaWaveB 1.75s linear infinite; }

.dna-container[data-dna="fast"] .strand-a { animation: dnaWaveA 1.05s linear infinite; }
.dna-container[data-dna="fast"] .strand-b { animation: dnaWaveB 1.05s linear infinite; }

.dna-container[data-dna="lock"] .strand-a,
.dna-container[data-dna="lock"] .strand-b{
  animation:none;
  opacity:.95;
  border-top-style:solid;
  border-top-width:2px;
}

/* motion keyframes */
@keyframes dnaWaveA{
  0%   { transform: translateY(-8px) translateX(0);   }
  50%  { transform: translateY( 8px) translateX(60px);}
  100% { transform: translateY(-8px) translateX(120px);}
}
@keyframes dnaWaveB{
  0%   { transform: translateY( 8px) translateX(0);   }
  50%  { transform: translateY(-8px) translateX(60px);}
  100% { transform: translateY( 8px) translateX(120px);}
}

/* ===== Beads / Nodes ===== */
.dna-nodes{ position:absolute; inset:0; pointer-events:none; }

/* base bead */
.dna-node{
  position:absolute;
  top:50%;
  width:8px; height:8px;
  border-radius:999px;
  transform: translate(-50%,-50%);
  opacity:0;
  will-change:left, transform, opacity, filter;
}

/* Train A (teal) */
.dna-node.a{
  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(33,188,165,0.95) 40%,
    rgba(33,188,165,0.15) 70%,
    rgba(33,188,165,0.0) 100%);
  box-shadow: 0 0 10px rgba(33,188,165,0.55);
}

/* Train B (purple) */
.dna-node.b{
  background: radial-gradient(circle,
    rgba(255,255,255,0.92) 0%,
    rgba(108,92,231,0.88) 40%,
    rgba(108,92,231,0.18) 70%,
    rgba(108,92,231,0.0) 100%);
  box-shadow: 0 0 10px rgba(108,92,231,0.38);
}

/* Speed control by mode */
.dna-container[data-dna="idle"] .dna-node.a { animation: dnaNodeA 1.75s linear infinite; }
.dna-container[data-dna="idle"] .dna-node.b { animation: dnaNodeB 1.75s linear infinite; }

.dna-container[data-dna="fast"] .dna-node.a { animation: dnaNodeA 1.05s linear infinite; }
.dna-container[data-dna="fast"] .dna-node.b { animation: dnaNodeB 1.05s linear infinite; }

/* lock: settle beads into place */
.dna-container[data-dna="lock"] .dna-node.a,
.dna-container[data-dna="lock"] .dna-node.b{
  animation: dnaNodeLock .55s ease forwards;
  opacity:1;
  filter: blur(0px) brightness(1.1);
}

/* Stagger timing within each train */
.dna-node.a.n1{ animation-delay: 0s; }
.dna-node.a.n2{ animation-delay: .22s; }
.dna-node.a.n3{ animation-delay: .44s; }

/* offset B half-step so it reads as a second strand */
.dna-node.b.n1{ animation-delay: .11s; }
.dna-node.b.n2{ animation-delay: .33s; }
.dna-node.b.n3{ animation-delay: .55s; }

/* ===========================
   DEPTH SWAP (the magic)
   - At center, A comes forward (bright/sharp/high z)
   - At center, B goes behind (dim/blur/low z)
   - Opposite on the other half-cycle is created by phase + y-direction
   =========================== */

/* Train A: front at center */
@keyframes dnaNodeA{
  0%   { left:-10%; opacity:0; transform:translate(-50%,-50%) translateY(-9px) scale(.82);
         filter:blur(.70px) brightness(.88) contrast(1); z-index:1; }
  12%  { opacity:1; }

  35%  { left:35%; transform:translate(-50%,-50%) translateY(-1px) scale(1.00);
         filter:blur(.25px) brightness(1.02) contrast(1.05); z-index:2; }

  50%  { left:50%; transform:translate(-50%,-50%) translateY( 9px) scale(1.22);
         filter:blur(0px) brightness(1.30) contrast(1.18); z-index:4; }

  65%  { left:65%; transform:translate(-50%,-50%) translateY(-1px) scale(1.00);
         filter:blur(.25px) brightness(1.02) contrast(1.05); z-index:2; }

  88%  { opacity:1; }
  100% { left:110%; opacity:0; transform:translate(-50%,-50%) translateY(-9px) scale(.82);
         filter:blur(.70px) brightness(.88) contrast(1); z-index:1; }
}

/* Train B: back at center (opposite depth) */
@keyframes dnaNodeB{
  0%   { left:-10%; opacity:0; transform:translate(-50%,-50%) translateY( 9px) scale(.82);
         filter:blur(.70px) brightness(.84) contrast(1); z-index:1; }
  12%  { opacity:1; }

  35%  { left:35%; transform:translate(-50%,-50%) translateY( 1px) scale(1.00);
         filter:blur(.30px) brightness(.96) contrast(1.02); z-index:2; }

  /* center: B goes behind while A is in front */
  50%  { left:50%; transform:translate(-50%,-50%) translateY(-9px) scale(.94);
         filter:blur(.95px) brightness(.82) contrast(.98); z-index:0; }

  65%  { left:65%; transform:translate(-50%,-50%) translateY( 1px) scale(1.00);
         filter:blur(.30px) brightness(.96) contrast(1.02); z-index:2; }

  88%  { opacity:1; }
  100% { left:110%; opacity:0; transform:translate(-50%,-50%) translateY( 9px) scale(.82);
         filter:blur(.70px) brightness(.84) contrast(1); z-index:1; }
}

@keyframes dnaNodeLock{
  0%   { opacity:.0; transform:translate(-50%,-50%) scale(.9); }
  100% { opacity:1;  transform:translate(-50%,-50%) scale(1.0); }
}

/* ===== Complete fade out ===== */
.dna-container.is-complete .dna-track{
  animation: dnaFadeOut .45s ease forwards;
}
.dna-container.is-complete .dna-label{
  color: rgba(167,255,241,.95);
}
@keyframes dnaFadeOut{
  to { opacity:0; transform:scale(.98); height:0; width:0; margin:0; border:0; padding:0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dna-strand, .dna-node{ animation:none !important; }
  .dna-node{ opacity:.85; filter:none; }
  .dna-track{ animation:none !important; }
}
    
#po-visual-view .login-panel{ min-height:90px;}
    
#po-visual-view pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12.5px; }
/* ===== Responsive route input row ===== */
.api-route-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;              /* allow wrapping on small screens */
}

.api-route-prefix{
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;     /* prevents prefix from pushing input off-screen */
}

#po-api-route{
  flex: 1 1 220px;             /* input grows, but has a sane minimum */
  min-width: 160px;
}

/* On very narrow screens: put prefix on its own line */
@media (max-width: 520px){
  .api-route-prefix{
    width: 100%;
  }
  #po-api-route{
    width: 100%;
    flex-basis: 100%;
  }
}