:root{
    --bg:#F5F6F8;
    --surface:#FFFFFF;
    --ink:#181A1F;
    --ink-soft:#6B7280;
    --ink-faint:#9AA0AC;
    --line:#E6E7EB;
    --accent:#3554F6;
    --accent-soft:#EBEEFF;
    --for:#DC3B3B;
    --for-bg:#FDEBEB;
    --against:#1B9E63;
    --against-bg:#E7F8F0;
    --abstain:#C98A2A;
    --abstain-bg:#FBF0DE;
    --absent:#9AA0AC;
    --absent-bg:#F0F1F3;
    --elephant:#E8952E;
    --elephant-bg:#FDF2E3;
    --candidate:#8A3FC9;
    --candidate-bg:#F1E5FB;
    --font:'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;
  }
  [data-theme="dark"]{
    --bg:#121317;
    --surface:#1C1E24;
    --ink:#EEEFF2;
    --ink-soft:#9BA1AC;
    --ink-faint:#6D7280;
    --line:#2C2E36;
    --accent:#6478FF;
    --accent-soft:#232A4D;
    --for:#FF7A7A;
    --for-bg:#3A2023;
    --against:#3FD394;
    --against-bg:#123328;
    --abstain:#F0B93E;
    --abstain-bg:#3A2C11;
    --absent:#9096A2;
    --absent-bg:#24262E;
    --elephant:#FDBB5C;
    --elephant-bg:#3A2A12;
    --candidate:#C39AF2;
    --candidate-bg:#2A2140;
  }
  *{box-sizing:border-box;}
  html{color-scheme:light;}
  html[data-theme="dark"]{color-scheme:dark;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font);
    min-height:100vh;
    transition:background-color .2s ease, color .2s ease;
  }
  .card, .surface, .about-card, .controls, .close-btn, .profile, .fraction-law-card, .vote-item, .stat, .footer-note{
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .wrap{max-width:1240px; margin:0 auto; padding:28px 32px 80px;}

  header{
    background:var(--surface);
    padding:40px 0 34px;
  }
  header .inner{max-width:1240px; margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-size:12px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin:0 0 12px;
  }
  h1{
    font-size:36px;
    font-weight:800;
    margin:0 0 12px;
    line-height:1.15;
    letter-spacing:-0.01em;
  }
  header p.sub{
    font-size:16px;
    font-weight:400;
    color:var(--ink-soft);
    max-width:660px;
    line-height:1.6;
    margin:0;
  }
  .flag-row{display:flex; align-items:center; gap:10px; margin-top:18px;}
  .demo-flag{
    display:inline-block;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.02em;
    background:var(--for-bg);
    color:var(--for);
    padding:7px 14px;
    border-radius:999px;
  }
  .tab-nav{display:flex; gap:6px; flex-wrap:wrap; margin-top:22px;}
  .tab-link{
    font-size:14px;
    font-weight:700;
    color:var(--ink-soft);
    text-decoration:none;
    padding:9px 16px;
    border-radius:999px;
    background:var(--bg);
    white-space:nowrap;
  }
  .tab-link.active{color:#fff; background:var(--accent);}
  .theme-toggle{
    flex:none;
    width:38px; height:38px;
    border-radius:50%;
    border:none;
    background:var(--bg);
    color:var(--ink);
    font-size:16px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background-color .2s ease;
  }
  .theme-toggle:hover{background:var(--line);}

  .about-card{
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:28px 30px;
    margin-bottom:16px;
  }
  .about-card h3{
    font-size:20px;
    font-weight:800;
    margin:0 0 14px;
  }
  .about-card p{
    font-size:14.5px;
    line-height:1.7;
    color:var(--ink);
    margin:0 0 14px;
  }
  .about-card p:last-child{margin-bottom:0;}
  .about-card p a{color:var(--accent); font-weight:600; text-decoration:none;}
  .about-card p a:hover{text-decoration:underline;}
  .about-formula{
    font-family:'Courier New', monospace;
    font-size:13px;
    background:var(--bg);
    padding:14px 16px;
    border-radius:var(--radius-sm);
    line-height:1.8;
  }

  .fraction-law-card{
    display:block;
    text-decoration:none;
    color:inherit;
    background:var(--surface);
    border-radius:var(--radius-md);
    padding:16px 18px;
    margin-bottom:10px;
    cursor:pointer;
  }
  .fraction-law-card .flc-title{font-size:15px; font-weight:700; margin:0 0 4px;}
  .fraction-law-card .flc-meta{font-size:12px; color:var(--ink-faint); margin:0;}
  .fraction-breakdown{margin-top:14px; display:none;}
  .fraction-breakdown.open{display:block;}
  .fraction-row{margin-bottom:10px;}
  .fraction-row .fr-head{display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; margin-bottom:4px;}
  .fraction-bar{display:flex; height:16px; border-radius:8px; overflow:hidden; background:var(--bg);}
  .fraction-bar span{height:100%;}
  .fb-for{background:var(--for);}
  .fb-against{background:var(--against);}
  .fb-abstain{background:var(--abstain);}
  .fb-absent{background:var(--absent);}
  .fraction-legend{
    display:flex; flex-wrap:wrap; gap:14px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--line);
  }
  .legend-item{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:600; color:var(--ink-soft);
  }
  .legend-dot{
    width:10px; height:10px;
    border-radius:50%;
    display:inline-block;
  }

  /* controls */
  .controls{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    margin:0 0 18px;
    background:var(--surface);
    padding:12px;
    border-radius:var(--radius-md);
  }
  input[type=text]{
    flex:1;
    min-width:220px;
    font-family:var(--font);
    font-size:14px;
    padding:12px 16px;
    border:none;
    background:var(--bg);
    color:var(--ink);
    border-radius:var(--radius-sm);
  }
  input[type=text]:focus{outline:2px solid var(--accent);}
  .checkbox-filter{
    display:flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600;
    color:var(--ink-soft);
    padding:11px 14px;
    background:var(--bg);
    border-radius:var(--radius-sm);
    cursor:pointer;
    white-space:nowrap;
    flex:none;
  }
  .checkbox-filter input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer;}
  select{
    font-family:var(--font);
    font-size:14px;
    padding:11px 14px;
    border:none;
    background:var(--bg);
    color:var(--ink);
    border-radius:var(--radius-sm);
  }
  .count-line{
    font-size:13px;
    color:var(--ink-faint);
    margin:0 0 20px 4px;
  }

  /* grid of deputies */
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:14px;
  }
  .card{
    display:block;
    text-decoration:none;
    color:inherit;
    background:var(--surface);
    border-radius:var(--radius-md);
    padding:18px;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(20,20,30,0.08);
  }
  .card-top{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
  .avatar{
    width:52px; height:52px;
    border-radius:50%;
    flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg);
    overflow:hidden;
  }
  .avatar svg{width:100%; height:100%;}
  .avatar img{width:100%; height:100%; object-fit:cover; display:block;}
  .avatar img.zoomable{cursor:zoom-in;}
  .photo-lightbox{
    position:fixed; inset:0;
    background:rgba(10,10,15,0.85);
    display:none;
    align-items:center; justify-content:center;
    z-index:100;
    padding:40px 20px;
    cursor:zoom-out;
  }
  .photo-lightbox.open{display:flex;}
  .photo-lightbox img{
    max-width:min(90vw, 480px);
    max-height:85vh;
    border-radius:var(--radius-md);
    box-shadow:0 20px 60px rgba(0,0,0,0.4);
  }
  .card h3{
    font-size:16px;
    font-weight:700;
    margin:0 0 4px;
    line-height:1.25;
  }
  .frac-row{display:flex; align-items:center; gap:6px;}
  .frac-badge{
    width:22px; height:22px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800;
    color:#fff;
    flex:none;
    line-height:1;
  }
  .frac-label{font-size:12px; color:var(--ink-soft); font-weight:600;}
  .badge-row{display:flex; align-items:center; gap:6px; flex-wrap:nowrap; margin-bottom:12px;}
  .current-badge{
    display:inline-flex; align-items:center; gap:4px;
    font-size:10px; font-weight:700;
    color:var(--accent);
    background:var(--accent-soft);
    padding:3px 8px;
    border-radius:999px;
  }
  .current-badge.candidate-badge{
    color:var(--candidate);
    background:var(--candidate-bg);
  }
  .foreign-agent-badge{
    font-size:10.5px;
    font-weight:700;
    color:var(--for);
    background:var(--for-bg);
    padding:4px 9px;
    border-radius:999px;
    display:inline-block;
    margin-top:6px;
  }
  .mandate-revoked-badge{
    font-size:10.5px;
    font-weight:700;
    color:var(--abstain);
    background:var(--abstain-bg);
    padding:4px 9px;
    border-radius:999px;
    display:inline-block;
    margin-top:6px;
    cursor:help;
  }
  .share-btn{
    font-size:10px; font-weight:700;
    color:var(--ink-soft);
    background:var(--bg);
    border:none;
    padding:4px 10px;
    border-radius:999px;
    cursor:pointer;
    font-family:var(--font);
  }
  .share-btn:hover{background:var(--line);}
  .elephant-chip{
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:800;
    color:var(--elephant);
    background:var(--elephant-bg);
    padding:6px 12px;
    border-radius:999px;
  }
  .mini-stamps{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;}
  .single-vote-block{display:flex; align-items:center; gap:8px;}
  .single-vote-label{font-size:12px; color:var(--ink-faint);}
  .mini-stamp{
    font-size:13px;
    font-weight:700;
    padding:8px 4px;
    border-radius:var(--radius-sm);
    flex:1;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .ms-red{color:var(--for); background:var(--for-bg);}
  .ms-green{color:var(--against); background:var(--against-bg);}
  .ms-amber{color:var(--abstain); background:var(--abstain-bg);}
  .ms-grey{color:var(--absent); background:var(--absent-bg);}

  /* profile overlay */
  .overlay{
    position:fixed; inset:0;
    background:rgba(20,20,30,0.5);
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding:40px 20px;
    overflow-y:auto;
    z-index:50;
  }
  .overlay.open{display:flex;}
  .profile{
    background:var(--surface);
    max-width:720px;
    width:100%;
    border-radius:var(--radius-lg);
    position:relative;
    overflow:hidden;
  }
  .profile-head{
    background:var(--bg);
    padding:28px 30px 24px;
    display:flex;
    gap:18px;
    align-items:center;
    position:relative;
  }
  .close-btn{
    position:absolute; top:16px; right:16px;
    z-index:60;
    background:var(--surface); border:none;
    color:var(--ink);
    font-size:13px;
    font-weight:600;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
  }
  .close-btn:hover{background:var(--line);}
  .profile-head .avatar{width:72px; height:72px; flex:none;}
  .profile-head h2{
    font-size:22px;
    font-weight:800;
    margin:0 0 6px;
  }
  .profile-meta{font-size:13px; color:var(--ink-soft); margin:0; line-height:1.6;}
  .profile-body{padding:26px 30px 32px;}
  .stat-row{
    display:flex;
    gap:10px;
    margin-bottom:22px;
    flex-wrap:wrap;
  }
  .stat{
    flex:1; min-width:120px;
    background:var(--bg);
    border-radius:var(--radius-md);
    padding:16px 14px;
    text-align:center;
  }
  .stat .num{font-size:26px; font-weight:800;}
  .stat .lbl{font-size:11px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
  .stat.red .num{color:var(--for);}
  .stat.green .num{color:var(--against);}
  .stat.amber .num{color:var(--abstain);}
  .stat.grey .num{color:var(--absent);}
  .stat.elephant{background:var(--elephant-bg);}
  .stat.elephant .num{color:var(--elephant);}

  .elephant-hero{
    display:flex; align-items:center; gap:14px;
    background:var(--elephant-bg);
    border-radius:var(--radius-md);
    padding:16px 18px;
    margin-bottom:22px;
  }
  .elephant-hero .score{font-size:30px; font-weight:800; color:var(--elephant); white-space:nowrap;}
  .elephant-hero .row{font-size:20px; letter-spacing:1px; line-height:1;}
  .elephant-hero .label{font-size:13px; font-weight:700; color:var(--elephant);}
  .support-line{
    font-size:12px;
    color:var(--ink-faint);
    margin:0 0 12px;
  }
  .elephant-hero .support-line{margin:4px 0 0;}

  .section-label{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--ink-faint);
    margin:0 0 12px;
  }
  .vote-item{
    background:var(--bg);
    border-radius:var(--radius-md);
    padding:16px 18px;
    margin-bottom:10px;
    display:flex;
    gap:14px;
    align-items:flex-start;
  }
  .stamp{
    font-size:11px;
    font-weight:800;
    letter-spacing:.02em;
    padding:6px 10px;
    border-radius:999px;
    white-space:nowrap;
    flex:none;
  }
  .stamp.red{color:var(--for); background:var(--for-bg);}
  .stamp.green{color:var(--against); background:var(--against-bg);}
  .stamp.amber{color:var(--abstain); background:var(--abstain-bg);}
  .stamp.grey{color:var(--absent); background:var(--absent-bg);}
  .vote-text .law-title{
    font-size:15px;
    font-weight:700;
    margin:0 0 4px;
    line-height:1.4;
  }
  .vote-text .law-official{
    font-size:12.5px;
    font-style:italic;
    color:var(--ink-soft);
    margin:6px 0 0;
    line-height:1.5;
  }
  .law-official-details{margin:4px 0 6px;}
  .law-official-details summary{
    font-size:11.5px;
    font-weight:600;
    color:var(--accent);
    cursor:pointer;
    list-style:none;
    display:inline-block;
  }
  .law-official-details summary::-webkit-details-marker{display:none;}
  .law-official-details summary::before{content:"▸ ";}

  .declaration-details{
    background:var(--accent-soft);
    border-radius:var(--radius-md);
    padding:16px 18px;
    margin-bottom:18px;
  }
  .declaration-details summary{
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    list-style:none;
  }
  .declaration-details summary::-webkit-details-marker{display:none;}
  .declaration-body{margin-top:14px;}
  .declaration-note{
    font-size:12px;
    color:var(--ink-faint);
    margin:0 0 12px;
    line-height:1.5;
  }
  .decl-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:8px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
  }
  .decl-row:last-of-type{border-bottom:none;}
  .decl-label{color:var(--ink-soft); font-weight:600; flex:none; width:150px;}
  .decl-value{color:var(--ink); text-align:right; line-height:1.5;}
  .declaration-source{
    font-size:12px;
    color:var(--ink-faint);
    margin:12px 0 0;
  }
  .declaration-source a{color:var(--accent); text-decoration:none;}
  .declaration-source a:hover{text-decoration:underline;}
  @media (max-width:520px){
    .decl-row{flex-direction:column; gap:2px;}
    .decl-value{text-align:left;}
  }
  .law-official-details[open] summary::before{content:"▾ ";}
  .stage-tag{
    display:inline-block;
    font-size:10.5px;
    font-weight:700;
    color:var(--ink-soft);
    background:var(--bg);
    padding:2px 7px;
    border-radius:999px;
    margin-right:6px;
  }
  .vote-text .law-meta{
    font-size:12px;
    color:var(--ink-faint);
    margin:0;
  }
  .vote-text .law-meta a{color:var(--accent); text-decoration:none;}
  .vote-text .law-meta a:hover{text-decoration:underline;}
  .disclaimer{
    margin-top:22px;
    font-size:12px;
    color:var(--ink-faint);
    line-height:1.6;
  }
  .footer-note{
    margin-top:32px;
    font-size:12px;
    color:var(--ink-faint);
    line-height:1.7;
    background:var(--surface);
    padding:18px 20px;
    border-radius:var(--radius-md);
  }
  .footer-note code{background:var(--bg); padding:2px 6px; border-radius:6px;}
  @media (max-width:640px){
    .wrap, header .inner{padding-left:16px; padding-right:16px;}
    h1{font-size:26px;}
    .profile-head{flex-direction:column; align-items:flex-start;}
    .close-btn{
      position:fixed; top:16px; right:16px;
      box-shadow:0 2px 10px rgba(20,20,30,0.18);
      width:34px; height:34px; padding:0;
      display:flex; align-items:center; justify-content:center;
      font-size:16px;
    }
    .close-btn-label{display:none;}
    .stamp{
      white-space:normal;
      text-align:center;
      max-width:100px;
      font-size:10px;
      padding:6px 6px;
      line-height:1.3;
    }
    .controls select{min-width:0; max-width:100%; text-overflow:ellipsis;}
    .mini-stamp{font-size:12px; padding:8px 2px;}
    .profile-badge-row .elephant-chip{display:none;}
  }

  .convocation-details{
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:20px 28px;
    margin-bottom:16px;
  }
  .convocation-details summary{
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    list-style:none;
  }
  .convocation-details summary::-webkit-details-marker{display:none;}
  .convocation-details summary::before{content:"▸ "; color:var(--accent);}
  .convocation-details[open] summary::before{content:"▾ ";}
  .convocation-details-body{margin-top:16px;}
  .convocation-details-body .about-card{padding:0; background:transparent; margin-bottom:0;}