:root{
  --bg:#f7f8fc;
  --bg2:#ffffff;
  --card:#ffffff;
  --soft:#f8fafc;
  --soft-strong:#eef2ff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.08);
  --shadow:0 18px 55px rgba(15,23,42,.08);
  --ring:rgba(123,92,255,.18);
  --blue:#3BA1FF;
  --purple:#7B5CFF;
  --pink:#D946EF;
  --success:#22c55e;
  --warning:#f59e0b;
}

html.dark{
  --bg:#08090f;
  --bg2:#0b0b12;
  --card:#111117;
  --soft:#0f1220;
  --soft-strong:#15192a;
  --text:#f8fafc;
  --muted:#94a3b8;
  --border:rgba(255,255,255,.08);
  --shadow:0 20px 60px rgba(0,0,0,.28);
  --ring:rgba(123,92,255,.26);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
img,svg,video{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(59,161,255,.11), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(217,70,239,.10), transparent 18%),
    linear-gradient(180deg, rgba(123,92,255,.04), transparent 28%),
    var(--bg);
}

.tp-wrap{min-height:100vh}
.tp-wrap{overflow-x:hidden}
.tp-card{
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.tp-soft{
  background:var(--soft);
  border:1px solid var(--border);
}
.tp-soft-strong{
  background:var(--soft-strong);
  border:1px solid var(--border);
}
.tp-glass{
  background:color-mix(in srgb, var(--card) 90%, transparent);
  border:1px solid var(--border);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
}
.tp-gradient{background-image:linear-gradient(135deg,var(--blue) 0%, var(--purple) 54%, var(--pink) 100%)}
.tp-gradient-text{
  background:linear-gradient(135deg,var(--blue) 0%, var(--purple) 54%, var(--pink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.tp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:14px;
  padding:.9rem 1.1rem;
  font-weight:700;
  transition:.18s ease;
  text-decoration:none;
  min-width:0;
}
.tp-btn:hover{transform:translateY(-1px)}
.tp-btn-primary{color:#fff; box-shadow:0 10px 30px rgba(123,92,255,.25)}
.tp-btn-secondary{background:var(--card); border:1px solid var(--border); color:var(--text)}
.tp-btn-muted{background:var(--soft); border:1px solid var(--border); color:var(--text)}
.tp-btn-ghost{background:transparent; border:1px solid transparent; color:var(--muted)}

.tp-field,.tp-select,.tp-textarea{
  width:100%;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg2);
  color:var(--text);
  padding:.92rem 1rem;
  outline:none;
  min-width:0;
}
.tp-field:focus,.tp-select:focus,.tp-textarea:focus{box-shadow:0 0 0 4px var(--ring)}
.tp-label{display:block; margin-bottom:.45rem; font-size:.92rem; font-weight:700}

.tp-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:.38rem .75rem;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.tp-draft{background:rgba(100,116,139,.16); color:#94a3b8}
.tp-created{background:rgba(100,116,139,.16); color:#94a3b8}
.tp-sent{background:rgba(14,165,233,.18); color:#67e8f9}
.tp-viewed{background:rgba(59,161,255,.18); color:#60a5fa}
.tp-selected{background:rgba(123,92,255,.18); color:#a78bfa}
.tp-initiated{background:rgba(245,158,11,.18); color:#fbbf24}
.tp-paid{background:rgba(34,197,94,.18); color:#4ade80}
.tp-balance{background:rgba(251,146,60,.18); color:#fb923c}
.tp-finance{background:rgba(217,70,239,.18); color:#e879f9}
.tp-accepted{background:rgba(236,72,153,.18); color:#f472b6}

.tp-flash {
  width: min(100% - 32px, 1280px);
  margin: 8px auto 10px;
  padding: 10px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: auto;
  line-height: 1.4;
  color: #fff;
  background: rgba(6, 50, 45, 0.85);
  border: 1px solid rgba(20, 184, 166, 0.35);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
  transition: opacity .4s ease, transform .4s ease;
}
.tp-flash-hide{
  opacity:0;
  transform:translateY(-8px);
}
.tp-flash.tp-flash-success {
  background: rgba(6, 50, 45, 0.85);
  border-color: rgba(20, 184, 166, 0.35);
}
.tp-flash-error {
  background: rgba(70, 15, 25, 0.85);
  border-color: rgba(248, 113, 113, 0.45);
}
.tp-flash-info {
  background: rgba(11, 35, 65, 0.88);
  border-color: rgba(96, 165, 250, 0.35);
}
.tp-flash-close {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.tp-flash > span{
  min-width:0;
  flex:1 1 auto;
  font-size:.95rem;
  line-height:1.6;
}

.tp-top a,.tp-side a{
  color:var(--muted);
  font-weight:600;
  text-decoration:none;
}
.tp-top a:hover,.tp-top a.active,.tp-side a:hover,.tp-side a.active{color:var(--text)}

details summary{cursor:pointer}
details summary::-webkit-details-marker{display:none}

.tp-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  padding:.45rem .8rem;
  font-size:.76rem;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.16em;
}
.tp-note{color:var(--muted); font-size:.95rem; line-height:1.7}
.tp-grid{
  background-image:
    linear-gradient(to right, rgba(148,163,184,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.07) 1px, transparent 1px);
  /*background-size:32px 32px;*/
}
.tp-mobile{
  width:390px;
  max-width:100%;
  min-height:780px;
  border-radius:28px;
  border:1px solid var(--border);
  background:var(--bg2);
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  overflow:hidden;
}
.tp-panel-title{font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:800}
.tp-stat{position:relative; overflow:hidden}
.tp-stat:before{
  content:"";
  position:absolute;
  inset:auto -20% -50% auto;
  width:90px;
  height:90px;
  background:rgba(123,92,255,.08);
  filter:blur(12px);
  border-radius:999px;
}
.tp-list{display:grid; gap:1rem}
.tp-list-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem;
  border-radius:20px;
  background:var(--soft);
  border:1px solid var(--border);
  min-width:0;
}
.tp-list-row > *{min-width:0}
.tp-pay-card{
  border:1px solid var(--border);
  background:var(--soft);
  border-radius:20px;
  padding:1rem;
  width:100%;
  text-align:left;
  min-width:0;
}
.tp-pay-card.selected{
  background:
    linear-gradient(var(--soft), var(--soft)) padding-box,
    linear-gradient(135deg,var(--blue),var(--purple),var(--pink)) border-box;
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(123,92,255,.28),0 0 24px rgba(123,92,255,.14);
}
.tp-pay-card small{display:block; margin-top:.45rem; font-size:.76rem; color:var(--muted)}
.tp-option-tag{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:.2rem .55rem;
  background:rgba(123,92,255,.14);
  color:#b9a8ff;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.tp-trustbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border:1px solid var(--border);
  background:var(--soft);
  border-radius:18px;
  padding:.85rem 1rem;
}
.tp-trustpill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  font-size:.82rem;
  font-weight:700;
}
.tp-mini-trust{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
}
.tp-mini-trust div{
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:14px;
  padding:.8rem;
  font-size:.78rem;
  color:var(--muted);
  text-align:center;
}
.tp-step{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1rem;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--soft);
}
.tp-step-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.4rem;
  height:2.4rem;
  border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--purple),var(--pink));
  color:#fff;
  font-weight:800;
  flex:0 0 auto;
}
.tp-quote-shell{
  max-width:760px;
  margin:0 auto;
}
.tp-quote-actions{
  display:grid;
  gap:.75rem;
}
.tp-status-line{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
}
.tp-footer-link{color:var(--muted); text-decoration:none}
.tp-footer-link:hover{color:var(--text)}
.tp-site-footer{margin-top:5rem; border-top:1px solid rgba(255,255,255,.10)}
.tp-site-footer-inner{max-width:80rem; margin:0 auto; padding:2rem 1rem}
.tp-site-footer-links{display:flex; flex-wrap:wrap; gap:1rem; font-size:.92rem}
.tp-site-footer-meta{font-size:.85rem; color:var(--muted)}
.tp-auth-shell{max-width:64rem; margin:0 auto; padding:1rem}
.tp-auth-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.5rem;
}
.tp-auth-layout{display:grid; gap:1.5rem; align-items:center; justify-content:center}
.tp-auth-hero,.tp-auth-card{border-radius:34px; padding:2rem}
.tp-auth-hero{max-width:30rem}
.tp-auth-card{width:100%; max-width:28rem}
.tp-auth-actions{display:flex; flex-wrap:wrap; gap:.75rem}
.tp-flow-arrow{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
  color:var(--muted);
  font-size:.85rem;
  font-weight:700;
  line-height:1.6;
}
.tp-flow-group{display:grid; gap:1rem}
.tp-page-shell{max-width:80rem; margin:0 auto; padding:2.5rem 1rem}
.tp-page-intro{display:flex; flex-direction:column; gap:1rem}
.tp-page-intro p{max-width:44rem; color:var(--muted); line-height:1.7}
.tp-page-intro h1{line-height:1.08}
.tp-section-card{border-radius:30px; padding:1.5rem}
.tp-stat-card{border-radius:26px; padding:1.5rem}
.tp-toolbar{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
.tp-table-wrap{overflow:hidden; border-radius:30px}
.tp-header-actions{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.tp-mobile-menu{
  position:relative;
  z-index:50;
}
.tp-mobile-menu-summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:14px;
  padding:.9rem 1.1rem;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  font-weight:700;
  line-height:1;
}
.tp-mobile-menu-summary:hover{transform:translateY(-1px)}
.tp-mobile-menu[open] > .tp-mobile-menu-summary{
  box-shadow:0 0 0 4px var(--ring);
}
.tp-mobile-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + .75rem);
  width:min(24rem, calc(100vw - 2rem));
  border-radius:22px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  padding:1rem;
}
.tp-mobile-menu-links{
  display:grid;
  gap:.5rem;
}
.tp-mobile-menu-links a,
.tp-mobile-menu-links button{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-start;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--soft);
  color:var(--text);
  padding:.85rem 1rem;
  text-align:left;
  text-decoration:none;
  font-weight:700;
}
.tp-mobile-menu-links a.active{
  background:linear-gradient(var(--soft), var(--soft)) padding-box,
    linear-gradient(135deg,var(--blue),var(--purple),var(--pink)) border-box;
  border-color:transparent;
}
.tp-mobile-menu-actions{
  display:grid;
  gap:.75rem;
  margin-top:1rem;
}
.tp-collapsible-nav{
  overflow:hidden;
}
.tp-collapsible-nav-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  font-size:.95rem;
  font-weight:800;
  color:var(--text);
}
.tp-collapsible-nav-summary:after{
  content:"+";
  font-size:1.1rem;
  line-height:1;
}
.tp-collapsible-nav[open] > .tp-collapsible-nav-summary:after{
  content:"-";
}
.tp-collapsible-nav-panel{
  display:none;
}
.tp-collapsible-nav[open] > .tp-collapsible-nav-panel{
  display:block;
}
.tp-table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.tp-table-scroll table{
  min-width:720px;
}
.tp-table-scroll::-webkit-scrollbar{
  height:8px;
}
.tp-table-scroll::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
  border-radius:999px;
}

@media (min-width: 1024px){
  .tp-auth-layout{grid-template-columns:minmax(0,480px) minmax(0,430px)}
  .tp-collapsible-nav > .tp-collapsible-nav-panel{display:block!important}
  .tp-collapsible-nav > .tp-collapsible-nav-summary{display:none}
}

@media (max-width: 1023px){
  .tp-page-shell{padding:2rem 1rem}
  .tp-section-card,.tp-stat-card{padding:1.25rem}
  .tp-mobile{width:100%;min-height:auto}
}

@media (max-width: 767px){
  .tp-list-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .tp-list-row .text-right{
    text-align:left;
  }
  .tp-mini-trust{
    grid-template-columns:1fr;
  }
  .tp-step{
    flex-direction:column;
  }
  .tp-trustbar,
  .tp-status-line{
    align-items:flex-start;
  }
  .tp-status-line{
    gap:.65rem;
  }
  .tp-mobile-menu-panel{
    position:fixed;
    right:1rem;
    left:1rem;
    top:5.75rem;
    width:auto;
    max-height:calc(100vh - 7rem);
    overflow:auto;
  }
}

@media (max-width: 640px){
  .tp-btn{width:100%}
  .tp-mobile{min-height:auto}
  .tp-auth-hero,.tp-auth-card{padding:1.5rem}
  .tp-kicker{max-width:100%;white-space:normal}
  .tp-collapsible-nav-summary{padding:1rem}
  .tp-card,.tp-glass{border-radius:24px}
  .tp-quote-shell{max-width:100%}
  .tp-page-shell{padding:1.5rem .85rem}
  .tp-section-card,.tp-stat-card{padding:1rem}
}