:root{
  --w: min(100vw, 500px);
  --ratio: calc(1600 / 937);
  --shadow: 0 10px 25px rgba(0,0,0,.22);
  --panel-bg: rgba(7,11,36,.58);
  --field-bg: rgba(255,255,255,.96);
  --field-text: #1f2460;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#06071b;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#fff;min-height:100%}
a,button,input,textarea,select{font:inherit}
.app-shell{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;background:#06071b}
.screen{width:var(--w);aspect-ratio:937 / 1600;position:relative;background-size:100% 100%;background-repeat:no-repeat;overflow:hidden}
.bg-login{background-image:url('/assets/img/login.jpeg')}
.bg-welcome{background-image:url('/assets/img/welcome.jpeg')}
.bg-menu{background-image:url('/assets/img/menu.jpeg')}
.bg-generic{background-image:url('/assets/img/generic.jpeg')}
.hit,.menu-hit{position:absolute;display:block;text-decoration:none;border:none;background:transparent;cursor:pointer}
.pressable{transition:transform .11s ease, filter .11s ease}
.pressable:active{transform:scale(.985);filter:brightness(.9)}
.login-form{position:absolute;inset:0}
.login-input{position:absolute;left:17.5%;width:63.2%;height:5.9%;border:0;background:transparent;outline:none;color:#1f2460;font-size:clamp(18px, 3vw, 32px);font-weight:700;padding:0 6%}
.login-input::placeholder{color:rgba(31,36,96,.62)}
#username{top:35.8%}
#password{top:46.8%}
.remember-wrap{position:absolute;left:23.2%;top:57.4%;display:flex;align-items:center;gap:14px;font-weight:700;font-size:clamp(16px, 2.4vw, 26px)}
.remember-wrap input{width:26px;height:26px;accent-color:#ffffff}
.signin-btn{position:absolute;left:27.0%;top:70.8%;width:43.2%;height:6.0%;border:none;background:transparent;cursor:pointer}
.flash{position:absolute;left:12%;right:12%;top:81%;padding:10px 14px;border-radius:14px;background:rgba(120,14,14,.68);text-align:center;font-size:clamp(14px, 2vw, 20px);z-index:20}
.hidden{display:none}
.panel{position:absolute;left:6%;top:15%;width:88%;min-height:69%;background:var(--panel-bg);border-radius:24px;backdrop-filter: blur(5px);box-shadow:var(--shadow);padding:18px 16px 16px;display:flex;flex-direction:column;gap:10px}
.panel h2{margin:0;font-size:clamp(26px,4vw,34px)}
.panel p,.panel label,.panel .status,.panel li,.panel .muted,.panel .pill,.panel .small-meta{font-size:clamp(14px,2.4vw,19px)}
.panel input[type=text], .panel input[type=number], .panel input[type=file], .panel input[type=time], .panel textarea, .panel select{width:100%;border:0;border-radius:16px;background:var(--field-bg);color:var(--field-text);padding:14px 16px;margin:0;outline:none;font-size:16px}
.panel textarea{min-height:96px;resize:vertical}
.panel input[type=range]{width:100%}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:4px}
.topbar .small-meta{background:rgba(255,255,255,.12);padding:8px 12px;border-radius:14px}
.muted{opacity:.86}
.section-card{background:rgba(255,255,255,.10);border-radius:18px;padding:12px 12px 14px;display:flex;flex-direction:column;gap:10px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.day-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.day-chip{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.10);border-radius:14px;padding:10px 8px;min-height:44px}
.day-chip input{accent-color:#ffffff}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.action-btn{background:var(--field-bg);color:var(--field-text);border:0;border-radius:18px;padding:12px 18px;box-shadow:var(--shadow);cursor:pointer;font-weight:700}
.action-btn.warn{background:rgba(255,214,214,.98);color:#7a1111}
.preview{margin-top:4px;min-height:170px;border-radius:18px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;overflow:hidden}
.preview img,.preview video{max-width:100%;max-height:260px;display:block}
.status-line{margin-top:auto;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.14);display:flex;flex-direction:column;gap:4px}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700}
.status-main{font-size:clamp(16px,2.6vw,21px);font-weight:800}
.status-sub{font-size:clamp(13px,2.2vw,17px);opacity:.9}
.pi-dot{width:12px;height:12px;border-radius:999px;display:inline-block;box-shadow:0 0 0 3px rgba(255,255,255,.10)}
.pi-dot.is-online{background:#62ff8f;box-shadow:0 0 12px rgba(98,255,143,.65)}
.pi-dot.is-offline{background:#ff7b7b;box-shadow:0 0 12px rgba(255,123,123,.45)}
.menu-hotspot{position:absolute;display:block;border-radius:22px}
.menu-text-link{position:absolute;left:0;top:0;width:34%;height:9%;display:block}
.logout-text-link{position:absolute;right:0;top:0;width:34%;height:9%;display:block}
.scope-box{background:rgba(255,255,255,.10);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px}
.scope-days{display:none}
.scope-days.visible{display:grid}
.plan-list{display:flex;flex-direction:column;gap:10px;max-height:240px;overflow:auto;padding-right:2px}
.plan-item{background:rgba(255,255,255,.10);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px}
.plan-item-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pill{display:inline-flex;align-items:center;background:rgba(255,255,255,.14);padding:7px 10px;border-radius:999px;font-weight:700}
.value-big{font-size:clamp(24px,5vw,38px);font-weight:800;text-align:center}
.urgency-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.urgency-btn{border:0;border-radius:18px;padding:16px 10px;font-weight:800;cursor:pointer;color:#1f2460;background:rgba(255,255,255,.96)}
.urgency-btn.active{outline:3px solid rgba(255,255,255,.75)}
.compact-list{margin:0;padding-left:18px}
@media (max-width: 420px){
  .day-grid{grid-template-columns:repeat(2,1fr)}
  .field-row,.field-row-3,.urgency-grid{grid-template-columns:1fr}
}