:root{
    --bg: #f7f4ee;
    --bg-soft: #efeade;
    --panel: #fffdf8;
    --panel-edge: #e2dccc;
    --rule: #e2dccc;
    --ink: #211c12;
    --ink-dim: #6b6356;
    --ink-faint: #9a9183;
    --amber: #b5660a;
    --amber-dim: #8c4e08;
    --amber-glow: rgba(181,102,10,.14);
    --teal: #0d8f7e;
    --red: #c23b32;
    --radius: 2px;
    --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    padding-top:56px;
    background:var(--bg);
    background-image:
      radial-gradient(circle at 12% 8%, rgba(181,102,10,.05), transparent 40%),
      radial-gradient(circle at 90% 90%, rgba(13,143,126,.05), transparent 45%);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--amber); text-decoration:none;}
  a:hover{text-decoration:underline;}
  ::selection{background:var(--amber-glow); color:var(--ink);}

  button{font-family:inherit; cursor:pointer;}
  button:focus-visible,
  a:focus-visible,
  input:focus-visible{
    outline:2px solid var(--teal);
    outline-offset:2px;
  }

  .mono{font-family:var(--mono);}

  /* ---------------- TOPBAR ---------------- */
  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; gap:24px;
    padding:14px 28px;
    background:rgba(247,244,238,.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--rule);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:var(--mono); font-weight:700;
    letter-spacing:.04em;
    white-space:nowrap;
  }
  .brand a{ display:flex; align-items:center; }
  .brand img{ height:38px; width:auto; display:block; }
  .brand .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 8px 2px var(--amber-glow);
    animation:blink 2.4s ease-in-out infinite;
  }
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* On desktop the collapse wrapper is transparent so its children
     (nav, search, clock) lay out directly inside the topbar flex row. */
  .topbar-collapse{ display:contents; }

  /* Hamburger button — hidden on desktop, shown via the mobile query below. */
  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:38px; height:36px;
    margin-left:auto;
    padding:8px 7px;
    background:transparent;
    border:1px solid var(--rule);
    border-radius:var(--radius);
    flex:0 0 auto;
  }
  .nav-toggle span{
    display:block; height:2px; width:100%;
    background:var(--ink); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .topbar.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .topbar.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .topbar.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  body.nav-locked{ overflow:hidden; }

  /* Contextual back button — hidden on desktop (the breadcrumb in .topnav is
     visible there) and shown on mobile where the nav lives inside the drawer. */
  .topbar-back{
    display:none;
    align-items:center;
    gap:6px;
    flex:0 1 auto;
    min-width:2.5rem;
    max-width:44vw;
    font-family:var(--mono);
    font-size:12px;
    color:var(--ink-dim);
    background:var(--panel);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    padding:7px 12px;
    white-space:nowrap;
    overflow:hidden;
  }
  .topbar-back:hover{ color:var(--amber); border-color:var(--amber-dim); text-decoration:none; }
  .topbar-back-arrow{ font-size:14px; line-height:1; flex:0 0 auto; }
  .topbar-back-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .topnav{
    display:flex; gap:4px;
    flex:1;
    justify-content:center;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .topnav::-webkit-scrollbar{display:none;}
  .topnav a{
    font-family:var(--mono); font-size:13px;
    color:var(--ink-dim);
    padding:8px 12px;
    border:1px solid transparent;
    white-space:nowrap;
    letter-spacing:.03em;
    border-radius:var(--radius);
  }
  .topnav a:hover{ color:var(--ink); text-decoration:none; }
  .topnav a.active{
    color:#2563eb;
    border-color:var(--panel-edge);
    background:var(--panel);
  }

  .clock{
    font-family:var(--mono); font-size:12px;
    color:var(--ink-faint);
    white-space:nowrap;
  }
  .topbar-support{
    font-family:var(--mono);
    font-size:12px;
    font-weight:600;
    color:#2563eb;
    text-decoration:none;
    white-space:nowrap;
    padding:6px 12px;
    border-radius:6px;
    transition:background .2s;
  }
  .topbar-support:hover{ background:var(--bg-soft); }

  .search-wrap{
    position:relative;
    width:220px;
  }
  .search-wrap input{
    width:100%;
    background:var(--bg-soft);
    border:1px solid var(--rule);
    color:var(--ink);
    font-family:var(--mono);
    font-size:12px;
    padding:8px 10px 8px 28px;
    border-radius:var(--radius);
  }
  .search-wrap input::placeholder{color:var(--ink-faint);}
  .search-wrap svg{
    position:absolute; left:8px; top:50%; transform:translateY(-50%);
    width:14px; height:14px; color:var(--ink-faint);
  }

  @media (max-width: 880px){
    .topbar{ gap:10px; padding:10px 16px; flex-wrap:nowrap; }
    .brand{ flex:0 0 auto; }
    .topbar-back{ display:inline-flex; }
    .nav-toggle{ display:flex; }

    /* Collapse wrapper becomes a slide-down drawer under the fixed bar. */
    .topbar-collapse{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:14px;
      position:fixed;
      top:56px; left:0; right:0;
      max-height:calc(100vh - 56px);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
      background:rgba(247,244,238,.98);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--rule);
      box-shadow:0 14px 28px rgba(0,0,0,.08);
      transform:translateY(-10px);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .22s ease, transform .22s ease, visibility .22s;
    }
    .topbar.menu-open .topbar-collapse{
      transform:translateY(0);
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    .topnav{
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-start;
      gap:4px;
      flex:none;
      overflow:visible;
    }
    .topnav a{
      font-size:14px;
      padding:11px 14px;
      border:1px solid var(--rule);
      border-radius:var(--radius);
    }
    .search-wrap{ width:100%; }
    .search-wrap input{ padding:11px 12px 11px 32px; font-size:14px; }
    .search-wrap svg{ width:16px; height:16px; }
    .clock{ text-align:center; font-size:12px; }
  }

  @media (prefers-reduced-motion: reduce){
    .topbar-collapse,
    .nav-toggle span{ transition:none; }
  }

  /* ---------------- HERO / BOARD ---------------- */
  .hero{
    padding:64px 28px 40px;
    max-width:1100px; margin:0 auto;
  }
  .hero .eyebrow{
    font-family:var(--mono); font-size:12px; color:#2563eb;
    letter-spacing:.18em; text-transform:uppercase;
    margin-bottom:14px;
  }
  .hero h1{
    font-family:var(--mono);
    font-size:clamp(28px, 5vw, 46px);
    line-height:1.15;
    margin:0 0 16px;
    font-weight:700;
  }
  .hero p.lede{
    color:var(--ink-dim);
    max-width:560px;
    font-size:15.5px;
    margin:0 0 36px;
  }

  .board{
    border:1px solid var(--rule);
    background:var(--panel);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .board-head{
    display:grid;
    grid-template-columns: 70px 1fr 110px 90px 105px;
    column-gap:8px;
    padding:10px 20px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    color:var(--ink-faint);
    text-transform:uppercase;
    border-bottom:1px solid var(--rule);
  }
  .board-head span:nth-child(3){ text-align:center; }
  .board-head span:nth-child(4){ text-align:center; }
  .board-head span:last-child{ text-align:right; }
  .board-row{
    display:grid;
    grid-template-columns: 70px 1fr 110px 90px 105px;
    align-items:center;
    column-gap:8px;
    padding:14px 20px;
    border-bottom:1px solid var(--rule);
    text-decoration:none;
    color:var(--ink);
    transition:background .15s ease;
  }
  .board-row:last-child{border-bottom:none;}
  .board-row:hover{ background:var(--bg-soft); text-decoration:none; }
  .board-row .code{ display:flex; align-items:center; justify-content:flex-start; }
  .board-row .code img{ width:56px; height:auto; display:block; border-radius:5px; }
  .board-row .dest{ font-weight:600; font-size:14.5px; text-decoration:none; color:inherit; }
  .board-row .dest:hover{ text-decoration:underline; }
  .board-row .sub{ display:block; font-weight:400; font-size:12px; color:var(--ink-faint); margin-top:2px; }
  .free-badge{
    display:inline-block;
    padding:1px 7px;
    border-radius:999px;
    border:1px solid var(--rule);
    font-size:9px;
    font-weight:600;
    letter-spacing:.06em;
    vertical-align:middle;
    line-height:1.4;
    color:var(--ink-dim);
    margin-left:6px;
  }
  .pro-badge{
    display:inline-block;
    padding:1px 7px;
    border-radius:999px;
    background:#16a34a;
    color:#fff;
    font-size:9px;
    font-weight:700;
    letter-spacing:.06em;
    vertical-align:middle;
    margin-left:3px;
    line-height:1.4;
  }
  .count-wrap{ display:flex; justify-content:center; }
  .board-row a.count{ font-family:var(--mono); font-size:13px; padding:3px 10px;
    border-radius:999px;
    background:var(--bg);
    color:var(--ink-dim);
    border:1px solid var(--rule);
    text-decoration:none;
    transition:background .15s ease, border-color .15s ease;
    letter-spacing:.02em;
    font-weight:500;
  }
  .board-row a.count:hover{ background:var(--amber-glow); border-color:var(--amber); color:var(--amber); }
  .board-row .go{ font-family:var(--mono); font-size:11px; }
  .board-row a.go{
    font-family:var(--mono);
    font-size:12px;
    font-weight:600;
    border-radius:6px;
    background:#2563eb;
    color:#fff;
    text-decoration:none;
    transition:background .2s;
    white-space:nowrap;
    display:inline-flex;
    padding:7px 14px;
    justify-self:end;
  }
  .board-row a.go:hover{ background:#1d4ed8; }
  .board-row a.buy{
    font-family:var(--mono);
    font-size:12px;
    font-weight:600;
    padding:7px 14px;
    border-radius:6px;
    background:transparent;
    color:var(--ink-dim);
    border:1px solid var(--rule);
    text-decoration:none;
    transition:background .2s, color .2s;
    white-space:nowrap;
    display:inline-flex;
    justify-self:center;
    grid-column:4;
  }
  .board-row a.buy:hover{ background:var(--bg-soft); color:var(--ink); border-color:var(--ink-faint); }
  .btn-group{ display:contents; }
  .board-actions{ display:contents; }
  .board-row a.go{ grid-column:5; justify-self:end; }

  .flap{
    display:inline-block;
    transform-origin:top center;
    animation:flap-in .5s cubic-bezier(.2,.8,.2,1) both;
  }
  @media (prefers-reduced-motion: reduce){
    .flap{animation:none;}
  }
  @keyframes flap-in{
    0%{ transform:rotateX(-90deg); opacity:0; }
    60%{ transform:rotateX(8deg); opacity:1; }
    100%{ transform:rotateX(0deg); opacity:1; }
  }

  @media (max-width: 760px){
    .board-head{display:none;}
    .board-row{
      display:grid;
      grid-template-columns:auto 1fr;
      grid-template-areas:
        "logo name"
        ".    acts";
      align-items:center;
      gap:6px 10px;
      padding:16px;
    }
    .board-row > .code{ grid-area:logo; }
    .board-row .code img{ width:56px; }
    .board-row > .flap:not(.code){ grid-area:name; min-width:0; }
    .board-row .dest{ font-size:15px; }
    .board-actions{ grid-area:acts; display:flex; flex-wrap:nowrap; gap:0; align-items:center; }
    .board-actions > .count-wrap{ white-space:nowrap; }
    .board-actions > .btn-group{ display:inline-flex; gap:6px; flex-wrap:nowrap; margin-left:auto; }
    .board-actions > .btn-group a{ font-size:11px; padding:6px 10px; white-space:nowrap; }
  }

  /* ---------------- DOCS LAYOUT (plugin / addon pages) ---------------- */
  .docs-section-wrap{
    display:flex; gap:40px;
    max-width:1200px; margin:0 auto;
    padding:40px 28px 80px;
    align-items:flex-start;
  }
  .docs-sidebar{
    flex:0 0 240px; position:sticky; top:84px;
    border-right:1px solid var(--rule);
    padding-right:24px; align-self:flex-start;
  }
  .docs-sidebar-title{
    font-family:var(--mono); font-size:12px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ink-faint);
    margin:0 0 16px;
  }
  .docs-sidebar-title:not(:first-child){
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid var(--rule);
  }
  .docs-nav{display:flex; flex-direction:column; gap:2px;}
  .docs-nav-link{
    font-family:var(--mono); font-size:13px; color:var(--ink-dim);
    padding:6px 12px; border-radius:var(--radius);
    border-left:2px solid transparent;
    transition:background .15s,color .15s,border-color .15s;
  }
  .docs-nav-link:hover{background:var(--bg-soft); color:var(--ink); text-decoration:none; border-left-color:var(--amber-glow);}
  .docs-nav-link.active{color:var(--amber); border-left-color:var(--amber); background:var(--amber-glow);}
  .docs-content{flex:1; min-width:0;}
  .docs-content img{width:100%; height:auto; display:block; border:1px solid var(--rule); border-radius:8px;}
  .video-player{position:relative; width:100%; cursor:pointer;}
  .video-player video{width:100%; height:auto; display:block; border:1px solid var(--rule); border-radius:8px; background:#fff;}
  .video-btn{position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,0.6); color:#fff; border:none; border-radius:50%; width:44px; height:44px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s; z-index:1;}
  .video-btn:hover{background:rgba(0,0,0,0.8);}
  .video-btn i{margin-left:2px;}
  .video-modal{position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; padding:24px;}
  .video-modal video{max-width:100%; max-height:90vh; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,0.5);}
  .video-modal .video-frame{width:90vw; max-width:960px; max-height:90vh; aspect-ratio:16/9; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,0.5); background:#000; overflow:hidden;}
  .video-modal .video-frame iframe{width:100%; height:100%; display:block; border:0;}
  .video-close{position:absolute; top:16px; right:24px; background:none; border:none; color:#fff; font-size:32px; cursor:pointer; line-height:1; opacity:0.7; transition:opacity .15s;}
  .video-close:hover{opacity:1;}
  .doc-section{
    scroll-margin-top:84px;
    margin-bottom:56px;
  }
  .doc-section h2{
    font-family:var(--mono); font-size:22px; font-weight:700;
    margin:0 0 8px;
    padding-bottom:8px;
    border-bottom:1px solid var(--rule);
  }
  .doc-section>p{
    color:var(--ink-dim); font-size:16px;
    margin:0 0 28px; max-width:640px;
  }
  .doc-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .doc-card{
    border:1px solid var(--panel-edge); background:var(--panel);
    border-radius:var(--radius); padding:20px 22px;
    transition:box-shadow .2s, border-color .2s;
  }
  .doc-card:hover{border-color:var(--rule); box-shadow:0 2px 12px rgba(0,0,0,.04);}
  .doc-card--full{grid-column:1/-1;}
  .doc-card h3{
    font-family:var(--mono); font-size:16px; font-weight:700;
    margin:0 0 12px; color:var(--ink);
  }
  .doc-card ul{margin:0; padding:0; list-style:none;}
  .doc-card ul li{
    position:relative; padding:5px 0 5px 18px;
    font-size:15px; color:var(--ink-dim); line-height:1.5;
  }
  .doc-card ul li::before{
    content:"\2013"; position:absolute; left:0; color:var(--ink-faint);
  }

  .shortcode-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:16px; margin-bottom:32px;}
  .shortcode-card{border:1px solid var(--panel-edge); background:var(--panel); border-radius:var(--radius); padding:20px 22px; transition:box-shadow .2s,border-color .2s;}
  .shortcode-card:hover{border-color:var(--rule); box-shadow:0 2px 12px rgba(0,0,0,.04);}
  .shortcode-card h3{font-family:var(--mono); font-size:16px; font-weight:700; margin:0 0 8px; color:var(--ink);}
  .shortcode-card p{font-size:15px; color:var(--ink-dim); margin:0 0 12px; line-height:1.5;}
  .shortcode-box{display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--rule); border-radius:6px; padding:6px 8px;}
  .shortcode-box code{flex:1; font-family:var(--mono); font-size:12px; color:var(--ink); overflow-x:auto; white-space:nowrap;}
  .copy-btn{flex-shrink:0; background:var(--amber); color:#fff; border:none; border-radius:4px; padding:5px 10px; font-size:11px; font-weight:600; cursor:pointer; transition:background .15s; font-family:inherit; line-height:1;}
  .copy-btn:hover{background:var(--ink);}
  .copy-btn.copied{background:#16a34a;}

  .params-table{
    width:100%; border-collapse:collapse;
    font-family:var(--mono); font-size:12px;
  }
  .params-table th,.params-table td{
    text-align:left; padding:6px 10px;
    border-bottom:1px solid var(--rule);
  }
  .params-table th{
    font-weight:600; color:var(--ink);
    background:var(--bg-soft);
  }
  .params-table tr:last-child td{border-bottom:none;}
  .params-table td code{font-size:12px; color:var(--amber);}

  .api-endpoints{display:flex; flex-direction:column; gap:12px;}
  .api-endpoint{
    display:flex; align-items:flex-start; gap:12px;
    border:1px solid var(--panel-edge); background:var(--panel);
    border-radius:var(--radius); padding:16px 20px;
    transition:border-color .2s;
  }
  .api-endpoint:hover{border-color:var(--rule);}
  .api-method{
    flex-shrink:0; font-family:var(--mono); font-size:11px; font-weight:700;
    padding:3px 8px; border-radius:4px; line-height:1.4;
    letter-spacing:.3px; text-transform:uppercase;
  }
  .api-method-get{background:#e3f2fd; color:#1565c0;}
  .api-endpoint-url{
    flex:1; min-width:0;
  }
  .api-endpoint-url .url-path{
    font-family:var(--mono); font-size:13px; font-weight:600;
    color:var(--ink); word-break:break-all; line-height:1.5;
  }
  .api-endpoint-url .url-desc{
    font-size:13px; color:var(--ink-dim);
    margin-top:4px;
  }
  .api-endpoint-url .url-desc code{
    font-size:12px; color:var(--amber);
  }
  .api-subtitle{
    font-family:var(--mono); font-size:14px; font-weight:700;
    margin:0 0 16px; color:var(--ink);
  }

  .video-wrap{
    position:relative; width:100%; max-width:720px;
    padding-bottom:56.25%; height:0; overflow:hidden;
  }
  .video-wrap iframe{
    position:absolute; top:0; left:0;
    width:100%; height:100%; border:0;
    border-radius:var(--radius);
  }

  /* -- sidebar nav highlight on scroll via IntersectionObserver -- */
  .docs-sidebar .docs-nav-link.active{
    color:var(--amber); border-left-color:var(--amber); background:var(--amber-glow);
  }

  .docs-sidebar-toggle{
    display:none; width:100%;
    font-family:var(--mono); font-size:12px; font-weight:600;
    padding:10px 14px; margin-bottom:12px;
    background:var(--bg); border:1px solid var(--rule);
    border-radius:var(--radius);
    color:var(--ink-dim); cursor:pointer;
    align-items:center; justify-content:space-between;
    transition:background .15s,color .15s;
  }
  .docs-sidebar-toggle:hover{ background:var(--bg-soft); color:var(--ink); }
  .docs-sidebar-toggle::after{
    content:"\25BC"; font-size:10px; transition:transform .25s;
  }
  .sidebar-open .docs-sidebar-toggle::after{ transform:rotate(180deg); }

  @media (max-width:900px){
    .docs-section-wrap{flex-direction:column; gap:24px;}
    .docs-sidebar{flex:none; width:100%; position:static; border-right:none; padding-right:0;}
    .docs-sidebar-toggle{ display:flex; }
    .docs-sidebar-collapse{ max-height:0; overflow:hidden; transition:max-height .35s ease; padding:0 6px; }
    .sidebar-open .docs-sidebar-collapse{ max-height:2000px; background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius); padding:12px 10px; }
    .docs-nav{flex-direction:column; gap:2px;}
    .docs-nav-link{padding:6px 12px; font-size:13px; border-left:2px solid transparent;}
    .docs-nav-link:hover{border-left-color:var(--amber-glow);}
    .docs-nav-link.active{border-left-color:var(--amber);}
    .docs-content{ padding:0 4px; }
    .doc-grid{grid-template-columns:1fr;}
  }

  /* ---------------- MAIN / PLUGIN SECTIONS ---------------- */
  main{
    max-width:1100px; margin:0 auto;
    padding:20px 28px 100px;
  }

  .plugin{
    scroll-margin-top:84px;
    margin-top:56px;
  }
  .plugin:first-of-type{ margin-top:24px; }
  .summary{ margin:40px 0 32px; }
  .summary-stats{
    display:flex; gap:0;
    border-top:1px solid var(--panel-edge);
  }
  .stat{
    flex:1; text-align:center;
    padding:20px 16px;
    border-right:1px solid var(--panel-edge);
  }
  .stat:last-child{ border-right:none; }
  .stat-value{
    display:block;
    font-family:var(--mono);
    font-size:28px; font-weight:700;
    color:#2563eb;
    line-height:1.1;
  }
  .stat-label{
    display:block;
    font-family:var(--mono);
    font-size:11px; letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-top:4px;
  }

  .ticket{
    border:1px solid var(--panel-edge);
    background:var(--panel);
    border-radius:var(--radius);
    overflow:hidden;
  }

  .ticket-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding:24px 26px 22px;
    flex-wrap:wrap;
  }
  .ticket-id{
    font-family:var(--mono);
    font-size:13px;
    color:#2563eb;
    letter-spacing:.06em;
    margin-bottom:8px;
    display:block;
  }
  .ticket-head h2{
    margin:0 0 8px;
    font-size:22px;
    font-weight:700;
  }
  .ticket-head p{
    margin:0;
    color:var(--ink-dim);
    font-size:16px;
    max-width:520px;
  }
  .ticket-meta{
    display:flex; flex-direction:column; align-items:flex-end; gap:10px;
    font-family:var(--mono);
  }
  .ticket-version{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ink-dim);
    background:var(--bg-soft);
    padding:3px 10px;
    border-radius:4px;
    border:1px solid var(--rule);
    white-space:nowrap;
  }
  .version{
    font-family:var(--mono);
    font-size:11px;
    color:var(--ink-dim);
    letter-spacing:.04em;
    display:inline-block;
    margin-top:4px;
  }
  .addon-count{
    font-size:12px; letter-spacing:.08em; color:var(--ink-faint);
    text-transform:uppercase;
  }
  .addon-count strong{ color:var(--ink); font-size:16px; display:block; font-family:var(--mono); }

  .toggle-all{
    font-family:var(--mono); font-size:11px;
    color:var(--ink-dim);
    background:transparent;
    border:1px solid var(--rule);
    padding:6px 10px;
    border-radius:var(--radius);
  }
  .toggle-all:hover{ color:var(--amber); border-color:var(--amber-dim); }

  .perforation{
    position:relative;
    height:1px;
    background:repeating-linear-gradient(to right, var(--rule) 0 8px, transparent 8px 16px);
    margin:0 0;
  }
  .perforation::before,
  .perforation::after{
    content:"";
    position:absolute;
    top:-9px;
    width:18px; height:18px;
    border-radius:50%;
    background:var(--bg);
    border:1px solid var(--panel-edge);
  }
  .perforation::before{ left:-9px; }
  .perforation::after{ right:-9px; }

  .addons{
    list-style:none;
    margin:0; padding:6px 0;
  }
  .addon{
    border-bottom:1px solid var(--rule);
  }
  .addon:last-child{ border-bottom:none; }

  .addons-head{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 26px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    color:var(--ink-faint);
    text-transform:uppercase;
    border-bottom:1px solid var(--rule);
    background:var(--panel);
    user-select:none;
  }
  .addons-head .addon-code{
    flex:0 0 40px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    color:var(--ink-faint);
  }
  .addons-head .addon-name{
    flex:1;
    min-width:0;
    font-weight:600;
    font-size:11px;
    letter-spacing:.08em;
    color:var(--ink-faint);
    text-transform:uppercase;
  }
  .head-group{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:60px;
    width:310px;
    margin-left:auto;
  }
  .head-group .type-label{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    color:var(--ink-faint);
    text-transform:uppercase;
    font-weight:600;
  }


  .addon-row{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    padding:16px 26px;
    background:transparent;
    border:none;
    color:var(--ink);
    text-align:left;
  }
  .addon-row:hover{ background:var(--bg-soft); }
  .addon-code{
    font-family:var(--mono); font-size:12px; color:var(--ink-faint);
    flex:0 0 40px;
  }
  .addon-name-wrap{
    flex:1;
    min-width:0;
  }
  .addon-name{
    font-weight:600;
    font-size:14.5px;
    flex:1;
    min-width:0;
  }
  a.addon-name{
    text-decoration:none;
    color:inherit;
  }
  a.addon-name:hover{
    text-decoration:underline;
  }
  .addon-name-wrap .version{ display:table; }

  .addon-badge{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.04em;
    color:#16a34a;
    background:rgba(22,163,74,.15);
    padding:2px 9px;
    border-radius:999px;
    text-transform:uppercase;
    font-weight:700;
    vertical-align:middle;
    margin-left:4px;
  }
  .addon-tag{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.06em;
    color:#b5660a;
    background:rgba(181,102,10,.12);
    padding:2px 8px;
    border-radius:999px;
    text-transform:uppercase;
    font-weight:600;
    flex:0 0 100px;
    text-align:center;
    white-space:nowrap;
    align-self:center;
  }
  .chevron{
    flex:0 0 auto;
    width:10px; height:10px;
    border-right:2px solid var(--ink-faint);
    border-bottom:2px solid var(--ink-faint);
    transform:rotate(-45deg);
    transition:transform .2s ease;
  }
  .addon-row[aria-expanded="true"] .chevron{ transform:rotate(45deg); }

  .addon-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .addon-panel-inner{
    padding:0 26px 18px 106px;
    color:var(--ink-dim);
    font-size:15px;
    max-width:640px;
  }
  .addon-panel-inner a{
    display:inline-block;
    margin-top:12px;
    font-family:var(--mono);
    font-size:12px;
    font-weight:600;
    color:#fff;
    background:#2563eb;
    padding:7px 9px;
    border-radius:6px;
    text-decoration:none;
    transition:background .2s;
  }

  .doc-btn{
    display:inline-block;
    font-family:var(--mono);
    font-size:13px;
    font-weight:600;
    color:#fff;
    background:#2563eb;
    padding:7px 9px;
    border-radius:6px;
    text-decoration:none;
    transition:background .2s;
    margin-left:auto;
  }
  .doc-btn:hover{ background:#1d4ed8; }

  .addon-row .btn-group{
    display:inline-flex;
    gap:6px;
    margin-left:auto;
  }

  .buy-btn{
    font-family:var(--mono);
    font-size:12px;
    font-weight:600;
    padding:7px 14px;
    border-radius:6px;
    background:transparent;
    color:var(--ink-dim);
    border:1px solid var(--rule);
    text-decoration:none;
    transition:background .2s, color .2s;
    white-space:nowrap;
    display:inline-flex;
  }
  .buy-btn:hover{ background:var(--bg-soft); color:var(--ink); border-color:var(--ink-faint); }
  .doc-btn.disabled{
    background:var(--panel);
    color:var(--ink-faint);
    border:1px solid var(--panel-edge);
    cursor:default;
    pointer-events:none;
    opacity:.7;
  }
  .doc-btn.disabled:hover{ background:var(--panel); }

  .hidden-by-search{ display:none !important; }
  .no-results{
    display:none;
    text-align:center;
    padding:60px 20px;
    color:var(--ink-faint);
    font-family:var(--mono);
    font-size:13px;
  }

  footer{
    border-top:1px solid var(--rule);
    text-align:center;
    color:var(--ink-faint);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.05em;
  }

  /* ---------------- RESPONSIVE: TABLET ---------------- */
  @media (max-width: 760px){
    .hero{ padding:40px 18px 28px; }
    .hero p.lede{ font-size:15px; margin-bottom:28px; }

    main{ padding:16px 18px 72px; }
    .plugin{ margin-top:40px; }

    .ticket-head{ padding:20px 18px 18px; gap:16px; }
    .ticket-head h2{ font-size:20px; }
    .ticket-head p{ font-size:15px; }
    .plugin-controls{ padding-left:18px; padding-right:18px; }

    .docs-section-wrap{ padding:28px 18px 60px; }
  }

  /* ---------------- RESPONSIVE: PHONE ---------------- */
  @media (max-width: 560px){
    .hero{ padding:32px 16px 24px; }
    .hero .eyebrow{ font-size:11px; letter-spacing:.14em; }

    main{ padding:12px 16px 64px; }

    .ticket-head{ padding:18px 16px 16px; }
    /* Compact, inline addon count + expand-all instead of a tall boxed block. */
    .ticket-meta{ flex-direction:row; align-items:center; gap:14px; width:100%; }
    .addon-count{ display:inline-flex; align-items:baseline; gap:6px; }
    .addon-count strong{ display:inline; font-size:14px; }

    .summary-stats{ display:grid; grid-template-columns:1fr 1fr; }
    .stat{ border-right:1px solid var(--panel-edge); border-bottom:1px solid var(--panel-edge); padding:16px; }
    .stat:nth-child(2){ border-right:none; }
    .stat:nth-child(3), .stat:nth-child(4){ border-bottom:none; }
    .stat-value{ font-size:24px; }

    /* Compact 2-row grid with the Read-documentation link inline on the top row:
         row 1:  [01] [name .........] [Read documentation] [›]
         row 2:  [01] [tag .............................. ] [›]
       The code and chevron cells span both rows. */
    .addons-head{ display:none; }

    .addon-row{
      display:grid;
      grid-template-columns:auto 1fr auto;
      grid-template-areas:
        "code name tag"
        "code btns chev";
      align-items:center;
      column-gap:10px;
      row-gap:7px;
      padding:12px 14px;
    }
    .addon-code{ grid-area:code; align-self:start; padding-top:2px; flex:none; }
    .addon-name-wrap{ grid-area:name; min-width:0; }
    .addon-name{ font-size:14.5px; }
    .addon-row .btn-group{
      grid-area:btns; justify-self:start; align-self:center;
      display:flex; gap:6px; margin-left:0;
    }
    .addon-row .buy-btn,
    .addon-row .doc-btn{
      font-size:11.5px; padding:6px 8px; white-space:nowrap;
    }
    .addon-tag{ grid-area:tag; justify-self:start; align-self:center; flex:none; }
    .chevron{ grid-area:chev; justify-self:end; align-self:center; margin:0; transform:rotate(45deg); }
    .addon-row[aria-expanded="true"] .chevron{ transform:rotate(-135deg); }
    .addon-panel-inner{ padding:0 14px 14px; }

    .doc-section h2{ font-size:19px; }
    .doc-card{ padding:18px 16px; }

    footer{ letter-spacing:.03em; }
  }

  @media (max-width: 360px){
    .board-row{
      grid-template-areas:
        "logo name"
        "acts acts";
    }
  }