/* Glass layer: translucent, blurred surfaces over a soft ambient background, loaded after styles.css.
   It only restyles surfaces (backgrounds, borders, radii, shadows); layout stays in styles.css.
   Removing the <link> to this file brings the previous look back. */
:root{
 --glass:rgba(255,255,255,.055);--glass-hover:rgba(255,255,255,.085);--glass-strong:rgba(24,24,28,.84);--glass-solid:rgba(22,22,26,.86);
 --glass-border:rgba(255,255,255,.1);--glass-border-strong:rgba(255,255,255,.16);--glass-highlight:inset 0 1px 0 rgba(255,255,255,.1);
 --glass-blur:blur(22px) saturate(170%);--glass-blur-strong:blur(34px) saturate(180%);
 --glass-shadow:0 1px 2px rgba(0,0,0,.25),0 18px 50px -24px rgba(0,0,0,.65);
 --radius-card:18px;--radius-control:11px;--ease:cubic-bezier(.2,.8,.2,1)
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Ambient light behind the glass: without something to blur, glass reads as flat grey. */
body{background:#0B0B0D}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(40vmax 30vmax at 82% 8%,rgba(255,34,34,.30),transparent 68%),
  radial-gradient(34vmax 28vmax at 8% 88%,rgba(255,40,110,.16),transparent 70%),
  radial-gradient(30vmax 26vmax at 45% 55%,rgba(110,90,255,.09),transparent 70%),
  radial-gradient(26vmax 22vmax at 30% 10%,rgba(255,120,60,.08),transparent 70%)}
.app-shell{background:transparent}

/* Sidebar and top bar: frosted panels that let the ambient light through. */
.sidebar{background:rgba(18,18,22,.42);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-right:1px solid var(--glass-border)}
.topbar{position:sticky;top:0;z-index:8;background:rgba(12,12,15,.38);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border)}
.workspace-picker{background:var(--glass);border-color:var(--glass-border);border-radius:14px;box-shadow:var(--glass-highlight);transition:background .2s var(--ease)}
.workspace-picker:hover{background:var(--glass-hover)}
.nav-item{border-radius:10px;transition:background .2s var(--ease),color .2s var(--ease)}
.nav-item.active{background:linear-gradient(180deg,rgba(255,34,34,.18),rgba(255,34,34,.1));box-shadow:inset 0 0 0 1px rgba(255,34,34,.22),var(--glass-highlight)}
.nav-item.active:before{display:none}
.sidebar-insight{border-radius:16px;border-color:rgba(255,34,34,.2);background:linear-gradient(140deg,rgba(255,34,34,.14),rgba(255,255,255,.02));box-shadow:var(--glass-highlight)}

/* Cards and panels. */
.hero,.metric-card,.panel,.account-card,.accounts-help,.me-card,.me-identity,.tg-card,.tg-section,.radar-alert,.workspace-overview,.chat-shell,.chat-chart,.billing-card,.billing-current,.dashboard-empty,.account-add-card{
 border-radius:var(--radius-card);border-color:var(--glass-border);box-shadow:var(--glass-shadow),var(--glass-highlight)}
.metric-card,.panel,.account-card,.accounts-help,.me-card,.me-identity,.tg-card,.tg-section,.radar-alert,.chat-shell,.chat-chart,.billing-card,.billing-current{
 background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.metric-card,.account-card,.billing-card{transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.metric-card:hover,.account-card:hover{transform:translateY(-2px);background:var(--glass-hover);border-color:var(--glass-border-strong)}
.hero{border-color:rgba(255,34,34,.2);background:radial-gradient(circle at 78% 50%,rgba(255,34,34,.16),transparent 32%),linear-gradient(110deg,rgba(255,34,34,.1),rgba(255,255,255,.02) 60%);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.viralization-card{background:linear-gradient(120deg,rgba(255,34,34,.1),rgba(255,255,255,.03))}
.agent-panel{border-radius:var(--radius-card);border-color:rgba(255,34,34,.24);background:linear-gradient(145deg,rgba(255,34,34,.14),rgba(255,34,34,.03) 50%,rgba(255,255,255,.03));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow),var(--glass-highlight)}
.workspace-overview{background:linear-gradient(120deg,rgba(255,34,34,.12),rgba(255,255,255,.03));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.billing-card.featured{background:linear-gradient(180deg,rgba(255,34,34,.16),rgba(255,34,34,.03))}
.account-add-card{background:rgba(255,255,255,.02)}
.metric-icon,.me-card-icon,.tg-mark{border-radius:10px}

/* Floating layers: menus, tooltips, toasts and dialogs get the strongest blur. */
.workspace-menu,.profile-menu,.period-panel,.chart-tip,.chat-chart-tip,.metric-tip,.toast{
 background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur-strong);backdrop-filter:var(--glass-blur-strong);border:1px solid var(--glass-border-strong);border-radius:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7),var(--glass-highlight)}
.toast{border-left:1px solid var(--glass-border-strong);border-radius:14px}
/* Menus inside the sidebar: the sidebar's own blur stops theirs from reaching what is behind, so they stay almost solid. */
.workspace-menu,.profile-menu{background:#18181c}
.form-dialog,.preview-dialog{background:var(--glass-solid);-webkit-backdrop-filter:var(--glass-blur-strong);backdrop-filter:var(--glass-blur-strong);border:1px solid var(--glass-border-strong);border-radius:22px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8),var(--glass-highlight)}
.form-dialog::backdrop,.preview-dialog::backdrop{background:rgba(5,5,7,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
dialog[open]{animation:glass-in .28s var(--ease)}
@keyframes glass-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* Controls: rounded, translucent, with a soft focus ring. */
.select-control,.chart-switch,.admin-plan-select,.chat-composer,.chat-chip,.tg-workspace,.tg-pref{border-radius:var(--radius-control);background:var(--glass);border-color:var(--glass-border);box-shadow:var(--glass-highlight)}
.select-control{height:40px}
.chart-switch{padding:4px;gap:4px}.chart-switch button{border-radius:8px}.chart-switch button.selected{background:rgba(255,255,255,.14);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.primary-button,.secondary-button,.agent-action,.dialog-done{border-radius:var(--radius-control);transition:transform .15s var(--ease),filter .2s var(--ease),background .2s var(--ease)}
.primary-button,.agent-action,.dialog-done{background:linear-gradient(180deg,#FF3B3B,#E81414);box-shadow:0 8px 24px -10px rgba(255,34,34,.75),inset 0 1px 0 rgba(255,255,255,.22)}
.primary-button:hover,.agent-action:hover,.dialog-done:hover{background:linear-gradient(180deg,#FF4A4A,#F01C1C);filter:brightness(1.05)}
.secondary-button{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--glass-border),var(--glass-highlight)}
.secondary-button:hover{background:rgba(255,255,255,.13)}
.primary-button:active,.secondary-button:active,.agent-action:active{transform:scale(.98)}
.form-input,.form-dialog input,.form-dialog select,.form-dialog textarea,.auth-card input{border-radius:var(--radius-control)!important;background:rgba(255,255,255,.05)!important;border-color:var(--glass-border)!important;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.form-input:focus,.form-dialog input:focus,.form-dialog select:focus,.form-dialog textarea:focus,.auth-card input:focus{outline:0;border-color:rgba(255,34,34,.55)!important;box-shadow:0 0 0 4px rgba(255,34,34,.15)}
:focus-visible{outline:2px solid rgba(255,90,90,.7);outline-offset:2px}
/* Tables: the sticky content column takes the panel's own colour; only while the table is scrolled sideways
   (.scrolled, set by the page) does it turn solid, to hide the cells passing under it. */
.report-panel .data-table .col-favorite,.report-panel .data-table .col-content,
.report-panel .data-table tbody tr:hover .col-favorite,.report-panel .data-table tbody tr:hover .col-content{background:transparent}
.report-panel .table-scroll.scrolled .data-table .col-favorite,.report-panel .table-scroll.scrolled .data-table .col-content{background:#17171b}
.report-panel .table-scroll.scrolled .data-table tbody tr:hover .col-favorite,.report-panel .table-scroll.scrolled .data-table tbody tr:hover .col-content{background:#1c1c21}
.data-table tbody tr{transition:background .2s var(--ease)}.data-table tbody tr:hover{background:rgba(255,255,255,.03)}
.me-nav button,.me-nav a{border-radius:10px}

/* Sign-in: the whole frame floats as one glass sheet over the ambient light. */
.auth-view{background:transparent}
.auth-card{border-radius:24px;border-color:var(--glass-border-strong);background:rgba(20,20,24,.5);-webkit-backdrop-filter:var(--glass-blur-strong);backdrop-filter:var(--glass-blur-strong);box-shadow:0 50px 140px -40px rgba(0,0,0,.85),var(--glass-highlight)}
@media (min-width:900px){
 .auth-frame{border-radius:28px;border-color:var(--glass-border-strong);background:rgba(18,18,22,.35);-webkit-backdrop-filter:var(--glass-blur-strong);backdrop-filter:var(--glass-blur-strong);box-shadow:0 60px 160px -40px rgba(0,0,0,.85),var(--glass-highlight)}
 .auth-frame .auth-card{background:rgba(255,255,255,.035);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-left:1px solid var(--glass-border)}
}

/* Without blur support, or when the system asks for less transparency, surfaces stay solid. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .sidebar,.topbar{background:#121215}.metric-card,.panel,.account-card,.me-card,.tg-section,.radar-alert,.chat-shell,.billing-card{background:#151518}
 .workspace-menu,.profile-menu,.period-panel,.toast,.form-dialog,.preview-dialog,.auth-card{background:#1b1b1f}
}
@media (prefers-reduced-transparency:reduce){
 .sidebar,.topbar,.metric-card,.panel,.account-card,.me-card,.tg-section,.radar-alert,.chat-shell,.billing-card,.workspace-menu,.profile-menu,.period-panel,.toast,.form-dialog,.preview-dialog,.auth-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:#18181b}
}
@media (prefers-reduced-motion:reduce){dialog[open]{animation:none}.metric-card:hover,.account-card:hover{transform:none}}