/* 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{position:relative;width:100%;max-width:none;min-height:100vh;margin:0;padding:32px 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:18px 12px 14px;border:1px solid #dce4eb;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(248,250,252,.975));box-shadow:0 24px 60px -34px rgba(13,32,54,.44);overflow-y:auto;overflow-x:hidden;z-index:120}
  .desktop-brand{display:flex;align-items:center;gap:8px;min-height:58px;padding:3px 6px 14px;margin-bottom:5px;border-bottom:1px solid #e8edf2}.desktop-brand>span{flex:0 0 34px;width:34px;height:34px;border-radius:9px;font-size:16px}.desktop-brand>div{min-width:0;flex:1;gap:2px}.desktop-brand b{font-size:12px;line-height:1.2;white-space:nowrap}.desktop-brand small{font-size:9px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-profile-entry{position:relative;border-radius:12px;cursor:pointer;transition:background .18s,box-shadow .18s}.desktop-profile-entry:hover{background:#f3f6f8;box-shadow:inset 0 0 0 1px #e2e9ef}.desktop-profile-entry:focus-visible{outline:2px solid #315f86;outline-offset:2px}.desktop-profile-entry>i{flex:0 0 auto;margin-left:auto;color:#8b98a8;font-style:normal;font-size:16px}.nav-label{margin:18px 10px 7px;color:#91a0af;font-size:9px;font-weight:800;letter-spacing:.13em}.service-label{margin-top:auto;padding-top:18px}.nav-btn{position:relative;display:grid!important;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:12px;width:100%;min-height:50px;margin:3px 0;padding:7px 12px;border:1px solid transparent!important;border-radius:11px!important;background:transparent!important;color:#65778a!important;text-align:left;overflow:hidden;transition:background .18s,border-color .18s,color .18s,transform .18s}.nav-btn::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:0 3px 3px 0;background:transparent;transform:scaleY(.4);transition:background .18s,transform .18s}.nav-btn:hover{background:#f5f7f9!important;color:#334a61!important;transform:translateX(1px)}.nav-btn.active{border-color:transparent!important;background:#eef3f7!important;color:#173b58!important;box-shadow:none!important}.nav-btn.active::before{background:#b58a3b;transform:scaleY(1)}.nav-icon{grid-row:1/3;display:grid;width:24px;height:24px;place-items:center;color:#718397;font-style:normal}.nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.nav-btn.active .nav-icon{color:#204c6c}.nav-btn>span{align-self:end;color:inherit;font-size:12px;font-weight:700;line-height:1.25}.nav-btn>.nav-short-label{display:inline-block;width:4em;text-align:justify;text-align-last:justify;white-space:nowrap}.nav-btn>em{align-self:start;color:#99a5b2;font-size:9px;font-style:normal;line-height:1.25}.nav-btn.active>em{color:#72879a}
  .desktop-user{margin-top:12px;padding:12px 8px;border-radius:12px}.mobile-profile-nav{display:none!important}
  .desktop-topbar{position:relative;inset:auto;left:auto;right:auto;top:auto;width:min(var(--ui-content),100%);max-width:var(--ui-content);height:64px;margin:0 auto 16px;padding:0 24px;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:auto}

  .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}
}