:root{
    --bg:#f5f7fb;
    --bg-2:#eef2f8;
    --panel:#ffffff;
    --panel-soft:#f8fafc;
    --ink:#172033;
    --ink-soft:#64748b;
    --line:#e2e8f0;
    --primary:#635bff;
    --primary-dark:#4f46e5;
    --primary-soft:#eeedff;
    --accent:#06b6d4;
    --success:#16a34a;
    --display-bg:#111827;
    --display-text:#f8fafc;
    --shadow:0 12px 35px rgba(15,23,42,.08);
    --shadow-hover:0 18px 45px rgba(15,23,42,.13);
    --radius:18px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    min-height:100vh;
    background:
      radial-gradient(circle at 10% 0%, rgba(99,91,255,.10), transparent 28%),
      radial-gradient(circle at 95% 8%, rgba(6,182,212,.08), transparent 24%),
      linear-gradient(180deg,var(--bg),#fff 70%);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
  }

  h1,h2,h3,.brand,.tool-title,.nav-cat{
    font-family:'Space Grotesk','Inter',sans-serif;
  }
  .mono,input,select,.readout,.readout *{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
  a{color:var(--primary);}

  .shell{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    min-height:100vh;
  }

  header.top{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:18px 34px;
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid rgba(226,232,240,.9);
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(18px);
    box-shadow:0 5px 20px rgba(15,23,42,.04);
  }

  .brand{
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:-.03em;
    display:flex;
    align-items:baseline;
    gap:7px;
  }
  .brand .tick{
    color:var(--primary);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-weight:700;
    font-size:.9rem;
  }
  .top-sub{font-size:.8rem;color:var(--ink-soft);margin-top:2px;}

  button.menu-toggle{
    display:none;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:9px 13px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    cursor:pointer;
    color:var(--ink);
  }

  nav.sidebar{
    border-right:1px solid var(--line);
    background:rgba(255,255,255,.82);
    padding:22px 12px 70px;
    overflow-y:auto;
    max-height:calc(100vh - 76px);
    position:sticky;
    top:76px;
    align-self:start;
  }

  .nav-cat{
    font-size:.68rem;
    color:#94a3b8;
    padding:19px 13px 7px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:700;
  }
  .nav-cat:first-child{padding-top:5px;}

  .nav-item{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    text-align:left;
    background:transparent;
    border:0;
    border-radius:11px;
    padding:10px 12px;
    margin:2px 0;
    font-size:.88rem;
    color:#334155;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:.18s ease;
  }
  .nav-item:hover{background:#f1f5f9;color:var(--ink);transform:translateX(2px);}
  .nav-item.active{
    background:var(--primary-soft);
    color:var(--primary-dark);
    font-weight:700;
  }
  .nav-item .num{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.65rem;
    color:#94a3b8;
    width:22px;
  }
  .nav-item.active .num{color:var(--primary);}

  main{
    width:100%;
    max-width:1180px;
    padding:52px clamp(24px,5vw,72px) 90px;
    margin:0 auto;
  }

  .home-hero{
    position:relative;
    overflow:hidden;
    padding:42px 44px;
    border:1px solid rgba(99,91,255,.13);
    border-radius:28px;
    background:
      radial-gradient(circle at 85% 20%, rgba(6,182,212,.16), transparent 24%),
      radial-gradient(circle at 72% 100%, rgba(99,91,255,.18), transparent 32%),
      linear-gradient(135deg,#fff,#f6f5ff);
    box-shadow:var(--shadow);
  }
  .home-hero:after{
    content:"";
    position:absolute;
    width:170px;height:170px;
    right:-55px;bottom:-70px;
    border-radius:50%;
    border:28px solid rgba(99,91,255,.08);
  }
  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(99,91,255,.09);
    color:var(--primary-dark);
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em;
  }
  .hero-badge:before{content:"✦";font-size:.8rem;}
  .home-hero h1{
    font-size:clamp(2.2rem,4vw,3.6rem);
    line-height:1.04;
    margin:16px 0 14px;
    max-width:780px;
    font-weight:800;
    letter-spacing:-.055em;
  }
  .home-hero p{
    color:var(--ink-soft);
    max-width:690px;
    font-size:1.02rem;
    margin:0;
  }

  .home-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:18px;
    background:transparent;
    border:0;
    margin-top:30px;
  }
  .home-card{
    position:relative;
    min-height:140px;
    background:rgba(255,255,255,.92);
    padding:22px;
    cursor:pointer;
    text-align:left;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 5px 18px rgba(15,23,42,.04);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  }
  .home-card:after{
    content:"→";
    position:absolute;
    right:18px;bottom:15px;
    color:#cbd5e1;
    font-size:1.15rem;
    transition:.2s;
  }
  .home-card:focus-visible{outline:3px solid rgba(99,91,255,.22);outline-offset:2px;}
  .home-card:hover{
    background:#fff;
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
    border-color:#c7d2fe;
  }
  .home-card:hover:after{color:var(--primary);transform:translateX(4px);}
  .home-card .cat{
    display:inline-block;
    font-size:.66rem;
    color:var(--primary-dark);
    background:var(--primary-soft);
    padding:5px 8px;
    border-radius:999px;
    margin-bottom:12px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-weight:600;
  }
  .home-card .name{
    font-family:'Space Grotesk','Inter',sans-serif;
    font-weight:700;
    font-size:1.02rem;
    line-height:1.25;
    max-width:210px;
  }

  .tool-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:0;
    padding:0 0 16px;
    margin-bottom:10px;
    gap:16px;
    flex-wrap:wrap;
  }
  .tool-title{font-size:clamp(1.7rem,3vw,2.25rem);font-weight:800;margin:0;letter-spacing:-.04em;}
  .tool-cat{
    font-size:.68rem;
    color:var(--primary-dark);
    background:var(--primary-soft);
    padding:6px 10px;
    border-radius:999px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-weight:600;
  }
  .tool-desc{color:var(--ink-soft);margin:0 0 28px;font-size:.95rem;max-width:70ch;}

  .field-row{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:18px;
  }
  .field{
    display:flex;
    flex-direction:column;
    gap:7px;
    flex:1;
    min-width:160px;
  }
  .field label{font-size:.75rem;color:#475569;font-weight:700;}
  .field input,.field select,.field textarea{
    border:1px solid var(--line);
    background:#fff;
    padding:12px 13px;
    font-size:.92rem;
    border-radius:12px;
    color:var(--ink);
    box-shadow:0 2px 7px rgba(15,23,42,.025);
    transition:.18s;
  }
  .field textarea{resize:vertical;min-height:130px;}
  .field input:hover,.field select:hover,.field textarea:hover{border-color:#cbd5e1;}
  .field input:focus,.field select:focus,.field textarea:focus,.btn:focus{
    outline:3px solid rgba(99,91,255,.16);
    border-color:#a5b4fc;
    outline-offset:0;
  }

  .btn{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    border:0;
    padding:12px 19px;
    font-size:.9rem;
    border-radius:12px;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    font-weight:700;
    box-shadow:0 7px 16px rgba(79,70,229,.20);
    transition:.18s ease;
  }
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(79,70,229,.27);}
  .btn.secondary{
    background:#fff;
    color:#475569;
    border:1px solid var(--line);
    box-shadow:none;
  }
  .btn.secondary:hover{border-color:#94a3b8;color:var(--ink);}

  .readout{
    background:linear-gradient(135deg,#111827,#1e293b);
    color:var(--display-text);
    border-radius:18px;
    padding:22px 24px;
    margin-top:22px;
    min-height:70px;
    box-shadow:0 12px 30px rgba(15,23,42,.16);
    border:1px solid rgba(255,255,255,.07);
  }
  .readout .label{
    font-size:.64rem;
    color:#94a3b8;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:6px;
    font-weight:600;
  }
  .readout .value{font-size:1.85rem;font-weight:700;line-height:1.3;}
  .readout .value small{font-size:1rem;color:#cbd5e1;font-weight:400;}
  .readout .subline{font-size:.8rem;color:#a8b3c5;margin-top:5px;}
  .readout.empty .value{color:#94a3b8;font-size:.92rem;font-family:'Inter',sans-serif;}

  .qr-box img{
    display:block;
    margin-top:15px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    padding:10px;
    box-shadow:var(--shadow);
  }

  table.result-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    margin-top:22px;
    font-size:.88rem;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
  }
  table.result-table th,table.result-table td{
    text-align:left;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
  }
  table.result-table tr:last-child th,table.result-table tr:last-child td{border-bottom:0;}
  table.result-table th{color:#64748b;font-weight:700;font-size:.72rem;background:#f8fafc;}

  footer.site{
    grid-column:1 / -1;
    border-top:1px solid var(--line);
    padding:30px clamp(24px,5vw,72px);
    font-size:.78rem;
    color:var(--ink-soft);
    background:#fff;
    text-align:center;
  }


  .home-topbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin:0 0 24px;
    flex-wrap:wrap;
  }
  .section-kicker{
    color:var(--primary);
    font-size:.7rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.09em;
    margin-bottom:7px;
  }
  .section-title{
    margin:0;
    font-family:'Space Grotesk','Inter',sans-serif;
    font-size:1.75rem;
    letter-spacing:-.04em;
  }
  .tool-search{
    width:min(360px,100%);
    position:relative;
  }
  .tool-search input{
    width:100%;
    border:1px solid var(--line);
    background:#fff;
    border-radius:13px;
    padding:12px 15px 12px 42px;
    font-family:'Inter',sans-serif;
    font-size:.9rem;
    box-shadow:0 3px 12px rgba(15,23,42,.04);
  }
  .tool-search:before{
    content:"⌕";
    position:absolute;
    left:15px;
    top:8px;
    font-size:1.3rem;
    color:#94a3b8;
    z-index:1;
  }
  .category-tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:24px;
  }
  .category-tab{
    border:1px solid var(--line);
    background:#fff;
    color:#64748b;
    border-radius:999px;
    padding:8px 13px;
    cursor:pointer;
    font-size:.76rem;
    font-weight:700;
    transition:.18s;
  }
  .category-tab:hover{
    border-color:#c7d2fe;
    color:var(--primary-dark);
  }
  .category-tab.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    box-shadow:0 6px 14px rgba(99,91,255,.2);
  }
  .tools-count{
    margin:0 0 13px;
    color:#94a3b8;
    font-size:.76rem;
  }
  .home-card{
    display:block;
  }
  .home-card .icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:linear-gradient(135deg,#f0efff,#e7f8fb);
    margin-bottom:13px;
    font-size:1.25rem;
  }
  .tool-view{
    max-width:900px;
    margin:0 auto;
  }
  .back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:0;
    background:none;
    color:#64748b;
    padding:0;
    margin:0 0 20px;
    cursor:pointer;
    font-size:.82rem;
    font-weight:700;
  }
  .back-link:hover{color:var(--primary);}
  .tool-panel{
    background:rgba(255,255,255,.92);
    border:1px solid var(--line);
    border-radius:22px;
    padding:28px;
    box-shadow:var(--shadow);
  }
  .tool-panel .tool-header{margin-bottom:8px;}
  .tool-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:2px;
  }
  .no-results{
    text-align:center;
    padding:50px 20px;
    border:1px dashed #cbd5e1;
    border-radius:18px;
    background:#fff;
    color:#64748b;
  }
  .no-results strong{
    display:block;
    color:var(--ink);
    font-family:'Space Grotesk',sans-serif;
    font-size:1.05rem;
    margin-bottom:5px;
  }


  .home-section{margin-top:46px;}
  .section-copy{color:#64748b;max-width:72ch;font-size:.9rem;margin:7px 0 0;}
  .popular-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:18px;}
  .popular-card{
    display:flex;align-items:center;gap:12px;
    background:#fff;border:1px solid var(--line);border-radius:15px;
    padding:14px;cursor:pointer;transition:.18s;box-shadow:0 4px 14px rgba(15,23,42,.035);
  }
  .popular-card:hover{transform:translateY(-2px);border-color:#c7d2fe;box-shadow:var(--shadow);}
  .popular-card .picon{font-size:1.25rem;}
  .popular-card .pname{font-size:.82rem;font-weight:750;line-height:1.25;}
  .seo-content{
    margin-top:54px;padding:30px;border:1px solid var(--line);border-radius:20px;background:#fff;
  }
  .seo-content h2{font-size:1.4rem;margin:0 0 12px;letter-spacing:-.03em;}
  .seo-content h3{font-size:1rem;margin:24px 0 7px;}
  .seo-content p,.seo-content li{font-size:.86rem;color:#64748b;line-height:1.7;}
  .seo-content ul{padding-left:20px;}
  .legal-page{
    max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);
    border-radius:22px;padding:34px;box-shadow:var(--shadow);
  }
  .legal-page h1{margin-top:0;letter-spacing:-.04em;}
  .legal-page h2{font-size:1.1rem;margin-top:28px;}
  .legal-page p,.legal-page li{font-size:.86rem;color:#64748b;line-height:1.7;}
  .tool-tip{
    display:inline-flex;align-items:center;gap:6px;margin-top:10px;
    color:#94a3b8;font-size:.7rem;
  }
  .ad-slot{
    min-height:90px;margin:28px 0;border:1px dashed #cbd5e1;border-radius:14px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    color:#94a3b8;font-size:.7rem;background:#f8fafc;
  }

  .seo-tool-page{
    max-width:900px;
    margin:0 auto;
  }
  .seo-breadcrumb{
    display:flex;align-items:center;gap:7px;flex-wrap:wrap;
    color:#94a3b8;font-size:.72rem;margin-bottom:14px;
  }
  .seo-breadcrumb a{color:#64748b;text-decoration:none;font-weight:700;}
  .seo-breadcrumb a:hover{color:var(--primary);}
  .seo-intro{
    background:linear-gradient(135deg,#ffffff,#f7f6ff);
    border:1px solid #e7e5ff;border-radius:20px;
    padding:26px;margin-bottom:20px;
  }
  .seo-intro h1{
    margin:0 0 9px;font-size:clamp(1.8rem,3vw,2.45rem);
    line-height:1.1;letter-spacing:-.045em;
  }
  .seo-intro p{margin:0;color:#64748b;font-size:.94rem;max-width:72ch;}
  .seo-links{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:10px;margin-top:20px;
  }
  .seo-link-card{
    display:block;padding:13px 14px;background:#fff;border:1px solid var(--line);
    border-radius:13px;text-decoration:none;color:var(--ink);font-size:.78rem;font-weight:700;
  }
  .seo-link-card:hover{border-color:#c7d2fe;color:var(--primary-dark);transform:translateY(-1px);}
  .seo-mini-title{
    font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:800;
    margin:0 0 8px;letter-spacing:-.025em;
  }
  @media (max-width:560px){
    .seo-intro{padding:22px 18px;}
  }

  @media (max-width: 860px){
    .shell{grid-template-columns:1fr;}
    nav.sidebar{
      position:fixed;
      top:73px;left:0;right:auto;bottom:0;
      height:calc(100dvh - 73px);
      max-height:none;
      z-index:80;
      transform:translate3d(-105%,0,0);
      transition:transform .22s ease;
      width:86%;
      max-width:320px;
      overflow-y:auto;
      overflow-x:hidden;
      -webkit-overflow-scrolling:touch;
      touch-action:pan-y;
      overscroll-behavior:contain;
      box-shadow:12px 0 35px rgba(15,23,42,.12);
    }
    nav.sidebar.open{transform:translate3d(0,0,0);}
    button.menu-toggle{display:block;}
    main{padding:30px 18px 65px;}
    .home-hero{padding:30px 24px;border-radius:22px;}
    .home-hero h1{font-size:2.25rem;}
    .home-grid{grid-template-columns:1fr 1fr;gap:12px;}
    .tool-panel{padding:22px;}
  }

  @media (max-width: 560px){
    header.top{padding:15px 18px;}
    .top-sub{font-size:.72rem;}
    .brand{font-size:1.12rem;}
    .home-grid{grid-template-columns:1fr;}
    .tool-search{width:100%;}
    .home-topbar{align-items:stretch;}
    .home-card{min-height:120px;}
    .tool-header{align-items:flex-start;flex-direction:column;}
    .field{min-width:100%;}
  }