:root{
  --bg:#fbfbfa; --surface:#ffffff; --text:#1c1f1d; --text-dim:#6b716c;
  --accent:#7C3AED; --accent-dim:#efeafd; --border:#e4e4e0; --link:#1558d6;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#15181a; --surface:#1d2124; --text:#edf1ee; --text-dim:#9aa39d;
          --accent:#a78bfa; --accent-dim:#221a3a; --border:#2b302e; --link:#7fb0ff; }
}
a{color:var(--link)}
button{padding:11px 22px;font-size:14px;font-weight:600;border:none;border-radius:20px;
     background:var(--accent-dim);color:var(--accent);cursor:pointer;transition:opacity .15s}
button:hover{opacity:0.8}
.gbar{display:flex;align-items:center;justify-content:flex-end;gap:4px;
     padding:8px 20px;font-size:13px;position:relative;z-index:20}
.account-link{background:none;border:none;color:var(--link);font-size:13px;font-weight:600;
     cursor:pointer;padding:8px 14px;border-radius:16px}
.account-link:hover{background:var(--accent-dim)}
.gbar-item{position:relative}
.account-dropdown{display:flex;align-items:center;gap:6px}
.account-dropdown input{margin-bottom:0;padding:7px 10px;font-size:13px;width:140px;flex:none;border-radius:16px}
.account-dropdown button{padding:7px 14px;font-size:13px}
.signin-error{color:#e05252;font-size:11.5px;align-self:center;max-width:160px}
#account-signed-in{display:flex;align-items:center;gap:8px}
#account-name-btn{background:var(--surface);border:1px solid var(--border);border-radius:18px;
     padding:6px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text)}
#account-name-btn:hover{background:var(--accent-dim)}
.account-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);
     border:1px solid var(--border);border-radius:10px;padding:10px;width:230px;
     box-shadow:0 4px 18px rgba(0,0,0,.12);z-index:50;display:flex;flex-direction:column;gap:2px}
.account-menu[hidden]{display:none}
.account-menu-item{display:block;text-align:left;background:none;border:none;padding:9px 10px;
     border-radius:6px;cursor:pointer;font-size:13px;color:var(--text);text-decoration:none}
.account-menu-item:hover{background:var(--accent-dim)}
.account-menu-sep{border:none;border-top:1px solid var(--border);margin:4px 0}
.account-menu-stats{font-size:10.5px;color:var(--text-dim);padding:6px 10px 2px}
#account-name-display{font-weight:600;color:var(--text)}
.apps-grid-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;
     color:var(--text-dim);display:flex;align-items:center}
.apps-grid-btn:hover{background:var(--accent-dim)}
.account-dropdown[hidden],.apps-grid-panel[hidden],.apps-grid-btn[hidden],.gbar-item[hidden],#account-signed-in[hidden],#account-signed-out[hidden],.apps-grid-tile[hidden]{display:none}
.apps-grid-panel{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);
     border:1px solid var(--border);border-radius:12px;padding:16px;width:300px;max-height:360px;
     overflow-y:auto;box-shadow:0 4px 18px rgba(0,0,0,.14);z-index:50;
     display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.apps-grid-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;
     border-radius:8px;text-decoration:none;color:var(--text);text-align:center}
.apps-grid-tile:hover{background:var(--accent-dim)}
.apps-grid-icon{font-size:22px}
.apps-grid-name{font-size:10.5px;line-height:1.2;color:var(--text)}
.apps-grid-viewrow{display:flex;justify-content:flex-end;gap:4px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.apps-view-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 8px;cursor:pointer;color:var(--text-dim);font-size:13px;line-height:1}
.apps-view-btn.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
.apps-grid-panel.list-view{display:flex;flex-direction:column;gap:2px}
.apps-grid-panel.list-view .apps-grid-tile{flex-direction:row;justify-content:flex-start;gap:10px;padding:7px 8px;text-align:left}
.apps-grid-panel.list-view .apps-grid-icon{font-size:17px}
.apps-grid-tile{cursor:grab}
.apps-grid-tile.dragging{opacity:0.35}
.apps-grid-tile.drag-over{outline:2px dashed var(--accent);outline-offset:-2px}