/* Traphaco-inspired screen theme. Last stylesheet; print and business state untouched. */
@media screen {
  :root {
    --brand:#087443; --brand-dark:#055c3b; --brand-soft:#e8f5ed;
    --line:#dce7e0; --muted:#58675f; --surface:#fff; --ink:#18382b;
    --text:#18382b; --header-height:68px; --sidebar-width:232px;
    --brand-gradient:linear-gradient(115deg,#075b3d 0%,#087443 55%,#08745e 100%);
    color:var(--ink); background:#f3f7f4; line-height:1.6;
  }
  body { background:radial-gradient(ellipse at 100% 0,#e4f2e8 0,transparent 45%),#f3f7f4; }
  header { min-height:var(--header-height); padding:10px 24px; background:#fff; border-bottom-color:var(--line); box-shadow:0 2px 10px #123b2510; }
  .brand { color:var(--brand); font-weight:800; }
  .brand small { color:var(--muted); }
  h1,h2,h3 { color:var(--ink); }
  h1 { font-size:clamp(26px,2.6vw,32px); letter-spacing:-.025em; line-height:1.25; margin:8px 0 12px; }
  h2 { font-size:20px; }
  .workspace main { padding-top:24px; }
  .card { border-color:var(--line); border-radius:12px; box-shadow:0 3px 12px #153f2608; padding:22px; }
  .hero { background:var(--brand-gradient); border:0; border-radius:16px; padding:28px 32px; box-shadow:0 8px 24px #075b3d18; }
  .hero h1,.hero h2,.hero p,.hero .eyebrow { color:#fff; opacity:1; }
  button,.button { background:var(--brand-gradient); border-radius:8px; font-weight:650; }
  button:hover,.button:hover { background:var(--brand-dark); }
  button.secondary,.button.secondary { color:#315342; border-color:#d4e2d9; background:#f1f5f2; }
  button.secondary:hover,.button.secondary:hover { background:#e5eee8; border-color:#c3d6c9; }
  button.danger,.button.danger,.profile-logout { background:#fff2f1; color:#a52c2c; border-color:#f0cfcb; }
  button.danger:hover,.button.danger:hover,.profile-logout:hover { background:#ffe4e1; }
  .badge { background:var(--brand-soft); color:#17613c; font-weight:650; }
  .right .badge { background:#e9f5ef; color:#176148; }
  .wrong .badge { background:#fee4e4; color:#a32424; }
  .stat,.score,.eyebrow { color:var(--brand); }
  .avatar { border-radius:50%; color:var(--brand); background:#e8f5ed; border-color:#cce4d5; }
  .profile-panel { border-radius:12px; box-shadow:0 12px 32px #153f2624; }
  .profile-menu>summary:hover,.profile-menu[open]>summary { background:#edf5ef; }
  .workspace #workspace-nav { padding:20px 14px; border-right-color:var(--line); background:linear-gradient(180deg,#fff 70%,#f1f8f3); }
  .workspace-menu a,.nav-ai { border-radius:9px; color:#345342; font-weight:600; }
  .workspace-menu a:hover,.nav-ai:hover { background:#edf5ef; color:#18382b; }
  .workspace-menu a[aria-current] { background:var(--brand-gradient); color:#fff; box-shadow:0 4px 12px #08744318; }
  .nav-label { color:#64786b; letter-spacing:.08em; margin-top:20px; }
  .workspace-note strong { color:var(--brand); }
  .workspace-menu>summary { color:#345342; }
  input,textarea,select { border-color:#b9cebf; border-radius:8px; color:var(--ink); }
  input:hover,textarea:hover,select:hover { border-color:#829d8c; }
  input[type=search] { background:#f6f9f6; }
  input:focus,textarea:focus,select:focus { background:#fff; }
  input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible,.scroll:focus-visible { outline-color:var(--brand); }
  input[type=radio],input[type=checkbox],progress,.learning-grid progress,#peer-progress { accent-color:var(--brand); }
  input[type=file]::file-selector-button { background:#eaf3ed; color:#315342; }
  label { color:#294c38; }
  th { background:#edf4ef; color:#345342; }
  tbody tr:hover { background:#f5faf6; }
  .scroll { border:1px solid var(--line); border-radius:12px; background:#fff; }
  .editor-savebar,.learning-save,.peer-actions { border-color:var(--line); border-radius:12px; box-shadow:0 -3px 16px #153f2610; }
  .import-panel>summary { color:var(--brand); }
  .timer { background:var(--brand-gradient); box-shadow:0 4px 14px #075b3d24; }
  .option { border-radius:10px; background:#f7faf8; border-color:var(--line); }
  .option:hover { border-color:var(--brand); background:#f0f8f2; }
  .option:has(input:checked) { background:#e8f5ed; border-color:var(--brand); }
  .question-grid .answered { background:var(--brand); color:#fff; }
  .result-summary { background:linear-gradient(120deg,#e8f5ed,#fff); }
  .lesson-link.selected { background:var(--brand); border-color:var(--brand); color:#fff; }
  .lesson-editor { background:#f5f9f6; border-color:var(--line); }
  .login-screen { background:radial-gradient(ellipse at 8% 20%,#d8efdf,transparent 50%),radial-gradient(ellipse at 100% 85%,#e1f2ee,transparent 45%),#f5f8f5; }
  .login-screen header { background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 8px #153f260a; }
  .login-layout { gap:44px; }
  .login-intro h1 { color:#08693f; font-weight:800; }
  .login-intro p,.login-points { color:#365944; }
  .login-intro .eyebrow { color:#087443; }
  .login-card { padding:30px; border-radius:16px; border-color:#d2e3d7; box-shadow:0 12px 36px #153f2610; border-top:4px solid var(--brand); }
  .login-card h2 { color:var(--ink); }
  .peer-group>summary { background:linear-gradient(110deg,#e7f4eb,#f4faf6); color:#28533c; }
  .peer-group>summary:before,.peer-group-progress,.peer-section-title { color:var(--brand); }
  .peer-criterion-number { background:var(--brand-soft); color:var(--brand); }
  .peer-score span { border-color:#b9cebf; color:#345342; }
  .peer-score input:checked+span { background:#e8f5ed; border-color:var(--brand); color:#17613c; }
  .peer-score input:focus-visible+span { outline-color:var(--brand); }
  .peer-note-toggle input,.peer-subject input[type=checkbox] { accent-color:var(--brand); }
  .peer-reviewer-list { border-color:#b9cebf; box-shadow:0 4px 16px #153f2614; }
  .peer-reviewer-option { color:var(--ink); }
  .peer-reviewer-option:hover,.peer-reviewer-option:focus-visible { background:var(--brand-soft); }
  #peer-reviewer-selected,.peer-kpis strong { color:var(--brand); }
  .peer-note-area,.peer-ai-panel { background:#f6faf7; border-color:var(--line); }
  .peer-result-note { background:#f0f8f3; border-left-color:var(--brand); }
  .peer-highlights { background:#edf7f0; }
  /* Catalog and reader: adjust the existing presentation, retain every handler. */
  .training-heading { background:var(--brand-gradient); color:#fff; padding:24px 28px; border-radius:16px; margin:8px 0 20px; gap:20px; box-shadow:0 8px 24px #075b3d14; }
  .training-heading h1,.training-heading p,.training-heading .eyebrow { color:#fff; }
  .training-heading .eyebrow { color:#d7eddf; }
  .training-heading h1 { margin-top:4px; }
  .training-heading p { font-size:14px; }
  .training-heading>button,.training-heading>a { background:#fff; border-color:#fff; color:#08693f; }
  .training-heading>button:hover,.training-heading>a:hover { background:#e8f5ed; }
  .training-stats { gap:0; margin:18px 0; border-bottom:1px solid var(--line); }
  .training-stats>div { background:transparent; border:0; border-radius:0; padding:0 20px 16px; flex-direction:row; align-items:baseline; gap:10px; }
  .training-stats>div:first-child { padding-left:0; }
  .training-stats strong { font-size:24px; }
  .training-stats span { font-size:13px; }
  .training-filters { padding:18px 20px; gap:14px; }
  .training-course { box-shadow:0 3px 12px #153f2608; }
  .training-course h2 { line-height:1.4; }
  .training-card-footer { gap:10px; }
  .training-card-footer .button { font-size:14px; padding:10px 14px; }
  .training-back { font-size:14px; margin:4px 0; text-decoration:none; }
  .training-back:hover { text-decoration:underline; }
  .training-reading .training-course-header { background:linear-gradient(110deg,#e1f0e6,#f3faf6); border:1px solid #d4e6da; padding:18px 22px; margin:12px 0; border-radius:12px; box-shadow:none; }
  .training-course-header h1,.training-course-header p,.training-course-header .eyebrow { color:var(--ink); }
  .training-course-header h1 { font-size:clamp(24px,2.3vw,30px); }
  .training-course-header>a { background:#fff; border-color:#cce0d3; color:var(--brand); }
  .training-about { margin-bottom:14px; padding-bottom:12px; }
  .training-reader { height:clamp(460px,calc(100dvh - var(--header-height) - 248px),820px); border-color:#d4e3d9; box-shadow:0 4px 18px #153f2608; }
  .training-file-nav { background:linear-gradient(180deg,#f3f9f5,#f9fbfa); border-right-color:var(--line); }
  .training-nav-heading { padding:15px 14px; }
  .training-reading .training-file { color:var(--ink); }
  .training-reading .training-file:hover { background:#eaf3ed; }
  .training-reading .training-file[aria-pressed=true] { background:#e2f1e7; border-color:#aed1bb; color:#095c38; }
  .training-file-icon { background:#e6f0e9; color:#42624d; }
  .training-file-label small { font-size:12px; }
  .training-reader-toolbar { padding:12px 16px; }
  .training-reader-toolbar .button,.training-reader-toolbar button { min-height:40px; }
  .training-reader-content { background:#edf3ef; }
  .training-mobile-picker { color:#42624d; }
  .training-mobile-picker select { font-size:16px; }
  .training-editor .card { border-top:3px solid #c4dfcd; }
  .training-editor-actions { padding-top:16px; border-top:1px solid var(--line); }
  .training-attachments { margin-top:20px; }
  .training-reader:fullscreen { height:100dvh; min-height:0; }
}
@media screen and (max-width:1100px) { :root { --sidebar-width:216px; } }
@media screen and (max-width:760px) {
  :root { --header-height:64px; --sidebar-width:0px; }
  header { padding:10px 16px; }
  .workspace #workspace-nav { padding:0 16px; background:#fff; }
  .workspace main { padding:20px 16px 36px; }
  h1 { font-size:26px; }
  .card { padding:20px; }
  .hero { padding:24px; }
  input,select,textarea { font-size:16px; }
  .login-layout { gap:18px; }
  .login-card { padding:24px; }
  .login-intro h1 { font-size:30px; }
  .training-heading { padding:22px 20px; }
  .training-heading h1 { font-size:26px; }
  .training-stats>div { padding:0 8px 14px; flex-direction:column; gap:4px; }
  .training-stats span { font-size:12px; }
  .training-filters { padding:18px; }
  .training-reading .training-course-header { padding:16px; }
  .training-reader { height:calc(100dvh - var(--header-height) - 48px); min-height:500px; }
  .training-reader-toolbar .button,.training-reader-toolbar button { min-height:44px; }
  .training-reader:fullscreen { min-height:0; height:100dvh; }
}