/* ── SynaPro — dark theme ────────────────────────────────────── */

/* ── Variables ── */
:root {
  --bg:         #050b17;
  --bg2:        #060d1b;
  --bg3:        #0e1628;
  --border:     #1a2540;

  --purple:     #a78bfa;
  --cyan:       #22d3ee;
  --accent:     linear-gradient(135deg, #7c3aed, #22d3ee);

  --green:      #4ade80;
  --red:        #f87171;
  --amber:      #fbbf24;

  --text:       #f1f5f9;
  --text2:      #94a3b8;
  --text3:      #64748b;
  --text-muted: #64748b;

  --purple-bg:  #19173f;
  --purple-bd:  #4c3a9e;
  --green-bg:   #052e16;
  --green-bd:   #166534;
  --red-bg:     #2d0d0d;
  --red-bd:     #7f1d1d;

  --radius:    8px;
  --radius-lg: 12px;

  /* ── Spacing scale ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* ── Typography weights ── */
  --fw-regular: 400;
  --fw-semi:    500;
  --fw-bold:    600;
  --fw-black:   700;

  /* ── Type scale ── */
  --text-xs: 10px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;

  /* ── Motion ── */
  --dur-fast:    120ms;
  --dur-normal:  220ms;
  --dur-slow:    350ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Semantic category colours ── */
  --cat-pre:  #38bdf8;
  --cat-exec: #fb923c;
  --cat-val:  #a3e635;
  --cat-psy:  #e879f9;
  --cat-rev:  #fbbf24;
  --cat-soc:  #34d399;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

a       { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── App layout ── */
.app-shell  { display: flex; height: 100vh; overflow: hidden; }
.sidebar    { width: 210px; flex-shrink: 0; background: var(--bg2);
              border-right: 1px solid var(--border);
              display: flex; flex-direction: column;
              height: 100vh; overflow-y: auto; overflow-x: hidden; }
.main-area  { flex: 1; min-width: 0; display: flex; flex-direction: column;
              height: 100vh; overflow: hidden; }
.topbar     { background: var(--bg2); border-bottom: 1px solid var(--border);
              padding: 11px 24px; display: flex; align-items: center;
              justify-content: space-between; gap: 12px; flex-shrink: 0; }
.content    { padding: 24px; flex: 1; overflow-y: auto; }

/* ── Sidebar logo ── */
.sidebar-logo      { padding: 16px; border-bottom: 1px solid var(--border); }
.sidebar-logo-link { display: flex; flex-direction: row; align-items: center;
                     gap: 10px; text-decoration: none; }
.sidebar-logo-img  { height: 38px; width: auto; flex-shrink: 0;
                     filter: drop-shadow(0 0 10px rgba(167,139,250,0.45)); }
.sidebar-brand     { font-size: 18px; font-weight: 800; color: #fff;
                     letter-spacing: -0.3px; line-height: 1; }
.sidebar-brand .highlight {
  background: linear-gradient(135deg, #a78bfa, #22d3ee);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── Sidebar nav ── */
.sidebar-nav     { flex: 1; padding: 8px 0; }
.sidebar-section { font-size: 10px; color: var(--text3); padding: 14px 16px 4px;
                   text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.sidebar-item    { display: flex; align-items: center; gap: 10px;
                   padding: 8px 16px; font-size: 13px; color: var(--text2);
                   cursor: pointer; text-decoration: none; transition: all .15s;
                   border-left: 3px solid transparent; }
.sidebar-item:hover  { background: rgba(167,139,250,0.06); color: var(--text);
                       text-decoration: none; border-left-color: var(--border); }
.sidebar-item.active { background: rgba(167,139,250,0.12); color: var(--purple);
                       border-left-color: var(--purple); font-weight: 500; }
.sidebar-item svg    { flex-shrink: 0; opacity: .7; }
.sidebar-item.active svg { opacity: 1; }

/* ── Sidebar footer ── */
.sidebar-footer    { padding: 10px 12px 14px; border-top: 1px solid var(--border); }
.sidebar-made-with { font-size: 10px; color: var(--text3); text-align: center;
                     margin-bottom: 10px; }
.user-card  { display: flex; align-items: center; gap: 10px;
              padding: 10px; background: var(--bg3);
              border-radius: var(--radius); border: 1px solid var(--border); }
.user-info  { min-width: 0; }
.avatar     { width: 34px; height: 34px; border-radius: 50%;
              background: linear-gradient(135deg, var(--purple-bg), #1e1065);
              border: 1.5px solid var(--purple-bd);
              display: flex; align-items: center; justify-content: center;
              font-size: 12px; color: var(--purple); font-weight: 700; flex-shrink: 0; }
.user-name  { font-size: 12px; font-weight: 600; color: var(--text);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role  { font-size: 10px; color: var(--text3); }

/* ── Topbar ── */
.topbar-title { font-size: 15px; font-weight: 600; color: var(--text); }
.topbar-left  { display: flex; align-items: center; gap: 8px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.breadcrumb   { font-size: 13px; color: var(--text3); min-height: 30px;}
.breadcrumb a { color: var(--text3); transition: color .15s; }
.breadcrumb a:hover { color: var(--text2); text-decoration: none; }
.sep          { color: var(--border); font-size: 16px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg3); border: 0.5px solid var(--border);
  color: var(--text); padding: 5px 14px; border-radius: var(--radius);
  cursor: pointer; font-size: 12px; font-family: inherit;
  text-decoration: none; transition: background .15s;
}
.btn:hover         { background: var(--border); text-decoration: none; }
.btn-primary       { background: linear-gradient(135deg, #7c3aed 0%, #22d3ee 100%);
                     border: none; color: #fff; font-weight: 700;
                     box-shadow: 0 4px 15px rgba(34,211,238,0.2); }
.btn-primary:hover { filter: brightness(1.1);
                     box-shadow: 0 6px 20px rgba(34,211,238,0.4);
                     transform: translateY(-1px); }
a.btn-primary, a.btn-primary:hover { color: #fff; text-decoration: none; }
.btn-danger        { color: var(--red); border-color: var(--red-bd); }
.btn-danger:hover  { background: var(--red-bg); }
.btn-sm            { padding: 3px 10px; font-size: 11px; }

/* btn-primary nel topbar applicativo: aspetto identico al bottone di login */
.topbar .btn-primary {
  background: linear-gradient(90deg, #7c3aed 0%, #22d3ee 100%);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius);
  border: none;
  box-shadow: 0 4px 15px rgba(34,211,238,0.2);
}
.topbar .btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(34,211,238,0.4);
  transform: translateY(-1px);
}

/* ── Cards ── */
.card        { background: var(--bg2); border: 1px solid var(--border);
               border-radius: var(--radius-lg); padding: 16px; }
.card + .card { margin-top: 10px; }
.card-title  { font-size: 11px; color: var(--text3); font-weight: 500;
               text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }

/* ── Stat boxes ── */
.stat-grid   { display: grid; gap: 12px; margin-bottom: 20px; }
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stat-grid-5 { grid-template-columns: repeat(5, 1fr); }
.stat-box    { background: var(--bg2); border: 1px solid var(--border);
               border-radius: var(--radius-lg); padding: 16px 18px;
               position: relative; overflow: hidden; }
.stat-box::before { content: ""; position: absolute; inset: 0;
                    background: linear-gradient(135deg, rgba(167,139,250,0.04), transparent);
                    pointer-events: none; }
.stat-label  { font-size: 11px; color: var(--text3); margin-bottom: 6px;
               text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.stat-value  { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; }
.stat-sub    { font-size: 11px; color: var(--text3); margin-top: 4px; }
.stat-sparkline { position: absolute; bottom: 0; right: 0; width: 80px; height: 40px; opacity: 0.45; }
.green { color: var(--green); }
.red   { color: var(--red); }
.amber { color: var(--amber); }

/* ── Badges ── */
.badge         { display: inline-block; padding: 2px 9px; border-radius: 20px;
                 font-size: 11px; font-weight: 500; }
.badge-win     { background: rgba(34,211,238,0.1); color: var(--cyan);
                 border: 1px solid rgba(34,211,238,0.3); }
.badge-loss    { background: rgba(248,113,113,0.1); color: var(--red);
                 border: 1px solid rgba(248,113,113,0.3); }
.badge-be      { background: #1c1917; color: #a8a29e; border: 0.5px solid #44403c; }
.badge-shared  { background: var(--green-bg); color: var(--green);
                 border: 0.5px solid var(--green-bd); }
.badge-private { background: var(--bg3); color: var(--text3);
                 border: 0.5px solid var(--border); }
.badge-admin   { background: var(--purple-bg); color: var(--purple);
                 border: 0.5px solid var(--purple-bd); }

/* ── Pills ── */
.pill        { display: inline-flex; align-items: center; background: var(--bg3);
               border: 0.5px solid var(--border); border-radius: 5px;
               padding: 2px 8px; font-size: 11px; color: var(--text2); }
.pill-purple { background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple); }
.pill-green  { background: var(--green-bg);  border-color: var(--green-bd);  color: var(--green); }
.pill-red    { background: var(--red-bg);    border-color: var(--red-bd);    color: var(--red); }

/* ── Forms ── */
.form-group   { margin-bottom: 12px; }
.form-label   { display: block; font-size: 11px; color: var(--text3); margin-bottom: 4px; }
.form-control {
  width: 100%; background: rgba(15,17,23,0.8);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 10px; color: var(--text);
  font-size: 13px; font-family: inherit; transition: all 0.25s ease;
}
.form-control:focus   { outline: none; border-color: var(--purple);
                        box-shadow: 0 0 0 3px rgba(167,139,250,0.2);
                        background: rgba(15,17,23,1); }
select.form-control   { color: var(--text2); }
textarea.form-control { resize: vertical; min-height: 70px; }

/* ── Radio / YN buttons ── */
.radio-group { display: flex; gap: 4px; flex-wrap: wrap; }
.radio-opt, .yn-btn {
  background: var(--bg); border: 0.5px solid var(--border);
  border-radius: 5px; padding: 3px 11px; font-size: 12px;
  cursor: pointer; color: var(--text3); transition: all .15s; user-select: none;
}
.radio-opt:hover, .yn-btn:hover { border-color: var(--purple-bd); color: var(--text); }
.radio-opt.active    { background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple); }
.yn-btn.yes          { background: rgba(34,211,238,0.1); color: var(--cyan);
                       border: 1px solid rgba(34,211,238,0.3); }
.yn-btn.no           { background: rgba(248,113,113,0.1); color: var(--red);
                       border: 1px solid rgba(248,113,113,0.3); }
.yn-btn.long-active,  .btn.long-active  { background: var(--green-bg);
                                          border-color: var(--green-bd); color: var(--green); }
.yn-btn.short-active, .btn.short-active { background: var(--red-bg);
                                          border-color: var(--red-bd);  color: var(--red); }

/* ── Trade table ── */
.trade-table      { width: 100%; border-collapse: collapse; }
.trade-table th   { font-size: 11px; color: var(--text3); font-weight: 600;
                    padding: 8px 10px; border-bottom: 1px solid var(--border);
                    text-align: left; text-transform: uppercase; letter-spacing: .04em; }
.trade-table td   { padding: 11px 10px; border-bottom: 1px solid var(--bg3);
                    font-size: 13px; vertical-align: middle; }
.trade-table tbody tr:hover td { background: rgba(167,139,250,0.04); }
.trade-table tr:last-child td  { border-bottom: none; }
.trade-table a    { color: var(--text); text-decoration: none; }

/* ── Field row (dettaglio trade) ── */
.field-row          { display: flex; justify-content: space-between; align-items: center;
                      padding: 5px 0; border-bottom: 0.5px solid var(--bg3); font-size: 12px; }
.field-row:last-child { border-bottom: none; }
.field-key          { color: var(--text3); }
.field-val          { color: var(--text); font-weight: 500; }
.field-val.ok       { color: var(--green); }
.field-val.no       { color: var(--text3); }

/* ── Screenshot area ── */
.screenshot-tabs  { display: flex; gap: 2px; background: var(--bg);
                    border-radius: var(--radius); padding: 3px; margin-bottom: 10px; }
.scr-tab          { padding: 5px 12px; border-radius: 5px; cursor: pointer;
                    font-size: 12px; color: var(--text3); transition: all .15s; }
.scr-tab.active   { background: var(--bg3); color: var(--text); }
.screenshot-frame { background: var(--bg3); border: 0.5px solid var(--border);
                    border-radius: var(--radius); min-height: 200px;
                    display: flex; align-items: center; justify-content: center; }
.screenshot-frame img { max-width: 100%; border-radius: var(--radius); display: block; }
.drop-zone        { border: 0.5px dashed var(--border); border-radius: var(--radius);
                    padding: 14px; text-align: center; cursor: pointer;
                    color: var(--text3); font-size: 12px; transition: border-color .15s; }
.drop-zone:hover  { border-color: var(--purple-bd); color: var(--text2); }
.drop-zone.loaded { border-color: var(--green-bd); border-style: solid; }
.drop-zone.drag-over { border-color: var(--purple-bd); border-style: solid; background: var(--bg3); }
.url-row          { display: flex; gap: 6px; margin-top: 6px; }
.url-row .form-control { flex: 1; }

/* ── Insight ── */
.insight        { background: var(--bg3); border-radius: var(--radius); padding: 10px 14px;
                  margin-bottom: 6px; border-left: 2px solid var(--purple); }
.insight.warn   { border-left-color: var(--amber); }
.insight.danger { border-left-color: var(--red); }
.insight-label  { font-size: 11px; color: var(--purple); margin-bottom: 2px; }
.insight.warn   .insight-label { color: var(--amber); }
.insight.danger .insight-label { color: var(--red); }
.insight-val    { font-size: 13px; color: var(--text); }

/* ── Flash messages ── */
.flash-list           { list-style: none; padding: 0 20px; margin-top: 10px; }
.flash-item           { padding: 8px 14px; border-radius: var(--radius);
                        margin-bottom: 6px; font-size: 13px; border: 0.5px solid; }
.flash-item.success   { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.flash-item.danger    { background: var(--red-bg);   color: var(--red);   border-color: var(--red-bd); }
.flash-item.info      { background: var(--bg3); color: var(--text2); border-color: var(--border); }
.flash-item.warning   { background: #1c1507; color: var(--amber); border-color: #78350f; }
.flash-list-container { margin-bottom: 12px; }

/* ── Utilities ── */
.grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Variante per grafici journal detail: performance occupa più spazio, donut è fisso */
.grid-2.jd-charts-grid { grid-template-columns: 1fr 220px; }
.grid-3     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.mt-10      { margin-top: 10px; }
.mt-16      { margin-top: 16px; }
.mb-10      { margin-bottom: 10px; }
.divider    { border: none; border-top: 0.5px solid var(--border); margin: 12px 0; }
.text-muted { color: var(--text3); }
.text-sm    { font-size: 12px; }
.w-100      { width: 100%; }
.tag-list   { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── Rich text output (Quill) ── */
.squad-rich-text ul,
.squad-rich-text ol { padding-left: 1.4em; }
.squad-rich-text li { margin-bottom: 2px; }


/* ── Charts (Chart.js) ── */
.chart-wrap        { position: relative; }
.chart-legend      { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.chart-legend-item { display: flex; align-items: center; gap: 6px;
                     font-size: 12px; color: var(--text2); }
.chart-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Donut chart container ── */
.donut-wrap   { display: flex; align-items: center; gap: 24px; }
.donut-canvas { width: 120px !important; height: 120px !important; flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-row    { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-dot    { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.donut-label  { color: var(--text3); min-width: 36px; }
.donut-val    { color: var(--text); font-weight: 600; }
.donut-pct    { color: var(--text3); font-size: 11px; }

/* ── Performance chart ── */
.perf-chart-wrap { height: 150px; position: relative; }

/* ════════════════════════════════════════════════════════════════
   SCROLLBAR — global custom style (webkit + firefox)
   ════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar               { width: 5px; height: 5px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover   { background: var(--purple-bd); }
::-webkit-scrollbar-corner        { background: transparent; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ════════════════════════════════════════════════════════════════
   CUSTOM SELECT — .jselect  (shared across all pages)
   ════════════════════════════════════════════════════════════════ */
.jselect {
  appearance: none;
  background: var(--bg3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text2); font-size: 12px; font-family: inherit;
  padding: 5px 28px 5px 10px; cursor: pointer; transition: border-color .15s;
  min-width: 130px;
}
.jselect:hover { border-color: rgba(167,139,250,0.4); }
.jselect:focus { outline: none; border-color: var(--purple); }
.jselect-sm    { min-width: auto; }

/* ════════════════════════════════════════════════════════════════
   JOURNAL TABLE — shared toolbar/tab/separator/footer components
   ════════════════════════════════════════════════════════════════ */
.jtable-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 14px 20px 12px;
  flex-shrink: 0;
}
.jtable-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Tab pills */
.jtabs { display: flex; }
.jtab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 6px 16px; font-size: 13px; color: var(--text3);
  cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap;
}
.jtab:hover  { color: var(--text); }
.jtab.active { color: var(--purple); border-bottom-color: var(--purple); font-weight: 600; }

/* Separator */
.jtable-sep { height: 1px; background: var(--border); margin: 0; flex-shrink: 0; }

/* Pagination footer */
.jtable-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 12px 20px 16px;
  flex-shrink: 0;
}
.jpage-info {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text3);
}
.jpagination { display: flex; align-items: center; gap: 4px; }
.jpage-btn {
  min-width: 30px; height: 28px; padding: 0 8px;
  background: var(--bg3); border: 0.5px solid var(--border);
  border-radius: var(--radius); color: var(--text2); font-size: 12px;
  cursor: pointer; font-family: inherit; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.jpage-btn:hover:not(:disabled) { border-color: rgba(167,139,250,0.4); color: var(--text); }
.jpage-btn.active {
  background: var(--purple-bg); border-color: var(--purple-bd);
  color: var(--purple); font-weight: 600;
}
.jpage-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════
   PAGE: journals/index
   ════════════════════════════════════════════════════════════════ */
/* Topbar: nascondi border-bottom su questa pagina */
/*.page-journals-index .topbar { border-bottom: none; }*/
.page-journals-index .topbar { }

/* .content: scroll normale, nessun overflow hidden */
.page-journals-index .content {
  overflow-y: auto;
  padding: 24px;
}


/* Page heading */
.page-heading       { flex-shrink: 0; }
.page-heading-title { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -0.4px; margin: 0 0 4px; }
.page-heading-sub   { font-size: 13px; color: var(--text3); margin: 0; }
.topbar .breadcrumb { font-size: 13px; color: var(--text3); font-weight: 400; }

/* KPI Bar */
.kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.kpi-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 20px 14px;
  position: relative; overflow: hidden;
}
.kpi-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(167,139,250,0.04), transparent);
  pointer-events: none;
}

/* Icona circolare colorata nella KPI card */
.kpi-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.kpi-icon svg { width: 18px; height: 18px; }
/* Glow Verde (Win Rate) */
.kpi-icon-wr { 
  background: rgba(74, 222, 128, 0.15);  
  color: #5aee90; 
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.25);
  border: 1px solid rgba(74, 222, 128, 0.2);
  filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.4));
}
.kpi-icon-pl1 { 
  background: rgba(34, 211, 238, 0.15);  
  color: #32e3fe; 
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
  border: 1px solid rgba(34, 211, 238, 0.2);
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.4));
}
.kpi-icon-pl2 { 
  background: rgba(96, 165, 250, 0.15);  
  color: #70b5ff; 
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.25);
  border: 1px solid rgba(96, 165, 250, 0.2);
  filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4));
}
/* Glow Ambra (Trade Totali) */
.kpi-icon-tr { 
  background: rgba(251, 191, 36, 0.15);  
  color: #ffcf34; 
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
  border: 1px solid rgba(251, 191, 36, 0.2);
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
}
/* Glow Viola (Profit Factor) */
.kpi-icon-pf { 
  background: rgba(167, 139, 250, 0.15); 
  color: #b79bff; 
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.25);
  border: 1px solid rgba(167, 139, 250, 0.2);
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.4));
}
/* Glow Arancio (P/L Medio per Trade) */
.kpi-icon-avg {
  background: rgba(251, 146, 60, 0.15);
  color: #fb9a3e;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.25);
  border: 1px solid rgba(251, 146, 60, 0.2);
  filter: drop-shadow(0 0 4px rgba(251, 146, 60, 0.4));
}
/* Glow Rosso (Max Drawdown) */
.kpi-icon-dd {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.25);
  border: 1px solid rgba(248, 113, 113, 0.2);
  filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.4));
}

/* Layout interno card: icona a sx, contenuto testuale a dx */
.kpi-card-body {
  display: flex;
  align-items: center; /* Modificato da flex-start a center per centrare l'icona verticalmente */
  gap: 12px;
}
.kpi-card-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.kpi-label {
  font-size: 11px; color: var(--text3); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; 
  margin-bottom: 2px; /* Ridotto leggermente per compattare */
}
.kpi-value { 
  font-size: 26px; font-weight: 700; letter-spacing: -0.5px; 
  line-height: 1; /* Rende lo spazio sopra/sotto il testo simmetrico */
  color: var(--text); 
}
.kpi-delta { 
  font-size: 11px; 
  margin-top: 2px; /* Ridotto per bilanciare il peso visivo inferiore */
  font-weight: 500; 
}
.kpi-delta-pos     { color: var(--green); }
.kpi-delta-neg     { color: var(--red); }
.kpi-delta-neutral { color: var(--text3); }
.kpi-sparkline-wrap {
  position: absolute; bottom: 0; right: 0;
  width: 90px; height: 46px; opacity: 0.45;
}
.kpi-sparkline-wrap canvas { width: 90px !important; height: 46px !important; }

/* Trend sparkline nella tabella */
.jrow-trend-canvas-wrap {
  width: 80px; height: 32px;
}
.jrow-trend-canvas-wrap canvas {
  width: 80px !important; height: 32px !important;
}

/* Table card */
.jtable-card {
  padding: 0 !important;
}

/* Scrollable table area — solo scroll orizzontale se la tabella è larga */
.jtable-scroll {
  overflow-x: auto;
  padding: 0 12px;
}

/* Table */
.jtable { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: 13px; }

.jtable thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg2);
  padding: 10px 12px 8px;
  text-align: left; font-size: 11px; font-weight: 600;
  color: var(--text3); text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; border-bottom: none;
}
.jtable thead th.tar { text-align: right; }

.jtable tbody .jrow td {
  padding: 10px 12px; vertical-align: middle;
  background: var(--bg3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.jtable tbody .jrow td:first-child { border-left: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius); }
.jtable tbody .jrow td:last-child  { border-right: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; }
.jtable tbody .jrow:hover td { background: var(--bg2); border-color: rgba(167,139,250,0.3); }
.jtable tbody .jrow.hidden { display: none; }

.jrow-empty { text-align: center; padding: 40px !important; color: var(--text3); font-size: 13px; }

/* Cell utilities */
.tar      { text-align: right; }
.fw6      { font-weight: 600; }
.tcell-sm { font-size: 13px; }
.tcell-xs { font-size: 12px; color: var(--text2); }

/* Row name cell */
.jrow-name-cell { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: inherit; }
.jrow-name-cell:hover { text-decoration: none !important; }
.jrow-icon {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-bg), #1a1040);
  border: 1px solid var(--purple-bd);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--purple); letter-spacing: -.3px;
}
.jrow-name { font-size: 13px; font-weight: 600; color: var(--text); }
.jrow-sub  { font-size: 11px; color: var(--text3); }
.jrow-template-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple); margin-right: 5px; vertical-align: middle;
}

/* Bottom grid (charts row) */
.jbottom-grid { display: grid; grid-template-columns: 1fr 260px; gap: 14px; }
.jbottom-grid .card { min-width: 0; }
.jchart-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.jchart-title { font-size: 13px; font-weight: 600; color: var(--text); }

/* Donut center label (index variant) */
.donut-center-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--text);
  line-height: 1.2; pointer-events: none; text-align: center;
}
.donut-center-label span { font-size: 11px; color: var(--text3); font-weight: 400; }

/* Section title */
.section-title {
  font-size: 13px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .05em;
}

/* No underline: sidebar, topbar, table rows */
.sidebar-logo-link,
.sidebar-logo-link:hover,
.sidebar-item,
.sidebar-item:hover,
.jrow-name-cell,
.jrow-name-cell:hover,
.btn,
.btn:hover { text-decoration: none !important; }

/* ════════════════════════════════════════════════════════════════
   PAGE: journals/detail
   ════════════════════════════════════════════════════════════════ */

/* Header */
.jd-header {
  display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px;
  padding: 20px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.jd-header-avatar {
  width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, #3b1fa3, #0e7490);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(167,139,250,0.25);
}
.jd-header-avatar--asset { background: none; border: 0; border-radius: 0; }
.jd-initials     { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.jd-header-body  { flex: 1; min-width: 0; }
.jd-header-top   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jd-title        { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
.jd-template-badge {
  background: var(--purple-bg); border: 0.5px solid var(--purple-bd);
  color: var(--purple); font-size: 11px; padding: 2px 10px; border-radius: 20px; font-weight: 500;
}
.jd-header-meta  { font-size: 12px; color: var(--text3); margin-top: 4px; display: flex; gap: 6px; }
.jd-meta-sep     { color: var(--border); }
.jd-description  { font-size: 13px; color: var(--text2); margin-top: 8px; line-height: 1.6; }

/* KPI Cards */
.jd-kpi-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px;
}
.jd-kpi-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px; position: relative; overflow: hidden;
}
.jd-kpi-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(167,139,250,0.04), transparent);
  pointer-events: none;
}
.jd-kpi-label { font-size: 10px; color: var(--text3); text-transform: uppercase;
                 letter-spacing: .05em; font-weight: 600; margin-bottom: 4px; }
.jd-kpi-value { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.4px; }
.jd-kpi-delta { font-size: 10px; color: var(--text3); margin-top: 4px; }
.delta-pos    { color: var(--green) !important; }
.delta-neg    { color: var(--red) !important; }
.jd-sparkline { position: absolute; bottom: 0; right: 0; width: 80px; height: 38px; opacity: .4; }

/* Main layout 2 colonne */
.jd-main-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 14px;
  align-items: stretch;
}
/* La colonna sinistra diventa flex column e prende tutta l'altezza della griglia */
.jd-left-col  { min-width: 0; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.jd-right-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; width: 240px; flex-shrink: 0; }
.jd-side-card { padding: 14px 16px; }

/* La card trade cresce a riempire tutta la colonna sinistra disponibile */
.jd-trade-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Area scrollabile: cresce per riempire la card, fa apparire la scrollbar solo quando serve */
.jd-trade-list-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Trade rows */
.jd-trade-list { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.jd-trade-row {
  display: grid;
  grid-template-columns: 130px 80px 80px 1fr 90px 1fr 60px;
  align-items: center; gap: 10px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; cursor: pointer; transition: all .15s; position: relative;
}
.jd-trade-row.has-tp2 {
  grid-template-columns: 130px 80px 80px 1fr 90px 90px 1fr 60px;
}
.jd-trade-row:hover {
  border-color: rgba(167,139,250,0.35); background: rgba(167,139,250,0.05);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.jd-tr-date      { min-width: 0; }
.jd-tr-date-main { font-size: 13px; font-weight: 600; color: var(--text); }
.jd-tr-cell      { font-size: 13px; }

/* RR bar */
.jd-rr-bar-wrap { display: flex; flex-direction: column; gap: 3px; }
.jd-rr-val      { font-size: 12px; color: var(--text2); }
.jd-rr-bar      { height: 3px; background: var(--border); border-radius: 2px; width: 100%; }
.jd-rr-fill     { height: 100%; border-radius: 2px; }
.rr-win         { background: var(--green); }
.rr-loss        { background: var(--red); }

/* Score badge */
.jd-score-badge {
  display: inline-block; background: var(--purple-bg); border: 0.5px solid var(--purple-bd);
  color: var(--purple); font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 6px;
}

/* Thumbnail hover — position:fixed gestita da JS al mousemove */
.jd-thumb-hover {
  display: none; position: fixed;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px; z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,.6); pointer-events: none;
  flex-direction: row; gap: 6px;
  width: 540px; height: 176px;   /* dimensioni fisse: offsetWidth sempre affidabile */
  opacity: 0.70;
}
.jd-thumb-hover img {
  width: 256px; height: 160px;
  object-fit: contain; border-radius: 6px; display: block;
  background: var(--bg3);
}
.jd-thumb-hover.visible { display: flex; }

/* Perf metrics */
.jd-perf-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
  border-top: 0.5px solid var(--border);
  padding-top: 10px;
}
/* Card con 2 metriche: 2 colonne */
.jd-perf-metrics.cols-2 { grid-template-columns: repeat(2, 1fr); }

.jd-perf-metric-label {
  font-size: 9px; color: var(--text3); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.jd-perf-metric-val {
  font-size: 13px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Altezza fissa uguale per tutti e 3 i grafici */
.jd-chart-main .perf-chart-wrap,
.jd-chart-secondary .perf-chart-wrap { height: 140px; }

/* Donut center (detail variant) */
.jd-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.jd-donut-n   { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.jd-donut-lbl { font-size: 10px; color: var(--text3); }

/* Side panel */
.jd-side-value  { font-size: 15px; font-weight: 600; color: var(--text); }
.jd-stat-rows   { display: flex; flex-direction: column; }
.jd-stat-row    { display: flex; justify-content: space-between; align-items: center;
                   padding: 6px 0; border-bottom: 0.5px solid var(--bg3); font-size: 12px; }
.jd-stat-row:last-child { border-bottom: none; }
.jd-stat-k      { color: var(--text3); }
.jd-stat-v      { color: var(--text); font-weight: 600; }
.jd-notes-text  { font-size: 12px; color: var(--text2); line-height: 1.6; min-height: 250px;} /* aggiunto min-height: 250px; per riempire lo spazio fino ad allineare con il fondo dei grafici */
.jd-notes-empty { font-size: 12px; color: var(--text3); font-style: italic; min-height: 250px;} /* aggiunto min-height: 250px; per riempire lo spazio fino ad allineare con il fondo dei grafici */
.jd-notes-edit-link {
  display: inline-block; margin-top: 10px; font-size: 11px; color: var(--purple);
  text-decoration: none; opacity: .8;
}

/* Griglia 3 grafici in fondo alla detail */
.jd-charts-3col {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr; /* il grafico performance lo faccio 1,8 volte più largo degli altri due */
  gap: 14px;
  align-items: start;
}
.jd-chart-main,
.jd-chart-secondary { }   /* stile base dalla classe .card */

.jd-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}

@media (max-width: 1100px) {
  .jd-charts-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .jd-charts-3col { grid-template-columns: 1fr; }
}
.jd-donut-card {
  display: flex;
  flex-direction: column;
}
.jd-donut-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 8px;
}
.jd-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.jd-donut-legend .donut-row {
  justify-content: center;
  gap: 10px;
}
.jd-donut-legend .donut-label { min-width: 32px; text-align: right; }
.jd-donut-legend .donut-val   { min-width: 20px; text-align: right; }

.jd-notes-edit-link:hover { opacity: 1; text-decoration: underline; }

/* Column headers inside trade table */
.jd-trade-header {
  display: grid;
  grid-template-columns: 130px 80px 80px 1fr 90px 1fr 60px;
  gap: 10px; padding: 8px 14px;
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text3);
  flex-shrink: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.jd-trade-header.has-tp2 {
  grid-template-columns: 130px 80px 80px 1fr 90px 90px 1fr 60px;
}

/* Empty state — grafici non ancora disponibili */
.jcharts-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px 24px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); color: var(--text3);
  text-align: center; flex-shrink: 0;
}
.jcharts-empty svg        { opacity: 0.35; color: var(--text3); }
.jcharts-empty-title      { font-size: 13px; font-weight: 600; color: var(--text2); }
.jcharts-empty-sub        { font-size: 12px; color: var(--text3); max-width: 420px; line-height: 1.6; }

/* Responsive */
@media (max-width: 860px) {
  .jd-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .jbottom-grid { grid-template-columns: 1fr; }
  .grid-2.jd-charts-grid { grid-template-columns: 1fr; }
}

/* ── Auth pages (login, register, reset) ─────────────────────── */
/* Layout a due colonne su sfondo WebP                             */

body.auth-body {
  background: #050b17;
  overflow: hidden;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: url('../img/bg_network.webp') center center / cover no-repeat;
  position: relative;
}

/* Overlay scuro leggero sull'intera pagina */
.auth-page::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(8, 10, 18, 0.25);
  z-index: 0;
}

/* ── Colonna sinistra ── */
.auth-left {
  flex: 1;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 52px 36px;
  min-width: 0;
}

/* Logo: icona sopra, testo sotto */
.auth-logo-section  { margin-bottom: 0; }
.logo-wrapper       { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.auth-logo-img      { height: 64px; width: auto;
                      filter: drop-shadow(0 0 16px rgba(167,139,250,0.55)); }
.logo-brand         { font-size: 34px; font-weight: 700; letter-spacing: -0.5px;
                      color: #ffffff; line-height: 1; }
.logo-brand .highlight {
  background: linear-gradient(135deg, #a78bfa, #22d3ee);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Hero spostato più in alto */
.auth-hero          { flex: 1; display: flex; flex-direction: column;
                      justify-content: flex-start; padding: 28px 0 0; }
.auth-headline      { font-size: 30px; font-weight: 800; color: #fff;
                      line-height: 1.2; letter-spacing: -0.3px; }
/* "Together." più grande e su riga propria */
.auth-headline-accent {
  display: block;
  font-size: 40px; font-weight: 800;
  line-height: 1.35; margin-top: 0;
  background: linear-gradient(90deg, #a78bfa, #22d3ee);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
/* Tagline leggermente più grande */
.auth-tagline       { font-size: 15px; color: rgba(255,255,255,0.78);
                      line-height: 1.65; margin-top: 14px; max-width: 400px; }

/* Feature icons — staccate dalla privacy con margin-bottom */
.auth-features      { display: flex; gap: 40px; align-items: flex-start;
                      margin-bottom: 44px; }
.auth-feat          { display: flex; flex-direction: column; align-items: center;
                      gap: 12px; text-align: center; max-width: 140px; }
/* Immagini icona reali — cerchio viola scuro via CSS */
.auth-feat-img      { width: 72px; height: 72px; object-fit: cover; display: block;
                      border-radius: 50%;
                      border: 2px solid var(--purple-bg);
                      box-shadow: 0 0 10px rgba(124,58,237,0.3); }
.auth-feat-icon     { width: 65px; height: 65px; border-radius: 50%;
                      border: 1.5px solid rgba(167,139,250,0.25);
                      background: rgba(10, 14, 30, 0.85);
                      display: flex; align-items: center; justify-content: center;
                      flex-shrink: 0; }
.auth-feat-title    { font-size: 13px; font-weight: 700; color: #e2e8f0; }
.auth-feat-desc     { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.5; }

/* Privacy note */
.auth-privacy       { display: flex; align-items: center; gap: 7px;
                      font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 0; }

/* ── Colonna destra: card — più margine dal bordo destro ── */
.auth-right {
  width: 460px; min-width: 420px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  padding: 32px 48px 32px 24px;
}

.auth-card {
  width: 100%;
  background: rgba(13, 18, 35, 0.82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(167,139,250,0.18);
  border-radius: 18px;
  padding: 44px 40px 36px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}

/* Titolo e sottotitolo form */
.auth-form-title    { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.auth-form-title .highlight {
  background: linear-gradient(135deg, #a78bfa, #22d3ee);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-form-sub      { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 32px; }

/* Input con icona */
.input-icon-wrap    { position: relative; display: flex; align-items: center; }
.input-icon         { position: absolute; left: 13px; pointer-events: none; flex-shrink: 0; }
.form-control-icon  { padding-left: 40px !important; }
.form-control-icon-right { padding-right: 42px !important; }
.input-eye          { position: absolute; right: 12px; background: none; border: none;
                      cursor: pointer; padding: 0; display: flex; align-items: center;
                      color: rgba(255,255,255,0.3); }
.input-eye:hover svg ellipse,
.input-eye:hover svg circle { stroke: var(--purple); }

/* Override form-control per auth card */
.auth-card .form-control {
  background: rgba(8, 11, 22, 0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  padding: 13px 14px;
  font-size: 14px;
  color: var(--text);
}
.auth-card .form-control:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(167,139,250,0.15);
  background: rgba(8, 11, 22, 1);
}
.auth-card .form-label {
  font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 7px;
}

/* Divisore oppure */
.auth-divider       { display: flex; align-items: center; gap: 12px;
                      margin: 20px 0 16px; }
.auth-divider hr    { flex: 1; border: none; border-top: 1px solid rgba(255,255,255,0.08); }
.auth-divider span  { font-size: 12px; color: rgba(255,255,255,0.25); }

/* Footer links */
.auth-footer-links  { text-align: center; margin-top: 20px;
                      font-size: 13px; color: rgba(255,255,255,0.35); }
.auth-footer-links a { color: var(--purple); }

/* btn-primary override per auth (gradient sinistra→destra, non diagonale) */
.auth-card .btn-primary {
  background: linear-gradient(90deg, #7c3aed 0%, #22d3ee 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 9px;
}

/* Flash messages dentro auth-card */
.auth-card .flash-list-container { margin-bottom: 16px; }

/* Card-content-title (backward compat con altre pagine auth) */
.card-content-title { font-size: 16px; font-weight: 500; margin-bottom: 20px; }
.card-subtitle      { font-size: 13px; color: var(--text3); margin-bottom: 20px; }

/* ── Responsive: sotto 768px torna a layout verticale centrato ── */
@media (max-width: 768px) {
  body.auth-body { overflow: auto; }
  .auth-page     { flex-direction: column; align-items: center; min-height: 100vh; }
  .auth-left     { display: none; }
  .auth-right    { width: 100%; min-width: 0; padding: 24px 16px; align-items: flex-start; }
  .auth-card     { padding: 32px 24px; }
}


/* ════════════════════════════════════════════════════════════════
   CHAT 7 — CSS CONSOLIDATION
   Migrazione CSS inline → main.css per i tre template page-specific
   rimasti inline dopo Chat 1–3.

   INDICE:
     § 7.1  trades/new.html      — Trade Command Center  (.tcc-*)
     § 7.2  trades/detail.html   — Premium Trade View    (.td-*)
     § 7.3  stats/journal.html   — Intelligence Dashboard (.sid-*)
     § 7.4  Accessibilità animazioni — @media (prefers-reduced-motion)
   ════════════════════════════════════════════════════════════════ */


/* ════ § 7.1 — trades/new.html — Trade Command Center ════════════ */

/* Quill theming */
.ql-toolbar  { border-radius: var(--radius) var(--radius) 0 0; border-color: var(--bg3) !important; background: var(--bg2); }
.ql-container{ border-radius: 0 0 var(--radius) var(--radius); border-color: var(--bg3) !important; font-size: 13px; min-height: 80px; }
.ql-editor   { color: var(--text); }

/* ── Command Center layout ─────────────────────────────────────── */
.tcc-shell {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: var(--sp-4);
  align-items: start;
}

/* ── Step wizard ────────────────────────────────────────────────── */
.tcc-stepper {
  display: flex;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  overflow-x: auto;
  align-items: center;
}

.tcc-step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.tcc-step:hover { background: rgba(167,139,250,0.06); }

.tcc-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-bold);
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  transition: all var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.tcc-step.active .tcc-step-num {
  background: var(--purple);
  border-color: var(--purple);
  color: #000;
  box-shadow: 0 0 10px rgba(167,139,250,0.45);
}
.tcc-step.done .tcc-step-num {
  background: rgba(74,222,128,0.15);
  border-color: var(--green-bd);
  color: var(--green);
}

.tcc-step-label {
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--text3);
  white-space: nowrap;
}
.tcc-step.active .tcc-step-label { color: var(--text); }
.tcc-step.done .tcc-step-label   { color: var(--text2); }

.tcc-step-sep {
  flex: 1; min-width: 20px;
  height: 1px; background: var(--border);
  margin: 0 var(--sp-1);
  flex-shrink: 0;
}

/* ── Section blocks ─────────────────────────────────────────────── */
.tcc-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.tcc-section.open { border-color: rgba(167,139,250,0.25); }

.tcc-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.tcc-section-header:hover { background: rgba(167,139,250,0.04); }

.tcc-section-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* Category color bars */
.tcc-section[data-cat="pre"]  .tcc-section-icon { background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.2); }
.tcc-section[data-cat="exec"] .tcc-section-icon { background: rgba(251,146,60,0.12);  border: 1px solid rgba(251,146,60,0.2); }
.tcc-section[data-cat="val"]  .tcc-section-icon { background: rgba(163,230,53,0.12);  border: 1px solid rgba(163,230,53,0.2); }
.tcc-section[data-cat="psy"]  .tcc-section-icon { background: rgba(232,121,249,0.12); border: 1px solid rgba(232,121,249,0.2); }
.tcc-section[data-cat="rev"]  .tcc-section-icon { background: rgba(251,191,36,0.12);  border: 1px solid rgba(251,191,36,0.2); }
.tcc-section[data-cat="soc"]  .tcc-section-icon { background: rgba(52,211,153,0.12);  border: 1px solid rgba(52,211,153,0.2); }

.tcc-section-meta { flex: 1; min-width: 0; }
.tcc-section-title {
  font-size: 13px; font-weight: var(--fw-semi);
  color: var(--text);
  display: flex; align-items: center; gap: var(--sp-2);
}
.tcc-section-sub {
  font-size: 11px; color: var(--text3); margin-top: 1px;
}

.tcc-section-chevron {
  width: 16px; height: 16px; color: var(--text3); flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.tcc-section.open .tcc-section-chevron { transform: rotate(180deg); }

.tcc-section-body {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--sp-4);
  border-top: 0px solid var(--border);
  opacity: 0;
  transition:
    max-height  var(--dur-slow)   var(--ease-in-out),
    padding     var(--dur-normal) var(--ease-out),
    opacity     var(--dur-normal) var(--ease-out),
    border-top  var(--dur-fast)   var(--ease-out);
}
.tcc-section.open .tcc-section-body {
  max-height: 2400px;
  padding: var(--sp-4);
  opacity: 1;
  border-top: 1px solid var(--border);
}

/* Left-border accent per categoria aperta */
.tcc-section[data-cat="pre"].open  { border-left: 2px solid var(--cat-pre); }
.tcc-section[data-cat="exec"].open { border-left: 2px solid var(--cat-exec); }
.tcc-section[data-cat="val"].open  { border-left: 2px solid var(--cat-val); }
.tcc-section[data-cat="psy"].open  { border-left: 2px solid var(--cat-psy); }
.tcc-section[data-cat="rev"].open  { border-left: 2px solid var(--cat-rev); }
.tcc-section[data-cat="soc"].open  { border-left: 2px solid var(--cat-soc); }

/* Subgrid 2col all'interno di una section */
.tcc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ── Sidebar ────────────────────────────────────────────────────── */
.tcc-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

.tcc-sidebar-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.tcc-sidebar-title {
  font-size: 10px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text3); margin-bottom: var(--sp-3);
  display: flex; align-items: center; justify-content: space-between;
}

/* Squad comparator */
.tcc-squad-stat { display: flex; flex-direction: column; gap: var(--sp-2); }
.tcc-squad-row  { display: flex; align-items: center; gap: var(--sp-2); }
.tcc-squad-lbl  { font-size: 11px; color: var(--text3); width: 80px; flex-shrink: 0; }
.tcc-squad-bar  { flex: 1; height: 4px; background: var(--bg3); border-radius: 99px; overflow: hidden; }
.tcc-squad-fill { height: 100%; border-radius: 99px; background: var(--purple); }
.tcc-squad-fill.cyan { background: var(--cyan); }
.tcc-squad-fill.green { background: var(--green); }
.tcc-squad-pct  { font-size: 11px; font-weight: var(--fw-bold); color: var(--text); width: 30px; text-align: right; }

/* Review & feedback */
.tcc-fb-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) 0;
  border-bottom: 0.5px solid var(--bg3);
  font-size: 12px;
}
.tcc-fb-row:last-child { border-bottom: none; }
.tcc-fb-key { color: var(--text3); }
.tcc-fb-val { font-weight: var(--fw-semi); color: var(--text); }

/* Progress completeness bar */
.tcc-completeness { margin-top: var(--sp-3); }
.tcc-comp-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--text3); margin-bottom: var(--sp-1); }
.tcc-comp-bar { height: 6px; background: var(--bg3); border-radius: 99px; overflow: hidden; }
.tcc-comp-fill { height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  transition: width var(--dur-normal) var(--ease-out);
  width: 0%; }

/* Weekday label */
#weekday-label { font-size: 11px; color: var(--text3); margin-top: var(--sp-1); }


/* ════ § 7.2 — trades/detail.html — Premium Trade View ══════════ */

/* ── KPI bar ─────────────────────────────────────────────────────── */
.td-kpi-bar {
  display: flex;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
  overflow: hidden;
  position: relative;
}
.td-kpi-bar::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(167,139,250,0.03), transparent 60%);
  pointer-events: none;
}

.td-kpi-cell {
  flex: 1; min-width: 0;
  padding: var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column;
  gap: var(--sp-1);
  position: relative;
}
.td-kpi-label {
  font-size: 10px; font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text3);
}
.td-kpi-value {
  font-size: 22px; font-weight: var(--fw-black);
  line-height: 1; letter-spacing: -0.5px;
  color: var(--text);
}
.td-kpi-green { color: var(--green); }
.td-kpi-red   { color: var(--red); }

.td-kpi-spark { position: absolute; bottom: 0; right: 0; width: 60px; height: 20px; opacity: 0.35; }
.td-spark-svg { width: 100%; height: 100%; }

.td-kpi-divider {
  width: 1px; height: 40px;
  background: var(--border);
  flex-shrink: 0; align-self: center;
}

/* ── Main layout ─────────────────────────────────────────────────── */
.td-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-4);
  align-items: start;
}
.td-col-main, .td-col-side {
  display: flex; flex-direction: column; gap: var(--sp-3);
}

/* ── Section cards ───────────────────────────────────────────────── */
.td-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.td-section[data-cat="pre"]  { border-left: 2px solid rgba(56,189,248,0.3); }
.td-section[data-cat="exec"] { border-left: 2px solid rgba(251,146,60,0.3); }
.td-section[data-cat="val"]  { border-left: 2px solid rgba(163,230,53,0.3); }
.td-section[data-cat="psy"]  { border-left: 2px solid rgba(232,121,249,0.3); }
.td-section[data-cat="rev"]  { border-left: 2px solid rgba(251,191,36,0.3); }
.td-section[data-cat="soc"]  { border-left: 2px solid rgba(52,211,153,0.3); }

.td-section-header {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.td-section-icon { font-size: 14px; }
.td-section-title {
  font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text3);
  flex: 1;
}

/* ── Screenshot frame ────────────────────────────────────────────── */
.td-scr-frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg3);
}
.td-scr-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-8);
}

/* ── Rich text ───────────────────────────────────────────────────── */
.td-rich-text {
  font-size: 13px; color: var(--text2);
  line-height: 1.75;
}
.td-rich-text p { margin: 0 0 0.5em 0; }

/* ── Validation rows ─────────────────────────────────────────────── */
.td-val-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--bg3);
  text-decoration: none; color: inherit;
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.td-val-row:hover {
  background: rgba(167,139,250,0.06);
  border-color: rgba(167,139,250,0.25);
  text-decoration: none;
}
.td-val-arrow { font-size: 12px; color: var(--purple); flex-shrink: 0; }


/* ════ § 7.3 — stats/journal.html — Intelligence Dashboard ══════ */

/* KPI Bar */
.sid-kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.sid-kpi {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.sid-kpi::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(167,139,250,0.04), transparent);
  pointer-events: none;
}
.sid-kpi:hover { border-color: var(--purple-dim); }
.sid-kpi-label {
  font-size: var(--text-xs);
  color: var(--text3);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--sp-1);
}
.sid-kpi-value {
  font-size: var(--text-2xl);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--text);
}
.sid-kpi-value.green { color: var(--green); }
.sid-kpi-value.red   { color: var(--red); }
.sid-kpi-value.amber { color: var(--amber); }
.sid-kpi-sub {
  font-size: var(--text-xs);
  color: var(--text3);
  margin-top: var(--sp-1);
}

/* Dashboard grid */
.sid-main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp-4);
  align-items: start;
}
.sid-left  { display: flex; flex-direction: column; gap: var(--sp-4); }
.sid-right { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Bottom 3-col grid */
.sid-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

/* Panel base */
.sid-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sid-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.sid-panel-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sid-panel-title svg { opacity: .6; flex-shrink: 0; }
.sid-panel-body { padding: var(--sp-4); }

/* Equity chart */
.sid-equity-meta {
  display: flex;
  gap: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.sid-equity-stat { display: flex; flex-direction: column; gap: 2px; }
.sid-equity-stat-label { font-size: var(--text-xs); color: var(--text3); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .07em; }
.sid-equity-stat-val   { font-size: var(--text-xl); font-weight: var(--fw-black); letter-spacing: -0.4px; }
.sid-equity-stat-val.cyan   { color: var(--cyan); }
.sid-equity-stat-val.purple { color: var(--purple); }
.sid-chart-wrap { position: relative; height: 200px; }

/* Behavioral Analysis */
.sid-beh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid rgba(26,37,64,0.6);
}
.sid-beh-row:last-child { border-bottom: none; }
.sid-beh-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.sid-beh-icon.green { background: var(--green-bg); }
.sid-beh-icon.red   { background: var(--red-bg); }
.sid-beh-label { font-size: var(--text-sm); color: var(--text2); flex: 1; margin: 0 var(--sp-3); }
.sid-beh-val   { font-size: var(--text-sm); font-weight: var(--fw-semi); }
.sid-beh-val.green { color: var(--green); }
.sid-beh-val.red   { color: var(--red); }
.sid-beh-name  { font-size: var(--text-xs); color: var(--text3); text-align: right; min-width: 60px; }

/* Strategy Intelligence */
.sid-strat-combo {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(26,37,64,0.6);
}
.sid-strat-combo:last-child { border-bottom: none; }
.sid-strat-combo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.sid-strat-badge {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 0.5px solid;
}
.sid-strat-badge.green { background: var(--green-bg); border-color: var(--green-bd); color: var(--green); }
.sid-strat-badge.red   { background: var(--red-bg);   border-color: var(--red-bd);   color: var(--red); }
.sid-strat-badge.amber { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); color: var(--amber); }
.sid-strat-wr { font-size: var(--text-md); font-weight: var(--fw-black); }
.sid-strat-wr.green { color: var(--green); }
.sid-strat-wr.red   { color: var(--red); }
.sid-strat-wr.amber { color: var(--amber); }
.sid-strat-fields {
  font-size: var(--text-xs);
  color: var(--text3);
  line-height: 1.5;
  margin-top: 2px;
}
.sid-strat-n {
  font-size: var(--text-xs);
  color: var(--text3);
  margin-top: 4px;
}
/* win bar */
.sid-strat-bar {
  height: 3px;
  background: var(--bg3);
  border-radius: var(--radius-full);
  margin-top: 6px;
  overflow: hidden;
}
.sid-strat-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--dur-slow) var(--ease-out);
}

/* Edge Validation */
.sid-edge-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) 0;
  gap: var(--sp-3);
}
.sid-edge-ring-label {
  font-size: var(--text-xs);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  text-align: center;
}
.sid-edge-needed {
  font-size: var(--text-3xl);
  font-weight: var(--fw-black);
  letter-spacing: -1px;
  color: var(--cyan);
  text-align: center;
}
.sid-edge-current {
  font-size: var(--text-sm);
  color: var(--text2);
  text-align: center;
}
.sid-edge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 0.5px solid;
}
.sid-edge-chip.good   { background: var(--green-bg); border-color: var(--green-bd); color: var(--green); }
.sid-edge-chip.warn   { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); color: var(--amber); }
.sid-edge-chip.danger { background: var(--red-bg); border-color: var(--red-bd); color: var(--red); }
.sid-edge-progress {
  width: 100%;
  background: var(--bg3);
  border-radius: var(--radius-full);
  height: 6px;
  overflow: hidden;
}
.sid-edge-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  transition: width var(--dur-slower) var(--ease-out);
}

/* Review Impact */
.sid-review-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.sid-review-col {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: var(--sp-3);
  text-align: center;
}
.sid-review-col-label { font-size: var(--text-xs); color: var(--text3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
.sid-review-col-val   { font-size: var(--text-xl); font-weight: var(--fw-black); }
.sid-review-col-val.green { color: var(--green); }
.sid-review-col-val.red   { color: var(--red); }
.sid-review-col-val.text3 { color: var(--text3); }
.sid-review-delta {
  background: var(--purple-bg);
  border: 0.5px solid var(--purple-bd);
  border-radius: var(--radius);
  padding: var(--sp-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text2);
  line-height: 1.5;
}
.sid-review-delta strong { color: var(--purple-light); font-size: var(--text-md); }

/* Monthly chart */
.sid-monthly-chart-wrap { position: relative; height: 160px; }

/* Distribution chart */
.sid-dist-chart-wrap { position: relative; height: 160px; }

/* Insight strip */
.sid-insight {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  margin-bottom: var(--sp-2);
}
.sid-insight.good   { background: var(--green-bg); border: 0.5px solid var(--green-bd); }
.sid-insight.warn   { background: rgba(251,191,36,.08); border: 0.5px solid rgba(251,191,36,.25); }
.sid-insight.danger { background: var(--red-bg); border: 0.5px solid var(--red-bd); }
.sid-insight-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sid-insight.good   .sid-insight-dot { background: var(--green); }
.sid-insight.warn   .sid-insight-dot { background: var(--amber); }
.sid-insight.danger .sid-insight-dot { background: var(--red); }
.sid-insight-text   { font-size: var(--text-xs); color: var(--text2); flex: 1; }
.sid-insight-val    { font-size: var(--text-sm); font-weight: var(--fw-semi); }

/* Legend dots */
.sid-legend {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
}
.sid-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text3); }
.sid-legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Empty state */
.sid-empty {
  text-align: center;
  color: var(--text3);
  padding: var(--sp-12) var(--sp-6);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.sid-empty-icon { font-size: 40px; margin-bottom: var(--sp-3); }
.sid-empty-title { font-size: var(--text-lg); font-weight: var(--fw-semi); color: var(--text2); margin-bottom: var(--sp-2); }

/* Responsive collapse */
@media (max-width: 1200px) {
  .sid-main-grid    { grid-template-columns: 1fr; }
  .sid-bottom-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .sid-bottom-grid  { grid-template-columns: 1fr; }
  .sid-kpi-bar      { grid-template-columns: repeat(2, 1fr); }
}


/* ════ § 7.4 — ACCESSIBILITÀ ANIMAZIONI ═════════════════════════
   Le classi .sp-animate-in, .sp-pulse, .sp-stagger sono definite
   nel blocco Chat 0 di main.css. Questo blocco wrappa le sole
   animazioni in @media (prefers-reduced-motion: no-preference)
   per rispettare la preferenza utente.

   ISTRUZIONE DI APPLICAZIONE:
   Nel blocco Chat 0 di main.css, le dichiarazioni:
     .sp-animate-in { animation: sp-fade-in ... }
     .sp-pulse      { animation: sp-pulse-anim ... }
     .sp-stagger > * { animation-delay: ... }
   vanno spostate dentro questo wrapper. Le definizioni
   @keyframes (sp-fade-in, sp-pulse-anim) rimangono fuori.
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .sp-animate-in {
    animation: sp-fade-in var(--dur-normal) var(--ease-out) both;
  }
  .sp-pulse {
    animation: sp-pulse-anim 2s var(--ease-in-out) infinite;
  }
  .sp-stagger > *:nth-child(1)  { animation-delay: 0ms; }
  .sp-stagger > *:nth-child(2)  { animation-delay: 60ms; }
  .sp-stagger > *:nth-child(3)  { animation-delay: 120ms; }
  .sp-stagger > *:nth-child(4)  { animation-delay: 180ms; }
  .sp-stagger > *:nth-child(5)  { animation-delay: 240ms; }
  .sp-stagger > *:nth-child(6)  { animation-delay: 300ms; }
  .sp-stagger > *:nth-child(n+7){ animation-delay: 360ms; }
}

/* ════════════════════════════════════════════════════════════════
   UTILITY — sp-row, sp-between, sp-stack, sp-label-xs
   ════════════════════════════════════════════════════════════════ */
.sp-row        { display: flex; align-items: center; }
.sp-row-3      { display: flex; align-items: center; gap: 8px; }
.sp-between    { justify-content: space-between; }
.sp-stack-3    { display: flex; flex-direction: column; gap: 6px; }
.sp-label-xs   { font-size: 10px; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .07em; color: var(--text3); }

/* ════════════════════════════════════════════════════════════════
   PAGE: fields/index   (.fi-*)
   ════════════════════════════════════════════════════════════════ */
.fi-card      { overflow: hidden; padding: 0; }
.fi-card-head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.fi-card-title { font-size: 13px; font-weight: 600; color: var(--text); }
.fi-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 6px;
  background: var(--bg3); border: 0.5px solid var(--border);
  border-radius: 20px; font-size: 11px; font-weight: 700; color: var(--text3);
}
.fi-table { width: 100%; border-collapse: collapse; }
.fi-table thead th {
  padding: 9px 16px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap;
}
.fi-table tbody .fi-row { border-bottom: 1px solid var(--border); transition: background .12s; }
.fi-table tbody .fi-row:last-child { border-bottom: none; }
.fi-table tbody .fi-row:hover      { background: rgba(255,255,255,0.025); }
.fi-table td {
  padding: 10px 16px; font-size: 13px;
  color: var(--text2); vertical-align: middle;
}
.fi-name   { font-weight: 500; color: var(--text); }
.fi-opts   { font-size: 12px; color: var(--text3); max-width: 240px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-author { font-size: 12px; color: var(--text3); white-space: nowrap; }
.fi-no-cat { color: var(--text3); }
.fi-lock   { font-size: 13px; opacity: .6; }
.fi-action { text-align: right; white-space: nowrap; }
.fi-action .btn { font-size: 11px; padding: 3px 10px; }
.fi-table .sp-empty { padding: 32px 16px; }

/* ════════════════════════════════════════════════════════════════
   PAGE: fields/new + fields/edit   (.fd-*)
   ════════════════════════════════════════════════════════════════ */

/* Shell: due colonne, sinistra form, destra sticky */
.fd-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
.fd-col-main { display: flex; flex-direction: column; gap: 0; }
.fd-col-side {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card head condivisa */
.fd-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.fd-card-head .card-title { margin-bottom: 0; }

/* Tipo campo — griglia 2×3 radio card */
.fd-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.fd-type-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg3);
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
}
.fd-type-opt:hover  { border-color: var(--purple-bd); color: var(--text); }
.fd-type-opt.active { border-color: var(--purple); background: var(--purple-bg); color: var(--purple); }
.fd-type-opt input[type="radio"] { display: none; }
.fd-type-icon  { font-size: 15px; flex-shrink: 0; }
.fd-type-label { font-size: 12px; font-weight: 500; color: inherit; }

/* Descrizione tipo selezionato */
.fd-type-desc {
  font-size: 12px; color: var(--text3);
  margin-top: 8px; padding: 8px 10px;
  background: var(--bg3); border-radius: var(--radius);
  border-left: 2px solid var(--purple-bd);
  min-height: 34px;
}

/* Sezione opzioni lista (condizionale) */
.fd-list-opts {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 12px;
}
.fd-list-opts .form-group:last-child { margin-bottom: 0; }

/* Checkbox N/A */
.fd-checkbox-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 0;
}
.fd-checkbox-row input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--purple); flex-shrink: 0;
}

/* Separatore sezioni nel form */
.fd-section-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* Anteprima */
.fd-preview-body { padding-top: 4px; }
.fd-preview-body .form-label {
  font-size: 13px; font-weight: 500;
  color: var(--text); margin-bottom: 8px;
}
.fd-preview-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.fd-scr-placeholder {
  padding: 16px;
  background: var(--bg3);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 12px; color: var(--text3); text-align: center;
}

/* Guida categorie */
.fd-cat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0;
}
.fd-cat-row .sp-sem-badge { min-width: 82px; justify-content: center; }
.fd-cat-row .sp-caption   { color: var(--text2); font-size: 12px; }

/* ════════════════════════════════════════════════════════════════
   PAGE: journals/new   (.jnew-*)
   PAGE: journals/edit  (.jhq-*)
   ════════════════════════════════════════════════════════════════ */

/* ── Shared shell layout ── */
.jnew-shell,
.jhq-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Card header (icon + title) ── */
.jnew-card-head,
.jhq-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.jnew-card-head .sp-section-icon,
.jhq-card-head .sp-section-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  background: rgba(167,139,250,0.1);
  border: 1px solid rgba(167,139,250,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--purple);
  flex-shrink: 0;
}

.jnew-card-head .card-title,
.jhq-card-head .card-title {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text3);
  margin-bottom: 0;   /* override .card-title default */
}

/* ── Two-column row (Asset + Periodo) ── */
.jnew-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Visibility hint caption ── */
.jnew-vis-hint {
  margin-top: 6px;
}

/* ── Template hint / empty ── */
.jnew-tmpl-hint {
  margin-top: 4px;
}

/* ── sp-caption ── */
.sp-caption {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.55;
}

/* ── sp-empty ── */
.sp-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--text3);
}
.sp-empty-icon  { font-size: 28px; margin-bottom: 8px; }
.sp-empty-title { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 4px; }

/* ── sp-section-icon (standalone, fuori da card-head) ── */
.sp-section-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  background: rgba(167,139,250,0.1);
  border: 1px solid rgba(167,139,250,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--purple);
  flex-shrink: 0;
}

/* ═══════════════════════════════
   journals/edit — Journal HQ
   ═══════════════════════════════ */

/* Badge contatore (es. "15" nella Card Campi) */
.jhq-badge {
  margin-left: auto;
  background: var(--purple-bg);
  border: 0.5px solid var(--purple-bd);
  color: var(--purple);
  font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 20px;
}

/* Hint read-only nella Card Campi */
.jhq-snap-hint {
  margin-bottom: 12px;
}

.jhq-snap-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 120px;
}

/* Badge "richiesto" */
.jhq-req-badge {
  font-size: 10px; font-weight: 600;
  color: var(--amber);
  background: rgba(251,191,36,0.1);
  border: 0.5px solid rgba(251,191,36,0.3);
  border-radius: 4px;
  padding: 1px 6px;
}

/* Toggle group (Impostazioni visualizzazione) */
.jhq-toggle-group {
  display: flex;
  flex-direction: column;
}

.jhq-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  cursor: pointer;
}

.jhq-divider {
  height: 1px;
  background: var(--border);
  opacity: 0.5;
}

/* Checkbox area */
.jhq-toggle-check {
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}

.jhq-toggle-check input[type="checkbox"] {
  width: 16px; height: 16px;
  appearance: none;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all .15s;
}

.jhq-toggle-check input[type="checkbox"]:checked {
  background: var(--purple);
  border-color: var(--purple);
}

.jhq-checkmark {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  pointer-events: none;
}

.jhq-toggle-check input[type="checkbox"]:checked ~ .jhq-checkmark::after {
  content: '';
  display: block;
  width: 4px; height: 7px;
  border: 2px solid #000;
  border-top: none; border-left: none;
  transform: rotate(45deg);
  margin: 0 auto;
}

/* Toggle text */
.jhq-toggle-body { flex: 1; }
.jhq-toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 3px;
}

/* ── Danger Zone ── */
.jhq-danger-card {
  border: 1px solid var(--red-bd) !important;
  background: rgba(45,13,13,0.35);
}

.jhq-danger-icon {
  background: rgba(248,113,113,0.1) !important;
  border-color: rgba(248,113,113,0.25) !important;
  color: var(--red) !important;
}

.jhq-danger-title { color: var(--red) !important; }

.jhq-danger-body {
  margin-bottom: 14px;
}

/* ── Semantic category badges (.sp-sem-badge) ── */
.sp-sem-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  padding: 1px 7px; border-radius: 4px; border: 0.5px solid;
  text-transform: uppercase; letter-spacing: .04em;
}
.sp-cat-pre  { background: rgba(56,189,248,0.1);  border-color: rgba(56,189,248,0.3);  color: #38bdf8; }
.sp-cat-exec { background: rgba(251,146,60,0.1);  border-color: rgba(251,146,60,0.3);  color: #fb923c; }
.sp-cat-val  { background: rgba(163,230,53,0.1);  border-color: rgba(163,230,53,0.3);  color: #a3e635; }
.sp-cat-psy  { background: rgba(232,121,249,0.1); border-color: rgba(232,121,249,0.3); color: #e879f9; }
.sp-cat-rev  { background: rgba(251,191,36,0.1);  border-color: rgba(251,191,36,0.3);  color: var(--amber); }
.sp-cat-soc  { background: rgba(52,211,153,0.1);  border-color: rgba(52,211,153,0.3);  color: #34d399; }

/* ── Fine Chat 7 — CSS Consolidation ── */

/* ══════════════════════════════════════════════════════════════
   TEMPLATES — tmpl-* (Sessione 3)
   Layout due colonne: sinistra campi template / destra libreria
   ══════════════════════════════════════════════════════════════ */

/* ── Shell e layout due colonne ── */
.tmpl-shell {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}
.tmpl-left  { display: flex; flex-direction: column; gap: 16px; }
.tmpl-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }

/* ── Card header con contatore ── */
.tmpl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tmpl-card-head .card-title { margin-bottom: 0; }
.tmpl-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 6px;
  background: var(--purple-bg); border: 0.5px solid var(--purple-bd);
  border-radius: 9px; font-size: 10px; font-weight: 700; color: var(--purple);
}

/* ── Drop zone (area in cui trascinare i campi) ── */
.tmpl-dropzone {
  min-height: 80px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 8px;
  transition: border-color .15s, background .15s;
}
.tmpl-dropzone.drag-over {
  border-color: var(--purple);
  background: rgba(124,58,237,0.06);
}

/* ── Hint vuoto nella dropzone ── */
.tmpl-empty-hint {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
  padding: 24px 16px; text-align: center;
  color: var(--text3); font-size: 12px; pointer-events: none;
}
.tmpl-empty-hint svg { opacity: .35; }

/* ── Riga campo nel template (lista sinistra) ── */
.tmpl-sel-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; margin-bottom: 4px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: grab;
  transition: background .12s, border-color .12s, box-shadow .12s, opacity .15s;
  user-select: none;
}
.tmpl-sel-row:last-child { margin-bottom: 0; }
.tmpl-sel-row:hover {
  background: rgba(167,139,250,0.07);
  border-color: var(--purple-bd);
}
.tmpl-sel-row.dragging {
  opacity: 0.55;
  box-shadow: 0 0 0 2px var(--purple), 0 8px 24px rgba(124,58,237,0.25);
  border-color: var(--purple);
  animation: tmpl-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes tmpl-pulse {
  from { box-shadow: 0 0 0 2px var(--purple), 0 8px 24px rgba(124,58,237,0.25); }
  to   { box-shadow: 0 0 0 3px var(--purple), 0 12px 32px rgba(124,58,237,0.4); }
}
.tmpl-drag-handle {
  color: var(--text3); font-size: 14px; cursor: grab; flex-shrink: 0;
  letter-spacing: -1px;
}
.tmpl-sel-label {
  flex: 1; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text);
  min-width: 0; overflow: hidden;
}
.tmpl-sel-main {
  flex: 1; display: flex; align-items: center; gap: 5px;
  min-width: 0; overflow: hidden;
}
.tmpl-sel-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1;
}
.tmpl-sel-opts {
  font-size: 10px; color: var(--text3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex-shrink: 2;
}
.tmpl-sel-scope { flex-shrink: 0; margin-left: auto; }
.tmpl-deselect-btn {
  background: none; border: none; color: var(--text3); cursor: pointer;
  font-size: 12px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0;
  line-height: 1; transition: color .12s, background .12s;
}
.tmpl-deselect-btn:hover { color: var(--red); background: var(--red-bg); }

/* ── Interruttori «obbligatorio per bozza / definitivo» ── */
.tmpl-req { flex-shrink: 0; font-size: 10px; color: var(--text3); }
.tmpl-req label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.tmpl-req input { margin: 0; accent-color: var(--purple); cursor: pointer; }
.tmpl-req input:disabled { opacity: .6; cursor: default; }

/* ── Pills XS per tipo/scope ── */
.tmpl-pill-xs {
  font-size: 9px; padding: 1px 5px; border-radius: 3px;
  flex-shrink: 0; line-height: 1.4;
}

/* ── Drop indicator (linea di inserimento) ── */
.tmpl-sel-row.drop-above { border-top: 2px solid var(--purple); }
.tmpl-sel-row.drop-below { border-bottom: 2px solid var(--purple); }

/* ── Hint testo in cima alla lista ── */
.tmpl-hint { margin: 0 0 10px; }

/* ── Libreria (colonna destra) ── */
.tmpl-lib-search-wrap {
  position: relative; margin-bottom: 10px;
}
.tmpl-lib-search {
  width: 100%; box-sizing: border-box;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius);
  padding: 7px 12px 7px 32px; font-size: 12px;
  transition: border-color .15s;
}
.tmpl-lib-search:focus { outline: none; border-color: var(--purple); }
.tmpl-lib-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text3); pointer-events: none;
}
.tmpl-lib-filters {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px;
}

/* ── Lista campi nella libreria ── */
.tmpl-lib-list { display: flex; flex-direction: column; gap: 4px; max-height: 520px; overflow-y: auto; }
.tmpl-lib-list::-webkit-scrollbar { width: 4px; }
.tmpl-lib-list::-webkit-scrollbar-track { background: transparent; }
.tmpl-lib-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.tmpl-lib-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tmpl-lib-row:hover { background: rgba(167,139,250,0.07); border-color: var(--purple-bd); }
.tmpl-lib-row.selected {
  background: rgba(167,139,250,0.12); border-color: var(--purple);
  opacity: 0.55; cursor: default;
}

/* ── Icona tipo campo nella libreria ── */
.tmpl-lib-icon {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.tmpl-lib-icon.t-list     { background: rgba(56,189,248,0.12);  color: #38bdf8; }
.tmpl-lib-icon.t-boolean  { background: rgba(74,222,128,0.12);  color: #4ade80; }
.tmpl-lib-icon.t-text     { background: rgba(167,139,250,0.12); color: var(--purple); }
.tmpl-lib-icon.t-textarea { background: rgba(167,139,250,0.12); color: var(--purple); }
.tmpl-lib-icon.t-time     { background: rgba(34,211,238,0.12);  color: #22d3ee; }
.tmpl-lib-icon.t-number   { background: rgba(251,191,36,0.12);  color: #fbbf24; }
.tmpl-lib-icon.t-screenshot { background: rgba(232,121,249,0.12); color: #e879f9; }

.tmpl-lib-info { flex: 1; min-width: 0; }
.tmpl-lib-name { font-size: 12px; color: var(--text); white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
.tmpl-lib-meta {
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
  /* tipo + opzioni a sinistra, scope ancorato a destra */
}
.tmpl-lib-meta-left  { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
.tmpl-lib-meta-right { flex-shrink: 0; }
.tmpl-lib-sub  { font-size: 10px; color: var(--text3); white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* ── Pulsante + nella libreria ── */
.tmpl-lib-add {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text3); cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.tmpl-lib-add:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-bg); }
.tmpl-lib-row.selected .tmpl-lib-add { display: none; }

/* ── No results ── */
.tmpl-lib-empty {
  text-align: center; padding: 24px 16px;
  color: var(--text3); font-size: 12px;
}

/* ── Suggerimento in fondo ── */
.tmpl-lib-tip {
  font-size: 10px; color: var(--text3); text-align: center;
  padding: 8px; border-top: 1px solid var(--border); margin-top: 4px;
}

/* ── Index modelli (tmpl-index-*) ── */
.tmpl-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.tmpl-index-card {
  --t: var(--purple);
  background: var(--bg2); border: 1px solid var(--border);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--t) 5%, transparent), transparent 60%);
  border-top: 2px solid color-mix(in srgb, var(--t) 38%, transparent);
  border-radius: var(--radius-lg); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, background .15s;
  position: relative;
}
.tmpl-index-card:hover {
  border-color: var(--purple-bd);
  background: rgba(167,139,250,0.03);
}
.tmpl-index-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.tmpl-index-name {
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.tmpl-index-lock { font-size: 13px; flex-shrink: 0; }
.tmpl-index-desc {
  font-size: 11px; color: var(--text3); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-index-stats {
  display: flex; gap: 12px;
}
.tmpl-index-stat {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  column-gap: 8px; row-gap: 2px; align-items: center;
}
.tmpl-index-stat-ico {
  grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; color: var(--t); background: rgba(255,255,255,.04);
}
.tmpl-index-stats { gap: 18px; }
.tmpl-index-stat-val {
  font-size: 16px; font-weight: 700; color: var(--text); line-height: 1;
}
.tmpl-index-stat-lbl {
  font-size: 10px; color: var(--text3); text-transform: uppercase;
  font-weight: 600; letter-spacing: .04em;
}
.tmpl-index-author {
  font-size: 11px; color: var(--text2);
  display: flex; align-items: center; gap: 8px;
}
.tmpl-index-actions {
  display: flex; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border);
}
.tmpl-index-actions .btn { flex: 1; justify-content: center; font-size: 11px; }

/* Fine CSS Sessione 3 — Templates */

/* sp-page-sub — sottotitolo descrittivo sotto il topbar */
.sp-page-sub {
  font-size: 12px; color: var(--text3); margin: 0 0 14px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   TRADES — classi mancanti (Sessione 3)
   ══════════════════════════════════════════════════════════════ */

/* ── sp-chip (badge stato) ── */
.sp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; border: 0.5px solid var(--border);
  background: var(--bg3); color: var(--text3);
  text-transform: uppercase; letter-spacing: .04em;
}
.sp-chip--draft {
  background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.35);
  color: #fbbf24;
}
.sp-chip-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  animation: chip-blink 1.4s ease-in-out infinite;
}
@keyframes chip-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── sp-data-rows (key/value list usata in td-section sidebar) ── */
.sp-data-rows { display: flex; flex-direction: column; }
.sp-data-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 6px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 12px;
}
.sp-data-row:last-child { border-bottom: none; }
.sp-data-key { color: var(--text3); flex-shrink: 0; max-width: 60%; }
.sp-data-val { color: var(--text); text-align: right; font-weight: 500; }
.sp-data-val.green { color: var(--green); }
.sp-data-val.red   { color: var(--red); }

/* ── Edit trade — layout due colonne ── */
.te-shell {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 16px;
  align-items: start;
}
.te-left  { display: flex; flex-direction: column; gap: 14px; }
.te-right { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }

/* Intestazione card con icona categoria */
.te-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.te-card-icon {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.te-card-icon.cat-pre  { background: rgba(56,189,248,0.12);  border: 1px solid rgba(56,189,248,0.2); }
.te-card-icon.cat-exec { background: rgba(251,146,60,0.12);  border: 1px solid rgba(251,146,60,0.2); }
.te-card-icon.cat-val  { background: rgba(163,230,53,0.12);  border: 1px solid rgba(163,230,53,0.2); }
.te-card-icon.cat-psy  { background: rgba(232,121,249,0.12); border: 1px solid rgba(232,121,249,0.2); }
.te-card-icon.cat-rev  { background: rgba(251,191,36,0.12);  border: 1px solid rgba(251,191,36,0.2); }

/* Card con bordo laterale colorato per categoria */
.te-card-left-pre  { border-left: 2px solid rgba(56,189,248,0.4); }
.te-card-left-exec { border-left: 2px solid rgba(251,146,60,0.4); }
.te-card-left-val  { border-left: 2px solid rgba(163,230,53,0.4); }
.te-card-left-psy  { border-left: 2px solid rgba(232,121,249,0.4); }
.te-card-left-rev  { border-left: 2px solid rgba(251,191,36,0.4); }

/* Warning bozza */
.te-draft-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 12px; color: #fbbf24; margin-bottom: 14px;
}
.te-draft-banner strong { color: #fde68a; }

/* Screenshot preview card (colonna destra) */
.te-scr-preview {
  border-radius: var(--radius); overflow: hidden; margin-bottom: 8px;
  border: 1px solid var(--border);
}
.te-scr-preview img {
  width: 100%; display: block;
  max-height: 180px; object-fit: cover; cursor: pointer;
}
.te-scr-replace-hint {
  font-size: 10px; color: var(--text3); padding: 5px 8px;
  background: var(--bg3); border-top: 1px solid var(--border);
}

/* ── Quill override in entrambe le pagine ── */
.ql-toolbar {
  border-radius: var(--radius) var(--radius) 0 0 !important;
  border-color: var(--border) !important;
  background: var(--bg3);
}
.ql-container {
  border-radius: 0 0 var(--radius) var(--radius) !important;
  border-color: var(--border) !important;
  font-size: 13px; min-height: 90px;
}
.ql-editor { color: var(--text); }
.ql-toolbar .ql-stroke { stroke: var(--text3); }
.ql-toolbar .ql-fill   { fill: var(--text3); }
.ql-toolbar button:hover .ql-stroke { stroke: var(--purple); }

/* Fine CSS Sessione 3 — Trades */

/* ══════════════════════════════════════════════════════════════
   SQUADS — sq-idx-* / sq-new-* / sq-new-prev-*  (Sessione 4)
   ══════════════════════════════════════════════════════════════ */

/* ── Shared animation ── */
.sq-animate-in {
  animation: sq-fade-in var(--dur-slow) var(--ease-out) both;
}
@keyframes sq-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sq-hidden { display: none !important; }
.text-center { text-align: center; }
.flex-1 { flex: 1; }
.text-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ══ squads/index — .sq-idx-* ══════════════════════════════════ */

/* Shell */
.sq-index-shell { display: flex; flex-direction: column; gap: 0; }

/* Row avatar (initials o logo) */
.sq-idx-avatar {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  background: linear-gradient(135deg, #1e1040, #0e2038);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text3);
  letter-spacing: -.5px; overflow: hidden;
}
.sq-idx-avatar--mine {
  background: linear-gradient(135deg, var(--purple-bg), #0e2038);
  border-color: var(--purple-bd);
  color: var(--purple);
}
.sq-idx-avatar-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.sq-idx-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sq-idx-sub {
  font-size: 11px; color: var(--text3); margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* Members avatars row */
.sq-idx-members {
  display: flex; align-items: center; flex-wrap: nowrap;
}
.sq-idx-member-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple-bg), #0e1628);
  border: 1.5px solid var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--purple);
  margin-left: -6px;
}
.sq-idx-member-avatar:first-child { margin-left: 0; }
.sq-idx-member-more {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg3); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--text3);
  margin-left: -6px;
}
.sq-idx-member-count {
  margin-top: 3px;
}

/* sp-chip variants for squads index */
.sp-chip--live {
  background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3);
  color: var(--green);
}
.sp-chip--closed {
  background: var(--bg3); border-color: var(--border); color: var(--text3);
}
.sq-new-row2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ══ squads/new + squads/edit — .sq-new-* ══════════════════════ */

/* Outer shell */
.sq-new-shell {
  display: flex; flex-direction: column; gap: 0;
}

/* ── Wizard top bar ── */
.sq-new-wizard-bar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.sq-new-steps {
  display: flex; align-items: center; gap: 0;
}
.sq-new-step {
  display: flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.sq-new-step:hover { background: rgba(167,139,250,0.06); }
.sq-new-step-circle {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-bold);
  background: var(--bg3); border: 1px solid var(--border); color: var(--text3);
  transition: all var(--dur-fast) var(--ease-out);
}
.sq-new-step.active .sq-new-step-circle {
  background: var(--purple); border-color: var(--purple); color: #000;
  box-shadow: 0 0 10px rgba(167,139,250,0.45);
}
.sq-new-step.done .sq-new-step-circle {
  background: rgba(74,222,128,0.15); border-color: var(--green-bd); color: var(--green);
}
.sq-new-step-label {
  font-size: 12px; font-weight: var(--fw-semi); color: var(--text3); white-space: nowrap;
}
.sq-new-step.active .sq-new-step-label { color: var(--text); }
.sq-new-step.done   .sq-new-step-label { color: var(--text2); }
.sq-new-step-sep {
  flex: 1; min-width: 24px; height: 1px; background: var(--border);
  margin: 0 var(--sp-1); flex-shrink: 0;
}

/* ── Two-column layout ── */
.sq-new-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--sp-4);
  align-items: start;
}

/* ── Panel (single step) ── */
.sq-new-panel { }

/* ── Step heading inside card ── */
.sq-new-step-heading {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.sq-new-step-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--purple-bg); border: 1px solid var(--purple-bd);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--fw-black); color: var(--purple);
}
.sq-new-subheading {
  font-size: 13px; font-weight: var(--fw-bold); color: var(--text);
  margin-bottom: 2px;
}

/* ── Logo upload row ── */
.sq-new-logo-row {
  display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4);
}
.sq-new-logo-preview {
  width: 200px; height: 200px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, #1e1040, #0e2038);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--purple);
  overflow: hidden;
}
.sq-new-logo-upload { flex: 1; }
.sq-new-logo-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius);
  background: var(--bg3); border: 0.5px solid var(--border);
  font-size: 12px; color: var(--text2); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sq-new-logo-label:hover { border-color: var(--purple-bd); color: var(--purple); }

/* ── Field group (label + input + hint) ── */
.sq-new-field-group { margin-bottom: var(--sp-4); }
.sq-new-field-group:last-child { margin-bottom: 0; }
.sq-new-field-label {
  display: block; font-size: 11px; color: var(--text3);
  margin-bottom: var(--sp-1); font-weight: var(--fw-semi);
}
.sq-new-field-required::after {
  content: " *"; color: var(--red); font-size: 10px;
}
.sq-new-field-hint {
  display: block; font-size: 11px; color: var(--text3); margin-top: 4px; line-height: 1.5;
}
.sq-new-section-label {
  font-size: 10px; font-weight: var(--fw-bold); color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ── Checkboxes ── */
.sq-new-checks { display: flex; flex-direction: column; gap: var(--sp-2); }
.sq-new-check-label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--text2); cursor: pointer;
}
.sq-new-check-label input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--purple); flex-shrink: 0;
}

/* ── Template list (step 1) ── */
.sq-new-tmpl-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.sq-new-tmpl-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.sq-new-tmpl-row:hover { border-color: var(--purple-bd); }
.sq-new-tmpl-row input[type="radio"] { display: none; }
.sq-new-tmpl-row:has(input:checked) {
  border-color: var(--purple);
  background: var(--purple-bg);
}
.sq-new-tmpl-body { flex: 1; min-width: 0; }
.sq-new-tmpl-name {
  font-size: 13px; font-weight: var(--fw-semi); color: var(--text);
}
.sq-new-tmpl-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: transparent;
  transition: all .15s;
}
.sq-new-tmpl-row:has(input:checked) .sq-new-tmpl-check {
  background: var(--purple); border-color: var(--purple); color: #000; font-weight: 700;
}

/* ── Sidebar preview ── */
.sq-new-sidebar {
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sq-new-preview-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4);
}
.sq-new-preview-primary {
  background: linear-gradient(160deg, #0d112a 0%, #080c1e 100%);
  border-color: rgba(167,139,250,0.2);
}
.sq-new-preview-title {
  font-size: 10px; font-weight: var(--fw-bold); color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-4);
}

/* Avatar preview (iniziali o immagine) */
.sq-new-prev-avatar {
  width: 120px; height: 120px; border-radius: 14px;
  background: linear-gradient(135deg, #3b1fa3, #0e7490);
  border: 1px solid rgba(167,139,250,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.5px;
  margin: 0 auto var(--sp-3);
  overflow: hidden;
}
.sq-new-prev-name {
  font-size: 14px; font-weight: var(--fw-bold); color: var(--text);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Stack utility ── */
.sq-new-stack { display: flex; flex-direction: column; gap: var(--sp-4); }


/* ══════════════════════════════════════════════════════════════
   SQUADS DETAIL — sq-detail-* / sq-feed-*  (Sessione 4)
   ══════════════════════════════════════════════════════════════ */

/* ── Shell ── */
.sq-detail-shell { display: flex; flex-direction: column; gap: 0; }

/* ── Hero ── */
.sq-detail-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  margin-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: none;
}
.sq-detail-hero-avatar {
  width: 120px; height: 120px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(135deg, #3b1fa3, #0e7490);
  border: 1px solid rgba(167,139,250,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.5px;
  overflow: hidden;
}
.sq-detail-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sq-detail-hero-body { flex: 1; min-width: 0; }
.sq-detail-hero-top {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.sq-detail-hero-name {
  font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.3px;
}
.sq-detail-hero-meta {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.sq-detail-hero-desc {
  font-size: 13px; color: var(--text2); line-height: 1.6; margin-top: var(--sp-2);
}
.sq-detail-hero-actions {
  display: flex; flex-direction: column; gap: var(--sp-2); flex-shrink: 0;
}

/* sp-chip varianti aggiuntive */
.sp-chip--member  { background: rgba(167,139,250,0.12); border-color: var(--purple-bd); color: var(--purple); }
.sp-chip--pending { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.3); color: var(--amber); }
.sp-chip--conform { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); color: var(--green); }

/* ── Tab bar ── */
.sq-detail-tabbar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: none;
  border-bottom: none;
  padding: 0 16px;
}
.sq-detail-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  background: var(--bg3); border: 0.5px solid var(--border);
  border-radius: 8px; font-size: 10px; font-weight: 700; color: var(--text3);
  margin-left: 4px;
}
.jtab.active .sq-detail-tab-badge { background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple); }

/* Tab separator between hero and content */
.sq-detail-tabbar + .sq-tab-panel,
.sq-detail-tabbar + * { margin-top: 16px; }

/* ── Tab panels ── */
.sq-tab-panel { }

/* ── Two-column layout inside tab-overview ── */
.sq-detail-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--sp-4);
  align-items: start;
}

/* ── Feed column ── */
.sq-detail-feed { display: flex; flex-direction: column; gap: var(--sp-3); }

.sq-detail-section-title {
  font-size: 13px; font-weight: var(--fw-bold); color: var(--text);
  display: flex; align-items: center; gap: var(--sp-2);
}
.sq-detail-section-count {
  font-size: 11px; font-weight: var(--fw-bold); color: var(--text3);
  background: var(--bg3); border: 0.5px solid var(--border);
  border-radius: 8px; padding: 1px 7px;
}

/* ── Feed card ── */
.sq-feed-card { display: flex; flex-direction: column; gap: var(--sp-2); }

.sq-feed-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2);
}
.sq-feed-author-row { display: flex; align-items: center; gap: var(--sp-2); }
.sq-feed-author { font-size: 13px; font-weight: var(--fw-semi); color: var(--text); }

.sq-feed-kpi {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) 0;
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}
.sq-feed-kpi-item {
  font-size: 12px; font-weight: var(--fw-semi); color: var(--text2);
  background: var(--bg3); border: 0.5px solid var(--border);
  border-radius: 5px; padding: 2px 8px;
}

.sq-feed-thumbs {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
}
.sq-feed-thumb {
  width: 80px; height: 60px; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border);
  cursor: pointer; transition: opacity .15s;
}
.sq-feed-thumb:hover { opacity: .85; }
.sq-feed-thumb-more {
  width: 80px; height: 60px; border-radius: var(--radius);
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text3); font-weight: 600;
}

.sq-feed-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2);
}
.sq-feed-detail-link {
  font-size: 12px; color: var(--purple); text-decoration: none;
  flex-shrink: 0;
}
.sq-feed-detail-link:hover { text-decoration: underline; }

/* ── Sidebar (detail overview) ── */
.sq-detail-sidebar { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: 0; }
.sq-detail-info-card { }
.sq-detail-info-title {
  font-size: 10px; font-weight: var(--fw-bold); color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-3);
}


/* =============================================================================
   validation_detail.css  —  v3
   Usa solo variabili da main.css. Da integrare in main.css in seguito.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   TOPBAR helpers
───────────────────────────────────────────────────────────────────────────── */
.breadcrumb          { color:var(--text2); font-size:13px; text-decoration:none; transition:color .15s; }
.breadcrumb:hover    { color:var(--text); }
.sep                 { color:var(--text3); margin:0 6px; font-size:12px; }

.vd-dir-chip         { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px;
                        border-radius:var(--radius); margin-left:8px; vertical-align:middle; letter-spacing:.04em; }
.vd-dir-chip--long   { background:rgba(52,211,153,.15); color:var(--green); }
.vd-dir-chip--short  { background:rgba(239,68,68,.15);  color:var(--red);   }

/* ─────────────────────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────────────────────── */
.vd-hero {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 20px 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  width: 100%;
}

/* Left */
.vd-hero__left   { display:flex; align-items:flex-start; gap:12px; flex:0 0 200px; padding-right:24px; border-right:1px solid var(--bg3); }
.vd-hero__avatar { width:44px; height:44px; font-size:16px; flex-shrink:0; }
.vd-hero__meta   { display:flex; flex-direction:column; gap:2px; }
.vd-hero__author { font-size:15px; font-weight:600; color:var(--text); line-height:1.2; }
.vd-hero__journal-link {
  color:var(--purple); text-decoration:none; font-size:12px; font-weight:500;
  display:block; margin-top:1px;
  /* Troncamento per nomi lunghi */
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vd-hero__journal-link:hover { text-decoration:underline; }

/* Center */
.vd-hero__center   { display:flex; flex-direction:column; gap:6px; flex:0 0 220px; padding:0 24px; border-right:1px solid var(--bg3); }
.vd-hero__pair-row { display:flex; align-items:center; gap:10px; }
.vd-hero__pair     { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.3px; line-height:1; }

.vd-dir-badge        { display:inline-block; font-size:13px; font-weight:700; padding:3px 12px;
                        border-radius:var(--radius); letter-spacing:.05em; }
.vd-dir-badge--long  { background:rgba(52,211,153,.18); color:var(--green); }
.vd-dir-badge--short { background:rgba(239,68,68,.18);  color:var(--red);   }

.vd-hero__chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.sp-chip--post {
  background:rgba(139,92,246,.15); color:var(--purple);
  border:1px solid rgba(139,92,246,.25); border-radius:20px;
  padding:2px 10px; font-size:11px; font-weight:600; letter-spacing:.03em;
}

/* Right: KPI boxes */
.vd-hero__kpis      { display:flex; gap:0; flex:1; justify-content:space-evenly; flex-wrap:wrap; padding-left:0; }
.vd-kpi-box         { padding:0 20px; border-left:1px solid var(--bg3); min-width:120px; flex:1; }
.vd-kpi-box:first-child { border-left:1px solid var(--bg3); }
.vd-kpi-label       { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
                       color:var(--text3); margin-bottom:6px; }
.vd-kpi-val         { font-size:14px; color:var(--text); line-height:1.4; }
.vd-kpi-val--model  { display:flex; align-items:center; gap:8px; }
.vd-model-icon      { width:32px; height:32px; border-radius:8px; background:var(--purple);
                       color:#fff; font-size:14px; font-weight:700;
                       display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.vd-votes-fraction  { font-size:18px; font-weight:700; line-height:1; }
.vd-votes-total     { font-size:13px; font-weight:400; color:var(--text3); }

.vd-vote-progress   { display:flex; height:4px; border-radius:4px; overflow:hidden;
                       background:var(--bg3); margin:6px 0 4px; gap:1px; min-width:80px; }
.vd-vote-bar        { height:100%; transition:width .4s; }
.vd-vote-bar--valid     { background:var(--green); }
.vd-vote-bar--uncertain { background:#f59e0b; }
.vd-vote-bar--invalid   { background:var(--red); }

.vd-consensus           { font-size:15px; font-weight:700; }
.vd-consensus--valid    { color:var(--green); }
.vd-consensus--invalid  { color:var(--red);   }
.vd-consensus--uncertain { color:#f59e0b;     }

.vd-consensus-dots { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.vd-dot            { width:8px; height:8px; border-radius:50%; display:inline-block; }
.vd-dot--valid     { background:var(--green); }
.vd-dot--invalid   { background:var(--red);   }
.vd-dot--uncertain { background:#f59e0b;      }

.vd-countdown { font-size:16px; font-weight:700; color:var(--text); }

/* ─────────────────────────────────────────────────────────────────────────────
   2-COLUMN WORKSPACE
   align-items:stretch — entrambe le colonne alla stessa altezza.
   La colonna destra usa flex-column stretch per far crescere l'activity card.
───────────────────────────────────────────────────────────────────────────── */
.vd-workspace {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 20px;
  align-items: stretch;   /* le colonne si allungano fino alla più alta */
}
.vd-col-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vd-col-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* La colonna destra si allunga per tutta l'altezza del workspace */
  align-self: stretch;
}
/* La vote card rimane alta quanto il suo contenuto */
.vd-vote-card { flex-shrink: 0; }
/* L'activity card occupa tutto lo spazio rimanente nella colonna */
.vd-activity-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;   /* fondamentale per il flex-grow con overflow */
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION WRAPPER
───────────────────────────────────────────────────────────────────────────── */
.vd-section       { padding:20px 22px; }
.vd-section-title { font-size:14px; font-weight:700; color:var(--text);
                    margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.vd-section-num   { width:22px; height:22px; border-radius:50%; background:var(--bg3);
                    color:var(--text2); font-size:11px; font-weight:700;
                    display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ─────────────────────────────────────────────────────────────────────────────
   TRADE SNAPSHOT GRID
   Sempre su UNA RIGA — colonne auto che si adattano al numero di elementi.
   Usiamo grid-auto-flow + grid-template-rows: 1 riga sola.
───────────────────────────────────────────────────────────────────────────── */
.vd-snapshot-grid {
  display: grid;
  /* Tante colonne quanti i figli, tutte uguali, minimo 90px */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  overflow: hidden;
}
.vd-snap-item {
  padding: 10px 12px;
  border-right: 1px solid var(--bg3);
}
.vd-snap-item:last-child { border-right: none; }

.vd-snap-label    { font-size:10px; font-weight:600; text-transform:uppercase;
                    letter-spacing:.06em; color:var(--text3); margin-bottom:4px; white-space:nowrap; }
.vd-snap-val      { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; }
.vd-snap-val--long  { color:var(--green); }
.vd-snap-val--short { color:var(--red);   }
.green { color:var(--green) !important; }
.red   { color:var(--red)   !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   SCREENSHOT VIEWER
───────────────────────────────────────────────────────────────────────────── */
/* Screenshot — usa le stesse classi di trades/detail.html
   (.screenshot-tabs, .scr-tab, .screenshot-frame, .td-scr-frame)
   definite nel main.css. Qui gestiamo solo il wrapper e i nostri aggiuntivi. */
.vd-screenshots      { margin-top:20px; border-top:1px solid var(--bg3); padding-top:16px; }
/* Pulsante espandi sovrapposto all'immagine */
.vd-scr-expand       { position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,.6);
                        color:#fff; border:none; border-radius:var(--radius);
                        padding:4px 10px; font-size:12px; cursor:pointer; backdrop-filter:blur(4px); }
.vd-scr-expand:hover { background:rgba(0,0,0,.85); }
.vd-scr-empty        { border:1px dashed var(--bg3); border-radius:var(--radius);
                        padding:32px; text-align:center; background:var(--bg2); margin-top:16px; }

/* ─────────────────────────────────────────────────────────────────────────────
   FIELD GROUPS — layout a colonne affiancate
───────────────────────────────────────────────────────────────────────────── */
.vd-cats-columns {
  display: flex;
  gap: 0;
  align-items: flex-start;
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 4px;
}

.vd-cat-col {
  flex: 1;
  min-width: 0;
  border-right: 1px solid var(--bg3);
}
.vd-cat-col:last-child { border-right: none; }

.vd-cat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--bg3);
  display: block;
}
.vd-cat-label--pre_trade  { color:var(--purple); background:rgba(139,92,246,.06); }
.vd-cat-label--execution  { color:var(--green);  background:rgba(52,211,153,.06); }
.vd-cat-label--validation { color:#f59e0b;        background:rgba(245,158,11,.06); }
.vd-cat-label--psychology { color:#06b6d4;        background:rgba(6,182,212,.06);  }
.vd-cat-label--review     { color:#a78bfa;        background:rgba(167,139,250,.06);}
.vd-cat-label--social     { color:#f472b6;        background:rgba(244,114,182,.06);}
.vd-cat-label--altro      { color:var(--text3);   background:var(--bg2);           }

.vd-field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--bg3);
  gap: 6px;
}
.vd-cat-col .vd-field-row:last-child { border-bottom: none; }

.vd-field-key { font-size: 11px; color: var(--text2); flex: 1; line-height: 1.4; }
.vd-field-val { font-size: 11px; font-weight: 600; color: var(--text);
                text-align: right; white-space: nowrap; }
.vd-field-val--ok { color: var(--green); }
.vd-field-val--no { color: var(--text3); }

/* Author notes */
.vd-author-note       { margin-top:20px; padding-top:16px; border-top:1px solid var(--bg3); }
.vd-author-note-label { font-size:11px; font-weight:700; text-transform:uppercase;
                         letter-spacing:.07em; color:var(--text3); margin-bottom:8px; }
.vd-author-note-body  { margin:0; padding:12px 16px; border-left:3px solid var(--purple);
                         background:var(--bg2); border-radius:0 var(--radius) var(--radius) 0;
                         font-size:13px; color:var(--text2); line-height:1.6; }
.vd-author-note-body--psy { border-left-color:#06b6d4; }
.vd-author-note-body img  { max-width:100%; border-radius:var(--radius); margin:6px 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   VOTE CARD
───────────────────────────────────────────────────────────────────────────── */
.vd-vote-card       { padding:20px; }
.vd-vote-card-title { font-size:14px; font-weight:700; color:var(--text);
                      margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--bg3); }
.vd-vote-editing-banner {
  background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.25);
  border-radius:var(--radius); padding:8px 12px; font-size:12px;
  color:var(--purple); margin-bottom:14px;
}
.vd-vote-field-label { font-size:10px; font-weight:700; text-transform:uppercase;
                        letter-spacing:.07em; color:var(--text3); margin-bottom:5px; }

/* ── Vote choices — più compatti e visibili ── */
.vd-vote-choices    { display:flex; gap:5px; }
.vd-vote-choices--3 { flex-direction:row; }
.vd-vote-choices--2 { flex-direction:row; }

.vd-choice {
  flex: 1;
  display: flex;
  flex-direction: row;        /* icona + label sulla stessa riga */
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 6px;           /* meno padding verticale */
  border-radius: var(--radius);
  /* Bordo e background sempre visibili anche a riposo */
  border: 1.5px solid var(--bg3);
  background: var(--bg2);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  text-align: center;
}
.vd-choice input[type=radio] { display:none; }

/* Hover generico */
.vd-choice:hover { border-color: var(--text3); background: var(--bg3); }

/* Stato selected */
.vd-choice.selected.vd-choice--green { border-color:var(--green); background:rgba(52,211,153,.15); }
.vd-choice.selected.vd-choice--yellow { border-color:#f59e0b;     background:rgba(245,158,11,.15); }
.vd-choice.selected.vd-choice--red   { border-color:var(--red);   background:rgba(239,68,68,.15);  }

/* Hover specifico per tipo */
.vd-choice--green:hover  { border-color:var(--green); background:rgba(52,211,153,.08); }
.vd-choice--yellow:hover { border-color:#f59e0b;      background:rgba(245,158,11,.08); }
.vd-choice--red:hover    { border-color:var(--red);   background:rgba(239,68,68,.08);  }

.vd-choice-icon  { font-size:14px; flex-shrink:0; }
.vd-choice--green  .vd-choice-icon { color:var(--green); }
.vd-choice--yellow .vd-choice-icon { color:#f59e0b; }
.vd-choice--red    .vd-choice-icon { color:var(--red);   }

.vd-choice-label { font-size:11px; font-weight:600; color:var(--text); white-space:nowrap; }

/* ── Confidence slider ── */
.vd-confidence-slider-wrap { margin-top:4px; }

.vd-conf-track {
  position: relative;
  height: 6px;
  background: var(--bg3);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 6px;
}

.vd-conf-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background: var(--purple);
  border-radius: 6px;
  transition: width .2s ease;
  pointer-events: none;
}

.vd-conf-dot {
  position: relative;
  z-index: 1;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg3);
  background: var(--bg);
  cursor: pointer;
  transition: all .15s;
  padding: 0;
  flex-shrink: 0;
}
.vd-conf-dot:hover  { border-color:var(--purple); background:var(--bg2); transform:scale(1.2); }
.vd-conf-dot.active { border-color:var(--purple); background:var(--purple); }

.vd-conf-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text3);
  padding: 0 2px;
  margin-bottom: 4px;
}

.vd-conf-value {
  font-size: 11px;
  min-height: 16px;
  color: var(--purple);
  font-weight: 600;
}

/* ── Quill comment editor ── */
.vd-quill-editor { margin-top:4px; }
.vd-quill-editor .ql-toolbar {
  background:var(--bg2); border-color:var(--bg3) !important;
  border-radius:var(--radius) var(--radius) 0 0;
}
.vd-quill-editor .ql-container {
  background:var(--bg2); border-color:var(--bg3) !important;
  border-radius:0 0 var(--radius) var(--radius);
  min-height:72px; font-size:13px; color:var(--text);
}
.vd-quill-editor .ql-editor { min-height:72px; color:var(--text); }
.vd-quill-editor .ql-editor.ql-blank::before { color:var(--text3); font-style:normal; }
.vd-quill-editor .ql-stroke { stroke:var(--text2) !important; }
.vd-quill-editor .ql-fill   { fill:var(--text2)   !important; }
.vd-quill-editor img { max-width:100%; border-radius:var(--radius); margin:4px 0; }

/* ── Submit button — sovrascrive main.css hover ── */
.vd-vote-submit {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  font-size: 13px;
  font-weight: 600;
  background: var(--purple) !important;
  color: #fff !important;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity .15s, transform .1s !important;
  /* Resetta qualsiasi override da .btn-primary */
  box-shadow: none !important;
  text-decoration: none !important;
}
.vd-vote-submit:hover {
  opacity: .88 !important;
  transform: none !important;
  background: var(--purple) !important;
  color: #fff !important;
  box-shadow: none !important;
  filter: none !important;
}
.vd-vote-submit:active { opacity: .75 !important; }

/* ── My vote recap ── */
.vd-my-vote-recap { display:flex; flex-direction:column; gap:8px; }
.vd-my-vote-chip  { display:inline-flex; align-items:center; gap:6px; font-size:13px;
                     font-weight:700; padding:7px 14px; border-radius:var(--radius); align-self:flex-start; }
.vd-my-vote-chip--valid     { background:rgba(52,211,153,.15); color:var(--green); }
.vd-my-vote-chip--uncertain { background:rgba(245,158,11,.15); color:#f59e0b;      }
.vd-my-vote-chip--invalid   { background:rgba(239,68,68,.15);  color:var(--red);   }
.vd-recap-meta    { font-size:12px; color:var(--text2); }
.vd-my-vote-comment { font-size:13px; color:var(--text2); padding:8px 12px;
                       background:var(--bg2); border-radius:var(--radius); line-height:1.5; }
.vd-my-vote-comment img { max-width:100%; border-radius:var(--radius); margin:4px 0; }

.vd-info-box { font-size:13px; color:var(--text2); padding:14px 16px;
               background:var(--bg2); border:1px solid var(--bg3);
               border-radius:var(--radius); text-align:center; }

/* ─────────────────────────────────────────────────────────────────────────────
   ACTIVITY FEED — altezza limitata con scrollbar
───────────────────────────────────────────────────────────────────────────── */
.vd-activity-card {
  padding: 20px;
  /* titolo + feed in colonna, feed cresce */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Il titolo ha altezza fissa */
.vd-activity-card > .vd-vote-card-title { flex-shrink: 0; }

.vd-activity-feed {
  flex: 1;                  /* occupa tutto lo spazio residuo nella card */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Scroll solo quando serve — nessun max-height fisso */
  min-height: 120px;        /* almeno 3 voci visibili */
  scrollbar-width: thin;
  scrollbar-color: var(--bg3) transparent;
  padding-right: 4px;
  margin-right: -4px;
}
.vd-activity-feed::-webkit-scrollbar       { width: 4px; }
.vd-activity-feed::-webkit-scrollbar-track { background: transparent; }
.vd-activity-feed::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 4px; }
.vd-activity-feed::-webkit-scrollbar-thumb:hover { background: var(--text3); }

.vd-activity-item          { display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--bg3); flex-shrink:0; }
.vd-activity-item:last-child { border-bottom:none; }
.vd-activity-item--pending { opacity:.8; }

.vd-activity-avatar          { width:30px; height:30px; font-size:11px; flex-shrink:0; }
.vd-activity-avatar--pending { opacity:.4; background:var(--bg3); color:var(--text3); }

.vd-activity-body   { flex:1; min-width:0; }
.vd-activity-header { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:3px; }
.vd-activity-name   { font-size:13px; font-weight:600; color:var(--text); }

.vd-vote-badge            { display:inline-flex; align-items:center; gap:3px; font-size:10px;
                             font-weight:600; padding:2px 7px; border-radius:20px; margin-left:auto; }
.vd-vote-badge--valid     { background:rgba(52,211,153,.15); color:var(--green); }
.vd-vote-badge--uncertain { background:rgba(245,158,11,.15); color:#f59e0b;      }
.vd-vote-badge--invalid   { background:rgba(239,68,68,.15);  color:var(--red);   }
.vd-vote-badge--pending   { background:var(--bg3);           color:var(--text3); }
.vd-vote-badge--hidden    { background:rgba(52,211,153,.1);  color:var(--green); opacity:.65; }

.vd-activity-vote-detail { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:3px; }
.vd-detail-chip    { font-size:10px; padding:2px 7px; border-radius:20px;
                     background:var(--bg3); color:var(--text2); font-weight:500; }
.vd-detail-chip--ok { background:rgba(52,211,153,.12); color:var(--green); }
.vd-detail-chip--no { background:rgba(239,68,68,.12);  color:var(--red);   }

.vd-activity-comment { font-size:12px; color:var(--text2); line-height:1.5; margin-bottom:3px; }
.vd-activity-comment img { max-width:100%; border-radius:calc(var(--radius)/2); margin:4px 0; }
.vd-activity-time    { font-size:10px; color:var(--text3); }

.vd-edit-vote-btn {
  background:none; border:1px solid var(--bg3); color:var(--text3);
  font-size:11px; padding:2px 7px; border-radius:var(--radius);
  cursor:pointer; transition:all .15s; margin-left:auto;
}
.vd-edit-vote-btn:hover { border-color:var(--purple); color:var(--purple); }

/* ─────────────────────────────────────────────────────────────────────────────
   LIGHTBOX
───────────────────────────────────────────────────────────────────────────── */
.vd-lightbox         { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88);
                        z-index:9999; align-items:center; justify-content:center;
                        padding:32px; cursor:zoom-out; }
.vd-lightbox.open    { display:flex; }
.vd-lightbox img     { max-width:90vw; max-height:88vh; object-fit:contain;
                        border-radius:var(--radius); cursor:default;
                        box-shadow:0 24px 80px rgba(0,0,0,.6); }
.vd-lightbox-close   { position:absolute; top:16px; right:20px;
                        background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
                        color:#fff; font-size:18px; width:36px; height:36px; border-radius:50%;
                        cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vd-lightbox-close:hover { background:rgba(255,255,255,.22); }

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .vd-workspace { grid-template-columns:1fr; }
  .vd-col-side  { order:-1; }
  .vd-hero__kpis { justify-content:flex-start; border-top:1px solid var(--bg3);
                   margin-top:12px; padding-top:12px; width:100%; }
  .vd-kpi-box { padding:0 16px; }
  /* Su mobile la scrollbar dell'activity può essere più alta */
  .vd-activity-feed { max-height:360px; }
}
@media (max-width:900px) {
  .vd-cats-columns { flex-wrap:wrap; }
  .vd-cat-col { flex:0 0 50%; border-bottom:1px solid var(--bg3); }
  .vd-cat-col:nth-child(2n) { border-right:none; }
}
@media (max-width:700px) {
  .vd-hero { flex-direction:column; gap:16px; }
  .vd-cats-columns { flex-direction:column; }
  .vd-cat-col { border-right:none; border-bottom:1px solid var(--bg3); }
  .vd-cat-col:last-child { border-bottom:none; }
  /* Snapshot 2 colonne su mobile */
  .vd-snapshot-grid { grid-template-columns:repeat(2,1fr); }
  .vd-snap-item:nth-child(4n)   { border-right:1px solid var(--bg3); }
  .vd-snap-item:nth-child(2n)   { border-right:none; }
  .vd-snap-item:nth-last-child(-n+4):nth-child(4n+1),
  .vd-snap-item:nth-last-child(-n+4):nth-child(4n+1) ~ .vd-snap-item { border-bottom:1px solid var(--bg3); }
  .vd-snap-item:nth-last-child(-n+2):nth-child(2n+1),
  .vd-snap-item:nth-last-child(-n+2):nth-child(2n+1) ~ .vd-snap-item { border-bottom:none; }
  .vd-vote-choices--3 { flex-direction:column; }
}


/* =============================================================================
   squads_index.css  —  da mergiare in main.css
   Usa solo variabili già definite nel tema SynaPRO.
   Nessuna ridefinizione delle classi comuni (kpi-*, jtable, jrow, ecc.)
   ============================================================================= */

/* ── Topbar: rimuovi border-bottom come nella pagina journals ── */
/* .page-squads-index .topbar { border-bottom: none; } */
.page-squads-index .topbar { }

.page-squads-index .content { overflow-y: auto; padding: 24px; }

/* Wrapper interno (non serve classe body, basta non avere overflow) */
.page-squads-index-inner { display: flex; flex-direction: column; gap: 0; }

/* ── Toolbar filtri ─────────────────────────────────────────────────────────── */
.sq-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0px;
  flex-wrap: wrap;
  align-content: ;
}

/* I select riusano .form-control ma con larghezza ridotta */
.sq-filter-select {
  width: auto;
  min-width: 150px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text2);
}

.sq-filter-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
}

/* ── Avatar squad (rimpiazza jrow-icon per le squads) ───────────────────────── */
.sq-avatar {
  /* eredita tutto da .jrow-icon — override solo del colore di default */
  color: var(--purple);
  font-size: 11px;
}

.sq-avatar--mine {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple);
}

/* ── Stack di avatar membri ─────────────────────────────────────────────────── */
.sq-avatars {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}

.sq-member-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--purple-bg);
  border: 2px solid var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--purple);
  margin-left: -5px;
  flex-shrink: 0;
}

.sq-member-av:first-child { margin-left: 0; }

.sq-member-av--more {
  background: var(--bg3);
  color: var(--text3);
  font-size: 9px;
}

.sq-page-btn:hover { background: var(--border); color: var(--text); text-decoration: none; }

.sq-page-btn--active {
  background: var(--purple-bg);
  border-color: var(--purple-bd);
  color: var(--purple);
  font-weight: 600;
}

.sq-page-btn--off {
  opacity: .35;
  pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════
   ADMIN — Funzionalità & Permessi
   ═══════════════════════════════════════════════════════════════ */
.sidebar-flag {
  margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--amber);
  border: 1px solid var(--amber); border-radius: 4px; padding: 1px 5px;
}
.acc-card  { padding: 0; margin-bottom: 20px; overflow: hidden; }
.acc-head  { display: flex; align-items: flex-start; justify-content: space-between;
             gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.acc-title { font-size: 14px; font-weight: 600; color: var(--text); }
.acc-sub   { font-size: 12px; color: var(--text-muted); margin-top: 4px; max-width: 640px; line-height: 1.5; }
.acc-muted { font-size: 11px; color: var(--text-muted); }
.acc-list  { padding: 6px 20px 14px; }
.acc-group { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
             color: var(--text-muted); margin: 14px 0 4px; }
.acc-row   { display: flex; align-items: center; gap: 14px; padding: 9px 0; cursor: pointer; }
.acc-row-text  { display: flex; flex-direction: column; gap: 2px; }
.acc-row-label { font-size: 13px; color: var(--text); font-weight: 500; }
.acc-row-desc  { font-size: 11px; color: var(--text-muted); }

/* interruttore */
.switch { position: relative; display: inline-block; vertical-align: middle;
          flex-shrink: 0; width: 36px; height: 20px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch-track { position: absolute; inset: 0; border-radius: 20px; background: var(--border);
                transition: background var(--dur-fast) var(--ease-out); }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
                       border-radius: 50%; background: var(--text);
                       transition: transform var(--dur-fast) var(--ease-out); }
.switch input:checked + .switch-track { background: var(--green-bd); }
.switch input:checked + .switch-track::after { transform: translateX(16px); background: var(--green); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--purple); outline-offset: 2px; }

/* matrice */
.acc-scroll { overflow-x: auto; }
.acc-matrix th { white-space: nowrap; }
.acc-select { min-width: 130px; font-size: 12px; }
.acc-select--allow { border-color: var(--green-bd); color: var(--green); }
.acc-select--deny  { border-color: var(--red-bd);   color: var(--red); }

/* Selettore colonne tabella trade */
.jcols { position: relative; }
.jcols > summary { list-style: none; cursor: pointer; }
.jcols > summary::-webkit-details-marker { display: none; }
.jcols-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 170px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.jcols-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
               color: var(--text-muted); margin-bottom: 6px; }
.jcols-item  { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px;
               color: var(--text); cursor: pointer; }

/* Barra delle 24 ore (sessioni) */
.tl-wrap { padding: 16px 20px 10px; }
.tl-bar  { position: relative; height: 22px; border-radius: 6px; background: var(--bg3);
           border: 1px solid var(--border); overflow: hidden; }
.tl-seg  { position: absolute; height: 14px; opacity: .85; border-radius: 3px; overflow: hidden;
           font-size: 10px; line-height: 14px; padding: 0 4px; color: #0b1220; white-space: nowrap; }
.tl-h0 { background: #38bdf8; } .tl-h1 { background: #a3e635; } .tl-h2 { background: #fb923c; }
.tl-h3 { background: #e879f9; } .tl-h4 { background: #fbbf24; } .tl-h5 { background: #34d399; }
.tl-axis { position: relative; height: 16px; margin-top: 4px; font-size: 10px; color: var(--text-muted); }
.tl-axis span { position: absolute; transform: translateX(-50%); }
.tl-axis span:first-child { transform: none; } .tl-axis span:last-child { transform: translateX(-100%); }

/* Form trade: campi obbligatori, sessione automatica, esito "non eseguito" */
.req { color: var(--red); font-weight: 700; }
.form-errors { margin: 0 0 var(--sp-3, 14px); padding: 10px 14px; border-radius: var(--radius);
               background: var(--red-bg); border: 1px solid var(--red-bd); color: var(--red);
               font-size: 13px; line-height: 1.5; }
.field-error { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(248,113,113,.25); border-radius: var(--radius); }
.session-auto { display: inline-block; min-width: 120px; padding: 8px 12px; border-radius: var(--radius);
                background: var(--bg3); border: 1px dashed var(--border); color: var(--text);
                font-size: 13px; font-weight: 600; }
.session-auto--empty { color: var(--text-muted); font-weight: 400; }
input:disabled.form-control { opacity: .45; cursor: not-allowed; }
.badge-notexec { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); font-style: italic; }
.radio-opt[data-val="NOTEXEC"].active { border-color: var(--text-muted); color: var(--text); }

/* Ora accanto alla data nella tabella trade */
.jd-tr-time { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--text-muted);
              font-variant-numeric: tabular-nums; }

/* campo obbligatorio anche per la bozza */
.req-draft-tag { margin-left: 4px; font-size: 9px; color: var(--red); border: 1px solid var(--red); border-radius: 3px; padding: 0 3px; vertical-align: middle; }

/* Versione app / database: piccola e poco evidente, sotto il badge utente */
.sidebar-version { margin-top: 8px; font-size: 9.5px; color: var(--text3); opacity: .7;
                   text-align: left; letter-spacing: .02em; }
.sidebar-version-warn { color: var(--red); opacity: 1; margin-left: 4px; cursor: help; }


/* Statistiche: tabelle di confronto (sessioni, giorni, campi) */
.sid-beh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-5); }
.sid-beh-head { font-size: var(--text-xs); color: var(--text3); text-transform: uppercase;
                letter-spacing: .07em; font-weight: var(--fw-semi); margin-bottom: var(--sp-2); }
.sid-beh-note { font-size: var(--text-xs); color: var(--text3); margin-top: var(--sp-2); line-height: 1.5; }
.sid-grp { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.sid-grp th { text-align: right; color: var(--text3); font-weight: var(--fw-semi); padding: 3px 4px;
              border-bottom: 1px solid var(--border); }
.sid-grp th:first-child, .sid-grp td:first-child { text-align: left; }
.sid-grp td { text-align: right; padding: 4px; border-bottom: 1px solid rgba(26,37,64,.5); color: var(--text2); }
.sid-grp td.green { color: var(--green); } .sid-grp td.red { color: var(--red); }
.sid-grp-empty { font-size: var(--text-xs); color: var(--text3); padding: var(--sp-2) 0; }
.sid-tag { font-size: 9px; padding: 1px 5px; border-radius: 6px; border: 1px solid var(--border);
           color: var(--text3); margin-left: 4px; }
.sid-tag.green { color: var(--green); border-color: var(--green); }
.sid-tag.red { color: var(--red); border-color: var(--red); }
.sid-tag.amber { color: var(--amber); border-color: var(--amber); }
.sid-field { border-top: 1px solid var(--border); padding: var(--sp-2) 0; }
.sid-field summary { cursor: pointer; font-size: var(--text-sm); color: var(--text); padding: 4px 0; }
.sid-field .sid-grp { margin: var(--sp-2) 0 var(--sp-1); }
@media (max-width: 900px) { .sid-beh-grid { grid-template-columns: 1fr; } }

/* Statistiche: KPI principali (4 fisse) e riquadro «Tutte le metriche» */
.sid-kpi-hero { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
@media (max-width: 1100px) { .sid-kpi-hero { grid-template-columns: repeat(2, 1fr); } }
.sid-metrics { padding-top: 4px; }
.sid-m-group { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3);
               margin: 10px 0 2px; font-weight: 600; }
.sid-m-group:first-child { margin-top: 0; }
.sid-m { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 0;
         border-bottom: 1px solid rgba(26,37,64,.5); color: var(--text2); }
.sid-m small { color: var(--text3); font-size: 10px; }
.sid-m b { color: var(--text); font-weight: 600; white-space: nowrap; }
.sid-m b.green { color: var(--green); } .sid-m b.red { color: var(--red); }
.sid-m.sub { padding-left: 12px; font-size: 11px; color: var(--text3); }

/* Strategy Intelligence */
.sid-intel { margin-top: var(--sp-4); }
.sid-intel-sub { font-size: var(--text-xs); color: var(--text3); }
.sid-intel-inc { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12px; color: var(--text2); margin-bottom: var(--sp-2); }
.sid-rel { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0 var(--sp-4); background: rgba(124,58,237,.05); }
.sid-rel-title { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); font-weight: 600; margin-bottom: 4px; }
.sid-rel-text { font-size: 12px; color: var(--text2); line-height: 1.6; }
.sid-rel-text b { color: var(--text); }
.sid-intel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.sid-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); font-size: 12px; color: var(--text2); }
.sid-card.solid { border-color: rgba(74,222,128,.45); }
.sid-card-top { margin-bottom: 4px; color: var(--text); }
.sid-card-row { margin-top: 3px; line-height: 1.5; } .sid-card-row span, .muted { color: var(--text3); }
.sid-card-row b.green { color: var(--green); } .sid-card-row b.red { color: var(--red); }
.sid-intel-none { font-size: 13px; color: var(--text2); line-height: 1.6; }
@media (max-width: 900px) { .sid-intel-cols { grid-template-columns: 1fr; } }

/* ── Help in linea: la «i» accanto al nome di un campo ──────────────────────── */
.help-tip { display: inline-block; margin-left: 6px; vertical-align: middle; line-height: 1; }
.help-tip-btn {
  width: 16px; height: 16px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text3);
  font: italic 700 10px/14px Georgia, serif; text-align: center;
}
.help-tip-btn:hover, .help-tip-btn[aria-expanded="true"], .help-tip-btn:focus-visible {
  color: var(--purple); border-color: var(--purple); outline: none;
}
.help-tip-pop {
  position: fixed; z-index: 1000; width: 300px; max-width: calc(100vw - 16px);
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.45);
  font: 400 12.5px/1.5 inherit; text-transform: none; letter-spacing: 0; white-space: normal;
}
.help-tip-pop[hidden] { display: none; }
.help-tip-sec { display: block; }
.help-tip-sec + .help-tip-sec { margin-top: 8px; }
.help-tip-sec b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }

/* ── Avatar: foto o iniziali ────────────────────────────────────────────────── */
.avatar { overflow: hidden; }
.avatar img, .sq-member-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-member-av { overflow: hidden; }
.prf-avatar-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.prf-avatar-ctl { flex: 1; min-width: 240px; max-width: 420px; }
.prf-avatar-remove { margin-top: 10px; }
.prf-crop-canvas { width: 200px; height: 200px; max-width: 100%; border-radius: 50%; border: 1.5px solid var(--purple-bd);
                   cursor: grab; touch-action: none; display: block; margin: 8px 0; background: #fff; }
.prf-crop-canvas:active { cursor: grabbing; }
.prf-crop-ctl { display: flex; align-items: center; gap: 10px; max-width: 200px; }
.prf-crop-ctl input[type=range] { flex: 1; }
.sp-flex-row { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ── Screenshot: pulsante «Sfoglia», anteprima, inversione colori ── */
input[type=file]::file-selector-button {
  font: inherit; font-size: 11px; padding: 3px 10px; margin-right: 8px;
  color: var(--text); background: var(--bg3); border: 0.5px solid var(--border);
  border-radius: var(--radius); cursor: pointer; transition: border-color .15s;
}
input[type=file]::file-selector-button:hover { border-color: var(--purple-bd); }

.drop-zone:focus-visible, .drop-zone:focus-within { border-color: var(--purple-bd); outline: none; }
.scr-preview            { margin-bottom: 8px; }
.scr-preview img        { max-width: 100%; max-height: 220px; display: block; margin: 0 auto 6px;
                          border-radius: var(--radius); }

/* Gli screenshot di TradingView/FXReplay sono chiari: in visualizzazione si invertono (i file restano intatti) */
.scr-invert             { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.scr-wrap               { position: relative; }
.scr-img                { max-width: 100%; border-radius: var(--radius); display: block; }
.scr-flip-btn           { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0;
                          display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.6);
                          border: none; border-radius: var(--radius); cursor: pointer;
                          opacity: 0; transition: opacity .15s; backdrop-filter: blur(4px); }
.scr-wrap:hover .scr-flip-btn, .scr-flip-btn:focus-visible { opacity: 1; }

/* ── Galleria avatar nel Profilo ── */
.prf-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; max-width: 520px; }
.prf-preset  { padding: 0; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; cursor: pointer;
               background: none; border: 2px solid transparent; transition: transform .12s, border-color .12s; }
.prf-preset img { display: block; width: 100%; height: 100%; }
.prf-preset:hover, .prf-preset:focus-visible { transform: scale(1.06); border-color: var(--purple-bd); outline: none; }
.prf-preset.is-current { border-color: var(--purple); box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--purple); }

/* ── Icone degli asset (catalogo) ── */
.asset-ico                { position: relative; display: inline-block; flex: none; vertical-align: middle; --asset-ring: var(--bg2); }
.asset-ico img            { display: block; border-radius: 50%; }
.asset-ico--pair .a       { position: absolute; left: 0; top: 0; }
.asset-ico--pair .b       { position: absolute; right: 0; bottom: 0; border: solid var(--asset-ring); box-sizing: content-box; }
.asset-ico--one img       { position: absolute; left: 0; top: 5%; }
.asset-ico .badge         { position: absolute; right: -3px; bottom: -1px; padding: 0 4px; line-height: 1.35; font-weight: 700;
                            color: var(--text); background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; }
.asset-ico--txt           { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
                            background: linear-gradient(135deg, var(--purple-bg), #1a1040); border: 1px solid var(--purple-bd);
                            color: var(--purple); font-weight: 700; letter-spacing: -.3px; }

/* ── Admin: catalogo asset ── */
.agrid        { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.agrid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gpick-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.gpick        { position: relative; display: flex; align-items: center; justify-content: center; height: 46px; cursor: pointer;
                border: 2px solid transparent; border-radius: 50%; }
.gpick img    { width: 36px; height: 36px; border-radius: 50%; display: block; }
.gpick input  { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.gpick:hover  { border-color: var(--purple-bd); }
.gpick:has(input:checked)       { border-color: var(--purple); box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--purple); }
.gpick:has(input:focus-visible) { border-color: var(--purple-bd); }
.gpick--none  { border-radius: 8px; font-size: 11px; color: var(--text3); grid-column: span 2; }
.aprev-box    { display: flex; align-items: center; gap: 18px; min-height: 70px; --asset-ring: var(--bg2); }
@media (max-width: 900px) { .agrid { grid-template-columns: 1fr; } .agrid-2 { grid-template-columns: 1fr; } }
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: auto; }

/* Admin: grafiche caricate */
.gup-form  { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ggrid     { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.gitem     { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; text-align: center;
             background: var(--bg3, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 10px; }
.gitem img { width: 64px; height: 64px; border-radius: 50%; display: block; }
.gitem-name { font-weight: 600; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Categorie dei campi: lo stesso badge per scegliere, filtrare e mostrare ── */
.catpick { display: flex; flex-wrap: wrap; gap: 6px; }
.catpick-opt { position: relative; cursor: pointer; }
.catpick-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tmpl-lib-filters { gap: 5px; }
.catchip { font-size: 11px; padding: 4px 11px; border-radius: 6px; cursor: pointer; opacity: .55; user-select: none;
           transition: opacity .12s, box-shadow .12s, background .12s; }
.catchip:hover { opacity: .9; }
.catpick-opt input:focus-visible + .catchip, button.catchip:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.catpick-opt input:checked + .catchip, button.catchip.on { opacity: 1; box-shadow: 0 0 0 1.5px currentColor; }
.catchip--none { background: var(--bg3); border-color: var(--border); color: var(--text2); }
.catpick-opt input:checked + .catchip--none, button.catchip--none.on { background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple); box-shadow: 0 0 0 1.5px var(--purple); }

/* ── Pagina campi: pulsanti sempre della stessa dimensione ── */
.fi-btn { min-width: 98px; justify-content: center; text-align: center; }
.fi-btn--off { opacity: .4; cursor: not-allowed; border-style: dashed; }
.fi-desc-mark { display: inline-block; width: 1em; text-align: center; }
.fi-desc--on .fi-desc-mark { color: var(--green); }
.fi-desc--off { color: var(--text3); }
.fi-action { white-space: nowrap; }

/* ── Modifica journal: campi configurati in colonne ── */
.jhq-table-wrap { overflow-x: auto; }
.jhq-snap-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.jhq-snap-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
                     color: var(--text3); padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.jhq-snap-table td { padding: 8px 10px; border-bottom: 0.5px solid var(--border); vertical-align: middle; }
.jhq-snap-table tr:last-child td { border-bottom: 0; }
.jhq-snap-table .c { text-align: center; width: 84px; }
.jhq-snap-table input[type=checkbox] { margin: 0; accent-color: var(--purple); cursor: pointer; }
.jhq-snap-table .jhq-snap-name { font-weight: 500; color: var(--text); min-width: 140px; }

/* ── Gestione utenti: etichette e pulsanti di larghezza fissa (le colonne restano allineate) ── */
.u-fix { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; box-sizing: border-box; text-align: center; }
.u-btn { min-width: 84px; justify-content: center; }
.catchip { gap: 5px; }
.fi-row .fi-name { white-space: nowrap; }

/* Lista di righe (usata dalla scheda dei take profit nei modelli) */
.jhq-snap-list { display: flex; flex-direction: column; gap: 6px; }
.jhq-snap-row  { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg3);
                 border: 0.5px solid var(--border); border-radius: var(--radius); flex-wrap: wrap; }
.jhq-req-flags { margin-left: auto; display: inline-flex; gap: 12px; font-size: 11px; color: var(--text3); }
.jhq-req-flags label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.jhq-req-flags input { margin: 0; accent-color: var(--purple); }

/* ── Tinta dei modelli: sei pallini ── */
.tcolor { display: flex; gap: 10px; flex-wrap: wrap; }
.tcolor-opt { position: relative; cursor: pointer; }
.tcolor-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tcolor-dot { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--t);
              border: 3px solid var(--bg2); box-shadow: 0 0 0 1px var(--border); opacity: .6; transition: opacity .12s, box-shadow .12s; }
.tcolor-opt:hover .tcolor-dot { opacity: .95; }
.tcolor-opt input:checked + .tcolor-dot { opacity: 1; box-shadow: 0 0 0 2px var(--t); }
.tcolor-opt input:focus-visible + .tcolor-dot { outline: 2px solid var(--purple); outline-offset: 3px; }

/* ── Tipo di campo con icona ── */
.pill-type { gap: 5px; }
.pill-type svg { color: var(--purple); flex-shrink: 0; }

/* ── 2.23.1: allineamenti ── */
.tmpl-index-desc { min-height: 3em; }                       /* lo spazio della descrizione resta occupato anche se vuota */
.tmpl-req--an { display: inline-block; min-width: 72px; }   /* colonna «Analisi» sempre presente: le altre non scivolano */
.fi-row .sp-sem-badge, .jhq-snap-table .sp-sem-badge { display: inline-flex; justify-content: center; min-width: 96px; box-sizing: border-box; }
.fi-row .pill-type, .jhq-snap-table .pill-type { min-width: 104px; box-sizing: border-box; }

/* ── 2.24.0: etichetta condiviso/privato di larghezza fissa nei campi dei modelli ── */
.tmpl-sel-scope, .tmpl-lib-meta-right { min-width: 66px; justify-content: center; box-sizing: border-box; }

/* ════════════════════════════════════════════════════════════════
   JOURNAL CONDIVISI (2.25.0)
   ════════════════════════════════════════════════════════════════ */
a.jtab { text-decoration: none; display: inline-block; }
.sj-search { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
             padding: 6px 12px; font-size: 13px; font-family: inherit; min-width: 220px; }
.sj-search:focus { outline: none; border-color: var(--purple); }
.sj-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 20px 12px; }
.sj-spacer { flex: 1; }
.sj-lab { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); }
.sj-namebox { min-width: 0; }
.sj-new { font-size: 10px; font-weight: 600; color: var(--green); background: var(--green-bg); border-radius: 8px; padding: 1px 7px; vertical-align: 1px; }
.sj-tpl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sj-tpl i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); flex: none; }
.sj-trader { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; }
.sj-trader--lg { font-size: 14px; gap: 10px; }
.sj-faint { color: var(--text3); }
.sj-r { font-weight: 600; display: block; font-size: 12px; }
.sj-wl { font-size: 11px; }
.sj-comp { display: inline-flex; align-items: center; gap: 8px; }
.sj-comp-track { width: 56px; height: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; display: inline-block; }
.sj-comp-fill { display: block; height: 100%; border-radius: 3px; }
.sj-comp-fill.ok { background: var(--green); } .sj-comp-fill.mid { background: var(--amber, #fbbf24); } .sj-comp-fill.low { background: var(--red); }
.sj-comp-n { font-size: 12px; color: var(--text2); min-width: 34px; }
.sj-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; }
.sj-bar { width: 5px; border-radius: 1px; background: var(--border); }
.sj-bar.on { background: var(--purple); }
.sj-table tr.sj-group td { background: transparent; padding: 14px 12px 4px; border: 0; }
.sj-group-n { margin-left: 12px; font-size: 12px; color: var(--text3); }
.jpage-btn.disabled { opacity: .4; cursor: default; }
a.jpage-btn { text-decoration: none; }
.jpage-gap { color: var(--text3); padding: 0 4px; }
.kpi-value-of { font-size: 14px; font-weight: 500; color: var(--text3); }
.kpi-sparkline-wrap svg { display: block; width: 90px; height: 46px; }
.sj-wl { white-space: nowrap; display: block; }
.sj-lockcell { white-space: nowrap; font-size: 12px; }

/* ════════════════════════════════════════════════════════════════
   GUIDA IN LINEA (2.27.0)
   ════════════════════════════════════════════════════════════════ */
.gd-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr) 200px; gap: 36px; max-width: 1240px; margin: 0 auto; padding: 8px 8px 60px; align-items: start; }
.gd-wrap--index { display: block; max-width: 820px; }
.gd-nav, .gd-toc { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.gd-nav-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin: 0 0 8px 10px; }
.gd-nav a, .gd-toc a { color: var(--text2); text-decoration: none; padding: 6px 10px; border-radius: 8px; line-height: 1.35; display: flex; gap: 9px; }
.gd-nav a:hover, .gd-toc a:hover { color: var(--text); background: var(--bg3); }
.gd-nav a.active { color: var(--purple); background: var(--purple-bg); }
.gd-nav-n { color: var(--text3); font-variant-numeric: tabular-nums; min-width: 12px; }
.gd-toc a { padding: 4px 10px; border-left: 2px solid var(--border); border-radius: 0 6px 6px 0; }
.gd-toc a.sub { padding-left: 22px; font-size: 12px; }

.gd-article { min-width: 0; max-width: 760px; }
.gd-h1 { font-size: 28px; font-weight: 700; margin: 0 0 14px; line-height: 1.2; }
.gd-banner { background: var(--purple-bg); border: 1px solid var(--purple-bd); color: var(--text2); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 22px; }
.gd-banner strong { color: var(--purple); }
.gd-updated { font-size: 12px; color: var(--text3); margin-bottom: 20px; }

.gd-body { font-size: 15px; line-height: 1.72; color: var(--text2); }
.gd-body h2 { font-size: 20px; color: var(--text); margin: 40px 0 10px; padding-top: 6px; scroll-margin-top: 80px; }
.gd-body h3 { font-size: 16px; color: var(--text); margin: 28px 0 6px; scroll-margin-top: 80px; }
.gd-body p { margin: 0 0 14px; }
.gd-body strong { color: var(--text); font-weight: 600; }
.gd-body a { color: var(--cyan); }
.gd-body ul, .gd-body ol { margin: 0 0 16px; padding-left: 22px; }
.gd-body li { margin: 5px 0; }
.gd-body li > p { margin: 0; }
.gd-body code { background: var(--bg3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 13px; color: var(--text); }
.gd-body table { border-collapse: collapse; width: 100%; margin: 6px 0 20px; font-size: 14px; }
.gd-body th, .gd-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top; }
.gd-body th { background: var(--bg3); color: var(--text); font-weight: 600; }
.gd-body hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
.gd-body kbd, .gd-ui { background: var(--bg3); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; padding: 0 7px; font-size: 13px; color: var(--text); white-space: nowrap; }

.gd-fig { margin: 18px 0 26px; }
.gd-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.gd-fig figcaption { font-size: 12.5px; color: var(--text3); margin-top: 8px; text-align: center; }

.gd-body .admonition { border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; background: var(--bg2); padding: 12px 16px 4px; margin: 18px 0 22px; }
.gd-body .admonition-title { font-weight: 600; color: var(--text); margin: 0 0 6px; font-size: 14px; }
.gd-body .admonition.tip { border-left-color: var(--green); }
.gd-body .admonition.tip .admonition-title { color: var(--green); }
.gd-body .admonition.warning { border-left-color: var(--amber); }
.gd-body .admonition.warning .admonition-title { color: var(--amber); }
.gd-body .admonition.note { border-left-color: var(--cyan); }
.gd-body .admonition.note .admonition-title { color: var(--cyan); }

.gd-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); }
.gd-pager a { display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; max-width: 48%; }
.gd-pager a:hover { border-color: var(--purple-bd); background: var(--bg2); }
.gd-pager a span { font-size: 11px; color: var(--text3); }
.gd-pager-next { text-align: right; margin-left: auto; }

.gd-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.gd-card { display: flex; gap: 16px; align-items: center; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg2); text-decoration: none; }
.gd-card:hover { border-color: var(--purple-bd); background: var(--bg3); }
.gd-card-n { width: 30px; height: 30px; border-radius: 50%; background: var(--purple-bg); color: var(--purple); display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.gd-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-card-title { color: var(--text); font-weight: 600; }
.gd-card-sum { color: var(--text3); font-size: 13px; }
.gd-tag { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--amber); border: 1px solid var(--amber); border-radius: 8px; padding: 0 6px; margin-left: 6px; vertical-align: 1px; }
.gd-foot { color: var(--text3); font-size: 13px; margin-top: 26px; }
.gd-help { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text3); text-decoration: none; }
.gd-help:hover { color: var(--cyan); }

@media (max-width: 1100px) { .gd-wrap { grid-template-columns: 190px minmax(0, 1fr); } .gd-toc { display: none; } }
@media (max-width: 760px) { .gd-wrap { display: block; } .gd-nav { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 18px; } }

/* Versione stampabile / PDF */
.gd-print { background: #fff; color: #111; }
.gd-print-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 24px; background: var(--bg2); }
.gd-wrap--print { display: block; max-width: 800px; padding: 30px 24px; }
.gd-print .gd-cover { font-size: 36px; margin: 40px 0 4px; color: #111; }
.gd-cover-sub { color: #666; margin-bottom: 40px; }
.gd-print .gd-sec { max-width: none; margin-bottom: 40px; }
.gd-print .gd-h1, .gd-print .gd-body h2, .gd-print .gd-body h3, .gd-print .gd-body strong, .gd-print .gd-body code, .gd-print .gd-body th { color: #111; }
.gd-print .gd-body, .gd-print .gd-fig figcaption { color: #222; }
.gd-print .gd-body code, .gd-print .gd-body th { background: #f1f1f4; border-color: #ccc; }
.gd-print .gd-body th, .gd-print .gd-body td { border-color: #ccc; }
.gd-print .gd-body .admonition { background: #f7f7fa; border-color: #ccc; }
.gd-print .gd-fig img { box-shadow: none; border-color: #ccc; }
@media print {
  .gd-print-bar { display: none; }
  .gd-sec { break-before: page; }
  .gd-sec:first-of-type { break-before: auto; }
  .gd-fig { break-inside: avoid; }
}