:root{--ink:#231f1b;--paper:#f4efe6;--rust:#aa5a3d;--muted:#786f65;--line:#ded5c8;--panel:#fbf8f2;--shadow:0 18px 55px rgba(32,25,18,.18)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#dcd7cf;overflow:hidden}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.topbar{height:72px;display:flex;align-items:center;gap:18px;padding:0 24px;background:rgba(251,248,242,.97);border-bottom:1px solid var(--line);position:relative;z-index:30}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);min-width:max-content}
.brand-mark{width:15px;height:15px;background:var(--rust);display:block}
.brand strong{font-size:15px;line-height:1;display:block;letter-spacing:-.02em}
.brand small{font-size:6px;display:block;letter-spacing:.08em;margin-top:2px}
.title-block{border-left:1px solid var(--line);padding-left:18px;display:flex;flex-direction:column;min-width:0}
.title-block strong{text-transform:uppercase;font-size:13px;letter-spacing:.08em}
.title-block span{font-size:12px;color:var(--muted);margin-top:2px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.download-button{height:42px;padding:0 16px;border-radius:7px;background:var(--ink);color:#fff;text-decoration:none;display:flex;align-items:center;gap:9px;font-weight:650;font-size:13px}
.download-button svg,.search-wrap svg,.nav-button svg,.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-button,.nav-button,.close-button,.text-button,.page-count{border:0;background:transparent;color:inherit;cursor:pointer}
.menu-button{display:none;width:42px;height:42px;padding:10px}
.menu-button span{display:block;height:1.5px;background:currentColor;margin:5px 0}
.sidebar{position:fixed;left:0;top:72px;bottom:0;width:330px;background:var(--panel);border-right:1px solid var(--line);z-index:20;display:flex;flex-direction:column}
.sidebar-head{padding:24px 22px 17px;display:flex;align-items:center;justify-content:space-between}
.sidebar-head small{display:block;font-size:10px;color:var(--rust);letter-spacing:.13em;font-weight:750}
.sidebar-head strong{display:block;font-size:21px;margin-top:4px}
.close-button{font-size:30px;line-height:1;display:none}
.search-wrap{height:42px;margin:0 18px 12px;border:1px solid var(--line);border-radius:7px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted)}
.search-wrap svg{width:17px}
.search-wrap input{border:0;outline:0;background:transparent;width:100%;font-size:13px;color:var(--ink)}
#productIndex{overflow:auto;padding:0 10px 20px;scrollbar-width:thin}
.category-title{padding:14px 10px 6px;color:var(--muted);font-size:10px;letter-spacing:.12em;font-weight:750;text-transform:uppercase}
.index-link{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;width:100%;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.index-link:hover{background:#f0e9de}.index-link.active{background:#eadfd2;color:#743d2a}
.index-page{font-variant-numeric:tabular-nums;color:#a49a8e;font-size:11px}
.index-name{font-size:13px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.index-code{font-size:10px;color:var(--muted)}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:14px 20px;color:var(--muted);font-size:11px}
.viewer{position:fixed;left:330px;right:0;top:72px;bottom:0;display:flex;flex-direction:column}
.page-stage{flex:1;overflow:auto;padding:30px;display:flex;align-items:flex-start;justify-content:center;overscroll-behavior:contain}
.page-frame{position:relative;flex:none;width:min(100%,1100px);box-shadow:var(--shadow);background:var(--paper);line-height:0;transition:width .2s ease}
.page-frame img{width:100%;height:auto;display:block;user-select:none}
.page-frame.fit-page{width:auto;height:100%}.page-frame.fit-page img{height:100%;width:auto;max-width:100%;object-fit:contain}
.loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(244,239,230,.75);font-size:13px;line-height:1;color:var(--muted)}
.page-frame.is-loading .loading{display:flex}
.controls{height:62px;flex:none;background:rgba(251,248,242,.97);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:5px;padding:0 16px;z-index:10}
.nav-button,.icon-button{width:42px;height:42px;display:grid;place-items:center;border-radius:7px}.nav-button:hover,.icon-button:hover,.text-button:hover,.page-count:hover{background:#eee7dc}
.page-count{height:40px;padding:0 10px;font-size:13px}.page-count span{color:var(--muted)}
.divider{width:1px;height:23px;background:var(--line);margin:0 10px}
.text-button{height:40px;padding:0 10px;border-radius:7px;font-size:12px;color:var(--muted)}
.scrim{display:none;position:fixed;inset:72px 0 0;background:rgba(25,20,16,.45);z-index:15}
.page-dialog{position:fixed;inset:0;background:rgba(25,20,16,.45);z-index:50;display:grid;place-items:center;padding:20px}
.page-dialog[hidden]{display:none}
.page-dialog form{background:#fff;border-radius:10px;padding:22px;box-shadow:var(--shadow);width:min(330px,100%)}
.page-dialog label{font-weight:700;display:block;margin-bottom:12px}.page-dialog form div{display:flex;gap:8px}.page-dialog input{min-width:0;flex:1;border:1px solid var(--line);border-radius:6px;padding:10px}.page-dialog button{border:0;border-radius:6px;background:var(--ink);color:#fff;padding:0 18px;font-weight:700}
@media(max-width:860px){.topbar{height:62px;padding:0 10px;gap:7px}.menu-button{display:block}.brand span:last-child{display:none}.title-block{border:0;padding:0}.title-block strong{font-size:11px}.title-block span{font-size:10px}.download-button{height:40px;padding:0 11px}.download-button span{display:none}.sidebar{top:62px;transform:translateX(-105%);transition:transform .25s ease;width:min(88vw,350px);box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.close-button{display:block}.scrim{inset:62px 0 0}.scrim.open{display:block}.viewer{left:0;top:62px}.page-stage{padding:10px}.controls{height:56px}.text-button,.divider{display:none}.page-frame{width:100%}}
@media(max-width:380px){.title-block span{display:none}.topbar{gap:4px}.download-button{padding:0 9px}}
@media print{.topbar,.sidebar,.controls{display:none}.viewer{position:static}.page-stage{padding:0}.page-frame{box-shadow:none;width:100%}}