:root{
    --ink:#1c2530;
    --slate:#5b6675;
    --line:#dfe3e8;
    --paper:#f6f7f9;
    --brand:#2a5c53;
    --brand-soft:#e7efec;
    --proses:#a3660a;
    --proses-bg:#fdf2e0;
    --selesai:#1f7a52;
    --selesai-bg:#e6f4ed;
    --ditolak:#b3372c;
    --ditolak-bg:#fbeae8;
  }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    min-height:100vh;
  }
  .mono{ font-family:'JetBrains Mono',monospace; letter-spacing:.02em; }
  .display{ font-family:'Space Grotesk',sans-serif; }

  .topbar{
    background:var(--ink);
    color:#fff;
  }
  .topbar .brand-mark{
    width:34px;height:34px;border-radius:8px;
    background:var(--brand);
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.95rem;
  }

  .ticket-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
  }
  .ticket-head{
    border-bottom:1px dashed var(--line);
    padding:1.75rem 1.75rem 1.5rem;
    position:relative;
  }
  .ticket-head::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-9px;
    height:18px;
    background-image:radial-gradient(circle at 9px 9px, var(--paper) 9px, transparent 9.5px);
    background-size:18px 18px;
    background-repeat:repeat-x;
    background-position:left center;
  }
  .eyebrow{
    text-transform:uppercase;
    font-size:.72rem;
    letter-spacing:.12em;
    color:var(--slate);
    font-weight:600;
  }
  .ticket-no{
    font-size:1.7rem;
    font-weight:700;
    color:var(--brand);
  }

  .status-pill{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.4rem .9rem;
    border-radius:999px;
    font-weight:600;
    font-size:.85rem;
  }
  .status-pill .dot{ width:8px;height:8px;border-radius:50%; }
  .status-proses{ background:var(--proses-bg); color:var(--proses); }
  .status-proses .dot{ background:var(--proses); }
  .status-selesai{ background:var(--selesai-bg); color:var(--selesai); }
  .status-selesai .dot{ background:var(--selesai); }
  .status-ditolak{ background:var(--ditolak-bg); color:var(--ditolak); }
  .status-ditolak .dot{ background:var(--ditolak); }

  .field-label{
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--slate);
    font-weight:600;
    margin-bottom:.35rem;
  }
  .field-value{
    color:var(--ink);
    font-size:1rem;
  }
  .message-box{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:10px;
    padding:1rem 1.15rem;
    white-space:pre-wrap;
    line-height:1.6;
  }
  .followup-box{
    border-left:3px solid var(--brand);
    background:var(--brand-soft);
    border-radius:0 10px 10px 0;
    padding:1rem 1.15rem;
    line-height:1.6;
  }
  .divider-v{ width:1px; background:var(--line); }

  @media (max-width: 767.98px){
    .divider-v{ display:none; }
  }