:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #070b0b;
  color: #f3f6f5;
  --lime: #c6ff1a;
  --line: rgba(222, 236, 232, 0.12);
  --muted: #899491;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #070b0b; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 58% -20%, rgba(83, 116, 39, 0.16), transparent 44%), #070b0b; }
button, input { font: inherit; }
button { color: inherit; }
.modal-open { overflow: hidden; }
.ambient { position: fixed; pointer-events: none; filter: blur(80px); opacity: .18; border-radius: 999px; }
.ambient-one { width: 440px; height: 440px; left: -240px; top: 20%; background: #659a21; }
.ambient-two { width: 360px; height: 360px; right: -180px; bottom: -140px; background: #356259; }

.portal-shell { position: relative; width: min(1480px, calc(100% - 64px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
.portal-header { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand img { width: 38px; height: 38px; border-radius: 0; object-fit: contain; mix-blend-mode: screen; filter: none; }
.brand span { display: grid; gap: 1px; }
.brand strong { font-size: 16px; letter-spacing: .04em; }
.brand small { color: #707a77; font-size: 10px; letter-spacing: .12em; }
.portal-account-actions { display: flex; align-items: center; gap: 8px; }
.account-state { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #7b8784; font: inherit; font-size: 13px; cursor: pointer; }
.account-state:hover { border-color: var(--line); background: rgba(255,255,255,.025); color: #c2ccca; }
.account-lock { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(198,255,26,.28); border-radius: 7px; color: var(--lime); font-size: 13px; }
.signed-in { color: #b6c0bd; }
.offline .account-lock { color: #e7795d; border-color: rgba(231,121,93,.3); }
.portal-logout { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: #111716; color: #aeb8b5; font-size: 12px; cursor: pointer; }
.portal-logout:hover { border-color: rgba(198,255,26,.34); color: var(--lime); }
.portal-logout:disabled { opacity: .55; cursor: wait; }

.product-grid { flex: 1; display: grid; grid-template-columns: 1.18fr 1fr .82fr; align-content: center; gap: 16px; padding: 48px 0; }
.product-card { position: relative; min-height: 360px; padding: 24px; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; text-align: left; background: rgba(15, 21, 20, .88); border: 1px solid var(--line); border-radius: 18px; cursor: pointer; transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.product-card:hover { transform: translateY(-4px); border-color: rgba(198,255,26,.36); background: rgba(20, 28, 25, .96); }
.product-video { background: linear-gradient(145deg, rgba(41,57,28,.74), rgba(15,21,20,.92) 52%); border-color: rgba(198,255,26,.22); }
.product-audio { background: linear-gradient(145deg, rgba(27,51,49,.6), rgba(15,21,20,.92) 55%); }
.card-index { align-self: flex-end; color: #65706d; font-size: 12px; font-variant-numeric: tabular-nums; }
.card-visual { position: relative; display: block; height: 116px; margin: 12px 0 22px; }
.video-visual i { position: absolute; left: 5%; width: 72%; height: 58px; border-radius: 9px; border: 1px solid rgba(217,231,226,.18); background: linear-gradient(110deg, rgba(198,255,26,.13), rgba(255,255,255,.02)); transform: perspective(500px) rotateX(58deg) rotateZ(-11deg); }
.video-visual i:nth-child(1) { top: 4px; opacity: .35; }
.video-visual i:nth-child(2) { top: 25px; left: 11%; opacity: .62; }
.video-visual i:nth-child(3) { top: 48px; left: 17%; border-color: rgba(198,255,26,.55); box-shadow: 0 18px 50px rgba(198,255,26,.08); }
.image-visual { display: grid; grid-template-columns: repeat(2, 82px); grid-template-rows: repeat(2, 48px); gap: 7px; align-content: center; }
.image-visual i { display: block; border-radius: 7px; border: 1px solid rgba(220,234,230,.16); background: linear-gradient(145deg, rgba(95,124,111,.28), rgba(18,26,24,.55)); }
.image-visual i:nth-child(2), .image-visual i:nth-child(3) { background: linear-gradient(145deg, rgba(198,255,26,.12), rgba(18,26,24,.55)); }
.audio-visual { display: flex; gap: 8px; align-items: center; }
.audio-visual i { width: 5px; border-radius: 6px; background: #74807d; }
.audio-visual i:nth-child(1) { height: 25px; }.audio-visual i:nth-child(2) { height: 58px; }.audio-visual i:nth-child(3) { height: 94px; }.audio-visual i:nth-child(4) { height: 46px; }.audio-visual i:nth-child(5) { height: 72px; }
.card-copy { display: grid; margin-top: auto; }
.card-copy small { color: #67726f; font-size: 10px; letter-spacing: .15em; }
.card-copy strong { margin-top: 8px; font-size: 28px; letter-spacing: -.03em; }
.card-copy > span { min-height: 44px; margin-top: 9px; color: #899491; font-size: 13px; line-height: 1.6; }
.card-action { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: #dfe7e4; font-size: 13px; }
.product-video .card-action { color: var(--lime); }
.card-action b { font-size: 18px; font-weight: 400; }
.card-action.muted { color: #717b78; }
.coming-soon { position: absolute; left: 22px; top: 22px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 99px; color: #a5afac; font-size: 10px; }

.portal-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: auto; padding: 36px 0 28px; color: #58615f; font-size: 11px; }
.portal-footer a { color: inherit; text-decoration: none; transition: color .2s ease; }
.portal-footer a:hover { color: #899491; }
.modal-backdrop[hidden], .toast[hidden] { display: none; }
.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(0,4,4,.72); backdrop-filter: blur(13px); }
.login-modal { position: relative; width: min(460px, 100%); padding: 34px; border: 1px solid rgba(209,227,221,.15); border-radius: 20px; background: #111716; box-shadow: 0 34px 100px rgba(0,0,0,.55); }
.modal-close { position: absolute; right: 18px; top: 15px; border: 0; background: transparent; color: #7e8986; font-size: 28px; cursor: pointer; }
.modal-product { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(198,255,26,.28); border-radius: 12px; color: var(--lime); background: rgba(198,255,26,.07); font-weight: 800; }
.modal-kicker { display: block; margin-top: 24px; color: var(--lime); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.login-modal h2 { margin: 8px 0 24px; font-size: 26px; }
.login-modal form { display: grid; gap: 15px; }
.login-modal label { display: grid; gap: 7px; color: #9da7a4; font-size: 12px; }
.login-modal input { width: 100%; height: 48px; padding: 0 14px; outline: none; color: #f4f8f7; border: 1px solid rgba(216,231,226,.14); border-radius: 9px; background: #090e0d; transition: border-color .2s; }
.login-modal input:focus { border-color: rgba(198,255,26,.55); }
.login-error { min-height: 18px; color: #ff8f72; font-size: 12px; }
.login-submit { height: 50px; border: 0; border-radius: 9px; background: var(--lime); color: #0a0d08; font-weight: 800; cursor: pointer; }
.login-submit:disabled { opacity: .55; cursor: wait; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 34px; transform: translateX(-50%); padding: 12px 17px; border: 1px solid rgba(198,255,26,.24); border-radius: 10px; background: #161e1b; color: #dbe5e1; box-shadow: 0 16px 42px rgba(0,0,0,.45); font-size: 13px; }

@media (max-width: 940px) {
  .portal-shell { width: min(100% - 32px, 760px); }
  .product-grid { padding: 40px 0; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .product-audio { grid-column: 1 / -1; min-height: 270px; }
}
@media (max-width: 620px) {
  .portal-header { height: 76px; }
  .account-state { max-width: 150px; justify-content: flex-end; text-align: right; }
  .portal-account-actions { gap: 3px; }
  .product-grid { grid-template-columns: 1fr; padding: 32px 0; }
  .product-audio { grid-column: auto; }
  .product-card { min-height: 310px; }
  .portal-footer { gap: 15px; flex-direction: column; }
  .login-modal { padding: 28px 22px; }
}