/* ═══════════════════════════════════════════
   润辉工具箱 V2.0 — MuleRun-inspired Design System
   ═══════════════════════════════════════════ */

/* ── CSS Variables ── */
:root{
  --bg:#ffffff;
  --card:#ffffff;
  --card-border:rgba(0,0,0,.05);
  --card-shadow:0 1px 2px rgba(0,0,0,.04);
  --text-1:#18181b;
  --text-2:#52525b;
  --text-3:#71717a;
  --text-4:#a1a1aa;
  --text-5:#d4d4d8;
  --brand:#18181b;
  --brand-light:#3f3f46;
  --brand-soft:rgba(24,24,27,.06);
  --brand-glow:rgba(24,24,27,.10);
  --brand-grad:#18181b;
  --brand-grad-soft:rgba(24,24,27,.03);
  --accent:#71717a;
  --accent-soft:rgba(113,113,122,.08);
  --danger:#71717a;
  --danger-soft:rgba(113,113,122,.08);
  --warn:#71717a;
  --warn-soft:rgba(113,113,122,.08);
  --input-bg:#fafafa;
  --input-border:#e4e4e7;
  --input-focus:#18181b;
  --divider:#f4f4f5;
  --surface:#fafafa;
  --surface-2:#f4f4f5;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
  --radius-xl:24px;
  --font:"Inter","Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono","Fira Code",monospace;
  --transition:all .2s cubic-bezier(.4,0,.2,1);
}

/* ── Dark Mode Variables ── */
body.dark{
  --bg:#0a0a0b;
  --card:#18181b;
  --card-border:rgba(255,255,255,.06);
  --card-shadow:0 1px 2px rgba(0,0,0,.3);
  --text-1:#fafafa;
  --text-2:#a1a1aa;
  --text-3:#71717a;
  --text-4:#52525b;
  --text-5:#3f3f46;
  --brand:#fafafa;
  --brand-light:#e4e4e7;
  --brand-soft:rgba(250,250,250,.08);
  --brand-glow:rgba(250,250,250,.12);
  --brand-grad:#fafafa;
  --brand-grad-soft:rgba(250,250,250,.04);
  --accent:#a1a1aa;
  --accent-soft:rgba(161,161,170,.08);
  --danger:#a1a1aa;
  --danger-soft:rgba(161,161,170,.08);
  --warn:#a1a1aa;
  --warn-soft:rgba(161,161,170,.08);
  --input-bg:#27272a;
  --input-border:#3f3f46;
  --input-focus:#fafafa;
  --divider:#27272a;
  --surface:#27272a;
  --surface-2:#3f3f46;
}

/* ── Dark mode toggle: instant switch, no staggered animation ── */
html.dark-switching *,
html.dark-switching *::before,
html.dark-switching *::after{
  transition:none!important;
  animation:none!important;
}

/* ── Reset & Base ── */
*{margin:0;padding:0;box-sizing:border-box}
*{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{display:none}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text-1);
  min-height:100vh;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s,color .3s;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Layout ── */
.wrap{max-width:420px;margin:0 auto;padding:12px 14px 0}
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--card-shadow);
  padding:16px 14px 14px;
  margin-bottom:12px;
}

/* ── Header ── */
.header{
  display:flex;align-items:center;justify-content:center;
  gap:10px;margin-bottom:12px;position:relative;
}
.header img{height:38px;width:38px;border-radius:10px;object-fit:contain;flex-shrink:0}
.header-text{display:flex;flex-direction:column;gap:2px}
.header-title{font-size:18px;font-weight:800;color:var(--text-1);line-height:1.3;letter-spacing:-.3px}
.subtitle{font-size:10px;color:var(--text-3);letter-spacing:1.5px;line-height:1.3;text-align:center;width:100%}
.add-desktop{position:absolute;right:0;top:70%;transform:translateY(-50%);font-size:11px;color:var(--brand);text-decoration:none;white-space:nowrap;font-weight:600}
.add-desktop:active{opacity:.6}

/* ── Hamburger ── */
.hamburger{
  position:absolute;left:0;top:70%;transform:translateY(-50%);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition);
  background:var(--surface);border:1px solid transparent;z-index:10;
}
.hamburger:hover{border-color:var(--divider);background:var(--surface-2)}
.hamburger:active{transform:translateY(-50%) scale(.92)}
.hamburger span{display:block;width:17px;height:2px;background:var(--text-2);border-radius:2px;position:relative;transition:all .2s}
.hamburger span::before,.hamburger span::after{content:'';display:block;width:17px;height:2px;background:var(--text-2);border-radius:2px;position:absolute;transition:all .2s}
.hamburger span::before{top:-5.5px}
.hamburger span::after{top:5.5px}

/* ── Dark Toggle ── */
.dark-toggle{
  position:absolute;right:0;top:70%;transform:translateY(-50%);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition);
  background:var(--surface);border:1px solid transparent;z-index:10;
}
.dark-toggle:hover{border-color:var(--divider);background:var(--surface-2)}
.dark-toggle:active{transform:translateY(-50%) scale(.92)}
.dark-toggle svg{stroke:var(--text-2);transition:stroke .2s}
body.dark .dark-toggle svg{stroke:var(--text-3)}

/* ── Tabs (Main Navigation) ── */
.tabs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-bottom:16px;padding:0;background:transparent;border-radius:0;
  overflow-x:visible;-webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar{display:none}
.tabs>.tab{
  position:relative;text-align:center;padding:14px 4px 10px;
  border-radius:var(--radius);font-size:11px;font-weight:600;
  color:var(--text-3);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:var(--card);
  border:1px solid var(--card-border);box-shadow:var(--card-shadow);gap:5px;min-width:0;flex:none;
}
.tabs>.tab .tab-icon{display:block;width:28px;height:28px;line-height:28px;margin-bottom:0;opacity:1;transition:all .25s}
.tabs>.tab .tab-icon svg{width:24px;height:24px;vertical-align:middle;transition:all .25s}
.tabs>.tab .tab-icon svg path,.tabs>.tab .tab-icon svg line,.tabs>.tab .tab-icon svg rect,.tabs>.tab .tab-icon svg circle,.tabs>.tab .tab-icon svg polyline,.tabs>.tab .tab-icon svg ellipse{stroke:var(--text-4);transition:stroke .25s}
.tabs>.tab.on{
  background:var(--brand-grad);color:var(--card);border-color:transparent;
  box-shadow:0 1px 3px var(--brand-glow);transform:translateY(-2px);
}
.tabs>.tab.on .tab-icon svg path,.tabs>.tab.on .tab-icon svg line,.tabs>.tab.on .tab-icon svg rect,.tabs>.tab.on .tab-icon svg circle,.tabs>.tab.on .tab-icon svg polyline,.tabs>.tab.on .tab-icon svg ellipse{stroke:var(--card)}
.tabs>.tab:not(.on):hover{border-color:var(--divider);background:var(--surface);transform:translateY(-1px)}
.tabs>.tab:not(.on):hover .tab-icon svg path,.tabs>.tab:not(.on):hover .tab-icon svg line,.tabs>.tab:not(.on):hover .tab-icon svg rect,.tabs>.tab:not(.on):hover .tab-icon svg circle,.tabs>.tab:not(.on):hover .tab-icon svg polyline,.tabs>.tab:not(.on):hover .tab-icon svg ellipse{stroke:var(--text-2)}
.tabs>.tab:active{transform:translateY(0) scale(.96);transition:all .1s}
@media(max-width:380px){.tabs>.tab{font-size:10px;padding:12px 3px 8px;gap:3px}.tabs>.tab .tab-icon{width:24px;height:24px;line-height:24px}.tabs>.tab .tab-icon svg{width:20px;height:20px}.more-tools-grid{grid-template-columns:repeat(4,1fr)}}

/* ── Batch type tabs ── */
#batchWTypeBtns .tab,#batchTypeBtns .tab{display:block;text-align:center;padding:7px 4px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;color:var(--text-3);cursor:pointer;transition:all .15s;background:transparent;border:none;box-shadow:none}
#batchWTypeBtns .tab.on,#batchTypeBtns .tab.on{background:#e4e4e7;color:#18181b;box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* ── Secondary tabs ── */
.tabs.sub{background:var(--surface);margin-bottom:10px;padding:3px;border-radius:var(--radius-sm);display:flex;justify-content:center;gap:3px}
.tabs.sub .tab{font-size:12px;padding:8px 3px;color:var(--text-3);border-radius:6px;display:block}
.tabs.sub .tab.on{background:#e4e4e7;color:#18181b;box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* ── Tertiary tabs (pill) ── */
.tabs.sub2{background:transparent;margin-bottom:12px;padding:0;gap:6px;justify-content:center;flex-wrap:wrap}
.tabs.sub2 .tab{flex:0 0 auto;font-size:10px;padding:5px 12px;color:var(--text-3);border-radius:20px;border:1px solid var(--input-border);background:var(--card);display:block;transition:var(--transition)}
.tabs.sub2 .tab.on{background:#e4e4e7;color:#18181b;border-color:#d4d4d8;box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* ── More tools grid ── */
.more-tools-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}
.more-tools-grid .tool-tab{
  font-size:12px;padding:9px 3px;color:var(--text-2);border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid transparent;cursor:pointer;
  transition:all .2s;white-space:nowrap;font-weight:500;text-align:center;
}
.more-tools-grid .tool-tab:hover{background:var(--brand-soft);border-color:var(--divider);color:var(--text-1)}
.more-tools-grid .tool-tab.on{background:var(--brand);color:var(--card);border-color:var(--brand);box-shadow:0 1px 3px var(--brand-glow);font-weight:600}
.more-tools-grid.dimmed .tool-tab:not(.on){opacity:.45}
.more-tools-grid.dimmed .tool-tab:not(.on):hover{opacity:1}
@media(max-width:380px){.more-tools-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:400px){.more-tools-grid{grid-template-columns:repeat(auto-fill,minmax(65px,1fr))}}

/* ── Dark mode: more tools grid ── */
body.dark .more-tools-grid .tool-tab{background:var(--surface)!important;color:var(--text-2)!important;border-color:var(--input-border)!important}
body.dark .more-tools-grid .tool-tab.on{background:var(--brand)!important;color:var(--card)!important;border-color:var(--brand)!important}
body.dark .more-tools-grid .tool-tab:hover{background:var(--surface-2)!important}

/* ── More tools: grouped card sections ── */
.mt-group{margin-bottom:10px}
.mt-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.mt-card{
  position:relative;text-align:center;padding:8px 2px 6px;
  border-radius:14px;font-size:9px;font-weight:600;
  color:var(--text-3);cursor:pointer;transition:all .3s cubic-bezier(.32,1.45,.45,1);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;
  background:transparent;border:none;box-shadow:none;
}
.mt-card .mt-ic{display:block;width:22px;height:22px;line-height:22px;transition:all .3s}
.mt-card .mt-ic svg{width:18px;height:18px;vertical-align:middle;transition:all .25s}
.mt-card .mt-ic svg path,.mt-card .mt-ic svg line,.mt-card .mt-ic svg rect,.mt-card .mt-ic svg circle,.mt-card .mt-ic svg polyline,.mt-card .mt-ic svg ellipse{stroke:var(--text-4);transition:stroke .25s}
.mt-card:active{transform:scale(.92);transition:all .1s}
.mt-card.active{
  background:rgba(255,255,255,.22);
  -webkit-backdrop-filter:saturate(1.9) blur(14px);
  backdrop-filter:saturate(1.9) blur(14px);
  border:1px solid rgba(255,255,255,.60);
  box-shadow:
    0 2px 8px rgba(0,0,0,.10),
    inset 0 1px 1px rgba(255,255,255,.75),
    inset 0 -1px 2px rgba(255,255,255,.25);
}
.mt-card.active::before{
  content:"";position:absolute;left:14%;right:14%;top:2px;height:36%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  filter:blur(1px);pointer-events:none;
}
.mt-card.active .mt-ic svg path,.mt-card.active .mt-ic svg line,.mt-card.active .mt-ic svg rect,.mt-card.active .mt-ic svg circle,.mt-card.active .mt-ic svg polyline,.mt-card.active .mt-ic svg ellipse{stroke:var(--text-1)}
.mt-card.active span:last-child{color:var(--text-1)}
@media(max-width:380px){.mt-card{font-size:8px;padding:6px 2px 5px;gap:2px}.mt-card .mt-ic{width:18px;height:18px;line-height:18px}.mt-card .mt-ic svg{width:16px;height:16px}}

/* ── Dark mode: grouped card sections ── */
body.dark .mt-card.active{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 2px 8px rgba(0,0,0,.25),
    inset 0 1px 1px rgba(255,255,255,.28);
}
body.dark .mt-card.active::before{background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0))}
body.dark .mt-card.active .mt-ic svg path,body.dark .mt-card.active .mt-ic svg line,body.dark .mt-card.active .mt-ic svg rect,body.dark .mt-card.active .mt-ic svg circle,body.dark .mt-card.active .mt-ic svg polyline,body.dark .mt-card.active .mt-ic svg ellipse{stroke:var(--text-1)}
body.dark .mt-card.active span:last-child{color:var(--text-1)}

/* ── Form Elements ── */
.lbl{font-size:10px;font-weight:500;color:var(--text-3);letter-spacing:.5px;margin-bottom:4px}
select.mat{
  width:100%;padding:10px 28px 10px 0;border:none;border-bottom:1px solid var(--text-5);
  border-radius:0;font-size:13px;color:var(--text-1);
  background:transparent;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
  cursor:pointer;outline:none;margin-bottom:0;transition:border-color .3s;
}
select.mat:focus{border-bottom-color:var(--brand)}
.fields{display:flex;flex-direction:column;gap:16px}
.fld label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-3);margin-bottom:6px}
.fld label span{color:var(--text-4);font-weight:400}
.fld-hint{font-size:10px;font-weight:400;color:var(--text-4)}
.fld input{
  width:100%;padding:10px 0 10px 0;border:none;border-bottom:1px solid var(--text-5);
  border-radius:0;font-size:15px;color:var(--text-1);
  outline:none;transition:border-color .3s;background:transparent;-webkit-appearance:none;
}
.fld input:focus{border-bottom-color:var(--brand)}
.fld input::placeholder{color:var(--text-4);font-weight:300}
/* ── Half-width field row (内径/壁厚) ── */
.fld-row{display:flex;gap:20px}
.fld-half{flex:1;min-width:0}
.fld-half label{font-size:11px;font-weight:500;color:var(--text-3)}
.fld-half input{font-size:14px;padding:9px 0}

/* ── Buttons ── */
.btn{
  width:100%;padding:12px;background:var(--brand-grad);color:var(--card);
  border:none;border-radius:var(--radius);font-size:14px;font-weight:700;
  cursor:pointer;margin-top:10px;transition:all .2s;
  box-shadow:0 1px 3px var(--brand-glow);
}
.btn:active{transform:scale(.98);box-shadow:0 1px 2px var(--brand-glow)}
.rst{
  width:100%;padding:14px;background:transparent;color:var(--text-3);
  border:none;border-top:1px solid var(--divider);border-radius:0;
  font-size:13px;font-weight:400;cursor:pointer;margin-top:0;transition:color .3s;
  letter-spacing:0;
}
.rst:hover{color:var(--text-1)}
.rst:active{color:var(--brand)}

/* ── Result Display ── */
.res{
  margin-top:20px;padding:16px 0;text-align:center;
  border-top:1px solid var(--divider);
}
.res .rl{font-size:11px;color:var(--text-4);margin-bottom:4px;font-weight:500}
.res .rv{font-size:32px;font-weight:300;color:var(--text-1);letter-spacing:-1px}
.res .ru{font-size:13px;color:var(--text-3);font-weight:400;margin-left:4px}
.res.hide{display:none}

/* ── Price Section ── */
.prc{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:12px;
  border-top:1px solid var(--divider);
}
.prc .pb,.prc .pt{
  padding:8px 6px;text-align:center;
  border-bottom:1px solid var(--divider);
}
.prc .pb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.prc .pb label{font-size:9px;font-weight:500;color:var(--text-4);letter-spacing:0;text-transform:uppercase}
.prc .pb input{width:100%;padding:2px 0;border:none;font-size:16px;font-weight:500;color:var(--text-1);text-align:center;outline:none;background:transparent;min-width:0}
.prc .pb input::placeholder{color:var(--text-5);font-weight:400}
.prc .pt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.prc .pt .pl{font-size:9px;font-weight:500;color:var(--text-4);letter-spacing:0;text-transform:uppercase}
.prc .pt .pv{font-size:16px;font-weight:500;color:var(--text-1);text-align:center;display:block;word-break:break-all;line-height:1.3}
.prc .pt .pu{display:none}
.prc .pt .pval{text-align:center;line-height:1.3;max-width:100%;display:flex;flex-direction:column;align-items:center}

/* ── Reference ── */
.ref-title{font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:12px;text-align:center}
.ref-img{width:100%;border-radius:var(--radius-sm);display:block}

/* ── Hide ── */
.hide{display:none!important}

/* ═══════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════ */
.sidebar-overlay{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:560;opacity:0;visibility:hidden;transition:all .3s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sidebar-overlay.show{opacity:1;visibility:visible}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:290px;background:var(--card);
  z-index:561;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:4px 0 30px rgba(0,0,0,.08);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sidebar-overlay.show .sidebar{transform:translateX(0)}
.sidebar-header{padding:16px 18px 14px;border-bottom:1px solid var(--divider);display:flex;align-items:center;gap:10px;background:var(--surface);position:relative}
.sidebar-header::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:1px;background:var(--divider)}
.sidebar-header img{height:34px;width:34px;border-radius:10px;object-fit:contain;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sidebar-header .sh-text{display:flex;flex-direction:column;gap:1px}
.sidebar-header .sh-title{font-size:15px;font-weight:800;color:var(--text-1);letter-spacing:.3px}
.sidebar-header .sh-sub{font-size:10px;color:var(--text-3);letter-spacing:.5px}
.sidebar-close{position:absolute;right:12px;top:14px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-sm);font-size:12px;color:var(--text-3);transition:all .15s;background:transparent;border:none}
.sidebar-close:hover{background:var(--surface);color:var(--text-1)}
.sidebar-close:active{background:var(--surface)}
.sidebar-user{padding:12px 18px;background:var(--surface);border-bottom:1px solid var(--divider)}
.sidebar-user .su-name{font-size:13px;font-weight:700;color:var(--text-1);letter-spacing:.3px}
.sidebar-user .su-role{font-size:10px;color:var(--text-3);font-weight:600;margin-top:2px;display:inline-block;padding:2px 8px;background:var(--brand-soft);border-radius:5px}
.sidebar-nav{padding:6px 0;display:flex;flex-direction:column}
.sidebar-nav a{display:flex;align-items:center;gap:8px;padding:9px 18px;font-size:13px;color:var(--text-2);text-decoration:none;transition:all .15s;font-weight:500;margin:1px 8px;border-radius:var(--radius-sm)}
.sidebar-nav a:hover{background:var(--surface);color:var(--text-1)}
.sidebar-nav a:active{background:var(--surface)}
.sidebar-nav a .sn-icon{font-size:15px;width:22px;text-align:center;opacity:.85;transition:opacity .15s}
.sidebar-nav a:hover .sn-icon{opacity:1}
.sidebar-nav .divider{height:1px;background:var(--divider);margin:4px 14px}
.sidebar-nav .sn-section{padding:8px 18px 3px;font-size:9px;color:var(--text-5);font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.sn-section-toggle{display:flex;align-items:center;cursor:pointer;user-select:none;padding:8px 18px 3px;transition:all .2s}
.sn-section-toggle:hover{color:var(--text-3)}
.sn-section-toggle:hover .other-hint{opacity:1}
.sn-section-toggle span:first-child{font-size:9px;color:var(--text-5);font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.other-hint{font-size:9px;color:var(--text-5);margin-left:4px;opacity:.5;transition:opacity .2s;font-weight:400;letter-spacing:0;text-transform:none}
.other-count{display:none}
.sn-section-toggle svg{width:10px;height:10px;margin-left:auto;opacity:.35;transition:transform .3s cubic-bezier(.4,0,.2,1);stroke:var(--text-5)}
.sn-section-toggle.collapsed svg{transform:rotate(-90deg)}
.sn-section-toggle.collapsed{opacity:.6}
.sn-section-toggle.collapsed:hover{opacity:1}

/* ── Sidebar tool cards ── */
.sidebar-tool-grid{display:flex;flex-direction:column;gap:0;padding:2px 8px 4px}
.sidebar-tool-card{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);background:transparent;border:none;cursor:pointer;transition:all .18s;text-decoration:none;color:var(--text-2);font-weight:500;font-size:13px}
.sidebar-tool-card:hover{background:var(--surface);color:var(--text-1)}
.sidebar-tool-card:active{background:var(--surface-2)}
.sidebar-tool-card .stc-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s}
.sidebar-tool-card .stc-icon svg{width:16px;height:16px}
.sidebar-tool-card .stc-icon svg path,.sidebar-tool-card .stc-icon svg line,.sidebar-tool-card .stc-icon svg rect,.sidebar-tool-card .stc-icon svg circle,.sidebar-tool-card .stc-icon svg polyline,.sidebar-tool-card .stc-icon svg ellipse,.sidebar-tool-card .stc-icon svg polyline{stroke:var(--text-3);transition:stroke .18s}
.sidebar-tool-card:hover .stc-icon svg path,.sidebar-tool-card:hover .stc-icon svg line,.sidebar-tool-card:hover .stc-icon svg rect,.sidebar-tool-card:hover .stc-icon svg circle,.sidebar-tool-card:hover .stc-icon svg polyline,.sidebar-tool-card:hover .stc-icon svg ellipse{stroke:var(--text-1)}

/* ── Sidebar footer ── */
.sidebar-footer{border-top:1px solid var(--divider);background:var(--surface);padding:6px 8px 10px}
.sidebar-footer a{display:flex;align-items:center;gap:8px;padding:9px 18px;font-size:13px;color:var(--danger);text-decoration:none;transition:all .15s;font-weight:600;margin:0;border-radius:var(--radius-sm)}
.sidebar-footer a:hover{background:var(--danger-soft)}
.sidebar-footer a .sn-icon{font-size:15px;width:22px;text-align:center;opacity:.85}
.sidebar-ver{text-align:center;padding:2px 0 1px}
.sidebar-ver span{font-size:9px;color:var(--text-5);letter-spacing:.3px}
.sidebar-announcement{margin:6px 8px 0;padding:10px 12px;background:var(--warn-soft);border-radius:var(--radius-sm);border:1px solid var(--divider)}
.sidebar-announcement .sa-title{font-size:11px;font-weight:700;color:var(--warn);margin-bottom:4px;display:flex;align-items:center;gap:4px}
.sidebar-announcement .sa-content{font-size:11px;color:var(--text-2);line-height:1.5;word-break:break-all;white-space:pre-wrap}

/* ── Permission upgrade ── */
.feature-locked{opacity:.6;transition:opacity .2s}
.feature-locked:hover{opacity:.8}
.plan-upgrade{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:700;display:none;align-items:center;justify-content:center;padding:20px}
.plan-upgrade.show{display:flex}
.plan-upgrade-box{background:var(--card);border-radius:var(--radius-xl);padding:28px 24px;width:100%;max-width:360px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.1)}
.plan-upgrade-box h3{font-size:16px;font-weight:700;color:var(--text-1);margin-bottom:8px}
.plan-upgrade-box p{font-size:13px;color:var(--text-3);margin-bottom:16px;line-height:1.6}
.plan-upgrade-box .plan-name{font-size:18px;font-weight:800;color:var(--brand);margin-bottom:16px}
.plan-upgrade-box button{width:100%;padding:12px;background:var(--brand);color:var(--card);border:none;border-radius:var(--radius);font-size:14px;font-weight:700;cursor:pointer;margin-bottom:8px}
.plan-upgrade-box button:active{background:var(--brand-light)}
.plan-upgrade-box .cancel{background:transparent;color:var(--text-3);border:1px solid var(--divider)}

/* ── Modal animation ── */
@keyframes modalFadeIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── AI float button ── */
@keyframes aiFloatPulse{0%,100%{box-shadow:0 2px 8px rgba(24,24,27,.12)}50%{box-shadow:0 2px 12px rgba(24,24,27,.18)}}
#aiFloatBtn:hover{transform:scale(1.05);box-shadow:0 4px 12px var(--brand-glow)}

/* ══════════════════════════════════════════
   全局深夜模式 — 统一底色 (dark mode)
   所有元素统一使用 --card 作为底色
   ══════════════════════════════════════════ */

/* 0. 确保所有内容面板都有明确的背景色（防止蓝色底色） */
#pDiag,#pArea,#pMore,#pRound,#pSquare,#pBatchWeight,#pVolume{
  background:var(--card);
  background-color:var(--card);
}

/* 1. 全局底色统一 */
body.dark,
body.dark .wrap,
body.dark .card,
body.dark .rh-header-fixed,
body.dark .rh-cat-nav,
body.dark .rh-sub-nav,
body.dark [id^="p"],
body.dark .fields,
body.dark .res,
body.dark .prc,
body.dark .tabs,
body.dark .tabs.sub2,
body.dark .more-tools-grid,
body.dark #batchWSummary,
body.dark #batchSummary,
body.dark #batchWTypeBtns,
body.dark #batchTypeBtns,
body.dark #exResult,
body.dark #exRateTable,
body.dark #exRateTable table,
body.dark #diagSvg rect{
  background:var(--card)!important;
  background-color:var(--card)!important;
}

/* 2. 文字颜色 */
body.dark .lbl,
body.dark .ref-title,
body.dark .fld label,
body.dark .res .rl,
body.dark .res .ru,
body.dark .pt .pl{color:var(--text-2)!important}
body.dark .res .rv,
body.dark .pt .pval .pv{color:var(--text-1)!important}

/* 3. 输入框 */
body.dark .fld input,
body.dark input[type="number"],
body.dark input[type="text"],
body.dark input[type="tel"],
body.dark input[type="password"],
body.dark select.mat,
body.dark textarea{
  background:transparent!important;
  border-color:var(--text-4)!important;
  color:var(--text-1)!important;
}
body.dark input::placeholder,
body.dark textarea::placeholder{color:var(--text-4)!important}
body.dark select{color-scheme:dark}
body.dark select option{background:var(--card);color:var(--text-1)}
body.dark select optgroup{background:var(--surface);color:var(--text-3)}

/* 4. 按钮 */
body.dark .btn{background:var(--brand)!important;color:#0a0a0b!important}
body.dark .btn:hover{opacity:.9}
body.dark .rst{background:transparent!important;color:var(--text-3)!important;border:none!important;border-top:1px solid var(--text-4)!important}
body.dark .rst:hover{color:var(--text-1)!important}

/* 5. 重量子标签 */
body.dark .weight-subtab{background:var(--surface)!important;border-color:var(--input-border)!important;color:var(--text-3)!important}
body.dark .weight-subtab.active{background:var(--surface-2)!important;color:var(--text-1)!important;border-color:var(--text-4)!important}

/* 6. 工具网格 */
body.dark .more-tools-grid .tool-tab{background:var(--surface)!important;color:var(--text-2)!important;border-color:var(--input-border)!important}
body.dark .more-tools-grid .tool-tab:hover{background:var(--surface-2)!important}
body.dark .more-tools-grid .tool-tab.on{background:var(--brand)!important;color:#0a0a0b!important;border-color:var(--brand)!important}

/* 7. 子标签页 tabs */
body.dark .tabs .tab{background:var(--surface)!important;color:var(--text-3)!important;border-color:var(--input-border)!important}
body.dark .tabs .tab.on{background:var(--brand)!important;color:#0a0a0b!important}
body.dark .tabs.sub2 .tab{background:var(--surface)!important;color:var(--text-3)!important;border-color:var(--input-border)!important}
body.dark .tabs.sub .tab.on{background:#3f3f46!important;color:#fafafa!important}
body.dark .tabs.sub2 .tab.on{background:#3f3f46!important;color:#fafafa!important;border-color:#52525b!important}

/* 8. 顶部导航 */
body.dark .rh-cat-item{color:var(--text-3)!important}
body.dark .rh-cat-item.on{background:var(--surface-2)!important;color:var(--text-1)!important;border-color:var(--input-border)!important}
body.dark .rh-sub-item{background:var(--surface)!important;color:var(--text-3)!important;border-color:var(--input-border)!important}
body.dark .rh-sub-item.on{background:#3f3f46!important;color:#fafafa!important;border-color:#52525b!important}

/* 9. 表格 */
body.dark #batchWTable,body.dark #batchTable{border-color:var(--input-border)!important}
body.dark #batchWTable thead tr,body.dark #batchTable thead tr{background:var(--surface)!important}
body.dark #batchWTable th,body.dark #batchTable th{color:var(--text-1)!important;border-bottom-color:var(--input-border)!important}
body.dark #batchWTbody td,body.dark #batchTbody td{color:var(--text-1)!important;border-color:var(--input-border)!important}
body.dark #batchWTable tbody tr,body.dark #batchTable tbody tr{background:var(--card)!important}
body.dark #batchWTable tbody tr:nth-child(even),body.dark #batchTable tbody tr:nth-child(even){background:var(--surface)!important}
body.dark #batchWTfoot,body.dark #batchTfoot{background:var(--surface)!important}
body.dark #exRateTable thead tr{background:var(--surface)!important}
body.dark #exRateTable th{color:var(--text-1)!important;border-bottom-color:var(--input-border)!important}
body.dark #exRateTable td{color:var(--text-1)!important;border-bottom-color:var(--input-border)!important}
body.dark #exRateTable tbody tr{background:var(--card)!important}
body.dark #exRateTable tbody tr:nth-child(even){background:var(--surface)!important}
body.dark #exRateTable tbody tr:hover{background:var(--surface-2)!important}
body.dark #exRateTable table{border-color:var(--input-border)!important}

/* 10. SVG图表 */
body.dark #diagSvg text{fill:var(--text-3)}
body.dark #diagSvg text[fill="#71717a"]{fill:var(--text-2)}
body.dark #diagSvg text[fill="#52525b"]{fill:var(--text-2)}
body.dark #diagSvg text[fill="#a1a1aa"]{fill:var(--text-4)}
body.dark #diagSvg line[stroke="#71717a"]{stroke:var(--text-4)}
body.dark #diagSvg line[stroke="#a1a1aa"]{stroke:var(--text-4)}
body.dark #diagSvg rect{stroke:var(--text-2)}

/* 11. 底部导航 */
body.dark .rh-tabbar{background:var(--card)!important;border-top-color:var(--card-border)!important}
body.dark .rh-tabbar-page{background:rgba(24,24,27,.45)!important;border-color:rgba(255,255,255,.10)!important;box-shadow:0 8px 32px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.15),inset 0 .5px 0 rgba(255,255,255,.08)!important;-webkit-backdrop-filter:saturate(1.8) blur(22px)!important;backdrop-filter:saturate(1.8) blur(22px)!important}
body.dark .rh-tab-item{color:var(--text-4)!important}
body.dark .rh-tab-item.on{color:var(--text-1)!important}

/* 12. 验证码 */
body.dark #regCaptchaCanvas{border-color:var(--input-border)!important;filter:brightness(.7) contrast(1.2)!important}

/* 13. 侧边栏深色模式 */
body.dark .sidebar,
body.dark .sidebar-header,
body.dark .sidebar-user,
body.dark .sidebar-footer{
  background:var(--card)!important;
  border-color:var(--input-border)!important;
}
body.dark .sidebar-header::after{
  background:var(--input-border)!important;
}
body.dark .sidebar-header .sh-title{
  color:var(--text-1)!important;
}
body.dark .sidebar-header .sh-sub{
  color:var(--text-3)!important;
}
body.dark .sidebar-user .su-name{
  color:var(--text-1)!important;
}
body.dark .sidebar-nav a{
  color:var(--text-2)!important;
}
body.dark .sidebar-nav a:hover,
body.dark .sidebar-nav a:active{
  background:var(--surface)!important;
  color:var(--text-1)!important;
}
body.dark .sidebar-tool-card{
  color:var(--text-2)!important;
}
body.dark .sidebar-tool-card:hover{
  background:var(--surface)!important;
  color:var(--text-1)!important;
}
body.dark .sidebar-tool-card .stc-icon svg path,
body.dark .sidebar-tool-card .stc-icon svg line,
body.dark .sidebar-tool-card .stc-icon svg rect,
body.dark .sidebar-tool-card .stc-icon svg circle,
body.dark .sidebar-tool-card .stc-icon svg polyline{
  stroke:var(--text-3)!important;
}
body.dark .sidebar-tool-card:hover .stc-icon svg path,
body.dark .sidebar-tool-card:hover .stc-icon svg line,
body.dark .sidebar-tool-card:hover .stc-icon svg rect,
body.dark .sidebar-tool-card:hover .stc-icon svg circle,
body.dark .sidebar-tool-card:hover .stc-icon svg polyline{
  stroke:var(--text-1)!important;
}
body.dark .sidebar-nav .sn-section{
  color:var(--text-4)!important;
}
body.dark .sidebar-ver span{
  color:var(--text-3)!important;
}
body.dark .sidebar-announcement{
  background:var(--surface)!important;
  border-color:var(--input-border)!important;
}
body.dark .sidebar-announcement .sa-content{
  color:var(--text-2)!important;
}
body.dark .sidebar-footer a{
  color:var(--danger)!important;
}

/* 14. 透过率结果卡片 */
body.dark #resTrans [style*="rgba(255,255,255"]{
  background:var(--surface)!important;
}

/* 15. 出成率结果卡片 */
body.dark #resYield > div > div[style*="rgba(255,255,255"]{
  background:var(--surface)!important;
}
body.dark #yieldError{
  background:#332b00!important;
  border-color:#665500!important;
  color:var(--text-2)!important;
}

/* ═══════════════════════════════════════════
   网页版滚动支持
   ═══════════════════════════════════════════ */
html{
  overflow-y:auto;
  height:auto;
}
body{
  overflow-y:auto;
  overflow-x:hidden;
  height:auto;
}

/* ═══════════════════════════════════════════
   网页版 — 顶部分类导航自动换行（两行均分）
   不影响手机版，不影响内容区宽度
   ═══════════════════════════════════════════ */
@media(min-width:500px){
  .rh-cat-nav{
    flex-wrap:wrap !important;
    overflow-x:visible !important;
    justify-content:center;
    padding:4px 0 6px;
  }
  .rh-cat-item{
    flex:0 0 calc(25% - 5px) !important;
    min-width:0 !important;
  }
}

/* ═══════════════════════════════════════════
   深夜模式 — 弹窗/模态框修复 (dark mode modals)
   ═══════════════════════════════════════════ */

/* 1. 弹窗内按钮 — 深夜模式下按钮需要明显可见 */
body.dark .plan-upgrade-box button{
  background:var(--brand)!important;color:var(--card)!important;border:1px solid var(--brand)!important;
}
body.dark .plan-upgrade-box .cancel{
  background:transparent!important;color:var(--text-1)!important;border:1px solid var(--text-4)!important;
}
/* 深夜模式下弹窗文字和边框增强对比度 */
body.dark .plan-upgrade-box{
  border:1px solid var(--input-border)!important;
}
body.dark .plan-upgrade-box p{
  color:var(--text-2)!important;
}
/* 登录/注册/找回密码/反馈弹窗中的按钮 (inline style background:var(--brand) + color:#fff) */
body.dark #loginModal button,
body.dark #registerModal button,
body.dark #forgotModal button,
body.dark #feedbackPanel button{
  background:var(--brand)!important;color:var(--card)!important;border:1px solid var(--brand)!important;
}
/* 弹窗中获取验证码小按钮 */
body.dark #regSmsBtn,
body.dark #forgotSmsBtn{
  background:var(--brand)!important;color:var(--card)!important;border:1px solid var(--brand)!important;
}

/* 2. 弹窗内输入框 — 修复 focus/blur 硬编码浅色边框 */
body.dark #modalLoginUser,
body.dark #modalLoginPass,
body.dark #regPhone,
body.dark #regSmsCode,
body.dark #regCaptcha,
body.dark #regUsername,
body.dark #regPassword,
body.dark #regPassword2,
body.dark #forgotPhone,
body.dark #forgotSmsCode,
body.dark #forgotNewPass,
body.dark #forgotNewPass2,
body.dark #feedbackContact,
body.dark #feedbackType,
body.dark #feedbackContent{
  background:var(--input-bg)!important;
  border-color:var(--input-border)!important;
  color:var(--text-1)!important;
}
body.dark #modalLoginUser:focus,
body.dark #modalLoginPass:focus,
body.dark #regPhone:focus,
body.dark #regSmsCode:focus,
body.dark #regCaptcha:focus,
body.dark #regUsername:focus,
body.dark #regPassword:focus,
body.dark #regPassword2:focus,
body.dark #forgotPhone:focus,
body.dark #forgotSmsCode:focus,
body.dark #forgotNewPass:focus,
body.dark #forgotNewPass2:focus,
body.dark #feedbackContact:focus,
body.dark #feedbackType:focus,
body.dark #feedbackContent:focus{
  border-color:var(--input-focus)!important;
  box-shadow:0 0 0 3px var(--brand-soft)!important;
}

/* 3. 弹窗内 checkbox */
body.dark #regAgreeCheck{
  accent-color:var(--text-1)!important;
}

/* 4. 计算结果白色半透明背景修复 (螺纹/工业/展开/铣磨/公差带等) */
body.dark #resThread [style*="rgba(255,255,255"],
body.dark #resCutting [style*="rgba(255,255,255"],
body.dark #resTaper [style*="rgba(255,255,255"],
body.dark #resUnfold [style*="rgba(255,255,255"],
body.dark #resMilling [style*="rgba(255,255,255"],
body.dark #resTol [style*="rgba(255,255,255"],
body.dark #resExpress [style*="rgba(255,255,255"]{
  background:var(--surface)!important;
}

/* 4b. 面积/体积子标签结果卡片白色半透明背景修复 (深夜模式) */
body.dark #resAreaSquare [style*="rgba(255,255,255"],
body.dark #resAreaRound [style*="rgba(255,255,255"],
body.dark #resAreaTriangle [style*="rgba(255,255,255"],
body.dark #resAreaRing [style*="rgba(255,255,255"],
body.dark #resVolCuboid [style*="rgba(255,255,255"],
body.dark #resVolCube [style*="rgba(255,255,255"],
body.dark #resVolCylinder [style*="rgba(255,255,255"],
body.dark #resVolCone [style*="rgba(255,255,255"],
body.dark #resVolSphere [style*="rgba(255,255,255"],
body.dark #resVolPyramid [style*="rgba(255,255,255"],
body.dark #resVolRing [style*="rgba(255,255,255"]{
  background:var(--surface)!important;
}

/* 5. 弹窗内 select option */
body.dark #feedbackType option{
  background:var(--card);color:var(--text-1);
}

/* 6. 批量重量计算中的 tab 按钮深色模式 */
body.dark #batchWTypeBtns .tab.on{
  background:var(--surface-2)!important;color:var(--text-1)!important;
}

/* 7. 批量计算 textarea / 结果区域 */
body.dark #batchWSqInput,
body.dark #batchWRgInput,
body.dark #batchWRdInput{
  background:var(--input-bg)!important;
  border-color:var(--input-border)!important;
  color:var(--text-1)!important;
}

/* 8. 复制按钮深色模式 */
body.dark button[onclick^="copy"]{
  background:var(--surface)!important;color:var(--text-1)!important;border-color:var(--input-border)!important;
}

/* 9. 确保弹窗背景遮罩在深色模式下正常 */
body.dark #historyPanel,
body.dark #feedbackPanel,
body.dark #changelogPanel,
body.dark #sharePanel,
body.dark #loginModal,
body.dark #registerModal,
body.dark #forgotModal,
body.dark .plan-upgrade{
  /* 遮罩层保持半透明黑色即可，无需额外处理 */
}

/* 10. 弹窗内链接颜色 */
body.dark #loginModal a,
body.dark #registerModal a,
body.dark #forgotModal a{
  color:var(--text-1)!important;
}

/* ═══════════════════════════════════════════
   深夜模式 — 「我的」页面修复
   ═══════════════════════════════════════════ */

/* 1. 头像圆圈：白底白图标 → 深色底+浅色图标 */
body.dark #meLogin > div:first-child,
body.dark #meUser > div:first-child{
  background:var(--surface-2)!important;
}
body.dark #meLogin > div:first-child svg,
body.dark #meUser > div:first-child svg{
  stroke:var(--text-2)!important;
}

/* 2. 管理员标签：浅色渐变 → 深色模式适配 */
body.dark #sidebarUserRole{
  background:var(--surface-2)!important;
  color:var(--text-2)!important;
}
body.dark #meUserRole{
  color:var(--text-3)!important;
}

/* 3. 「我的」页面卡片内文字对比度 */
body.dark .rh-me-title{
  color:var(--text-1)!important;
}
body.dark .rh-me-grid-item{
  color:var(--text-2)!important;
}
body.dark .rh-me-grid-item .rh-gi{
  background:var(--surface)!important;
  color:var(--text-2)!important;
}
body.dark .rh-me-grid-item .rh-gi svg{
  stroke:var(--text-2)!important;
}
body.dark .rh-me-list-item{
  color:var(--text-2)!important;
}
body.dark .rh-me-list-item .rh-ic{
  background:var(--surface)!important;
  color:var(--text-2)!important;
}
body.dark .rh-me-list-item .rh-ic svg{
  stroke:var(--text-2)!important;
}
body.dark .rh-me-list-item .rh-arrow{
  stroke:var(--text-4)!important;
}
body.dark .rh-me-collapse{
  color:var(--text-3)!important;
}
body.dark .rh-me-legal{
  color:var(--text-3)!important;
}

/* 4. 退出登录按钮 */
body.dark #meLogout .rh-ic{
  background:rgba(231,76,60,.12)!important;
}
body.dark #meLogout .rh-ic svg{
  stroke:var(--danger)!important;
}

/* ═══════════════════════════════════════════
   深夜模式 — 版本记录/历史/分享弹窗修复
   ══════════════════════════════════════════ */

/* 版本记录弹窗 - "当前版本" banner */
body.dark #changelogContent div[style*="background:linear-gradient"]{
  background:linear-gradient(135deg,#3f3f46,#52525b)!important;
  color:#fafafa!important;
}
body.dark #changelogContent div[style*="background:var(--brand-grad)"]{
  background:linear-gradient(135deg,#3f3f46,#52525b)!important;
  color:#fafafa!important;
}
/* 版本记录弹窗 - "最新" 标签 */
body.dark #changelogContent span[style*="background:var(--brand)"]{
  background:#52525b!important;
  color:#fafafa!important;
}
body.dark #changelogContent span[style*="background:#3f3f46"]{
  color:#fafafa!important;
}
/* 版本记录弹窗 - 卡片 */
body.dark #changelogContent > div{
  background:var(--surface)!important;
}
body.dark #changelogContent > div span{
  color:var(--text-1)!important;
}
body.dark #changelogContent > div li{
  color:var(--text-2)!important;
}

/* 历史记录面板 */
body.dark #historyPanel > div{
  background:var(--card)!important;
}
body.dark #historyContent > div{
  background:var(--surface)!important;
}

/* 分享弹窗 */
body.dark #sharePanel > div{
  background:var(--card)!important;
}
body.dark #sharePanel div[style*="border:1.5px solid var(--divider)"]{
  border-color:var(--input-border)!important;
  background:var(--surface)!important;
}

/* 批量计算结果表格行 - 硬编码颜色修复 */
body.dark #batchWTable tbody td[style*="color:#999"]{
  color:var(--text-3)!important;
}
body.dark #batchWTable tbody td[style*="color:#888"]{
  color:var(--text-2)!important;
}
body.dark #batchWTable tbody td[style*="color:#333"]{
  color:var(--text-1)!important;
}
body.dark #batchWTable tfoot td[style*="color:#4361ee"]{
  color:var(--text-1)!important;
}
body.dark #batchTable tbody td[style*="color:#999"]{
  color:var(--text-3)!important;
}
body.dark #batchTable tbody td[style*="color:#333"]{
  color:var(--text-1)!important;
}
body.dark #batchTable tfoot td[style*="color:#4361ee"]{
  color:var(--text-1)!important;
}

/* ═══════════════════════════════════════════
   搜索面板（下拉触发）
   ═══════════════════════════════════════════ */

/* 搜索遮罩 */
.rh-search-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  z-index:9000;
  display:none;
  align-items:flex-start;justify-content:center;
  padding:60px 16px 20px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:rhFadeIn .2s ease;
}
.rh-search-overlay.show{display:flex}
@keyframes rhFadeIn{from{opacity:0}to{opacity:1}}
@keyframes rhSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* 搜索面板 */
.rh-search-panel{
  width:100%;max-width:440px;
  background:var(--card);
  border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.08);
  overflow:hidden;
  animation:rhSlideUp .25s ease;
  display:flex;flex-direction:column;
  max-height:calc(100vh - 100px);
}

/* 搜索输入区 */
.rh-search-input-wrap{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--divider);
  background:var(--surface);
}
.rh-search-input-wrap svg{
  width:18px;height:18px;flex-shrink:0;
  stroke:var(--text-4);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.rh-search-input{
  flex:1;border:none;outline:none;background:transparent;
  font-size:15px;color:var(--text-1);
  font-family:var(--font);
}
.rh-search-input::placeholder{color:var(--text-4)}
.rh-search-clear{
  width:24px;height:24px;border-radius:50%;
  background:var(--surface-2);border:none;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  color:var(--text-3);font-size:14px;line-height:1;
  transition:background .15s;
}
.rh-search-clear:hover{background:var(--divider)}
.rh-search-clear.show{display:flex}

/* 搜索结果列表 */
.rh-search-results{
  overflow-y:auto;flex:1;
  padding:6px 0;
  scrollbar-width:thin;
}
.rh-search-results::-webkit-scrollbar{width:4px}
.rh-search-results::-webkit-scrollbar-thumb{background:var(--divider);border-radius:4px}

.rh-search-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  cursor:pointer;
  transition:background .12s;
  border-bottom:1px solid var(--divider);
}
.rh-search-item:last-child{border-bottom:none}
.rh-search-item:hover,.rh-search-item:active{background:var(--brand-soft)}
.rh-search-item-icon{
  width:36px;height:36px;border-radius:10px;
  background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.rh-search-item-icon svg{
  width:18px;height:18px;
  stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.rh-search-item-text{flex:1;min-width:0}
.rh-search-item-name{
  font-size:14px;font-weight:600;color:var(--text-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rh-search-item-cat{
  font-size:11px;color:var(--text-3);margin-top:2px;
}
.rh-search-item-arrow{
  color:var(--text-4);font-size:16px;flex-shrink:0;
}

/* 搜索无结果 */
.rh-search-empty{
  padding:32px 16px;text-align:center;
  color:var(--text-3);font-size:13px;
}
.rh-search-empty-icon{font-size:32px;margin-bottom:8px;opacity:.5}

/* 搜索提示标签 */
.rh-search-hint{
  padding:8px 16px 4px;
  font-size:11px;color:var(--text-4);font-weight:500;
  letter-spacing:.5px;text-transform:uppercase;
}

/* 快捷键提示 */
.rh-search-kbd{
  display:inline-flex;align-items:center;
  padding:2px 5px;border-radius:4px;
  background:var(--surface-2);border:1px solid var(--divider);
  font-size:10px;color:var(--text-4);font-family:var(--font-mono);
  margin-left:4px;
}