.window{position:absolute;display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;min-width:260px;min-height:160px;
  opacity:0;transform:scale(.96) translateY(8px);
  pointer-events:auto;
  transition:opacity .18s ease,transform .18s ease,box-shadow .15s ease;}
.window.open{opacity:1;transform:scale(1) translateY(0);}
.window.minimized{display:none;}
.window.minimizing{animation:winMinimize .3s ease forwards;pointer-events:none;}
@keyframes winMinimize{to{opacity:0;transform:scale(.4) translateY(100vh);}}
.window.restoring{animation:winRestore .3s ease forwards;}
@keyframes winRestore{from{opacity:0;transform:scale(.4) translateY(100vh);}to{opacity:1;transform:scale(1) translateY(0);}}
.window.focused{box-shadow:0 28px 70px -12px rgba(0,0,0,.85),0 0 0 1px var(--cyan);}
.window.maximized{border-radius:0!important;border:none!important;}
.window.snapped-state{transition:all .2s ease;}
.window.shake{animation:shake .35s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* titlebar */
.win-bar{display:flex;align-items:center;gap:8px;padding:0 12px;
  height:var(--titlebar-h);flex-shrink:0;cursor:grab;user-select:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.03),transparent);
  border-bottom:1px solid var(--border);}
.win-bar:active{cursor:grabbing;}
.traffic{display:flex;gap:7px;flex-shrink:0;}
.traffic .dot{width:14px;height:14px;border-radius:50%;cursor:pointer;
  transition:filter .08s,transform .08s;display:flex;align-items:center;justify-content:center;font-size:8.5px;color:transparent;}
.traffic:hover .dot{color:rgba(0,0,0,.6);}
.traffic .dot:hover{filter:brightness(1.3);}
.traffic .dot:active{filter:brightness(0.75);transform:scale(0.92);}
.dot-r{background:#ff5f56;}.dot-y{background:#ffbd2e;}.dot-g{background:#27c93f;}
.win-title{flex:1;text-align:center;font-size:12px;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.win-menu-bar{display:flex;gap:0;padding:0 12px;border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--bg3);position:relative;}
.win-menu-item{font-size:12px;padding:5px 10px;color:var(--text-dim);cursor:pointer;border-radius:4px;
  transition:background .1s,color .1s;}
.win-menu-item:hover{background:rgba(255,255,255,.05);color:var(--text-bright);}
.win-menu-item.active{background:rgba(255,255,255,.08);color:var(--text-bright);}

/* menu dropdown */
.win-menu-dropdown{position:absolute;top:100%;left:0;z-index:20;
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);padding:4px;min-width:160px;
  animation:fadeUp .12s ease;}
.win-menu-dropdown button{display:block;width:100%;text-align:left;padding:6px 10px;
  border-radius:5px;color:var(--text);font-size:12px;font-family:inherit;transition:background .1s;}
.win-menu-dropdown button:hover{background:rgba(255,255,255,.06);color:var(--text-bright);}
.win-menu-dropdown hr{border:none;border-top:1px solid var(--border);margin:3px 0;}

/* body */
.win-body{flex:1;overflow:auto;position:relative;}
.win-body.pad{padding:18px 20px;}
.win-body.nopad{padding:0;}

/* resize handle */
.win-resize{position:absolute;width:14px;height:14px;right:0;bottom:0;
  cursor:nwse-resize;z-index:5;
  background:linear-gradient(135deg,transparent 50%,var(--border2) 50%);
  border-bottom-right-radius:9px;}
.win-resize-e{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:ew-resize;z-index:5;}
.win-resize-s{position:absolute;left:0;right:0;bottom:0;height:5px;cursor:ns-resize;z-index:5;}

/* snap overlay */
#snapGuide{position:fixed;inset:0;pointer-events:none;z-index:9999;display:none;}
.snap-zone{position:absolute;background:rgba(94,230,208,.08);border:2px solid var(--cyan);
  border-radius:8px;opacity:0;transition:opacity .15s;}
.snap-zone.show{opacity:1;}
#snapLeft{top:4px;left:4px;width:calc(50% - 8px);bottom:4px;}
#snapRight{top:4px;right:4px;width:calc(50% - 8px);bottom:4px;}
#snapMax{top:4px;left:4px;right:4px;bottom:4px;}

@media(max-width:700px){
  .window{left:0!important;top:0!important;width:100vw!important;
    height:calc(100vh - var(--taskbar-h))!important;border-radius:0;border:none;}
  .win-resize,.win-resize-e,.win-resize-s{display:none;}
}