:root{
    --mono:'IBM Plex Mono',monospace;
    --disp:'Space Grotesk',sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      linear-gradient(var(--grid) 1px, transparent 1px) 0 0/32px 32px,
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/32px 32px,
      var(--bg);
    color:var(--ink); font-family:var(--mono); min-height:100vh;
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .wrap{max-width:520px; width:100%;}
  .brand-eyebrow{font-size:11px;letter-spacing:.14em;color:var(--line);text-transform:uppercase;text-align:center;}
  h1{font-family:var(--disp);font-weight:700;font-size:24px;margin:6px 0 4px;text-align:center;}
  .tagline{font-size:12.5px;color:var(--ink-dim);text-align:center;margin:0 0 20px;}

  .frame{position:relative;background:var(--panel);border:1px solid var(--line-dim);border-radius:3px;padding:20px;}
  .frame::before,.frame::after,.tick-bl,.tick-br{content:"";position:absolute;width:12px;height:12px;border-color:var(--line);border-style:solid;}
  .frame::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}
  .frame::after{top:-1px;right:-1px;border-width:2px 2px 0 0;}
  .tick-bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px;}
  .tick-br{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}

  #scene{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;background:var(--panel-2);border:1px solid var(--line-dim);border-radius:2px;margin-bottom:16px;}

  .approval-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
  .approval-label{font-size:11px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;}
  .approval-value{font-family:var(--disp);font-weight:700;font-size:20px;}
  .approval-track{height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden;margin-bottom:18px;}
  .approval-fill{height:100%;transition:width .2s, background .2s;}

  .need-row{margin-bottom:10px;}
  .need-label-row{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-dim);margin-bottom:3px;}
  .need-track{height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden;}
  .need-fill{height:100%;transition:width .2s, background .2s;}

  .btn-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;}
  .need-btn{
    background:var(--panel-2);border:1px solid var(--line-dim);color:var(--ink);
    font-family:var(--mono);font-size:11px;padding:10px 4px;border-radius:4px;cursor:pointer;
    transition:border-color .15s, transform .1s;
  }
  .need-btn:hover{border-color:var(--line);}
  .need-btn:active{transform:scale(0.96);}

  .stats-row{display:flex;justify-content:space-between;margin-top:16px;}
  .stat-label{font-size:11px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;}
  .stat-value{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ok);}

  .resign-overlay{
    position:absolute; inset:0; background:rgba(11,30,51,0.96); border-radius:3px;
    display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    padding:24px; z-index:10;
  }
  .resign-overlay.show{display:flex;}
  .resign-tag{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.1em;color:var(--crit);text-transform:uppercase;margin-bottom:10px;}
  .resign-title{font-family:var(--disp);font-weight:700;font-size:22px;margin-bottom:12px;}
  .resign-text{font-size:12.5px;color:var(--ink-dim);font-style:italic;line-height:1.6;max-width:380px;margin-bottom:20px;}
  .resign-btn{
    background:var(--line);color:#04141F;border:none;font-family:var(--disp);font-weight:700;
    font-size:14px;padding:12px 26px;border-radius:6px;cursor:pointer;letter-spacing:.04em;
  }
  .hint{font-size:11px;color:var(--ink-dim);text-align:center;margin-top:14px;}

  .action-toast{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.9);
    background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
    font-family:var(--mono); font-size:13.5px; padding:16px 24px; border-radius:10px;
    max-width:360px; text-align:center; z-index:80; box-shadow:0 12px 40px rgba(0,0,0,.5);
    opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  }
  .action-toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

  @keyframes flashBar{ 0%{ filter:brightness(2.2); } 100%{ filter:brightness(1); } }
  .need-fill.flash{ animation:flashBar .3s ease; }