:root{--brand:#e8901a;--bg:#f7f5f1;--ink:#24211d;--muted:#746d64;--card:#fff;--line:#e8e0d6;--header:70px;--thumb:116px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Roboto',Arial,sans-serif;color:var(--ink)}button,input{font-family:inherit}.panel-body{background:linear-gradient(135deg,#fff 0%,#f7f1e9 100%);padding:28px}.panel-shell{max-width:1180px;margin:auto}.panel-top{display:flex;align-items:center;gap:18px;margin-bottom:22px}.panel-logo{height:48px;object-fit:contain}.panel-title h1{margin:0;font-size:30px}.panel-title p{margin:4px 0 0;color:var(--muted)}.mini-link{margin-left:auto;color:var(--brand);font-weight:700;text-decoration:none}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 20px 60px rgba(58,42,19,.08)}.login-card{max-width:420px;margin:10vh auto}.card h2{margin:0 0 18px}.card label{display:block;font-weight:700;margin:14px 0 7px}.card input[type=text],.card input[type=url],.card input[type=password],.card input[type=file]{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px 15px;font-size:15px;background:#fff}.check{display:flex!important;gap:10px;align-items:center}.check input{width:auto!important}.primary{width:100%;border:0;background:var(--brand);color:#fff;border-radius:16px;padding:15px 18px;font-weight:900;font-size:16px;margin-top:18px;cursor:pointer}.or{text-align:center;color:var(--muted);margin:14px}.bar{height:10px;background:#eadfce;border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--brand);transition:width .2s}.upload-box{margin:14px 0}.err{background:#ffecec;color:#a01616;border-radius:12px;padding:10px;margin:10px 0}.ok{background:#eaffef;color:#14632b;border-radius:12px;padding:12px;margin:10px 0}.catalog-list{display:flex;flex-direction:column;gap:12px;max-height:560px;overflow:auto}.catalog-item{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff}.catalog-item b{display:block}.catalog-item small{display:block;color:var(--muted);margin-top:4px}.item-actions{display:flex;gap:10px;margin-top:12px}.item-actions a,.item-actions button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;color:var(--ink);text-decoration:none;font-weight:700;cursor:pointer}
.viewer-body{height:100vh;overflow:hidden;background:var(--bg)}.viewer-header{height:calc(var(--header) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:0 8px 30px rgba(42,31,18,.08);position:relative;z-index:5}.vh-left{min-width:0;display:flex;align-items:center;gap:12px}.vh-left img{height:38px;object-fit:contain;flex:0 0 auto}.vh-left strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vh-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.vh-actions button{width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:14px;color:var(--ink);font-weight:900;font-size:18px;display:grid;place-items:center;cursor:pointer}.vh-actions button:active{transform:scale(.96)}.reader{height:calc(100vh - var(--header) - var(--thumb) - env(safe-area-inset-top));position:relative;overflow:hidden;touch-action:none;background:radial-gradient(circle at 50% 0,#fff 0,#faf4ea 45%,#f0e5d4 100%)}.stage{height:100%;width:100%;display:flex;align-items:center;justify-content:center;gap:18px;padding:18px 64px;transform-origin:center center;will-change:transform}.page-wrap{background:#fff;border-radius:8px;box-shadow:0 18px 46px rgba(39,28,17,.18);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .22s ease,opacity .22s ease}.page-wrap.turn-next{animation:turnNext .28s ease}.page-wrap.turn-prev{animation:turnPrev .28s ease}.page-wrap canvas{display:block;width:100%;height:100%;object-fit:contain}.edge{position:absolute;top:0;bottom:0;width:22%;z-index:2;border:0;background:transparent;cursor:pointer}.edge-left{left:0}.edge-right{right:0}.loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,84vw);background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;text-align:center;box-shadow:0 20px 60px rgba(58,42,19,.12);z-index:10}.loader b{display:block;margin-bottom:6px}.loader span{display:block;color:var(--muted);margin-bottom:14px}.thumb-strip{height:var(--thumb);background:#fff;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;overflow-x:auto;overflow-y:hidden;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.thumb-strip::-webkit-scrollbar{height:8px}.thumb-strip::-webkit-scrollbar-thumb{background:#d8c7b0;border-radius:999px}.thumb{flex:0 0 auto;width:62px;height:88px;border:2px solid transparent;border-radius:10px;background:#f5efe7;overflow:hidden;position:relative;cursor:pointer}.thumb.active{border-color:var(--brand)}.thumb canvas{width:100%;height:100%;object-fit:cover}.thumb span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:11px;text-align:center;padding:2px}
@keyframes turnNext{from{transform:perspective(900px) rotateY(-7deg) translateX(22px);opacity:.85}to{transform:none;opacity:1}}@keyframes turnPrev{from{transform:perspective(900px) rotateY(7deg) translateX(-22px);opacity:.85}to{transform:none;opacity:1}}
@media(max-width:780px){:root{--header:62px;--thumb:96px}.panel-body{padding:16px}.grid{grid-template-columns:1fr}.panel-top{align-items:flex-start}.panel-logo{height:38px}.panel-title h1{font-size:22px}.viewer-header{padding-left:10px;padding-right:10px}.vh-left{gap:8px;max-width:38%}.vh-left img{height:30px}.vh-left strong{display:none}.vh-actions{gap:6px}.vh-actions button{width:38px;height:38px;border-radius:12px;font-size:17px}.reader{height:calc(100vh - var(--header) - var(--thumb) - env(safe-area-inset-top));}.stage{padding:10px 12px;gap:0}.page-wrap{border-radius:6px;box-shadow:0 12px 30px rgba(39,28,17,.15)}.edge{width:25%}.thumb-strip{gap:8px;padding:9px 10px}.thumb{width:52px;height:74px}}