@media screen {
  header {height:94px}
  header img {height:80px}
  .nav {position:sticky;inset:auto;top:0;left:auto;transform:none;margin:0 auto;width:100%;max-width:none;border-radius:0;border-width:0 0 1px;display:flex;flex-wrap:nowrap;justify-content:center;padding:9px 24px;gap:6px;height:auto;background:#101114f5;backdrop-filter:blur(14px);z-index:10}
  .nav button {flex:0 1 190px;border-radius:8px;font-size:13px;min-height:44px;padding:12px 18px}
  main {padding:30px 28px 50px}
  .pageTop {margin-bottom:24px}
  .jobTabs {display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid #2b2c34}
  .jobTabs button {background:transparent;border:1px solid transparent;color:#adb0bc;padding:10px 15px;font-size:12px}
  .jobTabs button.selected {color:#fff;background:#3b1722;border-color:#8d2940}
  .jobTabs span {display:inline-block;margin-left:7px;border-radius:20px;padding:2px 7px;background:#ffffff0c;color:#c1c3ce;font-size:10px}
  .filterbar {margin-bottom:20px}
  .filterbar select {display:none}
  .filterbar input {width:100%}
  .jobsTable td {padding-top:20px;padding-bottom:20px}
  .workToolbar {padding:14px 18px}
  .workToolbar .actions {align-items:center}
  .workToolbar #new {margin-left:auto}
  .workSections {display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}
  .workSections a {padding:9px 15px;border:1px solid #33343c;border-radius:24px;text-decoration:none;color:#c9cbd3;font-size:12px;background:#15161b}
  .workSections a:hover {border-color:#c82448;color:#fff}
  #workView>.card {scroll-margin-top:85px}
  #workView>h2 {font-size:20px;margin-bottom:16px}
  #status:empty {display:none}
  .backupActions {margin-top:12px}
  @media(max-width:700px) {
    header {height:76px}
    header img {height:67px;width:174px}
    .nav {justify-content:flex-start;overflow-x:auto;padding:7px 10px;gap:5px;scrollbar-width:thin;grid-template-columns:none;box-shadow:0 8px 20px #0003}
    .nav button {flex:none;min-width:90px;padding:10px 12px;min-height:42px;font-size:11px}
    main {padding:24px 14px 35px}
    .jobTabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
    .jobTabs button {text-align:left;padding:10px 12px}
    .jobTabs span {float:right}
    .tableWrap {overflow:visible}
    .jobsTable,.jobsTable tbody {display:block;width:100%;white-space:normal}
    .jobsTable thead {display:none}
    .jobsTable tr {display:grid;grid-template-columns:1fr 1fr;gap:12px 15px;background:#1a1b20;border:1px solid #33343c;border-radius:12px;padding:16px;margin:0 0 12px}
    .jobsTable td {display:block;border:0;padding:0;font-size:12px;overflow-wrap:anywhere}
    .jobsTable td::before {content:attr(data-label);display:block;font-size:10px;color:#9295a4;margin-bottom:6px}
    .jobsTable td:first-child {grid-column:1/-1}
    .jobsTable td:first-child strong {font-size:17px}
    .jobsTable td:last-child {grid-column:1/-1;padding-top:6px}
    .jobsTable td:last-child::before {display:none}
    .jobsTable td:last-child button {width:100%;min-height:44px}
    .workToolbar .actions {display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
    .workToolbar #new {margin:0}
    .workToolbar button {padding:10px 7px;font-size:11px}
    .workSections {gap:6px}
    .workSections a {padding:8px 12px;font-size:11px}
    #workView>.card {scroll-margin-top:78px}
    .totalbar {bottom:10px}
    .cardHead #newTop {width:100%;margin-top:6px}
  }
}
@media print {.workSections,.jobTabs {display:none!important}}
@media screen and (max-width:700px) {
  html,body {max-width:100%;overflow-x:clip}
  .nav {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:5px;padding:7px 10px;height:auto}
  .nav button {min-width:0;width:100%;white-space:normal;line-height:1.3;padding:9px 4px;font-size:11px;min-height:42px}
  input,select,textarea {font-size:16px;max-width:100%;min-width:0;min-height:46px}
  input[type=checkbox] {min-height:21px;width:21px;flex:none}
  textarea {min-height:100px}
  .grid {grid-template-columns:minmax(0,1fr)}
  .grid>div,.card,.pageTop>div {min-width:0}
  .pageTop {flex-wrap:wrap;gap:12px}
  .modeBadge {max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
  button {min-height:44px;touch-action:manipulation}
  .service {display:grid;grid-template-columns:24px minmax(0,1fr) 86px;gap:10px}
  .service span {font-size:13px;overflow-wrap:anywhere;line-height:1.5}
  .service input[type=number] {width:86px;min-width:0;padding:9px 6px}
  .service button {grid-column:3;min-height:36px}
  .check {align-items:flex-start;gap:12px;padding:5px 0}
  .check label {line-height:1.6;font-size:13px}
  .actions {gap:8px}
  .actions button {max-width:100%;white-space:normal;overflow-wrap:anywhere}
  #paymentPanel .actions {display:grid;grid-template-columns:1fr}
  #paymentPanel button {width:100%;line-height:1.5;padding:12px}
  #completionPanel .actions {display:grid;grid-template-columns:1fr}
  .totalbar {padding:12px 14px;gap:10px;bottom:max(10px,env(safe-area-inset-bottom))}
  .totalbar strong {font-size:22px}
  .totalbar button {font-size:13px;min-height:46px;padding:12px 18px}
  #workView {padding-bottom:20px}
  #workView>.card {scroll-margin-top:125px}
  .calendarDay {min-height:64px}
  .agendaTools h3 {min-width:0;flex:1}
  .agendaTools #monthToday {flex-basis:100%}
  .appointment {align-items:flex-start;gap:12px}
  .appointment>div:nth-child(2) {min-width:0}
  .appointment p {overflow-wrap:anywhere}
  .authCard {width:100%;padding:24px 20px;min-width:0}
  #authGate {padding:24px 16px;min-height:100svh}
  .authBrand img {max-width:100%;width:300px;height:auto}
  .stats {gap:7px}
  .stat strong {font-size:clamp(16px,5vw,23px);overflow-wrap:anywhere}
  .stat {padding:14px 8px}
  .stat .eyebrow {letter-spacing:.3px;font-size:8px}
}
@media screen and (max-width:370px) {
  main {padding:18px 10px 35px}
  .card {padding:16px 11px}
  .workToolbar .actions {grid-template-columns:1fr}
  .service {grid-template-columns:22px minmax(0,1fr) 76px;gap:7px}
  .service input[type=number] {width:76px}
  .jobTabs button {padding:10px 7px}
}
@media screen {
 button.danger {background:#3b1921;color:#ffb7c5;border:1px solid #813043}
 button.danger:hover {background:#581e2d}
 .removeRow {margin-left:7px}
 .trashItem {display:flex;gap:18px;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #303138}
 .trashItem>div {min-width:0;overflow-wrap:anywhere}
 .trashItem button {flex:none}
 @media(max-width:700px){
  .removeRow {margin:8px 0 0}
  .trashItem {flex-wrap:wrap}
  .trashItem button {width:100%}
 }
}