/* GarryHQ visual layer. Existing application, access checks and data stay authoritative. */
:root {
  --background:#080d18; --foreground:#eef4ff; --card:#101929;
  --muted-foreground:#acbbd0; --primary:#6ce5f2; --secondary:#19263a;
  --border:#283950; --hq-cyan:#6ce5f2; --hq-violet:#a99bff;
  --hq-glow:rgba(61,210,235,.14); --hq-panel:rgba(16,25,41,.94);
  color-scheme:dark;
}
html { min-height:100%; background:var(--background); }
body {
  margin:0; color:var(--foreground); background:var(--background);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background-image:radial-gradient(ellipse at 12% 0%,#1749614d,transparent 38%),radial-gradient(ellipse at 92% 30%,#51357524,transparent 42%);
  isolation:isolate;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:linear-gradient(#8aadcf08 1px,transparent 1px),linear-gradient(90deg,#8aadcf08 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(#000,transparent 85%);
}
body[data-hq-accent="violet"] { --primary:#c1afff; --hq-cyan:#c1afff; --hq-glow:#a89bff22; }
* { box-sizing:border-box; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:2px solid var(--primary); outline-offset:4px;
}
#garry-usb-download { max-width:1516px!important; margin:18px auto 0!important; padding:0 30px!important; }
#garry-usb-download a {
  background:linear-gradient(100deg,#152334,#12201f)!important;
  border:1px solid #365568!important; border-radius:12px!important;
  color:#dbeefa!important; padding:12px 18px!important;
}
#garry-usb-download strong::before { content:"↗"; color:var(--primary); margin-right:12px; }
#garry-usb-download a:hover { border-color:var(--primary)!important; }
main.shell { max-width:1516px; margin:0 auto; padding:26px 30px 36px; }
.topbar { border-bottom:1px solid var(--border); padding:0 0 23px; margin-bottom:18px; gap:18px; }
.brand { gap:13px; }
.brand strong { font-size:27px; letter-spacing:-1px; }
.monogram {
  width:49px; height:49px; border-radius:14px; font-size:25px; color:#07121c;
  background:linear-gradient(140deg,#b0f6f4,#63d4ef 62%,#afa0ff);
  box-shadow:0 0 32px #54d3e522,inset 0 1px #fff9; position:relative;
}
.monogram::after { content:""; position:absolute; inset:-4px; border:1px solid #76e0f23a; border-radius:18px; }
.eyebrow { font-size:10px; letter-spacing:.17em; color:#b1c4d9; }
.topright { flex-wrap:wrap; gap:8px; }
.topright .btn { min-height:39px; font-size:12px; background:#111d2b; border-color:#314259; }
.topright .desktop-only { font-size:12px; color:#b2c6d8; }
.hq-status-strip {
  border:1px solid #293e55; border-radius:14px; display:flex; align-items:center; gap:20px;
  margin:0 0 20px; padding:13px 18px; background:linear-gradient(100deg,#122233cc,#12182ecc);
  font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.06em;
}
.hq-cloud-label { display:flex; align-items:center; gap:11px; color:#c6d8ed; }
.hq-cloud-label svg { width:26px; height:26px; color:var(--primary); }
.hq-status-detail { color:#8fa7be; letter-spacing:0; margin-top:3px; }
.hq-reach { display:flex; align-items:center; gap:7px; color:#b9ccdf; margin-left:auto; }
.hq-reach-dot { width:7px; height:7px; border-radius:50%; background:#93a6bd; }
.hq-reach[data-state="online"] { color:#8bf0d2; }
.hq-reach[data-state="online"] .hq-reach-dot { background:#8bf0d2; box-shadow:0 0 0 4px #80e6c711; }
.hq-reach[data-state="offline"] { color:#ffd28e; }
.hq-reach[data-state="offline"] .hq-reach-dot { background:#ffd28e; }
.hq-clock { font-variant-numeric:tabular-nums; color:#becbe2; min-width:76px; }
.hq-small-button { border:1px solid #354c66; background:#182a40; border-radius:8px; padding:8px 10px; color:#e0ecff; font:inherit; cursor:pointer; }
.hq-small-button:hover { border-color:var(--primary); }
.hq-small-button svg { width:16px; height:16px; flex-shrink:0; vertical-align:middle; }
.hq-command-button { display:inline-flex; align-items:center; gap:12px; white-space:nowrap; }
.hq-command-button kbd { border:1px solid #436178; border-radius:4px; padding:2px 5px; color:#9fbbd0; font:10px ui-monospace,monospace; }
.hq-offline-banner { border:1px solid #886c39; background:#322719; border-radius:12px; padding:14px 18px; color:#ffe0a8; margin:0 0 16px; font-size:14px; }
.hq-offline-banner a { color:#fff0ce; text-decoration:underline; margin-left:8px; }
.hq-offline-banner[hidden] { display:none!important; }
main.shell.garry-tech-shell > [data-slot="tabs"] {
  display:grid; grid-template-columns:212px minmax(0,1fr); align-items:start; column-gap:26px; row-gap:16px; margin-top:20px;
}
main.shell.garry-tech-shell > [data-slot="tabs"] > .navtabs {
  grid-column:1; grid-row:1/span 5; display:flex; flex-direction:column; align-items:stretch;
  gap:5px!important; padding:12px!important; margin:0; border:1px solid #2b3d55; border-radius:17px!important;
  background:linear-gradient(160deg,#132033ed,#0e1727f2)!important; position:sticky; top:22px;
  max-height:calc(100dvh - 44px); overflow-y:auto; overflow-x:hidden;
  box-shadow:0 12px 35px #0002; scrollbar-width:thin; scrollbar-color:#3b5870 transparent;
}
main.shell.garry-tech-shell > [data-slot="tabs"] > .navtabs::before {
  content:"WORKSPACE"; font:10px/1.5 ui-monospace,monospace; letter-spacing:.17em; color:#9ab3ce; padding:6px 11px 10px;
}
main.shell.garry-tech-shell > [data-slot="tabs"] > :not(.navtabs) { grid-column:2; min-width:0; width:100%; }
[data-slot="tabs-content"][hidden] { display:none!important; }
main.shell .navtab {
  justify-content:flex-start!important; min-width:0; min-height:43px; width:100%; padding:10px 11px!important;
  border:1px solid transparent!important; border-radius:9px!important; background:transparent!important;
  color:#b5c5dc!important; font-size:13px!important; font-weight:500!important; gap:10px!important;
  text-align:left; box-shadow:none!important; transition:background .18s,border-color .18s,color .18s;
}
main.shell .navtab::after { display:none!important; }
main.shell .navtab::before { content:"◇"; color:#90b5cf; font:16px/1 ui-monospace,monospace; width:18px; text-align:center; flex-shrink:0; }
main.shell .navtab:nth-child(1)::before { content:"◈"; }
main.shell .navtab:nth-child(2)::before { content:"↗"; }
main.shell .navtab:nth-child(3)::before { content:"⌁"; }
main.shell .navtab:nth-child(4)::before { content:"⇣"; }
main.shell .navtab:nth-child(5)::before { content:"$"; }
main.shell .navtab:nth-child(6)::before { content:"▦"; }
main.shell .navtab:nth-child(7)::before { content:"✓"; }
main.shell .navtab:nth-child(8)::before { content:"✦"; }
main.shell .navtab:nth-child(9)::before { content:"◉"; }
main.shell .navtab:nth-child(10)::before { content:"⌘"; }
main.shell .navtab:nth-child(11)::before { content:"●"; }
main.shell .navtab:nth-child(12)::before { content:"➤"; }
main.shell .navtab:nth-child(13)::before { content:"◎"; }
main.shell .navtab:nth-child(14)::before { content:"▥"; }
main.shell .navtab:nth-child(15)::before { content:"+"; }
main.shell .navtab svg { width:16px; height:16px; flex-shrink:0; opacity:.9; }
main.shell .navtab:hover { background:#22365088!important; color:#f0f7ff!important; }
main.shell .navtab[aria-selected="true"],main.shell .navtab[data-active] {
  color:#ddfaff!important; background:linear-gradient(110deg,#224553,#1d2d47)!important;
  border-color:#568e9f!important; box-shadow:inset 3px 0 var(--primary),0 0 22px #53cbe80a!important;
}
.page-heading { margin-bottom:22px; gap:18px; }
h1 { font-size:clamp(28px,3.2vw,40px); font-weight:650; letter-spacing:-1.1px; line-height:1.12; }
h2 { font-size:19px; letter-spacing:-.4px; }
.page-heading .subtle { max-width:760px; line-height:1.7; }
.panel,.service-card,.transaction-totals>div {
  background:var(--hq-panel); border-color:#304158; border-radius:17px;
  box-shadow:0 10px 28px #0002,inset 0 1px #fff03;
}
.panel { padding:24px; }
.service-card { position:relative; overflow:hidden; padding:21px; gap:15px; transition:transform .2s,border-color .2s; }
.service-card::before { content:""; position:absolute; left:20px; right:20px; top:0; height:1px; background:linear-gradient(90deg,transparent,#81d8ee88,transparent); }
.service-card:hover { border-color:#597b98; transform:translateY(-2px); }
.service-card .metric { color:#edf6ff; font-size:24px; letter-spacing:-.6px; }
.service-card .detail { line-height:1.6; }
.grid-status { gap:13px; }
.workspace-grid { gap:20px; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); }
.workspace-grid>* { min-width:0; }
.btn { border-radius:9px; min-height:43px; border-color:#3b4d64; background:#1a293e; color:#eaf3ff; cursor:pointer; }
.btn.primary { background:linear-gradient(120deg,#a5f1f4,var(--primary)); color:#071b25; border-color:#a1eaf1; box-shadow:0 3px 16px #7ee1ed18; }
.btn.quiet { background:#17233877; }
.btn:disabled { cursor:default; opacity:.55; }
.badge { border:1px solid #43566d66; background:#25334a; color:#c8d9ed; font-size:11px; }
.badge.good { background:#133c38; color:#9cf4d7; border-color:#477e7055; }
.badge.warn { background:#453620; color:#ffda99; }
.chat-emblem { background:radial-gradient(at 20% 0%,#4da5b4,#17364a 65%); border:1px solid #548d9e; color:#bdf9fb; box-shadow:0 0 36px #4be8f214; }
.chat-intro { gap:18px; }
.chat-intro p { line-height:1.7; }
.suggestions button { background:#17243a; border-color:#354b66; color:#c7d8ee; min-height:40px; border-radius:9px; }
.suggestions button:hover { border-color:var(--primary); color:var(--primary); }
.compose { background:#0a1424; border-color:#497082; border-radius:14px; box-shadow:0 0 0 4px #62cde904; }
.compose:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px #77dce818; }
.compose textarea { color:#eaf5ff; }
.message { background:#101b2e; border-color:#32465f; border-radius:13px; }
.message.user { background:#19373e; border-color:#3e737b; }
.activity-mark { box-shadow:0 0 11px #62d8ef44; }
.activity-row p { line-height:1.6; }
.tool-grid { gap:15px; }
.channel-item { border-color:#35485f; background:#101c2e; }
.channel-item.selected { background:#1d3a47; border-color:#76b4c1; }
.fact-row { border-color:#2b3e55; }
.footer { padding-top:20px; border-top:1px solid #283950; font-size:12px; color:#9fb3c9; }
.notice { border-radius:12px; }
.notice.info { background:#142e43; border-color:#385c78; color:#d0e5fb; }
.task-lane { background:#142239; border-color:#344b64; }
.task-lane.selected { background:#1b3841; border-color:#7accd3; box-shadow:inset 0 3px var(--primary); }
.task-card { background:#17253a; border-color:#3b506b; }
.task-pool { background:#101b2d; border-color:#344a61; }
.transaction-next { background:#173b3c; border-color:#4a7c82; }
.transaction-sheet { border-color:#3c536f; }
.transaction-sheet thead th { background:#1e3349; color:#d3eaf7; }
.transaction-sheet tbody th { background:#12293d; }
.transactions-page input,.transactions-page select,.dropbox-panel input:not([type=file]),.dropbox-panel textarea { background:#0b1627; border-color:#415870; }
.idea-map { background:radial-gradient(at 40% 30%,#274d63,#142039 55%,#10182a); border-color:#3b5671; }
.idea-node { background:#1c3048f0; border-color:#52738b; }
.idea-node:hover,.idea-node.active { background:#285164; border-color:#a2e7f1; }
.login-shell { background:radial-gradient(ellipse at 35% 0%,#1a4d654d,transparent 55%),radial-gradient(ellipse at 85% 80%,#5845832b,transparent 50%),#080d18; }
.pin-panel { background:linear-gradient(150deg,#152238ee,#101a2cf7); border:1px solid #46617d; border-radius:23px; box-shadow:0 30px 110px #0006,0 0 70px #42cce708; padding:38px; }
.login-brand { font-size:27px; margin-bottom:30px; }
.pin-input { background:#0a1323; color:#f1f7ff; border-color:#52708b; letter-spacing:8px; }
.login-foot { color:#a7bad1; }
.hq-dialog {
  width:min(620px,calc(100vw - 28px)); max-height:min(650px,85dvh); padding:0; color:#eff6ff;
  background:#101c2e; border:1px solid #5b7c9b; border-radius:18px; box-shadow:0 35px 130px #0009; margin:auto;
}
.hq-dialog::backdrop { background:#030914c9; backdrop-filter:blur(7px); }
.hq-dialog-top { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid #2d455e; }
.hq-dialog-top svg { flex-shrink:0; width:21px; height:21px; color:var(--primary); }
.hq-dialog-search { border:0; background:transparent; padding:4px 0; color:#edf5ff; width:100%; font-family:inherit; font-size:17px; line-height:1.5; outline:none; }
.hq-dialog-search::placeholder { color:#9fb4ca; }
.hq-dialog-close { color:#afc3d7; border:1px solid #46617d; background:#1d2d43; border-radius:7px; padding:7px 9px; cursor:pointer; }
.hq-dialog-results { padding:10px; overflow-y:auto; max-height:430px; }
.hq-dialog-row { display:flex; align-items:center; gap:13px; width:100%; border:1px solid transparent; background:transparent; color:#dceaff; font-family:inherit; font-size:15px; line-height:1.5; text-align:left; padding:13px 12px; min-height:48px; border-radius:10px; cursor:pointer; }
.hq-dialog-row svg { width:19px; height:19px; color:#93c4dd; flex-shrink:0; }
.hq-dialog-row .hq-row-hint { margin-left:auto; color:#90b2c9; font-size:11px; }
.hq-dialog-row:hover,.hq-dialog-row[aria-selected="true"] { background:#203d51; border-color:#578799; color:#eaffff; }
.hq-dialog-foot { padding:12px 20px; border-top:1px solid #2d455e; font-size:11px; color:#a4b8cd; line-height:1.5; }
.hq-dialog-empty { padding:22px; color:#afc3d6; }
.hq-theme-button { min-width:36px; }
@media(min-width:1250px) { .grid-status { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1249px) { .grid-status { grid-template-columns:repeat(2,minmax(0,1fr)); } .workspace-grid { grid-template-columns:1fr; } }
@media(max-width:900px) {
  main.shell.garry-tech-shell > [data-slot="tabs"] { display:block; margin-top:18px; }
  main.shell.garry-tech-shell > [data-slot="tabs"] > .navtabs { position:relative; top:auto; flex-direction:row; width:100%; flex-wrap:nowrap; max-height:none; overflow-x:auto; overflow-y:hidden; padding:8px!important; margin-bottom:24px; border-radius:13px!important; }
  main.shell.garry-tech-shell > [data-slot="tabs"] > .navtabs::before { display:none; }
  main.shell .navtab { width:auto; flex-shrink:0; min-height:44px; padding:11px 13px!important; }
  main.shell .navtab[aria-selected="true"],main.shell .navtab[data-active] { box-shadow:inset 0 -2px var(--primary)!important; }
  main.shell { padding:22px; }
  #garry-usb-download { padding:0 22px!important; }
  .hq-status-strip { flex-wrap:wrap; gap:12px; }
  .hq-cloud-label { margin-right:auto; }
  .hq-reach { margin-left:0; }
}
@media(max-width:580px) {
  main.shell { padding:19px 14px 26px; }
  #garry-usb-download { padding:0 14px!important; margin-top:12px!important; }
  #garry-usb-download a { padding:10px 13px!important; font-size:12px!important; }
  #garry-usb-download a span { font-size:11px; }
  .topbar { align-items:flex-start; flex-direction:row; flex-wrap:nowrap; gap:14px; padding-bottom:18px; }
  .brand strong { font-size:23px; }
  .monogram { width:43px; height:43px; font-size:23px; }
  .brand .eyebrow { max-width:110px; font-size:9px; letter-spacing:.1em; }
  .topright { max-width:180px; justify-content:flex-end; gap:6px; }
  .topright .btn { min-height:36px; font-size:11px; padding:7px 9px; }
  .topright .badge { font-size:10px; padding:5px 8px; }
  .hq-status-strip { padding:12px 13px; gap:11px; font-size:10px; }
  .hq-cloud-label { width:calc(100% - 40px); margin:0; }
  .hq-theme-button { margin-left:auto; order:1; }
  .hq-command-button { order:3; margin-left:auto; }
  .hq-command-button kbd { display:none; }
  .hq-reach { order:2; max-width:calc(100% - 118px); }
  .hq-clock { display:none; }
  .hq-cloud-label svg { width:23px; height:23px; }
  .hq-status-detail { font-size:10px; }
  .hq-small-button { padding:8px; }
  h1 { font-size:29px; }
  .page-heading .subtle { font-size:14px; }
  .panel { padding:19px 16px; border-radius:14px; }
  .grid-status { gap:10px; }
  .service-card { padding:16px 13px; gap:13px; }
  .service-card .metric { font-size:20px; }
  .service-card .detail { font-size:12px; }
  .service-card .card-head { flex-direction:column; gap:10px; }
  .chat-intro { padding:9px 0; align-items:flex-start; }
  .chat-intro p { font-size:14px; }
  .chat-emblem { width:45px; height:45px; border-radius:13px; }
  .compose textarea { font-size:16px; min-height:83px; }
  .compose-foot { gap:10px; font-size:11px; }
  .suggestions { gap:7px; }
  .suggestions button { font-size:12px; padding:8px 10px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }