:root{
    --primary:#c8391f;
    --primary-dark:#8f2415;
    --primary-light:#fdece5;
    --accent:#e07b29;
    --accent-light:#fdead2;
    --bg:#f8f6f4;
    --card:#ffffff;
    --text:#2b2420;
    --text-muted:#7a6f68;
    --border:#ece4df;
    --pain:#c8391f;
    --effort:#e07b29;
    --difficulty:#3f7f9c;
    --radius-lg:22px;
    --radius-md:14px;
    --radius-sm:9px;
    --shadow:0 10px 30px -14px rgba(140,36,21,.18);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.logo,.brandfont{font-family:'Poppins',sans-serif;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;cursor:pointer;border:none;}
  .app-shell{
    max-width:1180px;
    margin:0 auto;
    min-height:100vh;
    background:var(--bg);
    position:relative;
  }
  body{animation:fadeIn .35s ease;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .login-error{
    display:none;background:#fbe8e6;color:#a3291c;border:1px solid #f2c4bd;
    border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;font-weight:600;
    margin-bottom:16px;text-align:center;
  }
  .login-error.show{display:block;}

  /* ---------- shared bits ---------- */
  .pill{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--primary-light);color:var(--primary-dark);
    font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:100px;
  }
  .pill.gold{background:var(--accent-light);color:#9a4a15;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 26px;border-radius:100px;font-weight:600;font-size:15px;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-primary{background:var(--primary);color:#fff;box-shadow:0 10px 22px -10px rgba(200,57,31,.55);}
  .btn-primary:hover{transform:translateY(-1px);background:var(--primary-dark);}
  .btn-ghost{background:transparent;color:var(--primary);border:1.5px solid var(--primary-light);}
  .btn-ghost:hover{background:var(--primary-light);}
  .btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 22px -10px rgba(224,123,41,.6);}
  .btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important;}

  /* ---------- LOGIN ---------- */
  #screen-login{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:
      linear-gradient(160deg, rgba(143,36,21,.85), rgba(224,123,41,.55)),
      url('images.jpeg') center/cover no-repeat;
    padding:24px;
  }
  .login-card{
    width:100%;max-width:400px;background:var(--card);border-radius:var(--radius-lg);
    box-shadow:var(--shadow);padding:40px 36px;border:1px solid var(--border);
  }
  .brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:26px;}
  .brand-badge{
    width:42px;height:42px;border-radius:12px;background:var(--primary);
    display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
  }
  .brand-name{font-weight:700;font-size:20px;color:var(--primary-dark);letter-spacing:.2px;}
  .login-card h1{font-size:21px;text-align:center;margin-bottom:4px;color:var(--text);}
  .login-sub{text-align:center;color:var(--text-muted);font-size:14px;margin-bottom:28px;}
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:6px;}
  .field input{
    width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
    font-size:14.5px;background:#fbfcfb;transition:border .15s;
  }
  .field input:focus{outline:none;border-color:var(--primary);background:#fff;}
  .login-card .btn-primary{width:100%;margin-top:8px;}
  .demo-note{
    margin-top:20px;background:var(--primary-light);border-radius:var(--radius-sm);
    padding:10px 14px;font-size:12.5px;color:var(--primary-dark);text-align:center;line-height:1.5;
  }
  .cert-strip{display:flex;justify-content:center;gap:8px;margin-top:22px;flex-wrap:wrap;}

  /* ---------- WELCOME ---------- */
  #screen-welcome{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding:24px;text-align:center;color:#fff;
  }
  .welcome-inner{max-width:480px;}
  .welcome-icon{
    width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.14);
    display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  }
  #screen-welcome h1{font-size:28px;margin-bottom:10px;}
  #screen-welcome p{opacity:.85;font-size:15px;line-height:1.6;margin-bottom:28px;}
  .welcome-stats{display:flex;gap:12px;justify-content:center;margin-bottom:32px;flex-wrap:wrap;}
  .wstat{background:rgba(255,255,255,.1);border-radius:var(--radius-md);padding:14px 20px;min-width:110px;}
  .wstat .num{font-family:'Poppins';font-size:22px;font-weight:700;}
  .wstat .lbl{font-size:12px;opacity:.8;margin-top:2px;}
  #screen-welcome .btn-accent{padding:14px 32px;}

  /* ---------- TOP NAV (programs/detail/dashboard) ---------- */
  .topnav{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;background:var(--card);border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:20;
  }
  .topnav-left{display:flex;align-items:center;gap:22px;}
  .navlinks{display:flex;gap:4px;}
  .navlink{
    padding:9px 16px;border-radius:100px;font-size:14px;font-weight:600;color:var(--text-muted);
    background:transparent;transition:all .15s;
  }
  .navlink.active,.navlink:hover{background:var(--primary-light);color:var(--primary-dark);}
  .topnav-right{display:flex;align-items:center;gap:14px;}
  .avatar{
    width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:'Poppins';
  }
  .logout-link{font-size:13px;color:var(--text-muted);font-weight:600;}
  .logout-link:hover{color:var(--pain);}

  .page{padding:34px 28px 70px;}
  .page-head{margin-bottom:26px;}
  .page-head h1{font-size:25px;margin-bottom:6px;}
  .page-head p{color:var(--text-muted);font-size:14.5px;}

  /* ---------- PROGRAM GRID ---------- */
  .program-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;
  }
  .program-card{
    background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border);
    padding:22px;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease;
    display:flex;flex-direction:column;gap:14px;
  }
  .program-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -14px rgba(140,36,21,.22);}
  .program-icon{
    width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;
  }
  .program-card h3{font-size:16.5px;}
  .program-meta{display:flex;gap:14px;font-size:12.5px;color:var(--text-muted);}
  .program-meta span{display:flex;align-items:center;gap:5px;}
  .progress-track{height:6px;border-radius:100px;background:var(--primary-light);overflow:hidden;}
  .progress-fill{height:100%;background:var(--primary);border-radius:100px;}
  .progress-label{font-size:12px;color:var(--text-muted);}
  .card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
  .start-btn{
    background:var(--primary-light);color:var(--primary-dark);font-weight:600;font-size:13px;
    padding:9px 16px;border-radius:100px;
  }
  .program-card:hover .start-btn{background:var(--primary);color:#fff;}

  /* ---------- DETAIL / VIDEO ---------- */
  .detail-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;}
  @media (max-width:820px){.detail-grid{grid-template-columns:1fr;}}
  .back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:13.5px;font-weight:600;margin-bottom:18px;}
  .back-link:hover{color:var(--primary);}
  .video-box{
    background:linear-gradient(135deg,var(--primary-dark),var(--primary));
    border-radius:var(--radius-lg);aspect-ratio:16/9;position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
  }
  .video-box::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0, transparent 45%),
                      radial-gradient(circle at 80% 75%, rgba(255,255,255,.08) 0, transparent 40%);
  }
  .play-btn{
    width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--primary);
    display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.25);
    transition:transform .15s;z-index:2;
  }
  .play-btn:hover{transform:scale(1.06);}
  .video-progress{
    position:absolute;bottom:0;left:0;height:4px;background:var(--accent);width:0%;transition:width .1s linear;
  }
  .video-title-overlay{
    position:absolute;top:16px;left:18px;color:#fff;font-size:13px;background:rgba(0,0,0,.25);
    padding:5px 12px;border-radius:100px;font-weight:600;z-index:2;
  }
  .video-caption{display:flex;justify-content:space-between;align-items:center;margin-top:16px;flex-wrap:wrap;gap:10px;}
  .video-caption h2{font-size:19px;}
  .video-info-header{margin-bottom:16px;}
  .video-info-header h2{font-size:19px;}
  .video-actions{display:flex;justify-content:flex-start;margin-top:16px;}
  .exercise-list{
    background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border);
    padding:18px;box-shadow:var(--shadow);
  }
  .exercise-list h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:12px;}
  .ex-item{
    display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:var(--radius-sm);
    cursor:pointer;transition:background .15s;
  }
  .ex-item:hover{background:var(--primary-light);}
  .ex-item.current{background:var(--primary-light);}
  .ex-num{
    width:26px;height:26px;border-radius:50%;background:var(--border);color:var(--text-muted);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;
  }
  .ex-item.done .ex-num{background:var(--primary);color:#fff;}
  .ex-name{font-size:13.5px;font-weight:600;flex:1;}
  .ex-dur{font-size:11.5px;color:var(--text-muted);}

  /* ---------- FEEDBACK PANEL ---------- */
  .feedback-panel{
    margin-top:26px;background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border);
    padding:28px;box-shadow:var(--shadow);opacity:0;max-height:0;overflow:hidden;transition:all .4s ease;
  }
  .feedback-panel.visible{opacity:1;max-height:2000px;padding:28px;}
  .feedback-panel h3{font-size:18px;margin-bottom:4px;}
  .feedback-panel > p{color:var(--text-muted);font-size:13.5px;margin-bottom:24px;}
  .slider-group{margin-bottom:24px;}
  .slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
  .slider-head label{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;}
  .slider-dot{width:10px;height:10px;border-radius:50%;}
  .slider-value{
    font-family:'Poppins';font-weight:700;font-size:14px;min-width:26px;text-align:center;
    padding:2px 9px;border-radius:8px;color:#fff;
  }
  input[type=range]{
    -webkit-appearance:none;width:100%;height:6px;border-radius:100px;background:var(--border);outline:none;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;
    border:4px solid var(--primary);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2);margin-top:-1px;
  }
  input[type=range]::-moz-range-thumb{
    width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--primary);cursor:pointer;
  }
  .scale-caption{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:4px;}
  .thumbs-row{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
  .thumbs-row > label{font-weight:600;font-size:14px;}
  .thumb-btn{
    width:46px;height:46px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border);
    display:flex;align-items:center;justify-content:center;transition:all .15s;color:var(--text-muted);
  }
  .thumb-btn.selected.up{background:#e4f5ea;border-color:#4a9e6d;color:#2f7a4c;}
  .thumb-btn.selected.down{background:#fbe8e6;border-color:var(--pain);color:var(--pain);}
  .field-textarea label{font-weight:600;font-size:14px;display:block;margin-bottom:8px;}
  .field-textarea textarea{
    width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;
    font-family:inherit;font-size:14px;resize:vertical;min-height:80px;background:#fbfcfb;
  }
  .field-textarea textarea:focus{outline:none;border-color:var(--primary);background:#fff;}
  .field-textarea{margin-bottom:22px;}
  .send-row{display:flex;justify-content:flex-end;gap:10px;}
  .toast{
    position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--primary-dark);color:#fff;padding:14px 24px;border-radius:100px;font-size:14px;font-weight:600;
    box-shadow:0 14px 30px -10px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:all .3s ease;z-index:100;
    display:flex;align-items:center;gap:10px;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  /* ---------- DASHBOARD ---------- */
  .toggle-row{display:flex;align-items:center;gap:12px;margin-bottom:26px;flex-wrap:wrap;}
  .switch{
    position:relative;width:46px;height:26px;background:var(--border);border-radius:100px;transition:background .2s;flex-shrink:0;
  }
  .switch.on{background:var(--primary);}
  .switch::after{
    content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
    transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3);
  }
  .switch.on::after{transform:translateX(20px);}
  .toggle-label{font-weight:600;font-size:14.5px;}
  select.patient-select{
    padding:9px 14px;border-radius:100px;border:1.5px solid var(--border);font-size:13.5px;font-weight:600;
    color:var(--primary-dark);background:var(--primary-light);
  }
  .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:28px;}
  .stat-card{
    background:var(--card);border-radius:var(--radius-md);border:1px solid var(--border);padding:18px 20px;box-shadow:var(--shadow);
  }
  .stat-card .stat-label{font-size:12.5px;color:var(--text-muted);font-weight:600;display:flex;align-items:center;gap:7px;margin-bottom:8px;}
  .stat-card .stat-num{font-family:'Poppins';font-size:26px;font-weight:700;}
  .dash-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-bottom:24px;}
  @media (max-width:900px){.dash-grid{grid-template-columns:1fr;}}
  .panel{background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border);padding:24px;box-shadow:var(--shadow);}
  .panel h3{font-size:15.5px;margin-bottom:18px;}
  .bar-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
  .bar-row .bar-label{width:150px;font-size:13px;font-weight:600;flex-shrink:0;}
  .bar-track{flex:1;height:10px;background:var(--bg);border-radius:100px;overflow:hidden;}
  .bar-fill{height:100%;border-radius:100px;width:0;transition:width .7s cubic-bezier(.4,0,.2,1);}
  .bar-val{width:26px;font-size:12.5px;font-weight:700;text-align:right;flex-shrink:0;}
  .metric-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}
  .metric-card{
    background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);
    padding:16px 18px;transition:transform .15s ease, box-shadow .15s ease;
  }
  .metric-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(140,36,21,.2);}
  .metric-card h4{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:14px;}
  .metric-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .metric-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-muted);background:var(--card);padding:3px 9px;border-radius:100px;}
  .metric-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  .metric-row:last-child{margin-bottom:0;}
  .metric-label{width:82px;font-size:11.5px;color:var(--text-muted);font-weight:600;flex-shrink:0;}
  .legend{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
  .legend-item{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);font-weight:600;}
  .legend-dot{width:9px;height:9px;border-radius:50%;}
  .thumbs-summary{display:flex;align-items:center;gap:18px;margin-top:6px;}
  .thumbs-summary .tsum{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;}
  .comment-list{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow-y:auto;padding-right:4px;}
  .comment-card{background:var(--bg);border-radius:var(--radius-md);padding:14px 16px;border:1px solid var(--border);}
  .comment-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
  .comment-top .who{font-weight:700;font-size:13px;}
  .comment-top .when{font-size:11.5px;color:var(--text-muted);}
  .comment-text{font-size:13.5px;color:var(--text);line-height:1.5;}
  .comment-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
  .ctag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;}

  .menu-hero{text-align:center;margin-bottom:36px;}
  .menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;max-width:720px;margin:0 auto;}
  .menu-card{
    background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border);
    box-shadow:var(--shadow);padding:36px 26px;text-align:center;cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .menu-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -14px rgba(140,36,21,.22);}
  .menu-card .menu-icon{
    width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;
    color:#fff;margin:0 auto 18px;background:var(--primary);
  }
  .menu-card h3{font-size:18px;margin-bottom:8px;}
  .menu-card p{font-size:13.5px;color:var(--text-muted);line-height:1.5;}
  .pill.team{background:#e7f0f5;color:#2c5f78;}

  /* ---------- TASK-PROGRESSION (Kreuzband-Reha) ---------- */
  .kb-hint{
    background:var(--primary-light);color:var(--primary-dark);border-radius:var(--radius-md);
    padding:14px 18px;font-size:13.5px;line-height:1.55;margin-bottom:24px;
  }
  .kb-overview{
    display:flex;align-items:center;gap:20px;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px 24px;margin-bottom:24px;flex-wrap:wrap;
  }
  .kb-overview-track{flex:1;min-width:200px;}
  .kb-overview-track .progress-track{height:10px;}
  .kb-overview-labels{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-muted);margin-top:6px;font-weight:600;}
  .kb-reset-link{font-size:12.5px;color:var(--text-muted);font-weight:600;flex-shrink:0;}
  .kb-reset-link:hover{color:var(--pain);}

  .task-stepper{display:flex;flex-direction:column;gap:14px;}
  .task-card{
    background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-lg);
    padding:20px 24px;box-shadow:var(--shadow);transition:all .2s ease;
  }
  .task-card.locked{opacity:.55;background:var(--bg);box-shadow:none;}
  .task-card.completed{border-color:#bfe3cc;background:#f6fbf8;}
  .task-card.current{border-color:var(--primary);box-shadow:0 12px 28px -14px rgba(140,36,21,.28);}
  .task-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .task-num{
    width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-family:'Poppins';font-size:14px;flex-shrink:0;background:var(--border);color:var(--text-muted);
  }
  .task-card.current .task-num{background:var(--primary);color:#fff;}
  .task-card.completed .task-num{background:#4a9e6d;color:#fff;}
  .task-title{flex:1;min-width:160px;}
  .task-title h4{font-size:15.5px;}
  .task-title .task-week{font-size:12px;color:var(--text-muted);margin-top:2px;}
  .task-status-pill{font-size:11px;font-weight:700;padding:5px 12px;border-radius:100px;flex-shrink:0;}
  .task-status-pill.locked{background:var(--border);color:var(--text-muted);}
  .task-status-pill.current{background:var(--primary-light);color:var(--primary-dark);}
  .task-status-pill.completed{background:#e4f5ea;color:#2f7a4c;}
  .task-body{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
  .task-exercise{font-size:13.5px;margin-bottom:14px;}
  .task-exercise b{font-weight:700;}
  .task-criteria{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px;}
  .criteria-box{background:var(--bg);border-radius:var(--radius-sm);padding:12px 14px;}
  .criteria-box .clabel{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;}
  .criteria-box .cval{font-size:13.5px;font-weight:600;}
  .criteria-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:13.5px;cursor:pointer;}
  .criteria-check input{margin-top:3px;width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0;}
  .task-locked-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);margin-top:10px;}

  ::-webkit-scrollbar{width:6px;}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}