:root{--bg:#020817;--panel:#07142b;--line:#00d8ff;--line2:#bb38ff;--pink:#ff3f91;--text:#e9f6ff;--muted:#9fb7d8;--green:#00ff91;--orange:#ffc928}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0%,#102856 0,#020817 38%,#01040d 100%);font-family:Arial,Helvetica,sans-serif;color:var(--text)}.phone{max-width:480px;margin:0 auto;min-height:100vh;padding:10px 12px 92px;background:linear-gradient(180deg,rgba(2,11,31,.2),rgba(0,0,0,.55)),url('../img/city.svg') top center/cover no-repeat}.top-frame{border:1px solid rgba(0,216,255,.55);border-radius:18px;padding:14px;background:rgba(3,13,34,.72);box-shadow:0 0 24px rgba(0,216,255,.22),inset 0 0 28px rgba(0,216,255,.05)}.nav-icons{display:flex;justify-content:space-between;color:#55dfff}.icon-btn{width:42px;height:42px;border:1px solid rgba(0,216,255,.55);border-radius:14px;display:grid;place-items:center;background:#071832}.brand{text-align:center;margin:8px 0 12px;letter-spacing:9px;color:#a7efff;font-size:15px}.title{text-align:center;font-weight:900;font-size:54px;line-height:.85;text-shadow:0 0 18px #00c8ff;color:#c8efff}.company{text-align:center;color:#ff5ad8;font-size:24px;font-weight:900;letter-spacing:4px;margin-top:8px}.subtitle{text-align:center;color:#18cfff;margin:12px}.datebar{display:flex;gap:12px;justify-content:center;align-items:center;border:1px solid rgba(0,216,255,.55);border-radius:10px;margin:12px auto 2px;padding:10px;max-width:360px;background:#0a1935;color:#dae8ff}.hero{margin-top:14px;border:2px solid transparent;border-radius:20px;padding:18px;background:linear-gradient(#06122a,#06122a) padding-box,linear-gradient(90deg,#02eaff,#ff42df) border-box;box-shadow:0 0 28px rgba(255,66,223,.16)}.hero-row{display:flex;align-items:center;gap:18px}.shield{width:90px;height:90px;border:3px solid #09d9ff;border-radius:28px 28px 42px 42px;display:grid;place-items:center;background:radial-gradient(circle,#174b8f,#071836);box-shadow:0 0 20px rgba(0,216,255,.4);font-size:44px}.shift-caption{color:#12d9ff;font-weight:900}.shift-now{font-size:38px;font-weight:900}.time-range{color:#00d8ff;font-size:22px;font-weight:800}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 5px}.stat{border:1px solid var(--line);border-radius:13px;padding:14px 8px;background:rgba(6,18,42,.82);min-height:92px}.stat.purple{border-color:#cb39ff}.stat.pink{border-color:#ff428d}.stat h4{margin:0;color:#bcd7ff;font-size:12px}.stat .num{font-size:30px;font-weight:900;color:#8ed9ff}.stat.purple .num{color:#e97aff}.stat.pink .num{color:#ff80a9}.section{margin-top:12px;border:1px solid rgba(0,216,255,.45);border-radius:16px;padding:12px;background:rgba(4,14,34,.78)}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title{font-weight:900;color:#18d9ff;letter-spacing:1px}.mini-btn,a.mini-btn{border:1px solid #00cfff;color:#00e4ff;padding:8px 12px;border-radius:10px;text-decoration:none;background:#092245}.members{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.member{border:1px solid #0b7edc;border-radius:14px;padding:10px;background:linear-gradient(180deg,#0b1938,#081226);text-align:center}.photo{height:130px;border-radius:12px;background:linear-gradient(135deg,#102a55,#020713);overflow:hidden;display:grid;place-items:center;border:1px solid rgba(0,216,255,.35)}.photo img{width:100%;height:100%;object-fit:cover}.avatar{font-size:58px;color:#4be2ff}.member h3{font-size:16px;margin:8px 0 4px}.muted{color:var(--muted);font-size:13px}.regu{color:#05d8ff;font-weight:800}.badge{display:inline-block;margin-top:8px;border:1px solid currentColor;border-radius:9px;padding:6px 14px;font-weight:900}.badge.pagi{color:var(--green);box-shadow:0 0 14px rgba(0,255,145,.2)}.badge.sore{color:#ffb84d}.badge.malam{color:#e876ff}.badge.off{color:#ff6b9d}.badge.lembur{color:#ffd34c}.shift-tabs{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:1px solid #254166;border-radius:15px}.shift-tabs-4{grid-template-columns:repeat(4,1fr)}.tab{padding:14px;text-align:center;background:#071530;border-right:1px solid #254166}.tab:last-child{border:0}.tab.active{border:1px solid #00eaff;box-shadow:inset 0 -5px 0 #00eaff;color:#24e7ff}.timeline{position:relative}.note{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:center;margin:8px 0}.note-time{border:1px solid #00d8ff;color:#00e4ff;border-radius:10px;padding:8px;text-align:center;font-weight:900}.note-card{border:1px solid #1a416c;border-radius:12px;padding:12px;background:#0a1730}.note-card h4{margin:0 0 5px}.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(480px,100%);display:grid;grid-template-columns:repeat(4,1fr);background:#061029;border:1px solid #163d71;border-radius:18px 18px 0 0;overflow:hidden}.bottom-nav a{color:#adc0de;text-decoration:none;text-align:center;padding:12px 4px;font-weight:800}.bottom-nav a.active{color:#00eaff;box-shadow:inset 0 4px 0 #00eaff}.schedule-wrap{overflow:auto;border-radius:14px;border:1px solid #163d71}.schedule{width:100%;border-collapse:collapse;min-width:720px;background:#07142b}.schedule th,.schedule td{border:1px solid #163d71;padding:8px;text-align:center;font-size:12px}.schedule th{color:#00d8ff;background:#0c1e42}.schedule .name{text-align:left;position:sticky;left:0;background:#0c1e42;z-index:1}.login-card{max-width:420px;margin:70px auto;padding:24px;border:1px solid #00d8ff;border-radius:20px;background:#07142b}input,select,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #1b4b7a;background:#071228;color:#e9f6ff;margin:6px 0 12px}button,.btn{border:0;border-radius:10px;padding:12px 15px;background:linear-gradient(90deg,#00d8ff,#b439ff);color:white;font-weight:900;text-decoration:none;cursor:pointer}.danger{background:#ff357a}@media (min-width:420px){.members{grid-template-columns:repeat(4,1fr)}.title{font-size:58px}.photo{height:150px}.member h3{font-size:15px}}