.oab-page [hidden]{
  display:none !important;
}

.oab-page{
  min-height:100vh;
  padding:0 clamp(1rem,4vw,3rem) var(--oam-space-6);
  background:
    radial-gradient(50rem 22rem at 85% -6rem,rgba(232,62,188,.08),transparent 60%),
    repeating-linear-gradient(90deg,rgba(36,22,36,.02) 0 1px,transparent 1px 96px),
    var(--oam-canvas);
  color:var(--oam-ink);
  font-family:var(--oam-body);
}

.oab-top{
  display:flex;
  align-items:center;
  gap:var(--oam-space-2);
  max-width:76rem;
  margin:0 auto;
  padding:1.1rem 0;
  border-bottom:1px solid var(--oam-line-strong);
}

.oab-top__brand{
  color:var(--oam-dark);
  font-family:var(--oam-heading);
  font-weight:700;
  text-decoration:none;
}

.oab-top__ref{
  flex:1;
  color:var(--oam-muted);
  font-family:var(--oam-mono);
  font-size:var(--oam-fs-0);
  letter-spacing:.18em;
  text-align:center;
}

.oab-top__console{
  padding:.4rem .95rem;
  color:var(--oam-dark);
  border:1px solid var(--oam-line-strong);
  border-radius:999px;
  font-size:var(--oam-fs-1);
  text-decoration:none;
  background:var(--oam-surface);
}

.oab-top__console:hover{
  border-color:var(--oam-primary);
  color:var(--oam-primary-deep);
}

.oab-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(21rem,25rem);
  gap:var(--oam-space-4);
  align-items:start;
  max-width:76rem;
  margin:var(--oam-space-4) auto 0;
}

.oab-sheet{
  min-width:0;
  display:grid;
  gap:var(--oam-space-3);
}

.oab-sheet__head h1{
  margin:0 0 var(--oam-space-1);
  color:var(--oam-dark);
  font-family:var(--oam-heading);
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  line-height:var(--oam-lh-heading);
}

.oab-sheet__head p{
  margin:0;
  color:var(--oam-muted);
  font-size:var(--oam-fs-2);
}

.oab-block{
  position:relative;
  padding:var(--oam-space-3);
  background:var(--oam-surface);
  border:1px solid var(--oam-line-strong);
  border-radius:var(--oam-radius-lg);
  box-shadow:var(--oam-shadow-sm);
}

.oab-block__tab{
  position:absolute;
  top:-.85rem;
  left:1.1rem;
  padding:.28rem .9rem;
  color:#FFF;
  background:var(--oam-dark);
  border-radius:999px;
  font-family:var(--oam-mono);
  font-size:var(--oam-fs-0);
  letter-spacing:.14em;
}

.oab-block__title{
  margin:.35rem 0 var(--oam-space-2);
  color:var(--oam-dark);
  font-family:var(--oam-heading);
  font-size:var(--oam-fs-3);
}

.oab-plan-list{
  display:grid;
  gap:.6rem;
}

.ownamac-ord-plan{
  display:grid;
  grid-template-columns:minmax(7rem,max-content) max-content minmax(0,1fr) max-content;
  align-items:center;
  gap:var(--oam-space-2);
  padding:.9rem var(--oam-space-2);
  background:var(--oam-surface);
  border:1px solid var(--oam-line-strong);
  border-radius:var(--oam-radius-md);
  color:var(--oam-ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s var(--oam-ease),box-shadow .15s var(--oam-ease);
}

.ownamac-ord-plan:hover{
  border-color:var(--oam-primary);
}

.ownamac-ord-plan.is-on{
  border-color:var(--oam-primary);
  box-shadow:0 0 0 3px rgba(232,62,188,.16);
  background:linear-gradient(90deg,var(--oam-primary-soft),var(--oam-surface) 55%);
}

.ownamac-ord-plan-name{
  color:var(--oam-dark);
  font-family:var(--oam-mono);
  font-weight:700;
}

.ownamac-ord-plan-chip{
  padding:.14rem .55rem;
  color:var(--oam-primary-deep);
  background:var(--oam-primary-soft);
  border-radius:999px;
  font-size:var(--oam-fs-0);
  font-family:var(--oam-mono);
}

.ownamac-ord-plan-spec{
  min-width:0;
  color:var(--oam-muted);
  font-size:var(--oam-fs-1);
}

.ownamac-ord-plan-price{
  color:var(--oam-dark);
  font-family:var(--oam-mono);
  font-size:var(--oam-fs-3);
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.ownamac-ord-plan-price em{
  margin-left:.15rem;
  color:var(--oam-muted);
  font-size:var(--oam-fs-0);
  font-style:normal;
}

.oab-seg{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}

.ownamac-ord-seg-btn{
  padding:.55rem 1.1rem;
  background:var(--oam-surface);
  border:1px solid var(--oam-line-strong);
  border-radius:999px;
  color:var(--oam-ink);
  font:inherit;
  font-size:var(--oam-fs-1);
  cursor:pointer;
  transition:border-color .15s var(--oam-ease),background .15s var(--oam-ease);
}

.ownamac-ord-seg-btn em{
  margin-left:.3rem;
  color:var(--oam-primary-deep);
  font-style:normal;
  font-family:var(--oam-mono);
  font-size:var(--oam-fs-0);
}

.ownamac-ord-seg-btn:hover{
  border-color:var(--oam-primary);
}

.ownamac-ord-seg-btn.is-on{
  background:var(--oam-dark);
  border-color:var(--oam-dark);
  color:#FFF;
}

.ownamac-ord-seg-btn.is-on em{
  color:var(--oam-accent);
}

.oab-region-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}

.ownamac-ord-region{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1rem;
  background:var(--oam-surface);
  border:1px solid var(--oam-line-strong);
  border-radius:var(--oam-radius-sm);
  color:var(--oam-ink);
  font:inherit;
  font-size:var(--oam-fs-1);
  cursor:pointer;
  transition:border-color .15s var(--oam-ease);
}

.ownamac-ord-region::before{
  content:'';
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:var(--oam-line-strong);
  transition:background .15s var(--oam-ease);
}

.ownamac-ord-region:hover{
  border-color:var(--oam-primary);
}

.ownamac-ord-region.is-on{
  border-color:var(--oam-primary);
  box-shadow:0 0 0 3px rgba(232,62,188,.16);
}

.ownamac-ord-region.is-on::before{
  background:var(--oam-success);
  box-shadow:0 0 0 3px rgba(39,168,109,.2);
}

.oab-toggle{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  margin-top:var(--oam-space-2);
  padding:.9rem var(--oam-space-2);
  border:1px dashed var(--oam-line-strong);
  border-radius:var(--oam-radius-md);
  cursor:pointer;
}

.oab-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.oab-toggle__track{
  position:relative;
  flex:none;
  width:2.5rem;
  height:1.4rem;
  margin-top:.1rem;
  background:var(--oam-line-strong);
  border-radius:999px;
  transition:background .15s var(--oam-ease);
}

.oab-toggle__track::after{
  content:'';
  position:absolute;
  top:.17rem;
  left:.2rem;
  width:1.06rem;
  height:1.06rem;
  background:#FFF;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(36,22,36,.3);
  transition:transform .15s var(--oam-ease);
}

.oab-toggle input:checked+.oab-toggle__track{
  background:var(--oam-primary);
}

.oab-toggle input:checked+.oab-toggle__track::after{
  transform:translateX(1.06rem);
}

.oab-toggle input:focus-visible+.oab-toggle__track{
  outline:2px solid var(--oam-primary);
  outline-offset:2px;
}

.oab-toggle__text{
  display:grid;
  gap:.15rem;
  min-width:0;
}

.oab-toggle__text strong{
  color:var(--oam-dark);
}

.oab-toggle__text em{
  color:var(--oam-primary-deep);
  font-style:normal;
  font-family:var(--oam-mono);
  font-size:var(--oam-fs-1);
}

.oab-toggle__text small{
  color:var(--oam-muted);
  font-size:var(--oam-fs-1);
}

.oab-card{
  position:sticky;
  top:var(--oam-space-3);
  padding:var(--oam-space-3);
  color:#F4E9F2;
  background:
    radial-gradient(24rem 12rem at 50% -4rem,rgba(232,62,188,.32),transparent 62%),
    linear-gradient(172deg,#2E1C2C,#1E1220 56%,#241624);
  border:1px solid #432E40;
  border-radius:var(--oam-radius-xl);
  box-shadow:var(--oam-shadow-lg);
}

.oab-card__head{
  display:grid;
  gap:.3rem;
  margin-bottom:var(--oam-space-2);
  padding-bottom:var(--oam-space-2);
  border-bottom:1px dashed rgba(244,233,242,.22);
}

.oab-card__ref{
  color:rgba(244,233,242,.6);
  font-family:var(--oam-mono);
  font-size:var(--oam-fs-0);
  letter-spacing:.18em;
}

.oab-card__title{
  margin:0;
  color:#FFF;
  font-family:var(--oam-heading);
  font-size:var(--oam-fs-4);
}

.oab-card__live{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  width:fit-content;
  color:#8BE6B8;
  font-family:var(--oam-mono);
  font-size:var(--oam-fs-0);
}

.oab-card__live i{
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:#37D488;
  box-shadow:0 0 0 3px rgba(55,212,136,.2);
}

.oab-card__rows{
  display:grid;
  gap:0;
  margin:0 0 var(--oam-space-2);
}

.oab-card__rows div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--oam-space-2);
  padding:.55rem 0;
  border-bottom:1px solid rgba(244,233,242,.1);
}

.oab-card__rows dt{
  flex:none;
  color:rgba(244,233,242,.62);
  font-size:var(--oam-fs-1);
}

.oab-card__rows dd{
  margin:0;
  min-width:0;
  color:#FFF;
  font-family:var(--oam-mono);
  font-size:var(--oam-fs-1);
  text-align:right;
  overflow-wrap:anywhere;
}

.oab-card__total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--oam-space-2);
  margin-bottom:var(--oam-space-2);
  padding:.8rem var(--oam-space-2);
  background:rgba(232,62,188,.14);
  border:1px solid rgba(232,62,188,.4);
  border-radius:var(--oam-radius-md);
}

.oab-card__total>span{
  color:rgba(244,233,242,.75);
  font-size:var(--oam-fs-1);
}

.oab-card__total strong{
  color:#FFD02F;
  font-family:var(--oam-mono);
  font-size:1.55rem;
  font-variant-numeric:tabular-nums;
}

.oab-card__total em{
  margin-left:.2rem;
  color:rgba(244,233,242,.65);
  font-size:var(--oam-fs-1);
  font-style:normal;
}

.oab-btn{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  padding:.8rem 1.2rem;
  border-radius:var(--oam-radius-md);
  font:inherit;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s var(--oam-ease),border-color .15s var(--oam-ease);
}

.oab-btn+.oab-btn{
  margin-top:.6rem;
}

.oab-btn--pay{
  background:var(--oam-primary);
  border:1px solid var(--oam-primary);
  color:#FFF;
}

.oab-btn--pay:hover,
.oab-btn--pay:focus-visible{
  background:var(--oam-primary-deep);
  border-color:var(--oam-primary-deep);
}

.oab-btn--line{
  background:transparent;
  border:1px solid rgba(244,233,242,.4);
  color:#F4E9F2;
}

.oab-btn--line:hover,
.oab-btn--line:focus-visible{
  border-color:#FFF;
}

.oab-msg{
  margin:.7rem 0 0;
  color:#FFB3C8;
  font-size:var(--oam-fs-1);
}

.oab-msg[data-ok],
.oab-msg.is-ok{
  color:#8BE6B8;
}

.oab-note{
  margin:.7rem 0 0;
  color:rgba(244,233,242,.55);
  font-size:var(--oam-fs-0);
  line-height:1.55;
}

.oab-auth{
  margin-top:var(--oam-space-2);
  padding-top:var(--oam-space-2);
  border-top:1px dashed rgba(244,233,242,.22);
}

.oab-auth__lead{
  margin:0 0 .7rem;
  color:rgba(244,233,242,.75);
  font-size:var(--oam-fs-1);
}

.oab-auth__label{
  display:block;
  margin:.6rem 0 .3rem;
  color:rgba(244,233,242,.6);
  font-size:var(--oam-fs-0);
  letter-spacing:.06em;
}

.oab-auth__row{
  display:flex;
  gap:.5rem;
}

.oab-auth__row .oab-btn{
  width:auto;
  flex:none;
  padding-inline:.9rem;
  font-size:var(--oam-fs-1);
}

.oab-auth__input{
  min-width:0;
  flex:1;
  padding:.6rem .8rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(244,233,242,.35);
  border-radius:var(--oam-radius-sm);
  color:#FFF;
  font:inherit;
}

.oab-auth__input:focus{
  outline:2px solid var(--oam-primary);
  outline-offset:1px;
  border-color:var(--oam-primary);
}

.oab-gw{
  margin-top:var(--oam-space-2);
  padding-top:var(--oam-space-2);
  border-top:1px dashed rgba(244,233,242,.22);
}

.oab-gw__title{
  margin:0 0 .7rem;
  color:#FFF;
  font-size:var(--oam-fs-2);
}

.oab-gw__list{
  display:grid;
  gap:.5rem;
  margin-bottom:.7rem;
}

.ownamac-ord-gw-item{
  display:grid;
  gap:.15rem;
  padding:.7rem .9rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(244,233,242,.3);
  border-radius:var(--oam-radius-sm);
  color:#FFF;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s var(--oam-ease);
}

.ownamac-ord-gw-item:hover,
.ownamac-ord-gw-item:focus-visible{
  border-color:var(--oam-primary);
}

.ownamac-ord-gw-item[disabled]{
  opacity:.5;
  cursor:wait;
}

.ownamac-ord-gw-item small{
  color:rgba(244,233,242,.6);
  font-size:var(--oam-fs-0);
}

.oab-dialog{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--oam-space-3);
}

.oab-dialog[hidden]{
  display:none;
}

.oab-dialog__backdrop{
  position:absolute;
  inset:0;
  background:rgba(24,12,22,.6);
  backdrop-filter:blur(3px);
}

.oab-dialog__panel{
  position:relative;
  width:min(26rem,100%);
  padding:var(--oam-space-3);
  background:var(--oam-surface);
  border:1px solid var(--oam-line-strong);
  border-radius:var(--oam-radius-lg);
  box-shadow:var(--oam-shadow-lg);
}

.oab-dialog__kicker{
  margin:0 0 .4rem;
  color:var(--oam-primary-deep);
  font-family:var(--oam-mono);
  font-size:var(--oam-fs-0);
  letter-spacing:.16em;
}

.oab-dialog__title{
  margin:0 0 .6rem;
  color:var(--oam-dark);
  font-family:var(--oam-heading);
  font-size:var(--oam-fs-4);
}

.oab-dialog__body{
  margin:0 0 var(--oam-space-2);
  color:var(--oam-muted);
  font-size:var(--oam-fs-2);
}

.oab-dialog__actions{
  display:grid;
  gap:.6rem;
}

.oab-dialog__actions .oab-btn+.oab-btn{
  margin-top:0;
}

.oab-dialog__actions .oab-btn--line{
  border-color:var(--oam-line-strong);
  color:var(--oam-dark);
}

.oab-dialog__actions .oab-btn--line:hover{
  border-color:var(--oam-primary);
}

@media(max-width:960px){
  .oab-layout{
    grid-template-columns:1fr;
  }

  .oab-card{
    position:static;
  }
}

@media(max-width:640px){
  .ownamac-ord-plan{
    grid-template-columns:minmax(0,1fr) max-content;
    grid-template-areas:
      "name price"
      "chip price"
      "spec spec";
  }

  .ownamac-ord-plan-name{grid-area:name}
  .ownamac-ord-plan-chip{grid-area:chip;justify-self:start}
  .ownamac-ord-plan-spec{grid-area:spec}
  .ownamac-ord-plan-price{grid-area:price;align-self:center}

  .oab-auth__row{
    flex-direction:column;
  }

  .oab-auth__row .oab-btn{
    width:100%;
  }
}