:root{
    --bg:#14151a;
    --surface:#1b1d24;
    --surface-2:#242630;
    --line:#34363f;
    --text:#f3f1ec;
    --text-dim:#9a9da8;
    --steel:#8a8e98;
    --steel-dark:#3d4047;
    --accent:#e0823a;
    --accent-dim:#7a4827;
    --radius:10px;

    --c-shoulders:#e3b505;
    --c-chest:#235d96;
    --c-back:#2f8f4e;
    --c-legs:#c62b2b;
    --c-arms:#d9d9d9;
    --c-abs:#2b2c33;
    --c-cardio:#1d8a8a;
    --c-rest:transparent;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Vazirmatn',sans-serif;
    min-height:100vh;
    padding:28px 16px 60px;
  }

  .app{max-width:760px;margin:0 auto;}

  header{margin-bottom:26px;text-align:center;}
  header h1{
    font-size:28px;
    font-weight:800;
    margin:0 0 6px;
    letter-spacing:-0.3px;
  }
  header p{
    margin:0;
    color:var(--text-dim);
    font-size:14px;
    font-weight:500;
  }

  details.legend{
    margin:18px auto 0;
    max-width:520px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:4px 14px;
  }
  details.legend summary{
    cursor:pointer;
    padding:10px 2px;
    font-size:13px;
    font-weight:600;
    color:var(--text-dim);
    list-style:none;
  }
  details.legend summary::-webkit-details-marker{display:none;}
  .legend-grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    padding:4px 2px 14px;
  }
  .legend-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    color:var(--text-dim);
  }
  .legend-dot{
    width:13px;height:13px;border-radius:50%;
    border:1.5px solid var(--steel-dark);
    flex-shrink:0;
  }

  /* ---- barbell week strip ---- */
  .bar-wrap{
    position:relative;
    margin:32px 0 36px;
    padding:30px 6px 0;
  }
  .bar-rod{
    position:absolute;
    top:48px;
    right:18px;left:18px;
    height:7px;
    border-radius:4px;
    background:linear-gradient(180deg,#9da1aa,#5c6068 55%,#3a3d44);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.25);
  }
  .bar-row{
    position:relative;
    display:flex;
    justify-content:space-between;
    gap:6px;
  }
  .plate-btn{
    background:none;
    border:none;
    color:var(--text);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    cursor:pointer;
    padding:0;
    flex:1;
    font-family:inherit;
  }
  .plate-disc{
    width:46px;height:46px;
    border-radius:50%;
    border:3px solid var(--steel-dark);
    background:var(--plate-color,transparent);
    display:flex;align-items:center;justify-content:center;
    position:relative;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .plate-disc::after{
    content:'';
    width:12px;height:12px;
    border-radius:50%;
    background:var(--bg);
    border:2px solid var(--steel-dark);
  }
  .plate-btn:hover .plate-disc{transform:translateY(-2px);}
  .plate-btn.active .plate-disc{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-dim);
  }
  .plate-day{
    font-size:12px;
    font-weight:600;
    color:var(--text-dim);
  }
  .plate-btn.active .plate-day{color:var(--text);}
  .plate-time{
    font-size:11px;
    color:var(--steel);
    min-height:14px;
  }

  @media (max-width:560px){
    .bar-rod{display:none;}
    .bar-row{flex-wrap:wrap;row-gap:18px;}
    .plate-btn{flex:0 0 22%;}
  }

  /* ---- editor ---- */
  .editor{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:22px;
  }
  .editor-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:18px;
    gap:10px;
  }
  .editor-head h2{
    margin:0 0 4px;
    font-size:20px;
    font-weight:700;
  }
  .editor-head p{
    margin:0;
    font-size:12.5px;
    color:var(--text-dim);
  }
  .save-status{
    font-size:12px;
    color:var(--c-back);
    white-space:nowrap;
    opacity:0;
    transition:opacity .25s ease;
  }
  .save-status.show{opacity:1;}

  .field-label{
    display:block;
    font-size:12.5px;
    font-weight:600;
    color:var(--text-dim);
    margin:18px 0 8px;
  }

  input[type="time"]{
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:8px;
    padding:9px 12px;
    font-family:inherit;
    font-size:14px;
    width:140px;
  }
  input[type="time"]:focus, input[type="text"]:focus, textarea:focus{
    outline:2px solid var(--accent);
    outline-offset:1px;
  }

  .type-grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .type-chip{
    display:flex;
    align-items:center;
    gap:7px;
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:999px;
    padding:7px 14px 7px 10px;
    font-family:inherit;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:border-color .15s;
  }
  .type-chip .dot{
    width:11px;height:11px;border-radius:50%;
    border:1.5px solid var(--steel-dark);
    background:var(--dot-color,transparent);
    flex-shrink:0;
  }
  .type-chip.selected{
    border-color:var(--accent);
    background:#2a2018;
  }

  .exercise-row{
    display:flex;
    gap:8px;
    margin-bottom:8px;
    align-items:center;
  }
  .exercise-row input[type="text"]{
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:8px;
    padding:8px 10px;
    font-family:inherit;
    font-size:13.5px;
  }
  .exercise-row .ex-name{flex:1 1 auto;min-width:0;}
  .exercise-row .ex-sets{width:54px;text-align:center;}
  .exercise-row .ex-reps{width:64px;text-align:center;}
  .exercise-row .ex-remove{
    background:none;border:none;
    color:var(--text-dim);
    cursor:pointer;
    font-size:17px;
    width:28px;height:28px;
    border-radius:50%;
    flex-shrink:0;
  }
  .exercise-row .ex-remove:hover{color:var(--c-legs);background:var(--surface-2);}
  .ex-empty{
    color:var(--text-dim);
    font-size:13px;
    padding:6px 2px 12px;
  }
  .add-ex-btn{
    margin-top:4px;
    background:none;
    border:1px dashed var(--line);
    color:var(--text-dim);
    border-radius:8px;
    padding:8px 14px;
    font-family:inherit;
    font-size:13px;
    cursor:pointer;
    width:100%;
  }
  .add-ex-btn:hover{border-color:var(--accent);color:var(--accent);}

  textarea{
    width:100%;
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:8px;
    padding:10px 12px;
    font-family:inherit;
    font-size:13.5px;
    resize:vertical;
    min-height:64px;
  }

  .editor-foot{
    display:flex;
    justify-content:flex-end;
    margin-top:20px;
  }
  .reset-btn{
    background:none;
    border:none;
    color:var(--text-dim);
    font-family:inherit;
    font-size:12.5px;
    cursor:pointer;
    text-decoration:underline;
  }
  .reset-btn:hover{color:var(--c-legs);}

  .col-headers{
    display:flex;gap:8px;margin-bottom:6px;padding:0 2px;
  }
  .col-headers span{font-size:11px;color:var(--text-dim);}
  .col-headers .ch-name{flex:1;}
  .col-headers .ch-sets{width:54px;text-align:center;}
  .col-headers .ch-reps{width:64px;text-align:center;}
  .col-headers .ch-blank{width:28px;}