:root{
      --bg: #f1f1f1;
      --card: white;
      --text: black;
      --muted: black;
      --accent: #4f8cff;
      --accent-2: #3b6fe0;
      --radius: 14px;
/*      --shadow: 0 10px 30px rgba(0,0,0,.10);*/
    }
		a{text-decoration:none;}
    /* Page centering */
    body{
      margin:0;
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      display:grid;
      min-height:100svh;
      place-items:center;
    }
    

    /* Wrapper max width and padding */
    .container{
      width: min(1100px, 92vw);
      margin-inline:auto;
      padding: 24px 0 48px;
    }

    /* Centered heading */
    .header{
      text-align:center;
      margin-bottom: 20px;
    }
    .header h1{
      font-size: clamp(1.4rem, 3.5vw, 2rem);
      margin: 0 0 6px;
    }
    .header p{
      margin:0;
      color: var(--muted);
      font-size: clamp(.95rem, 2.2vw, 1.05rem);
    }

    /* Responsive grid */
    .grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 18px;
      align-items: start;
    }

    /* Card */
    .card{
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      display:flex;
      flex-direction: column;
      transition: transform .18s ease, box-shadow .18s ease;
      outline: 2px solid rgba(255,255,255,.06);
    }
    .card:focus-within,
    .card:hover{
      transform: translateY(-3px);
/*      box-shadow: 0 14px 40px rgba(0,0,0,.30);*/
      outline-color: rgba(79,140,255,.28);
    }

    /* Thumbnail with fixed aspect ratio */
    .thumb{
      aspect-ratio: 16 / 9;
      width: 100%;
      background: #0b0e12;
      position: relative;
      overflow: hidden;
      display:block;
    }
    .thumb img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
    }

    /* Content */
    .content{
      padding: 14px 14px 16px;
      display:flex;
      flex-direction: column;
      gap: 10px;
    }
    .title{
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.3;
    }
    .meta{
      font-size: .9rem;
      color: var(--muted);
    }

    /* Actions */
    .actions{
      margin-top: auto;
      display:flex;
      gap: 10px;
      align-items: center;
    }

    /* Download button */
    .btn{
      appearance:none;
      border:none;
      border-radius: 9px;
      padding: 10px 12px;
      font-weight: 600;
      color: white;
      background: var(--accent);
      cursor: pointer;
      transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
/*      box-shadow: 0 6px 16px rgba(79,140,255,.35);*/
    }
    .btn:hover{ 
    background: var(--accent-2); 
/*    transform: translateY(-1px); */
    }
    .btn:active{ transform: translateY(0); }

    /* Secondary action (optional) */
    .ghost{
      background: transparent;
      color: var(--text);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: none;
    }
    .ghost:hover{
      border-color: rgba(255,255,255,.24);
      background: rgba(255,255,255,.04);
    }

    /* Small screens: tighten spacing */
    @media (max-width: 420px){
      .content{ padding: 12px; }
      .actions{ gap: 8px; }
      .btn{ padding: 9px 10px; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{ transition: none !important; }
    }