/* EPiC Cards - Shared Styles */
    /* Design System v1.0 - Minimal, Professional, Clean */

    :root{
      /* Base palette */
      --bg: #fafafa;
      --fg: #0a0a0a;
      --muted: #71717a;
      --muted-light: #a1a1aa;
      --border: #e4e4e7;
      --border-light: #f4f4f5;

      /* Accenti */
      --accent-primary: #334155;
      --accent-secondary: #64748b;

      /* Type colors - Interventi */
      --type-cog: #3b82f6;      /* blu - Cognitivi */
      --type-comp: #10b981;     /* verde - Comportamentali */
      --type-emo: #fb923c;      /* arancio - Emotivi */

      /* Type colors - Emozioni */
      --type-e: #facc15;        /* giallo - Emozioni */

      /* Type colors - Pattern */
      --type-p: #38bdf8;        /* azzurro - Pattern */

      /* Card dimensions */
      --card-w: 63mm;
      --card-h: 88mm;
      --radius: 8px;
      --pad: 16px;

      /* Typography */
      --fs-xxs: 10px;
      --fs-xs: 11px;
      --fs-sm: 13px;
      --fs-md: 15px;
      --fs-lg: 17px;
      --fs-xl: 19px;
    }

    /* Card container */
    .card{
      width: var(--card-w);
      height: var(--card-h);
      perspective: 1000px;
      cursor: pointer;
      flex-shrink: 0;
    }

    .card-inner{
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
    }

    .card.flipped .card-inner{
      transform: rotateY(180deg);
    }

    /* Card faces */
    .face{
      position: absolute;
      inset: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--pad);
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    }

    .face.front{
      border-left-width: 3px;
    }

    .face.back{
      transform: rotateY(180deg);
      padding: 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
    }

    /* Type-specific border colors & backgrounds */
    /* Interventi */
    .Cog .face{
      background: rgba(59, 130, 246, 0.06);
    }
    .Cog .face.front{
      border-left-color: var(--type-cog);
    }

    .Comp .face{
      background: rgba(16, 185, 129, 0.04);
    }
    .Comp .face.front{
      border-left-color: var(--type-comp);
    }

    .Emo .face{
      background: rgba(251, 146, 60, 0.04);
    }
    .Emo .face.front{
      border-left-color: var(--type-emo);
    }

    /* Emozioni */
    .E .face{
      background: rgba(250, 204, 21, 0.04);
    }
    .E .face.front{
      border-left-color: var(--type-e);
    }

    /* Pattern */
    .P .face{
      background: rgba(56, 189, 248, 0.04);
    }
    .P .face.front{
      border-left-color: var(--type-p);
    }

    /* Card header */
    .card-head{
      display: flex;
      gap: 8px;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .card-id{
      font-size: var(--fs-xxs);
      color: var(--muted-light);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 500;
    }

    /* Type pills */
    .type-pill{
      font-size: var(--fs-xxs);
      padding: 3px 8px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-weight: 600;
    }

    /* Interventi pills */
    .Cog .type-pill{ background: rgba(59,130,246,0.1); color: var(--type-cog); }
    .Comp .type-pill{ background: rgba(16,185,129,0.1); color: var(--type-comp); }
    .Emo .type-pill{ background: rgba(251,146,60,0.1); color: var(--type-emo); }

    /* Emozioni pill */
    .E .type-pill{ background: rgba(250,204,21,0.1); color: var(--type-e); }

    /* Pattern pill */
    .P .type-pill{ background: rgba(56,189,248,0.1); color: var(--type-p); }

    /* Title */
    .title{
      font-size: var(--fs-lg);
      line-height: 1.3;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin: 0 0 14px;
      color: var(--fg);
    }

    /* Front content - Interventi (I) */
    .principle-line{
      font-size: var(--fs-sm);
      font-weight: 500;
      margin: 12px 0 8px;
      color: var(--fg);
      line-height: 1.5;
    }

    .howto-line{
      font-size: var(--fs-sm);
      margin-top: 10px;
      color: var(--muted);
      line-height: 1.5;
    }

    .howto-line strong{
      color: var(--accent-primary);
      font-weight: 600;
    }

    /* Front content - Generic sections */
    .section{
      margin-top: 10px;
    }

    .section-title{
      font-size: var(--fs-xs);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .section-title::before{
      content: '';
      display: inline-block;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.4;
    }

    .section-content{
      font-size: var(--fs-sm);
      line-height: 1.4;
      color: var(--fg);
    }

    .section-content ul{
      margin: 0;
      padding-left: 16px;
    }

    .section-content li{
      margin-bottom: 2px;
    }

    /* Aliases line */
    .aliases-line{
      font-size: var(--fs-xs);
      color: var(--muted);
      margin-top: 6px;
      font-style: italic;
      line-height: 1.4;
    }

    /* Footer */
    .footer{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid var(--border-light);
    }

    .hint{
      font-size: var(--fs-xxs);
      color: var(--muted-light);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 500;
    }

    /* Back face layout */
    .back-header{
      padding: 10px var(--pad) 8px;
      border-bottom: 1px solid var(--border-light);
    }

    .back-header .card-head{
      margin-bottom: 0;
    }

    .aka-line{
      font-size: var(--fs-xs);
      color: var(--muted);
      margin-top: 8px;
      font-style: italic;
      line-height: 1.4;
    }

    .back-content{
      padding: 10px var(--pad);
    }

    .back-footer{
      padding: 8px var(--pad);
      border-top: 1px solid var(--border-light);
      text-align: center;
    }

    .back-footer .hint{
      display: block;
    }

    /* Back content blocks */
    .block{
      margin-bottom: 10px;
    }

    .block:last-child{
      margin-bottom: 0;
    }

    .label{
      font-size: var(--fs-xxs);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 3px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .label::before{
      content: '';
      display: inline-block;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.4;
    }

    .small{
      font-size: var(--fs-xs);
      line-height: 1.35;
      color: var(--fg);
    }

    /* Hover effects */
    .card:hover .face{
      box-shadow: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
    }

    /* Links within cards */
    .card-link{
      color: var(--accent-primary);
      text-decoration: none;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .card-link:hover{
      text-decoration: underline;
      color: var(--accent-secondary);
    }

    /* Pattern/Intervention specific - High priority badge */
    .priority-high{
      display: inline-block;
      font-size: var(--fs-xxs);
      padding: 2px 6px;
      border-radius: 3px;
      background: rgba(51, 65, 85, 0.1);
      color: var(--accent-primary);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-left: 6px;
    }

    /* Page-specific styles */
    html, body{
      background: var(--bg, #fafafa);
      color: var(--fg, #0a0a0a);
      margin: 0;
      font: 400 15px/1.6 "Inter", "Source Sans 3", "IBM Plex Sans", system-ui, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    /* Toolbar */
    .toolbar{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid #e4e4e7;
      padding: 14px 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    .toolbar h1{
      font-size: 17px;
      margin: 0;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .toolbar .sub{
      color: #71717a;
      font-weight: 400;
      margin-left: 6px;
    }

    .toolbar .controls{
      margin-left: auto;
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .toolbar label{
      font-size: 13px;
      color: #71717a;
      font-weight: 500;
    }

    .toolbar input[type="file"],
    .toolbar select,
    .toolbar input[type="search"]{
      font: inherit;
      border: 1px solid #e4e4e7;
      border-radius: 6px;
      padding: 6px 12px;
      background: #fff;
      font-size: 13px;
      transition: all 0.15s ease;
    }

    .toolbar input[type="search"]:focus,
    .toolbar select:focus{
      outline: none;
      border-color: #64748b;
      box-shadow: 0 0 0 3px rgba(100,116,139,0.1);
    }

    /* Stats */
    .stats{
      font-size: 13px;
      color: #71717a;
      padding: 8px 20px;
      background: #fff;
      border-bottom: 1px solid #f4f4f5;
    }

    .stats span{
      font-weight: 600;
      color: #0a0a0a;
    }

    /* Grid */
    .grid{
      padding: 24px 20px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(63mm, 1fr));
      gap: 16px;
      max-width: 1400px;
      margin: 0 auto;
    }

    /* Placeholder */
    .placeholder{
      grid-column: 1 / -1;
      text-align: center;
      padding: 80px 20px;
      color: #a1a1aa;
      font-size: 15px;
    }

    .placeholder strong{
      display: block;
      font-size: 17px;
      color: #71717a;
      margin-bottom: 8px;
      font-weight: 600;
    }

    /* Type indicators in grid */
    .grid .card::after{
      content: attr(data-type);
      position: absolute;
      top: -8px;
      right: -8px;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 3px;
      background: rgba(0,0,0,0.05);
      color: #71717a;
      font-weight: 600;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
      z-index: 10;
    }

    .grid .card:hover::after{
      opacity: 1;
    }

    /* Highlighted card - lampeggio evidente */
    .card.highlighted{
      animation: flash 1.2s ease-out;
    }

    @keyframes flash {
      0%, 100% {
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        transform: scale(1);
      }
      25% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.4), 0 8px 20px rgba(245, 158, 11, 0.3);
        transform: scale(1.02);
      }
      50% {
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2), 0 4px 12px rgba(245, 158, 11, 0.2);
        transform: scale(1);
      }
      75% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.4), 0 8px 20px rgba(245, 158, 11, 0.3);
        transform: scale(1.02);
      }
    }

    /* Mobile responsive */
    @media (max-width: 768px) {
      .toolbar{
        padding: 8px 12px;
      }

      .toolbar h1{
        font-size: 15px;
        width: 100%;
      }

      .toolbar .sub{
        display: none; /* Nascondi "Viewer completo" */
      }

      /* Nascondi stats bar "Totale: 45 carte..." */
      .stats{
        display: none;
      }

      .toolbar .controls{
        margin-left: 0;
        width: 100%;
        gap: 8px;
      }

      /* Nascondi label "Carica EPIC_full.json:" */
      .toolbar label{
        font-size: 0;
        width: auto;
        flex: 0 0 auto;
      }

      /* File input mini e discreto */
      .toolbar input[type="file"]{
        font-size: 11px;
        padding: 4px 8px;
        width: auto;
        opacity: 0.6;
      }

      /* Nascondi dropdown "Mostra" su mobile */
      .toolbar label:has(select),
      .toolbar select{
        display: none;
      }

      /* Search compatto */
      .toolbar input[type="search"]{
        width: 100%;
        font-size: 13px;
        padding: 6px 10px;
      }

      /* Reset button compatto */
      #resetBtn{
        font-size: 12px;
        padding: 5px 10px;
      }

      .grid{
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 20px;
      }

      .card{
        max-width: 90vw;
        margin: 0 auto;
      }
    }