:root {
    /* ---------- Typography ---------- */
    --font-body: "Trebuchet MS", sans-serif;
  
    /* ---------- Core Palette ---------- */
    --color-bg:      #000;   /* page background */
    --color-surface: #111;   /* cards / inputs / table heads */
    --color-text:    #eee;   /* primary text */
    --color-muted:   #aaa;   /* secondary captions */
  
    --color-primary: #0d6efd; /* main blue */
    --color-success: #198754;
    --color-warning: #b8860b;
    --color-error:   #dc3545;
    --color-info:    #0dcaf0;
  
    /* ---------- Radii ---------- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 24px;
  }
  
  /* ---------- Global Reset ---------- */
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:var(--font-body);
  }
  
  html,body{
    min-height:100dvh;
    background:var(--color-bg);
    color:var(--color-text);
    line-height:1.6;
  }
  
  /* Mobile breathing room — 22 px */
  @media(max-width:480px){
    body{padding-block:22px;}
  }
  
  /* Desktop bottom padding so footer/Log-out isn't glued */
  @media(min-width:600px){
    body{padding-bottom:60px;}      /* adjust as needed */
  }
  
  /* ---------- Headings ---------- */
  h1{
    font-size:clamp(2.2rem,5vw+1rem,3rem);
    font-weight:400;
    text-align:center;
    margin-bottom:1.3rem;
  }
  h2{
    font-size:clamp(1.4rem,1.3vw+1rem,2rem);
    font-weight:400;
    margin:1.8rem 0 .6rem;
  }
  
  /* ---------- Layout helper ---------- */
  .wrapper{
    width:100%;
    max-width:800px;
    margin:0 auto;
    padding:0 2rem;
  }
  .hidden{display:none!important;}
  
  /* ---------- Buttons ---------- */
  .btn,.btn-primary{
    display:inline-block;
    padding:.9rem 1.6rem;
    font-size:1rem;
    border:none;
    border-radius:12px;
    cursor:pointer;
    text-align:center;
    background:var(--color-primary);
    color:#fff;
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.4);}
  .btn:active{box-shadow:none;}
  .btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none!important;}
  
  /* Allow rounded corners by removing forced overrides */
  
  /* ---------- Form fields ---------- */
  input,textarea,select{
    width:100%;
    padding:.8rem 1rem;
    font-size:1rem;
    border:none;
    border-radius:var(--radius-md);
    background:var(--color-surface);
    color:var(--color-text);
  }
  input:focus,textarea:focus,select:focus{
    outline:none;
    background:#151515;
  }
  label{
    display:block;
    margin:1rem 0 .5rem;
    color:var(--color-muted);
  }
  
  /* ---------- Links ---------- */
  a{color:var(--color-primary);text-decoration:none;}
  a:hover{text-decoration:underline;}
  
  /* ---------- Alert / Status boxes ---------- */
  .alert{
    padding:1rem;
    border-radius:var(--radius-md);
    margin-bottom:1.5rem;
    display:flex;
    align-items:center;
    gap:.6rem;
  }
  .alert.loading {background:#332f00;color:var(--color-warning);}
  .alert.success {background:#0a3321;color:#63dd9b;}
  .alert.error   {background:#3d0b0b;color:#ff8686;}
  .alert.queued  {background:#002545;color:#7cc7ff;}
  
  /* ---------- Spinner ---------- */
  .spinner{
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25rem solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s ease-in-out infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  
  /* ---------- Post Card component ---------- */
  #postsCards{
    display:flex;
    flex-direction:column;
    gap:1rem;
    margin-top:1.5rem;          /* space before first card */
  }
  
  .post-card{
    background:var(--color-surface);
    border-radius:var(--radius-md);
    padding:1rem 1.2rem;
    display:flex;
    flex-direction:column;
    gap:.6rem;
  }
  
  .post-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.4rem;
  }
  .post-number{
    font-weight:400;
    font-size:1.1rem;
    color:var(--color-muted);
  }
  .post-topic{
    font-size:1.1rem;
    font-weight:400;
  }
  
  .post-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:.4rem;
    font-size:.8rem;
    color:var(--color-muted);
  }
  
  /* Status pill */
  .status-tag{
    padding:2px 8px;
    border-radius:var(--radius-sm);
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.03em;
  }
  .status-scheduled {background:#332f00;color:var(--color-warning);}
  .status-processing{background:#002b3f;color:#5bc0de;}
  .status-published {background:#0a3321;color:#63dd9b;}
  .status-failed    {background:#3d0b0b;color:#ff8686;}