:root{
    --bg:#0f1724; /* dark bg for demo */
    --card:#0b1220;
    --muted:#9aa4b2;
    --accent:#38bdf8; /* cyan */
    --good:#10b981; /* green */
    --warn:#f59e0b; /* amber */
    --danger:#ef4444; /* red */
    --radius:12px;
    font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  }

  body{
    margin:0; min-height:100vh; display:grid; place-items:center; background:linear-gradient(180deg,#071021 0%, #071725 100%); color:#e6eef6; padding:24px;
  }

  .card{
    width:100%; max-width:760px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:16px; padding:20px; box-shadow: 0 6px 24px rgba(2,6,23,0.6);
  }

  h1{font-size:20px; margin:0 0 8px 0}
  p.lead{color:var(--muted); margin:0 0 16px 0}

  label{display:block; font-weight:600; margin-bottom:8px}

  textarea{
    width:100%; min-height:120px; resize:vertical; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:inherit; font-size:15px; outline:none;
    box-sizing:border-box;
  }
  textarea:focus{ box-shadow:0 0 0 4px rgba(56,189,248,0.06); border-color:rgba(56,189,248,0.28)}

  /* progress wrapper */
  .progress-wrap{ margin-top:14px }
  .progress-bar{
    width:100%; height:14px; background:rgba(255,255,255,0.03); border-radius:10px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.04);
  }
  .progress-fill{
    height:100%; width:0%; background:linear-gradient(90deg,var(--accent), #7c3aed); border-radius:10px 6px 6px 10px; transition:width 160ms linear, background-color 200ms linear; display:flex; align-items:center; justify-content:flex-end; padding-right:8px; box-sizing:border-box;
  }
  .progress-percent{ font-size:12px; font-weight:700; color:rgba(2,6,23,0.9); background:rgba(255,255,255,0.85); border-radius:8px; padding:2px 6px }

  .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:13px; color:var(--muted) }

  /* color states */
  .state-good{ background:linear-gradient(90deg,var(--good), #059669) }
  .state-warn{ background:linear-gradient(90deg,var(--warn), #d97706) }
  .state-danger{ background:linear-gradient(90deg,var(--danger), #dc2626) }

  /* small screens */
  @media (max-width:560px){ h1{font-size:18px} .card{padding:16px} }