/* --- Theme variables --- */
:root{
    --bg:#ffffff;
    --muted:#6b7280;        /* gray-500 */
    --text:#0f172a;         /* slate-900 */
    --primary:#0ea5a4;      /* teal-ish */
    --primary-dark:#0b8b89;
    --card:#f8fafc;         /* very light card bg */
    --chip-bg:#eef2f2;
    --chip-border:#d1e7e6;
    --accent:#f59e0b;       /* amber for warnings */
    --success:#10b981;
    --danger:#ef4444;
    --shadow: 0 6px 18px rgba(15,23,42,0.06);
    --radius-lg:12px;
    --radius-md:8px;
    --radius-sm:6px;
    --glass: rgba(255,255,255,0.6);
  }
  
  /* --- Utility --- */
  .hidden{ display:none !important; }
  .muted{ color:var(--muted); }
  .small{ font-size:0.85rem; color:var(--muted); }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:8px;
    border:1px solid transparent;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font-weight:600;
    font-size:0.94rem;
    transition:all .14s ease;
    box-shadow:none;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn:active{ transform:translateY(0); }
  .btn.small{ padding:6px 8px; font-size:0.85rem; border-radius:6px; }
  .btn.primary{
    background:linear-gradient(180deg,var(--primary),var(--primary-dark));
    color:white;
    border-color:rgba(0,0,0,0.04);
    box-shadow: 0 6px 18px rgba(14,165,164,.12);
  }
  .btn.primary:hover{ filter:brightness(.98); }
  
  /* --- Layout --- */
  .features { padding:28px 16px; background:linear-gradient(180deg, #fbfbfd, #ffffff); }
  .features-container { max-width:1100px; margin:0 auto; font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); }
  
  .features-title { font-size:1.6rem; margin:0 0 14px 0; font-weight:700; letter-spacing:-0.2px; }
  
  /* top area: two-column layout */
  .puzzource-top { display:grid; grid-template-columns: 420px 1fr; gap:20px; align-items:start; }
  
  /* upload card */
  .upload-card{
    background:var(--card);
    border-radius:var(--radius-lg);
    padding:18px;
    box-shadow:var(--shadow);
    border:1px solid rgba(15,23,42,0.04);
  }
  .upload-drop{
    display:block;
    border:2px dashed rgba(15,23,42,0.06);
    border-radius:10px;
    padding:20px;
    text-align:center;
    cursor:pointer;
    background:linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
  }
  .upload-drop input[type="file"]{ display:none; }
  .upload-instructions { display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; padding:8px 4px; }
  .upload-instructions i { font-size:28px; color:var(--primary-dark); }
  .upload-instructions .muted { font-weight:600; color:var(--text); }
  .upload-instructions .small { font-size:0.85rem; color:var(--muted); }
  
  /* small separator */
  .or-sep { text-align:center; margin:14px 0; color:var(--muted); font-size:0.9rem; }
  
  /* paste text */
  #puzzource-text{
    width:100%;
    min-height:92px;
    border-radius:8px;
    border:1px solid rgba(15,23,42,0.06);
    padding:10px 12px;
    font-size:0.95rem;
    resize:vertical;
    background:white;
    box-shadow: inset 0 1px 0 rgba(15,23,42,0.02);
    font-family: inherit;
  }
  
  /* controls row */
  .upload-controls{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:12px; }
  .privacy-toggle{ display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--muted); cursor:pointer; }
  .privacy-toggle input{ transform:translateY(1px); }
  
  /* preview */
  .preview{ margin-top:12px; border-radius:8px; overflow:hidden; border:1px solid rgba(15,23,42,0.03); background:white; }
  .preview-head{ padding:8px 12px; border-bottom:1px solid rgba(15,23,42,0.03); font-weight:600; color:var(--muted); }
  .preview img{ width:100%; height:auto; display:block; max-height:260px; object-fit:contain; }
  
  /* status */
  .status{ margin-top:10px; font-size:0.9rem; color:var(--muted); }
  
  /* results card */
  .results-card{
    background:white;
    padding:16px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    border:1px solid rgba(15,23,42,0.04);
  }
  
  /* top of results */
  .results-top{ display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px; }
  .results-head{ font-weight:700; color:var(--text); }
  .engine-controls{ display:flex; gap:8px; align-items:center; }
  
  /* chips row */
  .chips-row{ display:flex; gap:8px; flex-wrap:wrap; padding:6px 6px; min-height:56px; border-radius:10px; background:linear-gradient(180deg, #fff, #fbfdfe); border:1px solid rgba(15,23,42,0.03); }
  .chip{
    background:var(--chip-bg);
    border:1px solid var(--chip-border);
    padding:8px 12px;
    border-radius:999px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    transition:transform .09s ease, box-shadow .09s ease;
  }
  .chip:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(15,23,42,0.06); }
  
  /* templates */
  .templates-row{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
  
  /* query canvas */
  .canvas-area{ margin-top:12px; }
  .canvas-head{ font-weight:600; margin-bottom:8px; color:var(--muted); }
  .query-canvas{
    min-height:72px;
    border-radius:10px;
    border:2px dashed rgba(15,23,42,0.06);
    padding:12px;
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    background:linear-gradient(180deg,#ffffff,#fcffff);
  }
  .query-canvas.drag-over{ border-color:var(--primary); background: linear-gradient(180deg,#f0fffe,#ffffff); }
  
  /* canvas chips */
  .canvas-chip{
    background:#fff;
    border:1px solid rgba(15,23,42,0.06);
    padding:8px 12px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    position:relative;
    font-weight:600;
  }
  .canvas-remove{ background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:1rem; padding:0 6px; }
  
  /* canvas action row */
  .canvas-actions{ display:flex; gap:8px; align-items:center; margin-top:8px; }
  
  /* features grid (bottom) */
  .features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
  .feature-card{ background:white; border-radius:10px; padding:12px; border:1px solid rgba(15,23,42,0.04); box-shadow:var(--shadow); }
  .feature-icon{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#ecfeff,#e6fffd); color:var(--primary-dark); margin-bottom:8px; font-size:18px; }
  .feature-title{ margin:0; font-size:1rem; font-weight:700; }
  .feature-desc{ margin-top:6px; color:var(--muted); font-size:0.92rem; }
  
  /* footer spacing tweak for this page */
  footer{ margin-top:28px }
  
  /* small responsive adjustments */
  @media (max-width: 980px){
    .puzzource-top{ grid-template-columns: 1fr; }
    .features-grid{ grid-template-columns: 1fr; }
    .upload-card, .results-card{ margin-bottom:12px; }
  }
  
  /* keyboard focus and accessibility */
  .chip:focus, .btn:focus, .canvas-remove:focus, .upload-drop:focus{
    outline: 3px solid rgba(14,165,164,0.14);
    outline-offset: 3px;
  }
  
  /* subtle micro-interactions */
  .chip, .canvas-chip { transition: transform .12s cubic-bezier(.2,.9,.2,1), box-shadow .12s ease; }
  .chip:active, .canvas-chip:active{ transform:scale(.99); }
  
  /* error / warning badges (used by JS optionally) */
  .badge-low{ background:#fff3cd; color:#7a4a00; border-radius:6px; padding:2px 6px; font-size:0.8rem; border:1px solid rgba(160,120,0,0.08); }
  .badge-high{ background:#ecfdf5; color:#065f46; border-radius:6px; padding:2px 6px; font-size:0.8rem; border:1px solid rgba(6,95,70,0.06); }
  
  /* small helpers to keep layout tidy */
  .results-top .engine-controls select { padding:6px 8px; border-radius:6px; border:1px solid rgba(15,23,42,0.06); background:white; }
  .results-top .engine-controls label { font-weight:600; color:var(--muted); margin-right:6px; }
  
  /* Ensure images do not overflow in narrow columns */
  img { max-width:100%; height:auto; }
  
  /* clean up forms on mobile */
  @media (max-width:480px){
    .features-container{ padding:10px; }
    .features-title{ font-size:1.25rem; }
    .upload-instructions i{ font-size:24px; }
    .query-canvas{ min-height:84px; }
  }