.hero-invoice{
  --invoice-accent:#66ffe6;
  --invoice-accent-rgb:102,255,230;
  position:relative;
  padding:12px 0 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 12%,rgba(83,109,254,.11),transparent 31%),
    radial-gradient(circle at 10% 0%,rgba(0,214,200,.065),transparent 27%),
    linear-gradient(145deg,#0a101a,#0b1422 58%,#0d1625);
}

.hero-invoice::before{
  background-image:
    linear-gradient(rgba(144,174,215,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(144,174,215,.04) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.42;
  animation:none;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 94%);
  mask-image:linear-gradient(to bottom,#000,transparent 94%);
}

.hero-invoice::after{
  background:none;
}

.invoice-hero-inner{
  display:block!important;
  padding-top:22px;
}

.invoice-hero-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,390px);
  gap:clamp(38px,7vw,86px);
  align-items:center;
  padding:34px 0 52px;
}

.invoice-hero-layout-details{
  padding-top:23px;
}

.invoice-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#86f3e4;
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.invoice-kicker::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
}

.invoice-hero-copy h1{
  margin:13px 0 0;
  color:#f2f6fd;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(2.7rem,5vw,4.65rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.048em;
}

.invoice-hero-copy p{
  max-width:660px;
  margin:17px 0 0;
  color:#a8b9cf;
  font-size:.98rem;
  line-height:1.7;
}

.invoice-access-points{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:23px;
}

.invoice-access-points span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(176,202,235,.13);
  border-radius:9px;
  color:#b9c9dc;
  background:rgba(255,255,255,.025);
  font-size:.72rem;
  font-weight:700;
}

.invoice-access-points i{
  color:var(--invoice-accent);
}

.invoice-hero-receipt{
  position:relative;
  min-height:250px;
  padding:21px;
  overflow:hidden;
  border:1px solid rgba(176,202,235,.15);
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(var(--invoice-accent-rgb),.075),transparent 44%),
    linear-gradient(150deg,rgba(255,255,255,.043),rgba(255,255,255,.012)),
    #09131f;
  box-shadow:0 28px 75px rgba(0,0,0,.3);
}

.invoice-hero-receipt::after{
  content:"";
  position:absolute;
  right:-44px;
  bottom:-54px;
  width:150px;
  height:150px;
  border:1px solid rgba(var(--invoice-accent-rgb),.09);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(83,109,254,.018);
}

.invoice-receipt-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:15px;
  border-bottom:1px solid rgba(176,202,235,.11);
  color:#8194ad;
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.invoice-receipt-head i{
  color:var(--invoice-accent);
  font-size:1.1rem;
}

.invoice-receipt-body{
  position:relative;
  z-index:1;
  display:grid;
  gap:13px;
  padding:24px 0 19px;
}

.invoice-receipt-line{
  height:7px;
  border-radius:999px;
  background:rgba(176,202,235,.1);
}

.invoice-receipt-line:nth-child(1){
  width:76%;
}

.invoice-receipt-line:nth-child(2){
  width:55%;
}

.invoice-receipt-line:nth-child(3){
  width:88%;
}

.invoice-receipt-total{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding-top:17px;
  border-top:1px solid rgba(176,202,235,.11);
}

.invoice-receipt-total span{
  color:#7f92aa;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.invoice-receipt-total strong{
  color:#eaf3ff;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:1.35rem;
  font-weight:650;
}

.invoice-crumbs{
  position:relative;
  z-index:2;
  margin-bottom:0;
}

.invoice-crumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.invoice-crumbs li{
  display:inline-flex;
  align-items:center;
  color:#8497b0;
  font-size:.78rem;
}

.invoice-crumbs li::after{
  content:"/";
  margin-left:8px;
  color:rgba(255,255,255,.24);
}

.invoice-crumbs li:last-child::after{
  content:"";
  margin:0;
}

.invoice-crumbs a{
  color:#b7cae3;
  text-decoration:none;
}

.invoice-crumbs a:hover{
  color:var(--invoice-accent);
}

.invoice-hero-actions{
  display:grid;
  gap:9px;
  padding:17px;
  border:1px solid rgba(176,202,235,.14);
  border-radius:17px;
  background:rgba(7,14,24,.42);
}

.invoice-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.invoice-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:10px;
  font-size:.82rem;
  font-weight:800;
  text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.invoice-button:hover{
  transform:translateY(-1px);
}

.invoice-button-primary{
  color:#06131a;
  background:linear-gradient(135deg,#78ffec,#25d8cb);
  box-shadow:0 12px 28px rgba(0,214,200,.16);
}

.invoice-button-secondary{
  border-color:rgba(176,202,235,.18);
  color:#dce8f7;
  background:rgba(255,255,255,.035);
}

.invoice-hero-actions p{
  margin:0;
  color:#8396ae;
  font-size:.69rem;
  line-height:1.5;
}

.invoice-main{
  padding:clamp(64px,7vw,92px) 0;
  background:
    radial-gradient(circle at 100% 0%,rgba(83,109,254,.05),transparent 30%),
    #09111e;
}

.invoice-lookup-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
  gap:18px;
  max-width:1040px;
  margin:0 auto;
}

.invoice-lookup-card,
.invoice-help-card{
  border:1px solid rgba(176,202,235,.13);
  border-radius:19px;
  background:
    linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
    #0a1321;
}

.invoice-lookup-card{
  padding:clamp(24px,4vw,38px);
}

.invoice-form-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:28px;
}

.invoice-form-icon,
.invoice-help-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:45px;
  height:45px;
  border:1px solid rgba(var(--invoice-accent-rgb),.19);
  border-radius:11px;
  color:var(--invoice-accent);
  background:rgba(var(--invoice-accent-rgb),.05);
  font-size:1.1rem;
}

.invoice-form-head h2,
.invoice-help-card h2{
  margin:0;
  color:#edf4ff;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:1.32rem;
  font-weight:620;
}

.invoice-form-head p,
.invoice-help-card > p{
  margin:5px 0 0;
  color:#8fa2ba;
  font-size:.8rem;
  line-height:1.55;
}

.invoice-alert{
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin-bottom:19px;
  padding:13px 14px;
  border:1px solid rgba(255,193,7,.24);
  border-radius:12px;
  color:#e8edf5;
  background:rgba(255,193,7,.065);
}

.invoice-alert > i{
  flex:0 0 auto;
  margin-top:2px;
  color:#ffd77b;
  font-size:1.08rem;
}

.invoice-alert strong{
  display:block;
  margin-bottom:2px;
  font-size:.82rem;
}

.invoice-alert span{
  display:block;
  color:#b8c5d6;
  font-size:.76rem;
  line-height:1.5;
}

.invoice-lookup-form{
  display:grid;
  gap:18px;
}

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

.invoice-field label{
  display:block;
  margin-bottom:8px;
  color:#9aabc1;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.invoice-field-control{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:0 14px;
  border:1px solid rgba(176,202,235,.14);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.invoice-field-control:focus-within{
  border-color:rgba(var(--invoice-accent-rgb),.42);
  background:rgba(var(--invoice-accent-rgb),.025);
  box-shadow:0 0 0 3px rgba(var(--invoice-accent-rgb),.055);
}

.invoice-field-control i{
  flex:0 0 auto;
  color:#8da2bb;
  font-size:1rem;
}

.invoice-input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  color:#eef5ff;
  background:transparent;
  font:inherit;
  font-size:.87rem;
  font-weight:650;
}

.invoice-input::placeholder{
  color:#61748d;
  font-weight:550;
}

.invoice-submit{
  width:100%;
  border:0;
  cursor:pointer;
}

.invoice-form-note{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:0;
  color:#7f93ab;
  font-size:.69rem;
  line-height:1.52;
}

.invoice-form-note i{
  flex:0 0 auto;
  margin-top:2px;
  color:#839aff;
}

.invoice-help-card{
  align-self:stretch;
  padding:25px 23px;
}

.invoice-help-icon{
  margin-bottom:19px;
  border-color:rgba(143,165,255,.2);
  color:#a9b8ff;
  background:rgba(83,109,254,.06);
}

.invoice-help-list{
  display:grid;
  gap:0;
  margin:22px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(176,202,235,.11);
}

.invoice-help-list li{
  display:flex;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid rgba(176,202,235,.11);
  color:#aabacf;
  font-size:.76rem;
  line-height:1.5;
}

.invoice-help-list i{
  flex:0 0 auto;
  margin-top:2px;
  color:var(--invoice-accent);
}

.invoice-support-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(var(--invoice-accent-rgb),.32);
  color:var(--invoice-accent);
  font-size:.77rem;
  font-weight:800;
  text-decoration:none;
}

.invoice-document-wrap{
  max-width:1040px;
  margin:0 auto;
}

.invoice-document{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(176,202,235,.14);
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%,rgba(0,214,200,.045),transparent 25%),
    linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),
    #0a1321;
  box-shadow:0 26px 80px rgba(0,0,0,.27);
}

.invoice-document::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:2px;
  background:linear-gradient(90deg,var(--invoice-accent),rgba(111,137,255,.65),transparent 88%);
  opacity:.65;
}

.invoice-document-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:30px;
  align-items:start;
  padding:clamp(25px,4vw,40px);
  border-bottom:1px solid rgba(176,202,235,.12);
}

.invoice-company{
  display:flex;
  align-items:flex-start;
  gap:21px;
  min-width:0;
}

.invoice-company-logo{
  width:190px;
  height:auto;
  max-width:42%;
  object-fit:contain;
}

.invoice-company-copy{
  min-width:0;
}

.invoice-company-copy h2{
  margin:0;
  color:#eef5ff;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:1.08rem;
  font-weight:650;
}

.invoice-company-address{
  margin-top:7px;
  color:#8fa1b7;
  font-size:.75rem;
  font-weight:550;
  line-height:1.52;
}

.invoice-identity{
  display:grid;
  justify-items:end;
  gap:13px;
}

.invoice-identity-title{
  color:#7f92aa;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.invoice-id{
  color:#eaf2fd;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.82rem;
  font-weight:750;
  overflow-wrap:anywhere;
}

.invoice-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  padding:6px 10px;
  border:1px solid rgba(152,174,205,.22);
  border-radius:999px;
  color:#cbd7e6;
  background:rgba(152,174,205,.07);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.invoice-status::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 9px currentColor;
}

.invoice-status-paid{
  border-color:rgba(0,214,200,.28);
  color:#78f6e4;
  background:rgba(0,214,200,.075);
}

.invoice-status-pending{
  border-color:rgba(255,193,7,.27);
  color:#ffd477;
  background:rgba(255,193,7,.075);
}

.invoice-status-failed,
.invoice-status-canceled,
.invoice-status-cancelled{
  border-color:rgba(255,99,132,.28);
  color:#ff9bb1;
  background:rgba(255,99,132,.075);
}

.invoice-paid-notice{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:13px;
  margin:24px clamp(25px,4vw,40px) 0;
  padding:15px 17px;
  border:1px solid rgba(0,214,200,.2);
  border-radius:13px;
  background:rgba(0,214,200,.055);
}

.invoice-paid-icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(0,214,200,.22);
  border-radius:10px;
  color:#79f7e5;
  background:rgba(0,214,200,.07);
  font-size:1.1rem;
}

.invoice-paid-notice h3{
  margin:0 0 4px;
  color:#e7f7f4;
  font-size:.87rem;
}

.invoice-paid-notice p{
  margin:0;
  color:#a8c1c4;
  font-size:.73rem;
  line-height:1.55;
}

.invoice-paid-notice p + p{
  margin-top:5px;
}

.invoice-document-body{
  padding:clamp(25px,4vw,40px);
}

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

.invoice-info-block{
  min-width:0;
  padding:22px;
  border:1px solid rgba(176,202,235,.12);
  border-radius:15px;
  background:rgba(255,255,255,.018);
}

.invoice-block-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 17px;
  color:#92a6bf;
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.invoice-block-title i{
  color:var(--invoice-accent);
  font-size:.95rem;
}

.invoice-data-list{
  display:grid;
  gap:0;
  margin:0;
}

.invoice-data-row{
  display:grid;
  grid-template-columns:128px minmax(0,1fr);
  gap:15px;
  padding:10px 0;
  border-bottom:1px solid rgba(176,202,235,.085);
}

.invoice-data-row:first-child{
  padding-top:0;
}

.invoice-data-row:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.invoice-data-row dt{
  color:#8194ad;
  font-size:.72rem;
  font-weight:650;
}

.invoice-data-row dd{
  min-width:0;
  margin:0;
  color:#dce7f5;
  font-size:.76rem;
  font-weight:720;
  line-height:1.46;
  overflow-wrap:anywhere;
}

.invoice-data-row dd.invoice-amount-inline{
  color:#8df5e6;
  font-size:.86rem;
  font-weight:850;
}

.invoice-purchase{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  margin-top:16px;
  padding:24px;
  border:1px solid rgba(176,202,235,.12);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 50%,rgba(var(--invoice-accent-rgb),.055),transparent 30%),
    rgba(255,255,255,.018);
}

.invoice-purchase-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px solid rgba(143,165,255,.22);
  border-radius:8px;
  color:#aebcff;
  background:rgba(83,109,254,.06);
  font-size:.6rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.invoice-purchase h3{
  margin:13px 0 0;
  color:#edf4ff;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:1.18rem;
  font-weight:630;
  line-height:1.35;
}

.invoice-purchase-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
  color:#899cb4;
  font-size:.7rem;
}

.invoice-total{
  min-width:190px;
  padding-left:26px;
  border-left:1px solid rgba(176,202,235,.12);
  text-align:right;
}

.invoice-total span{
  display:block;
  color:#8295ad;
  font-size:.61rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.invoice-total strong{
  display:block;
  margin-top:5px;
  color:#91f8e9;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(1.65rem,3vw,2.25rem);
  font-weight:720;
  letter-spacing:-.03em;
}

.invoice-total small{
  display:block;
  margin-top:1px;
  color:#7d90a8;
  font-size:.64rem;
  font-weight:700;
}

.invoice-document-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px clamp(25px,4vw,40px);
  border-top:1px solid rgba(176,202,235,.12);
  color:#8396ad;
  font-size:.7rem;
}

.invoice-document-footer p{
  margin:0;
}

.invoice-document-footer a{
  color:var(--invoice-accent);
  font-weight:750;
  text-decoration:none;
}

@media(max-width:900px){
  .invoice-hero-layout,
  .invoice-lookup-wrap{
    grid-template-columns:1fr;
  }

  .invoice-hero-receipt{
    min-height:230px;
  }

  .invoice-hero-actions{
    max-width:520px;
  }

  .invoice-document-header{
    grid-template-columns:1fr;
  }

  .invoice-identity{
    justify-items:start;
  }

  .invoice-info-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  .invoice-hero-layout{
    padding:28px 0 42px;
  }

  .invoice-hero-copy h1{
    font-size:clamp(2.5rem,13vw,3.6rem);
  }

  .invoice-field-grid{
    grid-template-columns:1fr;
  }

  .invoice-action-row{
    display:grid;
    grid-template-columns:1fr;
  }

  .invoice-button{
    width:100%;
  }

  .invoice-document{
    border-radius:16px;
  }

  .invoice-document-header{
    gap:22px;
  }

  .invoice-company{
    display:grid;
    gap:16px;
  }

  .invoice-company-logo{
    width:175px;
    max-width:75%;
  }

  .invoice-paid-notice{
    grid-template-columns:1fr;
  }

  .invoice-purchase{
    grid-template-columns:1fr;
    gap:21px;
  }

  .invoice-total{
    min-width:0;
    padding:20px 0 0;
    border-top:1px solid rgba(176,202,235,.12);
    border-left:0;
    text-align:left;
  }

  .invoice-document-footer{
    display:block;
  }

  .invoice-document-footer .invoice-button{
    margin-top:14px;
  }
}

@media(max-width:480px){
  .invoice-access-points{
    display:grid;
    grid-template-columns:1fr;
  }

  .invoice-lookup-card,
  .invoice-help-card{
    padding:21px 18px;
    border-radius:15px;
  }

  .invoice-info-block{
    padding:19px 17px;
  }

  .invoice-data-row{
    grid-template-columns:1fr;
    gap:4px;
  }
}

@media(prefers-reduced-motion:reduce){
  .invoice-button,
  .invoice-field-control{
    transition:none;
  }
}

@media print{
  @page{
    margin:12mm;
  }

  body{
    background:#fff!important;
    color:#000!important;
  }

  body *{
    visibility:hidden!important;
  }

  .print-area,
  .print-area *{
    visibility:visible!important;
  }

  .print-area{
    position:absolute!important;
    top:0!important;
    left:0!important;
    width:100%!important;
    margin:0!important;
  }

  .invoice-document{
    border:1px solid #d8dde5!important;
    border-radius:0!important;
    color:#111!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  .invoice-document::before,
  .invoice-document::after{
    display:none!important;
  }

  .invoice-document-header,
  .invoice-document-footer{
    border-color:#d8dde5!important;
  }

  .invoice-company-copy h2,
  .invoice-id,
  .invoice-paid-notice h3,
  .invoice-purchase h3,
  .invoice-data-row dd{
    color:#111!important;
  }

  .invoice-company-address,
  .invoice-identity-title,
  .invoice-block-title,
  .invoice-data-row dt,
  .invoice-purchase-meta,
  .invoice-total span,
  .invoice-total small,
  .invoice-document-footer,
  .invoice-paid-notice p{
    color:#4a4f57!important;
  }

  .invoice-document-footer a{
    color:#111!important;
  }

  .invoice-info-block,
  .invoice-purchase,
  .invoice-paid-notice{
    border-color:#d8dde5!important;
    background:#fff!important;
  }

  .invoice-data-row{
    border-color:#e3e6eb!important;
  }

  .invoice-total{
    border-color:#d8dde5!important;
  }

  .invoice-total strong,
  .invoice-data-row dd.invoice-amount-inline{
    color:#087b70!important;
  }

  .invoice-status,
  .invoice-purchase-label{
    border-color:#c9ced6!important;
    color:#111!important;
    background:#f3f4f6!important;
    box-shadow:none!important;
  }

  .invoice-paid-icon{
    border-color:#b8d7d2!important;
    color:#087b70!important;
    background:#eef8f6!important;
  }

  .invoice-company-logo{
    filter:none!important;
  }

  .no-print{
    display:none!important;
  }
}