/* ---- Site skin (clean + minimal) ---- */
 :root {
     --card-border: #e9eef5;
     --ink: #0f172a;
     --muted: #64748b;
     --muted-2: #94a3b8;
     --brand: #2563eb;
     --soft: #eef5ff;
 }

 body {
     background: #f8fafc;
     color: var(--ink);
 }

 /* Category chips */
 .cat-chips .button {
     margin: 0 .35rem .35rem 0;
 }

 /* ---- Tool grid ---- */
 .tool-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     gap: 14px;
 }

 .tool-card {
     display: block;
     background: #fff;
     border: 1px solid var(--card-border);
     border-radius: 12px;
     padding: 12px;
     transition: box-shadow .15s ease, transform .05s ease;
 }

 .tool-card:hover {
     box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
     transform: translateY(-1px);
 }

 .tc-head {
     display: grid;
     grid-template-columns: auto 1fr auto;
     gap: 10px;
     align-items: center;
 }

 .tool-ico {
     width: 38px;
     height: 38px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(180deg, #eef5ff, #e8f0ff);
     color: var(--brand);
     font-size: 18px;
 }

 .tc-title {
     font-weight: 600;
     color: var(--ink);
     line-height: 1.2;
 }

 .tc-cat {
     font-size: .8rem;
     color: var(--muted);
 }

 .tc-views {
     font-size: .8rem;
     color: var(--muted);
     text-align: right;
 }

 .tc-views span {
     color: var(--muted-2);
 }

 .tc-desc {
     margin: 8px 0 6px;
     color: #334155;
     font-size: .92rem;
     line-height: 1.35;
     min-height: 2.6em;
 }

 .tc-tags {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
 }

 .tag {
     border-radius: 999px;
 }

 /* Hide empty ad slots */
 .ad-slot:empty {
     display: none;
 }

 /* Home hero spacing */
 .hero .hero-body {
     padding-top: 1.5rem;
     padding-bottom: 1rem;
 }

 /* ---- Related tools slider ---- */
 .rt-wrap {
     position: relative;
     margin-top: .5rem;
 }

 .rt-slider {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: minmax(220px, 1fr);
     gap: 14px;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     padding: 8px 2.2rem;
 }

 .rt-slider::-webkit-scrollbar {
     height: 8px;
 }

 .rt-slider::-webkit-scrollbar-thumb {
     background: #c7d2fe;
     border-radius: 10px;
 }

 .rt-slider.is-dragging {
     cursor: grabbing;
 }

 .rt-card {
     scroll-snap-align: start;
     background: #fff;
     border: 1px solid var(--card-border);
     border-radius: 12px;
     padding: 12px;
     min-height: 96px;
     display: grid;
     grid-template-columns: 38px 1fr;
     grid-template-rows: auto auto;
     column-gap: 10px;
     align-content: center;
     text-decoration: none;
     transition: box-shadow .15s ease, transform .05s ease;
 }

 .rt-card:hover {
     box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
     transform: translateY(-1px);
 }

 .rt-ico {
     grid-row: 1 / span 2;
     width: 38px;
     height: 38px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--soft);
     color: var(--brand);
     font-size: 18px;
 }

 .rt-title {
     font-weight: 600;
     color: var(--ink);
     line-height: 1.2;
 }

 .rt-cat {
     font-size: .8rem;
     color: var(--muted);
 }

 .rt-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     border: none;
     width: 36px;
     height: 36px;
     border-radius: 18px;
     background: #fff;
     box-shadow: 0 6px 14px rgba(16, 24, 40, .12);
     cursor: pointer;
     z-index: 2;
     line-height: 36px;
     font-size: 20px;
     color: #334155;
 }

 .rt-prev {
     left: 2px;
 }

 .rt-next {
     right: 2px;
 }

 @media (max-width:480px) {
     .rt-slider {
         padding: 8px 1.6rem;
         grid-auto-columns: minmax(180px, 75%);
     }

     .rt-prev,
     .rt-next {
         display: none;
     }

     /* native swipe is enough */
 }

 /* ---- Global Search Autosuggest ---- */
 .gs-wrap {
     position: relative;
     min-width: 320px;
 }

 .gs-panel {
     position: absolute;
     top: calc(100% + 6px);
     left: 0;
     right: 0;
     z-index: 1000;
     display: none;
     /* above navbar */
 }

 .gs-panel.is-active {
     display: block;
 }

 .gs-panel .dropdown-card {
     background: #fff;
     border: 1px solid #e5e7eb;
     border-radius: 10px;
     box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
     overflow: hidden;
 }

 .gs-head {
     padding: 8px 12px;
     font-size: .8rem;
     color: #64748b;
     border-bottom: 1px solid #f1f5f9;
     letter-spacing: .02em;
 }

 .gs-list {
     padding: 6px;
     max-height: 56vh;
     overflow: auto;
 }

 .gs-item {
     display: flex;
     gap: 10px;
     align-items: center;
     padding: 8px 10px;
     border-radius: 8px;
     text-decoration: none;
     color: var(--ink);
 }

 .gs-item:hover,
 .gs-item.is-active {
     background: #5865f2;
     color: #fff;
 }

 /* darker bg */
 .gs-item .gs-ico {
     width: 30px;
     height: 30px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--soft);
     color: var(--brand);
 }

 .gs-item .gs-title {
     font-weight: 600;
     line-height: 1.1;
 }

 .gs-item .gs-sub {
     font-size: .75rem;
     color: #64748b;
 }

 /* normal (gray) */
 .gs-item:hover .gs-sub,
 .gs-item.is-active .gs-sub {
     color: #ffffff;
 }

 /* <<< WHITE on hover/active */
 .gs-empty {
     padding: 10px 12px;
     color: #94a3b8;
 }

 .gs-panel mark {
     background: #fff3cd;
     color: inherit;
     padding: 0 .1em;
     border-radius: 2px;
 }

 @media (max-width:480px) {
     .gs-wrap {
         min-width: 0;
         width: 72vw;
     }
 }

 /* ---- Navbar alignment tweaks (keeps search tidy) ---- */
 .navbar .field.has-addons .control.is-expanded {
     min-width: 240px;
 }

 .navbar .field.has-addons .input {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }

 .navbar .field.has-addons .button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }