:root{
      --bg:#ffffff;
      --text:#0f172a;
      --muted:#475569;
      --border:#e2e8f0;
      --card:#ffffff;
      --shadow: 0 10px 25px rgba(2, 6, 23, .08);
      --radius: 16px;

      --brand:#f97316; /* orange */
      --brand2:#fb923c;
      --chip:#fff7ed;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--bg);
      color: var(--text);
    }
    a{color:inherit}
    .wrap{max-width:1220px;margin:0 auto;padding:24px 16px 42px}

    header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding:8px 0 10px;
    }
    .brand{
      display:flex; flex-direction:column; gap:6px;
      min-width: 0;
    }
    .brandline{
      display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    }
    .logo{
      font-size:22px;
      line-height:1.1;
      margin:0;
      letter-spacing:.2px;
      font-weight:800;
    }
    .logo .accent{color:var(--brand)}
    .tagline{
      margin:0;
      color:var(--muted);
      font-size:13px;
    }
    .subline{
      margin:0;
      color:var(--muted);
      font-size:12.5px;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      border:1px solid var(--border);
      border-radius:999px;
      padding:8px 10px;
      background:#fff;
      box-shadow: 0 6px 14px rgba(2,6,23,.05);
      white-space:nowrap;
      font-size:12.5px;
      color: var(--muted);
    }
    .pill svg{width:16px;height:16px;color:var(--brand)}
    @media (max-width:720px){
      header{flex-direction:column; align-items:stretch}
      .pill{width:fit-content}
    }

    /* Controls */
    .controls{
      margin-top:14px;
      padding:14px;
      border:1px solid var(--border);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--shadow);
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }
    @media(min-width:900px){
      .controls{grid-template-columns: 1.6fr .7fr .7fr .7fr}
    }
    label{font-size:12px;color:var(--muted)}
    .field{display:flex; flex-direction:column; gap:6px}
    input, select{
      width:100%;
      padding:12px 12px;
      border-radius: 12px;
      border:1px solid var(--border);
      background:#fff;
      color: var(--text);
      outline:none;
    }
    input:focus, select:focus{
      border-color: rgba(249,115,22,.55);
      box-shadow: 0 0 0 4px rgba(249,115,22,.12);
    }
    .searchWrap{position:relative}
    .searchIcon{
      position:absolute; left:10px; top:50%; transform:translateY(-50%);
      width:18px;height:18px;color:#94a3b8;
    }
    #q{padding-left:38px}

    .meta{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      margin:14px 2px 10px;
      color: var(--muted);
      font-size:13px;
    }

    /* Grid */
    .grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:14px;
    }
    @media(min-width:640px){ .grid{grid-template-columns: repeat(3, minmax(0, 1fr));} }
    @media(min-width:980px){ .grid{grid-template-columns: repeat(4, minmax(0, 1fr));} }

    .card{
      background: var(--card);
      border:1px solid var(--border);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow);
      display:flex;
      flex-direction:column;
      min-height:100%;
    }
    .coverWrap{
      position:relative;
      width:100%;
      aspect-ratio: 2 / 3;
      background: linear-gradient(180deg, #fff7ed, #ffffff);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .cover{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .badge{
      position:absolute;
      left:10px; top:10px;
      background: rgba(255,255,255,.92);
      border:1px solid var(--border);
      border-radius:999px;
      padding:6px 10px;
      font-size:11px;
      color:#0f172a;
      display:inline-flex; gap:8px; align-items:center;
      box-shadow: 0 10px 18px rgba(2,6,23,.08);
    }
    .badge i{
      display:inline-block;
      width:8px;height:8px;border-radius:99px;
      background: var(--brand);
    }

    .cardBody{padding:12px 12px 10px; display:flex; flex-direction:column; gap:8px; flex:1}
    .title{
      margin:0;
      font-size:14px;
      line-height:1.25;
      font-weight:700;
      display:-webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .subtitle{
      margin:0;
      color: var(--muted);
      font-size:12.5px;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
    .chip{
      font-size:11px;
      padding:6px 8px;
      border:1px solid rgba(249,115,22,.25);
      border-radius:999px;
      color:#9a3412;
      background: var(--chip);
      white-space:nowrap;
    }

    .btn{
      margin: 10px 12px 12px;
      padding:11px 12px;
      border-radius:12px;
      text-decoration:none;
      display:flex; align-items:center; justify-content:center; gap:8px;
      border:1px solid rgba(249,115,22,.40);
      background: linear-gradient(180deg, rgba(249,115,22,.14), rgba(249,115,22,.08));
      color: #7c2d12;
      font-weight:700;
      transition: transform .08s ease, box-shadow .15s ease;
    }
    .btn:hover{transform: translateY(-1px); box-shadow: 0 14px 22px rgba(249,115,22,.16)}
    .btn svg{width:18px;height:18px}

    .center{display:flex;justify-content:center;align-items:center;margin-top:18px}
    .load{
      cursor:pointer;
      padding:11px 14px;
      border-radius:12px;
      border:1px solid var(--border);
      background:#fff;
      color: var(--text);
      box-shadow: 0 10px 18px rgba(2,6,23,.06);
    }
    .load:disabled{opacity:.55; cursor:not-allowed}


    .nav{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .navlink{
      font-size:13px;
      color: var(--muted);
      text-decoration:none;
      border:1px solid var(--border);
      padding:7px 10px;
      border-radius:999px;
      background:#fff;
      box-shadow: 0 6px 14px rgba(2,6,23,.04);
    }
    .navlink:hover{border-color: rgba(249,115,22,.45); color: var(--text)}
    .hero{
      margin-top:14px;
      padding:18px 16px;
      border:1px solid var(--border);
      border-radius: var(--radius);
      background: linear-gradient(180deg, #fff7ed, #ffffff);
      box-shadow: var(--shadow);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .hero h2{margin:0; font-size:22px; letter-spacing:.2px}
    .hero p{margin:0; color:var(--muted); line-height:1.55}
    .hero .stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
    .stat{
      border:1px solid var(--border);
      background:#fff;
      border-radius:14px;
      padding:10px 12px;
      min-width:160px;
    }
    .stat b{display:block; font-size:14px}
    .stat span{font-size:12.5px; color:var(--muted)}


    footer{
      margin-top:28px;
      padding-top:16px;
      border-top:1px solid var(--border);
      color:var(--muted);
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:space-between;
      font-size:13px;
    }
    .sr{position:absolute;left:-9999px}