:root{
    --bg:#eef1f4;
    --panel:#ffffff;
    --panel-strong:#f8fafc;
    --line:#d8dee8;
    --text:#13202f;
    --sub:#5d6b7f;
    --muted:#91a0b3;
    --accent:#0f766e;
    --accent-strong:#115e59;
    --accent-soft:#e7f7f4;
    --ink:#0f172a;
    --ok:#059669;
    --warn:#d97706;
    --danger:#dc2626;
    --gold:#b7791f;
    --shadow:0 1px 2px rgba(16,24,40,.05), 0 18px 46px rgba(15,23,42,.09);
    --shadow-soft:0 10px 26px rgba(15,23,42,.06);
    --radius:18px;
    --radius-sm:12px;
    --font-sans:"HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","PingFang SC","Source Han Sans SC",sans-serif;
    --font-display:"STZhongsong","Songti SC","Noto Serif SC","Source Han Serif SC","Microsoft YaHei UI",serif;
    --font-code:"JetBrains Mono","Cascadia Code","SFMono-Regular","Consolas",monospace;
  }

  *{box-sizing:border-box}

  html,body{
    height:100%;
    overflow:hidden;
  }

  button,
  input,
  select{
    font:inherit;
  }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  .list-item:focus-visible{
    outline:3px solid rgba(15,118,110,.22);
    outline-offset:2px;
  }

  body{
    margin:0;
    background:
      radial-gradient(circle at 16% -12%, rgba(15,118,110,.16), transparent 32%),
      radial-gradient(circle at 88% 4%, rgba(183,121,31,.12), transparent 30%),
      linear-gradient(180deg,#f7f8f4 0%,var(--bg) 42%,#edf1f5 100%);
    color:var(--text);
    font:14px/1.5 var(--font-sans);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
  }

  code{
    font-family:var(--font-code);
  }

  .page{
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows:auto auto auto auto auto auto minmax(0,1fr);
  }

  .topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 20px 16px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.88)),
      linear-gradient(90deg, rgba(15,118,110,.1), rgba(183,121,31,.08));
    border-bottom:1px solid rgba(216,222,232,.92);
    box-shadow:0 10px 30px rgba(15,23,42,.05);
  }

  .title-wrap{
    min-width:0;
  }

  .eyebrow{
    margin-bottom:3px;
    color:var(--accent-strong);
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
  }

  .title{
    margin:0;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-family:var(--font-display);
    font-size:28px;
    font-weight:900;
    letter-spacing:.03em;
    color:var(--ink);
  }

  .brand-title{
    color:#0f766e;
    text-shadow:0 1px 0 rgba(255,255,255,.85);
  }

  .title-divider{
    font-family:var(--font-sans);
    font-size:22px;
    font-weight:850;
    letter-spacing:.01em;
    color:#172033;
  }

  .maintainer{
    display:inline-flex;
    align-items:center;
    height:26px;
    padding:0 10px;
    border:1px solid rgba(15,118,110,.24);
    border-radius:999px;
    background:linear-gradient(135deg,#eefaf7,#ffffff);
    color:var(--accent-strong);
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:850;
    letter-spacing:.04em;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
  }

  .subtitle{
    margin-top:4px;
    color:var(--sub);
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .topbar-right{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .stat{
    padding:8px 11px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.78);
    font-size:12px;
    color:var(--sub);
    white-space:nowrap;
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
  }

  .stat strong{
    color:var(--ink);
  }

  .toolbar{
    position:sticky;
    top:0;
    z-index:20;
    display:grid;
    grid-template-columns:minmax(300px,1fr) 180px 140px auto auto;
    gap:10px;
    padding:12px 18px;
    background:rgba(238,241,244,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }

  .searchbox{
    position:relative;
    min-width:0;
  }

  .searchbox .input{
    padding-right:44px;
  }

  .shortcut{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    min-width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:7px;
    background:#f8fafc;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
  }

  .search-hints{
    position:sticky;
    top:65px;
    z-index:19;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-height:44px;
    padding:0 18px 10px;
    background:rgba(238,241,244,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }

  .hint-label{
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
  }

  .hint-chip{
    border:1px solid var(--line);
    background:rgba(255,255,255,.92);
    color:var(--text);
    border-radius:999px;
    padding:6px 10px;
    cursor:pointer;
    font-size:12px;
    line-height:1.2;
    box-shadow:0 1px 1px rgba(16,24,40,.03);
  }

  .hint-chip:hover{
    border-color:#99d4cb;
    background:var(--accent-soft);
    color:var(--accent);
  }

  .hint-chip code{
    font-size:11px;
  }

  .hint-tip{
    color:var(--sub);
    font-size:12px;
  }

  .workbar{
    position:sticky;
    top:109px;
    z-index:18;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 18px;
    background:rgba(238,241,244,.9);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }

  .scope-tabs,
  .work-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
  }

  .scope-tab,
  .ghost-btn{
    height:34px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.82);
    color:var(--sub);
    cursor:pointer;
    padding:0 12px;
    font-size:12px;
    font-weight:800;
  }

  .scope-tab:hover,
  .ghost-btn:hover{
    border-color:#b7c4d4;
    color:var(--ink);
    background:#fff;
  }

  .scope-tab.active,
  .ghost-btn.active{
    border-color:#99d4cb;
    background:var(--accent-soft);
    color:var(--accent-strong);
  }

  .help-panel{
    padding:0 18px 12px;
    background:rgba(238,241,244,.86);
    border-bottom:1px solid var(--line);
  }

  .help-card{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    padding:12px 14px;
    border:1px solid #c8d8d5;
    border-radius:14px;
    background:linear-gradient(135deg,#ffffff,#f5fbf9);
    color:var(--sub);
    box-shadow:var(--shadow-soft);
  }

  .help-card strong{
    color:var(--accent-strong);
  }

  .help-card span{
    padding:4px 8px;
    border-radius:999px;
    background:#f8fafc;
  }

  .input,
  .select,
  .btn{
    height:40px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--text);
    font-size:14px;
  }

  .input,
  .select{
    width:100%;
    padding:0 12px;
    outline:none;
  }

  .input:focus,
  .select:focus{
    border-color:#0f766e;
    box-shadow:0 0 0 3px rgba(15,118,110,.12);
  }

  .btn{
    padding:0 14px;
    cursor:pointer;
    font-weight:600;
  }

  .btn:hover{
    border-color:#cbd5e1;
    background:#f8fafc;
  }

  .btn:disabled,
  .ghost-btn:disabled{
    opacity:.48;
    cursor:not-allowed;
  }

  .btn.primary{
    border-color:#99d4cb;
    background:var(--accent-soft);
    color:var(--accent-strong);
  }

  .layout{
    min-height:0;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(260px,320px) minmax(0,1fr);
    gap:14px;
    padding:14px 18px 18px;
  }

  .page.list-collapsed .layout{
    grid-template-columns:minmax(0,1fr);
  }

  .page.list-collapsed .list-panel{
    display:none;
  }

  .panel{
    min-height:0;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
  }

  .panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#fbfcfd,#f8fafc);
  }

  .panel-title{
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--sub);
  }

  .panel-sub{
    font-size:12px;
    color:var(--muted);
  }

  .list-panel{
    display:grid;
    grid-template-rows:auto 1fr;
    height:100%;
    background:
      linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,250,249,.96)),
      radial-gradient(circle at 0 0,rgba(15,118,110,.08),transparent 42%);
  }

  .quickbar{
    display:none;
  }

  .quick{
    flex:0 1 auto;
    min-width:0;
    background:#fff;
    border:1px solid #dce5eb;
    color:#425166;
    border-radius:999px;
    padding:5px 9px;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }

  .quick:hover{
    border-color:#99d4cb;
    background:#eefaf7;
    color:var(--accent-strong);
  }

  .list{
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px 10px 12px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-content:start;
    gap:7px;
    scrollbar-width:thin;
    background:
      linear-gradient(180deg,rgba(248,250,252,.62),rgba(240,245,245,.78));
  }

  .page.dense .quickbar{
    padding-top:8px;
  }

  .page.dense .list{
    gap:6px;
    padding:8px;
  }

  .list-item{
    position:relative;
    min-width:0;
    max-width:100%;
    overflow:visible;
    width:100%;
    text-align:left;
    border:1px solid #dce5eb;
    background:#fff;
    border-radius:13px;
    padding:10px;
    cursor:pointer;
    box-shadow:0 1px 1px rgba(15,23,42,.03);
    transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
  }

  .list-item:hover{
    border-color:#b9c8d5;
    background:linear-gradient(180deg,#ffffff,#f7fbfa);
    transform:none;
    box-shadow:0 8px 18px rgba(15,23,42,.06);
  }

  .list-item.active{
    border-color:#73c1b8;
    background:linear-gradient(180deg,#f7fffc,#eefaf7);
    box-shadow:inset 3px 0 0 var(--accent), inset 0 0 0 1px #cce9e3, 0 8px 18px rgba(15,118,110,.08);
  }

  .page.dense .list-item{
    padding:8px 9px;
  }

  .item-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    min-width:0;
  }

  .item-name{
    min-width:0;
    max-width:100%;
    font-size:13px;
    font-weight:700;
    margin:0;
    line-height:1.45;
    overflow:visible;
    white-space:normal;
    word-break:break-all;
    overflow-wrap:anywhere;
  }

  .item-name code{
    display:inline;
    min-width:0;
    max-width:100%;
    overflow:visible;
    white-space:normal;
    word-break:break-all;
    overflow-wrap:anywhere;
    color:#13202f;
  }

  .favorite-toggle{
    flex-shrink:0;
    width:27px;
    height:27px;
    border:1px solid #e1e7ef;
    border-radius:999px;
    background:#f8fafc;
    color:#c5a25a;
    cursor:pointer;
    font-size:14px;
    line-height:1;
  }

  .favorite-toggle:hover,
  .favorite-toggle.active{
    border-color:#e5c46b;
    background:#fff9eb;
    color:var(--gold);
  }

  .badges{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    margin-top:8px;
    min-width:0;
    max-width:100%;
    overflow:visible;
  }

  .badge{
    display:inline-flex;
    align-items:center;
    padding:3px 7px;
    border-radius:999px;
    font-size:10px;
    font-weight:700;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .badge.category{
    background:#f3f4f6;
    color:#475467;
  }

  .badge.perm1{
    background:#ecfdf3;
    color:var(--ok);
  }

  .badge.perm2{
    background:#eff6ff;
    color:var(--accent);
  }

  .badge.perm3{
    background:#fff7ed;
    color:var(--warn);
  }

  .badge.match{
    background:#ecfeff;
    color:#0e7490;
  }

  .item-desc{
    margin-top:8px;
    color:var(--sub);
    font-size:12px;
    line-height:1.6;
    word-break:break-word;
    overflow-wrap:anywhere;
    display:none;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .list-item.active .item-desc{
    display:-webkit-box;
  }

  .item-extra{
    margin-top:7px;
    color:var(--muted);
    font-size:11px;
    overflow:visible;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    max-width:100%;
    display:none;
  }

  .list-item.active .item-extra{
    display:block;
  }

  .page.dense .item-desc{
    display:none;
  }

  .page.dense .item-extra{
    display:none;
  }

  .detail{
    min-height:0;
    display:grid;
    grid-template-rows:auto 1fr;
    height:100%;
  }

  .detail-body{
    min-height:0;
    overflow:auto;
    padding:16px;
  }

  .detail-empty{
    height:100%;
    display:grid;
    place-items:center;
    color:var(--muted);
    font-size:13px;
  }

  .detail-title{
    margin:0;
    font-size:28px;
    line-height:1.15;
  }

  .detail-title code{
    color:var(--accent);
  }

  .detail-desc{
    margin:12px 0 0;
    font-size:14px;
    color:var(--text);
    line-height:1.8;
  }

  .detail-meta{
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .box{
    border:1px solid var(--line);
    border-radius:12px;
    background:linear-gradient(180deg,#fcfcfd,#f8fafc);
    padding:12px;
  }

  .box-title{
    font-size:12px;
    font-weight:700;
    color:var(--sub);
    letter-spacing:.04em;
    margin-bottom:8px;
  }

  .box p{
    margin:0;
    line-height:1.8;
    word-break:break-word;
  }

  .alias-list,
  .note-list{
    margin-top:16px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

  .tag{
    padding:7px 10px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid var(--line);
    font-size:12px;
    color:var(--sub);
  }

  .tag.strong{
    border-color:#99d4cb;
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-weight:800;
  }

  .section{
    margin-top:18px;
  }

  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }

  .section-title{
    font-size:13px;
    font-weight:700;
    color:var(--sub);
    letter-spacing:.04em;
  }

  .example-list{
    display:grid;
    gap:8px;
  }

  .example{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    padding:10px 12px;
  }

  .example code{
    display:block;
    font-size:12px;
    line-height:1.7;
    word-break:break-all;
  }

  .mini-btn{
    flex-shrink:0;
    height:32px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:8px;
    padding:0 10px;
    cursor:pointer;
    font-size:12px;
    font-weight:700;
  }

  .mini-btn:hover{
    background:#f8fafc;
  }

  .detail-actions{
    margin-top:16px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

  .toast{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:50;
    background:#111827;
    color:#fff;
    padding:10px 12px;
    border-radius:10px;
    font-size:12px;
    opacity:0;
    transform:translateY(8px);
    transition:all .18s ease;
    pointer-events:none;
  }

  .toast.show{
    opacity:1;
    transform:translateY(0);
  }

  @media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
      scroll-behavior:auto !important;
      transition:none !important;
      animation:none !important;
    }
  }

  @media (max-width: 900px){
    html,body{
      height:auto;
      min-height:100%;
      overflow:auto;
    }

    .page{
      height:auto;
      min-height:100vh;
    }

    .toolbar{
      grid-template-columns:1fr 160px 120px;
    }

    .search-hints{
      top:113px;
    }

    .workbar{
      top:157px;
    }

    .toolbar .btn{
      width:100%;
    }

    .layout{
      grid-template-columns:1fr;
      overflow:visible;
    }

    .list-panel{
      max-height:46vh;
    }

    .detail{
      height:auto;
      min-height:56vh;
    }
  }

  @media (max-width: 720px){
    .topbar{
      padding:12px;
      align-items:flex-start;
      flex-direction:column;
    }

    .toolbar{
      padding:10px 12px;
      grid-template-columns:1fr;
    }

    .search-hints{
      position:static;
      padding:0 12px 10px;
    }

    .workbar{
      position:static;
      align-items:flex-start;
      flex-direction:column;
      padding:10px 12px;
    }

    .help-panel{
      padding:0 12px 10px;
    }

    .layout{
      padding:12px;
      grid-template-columns:1fr;
    }

    .detail-meta{
      grid-template-columns:1fr;
    }

    .topbar-right{
      width:100%;
      justify-content:flex-start;
    }

    .subtitle{
      white-space:normal;
    }
  }