/* ═══════════════════════════════════════════════════════════════
   Pye app — periwinkle theme (phone app only).
   Soft lavender screens, deep-indigo night cards with clouds and
   stars, pill buttons, big rounded cards, Lexend type.
   Loaded after app.html's own styles and brand.css.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#EEF0FF; --card:#fff; --t1:#1E1A4D; --t2:#4A4777; --t3:#6B6A9A; --line:rgba(45,34,117,.08);
  --brand:#5B4FD6; --brand-dark:#3A2E8C; --brand-dim:#ECEBFF; --navy:#322283;
  --lav:#9093FD; --lav2:#A9ABF5; --lav3:#C8CAFF; --indigo:#322283; --indigo2:#3A2E8C;
}
body{background:var(--bg);color:var(--t1);font-family:'Lexend',system-ui,sans-serif!important;font-weight:400}
h1,h2,.big,.name{font-weight:700;letter-spacing:-.015em}

/* header: periwinkle band with a soft wave into the page */
header{background:var(--lav);border:0;color:#fff;padding:16px 18px 14px;position:sticky}
header h1{color:#fff;font-size:19px;font-weight:700;text-align:center}
header::after{content:'';position:absolute;left:0;right:0;bottom:-18px;height:19px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V6C330 22 255 22 195 11C135 0 70 1 0 15Z' fill='%239093FD'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.back{color:#fff;font-size:26px}
#hdrUser{background:rgba(255,255,255,.22);color:#fff}
main{padding-top:26px}

/* cards, labels, alerts */
.card{border:0;border-radius:24px;padding:18px;box-shadow:0 6px 22px rgba(45,34,117,.07)}
.lbl{color:var(--lav);font-weight:700;letter-spacing:.08em;font-size:11.5px}
.muted{color:var(--t3)}
.alert{border-radius:18px}
.kv{border-color:var(--line)}

/* pill buttons */
.btn{border-radius:999px;min-height:52px;font-weight:600}
.btn-primary{background:var(--indigo2);color:#fff;box-shadow:0 6px 16px rgba(58,46,140,.28)}
.btn-primary:active{background:var(--indigo)}
.btn-ghost{background:#fff;border:1.5px solid var(--lav3);color:var(--indigo2)}
.btn-go{background:#1D9E75;box-shadow:0 6px 16px rgba(29,158,117,.28)}
.btn-stop{background:var(--indigo);color:#fff}
.btn-row .btn{border-radius:20px}
.pill{border-radius:999px}

/* shift rows */
.shift .time{background:var(--brand-dim)!important;color:var(--indigo2)!important;border-radius:16px}
.shift .chev{color:var(--lav)}

/* hero: night sky (indigo, clouds, stars) — light morning sky in the daytime */
.hero{position:relative;overflow:hidden;color:#fff;border:0;border-radius:28px;padding:22px 20px;
  background:var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Cg fill='%236E70E0'%3E%3Ccircle cx='300' cy='238' r='52'/%3E%3Ccircle cx='245' cy='250' r='40'/%3E%3Ccircle cx='352' cy='214' r='44'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cpath d='M300 40l3 9 9 3-9 3-3 9-3-9-9-3 9-3z' opacity='.9'/%3E%3Cpath d='M250 92l2 6 6 2-6 2-2 6-2-6-6-2 6-2z' opacity='.7'/%3E%3Cpath d='M336 120l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") right bottom/360px auto no-repeat}
.hero .muted{color:rgba(255,255,255,.82)}
.hero .big{color:#fff}
body.daytime .hero{color:var(--indigo);
  background:var(--lav3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='300' cy='40' r='34'/%3E%3Ccircle cx='336' cy='54' r='28'/%3E%3Ccircle cx='262' cy='58' r='22'/%3E%3Crect x='250' y='56' width='110' height='24' rx='12'/%3E%3Ccircle cx='60' cy='236' r='40'/%3E%3Ccircle cx='110' cy='246' r='34'/%3E%3C/g%3E%3C/svg%3E") right top/360px auto no-repeat}
body.daytime .hero .muted{color:var(--indigo2)}
body.daytime .hero .big{color:var(--indigo)}
body.daytime .hero .btn-ghost{background:#fff!important;color:var(--indigo2)!important;border-color:#fff!important}
body.daytime .hero .btn[style*="color:var(--brand-dark)"]{background:var(--indigo2)!important;color:#fff!important}

/* bottom tab bar: floating white bar, active tab in a lavender pill */
nav.tabs{background:#fff;border:0;border-radius:26px 26px 0 0;box-shadow:0 -6px 24px rgba(45,34,117,.08);padding-top:6px}
nav.tabs button{color:var(--t3);font-weight:500}
nav.tabs button svg{padding:3px 12px;width:46px;height:28px;border-radius:999px;box-sizing:content-box;margin:-3px 0}
nav.tabs button.on{color:var(--indigo2);font-weight:700}
nav.tabs button.on svg{background:var(--brand-dim)}
nav.tabs button.on::before{display:none}

/* forms & sheets */
.in{border:1.5px solid var(--lav3);border-radius:16px}
.in:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(91,79,214,.12)}
.check input{accent-color:var(--brand)}
.sheet-bg{background:rgba(30,26,77,.45)}
.sheet{border-radius:30px 30px 0 0;padding-top:12px}
.sheet::before{content:'';display:block;width:44px;height:5px;border-radius:99px;background:var(--lav3);margin:0 auto 14px}
#toast{background:var(--indigo);border-radius:999px}
#offline{background:#FFF3DC}

/* login: periwinkle sky with waves and clouds */
.login{position:relative;overflow:hidden;background:var(--lav)!important;flex-direction:column}
.login .mc-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.login .mc-title{position:relative;color:#fff;font-weight:800;font-size:34px;line-height:1.05;text-align:center;margin:0 0 20px;letter-spacing:-.02em}
.login .card{position:relative;border-radius:30px;box-shadow:0 20px 50px rgba(30,26,77,.25)}
.login .btn-primary{margin-top:22px!important}