:root{--paper-body: #FBFAFE;--paper-dot: #EEE9F8;--paper-card: #FFFFFF;--paper-zone: #F6F3FD;--paper-ink: #3A3450;--paper-ink-soft: #8B85A0;--paper-ink-mute: #6B6285;--accent: #7A63D6;--accent-strong: #5D48B5;--accent-mid: #B9A7EE;--accent-line: #C9BBF1;--accent-soft: #D9CFF6;--accent-wash: #EAE4FB;--mint-deep: #5DAF8C;--mint-mid: #A5DEC7;--mint-line: #C4EBDB;--mint-wash: #E2F6EE;--sun: #FFE9A8;--sun-deep: #FFD977;--danger: #D98A8A;--shadow-card: 0 2px 6px rgba(58, 52, 80, .06);--shadow-sticky: 2px 3px 6px rgba(58, 52, 80, .12);--shadow-pop: 4px 4px 0 var(--mint-line)}[data-theme=dark]{--paper-body: #211B33;--paper-dot: #2B2444;--paper-card: #2E2745;--paper-zone: #372F55;--paper-ink: #EFEBFB;--paper-ink-soft: #9C93B8;--paper-ink-mute: #B3A9D2;--accent: #A78FF0;--accent-strong: #C0ADF6;--accent-mid: #7A63D6;--accent-line: #5D4F8E;--accent-soft: #4A3F78;--accent-wash: #3E3466;--mint-deep: #6FC9A3;--mint-mid: #4E8A70;--mint-line: #35604E;--mint-wash: #27443A;--sun: #E8C96A;--sun-deep: #C9A94F;--danger: #E39C9C;--shadow-card: 0 2px 6px rgba(0, 0, 0, .3);--shadow-sticky: 2px 3px 6px rgba(0, 0, 0, .4);--shadow-pop: 4px 4px 0 var(--mint-line)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--paper-body);background-image:radial-gradient(var(--paper-dot) 1.2px,transparent 1.2px);background-size:26px 26px;color:var(--paper-ink);font-family:Anuphan,system-ui,sans-serif;font-weight:400}h1,h2,h3,.num{font-family:Mitr,Anuphan,sans-serif;font-weight:500}button,input,a{font-family:inherit}.hl{background:linear-gradient(transparent 62%,var(--mint-line) 62%);padding:0 6px}.hl-lav{background:linear-gradient(transparent 62%,var(--accent-soft) 62%)}.paper-stack{position:relative}.backing{position:absolute;top:6px;right:-7px;bottom:-9px;left:5px;background:var(--accent-wash);border-radius:8px 22px 10px 18px;transform:rotate(-1.8deg);z-index:0}.backing.mint{background:var(--mint-wash)}.backing.right{top:6px;right:5px;bottom:-9px;left:-7px;transform:rotate(1.8deg)}.paper-card{position:relative;z-index:1;background:var(--paper-card);color:var(--paper-ink);border-radius:6px 18px 8px 16px;padding:24px 22px 20px;box-shadow:var(--shadow-card);transition:transform .25s ease}.tape{position:absolute;top:-11px;left:26px;width:84px;height:22px;transform:rotate(-4deg);background:repeating-linear-gradient(45deg,#b9a7ee8c 0,#b9a7ee8c 8px,#b9a7ee61 8px,#b9a7ee61 16px);clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);z-index:2}.tape.mint{background:repeating-linear-gradient(45deg,#a5dec799 0,#a5dec799 8px,#a5dec766 8px,#a5dec766 16px)}.dog-ear{position:absolute;bottom:0;right:0;width:16px;height:16px;background:linear-gradient(135deg,transparent 50%,rgba(122,99,214,.16) 50%);border-bottom-right-radius:16px}button,.btn{cursor:pointer;border:none;background:var(--accent);color:#fff;font-weight:600;font-size:15px;padding:10px 18px;border-radius:5px 14px 6px 12px;box-shadow:var(--shadow-pop);transform:rotate(-1deg);transition:transform .2s ease,background .2s ease}button:hover,.btn:hover{transform:rotate(0) translateY(-3px);background:var(--accent-strong)}button:active{transform:translateY(0)}button.ghost,.btn.ghost{background:var(--paper-card);color:var(--accent);border:1.5px dashed var(--accent-line);box-shadow:none;transform:rotate(1deg)}button.ghost:hover{background:var(--paper-zone);transform:rotate(0) translateY(-3px)}button.del{background:transparent;color:var(--danger);box-shadow:none;border:1.5px dashed var(--danger);padding:6px 12px;font-size:13px;transform:rotate(.6deg)}button.del:hover{background:var(--danger);color:#fff}input{width:100%;background:var(--paper-card);color:var(--paper-ink);border:1.5px dashed var(--accent-line);border-radius:7px 4px 8px 5px;padding:12px 14px;font-size:15px;outline:none;transition:border-color .2s}input:focus{border-color:var(--accent);border-style:solid}input::placeholder{color:var(--paper-ink-soft)}.tag{display:inline-block;font-weight:700;font-size:11px;padding:3px 9px;border-radius:3px 7px 4px 6px;background:var(--accent-wash);color:var(--accent-strong);white-space:nowrap}.tag.mint{background:var(--mint-wash);color:var(--mint-deep)}.tag.sun{background:var(--sun);color:#7a5c10}.tag.danger{background:#f6e0e0;color:#a94848}[data-theme=dark] .tag.sun{color:#211b33}[data-theme=dark] .tag.danger{background:#4a2f2f;color:var(--danger)}.blob{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:45% 55% 50% 50%;background:var(--accent-mid);color:#fff;font-weight:600;font-size:18px;box-shadow:var(--shadow-pop);transform:rotate(-4deg);flex:none}.blob.mint{background:var(--mint-mid)}.app-wrap{max-width:900px;margin:0 auto;padding:26px 20px 60px}.topbar{display:flex;align-items:center;gap:12px;margin-bottom:26px}.topbar .grow{flex:1}.topbar .hi{font-weight:600;color:var(--paper-ink-mute)}.icon-btn{background:var(--paper-card);color:var(--paper-ink);border:1.5px dashed var(--accent-line);box-shadow:none;padding:8px 12px;font-size:16px;transform:rotate(0)}.icon-btn:hover{background:var(--paper-zone);transform:translateY(-2px)}.loading{min-height:60vh;display:flex;align-items:center;justify-content:center;font-family:Mitr,sans-serif;color:var(--paper-ink-soft)}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.login-stack{width:100%;max-width:380px}.login.paper-card{padding:34px 30px 30px;border-radius:10px 22px 12px 20px;transform:rotate(-.8deg);display:flex;flex-direction:column;gap:16px}.login h1{margin:4px 0 8px;text-align:center;font-size:26px}.login .sub{text-align:center;color:var(--paper-ink-soft);margin:-8px 0 6px;font-size:14px}.login .error{background:#f6e0e0;color:#a94848;border-radius:4px 10px 5px 8px;padding:8px 12px;font-size:14px;font-weight:600}[data-theme=dark] .login .error{background:#4a2f2f;color:var(--danger)}.login button[type=submit]{margin-top:4px;font-size:16px;padding:12px}.dropzone{position:relative;cursor:pointer;text-align:center;padding:40px 20px;margin-bottom:30px;background:var(--paper-zone);color:var(--paper-ink-mute);font-weight:600;border:2px dashed var(--accent-line);border-radius:14px 26px 16px 22px;transform:rotate(-.4deg);transition:transform .2s,background .2s,border-color .2s}.dropzone:hover,.dropzone.drag{background:var(--accent-wash);border-color:var(--accent);transform:rotate(0) translateY(-3px)}.dropzone .big{display:block;font-family:Mitr,sans-serif;font-size:19px;margin-bottom:6px;color:var(--paper-ink)}.dropzone .hint{font-size:13px;color:var(--paper-ink-soft)}.force-ocr{display:flex;align-items:center;gap:10px;margin:-14px 0 26px;padding:10px 14px;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--paper-zone);border:1.5px dashed var(--accent-line);border-radius:6px 12px 7px 10px;transform:rotate(-.3deg);font-size:14px;color:var(--paper-ink-mute);width:fit-content}.force-ocr:hover{background:var(--accent-wash);transform:rotate(0)}.force-ocr input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex:none}.doc-list{display:flex;flex-direction:column;gap:22px}.doc.paper-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:7px 18px 9px 15px}.doc-stack:nth-child(2n) .doc.paper-card{transform:rotate(.5deg)}.doc-stack:nth-child(odd) .doc.paper-card{transform:rotate(-.5deg)}.doc.paper-card:hover{transform:rotate(0) translateY(-4px)}.doc .info{flex:1;min-width:0}.doc .doc-name{font-family:Mitr,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc .doc-name.clickable{cursor:pointer}.doc .doc-name.clickable:hover{color:var(--accent)}.doc .doc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:13px;color:var(--paper-ink-soft)}.doc .spin{display:inline-block;animation:sway 1.6s ease-in-out infinite}.empty{text-align:center;color:var(--paper-ink-soft);padding:40px;font-size:15px}.docview-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}.docview-bar .title{flex:1;min-width:0;font-family:Mitr,sans-serif;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media (max-width: 760px){.split{grid-template-columns:1fr}}.orig{width:100%;height:74vh;border:none;background:var(--paper-card);border-radius:8px 6px 16px 10px;box-shadow:var(--shadow-card)}.md-out{height:74vh;overflow:auto;border-radius:10px 8px 16px 12px;line-height:1.7}.md-out h1,.md-out h2,.md-out h3{color:var(--paper-ink)}.md-out pre{white-space:pre-wrap;word-break:break-word;font-family:Anuphan,monospace;font-size:14px}.md-out img{max-width:100%}.md-out table{border-collapse:collapse;width:100%}.md-out th,.md-out td{border:1px solid var(--accent-line);padding:6px 10px}.md-loading{color:var(--paper-ink-soft)}.decor{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;transition:transform .15s ease-out}.decor .bit{position:absolute;opacity:.55}.decor .c1{top:12%;left:8%;width:26px;height:26px;background:var(--accent-mid);border-radius:45% 55% 50% 50%;animation:floaty1 8s ease-in-out infinite}.decor .c2{top:22%;right:10%;width:20px;height:20px;background:var(--mint-mid);border-radius:6px 12px 7px 10px;animation:floaty2 9s ease-in-out infinite}.decor .c3{bottom:18%;left:12%;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:22px solid var(--sun-deep);animation:floaty1 10s ease-in-out infinite}.decor .c4{bottom:24%;right:14%;width:24px;height:24px;background:var(--accent-soft);border-radius:50% 50% 45% 55%;animation:floaty2 7s ease-in-out infinite}.decor .c5{top:50%;left:4%;width:16px;height:16px;background:var(--mint-line);border-radius:4px 9px 5px 8px;animation:floaty1 11s ease-in-out infinite}.app-wrap,.login-screen{position:relative;z-index:1}@keyframes floaty1{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(8deg)}}@keyframes floaty2{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(12px) rotate(-10deg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes sway{0%,to{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}.fade{animation:fadeUp .5s ease-out both}@media (prefers-reduced-motion: reduce){.decor{display:none}*,.fade,.paper-card,.doc,button{animation:none!important;transition:none!important}}.no-decor .decor{display:none}
