/* Unified desktop product system — monitor/operate surfaces, default density */
@media (min-width:1024px){
  :root{
    --ui-bg:#f4f6f9;--ui-panel:#fff;--ui-text:#102238;--ui-muted:#6f7e91;
    --ui-line:#e1e7ee;--ui-line-strong:#d2dae4;--ui-accent:#4637bd;--ui-navy:#0b2038;
    --ui-radius-sm:10px;--ui-radius:14px;--ui-radius-lg:18px;
    --ui-shadow:0 16px 42px -32px rgba(12,32,56,.34);
    --ui-sidebar:224px;--ui-gutter:24px;--ui-content:1200px;
  }
  html,body{background:var(--ui-bg)}
  body{background:linear-gradient(135deg,#f3f6f9 0%,#f7f8fb 48%,#f3f5f8 100%)}
  #app{max-width:none;overflow:visible;background:transparent}
  .page{width:100%;max-width:none;min-height:100vh;padding:104px 32px 64px calc(var(--ui-sidebar) + var(--ui-gutter)*2)}
  .page>*:not(.bottom-nav):not(.desktop-topbar){width:min(var(--ui-content),100%);max-width:var(--ui-content);margin-left:auto;margin-right:auto}
  .card{border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-panel);box-shadow:var(--ui-shadow)}
  button,input,select,textarea{border-radius:var(--ui-radius-sm)}
  button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(70,55,189,.18);outline-offset:2px}

  .bottom-nav{position:fixed;left:24px;top:20px;bottom:20px;width:var(--ui-sidebar);height:auto;padding:22px 14px 16px;border:1px solid var(--ui-line);border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 24px 60px -34px rgba(13,32,54,.44);overflow-y:auto;z-index:120}
  .desktop-brand{padding:2px 8px 24px}.desktop-profile-entry{position:relative;border-radius:12px;cursor:pointer;transition:background .18s,box-shadow .18s}.desktop-profile-entry:hover{background:#f3f5fa;box-shadow:inset 0 0 0 1px #e5e9f1}.desktop-profile-entry:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}.desktop-profile-entry>i{margin-left:auto;color:#8b98a8;font-style:normal;font-size:18px}.nav-btn{min-height:44px;margin:2px 0;border-radius:11px}.nav-btn.active{background:#f0effb;color:#30258f;box-shadow:inset 3px 0 var(--ui-accent)}
  .desktop-user{margin-top:12px;padding:12px 8px;border-radius:12px}
  .desktop-topbar{position:fixed;left:calc(var(--ui-sidebar) + var(--ui-gutter)*2);right:24px;top:20px;height:64px;padding:0 max(24px,calc((100vw - var(--ui-sidebar) - var(--ui-gutter)*3 - var(--ui-content))/2));border:1px solid rgba(225,231,238,.95);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 16px 40px -34px rgba(12,32,56,.38);backdrop-filter:blur(16px);z-index:110}

  .hero,.recommendations-hero,.profile-member-card,.task-hero,.security-hero,.device-hero{border-radius:var(--ui-radius-lg)}
  .page-heading,.catalog-heading,.ticket-page-heading{margin-bottom:18px!important}
  .page-heading h1,.catalog-heading h1,.ticket-page-heading h1{font-size:28px;letter-spacing:-.45px}
  .section-head{margin-top:24px!important}
  .courses-page .list,.recommended-grid,.recommendations-showcase{gap:16px}
  .courses-page .course-card,.recommended-card,.recommendation-feature,.tool-card,.featured-course{border-radius:var(--ui-radius)}

  .ticket-workspace{width:min(1120px,100%)!important;max-width:1120px!important}
  .ticket-page-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px}
  .ticket-page-heading .ticket-back{grid-column:1/-1;justify-self:start;margin-bottom:-4px}
  .ticket-page-heading h1{margin:0 0 6px}.ticket-page-heading p{margin:0}
  .ticket-filter-pills{gap:8px;margin:0 0 14px}.ticket-filter-pills button{min-height:40px;border-radius:999px;padding:8px 15px}
  .ticket-list-card{border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow)}
  .ticket-list-row{min-height:96px;padding:17px 20px;grid-template-columns:minmax(0,1fr) 104px}
  .ticket-list-row h2{margin:6px 0 5px}.ticket-list-row p{line-height:1.5}
  .ticket-create{width:auto;min-width:176px;margin:16px 0 0 auto;display:block;border-radius:12px}
  .ticket-detail{padding:22px;border-radius:var(--ui-radius-lg)}
  .ticket-detail-grid{grid-template-columns:minmax(0,1fr) 300px;gap:20px}
  .ticket-messages>div,.ticket-timeline>div{border-radius:12px}
  .ticket-reply-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--ui-line)}
  .ticket-reply-form textarea{min-height:92px}

  #ticket-dialog{width:min(620px,calc(100vw - 48px));max-width:620px;padding:0;border:0;border-radius:20px;background:#fff;box-shadow:0 34px 90px -28px rgba(7,28,51,.56);overflow:hidden}
  #ticket-dialog::backdrop{background:rgba(10,25,43,.48);backdrop-filter:blur(5px)}
  #ticket-dialog .dialog-form{display:grid;gap:16px;padding:28px 30px 26px}
  #ticket-dialog .dialog-form>header{margin:-28px -30px 0;padding:24px 30px 18px;border-bottom:1px solid var(--ui-line)}
  #ticket-dialog .dialog-form h2{margin:5px 0 0;font-size:24px}
  #ticket-dialog .dialog-note{margin:0;padding:12px 14px;border-radius:12px;background:#f4f6f9;font-size:11px}
  #ticket-dialog label{display:grid;gap:7px;color:#344a61;font-size:12px;font-weight:700}
  #ticket-dialog input,#ticket-dialog select{height:46px;padding:0 13px;border:1px solid var(--ui-line-strong);background:#fbfcfd;color:var(--ui-text)}
  #ticket-dialog textarea{min-height:116px;padding:12px 13px;border:1px solid var(--ui-line-strong);background:#fbfcfd;color:var(--ui-text);resize:vertical}
  #ticket-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:2px;padding-top:16px;border-top:1px solid var(--ui-line)}
  #ticket-dialog .dialog-actions button{min-height:44px;padding:10px 18px;border:1px solid var(--ui-line-strong);background:#fff}
  #ticket-dialog .dialog-actions .ticket-primary{border-color:var(--ui-navy);background:var(--ui-navy);color:#fff}
  #ticket-dialog .form-feedback,.nickname-dialog .form-feedback{min-height:18px;margin:0;color:#a14e58;font-size:11px}
  .profile-name-row{display:flex;align-items:center;gap:10px}.profile-name-edit{min-height:32px;padding:5px 10px;border:1px solid rgba(255,255,255,.25);border-radius:9px;background:rgba(255,255,255,.08);color:#fff;font-size:10px}.nickname-dialog{width:min(480px,calc(100vw - 36px));padding:0;border:0;border-radius:20px;box-shadow:0 34px 90px -28px rgba(7,28,51,.56)}.nickname-dialog::backdrop{background:rgba(10,25,43,.48);backdrop-filter:blur(5px)}.nickname-dialog form{display:grid;gap:17px;padding:26px}.nickname-dialog h2{margin:5px 0}.nickname-dialog header p{margin:6px 0 0;color:var(--ui-muted);font-size:12px}.nickname-dialog label{display:grid;gap:7px;font-size:12px;font-weight:700}.nickname-dialog input{height:46px;padding:0 13px;border:1px solid var(--ui-line-strong)}.nickname-dialog form>div{display:flex;justify-content:flex-end;gap:10px}.nickname-dialog form>div button{min-height:44px;padding:10px 17px;border:1px solid var(--ui-line-strong);background:#fff}.nickname-dialog form>div .ticket-primary{background:var(--ui-navy);color:#fff}
}

@media (max-width:1023px){.desktop-tasks-nav,.desktop-recommended-nav,.desktop-service-nav,.service-label{display:none!important}.page>.bottom-nav{position:fixed!important;left:14px!important;right:14px!important;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important;height:auto!important;margin:0!important;transform:none!important}.home-page{padding-bottom:calc(116px + env(safe-area-inset-bottom))!important}.home-page>.bottom-nav{position:fixed!important;margin:0!important}.profile-name-row{display:flex;align-items:center;gap:8px}.profile-name-edit{min-height:32px;padding:5px 9px;border:1px solid rgba(255,255,255,.25);border-radius:9px;background:rgba(255,255,255,.08);color:#fff}.nickname-dialog{width:calc(100vw - 28px);padding:0;border:0;border-radius:18px}.nickname-dialog form{display:grid;gap:14px;padding:20px}.nickname-dialog input{width:100%;height:46px;padding:0 12px}.nickname-dialog form>div{display:flex;justify-content:flex-end;gap:8px}.nickname-dialog form>div button{min-height:44px}}

@media (min-width:1024px) and (max-width:1280px){
  :root{--ui-sidebar:210px;--ui-gutter:18px}
  .page{padding-right:24px}.bottom-nav{left:18px}.desktop-topbar{right:18px;top:18px}
}