.fue {
--fue-blue: #2145EF;
--fue-blue-deep: #1A38C9;
--fue-blue-muted: #ACBEFF;
--fue-wash: #EEF1FF;
--fue-ink: #111114;
--fue-ink-2: #3A3D44;
--fue-muted: #6B7280;
--fue-faint: #9CA0A8;
--fue-line: #E7E8EC;
--fue-line-2: #D6D8DE;
--fue-white: #FFFFFF;
--fue-bg-alt: #F5F6F8;
--fue-bg-50: #F9FAFB;
--fue-success: #1B8A5A;
--fue-success-bg: #E8F5EE;
--fue-success-text: #136B45;
--fue-warning: #B07400;
--fue-warning-bg: #FBF0D6;
--fue-error-bg: #FCE7E5;
--fue-error-text: #991B1B;
--fue-call: #0F0F1A;
--fue-moderate: #4D7C0F;
--fue-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
position: relative;
display: block;
width: 100%;
font-family: var(--fue-font);
color: var(--fue-ink);
text-align: left;
-webkit-font-smoothing: antialiased;
}
.fue *, .fue *::before, .fue *::after { box-sizing: border-box; }
.fue :where(p, h3, h4, h5, ol, ul, li, figure) { margin: 0; padding: 0; }
.fue :where(ol, ul) { list-style: none; }
.fue :where(img, video, svg) { display: block; max-width: none; }
.fue-frame {
position: relative;
width: 100%;
aspect-ratio: 1040 / 700;
container-type: inline-size;
border-radius: 18px;
overflow: hidden;
background: var(--fue-white);
border: 1px solid var(--fue-line);
box-shadow: 0 2px 4px rgba(0,0,0,.015), 0 8px 16px rgba(0,0,0,.03), 0 24px 48px rgba(0,0,0,.05);
}
.fue-canvas {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.fue-chrome {
flex: none;
display: flex;
align-items: center;
gap: 1.3462cqw;
height: 5.3846cqw;
padding: 0 1.9231cqw;
border-bottom: 1px solid var(--fue-line);
background: var(--fue-bg-50);
}
.fue-dots { display: flex; gap: 0.6731cqw; }
.fue-dots i { width: 1.0577cqw; height: 1.0577cqw; border-radius: 50%; background: var(--fue-line-2); }
.fue-url {
flex: 1;
height: 2.8846cqw;
border-radius: 0.7692cqw;
background: var(--fue-white);
border: 1px solid var(--fue-line);
display: flex;
align-items: center;
padding: 0 1.1538cqw;
font: 500 1.3462cqw/1 var(--fue-font);
color: var(--fue-faint);
gap: 0.7692cqw;
}
.fue-url svg { width: 1.3462cqw; height: 1.3462cqw; stroke: var(--fue-faint); fill: none; stroke-width: 2; }
.fue-ava {
width: 2.8846cqw; height: 2.8846cqw; border-radius: 50%;
background: var(--fue-wash); color: var(--fue-blue);
display: grid; place-items: center;
font: 600 1.25cqw/1 var(--fue-font);
}
.fue-eyebrow {
font: 600 1.1538cqw/1 var(--fue-font);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--fue-faint);
}
.fue-chip {
display: inline-flex; align-items: center; gap: 0.5769cqw;
height: 2.5cqw; padding: 0 1.0577cqw; border-radius: 96.0577cqw;
font: 500 1.3462cqw/1 var(--fue-font);
background: var(--fue-bg-alt); color: var(--fue-ink-2);
}
.fue-chip--outline { background: transparent; border: 1px solid var(--fue-line-2); color: var(--fue-muted); }
.fue-chip--blue { background: var(--fue-wash); color: var(--fue-blue-deep); }
.fue-chip--ok { background: var(--fue-success-bg); color: var(--fue-success-text); }
.fue-btn {
display: inline-flex; align-items: center; justify-content: center;
height: 3.4615cqw; padding: 0 1.5385cqw; border-radius: 0.9615cqw;
font: 600 1.4423cqw/1 var(--fue-font);
background: var(--fue-bg-alt); color: var(--fue-ink-2);
}
.fue-btn--primary { background: var(--fue-blue); color: var(--fue-white); }
.fue-btn--ghost { background: transparent; border: 1px solid var(--fue-line-2); color: var(--fue-ink-2); }
.fue-studio { display: grid; grid-template-columns: 1fr 37.6923cqw; flex: 1; min-height: 0; }
.fue-studio-chat { display: flex; flex-direction: column; padding: 2.1154cqw 2.1154cqw 1.7308cqw; gap: 1.3462cqw; min-height: 0; }
.fue-studio-head { display: flex; align-items: baseline; gap: 0.9615cqw; }
.fue-studio-head strong { font: 600 1.9231cqw/1.2 var(--fue-font); }
.fue-studio-head span { font: 400 1.4423cqw/1.2 var(--fue-font); color: var(--fue-muted); }
.fue-thread { display: flex; flex-direction: column; gap: 1.3462cqw; flex: 1; min-height: 0; }
.fue-msg { display: flex; flex-direction: column; gap: 0.6731cqw; max-width: 92%; }
.fue-msg--me { align-self: flex-end; align-items: flex-end; }
.fue-who { display: inline-flex; align-items: center; gap: 0.6731cqw; font: 600 1.25cqw/1 var(--fue-font); color: var(--fue-muted); }
.fue-who img { width: 2.1154cqw; height: 2.1154cqw; border-radius: 50%; }
.fue-bubble {
border-radius: 1.3462cqw; padding: 1.1538cqw 1.4423cqw;
font: 400 1.4423cqw/1.5 var(--fue-font); color: var(--fue-ink-2);
background: var(--fue-bg-alt);
}
.fue-msg--me .fue-bubble { background: var(--fue-blue); color: var(--fue-white); border-bottom-right-radius: 0.4808cqw; }
.fue-msg--sam .fue-bubble { border-bottom-left-radius: 0.4808cqw; }
.fue-attach {
display: inline-flex; align-items: center; gap: 0.6731cqw;
font: 500 1.25cqw/1 var(--fue-font); color: var(--fue-muted);
border: 1px solid var(--fue-line); border-radius: 0.7692cqw; padding: 0.6731cqw 0.9615cqw; background: var(--fue-white);
}
.fue-attach svg { width: 1.3462cqw; height: 1.3462cqw; fill: none; stroke: var(--fue-faint); stroke-width: 1.8; }
.fue-composer {
flex: none; display: flex; align-items: center; gap: 0.9615cqw;
height: 4.4231cqw; border: 1px solid var(--fue-line-2); border-radius: 1.1538cqw; padding: 0 1.1538cqw;
font: 400 1.4423cqw/1 var(--fue-font); color: var(--fue-faint); background: var(--fue-white);
}
.fue-composer b {
margin-left: auto; width: 2.8846cqw; height: 2.8846cqw; border-radius: 0.7692cqw;
background: var(--fue-blue); display: grid; place-items: center;
}
.fue-composer b svg { width: 1.5385cqw; height: 1.5385cqw; fill: none; stroke: #fff; stroke-width: 2.2; }
.fue-studio-side { border-left: 1px solid var(--fue-line); background: var(--fue-bg-50); padding: 1.9231cqw 1.7308cqw; display: flex; flex-direction: column; gap: 1.1538cqw; min-height: 0; }
.fue-side-head { display: flex; align-items: center; justify-content: space-between; }
.fue-side-head strong { font: 600 1.5385cqw/1.2 var(--fue-font); }
.fue-drafts { display: flex; flex-direction: column; gap: 0.9615cqw; }
.fue-draft { background: var(--fue-white); border: 1px solid var(--fue-line); border-radius: 1.1538cqw; padding: 1.1538cqw 1.25cqw; display: flex; gap: 1.1538cqw; align-items: flex-start; }
.fue-draft img.fue-face { width: 4.4231cqw; height: 4.4231cqw; border-radius: 50%; object-fit: cover; flex: none; }
.fue-draft img.fue-media { width: 5.9615cqw; height: 4.4231cqw; border-radius: 0.7692cqw; object-fit: cover; flex: none; }
.fue-draft-body { min-width: 0; display: flex; flex-direction: column; gap: 0.3846cqw; }
.fue-draft h4 { font: 600 1.4423cqw/1.25 var(--fue-font); }
.fue-draft p { font: 400 1.25cqw/1.45 var(--fue-font); color: var(--fue-muted); }
.fue-draft-meta { display: flex; align-items: center; gap: 0.6731cqw; font: 500 1.25cqw/1 var(--fue-font); color: var(--fue-muted); }
.fue-tags { display: flex; gap: 0.5769cqw; flex-wrap: wrap; margin-top: 0.1923cqw; }
.fue-tags .fue-chip { height: 2.2115cqw; font-size: 1.2019cqw; padding: 0 0.8654cqw; }
.fue-check { margin-left: auto; width: 1.9231cqw; height: 1.9231cqw; border-radius: 50%; background: var(--fue-success-bg); display: grid; place-items: center; flex: none; }
.fue-check svg { width: 1.1538cqw; height: 1.1538cqw; fill: none; stroke: var(--fue-success); stroke-width: 2.4; }
.fue-side-foot { margin-top: auto; display: flex; gap: 0.7692cqw; }
.fue-side-foot .fue-btn { flex: 1; }
.fue-call { flex: 1; position: relative; background: var(--fue-call); min-height: 0; }
.fue-call-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fue-glass {
background: rgba(14,14,22,.58);
backdrop-filter: blur(0.7692cqw);
-webkit-backdrop-filter: blur(0.7692cqw);
color: #fff;
border: 1px solid rgba(255,255,255,.14);
}
.fue-call-top { position: absolute; top: 1.7308cqw; left: 1.7308cqw; right: 1.7308cqw; display: flex; align-items: center; justify-content: space-between; gap: 1.1538cqw; }
.fue-call-top-l { display: flex; align-items: center; gap: 0.9615cqw; }
.fue-live { display: inline-flex; align-items: center; gap: 0.6731cqw; height: 2.8846cqw; padding: 0 1.1538cqw; border-radius: 96.0577cqw; font: 600 1.1538cqw/1 var(--fue-font); letter-spacing: .08em; background: #E5242B; color: #fff; }
.fue-live i { width: 0.6731cqw; height: 0.6731cqw; border-radius: 50%; background: #fff; }
.fue-call-title { display: inline-flex; align-items: center; height: 2.8846cqw; padding: 0 1.25cqw; border-radius: 96.0577cqw; font: 500 1.3462cqw/1 var(--fue-font); }
.fue-call-clock { display: inline-flex; align-items: center; height: 2.8846cqw; padding: 0 1.25cqw; border-radius: 96.0577cqw; font: 600 1.3462cqw/1 var(--fue-font); font-variant-numeric: tabular-nums; }
.fue-call-name { position: absolute; left: 1.7308cqw; bottom: 9.2308cqw; display: inline-flex; align-items: center; gap: 0.7692cqw; height: 3.0769cqw; padding: 0 1.25cqw; border-radius: 96.0577cqw; font: 500 1.3462cqw/1 var(--fue-font); }
.fue-call-name i { width: 0.6731cqw; height: 0.6731cqw; border-radius: 50%; background: #4ADE80; }
.fue-captions { position: absolute; left: 50%; transform: translateX(-50%); bottom: 9.6154cqw; width: 50cqw; display: flex; flex-direction: column; gap: 0.6731cqw; align-items: center; }
.fue-cap { display: flex; gap: 0.8654cqw; align-items: baseline; padding: 0.9615cqw 1.4423cqw; border-radius: 1.1538cqw; font: 400 1.4423cqw/1.45 var(--fue-font); }
.fue-cap b { font: 600 1.25cqw/1.45 var(--fue-font); color: var(--fue-blue-muted); }
.fue-cap--past { opacity: .45; font-size: 1.3462cqw; padding: 0.6731cqw 1.25cqw; }
.fue-levers { position: absolute; right: 1.7308cqw; top: 6.3462cqw; width: 27.6923cqw; display: flex; flex-direction: column; gap: 0.6731cqw; }
.fue-levers-head { display: flex; align-items: center; justify-content: space-between; padding: 0.8654cqw 1.25cqw; border-radius: 0.9615cqw; font: 500 1.25cqw/1 var(--fue-font); }
.fue-levers-head b { font-weight: 600; }
.fue-lever { display: flex; align-items: center; gap: 0.9615cqw; padding: 0.9615cqw 1.25cqw; border-radius: 0.9615cqw; font: 400 1.3462cqw/1.3 var(--fue-font); }
.fue-mark { flex: none; width: 2.0192cqw; height: 2.0192cqw; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); display: grid; place-items: center; font: 600 1.1538cqw/1 var(--fue-font); color: rgba(255,255,255,.75); }
.fue-lever[data-state="done"] .fue-mark { background: #4ADE80; border-color: #4ADE80; color: transparent; }
.fue-lever[data-state="done"] .fue-mark svg { display: block; }
.fue-mark svg { display: none; position: absolute; width: 1.1538cqw; height: 1.1538cqw; fill: none; stroke: #0B3B24; stroke-width: 2.6; }
.fue-lever[data-state="active"] { border-color: rgba(172,190,255,.65); }
.fue-lever[data-state="todo"] { opacity: .62; }
.fue-callbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.9231cqw; display: flex; gap: 1.1538cqw; }
.fue-callbar span { width: 4.4231cqw; height: 4.4231cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); }
.fue-callbar span.is-end { background: #E5242B; border-color: #E5242B; }
.fue-callbar svg { width: 1.9231cqw; height: 1.9231cqw; fill: none; stroke: #fff; stroke-width: 1.9; }
.fue-pip { position: absolute; right: 1.7308cqw; bottom: 1.9231cqw; width: 16.1538cqw; height: 10.7692cqw; border-radius: 1.1538cqw; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: #1A1A26; }
.fue-pip img { width: 100%; height: 100%; object-fit: cover; }
.fue-pip span { position: absolute; left: 0.7692cqw; bottom: 0.6731cqw; font: 500 1.1538cqw/1 var(--fue-font); color: #fff; text-shadow: 0 1px 0.2885cqw rgba(0,0,0,.6); }
.fue-dash { flex: 1; display: grid; grid-template-columns: 18.8462cqw minmax(0, 1fr); min-height: 0; }
.fue-rail { border-right: 1px solid var(--fue-line); background: var(--fue-bg-50); padding: 1.7308cqw 1.3462cqw; display: flex; flex-direction: column; gap: 0.4808cqw; }
.fue-rail-brand { display: flex; align-items: center; gap: 0.8654cqw; margin-bottom: 1.3462cqw; }
.fue-rail-brand img { width: 2.5cqw; height: 2.5cqw; border-radius: 0.6731cqw; }
.fue-rail-brand strong { font: 600 1.5385cqw/1 var(--fue-font); }
.fue-rail a { display: flex; align-items: center; gap: 0.8654cqw; padding: 0.8654cqw 1.0577cqw; border-radius: 0.8654cqw; font: 500 1.3462cqw/1 var(--fue-font); color: var(--fue-muted); text-decoration: none; }
.fue-rail a.is-on { background: var(--fue-wash); color: var(--fue-blue-deep); font-weight: 600; }
.fue-rail a i { width: 0.6731cqw; height: 0.6731cqw; border-radius: 0.1923cqw; background: currentColor; opacity: .55; flex: none; }
.fue-dash-main { padding: 1.9231cqw 2.1154cqw; display: flex; flex-direction: column; gap: 1.3462cqw; min-height: 0; min-width: 0; }
.fue-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.1538cqw; }
.fue-dash-head h3 { font: 600 2.0192cqw/1.2 var(--fue-font); }
.fue-dash-head p { font: 400 1.3462cqw/1.3 var(--fue-font); color: var(--fue-muted); margin-top: 0.2885cqw; }
.fue-filters { display: flex; gap: 0.6731cqw; }
.fue-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1538cqw; }
.fue-kpi { border: 1px solid var(--fue-line); border-radius: 1.1538cqw; padding: 1.25cqw 1.3462cqw; background: var(--fue-white); display: flex; flex-direction: column; gap: 0.5769cqw; }
.fue-kpi span { font: 500 1.25cqw/1 var(--fue-font); color: var(--fue-muted); }
.fue-kpi strong { font: 600 2.6923cqw/1 var(--fue-font); font-variant-numeric: tabular-nums; }
.fue-kpi em { font: 500 1.25cqw/1 var(--fue-font); font-style: normal; color: var(--fue-success); }
.fue-panelbox { border: 1px solid var(--fue-line); border-radius: 1.1538cqw; background: var(--fue-white); display: flex; flex-direction: column; min-height: 0; }
.fue-panelbox > header { display: flex; align-items: center; justify-content: space-between; padding: 1.1538cqw 1.3462cqw; border-bottom: 1px solid var(--fue-line); }
.fue-panelbox > header strong { font: 600 1.4423cqw/1 var(--fue-font); }
.fue-panelbox > header span { font: 500 1.25cqw/1 var(--fue-font); color: var(--fue-blue); }
.fue-row { display: grid; grid-template-columns: minmax(0, 1fr) 12.6923cqw 10.3846cqw 8.8462cqw; align-items: center; gap: 1.1538cqw; padding: 1.0577cqw 1.3462cqw; border-bottom: 1px solid var(--fue-line); }
.fue-row:last-child { border-bottom: 0; }
.fue-row--head { padding-top: 0.8654cqw; padding-bottom: 0.8654cqw; background: var(--fue-bg-50); }
.fue-row--head span { font: 600 1.1538cqw/1 var(--fue-font); letter-spacing: .05em; text-transform: uppercase; color: var(--fue-faint); }
.fue-learner { display: flex; align-items: center; gap: 0.9615cqw; min-width: 0; overflow: hidden; }
.fue-learner > span, .fue-learner b, .fue-learner em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fue-learner i { width: 2.8846cqw; height: 2.8846cqw; border-radius: 50%; background: var(--fue-wash); color: var(--fue-blue); display: grid; place-items: center; font: 600 1.1538cqw/1 var(--fue-font); font-style: normal; flex: none; }
.fue-learner b { font: 500 1.3462cqw/1.2 var(--fue-font); display: block; }
.fue-learner em { font: 400 1.2019cqw/1.2 var(--fue-font); font-style: normal; color: var(--fue-muted); display: block; }
.fue-row time, .fue-row .fue-num { font: 500 1.2981cqw/1 var(--fue-font); color: var(--fue-muted); font-variant-numeric: tabular-nums; }
.fue-bars { display: flex; align-items: center; gap: 0.3846cqw; }
.fue-bars i { width: 0.8654cqw; height: 1.7308cqw; border-radius: 0.1923cqw; background: var(--fue-line-2); }
.fue-bars i.is-on { background: var(--fue-blue); }
.fue-score { display: inline-flex; align-items: center; justify-content: center; height: 2.5cqw; min-width: 5cqw; padding: 0 0.8654cqw; border-radius: 0.6731cqw; font: 600 1.3462cqw/1 var(--fue-font); font-variant-numeric: tabular-nums; }
.fue-score--ok { background: var(--fue-success-bg); color: var(--fue-success-text); }
.fue-score--mid { background: var(--fue-warning-bg); color: var(--fue-warning); }
.fue-score--low { background: var(--fue-error-bg); color: var(--fue-error-text); }
.fue-split { display: grid; grid-template-columns: minmax(0, 1fr) 27.5cqw; gap: 1.1538cqw; flex: 1; min-height: 0; }
.fue-split > * { min-width: 0; }
.fue-levers-stat { padding: 1.1538cqw 1.3462cqw; display: flex; flex-direction: column; gap: 1.0577cqw; }
.fue-lstat b { font: 500 1.3462cqw/1.2 var(--fue-font); display: block; margin-bottom: 0.5769cqw; }
.fue-lstat-row { display: flex; align-items: center; gap: 0.9615cqw; }
.fue-track { flex: 1; height: 0.6731cqw; border-radius: 96.0577cqw; background: var(--fue-bg-alt); overflow: hidden; }
.fue-track i { display: block; height: 100%; border-radius: 96.0577cqw; background: var(--fue-blue); }
.fue-lstat span { font: 600 1.25cqw/1 var(--fue-font); color: var(--fue-muted); font-variant-numeric: tabular-nums; width: 3.8462cqw; text-align: right; }
.fue-legend { display: flex; flex-wrap: wrap; gap: 0.5769cqw 1.1538cqw; padding: 0.8654cqw 1.3462cqw; border-bottom: 1px solid var(--fue-line); background: var(--fue-bg-50); }
.fue-legend span { display: inline-flex; align-items: center; gap: 0.5769cqw; font: 500 1.1538cqw/1 var(--fue-font); color: var(--fue-muted); }
.fue-circ { width: 1.3462cqw; height: 1.3462cqw; border-radius: 50%; flex: none; display: block; }
.fue-circ--none { border: 1.5px dashed var(--fue-line-2); }
.fue-circ--miss { border: 1.5px solid var(--fue-line-2); }
.fue-circ--half { border: 1.5px solid var(--fue-blue); background: linear-gradient(90deg, var(--fue-blue) 50%, transparent 50%); }
.fue-circ--full { background: var(--fue-blue); }
.fue-grid { display: flex; flex-direction: column; flex: 1; }
.fue-grid-row--foot { margin-top: auto; }
.fue-grid-row { display: grid; grid-template-columns: minmax(0, 12.6923cqw) repeat(4, minmax(0, 1fr)) 5.1923cqw; align-items: center; gap: 0.7692cqw; padding: 0.8654cqw 1.3462cqw; border-bottom: 1px solid var(--fue-line); justify-items: center; }
.fue-grid-row > :first-child { justify-self: start; }
.fue-grid-row:last-child { border-bottom: 0; }
.fue-grid-row--head span { font: 600 1.1058cqw/1.25 var(--fue-font); color: var(--fue-faint); text-align: center; }
.fue-grid-row--head span:first-child { text-align: left; }
.fue-grid-row--foot { background: var(--fue-bg-50); }
.fue-grid-row--foot > span:first-child { font: 600 1.1538cqw/1 var(--fue-font); color: var(--fue-faint); }
.fue-grid-tot { font: 600 1.25cqw/1 var(--fue-font); color: var(--fue-ink-2); font-variant-numeric: tabular-nums; }
.fue-mini { display: flex; flex-direction: column; align-items: center; gap: 0.3846cqw; width: 100%; }
.fue-mini b { font: 600 1.1538cqw/1 var(--fue-font); color: var(--fue-muted); font-variant-numeric: tabular-nums; }
.fue-mini i { display: block; width: 72%; height: 0.3846cqw; border-radius: 96.0577cqw; background: var(--fue-bg-alt); overflow: hidden; }
.fue-mini u { display: block; height: 100%; background: var(--fue-blue); text-decoration: none; }
.fue-col { display: flex; flex-direction: column; gap: 1.1538cqw; min-height: 0; }
.fue-row--soft { grid-template-columns: minmax(0, 1fr) auto; }
.fue-histbox { flex: 1; }
.fue-hist { flex: 1; display: flex; align-items: flex-end; gap: 0.5769cqw; padding: 1.1538cqw 1.3462cqw 1.3462cqw; }
.fue-hist i { flex: 1; border-radius: 0.2885cqw 0.2885cqw 0 0; background: var(--fue-blue-muted); min-height: 0.5769cqw; }
.fue-hist i:nth-child(6), .fue-hist i:nth-child(10) { background: var(--fue-blue); }
.fue-kpi strong small { font: 500 1.4423cqw/1 var(--fue-font); color: var(--fue-faint); }
.fue-lines { display: flex; flex-direction: column; gap: 0.1923cqw; min-width: 0; overflow: hidden; }
.fu-en { display: none; }
html[lang="en"] .fu-fr { display: none; }
html[lang="en"] .fu-en { display: inline; }