/* TIN — Direction C / Glassy depth
 *
 * Translated verbatim from `web/design-bundle/dir-glassy.jsx` (GLASS_CSS
 * template-string constant) and `web/design-bundle/tin-c-chrome.jsx`
 * (TIN_VIEWAS_CSS + TIN_COMPONENTS_CSS). Do NOT reformat — keeping the
 * shape identical so future diffs against the design bundle stay clean.
 *
 * Scoped under `.tin-glass`. The new chrome (`base.html`) sets this on
 * the body wrapper; pages opt in to the new visual system by using the
 * `.tin-glass *` class vocabulary. The old `style.css` is still loaded
 * for non-migrated pages.
 */

/* ============================================================
 * GLASS_CSS (from dir-glassy.jsx)
 * ============================================================ */

.tin-glass{
  --bg-0:#070a13;
  --bg-1:#0b101e;
  --bg-2:#101729;
  --bg-blur:rgba(255,255,255,0.04);
  --bg-blur-strong:rgba(255,255,255,0.07);
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.14);
  --text:#ecf2ff;
  --text-2:#a8b2cc;
  --text-3:#6a7491;
  --accent:#7c9eff;
  --accent-2:#34e0a1;
  --aurora-a:#5b3df5;
  --aurora-b:#1ad1a4;
  --aurora-c:#ff7a90;
  --green:#34e0a1;
  --amber:#ffb547;
  --red:#ff5d6c;
  font-family:"Inter","Söhne",-apple-system,system-ui,sans-serif;
  font-feature-settings:"cv11","ss01";
  letter-spacing:-0.005em;
  color:var(--text);
  width:100%; height:100%; display:flex; overflow:hidden; position:relative;
  background:var(--bg-0);
}
.tin-glass[data-theme=light]{
  --bg-0:#eef1f8;
  --bg-1:#f6f7fc;
  --bg-2:#ffffff;
  --bg-blur:rgba(255,255,255,0.6);
  --bg-blur-strong:rgba(255,255,255,0.8);
  --line:rgba(20,30,60,0.07);
  --line-strong:rgba(20,30,60,0.12);
  --text:#0e1530;
  --text-2:#4a5278;
  --text-3:#8990ab;
  --accent:#4f6bff;
  --accent-2:#0ea972;
  --aurora-a:#a39bff;
  --aurora-b:#a8edd6;
  --aurora-c:#ffc0cc;
  --green:#10a26c;
  --amber:#d97706;
  --red:#dc2626;
}
.tin-glass .mono{ font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; }

/* aurora background lights */
.tin-glass::before, .tin-glass::after{
  content:''; position:absolute; inset:auto; pointer-events:none; z-index:0;
  filter:blur(80px); opacity:.55;
  width:560px; height:560px; border-radius:50%;
}
.tin-glass::before{
  top:-180px; left:-120px;
  background:radial-gradient(circle, var(--aurora-a), transparent 70%);
}
.tin-glass::after{
  bottom:-180px; right:-80px;
  background:radial-gradient(circle, var(--aurora-b), transparent 70%);
}
.tin-glass .aurora-c{
  position:absolute; top:35%; left:55%; width:380px; height:380px;
  background:radial-gradient(circle, var(--aurora-c), transparent 70%);
  filter:blur(90px); opacity:.35; border-radius:50%; pointer-events:none; z-index:0;
}

/* sidebar */
.tin-glass .nav{
  position:relative; z-index:50;
  width:230px; flex:0 0 230px;
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  backdrop-filter:blur(40px);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 14px; gap:2px;
  overflow-y:auto;
}
.tin-glass[data-theme=light] .nav{
  background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4));
}
.tin-glass .nav-brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:6px 6px 16px;
  border-bottom:1px solid var(--line); margin-bottom:10px;
  color:var(--text);
}
.tin-glass .nav-brand-wordmark{ height:20px; width:auto; display:block; flex:0 0 auto; }
.tin-glass .nav-brand-product{
  font-weight:600; font-size:13px; letter-spacing:0.02em;
  color:var(--text); margin-top:2px;
}
.tin-glass .nav-brand-tag{
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-3); padding-left:1px;
}
.tin-glass .nav-section{
  font-size:10px; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--text-3); padding:14px 8px 6px; font-weight:500;
}
.tin-glass .nav-item{
  display:flex; align-items:center; gap:10px; padding:7px 9px;
  font-size:12.5px; color:var(--text-2); border-radius:8px; cursor:pointer;
  transition:background .15s;
  text-decoration:none;
}
.tin-glass .nav-item:hover{ background:rgba(255,255,255,0.04); color:var(--text); }
.tin-glass[data-theme=light] .nav-item:hover{ background:rgba(15,15,30,0.04); }
.tin-glass .nav-item.active{
  background:rgba(255,255,255,0.08); color:var(--text); font-weight:500;
  box-shadow:inset 0 0 0 1px var(--line-strong), 0 4px 14px rgba(124,158,255,0.08);
}
.tin-glass[data-theme=light] .nav-item.active{
  background:rgba(255,255,255,0.85);
  box-shadow:inset 0 0 0 1px var(--line-strong), 0 4px 14px rgba(79,107,255,0.10);
}
.tin-glass .nav-item .nav-ico{ width:14px; height:14px; opacity:.7; flex:0 0 14px; }
.tin-glass .nav-spacer{ flex:1; }
.tin-glass .nav-user{
  display:flex; align-items:center; gap:10px; padding:9px;
  background:rgba(255,255,255,0.03); border:1px solid var(--line);
  border-radius:10px; backdrop-filter:blur(10px);
}
.tin-glass[data-theme=light] .nav-user{ background:rgba(255,255,255,0.6); }
.tin-glass .nav-user-av{
  width:28px; height:28px; border-radius:50%;
  background:conic-gradient(from 200deg, var(--aurora-a), var(--accent));
  display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff;
  box-shadow:0 2px 8px rgba(124,158,255,0.4);
  flex:0 0 28px;
}

/* main */
.tin-glass .main{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:auto; position:relative; z-index:1; }
.tin-glass .topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 30px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  backdrop-filter:blur(20px); position:sticky; top:0; z-index:5;
}
.tin-glass .crumb{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-2); }
.tin-glass .crumb b{ color:var(--text); font-weight:500; }
.tin-glass .topright{ display:flex; gap:10px; align-items:center; }

.tin-glass .seg{
  display:inline-flex;
  background:rgba(255,255,255,0.04); border:1px solid var(--line);
  border-radius:10px; padding:3px; gap:2px; backdrop-filter:blur(10px);
}
.tin-glass[data-theme=light] .seg{ background:rgba(255,255,255,0.55); }
.tin-glass .seg button{
  border:0; background:transparent; padding:5px 11px; font-size:12px;
  color:var(--text-2); border-radius:7px; cursor:pointer; font-family:inherit;
  white-space:nowrap;
}
.tin-glass .seg button.active{
  background:rgba(255,255,255,0.10); color:var(--text); font-weight:500;
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.tin-glass[data-theme=light] .seg button.active{ background:rgba(255,255,255,0.95); }

.tin-glass .btn{
  border:1px solid var(--line); background:rgba(255,255,255,0.03);
  color:var(--text); padding:6px 11px; font-size:12.5px; border-radius:8px;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; backdrop-filter:blur(10px);
}
.tin-glass[data-theme=light] .btn{ background:rgba(255,255,255,0.6); }
.tin-glass .btn.primary{
  background:linear-gradient(135deg, var(--accent), var(--aurora-a));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 20px rgba(124,158,255,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}

.tin-glass .content{ padding:24px 30px 48px; display:grid; gap:16px; position:relative; }

.tin-glass .hello{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
}
.tin-glass .hello h1{
  font-size:28px; font-weight:500; letter-spacing:-0.03em; margin:0;
  background:linear-gradient(180deg, var(--text), var(--text-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tin-glass .hello p{ margin:4px 0 0; color:var(--text-2); font-size:13px; }
.tin-glass .hello p .mono{ color:var(--text); }

.tin-glass .pacechip{
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:rgba(255,255,255,0.04); border:1px solid var(--line);
  border-radius:99px; backdrop-filter:blur(10px); font-size:12px;
  white-space:nowrap;
}
.tin-glass[data-theme=light] .pacechip{ background:rgba(255,255,255,0.6); }
.tin-glass .pacechip .dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}
.tin-glass .pacechip b{ font-family:"JetBrains Mono",monospace; font-weight:600; }
.tin-glass .pacechip .sep{ color:var(--text-3); }

/* glass card */
.tin-glass .card{
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid var(--line); border-radius:14px;
  backdrop-filter:blur(20px); box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 40px -20px rgba(0,0,0,0.4);
  overflow:hidden;
}
.tin-glass[data-theme=light] .card{
  background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 40px -28px rgba(20,30,60,0.18);
}

.tin-glass .periodbar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
}
.tin-glass .periodbar .seg button{ padding:6px 13px; }
.tin-glass .periodbar select{
  background:rgba(255,255,255,0.04); border:1px solid var(--line);
  color:var(--text); font-family:inherit; font-size:12px;
  padding:6px 24px 6px 10px; border-radius:8px;
  appearance:none; cursor:pointer; backdrop-filter:blur(10px);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a8b2cc' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center;
}
.tin-glass[data-theme=light] .periodbar select{ background:rgba(255,255,255,0.6); }

/* incentive */
.tin-glass .incentive{
  padding:14px 18px; display:flex; align-items:center; gap:16px;
  background:linear-gradient(135deg, rgba(124,158,255,0.10), rgba(52,224,161,0.06));
  border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(20px);
  position:relative; overflow:hidden;
}
.tin-glass .incentive::after{
  content:''; position:absolute; right:-60px; top:-60px; width:200px; height:200px;
  background:radial-gradient(circle, var(--accent-2), transparent 70%);
  opacity:.25; filter:blur(30px);
}
.tin-glass .incentive .glyph{
  width:36px; height:36px; border-radius:12px;
  background:linear-gradient(135deg, var(--accent), var(--aurora-a));
  display:grid; place-items:center; color:#fff;
  box-shadow:0 6px 18px rgba(124,158,255,0.3);
}
.tin-glass .incentive .ititle{ font-size:14px; font-weight:600; }
.tin-glass .incentive .idesc{ font-size:12.5px; color:var(--text-2); margin-top:2px; }
.tin-glass .incentive .iright{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.tin-glass .incentive .frac{ font-family:"JetBrains Mono",monospace; font-size:14px; }
.tin-glass .incentive .frac b{ font-weight:600; }
.tin-glass .incentive .frac span{ color:var(--text-3); }
.tin-glass .incentive .ibar{
  width:160px; height:8px; border-radius:99px;
  background:rgba(255,255,255,0.08); overflow:hidden; position:relative;
}
.tin-glass .incentive .ibar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 0 12px var(--accent-2);
}

/* section heading */
.tin-glass .secthead{
  display:flex; align-items:center; gap:10px; padding:14px 18px 10px;
}
.tin-glass .secthead h4{
  margin:0; font-size:11px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--text-2); font-weight:600;
}
.tin-glass .secthead .meta{ margin-left:auto; font-size:11px; color:var(--text-3); font-family:"JetBrains Mono",monospace; }
.tin-glass .secthead .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* KPI tile */
.tin-glass .kpi-grid{ display:grid; padding:0 4px 14px; gap:4px; }
.tin-glass .kpi-grid.anchor{ grid-template-columns:1fr 1fr; }
.tin-glass .kpi-grid.cand{ grid-template-columns:repeat(4, 1fr); }
.tin-glass .kpi-grid.sales{ grid-template-columns:repeat(3, 1fr); }

.tin-glass .kpi{
  padding:14px 16px; border-radius:10px; cursor:pointer; transition:background .15s;
  position:relative;
}
.tin-glass .kpi:hover{ background:rgba(255,255,255,0.03); }
.tin-glass[data-theme=light] .kpi:hover{ background:rgba(15,15,30,0.03); }
.tin-glass .kpi.anchor-tile{ padding:18px 20px; }

.tin-glass .kpi-row1{ display:flex; align-items:center; justify-content:space-between; }
.tin-glass .kpi-label{ font-size:12px; color:var(--text-2); font-weight:500; white-space:nowrap; }
.tin-glass .kpi-dot{
  width:8px; height:8px; border-radius:50%;
}
.tin-glass .kpi-dot.green{ background:var(--green); box-shadow:0 0 10px var(--green); }
.tin-glass .kpi-dot.amber{ background:var(--amber); box-shadow:0 0 10px var(--amber); }
.tin-glass .kpi-dot.red{ background:var(--red);     box-shadow:0 0 10px var(--red);   }

.tin-glass .kpi-val{
  font-size:28px; font-weight:500; letter-spacing:-0.025em; margin-top:8px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, var(--text), var(--text-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tin-glass .kpi.anchor-tile .kpi-val{ font-size:44px; }
/* Drill-through link wrapping the headline value: inherit the gradient
   text styling and drop the default underline so it reads as a number,
   not a link, until hover. */
.tin-glass .kpi-val .kpi-drill{
  color:inherit; background:inherit; -webkit-background-clip:text; background-clip:text;
  text-decoration:none; cursor:pointer; border-bottom:1px solid transparent;
  transition:border-color .15s;
}
.tin-glass .kpi-val .kpi-drill:hover{ border-bottom-color:var(--accent); }
.tin-glass .kpi-target{
  font-size:11.5px; color:var(--text-3); margin-top:3px;
  font-family:"JetBrains Mono",monospace;
}
.tin-glass .kpi-target b{ color:var(--text-2); font-weight:500; }

.tin-glass .kpi-bar{
  position:relative; margin-top:12px;
  height:6px; background:rgba(255,255,255,0.06); border-radius:99px;
  overflow:visible;
}
.tin-glass[data-theme=light] .kpi-bar{ background:rgba(20,30,60,0.06); }
.tin-glass .kpi-bar i{
  display:block; height:100%; border-radius:99px; position:relative;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.tin-glass .kpi-bar i.green{ background:linear-gradient(90deg, var(--green), #6ef0c1); box-shadow:0 0 10px var(--green); }
.tin-glass .kpi-bar i.amber{ background:linear-gradient(90deg, var(--amber), #ffd08a); box-shadow:0 0 10px var(--amber); }
.tin-glass .kpi-bar i.red  { background:linear-gradient(90deg, var(--red),   #ff97a3);  box-shadow:0 0 10px var(--red);   }
.tin-glass .kpi-pacing{
  position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--text); border-radius:2px; opacity:.55;
}
.tin-glass .kpi-row3{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; font-size:11.5px; font-family:"JetBrains Mono",monospace;
}
.tin-glass .kpi-pct{ color:var(--text); font-weight:600; }
.tin-glass .kpi-delta{ color:var(--text-3); }
.tin-glass .kpi-delta.good{ color:var(--green); }
.tin-glass .kpi-delta.bad{ color:var(--red); }

/* lower row */
.tin-glass .lower{ display:grid; grid-template-columns:1.1fr 1.3fr; gap:16px; }
.tin-glass .tier{
  padding:20px; display:flex; flex-direction:column; gap:14px;
  position:relative; overflow:hidden;
}
.tin-glass .tier::before{
  content:''; position:absolute; left:-40px; top:-40px; width:180px; height:180px;
  background:radial-gradient(circle, var(--aurora-a), transparent 70%);
  opacity:.30; filter:blur(30px);
}
.tin-glass .tier .tlabel{
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--text-2); font-weight:600; position:relative;
}
.tin-glass .tier .tcur{
  font-size:36px; font-weight:500; letter-spacing:-0.03em; position:relative;
  display:flex; align-items:baseline; gap:12px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tin-glass .tier .rate{ font-size:13px; color:var(--text-2); font-family:"JetBrains Mono",monospace; -webkit-text-fill-color:var(--text-2); }
.tin-glass .tier .tbar{
  height:10px; background:rgba(255,255,255,0.06); border-radius:99px;
  overflow:hidden; position:relative;
}
.tin-glass[data-theme=light] .tier .tbar{ background:rgba(20,30,60,0.06); }
.tin-glass .tier .tbar i{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 0 14px var(--accent);
}
.tin-glass .tier .tmeta{
  display:flex; justify-content:space-between; font-size:12px;
  color:var(--text-2); font-family:"JetBrains Mono",monospace; position:relative;
}
.tin-glass .tier .tmeta b{ color:var(--text); font-weight:500; }

/* pipeline */
.tin-glass .pipeline-grid{ display:grid; grid-template-columns:repeat(5, 1fr); padding:0 4px 14px; gap:4px; }
.tin-glass .pipeline-cell{
  padding:14px 16px; border-radius:10px;
  display:flex; flex-direction:column; gap:4px;
}
.tin-glass .pipeline-cell .pl{ font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-2); font-weight:500; }
.tin-glass .pipeline-cell .pv{
  font-size:26px; font-weight:500; letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, var(--text), var(--text-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tin-glass .pipeline-cell .pmeta{ font-size:11px; color:var(--text-3); font-family:"JetBrains Mono",monospace; }

/* ============================================================
 * TIN_VIEWAS_CSS (from tin-c-chrome.jsx)
 * Acting-as control — sits at the top of the sidebar
 * ============================================================ */

.tin-va{
  margin:6px 4px 14px; padding:8px 8px 10px;
  border-radius:12px; position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border:1px solid var(--line);
}
.tin-va[data-state=imp-user],
.tin-va[data-state=imp-role]{
  background:linear-gradient(135deg, rgba(255,181,71,0.16), rgba(255,93,108,0.06));
  border:1px solid rgba(255,181,71,0.42);
  box-shadow:0 0 0 1px rgba(255,181,71,0.10) inset, 0 8px 24px -8px rgba(255,181,71,0.30);
}
.tin-glass[data-theme=light] .tin-va{ background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4)); }
.tin-glass[data-theme=light] .tin-va[data-state=imp-user],
.tin-glass[data-theme=light] .tin-va[data-state=imp-role]{
  background:linear-gradient(135deg, rgba(255,181,71,0.20), rgba(255,93,108,0.08));
  border:1px solid rgba(217,119,6,0.45);
}

.tin-va .va-label{
  display:flex; align-items:center; gap:6px;
  font-family:"JetBrains Mono",monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:0.12em;
  color:var(--text-3); font-weight:600; padding:0 4px 6px;
}
.tin-va[data-state=imp-user] .va-label,
.tin-va[data-state=imp-role] .va-label{ color:var(--amber); }
.tin-va .va-label .pulse{
  width:6px; height:6px; border-radius:50%; background:var(--text-3);
}
.tin-va[data-state=imp-user] .va-label .pulse,
.tin-va[data-state=imp-role] .va-label .pulse{
  background:var(--amber); box-shadow:0 0 8px var(--amber);
}

.tin-va .va-chip{
  display:flex; align-items:center; gap:8px;
  padding:6px 6px 6px 8px; border-radius:9px;
  background:rgba(255,255,255,0.04); border:1px solid var(--line);
  transition:background .15s, border-color .15s;
}
.tin-va .va-chip:hover{ background:rgba(255,255,255,0.06); border-color:var(--line-strong); }
.tin-glass[data-theme=light] .tin-va .va-chip{ background:rgba(255,255,255,0.6); }
.tin-va[data-state=imp-user] .va-chip,
.tin-va[data-state=imp-role] .va-chip{
  background:rgba(255,255,255,0.06); border-color:rgba(255,181,71,0.30);
}

.tin-va .va-av{
  width:28px; height:28px; border-radius:50%; flex:0 0 28px;
  background:conic-gradient(from 200deg, var(--aurora-a), var(--accent));
  display:grid; place-items:center; color:#fff;
  font-weight:600; font-size:11px;
  box-shadow:0 2px 8px rgba(124,158,255,0.30);
}
.tin-va[data-state=imp-role] .va-av{
  background:linear-gradient(135deg, var(--amber), var(--aurora-c));
  box-shadow:0 2px 8px rgba(255,181,71,0.32);
}
.tin-va[data-state=imp-user] .va-av{
  background:conic-gradient(from 0deg, var(--amber), var(--aurora-c), var(--accent));
  box-shadow:0 2px 8px rgba(255,93,108,0.30);
}
.tin-va .va-av svg{ width:14px; height:14px; }

.tin-va .va-body{ flex:1; min-width:0; }
.tin-va .va-body .nm{
  font-size:12.5px; font-weight:500; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tin-va .va-body .sub{
  font-size:10.5px; color:var(--text-3); margin-top:2px;
  font-family:"JetBrains Mono",monospace;
  text-transform:uppercase; letter-spacing:0.08em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tin-va[data-state=imp-user] .va-body .sub,
.tin-va[data-state=imp-role] .va-body .sub{ color:var(--amber); }
.tin-va .va-caret{
  flex:0 0 16px; color:var(--text-3); margin-right:4px;
}
.tin-va .va-exit{
  flex:0 0 22px; height:22px; width:22px; padding:0; border-radius:6px;
  border:1px solid var(--line-strong); background:rgba(255,255,255,0.06);
  color:var(--text); cursor:pointer; display:grid; place-items:center;
  transition:background .15s;
}
.tin-va .va-exit:hover{ background:rgba(255,93,108,0.18); border-color:rgba(255,93,108,0.40); color:var(--red); }
.tin-va .va-exit svg{ width:11px; height:11px; }

/* Picker controls inside the view-as card. The mock uses an
 * anchored popover; we render the actual <select> stacks the
 * existing JS already drives so impersonation continues to work
 * server-side. Style them to match the glass panel. */
.tin-va .va-picker{
  display:flex; flex-direction:column; gap:8px;
  margin-top:10px;
}
.tin-va .va-picker label{
  font-family:"JetBrains Mono",monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:0.12em;
  color:var(--text-3); font-weight:600;
}
.tin-va .va-picker select{
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,0.04); border:1px solid var(--line);
  color:var(--text); font-family:inherit; font-size:12px;
  padding:6px 24px 6px 10px; border-radius:8px;
  appearance:none; cursor:pointer; backdrop-filter:blur(10px);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a8b2cc' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center;
}
.tin-glass[data-theme=light] .tin-va .va-picker select{ background:rgba(255,255,255,0.7); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234a5278' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 8px center; }
.tin-va .va-picker select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,158,255,0.18); }

/* View-as banner (rendered in the main column when impersonating).
 * The chrome carries the impersonation-state colors of the
 * sidebar card; the banner reinforces the read-only state across
 * the full content width. */
.tin-glass .va-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; margin:0 30px 0;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(255,181,71,0.16), rgba(255,93,108,0.06));
  border:1px solid rgba(255,181,71,0.42);
  box-shadow:0 0 0 1px rgba(255,181,71,0.10) inset, 0 8px 24px -8px rgba(255,181,71,0.30);
  font-size:12.5px; color:var(--text);
  backdrop-filter:blur(20px);
}
.tin-glass .va-banner .vb-eye{
  width:18px; height:18px; color:var(--amber);
}
.tin-glass .va-banner .vb-msg{ flex:1; min-width:0; }
.tin-glass .va-banner .vb-msg b{ color:var(--text); }
.tin-glass .va-banner .vb-exit{
  padding:5px 12px; border-radius:8px; font-size:12px; font-family:inherit;
  background:rgba(255,255,255,0.10); border:1px solid var(--line-strong);
  color:var(--text); cursor:pointer;
}
.tin-glass .va-banner .vb-exit:hover{
  background:rgba(255,93,108,0.18); border-color:rgba(255,93,108,0.40); color:var(--red);
}

/* ============================================================
 * TIN_COMPONENTS_CSS (from tin-c-chrome.jsx)
 * Inputs, pills, avatars, tables, generic cards, page shell.
 * ============================================================ */

/* Inputs */
.tin-glass .input{
  width:100%; box-sizing:border-box; background:rgba(255,255,255,0.04);
  border:1px solid var(--line); color:var(--text);
  padding:9px 12px; border-radius:9px; font-family:inherit; font-size:13px;
  backdrop-filter:blur(10px);
}
.tin-glass[data-theme=light] .input{ background:rgba(255,255,255,0.7); }
.tin-glass .input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,158,255,0.18); }
.tin-glass .field-label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--text-2); font-weight:600; margin-bottom:6px;
}
.tin-glass .field-help{ font-size:11.5px; color:var(--text-3); margin-top:6px; }
.tin-glass .input-group{ position:relative; }
.tin-glass .input-group .input{ padding-left:32px; }
.tin-glass .input-group > svg, .tin-glass .input-group .pfx{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--text-3); pointer-events:none;
}

/* Pills */
.tin-glass .pill{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:99px; font-size:11px; font-weight:500;
  background:rgba(255,255,255,0.06); border:1px solid var(--line);
  color:var(--text-2); white-space:nowrap;
}
.tin-glass .pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.tin-glass .pill.green{ color:var(--green); background:rgba(52,224,161,0.10); border-color:rgba(52,224,161,0.25); }
.tin-glass .pill.amber{ color:var(--amber); background:rgba(255,181,71,0.10); border-color:rgba(255,181,71,0.25); }
.tin-glass .pill.red  { color:var(--red);   background:rgba(255,93,108,0.10); border-color:rgba(255,93,108,0.25); }
.tin-glass .pill.blue { color:var(--accent);background:rgba(124,158,255,0.10); border-color:rgba(124,158,255,0.25); }
.tin-glass .pill.grey { color:var(--text-3); }

/* Avatars */
.tin-glass .av{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-weight:600; font-size:11px; color:#fff;
  background:conic-gradient(from 200deg, var(--aurora-a), var(--accent));
  width:28px; height:28px;
  box-shadow:0 2px 8px rgba(124,158,255,0.30);
  flex:0 0 28px;
}
.tin-glass .av.lg{ width:40px; height:40px; font-size:14px; flex:0 0 40px; }
.tin-glass .av.sm{ width:22px; height:22px; font-size:10px; flex:0 0 22px; }
.tin-glass .av.xs{ width:18px; height:18px; font-size:8.5px; flex:0 0 18px; }

/* Tables */
.tin-glass .tbl-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  backdrop-filter:blur(20px);
}
.tin-glass .tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.tin-glass .tbl th{
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--text-3); font-weight:500; font-family:"JetBrains Mono",monospace;
  text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,0.02);
}
.tin-glass .tbl th.r{ text-align:right; }
.tin-glass .tbl td{ padding:11px 14px; border-bottom:1px solid var(--line); color:var(--text); }
.tin-glass .tbl tr:last-child td{ border-bottom:0; }
.tin-glass .tbl tr.row-link:hover td{ background:rgba(124,158,255,0.05); cursor:pointer; }
.tin-glass .tbl tr:hover td{ background:rgba(255,255,255,0.025); }
.tin-glass .tbl td.r{ text-align:right; font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
.tin-glass .tbl td.num{ font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
.tin-glass .tbl .who{ display:flex; align-items:center; gap:10px; }
.tin-glass .tbl .who small{ display:block; color:var(--text-3); font-size:11px; margin-top:2px; font-family:"JetBrains Mono",monospace; }

/* Generic glass card */
.tin-glass .gcard{
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid var(--line); border-radius:14px;
  backdrop-filter:blur(20px); overflow:hidden;
}
.tin-glass .gcard .gcard-head{ padding:14px 18px 10px; display:flex; align-items:center; gap:10px; }
.tin-glass .gcard .gcard-head h3{ margin:0; font-size:14px; font-weight:600; }
.tin-glass .gcard .gcard-head .meta{ margin-left:auto; font-size:11.5px; color:var(--text-3); font-family:"JetBrains Mono",monospace; }
.tin-glass .gcard .gcard-body{ padding:0 18px 18px; }

/* Page shell */
.tin-page{ display:flex; flex-direction:column; gap:18px; padding:24px 30px 48px; }
.tin-page-hello{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.tin-page-hello h1{
  font-size:28px; font-weight:500; letter-spacing:-0.03em; margin:0;
  background:linear-gradient(180deg, var(--text), var(--text-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tin-page-hello p{ margin:4px 0 0; color:var(--text-2); font-size:13px; }
.tin-page-hello .mono{ color:var(--text); font-family:"JetBrains Mono",monospace; }

/* Stat tiles */
.tin-stat-grid{ display:grid; gap:12px; }
.tin-stat-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
.tin-stat-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
.tin-stat-grid.cols-4{ grid-template-columns:repeat(4, 1fr); }
.tin-stat-grid.cols-5{ grid-template-columns:repeat(5, 1fr); }
.tin-stat{
  padding:18px 20px; position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(20px);
  overflow:hidden;
}
.tin-stat.accent{
  background:linear-gradient(135deg, rgba(124,158,255,0.16), rgba(52,224,161,0.10));
  border-color:rgba(124,158,255,0.30);
}
.tin-stat .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-2); font-weight:600; }
.tin-stat .val{
  font-family:"Inter",system-ui; font-size:30px; font-weight:500;
  letter-spacing:-0.025em; margin-top:6px; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, var(--text), var(--text-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tin-stat.accent .val{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tin-stat .sub{ margin-top:4px; font-size:11.5px; color:var(--text-3); font-family:"JetBrains Mono",monospace; }
.tin-stat .sub b{ color:var(--text-2); }

/* Filters / toolbar row */
.tin-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid var(--line); border-radius:12px; backdrop-filter:blur(20px);
}
.tin-toolbar .grow{ flex:1; }

/* dt/dd definition list */
.tin-glass .dl{
  display:grid; grid-template-columns:160px 1fr; gap:10px 18px;
  font-size:13px;
}
.tin-glass .dl dt{
  color:var(--text-3); font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em;
  font-family:"JetBrains Mono",monospace; font-weight:500;
  align-self:center;
}
.tin-glass .dl dd{ margin:0; color:var(--text); font-variant-numeric:tabular-nums; }
.tin-glass .dl dd a{ color:var(--accent); }
.tin-glass .dl dd code{
  font-family:"JetBrains Mono",monospace; font-size:11.5px;
  padding:1px 6px; border-radius:5px; background:rgba(255,255,255,0.06);
  border:1px solid var(--line); color:var(--text-2);
}

/* ============================================================
 * Cmd+K palette (translated from pg-styleguide.jsx section 12, sg-search)
 * Adapted to render inside a centered modal overlay since this isn't a
 * style-guide preview embed but a real palette.
 * ============================================================ */

.tin-glass .cmdk-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(7,10,19,0.55);
  backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:14vh;
}
.tin-glass[data-theme=light] .cmdk-overlay{ background:rgba(238,241,248,0.55); }

.tin-glass .cmdk{
  width:min(640px, 92vw); max-height:70vh; overflow:hidden;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border:1px solid var(--line-strong); border-radius:14px;
  backdrop-filter:blur(30px); box-shadow:0 30px 60px rgba(0,0,0,0.55);
  color:var(--text);
}
.tin-glass[data-theme=light] .cmdk{
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,255,0.85));
}
.tin-glass .cmdk .input-row{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.tin-glass .cmdk .input-row svg{ width:16px; height:16px; color:var(--text-3); flex:0 0 16px; }
.tin-glass .cmdk .input-row input{
  flex:1; background:transparent; border:0; outline:none;
  color:var(--text); font-size:15px; font-family:inherit;
}
.tin-glass .cmdk .input-row input::placeholder{ color:var(--text-3); }
.tin-glass .cmdk .input-row kbd{
  font-family:"JetBrains Mono",monospace; font-size:10px; padding:2px 6px;
  border:1px solid var(--line-strong); border-radius:4px; color:var(--text-3);
}
.tin-glass .cmdk .results{ flex:1; overflow:auto; padding:6px 8px 10px; }
.tin-glass .cmdk .group{ padding:6px 8px; }
.tin-glass .cmdk .group-label{
  padding:6px 10px; font-size:10px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--text-3); font-family:"JetBrains Mono",monospace;
}
.tin-glass .cmdk .row{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  font-size:13px; color:var(--text); border-radius:8px; cursor:pointer;
  text-decoration:none;
}
.tin-glass .cmdk .row.active,
.tin-glass .cmdk .row:hover{ background:rgba(124,158,255,0.10); }
.tin-glass .cmdk .row .ico{ width:14px; height:14px; color:var(--text-3); flex:0 0 14px; }
.tin-glass .cmdk .row .crumb{ font-size:11px; color:var(--text-3); margin-left:auto; font-family:"JetBrains Mono",monospace; }
.tin-glass .cmdk .empty{
  padding:24px 16px; text-align:center; color:var(--text-3); font-size:12.5px;
  font-family:"JetBrains Mono",monospace;
}

/* ============================================================
 * Compatibility shims for non-migrated pages.
 *
 * The old `style.css` is still loaded so untouched pages keep working
 * inside the new glass chrome. The bits below normalize the few places
 * the chrome (sidebar, banner, body wrapper) used to provide layout
 * that pages now inherit from `.tin-glass`.
 * ============================================================ */

html, body{ height:100%; }
body{ margin:0; }
.tin-glass{ min-height:100vh; }