/* =============================================
   SintexOS — Windows 11 Fluent + Perplexity AI
   Mica / Acrylic / Frosted Glass
   ============================================= */
:root {
  --bg:         #000000;
  --surface:    rgba(32,32,32,0.75);
  --surface2:   rgba(44,44,44,0.65);
  --surface3:   rgba(55,55,55,0.55);
  --card:       rgba(255,255,255,0.04);
  --card-hover: rgba(255,255,255,0.07);
  --card-active:rgba(255,255,255,0.03);
  --border:     rgba(255,255,255,0.08);
  --border2:    rgba(255,255,255,0.12);
  --text:       #ffffff;
  --text2:      rgba(255,255,255,0.72);
  --text3:      rgba(255,255,255,0.45);
  --accent:     #60CDFF;
  --accent2:    #0078D4;
  --accent-bg:  rgba(96,205,255,0.08);
  --accent-bg2: rgba(96,205,255,0.15);
  --green:      #6CCB5F;
  --orange:     #FCB900;
  --red:        #FF6B6B;
  --purple:     #B4A0FF;
  --mica:       rgba(32,32,32,0.82);
  --acrylic:    rgba(28,28,28,0.78);
  --blur:       blur(40px) saturate(180%);
  --blur-sm:    blur(20px) saturate(150%);
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --shadow:     0 8px 32px rgba(0,0,0,0.36), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-lg:  0 24px 80px rgba(0,0,0,0.45);
  --font:       'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --mono:       'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
  --tb-h:       48px;
  --title-h:    32px;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font);background:#000;color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none}

/* ====== BOOT ====== */
#boot{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease)}
#boot.out{opacity:0;pointer-events:none}
#boot-fx{position:absolute;inset:0;width:100%;height:100%;opacity:.3}
#boot-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:24px}
#boot-logo{animation:bootSpin 2s var(--ease) infinite}
@keyframes bootSpin{0%,100%{transform:rotate(0)}50%{transform:rotate(180deg)}}
#boot-spinner{width:28px;height:28px;border:2.5px solid rgba(255,255,255,.15);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#boot-text{font-size:14px;font-weight:300;color:var(--text3);letter-spacing:4px;text-transform:uppercase}

/* ====== LOCKSCREEN ====== */
#lockscreen{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:opacity .5s,transform .5s var(--ease)}
#lockscreen.hidden{opacity:0;transform:translateY(-100%);pointer-events:none}
#lock-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0a1628 0%,#1a0a2e 40%,#0a1628 100%);
  filter:blur(0)}
#lock-content{position:relative;z-index:2;text-align:center}
#lock-time{font-size:96px;font-weight:300;letter-spacing:-2px;line-height:1;
  text-shadow:0 2px 20px rgba(0,0,0,.5)}
#lock-date{font-size:18px;font-weight:400;color:var(--text2);margin-top:8px}
#lock-hint{font-size:13px;color:var(--text3);margin-top:40px;animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:600px){#lock-time{font-size:56px}#lock-date{font-size:14px}}

/* ====== DESKTOP ====== */
#desktop{position:fixed;inset:0;z-index:1}
#wallpaper{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#desk-icons{position:absolute;top:12px;left:12px;bottom:calc(var(--tb-h)+12px);width:96px;
  display:flex;flex-direction:column;gap:2px}
.d-icon{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:var(--radius);
  cursor:pointer;transition:background .15s}
.d-icon:hover{background:rgba(255,255,255,.06)}
.d-icon.sel{background:rgba(255,255,255,.1)}
.d-icon-img{width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.d-icon-img svg{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.d-icon-name{font-size:11px;text-align:center;color:var(--text);line-height:1.2;max-width:80px;
  text-shadow:0 1px 4px rgba(0,0,0,.8);word-break:break-word}

/* ====== TASKBAR ====== */
#taskbar{position:fixed;bottom:0;left:0;right:0;height:var(--tb-h);z-index:500;
  background:var(--mica);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--border);display:flex;align-items:center;padding:0 12px}
#tb-left{display:flex;align-items:center}
#tb-center{display:flex;align-items:center;gap:1px;position:absolute;left:50%;transform:translateX(-50%)}
#tb-right{margin-left:auto;display:flex;align-items:center;gap:2px}
.tb-btn{width:40px;height:38px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text2);cursor:pointer;border-radius:var(--radius);
  transition:background .12s,color .12s;position:relative}
.tb-btn:hover{background:var(--card-hover);color:var(--text)}
.tb-btn.active{background:var(--card-active)}
.tb-btn.active::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:16px;height:3px;border-radius:2px;background:var(--accent)}
.tb-btn.running::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:6px;height:3px;border-radius:2px;background:var(--text3)}
.tb-start svg{transition:transform .2s var(--ease)}
.tb-start:hover svg{transform:scale(1.08)}
.tb-search{width:36px}
#tb-apps{display:flex;gap:1px}
.tb-app-btn{width:40px;height:38px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text2);cursor:pointer;border-radius:var(--radius);
  transition:all .12s;position:relative}
.tb-app-btn:hover{background:var(--card-hover);color:var(--text)}
.tb-app-btn.active{background:var(--card);color:var(--text)}
.tb-app-btn.active::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:16px;height:3px;border-radius:2px;background:var(--accent)}
.tb-app-btn.running::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:6px;height:3px;border-radius:2px;background:var(--text3)}
.tb-app-btn svg{width:20px;height:20px}
#tb-tray{display:flex;align-items:center;gap:2px;padding:4px 6px;border-radius:var(--radius);
  transition:background .12s;cursor:pointer}
#tb-tray:hover{background:var(--card-hover)}
#tb-tray-icons{display:flex;align-items:center;gap:6px}
#tb-tray-icons svg{width:16px;height:16px;color:var(--text2)}
#tb-clock{font-size:12px;color:var(--text2);text-align:center;line-height:1.35;padding:0 8px;
  font-variant-numeric:tabular-nums;min-width:60px}
.tb-notify-btn{width:28px;height:38px}

/* ====== START MENU ====== */
#start{position:fixed;bottom:calc(var(--tb-h)+12px);left:50%;transform:translateX(-50%) translateY(0);
  width:640px;max-width:calc(100vw - 24px);background:var(--acrylic);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border2);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);z-index:600;overflow:hidden;
  opacity:1;transition:opacity .2s var(--ease),transform .25s var(--ease)}
#start.hidden{opacity:0;transform:translateX(-50%) translateY(16px);pointer-events:none}
#start-inner{padding:0}
#start-top{padding:24px 28px 16px;position:relative}
#start-search{width:100%;padding:8px 12px 8px 36px;background:rgba(255,255,255,.06);border:1px solid var(--border2);
  border-radius:var(--radius);color:var(--text);font-size:14px;font-family:var(--font);outline:none;
  transition:border-color .2s,background .2s}
#start-search:focus{border-color:var(--accent);background:rgba(255,255,255,.08)}
#start-search::placeholder{color:var(--text3)}
.start-search-icon{position:absolute;left:40px;top:50%;transform:translateY(-50%);color:var(--text3);
  pointer-events:none}
#start-label,#start-label2{font-size:13px;font-weight:600;padding:4px 28px;color:var(--text2)}
#start-apps{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:4px 20px 12px}
.s-app{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:var(--radius);
  cursor:pointer;transition:background .12s}
.s-app:hover{background:var(--card-hover)}
.s-app-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.s-app-icon svg{width:24px;height:24px}
.s-app-name{font-size:11px;color:var(--text2);text-align:center;line-height:1.2}
#start-recent{padding:4px 20px 12px;display:flex;flex-direction:column;gap:2px}
.s-recent{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--radius);
  cursor:pointer;transition:background .12s}
.s-recent:hover{background:var(--card-hover)}
.s-recent-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.s-recent-icon svg{width:20px;height:20px;color:var(--text3)}
.s-recent-info{flex:1}
.s-recent-name{font-size:13px;color:var(--text)}
.s-recent-time{font-size:11px;color:var(--text3)}
#start-bottom{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;
  border-top:1px solid var(--border)}
#start-user{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius);
  cursor:pointer;transition:background .12s}
#start-user:hover{background:var(--card-hover)}
.user-avatar{width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center}
#start-user span{font-size:13px;color:var(--text2)}
#start-power{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text3);cursor:pointer;border-radius:var(--radius);
  transition:all .15s}
#start-power:hover{background:rgba(255,107,107,.15);color:var(--red)}

/* ====== SEARCH FLYOUT ====== */
#search-flyout{position:fixed;bottom:calc(var(--tb-h)+12px);left:50%;transform:translateX(-50%);
  width:640px;max-width:calc(100vw - 24px);max-height:520px;background:var(--acrylic);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border2);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);z-index:610;overflow:hidden;
  opacity:1;transition:opacity .2s,transform .25s var(--ease)}
#search-flyout.hidden{opacity:0;transform:translateX(-50%) translateY(16px);pointer-events:none}
#sf-inner{padding:20px}
#sf-input{width:100%;padding:10px 16px;background:rgba(255,255,255,.06);border:2px solid var(--accent);
  border-radius:var(--radius);color:var(--text);font-size:15px;font-family:var(--font);outline:none}
#sf-input::placeholder{color:var(--text3)}
#sf-results{margin-top:16px}
.sf-section-title{font-size:12px;font-weight:600;color:var(--text3);padding:8px 0 4px;text-transform:uppercase;letter-spacing:.5px}
.sf-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;
  transition:background .12s}
.sf-item:hover{background:var(--card-hover)}
.sf-item svg{width:18px;height:18px;color:var(--text3);flex-shrink:0}
.sf-item-name{font-size:13px;color:var(--text)}
.sf-item-desc{font-size:11px;color:var(--text3)}

/* ====== WINDOWS ====== */
#win-layer{position:fixed;inset:0;z-index:10;pointer-events:none}
.win{position:absolute;pointer-events:auto;display:flex;flex-direction:column;
  background:var(--mica);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  border:1px solid var(--border2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;
  min-width:360px;min-height:240px;
  animation:winOpen .25s var(--ease) forwards}
@keyframes winOpen{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.win.focused{box-shadow:var(--shadow-lg);border-color:rgba(255,255,255,.15)}
.win.max{top:0!important;left:0!important;width:100vw!important;height:calc(100vh - var(--tb-h))!important;
  border-radius:0;border:none;animation:none}
.win.min{display:none}
.win-title{height:var(--title-h);display:flex;align-items:center;padding:0 4px 0 12px;gap:8px;
  background:transparent;flex-shrink:0;-webkit-app-region:drag}
.win-title-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.win-title-icon svg{width:14px;height:14px;color:var(--text3)}
.win-title-text{flex:1;font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-ctrls{display:flex;-webkit-app-region:no-drag}
.win-ctrl-btn{width:46px;height:var(--title-h);display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text3);cursor:pointer;transition:all .1s}
.win-ctrl-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.win-ctrl-btn.close:hover{background:var(--red);color:#fff}
.win-body{flex:1;overflow:hidden;position:relative;background:rgba(0,0,0,.2)}
.win-resize{position:absolute;bottom:0;right:0;width:14px;height:14px;cursor:nwse-resize}

/* ====== COPILOT SIDEBAR ====== */
#copilot{position:fixed;top:0;right:0;bottom:var(--tb-h);width:400px;max-width:100vw;z-index:100;
  background:var(--acrylic);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-left:1px solid var(--border2);display:flex;flex-direction:column;
  transform:translateX(0);transition:transform .3s var(--ease),opacity .3s}
#copilot.closed{transform:translateX(100%);opacity:0;pointer-events:none}
#copilot-header{height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.copilot-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text)}
.copilot-title svg{color:var(--accent)}
#copilot-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.co-msg{padding:12px 16px;border-radius:var(--radius-lg);font-size:13px;line-height:1.6;max-width:90%;
  animation:msgIn .2s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.co-msg.user{background:var(--accent-bg2);color:var(--text);align-self:flex-end;border-bottom-right-radius:4px}
.co-msg.ai{background:var(--card);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;
  border:1px solid var(--border)}
.co-msg.ai .src{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.co-msg.ai .src a{font-size:11px;color:var(--accent);text-decoration:none;padding:2px 8px;
  background:var(--accent-bg);border-radius:12px}
.co-typing{display:flex;gap:4px;padding:12px 16px;align-self:flex-start}
.co-typing span{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:blink 1.2s infinite}
.co-typing span:nth-child(2){animation-delay:.2s}
.co-typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
#copilot-input{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0}
#copilot-ask{flex:1;padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--border2);
  border-radius:20px;color:var(--text);font-size:13px;font-family:var(--font);outline:none;resize:none;
  line-height:1.4;max-height:120px;transition:border-color .2s}
#copilot-ask:focus{border-color:var(--accent)}
#copilot-ask::placeholder{color:var(--text3)}
#copilot-send{width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;
  color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s,transform .15s}
#copilot-send:hover{background:#7DD8FF;transform:scale(1.05)}

/* ====== CONTEXT MENU ====== */
#ctx{position:fixed;z-index:700;background:var(--acrylic);backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);border:1px solid var(--border2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:4px;min-width:220px;animation:ctxIn .15s var(--ease)}
#ctx.hidden{display:none}
@keyframes ctxIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.ctx-item{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:6px;
  font-size:13px;color:var(--text);cursor:pointer;transition:background .1s}
.ctx-item:hover{background:var(--card-hover)}
.ctx-item svg{color:var(--text3);flex-shrink:0}
.ctx-sep{height:1px;background:var(--border);margin:4px 8px}

/* ====== TOAST ====== */
#toast{position:fixed;bottom:calc(var(--tb-h)+16px);right:16px;z-index:800;
  background:var(--acrylic);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);
  border:1px solid var(--border2);border-radius:var(--radius-lg);padding:14px 20px;
  box-shadow:var(--shadow);font-size:13px;color:var(--text);max-width:360px;
  transform:translateY(0);opacity:1;transition:all .3s var(--ease)}
#toast.hidden{transform:translateY(20px);opacity:0;pointer-events:none}

/* ====== APP: TERMINAL ====== */
.app-term{height:100%;display:flex;flex-direction:column;background:#0c0c0c}
.term-tabs{display:flex;background:#1e1e1e;border-bottom:1px solid #333;height:34px;align-items:flex-end;padding:0 8px}
.term-tab{padding:6px 16px;font-size:12px;color:#999;font-family:var(--mono);border-radius:6px 6px 0 0;
  cursor:pointer;transition:all .12s}
.term-tab.active{background:#0c0c0c;color:#ccc}
.term-out{flex:1;padding:12px 16px;overflow-y:auto;font-family:var(--mono);font-size:13px;
  line-height:1.6;color:#ccc;white-space:pre-wrap;word-wrap:break-word}
.t-prompt{color:var(--green)}
.t-path{color:var(--purple)}
.t-user{color:var(--accent)}
.t-cmd{color:#fff}
.t-err{color:var(--red)}
.t-info{color:var(--accent)}
.t-warn{color:var(--orange)}
.t-dim{color:#666}
.term-in{display:flex;align-items:center;padding:4px 16px 12px;background:#0c0c0c}
.term-in input{flex:1;background:transparent;border:none;color:#fff;font-family:var(--mono);
  font-size:13px;outline:none;caret-color:var(--green);margin-left:8px}

/* ====== APP: FILE EXPLORER ====== */
.app-explorer{height:100%;display:flex;flex-direction:column;background:#191919}
.exp-toolbar{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#1e1e1e;
  border-bottom:1px solid #333}
.exp-btn{padding:4px 8px;background:transparent;border:none;color:var(--text3);cursor:pointer;
  border-radius:4px;font-size:13px;transition:background .12s}
.exp-btn:hover{background:rgba(255,255,255,.06)}
.exp-path{flex:1;padding:4px 12px;background:rgba(255,255,255,.04);border:1px solid #333;
  border-radius:4px;color:var(--text3);font-size:12px;font-family:var(--mono)}
.exp-body{display:flex;flex:1;overflow:hidden}
.exp-sidebar{width:200px;border-right:1px solid #333;padding:8px;overflow-y:auto;background:#1a1a1a}
.exp-nav{padding:6px 10px;border-radius:4px;font-size:12px;color:var(--text2);cursor:pointer;
  display:flex;align-items:center;gap:8px;transition:background .12s}
.exp-nav:hover{background:rgba(255,255,255,.04)}
.exp-nav.active{background:var(--accent-bg);color:var(--accent)}
.exp-nav svg{width:16px;height:16px;flex-shrink:0}
.exp-grid{flex:1;padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:4px;align-content:start;overflow-y:auto}
.exp-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;
  border-radius:var(--radius);cursor:pointer;transition:background .12s;text-align:center}
.exp-item:hover{background:rgba(255,255,255,.04)}
.exp-item.sel{background:var(--accent-bg)}
.exp-item svg{width:32px;height:32px;color:var(--text3)}
.exp-item-name{font-size:11px;color:var(--text2);line-height:1.3;max-width:90px;
  overflow:hidden;text-overflow:ellipsis;word-break:break-word}
.exp-status{padding:4px 12px;background:#1e1e1e;border-top:1px solid #333;font-size:11px;color:var(--text3)}

/* ====== APP: SETTINGS ====== */
.app-settings{height:100%;display:flex;background:#1a1a1a}
.set-nav{width:240px;border-right:1px solid #333;padding:16px 8px;overflow-y:auto;background:#191919}
.set-nav-title{font-size:20px;font-weight:600;padding:8px 12px 20px;color:var(--text)}
.set-nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius);
  font-size:13px;color:var(--text2);cursor:pointer;transition:all .12s;margin-bottom:2px}
.set-nav-item:hover{background:rgba(255,255,255,.04)}
.set-nav-item.active{background:var(--accent-bg);color:var(--accent)}
.set-nav-item svg{width:18px;height:18px;flex-shrink:0}
.set-body{flex:1;padding:24px 32px;overflow-y:auto}
.set-section{margin-bottom:24px}
.set-title{font-size:16px;font-weight:600;margin-bottom:12px}
.set-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:8px}
.set-row{display:flex;align-items:center;justify-content:space-between}
.set-label{font-size:13px;color:var(--text2)}
.set-desc{font-size:11px;color:var(--text3);margin-top:2px}
.set-toggle{width:40px;height:22px;border-radius:11px;background:#444;border:none;cursor:pointer;
  position:relative;transition:background .2s}
.set-toggle.on{background:var(--accent)}
.set-toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .2s}
.set-toggle.on::after{transform:translateX(18px)}

/* ====== APP: NOTEPAD ====== */
.app-notepad{height:100%;display:flex;flex-direction:column;background:#1e1e1e}
.np-toolbar{display:flex;align-items:center;padding:4px 8px;background:#252525;border-bottom:1px solid #333;
  font-size:12px;color:var(--text3);gap:12px}
.np-toolbar button{background:transparent;border:none;color:var(--text3);cursor:pointer;padding:4px 8px;
  border-radius:4px;font-size:12px;font-family:var(--font);transition:background .12s}
.np-toolbar button:hover{background:rgba(255,255,255,.06);color:var(--text)}
.np-status{margin-left:auto}
.np-area{flex:1;width:100%;padding:16px 20px;background:#1e1e1e;border:none;color:#d4d4d4;
  font-family:var(--mono);font-size:14px;line-height:1.7;outline:none;resize:none}

/* ====== APP: MONITOR ====== */
.app-monitor{height:100%;background:#191919;display:flex;flex-direction:column;overflow-y:auto}
.mon-header{padding:16px 20px;font-size:15px;font-weight:600;border-bottom:1px solid #333}
.mon-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#333;flex:1}
.mon-cell{background:#191919;padding:16px;display:flex;flex-direction:column}
.mon-cell-title{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.mon-cell-val{font-size:28px;font-weight:300;font-variant-numeric:tabular-nums;margin-bottom:8px}
.mon-bar{height:3px;background:#333;border-radius:2px;overflow:hidden;margin-bottom:12px}
.mon-bar-fill{height:100%;border-radius:2px;transition:width .6s var(--ease)}
.mon-spark{width:100%;height:48px}

/* ====== APP: BROWSER ====== */
.app-browser{height:100%;display:flex;flex-direction:column;background:#1a1a1a}
.br-bar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#252525;
  border-bottom:1px solid #333}
.br-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text3);cursor:pointer;border-radius:4px;
  font-size:14px;transition:background .12s}
.br-btn:hover{background:rgba(255,255,255,.06)}
.br-url{flex:1;padding:5px 14px;background:rgba(255,255,255,.05);border:1px solid #444;
  border-radius:20px;color:var(--text);font-size:13px;font-family:var(--font);outline:none;
  transition:border-color .2s}
.br-url:focus{border-color:var(--accent)}
.br-frame{flex:1;border:none;background:#fff}

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

/* ====== RESPONSIVE ====== */
@media(max-width:768px){
  #start{width:calc(100vw - 12px);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    bottom:var(--tb-h)}
  #start-apps{grid-template-columns:repeat(4,1fr)}
  #search-flyout{width:calc(100vw - 12px)}
  #copilot{width:100vw;border-left:none}
  .set-nav{display:none}
  .exp-sidebar{display:none}
  .win{min-width:unset;top:0!important;left:0!important;width:100vw!important;
    height:calc(100vh - var(--tb-h))!important;border-radius:0;border:none}
  #tb-center{position:static;transform:none}
  .mon-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  :root{--tb-h:52px}
  #desk-icons{display:none}
  #start-apps{grid-template-columns:repeat(3,1fr)}
  #lock-time{font-size:48px}
}
@media(hover:none)and (pointer:coarse){
  .tb-btn,.win-ctrl-btn,.ctx-item,.s-app,.exp-item,.d-icon{min-height:44px}
}