/* SỬA CHỮA V1.7.1 DESKTOP — Apple dark-light workspace.
   Desktop-only visual layer. Mobile/tablet remain untouched. */
@media (min-width:1100px){
  .desktop-mode{
    --a-bg:#1d1d1f;
    --a-bg-deep:#161617;
    --a-surface:#242426;
    --a-surface-soft:#2c2c2e;
    --a-fill:#333336;
    --a-fill-hover:#3a3a3c;
    --a-text:#f5f5f7;
    --a-secondary:#a1a1a6;
    --a-tertiary:#86868b;
    --a-line:rgba(255,255,255,.10);
    --a-line-strong:rgba(255,255,255,.16);
    --a-blue:#2997ff;
    --a-blue-hover:#3aa0ff;
    --a-green:#30d158;
    --a-orange:#ff9f0a;
    --a-red:#ff453a;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;
    color:var(--a-text);
  }

  /* Apple-like global navigation: deep black, quiet, active item underlined. */
  .desktop-mode .tabwrap{
    background:rgba(0,0,0,.94)!important;
    border-bottom:1px solid rgba(255,255,255,.14)!important;
    -webkit-backdrop-filter:saturate(180%) blur(20px)!important;
    backdrop-filter:saturate(180%) blur(20px)!important
  }
  .desktop-mode .desktop-brand-mark{display:none!important}
  .desktop-mode .desktop-brand-copy span{display:none!important}
  .desktop-mode .desktop-brand-copy strong{
    color:#f5f5f7!important;
    font-size:17px!important;
    line-height:1!important;
    font-weight:650!important;
    letter-spacing:-.015em!important
  }
  .desktop-mode .tabs{background:transparent!important;padding:0!important;gap:4px!important;height:46px!important}
  .desktop-mode .tab{
    position:relative!important;
    min-height:46px!important;
    height:46px!important;
    padding:0 14px!important;
    background:transparent!important;
    color:#c7c7cc!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important
  }
  .desktop-mode .tab:hover{background:transparent!important;color:#fff!important}
  .desktop-mode .tab.on{background:transparent!important;color:#fff!important}
  .desktop-mode .tab.on span{color:#fff!important}
  .desktop-mode .tab.on::after{
    content:"";
    position:absolute;
    left:12px;right:12px;bottom:-7px;
    height:1px;border-radius:2px;background:#fff
  }
  .desktop-mode .desktop-nav-account{color:#a1a1a6!important}
  .desktop-mode .desktop-account-avatar{
    background:#242426!important;border-color:rgba(255,255,255,.14)!important;color:#f5f5f7!important
  }

  /* Dark-light workspace: graphite canvas with progressively lighter surfaces. */
  .desktop-mode body,
  .desktop-mode .app,
  .desktop-mode .screen{
    background:linear-gradient(180deg,#1d1d1f 0%,#19191b 100%)!important;
    color:var(--a-text)!important
  }
  .desktop-mode .screen{padding-top:52px!important}
  .desktop-mode .screen>.head{margin-bottom:32px!important}
  .desktop-mode .screen>.head .title{
    color:var(--a-text)!important;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif!important;
    font-size:52px!important;
    line-height:1.02!important;
    letter-spacing:-.045em!important;
    font-weight:700!important
  }
  .desktop-mode .section h2,
  .desktop-mode .quote-summary strong,
  .desktop-mode .option-intro strong{color:var(--a-text)!important}
  .desktop-mode .search-hint,
  .desktop-mode .quote-summary,
  .desktop-mode .form-section-title small,
  .desktop-mode .created-moment{color:var(--a-secondary)!important}

  /* Controls float one level above the canvas, never pure black. */
  .desktop-mode .search{
    height:54px!important;
    padding:0 18px!important;
    border-radius:16px!important;
    background:var(--a-surface-soft)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
    color:var(--a-tertiary)!important
  }
  .desktop-mode .search input{color:var(--a-text)!important;font-size:16px!important}
  .desktop-mode .search input::placeholder{color:var(--a-tertiary)!important}
  .desktop-mode .search:focus-within{
    background:#303033!important;
    border-color:rgba(41,151,255,.82)!important;
    box-shadow:0 0 0 3px rgba(41,151,255,.14)!important
  }
  .desktop-mode .text-action,.desktop-mode .mini-clear{color:var(--a-blue)!important}

  /* Home: dramatic deep hero; operational cards remain graphite rather than black. */
  .desktop-mode .screen-home>.repair-hero{
    min-height:290px!important;
    padding:42px!important;
    border-radius:30px!important;
    background:
      radial-gradient(56% 130% at 86% 48%,rgba(41,151,255,.22),transparent 58%),
      radial-gradient(38% 90% at 72% 88%,rgba(191,90,242,.10),transparent 64%),
      #050506!important;
    border:1px solid rgba(255,255,255,.05)!important;
    box-shadow:none!important
  }
  .desktop-mode .screen-home>.repair-hero small,
  .desktop-mode .screen-home>.repair-hero h2{display:none!important}
  .desktop-mode .screen-home>.repair-hero p{
    max-width:720px!important;margin:0 0 28px!important;font-size:0!important;color:#fff!important
  }
  .desktop-mode .screen-home>.repair-hero p::before{
    content:"Báo giá · theo dõi sửa chữa";
    display:block;
    color:#f5f5f7;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
    font-size:38px;line-height:1.08;font-weight:650;letter-spacing:-.035em
  }
  .desktop-mode .screen-home .hero-actions .btn{
    min-height:44px!important;padding:10px 20px!important;border-radius:999px!important;
    background:#f5f5f7!important;color:#1d1d1f!important;border:0!important;box-shadow:none!important
  }
  .desktop-mode .screen-home .hero-actions .btn-ghost{background:#2c2c2e!important;color:#f5f5f7!important}
  .desktop-mode .screen-home .stat-card,
  .desktop-mode #homeTicketList .ticket-card{
    background:var(--a-surface)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important
  }
  .desktop-mode .screen-home .stat-card{border-radius:24px!important}
  .desktop-mode .screen-home .stat-value,
  .desktop-mode .screen-home .stat-label,
  .desktop-mode #homeTicketList .ticket-customer{color:var(--a-text)!important}
  .desktop-mode #homeTicketList .ticket-model{color:#a8ddff!important}

  /* Quote stepper: compact graphite segmented control. */
  .desktop-mode .desktop-quote-nav{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
    margin:0 0 26px!important;
    padding:4px!important;
    border-radius:20px!important;
    background:#161617!important;
    border:1px solid rgba(255,255,255,.075)!important
  }
  .desktop-mode .desktop-quote-nav button{
    min-height:62px!important;
    padding:11px 15px!important;
    background:transparent!important;
    color:var(--a-text)!important;
    border:0!important;
    border-radius:16px!important;
    box-shadow:none!important
  }
  .desktop-mode .desktop-quote-nav button:hover{background:var(--a-surface)!important}
  .desktop-mode .desktop-quote-nav button.on{
    background:var(--a-fill-hover)!important;
    color:var(--a-text)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important
  }
  .desktop-mode .desktop-quote-nav .dq-num{
    width:30px!important;height:30px!important;
    background:#48484a!important;color:#f5f5f7!important
  }
  .desktop-mode .desktop-quote-nav button.on .dq-num{background:var(--a-blue)!important;color:#fff!important}
  .desktop-mode .desktop-quote-nav strong{color:var(--a-text)!important;font-size:16px!important}
  .desktop-mode .desktop-quote-nav small,
  .desktop-mode .desktop-quote-nav button.on small{color:var(--a-secondary)!important}

  .desktop-mode .screen-quote>.quote-stage{
    background:var(--a-surface)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    border-radius:30px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
    padding:30px 32px!important
  }
  .desktop-mode .screen-quote .quote-summary{color:var(--a-secondary)!important}
  .desktop-mode .screen-quote .quote-summary strong{font-size:26px!important;font-weight:650!important}
  .desktop-mode .series-btn{
    min-height:36px!important;
    background:var(--a-surface-soft)!important;color:var(--a-text)!important;border:1px solid rgba(255,255,255,.06)!important
  }
  .desktop-mode .series-btn:hover{background:var(--a-fill-hover)!important}
  .desktop-mode .series-btn.on{background:#f5f5f7!important;color:#1d1d1f!important;border-color:#f5f5f7!important}
  .desktop-mode .model-row,
  .desktop-mode .issue-card,
  .desktop-mode .repair-option,
  .desktop-mode .selection-banner{
    background:var(--a-surface-soft)!important;
    border:1px solid rgba(255,255,255,.055)!important;
    color:var(--a-text)!important;
    box-shadow:none!important
  }
  .desktop-mode .model-row:hover,
  .desktop-mode .issue-card:hover,
  .desktop-mode .repair-option:hover{
    background:var(--a-fill-hover)!important;
    border-color:rgba(255,255,255,.12)!important
  }
  .desktop-mode .model-icon,
  .desktop-mode .issue-icon,
  .desktop-mode .repair-meta span{background:#3a3a3c!important;border:0!important}
  .desktop-mode .model-row strong,
  .desktop-mode .issue-card strong,
  .desktop-mode .repair-option-top strong{color:var(--a-text)!important}
  .desktop-mode .model-row small,
  .desktop-mode .issue-card small,
  .desktop-mode .repair-option-top small,
  .desktop-mode .repair-meta span{color:var(--a-secondary)!important}
  .desktop-mode .model-row.no-price small{color:var(--a-tertiary)!important}
  .desktop-mode .repair-option-top b{color:#63e67f!important}
  .desktop-mode .selection-banner span{color:var(--a-secondary)!important}
  .desktop-mode .selection-banner strong{color:var(--a-text)!important}

  /* Intake: graphite cards with lighter fields; color only appears on focus/action. */
  .desktop-mode #intake .intake-note,
  .desktop-mode #intake .customer-card,
  .desktop-mode #intake .device-card,
  .desktop-mode #intake .estimate-card{
    background:var(--a-surface)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important
  }
  .desktop-mode #intake .intake-note{border-radius:20px!important}
  .desktop-mode #intake .form-card{border-radius:28px!important}
  .desktop-mode #intake .form-section-title span,
  .desktop-mode #intake .customer-card .form-section-title span,
  .desktop-mode #intake .device-card .form-section-title span,
  .desktop-mode #intake .estimate-card .form-section-title>span{
    color:var(--a-text)!important;
    letter-spacing:.02em!important;
    font-weight:650!important
  }
  .desktop-mode #intake .customer-card .field>span,
  .desktop-mode #intake .device-card .field>span,
  .desktop-mode #intake .estimate-card .field>span,
  .desktop-mode #intake .estimate-card .field-time>span,
  .desktop-mode #intake .estimate-card .field-money .field-label-row,
  .desktop-mode #intake .range-price-fields .field>span,
  .desktop-mode #intake .field-note>span{color:#d2d2d7!important}
  .desktop-mode #intake .form-section-title small,
  .desktop-mode #intake .created-moment,
  .desktop-mode #intake .intake-note span{color:var(--a-secondary)!important}
  .desktop-mode #intake .intake-note strong{color:var(--a-text)!important}
  .desktop-mode #intake .field input,
  .desktop-mode #intake .field textarea,
  .desktop-mode #intake .field select{
    background:var(--a-surface-soft)!important;
    color:var(--a-text)!important;
    border:1px solid rgba(255,255,255,.055)!important;
    box-shadow:none!important
  }
  .desktop-mode #intake .field input::placeholder,
  .desktop-mode #intake .field textarea::placeholder{color:#707074!important}
  .desktop-mode #intake .field input:hover,
  .desktop-mode #intake .field textarea:hover,
  .desktop-mode #intake .field select:hover{background:var(--a-fill)!important}
  .desktop-mode #intake .field input:focus,
  .desktop-mode #intake .field textarea:focus,
  .desktop-mode #intake .field select:focus{
    background:#303033!important;
    border-color:rgba(41,151,255,.82)!important;
    box-shadow:0 0 0 3px rgba(41,151,255,.14)!important
  }
  .desktop-mode #intake .price-mode{background:#161617!important;border:1px solid rgba(255,255,255,.07)!important}
  .desktop-mode #intake .price-mode-btn{color:var(--a-secondary)!important}
  .desktop-mode #intake .price-mode-btn.on{
    background:#3a3a3c!important;color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important
  }
  .desktop-mode #intake .money-human-hint{color:var(--a-secondary)!important}
  .desktop-mode #intakeForm>.create-ticket-wrap{
    background:linear-gradient(180deg,rgba(29,29,31,0),rgba(29,29,31,.96) 38%)!important
  }
  .desktop-mode #intake .create-ticket{
    background:var(--a-blue)!important;color:#fff!important;border:0!important;
    border-radius:999px!important;box-shadow:none!important
  }
  .desktop-mode #intake .create-ticket:hover{background:var(--a-blue-hover)!important}

  /* Tickets: layered graphite master-detail with restrained semantic colors. */
  .desktop-mode .ticket-filter{display:flex!important;flex-wrap:wrap!important;gap:8px!important;overflow:visible!important}
  .desktop-mode .filter-chip{
    background:var(--a-surface-soft)!important;color:var(--a-text)!important;border:1px solid rgba(255,255,255,.06)!important;box-shadow:none!important
  }
  .desktop-mode .filter-chip:hover{background:var(--a-fill-hover)!important}
  .desktop-mode .filter-chip.on{background:#f5f5f7!important;color:#1d1d1f!important;border-color:#f5f5f7!important}
  .desktop-mode .screen-tickets .ticket-card,
  .desktop-mode .desktop-ticket-placeholder{
    background:var(--a-surface)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important
  }
  .desktop-mode .screen-tickets .ticket-card:hover{background:#29292b!important;border-color:rgba(255,255,255,.12)!important}
  .desktop-mode .ticket-customer,
  .desktop-mode .desktop-ticket-placeholder strong{color:var(--a-text)!important}
  .desktop-mode .ticket-model{color:#a8ddff!important}
  .desktop-mode .ticket-phone-number{color:#d7e9f7!important}
  .desktop-mode .ticket-scan-meta,
  .desktop-mode .desktop-ticket-placeholder,
  .desktop-mode .desktop-ticket-placeholder span{color:var(--a-secondary)!important}
  .desktop-mode .ticket-scan-issue{color:#ffc66f!important}
  .desktop-mode .ticket-scan-price{
    background:rgba(48,209,88,.09)!important;
    border:1px solid rgba(48,209,88,.18)!important
  }
  .desktop-mode .ticket-scan-price span{color:#8fb49a!important}
  .desktop-mode .ticket-scan-price strong{color:#63e67f!important}
  .desktop-mode .ticket-copy-phone{color:#8fd0ff!important;background:rgba(41,151,255,.10)!important;border-color:rgba(41,151,255,.20)!important}

  /* Dark semantic pills: tinted glass, readable but not neon. */
  .desktop-mode .status-pill,
  .desktop-mode .status-badge{box-shadow:none!important}
  .desktop-mode .status-pill.blue,.desktop-mode .status-badge.blue{background:rgba(41,151,255,.14)!important;color:#8dccff!important;border-color:rgba(41,151,255,.24)!important}
  .desktop-mode .status-pill.green,.desktop-mode .status-badge.green{background:rgba(48,209,88,.13)!important;color:#75e590!important;border-color:rgba(48,209,88,.24)!important}
  .desktop-mode .status-pill.orange,.desktop-mode .status-badge.orange{background:rgba(255,159,10,.14)!important;color:#ffc46b!important;border-color:rgba(255,159,10,.25)!important}
  .desktop-mode .status-pill.red,.desktop-mode .status-badge.red{background:rgba(255,69,58,.13)!important;color:#ff8a84!important;border-color:rgba(255,69,58,.24)!important}
  .desktop-mode .status-pill.cyan,.desktop-mode .status-badge.cyan{background:rgba(100,210,255,.13)!important;color:#9ceaff!important;border-color:rgba(100,210,255,.22)!important}
  .desktop-mode .status-pill.purple,.desktop-mode .status-badge.purple{background:rgba(191,90,242,.13)!important;color:#d9a7ff!important;border-color:rgba(191,90,242,.24)!important}

  /* Detail/editor sheets sit one lightness step above the workspace. */
  .desktop-mode .ticket-detail.open,
  .desktop-mode .quote-detail.open{
    background:#242426!important;
    color:var(--a-text)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.40)!important
  }
  .desktop-mode .ticket-detail .detail-toolbar,
  .desktop-mode .quote-detail .detail-toolbar{
    background:linear-gradient(180deg,rgba(36,36,38,.98),rgba(36,36,38,.88),transparent)!important
  }
  .desktop-mode .detail h1,
  .desktop-mode .detail strong,
  .desktop-mode .detail p{color:var(--a-text)!important}
  .desktop-mode .detail small,
  .desktop-mode .detail time,
  .desktop-mode .detail-kicker,
  .desktop-mode .demo-disclaimer{color:var(--a-secondary)!important}
  .desktop-mode .detail-info-card,
  .desktop-mode .detail-note,
  .desktop-mode .edit-section,
  .desktop-mode .quote-result-card{
    background:var(--a-surface-soft)!important;
    border:1px solid rgba(255,255,255,.065)!important;
    box-shadow:none!important
  }
  .desktop-mode .status-action,
  .desktop-mode .edit-ticket,
  .desktop-mode .cancel-ticket,
  .desktop-mode .delete-ticket,
  .desktop-mode .secondary-action{
    background:var(--a-fill)!important;color:var(--a-text)!important;border:1px solid rgba(255,255,255,.06)!important
  }
  .desktop-mode .status-action.active{background:#f5f5f7!important;color:#1d1d1f!important}
  .desktop-mode .quote-detail .primary{background:var(--a-blue)!important;color:#fff!important}

  /* Menu/utility and popovers use the same graphite layering. */
  .desktop-mode .screen-menu .form-card,
  .desktop-mode .confirm-card,
  .desktop-mode .combo-popover{
    background:#2c2c2e!important;
    color:var(--a-text)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:0 20px 60px rgba(0,0,0,.42)!important
  }
  .desktop-mode .combo-option{color:var(--a-text)!important;background:transparent!important}
  .desktop-mode .combo-option:hover,
  .desktop-mode .combo-option.selected{background:#3a3a3c!important;color:#fff!important}
  .desktop-mode .confirm-card h3,.desktop-mode .confirm-card p{color:var(--a-text)!important}
  .desktop-mode .confirm-cancel{background:#3a3a3c!important;color:var(--a-text)!important}
  .desktop-mode .confirm-ok{background:var(--a-blue)!important;color:#fff!important}
  .desktop-mode .confirm-ok.danger{background:var(--a-red)!important}

  /* Quiet dark scrollbars. */
  .desktop-mode #modelList.app-scroll-region,
  .desktop-mode #issueList.app-scroll-region,
  .desktop-mode #optionList.app-scroll-region,
  .desktop-mode .screen-tickets>#ticketList.app-scroll-region{
    scrollbar-color:#5a5a5f transparent!important
  }
  .desktop-mode #modelList::-webkit-scrollbar-thumb,
  .desktop-mode #issueList::-webkit-scrollbar-thumb,
  .desktop-mode #optionList::-webkit-scrollbar-thumb,
  .desktop-mode .screen-tickets>#ticketList::-webkit-scrollbar-thumb{background:#5a5a5f!important}
}

@media (min-width:1100px) and (max-width:1279px){
  .desktop-mode .screen>.head .title{font-size:46px!important}
  .desktop-mode .desktop-brand-copy strong{font-size:15px!important}
  .desktop-mode .tab{padding:0 10px!important}
  .desktop-mode .screen-home>.repair-hero p::before{font-size:34px}
}