:root{color:#182026;background:#f5f7f6;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}button,a,input{font:inherit}.shell{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:100vh}.panel{display:flex;flex-direction:column;gap:22px;padding:24px;color:#f8fafc;background:#1e2933;border-right:1px solid rgba(255,255,255,.08)}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:38px;height:38px;border-radius:8px;object-fit:cover;flex-shrink:0}h1,p{margin:0}h1{font-size:18px;line-height:1.2;letter-spacing:0}.brand p{margin-top:3px;color:#adbac7;font-size:13px}.drop-zone{display:grid;place-items:center;min-height:154px;padding:18px;text-align:center;cursor:pointer;border:1px dashed rgba(120,208,177,.62);border-radius:8px;background:#263440;transition:border-color .16s ease,background .16s ease,transform .16s ease}.drop-zone:hover,.drop-zone.is-dragging{border-color:#78d0b1;background:#2d3c49;transform:translateY(-1px)}.drop-zone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.drop-title{display:block;font-weight:700;font-size:18px}.drop-meta{display:block;max-width:210px;margin-top:8px;color:#c8d2dc;font-size:13px;line-height:1.4}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}button,.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;color:#102019;font-weight:700;text-decoration:none;border:0;border-radius:8px;background:#78d0b1;cursor:pointer}button:disabled,.button.disabled{color:#82909d;background:#33424f;cursor:not-allowed}.stats{display:grid;gap:12px;margin:0}.stats div{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}dt{color:#95a5b3;font-size:12px}dd{min-width:0;margin:0;overflow-wrap:anywhere;color:#f8fafc;font-size:14px}.viewport-wrap{position:relative;min-width:0;min-height:100vh;overflow:hidden;background:linear-gradient(90deg,rgba(24,32,38,.055) 1px,transparent 1px),linear-gradient(rgba(24,32,38,.055) 1px,transparent 1px),#f5f7f6;background-size:36px 36px}#viewer{display:block;width:100%;height:100%}.empty-state,.progress{position:absolute;left:50%;top:50%;display:grid;gap:8px;width:min(360px,calc(100% - 48px));padding:18px;color:#182026;text-align:center;border:1px solid rgba(24,32,38,.12);border-radius:8px;background:#ffffffe0;box-shadow:0 18px 50px #1f293724;transform:translate(-50%,-50%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.empty-state strong{font-size:18px}.empty-state span,.progress span{color:#52616e;font-size:14px}.hidden{display:none}@media (max-width: 760px){.shell{grid-template-columns:1fr;grid-template-rows:auto minmax(460px,1fr);width:100vw;max-width:100vw;overflow:hidden}.panel,.viewport-wrap{width:100vw;max-width:100vw;min-width:0}.panel{gap:16px;padding:16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.drop-zone{min-height:112px}.drop-zone,.actions,.stats{width:100%;max-width:calc(100vw - 48px)}button,.button{min-width:0}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.viewport-wrap{min-height:460px}.empty-state,.progress{left:16px;right:auto;width:calc(100vw - 48px);transform:translateY(-50%)}}