/* Uploads and mobile workshop controls */
#mechanicApp .attachment-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto auto auto;gap:9px;align-items:center;margin:16px 0}#mechanicApp .attachment-form input,#mechanicApp .attachment-form select{min-width:0;padding:10px;border:1px solid #4a5a67;border-radius:8px;background:#18222b;color:#e1e7eb}.visibility-check{display:flex!important;align-items:center;gap:7px;color:#c7d0d6!important;font-size:11px!important}.visibility-check input{width:auto!important;margin:0!important}.attachment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.attachment-grid article{display:grid;gap:7px;overflow:hidden;padding:10px;border:1px solid #465664;border-radius:10px;background:#202c37}.attachment-grid img,.attachment-document{width:100%;aspect-ratio:4/3;border-radius:7px;object-fit:cover;background:#111820}.attachment-document{display:grid;place-items:center;color:#bfd673;font-weight:900}.attachment-grid small{color:#9eadb7;font-size:8px}.attachment-grid button{justify-self:start;border:0;background:transparent;color:#ed9295;cursor:pointer}.btn:disabled{cursor:wait;opacity:.6}
@media(max-width:760px){#mechanicApp .topbar{align-items:flex-start;padding:12px 3vw}#mechanicApp .brand-sub{display:none}#mechanicApp .top-actions{justify-content:flex-end}#mechanicApp .top-actions .btn{min-height:44px;padding:10px}#mechanicApp .workspace-head{align-items:flex-start;flex-direction:column}#mechanicApp .workspace-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}#mechanicApp .workspace-actions select,#mechanicApp .workspace-actions button{min-height:46px;width:100%}#mechanicApp .quick-form,#mechanicApp .parts-form,#mechanicApp .attachment-form{grid-template-columns:1fr}#mechanicApp .attachment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#mechanicApp input,#mechanicApp textarea,#mechanicApp select{font-size:16px!important}#mechanicApp .workspace-card{padding:17px}#mechanicApp .repair-task{grid-template-columns:auto 1fr auto}#mechanicApp .job-info-grid{grid-template-columns:1fr}#mechanicApp .job-info-grid .wide-info{grid-column:auto}}
@media(max-width:460px){#mechanicApp .attachment-grid{grid-template-columns:1fr}#mechanicApp .workspace-actions{grid-template-columns:1fr}#mechanicApp .top-actions #resumeBtn{display:none}.diagnostic{padding:0}.diag-card{min-height:100vh;border-radius:0;padding:20px 16px}.public-footer{align-items:flex-start}}
/* Softer dark palette designed for long workshop sessions. */
#mechanicApp {
  --bg: #111820;
  --panel: #1a242e;
  --panel2: #24313d;
  --line: #42515f;
  --text: #e3e9ed;
  --muted: #abb7c0;
  --accent: #bfd673;
  --danger: #ed777b;
  --warn: #e5b75f;
  --ok: #72c596;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(1000px 650px at 72% -12%, rgba(191,214,115,.065), transparent 62%), var(--bg);
}

#mechanicApp .topbar { background: rgba(17,24,32,.94); border-color: #354451; }
#mechanicApp h1, #mechanicApp h2, #mechanicApp h3, #mechanicApp h4 { color: #e8edf0; }
#mechanicApp p, #mechanicApp li { color: #c3cdd4; }
#mechanicApp .muted, #mechanicApp .step-desc, #mechanicApp .hero-copy, #mechanicApp .card-sub { color: #abb8c1; }
#mechanicApp .eyebrow { color: #bfd673; }
#mechanicApp .btn.primary, #mechanicApp .step-number, #mechanicApp .choice-icon { background: #bfd673; border-color: #bfd673; color: #152018; }
#mechanicApp .btn.ghost { color: #dce3e7; border-color: #4a5a68; }

#mechanicApp .hero-panel,
#mechanicApp .summary-card,
#mechanicApp .step-card,
#mechanicApp .diag-card,
#mechanicApp .workspace-card,
#mechanicApp .inventory-section,
#mechanicApp .active-job-card {
  border-color: #40505e;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), #1a242e;
  box-shadow: 0 14px 38px rgba(0,0,0,.16);
}

#mechanicApp .summary-grid div,
#mechanicApp .detail-grid > div,
#mechanicApp .step-tool,
#mechanicApp .work-item,
#mechanicApp .job-tool-row,
#mechanicApp .notes-list article { background: #202c37; border-color: #465664; }

#mechanicApp .detail-grid p, #mechanicApp .procedure, #mechanicApp .manual-note { color: #cbd4da; line-height: 1.8; }
#mechanicApp .chip { color: #d0d8de; border-color: #4b5b68; }
#mechanicApp .workflow-command { border-color: #5b6940; background: linear-gradient(120deg, #263024, #1b2722); }
#mechanicApp .workflow-filters button { color: #b6c1c9; border-color: #4a5a67; }
#mechanicApp .workflow-filters button.active { color: #182118; border-color: #bfd673; background: #bfd673; }
#mechanicApp .project-video-library { border-color: #465765; background: #19232c; }
#mechanicApp .video-playlist button { border-color: #465663; background: #222e39; }
#mechanicApp .video-playlist button.active { border-color: #a7bd65; background: #2c3628; }

#mechanicApp input, #mechanicApp textarea, #mechanicApp select { caret-color: #bfd673; }
#mechanicApp .form-grid input,
#mechanicApp .form-grid textarea,
#mechanicApp .form-grid select,
#mechanicApp .quick-form input,
#mechanicApp .note-form textarea,
#mechanicApp .workspace-actions select { color: #e1e7eb; border-color: #4a5a67; background: #18222b; }
#mechanicApp input::placeholder, #mechanicApp textarea::placeholder { color: #7f8d98; }
#mechanicApp .badge.danger { color: #f1a0a3; }
#mechanicApp details { border-color: #445461; }
#mechanicApp summary { color: #dfe6ea; }
#mechanicApp a { color: #c8dc82; }
#mechanicApp .step-card.is-done { background: #171f27; opacity: .72; }
#mechanicApp .step-card.is-done .step-title { color: #a5b0b8; }
#mechanicApp .progress { background: #34424e; }
#mechanicApp .progress div, #mechanicApp .job-progress-panel i { background: #bfd673; }

#mechanicApp .repair-info-editor { margin: 18px 0; }
#mechanicApp .repair-info-editor textarea { min-height: 92px; }
#mechanicApp .repair-plan-card { min-width: 0; }
#mechanicApp .step-entry { margin: 18px 0; padding: 0; border: 1px solid #4a5a67; border-radius: 12px; background: #18222b; }
#mechanicApp .step-entry > summary { padding: 15px 18px; color: #dfe6ea; cursor: pointer; }
#mechanicApp .repair-step-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 4px 18px 18px; }
#mechanicApp .repair-step-form label { display: grid; gap: 7px; color: #c7d0d6; font-size: .78rem; font-weight: 700; letter-spacing: .03em; }
#mechanicApp .repair-step-form input, #mechanicApp .repair-step-form textarea, #mechanicApp .repair-step-form select { width: 100%; box-sizing: border-box; padding: 11px 12px; color: #e1e7eb; border: 1px solid #4a5a67; border-radius: 8px; background: #131c24; font: inherit; }
#mechanicApp .repair-step-form textarea { min-height: 84px; resize: vertical; }
#mechanicApp .repair-step-form .wide { grid-column: 1/-1; }
#mechanicApp .repair-step-list { display: grid; gap: 10px; }
#mechanicApp .repair-task { align-items: flex-start; padding: 16px; }
#mechanicApp .repair-task-copy { display: grid; flex: 1; gap: 7px; min-width: 0; }
#mechanicApp .repair-task-copy > small { color: #bfd673; font-weight: 800; letter-spacing: .06em; }
#mechanicApp .repair-task-copy p { margin: 0; color: #c7d0d6; line-height: 1.55; white-space: pre-line; }
#mechanicApp .repair-task-copy .task-warning { padding: 10px 12px; border-left: 3px solid #e5b75f; background: rgba(229,183,95,.08); }
#mechanicApp .task-resources { display: flex; flex-wrap: wrap; gap: 8px; }
#mechanicApp .task-resources a { padding: 7px 9px; border: 1px solid #4a5a67; border-radius: 7px; text-decoration: none; font-size: .8rem; }
#mechanicApp .task-reference-image { display: block; overflow: hidden; max-width: 620px; border: 1px solid #4a5a67; border-radius: 10px; background: #eef1f2; }
#mechanicApp .task-reference-image img { display: block; width: 100%; max-height: 390px; object-fit: contain; }
@media (max-width: 720px) { #mechanicApp .repair-step-form { grid-template-columns: 1fr; } #mechanicApp .repair-step-form .wide { grid-column: auto; } }