.app-stage{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}.portrait-frame{position:relative;width:var(--frame-w, 100%);height:var(--frame-h, 100%);overflow:hidden}.portrait-frame[data-rotation="90"]{transform:rotate(90deg)}.portrait-frame[data-rotation="270"]{transform:rotate(270deg)}.screen-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:calc(var(--frame-w) * .08) calc(var(--frame-w) * .1);text-align:center}.content-stack{width:100%;display:flex;flex-direction:column;align-items:center}.content-stack>*{margin:0}.content-stack>*+*{margin-top:calc(var(--frame-w) * .05)}:root{--brand-orange: #f67e28;--brand-orange-dark: #d75f12;--bg-coffee: #21130e;--bg-coffee-darker: #150c08;--success: #22c55e;--error: #ff9178;--text-primary: #ffffff;--text-muted: rgba(255, 255, 255, .6);--text-faint: rgba(255, 255, 255, .32)}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#fff}#app{width:100%;height:100%;font-family:Segoe UI,LG Display-Regular,sans-serif;color:var(--text-primary)}.portrait-frame{background:radial-gradient(circle at 50% 30%,var(--bg-coffee) 0%,var(--bg-coffee-darker) 75%)}.offline-banner{font-size:calc(var(--frame-w) * .035);font-weight:600;color:var(--error);background:#ff91781f;border:1px solid rgba(255,145,120,.4);border-radius:calc(var(--frame-w) * .02);padding:calc(var(--frame-w) * .02) calc(var(--frame-w) * .05)}.activation-view{--text-primary: #1c1c1c;--text-muted: #6b6b6b;--text-faint: #bdbdbd;background:#fff;color:var(--text-primary);padding:calc(var(--frame-w) * .026) calc(var(--frame-w) * .075)}.activation-view .content-stack>*+*{margin-top:calc(var(--frame-w) * .014)}.activation-view h1{font-size:calc(var(--frame-w) * .078);font-weight:700;letter-spacing:.02em;animation:fade-up .5s ease-out}.activation-view p{font-size:calc(var(--frame-w) * .032);color:var(--text-muted);animation:fade-up .5s ease-out .1s backwards}.pin-slots{display:flex;gap:calc(var(--frame-w) * .02);animation:fade-up .5s ease-out .15s backwards}.pin-slot{width:calc(var(--frame-w) * .088);height:calc(var(--frame-w) * .088);display:flex;align-items:center;justify-content:center;font-family:Courier New,monospace;font-size:calc(var(--frame-w) * .06);font-weight:700;color:var(--text-faint);border:calc(var(--frame-w) * .004) solid #e5e5e5;border-radius:calc(var(--frame-w) * .02)}.pin-slot--filled{color:var(--text-primary)}.pin-slot--active{border-color:var(--brand-orange);color:var(--brand-orange)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--frame-w) * .014);width:100%;animation:fade-up .5s ease-out .2s backwards}.key{font-size:calc(var(--frame-w) * .035);font-weight:600;padding:calc(var(--frame-w) * .011) 0;border-radius:calc(var(--frame-w) * .02);border:calc(var(--frame-w) * .003) solid #e5e5e5;background:#fff;color:var(--text-primary);cursor:pointer}.key:focus-visible,.key:active{outline:none;border-color:var(--brand-orange);color:var(--brand-orange)}.key:disabled{opacity:.45;cursor:default}.key--action{font-size:calc(var(--frame-w) * .026);font-weight:700;letter-spacing:.02em;color:#8a8a8a;background:#f8f8f8}.key--clear{color:#9a3f10;background:#fff4ec;border-color:#f67e2847}.submit-btn{width:100%;font-size:calc(var(--frame-w) * .04);font-weight:700;padding:calc(var(--frame-w) * .022) 0;border-radius:calc(var(--frame-w) * .02);border:none;background:var(--brand-orange);color:#fff;cursor:pointer}.submit-btn:active{background:var(--brand-orange-dark)}.submit-btn:disabled{opacity:.5;cursor:default}.rotate-btn{width:100%;display:flex;gap:calc(var(--frame-w) * .022);align-items:center;padding:calc(var(--frame-w) * .018) calc(var(--frame-w) * .024);border-radius:calc(var(--frame-w) * .026);border:calc(var(--frame-w) * .004) solid rgba(246,126,40,.55);background:linear-gradient(135deg,#fff4ec,#ffe0cc);color:#74320f;text-align:left;cursor:pointer;box-shadow:0 calc(var(--frame-w) * .01) calc(var(--frame-w) * .024) #f67e2829;animation:fade-up .5s ease-out .28s backwards}.rotate-btn-icon{flex:none;width:calc(var(--frame-w) * .082);height:calc(var(--frame-w) * .082);display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--brand-orange);color:#fff;font-size:calc(var(--frame-w) * .052);font-weight:900;line-height:1;box-shadow:inset 0 calc(var(--frame-w) * -.004) 0 #0000001f}.rotate-btn-copy{min-width:0;display:flex;flex:1;flex-direction:column;gap:calc(var(--frame-w) * .003)}.rotate-btn-copy span{font-size:calc(var(--frame-w) * .026);color:#74320fb8}.rotate-btn strong{font-size:calc(var(--frame-w) * .038);color:#9a3f10;line-height:1.05}.rotate-state{font-weight:700;color:#74320f!important}.rotate-btn:focus-visible,.rotate-btn:active{outline:none;border-color:var(--brand-orange);background:linear-gradient(135deg,#ffe9da,#ffcaa6);box-shadow:0 0 0 calc(var(--frame-w) * .006) #f67e282e}.error-message{color:var(--error);font-size:calc(var(--frame-w) * .032);font-weight:600;min-height:1.5em}.connectivity-row{display:flex;justify-content:space-between;width:100%;animation:fade-up .5s ease-out .25s backwards}.connectivity-cell{display:flex;flex-direction:column;align-items:center;gap:calc(var(--frame-w) * .005);font-size:calc(var(--frame-w) * .028);flex:1 1 0}.connectivity-cell+.connectivity-cell{border-left:calc(var(--frame-w) * .002) solid #e5e5e5}.connectivity-icon{display:block;width:calc(var(--frame-w) * .05);height:calc(var(--frame-w) * .05)}.connectivity-label{font-weight:600;color:var(--text-primary)}.connectivity-status{color:var(--text-faint)}.connectivity-status-line{display:flex;align-items:center;justify-content:center;gap:calc(var(--frame-w) * .008)}.connectivity-indicator{display:block;width:calc(var(--frame-w) * .018);height:calc(var(--frame-w) * .018);object-fit:contain}.connectivity-cell--ok .connectivity-status{color:var(--success)}.connectivity-cell--bad .connectivity-status{color:var(--text-faint)}.support-card{display:flex;align-items:flex-start;gap:calc(var(--frame-w) * .025);width:100%;box-sizing:border-box;padding:calc(var(--frame-w) * .03);background:#fff8f3;border:calc(var(--frame-w) * .003) solid #f0ddd0;border-radius:calc(var(--frame-w) * .02);text-align:left;animation:fade-up .5s ease-out .3s backwards}.support-card-icon{flex:none;width:calc(var(--frame-w) * .05);height:calc(var(--frame-w) * .05);display:flex;align-items:center;justify-content:center;border-radius:50%;border:calc(var(--frame-w) * .003) solid var(--brand-orange);color:var(--brand-orange);font-size:calc(var(--frame-w) * .03);font-weight:700}.support-card-title{font-size:calc(var(--frame-w) * .032);font-weight:700;color:var(--text-primary);margin:0 0 calc(var(--frame-w) * .008)}.support-card-text{font-size:calc(var(--frame-w) * .026);color:var(--text-muted);margin:0}.version-footer{font-size:calc(var(--frame-w) * .022);color:var(--text-faint);animation:fade-up .5s ease-out .35s backwards}.activated-label{font-size:calc(var(--frame-w) * .05);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--success);animation:fade-up .5s ease-out}.brand-logo{display:block;width:calc(var(--frame-w) * .22);height:calc(var(--frame-w) * .22);object-fit:contain;animation:fade-up .5s ease-out .1s backwards}.brand-logo--small{width:calc(var(--frame-w) * .167);height:calc(var(--frame-w) * .167)}.activation-view .brand-logo--small{width:calc(var(--frame-w) * .135);height:calc(var(--frame-w) * .135)}.brand-breathing{-webkit-animation:brand-breathe 3s ease-in-out infinite;animation:brand-breathe 3s ease-in-out infinite;-webkit-transform-origin:center center;transform-origin:center center;will-change:transform,opacity}.screen-name{font-size:calc(var(--frame-w) * .14);font-weight:700;line-height:1.1;animation:fade-up .5s ease-out .2s backwards}.subtitle{font-size:calc(var(--frame-w) * .05);color:var(--text-muted);animation:fade-up .5s ease-out .3s backwards}.status-message{font-size:calc(var(--frame-w) * .047);color:var(--text-muted);animation:fade-up .5s ease-out .4s backwards}.status-message--error{color:var(--error);font-weight:600}@keyframes fade-up{0%{opacity:0;transform:translateY(1.5vh)}to{opacity:1;transform:translateY(0)}}@keyframes brand-breathe{0%,to{opacity:.94;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}@-webkit-keyframes brand-breathe{0%,to{opacity:.94;-webkit-transform:scale(1)}50%{opacity:1;-webkit-transform:scale(1.035)}}.player-view{position:relative;width:100%;height:100%;background:#000;overflow:hidden}.player-media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;object-position:center}.player-view img.player-media{transition:opacity .45s ease-in-out;will-change:opacity}.player-transition-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;background:#000;opacity:0;transition:opacity .3s ease-in-out;will-change:opacity}.player-media[hidden]{display:none}.closing-soon-view,.schedule-blackout{position:absolute;top:0;right:0;bottom:0;left:0;z-index:80;overflow:hidden;background:#000}.closing-soon-view[hidden],.schedule-blackout[hidden]{display:none}.closing-soon-background,.schedule-blackout-media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:#000}.closing-soon-background[hidden],.schedule-blackout-media[hidden]{display:none}.closing-soon-shade{position:absolute;top:0;right:0;bottom:0;left:0;background:#0c070433}.closing-soon-panel{position:absolute;top:4%;right:4%;min-width:23%;padding:1.4% 2%;box-sizing:border-box;border:2px solid #f67e28;border-radius:14px;background:#0c0704d1;color:#fff;text-align:center}.closing-soon-label{display:block;color:#f67e28;font-size:clamp(14px,2.1vw,34px);font-weight:700;letter-spacing:.08em}.closing-soon-clock{display:block;margin-top:.2em;font-size:clamp(34px,6vw,92px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.diag-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:none;flex-direction:column;gap:1vh;padding:4vh 5vw;box-sizing:border-box;background:#0a0604eb;color:#d5b36b;font-family:Courier New,monospace;overflow-y:auto}.diag-overlay:not([hidden]){display:flex}.diag-title{font-size:2.6vh;font-weight:700;margin:0 0 1vh}.diag-body{display:flex;flex-direction:column;gap:.6vh}.diag-row{display:flex;justify-content:space-between;gap:2vw;font-size:1.8vh;border-bottom:1px solid rgba(213,179,107,.15);padding-bottom:.4vh}.diag-label{opacity:.7}.diag-value{text-align:right;word-break:break-all}.diag-reset-btn{margin-top:2vh;padding:1.2vh 0;border:1px solid #ff6655;border-radius:.6vh;background:transparent;color:#f65;font-size:1.8vh;font-weight:700;cursor:pointer}.diag-hint{margin-top:auto;font-size:1.4vh;opacity:.5;text-align:center}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
