*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{background:#111;color:#e8e8e8;font-family:Assistant,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
.site-header{background:#1a1a1a;border-bottom:1px solid #2a2a2a;position:sticky;top:0;z-index:500}
.header-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:70px;gap:1rem}
.header-left{display:flex;align-items:center;gap:.8rem}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:1.2rem}
.site-logo{display:flex;justify-content:center}
.site-logo img{height:44px;width:auto;object-fit:contain;cursor:pointer}
.social-strip{display:flex;align-items:center;gap:1rem}
.social-strip a{color:#777;display:flex;align-items:center;transition:color .2s}
.social-strip a:hover{color:#fff}
.main-nav{background:#0d0d0d;border-bottom:1px solid #222}
.main-nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:center}
.main-nav-item{position:relative;display:flex;align-items:center}
.nav-btn{background:none;border:none;color:#bbb;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;padding:.8rem 1rem;transition:color .2s;border-bottom:2px solid transparent}
.nav-btn:hover,.nav-btn.active{color:#fff;border-bottom-color:#cc2222}
.dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;background:#1a1a1a;border:1px solid #2a2a2a;min-width:150px;z-index:100}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:.65rem 1.1rem;font-size:.75rem;letter-spacing:1px;text-transform:uppercase;color:#aaa;transition:color .2s,background .2s}
.dropdown-menu a:hover{color:#fff;background:rgba(255,255,255,.05)}
.site-page-tabs{background:#141414;border-bottom:1px solid rgba(232,50,60,0.25)}
.page{display:none}
.page.active{display:block}
.page-hero{width:100%;max-height:480px;overflow:hidden}
.page-hero img{width:100%;object-fit:cover;display:block}
.content-section{max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem}
.section-heading{font-size:1.25rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:1.5rem;display:block}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}
.product-card{background:#1a1a1a;border:1px solid #2a2a2a;transition:transform .2s,border-color .2s;display:block}
.product-card:hover{transform:translateY(-2px);border-color:#444}
.product-img{aspect-ratio:1;overflow:hidden;background:#222}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.product-card:hover .product-img img{transform:scale(1.03)}
.product-info{padding:.8rem 1rem}
.product-name{font-size:.82rem;font-weight:600;margin-bottom:.25rem}
.product-price{font-size:.78rem;color:#888}
.btn-primary{display:inline-block;margin-top:1.5rem;padding:.65rem 1.8rem;background:#cc2222;color:#fff;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;border:none;transition:background .2s}
.btn-primary:hover{background:#e52222}
.locals-body{max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem}
.locals-body h2{font-size:1.25rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:1rem}
.locals-body p{color:#aaa;font-size:.9rem;margin-bottom:1.2rem;line-height:1.8}
.news-empty{text-align:center;padding:4rem 2rem;color:#555;font-size:.82rem;letter-spacing:2px;text-transform:uppercase;border:1px solid #2a2a2a}
#tracker-wrapper{background:var(--bg,#0a0a0c);min-height:80vh}
.site-footer{background:#0d0d0d;border-top:1px solid #222;padding:3rem 1.5rem 1.5rem;margin-top:2rem}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:2rem 4rem}
.footer-title{font-size:.82rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:.7rem}
.footer-desc{font-size:.78rem;color:#666;margin-bottom:.9rem}
.newsletter-row{display:flex}
.newsletter-row input{flex:1;padding:.5rem .8rem;background:#1a1a1a;border:1px solid #333;border-right:none;color:#eee;font-size:.78rem;outline:none}
.newsletter-row input:focus{border-color:#cc2222}
.newsletter-row button{padding:.5rem .9rem;background:#cc2222;border:none;color:#fff;font-size:.7rem;letter-spacing:1px;text-transform:uppercase;font-weight:700;transition:background .2s}
.newsletter-row button:hover{background:#e52222}
.footer-links{display:flex;flex-direction:column;gap:.5rem}
.footer-links a{font-size:.78rem;color:#666;transition:color .2s}
.footer-links a:hover{color:#eee}
.footer-bottom{max-width:1200px;margin:1.5rem auto 0;padding-top:1.2rem;border-top:1px solid #222;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-social-links{display:flex;gap:1.2rem}
.footer-social-links a{font-size:.7rem;letter-spacing:1px;text-transform:uppercase;color:#555;transition:color .2s}
.footer-social-links a:hover{color:#cc2222}
.footer-copy{font-size:.7rem;color:#444}
@media(max-width:768px){
  .header-inner{grid-template-columns:auto 1fr}
  .header-right{display:none}
  .footer-grid{grid-template-columns:1fr}
  .main-nav-inner{justify-content:flex-start;overflow-x:auto}
  .product-grid{grid-template-columns:repeat(2,1fr)}
}
/* TRACKER STYLES */

  :root {
    --bg: #0a0a0c;
    --surface: #111116;
    --card: #16161e;
    --border: #2a2a38;
    --accent: #e8323c;
    --accent2: #f5a623;
    --text: #e8e8f0;
    --muted: #6b6b85;
    --green: #2ecc71;
    --mono: 'DM Mono', monospace;
    --sans: 'DM Sans', sans-serif;
    --display: 'Bebas Neue', sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  #tracker-wrapper {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* NOISE TEXTURE OVERLAY */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
  }

  /* HEADER */
  header {
    position: relative;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #0f0f16 0%, var(--bg) 100%);
    padding: 0 2rem;
    z-index: 10;
  }

  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 0 0.8rem;
    border-bottom: 1px solid rgba(232,50,60,0.2);
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .logo-icon {
    width: 44px;
    height: 44px;
    background: var(--accent);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    animation: pulse-hex 3s ease-in-out infinite;
  }

  @keyframes pulse-hex {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232,50,60,0); }
    50% { box-shadow: 0 0 20px 4px rgba(232,50,60,0.3); }
  }

  .logo-text h1 {
    font-family: var(--display);
    font-size: 1.8rem;
    letter-spacing: 3px;
    color: var(--text);
    line-height: 1;
  }

  .logo-text span {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted);
    letter-spacing: 4px;
    text-transform: uppercase;
  }

  .header-stats {
    display: flex;
    gap: 2rem;
  }

  .stat-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .stat-pill-clickable { cursor: pointer; transition: opacity 0.15s; }
  .stat-pill-clickable:hover { opacity: 0.75; }

  .stat-pill .num {
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--accent);
    line-height: 1;
  }

  .stat-pill .label {
    font-family: var(--mono);
    font-size: 0.55rem;
    color: var(--muted);
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .header-nav {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.6rem 0;
    overflow-x: auto;
  }

  .nav-tab {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
  }

  .nav-tab:hover { color: var(--text); }
  .nav-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* ALERT BANNER */
  .alert-banner {
    background: linear-gradient(90deg, rgba(232,50,60,0.1) 0%, transparent 60%);
    border-left: 3px solid var(--accent);
    padding: 0.6rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: var(--muted);
    overflow: hidden;
    position: relative;
  }

  .alert-badge {
    background: var(--accent);
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    letter-spacing: 2px;
    flex-shrink: 0;
  }

  /* MAIN LAYOUT */
  .main-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - 120px);
    position: relative;
    z-index: 1;
  }

  /* SIDEBAR */
  .sidebar {
    border-right: 1px solid var(--border);
    padding: 1.5rem 0;
    background: var(--surface);
    position: sticky;
    top: 0;
    height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .sidebar::-webkit-scrollbar { width: 3px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--border); }

  .sidebar-section-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: var(--muted);
    text-transform: uppercase;
    padding: 0 1.5rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .sidebar-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  /* STATE ACCORDION */
  .state-group { border-bottom: 1px solid rgba(255,255,255,0.03); }

  .state-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.2rem 0.65rem 1.5rem;
    cursor: pointer;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    user-select: none;
  }

  .state-entry:hover {
    background: rgba(232,50,60,0.05);
    border-left-color: rgba(232,50,60,0.3);
  }

  .state-entry.active {
    background: rgba(232,50,60,0.1);
    border-left-color: var(--accent);
  }

  .state-group.open > .state-entry {
    border-left-color: rgba(232,50,60,0.4);
    background: rgba(232,50,60,0.04);
  }

  .state-entry-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
  }

  .state-name {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .state-abbr {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted);
    background: var(--border);
    padding: 0.15rem 0.4rem;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .state-entry-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
  }

  .state-count {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--accent);
    background: rgba(232,50,60,0.15);
    padding: 0.15rem 0.45rem;
    border-radius: 2px;
    min-width: 22px;
    text-align: center;
  }

  .state-count.zero {
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border);
  }

  .chevron {
    font-size: 0.5rem;
    color: var(--muted);
    transition: transform 0.2s;
    line-height: 1;
    margin-left: 2px;
  }

  .state-group.open .chevron { transform: rotate(90deg); }

  /* COUNTY SUB-LIST */
  .county-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: rgba(0,0,0,0.15);
  }

  .state-group.open .county-list { max-height: 600px; }

  .county-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 1.2rem 0.4rem 2.8rem;
    cursor: pointer;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,0.02);
  }

  .county-entry:last-child { border-bottom: none; }

  .county-entry:hover {
    background: rgba(232,50,60,0.05);
    border-left-color: rgba(232,50,60,0.2);
  }

  .county-entry.active {
    background: rgba(232,50,60,0.08);
    border-left-color: var(--accent);
  }

  .county-name {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--muted);
    letter-spacing: 0.5px;
    transition: color 0.15s;
  }

  .county-entry:hover .county-name,
  .county-entry.active .county-name { color: var(--text); }

  .county-count {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--accent);
    background: rgba(232,50,60,0.12);
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    min-width: 18px;
    text-align: center;
  }

  .state-entry-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.2rem 0.65rem 1.5rem;
    cursor: pointer;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 0.2rem;
    user-select: none;
  }

  .state-entry-all:hover {
    background: rgba(232,50,60,0.05);
    border-left-color: rgba(232,50,60,0.3);
  }

  .state-entry-all.active {
    background: rgba(232,50,60,0.1);
    border-left-color: var(--accent);
  }

  .card-info-rows {
    display: flex;
    flex-direction: column;
  }

  /* CONTENT AREA */
  .content {
    padding: 2rem;
    overflow-y: auto;
  }

  /* PAGE HEADER */
  .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .page-title-group h2 {
    font-family: var(--display);
    font-size: 2.5rem;
    letter-spacing: 4px;
    color: var(--text);
    line-height: 1;
  }

  .page-title-group .subtitle {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--muted);
    letter-spacing: 3px;
    margin-top: 0.4rem;
    text-transform: uppercase;
  }

  .search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: 2px;
    width: 260px;
    transition: border-color 0.2s;
  }

  .search-bar:focus-within {
    border-color: var(--accent);
  }

  .search-bar input {
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.75rem;
    width: 100%;
    letter-spacing: 1px;
  }

  .search-bar input::placeholder { color: var(--muted); }

  .search-icon { color: var(--muted); font-size: 0.9rem; }

  .search-clear {
    color: var(--muted);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    flex-shrink: 0;
    transition: color 0.15s;
  }
  .search-clear:hover { color: var(--accent); }

  .results-count {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--accent);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0.4rem;
    min-height: 0.9rem;
  }

  /* OFFENDER CARDS GRID */
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    align-items: start;
  }

  .offender-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    animation: card-in 0.4s ease both;
    display: flex;
    flex-direction: column;
  }

  .offender-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(232,50,60,0.15);
  }

  @keyframes card-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .card-header {
    border-bottom: 1px solid var(--border);
  }

  .card-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, #1c1c26 0%, #101014 100%);
    overflow: hidden;
  }

  .mugshot-container {
    width: 100%;
    height: 100%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .mugshot-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mugshot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 0.5rem;
  }

  .mugshot-placeholder svg {
    opacity: 0.25;
    width: 46px;
    height: 46px;
  }

  .mugshot-placeholder span {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted);
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .card-id-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 65%, transparent 100%);
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--accent);
    text-align: center;
    padding: 14px 4px 7px;
    letter-spacing: 1px;
  }

  .status-ribbon {
    position: absolute;
    top: 0.8rem;
    left: 0;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    padding: 0.32rem 0.8rem 0.32rem 0.65rem;
    border-radius: 0 3px 3px 0;
    z-index: 2;
  }

  .status-ribbon.status-incarcerated { background: var(--accent); box-shadow: 0 2px 14px rgba(232,50,60,0.55); }
  .status-ribbon.status-probation { background: var(--accent2); color: #241a04; box-shadow: 0 2px 14px rgba(245,166,35,0.45); }
  .status-ribbon.status-pending { background: #3d8bfd; box-shadow: 0 2px 14px rgba(61,139,253,0.45); }

  .card-identity {
    padding: 1.1rem 1.1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .card-name {
    font-family: var(--display);
    font-size: 1.55rem;
    letter-spacing: 2px;
    color: var(--text);
    line-height: 1.05;
  }

  .card-dob {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--muted);
    letter-spacing: 1px;
  }

  .card-location-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.015);
  }

  .card-location-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text);
    letter-spacing: 0.5px;
  }

  .card-location-item .ico { font-size: 0.75rem; flex-shrink: 0; }
  .card-location-item.muted { color: var(--muted); }

  .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
  }

  .tag {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 1px;
    padding: 0.15rem 0.4rem;
    border-radius: 1px;
    text-transform: uppercase;
  }

  .tag-danger {
    background: rgba(232,50,60,0.2);
    color: var(--accent);
    border: 1px solid rgba(232,50,60,0.3);
  }

  .tag-warning {
    background: rgba(245,166,35,0.15);
    color: var(--accent2);
    border: 1px solid rgba(245,166,35,0.3);
  }

  .tag-info {
    background: rgba(46,204,113,0.1);
    color: var(--green);
    border: 1px solid rgba(46,204,113,0.25);
  }

  .tag-more {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
  }

  .card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
  }

  .info-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .info-label {
    font-family: var(--mono);
    font-size: 0.55rem;
    color: var(--muted);
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .info-value {
    font-size: 0.8rem;
    color: var(--text);
    font-weight: 500;
  }

  .info-value.highlight {
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.75rem;
  }

  .charges-section {
    margin-top: 0.8rem;
    border-top: 1px solid var(--border);
    padding-top: 0.8rem;
  }

  .charges-label {
    font-family: var(--mono);
    font-size: 0.55rem;
    color: var(--muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .charge-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 0.75rem;
  }

  .charge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 0.4rem;
  }

  .charge-dot.dismissed { background: var(--muted); }

  .charge-text {
    flex: 1;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .charges-more {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--muted);
    letter-spacing: 1px;
    text-align: center;
    padding-top: 0.5rem;
    margin-top: 0.2rem;
    border-top: 1px dashed var(--border);
  }
  .charge-status {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 1px;
    padding: 0.1rem 0.4rem;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .status-convicted {
    background: rgba(232,50,60,0.2);
    color: var(--accent);
    border: 1px solid rgba(232,50,60,0.3);
  }

  .status-dismissed {
    background: rgba(107,107,133,0.2);
    color: var(--muted);
    border: 1px solid var(--border);
  }

  .card-footer {
    padding: 0.9rem 1.1rem 1.1rem;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .case-number {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted);
    letter-spacing: 1px;
    text-align: center;
  }

  .view-btn {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(232,50,60,0.08);
    border: 1px solid rgba(232,50,60,0.35);
    padding: 0.65rem 0.8rem;
    width: 100%;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
  }

  .view-btn:hover {
    background: var(--accent);
    color: white;
    box-shadow: 0 4px 16px rgba(232,50,60,0.35);
  }

  .card-footer-actions {
    display: flex;
    gap: 0.5rem;
  }

  .card-footer-actions .view-btn { flex: 1; }

  .watch-btn {
    flex: 1;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    padding: 0.65rem 0.6rem;
    text-align: center;
    text-decoration: none;
    display: block;
    cursor: pointer;
    transition: all 0.15s;
  }

  .watch-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(232,50,60,0.06);
  }

  .modal-video-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: white;
    background: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.8rem 1rem;
    text-decoration: none;
    transition: all 0.15s;
    margin-bottom: 0.6rem;
  }

  .modal-video-link:hover {
    background: #ff4d4d;
    box-shadow: 0 4px 16px rgba(232,50,60,0.4);
  }

  .modal-video-link.modal-registry-link {
    background: var(--green);
    border-color: var(--green);
    margin-bottom: 1.2rem;
  }

  .modal-video-link.modal-registry-link:hover {
    background: #3ee081;
    box-shadow: 0 4px 16px rgba(46,204,113,0.4);
  }

  .registry-btn {
    flex: 1;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(46,204,113,0.08);
    border: 1px solid rgba(46,204,113,0.35);
    padding: 0.65rem 0.6rem;
    text-align: center;
    text-decoration: none;
    display: block;
    cursor: pointer;
    transition: all 0.15s;
  }

  .registry-btn:hover {
    background: var(--green);
    color: white;
    box-shadow: 0 4px 16px rgba(46,204,113,0.35);
  }

  .doc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    color: var(--text);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    padding: 0.5rem 0.8rem;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.15s;
  }

  .doc-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(232,50,60,0.06);
  }

  /* ============================================
     NON-SEX-CRIME VARIANT — pink accent, used for
     cases on the tracker that are NOT sex offenses
     (kept for completeness/context, not felony CSAM
     convictions). Applies to any .offender-card /
     .modal with the "non-sex-crime" class added.
  ============================================ */
  .offender-card.non-sex-crime:hover {
    border-color: #ff2fd0;
    box-shadow: 0 8px 30px rgba(255,47,208,0.18);
  }
  .offender-card.non-sex-crime .status-ribbon {
    background: #ff2fd0 !important;
    box-shadow: 0 2px 14px rgba(255,47,208,0.5) !important;
    color: #fff !important;
  }
  .offender-card.non-sex-crime .tag-danger,
  .offender-card.non-sex-crime .tag-warning {
    background: rgba(255,47,208,0.12) !important;
    color: #ff6ec7 !important;
    border-color: rgba(255,47,208,0.35) !important;
  }
  .offender-card.non-sex-crime .card-id-strip { color: #ff6ec7; }
  .offender-card.non-sex-crime .info-value.highlight { color: #ff6ec7; }
  .offender-card.non-sex-crime .charge-dot { background: #ff2fd0; }
  .offender-card.non-sex-crime .charge-status.status-convicted {
    background: rgba(255,47,208,0.15);
    color: #ff6ec7;
    border-color: rgba(255,47,208,0.3);
  }
  .offender-card.non-sex-crime .view-btn {
    color: #ff6ec7;
    background: rgba(255,47,208,0.08);
    border-color: rgba(255,47,208,0.35);
  }
  .offender-card.non-sex-crime .view-btn:hover {
    background: #ff2fd0;
    color: #fff;
    box-shadow: 0 4px 16px rgba(255,47,208,0.35);
  }
  .offender-card.non-sex-crime .watch-btn:hover {
    border-color: #ff2fd0;
    color: #ff6ec7;
    background: rgba(255,47,208,0.06);
  }

  .modal.non-sex-crime { border-top-color: #ff2fd0 !important; }
  .modal.non-sex-crime .modal-section-title { color: #ff6ec7; }
  .modal.non-sex-crime .modal-section-title::after { background: rgba(255,47,208,0.2); }
  .modal.non-sex-crime .sentence-stat .val { color: #ff6ec7; }
  .modal.non-sex-crime .charge-status.status-convicted {
    background: rgba(255,47,208,0.15);
    color: #ff6ec7;
    border-color: rgba(255,47,208,0.3);
  }
  .modal.non-sex-crime .modal-close:hover { border-color: #ff2fd0; color: #ff6ec7; }

  /* MODAL */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }

  .modal-overlay.open { display: flex; }

  .modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 2px;
    animation: modal-in 0.25s ease;
  }

  @keyframes modal-in {
    from { opacity: 0; transform: scale(0.97) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  .modal-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--surface) 0%, var(--card) 100%);
    position: relative;
  }

  .modal-mugshot {
    width: 100px;
    height: 120px;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
  }

  .modal-mugshot img { width: 100%; height: 100%; object-fit: cover; }

  .modal-identity { flex: 1; }

  .modal-name {
    font-family: var(--display);
    font-size: 2rem;
    letter-spacing: 4px;
    color: var(--text);
    line-height: 1;
  }

  .modal-meta {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--muted);
    letter-spacing: 1px;
    margin-top: 0.5rem;
    line-height: 1.8;
  }

  .modal-close {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .modal-close:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .modal-body { padding: 1.5rem; }

  .modal-section { margin-bottom: 1.5rem; }

  .modal-section-title {
    font-family: var(--display);
    font-size: 1rem;
    letter-spacing: 3px;
    color: var(--accent);
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .modal-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(232,50,60,0.2);
  }

  .modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .modal-field { display: flex; flex-direction: column; gap: 0.3rem; }

  .modal-field label {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 2px;
    color: var(--muted);
    text-transform: uppercase;
  }

  .modal-field span {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
  }

  .condition-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .condition-item {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text);
    line-height: 1.5;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.02);
    border-left: 2px solid var(--border);
  }

  .condition-item::before {
    content: '▸';
    color: var(--accent);
    flex-shrink: 0;
  }

  .sentence-block {
    background: rgba(232,50,60,0.05);
    border: 1px solid rgba(232,50,60,0.2);
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .sentence-stat { text-align: center; }

  .sentence-stat .val {
    font-family: var(--display);
    font-size: 1.8rem;
    color: var(--accent);
    line-height: 1;
  }

  .sentence-stat .lbl {
    font-family: var(--mono);
    font-size: 0.55rem;
    color: var(--muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 0.3rem;
  }

  /* EMPTY STATE */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    text-align: center;
    gap: 1rem;
    opacity: 0.5;
  }

  .empty-icon { font-size: 3rem; }

  .empty-state h3 {
    font-family: var(--display);
    font-size: 1.5rem;
    letter-spacing: 4px;
    color: var(--muted);
  }

  .empty-state p {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 1px;
    max-width: 300px;
  }

  /* PAGINATION */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 2.5rem 0 1rem;
  }

  .page-btn {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--muted);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    padding: 0.55rem 0.9rem;
    min-width: 2.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
  }

  .page-btn:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(232,50,60,0.08);
  }

  .page-btn.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(232,50,60,0.4);
    cursor: default;
  }

  .page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .page-btn.page-nav {
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
  }

  .page-ellipsis {
    font-family: var(--mono);
    color: var(--muted);
    padding: 0 0.2rem;
    letter-spacing: 1px;
  }

  /* UPLOAD AREA */
  .upload-zone {
    border: 1px dashed var(--border);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 2rem;
    background: rgba(255,255,255,0.01);
  }

  .upload-zone:hover {
    border-color: var(--accent);
    background: rgba(232,50,60,0.03);
  }

  .upload-zone p {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 1px;
  }

  .upload-zone .upload-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  @media (max-width: 900px) {
    .main-container { grid-template-columns: 1fr; }
    .sidebar { height: auto; position: relative; display: none; }
    .modal-grid { grid-template-columns: 1fr; }
    .sentence-block { grid-template-columns: 1fr; }
  }

  /* REDACTION ANIMATION */
  .redacted {
    background: var(--muted);
    color: transparent;
    user-select: none;
    border-radius: 2px;
    display: inline-block;
  }


  /* =====================
     MOBILE RESPONSIVE
  ===================== */
  @media (max-width: 768px) {

    /* HEADER */
    header { padding: 0 1rem; }

    .header-top {
      flex-wrap: wrap;
      gap: 0.8rem;
      padding: 1rem 0 0.6rem;
    }

    .logo-text h1 { font-size: 1.3rem; letter-spacing: 2px; }
    .logo-text span { font-size: 0.5rem; }
    .logo-icon { width: 36px; height: 36px; font-size: 1rem; }

    .header-stats {
      gap: 1rem;
      width: 100%;
      justify-content: flex-start;
      padding-bottom: 0.4rem;
    }

    .stat-pill .num { font-size: 1.1rem; }
    .stat-pill .label { font-size: 0.5rem; }

    .header-nav { padding: 0.4rem 0; gap: 0; }
    .nav-tab { font-size: 0.6rem; padding: 0.4rem 0.8rem; letter-spacing: 1px; }

    /* ALERT BANNER */
    .alert-banner { padding: 0.5rem 1rem; font-size: 0.6rem; }

    /* LAYOUT — stack sidebar below on mobile */
    .main-container {
      grid-template-columns: 1fr;
      min-height: unset;
    }

    /* SIDEBAR — collapsible drawer on mobile */
    .sidebar {
      height: auto;
      position: relative;
      border-right: none;
      border-bottom: 1px solid var(--border);
      display: block;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      padding: 0;
    }

    .sidebar.mobile-open {
      max-height: 600px;
      padding: 0.5rem 0 1rem;
      overflow-y: auto;
    }

    /* MOBILE SIDEBAR TOGGLE */
    .mobile-sidebar-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 1rem;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      user-select: none;
    }

    .mobile-sidebar-toggle span {
      font-family: var(--mono);
      font-size: 0.65rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
    }

    .mobile-sidebar-toggle .toggle-icon {
      font-size: 0.7rem;
      color: var(--accent);
      transition: transform 0.2s;
    }

    .mobile-sidebar-toggle.open .toggle-icon { transform: rotate(180deg); }

    /* CONTENT */
    .content { padding: 1rem; }

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.8rem;
      margin-bottom: 1.2rem;
    }

    .page-title-group h2 { font-size: 1.8rem; letter-spacing: 2px; }

    .search-bar { width: 100%; }

    /* CARDS */
    .cards-grid { grid-template-columns: 1fr; gap: 1.2rem; }

    .pagination { gap: 0.3rem; margin: 2rem 0 0.5rem; }
    .page-btn { font-size: 0.68rem; padding: 0.5rem 0.65rem; min-width: 2.1rem; }
    .page-btn.page-nav { font-size: 0.8rem; padding: 0.5rem 0.6rem; }

    .card-photo-frame { aspect-ratio: 3 / 4; }

    .status-ribbon { font-size: 0.52rem; padding: 0.28rem 0.65rem 0.28rem 0.55rem; }

    .card-identity { padding: 0.9rem 0.9rem 0.4rem; gap: 0.45rem; }
    .card-name { font-size: 1.35rem; }
    .card-dob { font-size: 0.58rem; }

    .card-tags { gap: 0.25rem; }
    .tag { font-size: 0.5rem; padding: 0.12rem 0.35rem; }

    .card-location-row { padding: 0.6rem 0.9rem; gap: 0.3rem 0.8rem; }
    .card-location-item { font-size: 0.62rem; }

    .card-body { padding: 0.8rem; flex: 1; }

    .info-row { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .info-label { font-size: 0.5rem; }
    .info-value { font-size: 0.75rem; }
    .info-value.highlight { font-size: 0.7rem; }

    .charge-item { flex-wrap: wrap; gap: 0.3rem; }
    .charge-status { font-size: 0.5rem; }

    .card-footer { padding: 0.7rem 0.9rem 0.9rem; }
    .case-number { font-size: 0.55rem; }
    .view-btn { font-size: 0.62rem; padding: 0.6rem 0.7rem; }
    .card-footer-actions { flex-direction: column; }
    .watch-btn { font-size: 0.6rem; padding: 0.6rem 0.7rem; }

    /* MODAL */
    .modal-overlay { padding: 0; align-items: flex-end; }

    .modal {
      max-width: 100%;
      max-height: 88vh;
      max-height: 88dvh;
      border-radius: 8px 8px 0 0;
      border-top: 3px solid var(--accent);
    }

    .modal-header {
      flex-wrap: wrap;
      gap: 0.8rem;
      padding: 1rem;
      position: sticky;
      top: 0;
      z-index: 5;
    }

    .modal-mugshot { width: 72px; height: 90px; }

    .modal-name { font-size: 1.4rem; letter-spacing: 2px; }
    .modal-meta { font-size: 0.6rem; }

    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
    }

    .modal-body { padding: 1rem; }

    .modal-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }

    .sentence-block { grid-template-columns: repeat(3, 1fr); padding: 0.8rem; gap: 0.6rem; }
    .sentence-stat .val { font-size: 1.4rem; }
    .sentence-stat .lbl { font-size: 0.5rem; }

    .modal-section-title { font-size: 0.85rem; }

  }

  @media (max-width: 420px) {
    .header-stats { gap: 0.6rem; }
    .modal-grid { grid-template-columns: 1fr; }
    .sentence-block { grid-template-columns: 1fr; }
    .info-row { grid-template-columns: 1fr; }
    .nav-tab { font-size: 0.55rem; padding: 0.4rem 0.6rem; }
  }

  /* Hide toggle on desktop */
  @media (min-width: 769px) {
    .mobile-sidebar-toggle { display: none; }
  }

  /* ============================================
     STATS PAGE
  ============================================ */
  #stats-wrapper { background: var(--bg); min-height: 80vh; color: var(--text); }

  .stats-header {
    padding: 1.6rem 1.5rem;
    border-bottom: 1px solid rgba(232,50,60,0.2);
    background: linear-gradient(180deg, rgba(232,50,60,0.06), transparent);
  }

  .stats-header > .logo { max-width: 1200px; margin: 0 auto; }

  .stats-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.2rem 1.5rem 4rem;
  }

  .stats-section { margin-bottom: 3.2rem; }
  .stats-section:last-child { margin-bottom: 0; }

  .stats-section-head {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin-bottom: 1.3rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
  }

  .stats-section-num {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--accent);
    border: 1px solid rgba(232,50,60,0.35);
    background: rgba(232,50,60,0.08);
    border-radius: 20px;
    padding: 0.2rem 0.55rem;
    flex-shrink: 0;
  }

  .stats-section-title {
    font-family: var(--display);
    font-size: 1.3rem;
    letter-spacing: 1.5px;
    color: var(--text);
  }

  .stats-section-sub {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--muted);
    letter-spacing: 0.5px;
    margin-top: 0.2rem;
  }

  /* Overview tiles */
  .stats-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.9rem;
  }

  .tile-ico {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    opacity: 0.85;
  }

  .overview-tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1.1rem 1rem;
    text-align: center;
    transition: border-color 0.15s;
  }

  .overview-tile:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }

  .overview-tile .val {
    font-family: var(--display);
    font-size: 2.1rem;
    line-height: 1;
    color: var(--accent);
  }

  .overview-tile .lbl {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.5rem;
    display: block;
  }

  /* Sentencing extremes */
  .sentencing-extremes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }

  .extreme-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 3px;
    padding: 1.2rem 1.3rem;
    transition: border-color 0.15s, transform 0.15s;
  }

  .extreme-card[onclick] { cursor: pointer; }
  .extreme-card[onclick]:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }

  .extreme-longest { border-left-color: var(--accent); }
  .extreme-longest:hover { border-color: var(--accent); border-left-color: var(--accent); }

  .extreme-lightest { border-left-color: var(--green); }
  .extreme-lightest:hover { border-color: var(--green); border-left-color: var(--green); }

  .extreme-average { border-left-color: var(--accent2); }
  .extreme-average:hover { border-color: var(--accent2); border-left-color: var(--accent2); }

  .extreme-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
  }

  .extreme-ico { font-size: 1rem; }

  .extreme-lbl {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
  }

  .extreme-big {
    font-family: var(--display);
    font-size: 2.3rem;
    line-height: 1;
    color: var(--text);
    margin-bottom: 0.5rem;
  }

  .extreme-name {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.2rem;
  }

  .extreme-sub {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--muted);
    line-height: 1.5;
  }

  /* Year chart */
  .year-chart {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    height: 180px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1.5rem 1.5rem 1rem;
  }

  .year-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 0.5rem;
  }

  .year-bar-count {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text);
  }

  .year-bar {
    width: 100%;
    max-width: 64px;
    background: linear-gradient(180deg, var(--accent), rgba(232,50,60,0.35));
    border-radius: 2px 2px 0 0;
    transition: opacity 0.15s;
  }

  .year-bar-col:hover .year-bar { opacity: 0.8; }

  .year-bar-label {
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: var(--muted);
  }

  /* By-state cards */
  .state-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1rem;
  }

  .state-stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1.1rem 1.2rem;
    transition: border-color 0.15s, transform 0.15s;
  }

  .state-stat-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }

  .state-stat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.7rem;
  }

  .state-stat-name {
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: 1px;
    color: var(--text);
  }

  .state-stat-abbr {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--muted);
    letter-spacing: 1px;
  }

  .state-stat-total {
    font-family: var(--display);
    font-size: 1.8rem;
    color: var(--accent);
    line-height: 1;
  }

  .state-stat-split-bar {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    margin-bottom: 0.6rem;
  }

  .state-stat-split-bar .seg-incarcerated { background: var(--accent2); height: 100%; }
  .state-stat-split-bar .seg-probation { background: var(--green); height: 100%; }
  .state-stat-split-bar .seg-other { background: var(--muted); height: 100%; }

  .state-stat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted);
    margin-bottom: 0.8rem;
  }

  .state-stat-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
  .state-stat-legend .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

  .state-stat-sentencing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.6rem 0.5rem;
    margin-bottom: 0.8rem;
  }

  .state-sentence-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .state-sentence-stat .v {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1;
  }

  .state-sentence-stat .l {
    font-family: var(--mono);
    font-size: 0.52rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    margin-top: 0.3rem;
  }

  .state-stat-sentencing-empty {
    display: block;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted);
    line-height: 1.5;
  }

  .state-stat-counties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .county-chip {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.5px;
    color: var(--muted);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    padding: 0.25rem 0.55rem;
    border-radius: 20px;
  }

  @media (max-width: 600px) {
    .year-chart { gap: 0.5rem; padding: 1.2rem 0.8rem 0.8rem; height: 150px; }
    .year-bar-count { font-size: 0.62rem; }
    .stats-overview-grid { grid-template-columns: repeat(2, 1fr); }
  }