/* 汉—哈平行语料观测台 · 亮色图纸模式 浅冷灰蓝底，深墨字；青 = 汉文通道，铜 = 哈文通道，刻线 = 命中。颜色只编码语义。 */ :root{ --void:#F7F5F0; --plate:#FCFBF8; --plate2:#F1EEE6; --rule:#E5E1D7; --rule-soft:rgba(44,43,40,.13); --ink:#2C2B28; --dim:#756F63; --zh:#B34A32; --kz:#B34A32; --hit:#B34A32; --danger:#A5382A; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --kzfont:"KazakhSoft Baspa","Noto Naskh Arabic","Scheherazade New","Microsoft Uighur",Arial,serif; --kz-size:20px; } @media (min-width:861px){ :root{ --kz-size:22px; } } /* 项目自带哈萨克文字体：离线可用，不引外网 */ @font-face{ font-family:"KazakhSoft Baspa"; src:url("fonts/KazakhSoftBaspaWeb.woff2?v=1") format("woff2"), url("fonts/KazakhSoftBaspaWeb.ttf?v=1") format("truetype"); font-weight:400;font-style:normal;font-display:swap; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--void);color:var(--ink);font-family:var(--font); font-size:14.5px;line-height:1.65;-webkit-font-smoothing:antialiased; } /* 设备状态条：两路信号各占一半，硬分割，无渐变 */ body::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:200; background:linear-gradient(90deg,#B34A32 0 50%,#C9BBA3 50% 100%)} button,input,select,textarea{font:inherit;color:inherit} a{color:var(--zh);text-decoration:none} a:hover{color:#8F3722} ::selection{background:rgba(179,74,50,.20);color:var(--ink)} :focus-visible{outline:2px solid var(--zh);outline-offset:2px} [hidden]{display:none!important} .app{max-width:1180px;margin:0 auto;padding:0 28px 72px} /* 顶栏：一条细线，不是导航卡片 */ .topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; padding:22px 0 20px;border-bottom:1px solid var(--rule)} .brand{display:flex;align-items:center;gap:14px} .logo{width:34px;height:34px;border:1px solid var(--rule);border-left:3px solid var(--zh); border-radius:0;background:transparent;color:var(--ink);display:grid;place-items:center; font-size:11px;font-weight:600;letter-spacing:0;flex-shrink:0;box-shadow:none;position:relative} .logo::after{content:"";position:absolute;left:-3px;bottom:0;width:3px;height:50%;background:var(--kz)} h1{font-size:17px;margin:0;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .sub{margin:2px 0 0;color:var(--dim);font-size:11.5px;letter-spacing:.02em} .stats,.topright,.userbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end} .topright a{text-decoration:none;display:inline-block} .nav-link{font-size:13px;font-weight:600;color:var(--ink);padding:6px 12px;border:1px solid var(--rule); letter-spacing:.02em;transition:border-color .15s,color .15s} .nav-link:hover{border-color:var(--zh);color:var(--zh)} /* 双查询切换：左侧分段控件，统一风格。当前页为选中态（实心锈红）， 另一项为醒目描边，二者并列放在最左边、一眼可见 */ .seg{display:inline-flex;align-items:stretch;border:1.5px solid var(--zh);border-radius:9px;overflow:hidden} .seg a{display:inline-flex;align-items:center;font-size:13px;font-weight:600;letter-spacing:.02em; padding:7px 16px;color:var(--zh);background:transparent;border:0;border-radius:0; text-decoration:none;transition:background .15s,color .15s} .seg a + a{border-left:1.5px solid var(--zh)} .seg a:hover{background:rgba(179,74,50,.12);color:var(--zh)} .seg a.is-active{background:var(--zh);color:var(--void);cursor:default} .seg a.is-active:hover{background:#9C3F2A;color:var(--void)} .chip{background:transparent;border:1px solid var(--rule);border-radius:0; padding:5px 10px;font-size:11.5px;color:var(--dim)} .chip b{color:var(--ink);font-size:12.5px;font-weight:600} .userbar .uname{font-weight:600;color:var(--ink)} .userbar .qchip{background:transparent;border:1px solid var(--zh);color:var(--zh); border-radius:0;padding:4px 10px;font-size:11.5px;font-family:var(--mono)} .userbar .qchip.low{border-color:var(--kz);color:var(--kz)} .userbar .qchip.full{border-color:var(--rule);color:var(--dim)} .topright a.btn.mini.locked{opacity:.4} /* 检索台：命令行输入，吸顶时只换一条亮线 */ .panel{margin:0;background:rgba(247,245,240,.95);border:0;border-bottom:1px solid var(--rule); border-radius:0;padding:20px 0 16px;box-shadow:none;position:sticky;top:0;z-index:60; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:padding .18s,border-color .18s} .panel.stuck{padding:11px 0 10px;border-bottom-color:rgba(179,74,50,.45); border-radius:0;box-shadow:none} .panel.stuck .opts{display:none} .search-row{display:flex;gap:12px;align-items:stretch;flex-wrap:nowrap} .search-wrap{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center; border-bottom:1px solid var(--rule);transition:border-color .15s} .search-wrap:focus-within{border-bottom-color:var(--zh)} .search-wrap svg{display:none} .search-wrap::before{content:">";font-family:var(--mono);font-size:15px;color:var(--zh); position:absolute;left:2px;top:50%;transform:translateY(-50%);pointer-events:none} .search-wrap input{width:100%;padding:11px 34px 11px 22px;border:0;border-radius:0; background:transparent;outline:none;font-size:16px;letter-spacing:0;box-shadow:none} .search-wrap input::placeholder{color:#948E82} .search-wrap input:focus{background:transparent;box-shadow:none} .clear-btn{position:absolute;right:4px;border:0;background:transparent;color:var(--dim); width:22px;height:22px;border-radius:0;cursor:pointer;font-size:13px;line-height:1; display:flex;align-items:center;justify-content:center;padding:0} .clear-btn:hover{color:var(--danger);background:transparent} .btn{border:1px solid var(--rule);background:transparent;color:var(--ink);padding:8px 16px; border-radius:0;cursor:pointer;transition:border-color .15s,color .15s,background .15s; white-space:nowrap;font-size:13px} .btn:hover{border-color:var(--zh);color:var(--zh);background:rgba(179,74,50,.06)} .btn:active{transform:none} .btn.primary{background:transparent;color:var(--zh);border-color:var(--zh); font-weight:600;padding:11px 24px;letter-spacing:.04em} .btn.primary:hover{background:var(--zh);color:var(--void)} .btn.mini{padding:4px 10px;font-size:11.5px} .btn.link{border:0;background:none;color:var(--dim);padding:2px 4px} .btn.link:hover{color:var(--zh);background:none} .btn:disabled,.btn.primary:disabled,.btn.primary[disabled]{opacity:.35;cursor:not-allowed; border-color:var(--rule);color:var(--dim);background:transparent} .btn.primary:disabled:hover{background:transparent;color:var(--dim)} .search-row .btn.primary{flex:0 0 auto} .opts{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px; padding-top:0;border-top:0;min-height:16px} .note{font-size:11.5px;color:var(--dim);margin:0;font-family:var(--mono)} /* 结果区：记录行，不是卡片 */ .result-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px; flex-wrap:wrap;margin:26px 0 0;padding:0 0 10px;border-bottom:1px solid var(--rule)} .result-head h2{font-size:13px;margin:0;font-weight:500;color:var(--ink);letter-spacing:0} .result-head h2::before{content:"";display:inline-block;width:6px;height:6px; background:#B34A32;margin-right:9px;vertical-align:2px} #results{position:relative;border-left:1px solid var(--rule)} .card{position:relative;background:transparent;border:0;border-radius:0;box-shadow:none; margin:0;padding:18px 0 18px 22px;border-bottom:1px solid var(--rule);transition:none} .card::before{content:"";position:absolute;left:-1px;top:27px;width:9px;height:1px;background:#B34A32} .card:hover{transform:none;box-shadow:none} .card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start; flex-wrap:wrap;margin:0 0 10px} .meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:11px; color:var(--dim);letter-spacing:0;font-family:var(--mono)} /* 双通道：青=汉文，铜=哈文，两条竖轴并置 */ .pair{display:grid;grid-template-columns:1fr 1fr;gap:0} .side{border-left:2px solid #B34A32;border-radius:0;overflow:visible; display:flex;flex-direction:column;min-height:0;background:transparent; padding:0 20px 0 14px} .side.kz{border-left:2px solid #C9BBA3;padding:0 0 0 20px} .side-label{display:flex;justify-content:space-between;align-items:center;gap:8px; padding:0 0 8px;margin-bottom:10px;font-size:11px;color:var(--zh);letter-spacing:0; background:transparent;border:0;border-bottom:1px solid var(--rule-soft)} .side.kz .side-label{color:var(--kz)} .side-label .btn.link{color:var(--dim)} .side.kz .side-label .btn.link{color:var(--dim)} .para{padding:0;font-size:14px;white-space:pre-wrap;word-break:break-word;flex:1; line-height:1.85;letter-spacing:0;max-width:68ch} .para.kzt{direction:rtl;text-align:right;unicode-bidi:plaintext;font-family:var(--kzfont); font-size:var(--kz-size);line-height:2.1;color:#2C2B28} .para.none{color:var(--dim);font-size:12.5px;display:flex;align-items:center} .para .ellip{color:var(--dim)} /* 命中使用下划刻线，不用荧光背景块 */ mark{background:transparent;color:inherit;border-radius:0;padding:0 1px; box-shadow:inset 0 -2px 0 var(--hit)} mark.corr{background:transparent;color:inherit;border-radius:0;padding:0 1px; box-shadow:inset 0 -2px 0 var(--kz)} .side-more{padding:8px 0 0} .side-more button{border:0;background:none;color:var(--zh);font-size:11.5px; cursor:pointer;padding:2px 4px;border-radius:0;letter-spacing:0} .side-more button:hover{background:none;color:#8F3722} .card-foot{margin-top:12px;padding-top:0;border-top:0;display:flex;gap:14px;flex-wrap:wrap; align-items:center;font-size:11.5px;color:var(--dim);letter-spacing:0} .card-foot a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule)} .card-foot a:hover{color:var(--zh);border-color:var(--zh);text-decoration:none} .card-foot .btn.mini.report{color:var(--dim);border-color:var(--rule)} .card-foot .btn.mini.report:hover{color:var(--danger);border-color:var(--danger);background:transparent} /* 名单类公告的人名对照 */ .namebook{padding:0;flex:1} .nb-note{font-size:11.5px;color:var(--dim);line-height:1.7;margin-bottom:10px} .nb-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule-soft)} .nb-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:7px 0; border-bottom:1px solid var(--rule-soft);background:transparent;border-radius:0} .nb-zh{font-size:13px;color:var(--ink);word-break:break-all} .nb-zh::after{content:"→";margin-left:8px;color:var(--kz);font-size:11px} .nb-kz{font-family:var(--kzfont);font-size:calc(var(--kz-size) - 1px); line-height:1.9;color:#2C2B28;unicode-bidi:plaintext} .nb-miss{font-size:11.5px;color:var(--danger);font-style:normal} .nb-foot{font-size:11px;color:var(--dim);margin-top:8px} .empty-box{text-align:left;padding:28px 0 28px 22px;margin:0;color:var(--dim); background:transparent;border:0;border-radius:0;box-shadow:none} .empty-box strong{display:block;color:var(--ink);font-size:15px;margin-bottom:6px;font-weight:500} .empty-box strong::before{content:"> ";font-family:var(--mono);color:var(--zh)} .pager{display:flex;justify-content:flex-start;gap:14px;align-items:center;margin-top:22px; font-size:11.5px;color:var(--dim);font-family:var(--mono)} .foot{margin-top:40px;padding-top:14px;border-top:1px solid var(--rule); font-size:11px;color:var(--dim);line-height:1.9} /* 整篇对照弹窗与提示 */ .backdrop{position:fixed;inset:0;background:rgba(44,43,40,.52); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); display:grid;place-items:center;padding:22px;z-index:140} .modal{background:var(--plate);width:min(960px,100%);max-height:88vh;overflow:auto; border:1px solid var(--rule);border-radius:0;padding:24px;box-shadow:0 24px 70px rgba(44,43,40,.20)} .modal.small{width:min(720px,100%)} .modal h2{margin:0 0 6px;font-size:16px;font-weight:600;letter-spacing:0;color:var(--ink)} .modal .desc{color:var(--dim);font-size:12.5px;margin:0 0 18px;letter-spacing:0} .modal .desc a.ttl{color:var(--zh);text-decoration:none; border-bottom:1px solid rgba(179,74,50,.4);padding-bottom:1px} .modal .desc a.ttl:hover{color:#8F3722;border-color:var(--zh)} .modal .desc a.ttl .ext{font-size:10px;opacity:.55;margin-left:3px;vertical-align:2px} .modal .desc a.ttl.kz{direction:rtl;unicode-bidi:plaintext;font-family:var(--kzfont); font-size:14px;color:var(--kz);letter-spacing:0} .modal .desc a.ttl.kz .ext{vertical-align:auto;margin-left:0;margin-right:3px} .modal .desc .kz-dim{font-family:var(--kzfont);font-size:14px} .modal-close{float:right} .row-pair{display:grid;grid-template-columns:52px 1fr 1fr;gap:14px; border-top:1px solid var(--rule);padding:11px 0} .row-pair.novkz{grid-template-columns:52px 1fr} .row-pair:first-child{border-top:none} .row-pair .idx{color:var(--dim);font-size:11px;padding-top:3px;font-family:var(--mono)} .row-pair .zh{font-size:13.5px;white-space:pre-wrap;word-break:break-word;letter-spacing:0} .row-pair .kz{direction:rtl;text-align:right;unicode-bidi:plaintext;font-family:var(--kzfont); font-size:calc(var(--kz-size) - 1px);line-height:2;white-space:pre-wrap;color:#2C2B28} .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%); background:var(--plate);color:var(--ink);padding:10px 18px;border:1px solid var(--zh); border-radius:0;font-size:13px;z-index:160;box-shadow:0 10px 30px rgba(44,43,40,.16)} .modal .field{margin-bottom:14px} .modal .field label{display:block;font-size:12.5px;font-weight:500;margin-bottom:6px;color:var(--ink)} .modal .field select,.modal .field textarea,.field input{width:100%; border:1px solid var(--rule);border-radius:0;background:var(--plate2); padding:10px 12px;font-size:14px;outline:none;color:var(--ink);font-family:inherit} .modal .field textarea{min-height:96px;resize:vertical;white-space:pre-wrap;word-break:break-word} .modal .field select:focus,.modal .field textarea:focus,.field input:focus{ border-color:var(--zh);box-shadow:0 0 0 2px rgba(179,74,50,.14)} .modal .field .cnt{float:right;font-size:11px;color:var(--dim);font-weight:400} .modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px} /* 动态插入的控件状态 */ .tabs{background:var(--plate2)!important} .tabs button.active{box-shadow:none} .b-off{background:transparent!important;color:var(--dim)!important} .ghost{background:transparent!important;color:var(--ink)!important;border:1px solid var(--rule)} .ghost:hover{background:rgba(179,74,50,.06)!important} .msg.info{background:rgba(179,74,50,.08)!important;color:var(--zh)!important} .msg.err,.msg.error{background:rgba(165,56,42,.10)!important;color:var(--danger)!important} /* 一次编排好的入场；响应动作之外没有持续动效 */ @keyframes trace-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} #results .card{animation:trace-in .26s ease-out both} #results .card:nth-child(2){animation-delay:.035s} #results .card:nth-child(3){animation-delay:.07s} #results .card:nth-child(4){animation-delay:.105s} #results .card:nth-child(5){animation-delay:.14s} #results .card:nth-child(6){animation-delay:.175s} #results .card:nth-child(n+7){animation-delay:.21s} @media(max-width:760px){ .app{padding:0 16px 56px} .topbar{padding:16px 0 14px} h1{font-size:15px} .stats,.topright,.userbar{justify-content:flex-start} .userbar .chip{display:none} .userbar .qchip{font-size:11px;padding:4px 8px} .userbar .btn.mini{padding:4px 9px;font-size:11.5px} .pair{grid-template-columns:1fr} .side{padding:0 0 14px 14px} .side.kz{padding:14px 0 0 14px;border-top:1px solid var(--rule)} .card{padding-left:18px} .row-pair{grid-template-columns:38px 1fr} .row-pair .kz{grid-column:2;border-top:1px dashed var(--rule);padding-top:8px} } @media(max-width:520px){ .search-row{gap:8px} .search-wrap input{padding:10px 30px 10px 20px;font-size:15px} .search-row .btn.primary{padding:10px 14px;font-size:13px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* ===== 对照读本 · 人性化改写层 ===== 撤掉仪器语言：命令行、刻度轴、状态条、双通道编码、等宽数值。 只让两段真实文字成为主角。 */ :root{ --sheet:var(--plate); --line:var(--rule); --muted:var(--dim); --pen:var(--zh); --pen-soft:rgba(179,74,50,.08); --pen-deep:#8F3722; --mono:var(--font); --rule-soft:rgba(44,43,40,.08); } body{font-size:15px;letter-spacing:0} body::before{display:none} h1{font-weight:500;letter-spacing:0;font-size:16px} .sub{font-family:var(--font);font-size:11.5px;letter-spacing:.02em} .logo{background:var(--pen-soft);border:0;border-left:0;border-radius:9px; color:var(--pen);font-size:11px;box-shadow:none} .logo::after{display:none} .chip,.userbar .qchip{border-radius:8px;border-color:var(--rule); font-family:var(--font);letter-spacing:.01em} .userbar .qchip{border-color:rgba(179,74,50,.45)} .userbar .qchip.low{background:var(--pen-soft)} /* 检索：不再是命令行，是纸上的一条输入 */ .panel{background:rgba(247,245,240,.96);border-bottom:1px solid var(--rule); padding:24px 0 18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .panel.stuck{padding:14px 0 12px;border-bottom-color:var(--rule)} .search-wrap{border:1px solid var(--line);border-radius:10px; background:var(--sheet);box-shadow:0 2px 10px rgba(60,50,35,.035); transition:border-color .18s,box-shadow .18s} .search-wrap:focus-within{border-color:var(--pen); box-shadow:0 0 0 3px rgba(179,74,50,.09)} .search-wrap::before{display:none} .search-wrap input{padding:12px 34px 12px 16px;font-size:15.5px; font-family:var(--font);border-radius:10px} .search-wrap input::placeholder{color:var(--dim)} .clear-btn{border-radius:6px} .clear-btn:hover{background:rgba(179,74,50,.07)} .btn{border-radius:9px;border-color:var(--rule);font-size:13px; transition:background .18s,border-color .18s,color .18s} .btn:hover{background:var(--pen-soft);border-color:rgba(179,74,50,.35);color:var(--pen)} .btn.primary{background:var(--pen);color:#fff;border:1px solid var(--pen); border-radius:10px;font-weight:600;letter-spacing:.02em;padding:12px 26px} .btn.primary:hover{background:var(--pen-deep);border-color:var(--pen-deep);color:#fff} .btn:disabled,.btn.primary:disabled,.btn.primary[disabled]{border-radius:10px} .btn.mini,.btn.link{border-radius:7px} .opts{margin-top:12px} .note{font-family:var(--font);letter-spacing:.01em} /* 结果：段落，不是记录行 */ .result-head{margin:30px 0 4px;padding:0 0 12px;border-bottom:1px solid var(--rule)} .result-head h2{font-size:13.5px;font-weight:500} .result-head h2::before{width:6px;height:6px;border-radius:50%; background:var(--pen);margin-right:9px;vertical-align:2px} #results{border-left:0} .card{padding:28px 0 32px;border-bottom:1px solid var(--rule); margin:0;background:transparent} .card::before{display:none} .card-top{margin:0 0 16px} .meta{font-family:var(--font);font-size:11.5px;color:var(--muted); letter-spacing:.03em;gap:16px} /* 两栏：不是通道轴，是摊开的两段文字 */ .pair{grid-template-columns:1fr 1fr;gap:0} .side{border-left:0;padding:0 30px 0 0} .side.kz{border-left:1px solid var(--rule);padding:0 0 0 30px} .side-label{color:var(--muted);font-family:var(--font); font-size:11px;letter-spacing:.12em;border-bottom:0; padding:0 0 6px;margin-bottom:12px} .side.kz .side-label{color:var(--muted)} .side-label .btn.link,.side.kz .side-label .btn.link{color:var(--muted);letter-spacing:0} .side-label .btn.link:hover{color:var(--pen)} .para{font-family:"Noto Serif CJK SC","Source Han Serif SC","Songti SC",Georgia,serif; font-size:15.5px;line-height:2.05;letter-spacing:.012em;max-width:42ch} .para.kzt{font-size:22px;line-height:2.28;color:var(--ink)} .para.none{font-family:var(--font);font-size:13px} /* 命中：像读者用朱笔划过，不是仪器打点 */ mark{background:var(--pen-soft);color:inherit;border-radius:2px;padding:0 2px; box-shadow:none;border-bottom:2px solid var(--pen)} mark.corr{background:transparent;box-shadow:none;border-radius:2px; border-bottom:2px solid rgba(179,74,50,.45)} .side-more button{color:var(--pen);font-family:var(--font)} .side-more button:hover{color:var(--pen-deep)} .card-foot{font-family:var(--font);font-size:11.5px;gap:16px;margin-top:16px} .card-foot a{border-bottom:0;color:var(--muted)} .card-foot a:hover{color:var(--pen);border-color:transparent} .card-foot .btn.mini.report{border-radius:7px} .card-foot .btn.mini.report:hover{color:var(--pen);border-color:rgba(179,74,50,.4);background:transparent} /* 名单类人名对照 */ .nb-note,.nb-foot{font-family:var(--font)} .nb-row{border-bottom:1px solid var(--rule)} .nb-zh{font-size:13.5px} .nb-zh::after{content:"→";margin-left:8px;color:var(--pen);font-size:11px} .nb-kz{color:var(--ink);line-height:2.1} .empty-box{font-family:var(--font);padding:34px 0} .empty-box strong{font-family:"Noto Serif CJK SC","Songti SC",Georgia,serif; font-size:17px;font-weight:500} .empty-box strong::before{content:"";display:none} .pager{font-family:var(--font);font-size:12px;gap:18px} .foot{font-family:var(--font);font-size:11.5px;line-height:2} /* 弹窗 / 提示：纸页而不是终端面板 */ .backdrop{background:rgba(44,43,40,.42)} .modal{background:var(--sheet);border:1px solid var(--rule);border-radius:14px; box-shadow:0 18px 50px rgba(60,50,35,.14)} .modal h2{font-weight:500} .modal .desc,.modal .desc a.ttl,.modal .desc .kz-dim{font-family:var(--font)} .modal .desc a.ttl{border-bottom:1px solid rgba(179,74,50,.35)} .modal .desc a.ttl:hover{color:var(--pen-deep)} .modal .desc a.ttl.kz{color:var(--pen)} .row-pair{border-top:1px solid var(--rule)} .row-pair .idx,.row-pair .zh{font-family:var(--font)} .row-pair .kz{color:var(--ink);line-height:2.15} .toast{background:var(--sheet);border:1px solid var(--rule);border-left:3px solid var(--pen); border-radius:10px;box-shadow:0 8px 26px rgba(60,50,35,.15)} .modal .field select,.modal .field textarea,.field input{ border-radius:9px;background:var(--void);font-family:var(--font)} .modal .field select:focus,.modal .field textarea:focus,.field input:focus{ box-shadow:0 0 0 3px rgba(179,74,50,.09)} .msg.info,.msg.err,.msg.error{border-radius:8px} .ghost,.b-off,.tabs{border-radius:9px} /* 入场更慢更轻，像翻过一页 */ @keyframes trace-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} #results .card{animation:trace-in .34s ease-out both} @media(max-width:760px){ .pair{grid-template-columns:1fr} .side{padding:0 0 16px 0} .side.kz{border-left:0;border-top:1px solid var(--rule);padding:18px 0 0 0} .card{padding:24px 0 28px} .para{font-size:15px} .para.kzt{font-size:20px} } @media(max-width:520px){ .search-wrap input{padding:11px 32px 11px 14px;font-size:15px} .btn.primary{padding:11px 16px} } /* ===== 立体层 · 摊在桌上的一叠摘录卡 ===== 不做四周均匀模糊阴影、不做新拟态压模、不做毛玻璃。 唯一原理：光从左上斜照 —— 所有投影朝右下、两层近实远虚、暖色偏褐； 纸有受光渐变、顶部 1px 高光、底部 2px 裁切厚边，最下面还露出两层纸的截面。 z 层次：桌面 → 结果卡（薄）→ 吸顶台纸（厚）→ 弹窗（最厚）。 */ :root{ --desk:#EFEAE0; --desk-deep:#E7E0D2; --paper-hi:#FEFCF7; --paper-lo:#F6F1E7; --edge:rgba(122,104,74,.17); --edge-hi:rgba(122,104,74,.28); --lift-1:#EDE6D9; --lift-2:#E1D8C6; --sh:84,68,44; --dim:#6E685C; } /* 桌面：左上暖光 + 极淡纸纤维，给所有投影一个统一光源 */ html,body{ background-color:var(--desk); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"), radial-gradient(115% 75% at 4% -8%, rgba(255,253,246,.95) 0%, rgba(255,253,246,0) 62%), linear-gradient(158deg,#F4F0E7 0%,#EFEAE0 56%,#E8E2D5 100%); background-attachment:fixed; color:#2C2B28; } body::before{display:none} /* 页眉：压在桌面上的活字，不另做卡片 */ .topbar{border-bottom:1px solid rgba(122,104,74,.10)} .logo{ background:linear-gradient(180deg,#FFFDF8,#F2EDE2); border:1px solid var(--edge);border-radius:9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(var(--sh),.11),0 2px 0 -1px var(--lift-1); } .chip,.userbar .qchip{ background:linear-gradient(180deg,#FCFAF5,#F4F0E7); border:1px solid var(--edge);border-radius:8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(var(--sh),.08); } .userbar .qchip{border-color:rgba(179,74,50,.34)} /* 吸顶台纸：压在最上面的一张，阴影最深 */ .panel{ background:linear-gradient(180deg,rgba(253,251,246,.97) 0%,rgba(245,241,232,.96) 100%); border-bottom:1px solid var(--edge); padding:24px 0 20px; box-shadow:0 2px 3px rgba(var(--sh),.05),0 14px 30px -16px rgba(var(--sh),.30),0 3px 0 -1px rgba(226,218,203,.85); } .panel.stuck{ padding:13px 0 12px; border-bottom-color:rgba(179,74,50,.30); box-shadow:0 2px 4px rgba(var(--sh),.07),0 20px 38px -18px rgba(var(--sh),.38); } /* 检索框：凹进纸面，聚焦时抬起 */ .search-wrap{ border:1px solid var(--edge);border-radius:10px; background:linear-gradient(180deg,#F5F1E9,#FCFAF5 72%); box-shadow:inset 0 1px 3px rgba(var(--sh),.10),0 1px 0 rgba(255,255,255,.92); } .search-wrap:focus-within{ border-color:rgba(179,74,50,.50); box-shadow:inset 0 1px 2px rgba(var(--sh),.06),0 0 0 3px rgba(179,74,50,.10),0 1px 0 rgba(255,255,255,.95); } .clear-btn{background:transparent;box-shadow:none;border:0} .clear-btn:hover{background:rgba(179,74,50,.07)} /* 按钮：薄纸片 / 朱红实心印 */ .btn{ background:linear-gradient(180deg,#FDFBF6,#F4F0E7); border:1px solid var(--edge);border-radius:8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 2px rgba(var(--sh),.09); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; } .btn:hover{ background:linear-gradient(180deg,#FFFDF8,#F8F4EA); border-color:rgba(179,74,50,.34); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 3px 7px rgba(var(--sh),.14); } .btn:active{transform:translateY(1px);box-shadow:inset 0 1px 3px rgba(var(--sh),.14)} .btn.link,.side-label .btn.link,.card-foot .btn.mini.report{ background:transparent;border-color:transparent;box-shadow:none; } .btn.link:hover,.side-label .btn.link:hover,.card-foot .btn.mini.report:hover{ background:rgba(179,74,50,.06);transform:none;box-shadow:none;border-color:transparent; } .btn.primary{ background:linear-gradient(180deg,#C0543A,#AC432C); border:1px solid #9E3C27;color:#fff;border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 0 #8F3722,0 6px 13px -5px rgba(140,54,34,.44); } .btn.primary:hover{ background:linear-gradient(180deg,#B84B33,#9E3C27); border-color:#8F3722;color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 2px 0 #83321E,0 9px 19px -6px rgba(140,54,34,.50); } .btn.primary:active{transform:translateY(2px);box-shadow:inset 0 1px 3px rgba(90,30,18,.30)} .btn.primary:disabled,.btn:disabled,.btn.primary[disabled]{ background:#CFC7B8;border-color:#BFB6A5;color:#6E675B; box-shadow:none;transform:none;opacity:.72; } /* 结果：一张张摊开的摘录卡，卡与卡之间看得见桌面 */ #results{border-left:0;padding-top:12px} .result-head{border-bottom:0;padding-bottom:6px} .card{ background:linear-gradient(178deg,var(--paper-hi) 0%,#FBF8F1 60%,var(--paper-lo) 100%); border:1px solid var(--edge);border-radius:9px; padding:24px 28px 26px;margin:0 0 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 1px 2px rgba(var(--sh),.07), 0 10px 20px -9px rgba(var(--sh),.21), 0 26px 46px -26px rgba(var(--sh),.18), 0 3px 0 -1px var(--lift-1), 0 6px 0 -3px var(--lift-2); transition:transform .22s ease,box-shadow .22s ease; } .card:hover{ transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 2px 3px rgba(var(--sh),.08), 0 16px 28px -10px rgba(var(--sh),.25), 0 36px 62px -28px rgba(var(--sh),.20), 0 3px 0 -1px var(--lift-1), 0 6px 0 -3px var(--lift-2); } .card::before{display:none} .card-top{margin-bottom:14px} .meta{color:#6E685C} /* 两栏之间：一道压出来的浅凹槽，不是轴线 */ .side.kz{ border-left:1px solid rgba(122,104,74,.13); box-shadow:-1px 0 0 rgba(255,255,255,.80); padding-left:30px; } .side-label{border-bottom:0} .para.kzt{text-shadow:0 1px 0 rgba(255,255,255,.82)} .card-foot{margin-top:16px} /* 空状态：一张略薄的便签 */ .empty-box{ background:linear-gradient(180deg,#FCFAF5,#F4F0E7); border:1px dashed rgba(122,104,74,.28);border-radius:9px; padding:32px;margin:6px 0 0; box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(var(--sh),.18); } .empty-box strong::before{display:none} /* 名单对照 / 翻页 / 页脚：留在桌面，不另起卡片 */ .nb-row{border-bottom:1px solid rgba(122,104,74,.10)} .pager .btn.mini{border-radius:8px} .foot{border-top:1px solid rgba(122,104,74,.13)} /* 弹窗：最厚的一叠 */ .backdrop{background:rgba(58,48,34,.46)} .modal{ background:linear-gradient(180deg,#FEFCF7,#F8F4EB); border:1px solid var(--edge-hi);border-radius:12px; box-shadow: inset 0 1px 0 #fff, 0 4px 8px rgba(var(--sh),.11), 0 30px 70px -18px rgba(60,45,28,.40), 0 4px 0 -2px #E6DECF; } .modal .field select,.modal .field textarea,.field input{ border:1px solid var(--edge);background:linear-gradient(180deg,#F5F1E9,#FCFAF5 72%); box-shadow:inset 0 1px 3px rgba(var(--sh),.09),0 1px 0 rgba(255,255,255,.9); } .toast{ background:linear-gradient(180deg,#FEFCF7,#F5F1E8); border:1px solid var(--edge);border-left:3px solid #B34A32;border-radius:9px; box-shadow:inset 0 1px 0 #fff,0 10px 26px -8px rgba(var(--sh),.28),0 3px 0 -1px var(--lift-1); } .row-pair{border-top:1px solid rgba(122,104,74,.10)} /* 键盘焦点可见 */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid #B34A32;outline-offset:2px; } /* 入场：纸落桌面，只此一次 */ @keyframes paper-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} #results .card{animation:paper-in .36s cubic-bezier(.2,.7,.3,1) both} @media(max-width:760px){ .app{padding:0 16px 56px} .card{ padding:20px 18px 22px;margin-bottom:18px;border-radius:8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 1px 2px rgba(var(--sh),.06), 0 8px 16px -8px rgba(var(--sh),.19), 0 3px 0 -1px var(--lift-1); } .side.kz{border-left:0;border-top:1px solid rgba(122,104,74,.13);padding:18px 0 0 0; box-shadow:0 -1px 0 rgba(255,255,255,.8)} .card:hover,.btn:hover{transform:none} .panel{padding:18px 0 14px} } @media(prefers-reduced-motion:reduce){ #results .card{animation:none} .card,.btn,.panel{transition:none} .card:hover,.btn:hover,.btn:active,.btn.primary:active{transform:none} .spin,.skel-bar,.rip-dot,.btn-searching::after{animation:none!important} } /* ===== 内部发布版 · 交互层 ===== */ /* 汉文锁定角标 */ .lang-lock{display:inline-flex;align-items:center;gap:6px;font-size:11.5px; color:var(--pen);background:var(--pen-soft);border:1px solid rgba(179,74,50,.22); padding:4px 11px;border-radius:999px;font-family:var(--font);letter-spacing:.02em} .lang-lock b{font-weight:600} .lang-lock svg{width:12px;height:12px;flex:0 0 auto} /* 检索中：进度反馈而不是干巴巴一行字 */ .engine-live{display:inline-flex;align-items:center;gap:9px;color:var(--pen); font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.01em} .spin{width:13px;height:13px;border:2px solid rgba(179,74,50,.22); border-top-color:var(--pen);border-radius:50%;animation:spin .7s linear infinite; flex:0 0 auto} @keyframes spin{to{transform:rotate(360deg)}} .rip{display:inline-flex;gap:3px;align-items:center} .rip-dot{width:4px;height:4px;border-radius:50%;background:var(--pen); animation:rip 1s ease-in-out infinite} .rip-dot:nth-child(2){animation-delay:.14s} .rip-dot:nth-child(3){animation-delay:.28s} @keyframes rip{0%,100%{opacity:.25;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)}} .engine-live.done{color:#2f7d4f} .engine-live.done .spin,.engine-live.done .rip{display:none} .btn-searching{position:relative;color:transparent!important;pointer-events:none} .btn-searching::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px; margin:-7px 0 0 -7px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff; border-radius:50%;animation:spin .7s linear infinite} /* 骨架屏：检索期间给结果区一个「正在成文」的暗示 */ #results.is-loading .skel{animation:skelIn .35s ease both} @keyframes skelIn{from{opacity:0}to{opacity:1}} .skel{border:1px solid var(--rule);border-radius:14px;background:var(--sheet); padding:18px 20px;margin:0 0 14px} .skel-head{display:flex;gap:10px;align-items:center;margin-bottom:16px} .skel-bar{height:10px;border-radius:6px;background:linear-gradient(90deg, rgba(44,43,40,.06) 25%,rgba(179,74,50,.13) 50%,rgba(44,43,40,.06) 75%); background-size:200% 100%;animation:shimmer 1.4s linear infinite} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .skel-line{height:11px;border-radius:6px;margin:0 0 10px} .skel-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px} .skel-col .skel-line:last-child{margin-bottom:0} @media(max-width:700px){.skel-grid{grid-template-columns:1fr;gap:12px}} /* 显目的报错按钮 */ .card-foot .btn.report-cta{display:inline-flex;align-items:center;gap:7px; background:var(--pen);color:#fff;border:1px solid var(--pen); padding:8px 15px;font-size:12.5px;font-weight:600;border-radius:999px; box-shadow:0 3px 10px rgba(179,74,50,.2);letter-spacing:.02em; transition:transform .16s,box-shadow .16s,background .16s} .card-foot .btn.report-cta:hover{background:var(--pen-deep);border-color:var(--pen-deep); color:#fff;transform:translateY(-2px);box-shadow:0 7px 18px rgba(179,74,50,.32)} .card-foot .btn.report-cta:active{transform:translateY(0)} .card-foot .btn.report-cta .r-ico{font-size:13px;line-height:1} .card-foot .btn.report-cta .r-txt{white-space:nowrap} .card-foot .report-hint{font-size:11px;color:var(--dim);font-family:var(--font)} /* 结果卡入场 */ #results .card{animation:cardIn .38s cubic-bezier(.2,.7,.3,1) both} @keyframes cardIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} /* 级别徽标 / 非法输入抖动 */ .tier-chip{font-size:11px;padding:2px 9px;border-color:var(--rule)} .tier-chip.ent{color:var(--pen);border-color:rgba(179,74,50,.4); background:var(--pen-soft);font-weight:600} .lang-lock.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97) both; border-color:var(--danger);color:var(--danger);background:rgba(165,56,42,.08)} @keyframes shake{10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}} /* ===== 吸顶稳定性修复（Chrome 桌面闪烁）===== 旧实现三处叠加导致「一闪一闪」： 1) .stuck 改 padding 并隐藏 .opts → 面板高度缩水约 60px → 文档回流 → Chrome 滚动锚定补偿 scrollY → 判断条件反复翻转（实测 True→False→True）； 2) transition:padding 让高度在 180ms 内连续变化，滚动时持续抖动； 3) sticky + backdrop-filter 滚动时反复重采样背景，出现合成层白闪。 修法：吸顶只改纯视觉属性，两态占位恒定；判断改用独立哨兵（见 JS）。 */ .sticky-sentinel{height:1px;margin-bottom:-1px;pointer-events:none;visibility:hidden} .panel{ -webkit-backdrop-filter:none;backdrop-filter:none; background:linear-gradient(180deg,#FEFCF7 0%,#F5F1E7 100%); transition:border-color .18s,box-shadow .18s; } /* 覆盖历史三套 .panel.stuck 的 padding 及 .opts{display:none}，保证占位恒定 */ .panel.stuck{padding:24px 0 20px} .panel.stuck .opts{display:flex} /* 吸顶仅以边框 / 阴影提示，检索状态提示在吸顶后依然可见 */ .panel.stuck{ border-bottom-color:rgba(179,74,50,.45); box-shadow:0 3px 6px rgba(var(--sh),.10),0 22px 40px -18px rgba(var(--sh),.42); } @media(prefers-reduced-motion:reduce){.panel{transition:none}} /* ===== 词典查询（cidian.html）专用：复用站内组件，仅补少量专用类 ===== */ .sd-pretitle{font-size:13px;font-weight:700;letter-spacing:.04em;margin:0 0 2px;color:var(--ink)} .sd-pretitle::before{content:"▍";color:var(--zh);margin-right:6px;font-weight:700} .sd-presub{font-size:11.5px;color:var(--dim);margin:0 0 16px;font-family:var(--mono);letter-spacing:.01em} .sd-hw{font-size:19px;font-weight:600;color:var(--ink);line-height:1.3} .sd-py{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-left:8px} .sd-empty{font-size:13px;color:var(--dim);padding:34px 0;line-height:1.7} .sd-more{font-size:12px;color:var(--dim);margin-top:14px;font-family:var(--mono)} /* ===== 移动端性能补丁 2026-11-12 ===== 小屏低端机的滚动卡顿来自持续合成：整页 SVG feTurbulence 噪声、 吸顶栏 backdrop-filter 毛玻璃、结果卡逐张入场动画。 这里只在小屏降级为纯渐变 + 无滤镜 + 无动画，桌面端观感保持不变。 */ @media (max-width:760px){ html,body{ background-image:linear-gradient(158deg,#F4F0E7 0%,#EFEAE0 56%,#E8E2D5 100%)!important; background-attachment:scroll!important; } .panel,.topbar,.backdrop{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } .panel{background-color:#F7F5F0!important} #results .card,.card{animation:none!important;transform:none!important} } @media (max-width:760px) and (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important} }