/* ---------------------------------------------------------
       Tailwind-ish tiny utility kit (subset)
    --------------------------------------------------------- */
    :root{
      --bg: #ffffff;
      --text: #0f172a;          /* slate-900 */
      --muted: #475569;         /* slate-600 */
      --muted2:#64748b;         /* slate-500 */
      --line: #e5e7eb;          /* gray-200 */
      --line2:#eef2f7;          /* light divider */
      --blue: #1d4ed8;          /* blue-700 */
      --blue2:#2563eb;          /* blue-600 */
      --green:#16a34a;          /* green-600 */
      --shadow: 0 1px 0 rgba(15,23,42,.04);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    html { overflow-y: scroll; }
    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);
    }

    /* layout */
    .container{ max-width: 1120px; margin: 0 auto; padding: 0 22px; }
    .w-full{ width:100%; }
    .flex{ display:flex; }
    .items-center{ align-items:center; }
    .items-start{ align-items:flex-start; }
    .justify-between{ justify-content:space-between; }
    .flex-1{ flex:1 1 auto; }
    .gap-1{ gap:.25rem; }
    .gap-2{ gap:.5rem; }
    .gap-3{ gap:.75rem; }
    .gap-4{ gap:1rem; }
    .gap-6{ gap:1.5rem; }
    .mt-1{ margin-top:.25rem; }
    .mt-2{ margin-top:.5rem; }
    .mt-3{ margin-top:.75rem; }
    .mt-4{ margin-top:1rem; }
    .mt-6{ margin-top:1.5rem; }
    .py-2{ padding-top:.5rem; padding-bottom:.5rem; }
    .py-3{ padding-top:.75rem; padding-bottom:.75rem; }
    .py-4{ padding-top:1rem; padding-bottom:1rem; }
    .px-2{ padding-left:.5rem; padding-right:.5rem; }
    .px-3{ padding-left:.75rem; padding-right:.75rem; }
    .px-4{ padding-left:1rem; padding-right:1rem; }
    .rounded-full{ border-radius: 9999px; }
    .rounded-xl{ border-radius: 18px; }
    .border{ border:1px solid var(--line); }
    .border-b{ border-bottom:1px solid var(--line); }
    .text-xs{ font-size:12px; line-height: 1.2; }
    .text-sm{ font-size:14px; line-height: 1.25; }
    .text-base{ font-size:16px; line-height: 1.35; }
    .text-lg{ font-size:18px; line-height: 1.35; }
    .text-blue{ color: var(--blue2); }
    .text-muted{ color: var(--muted); }
    .text-muted2{ color: var(--muted2); }
    .text-green{ color: var(--green); }
    .font-medium{ font-weight: 600; }
    .no-underline{ text-decoration:none; }
    .select-none{ user-select:none; }

    /* ---------------------------------------------------------
       Page chrome
    --------------------------------------------------------- */
    header{
      padding-top: 16px;
      background:#fff;
    }
    .divider{ height:1px; background:var(--line); }
    .topRow{ padding-bottom: 10px; }
    
    .logo{
      position: relative;
      z-index: 1;
      width: 48px; height: 48px;
      display:grid; place-items:center;
      border-radius: 50%;
      box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(0,0,0,.06);
      overflow: hidden; /* contain gradients inside the circle */
      background: transparent;
    }
    /* Each blob is a separate absolutely-positioned gradient so we can animate them independently */
    .logo .blob{
      position: absolute;
      inset: 0;
      z-index: 1;
      border-radius: 50%;
      mix-blend-mode: screen;
      filter: blur(6px) saturate(240%);
      pointer-events: none;
      opacity: 1;
      transform-origin: center;
    }

    .logo .b1{ background: radial-gradient(circle at 20% 25%, rgba(255,107,107,0.95) 0%, rgba(255,107,107,0.0) 40%); animation: plasma-1 29s ease-in-out infinite; }
    .logo .b2{ background: radial-gradient(circle at 68% 38%, rgba(107,133,255,0.95) 0%, rgba(255,217,61,0.0) 40%); animation: plasma-2 31s ease-in-out infinite; }
    .logo .b3{ background: radial-gradient(circle at 38% 78%, rgba(107,255,179,0.95) 0%, rgba(107,255,179,0.0) 40%); animation: plasma-3 37s ease-in-out infinite; }
    .logo .b4{ background: radial-gradient(circle at 82% 72%, rgba(255,217,61,0.95) 0%, rgba(107,133,255,0.0) 40%); animation: plasma-4 41s ease-in-out infinite; }

    @keyframes plasma-1 {
      0%   { transform: translate(0,0) scale(1) rotate(0deg); }
      25%  { transform: translate(-20%, 12%) scale(1.8) rotate(-12deg); }
      50%  { transform: translate(-35%, -30%) scale(3) rotate(18deg); }
      75%  { transform: translate(30%, 18%) scale(1.1) rotate(-20deg); }
      100% { transform: translate(0,0) scale(1) rotate(0deg); }
    }

    @keyframes plasma-2 {
      0%   { transform: translate(0,0) scale(1) rotate(0deg); }
      25%  { transform: translate(28%, -18%) scale(2.2) rotate(14deg); }
      50%  { transform: translate(40%, 36%) scale(3.2) rotate(-9deg); }
      75%  { transform: translate(-32%, -12%) scale(1.25) rotate(20deg); }
      100% { transform: translate(0,0) scale(1) rotate(0deg); }
    }

    @keyframes plasma-3 {
      0%   { transform: translate(0,0) scale(1) rotate(0deg); }
      25%  { transform: translate(-30%, -28%) scale(1.9) rotate(10deg); }
      50%  { transform: translate(36%, 30%) scale(2.8) rotate(-16deg); }
      75%  { transform: translate(-26%, 38%) scale(1.15) rotate(22deg); }
      100% { transform: translate(0,0) scale(1) rotate(0deg); }
    }

    @keyframes plasma-4 {
      0%   { transform: translate(0,0) scale(1) rotate(0deg); }
      25%  { transform: translate(38%, 30%) scale(1.6) rotate(-20deg); }
      50%  { transform: translate(-42%, -36%) scale(3.4) rotate(12deg); }
      75%  { transform: translate(22%, -28%) scale(1.2) rotate(-6deg); }
      100% { transform: translate(0,0) scale(1) rotate(0deg); }
    }

    /* Search bar */
    .searchBar{
      height: 44px;
      border-radius: 9999px;
      border: 1px solid var(--line);
      display:flex;
      align-items:center;
      padding: 0 14px 0 16px;
      box-shadow: var(--shadow);
      background:#fff;
    }
    .searchBar input{
      border:0;
      outline:0;
      width:100%;
      font-size:16px;
      color:var(--text);
      background:transparent;
    }
    .iconBtn{
      width: 34px; height: 34px;
      display:grid; place-items:center;
      border-radius:9999px;
      border: 0;
      background: transparent;
      cursor: pointer;
    }
    .iconBtn:hover{ background:#f1f5f9; }

    /* Nav tabs row */
    .tabs a{
      color: var(--muted);
      text-decoration:none;
      padding: 8px 2px 6px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size: 14px;
      cursor: pointer;
    }
    .tabs a.active{
      color: var(--blue);
      position:relative;
      font-weight: 600;
    }
    .tabs a.active::after{
      content:"";
      position:absolute;
      left:0; right:0;      
      bottom: -5px;
      height: 1px;
      background: var(--blue);
      border-radius: 9999px;
    }
    .rightActions a{
      text-decoration:none;
      font-size:14px;
      color: var(--muted);
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .rightActions a.primary{
      color: var(--blue);
      font-weight: 600;
    }

    /* Filter row */
    .filters{
      padding: 10px 0;
      color: var(--muted);
      font-size: 14px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      color: var(--muted);
    }
    .toggle{
      width: 34px; height: 18px;
      border-radius:9999px;
      background:#cbd5e1;
      position:relative;
      flex: 0 0 auto;
    }
    .toggle.on{ background: var(--blue2); }
    .toggle::after{
      content:"";
      width: 14px; height: 14px;
      border-radius:9999px;
      background:#fff;
      position:absolute;
      top:2px; left:2px;
      box-shadow: 0 1px 2px rgba(0,0,0,.18);
      transition: transform .15s ease;
    }
    .toggle.on::after{ transform: translateX(16px); }

    /* Results */
    main{ padding-top: 18px; }
    .results{ max-width: 820px; }
    .result{ padding: 12px 0 18px; }
    .metaLine{
      display:flex; align-items:flex-start; justify-content:space-between;
      gap: 14px;
    }
    .site{
      display:flex; align-items:flex-start; gap: 12px;
      min-width: 0;
    }
    .favicon{
      width: 34px; height: 34px;
      border-radius: 9999px;
      background:#f1f5f9;
      display:grid; place-items:center;
      flex: 0 0 auto;
    }
    .favicon img{ width:100%; height:100%; border-radius:9999px; object-fit:cover; display:none; }
    .favicon.g{ background: #ffffff; border:1px solid #e5e7eb; }
    .favicon.purple{ background: #ede9fe; }
    .favicon.gray{ background: #f1f5f9; }
    .favicon.dark{ background: #0b1220; }
    .favicon span{ font-weight:700; font-size:14px; color:#111827; }
    .urlTop{ font-size: 14px; color: var(--text); }
    .urlPath{ margin-top: 2px; font-size: 12px; color: var(--muted2); }
    .kebab{
      width: 28px; height: 28px;
      border-radius: 9999px;
      display:grid; place-items:center;
      border:0;
      background: transparent;
      cursor:pointer;
      color: var(--muted2);
    }
    .kebab:hover{ background:#f1f5f9; }

    .title{
      display:inline-block;
      margin-top: 8px;
      font-size: 22px;
      color: #1d4ed8;
      text-decoration:none;
      letter-spacing: -0.2px;
    }
    .title:hover{ text-decoration: underline; }
    .snippet{
      margin: 8px 0 0;
      color: #334155;
      font-size: 14px;
      line-height: 1.55;
      max-width: 760px;
    }

    /* Small helpers */
    .mutedLink{ color: var(--muted); }
    .chev{ width: 14px; height: 14px; color: var(--muted2); }
    .icon{ width: 16px; height: 16px; }
    .icon-sm{ width: 14px; height: 14px; }
    .shield{
      width: 18px; height: 18px;
      display:inline-grid; place-items:center;
      color: #16a34a;
    }

    /* responsive tweaks */
    @media (max-width: 860px){
      .rightActions{ display:none; }
      .results{ max-width: 100%; }
      .container{ padding: 0 14px; }
    }