/* TSG experience layer — scoped to the internal Hub, not client pages. */
:root { --bg:#101215; --panel:#191c21; --panel-2:#20242b; --raise:#292f38; --line:#2c323b; --line-2:#424c59; --muted:#9aa4b2; --ink:#f3f3ef; --ink-2:#c6cdd7; --blue:#6282ff; --blue-ink:#a5b7ff; --radius:14px; }
:root[data-theme="light"] { --bg:#f3f4f6; --panel:#fff; --panel-2:#eaedf2; --raise:#e1e6ef; --line:#d9dfe8; --line-2:#b6c0cf; --muted:#616c7c; --ink:#171c25; --ink-2:#454f60; --blue:#3457d5; --blue-ink:#2947bd; }
body { background-image:radial-gradient(ellipse at 90% 0%,rgba(74,104,195,.065),transparent 50%); }
.side { background:color-mix(in srgb,var(--bg) 65%,var(--panel)); }
.brand { padding:27px 23px 24px; }
.brand .mark { font-size:29px; letter-spacing:-.07em; }
.brand .sub { font-size:10px; letter-spacing:.075em; text-transform:uppercase; margin-top:9px; }
.nav { padding:8px 12px 20px; }
.nav h6 { font-size:9px; text-transform:uppercase; letter-spacing:.15em; margin-top:23px; }
.nav a { padding:9px 11px; gap:12px; transition:background .18s,color .18s,transform .18s; position:relative; }
.nav a:hover { transform:translateX(2px); }
.nav a.on { background:linear-gradient(100deg,var(--blue-wash),transparent); box-shadow:inset 2px 0 0 var(--blue); }
.nav a.on .nav-icon { color:var(--blue-ink); }
.nav-icon { height:18px; width:18px; flex-shrink:0; }
.topbar { padding:18px 32px; backdrop-filter:blur(24px); background:color-mix(in srgb,var(--bg) 83%,transparent); }
.topbar h1 { font-size:19px; letter-spacing:-.035em; }
.topbar p { font-size:12px; }
.content { max-width:1600px; padding:26px 32px 64px; }
.card { background:linear-gradient(125deg,color-mix(in srgb,var(--panel) 92%,var(--ink)),var(--panel) 55%); box-shadow:0 8px 25px -20px #0009; }
.card.kpi { position:relative; overflow:hidden; padding:22px; transition:border-color .25s,transform .25s; }
.card.kpi:hover { transform:translateY(-3px); border-color:var(--line-2); }
.card.kpi::before { content:''; position:absolute; top:0; left:20px; right:20px; height:1px; background:linear-gradient(90deg,transparent,var(--blue),transparent); opacity:.45; }
.kpi .value { font-size:29px; letter-spacing:-.065em; }
.kpi .label { font-size:11px; }
.section-title { text-transform:uppercase; letter-spacing:.12em; font-size:10px; margin-top:27px; }
.btn { transition:background .18s,border-color .18s,box-shadow .18s,transform .18s; }
.btn:active { transform:translateY(1px); }
.btn.primary { background:linear-gradient(135deg,#5679f2,#3457d5); color:#fff; border-color:#7390f7; box-shadow:inset 0 1px 0 #ffffff24,0 4px 18px #3457d520; }
.btn.primary:hover { box-shadow:0 4px 24px #3457d545; }
.bar { overflow:hidden; }
.bar i { background:linear-gradient(90deg,#3457d5,#8ba6ff); transform-origin:left; animation:bar-reveal .6s ease-out both; }
.experience-tools { display:flex; align-items:center; gap:8px; }
.command-trigger { display:flex; gap:22px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--muted); padding:8px 10px; font-size:11px; cursor:pointer; }
kbd { font:10px var(--mono); padding:2px 5px; border:1px solid var(--line-2); border-radius:4px; }
.focus-trigger { font-size:11px; }
.focus-mode .shell { grid-template-columns:1fr; }
.focus-mode .side { display:none; }
.focus-mode .content { max-width:1600px; margin:auto; }
.focus-mode .menu-btn { display:none; }
.overview-hero { min-height:330px; border:1px solid var(--line); border-radius:18px; display:grid; grid-template-columns:1.15fr 1fr; overflow:hidden; margin-bottom:22px; position:relative; background:radial-gradient(ellipse at 90% 60%,#3457d520,transparent 60%),linear-gradient(130deg,var(--panel),var(--bg)); }
.hero-copy { padding:35px 38px; z-index:1; }
.eyebrow { font:9px var(--mono); letter-spacing:.15em; color:var(--muted); display:flex; align-items:center; gap:9px; }
.status-point { width:5px; height:5px; border-radius:50%; background:var(--blue); box-shadow:0 0 12px #6282ff77; }
.hero-copy h2 { font-size:clamp(27px,2.6vw,43px); line-height:1.12; letter-spacing:-.055em; font-weight:500; margin:22px 0 14px; }
.hero-copy h2 span { color:var(--muted); }
.hero-copy p { color:var(--muted); font-size:13px; line-height:1.65; margin:0; }
.hero-links { display:flex; align-items:center; gap:23px; margin-top:24px; }
.hero-links .btn { padding:10px 15px; }
.hero-link { color:var(--ink-2); font-size:12px; }
.hero-link span { margin-left:7px; }
.hero-meta { display:flex; gap:20px; font:9px var(--mono); color:var(--muted); margin-top:25px; }
.tsg-sculpture { position:relative; min-height:310px; overflow:hidden; perspective:850px; pointer-events:none; }
.sculpture-grid { position:absolute; inset:0; background-image:linear-gradient(#7c94c90a 1px,transparent 1px),linear-gradient(90deg,#7c94c90a 1px,transparent 1px); background-size:38px 38px; mask-image:radial-gradient(ellipse,#000,transparent 72%); }
.sculpture-object { width:190px; height:190px; position:absolute; top:45%; left:50%; transform-style:preserve-3d; transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-35deg); animation:sculpture-orbit 16s ease-in-out infinite alternate; }
.sculpture-object i { position:absolute; inset:0; border:1px solid #c4d8ff80; border-radius:17px; background:linear-gradient(135deg,#e3eafb90,#68779022 32%,#b5c6e75e 65%,#f2f6ffbb); box-shadow:inset 0 0 24px #b6ceff23,7px 7px 0 #313a4b,-1px -1px 0 #e2eaff88,0 24px 40px #0004; }
.sculpture-object i:nth-child(1) { transform:translateZ(-60px); }
.sculpture-object i:nth-child(2) { transform:translateZ(-25px); inset:9px; }
.sculpture-object i:nth-child(3) { transform:translateZ(12px); background:linear-gradient(135deg,#92bcffdb,#3457d590 60%,#76a9ffed); border-color:#98b8ff; box-shadow:inset 0 0 35px #8ab5ff80,6px 6px 0 #294bb2,0 0 65px #3457d54d; }
.sculpture-object i:nth-child(4) { transform:translateZ(50px); inset:9px; }
.sculpture-object i:nth-child(5) { transform:translateZ(86px); }
.sculpture-caption { position:absolute; bottom:26px; left:0; right:0; text-align:center; color:var(--muted); font:8px var(--mono); letter-spacing:.2em; }
.command-dialog { padding:0; color:var(--ink); background:color-mix(in srgb,var(--panel) 96%,transparent); backdrop-filter:blur(28px); border:1px solid var(--line-2); border-radius:18px; width:min(650px,calc(100vw - 28px)); max-height:80vh; margin:12vh auto auto; box-shadow:0 30px 100px #0009,0 0 100px #3457d513; overflow:hidden; }
.command-dialog[open] { animation:command-arrive .22s ease-out; }
.command-dialog::backdrop { background:#050810a6; backdrop-filter:blur(7px); }
.command-heading { display:flex; align-items:center; justify-content:space-between; padding:16px 22px 0; }
.command-input { width:100%; border:0; background:transparent; color:var(--ink); padding:20px 22px; font-size:23px; letter-spacing:-.035em; outline:none; }
.command-input:focus-visible { outline:2px solid var(--blue); outline-offset:-3px; }
.command-results { padding:7px; border-top:1px solid var(--line); max-height:45vh; overflow:auto; }
.command-result { width:100%; display:flex; align-items:center; text-align:left; gap:16px; padding:13px 15px; border:1px solid transparent; border-radius:10px; background:transparent; cursor:pointer; }
.command-result.selected,.command-result:hover { background:var(--blue-wash); border-color:color-mix(in srgb,var(--blue) 25%,transparent); }
.command-result.selected .nav-icon { color:var(--blue-ink); }
.command-result b { display:block; font-weight:500; }
.command-result small { display:block; color:var(--muted); margin-top:3px; font-size:11px; }
.command-enter { margin-left:auto; color:var(--muted); }
.command-footer { padding:12px 22px; border-top:1px solid var(--line); display:flex; gap:22px; color:var(--muted); font:9px var(--mono); }
.command-empty { padding:28px; color:var(--muted); }
.ask-welcome .tsg-sculpture { min-height:215px; }
.ask-welcome .sculpture-object { scale:.65; transform-origin:0 0; }
.ask-welcome .sculpture-caption { display:none; }
.ask-welcome .eyebrow { justify-content:center; margin-bottom:15px; }
.ask-welcome h2 { margin-bottom:15px!important; }
.ask-welcome .suggest { gap:9px; margin-top:26px; }
.ask-welcome .filter-chip { border-radius:10px; padding:12px 15px; text-align:left; }
.ask-input .inner { border:1px solid var(--line-2); background:var(--panel); padding:8px; border-radius:14px; box-shadow:0 0 25px #3457d509; transition:border-color .2s; }
.ask-input .inner:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash); }
.ask-input textarea { border:none; background:transparent; }
.thinking { position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; font-style:normal; padding:18px; border:1px solid var(--line); border-radius:12px; }
.thinking-light { height:2px; position:absolute; top:0; left:-30%; width:30%; background:linear-gradient(90deg,transparent,var(--blue),transparent); animation:thinking-scan 2s linear infinite; }
.thinking-dots { display:flex; gap:4px; }
.thinking-dots i { width:3px; height:3px; border-radius:50%; background:var(--blue); animation:thinking-dot 1.2s infinite; }
.thinking-dots i:nth-child(2) { animation-delay:.15s; }.thinking-dots i:nth-child(3) { animation-delay:.3s; }
.drawer { animation:drawer-arrive .26s cubic-bezier(.2,.8,.2,1); }
.drawer-head { background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(20px); }
.turn.assistant:not(.thinking) { animation:content-arrive .3s ease-out; }
.workspace-loading { padding:60px 20px; text-align:center; color:var(--muted); font-size:12px; }
.workspace-loading > span { display:inline-block; width:5px; height:5px; margin:3px; background:var(--blue); border-radius:50%; animation:thinking-dot 1.2s infinite; }
.workspace-loading > span:nth-child(2) { animation-delay:.15s; }.workspace-loading > span:nth-child(3) { animation-delay:.3s; }
.experience-enter .brand { animation:content-arrive .5s ease-out; }
.experience-enter .nav { animation:content-arrive .5s .08s ease-out both; }
#view > .grid,#view > .overview-hero { animation:content-arrive .45s ease-out both; }
#view > .grid { animation-delay:.07s; }
@keyframes sculpture-orbit { from { transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-35deg); } to { transform:translate(-50%,-54%) rotateX(63deg) rotateZ(-15deg); } }
@keyframes content-arrive { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes drawer-arrive { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } }
@keyframes command-arrive { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes bar-reveal { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes thinking-scan { to { left:100%; } }
@keyframes thinking-dot { 50% { opacity:.25; transform:translateY(-2px); } }
@media (max-width:1200px) { .command-trigger span { display:none; }.command-trigger { gap:0; }.topbar { padding:16px 22px; }.content { padding:22px; }.hero-copy { padding:30px; } }
@media (max-width:760px) { .experience-tools { margin-left:auto; }.focus-trigger { display:none; }.topbar { gap:10px; padding:13px 16px; }.topbar p { max-width:240px; font-size:11px; }#page-actions { width:100%; }.content { padding:16px 16px 40px; }.overview-hero { min-height:0; grid-template-columns:1fr; }.hero-copy { padding:25px; }.hero-copy h2 { font-size:30px; }.overview-hero .tsg-sculpture { min-height:220px; grid-row:2; margin-top:-10px; }.overview-hero .sculpture-object { scale:.72; transform-origin:0 0; }.sculpture-caption { bottom:14px; }.hero-links { gap:18px; }.hero-meta { gap:16px; }.command-footer { gap:12px; font-size:8px; }.command-input { font-size:20px; }.ask-welcome h2 { font-size:30px!important; }.ask .turns { padding:16px; }.ask-input { padding:10px; }.card.kpi { padding:18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media print { .experience-tools,.tsg-sculpture,.overview-hero,.command-dialog { display:none!important; } }
@media (max-width:760px) {
  .topbar > div:nth-child(2) { flex:1; min-width:0; }
  .topbar > div:nth-child(2) p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar > .spacer { display:none; }
  .experience-tools { margin-left:0; }
  .overview-hero .tsg-sculpture { min-height:240px; }
  .overview-hero .sculpture-object { top:52%; }
}
.ask-welcome .sculpture-object { top:57%; }
.ask { height:calc(100dvh - 87px); }
@media (max-width:760px) { .ask { height:calc(100dvh - 76px); } }