.access-gate { display:none; min-height:100svh; padding:24px 36px 22px; background:radial-gradient(ellipse at 62% 72%,#d4793c0c,transparent 55%),var(--bg); overflow:hidden; }
body.locked>:not(.access-gate) { display:none!important; }
body.locked .access-gate { display:flex; flex-direction:column; }
.access-header { width:100%; max-width:1350px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--line); border-radius:18px; padding:15px 22px; background:var(--panel); }
.access-brand { display:flex; align-items:center; gap:12px; color:var(--text); font-size:20px; font-weight:750; letter-spacing:-.6px; }
.access-brand:hover { text-decoration:none; }
.access-brand .brand-mark { width:38px; height:38px; line-height:34px; font-size:26px; border-radius:12px; padding-right:4px; letter-spacing:-3px; text-align:center; }
.access-brand .brand-mark span { font-size:24px; }
.access-brand small { display:block; font-size:8px; letter-spacing:1.4px; font-weight:550; color:var(--muted); margin-top:2px; }
.access-header-actions { display:flex; align-items:center; gap:22px; }
.access-private { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:12px; }
.access-private svg { width:15px; height:15px; }
.access-theme { width:37px; height:37px; border:1px solid var(--line); border-radius:50%; background:var(--panel-2); color:var(--text); font-size:21px; line-height:1; transition:transform .2s; }
.access-theme:hover { transform:rotate(20deg); }
.access-main { width:100%; max-width:1190px; margin:auto; padding:74px 0 70px; display:grid; grid-template-columns:1.04fr 1fr; align-items:center; gap:18px; flex:1; }
.access-copy { position:relative; z-index:2; }
.access-eyebrow { display:flex; align-items:center; gap:9px; color:var(--accent); font-size:10px; font-weight:750; letter-spacing:1.85px; margin:0 0 24px; }
.access-eyebrow>span { width:6px; height:6px; background:#ffbb61; border-radius:50%; box-shadow:0 0 0 4px #ffbb6112,0 0 14px #ffbb6144; }
.access-copy h1 { font-size:clamp(55px,6.35vw,84px); line-height:1.04; letter-spacing:-5px; margin:0 0 26px; font-weight:780; }
.access-copy h1>span { color:#ffc178; background:linear-gradient(110deg,#ffcf85 7%,#efa068 53%,#ec8494 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.access-description { font-size:16px; line-height:1.8; color:var(--muted); max-width:435px; margin:0 0 29px; }
.access-login { min-height:54px; padding:13px 18px; border-radius:12px; min-width:268px; gap:13px; font-size:14px; }
.google-mark { stroke:none; width:24px; height:24px; background:#fff; padding:4px; border-radius:50%; }
.login-arrow { margin-left:auto; width:18px; height:18px; }
.access-status { color:var(--muted); font-size:12px; min-height:20px; max-width:420px; margin:14px 0 27px; line-height:1.65; }
.access-account { display:flex; align-items:center; gap:11px; padding-top:21px; border-top:1px solid var(--line); width:max-content; max-width:100%; }
.access-avatar { display:flex; align-items:center; justify-content:center; width:35px; height:35px; border:1px solid var(--line); border-radius:50%; background:var(--panel); color:var(--accent); font-size:12px; font-weight:650; }
.access-account strong { display:block; color:var(--text); font-size:12px; font-weight:600; }
.access-account small { display:block; color:var(--faint); font-size:11px; margin-top:2px; overflow-wrap:anywhere; }
.access-scene { position:relative; width:100%; height:475px; margin:0; isolation:isolate; perspective:1100px; }
.scene-halo { position:absolute; inset:10% -10% 0 -10%; z-index:-1; background:radial-gradient(ellipse at 65% 75%,#db85582e,transparent 55%),radial-gradient(ellipse at 40% 25%,#779de417,transparent 60%); filter:blur(25px); }
.scene-orbit { position:absolute; left:5%; top:1%; width:95%; height:94%; border:1px solid #f6b36a16; border-radius:50%; z-index:-1; transform:rotate(-30deg) scaleY(.8); }
.orbit-two { width:119%; height:106%; left:-5%; top:-4%; border-color:#9c99c713; transform:rotate(30deg) scaleY(.7); }
.scene-card { position:absolute; border-radius:20px; padding:12px; border:1px solid #ffffff24; background:#202129; width:246px; box-shadow:0 20px 50px #0005,inset 0 1px #ffffff14; transition:transform .45s,box-shadow .45s; }
.scene-card-header { display:flex; align-items:center; gap:9px; padding:1px 2px 12px; color:#f5f4f0; }
.scene-card-header strong { font-size:12px; font-weight:650; letter-spacing:-.2px; }
.scene-card-header>span:last-child { margin-left:auto; color:#9697a7; font-size:17px; }
.scene-icon { display:flex; align-items:center; justify-content:center; width:27px; height:27px; border-radius:8px; font-size:19px; font-weight:700; letter-spacing:-1.5px; }
.icon-landing { background:linear-gradient(135deg,#ffd086,#efa067); color:#3d2919; }
.icon-celaje { background:linear-gradient(135deg,#7ebeff,#347bea); color:#fff; }
.icon-celaje svg { width:19px; height:19px; }
.icon-sunset { background:linear-gradient(135deg,#ffd08a,#ce889a); color:#4d2d44; font-size:21px; }
.scene-card-foot { display:flex; justify-content:space-between; align-items:center; padding:11px 2px 1px; }
.scene-card-foot>span { font-size:7px; color:#a5a4b0; font-weight:600; letter-spacing:1px; }
.scene-card-foot>i { width:23px; height:4px; border-radius:4px; background:#ffffff19; }
.scene-landing { left:2%; top:83px; transform:rotate(-12deg) rotateY(5deg); z-index:1; }
.scene-sunset { right:-1%; top:106px; transform:rotate(12deg) rotateY(-5deg); z-index:2; }
.scene-celaje { left:29%; top:18px; transform:rotate(-3deg) translateZ(30px); z-index:3; }
.access-scene:hover .scene-landing { transform:rotate(-16deg) translate(-9px,-7px); }
.access-scene:hover .scene-sunset { transform:rotate(16deg) translate(9px,-7px); }
.access-scene:hover .scene-celaje { transform:rotate(-2deg) translateY(-10px) translateZ(40px); box-shadow:0 28px 60px #0005; }
.scene-landing-art,.scene-sunset-art,.scene-celaje-art { position:relative; height:247px; border-radius:11px; overflow:hidden; }
.scene-landing-art { background:radial-gradient(ellipse at 80% 100%,#b4644044,transparent 65%),#f7f1e6; color:#2b251d; padding:26px 17px; }
.scene-landing-art>span { font-size:27px; font-weight:750; letter-spacing:-1.2px; line-height:1.15; display:block; position:relative; z-index:2; }
.scene-landing-art b { color:#b46422; font-weight:750; }
.scene-landing-art>i { position:absolute; right:13px; top:27px; color:#b67b28; font-size:29px; font-style:normal; }
.scene-cubes { position:absolute; width:95px; height:95px; right:42px; bottom:23px; transform:rotate(-17deg); }
.scene-cubes i { position:absolute; inset:0; border-radius:23px; border:1px solid #ffe0b155; box-shadow:8px 10px 25px #6b3f2633; background:linear-gradient(135deg,#ffd797,#f5ae65 60%,#e88978); }
.scene-cubes i:nth-child(1) { transform:translate(-22px,14px); opacity:.35; }.scene-cubes i:nth-child(2) { transform:translate(-11px,7px); opacity:.7; }
.scene-cubes i:nth-child(3)::after { content:'↗'; position:absolute; width:100%; text-align:center; font-size:63px; font-weight:300; color:#9a5528; line-height:95px; }
.scene-sunset-art { background:linear-gradient(155deg,#36233e,#281f34); padding:27px 18px; color:#ffe0c0; }
.scene-sunset-art>span { position:relative; z-index:2; display:block; font-size:24px; font-weight:550; letter-spacing:-1px; line-height:1.2; }
.scene-sunset-art>i { position:absolute; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle at 28% 20%,#ffdaa0,#f6b079 34%,#de8295 65%,#935b9f); left:58px; top:113px; box-shadow:0 0 50px #ffaa6938,inset -12px -8px 28px #70365b55; }
.scene-sunset-art>b { position:absolute; inset:79% -10% auto; height:80px; background:linear-gradient(#31223888,#281f34); transform:rotate(-8deg); border-top:1px solid #ffdeb933; }
.scene-celaje-art { background:radial-gradient(ellipse at 90% 0%,#4072d12b,transparent 65%),#111725; padding:23px 18px; }
.scene-app-label { font-size:7px; letter-spacing:1.35px; font-weight:650; color:#8faedf; }
.scene-celaje-art strong { display:block; margin:11px 0 22px; font-size:23px; line-height:1.25; letter-spacing:-.7px; color:#eaf2ff; }
.scene-calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; padding:12px; border-radius:10px; border:1px solid #ffffff14; background:#ffffff05; }
.scene-calendar i { display:block; height:14px; border-radius:4px; background:#ffffff0b; }
.scene-calendar i:nth-child(5n+3) { background:#6699ee2c; } .scene-calendar i:nth-child(10) { background:#7cafef; box-shadow:0 0 18px #7cafef22; }
.access-scene figcaption { position:absolute; bottom:2px; left:0; right:0; text-align:center; font-size:11px; color:var(--faint); letter-spacing:.2px; }
.access-footer { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1300px; margin:0 auto; padding:19px 6px 2px; border-top:1px solid var(--line); color:var(--faint); font-size:11px; }
.access-footer>span:last-child { display:flex; gap:10px; align-items:center; }
#logoutButton { cursor:pointer; }
:root[data-theme="light"] .access-gate { background:radial-gradient(ellipse at 61% 55%,#efb46c19,transparent 50%),radial-gradient(ellipse at 100% 20%,#cb8fba09,transparent 60%),var(--bg); }
:root[data-theme="light"] .access-header { background:#ffffff66; }
:root[data-theme="light"] .access-copy h1>span { background-image:linear-gradient(110deg,#aa6016,#b36b22 45%,#b83651 100%); }
:root[data-theme="light"] .scene-card { border-color:#fff8; background:#fffdfb; box-shadow:0 18px 45px #543b2926,inset 0 1px #fff; }
:root[data-theme="light"] .scene-card-header { color:#272329; }
:root[data-theme="light"] .scene-card-header>span:last-child { color:#80767e; }
:root[data-theme="light"] .scene-card-foot>span { color:#837880; }
:root[data-theme="light"] .scene-card-foot>i { background:#746f6b22; }
:root[data-theme="light"] .scene-orbit { border-color:#b3774330; }
:root[data-theme="light"] .scene-halo { opacity:.7; }
@media (min-width:1500px) { .access-main { max-width:1260px; gap:65px; } .access-scene { height:500px; } .scene-card { width:268px; } .scene-landing-art,.scene-sunset-art,.scene-celaje-art { height:270px; } }
@media (max-width:1100px) {
  .access-gate { padding:22px 25px; } .access-main { padding:64px 0; gap:0; }
  .access-copy h1 { font-size:64px; letter-spacing:-3.5px; } .access-description { font-size:14px; max-width:360px; }
  .access-scene { height:430px; transform:scale(.9); transform-origin:center; }
  .scene-card { width:220px; } .scene-landing-art,.scene-sunset-art,.scene-celaje-art { height:220px; }
  .scene-celaje { left:25%; } .scene-landing { left:-8%; } .scene-sunset { right:-8%; }
  .scene-landing-art>span { font-size:24px; } .scene-sunset-art>span,.scene-celaje-art strong { font-size:21px; }
}
@media (max-width:800px) {
  .access-gate { padding:19px 21px; } .access-header { padding:12px 16px; }
  .access-main { display:flex; flex-direction:column; align-items:center; padding:50px 0 25px; }
  .access-copy { text-align:center; width:100%; } .access-eyebrow { justify-content:center; }
  .access-description { margin-left:auto; margin-right:auto; max-width:390px; }
  .access-copy h1 { font-size:70px; letter-spacing:-4px; }
  .access-status { margin-left:auto; margin-right:auto; margin-bottom:20px; }
  .access-account { margin:auto; text-align:left; padding-top:16px; }
  .access-scene { max-width:480px; margin-top:26px; height:390px; transform:scale(.9); }
  .scene-celaje { left:29%; top:12px; } .scene-landing { left:1%; top:71px; } .scene-sunset { right:0; top:80px; }
  .access-private { font-size:11px; } .access-header-actions { gap:15px; }
}
@media (max-width:500px) {
  .access-gate { padding:15px 17px 18px; }
  .access-header { border-radius:14px; padding:11px 12px; }
  .access-brand { font-size:17px; gap:8px; } .access-brand .brand-mark { width:32px; height:32px; border-radius:10px; line-height:29px; font-size:23px; }
  .access-brand small { font-size:6px; letter-spacing:1.1px; } .access-private { display:none; }
  .access-theme { width:33px; height:33px; font-size:20px; }
  .access-main { padding-top:37px; padding-bottom:0; }
  .access-eyebrow { font-size:8px; letter-spacing:1.55px; margin-bottom:20px; gap:8px; }
  .access-copy h1 { font-size:clamp(46px,13.6vw,65px); letter-spacing:-3px; margin-bottom:22px; line-height:1.06; }
  .access-description { font-size:13px; line-height:1.8; max-width:310px; margin-bottom:22px; }
  .access-login { min-height:52px; min-width:270px; font-size:13px; }
  .access-status { font-size:11px; margin:12px auto 18px; min-height:18px; max-width:300px; }
  .access-account { padding-top:15px; gap:9px; } .access-avatar { width:29px; height:29px; font-size:10px; }
  .access-account strong { font-size:10px; } .access-account small { font-size:9px; }
  .access-scene { width:100%; max-width:355px; height:305px; margin-top:17px; transform:none; }
  .scene-card { width:166px; padding:8px; border-radius:14px; }
  .scene-card-header { padding-bottom:8px; gap:6px; } .scene-card-header strong { font-size:9px; }
  .scene-card-header>span:last-child { font-size:13px; } .scene-icon { width:22px; height:22px; border-radius:6px; font-size:16px; }
  .icon-celaje svg { width:15px; height:15px; } .scene-card-foot { padding-top:8px; }
  .scene-card-foot>span { font-size:5px; letter-spacing:.5px; } .scene-card-foot>i { width:16px; height:3px; }
  .scene-landing { left:0; top:55px; transform:rotate(-13deg); } .scene-sunset { right:0; top:61px; transform:rotate(13deg); }
  .scene-celaje { left:27%; top:6px; transform:rotate(-3deg); }
  .scene-landing-art,.scene-sunset-art,.scene-celaje-art { height:169px; border-radius:8px; padding:17px 12px; }
  .scene-landing-art>span { font-size:19px; letter-spacing:-.8px; } .scene-landing-art>i { font-size:22px; top:16px; right:7px; }
  .scene-cubes { width:65px; height:65px; right:29px; bottom:15px; } .scene-cubes i { border-radius:16px; }
  .scene-cubes i:nth-child(3)::after { font-size:43px; line-height:65px; }
  .scene-sunset-art>span,.scene-celaje-art strong { font-size:17px; letter-spacing:-.6px; }
  .scene-sunset-art>i { width:97px; height:97px; left:40px; top:78px; }
  .scene-app-label { font-size:5px; letter-spacing:.8px; } .scene-celaje-art strong { margin:7px 0 14px; }
  .scene-calendar { gap:5px; padding:9px; border-radius:7px; } .scene-calendar i { height:10px; border-radius:3px; }
  .access-scene figcaption { bottom:0; font-size:9px; }
  .access-footer { padding:16px 1px 0; margin-top:21px; font-size:9px; gap:12px; }
}
@media (prefers-reduced-motion:reduce) { .access-scene:hover .scene-card,.access-theme:hover { transform:none; } }