:root{
  --navy:#1B3A5C;--navy-light:#2E6DA4;--navy-pale:#EBF2FA;
  --text:#1a1a2e;--text-muted:#6b7280;--text-faint:#9ca3af;
  --bg:#f8f9fc;--surface:#fff;--border:#e5e7eb;--border-strong:#d1d5db;
  --radius:8px;--radius-lg:12px;--radius-xl:16px;
  --shadow:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 16px rgba(0,0,0,.1);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Nunito','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;}

/* LOGIN */
#login-screen{min-height:100vh;display:none;align-items:center;justify-content:center;background:var(--navy);position:fixed;inset:0;z-index:1000;}
.login-card{background:white;border-radius:var(--radius-xl);padding:2.5rem;width:360px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.login-logo{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:.25rem;}
.login-title{font-size:22px;font-weight:700;margin-bottom:1.25rem;}
.login-note{font-size:12px;color:var(--text-muted);line-height:1.5;margin-bottom:1.25rem;}
.login-label{font-size:12px;font-weight:600;color:var(--text-muted);display:block;margin-bottom:6px;}
#login-body select{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius);font-family:inherit;font-size:14px;color:var(--text);margin-bottom:1rem;background:white;}
.login-btn{width:100%;padding:11px;background:var(--navy);color:white;border:none;border-radius:var(--radius);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;}
.login-btn:hover{background:var(--navy-light);}
.login-google{background:white;color:var(--text);border:1px solid var(--border-strong);}
.login-google:hover{background:var(--bg);}
.login-error{font-size:12px;color:#991B1B;margin-top:10px;text-align:center;}

/* APP */
#app{display:none;min-height:100vh;}
.layout{display:flex;}
.sidebar{width:220px;flex-shrink:0;background:var(--navy);display:flex;flex-direction:column;min-height:100vh;position:fixed;left:0;top:0;bottom:0;z-index:100;}
.sidebar-logo{padding:1.25rem 1.25rem .5rem;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);}
.sidebar-brand{padding:0 1.25rem 1.25rem;font-size:17px;font-weight:700;color:white;line-height:1.2;}
.sdivider{height:1px;background:rgba(255,255,255,.1);margin:0 1.25rem .75rem;}
.ssection{padding:0 .75rem;margin-bottom:1.25rem;}
.ssection-lbl{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35);padding:0 .5rem;margin-bottom:.4rem;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;color:rgba(255,255,255,.65);font-size:13px;transition:all .15s;margin-bottom:2px;border:none;background:none;width:100%;text-align:left;font-family:inherit;}
.nav-item:hover{background:rgba(255,255,255,.08);color:white;}
.nav-item.active{background:rgba(255,255,255,.13);color:white;font-weight:600;}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.8;}
.nbadge{background:rgba(255,80,80,.75);border-radius:10px;padding:1px 7px;font-size:10px;}
.sidebar-bottom{margin-top:auto;padding:1rem;border-top:1px solid rgba(255,255,255,.1);}
.user-pill{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);background:rgba(255,255,255,.08);}
.user-av{width:28px;height:28px;border-radius:50%;background:var(--navy-light);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;flex-shrink:0;}
.user-name{font-size:12px;font-weight:600;color:white;}
.user-role{font-size:10px;color:rgba(255,255,255,.45);}
.logout-btn{font-size:11px;color:rgba(255,255,255,.4);background:none;border:none;cursor:pointer;margin-top:8px;padding:0 10px;width:100%;text-align:left;font-family:inherit;}
.logout-btn:hover{color:rgba(255,255,255,.7);}

.main{margin-left:220px;flex:1;display:flex;flex-direction:column;}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:.65rem 1.5rem;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:50;flex-wrap:wrap;}
.period-label{font-size:16px;font-weight:800;color:var(--text);}
.nav-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:6px;background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px;}
.nav-btn:hover{background:var(--bg);color:var(--text);}
.today-btn{font-size:12px;padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:white;cursor:pointer;color:var(--text-muted);font-family:inherit;}
.today-btn:hover{border-color:var(--navy);color:var(--navy);}
.view-tabs{display:flex;background:var(--bg);border-radius:8px;padding:3px;border:1px solid var(--border);}
.view-tab{font-size:13px;padding:6px 16px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-family:inherit;color:var(--text-muted);}
.view-tab.active{background:white;color:var(--navy);font-weight:600;box-shadow:var(--shadow);}

.page-body{padding:.75rem 1.25rem;flex:1;display:flex;flex-direction:column;}
.page-title{font-size:20px;font-weight:700;margin-bottom:.35rem;}
.page-sub{font-size:13px;color:var(--text-muted);margin-bottom:1.5rem;}

/* LEGEND */
.legend-bar{display:flex;flex-wrap:wrap;gap:10px;padding:.75rem 0;border-top:1px solid var(--border);margin-top:.5rem;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);cursor:default;}
.legend-dot{width:13px;height:13px;border-radius:3px;flex-shrink:0;}

/* WEEK */
.week-day-sec{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;}
.week-day-hdr{font-size:12px;font-weight:700;}
.ph-badge{font-size:10px;background:#FEF3C7;color:#92400E;padding:2px 8px;border-radius:20px;}

/* MONTH */
.cal-grid-hdr{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;flex-shrink:0;}
.cal-hdr-cell{text-align:center;font-size:11px;font-weight:700;color:var(--text-muted);padding:8px 0;border-right:1px solid var(--border);}
.cal-hdr-cell:last-child{border-right:none;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden;background:var(--border);gap:1px;flex:1;}
.cal-month-wrap{display:flex;flex-direction:column;height:calc(100vh - 120px);}
.cal-cell{background:var(--surface);padding:5px;cursor:pointer;overflow:hidden;}
.cal-cell:hover{background:#f0f4ff;}
.cal-cell.other{background:var(--bg);cursor:default;}
.cal-cell.other:hover{background:var(--bg);}
.cal-cell.today{outline:2px solid var(--navy-light);outline-offset:-2px;}
.cal-date{font-size:11px;font-weight:700;color:var(--text-muted);}
.cal-pip{display:block;font-size:9px;padding:1px 5px;border-radius:4px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;line-height:1.3;}
.cal-note-pip{display:block;font-size:9px;padding:1px 5px;border-radius:4px;margin-bottom:1px;background:var(--navy);color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}

/* BAR POPUP */
.bar-popup{position:fixed;z-index:400;background:white;border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:0 8px 32px rgba(0,0,0,.18);width:360px;padding:0;display:none;max-height:85vh;overflow-y:auto;}
.bp-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:white;z-index:2;}
.bp-title{font-size:14px;font-weight:700;}
.bp-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-muted);line-height:1;}
.bp-body{padding:16px;}
.bp-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;position:sticky;bottom:0;background:white;}
.bp-cancel{padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius);background:white;cursor:pointer;font-family:inherit;font-size:13px;}

/* SETTINGS */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.25rem;box-shadow:var(--shadow);}
.settings-card.full{grid-column:1/-1;}
.settings-card-title{font-size:13px;font-weight:700;margin-bottom:1rem;}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);gap:10px;}
.settings-row:last-child{border-bottom:none;}
.settings-label{font-size:13px;}
.settings-sub{font-size:11px;color:var(--text-muted);}
.toggle{width:36px;height:20px;border-radius:10px;background:var(--border-strong);position:relative;cursor:pointer;flex-shrink:0;}
.toggle.on{background:var(--navy);}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:white;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle.on::after{left:18px;}
.member-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.member-row:last-child{border-bottom:none;}
.member-info{flex:1;}
.member-name{font-size:13px;font-weight:600;}
.member-detail{font-size:11px;color:var(--text-muted);}
.edit-btn{font-size:11px;padding:3px 8px;border:1px solid var(--border);border-radius:5px;background:white;cursor:pointer;font-family:inherit;}
.edit-btn:hover{border-color:var(--navy);color:var(--navy);}
.gcal-card{background:var(--navy-pale);border:1px solid #B5D4F4;border-radius:var(--radius-lg);padding:1rem;}
.gcal-connect-btn{font-size:12px;padding:7px 14px;border-radius:var(--radius);background:var(--navy);color:white;border:none;cursor:pointer;font-family:inherit;font-weight:600;}
.gcal-connect-btn:disabled{opacity:.6;cursor:default;}
.empty-state{text-align:center;padding:28px 0;font-size:12px;color:var(--text-faint);font-style:italic;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;display:none;align-items:flex-start;justify-content:center;padding:3vh 0;overflow-y:auto;}
.modal-overlay.open{display:flex;}
.modal{background:white;border-radius:var(--radius-xl);padding:1.75rem;width:520px;max-width:95vw;max-height:94vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.modal-title{font-size:16px;font-weight:700;margin-bottom:1.25rem;}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:1.25rem;}
.modal-cancel{padding:8px 16px;border:1px solid var(--border);border-radius:var(--radius);background:white;cursor:pointer;font-family:inherit;font-size:13px;}
.modal-save{padding:8px 16px;border:none;border-radius:var(--radius);background:var(--navy);color:white;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;}
.pfield{margin-bottom:12px;}
.pfield label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:5px;}
.pfield input,.pfield select{width:100%;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius);font-family:inherit;font-size:13px;color:var(--text);background:white;}

@media(max-width:720px){
  .sidebar{width:64px;}
  .sidebar-brand,.sidebar-logo,.ssection-lbl,.user-name,.user-role,.nav-item span:not(.nbadge),.logout-btn{display:none;}
  .main{margin-left:64px;}
  .settings-grid{grid-template-columns:1fr;}
}