.mode-switch{position:fixed;z-index:55;top:12px;left:50%;transform:translateX(-50%);padding:4px;border:1px solid rgba(75,130,196,.24);border-radius:99px;display:flex;gap:4px;background:rgba(242,248,255,.94);box-shadow:0 5px 20px rgba(34,64,90,.16);backdrop-filter:blur(14px)}
.mode-switch button{color:#57728c;font-size:12px;border:0;border-radius:99px;background:transparent;cursor:pointer;padding:8px 13px;white-space:nowrap}.mode-switch button.active{background:#287ed6;color:#fff}
body.desktop-mode>.app{display:none}body:not(.desktop-mode) #desktopRoot{display:none!important}
.desktop-root{--dw-text:#213a55;min-height:100vh;padding:76px clamp(16px,4vw,66px) 40px;color:var(--dw-text);max-width:1600px;margin:auto}.desktop-head{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-bottom:26px}.desktop-head strong{font-size:25px}.desktop-head p{color:#6b829b;font-size:13px;margin:8px 0}.desktop-toolbar{display:flex;flex-wrap:wrap;gap:8px}.desktop-toolbar button,.desktop-toolbar select{background:rgba(255,255,255,.93);color:#3c6487;border:1px solid #bfd6ed;border-radius:11px;padding:9px 13px;cursor:pointer;font-size:12px}
.desktop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:16px;align-items:stretch}.dw{background:rgba(255,255,255,.88);border:1px solid rgba(92,144,199,.2);border-radius:18px;box-shadow:0 10px 30px rgba(45,86,130,.09);min-width:0;overflow:hidden;backdrop-filter:blur(14px)}.dw-size-2{grid-column:span 2}.dw.dragging{opacity:.5}.dw-head{padding:13px 12px 10px;display:flex;gap:7px;align-items:center;cursor:grab;border-bottom:1px solid rgba(81,134,183,.1);user-select:none}.dw-head:active{cursor:grabbing}.dw-head strong{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dw-handle{font-size:20px;color:#98aabd}.dw-controls{display:flex;gap:1px}.dw-controls button{border:0;background:transparent;color:#7d94ad;cursor:pointer;padding:2px 5px;font-size:14px}.dw-controls button:hover{background:#e8f2fc;color:#176ab9;border-radius:5px}.dw-body{padding:17px;min-height:148px}.dw-body p{font-size:12px;color:#5a7896}.dw-bigclock{font-size:clamp(31px,4vw,62px);font-weight:750;letter-spacing:2px;color:#267cc5;white-space:nowrap}.dw-subtle{font-size:11px!important;color:#899cad!important}.dw-search{display:flex;gap:9px;align-items:center}.dw-search input,.dw-todo-add input{min-width:0;flex:1;background:#f4f9fe;color:#1a334d;border:1px solid #cadae9;border-radius:10px;padding:11px}.dw-search button,.dw-todo-add button{background:#2481d6;border:0;border-radius:10px;color:white;padding:11px;cursor:pointer}.dw-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dw-link{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:#44627f;min-width:0}.dw-link img{height:40px;width:40px;object-fit:contain;border-radius:11px;background:#f1f6fb;padding:5px}.dw-link span{font-size:11px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dw-weather{display:flex;gap:12px;align-items:center}.dw-weather span{font-size:35px}.dw-weather b{font-size:32px}.dw-month{font-weight:700;margin-top:0}.dw-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}.dw-calendar span,.dw-calendar strong{font-size:11px;padding:5px 1px}.dw-calendar .today{border-radius:7px;background:#2885db;color:white}.dw-notes{width:100%;min-height:155px;background:transparent;color:#223d59;border:0;resize:vertical;outline:none;font:13px/1.65 inherit}.dw-todo-add{display:flex;gap:6px}.dw-todo{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #e3edf8}.dw-todo span{flex:1;font-size:12px;overflow-wrap:anywhere}.dw-todo span.done{text-decoration:line-through;color:#98aabd}.dw-todo button{background:none;border:0;cursor:pointer;color:#91a6b8}.desktop-foot{text-align:center;color:#809bb4;margin-top:32px;font-size:12px}
body:not(.light) .desktop-root{--dw-text:#e5efff}body:not(.light) .dw{background:rgba(11,31,53,.89);border-color:rgba(120,165,220,.25)}body:not(.light) .dw-body p,body:not(.light) .desktop-head p{color:#a5b8d0}body:not(.light) .dw-head{border-color:#294460}body:not(.light) .dw-link{color:#d4e5f7}body:not(.light) .dw-notes{color:#e7f2ff}body:not(.light) .dw-todo{border-color:#284261}body:not(.light) .desktop-toolbar button,body:not(.light) .desktop-toolbar select{background:#17324f;color:#d8eaff;border-color:#3a6089}
@media(max-width:1000px){.desktop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.desktop-root{padding:76px 13px 24px}.desktop-head{display:block}.desktop-head strong{font-size:21px}.desktop-toolbar{margin:14px 0}.desktop-grid{grid-template-columns:minmax(0,1fr);gap:12px}.dw-size-2{grid-column:span 1}.dw-links{grid-template-columns:repeat(4,minmax(0,1fr))}.dw-bigclock{font-size:44px}.mode-switch{top:8px}}

/* V1.4.1 widget transparency and individual vertical resizing */
body.custom-background .dw{background-color:rgba(9,27,46,var(--widget-opacity,.86))!important}body.custom-background.light .dw{background-color:rgba(245,250,255,var(--widget-opacity,.86))!important}
.dw{position:relative;display:flex;flex-direction:column}.dw-body{flex:1}.dw-resize{position:absolute;right:0;bottom:0;width:23px;height:23px;cursor:ns-resize;touch-action:none;opacity:.65}.dw-resize:after{content:'';position:absolute;right:7px;bottom:7px;border-right:2px solid #7cadd9;border-bottom:2px solid #7cadd9;width:9px;height:9px}.dw-resize:hover{opacity:1}

/* V1.5 snap-to-grid desktop engine */
@media(min-width:641px){.desktop-grid{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:72px;gap:12px;align-items:stretch;position:relative;min-height:400px}.desktop-grid .dw{grid-column:auto;grid-row:auto;min-height:0!important;height:100%;width:100%;overflow:hidden}.dw .dw-body{overflow:auto;min-height:0}.dw .dw-resize{cursor:nwse-resize;touch-action:none}.dw-head{touch-action:none;cursor:grab}.dw.spatial-dragging{z-index:6;opacity:.8;box-shadow:0 20px 50px #0006;pointer-events:none}.desktop-grid.grid-guides{background-image:linear-gradient(to right,rgba(95,150,220,.10) 1px,transparent 1px),linear-gradient(to bottom,rgba(95,150,220,.10) 1px,transparent 1px);background-size:calc((100% + 12px)/8) 84px}.dw.grid-preview{outline:2px dashed var(--accent)}}
body .desktop-grid .dw{background:rgba(9,27,46,var(--widget-opacity))!important;backdrop-filter:blur(var(--widget-blur))!important;-webkit-backdrop-filter:blur(var(--widget-blur))!important}
body.light .desktop-grid .dw{background:rgba(245,250,255,var(--widget-opacity))!important}
.mode-switch button.active,.dw-search button,.dw-todo-add button,.dw-calendar .today{background:var(--accent)!important}
.dw-bigclock{color:var(--accent)!important}

/* V1.6: widgets fit content by default, hide intrusive browser scroll tracks */
@media(min-width:641px){.desktop-grid .dw{min-height:0!important}.dw .dw-body{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.dw .dw-body::-webkit-scrollbar{display:none}.dw .dw-notes{min-height:90px;resize:none}.dw .dw-resize{width:28px;height:28px;z-index:5;opacity:.18}.dw:hover .dw-resize,.dw:focus-within .dw-resize{opacity:.95}}

/* v1.6.2: Align Desktop content edges with Classic Navigation's .content-grid.
   Both use a 1380px centered box with 3.3% horizontal inset. */
.desktop-root {
  width: 100%;
  max-width: 1380px;
  padding-left: 3.3%;
  padding-right: 3.3%;
}
@media (max-width: 800px) {
  .desktop-root {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (max-width: 640px) {
  .desktop-root {
    padding-left: 13px;
    padding-right: 13px;
  }
}

/* v1.6.3: Same outer frame and gutter as Classic Navigation. */
.desktop-root { max-width: var(--mynav-content-width, 1500px); padding-left: var(--mynav-content-gutter, 14px); padding-right: var(--mynav-content-gutter, 14px); }
@media (max-width: 800px) { .desktop-root { padding-left: 18px; padding-right: 18px; } }
@media (max-width: 640px) { .desktop-root { padding-left: 13px; padding-right: 13px; } }

/* v1.6.4 top-edge hover to reveal mode switch instantly */
#modeHoverZone{position:fixed;top:0;left:50%;transform:translateX(-50%);height:47px;width:190px;z-index:54}
.mode-switch{top:0!important;transform:translate(-50%,-110%)!important;transition:none!important}
#modeHoverZone:hover+.mode-switch,.mode-switch:hover,.mode-switch:focus-within{transform:translate(-50%,0)!important}

/* v1.6.5: smooth top-edge retract animation, no show/hide timer. */
#modeHoverZone{pointer-events:none!important}
.mode-switch{
 top:0!important;
 transform:translate3d(-50%,calc(-100% - 3px),0)!important;
 transition:transform 210ms cubic-bezier(.22,.68,.2,1)!important;
 will-change:transform;
}
body.mode-peek .mode-switch,body.mode-peek .mode-switch:hover,
body.mode-peek .mode-switch:focus-within{
 transform:translate3d(-50%,0,0)!important;
}
/* Override the old :hover-only reveal rule. */
#modeHoverZone:hover+.mode-switch,
.mode-switch:hover,.mode-switch:focus-within {
 transform:translate3d(-50%,calc(-100% - 3px),0)!important;
}
body.mode-peek .mode-switch:hover,body.mode-peek .mode-switch:focus-within{
 transform:translate3d(-50%,0,0)!important;
}


/* v1.6.6: fresh meadow preset tweaks for desktop mode */
body.preset-fresh-meadow .mode-switch{border-color:rgba(118,176,202,.32)!important;background:rgba(255,255,255,.72)!important;box-shadow:0 8px 24px rgba(69,112,146,.12)!important}
body.preset-fresh-meadow .mode-switch button{color:#55738b!important}
body.preset-fresh-meadow .desktop-head p,body.preset-fresh-meadow .desktop-foot{color:#5f7d93!important}
body.preset-fresh-meadow .desktop-toolbar button,body.preset-fresh-meadow .desktop-toolbar select{background:rgba(255,255,255,.76)!important;border-color:rgba(118,176,202,.30)!important;color:#3d6078!important;box-shadow:0 8px 20px rgba(69,112,146,.10)}
body.preset-fresh-meadow .desktop-grid .dw{background:rgba(255,255,255,.50)!important;border-color:rgba(118,176,202,.26)!important;box-shadow:0 18px 38px rgba(79,119,150,.10)!important}
body.preset-fresh-meadow .dw-search input,body.preset-fresh-meadow .dw-todo-add input{background:rgba(248,252,255,.86)!important;border-color:rgba(118,176,202,.26)!important}

/* v1.6.7 tech theme */
body.preset-tech-dark .desktop-grid .dw{background:rgba(8,27,58,.80)!important;border-color:rgba(92,151,232,.28)!important;color:#e8f2ff}
body.preset-tech-dark .desktop-root{--dw-text:#edf7ff}
body.preset-tech-dark .desktop-head p,body.preset-tech-dark .desktop-foot{color:#a9c2df!important}

/* v1.6.8 desktop controls moved into the right advanced rail */
.desktop-root{padding-top:74px;padding-bottom:32px}
body.desktop-mode .desktop-root{max-width:var(--mynav-content-width,1500px)}
body.desktop-mode .desktop-head,body.desktop-mode .desktop-foot{display:none!important}
@media(max-width:640px){.desktop-root{padding-top:70px;padding-bottom:24px}}

/* v1.6.18: desktop uses exactly the same centered workspace frame as classic navigation. */
.desktop-root{box-sizing:border-box!important;max-width:var(--mynav-content-width)!important;min-width:0}
@media (min-width:801px){
 body.desktop-mode .desktop-root{max-width:none!important}
}

/* v1.7: desktop frame uses the stable centered workspace regardless of drawer state. */
@media(min-width:801px){body.desktop-mode .desktop-root{width:min(var(--mynav-content-width),calc(100% - 36px))!important;max-width:none!important;margin-inline:auto!important;transition:none!important}}