.access-pending > .app-header,
.access-pending > .board,
.access-pending > footer,
.access-admin > .app-header,
.access-admin > .board,
.access-admin > footer,
.access-admin > .modal,
.access-admin > .toast-region { display: none !important; }
.access-granted > .access-root { display: none !important; }

.access-root {
  min-height: 100dvh;
  color: #151820;
  background: #f7f8fb;
  font-family: "Manrope", sans-serif;
}
.access-root *, .access-root *::before, .access-root *::after { box-sizing: border-box; }
.access-root button, .access-root input, .access-root select { font: inherit; }
.access-root button, .access-root a { -webkit-tap-highlight-color: transparent; }
.access-root button:focus-visible, .access-root input:focus-visible, .access-root select:focus-visible, .access-root a:focus-visible { outline: 2px solid #8d9cff; outline-offset: 3px; }
.portal-brand { display: flex; align-items: center; gap: 12px; }
.portal-brand > span:last-child { display: grid; gap: 4px; }
.portal-brand strong { font-size: 15px; line-height: 1; }
.portal-brand small { color: #7f8999; font: 500 8px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.portal-mark { width: 38px; height: 38px; padding: 9px; display: grid; grid-template-columns: repeat(3,1fr); align-items: end; gap: 3px; border: 1px solid rgba(141,156,255,.3); border-radius: 12px; background: linear-gradient(145deg,#303967,#191e35); }
.portal-mark i { border-radius: 1px; background: #c4cbff; }
.portal-mark i:nth-child(1) { height: 8px; opacity: .6; }
.portal-mark i:nth-child(2) { height: 16px; }
.portal-mark i:nth-child(3) { height: 11px; opacity: .8; }
.portal-eyebrow { color: #9ba8ff; font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.portal-primary { min-height: 48px; padding: 0 18px; border: 0; border-radius: 11px; color: #fff; background: #6d7df2; font-weight: 700; cursor: pointer; box-shadow: 0 12px 30px rgba(79,95,216,.24); }
.portal-primary:hover:not(:disabled) { background: #5d6ee6; transform: translateY(-1px); }
.portal-primary:disabled { opacity: .62; cursor: wait; }
.portal-notices { position: fixed; z-index: 20; top: 16px; right: 16px; display: grid; gap: 8px; }
.portal-notice { max-width: 340px; padding: 11px 14px; border: 1px solid #303744; border-radius: 10px; background: #151922; box-shadow: 0 16px 44px rgba(0,0,0,.34); font-size: 12px; }
.portal-notice.success { border-color: rgba(56,199,147,.38); color: #8be2c1; }
.portal-notice.error { border-color: rgba(255,107,122,.38); color: #ff9ba6; }

.access-pending { background: #f7f8fb; }
.access-gate { min-height: 100dvh; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); color: #151820; background: #fff; }
.access-story { position: relative; min-height: 100dvh; overflow: hidden; isolation: isolate; padding: clamp(24px,4vw,56px); border-right: 1px solid #e6e8ef; background: radial-gradient(circle at 50% 45%,#fff 0%,#f4f6fc 46%,#eceffa 100%); }
.access-story::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .45; background-image: linear-gradient(rgba(20,25,38,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,25,38,.035) 1px,transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg,#000 0%,transparent 78%); pointer-events: none; }
.access-binary { position: absolute; z-index: 0; inset: 0; overflow: hidden; opacity: 1; pointer-events: none; }
.access-binary::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 52%,transparent 24%,rgba(90,110,232,.08) 72%,rgba(90,110,232,.13) 100%); }
.access-binary canvas { width: 100%; height: 100%; display: block; }
.binary-fallback { position: absolute; inset: 15%; display: grid; place-items: center; }
.binary-fallback i { position: absolute; width: clamp(22px,4vw,54px); aspect-ratio: 1; border: 2px solid rgba(83,105,234,.24); border-radius: 50%; background: rgba(83,105,234,.08); box-shadow: 0 0 0 12px rgba(83,105,234,.025); animation: fallback-orbit 5s ease-in-out infinite; }
.binary-fallback i:nth-child(1) { transform: translate(-210%,-95%); }
.binary-fallback i:nth-child(2) { transform: translate(110%,-170%) scale(.7); animation-delay: -.8s; }
.binary-fallback i:nth-child(3) { transform: translate(220%,15%) scale(1.25); animation-delay: -1.6s; }
.binary-fallback i:nth-child(4) { transform: translate(70%,175%) scale(.82); animation-delay: -2.4s; }
.binary-fallback i:nth-child(5) { transform: translate(-170%,135%) scale(1.1); animation-delay: -3.2s; }
.binary-fallback i:nth-child(6) { transform: translate(-30%,-5%) scale(1.6); animation-delay: -4s; }
.access-binary.is-ready .binary-fallback { opacity: 0; }
.deriv-lockup { position: absolute; z-index: 2; top: clamp(24px,4vw,56px); left: clamp(24px,4vw,56px); width: max-content; display: grid; justify-items: start; gap: 3px; }
.deriv-lockup > span { color: #727a89; font: 600 8px/1 "IBM Plex Mono",monospace; letter-spacing: .14em; text-transform: uppercase; }
.deriv-lockup img { width: 84px; height: auto; display: block; }
.access-scene-key { position: absolute; z-index: 3; left: 50%; bottom: clamp(22px,4vw,48px); display: flex; gap: 8px; transform: translateX(-50%); }
.access-scene-key i { width: 6px; height: 6px; border-radius: 50%; background: #24304b; box-shadow: 0 0 0 4px rgba(36,48,75,.06); }
.access-scene-key i:nth-child(3), .access-scene-key i:nth-child(4) { background: #6075f0; box-shadow: 0 0 0 4px rgba(96,117,240,.09); }
.access-copy { position: relative; z-index: 2; max-width: 680px; margin-block: 80px 40px; }
.access-copy h1 { margin: 20px 0 22px; color: #11141b; font-size: clamp(46px,6.2vw,90px); line-height: .98; letter-spacing: -.07em; }
.access-copy h1 span, .access-copy h1 em { display: block; }
.access-copy h1 em { color: #5b6ee8; font-style: normal; }
.three-ready .access-copy h1 { opacity: 0; }
.access-copy p { max-width: 240px; margin: 0; color: #5e6675; font-size: clamp(13px,1.1vw,16px); line-height: 1.6; }
.access-gate .portal-eyebrow { color: #5265dd; }
.access-price { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; }
.access-price > strong { color: #171a22; font: 600 54px/1 "IBM Plex Mono", monospace; letter-spacing: -.06em; }
.access-price sup { margin-right: 3px; color: #5b6ee8; font-size: 18px; vertical-align: top; }
.access-price span { display: grid; gap: 5px; }
.access-price b { color: #252a35; font-size: 13px; }
.access-price small { color: #737c8b; font-size: 10px; }
.risk-copy { position: absolute; z-index: 2; right: 28px; bottom: 26px; max-width: 320px; margin: 0; color: #7d8490; font-size: 9px; line-height: 1.5; text-align: right; }
.access-panel { padding: clamp(28px,5vw,78px); display: flex; flex-direction: column; justify-content: center; color: #171a22; background: #fff; }
.access-panel-head { margin-bottom: 32px; }
.access-panel-head > span { color: #5265dd; font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.access-panel-head h2 { margin: 13px 0 9px; color: #11141b; font-size: clamp(28px,3vw,40px); line-height: 1.1; letter-spacing: -.045em; }
.access-panel-head p { margin: 0; color: #747d8c; font-size: 12px; }
.access-form { display: grid; gap: 14px; }
.access-form label { display: grid; gap: 8px; }
.access-form label > span { color: #a8b0bd; font-size: 10px; font-weight: 600; }
.access-form input, .key-create-card input, .key-create-card select, .key-register-head input { width: 100%; height: 49px; padding: 0 14px; border: 1px solid #303642; border-radius: 10px; color: #f4f6f8; background: #151922; outline: 0; }
html[data-theme="light"] .access-root .access-form input,
html[data-theme="light"] .access-root .key-create-card input,
html[data-theme="light"] .access-root .key-create-card select,
html[data-theme="light"] .access-root .key-register-head input { color: #f4f6f8; background: #151922; }
.access-form input { font: 600 13px/1 "IBM Plex Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
.access-form input:focus, .key-create-card input:focus, .key-create-card select:focus, .key-register-head input:focus { border-color: #7e8df5; box-shadow: 0 0 0 3px rgba(126,141,245,.12); }
.access-error { margin: 0; color: #ff8b98; font-size: 11px; }
.access-gate .access-form label > span { color: #495260; }
.access-gate .access-form input,
html[data-theme="light"] .access-root .access-gate .access-form input { border-color: #d8dce5; color: #151820; background: #f8f9fc; box-shadow: inset 0 1px 2px rgba(26,32,44,.03); }
.access-gate .access-form input::placeholder { color: #9ca3af; }
.access-gate .access-error { color: #c8374b; }
.access-divider { margin: 26px 0 14px; display: flex; align-items: center; gap: 12px; color: #626c7b; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.access-divider::before, .access-divider::after { content: ""; height: 1px; flex: 1; background: #252a34; }
.portal-action { min-height: 66px; margin-top: 10px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #2b313c; border-radius: 12px; color: #eef1f5; background: #13171f; text-decoration: none; }
.portal-action:hover { border-color: #6677ee; background: #171c27; }
.portal-action span { display: grid; gap: 5px; }
.portal-action strong { font-size: 12px; }
.portal-action small { color: #7f8999; font-size: 9px; }
.portal-action > b { color: #aab4ff; font: 600 11px/1 "IBM Plex Mono", monospace; white-space: nowrap; }
.portal-action.telegram > b { color: #74c4f3; }
.access-assurance { margin-top: 22px; display: flex; justify-content: center; gap: 16px; color: #687282; font: 500 8px/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.access-assurance span + span::before { content: "·"; margin-right: 16px; }
.access-gate .access-divider { color: #9aa1ad; }
.access-gate .access-divider::before,
.access-gate .access-divider::after { background: #e4e7ed; }
.access-gate .portal-action { border-color: #e0e3ea; color: #1c2029; background: #f8f9fb; box-shadow: 0 6px 20px rgba(33,43,70,.035); }
.access-gate .portal-action:hover { border-color: #8b98e9; background: #f3f5ff; }
.access-gate .portal-action small { color: #7e8795; }
.access-gate .portal-action > b { color: #5265dd; }
.access-gate .portal-action.telegram > b { color: #168cc4; }
.access-gate .access-assurance { color: #8d95a2; }

.admin-login-shell { min-height: 100dvh; padding: 24px; display: grid; place-items: center; color: #f4f6f8; background: radial-gradient(circle at 50% 0, rgba(109,125,242,.14), transparent 360px), #090b10; }
.admin-login-card { width: min(430px,100%); padding: 32px; display: grid; gap: 30px; border: 1px solid #292f3a; border-radius: 18px; background: #12151b; box-shadow: 0 28px 80px rgba(0,0,0,.38); }
.admin-login-card h1 { margin: 12px 0 8px; font-size: 32px; letter-spacing: -.05em; }
.admin-login-card p { margin: 0; color: #8993a3; font-size: 12px; }
.admin-host-note { color: #5e6877; font: 500 9px/1 "IBM Plex Mono", monospace; text-align: center; }

.admin-dashboard { min-height: 100dvh; color: #f4f6f8; background: #0b0e14; }
.admin-topbar { min-height: 68px; padding: 10px clamp(16px,3vw,42px); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #292f3a; background: rgba(9,11,16,.94); }
.admin-topbar > div:last-child { display: flex; align-items: center; gap: 10px; }
.admin-topbar a, .admin-topbar button, .admin-title > button { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; border: 1px solid #303642; border-radius: 9px; color: #cbd1db; background: #151922; text-decoration: none; font-size: 10px; font-weight: 650; cursor: pointer; }
.admin-topbar a:hover, .admin-topbar button:hover, .admin-title > button:hover { border-color: #7e8df5; }
.admin-content { width: min(1240px,calc(100% - 28px)); margin: 0 auto; padding: 42px 0 70px; }
.admin-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.admin-title h1 { margin: 12px 0 7px; font-size: clamp(30px,4vw,48px); line-height: 1; letter-spacing: -.055em; }
.admin-title p, .key-create-card p, .key-register-head p { margin: 0; color: #818b9b; font-size: 11px; }
.admin-stats { margin-top: 28px; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.admin-stats > div { min-height: 92px; padding: 16px; display: grid; align-content: space-between; border: 1px solid #292f3a; border-radius: 13px; background: #12151b; }
.admin-stats span { color: #7f8999; font-size: 9px; }
.admin-stats strong { font: 600 28px/1 "IBM Plex Mono", monospace; }
.key-create-card { margin-top: 12px; padding: 22px; display: grid; grid-template-columns: minmax(220px,.7fr) minmax(500px,1.3fr); align-items: end; gap: 30px; border: 1px solid rgba(126,141,245,.25); border-radius: 15px; background: linear-gradient(135deg,rgba(126,141,245,.09),rgba(18,21,27,.96)); }
.key-create-card h2, .key-register-head h2 { margin: 10px 0 7px; font-size: 20px; letter-spacing: -.035em; }
.key-create-card form { display: grid; grid-template-columns: minmax(190px,1fr) minmax(150px,.6fr) auto; align-items: end; gap: 9px; }
.key-create-card label { display: grid; gap: 7px; }
.key-create-card label span { color: #98a1af; font-size: 9px; }
.key-create-card select { appearance: auto; }
.key-create-card .portal-primary { min-width: 132px; }
.generated-key { margin-top: 12px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(56,199,147,.32); border-radius: 14px; background: rgba(56,199,147,.07); }
.generated-key code { display: block; margin-top: 10px; color: #8be2c1; font: 600 clamp(16px,2.3vw,24px)/1.2 "IBM Plex Mono", monospace; letter-spacing: .04em; }
.generated-key p { margin: 8px 0 0; color: #8a94a4; font-size: 10px; }
.generated-key button { min-height: 42px; padding: 0 15px; border: 1px solid rgba(56,199,147,.42); border-radius: 9px; color: #a6ebcf; background: rgba(56,199,147,.08); font-size: 10px; font-weight: 700; cursor: pointer; }
.key-register { margin-top: 12px; overflow: hidden; border: 1px solid #292f3a; border-radius: 15px; background: #11141a; }
.key-register-head { min-height: 84px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #292f3a; }
.key-register-head h2 { margin-top: 0; }
.key-register-head input { width: min(290px,35vw); height: 40px; font-size: 10px; }
.key-list { display: grid; }
.key-record { min-height: 78px; padding: 13px 18px; display: grid; grid-template-columns: minmax(260px,1.3fr) .4fr .82fr .82fr auto; align-items: center; gap: 16px; border-bottom: 1px solid #242a34; }
.key-record:last-child { border-bottom: 0; }
.key-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.key-identity > div { min-width: 0; display: grid; gap: 5px; }
.key-identity strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.key-identity small { color: #697384; font: 500 8px/1 "IBM Plex Mono", monospace; }
.key-status { min-width: 58px; padding: 6px 8px; border: 1px solid currentColor; border-radius: 999px; font: 600 8px/1 "IBM Plex Mono", monospace; text-align: center; text-transform: uppercase; }
.key-status.active { color: #54d3a4; }
.key-status.expired { color: #d9b86c; }
.key-status.revoked { color: #ff7b89; }
.key-detail { display: grid; gap: 6px; }
.key-detail span { color: #687282; font-size: 8px; text-transform: uppercase; }
.key-detail strong { font: 500 9px/1.35 "IBM Plex Mono", monospace; }
.key-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.key-actions button { min-height: 36px; padding: 0 10px; border: 1px solid #303746; border-radius: 8px; color: #c5ccda; background: #171b23; font-size: 9px; font-weight: 700; cursor: pointer; }
.key-actions .copy-key { border-color: rgba(56,199,147,.34); color: #8be2c1; background: rgba(56,199,147,.06); }
.key-actions .replace-key { border-color: rgba(126,141,245,.4); color: #aeb8ff; background: rgba(126,141,245,.07); }
.key-actions .revoke-key { border-color: rgba(255,107,122,.34); color: #ff8e9a; background: rgba(255,107,122,.06); }
.key-actions button:disabled { border-color: #292f3a; color: #626c7b; background: #171a21; cursor: default; }
.admin-empty { min-height: 150px; display: grid; place-items: center; padding: 24px; color: #747e8d; font-size: 11px; text-align: center; }
.admin-empty.error { color: #ff8e9a; }

@media (max-width: 860px) {
  .access-gate { grid-template-columns: 1fr; }
  .access-story { min-height: min(78dvh,720px); padding: 24px; border-right: 0; border-bottom: 1px solid #e6e8ef; }
  .access-binary { opacity: 1; }
  .access-panel { padding: 40px 24px 56px; }
  .key-create-card { grid-template-columns: 1fr; gap: 22px; }
  .key-create-card form { grid-template-columns: 1fr 1fr; }
  .key-create-card .portal-primary { grid-column: 1 / -1; }
  .key-record { grid-template-columns: 1fr 1fr 1fr; }
  .key-identity { grid-column: 1 / -1; }
  .key-actions { grid-column: 1 / -1; justify-content: stretch; }
  .key-actions button { flex: 1; }
}

@media (max-width: 560px) {
  .access-story { min-height: 68dvh; }
  .access-binary { opacity: 1; }
  .deriv-lockup img { width: 74px; }
  .access-panel { padding: 34px 18px 46px; }
  .access-panel-head { margin-bottom: 24px; }
  .access-assurance { gap: 8px; font-size: 7px; }
  .access-assurance span + span::before { margin-right: 8px; }
  .admin-login-shell { padding: 12px; }
  .admin-login-card { padding: 24px 20px; }
  .admin-topbar { padding: 10px 12px; }
  .admin-topbar .portal-brand small { display: none; }
  .admin-topbar a { display: none; }
  .admin-content { width: calc(100% - 20px); padding-top: 28px; }
  .admin-title { align-items: flex-start; }
  .admin-title h1 { font-size: 34px; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-stats > div { min-height: 80px; }
  .key-create-card { padding: 18px; }
  .key-create-card form { grid-template-columns: 1fr; }
  .key-create-card .portal-primary { grid-column: auto; }
  .generated-key { align-items: stretch; flex-direction: column; }
  .generated-key code { overflow-wrap: anywhere; font-size: 17px; }
  .key-register-head { align-items: stretch; flex-direction: column; }
  .key-register-head input { width: 100%; }
  .key-record { padding: 16px; grid-template-columns: 1fr 1fr; }
  .key-detail:nth-of-type(3) { grid-column: 1 / -1; }
  .portal-notices { left: 10px; right: 10px; }
  .portal-notice { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .access-binary canvas { display: none; }
  .binary-fallback i { animation: none; }
}

@keyframes fallback-orbit {
  0%,100% { margin: 0; opacity: .42; }
  50% { margin-top: -18px; opacity: 1; }
}