:root{
  --bg:#eef4fb;
  --bg-soft:#ffffff;
  --panel:#ffffff;
  --panel-2:#f7faff;
  --panel-3:#edf3fb;
  --stroke:rgba(36,62,104,.10);
  --text:#16253b;
  --muted:#62748d;
  --accent:#2f8eff;
  --accent-2:#6c63ff;
  --accent-3:#24b88f;
  --danger:#d85d75;
  --shadow:0 24px 60px rgba(35,59,99,.12);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:
    radial-gradient(circle at top right, rgba(47,142,255,.14), transparent 32%),
    radial-gradient(circle at top left, rgba(108,99,255,.12), transparent 28%),
    linear-gradient(180deg,#f6f9fe 0%, #eaf1f8 100%);
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
}
body{min-height:100vh}
a{color:var(--accent)}
.hidden{display:none!important}
.page{max-width:1440px;margin:0 auto;padding:28px}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}
.brand h1{margin:0;font-size:32px;line-height:1.05;letter-spacing:-.03em}
.brand p{margin:8px 0 0;color:var(--muted);max-width:780px}
.top-actions,.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.top-actions{justify-content:flex-end}
.user-chip{
  display:grid;
  gap:7px;
  min-width:210px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:18px;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 24px rgba(38,60,99,.06);
}
.user-chip-main{
  display:grid;
  gap:2px;
  line-height:1.15;
}
.user-chip-name{
  color:var(--text);
  font-size:14px;
  font-weight:700;
}
.user-chip-role{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.top-language-control{
  display:grid;
  grid-template-columns:auto minmax(108px,1fr);
  align-items:center;
  gap:7px;
}
.top-language-control label{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.top-language-control select{
  width:100%;
  min-height:34px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:var(--bg-soft);
  color:var(--text);
  padding:6px 28px 6px 10px;
  font:inherit;
  font-size:13px;
}
.top-language-status{
  grid-column:1 / -1;
  margin-top:0;
  padding:7px 9px;
  border-radius:10px;
  font-size:12px;
}
.btn,.chip,input{
  min-height:46px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--bg-soft);
  color:var(--text);
  padding:0 14px;
  font:inherit;
}
.btn{
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  box-shadow:0 10px 24px rgba(38,60,99,.08);
}
.btn:hover{transform:translateY(-1px);border-color:rgba(47,142,255,.34)}
.btn.primary{
  background:linear-gradient(135deg, rgba(47,142,255,.14), rgba(108,99,255,.12));
  border-color:rgba(47,142,255,.26);
  box-shadow:0 16px 34px rgba(47,138,255,.12);
}
.btn.ghost{background:rgba(255,255,255,.74)}
.btn.danger{background:rgba(216,93,117,.08);border-color:rgba(216,93,117,.22)}
.chip{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 12px;
  border-radius:999px;
  background:#f4f7fc;
  color:var(--muted);
}
.shell{display:grid;grid-template-columns:1fr;gap:18px}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,254,.98));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel-inner{padding:20px}
.panel h2,.panel h3,.panel h4{margin:0 0 10px}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px}
.grid.hero{grid-template-columns:1.4fr .6fr}
.grid.kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.badges{grid-template-columns:repeat(auto-fill,minmax(192px,1fr))}
.hero-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(47,142,255,.14), transparent 34%),
    radial-gradient(circle at bottom left, rgba(108,99,255,.12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,247,253,.98));
}
.hero-card::after{
  content:'';
  position:absolute;
  inset:auto -80px -90px auto;
  width:240px;
  height:240px;
  background:radial-gradient(circle, rgba(47,142,255,.12), transparent 62%);
  pointer-events:none;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:12px;
}
.hero-name{font-size:34px;line-height:1.05;letter-spacing:-.04em;margin:0 0 8px}
.hero-sub{color:var(--muted);margin:0 0 12px;max-width:620px}
.hero-main-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:14px;
}
.hero-info-copy{
  flex:1 1 auto;
  min-width:0;
}
.avatar-btn{
  width:166px;
  height:166px;
  border-radius:28px;
  border:1px solid rgba(36,62,104,.14);
  background:linear-gradient(180deg, #f9fcff, #edf4fd);
  box-shadow:0 10px 22px rgba(37,62,102,.12);
  display:grid;
  place-items:center;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  flex:0 0 auto;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.avatar-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(47,142,255,.36);
  box-shadow:0 14px 26px rgba(47,142,255,.18);
}
.avatar-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.avatar-placeholder{
  color:#39567a;
  font-size:26px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:0}
.level-line{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.hero-badges{margin-top:18px}
.hero-badges .section-head{margin-bottom:10px}
.hero-badges .section-head h3{font-size:16px}
.hero-badges .section-head p{font-size:12px}
.hero-badges .grid.badges{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.progress{
  width:100%;
  height:12px;
  background:rgba(36,62,104,.08);
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(36,62,104,.08);
}
.progress>span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:inherit;
}
.kpi-card{
  padding:18px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(36,62,104,.08);
  border-radius:18px;
  min-height:128px;
  position:relative;
  overflow:hidden;
}
.kpi-card::before{
  content:'';
  position:absolute;
  inset:-20px auto auto -10px;
  width:120px;
  height:120px;
  background:radial-gradient(circle, rgba(47,142,255,.07), transparent 70%);
  pointer-events:none;
}
.kpi-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpi-value{font-size:30px;font-weight:700;letter-spacing:-.03em;margin:12px 0 6px}
.kpi-note{color:var(--muted);font-size:13px}
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.section-head.compact{margin-bottom:12px}
.section-head p{margin:6px 0 0;color:var(--muted)}
.badge-card{
  position:relative;
  padding:14px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(36,62,104,.08);
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
  min-height:208px;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.badge-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(47,142,255,.03), rgba(255,255,255,0));
  pointer-events:none;
}
.badge-card.earned{
  box-shadow:0 0 0 1px rgba(47,142,255,.08), 0 12px 28px rgba(35,59,99,.10);
}
.badge-card:hover,
.badge-card.badge-insight-active{
  transform:translateY(-2px);
  border-color:rgba(47,142,255,.28);
  box-shadow:0 18px 40px rgba(35,59,99,.14);
}
.badge-card.badge-insight-active,
.widget-module .badge-visual.badge-insight-active{
  outline:2px solid rgba(47,142,255,.24);
  outline-offset:3px;
}
.badge-card.state-locked{
  background:#f8fbff;
  border-color:rgba(36,62,104,.06);
}
.badge-card.state-progress{
  border-color:rgba(47,142,255,.18);
}
.badge-card.state-unlocked{
  border-color:rgba(36,62,104,.12);
}
.badge-visual{
  position:relative;
  width:104px;
  height:104px;
  aspect-ratio:1 / 1;
  border-radius:20px;
  display:grid;
  place-items:center;
  margin:0 auto;
  background:linear-gradient(180deg, rgba(47,142,255,.04), rgba(255,255,255,.14));
  border:1px solid rgba(36,62,104,.06);
}
.badge-svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
.badge-card h4{margin:0;font-size:15px;letter-spacing:-.02em;line-height:1.2}
.badge-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.35}
.badge-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.badge-chip{
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(36,62,104,.10);
  background:#f5f8fd;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
}
.badge-chip.state-unlocked{
  color:#1f6fce;
  border-color:rgba(47,142,255,.24);
}
.badge-chip.state-progress{
  color:#9a6a13;
  border-color:rgba(217,171,76,.28);
}
.badge-chip.state-locked{
  color:#72829c;
}
.badge-meter{display:flex;align-items:center;gap:8px;margin-top:auto}
.badge-meter .progress{height:8px}
.badge-stat{
  min-width:42px;
  text-align:right;
  font-size:11px;
  color:var(--text);
  font-weight:700;
}
.badge-stat-full{
  width:100%;
  min-width:0;
  text-align:left;
  color:var(--muted);
}
.badge-meter-stars{
  justify-content:space-between;
}
.badge-meter-level .badge-stat{
  min-width:54px;
}
.badge-rating-stars{
  --rating-fill:0%;
  position:relative;
  display:inline-block;
  min-width:72px;
  line-height:1;
}
.badge-rating-stars::before,
.badge-rating-stars::after{
  content:'\2605\2605\2605\2605\2605';
  font-size:14px;
  letter-spacing:1px;
  display:block;
  white-space:nowrap;
}
.badge-rating-stars::before{
  color:rgba(36,62,104,.18);
}
.badge-rating-stars::after{
  color:#f0b94d;
  position:absolute;
  inset:0 auto 0 0;
  width:var(--rating-fill);
  overflow:hidden;
}
.badge-rating-stars-large::before,
.badge-rating-stars-large::after{
  font-size:16px;
  letter-spacing:1.5px;
}
.badge-insight-popover{
  position:fixed;
  z-index:3000;
  width:min(352px, calc(100vw - 24px));
  border:1px solid rgba(36,62,104,.12);
  border-radius:20px;
  background:
    radial-gradient(circle at top right, rgba(47,142,255,.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,253,.98));
  box-shadow:0 24px 70px rgba(24,43,76,.22);
  padding:14px;
  opacity:0;
  transform:translateY(8px) scale(.985);
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
.badge-insight-popover.visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.badge-insight-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.badge-insight-kicker{
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.badge-insight-head h4{
  margin:4px 0 0;
  font-size:18px;
  letter-spacing:-.03em;
}
.badge-insight-close{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(36,62,104,.10);
  background:#f4f7fc;
  color:var(--muted);
  cursor:pointer;
  font:inherit;
  line-height:1;
}
.badge-insight-description{
  margin:10px 0 12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.badge-insight-status{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.badge-insight-trend{
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(98,116,141,.10);
  color:var(--muted);
}
.badge-insight-trend.up{background:rgba(36,184,143,.12);color:#12745c}
.badge-insight-trend.down{background:rgba(216,93,117,.12);color:#9f3349}
.badge-insight-chart-wrap{
  border:1px solid rgba(36,62,104,.08);
  border-radius:16px;
  background:rgba(255,255,255,.72);
  padding:10px;
}
.badge-insight-chart{
  width:100%;
  height:70px;
  display:block;
}
.badge-insight-guide{
  stroke-width:1.5;
  stroke-dasharray:5 4;
}
.badge-insight-guide.baseline{
  stroke:rgba(98,116,141,.42);
}
.badge-insight-guide.target{
  stroke:rgba(36,184,143,.62);
}
.badge-insight-period{
  margin-top:6px;
  color:var(--muted);
  font-size:11px;
}
.badge-insight-bars{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.badge-insight-rating-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(47,142,255,.08);
  font-size:12px;
}
.badge-insight-rating-value{
  display:flex;
  align-items:center;
  gap:8px;
}
.badge-insight-rating-value strong{
  font-size:12px;
}
.badge-insight-goal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.badge-insight-goal-card{
  min-height:70px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(36,62,104,.08);
  background:rgba(255,255,255,.76);
  display:grid;
  align-content:center;
  gap:6px;
}
.badge-insight-goal-card span{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.badge-insight-goal-card strong{
  color:var(--text);
  font-size:16px;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.badge-insight-level-progress{
  margin-top:12px;
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:14px;
  background:rgba(36,184,143,.08);
}
.badge-insight-level-progress>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:11px;
}
.badge-insight-level-progress strong{
  color:var(--text);
}
.badge-insight-level-progress .progress{
  height:8px;
}
.badge-insight-bar-row{
  display:grid;
  grid-template-columns:52px 1fr 44px;
  gap:8px;
  align-items:center;
  font-size:12px;
}
.badge-insight-bar-row div{
  height:8px;
  border-radius:999px;
  background:rgba(36,62,104,.08);
  overflow:hidden;
}
.badge-insight-bar-row i{
  display:block;
  height:100%;
  min-width:3px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-3));
}
.badge-insight-bar-row.muted-row i{
  background:linear-gradient(90deg, rgba(98,116,141,.42), rgba(108,99,255,.52));
}
.badge-insight-note,
.badge-insight-fallback{
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.badge-insight-fallback{
  padding:9px 10px;
  border-radius:12px;
  background:rgba(98,116,141,.08);
}
.badge-insight-next{
  margin-top:12px;
  display:grid;
  gap:4px;
  padding:10px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(47,142,255,.09), rgba(36,184,143,.08));
}
.badge-insight-next strong{
  font-size:12px;
}
.badge-insight-next span{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.proactivity-quote-carousel{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:2px 2px 6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.proactivity-quote-card{
  min-width:220px;
  max-width:240px;
  scroll-snap-align:start;
  background:#fff;
  border:1px solid rgba(36,62,104,.12);
  border-radius:12px;
  padding:10px;
  display:grid;
  gap:8px;
}
.proactivity-quote-card p{
  margin:0;
  color:var(--text);
  font-size:12px;
  line-height:1.35;
}
.proactivity-quote-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:11px;
}
.demo-pill{
  border-color:rgba(47,142,255,.3);
  background:rgba(47,142,255,.1);
  color:#2457d6;
}
.demo-feedback-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.demo-feedback-carousel{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  margin-top:6px;
}
.demo-feedback-arrow{
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(36,62,104,.2);
  background:#fff;
  color:#35537d;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:14px;
  line-height:1;
  padding:0;
}
.demo-feedback-arrow:disabled{
  opacity:.4;
  cursor:not-allowed;
}
.demo-feedback-carousel-viewport{
  overflow:hidden;
  border-radius:12px;
}
.demo-feedback-carousel-track{
  display:flex;
  transition:transform .22s ease;
  will-change:transform;
}
.demo-feedback-carousel-slide{
  min-width:100%;
  box-sizing:border-box;
  padding:1px 2px;
}
.demo-feedback-list{
  display:grid;
  gap:8px;
  max-height:246px;
  overflow:auto;
  padding-right:4px;
  margin-top:6px;
}
.demo-feedback-card{
  border:1px solid rgba(36,62,104,.14);
  border-radius:12px;
  padding:10px;
  background:rgba(255,255,255,.9);
  display:grid;
  gap:6px;
}
.demo-feedback-card p{
  margin:0;
  color:var(--text);
  font-size:12px;
  line-height:1.4;
}
.demo-feedback-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  color:var(--muted);
  font-size:11px;
}
.demo-feedback-tag{
  min-height:20px;
  padding:1px 8px;
  font-size:10px;
  border-radius:999px;
  border:1px solid rgba(36,62,104,.2);
  background:rgba(36,62,104,.06);
  color:#35537d;
}
.demo-feedback-section{
  display:grid;
  gap:12px;
}
.demo-feedback-ticker-shell{
  overflow:hidden;
  border:1px solid rgba(36,62,104,.18);
  border-radius:16px;
  padding:12px;
  background:
    radial-gradient(circle at 20% -30%, rgba(47,142,255,.12), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,246,255,.95));
}
.demo-feedback-ticker-track{
  display:flex;
  gap:12px;
  width:max-content;
  animation:demoFeedbackTicker 42s linear infinite;
}
.demo-feedback-ticker-card{
  width:260px;
  min-height:148px;
  border:1px solid rgba(36,62,104,.18);
  border-left:4px solid rgba(47,142,255,.55);
  border-radius:14px;
  padding:12px;
  background:#fff;
  display:grid;
  gap:9px;
  box-shadow:0 12px 28px rgba(24,43,76,.11);
}
.demo-feedback-ticker-card p{
  margin:0;
  color:#10243f;
  font-size:14px;
  line-height:1.5;
  font-weight:500;
}
.demo-feedback-foot{
  color:#3b557d;
  font-size:12px;
  font-weight:700;
}
.demo-feedback-ticker-card .demo-feedback-meta{
  color:#506a92;
  font-size:11px;
  font-weight:600;
}
.demo-feedback-ticker-card .demo-feedback-tag{
  font-size:10px;
}
.demo-feedback-tag-comunicazione{
  border-color:rgba(47,142,255,.35);
  background:rgba(47,142,255,.12);
  color:#2457d6;
}
.demo-feedback-tag-tempestivita{
  border-color:rgba(36,184,143,.35);
  background:rgba(36,184,143,.12);
  color:#167458;
}
.demo-feedback-tag-precisione{
  border-color:rgba(153,112,255,.35);
  background:rgba(153,112,255,.12);
  color:#6a3ec0;
}
.demo-feedback-tag-presidio{
  border-color:rgba(242,158,54,.38);
  background:rgba(242,158,54,.14);
  color:#a56200;
}
@keyframes demoFeedbackTicker{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 5px))}
}
.badge-board-item{
  display:grid;
  grid-template-columns:65px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 0;
  border-top:1px solid rgba(36,62,104,.08);
}
.badge-board-item:first-child{
  border-top:none;
  padding-top:0;
}
.badge-board-thumb{
  width:65px;
  height:65px;
  border-radius:16px;
  overflow:hidden;
  background:#f4f8fd;
  border:1px solid rgba(36,62,104,.08);
}
.badge-board-copy strong{
  display:block;
  font-size:14px;
}
.badge-board-copy span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}
.mini-list{display:grid;gap:12px}
.list-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-top:1px solid rgba(36,62,104,.08);
}
.list-item:first-child{border-top:none;padding-top:0}
.list-main strong{display:block;font-size:15px}
.list-main span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.list-side{text-align:right;min-width:110px;color:var(--muted);font-size:13px}
.chart-shell{
  border:1px solid rgba(36,62,104,.08);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.74);
}
.negative-trend-hero{
  display:grid;
  gap:16px;
}
.negative-trend-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.negative-trend-stat{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(79,140,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,247,255,.92));
  box-shadow:0 14px 30px rgba(79,140,255,.10);
}
.negative-trend-label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#315fba;
  margin-bottom:8px;
}
.negative-trend-stat strong{
  display:block;
  font-size:28px;
  line-height:1;
  color:#18243d;
}
.negative-trend-note,.negative-trend-delta{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.negative-trend-delta.up{color:#d6455d}
.negative-trend-delta.down{color:#1f8f68}
.negative-trend-delta.flat{color:var(--muted)}
.negative-trend-chart-shell{
  border:1px solid rgba(79,140,255,.14);
  border-radius:22px;
  padding:16px 16px 10px;
  background:
    radial-gradient(circle at top right, rgba(79,140,255,.14), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,255,.94));
  box-shadow:0 18px 40px rgba(24,36,61,.08);
}
.negative-trend-chart{
  width:100%;
  height:260px;
  display:block;
}
.negative-trend-grid line{
  stroke:rgba(49,95,186,.12);
  stroke-width:1;
  stroke-dasharray:4 6;
}
.negative-trend-chart text{
  fill:#5872a8;
  font-size:11px;
  font-weight:600;
}
.negative-trend-path{
  fill:none;
  stroke:url(#negativeTrendLine);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 8px 18px rgba(79,140,255,.20));
}
.negative-trend-latest{
  fill:#2457d6;
  stroke:#fff;
  stroke-width:3;
}
.negative-trend-peak{
  fill:#d9ebff;
  stroke:#4f8cff;
  stroke-width:3;
}
.sparkline{width:100%;height:220px;display:block}
.spark-grid line,.spark-grid path{stroke:rgba(36,62,104,.10);stroke-width:1}
.spark-line{fill:none;stroke:url(#sparkGradient);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.spark-area{fill:url(#sparkAreaGradient);opacity:.22}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}
.legend-dot{width:11px;height:11px;border-radius:999px;display:inline-block;margin-right:7px;vertical-align:middle}
.bar-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:10px;
  align-items:end;
  min-height:240px;
  margin-top:14px;
}
.bar-col{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  justify-content:flex-end;
  min-height:220px;
}
.bar-stack{display:grid;gap:5px;align-content:end;min-height:180px}
.bar{width:100%;border-radius:12px 12px 4px 4px;min-height:4px}
.bar.furto{background:linear-gradient(180deg, rgba(88,214,255,.95), rgba(88,214,255,.35))}
.bar.allontanamento{background:linear-gradient(180deg, rgba(127,121,255,.95), rgba(127,121,255,.35))}
.bar.negative{background:linear-gradient(180deg, rgba(255,114,133,.95), rgba(255,114,133,.35))}
.bar.positive{background:linear-gradient(180deg, rgba(70,242,180,.95), rgba(70,242,180,.35))}
.bar-label{color:var(--muted);text-align:center;font-size:12px;line-height:1.25}
.leaderboard{display:grid;gap:12px}
.reward-credits-card{
  border:1px solid rgba(47,142,255,.18);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(246,251,255,.95), rgba(255,255,255,.98));
  box-shadow:0 10px 28px rgba(24,43,76,.08);
  padding:12px;
  display:grid;
  gap:6px;
  margin-bottom:12px;
}
.reward-credits-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.reward-credits-head .kicker{
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.reward-credits-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.reward-info-btn{
  width:24px;height:24px;border-radius:999px;border:1px solid rgba(36,62,104,.14);
  background:#fff;color:var(--muted);font-weight:700;cursor:pointer;
}
.reward-credits-value{
  font-size:30px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--text);
}
.reward-credits-label{font-size:12px;color:var(--text);font-weight:600}
.reward-credits-note{font-size:12px;color:var(--muted)}
.reward-credits-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.reward-credits-popover{
  margin-top:8px;
  border:1px solid rgba(36,62,104,.1);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  padding:10px;
}
.avatar-crop-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(7,16,31,.56);
  z-index:4100;
}
.avatar-crop-modal{
  position:fixed;
  z-index:4101;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(92vw, 460px);
  border-radius:20px;
  border:1px solid rgba(36,62,104,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,253,.99));
  box-shadow:0 28px 60px rgba(9,18,35,.34);
  padding:14px;
  display:grid;
  gap:12px;
}
.avatar-crop-head h3{
  margin:0;
  font-size:16px;
}
.avatar-crop-preview{
  position:relative;
  width:320px;
  height:320px;
  max-width:100%;
  margin:0 auto;
  border-radius:18px;
  border:1px solid rgba(36,62,104,.12);
  background:#eaf1fb;
  overflow:hidden;
  touch-action:none;
  cursor:grab;
}
.avatar-crop-preview:active{cursor:grabbing}
.avatar-crop-preview img{
  position:absolute;
  top:0;
  left:0;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
}
.avatar-crop-frame{
  position:absolute;
  inset:0;
  border:2px solid rgba(255,255,255,.86);
  border-radius:18px;
  box-shadow:inset 0 0 0 999px rgba(8,16,28,.16);
  pointer-events:none;
}
.avatar-crop-controls{
  display:grid;
  gap:6px;
}
.avatar-crop-controls label{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.avatar-crop-controls input[type="range"]{
  width:100%;
}
.avatar-crop-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.leaderboard-tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.compact-btn{
  min-height:34px;
  padding:7px 12px;
  font-size:12px;
  border-radius:999px;
}
.leader{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(36,62,104,.08);
}
.leader.leader-compact{
  padding:10px 12px;
  border-radius:12px;
  gap:10px;
}
.leader.leader-compact .leader-rank{
  width:30px;
  height:30px;
  border-radius:10px;
  font-size:12px;
}
.leader.leader-compact strong{
  font-size:13px;
}
.leader.leader-compact .muted{
  font-size:11px;
  line-height:1.3;
}
.leader.leader-compact .leader-score strong{
  font-size:16px;
}
.leader.leader-compact .leader-score span{
  font-size:11px;
}
.leader.me{
  border-color:rgba(47,142,255,.24);
  box-shadow:0 0 0 1px rgba(47,142,255,.08);
}
.leader-rank{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:#eef4fc;color:var(--accent);font-weight:700;
}
.leader-score{text-align:right}
.leader-score strong{display:block;font-size:18px}
.leader-score span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.empty{
  padding:26px;border:1px dashed rgba(36,62,104,.14);border-radius:18px;
  color:var(--muted);text-align:center;background:rgba(255,255,255,.72);
}
.auth-shell{
  max-width:460px;margin:72px auto;padding:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,253,.99));
  border:1px solid var(--stroke);border-radius:26px;box-shadow:var(--shadow);
}
.auth-shell h1{margin:0 0 10px;font-size:32px;letter-spacing:-.04em}
.auth-shell p{margin:0 0 20px;color:var(--muted)}
.form-grid{display:grid;gap:14px}
.field{display:grid;gap:8px}
.field label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.field input,
.field select,
.field textarea{
  width:100%;
  min-height:48px;
  background:var(--bg-soft);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:10px 12px;
  color:var(--text);
  font:inherit;
}
.field textarea{min-height:96px;resize:vertical}
.field.full{grid-column:1 / -1}
.submission-form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.submissions-shell .table-wrap{
  max-height:300px;
  overflow:auto;
  border:1px solid rgba(36,62,104,.08);
  border-radius:14px;
  background:rgba(255,255,255,.7);
}
.submissions-shell table{width:100%;border-collapse:collapse}
.submissions-shell th,.submissions-shell td{
  padding:10px 12px;
  border-bottom:1px solid rgba(36,62,104,.08);
  text-align:left;
  font-size:13px;
  vertical-align:top;
}
.submissions-shell tbody tr{
  cursor:pointer;
  transition:background .16s ease;
}
.submissions-shell tbody tr:hover{
  background:rgba(47,142,255,.06);
}
.submissions-shell tbody tr.row-selected{
  background:rgba(47,142,255,.11);
}
.submissions-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
}
.tag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(36,62,104,.16);
  background:rgba(36,62,104,.07);
  color:var(--text);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.tag.status-pending_qc{background:rgba(47,142,255,.12);border-color:rgba(47,142,255,.3);color:#175cb5}
.tag.status-approved{background:rgba(36,184,143,.14);border-color:rgba(36,184,143,.32);color:#0c7a5e}
.tag.status-rejected{background:rgba(216,93,117,.14);border-color:rgba(216,93,117,.32);color:#a13b52}
.tag.status-needs_revision{background:rgba(242,158,54,.16);border-color:rgba(242,158,54,.34);color:#9b5900}
.tag.type-negative_report{background:rgba(216,93,117,.12);border-color:rgba(216,93,117,.28);color:#a13b52}
.tag.type-positive_report{background:rgba(36,184,143,.14);border-color:rgba(36,184,143,.3);color:#0c7a5e}
.submission-detail{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(36,62,104,.1);
}
.json-preview{
  margin:8px 0 0;
  max-height:220px;
  overflow:auto;
  padding:10px;
  border-radius:12px;
  background:rgba(12,22,38,.95);
  color:#d8e8ff;
  font-size:12px;
  line-height:1.45;
}
.status{
  margin-top:14px;padding:12px 14px;border-radius:14px;font-size:14px;
  background:rgba(255,255,255,.78);border:1px solid rgba(36,62,104,.08);
}
.status.error{background:rgba(216,93,117,.08);border-color:rgba(216,93,117,.24);color:#9c3046}
.status.success{background:rgba(36,184,143,.10);border-color:rgba(36,184,143,.22);color:#11654f}
.widget-launch-fallback{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.widget-launch-fallback a{
  color:#175cb5;
  font-weight:800;
  text-decoration:none;
}
.widget-launch-fallback a:hover{text-decoration:underline}
.widget-mode .page{max-width:980px;padding:20px}
.widget-mode .topbar,.widget-mode .nav,.widget-mode .common-shell{display:none!important}
.widget-shell{display:grid;gap:16px}
.widget-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
  align-items:start;
  grid-auto-flow:dense;
}
.widget-module{
  position:relative;
  padding:12px 12px 10px;
  border-radius:18px;
  border:1px solid rgba(36,62,104,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(242,247,253,.96));
  min-height:176px;
  box-shadow:0 12px 28px rgba(35,59,99,.08);
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.widget-module:hover{
  border-color:rgba(47,142,255,.18);
  box-shadow:0 16px 34px rgba(35,59,99,.10);
}
.widget-module.dragging{
  opacity:.55;
  transform:scale(.98);
}
.widget-module.drop-target{
  border-color:rgba(47,142,255,.34);
  box-shadow:0 0 0 2px rgba(47,142,255,.12);
}
.widget-module-graph{
  min-height:152px;
}
.widget-module-badge{
  width:100%;
  max-width:none;
  justify-self:stretch;
}
.widget-module-graph h4,
.widget-module-badge h4{
  margin:0;
  font-size:14px;
  line-height:1.25;
}
.widget-module-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.widget-module-title{
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.widget-drag-handle{
  width:28px;
  min-width:28px;
  height:28px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#eef4fc;
  border:1px solid rgba(36,62,104,.10);
  color:#7a89a3;
  cursor:grab;
  font-weight:800;
  letter-spacing:.08em;
  user-select:none;
}
.widget-module:active .widget-drag-handle{
  cursor:grabbing;
}
.widget-module .badge-visual{
  margin:0 auto 6px;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
.widget-module .badge-visual:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(35,59,99,.10);
}
.widget-flow-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.widget-flow-head h4{
  margin:0;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--text);
}
.widget-flow-total{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.03em;
  margin-bottom:2px;
  color:var(--text);
}
.widget-flow-chart{
  width:100%;
  height:54px;
}
.widget-flow-chart svg{
  width:100%;
  height:100%;
  display:block;
}
.widget-flow-note{
  margin:2px 0 0;
  font-size:10px;
  line-height:1.35;
  color:var(--muted);
}
.scroll-theme{
  scrollbar-width:thin;
  scrollbar-color:rgba(108,99,255,.45) rgba(36,62,104,.08);
}
.scroll-theme::-webkit-scrollbar{width:12px;height:12px}
.scroll-theme::-webkit-scrollbar-track{background:rgba(36,62,104,.08);border-radius:999px}
.scroll-theme::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(47,142,255,.48), rgba(108,99,255,.48));
  border-radius:999px;border:2px solid rgba(245,248,253,.95);
}
@media (max-width:1180px){
  .grid.hero,.grid.kpi,.grid.two,.grid.three{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .page{padding:18px}
  .grid.hero,.grid.kpi,.grid.two,.grid.three{grid-template-columns:1fr}
  .submission-form-grid{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:flex-start}
  .top-actions{width:100%;justify-content:flex-start}
  .user-chip{width:100%;max-width:360px}
  .hero-main-row{flex-direction:column;align-items:flex-start}
  .avatar-btn{width:152px;height:152px;border-radius:24px}
  .bar-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid.badges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .widget-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .widget-module-badge{max-width:none}
  .negative-trend-meta{grid-template-columns:1fr}
  .negative-trend-chart{height:220px}
  .demo-feedback-ticker-shell{overflow:auto}
  .demo-feedback-ticker-track{animation:none}
  .demo-feedback-ticker-card{width:240px;min-width:240px}
}
@media (max-width:420px){
  .widget-grid{grid-template-columns:1fr}
  .demo-feedback-list{max-height:210px}
  .demo-feedback-ticker-card{width:216px;min-width:216px}
}
@media (prefers-reduced-motion:reduce){
  .demo-feedback-ticker-track{animation:none}
}

/* Smooth chart system shared with BOR Operations Hub. */
.chart-shell,
.negative-trend-chart-shell,
.badge-insight-chart-wrap,
.widget-flow-card{
  border:none;
  outline:none;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 42px rgba(22,37,59,.08);
}

.chart-shell{
  padding:20px 22px;
}

.negative-trend-chart-shell{
  padding:20px 22px 14px;
  background:
    radial-gradient(circle at 86% 8%, rgba(79,140,255,.10), transparent 34%),
    rgba(255,255,255,.86);
}

.negative-trend-stat{
  border:none;
  background:rgba(255,255,255,.76);
  box-shadow:0 12px 28px rgba(22,37,59,.06);
}

.badge-insight-chart-wrap{
  padding:12px;
  background:rgba(255,255,255,.84);
}

.spark-grid line,
.negative-trend-grid line{
  stroke:rgba(36,62,104,.08);
  stroke-width:1;
  stroke-dasharray:0;
}

.spark-line,
.negative-trend-path,
.badge-insight-chart path[fill="none"],
.widget-flow-chart path[fill="none"]{
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:none;
}

.spark-area{
  opacity:1;
}

.negative-trend-path{
  stroke-width:2.35;
}

.negative-trend-chart text,
.badge-insight-chart text{
  font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:10.5px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  text-shadow:none;
  fill:rgba(98,116,141,.86);
}

.operator-chart-point,
.widget-flow-chart .operator-chart-point,
.badge-insight-chart .operator-chart-point,
.sparkline .operator-chart-point{
  fill:#ffffff;
  stroke:#4b6fff;
  stroke-width:1.4;
}

.negative-trend-latest,
.negative-trend-peak{
  fill:#ffffff;
  stroke:#4b6fff;
  stroke-width:2;
}

.widget-flow-chart line{
  stroke:rgba(36,62,104,.08)!important;
}

.widget-flow-chart svg,
.badge-insight-chart,
.sparkline,
.negative-trend-chart{
  overflow:visible;
}

.chart-legend{
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.operator-personal-trend-card{
  background:#ffffff;
  border:none;
  box-shadow:0 18px 46px rgba(22,37,59,.07);
  border-radius:20px;
  padding:22px 24px 18px;
}

.operator-personal-trend-svg{
  height:300px;
}

.operator-personal-trend-grid line{
  stroke:rgba(15,23,42,.075);
  stroke-width:1;
}

.operator-personal-trend-axis{
  stroke:rgba(15,23,42,.10);
  stroke-width:1;
}

.operator-personal-trend-average{
  stroke:rgba(100,116,139,.18);
  stroke-width:1;
  stroke-dasharray:4 5;
}

.operator-personal-trend-tick{
  font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:10.5px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  fill:#64748b;
  text-shadow:none;
}

.operator-personal-trend-point{
  fill:#ffffff;
  stroke:#4b83ff;
  stroke-width:1.45;
}

.operator-personal-trend-card .spark-line{
  stroke-width:3.35;
  filter:none;
}

.operator-personal-trend-card .spark-area{
  opacity:1;
}

.operator-coach-telegram-copy{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid rgba(47,142,255,.18);
  border-radius:12px;
  background:rgba(245,249,255,.82);
  display:grid;
  gap:8px;
}

.operator-coach-telegram-copy-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:26px;
}

.operator-coach-telegram-copy-head > span:first-child{
  color:#26466f;
  font-size:12px;
  font-weight:800;
}

.operator-coach-copy-btn{
  width:28px;
  height:28px;
  border:1px solid rgba(47,142,255,.24);
  border-radius:8px;
  background:#fff;
  color:#2457d6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.operator-coach-copy-btn:hover,
.operator-coach-copy-btn:focus-visible{
  background:rgba(47,142,255,.12);
  border-color:rgba(47,142,255,.45);
  transform:translateY(-1px);
  outline:none;
}

.operator-coach-copy-btn svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.operator-coach-copy-feedback{
  color:#167458;
  font-size:12px;
  font-weight:800;
  min-width:46px;
}

.operator-coach-telegram-copy-text{
  margin:0;
  color:#12243d;
  font-size:13px;
  line-height:1.45;
  font-weight:650;
}