/* ===== Shell: topbar, dock, desktop, overview, lock, boot ===== */
#session{position:fixed;inset:0;overflow:hidden}
#session.hidden-visibility{visibility:hidden}

/* wallpaper */
#wallpaper{position:absolute;inset:0;background:#2c001e center/cover no-repeat;
  transition:background-image .45s,filter .45s;z-index:0}
#night-light{position:fixed;inset:0;z-index:6000;pointer-events:none;opacity:0;
  background:rgba(255,140,40,.16);mix-blend-mode:multiply;transition:opacity .8s}
#night-light.on{opacity:1}

/* ===== top bar ===== */
#topbar{position:absolute;top:0;left:0;right:0;height:30px;z-index:5000;
  background:var(--topbar-bg);color:#fff;display:flex;align-items:stretch;
  font-size:13px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .3s,opacity .3s}
#topbar.transparent{background:rgba(0,0,0,.28)}
#topbar .tb-item{display:flex;align-items:center;gap:6px;padding:0 10px;height:30px;color:#fff;
  font-weight:500;border-radius:0;transition:background .12s}
#topbar .tb-item:hover{background:rgba(255,255,255,.09)}
#topbar .tb-item:active,#topbar .tb-item.open{background:rgba(255,255,255,.16)}
#topbar .tb-spacer{flex:1}
#tb-activities{font-weight:700;letter-spacing:.01em}
#tb-appmenu{max-width:260px}
#tb-appmenu .app-icon{width:16px;height:16px}
#tb-appmenu .app-icon svg{width:16px;height:16px}
#tb-appmenu .app-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tb-appmenu svg.caret{width:11px;height:11px;opacity:.8}
#tb-clock{justify-content:center;min-width:170px;font-variant-numeric:tabular-nums}
#topbar .tb-right{display:flex;align-items:stretch}
#topbar .tb-status-group{display:flex;align-items:center;gap:2px;padding:0 4px}
#topbar .tb-status-group:hover{background:rgba(255,255,255,.09)}
#topbar .tb-status-group.open{background:rgba(255,255,255,.16)}
#topbar .tb-status-group .sicon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}
#topbar .tb-status-group .sicon svg{width:16px;height:16px}
#topbar .batt-pct{font-size:11.5px;margin-left:2px;font-variant-numeric:tabular-nums}
#topbar .tb-shot-btn{padding:0 7px}
#topbar .tb-shot-btn svg{width:15px;height:15px}

/* calendar popover */
.cal-pop{width:380px;max-height:calc(100vh - 60px);display:flex;flex-direction:column}
.cal-pop .notif-area{flex:1;overflow-y:auto;min-height:60px;max-height:300px;padding:8px 10px 0}
.cal-pop .dnd-row{display:flex;align-items:center;gap:10px;padding:4px 10px 8px}
.cal-pop .dnd-row .switch{width:38px;height:21px}
.cal-pop .dnd-row .switch::after{width:17px;height:17px}
.cal-pop .dnd-row .switch.on::after{left:19px}
.cal-pop .dnd-label{font-size:13px;font-weight:600}
.cal-pop .notif-head{display:flex;align-items:center;padding:2px 10px}
.cal-pop .notif-head .t{flex:1;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9d9894}
.cal-pop .notif-head .clear{font-size:12px;color:#9d9894;padding:3px 8px;border-radius:6px}
.cal-pop .notif-head .clear:hover{background:rgba(255,255,255,.1);color:#fff}
.cal-pop .notif-empty{padding:26px 0;text-align:center;color:#9d9894;font-size:13px}
.cal-pop .notif-empty svg{width:34px;height:34px;margin:0 auto 8px;opacity:.5}
.cal-pop .n-item{display:flex;gap:10px;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);margin:0 0 8px;position:relative}
.cal-pop .n-item .n-icon{width:24px;height:24px;flex:none}
.cal-pop .n-item .n-icon svg{width:24px;height:24px}
.cal-pop .n-item .n-app{font-size:11px;color:#9d9894}
.cal-pop .n-item .n-title{font-weight:700;font-size:13px}
.cal-pop .n-item .n-body{font-size:12.5px;color:#c6c2bf;margin-top:1px}
.cal-pop .n-item .n-x{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;
  display:none;align-items:center;justify-content:center;color:#fff}
.cal-pop .n-item:hover .n-x{display:flex;background:rgba(255,255,255,.12)}
.cal-pop .cal-area{padding:10px 14px 12px;border-top:1px solid rgba(255,255,255,.08)}
.cal-head{display:flex;align-items:center;margin-bottom:8px}
.cal-head .cal-title{flex:1;font-weight:700;font-size:14.5px}
.cal-head .icon-btn{color:#fff}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-grid .dow{font-size:10.5px;color:#9d9894;font-weight:700;padding:4px 0}
.cal-grid .day{height:30px;display:flex;align-items:center;justify-content:center;font-size:13px;
  border-radius:8px;color:#e8e5e3;position:relative}
.cal-grid .day:hover{background:rgba(255,255,255,.09)}
.cal-grid .day.other{color:#6e6a67}
.cal-grid .day.today{background:var(--accent);color:#fff;font-weight:700}
.cal-grid .day.selected:not(.today){background:rgba(255,255,255,.18)}
.cal-events{padding:8px 10px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#c6c2bf}
.cal-events .ev{display:flex;gap:8px;align-items:center;padding:4px 6px;border-radius:6px}
.cal-events .ev:hover{background:rgba(255,255,255,.07)}
.cal-events .ev .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* system status menu */
.sys-menu{width:308px;padding:10px}
.sys-menu .sm-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px}
.sys-menu .sm-row.hoverable:hover{background:rgba(255,255,255,.09)}
.sys-menu .sm-row svg{width:17px;height:17px;flex:none}
.sys-menu .sm-row .grow{flex:1;min-width:0}
.sys-menu .sm-row .sub{font-size:11.5px;color:#9d9894}
.sys-menu .sm-sep{height:1px;background:rgba(255,255,255,.09);margin:6px 4px}
.sys-menu .slider-row{display:flex;align-items:center;gap:10px;padding:4px 10px}
.sys-menu .slider-row svg{width:17px;height:17px;flex:none}
.sys-menu .btn-grid{display:flex;gap:6px;padding:4px 10px}
.sys-menu .btn-grid .sm-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 4px;border-radius:9px;background:rgba(255,255,255,.06);font-size:11px}
.sys-menu .btn-grid .sm-btn:hover{background:rgba(255,255,255,.12)}
.sys-menu .btn-grid .sm-btn svg{width:18px;height:18px}
.sys-menu .chev{margin-left:auto;opacity:.6}
.sys-menu .batt-warn{color:#f6b73c;font-size:11.5px}

/* ===== dock ===== */
#dock{position:absolute;left:0;top:30px;bottom:0;width:64px;z-index:4000;
  background:var(--dock-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;
  padding:6px 0;transition:transform .25s cubic-bezier(.3,.7,.3,1),opacity .25s}
#dock.autohide{transform:translateX(-100%);opacity:0}
#dock .dock-apps{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;overflow-y:auto;
  overflow-x:hidden;width:100%;scrollbar-width:none;padding:2px 0}
#dock .dock-apps::-webkit-scrollbar{display:none}
#dock .dock-sep{width:38px;height:1px;background:rgba(255,255,255,.14);margin:5px 0;flex:none}
.dock-icon{position:relative;width:52px;height:52px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;transition:background .12s,transform .12s;flex:none}
.dock-icon:hover{background:rgba(255,255,255,.1)}
.dock-icon:active{transform:scale(.9)}
.dock-icon .di{width:40px;height:40px}
.dock-icon .di svg{width:40px;height:40px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.dock-icon .run-dots{position:absolute;left:-1px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px}
.dock-icon .run-dots i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:block}
.dock-icon.focused .run-dots i{box-shadow:0 0 4px var(--accent)}
.dock-icon.launching .di{animation:dockBounce .9s ease-in-out infinite}
@keyframes dockBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-9px)}55%{transform:translateY(0)}72%{transform:translateY(-4px)}}
.dock-icon.urgent .di{animation:dockWiggle .5s ease-in-out 3}
@keyframes dockWiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(3px) rotate(4deg)}75%{transform:translateX(-3px) rotate(-4deg)}}
.dock-icon.dragover{background:var(--accent-soft);outline:2px dashed var(--accent)}
#dock .show-apps{margin-top:auto}

/* notification banners — top center like GNOME */
#banner-layer{position:absolute;top:38px;left:50%;transform:translateX(-50%);z-index:7000;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:auto}
#banner-layer .banner{pointer-events:auto}

/* popups above everything except boot (z15000 lock < popups < 20000 boot) */
#popup-layer{position:fixed;inset:0;z-index:16000;pointer-events:none}
#popup-layer .popover,#popup-layer .modal-backdrop{pointer-events:auto}

/* dock floating (panel mode off) */
#dock.floating{top:38px;bottom:10px;left:6px;width:58px;border-radius:18px;
  border:1px solid rgba(255,255,255,.1)}
#dock.floating .dock-icon{width:48px;height:48px}
#dock.floating .dock-icon .di{width:36px;height:36px}

/* ===== desktop ===== */
#desktop{position:absolute;inset:0;z-index:1}
.desk-icons{position:absolute;top:44px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:2}
.desk-icon{width:92px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;
  border-radius:8px;text-align:center}
.desk-icon:hover{background:rgba(255,255,255,.14)}
.desk-icon.selected{background:rgba(233,84,32,.35);outline:1px solid rgba(255,255,255,.35)}
.desk-icon .di{width:42px;height:42px}
.desk-icon .di svg{width:42px;height:42px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.desk-icon .lbl{font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);line-height:1.2;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}

/* ===== overview ===== */
#overview{position:absolute;inset:0;z-index:4500;display:flex;flex-direction:column;align-items:center;
  animation:ovIn .22s ease}
@keyframes ovIn{from{opacity:0}}
#overview.closing{animation:ovOut .18s forwards}
@keyframes ovOut{to{opacity:0}}
.ov-search{margin-top:64px;width:460px;max-width:80vw;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:9px 18px;transition:background .15s,border .15s}
.ov-search:focus-within{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.ov-search svg{width:17px;height:17px;opacity:.75;flex:none}
.ov-search input{flex:1;background:none;border:0;outline:none;color:#fff;font-size:15px}
.ov-search input::placeholder{color:rgba(255,255,255,.55)}
.ov-search .clear-q{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.7}
.ov-search .clear-q:hover{background:rgba(255,255,255,.15);opacity:1}
.ov-search .clear-q svg{width:11px;height:11px}
.ov-ws-strip{display:flex;gap:12px;margin-top:18px;min-height:64px;align-items:center}
.ws-thumb{width:104px;height:60px;border-radius:8px;border:2px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.05);position:relative;overflow:hidden;cursor:default;
  transition:border .15s,transform .15s;flex:none}
.ws-thumb:hover{border-color:rgba(255,255,255,.5)}
.ws-thumb.active{border-color:#fff}
.ws-thumb .ws-mini{position:absolute;background:rgba(255,255,255,.5);border-radius:2px}
.ws-thumb .ws-add{display:flex;align-items:center;justify-content:center;height:100%;color:rgba(255,255,255,.6)}
.ws-thumb .ws-add svg{width:22px;height:22px}
.ov-stage{flex:1;width:100%;position:relative;margin-top:8px}
.ov-noresults{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;
  justify-content:center;color:rgba(255,255,255,.75);font-size:15px}
.ov-noresults svg{width:44px;height:44px;opacity:.6}
.ov-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:rgba(255,255,255,.4);font-size:12px}

/* windows dim while searching in overview */
.window.ov-dim{opacity:.18;filter:blur(3px) saturate(.7);pointer-events:none}

/* window spread (windows get class .in-overview via wm) */
.ov-spread-badge{position:absolute;z-index:5;transform:translate(-50%,0);background:rgba(20,20,20,.85);
  color:#fff;font-size:12px;padding:5px 14px;border-radius:999px;display:flex;gap:8px;align-items:center;
  border:1px solid rgba(255,255,255,.15);pointer-events:none;white-space:nowrap;max-width:280px;overflow:hidden}
.ov-spread-badge .bi svg{width:16px;height:16px}
.ov-spread-badge .lbl{overflow:hidden;text-overflow:ellipsis}

/* ===== app grid ===== */
#appgrid-layer{position:absolute;inset:0;z-index:4600;display:flex;flex-direction:column;align-items:center;
  background:rgba(24,18,28,.6);backdrop-filter:blur(34px) saturate(1.15);-webkit-backdrop-filter:blur(34px) saturate(1.15);
  animation:ovIn .22s}
#appgrid-layer.closing{animation:ovOut .18s forwards}
.ag-search{margin-top:64px}
.ag-pages{flex:1;width:100%;position:relative;overflow:hidden;margin-top:10px}
.ag-page{position:absolute;top:0;bottom:40px;left:50%;transform:translateX(-50%);width:min(1060px,92vw);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:128px;gap:8px;align-content:start;
  padding:10px 30px;transition:transform .32s cubic-bezier(.3,.7,.3,1),opacity .32s}
.ag-page.off-left{transform:translateX(calc(-50% - 60vw));opacity:0;pointer-events:none}
.ag-page.off-right{transform:translateX(calc(-50% + 60vw));opacity:0;pointer-events:none}
.ag-dots{display:flex;gap:9px;padding:16px 0 22px}
.ag-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:all .15s;cursor:pointer}
.ag-dots i.active{background:#fff;transform:scale(1.25)}
.ag-app{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px;border-radius:12px;
  transition:background .12s,transform .12s;position:relative}
.ag-app:hover{background:rgba(255,255,255,.12)}
.ag-app:active{transform:scale(.94)}
.ag-app .ic{width:56px;height:56px;position:relative}
.ag-app .ic svg{width:56px;height:56px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.ag-app .nm{font-size:12.5px;color:#fff;text-align:center;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.5);
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-app .run-dot{position:absolute;bottom:2px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.ag-folder-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;width:56px;height:56px;
  gap:3px;padding:7px;background:rgba(255,255,255,.13);border-radius:13px}
.ag-folder-grid i{border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ag-folder-grid i svg{width:100%;height:100%}
/* open folder view */
.folder-view{position:absolute;inset:0;z-index:4700;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(16,10,20,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:ovIn .18s}
.folder-box{background:rgba(30,30,30,.92);border:1px solid rgba(255,255,255,.1);border-radius:22px;
  padding:26px;box-shadow:var(--shadow-2);animation:dlgIn .2s cubic-bezier(.2,.9,.3,1.15)}
.folder-box .f-name{font-size:19px;font-weight:700;color:#fff;text-align:center;margin-bottom:18px}
.folder-box .f-grid{display:grid;grid-template-columns:repeat(3,112px);gap:4px}
.folder-box .ag-app .nm{max-width:100px}
.folder-view .f-close-hint{position:absolute;top:40px;color:rgba(255,255,255,.6);font-size:12.5px}
.folder-box .f-nav{display:flex;justify-content:space-between;margin-top:8px}
.folder-box .f-nav .icon-btn{color:#fff}

/* ===== boot / shutdown ===== */
#boot-layer{position:fixed;inset:0;z-index:20000;background:#000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;transition:opacity .5s}
#boot-layer.gone{opacity:0;pointer-events:none}
#boot-layer .boot-logo{width:120px;height:120px;opacity:0;animation:bootLogo .8s .3s forwards}
@keyframes bootLogo{to{opacity:1}}
#boot-layer .boot-logo svg{width:120px;height:120px}
#boot-layer .spinner{margin-top:110px;width:28px;height:28px;animation:spin 1s linear infinite;opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
#boot-layer .spinner svg{width:28px;height:28px}
#boot-layer .boot-msg{position:absolute;bottom:60px;color:rgba(255,255,255,.65);font-size:13px;font-family:var(--mono)}
#boot-layer .power-btn{margin-top:40px;width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;transition:all .15s}
#boot-layer .power-btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}
#boot-layer .power-btn svg{width:26px;height:26px}
#boot-layer .brand-text{position:absolute;bottom:26px;right:34px;color:rgba(255,255,255,.55);font-size:15px;font-weight:500;letter-spacing:.02em}

/* ===== lock screen ===== */
#lock-layer{position:fixed;inset:0;z-index:15000;overflow:hidden}
#lock-layer .lock-bg{position:absolute;inset:-40px;background:#2c001e center/cover no-repeat;
  transition:transform .5s cubic-bezier(.3,.7,.3,1),filter .5s}
#lock-layer.reveal .lock-bg{transform:translateY(-16%) scale(.96);filter:blur(18px) brightness(.7)}
.lock-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.45))}
.lock-clock-pane{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:#fff;transition:transform .5s cubic-bezier(.3,.7,.3,1),opacity .4s}
#lock-layer.reveal .lock-clock-pane{transform:translateY(-90%);opacity:0}
.lock-time{font-size:96px;font-weight:300;letter-spacing:-2px;text-shadow:0 2px 12px rgba(0,0,0,.4);font-variant-numeric:tabular-nums;line-height:1}
.lock-date{font-size:20px;font-weight:400;opacity:.9;margin-top:8px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.lock-hint{position:absolute;bottom:70px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);
  font-size:13px;animation:hintPulse 2.4s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.55}50%{opacity:.95}}
.lock-auth-pane{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s .1s}
#lock-layer.reveal .lock-auth-pane{opacity:1;pointer-events:auto}
.lock-avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(145deg,#8d4f9c,#5e2750);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 4px 18px rgba(0,0,0,.4);
  border:3px solid rgba(255,255,255,.25);overflow:hidden}
.lock-avatar svg{width:60px;height:60px}
.lock-username{color:#fff;font-size:21px;font-weight:600;text-shadow:0 1px 5px rgba(0,0,0,.5);margin-bottom:22px}
.lock-entry-row{display:flex;align-items:center;gap:8px}
.lock-entry{width:280px;height:42px;border-radius:999px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);color:#fff;padding:0 18px;outline:none;font-size:14.5px;
  backdrop-filter:blur(8px);transition:border .15s,background .15s}
.lock-entry:focus{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.2)}
.lock-entry::placeholder{color:rgba(255,255,255,.5)}
.lock-go{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.lock-go:hover{background:rgba(255,255,255,.26)}
.lock-go svg{width:17px;height:17px}
.lock-msg{height:20px;margin-top:10px;color:#ffb4ab;font-size:12.5px}
.lock-foot{position:absolute;bottom:26px;left:0;right:0;display:flex;justify-content:center;gap:34px;
  color:rgba(255,255,255,.75);font-size:12.5px;align-items:center}
.lock-foot .lf-item{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px}
.lock-foot .lf-item:hover{background:rgba(255,255,255,.1)}
.lock-foot svg{width:15px;height:15px}
.lock-topright{position:absolute;top:14px;right:18px;display:flex;gap:14px;color:#fff;align-items:center;opacity:.9}
.lock-topright svg{width:16px;height:16px}
.lock-topright .lk-clock{font-size:14px;font-variant-numeric:tabular-nums}
.lock-shake{animation:lockShake .4s}
@keyframes lockShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px)}40%{transform:translateX(10px)}60%{transform:translateX(-7px)}80%{transform:translateX(4px)}}
#lock-layer.unlocking .lock-bg{transform:scale(1.04);filter:blur(6px) brightness(1.1)}
#lock-layer.unlocking{transition:opacity .4s;opacity:0}