:root{
  --bg:#f7f6f3;
  --panel:#ffffff;
  --ink:#21242b;
  --ink-soft:#5f636e;
  --ink-faint:#9a9ea8;
  --navy:#0f1f33;
  --blue:#185fa5;
  --gold:#b8934a;
  --gold-soft:#e9dcc2;
  --hair:#e8e6e0;
  --ok:#2e7d4f;   --ok-bg:#e7f3ec;
  --warn:#a3701c; --warn-bg:#fbf2df;
  --bad:#b0433c;  --bad-bg:#faeae8;
  --info:#185fa5; --info-bg:#e8f0f8;
  --shadow:0 1px 2px rgba(20,22,26,.05), 0 8px 24px -12px rgba(20,22,26,.12);
  --shadow-lg:0 24px 60px -24px rgba(15,31,51,.25);
  --r:14px;
}
*{box-sizing:border-box; margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Jost',system-ui,sans-serif; font-weight:400; font-size:14.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; letter-spacing:-0.01em}
a{color:inherit; text-decoration:none}
button{font-family:'Jost',sans-serif}
input,textarea,select{font-family:'Jost',sans-serif}

/* ================= app shell ================= */
.shell{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
.sidebar{
  background:var(--navy); color:#e9ecf2; padding:26px 18px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:6px;
}
.sidebar .brand{display:flex; align-items:center; gap:10px; padding:0 10px 24px}
.sidebar .brand img{height:32px; filter:brightness(0) invert(1)}
.sidebar .brand span{font-family:'Cormorant Garamond',serif; font-size:20px; letter-spacing:.04em}
.snav{display:flex; flex-direction:column; gap:3px; flex:1}
.snav a{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  font-size:13.5px; color:#b9c2d0; transition:background .2s,color .2s; position:relative;
}
.snav a:hover{background:rgba(255,255,255,.06); color:#fff}
.snav a.on{background:rgba(24,95,165,.35); color:#fff}
.snav a .ico{width:18px; text-align:center; font-size:15px; opacity:.9}
.snav .count{
  margin-left:auto; background:var(--gold); color:#fff; border-radius:10px;
  font-size:10.5px; padding:2px 8px; font-weight:500;
}
.sidebar .foot{border-top:1px solid rgba(255,255,255,.12); padding-top:14px}
.sidebar .who{font-size:12.5px; color:#b9c2d0; padding:0 12px 10px; line-height:1.5}
.sidebar .who b{color:#fff; font-weight:500; display:block}
.sidebar .out{
  display:block; width:100%; text-align:left; background:transparent; border:0; color:#b9c2d0;
  padding:10px 12px; border-radius:10px; font-size:13px; cursor:pointer;
}
.sidebar .out:hover{background:rgba(255,255,255,.06); color:#fff}
.main{padding:34px clamp(22px,3.4vw,46px) 80px; min-width:0}
.mobile-top{display:none}
@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed; z-index:300; width:250px; transform:translateX(-100%); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .sidebar.open{transform:none; box-shadow:var(--shadow-lg)}
  .mobile-top{display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--panel); border-bottom:1px solid var(--hair); position:sticky; top:0; z-index:100}
  .mobile-top img{height:26px}
  .burger{border:1px solid var(--hair); background:#fff; border-radius:8px; padding:7px 11px; font-size:15px; cursor:pointer}
  .scrim{display:none; position:fixed; inset:0; background:rgba(15,31,51,.35); z-index:250}
  .scrim.on{display:block}
  .main{padding:22px 16px 70px}
}

/* ================= headers / common ================= */
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:26px; flex-wrap:wrap}
.page-head h1{font-size:clamp(26px,3vw,34px); color:var(--navy)}
.page-head p{color:var(--ink-soft); font-size:13.5px; margin-top:6px; max-width:560px; line-height:1.6}
.card{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r); padding:24px; box-shadow:var(--shadow)}
.card + .card{margin-top:18px}
.card h3{font-size:19px; color:var(--navy); margin-bottom:4px}
.card .sub{font-size:13px; color:var(--ink-soft); margin:0 0 16px; line-height:1.55}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:1020px){.grid2,.grid3{grid-template-columns:1fr}}

.btn{
  background:var(--navy); color:#fff; border:0; border-radius:10px; padding:11px 20px;
  font-size:13px; letter-spacing:.03em; font-weight:500; cursor:pointer; transition:background .2s, box-shadow .2s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{background:var(--blue); box-shadow:0 10px 24px -12px rgba(24,95,165,.6)}
.btn.ghost{background:#fff; color:var(--ink); border:1px solid var(--hair)}
.btn.ghost:hover{border-color:var(--blue); color:var(--blue); box-shadow:none; background:#fff}
.btn.gold{background:var(--gold)} .btn.gold:hover{background:#a07f3d}
.btn.small{padding:7px 13px; font-size:12px; border-radius:8px}
.btn.danger{background:#fff; color:var(--bad); border:1px solid var(--hair)}
.btn:disabled{opacity:.5; cursor:default}
.field{margin-bottom:13px}
.field label{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%; border:1px solid var(--hair); border-radius:10px; background:#fbfaf8;
  padding:10px 13px; font-size:14px; color:var(--ink);
}
.field textarea{min-height:86px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--blue); outline-offset:0; background:#fff}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:13px}
@media(max-width:640px){.row2,.row3{grid-template-columns:1fr}}
.msg{font-size:13px; margin-top:10px; color:var(--blue)}
.msg.err{color:var(--bad)} .msg.ok{color:var(--ok)}
.empty{font-size:13px; color:var(--ink-faint); padding:16px 4px; text-align:center}
.code{font-family:monospace; background:var(--bg); border:1px dashed var(--gold); padding:2px 8px; border-radius:6px; font-size:12.5px; color:var(--navy)}

.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.04em; padding:4px 11px; border-radius:20px; font-weight:500}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.bad{background:var(--bad-bg); color:var(--bad)}
.pill.info{background:var(--info-bg); color:var(--info)}
.pill.grey{background:#eeedea; color:var(--ink-soft)}
.pill.gold{background:var(--gold-soft); color:#7a5f28}
.dot{width:7px; height:7px; border-radius:50%; background:var(--gold); display:inline-block}

/* ================= auth ================= */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; background:linear-gradient(160deg,var(--bg) 60%, #efe9da)}
.auth-card{background:#fff; border:1px solid var(--hair); border-radius:18px; padding:40px; width:100%; max-width:420px; box-shadow:var(--shadow-lg)}
.auth-card img{height:40px; margin-bottom:20px}
.auth-card h1{font-size:27px; color:var(--navy); margin-bottom:6px}
.auth-card p.sub{font-size:13.5px; color:var(--ink-soft); margin:0 0 22px; line-height:1.6}

/* ================= pipeline ================= */
.stage-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px}
.stage-col{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r); padding:14px; box-shadow:var(--shadow); min-height:120px}
.stage-col .sh{display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; padding:2px 4px 12px}
.stage-col .sh b{color:var(--navy); font-weight:500}
.pcard{
  background:#fbfaf8; border:1px solid var(--hair); border-radius:11px; padding:13px 14px; margin-bottom:10px;
  cursor:pointer; transition:box-shadow .2s, transform .2s, border-color .2s;
}
.pcard:hover{box-shadow:var(--shadow); transform:translateY(-2px); border-color:#d8d5cd}
.pcard .n{font-size:14px; font-weight:500; color:var(--navy); display:flex; justify-content:space-between; align-items:center; gap:8px}
.pcard .c{font-size:12px; color:var(--ink-soft); margin-top:3px}
.pcard .flags{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}
.progress-bar{height:5px; background:#eceae4; border-radius:4px; margin-top:10px; overflow:hidden}
.progress-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--gold)); border-radius:4px; transition:width .6s cubic-bezier(.2,.8,.2,1)}
@media(max-width:1100px){.stage-row{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.stage-row{grid-template-columns:1fr}}

/* ================= project HQ ================= */
.hq-head{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--shadow); padding:26px; margin-bottom:20px}
.hq-top{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start}
.hq-top h1{font-size:28px; color:var(--navy)}
.hq-top .meta{font-size:13px; color:var(--ink-soft); margin-top:5px; line-height:1.6}
.hq-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px}
.hq-stat{background:#fbfaf8; border:1px solid var(--hair); border-radius:11px; padding:14px 16px}
.hq-stat b{display:block; font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--navy); font-weight:500}
.hq-stat span{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
@media(max-width:900px){.hq-stats{grid-template-columns:1fr 1fr}}
.tabs{display:flex; gap:4px; margin:0 0 20px; background:var(--panel); border:1px solid var(--hair); border-radius:12px; padding:5px; box-shadow:var(--shadow); overflow-x:auto}
.tab{
  border:0; background:transparent; border-radius:9px; padding:9px 16px; font-size:13px; color:var(--ink-soft);
  cursor:pointer; white-space:nowrap; transition:background .2s,color .2s; display:flex; align-items:center; gap:7px;
}
.tab.on{background:var(--navy); color:#fff}
.list{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.item{
  border:1px solid var(--hair); border-radius:12px; padding:15px 17px; background:#fbfaf8;
  display:flex; justify-content:space-between; gap:14px; align-items:flex-start; flex-wrap:wrap;
}
.item .t{font-size:15px; font-weight:500; color:var(--navy)}
.item .meta{font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.55}
.detail{background:#fff; border:1px solid var(--hair); border-left:3px solid var(--gold); border-radius:8px; padding:12px 15px; margin-top:11px; font-size:13px; color:var(--ink-soft); line-height:1.65; white-space:pre-wrap; width:100%}

/* ================= calendar ================= */
.cal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap}
.cal-head h3{font-size:21px; color:var(--navy)}
.cal-nav{display:flex; gap:8px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-dow{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); text-align:center; padding:6px 0; font-weight:500}
.cal-day{
  background:#fbfaf8; border:1px solid var(--hair); border-radius:10px; min-height:92px; padding:8px;
  font-size:12px; cursor:pointer; transition:border-color .2s, box-shadow .2s; position:relative;
}
.cal-day:hover{border-color:var(--blue)}
.cal-day.dim{opacity:.38; cursor:default}
.cal-day.today{border-color:var(--gold); background:#fdfaf3}
.cal-day.sel{border-color:var(--blue); box-shadow:0 0 0 2px rgba(24,95,165,.2)}
.cal-day .dnum{font-weight:500; color:var(--ink-soft)}
.cal-day.today .dnum{color:var(--gold)}
.cal-ev{
  margin-top:5px; border-radius:6px; padding:3px 7px; font-size:10.5px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-ev.session{background:var(--info-bg); color:var(--info)}
.cal-ev.meeting{background:var(--gold-soft); color:#7a5f28}
.cal-ev.deadline{background:var(--bad-bg); color:var(--bad)}
.cal-ev.other{background:#eeedea; color:var(--ink-soft)}
@media(max-width:760px){.cal-day{min-height:58px}.cal-ev{display:none}.cal-day .has{position:absolute; bottom:6px; left:8px}}
.day-panel .ev{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--hair); flex-wrap:wrap}
.day-panel .ev:last-child{border-bottom:0}
.day-panel .ev .t{font-weight:500; color:var(--navy); font-size:14px}
.day-panel .ev .m{font-size:12px; color:var(--ink-soft); margin-top:2px}

/* ================= messages ================= */
.chat-shell{display:grid; grid-template-columns:280px 1fr; gap:18px; align-items:start}
@media(max-width:880px){.chat-shell{grid-template-columns:1fr}}
.threads{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.thread{padding:14px 16px; border-bottom:1px solid var(--hair); cursor:pointer; transition:background .15s}
.thread:hover{background:#fbfaf8}
.thread.on{background:var(--info-bg)}
.thread .n{font-weight:500; font-size:14px; color:var(--navy); display:flex; justify-content:space-between; align-items:center}
.thread .p{font-size:12px; color:var(--ink-faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--shadow); display:flex; flex-direction:column; height:600px}
.chat-head{padding:16px 20px; border-bottom:1px solid var(--hair); font-weight:500; color:var(--navy); display:flex; justify-content:space-between; align-items:center}
.chat-log{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; background:#fbfaf8}
.bubble{max-width:74%; padding:11px 15px; border-radius:14px; font-size:14px; line-height:1.6; white-space:pre-wrap; box-shadow:var(--shadow)}
.bubble.me{align-self:flex-end; background:var(--navy); color:#eef1f6; border-bottom-right-radius:4px}
.bubble.them{align-self:flex-start; background:#fff; border:1px solid var(--hair); border-bottom-left-radius:4px}
.bubble .bm{display:block; font-size:10.5px; opacity:.6; margin-top:6px}
.chat-input{display:flex; gap:10px; padding:14px; border-top:1px solid var(--hair)}
.chat-input textarea{flex:1; border:1px solid var(--hair); border-radius:10px; padding:11px 13px; font-size:14px; resize:none; height:46px; background:#fbfaf8}
.chat-input textarea:focus{outline:2px solid var(--blue); background:#fff}

/* ================= invoices table ================= */
table.vv{width:100%; border-collapse:collapse; font-size:13.5px}
table.vv th{text-align:left; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; padding:9px 10px; border-bottom:1px solid var(--hair)}
table.vv td{padding:12px 10px; border-bottom:1px solid var(--hair); vertical-align:middle}
table.vv tr:last-child td{border-bottom:0}
.right{text-align:right}

/* ================= invoice print ================= */
.invoice-sheet{background:#fff; border:1px solid var(--hair); border-radius:var(--r); padding:46px; max-width:760px; margin:0 auto; box-shadow:var(--shadow)}
.inv-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:34px; gap:20px; flex-wrap:wrap}
.inv-head .brandline{font-family:'Cormorant Garamond',serif; font-size:28px; color:var(--blue); font-weight:600}
.inv-head .sub{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px}
.inv-num .n{font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--navy); text-align:right}
.inv-meta{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:30px; font-size:14px; line-height:1.7}
.inv-meta .lbl{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600}
.inv-total td{font-family:'Cormorant Garamond',serif; font-size:19px; color:var(--navy); border-top:2px solid var(--navy)!important}
.inv-notes{margin-top:26px; font-size:13px; color:var(--ink-soft); line-height:1.65; border-top:1px solid var(--hair); padding-top:16px}
@media print{
  .sidebar,.mobile-top,.no-print{display:none!important}
  .shell{display:block} body{background:#fff}
  .main{padding:0} .invoice-sheet{border:0; box-shadow:none; padding:20px; max-width:none}
}

/* ================= coach chat (student) ================= */
.coach{display:flex; flex-direction:column; height:480px; border:1px solid var(--hair); border-radius:12px; overflow:hidden; background:#fbfaf8}
.coach-log{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px}
.coach-input{display:flex; gap:8px; padding:12px; border-top:1px solid var(--hair); background:#fff}
.coach-input input{flex:1; border:1px solid var(--hair); border-radius:10px; padding:11px 13px; font-size:14px}
.quick{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.quick button{border:1px solid var(--gold); background:#fff; border-radius:20px; padding:7px 14px; font-size:12px; color:#7a5f28; cursor:pointer}
.quick button:hover{background:var(--gold-soft)}

/* file attachments */
.field input[type=file]{padding:8px; background:#fff}
a.pill.info{cursor:pointer}
a.pill.info:hover{background:rgba(24,95,165,.22)}
.mobile-top img{height:24px}

/* ---- live search inputs (pipeline / roster) ---- */
.search{
  font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--panel); border:1px solid var(--hair); border-radius:10px;
  padding:9px 13px; min-width:220px; box-shadow:var(--shadow);
}
.search:focus{outline:2px solid var(--blue); outline-offset:0}
@media (max-width:700px){ .search{min-width:0; width:100%} }