:root{
      /* TOON-style palette applied via the same variables used in qvd_succession_mono */
      --bg:#0C1834;        /* overall background – deep navy */
      --panel:#101A3A;     /* panel / table background */
      --text:#FDF2C7;      /* primary text – warm yellow */
      --muted:#D8CFA0;     /* secondary text */
      --border:#B5A86C;    /* soft yellow border */
      --btn:#142043;       /* buttons / UI elements */
      --btnActive:#22305F; /* hover/active buttons */
      --accent:#EADFAF;    /* highlights (titles, accents) */
      --glass:#1B2748;     /* slightly lighter navy glass */
      --header-h:180px;
    }

    html, body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:'IBM Plex Mono', monospace;
      font-weight:400;
      letter-spacing:0.02em;
    }

    /* ---- Header ---- */
    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      padding: 22px 34px;
      background: var(--glass);
      box-shadow: 0 6px 14px rgba(0,0,0,.45);
      z-index: 300;
      height: var(--header-h);
      border-bottom:1px solid var(--border);
    }

    .header-left { max-width: 70%; }

    .header-title {
      margin: 0 0 8px 0;
      font-size: 2rem;
      font-weight: 700;
      color: var(--text);
      text-transform: uppercase;
    }

    .header-desc {
      margin: 0;
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.5;
    }

    .header-buttons{
      position:absolute;
      top:16px;
      right:34px;
      display:flex;
      gap:10px;
    }

    .header-btn{
      background:transparent;
      color:var(--text);
      border:1px solid var(--border);
      padding:8px 14px;
      border-radius:10px;
      font-weight:600;
      cursor:pointer;
      text-decoration:none;
      font-size:0.85rem;
      text-transform:uppercase;
      transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
    }

    .header-btn:hover{
      background:var(--border);
      color:var(--bg);
      box-shadow:0 0 6px rgba(181,168,108,0.8);
    }

    /* ---- Main layout ---- */
    .main-content{
      max-width:1100px;
      margin:calc(var(--header-h) + 60px) auto 60px;
      padding:0 20px 60px;
    }

    /* ---- Toggle ---- */
    .toggle-container{
      display:flex;
      align-items:center;
      gap:10px;
      margin:10px 0 20px;
    }

    .switch{
      position:relative;
      display:inline-block;
      width:56px;
      height:28px;
    }

    .switch input{opacity:0;width:0;height:0;}

    .slider{
      position:absolute;
      cursor:pointer;
      top:0;left:0;right:0;bottom:0;
      background-color:var(--muted);
      transition:.3s;
      border-radius:34px;
    }

    .slider:before{
      position:absolute;
      content:"";
      height:20px;
      width:20px;
      left:4px;
      bottom:4px;
      background-color:var(--bg);
      transition:.3s;
      border-radius:50%;
    }

    input:checked + .slider{background-color:var(--border);}
    input:checked + .slider:before{transform:translateX(28px);}
    .toggle-label{
      color:var(--accent);
      font-weight:600;
      font-size:0.95rem;
    }

    /* ---- Table ---- */
    .table-wrapper{
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:12px;
      overflow:auto;
      box-shadow:0 8px 18px rgba(0,0,0,0.4);
    }

    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      min-width:880px;
      font-size:0.9rem;
    }

    thead th{
      position:sticky;
      top:0;
      background:var(--bg);
      text-align:left;
      padding:12px 14px;
      border-bottom:1px solid var(--border);
      font-weight:600;
      color:var(--accent);
    }

    tbody td{
      padding:12px 14px;
      border-bottom:1px solid var(--border);
      vertical-align:middle;
      color:var(--text);
    }

    tbody tr:nth-child(odd) td{ background:#101A3A; }
    tbody tr:nth-child(even) td{ background:#142043; }

    tbody tr:hover td{
      background:#22305F;
      cursor:pointer;
    }

    .pos{
      width:56px;
      text-align:right;
      font-variant-numeric:tabular-nums;
      color:var(--muted);
    }

    .name{
      font-weight:600;
      font-size:0.9rem;
      line-height:1.2;
      color:var(--accent);
    }

    .titles-stack,
    .relationship-text,
    .muted{
      color:var(--muted);
      font-size:0.9rem;
      line-height:1.2;
    }

    .exclusion-text{
      color:var(--border);
      font-size:0.9rem;
      font-weight:500;
      margin-top:8px;
      font-style:italic;
    }

    /* ---- Details Panel ---- */
    .details-row td{
      padding:0;
      border-top:none;
      background:var(--glass);
    }

    .details-panel{
      max-height:0;
      overflow:hidden;
      opacity:0;
      transform-origin:top;
      transform:scaleY(0.98);
      transition:max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
      padding:0 18px;
    }

    .details-row.open .details-panel{
      max-height:380px;
      opacity:1;
      transform:scaleY(1);
      padding-top:12px;
      padding-bottom:18px;
    }

    .details-inner{
      display:flex;
      gap:18px;
      align-items:flex-start;
    }

    .details-photo-wrap{
      flex:0 0 100px;
      display:flex;
      justify-content:center;
    }

    .details-photo{
      width:100px;
      height:100px;
      border-radius:10px;
      object-fit:cover;
      background:#222;
      border:1px solid var(--border);
    }

    .details-content{
      flex:1;
      min-width:0;
      margin-left: 14px;
      position:relative;
    }

    .details-heading{
      font-weight:700;
      margin-bottom:8px;
      font-size:0.95rem;
      color:var(--accent);
    }

    .details-text{
      font-size:0.9rem;
      color:var(--muted);
      line-height:1.5;
      white-space:normal;
      max-height:240px;
      overflow-y:auto;
      padding-right:6px;
    }

    /* ---- Pager ---- */
    .pager-container{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:20px;
      margin-top:20px;
    }

    .pager-btn{
      background:var(--btn);
      color:var(--text);
      border:1px solid var(--border);
      padding:10px 14px;
      border-radius:10px;
      font-weight:600;
      cursor:pointer;
      min-width:130px;
      text-transform:uppercase;
      transition:background 0.2s ease, color 0.2s ease;
    }

    .pager-btn:hover:not(:disabled){
      background:var(--btnActive);
      color:var(--accent);
    }

    .pager-btn:disabled{
      opacity:0.5;
      cursor:default;
    }