:root{
  --bg:#0a1120;
  --bg2:#0d1526;
  --card:#141e33;
  --card2:#182641;
  --line:#26334f;
  --text:#e9eef7;
  --muted:#93a1ba;
  --accent:#3d7bfd;
  --accent-d:#2f5fd0;
  --gold:#d9a62e;
  --good:#34d399;
  --bad:#f87171;
  --radius:12px;
  --header-h:75px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
}
.hidden{display:none !important}

.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  height:var(--header-h);
  border-bottom:1px solid var(--line);
  background:rgba(10,17,32,.85);
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(6px);
}
.app-header .btn{margin-top:0;min-height:40px;padding:8px 16px;font-size:14px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:46px;height:46px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;letter-spacing:.5px;
  color:#0a1120;background:linear-gradient(135deg,var(--gold),#f2c94c);
}
.brand-text h1{margin:0;font-size:18px;letter-spacing:.3px}
.brand-text p{margin:2px 0 0;font-size:11px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase}

.container{max-width:640px;margin:0 auto;padding:16px 16px 32px}
.view{animation:fade .18s ease-in}
@keyframes fade{from{opacity:0}to{opacity:1}}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.card h2{margin:0 0 10px;font-size:17px}
.muted{color:var(--muted);font-size:14px}
.error{color:var(--bad);font-size:14px;margin:10px 0 0}
.success{color:var(--good);font-size:14px;margin:10px 0 0}

label{display:block;font-size:14px;margin:12px 0 4px;color:var(--text)}
input,textarea,select{
  width:100%;
  margin-top:6px;
  padding:12px;
  font-size:16px;
  color:var(--text);
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:8px;
}
input:focus,textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
textarea{resize:vertical}
.inline-label{display:flex;align-items:center;gap:10px;margin:0}
.inline-label input{width:auto;margin-top:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;
  padding:12px 20px;
  font-size:16px;font-weight:600;
  border-radius:10px;border:1px solid transparent;
  cursor:pointer;
  margin-top:14px;
}
.btn-primary{background:var(--accent);color:#fff;width:100%}
.btn-primary:hover{background:var(--accent-d)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-danger{background:transparent;color:var(--bad);border-color:var(--line);min-height:40px;padding:8px 14px;font-size:14px;margin-top:0}
.form-actions{display:flex;gap:10px}
.form-actions .btn-primary{flex:1}

.tabs{display:flex;gap:8px;margin:14px 0 4px}
.tab{
  flex:1;padding:12px;border-radius:8px;cursor:pointer;
  background:var(--bg2);color:var(--muted);
  border:1px solid var(--line);font-size:15px;font-weight:600;
}
.tab.active{background:var(--card2);color:var(--text);border-color:var(--accent)}

.viewnav{
  display:flex;gap:8px;margin:0 0 16px;
  position:sticky;top:var(--header-h);z-index:5;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  padding:12px 0;
}
.viewnav-btn,.rtab-btn{
  flex:1;padding:12px;border-radius:10px;cursor:pointer;
  background:var(--card);color:var(--muted);
  border:1px solid var(--line);font-size:15px;font-weight:600;
}
.viewnav-btn.active,.rtab-btn.active{color:var(--text);border-color:var(--accent);background:var(--card2)}

.chart-wrap{margin:14px 0}
.chart-wrap canvas{width:100%;display:block}
.chart-title{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px}
.flight-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.flight-pct{font-size:20px;font-weight:800;color:var(--gold)}
.pfa-remind-all{width:auto !important;margin-top:0;white-space:nowrap}

.stats{display:flex;gap:10px;margin-bottom:16px}
.stat{
  flex:1;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 8px;text-align:center;
}
.stat-num{display:block;font-size:26px;font-weight:800;color:var(--gold)}
.stat-label{display:block;font-size:12px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.6px}

.activity{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  margin-top:12px;
}
.activity-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.activity-head strong{font-size:14px}
.activity-remove{
  background:none;border:none;color:var(--bad);font-size:14px;cursor:pointer;padding:6px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 label{margin:8px 0 4px;font-size:13px;color:var(--muted)}

/* Workout log: session type + intensity pickers */
.field-label{display:block;font-size:14px;font-weight:700;margin:14px 0 2px;color:var(--text)}
.picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
@media(min-width:480px){.picker-grid{grid-template-columns:repeat(3,1fr)}}
.pick-btn{padding:12px 8px;border-radius:10px;cursor:pointer;background:var(--bg2);color:var(--muted);border:1px solid var(--line);font-size:14px;font-weight:600}
.pick-btn.selected{background:var(--accent);border-color:var(--accent);color:#fff}
.intensity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
@media(min-width:480px){.intensity-grid{grid-template-columns:repeat(4,1fr)}}
.intensity-card{padding:10px;border-radius:10px;cursor:pointer;background:var(--bg2);border:1px solid var(--line);text-align:left;color:var(--text)}
.intensity-card .lv{font-weight:700;font-size:14px}
.intensity-card .hint{font-size:11px;color:var(--muted);margin-top:2px}
.intensity-card.sel-low{border-color:#3d7bfd;background:rgba(61,123,253,.14)}
.intensity-card.sel-mod{border-color:var(--good);background:rgba(52,211,153,.12)}
.intensity-card.sel-high{border-color:var(--gold);background:rgba(217,166,46,.12)}
.intensity-card.sel-max{border-color:var(--bad);background:rgba(248,113,113,.12)}
.qchip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.qchip{background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer}
.qchip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.check-row{display:flex;gap:10px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px;margin:14px 0 4px;cursor:pointer;font-size:14px}
.check-row input{width:auto;margin:2px 0 0;accent-color:var(--accent);flex:none}
.check-row .muted{display:block;font-size:12px;margin-top:2px}
.log-title{font-weight:700;font-size:14px;margin-top:6px}
.log-sub{color:var(--muted);font-size:13px;margin-top:2px}
.log-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tag.ptl{color:var(--good);border-color:rgba(52,211,153,.45)}

.history{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.log-item{
  background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;padding:12px;
}
.log-item .log-date{font-weight:700;font-size:15px}
.log-item .log-meta{color:var(--muted);font-size:13px;margin-top:2px}
.log-item ul{margin:8px 0 4px;padding-left:20px;font-size:14px}
.log-item .log-notes{font-size:14px;color:var(--text);margin-top:6px;font-style:italic}
.log-item .log-actions{margin-top:8px;display:flex;gap:8px}
.link-btn{background:none;border:none;color:var(--accent);font-size:14px;font-weight:600;cursor:pointer;padding:6px 0}

.roster{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.roster-row{
  display:flex;align-items:center;gap:10px;
  background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;padding:12px;cursor:pointer;
}
.roster-row:hover{border-color:var(--accent)}
.roster-main{flex:1;min-width:0}
.roster-name{font-weight:700;font-size:15px}
.roster-sub{color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{
  font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;white-space:nowrap;
}
.badge.on{background:rgba(52,211,153,.15);color:var(--good);border:1px solid rgba(52,211,153,.4)}
.badge.off{background:rgba(248,113,113,.12);color:var(--bad);border:1px solid rgba(248,113,113,.35)}

.app-footer{text-align:center;color:var(--muted);font-size:12px;padding:18px 0 26px}
@media (min-width:700px){
  .brand-text h1{font-size:20px}
}

/* Reports */
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.chip{border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:14px;cursor:pointer}
.chip.active{background:var(--accent);border-color:var(--accent);color:#0b1526;font-weight:700}
.report-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.report-tabs .rtab-btn{flex:1 1 40%}
.report-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:6px}
.report-toolbar input[type="search"]{flex:1;min-width:180px}
.report-actions{display:flex;gap:8px}
.report-actions .btn{width:auto;padding:10px 14px}
.table-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
table.report-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;margin-top:10px}
.report-table th,.report-table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.report-table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.report-table th.sortable{cursor:pointer;user-select:none}
.report-table th.sortable:hover{color:var(--ink)}
.report-table td.num,.report-table th.num{text-align:right}
.report-table .sub{color:var(--muted);font-size:12px}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.badge-logged{background:rgba(46,204,113,.16);color:#2ecc71}
.badge-missing{background:rgba(231,76,60,.16);color:#e74c3c}
.activity-row{padding:10px 2px;border-bottom:1px solid var(--line)}
.activity-row .row-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.activity-row .who{font-weight:700}
.activity-row .when{color:var(--muted);font-size:13px;white-space:nowrap}
.activity-row .what{color:var(--ink);font-size:14px;margin-top:4px}
.activity-row .notes{color:var(--muted);font-size:13px;margin-top:2px}

@media print{
  .app-header,.viewnav,.presets,.report-toolbar,.app-footer,#report-custom,.btn{display:none !important}
  body{background:#fff;color:#000}
  .view{display:block !important}
  #view-dashboard,#view-admin{display:none !important}
  #view-reports{display:block !important}
  .card{box-shadow:none;border:1px solid #ccc;background:#fff;color:#000;break-inside:avoid}
  .card h2{color:#000}
  .muted,.report-table th,.report-table .sub{color:#444}
  .badge{border:1px solid #999}
  .badge-logged{color:#0a7a3d;background:none}
  .badge-missing{color:#a02020;background:none}
  #report-activity-wrap.hidden{display:none !important}
}

/* Unit report + roster upgrades */
.header-actions{display:flex;align-items:center;gap:8px}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--text);font-size:20px;
}
.icon-btn:hover{border-color:var(--accent)}
.bell-count{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.drawer-backdrop,.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;
}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);z-index:50;
  background:var(--card);border-left:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px;overflow-y:auto;
}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.drawer-head h2{margin:0;font-size:17px}
.notif-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.notif{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px}
.notif.unread{border-color:var(--accent)}
.notif-title{font-weight:700;font-size:14px}
.notif-body{font-size:13px;color:var(--muted);margin-top:4px}
.notif-time{font-size:11px;color:var(--muted);margin-top:6px}

.target-strip{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:16px;
}
.target-text{font-size:13px;color:var(--muted)}
.target-text strong{color:var(--text)}
.target-bar{height:10px;background:var(--bg2);border-radius:999px;margin-top:8px;overflow:hidden}
.target-bar #target-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--good));border-radius:999px;transition:width .3s}

.pfa-score{font-size:30px;font-weight:800;color:var(--gold)}
.pfa-rating{font-size:14px;color:var(--muted);margin-left:10px;font-weight:600}
.pfa-due{margin-top:8px;font-size:14px}
.pfa-history{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px}
.pfa-row{display:flex;gap:12px;align-items:baseline;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:14px}
.pfa-row strong{color:var(--gold)}

.modal{
  position:fixed;z-index:50;left:50%;top:8%;transform:translateX(-50%);
  width:min(560px,94vw);max-height:84vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.modal h2{margin:0 0 10px;font-size:17px}
.modal h3{margin:16px 0 6px;font-size:15px}

.role-badge{
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
  margin-left:8px;vertical-align:2px;white-space:nowrap;
}
.role-badge.is-admin{color:var(--gold);border-color:rgba(217,166,46,.5)}
.roster-btns{display:flex;gap:6px;flex:none}
.btn-sm{min-height:36px;padding:7px 12px;font-size:13px;margin-top:0}
.roster-pfa{margin-top:6px;display:flex;align-items:center;gap:6px}
.roster-pfa .sub{font-size:12px;color:var(--muted)}

.mr-name{font-size:19px;font-weight:800}
.mr-badges{margin-top:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mr-badges .role-badge{margin-left:0}
.mr-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}

.badge-na{background:rgba(147,161,186,.14);color:var(--muted);border:1px solid var(--line)}
.badge-due{background:rgba(217,166,46,.15);color:var(--gold);border:1px solid rgba(217,166,46,.45)}
.stat-pct{font-size:15px;color:var(--muted);font-weight:600}
.row-actions{white-space:nowrap}
.row-actions .link-btn{margin-right:10px}
.link-btn.danger{color:var(--bad)}
.report-actions-row{margin-top:4px}
#btn-remind-missing{width:100%}
#btn-remind-missing:disabled{opacity:.45;cursor:default}
#roster-search{margin:10px 0 4px}

.profile-card .profile-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.profile-card h2{margin:0 0 4px}
.profile-card p{margin:0}
.profile-card .btn{flex:none}

.auth-alt{margin:10px 0 0;text-align:center}