:root{--navy:#0B2C4D;--blue:#2A6A8B;--ink:#17324A;--muted:#667785;--bg:#EEF3F5;--card:#FFFFFF;--line:#D6E1E6;--shadow:0 8px 24px rgba(11,44,77,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}
.app{width:min(1440px,calc(100% - 16px));margin:0 auto;padding:8px 0 18px}
.search-wrap{position:sticky;top:0;z-index:50;padding:4px 0 8px;background:linear-gradient(var(--bg) 78%,rgba(238,243,245,0))}
.search-box{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:4px;min-height:58px;padding:5px 6px 5px 12px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.search-icon{font-size:22px;color:var(--blue);text-align:center}
.search-box input{width:100%;min-height:46px;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}
.clear-btn{min-height:42px;border:0;border-radius:11px;padding:8px 14px;background:var(--navy);color:#fff;font-size:13px;font-weight:800}
.search-results{display:none;position:absolute;left:0;right:0;top:68px;max-height:440px;overflow:auto;padding:7px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(11,44,77,.20)}
.search-results.open{display:block}.search-result{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;border:0;border-bottom:1px solid #E7EEF1;background:#fff;color:var(--ink);text-align:left}.search-result:last-child{border-bottom:0}.search-result:hover{background:#F3F8FA}.search-result b{display:block;color:var(--navy);font-size:14px}.search-result span{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.35}.search-result em{align-self:center;color:var(--blue);font-size:12px;font-style:normal;font-weight:900;white-space:nowrap}
.note-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 10px}
.note-tab{display:flex;align-items:center;justify-content:center;text-decoration:none;min-width:0;min-height:70px;border:1px solid var(--line);border-left:7px solid var(--accent);border-radius:13px;padding:10px 8px;background:#fff;color:var(--navy);box-shadow:var(--shadow);text-align:center;transition:transform .15s ease,background .15s ease,color .15s ease}
.note-tab:hover{transform:translateY(-2px)}.note-tab span{display:block;font-size:14px;font-weight:900;line-height:1.18}.note-tab:focus-visible{outline:3px solid rgba(42,106,139,.35);outline-offset:2px}.note-tab.active{border-color:var(--navy);border-left-color:var(--accent);background:var(--navy);color:#fff}
.viewer{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#DCE5E8;box-shadow:var(--shadow)}
.viewer-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;background:var(--navy);color:#fff}.viewer-title{margin:0;font-size:18px;line-height:1.2}.viewer-count{font-size:12px;font-weight:800;white-space:nowrap;opacity:.9}
.toolbar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:9px;background:#F7FAFB;border-bottom:1px solid var(--line)}
.toolbar button{flex:0 0 auto;min-height:40px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff;color:var(--navy);font-size:13px;font-weight:900}.toolbar label{flex:0 0 auto;display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px;font-weight:800}.toolbar input{width:64px;min-height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-align:center;outline:0}
.toolbar button[data-action="fullscreen"]{order:-3;min-width:340px;min-height:58px;border:0;border-radius:14px;padding:12px 26px;background:linear-gradient(135deg,#FFB45E,#E87316);color:#102D45;font-size:17px;font-weight:950;letter-spacing:.02em;box-shadow:0 9px 24px rgba(188,88,10,.30)}.toolbar button[data-action="fullscreen"]:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(188,88,10,.38)}.toolbar button[data-action="fullscreen"]:focus-visible{outline:4px solid rgba(42,106,139,.38);outline-offset:2px}
.zoom-controls{order:-2;display:grid;grid-template-columns:60px minmax(120px,1fr) 60px;align-items:stretch;gap:6px;min-width:270px;padding:5px;border:1px solid var(--line);border-radius:14px;background:#EAF1F4;box-shadow:inset 2px 2px 7px rgba(11,44,77,.08)}.zoom-controls button{min-height:48px;margin:0;border:0;border-radius:10px;background:#fff;color:var(--navy);font-size:22px;box-shadow:0 3px 9px rgba(11,44,77,.10)}.zoom-controls button[data-action="fit"]{font-size:14px;line-height:1.1}.zoom-controls button[data-action="fit"] span{display:block;font-size:17px;font-weight:950}.zoom-controls button[data-action="fit"] small{display:block;margin-top:2px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.viewer.wide-view{position:fixed;inset:0;z-index:999999;width:100vw;height:100dvh;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;background:#DCE5E8}.viewer.wide-view .stage{flex:1;min-height:0;max-height:none}body.dvt-wide-open{overflow:hidden}
.progress{height:4px;background:#C9D6DA}.progress span{display:block;height:100%;width:0;background:var(--active-accent,#6A0DAD);transition:width .2s ease}
.stage{position:relative;min-height:76vh;max-height:88vh;overflow:auto;padding:12px;background:radial-gradient(circle at top,#F3F6F7,#CEDADD);scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y pan-x;scrollbar-gutter:stable;cursor:zoom-in}
.pages-stack{--zoom-scale:1;position:relative;width:min(calc(100% * var(--zoom-scale)),calc(1040px * var(--zoom-scale)));margin:0 auto;display:flex;flex-direction:column;gap:16px;transition:width .15s ease}.page{position:relative;flex:0 0 auto;width:100%;margin:0;aspect-ratio:612/792;overflow:hidden;background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.20)}.page img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;pointer-events:none;-webkit-user-drag:none}.loader{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);display:none;padding:10px 14px;border-radius:999px;background:rgba(11,44,77,.92);color:#fff;font-size:12px;font-weight:800}.loader.show{display:block}.empty{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.viewer:fullscreen{width:100vw;height:100vh;height:100dvh;border-radius:0;display:flex;flex-direction:column}.viewer:fullscreen .stage{flex:1;min-height:0;max-height:none}
@media(max-width:900px){.note-tabs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.app{width:min(100% - 8px,1440px);padding-top:4px}.search-wrap{padding-top:2px}.search-box{grid-template-columns:34px minmax(0,1fr) auto;min-height:54px;padding-left:8px}.search-box input{font-size:15px}.clear-btn{padding-inline:10px}.note-tabs{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:7px}.note-tab{min-height:62px;padding:8px 5px;border-left-width:5px;border-radius:10px}.note-tab span{font-size:12.5px}.viewer{border-radius:10px}.viewer-top{padding:9px 10px}.viewer-title{font-size:15px}.toolbar{display:flex;flex-wrap:wrap;justify-content:center;padding:7px;gap:6px}.toolbar button[data-action="fullscreen"]{order:-3;flex:1 0 100%;width:100%;min-width:0;min-height:66px;border-radius:13px;font-size:17px;box-shadow:0 10px 25px rgba(188,88,10,.34)}.zoom-controls{order:-2;flex:1 0 100%;width:100%;min-width:0;grid-template-columns:64px minmax(0,1fr) 64px;padding:5px}.zoom-controls button{min-height:54px;font-size:24px}.zoom-controls button[data-action="fit"] span{font-size:18px}.toolbar>button:not([data-action="fullscreen"]){min-height:43px;padding:8px 11px}.toolbar label{min-height:43px}.stage{min-height:70vh;max-height:84vh;padding:5px}.pages-stack{gap:8px}}
@media(max-width:390px){.note-tab span{font-size:11.5px}.clear-btn{font-size:11px}.viewer-count{font-size:10px}}
@media print{body{display:none!important}}