:root{--ink:#1e3a5f;--ink2:#3b6978;--line:#e5e7eb;--soft:#f3f6f9;--accent:#a8d8ea}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
html{background:#fff}
body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;color:#1f2937;min-height:100vh;display:flex;flex-direction:column;align-items:center}
.wrap{width:100%;max-width:680px;padding:0 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.logo{width:52px;height:52px;border-radius:12px}
h1{font-size:30px;font-weight:800;letter-spacing:1px;color:var(--ink);white-space:nowrap}
.box{position:relative;width:100%;display:flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:0 10px 0 24px;height:56px;box-shadow:0 2px 10px rgba(31,41,55,.04);transition:border-color .2s,box-shadow .2s}
.box:focus-within{border-color:var(--ink2);box-shadow:0 0 0 4px rgba(168,216,234,.35)}
.box input{flex:1;border:none;outline:none;background:transparent;font-size:17px;color:#111827;min-width:0}
.box input::placeholder{color:#9ca3af}
.box button{width:40px;height:40px;border:none;border-radius:50%;background:var(--soft);color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;flex:none}
.box button:hover{background:var(--accent);color:#fff}
.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(31,41,55,.10);overflow-y:auto;max-height:340px;z-index:10}
.suggest .item{padding:11px 20px;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:12px}
.suggest .item:hover{background:var(--soft)}
.suggest .item .ic{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;color:#9ca3af}
.suggest .item .ic svg{width:18px;height:18px;display:block}
.suggest .item .q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .item.pinned .ic img{width:18px;height:18px;border-radius:4px;display:block}
.suggest .item.pinned .q{font-weight:600;color:var(--ink)}
.gear{position:fixed;top:18px;right:18px;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(31,41,55,.06);z-index:20;transition:background .2s,transform .2s}
.gear:hover{background:var(--soft);transform:rotate(30deg)}
.panel{position:fixed;top:68px;right:18px;width:320px;max-width:calc(100vw - 36px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(31,41,55,.14);z-index:30;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink)}
.panel-head button{border:none;background:none;font-size:20px;line-height:1;color:#9ca3af;cursor:pointer;padding:0 6px;border-radius:6px}
.panel-head button:hover{background:var(--soft)}
.panel-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:18px}
.panel-body label{display:block;font-size:13px;color:#64748b;margin-bottom:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1px solid var(--line);background:#fff;color:#374151;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.opt:hover{border-color:var(--accent)}
.opt.on{background:var(--ink);border-color:var(--ink);color:#fff}
.papers{display:flex;flex-wrap:wrap;gap:10px}
.paper{width:64px;height:48px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;position:relative;overflow:hidden;padding:0;transition:border-color .15s,box-shadow .15s}
.paper span{position:absolute;left:0;right:0;bottom:0;font-size:10px;color:#475569;background:rgba(255,255,255,.8);text-align:center;padding:1px 0}
.paper.on{border-color:var(--ink2);box-shadow:0 0 0 2px rgba(168,216,234,.55)}
.paper-custom{background:repeating-linear-gradient(45deg,#f3f6f9,#f3f6f9 6px,#e9eef4 6px,#e9eef4 12px)}
#customPaper{width:100%;font-family:inherit;font-size:13px;color:#0f172a;background:#fff;border:.8px solid #e2e8f0;border-radius:10px;padding:9px 12px;outline:none;transition:border-color .2s,box-shadow .2s}
#customPaper:focus{border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.1)}
footer{width:100%;text-align:center;padding:20px;font-size:12px;color:#b0b7c3}
footer a{color:#b0b7c3;text-decoration:none}
@media(max-width:480px){h1{font-size:23px}.logo{width:44px;height:44px}.box input{font-size:16px}.panel{top:64px;right:12px;left:12px;width:auto}.gear{top:12px;right:12px}}