@font-face{font-family:DreamBrush;src:url('/assets/dream-title.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
body.portal-page{background:#2c7795;color:#fff;--forest-ink:#193b40;color-scheme:light}
.portal-page #app{position:relative;z-index:1;min-height:100svh}
.portal-page .layout{background:#0d253044}.portal-page .sidebar,.portal-page .topbar{background:#10202acc;backdrop-filter:blur(12px)}.portal-page .panel,.portal-page .stat{background:#10202ab8;backdrop-filter:blur(10px)}.portal-page .room-card{background:#10202a99}.portal-page input,.portal-page select,.portal-page textarea,.portal-page th,.portal-page .connection{background:#0b1b248c}.portal-page .notice{background:#17313db8}.portal-page .tabs{border-color:#ffffff42}.portal-page .nav a:hover{background:#ffffff1c}.portal-page .nav a.active{background:#5a442d99}
.forest-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#378bc0}
.forest-image,.forest-video,.forest-particles{position:absolute;inset:0;width:100%;height:100%}
.forest-image,.forest-video{object-fit:cover;object-position:50% 50%}
.forest-video{opacity:0}.forest-scene.video-ready .forest-video{opacity:1}
.forest-light{position:absolute;inset:0;background:linear-gradient(180deg,#06425c0a 0%,#08415c08 52%,transparent 72%,#102a303e 100%)}
.forest-home{position:relative;min-height:100svh;isolation:isolate}
.forest-center{position:absolute;inset:26% 0 auto;display:flex;align-items:center;flex-direction:column;padding:0 24px;pointer-events:none}
.forest-title{display:flex;align-items:center;justify-content:center;gap:.02em;line-height:1.12;font-family:DreamBrush,"KaiTi","STKaiti",serif;font-size:clamp(6rem,10.3vw,10.5rem);font-weight:400;color:#fffef3;letter-spacing:.015em;text-shadow:0 2px 2px #245c7966,0 5px 22px #0b456152;filter:drop-shadow(0 0 14px #e6fff52b);margin:0;user-select:none}
.forest-title span:nth-child(1){transform:rotate(-5deg) translateY(.015em)}
.forest-title span:nth-child(2){font-size:.8em;transform:translateY(.08em) rotate(3deg);margin:0 -.04em}
.forest-title span:nth-child(3){transform:rotate(3deg) translateY(.015em)}
.forest-login{pointer-events:auto;display:flex;align-items:center;justify-content:center;position:relative;margin-top:37px;min-width:164px;min-height:52px;padding:12px 42px;border:1px solid #fffef4;border-radius:99px;color:#fffef4;background:transparent;box-shadow:0 5px 26px #103c5124,inset 0 0 0 1px #ffffff38;backdrop-filter:blur(6px);font-family:"KaiTi","STKaiti",serif;font-size:1.25rem;font-weight:600;letter-spacing:.35em;transition:background .25s,box-shadow .25s,transform .25s}
.forest-login span{padding-left:.35em}.forest-login svg{position:absolute;right:20px;width:18px;height:18px;opacity:.65;transition:transform .25s}
.forest-login:hover{background:#ffffff20;box-shadow:0 6px 30px #16413244,0 0 20px #fff4bd36;transform:translateY(-2px)}.forest-login:hover svg{transform:translateX(3px)}
.forest-footer{position:absolute;left:40px;right:40px;bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fffef1;text-shadow:0 1px 5px #193f34}
.forest-footer button{display:inline-flex;align-items:center;gap:9px;min-height:44px;border:0;background:transparent;color:inherit;font-size:.875rem;padding:8px 11px;border-radius:30px;transition:background .2s;text-shadow:inherit}
.forest-footer button:hover{background:#203f4b4d}.forest-touch{letter-spacing:.12em}.forest-controls{display:flex;gap:8px;align-items:center}.forest-controls svg{width:18px;height:18px}.motion-status,.sound-status{font-size:.75rem;opacity:.85}
.forest-controls button[aria-pressed="false"] .motion-status,.forest-controls button[aria-pressed="false"] .sound-status{opacity:.7}
.forest-chime{position:absolute;width:62px;height:104px;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);left:73.5%;top:18%;color:white;cursor:pointer}
.forest-chime span{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.8125rem;opacity:0;background:#143f4e99;padding:5px 12px;border-radius:30px;transition:opacity .2s}
.forest-chime:hover span,.forest-chime:focus-visible span{opacity:1}.forest-chime:hover{background:#fffbc818;box-shadow:0 0 24px #fffad24a}
.portal-page a:focus-visible,.portal-page button:focus-visible{outline:2px solid #fffce9;outline-offset:5px;box-shadow:0 0 0 8px #24526475}
.forest-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.portal-page .loading{color:#fffef1;text-shadow:0 2px 8px #153f50}
.portal-page .login-layout{min-height:100svh;padding:28px}
.portal-page .login-card{width:min(100%,430px)}
.portal-page .login-card>.brand{justify-content:center;margin-bottom:25px;color:#fffef1;text-shadow:0 2px 14px #244e6180}
.portal-page .login-card>.brand img{display:none}.portal-page .login-card>.brand span{font:400 3.4rem/1.2 DreamBrush,"KaiTi",serif;letter-spacing:.06em}
.portal-page .login-card .panel{background:#16465345;color:#fffef4;border:1px solid #fffef4;box-shadow:0 20px 80px #16394336;border-radius:20px;backdrop-filter:blur(9px);padding:32px;margin:0}
.portal-page .login-card .eyebrow{color:#fffef4;font-size:.75rem;letter-spacing:.16em}.portal-page .login-card h1{color:#fffef4;margin-top:8px;font-size:1.6rem;font-weight:550}
.portal-page .login-card .muted{color:#fffef4d9}.portal-page .login-card .field>label{color:#fffef4;font-size:.9375rem}.portal-page .login-card input{background:transparent;border-color:#fffef4;color:#fffef4;font-size:1rem}.portal-page .login-card input:focus{outline-color:#fffef4;border-color:#fffef4;background:#ffffff12}.portal-page .login-card input::placeholder{color:#fffef4aa}
.portal-page .login-card .btn.primary{background:transparent;border-color:#fffef4;color:#fffef4}.portal-page .login-card .btn.primary:hover{background:#ffffff1c}.portal-page .login-card .danger-text{color:#ffd1d1}
.portal-page .btn{background:transparent;border-color:#fffef4;color:#fffef4;transition:background .22s,border-color .22s,transform .22s,box-shadow .22s}.portal-page .btn:hover{background:#ffffff1c;border-color:#fffef4;transform:translateY(-1px)}
.portal-page .login-card .panel,.portal-page .login-card .login-footer{animation:forest-panel-in .42s ease-out both}.portal-page dialog[open]{animation:forest-panel-in .22s ease-out both}
@keyframes forest-panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.layout .panel,.layout .stat{transition:background .2s,border-color .2s,opacity .2s,transform .2s}.layout #sg4-body>.panel,.layout #sg4-body>.columns{animation:forest-panel-in .24s ease-out both}
.layout,.login-layout,.forest-home{animation:forest-page-in .32s ease-out both;transform-origin:center top}
@keyframes forest-page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.layout #main>.page-head,.layout #main>.panel,.layout #main>.columns,.layout #main>.stats,.layout #main>.notice{animation:forest-panel-in .24s ease-out both}
.layout #sg4-body.silent-render>*{animation:none!important}
.layout .btn,.layout .tab,.layout input,.layout select,.layout textarea,.layout .switch{transition:background .2s,border-color .2s,color .2s,opacity .2s,transform .2s,box-shadow .2s}
.layout .btn:active,.layout .tab:active{transform:scale(.98)}.layout dialog[open]{animation:forest-panel-in .22s ease-out both}.toast:not([hidden]){animation:forest-toast-in .24s ease-out both}
.layout #sg4-body{will-change:opacity,transform;transition:opacity .22s ease,transform .22s ease}.layout #sg4-body.view-swap{opacity:0;transform:translateY(8px)}.layout #sg4-body.view-enter{opacity:1;transform:translateY(0)}
.room-list-panel{margin-top:18px}.room-list{display:grid;gap:10px}.room-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 16px;border:1px solid var(--line,#d7dde3);border-radius:14px;background:color-mix(in srgb,var(--panel,#fff) 78%,transparent);transition:background .22s,border-color .22s,transform .22s,box-shadow .22s}.room-card:hover{transform:translateY(-1px);box-shadow:0 8px 24px #172a3a14}.room-card h3{margin:0 0 5px}.room-card .actions{flex-wrap:wrap;justify-content:flex-end}.room-card .actions>.actions{gap:6px}
@keyframes forest-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.portal-page .login-footer{color:#fffef3;text-shadow:0 1px 6px #103949;font-size:.875rem;padding:0 4px}.portal-page .login-card form{margin-top:26px}
@media(min-aspect-ratio:2/1){.forest-center{top:21%}.forest-title{font-size:min(10vw,24vh)}.forest-login{margin-top:24px}}
@media(max-width:700px){.forest-image,.forest-video{object-position:65% 50%}.forest-center{top:29%}.forest-title{font-size:clamp(5.5rem,20vw,8rem)}.forest-login{margin-top:32px;min-width:152px;min-height:50px}.forest-footer{left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center;gap:0}.forest-touch{width:100%;justify-content:center}.forest-controls{gap:16px}.portal-page .login-layout{padding:24px}.portal-page .login-card .panel{padding:26px}.forest-chime{width:50px;height:90px}}
@media(max-height:500px){.forest-center{top:20%}.forest-title{font-size:5.5rem}.forest-login{margin-top:14px;min-height:44px}.forest-footer{bottom:8px;left:16px;right:16px;flex-wrap:nowrap}.forest-touch{width:auto}.portal-page .login-layout{padding:22px}.portal-page .login-card>.brand{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.forest-login:hover,.forest-login:hover svg{transform:none}.forest-chime span{transition:none}}
.metrics-panel{margin-top:18px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metric-card{min-height:88px;padding:14px 16px;border:1px solid var(--line,#d7dde3);border-radius:12px;background:color-mix(in srgb,var(--panel,#fff) 72%,transparent)}.metric-label{font-size:.78rem;color:var(--muted,#6c7782);letter-spacing:.04em}.metric-value{margin-top:8px;font-size:1.18rem;font-variant-numeric:tabular-nums}.metric-bar{height:6px;margin-top:12px;border-radius:99px;background:#ffffff26;overflow:hidden}.metric-bar i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6dd5a7,#f1c46a,#ef7b76);transition:width .35s ease}.metric-rooms{margin-top:18px}.metric-rooms>[data-metric=rooms]{display:grid;gap:8px;margin-top:8px}.metric-room{display:grid;grid-template-columns:minmax(120px,1fr) auto auto;gap:16px;align-items:center;padding:10px 12px;border-top:1px solid var(--line,#d7dde3);font-size:.88rem;font-variant-numeric:tabular-nums}.metric-room-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metric-room .muted{font-size:.78rem}@media(max-width:900px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-room{grid-template-columns:1fr 1fr}.metric-room .muted{grid-column:1/-1}}@media(max-width:520px){.metric-grid{grid-template-columns:1fr}.metric-room{grid-template-columns:1fr;gap:5px}}
