:root{
    --bg:#fefefe;           /* clean white */
    --card:#ffffff;
    --muted:#6b7280;
    --text:#1f2937;
    --accent:#f97316;       /* vibrant orange */
    --accent2:#ea580c;      /* deeper orange */
    --ring: #f97316;
    --chip: #fef3c7;
    --border: #e5e7eb;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background: linear-gradient(135deg, #fefefe 0%, #fef7ed 50%, #fff7ed 100%);
    color:var(--text);
    min-height: 100vh;
  }
  
  /* Hero */
  .hero{
    padding:40px 20px 24px;
    text-align:center;
    position:relative;
  }
  .hero__brand{
    display:flex; align-items:center; justify-content:center; gap:12px;
  }
  .logo-dot{
    width:18px;height:18px;border-radius:50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow:0 0 20px rgba(249, 115, 22, 0.3);
  }
  .hero h1{margin:0;font-size:42px;letter-spacing:.5px}
  .tagline{margin:6px 0 12px;color:var(--muted)}
  
  /* Chips */
  .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:10px 0 20px}
  .chip{
    border:1px solid #fed7aa; color:var(--accent2);
    background:var(--chip); padding:6px 14px;border-radius:999px;font-weight:600
  }
  
  /* Toolbar */
  .toolbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
  .search{
    min-width:260px;max-width:520px;flex:1;
    padding:10px 14px;border-radius:12px;border:1px solid var(--border);
    background:#ffffff;color:var(--text); outline:none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  .search:focus{border-color:var(--ring); box-shadow:0 0 0 4px rgba(249,115,22,0.18)}
  .select,.btn{
    padding:10px 12px;border-radius:12px;border:1px solid var(--border);
    background:#ffffff;color:var(--text);cursor:pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  .btn{background:linear-gradient(135deg, var(--accent), var(--accent2)); color: white; border: none;}
  .btn:disabled{opacity:.5;cursor:not-allowed}
  .btn-outline{background:transparent; border: 1px solid var(--accent); color: var(--accent);}
  .btn-copy{
    border:1px solid var(--ring); background:var(--accent); color: white;
    padding:6px 10px;border-radius:10px;font-weight:700
  }
  
  /* Layout */
  .container{max-width:1100px;margin:0 auto;padding:0 16px 40px}
  .stats{color:var(--muted);margin-bottom:12px}
  .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  
  /* Card */
  .card{
    background: #ffffff;
    border:1px solid var(--border); border-radius:16px; padding:14px; position:relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  .card__header{display:flex;justify-content:space-between;align-items:center}
  .badge{
    display:inline-block; padding:4px 10px;border-radius:999px;
    background:rgba(249,115,22,.12); color:var(--accent2); border:1px solid rgba(249,115,22,.35);
    font-weight:700; font-size:.9rem;
  }
  .card__title{margin:.4rem 0 .2rem; font-size:1.15rem}
  .card__meta{margin:0 0 .6rem;color:var(--muted);font-size:.9rem}
  .card__body summary{cursor:pointer;color:var(--accent2); font-weight: 600;}
  .code{
    white-space:pre-wrap; word-break:break-word; background:#fef3c7; border:1px solid #fed7aa;
    padding:10px;border-radius:10px; color:var(--text); line-height:1.6; margin-top:8px;
  }
  
  /* Pager */
  .pager{display:flex;gap:10px;justify-content:center;align-items:center;margin:22px 0 0}
  #pageInfo{color:var(--muted)}
  
  /* Footer */
  .footer{border-top:1px solid var(--border); padding:22px; text-align:center; color:var(--muted); background: #fef7ed;}
  .footer a{color:var(--accent2)}