:root { font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#202637; background:#f5f6fa; font-synthesis:none; --accent:#6654cb; --line:#e5e7ef; --muted:#737b8d } * { box-sizing:border-box } body { margin:0 } button,input,select,textarea { font:inherit } button,a,input,select,textarea { outline-offset:4px } a { color:var(--accent); text-decoration:none } button,.button { cursor:pointer; border:1px solid var(--line); border-radius:9px; background:white; padding:10px 15px; color:#42495b; font-size:13px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; gap:6px } button:hover,.button:hover { background:#eeecfb; border-color:#c9c0ef } button:disabled { cursor:default; opacity:.45 } button.primary,.button.primary { background:var(--accent); border-color:var(--accent); color:white } .primary:hover { background:#5745b8 } .text-button { border:0; background:transparent; color:var(--accent); padding:8px 0 } .danger-text { color:#b24558 } .muted { color:var(--muted); font-size:13px; line-height:1.6; margin:7px 0 } .eyebrow { font-size:10px; letter-spacing:1.7px; font-weight:700; color:var(--muted); margin:0 0 12px } h1 { font-size:32px; letter-spacing:-1px; margin:0 0 8px; font-weight:700 } h2 { font-size:17px; margin:0 0 16px; letter-spacing:-.3px } label { display:block; font-size:12px; font-weight:600; color:#697184 } input,select,textarea { display:block; width:100%; border:1px solid #dfe3ed; background:#fff; color:#202637; padding:10px 12px; border-radius:7px; font-size:14px; margin-top:7px } input:focus,select:focus,textarea:focus { border-color:var(--accent); outline:2px solid #e7e2ff } textarea { min-height:90px; resize:vertical } form>label { margin:18px 0 } fieldset { min-width:0; border:0; padding:0; margin:0 } input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent) } .app-shell { display:flex; min-height:100vh } .sidebar { background:#1b2234; color:#eff0f7; width:235px; flex-shrink:0; padding:34px 20px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh } .brand { display:flex; align-items:center; gap:13px; color:#fff; line-height:1.4; font-size:14px; padding:0 10px } .brand-mark { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:#8070e3; color:#fff; font-size:15px; font-weight:800; letter-spacing:-1px } .nav-label { font-size:9px; color:#8993ac; letter-spacing:1.2px; margin:50px 10px 16px } .sidebar nav { display:grid; gap:8px } .sidebar nav a { color:#aeb6c9; display:flex; align-items:center; gap:12px; padding:14px 12px; border-radius:9px; font-size:13px } .sidebar nav a.active { background:#33314d; color:#ddd6ff } .sidebar nav a:hover { background:#283148 } .sidebar-bottom { margin-top:auto; border-top:1px solid #31394c; padding:20px 10px 0 } .sidebar-bottom .text-button { color:#c5bddf } .main-content { flex:1; min-width:0; padding:38px 42px; max-width:1750px } .page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 30px } .count-badge { background:#eeebfb; color:var(--accent); border-radius:30px; padding:9px 14px; font-size:12px; font-weight:600 } .panel { border:1px solid var(--line); background:white; border-radius:13px } .compact { padding:23px 25px; margin-bottom:24px } .inline-form { display:flex; align-items:end; gap:16px } .grow { flex:1 } .actions { display:flex; align-items:center; gap:10px } .client-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-top:25px } .client-card { display:flex; align-items:center; gap:17px; border:1px solid var(--line); background:#fff; border-radius:12px; padding:25px; color:inherit; transition:box-shadow .15s } .client-card:hover { box-shadow:0 6px 20px #22223b0a; border-color:#c8beed } .client-card h2 { margin:0; font-size:16px } .client-card .arrow { margin-left:auto; color:var(--accent) } .avatar { display:grid; place-items:center; background:#f0edff; color:var(--accent); font-size:20px; width:50px; height:50px; border-radius:15px } .empty-state { text-align:center; padding:70px 20px; border:1px dashed #d4d8e6; border-radius:14px; margin:24px 0; background:#ffffff80 } .empty-symbol { display:block; font-size:35px; color:#9e91da; margin-bottom:20px } .empty-state h2 { margin-bottom:10px } .empty-state button { margin-top:18px } .breadcrumb { display:inline-block; color:var(--muted); font-size:12px; margin-bottom:24px } .section-title { margin:30px 0 18px } .program-row { display:flex; align-items:center; justify-content:space-between; gap:20px; background:white; border:1px solid var(--line); border-radius:10px; padding:20px 24px; margin-bottom:12px } .program-title { font-size:17px; font-weight:650; color:#30384b } .program-row .muted { margin:8px 0 0; font-size:11px } summary { cursor:pointer; font-size:14px; font-weight:600 } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px } .list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:25px 0 18px } .list-toolbar h2 { margin:0 } .search { max-width:320px; margin:0 } .title-input { font-size:28px; font-weight:700; background:transparent; border:0; padding:0; letter-spacing:-.7px; margin:0 } .editor-heading { align-items:center; margin-bottom:30px } .editor-heading > div:first-child { flex: 1; min-width: 0; } .editor-heading > .actions { flex-shrink: 0; } .save-status { font-size:11px; color:#7b8497; max-width:130px } .week-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:26px } .week-tabs button { display:block; background:transparent; border:0; border-bottom:3px solid transparent; border-radius:0; padding:16px 25px; text-align:left; font-size:14px } .week-tabs button span { display:block; font-size:10px; color:var(--muted); margin-top:7px; font-weight:400 } .week-tabs button.selected { border-color:var(--accent); color:var(--accent); background:#eeebfa } .week-tabs button[draggable="true"] { cursor:grab; position:relative; } .week-tabs button[draggable="true"]:active { cursor:grabbing; } .week-tabs .week-dragging { opacity:.35; } .week-tabs .week-drop-before::before, .week-tabs .week-drop-after::after { content:""; position:absolute; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--accent); box-shadow:0 0 0 3px #eeebfa; pointer-events:none } .week-tabs .week-drop-before::before { left:-4px; } .week-tabs .week-drop-after::after { right:-4px; } .week-drag-ghost { position:fixed; top:-1000px; left:0; width:72px; height:72px; box-sizing:border-box; display:grid; place-items:center; padding:8px; border:2px dashed var(--accent); border-radius:8px; background:transparent; color:var(--accent); opacity:.75; font-family:inherit; font-size:14px; font-weight:600; pointer-events:none } .week-tabs .add-week { color:var(--accent); font-size:12px } .program-workspace { display:grid; grid-template-columns:185px minmax(0,1fr); gap:25px } .workout-nav { border-right:1px solid var(--line); padding-right:20px } .workout-nav .list-toolbar { margin:0 0 20px } .workout-nav h2 { font-size:13px } .icon-button { padding:3px 8px } .workout-tab { display:flex; align-items:center; justify-content:start; gap:10px; width:100%; margin-bottom:8px; text-align:left; white-space:normal; padding:14px 10px; background:transparent; border-color:transparent; font-size:12px } .workout-tab span { font-size:10px; color:#929bad } .workout-tab.selected { background:#eae6fb; border-color:#e1daf8; color:var(--accent) } .workout-tab[draggable="true"] { position:relative; cursor:grab; } .workout-tab[draggable="true"]:active { cursor:grabbing; } .workout-tab.workout-dragging { opacity:.35; } .workout-drop-before::before, .workout-drop-after::after { content:""; position:absolute; left:0; right:0; height:3px; border-radius:3px; background:var(--accent); box-shadow:0 0 0 3px #eeebfa; pointer-events:none } .workout-drop-before::before { top:-6px; } .workout-drop-after::after { bottom:-6px; } .workout-nav>.text-button { font-size:11px; margin-top:15px } .workout-heading { display:flex; gap:15px; align-items:center; justify-content:space-between; margin-bottom:23px } .workout-heading input { font-size:20px; font-weight:650; background:transparent; border:0; padding:0; margin:0 } .workout-heading button { font-size:11px } .block-card { background:white; border:1px solid var(--line); border-radius:12px; margin-bottom:18px; box-shadow:0 2px 5px #20253603; overflow:hidden } .block-header { padding:14px 18px; display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #eeeff5 } .block-header strong { font-size:12px; color:#626b7d } .block-header button { font-size:10px; padding:5px 8px; border-color:transparent } .block-number { font-size:11px; color:#a1a8b7 } .drag-handle { cursor:grab; font-size:23px; color:#a5adbd; line-height:1 } .exercise-columns { display:flex; gap:24px; padding:22px } .exercise-editor { flex:1; min-width:0 } .exercise-heading { display:flex; align-items:end; gap:15px } .exercise-heading input { font-weight:600 } .camera-toggle { display:flex; align-items:center; gap:5px; padding-bottom:9px; cursor:pointer } .camera-toggle input { margin:0 } .camera-toggle span { font-size:18px } .video-input { margin:14px 0 20px; font-size:10px } .video-input input { font-size:12px; background:#fafbfe } .block-footer { background:#fafbfe; border-top:1px solid #eeeff5; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; gap:15px } .block-footer button { font-size:10px; padding:6px 8px } .rest-input { display:flex; align-items:center; gap:9px; font-size:10px } .rest-input input { width:72px; margin:0; font-size:12px; padding:6px 8px } .add-exercise-bar { display:flex; align-items:end; gap:12px; padding:20px; border:1px dashed #cdd2e1; border-radius:11px; margin:24px 0 } .add-exercise-bar label { font-size:10px } .add-exercise-bar button { font-size:11px } .error { background:#fff0f1; border:1px solid #f0cbd0; color:#a13d4c; padding:14px 18px; border-radius:9px; font-size:13px; margin:14px 0; line-height:1.5 } .error:empty { display:none } .undo-message { font-size:12px; background:#eeebfb; padding:5px 16px; border-radius:8px; margin-bottom:16px } .login-page { min-height:100vh; display:grid; place-items:center; background:#f0f1f7 } .login-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:45px; width:430px; box-shadow:0 16px 70px #25305909 } .login-card .brand-mark { margin-bottom:32px } .login-card h1 { font-size:28px } .login-card form { margin-top:28px } .login-card button { width:100%; margin-top:12px } .login-card .error ul { padding-left:15px } #blazor-error-ui { background:#fff1cc; bottom:0; box-shadow:0 -1px 2px #0003; display:none; left:0; padding:1rem; position:fixed; width:100%; z-index:1000 } .validation-message { color:#a13d4c } @media(max-width:1200px) { .sidebar { width:200px; padding:30px 14px } .main-content { padding:30px 25px } .program-workspace { grid-template-columns:145px minmax(0,1fr); gap:18px } .week-tabs button { padding:15px 18px } .editor-heading { align-items:start; flex-direction:column } .block-footer { flex-wrap:wrap } .block-header { flex-wrap:wrap } .exercise-columns { gap:15px } } @media(max-width:760px) { .app-shell { min-width:1040px } .sidebar { width:190px } .main-content { padding:25px } .login-card { width:min(430px,calc(100vw - 32px)); padding:30px } } .exercise-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .exercise-picker { min-width:0; } .exercise-picker select { width:100%; } .group-tabs { display:flex; flex-wrap:wrap; gap:8px; } .group-tabs .selected { color:var(--accent); background:#eeebfa; border-color:var(--accent); } .group-actions,.group-form { margin-top:16px; } .group-form { max-width:440px; } .exercise-editor textarea { width:100%; resize:vertical; min-height:60px; } .workout-summary { display:flex; gap:24px; align-items:center; margin-bottom:20px; } .workout-summary label { max-width:240px; } .library-exercise[draggable="true"] { cursor:grab; } .library-dragging { opacity:.35; } .group-tabs .group-drop-target { outline:3px solid var(--accent); outline-offset:3px; background:#eeebfa; } .library-drag-ghost { font-size:10px; overflow:hidden; overflow-wrap:anywhere; text-align:center; } .group-panel { position:sticky; top:0; z-index:5; } .exercise-combobox { position:relative; } .exercise-combobox input { padding-right:44px; } .picker-toggle { position:absolute; right:2px; top:2px; bottom:2px; border:0; background:transparent; padding:0 12px; } .exercise-dropdown { position:fixed; inset:auto; margin:0; box-sizing:border-box; padding:6px; border:1px solid var(--line); border-radius:10px; background:white; box-shadow:0 10px 32px #20253626; overflow:auto; overscroll-behavior:contain; } .exercise-option { display:flex; flex-direction:column; align-items:flex-start; width:100%; padding:10px 12px; border:0; background:transparent; white-space:normal; text-align:left; overflow-wrap:anywhere; } .exercise-option strong { font-size:13px; } .exercise-option span { font-size:11px; color:var(--muted); } .exercise-option.active,.exercise-option[aria-selected="true"] { background:#eeebfa; color:var(--accent); } .picker-hint,.picker-selection { font-size:11px; color:var(--muted); margin:8px; } .exercise-import { width:min(900px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; border:1px solid var(--line); border-radius:16px; padding:24px; color:var(--text); background:white; box-shadow:0 20px 80px #0003; } .exercise-import::backdrop { background:#14182780; } .exercise-import fieldset { min-width:0; } .import-table-scroll { overflow:auto; max-height:45vh; margin:18px 0; } .import-table { width:100%; border-collapse:collapse; table-layout:fixed; } .import-table th { text-align:left; background:#f5f4fa; position:sticky; top:0; z-index:1; padding:10px; } .import-table th:last-child { width:76px; } .import-table td { border:1px solid var(--line); padding:4px; } .import-table input { width:100%; min-width:0; border-color:transparent; } .exercise-import .actions { margin-top:20px; } .intensity-field { display:block; position:relative; width:100%; max-width:220px; } .intensity-select { width:100%; appearance:none; color:transparent; font-variant-numeric:tabular-nums; } .intensity-select option { color:var(--text, #202637); background:white; } .intensity-value { position:absolute; inset:0 34px 0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; pointer-events:none; color:var(--text, #202637); font-weight:400; font-variant-numeric:tabular-nums; } .intensity-hint { color:var(--muted); font-size:12px; white-space:nowrap; } .intensity-arrow { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }