:root{
  --bg:var(--arc-bg-2, #121216);
  --panel:var(--arc-panel, #17171f);
  --panel2:var(--arc-panel-2, #211d2b);
  --line:var(--arc-line, #3a2f4e);
  --text:var(--arc-text, #f3f0e8);
  --muted:var(--arc-text-soft, #c7c1d7);
  --accent:var(--aether-theme-primary-deep, #5a3c82);
  --accent2:var(--aether-theme-primary-soft, #7a56a8);
  --gold:var(--aether-theme-accent, #efc46c);
  --danger:#b24c63;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at top, rgba(90,60,130,.22), transparent 40%),
    linear-gradient(180deg, #15151c, #101015);
  color:var(--text);
  font-family:system-ui, sans-serif;
}

body{
  min-height:100vh;
}

.portal-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.portal-panel{
  width:min(92vw, 520px);
  background:linear-gradient(180deg, rgba(23,23,31,.98), rgba(18,18,24,.98));
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  padding:22px;
}

.portal-panel-wide{
  width:min(96vw, 920px);
}

.portal-brand{
  margin-bottom:18px;
}

.portal-brand-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(180px, 240px) minmax(0, 1fr);
  gap:22px;
  align-items:center;
  margin-bottom:20px;
  padding:20px 22px;
  border-radius:26px;
  border:1px solid rgba(var(--aether-theme-aura-rgb, 116, 216, 255), .18);
  background:
    linear-gradient(135deg, rgba(8,16,34,.9), rgba(23,10,38,.78) 52%, rgba(7,8,18,.58)),
    radial-gradient(circle at 18% 36%, rgba(var(--aether-theme-aura-rgb, 116, 216, 255), .14), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(var(--aether-theme-violet-rgb, 182, 146, 255), .18), transparent 24%);
  box-shadow:
    0 24px 58px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 42px rgba(var(--aether-theme-aura-rgb, 116, 216, 255), .05);
  overflow:hidden;
}

.portal-brand-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(112deg, transparent 0 12%, rgba(255,255,255,.07) 18%, transparent 26%),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.05), transparent 16%),
    radial-gradient(circle at 88% 74%, rgba(var(--aether-theme-violet-rgb, 182, 146, 255), .12), transparent 20%);
}

.portal-brand-hero--compact{
  grid-template-columns:minmax(150px, 196px) minmax(0, 1fr);
  padding:18px 20px;
}

.aether-brand-art{
  position:relative;
  width:100%;
  max-width:240px;
  margin-inline:auto;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.26));
}

.portal-brand-hero--compact .aether-brand-art{
  max-width:196px;
}

.aether-brand-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
  border:1px solid rgba(var(--aether-theme-aura-rgb, 116, 216, 255), .16);
  box-shadow:
    0 24px 50px rgba(0,0,0,.3),
    0 0 0 1px rgba(var(--aether-theme-violet-rgb, 182, 146, 255), .08),
    0 0 26px rgba(var(--aether-theme-aura-rgb, 116, 216, 255), .12);
}

.aether-brand-copy{
  min-width:0;
  display:grid;
  gap:10px;
}

.portal-brand-title{
  font-size:14px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#f4fbff;
}

.portal-subtitle{
  margin-top:4px;
  color:var(--gold);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.portal-status{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:18px;
  color:var(--muted);
  min-height:46px;
  display:flex;
  align-items:center;
}

.portal-form{
  display:grid;
  gap:10px;
}

.portal-label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.portal-input{
  width:100%;
  border:1px solid var(--line);
  background:#111119;
  color:var(--text);
  padding:12px 14px;
  border-radius:12px;
  outline:none;
}

.portal-input:focus{
  border-color:var(--accent2);
  box-shadow:0 0 0 1px rgba(122,86,168,.25);
}

.portal-input.is-invalid{
  border-color:rgba(178,76,99,.9);
  box-shadow:0 0 0 1px rgba(178,76,99,.2);
}

.portal-help{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  margin-top:-2px;
}

.portal-help code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--gold);
}

.portal-rule-list{
  display:grid;
  gap:6px;
  margin-top:2px;
}

.portal-rule{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.portal-rule::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
  flex:0 0 auto;
}

.portal-rule.pass{
  color:#d9f4da;
}

.portal-rule.pass::before{
  background:#3d745b;
  box-shadow:0 0 0 1px rgba(61,116,91,.28);
}

.portal-inline-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:-2px;
}

.portal-link-btn{
  border:none;
  background:none;
  color:var(--gold);
  padding:0;
  font:inherit;
  font-size:12px;
  letter-spacing:.04em;
  cursor:pointer;
}

.portal-link-btn:hover{
  color:#fff2c7;
  text-decoration:underline;
}

.portal-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}

.portal-btn{
  border:none;
  background:var(--accent);
  color:#fff;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}

.portal-btn:hover{
  background:var(--accent2);
}

.portal-btn-accent{
  background:#2f5a46;
}

.portal-btn-accent:hover{
  background:#3d745b;
}

.portal-btn-danger{
  background:var(--danger);
}

.portal-btn-danger:hover{
  background:#c85a73;
}

.is-hidden{
  display:none !important;
}

.portal-footer{
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  border-top:1px solid var(--line);
  padding-top:14px;
}

@media (max-width: 720px){
  .portal-panel{
    width:min(94vw, 560px);
    padding:18px;
  }

  .portal-brand-hero{
    grid-template-columns:1fr;
    padding:18px;
  }

  .portal-brand-title{
    font-size:14px;
  }
}

.portal-theme-panel{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:grid;
  gap:14px;
}

.portal-theme-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.portal-theme-copy{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  margin-top:6px;
}

.portal-theme-presets{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
}

.portal-preset-btn{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(31,25,43,.96), rgba(17,14,24,.98));
  color:var(--text);
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:10px;
  text-align:left;
  font-weight:800;
}

.portal-preset-btn.active{
  border-color:rgba(239,196,108,.72);
  box-shadow:0 0 0 1px rgba(239,196,108,.18), 0 0 26px rgba(90,60,130,.18);
}

.portal-preset-preview{
  display:block;
  height:42px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, var(--preset-primary), #16111f 52%, var(--preset-accent));
}

.portal-theme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}

.portal-theme-field{
  display:grid;
  gap:8px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.portal-theme-field input{
  width:100%;
  min-height:52px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#111119;
  padding:6px;
}

.portal-theme-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.portal-theme-status{
  color:var(--muted);
  font-size:13px;
}

.portal-theme-status.ok{
  color:#dff6e8;
}

.portal-theme-status.warn{
  color:#ffe7b1;
}

.hub-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(12px, 3vh, 28px) 16px;
}

.hub-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(6, 7, 12, .72);
  backdrop-filter:blur(8px);
}

.hub-modal-panel{
  position:relative;
  z-index:1;
  width:min(100%, 760px);
  border:1px solid rgba(239,196,108,.18);
  border-radius:22px;
  background:
    radial-gradient(circle at top, rgba(90,60,130,.18), transparent 32%),
    linear-gradient(180deg, rgba(23,23,31,.98), rgba(15,14,21,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.5);
  padding:22px;
  display:grid;
  gap:14px;
  overflow:visible;
}

.hub-modal-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.hub-modal-copy-block{
  min-width:0;
  display:grid;
  gap:6px;
}

.hub-modal-title{
  font-size:28px;
  font-weight:900;
  color:#fff8e8;
}

.hub-npc-summary-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hub-npc-summary-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(17,17,25,.84);
  color:var(--muted);
  font-size:12px;
  line-height:1.2;
}

.hub-npc-summary-chip span{
  color:#fff8e8;
  font-weight:800;
}

.hub-npc-chat-log{
  min-height:280px;
  max-height:min(42vh, 460px);
  overflow:auto;
  display:grid;
  gap:10px;
  padding:6px 2px 4px;
}

.hub-npc-chat-message{
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:12px 14px;
  display:grid;
  gap:6px;
  background:rgba(17,17,25,.88);
}

.hub-npc-chat-message.user{
  background:linear-gradient(180deg, rgba(49,73,100,.72), rgba(18,23,36,.92));
  border-color:rgba(117,171,224,.22);
}

.hub-npc-chat-message.assistant{
  background:linear-gradient(180deg, rgba(54,30,58,.82), rgba(24,17,30,.94));
  border-color:rgba(239,196,108,.14);
}

.hub-npc-chat-message.system{
  background:linear-gradient(180deg, rgba(29,39,52,.78), rgba(15,18,25,.92));
  border-color:rgba(159,223,255,.16);
}

.hub-npc-chat-role{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
}

.hub-npc-chat-body{
  color:#f3f0e8;
  font-size:14px;
  line-height:1.55;
  white-space:pre-wrap;
}

.hub-npc-chat-form{
  border-top:1px solid var(--line);
  padding-top:14px;
}

.hub-npc-chat-input{
  resize:vertical;
  min-height:86px;
}

.hub-npc-trade-panel{
  display:grid;
  gap:12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:14px;
  background:linear-gradient(180deg, rgba(29,22,38,.82), rgba(15,14,21,.92));
}

.hub-npc-trade-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

.hub-npc-price-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hub-npc-offer-row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.hub-npc-price-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(239,196,108,.16);
  background:rgba(17,17,25,.84);
  color:var(--muted);
  font-size:12px;
}

.hub-npc-price-chip strong{
  color:#fff8e8;
  font-size:12px;
}

.hub-npc-offer-card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(239,196,108,.16);
  background:rgba(17,17,25,.88);
}

.hub-npc-offer-card.is-ready{
  border-color:rgba(135, 211, 168, .34);
  box-shadow:0 0 0 1px rgba(135, 211, 168, .14) inset;
}

.hub-npc-offer-copy{
  min-width:0;
  display:grid;
  gap:4px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.hub-npc-offer-copy strong{
  color:#fff8e8;
  font-size:13px;
}

.hub-npc-offer-meta{
  color:#cdbfdb;
  font-size:12px;
}

.hub-npc-offer-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.hub-npc-offer-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(26,25,35,.9);
  color:#d9cbeb;
  font-size:12px;
  text-transform:capitalize;
}

.hub-npc-purchase-form{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(110px, .8fr) auto;
  gap:10px;
  align-items:end;
}

.portal-status.ok{
  color:#dff6e8;
  border-color:#3f6e58;
}

.portal-status.warn{
  color:#ffe7b1;
  border-color:#7b6231;
}

.portal-status.bad{
  color:#ffd3dc;
  border-color:#7a3144;
}

@media (max-width:700px){
  .portal-panel{
    padding:18px;
    border-radius:18px;
  }

  .portal-title{
    font-size:28px;
  }

  .portal-actions{
    grid-template-columns:1fr;
  }

  .portal-theme-presets,
  .portal-theme-grid{
    grid-template-columns:1fr;
  }

  .portal-brand-hero,
  .portal-brand-hero--compact{
    grid-template-columns:1fr;
    padding:18px;
  }

  .hub-modal-panel{
    width:min(100%, 760px);
    padding:18px;
  }

  .hub-modal-top{
    flex-direction:column;
  }

  .hub-npc-trade-head{
    flex-direction:column;
  }

  .hub-npc-purchase-form{
    grid-template-columns:1fr;
  }

  .hub-npc-offer-card{
    grid-template-columns:1fr;
  }

  .hub-npc-offer-actions{
    justify-content:flex-start;
  }

  .aether-brand-art{
    max-width:220px;
    margin-inline:0;
  }
}


.portal-actions-single{grid-template-columns:1fr;}
.portal-actions-3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:700px){.portal-actions-3{grid-template-columns:1fr;}}

.portal-auth-panel{
  width:min(92vw, 620px);
}

.portal-split-panel{
  display:grid;
  grid-template-columns:minmax(260px, 320px) minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

.portal-sidecard,
.portal-maincard{
  display:grid;
  gap:16px;
}

.portal-auth-copy{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  margin-bottom:2px;
}

.portal-note-list{
  display:grid;
  gap:10px;
}

.portal-note{
  border:1px solid rgba(239,196,108,.18);
  background:rgba(13,16,22,.55);
  border-radius:14px;
  padding:12px 14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.portal-form-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.portal-field{
  display:grid;
  gap:10px;
}

.portal-field.is-hidden,
.portal-check.is-hidden{
  display:none;
}

.portal-check-stack{
  display:grid;
  gap:10px;
  margin-top:4px;
}

.portal-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.portal-check input{
  margin-top:2px;
}

.portal-check a,
.portal-legal-rail a{
  color:var(--gold);
  text-decoration:none;
}

.portal-check a:hover,
.portal-legal-rail a:hover{
  text-decoration:underline;
}

.portal-actions-stack{
  grid-template-columns:1fr;
}

.portal-btn-ghost{
  background:transparent;
  border:1px solid var(--line);
  text-decoration:none;
  text-align:center;
}

.portal-btn-ghost:hover{
  background:rgba(255,255,255,.04);
}

.portal-inline-actions-spread{
  justify-content:space-between;
  gap:16px;
}

.portal-legal-rail{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
}

.portal-legal-rail-stack{
  flex-direction:column;
  gap:10px;
}

.portal-legal-copy{
  display:grid;
  gap:12px;
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}

.portal-legal-copy p{
  margin:0;
}

.portal-legal-copy h3{
  margin:8px 0 0;
  color:var(--gold);
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.portal-legal-copy ul{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:8px;
}

.portal-legal-copy li{
  color:var(--muted);
  line-height:1.65;
}

.portal-legal-copy strong{
  color:var(--text);
}

.portal-legal-meta{
  color:var(--gold);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

@media (max-width:900px){
  .portal-split-panel{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){
  .portal-form-columns{
    grid-template-columns:1fr;
  }

  .portal-inline-actions-spread{
    flex-direction:column;
    align-items:flex-start;
  }

  .portal-legal-rail{
    flex-direction:column;
    gap:10px;
  }
}