/* 03 /nav/ —— 图书馆目录柜。浅蓝灰金属柜体 + 白色打字机索引卡 + 抽屉标签。
   这个页面不该"像网页"，它该像你在馆里翻一柜卡片。 */

:root{
  --cab:#C9D2D8; --cab2:#B4BFC7; --card:#FCFCF9; --cardline:#1B3A5C;
  --ink:#1A2530; --ink2:#5A6A78; --tab:#9B2C2C; --brass:#8C7A4A;
  --mono:"Courier New",ui-monospace,Consolas,monospace;
  --sans:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:15px/1.7 var(--sans);color:var(--ink);
  background:linear-gradient(180deg,var(--cab),var(--cab2));background-attachment:fixed}

.cabinet{max-width:1080px;margin:0 auto;padding:0 26px 90px}

/* 柜顶铭牌 */
.plate{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin:44px 0 0;padding:22px 26px;background:linear-gradient(180deg,#DDE4E9,#CBD4DA);
  border:1px solid #A9B5BE;box-shadow:0 1px 0 #E9EEF1 inset,0 6px 16px rgba(20,40,60,.14)}
.plate h1{font:400 30px/1.1 var(--mono);letter-spacing:.02em;margin:0;color:var(--ink)}
.plate .no{font:11px/1.7 var(--mono);letter-spacing:.2em;color:var(--tab);text-transform:uppercase}
.plate .back{font:11px/1 var(--mono);letter-spacing:.14em;color:var(--ink2);text-decoration:none;
  border:1px solid #A9B5BE;padding:9px 13px;background:#E4EAEF;border-radius:1px;transition:.18s}
.plate .back:hover{background:var(--ink);color:var(--card);border-color:var(--ink)}
.note{font:12.5px/1.7 var(--mono);color:#43535F;margin:14px 2px 0;letter-spacing:.01em}

/* 检索条：抽屉拉手 */
.drawer{margin:34px 0 0;padding:20px 22px;background:linear-gradient(180deg,#D7DFE5,#C2CCD4);
  border:1px solid #A9B5BE;box-shadow:0 1px 0 #E9EEF1 inset;position:relative}
.drawer .handle{position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:96px;height:7px;border-radius:4px;background:linear-gradient(180deg,#8C99A3,#B7C2CA);
  box-shadow:0 1px 1px rgba(255,255,255,.7) inset}
.drawer input{width:100%;margin-top:10px;background:var(--card);border:1px solid #9FAEB8;
  color:var(--ink);font:16px/1 var(--mono);padding:15px 14px;outline:none;
  box-shadow:0 2px 5px rgba(20,40,60,.12) inset}
.drawer input:focus{border-color:var(--cardline);box-shadow:0 0 0 2px rgba(27,58,92,.15)}
.drawer .kbd{position:absolute;right:32px;top:52px;font:9px/1 var(--mono);letter-spacing:.14em;
  color:#7B8994;border:1px solid #A9B5BE;padding:5px 7px;background:#E4EAEF}

/* 抽屉标签 = 分类筛选 */
.tabs{display:flex;gap:5px;flex-wrap:wrap;margin:22px 0 0;align-items:center}
.tab{font:11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#3E4E5A;cursor:pointer;
  background:linear-gradient(180deg,#E4EAEF,#CDD6DC);border:1px solid #A9B5BE;border-bottom:0;
  padding:11px 14px 12px;border-radius:2px 2px 0 0;transition:.16s;position:relative;top:1px}
.tab:hover{background:#EEF2F5}
.tab.on{background:var(--card);color:var(--ink);font-weight:700;
  box-shadow:0 -2px 0 var(--tab) inset}
.tally{margin-left:auto;font:10px/1 var(--mono);letter-spacing:.14em;color:#4E5E6A}

/* 卡片托盘 */
.tray{background:var(--card);border:1px solid #A9B5BE;margin-top:0;padding:26px 24px 30px;
  box-shadow:0 8px 22px rgba(20,40,60,.16)}
.shelf{margin-bottom:34px}
.shelf:last-child{margin-bottom:0}
.shelf h2{font:11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--tab);
  margin:0 0 4px;display:flex;align-items:center;gap:14px}
.shelf h2::after{content:'';flex:1;height:1px;background:repeating-linear-gradient(90deg,#C6CFD6 0 4px,transparent 4px 8px)}
.shelf .cnt{font:10px/1 var(--mono);letter-spacing:.1em;color:#8B98A2;text-transform:none;margin-bottom:16px}

/* 索引卡本体 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.card{position:relative;background:var(--card);border:1px solid #C6CFD6;padding:16px 16px 20px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:7px;
  box-shadow:2px 3px 0 rgba(20,40,60,.07);transition:.18s cubic-bezier(.22,.61,.36,1)}
/* 蓝色索引横线 */
.card::before{content:'';position:absolute;left:0;right:0;top:44px;bottom:16px;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 21px,rgba(27,58,92,.13) 21px 22px)}
/* 右上角手写分类号 */
.card::after{content:attr(data-no);position:absolute;right:9px;top:6px;
  font:9px/1 var(--mono);letter-spacing:.08em;color:#9AA6B0}
.card:hover{transform:translate(-2px,-3px);box-shadow:5px 7px 0 rgba(20,40,60,.13);border-color:#8B98A2}
.card.hide{display:none}
.card .nm{font:700 15px/1.35 var(--mono);letter-spacing:-.01em;color:var(--ink);position:relative;z-index:1}
.card .host{font:10px/1 var(--mono);letter-spacing:.06em;color:var(--brass);position:relative;z-index:1}
.card .why{font:13px/1.6 var(--sans);color:#43535F;position:relative;z-index:1;
  border-top:1px solid #DDE3E8;padding-top:8px;margin-top:2px}
.card .why::before{content:'注 · ';color:#9AA6B0;font-family:var(--mono);font-size:10px}

.empty{display:none;padding:44px 20px;text-align:center;background:var(--card);
  border:1px dashed #A9B5BE;font:13px/1.8 var(--mono);color:#7B8994;letter-spacing:.04em}
.empty.show{display:block}

.below{margin-top:44px;padding-top:18px;border-top:1px solid #A9B5BE;
  font:11px/1.8 var(--mono);letter-spacing:.06em;color:#4E5E6A;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.below a{color:#3E4E5A;text-decoration:none;border-bottom:1px solid #A9B5BE}
.below a:hover{color:var(--tab);border-bottom-color:var(--tab)}
.hold{background:#E8EDF0;color:#8B98A2;padding:0 4px}

@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}