:root { --ink:#21153c; --muted:#756d85; --line:#e3ddec; --purple:#55269a; --surface:#fff; --bg:#f7f5fa; --blue:#2e86c1; --blue-soft:#e5f3fc; --green:#3a9b70; --green-soft:#e7f6ee; --lav:#8f74c8; --lav-soft:#eee9fa; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--bg); } button { font:inherit; }
.app-shell { max-width:1440px; margin:auto; padding:28px clamp(16px,3vw,42px) 48px; }
.topbar { display:flex; gap:20px; align-items:center; padding-bottom:22px; border-bottom:2px solid var(--purple); } .brand { display:flex; align-items:center; gap:12px; } .brand-mark { display:grid; place-items:center; width:47px; height:47px; border-radius:12px; background:var(--purple); color:#fff; font-size:14px; font-weight:900; letter-spacing:-.06em; } .eyebrow { margin:0 0 4px; color:var(--purple); font-size:10px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; } h1,h2,p { margin:0; } h1 { font-size:28px; line-height:1; letter-spacing:-.04em; } h2 { font-size:19px; letter-spacing:-.025em; }
.player-picker,.week-label { display:grid; gap:2px; } .player-picker { margin-left:auto; } .player-picker span,.week-label span,.library-heading > p { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; } .player-picker select { min-width:158px; height:29px; padding:0 24px 0 0; border:0; outline:0; background:transparent; color:var(--ink); font-size:13px; font-weight:800; cursor:pointer; } .week-label { text-align:right; } .week-label strong { font-size:13px; } .reset { min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--purple); font-size:12px; font-weight:750; cursor:pointer; } .reset:hover { border-color:var(--purple); background:var(--purple); color:#fff; }
.planner { margin-top:26px; overflow-x:auto; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 4px 15px rgba(35,20,67,.06); } .calendar-head,.plan-row { display:grid; grid-template-columns:172px repeat(7,minmax(120px,1fr)); min-width:1012px; } .calendar-head { background:#fbfaff; border-bottom:1px solid var(--line); } .calendar-head > div { padding:12px 11px; color:#605776; font-size:11px; font-weight:850; letter-spacing:.06em; text-align:center; text-transform:uppercase; border-left:1px solid #eeeaf4; } .calendar-head .corner { text-align:left; border-left:0; }
.plan-row { min-height:118px; border-bottom:1px solid var(--line); } .plan-row:last-child { border:0; } .row-title { display:flex; align-items:center; gap:10px; padding:14px; border-right:1px solid var(--line); font-size:13px; font-weight:820; } .row-dot { width:10px; height:10px; border-radius:50%; flex:none; } .row-title small { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:600; } .day-cell { display:flex; flex-direction:column; gap:7px; min-height:118px; padding:9px; border-right:1px solid #eeeaf4; transition:background .12s,outline .12s; } .day-cell:last-child { border:0; } .day-cell.drag-over { background:#faf7ff; outline:2px dashed var(--purple); outline-offset:-5px; }
.session { position:relative; display:flex; align-items:center; gap:6px; width:100%; padding:8px 22px 8px 8px; border:1px solid transparent; border-radius:7px; text-align:left; color:var(--ink); font-size:12px; font-weight:720; cursor:grab; } .session:active { cursor:grabbing; } .session.is-dragging { opacity:.38; } .drag-dots { color:currentColor; font-size:15px; line-height:1; opacity:.65; } .remove { position:absolute; right:7px; top:50%; display:none; transform:translateY(-52%); color:currentColor; font-size:17px; font-weight:500; } .session:hover .remove { display:block; } .type-water { background:var(--blue-soft); border-color:#c9e6f7; color:#176da8; } .type-plyo { background:var(--green-soft); border-color:#cae8d8; color:#227b54; } .type-throw { background:var(--lav-soft); border-color:#ddd2f4; color:#7052aa; }
.library-section { margin-top:31px; } .library-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:13px; } .library-heading > p { max-width:280px; text-align:right; line-height:1.4; } .library { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .library-group { padding:15px; border:1px solid var(--line); border-radius:11px; background:#fff; } .library-group h3 { display:flex; align-items:center; gap:8px; margin:0 0 11px; font-size:12px; } .library-group .row-dot { width:9px; height:9px; } .library-items { display:flex; flex-wrap:wrap; gap:8px; } .library .session { width:auto; min-width:130px; } .library .remove { display:none !important; }
@media (max-width:680px) { .app-shell { padding-top:18px; } .topbar { flex-wrap:wrap; } .player-picker { margin-left:0; } .week-label { text-align:left; } .reset { margin-left:auto; } .library { grid-template-columns:1fr; } .library-heading { align-items:start; flex-direction:column; } .library-heading > p { text-align:left; } }