:root{
    --bg:#0F2340;
    --bg-deep:#0A1930;
    --panel:#16305A;
    --panel-2:#1C3968;
    --line:#3A5980;
    --line-soft:#284567;
    --text:#EDF2F7;
    --text-dim:#9FB3CC;
    --text-faint:#6C89AC;
    --amber:#E8A33D;
    --amber-dim:#B87F2C;
    --green:#6FCF97;
    --red:#E28080;
    --radius:2px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size:48px 48px;
    background-attachment:fixed;
    color:var(--text);
    font-family:'IBM Plex Sans', sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Space Grotesk', sans-serif; margin:0; font-weight:600; letter-spacing:-0.01em;}
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:inherit;}
  button{font-family:inherit; cursor:pointer;}

  /* ---- shell ---- */
  #app{max-width:1120px; margin:0 auto; padding:0 24px 80px;}
  header.topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 0; border-bottom:1px solid var(--line-soft);
    margin-bottom:8px;
  }
  .brand{display:flex; align-items:center; gap:10px; cursor:pointer;}
  .brand-mark{
    width:26px; height:26px; border:1.5px solid var(--amber);
    position:relative; flex-shrink:0;
  }
  .brand-mark::before, .brand-mark::after{
    content:''; position:absolute; background:var(--amber);
  }
  .brand-mark::before{width:1.5px; height:14px; top:6px; left:12px;}
  .brand-mark::after{height:1.5px; width:14px; left:6px; top:12px;}
  .brand-name{font-family:'Space Grotesk'; font-size:15px; font-weight:600;}
  .brand-name .dim{color:var(--text-dim); font-weight:400;}
  nav.topnav{display:flex; gap:24px; font-size:13.5px; color:var(--text-dim);}
  nav.topnav span{cursor:pointer; padding-bottom:2px; border-bottom:1px solid transparent;}
  nav.topnav span:hover, nav.topnav span.active{color:var(--text); border-bottom-color:var(--amber);}

  .view{display:none;}
  .view.active{display:block;}

  /* corner-tick panel, used across the app instead of rounded shadow cards */
  .tick-panel{
    position:relative; background:var(--panel);
    border:1px solid var(--line);
  }
  .tick-panel::before, .tick-panel::after{
    content:''; position:absolute; width:9px; height:9px;
    border-color:var(--amber); opacity:.65;
  }
  .tick-panel::before{top:-1px; left:-1px; border-top:1.5px solid; border-left:1.5px solid;}
  .tick-panel::after{bottom:-1px; right:-1px; border-bottom:1.5px solid; border-right:1.5px solid;}

  /* ---- landing ---- */
  .landing-hero{padding:64px 0 8px; text-align:center;}
  .eyebrow-note{color:var(--text-faint); font-size:12.5px; margin-bottom:18px;}
  .landing-hero h1{font-size:38px; line-height:1.18; max-width:680px; margin:0 auto 28px;}
  .search-shell{max-width:700px; margin:0 auto;}
  .search-box{
    display:flex; align-items:center; gap:10px;
    background:var(--panel); border:1px solid var(--line);
    padding:6px 6px 6px 20px;
  }
  .search-box.focused{border-color:var(--amber);}
  .search-box input{
    flex:1; background:transparent; border:none; outline:none;
    color:var(--text); font-size:16px; padding:14px 0; font-family:'IBM Plex Sans';
  }
  .search-box input::placeholder{color:var(--text-faint);}
  .search-btn{
    background:var(--amber); color:#1A1204; border:none;
    padding:13px 22px; font-size:14px; font-weight:600;
    display:flex; align-items:center; gap:8px;
  }
  .search-btn:hover{background:#F0B255;}
  .example-row{
    display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
    margin-top:22px; max-width:720px; margin-left:auto; margin-right:auto;
  }
  .example-chip{
    border:1px solid var(--line-soft); color:var(--text-dim);
    background:transparent; padding:7px 13px; font-size:12.5px;
    border-radius:20px;
  }
  .example-chip:hover{border-color:var(--amber); color:var(--text);}

  .landing-stats{
    display:flex; justify-content:center; gap:48px;
    margin-top:56px; padding-top:32px; border-top:1px solid var(--line-soft);
  }
  .landing-stats div{text-align:center;}
  .landing-stats .num{font-family:'Space Grotesk'; font-size:22px; color:var(--amber);}
  .landing-stats .lbl{font-size:11.5px; color:var(--text-faint); margin-top:4px;}

  /* ---- results ---- */
  .results-header{padding:28px 0 18px; border-bottom:1px solid var(--line-soft);}
  .results-header .q-label{color:var(--text-faint); font-size:12px; margin-bottom:6px;}
  .results-header .q-text{font-family:'Space Grotesk'; font-size:22px;}
  .results-layout{display:grid; grid-template-columns:220px 1fr; gap:32px; margin-top:24px;}
  @media (max-width:760px){.results-layout{grid-template-columns:1fr;}}

  .filters h4{font-size:12px; color:var(--text-faint); text-transform:none; margin-bottom:10px; letter-spacing:.02em;}
  .filter-group{margin-bottom:24px;}
  .filter-opt{
    display:flex; align-items:center; gap:8px; font-size:13px;
    color:var(--text-dim); padding:5px 0; cursor:pointer;
  }
  .filter-opt input{accent-color:var(--amber);}
  .filter-opt.checked{color:var(--text);}
  .filter-reset{font-size:12px; color:var(--amber); background:none; border:none; padding:0; margin-top:4px;}

  .result-count{font-size:13px; color:var(--text-dim); margin-bottom:14px;}
  .tool-card{
    padding:18px 20px; margin-bottom:12px; display:grid;
    grid-template-columns:1fr 84px; gap:18px; align-items:start;
    transition:border-color .15s;
  }
  .tool-card:hover{border-color:var(--amber);}
  .tool-card .top-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
  .tool-card .tname{font-family:'Space Grotesk'; font-size:16.5px; cursor:pointer;}
  .tool-card .tname:hover{color:var(--amber);}
  .badge{
    font-size:10.5px; padding:2px 7px; border:1px solid; letter-spacing:.01em;
  }
  .badge.best{border-color:var(--amber); color:var(--amber);}
  .badge.free{border-color:var(--green); color:var(--green);}
  .badge.oss{border-color:#6FA8DC; color:#6FA8DC;}
  .badge.pro{border-color:var(--text-dim); color:var(--text-dim);}
  .why{font-size:13px; color:var(--text-dim); margin:6px 0 10px; line-height:1.5;}
  .why b{color:var(--text); font-weight:600;}
  .matched-tags{font-size:11.5px; color:var(--text-faint);}
  .matched-tags .tag{color:var(--amber);}
  .card-actions{display:flex; gap:14px; margin-top:10px;}
  .card-actions button{background:none; border:none; color:var(--text-faint); font-size:12px; padding:0; border-bottom:1px solid transparent;}
  .card-actions button:hover{color:var(--text); border-bottom-color:var(--text-faint);}
  .card-actions button.on{color:var(--amber); border-bottom-color:var(--amber);}
  .match-score{text-align:right;}
  .match-score .pct{font-family:'IBM Plex Mono'; font-size:22px; color:var(--amber);}
  .match-score .lbl{font-size:10px; color:var(--text-faint); margin-top:2px;}

  .empty-note{padding:40px 20px; text-align:center; color:var(--text-dim); font-size:14px;}

  /* ---- compare bar ---- */
  .compare-bar{
    position:fixed; bottom:0; left:0; right:0; background:var(--bg-deep);
    border-top:1px solid var(--amber); padding:14px 24px;
    display:none; align-items:center; justify-content:space-between;
    z-index:50;
  }
  .compare-bar.show{display:flex;}
  .compare-bar .names{font-size:13px; color:var(--text-dim);}
  .compare-bar .names b{color:var(--text);}
  .compare-bar button{background:var(--amber); color:#1A1204; border:none; padding:9px 18px; font-size:13px; font-weight:600;}

  /* ---- tool detail ---- */
  .detail-head{padding:30px 0 20px; border-bottom:1px solid var(--line-soft);}
  .back-link{font-size:12.5px; color:var(--text-faint); margin-bottom:16px; display:inline-block;}
  .back-link:hover{color:var(--amber);}
  .detail-head h2{font-size:28px; margin-bottom:8px;}
  .detail-sub{color:var(--text-dim); font-size:14px; max-width:640px; line-height:1.6;}
  .detail-badges{display:flex; gap:8px; margin-top:12px;}
  .detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px;}
  @media (max-width:700px){.detail-grid{grid-template-columns:1fr;}}
  .attr-block{padding:16px 18px;}
  .attr-block h4{font-size:11px; color:var(--text-faint); margin-bottom:10px; letter-spacing:.02em;}
  .attr-block .val{font-size:14px; line-height:1.7;}
  .val .unk{color:var(--text-faint); font-style:italic;}
  .chip-row{display:flex; flex-wrap:wrap; gap:6px;}
  .chip{font-family:'IBM Plex Mono'; font-size:11.5px; background:var(--panel-2); padding:3px 8px; border:1px solid var(--line);}
  .evidence-box{margin-top:18px; padding:14px 18px; border-left:2px solid var(--amber); background:var(--panel);}
  .evidence-box .lbl{font-size:11px; color:var(--amber); margin-bottom:4px;}
  .evidence-box .txt{font-size:13px; color:var(--text-dim); line-height:1.6;}
  .detail-actions{display:flex; gap:12px; margin-top:24px;}
  .btn-primary{background:var(--amber); color:#1A1204; border:none; padding:12px 22px; font-size:13.5px; font-weight:600;}
  .btn-ghost{background:none; border:1px solid var(--line); color:var(--text-dim); padding:12px 22px; font-size:13.5px;}
  .related-section{margin-top:40px;}
  .related-section h3{font-size:14px; color:var(--text-faint); margin-bottom:14px; font-weight:500;}
  .related-list{display:flex; flex-direction:column; gap:8px;}
  .related-item{padding:12px 16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer;}
  .related-item:hover{border-color:var(--amber);}
  .related-item .rn{font-family:'Space Grotesk'; font-size:14px;}
  .related-item .rl{font-size:11.5px; color:var(--text-faint);}

  /* ---- compare page ---- */
  .compare-head{padding:28px 0 20px;}
  .compare-table-wrap{overflow-x:auto;}
  table.compare-table{width:100%; border-collapse:collapse; min-width:600px;}
  table.compare-table th, table.compare-table td{
    text-align:left; padding:12px 16px; border-bottom:1px solid var(--line-soft);
    font-size:13px; vertical-align:top;
  }
  table.compare-table th{color:var(--text-faint); font-weight:500; font-size:11.5px; width:130px;}
  table.compare-table td.tool-col-name{font-family:'Space Grotesk'; font-size:15px; color:var(--text);}
  table.compare-table tr:first-child td, table.compare-table tr:first-child th{border-top:1px solid var(--line-soft);}
  .compare-empty{padding:60px 20px; text-align:center; color:var(--text-dim);}
  .compare-empty a{color:var(--amber); border-bottom:1px solid var(--amber); padding-bottom:1px;}

  /* ---- vendors page ---- */
  .vendors-hero{padding:56px 0 20px; text-align:center;}
  .vendors-hero h1{font-size:30px; max-width:560px; margin:0 auto 14px;}
  .vendors-hero p{color:var(--text-dim); font-size:14.5px; max-width:520px; margin:0 auto; line-height:1.7;}
  .vendors-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px;}
  @media (max-width:700px){.vendors-grid{grid-template-columns:1fr;}}
  .vendor-card{padding:22px 20px;}
  .vendor-card .vnum{font-family:'IBM Plex Mono'; color:var(--amber); font-size:12px; margin-bottom:12px;}
  .vendor-card h4{font-size:15px; margin-bottom:8px;}
  .vendor-card p{font-size:13px; color:var(--text-dim); line-height:1.6; margin:0;}
  .vendors-cta{text-align:center; margin-top:44px; padding-top:32px; border-top:1px solid var(--line-soft);}
  .vendors-cta form{display:flex; gap:10px; max-width:420px; margin:18px auto 0;}
  .vendors-cta input{flex:1; background:var(--panel); border:1px solid var(--line); padding:11px 14px; color:var(--text); font-size:13.5px;}
  .vendors-cta .note{font-size:11.5px; color:var(--text-faint); margin-top:10px;}

  footer{margin-top:70px; padding-top:22px; border-top:1px solid var(--line-soft); color:var(--text-faint); font-size:12px; text-align:center;}