/* =========================
   SOCLE NEUTRE (NO THEME)
   ========================= */
   :root{
    /* Fonts */
    --font-title: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  
    /* Colors (neutral) */
    --color-title: #222;
    --color-text: #222;
    --color-muted: #666;
    --color-accent: #444;
  
    /* Surfaces */
    --surface: #ffffff;
    --border: rgba(0,0,0,.12);
    --shadow: 0 12px 30px rgba(0,0,0,.08);
  
    /* Layout */
    --radius: 16px;
    --max-width: 860px;
    --pad: clamp(16px, 3vw, 24px);
  
    /* Buttons */
    --btn-bg: #333;
    --btn-text: #fff;
  
    /* Focus */
    --focus: #0b5fff;
  
    /* Decorations (themes override these) */
    --background-image: none;
    --top-decoration: none;
    --bottom-decoration: none;
  }
  
  /* =========================
     Base
     ========================= */
  *{ box-sizing: border-box; }
  html, body{ height: 100%; }
  
  body{
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background:
      var(--background-image),
      #f4f4f4;
  }
  
  /* Links & focus */
  a{ color: inherit; }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible{
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }
  
  /* =========================
     Page layout
     ========================= */
  .page{
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
  
  /* Decorations */
  .decor{
    width: 100%;
    min-height: 80px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .decor--top{ background-image: var(--top-decoration); }
  .decor--bottom{ background-image: var(--bottom-decoration); }
  
  /* =========================
     Card
     ========================= */
  .card{
    width: min(var(--max-width), calc(100% - 2*var(--pad)));
    margin: 24px auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  
  .card__head{
    padding: var(--pad);
    border-bottom: 1px solid var(--border);
  }
  
  .title{
    margin: 0;
    font-family: var(--font-title);
    color: var(--color-title);
    font-size: clamp(24px, 4vw, 40px);
  }
  
  .subtitle{
    margin-top: 8px;
    color: var(--color-muted);
  }
  
  /* =========================
     Content
     ========================= */
  .content{ padding: var(--pad); }
  
  .question{
    font-size: 1.2rem;
    margin-bottom: 12px;
  }
  
  .meta{
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed var(--border);
    color: var(--color-muted);
  }
  
  /* =========================
     Form
     ========================= */
  .label{
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
  }
  
  .input{
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    font-size: 1rem;
  }
  
  .actions{
    display: flex;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
  }
  
  .actions--between{
    justify-content: space-between;
  }
  
  /* Buttons */
  .btn{
    border: none;
    background: var(--btn-bg);
    color: var(--btn-text);
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
  }
  
  .btn--ghost{
    background: transparent;
    border: 1px solid var(--border);
    color: var(--color-text);
  }
  
  .btn:disabled{
    opacity: .5;
    cursor: not-allowed;
  }
  
  /* =========================
     Notices
     ========================= */
  .notice{
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
  }
  
  .notice--ok{ border-color: #4caf50; }
  .notice--bad{ border-color: #e53935; }
  
  /* =========================
     Tables
     ========================= */
  .tableWrap{
    margin-top: 14px;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
  }
  
  .table{
    width: 100%;
    border-collapse: collapse;
  }
  
  .table th,
  .table td{
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  
  /* =========================
     Badges
     ========================= */
  .badges{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .badge{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: .9rem;
  }