*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',system-ui,sans-serif;background:#f8f8f9;color:#111113;display:flex;flex-direction:column}

:root{
  --bg:#f8f8f9;--surface:#fff;--s2:#f0f0f3;
  --border:#e2e2e6;--border2:#c8c8ce;
  --t1:#111113;--t2:#6b6b78;--t3:#a0a0ab;
  --acc:#2563eb;--acc-bg:rgba(37,99,235,.07);--acc-br:rgba(37,99,235,.3);
  --red:#ef4444;--pur:#7c3aed;--gr:#16a34a;--amb:#f59e0b;
}

/* ── BAR ── */
.bar{height:52px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0}
.bar-left{display:flex;align-items:center;gap:10px}
.nav-back{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;
  color:var(--t2);text-decoration:none;transition:color .15s}
.nav-back:hover{color:var(--t1)}
.bar-sep{width:1px;height:16px;background:var(--border)}
.bar-title{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.bar-right{display:flex;align-items:center;gap:8px}
.user-greeting{font-size:12px;color:var(--t2)}

/* ── BUTTONS ── */
.btn-outline{background:none;border:1px solid var(--border);border-radius:7px;
  padding:6px 14px;font-family:inherit;font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .15s}
.btn-outline:hover{border-color:var(--border2);color:var(--t1)}
.btn-outline.sm{padding:5px 10px;font-size:11px}
.btn-solid{background:var(--acc);color:#fff;border:none;border-radius:7px;
  padding:7px 14px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s}
.btn-solid:hover{opacity:.88}
.btn-solid.full{width:100%;padding:11px;font-size:13px;border-radius:9px;margin-top:4px}

/* ── PLANNER LAYOUT ── */
.planner{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}

/* ── WEEK NAV ── */
.week-nav-bar{height:44px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 16px;gap:8px;flex-shrink:0}
.wk-btn{background:none;border:1px solid var(--border);border-radius:6px;
  width:28px;height:28px;font-size:16px;line-height:1;cursor:pointer;color:var(--t2);
  display:flex;align-items:center;justify-content:center;transition:all .15s}
.wk-btn:hover{border-color:var(--border2);color:var(--t1)}
.wk-label{font-size:13px;font-weight:600;color:var(--t1);min-width:190px}
.wk-today{background:none;border:1px solid var(--border);border-radius:6px;
  padding:4px 10px;font-family:inherit;font-size:11px;font-weight:500;
  color:var(--t2);cursor:pointer;transition:all .15s}
.wk-today:hover{border-color:var(--border2);color:var(--t1)}
.sync-status{font-size:11px;color:var(--t3);margin-left:4px}
.wk-view-toggle{
  border-radius:6px;
  padding:4px 12px;font-family:inherit;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .15s;border:none;
}
/* Week view active = blue */
.wk-view-toggle.view-week{
  background:var(--acc);color:#fff;
}
.wk-view-toggle.view-week:hover{opacity:.88}
/* Day view active = green */
.wk-view-toggle.view-day{
  background:#16a34a;color:#fff;
}
.wk-view-toggle.view-day:hover{opacity:.88}

/* ── CALENDAR ── */
.calendar{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:1px;background:var(--border);
  flex-shrink:0;
  min-height:120px;
}
/* Day view: single column, taller blocks */
.calendar.day-view{
  grid-template-columns:1fr;
}
.calendar.day-view .day-col{min-height:80px}
.calendar.day-view .cal-block{padding:8px 10px;font-size:13px}
.calendar.day-view .cb-name{white-space:normal;overflow:visible;text-overflow:unset}

.day-col{
  background:var(--surface);
  display:flex;flex-direction:column;
  transition:background .12s;
}
.day-col.drop-active{background:#eff6ff}

.day-hdr{
  padding:8px 8px 6px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.day-name{font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.day-num{font-size:17px;font-weight:600;color:var(--t2);line-height:1;margin-top:2px}
.day-col.is-today .day-num{color:var(--acc)}
.day-col.is-today .day-name{color:var(--acc)}

/* Blocks area — grows with content, no fixed height */
.day-body{
  padding:4px;
  display:flex;flex-direction:column;gap:3px;
  min-height:40px;       /* always gives a drop target */
}

/* placeholder shown when empty + dragging over */
.day-col.drop-active .day-placeholder{display:flex}
.day-placeholder{
  display:none;
  font-size:10px;color:var(--t3);
  align-items:center;justify-content:center;
  padding:8px 4px;border-radius:5px;
  border:1.5px dashed var(--border2);
  margin:2px 0;
}

/* ── EXERCISE BLOCKS IN CALENDAR ── */
.cal-block{
  display:flex;align-items:center;gap:4px;
  padding:5px 6px;border-radius:6px;
  background:var(--s2);border:1px solid var(--border);
  border-left:3px solid var(--border2);
  font-size:11px;font-weight:500;color:var(--t1);
  cursor:grab;user-select:none;
  transition:box-shadow .15s,opacity .15s;
  position:relative;
}
.cal-block:hover{box-shadow:0 1px 6px rgba(0,0,0,.08)}
.cal-block.dragging{opacity:.3;cursor:grabbing}
.cal-block.drag-over{outline:2px solid var(--acc);outline-offset:1px}
.cb-handle{color:var(--t3);font-size:10px;cursor:grab;flex-shrink:0;padding:0 1px}
.cb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-del{background:none;border:none;cursor:pointer;color:var(--t3);font-size:12px;
  padding:0 2px;line-height:1;flex-shrink:0;transition:color .15s}
.cb-del:hover{color:var(--red)}

/* type accent borders */
.cal-block.t-compound   {border-left-color:#7c3aed}
.cal-block.t-isolation  {border-left-color:#2563eb}
.cal-block.t-bodyweight {border-left-color:#16a34a}
.cal-block.t-cable      {border-left-color:#f59e0b}
.cal-block.t-golf       {border-left-color:#15803d}
.cal-block.t-flexibility{border-left-color:#7c3aed}

/* ── LIBRARY PANEL ── */
.library-panel{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
  padding:10px 16px 12px;gap:8px;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.lib-top{display:flex;align-items:baseline;gap:10px;flex-shrink:0}
.lib-title{font-size:12px;font-weight:600;color:var(--t1)}
.lib-hint{font-size:11px;color:var(--t3)}

.lib-filters{display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0}
.lib-pill{padding:4px 11px;border-radius:99px;font-family:inherit;font-size:11px;font-weight:500;
  border:1.5px solid var(--border);background:var(--surface);color:var(--t2);
  cursor:pointer;transition:all .15s}
.lib-pill:hover{border-color:var(--border2);color:var(--t1)}
.lib-pill.on{background:var(--t1);color:#fff;border-color:var(--t1)}

.lib-search-row{flex-shrink:0}
.lib-search{
  width:100%;padding:8px 12px;
  background:var(--s2);border:1.5px solid var(--border);
  border-radius:8px;font-family:inherit;font-size:12px;color:var(--t1);
  outline:none;transition:border-color .15s}
.lib-search::placeholder{color:var(--t3)}
.lib-search:focus{border-color:var(--acc)}

.lib-grid{
  display:flex;flex-wrap:wrap;gap:6px;
  align-items:flex-start;
  align-content:flex-start;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.lib-grid::-webkit-scrollbar{width:3px}
.lib-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ── LIBRARY BLOCKS ── */
.lib-block{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;
  background:var(--surface);border:1.5px solid var(--border);
  font-size:12px;font-weight:500;color:var(--t1);
  cursor:grab;user-select:none;white-space:nowrap;
  transition:all .18s;
  align-self:flex-start;
}
.lib-block:hover{border-color:var(--border2);box-shadow:0 2px 8px rgba(0,0,0,.07);transform:translateY(-1px)}
.lib-block:active{cursor:grabbing;transform:translateY(0)}
.lib-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ── AUTH MODAL ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;
  align-items:center;justify-content:center;padding:20px}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  width:100%;max-width:400px;box-shadow:0 24px 64px rgba(0,0,0,.14);overflow:hidden}
.modal-tabs{display:flex;align-items:center;padding:14px 20px 0;gap:2px;border-bottom:1px solid var(--border);padding-bottom:0}
.mtab{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:8px 14px;font-family:inherit;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;transition:all .15s}
.mtab.active{color:var(--t1);font-weight:600;border-bottom-color:var(--acc)}
.modal-x{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--t3);
  font-size:16px;padding:6px;transition:color .15s}
.modal-x:hover{color:var(--t1)}
#auth-login,#auth-signup{padding:20px;display:flex;flex-direction:column;gap:12px}
.fld{display:flex;flex-direction:column;gap:4px}
.fld label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.fld input,.fld-row .fld input{
  padding:9px 12px;background:var(--s2);border:1px solid var(--border);
  border-radius:8px;font-family:inherit;font-size:13px;color:var(--t1);
  outline:none;transition:border-color .15s}
.fld input:focus{border-color:var(--acc)}
.fld input::placeholder{color:var(--t3)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ferr{font-size:12px;color:var(--red);min-height:14px;margin-top:-4px}

/* ── TOAST ── */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--t1);color:#fff;padding:9px 18px;border-radius:8px;
  font-size:12px;font-weight:500;z-index:999;opacity:0;transition:all .22s;
  pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── TOUCH GHOST ── */
.touch-ghost{position:fixed;z-index:9999;pointer-events:none;
  background:var(--acc);color:#fff;border-radius:8px;padding:6px 14px;
  font-size:12px;font-weight:500;box-shadow:0 4px 16px rgba(37,99,235,.35);
  opacity:.9;white-space:nowrap;transform:translate(-50%,-50%)}

/* ── RESPONSIVE ── */
@media(max-width:700px){
  /* On mobile: entire page is fixed, only lib-grid scrolls */
  html,body{height:100%;overflow:hidden}
  .planner{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}

  /* Bar + week-nav stay fixed */
  .bar{flex-shrink:0}
  .week-nav-bar{flex-shrink:0}

  /* Weekly calendar: horizontal scroll, fixed height */
  .calendar:not(.day-view){
    display:flex;overflow-x:auto;
    flex-shrink:0;
    min-height:140px;max-height:200px;
    -webkit-overflow-scrolling:touch;
  }
  .calendar:not(.day-view) .day-col{min-width:80px;flex-shrink:0}

  /* Day view: grows to show all exercises */
  .calendar.day-view{
    display:grid;grid-template-columns:1fr;
    overflow:visible;flex-shrink:0;
  }

  /* Library panel: fills remaining space, only lib-grid scrolls */
  .library-panel{
    flex:1;min-height:0;overflow:hidden;
    display:flex;flex-direction:column;
  }
  .lib-top{flex-shrink:0}
  .lib-filters{flex-shrink:0}
  .lib-search-row{flex-shrink:0}
  /* ONLY the exercise grid scrolls */
  .lib-grid{
    flex:1;min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}