*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #ffffff;--bg-secondary: #f5f5f5;--text: #1a1a1a;--text-muted: #666666;--border: #e0e0e0;--accent: #2563eb;--accent-hover: #1d4ed8;--danger: #dc2626;--radius: 8px;--shadow: 0 1px 3px rgba(0, 0, 0, .1);--glass: rgba(255, 255, 255, .62);--blur: blur(24px) saturate(180%);--rim: inset 0 .5px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(0, 0, 0, .07);--drop: 0 10px 30px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .08);--hairline: rgba(0, 0, 0, .08);--fill: rgba(0, 0, 0, .05);--accent-glow: rgba(37, 99, 235, .25);--ring: rgba(37, 99, 235, .2);--danger-fill: rgba(220, 38, 38, .1);--danger-ink: #dc2626;--toast-bg: rgba(28, 28, 30, .82);--toast-text: #ffffff;--wash: rgba(37, 99, 235, .07)}@media (prefers-color-scheme: dark){:root{--bg: #1a1a1a;--bg-secondary: #2a2a2a;--text: #e5e5e5;--text-muted: #999999;--border: #3a3a3a;--accent: #3b82f6;--accent-hover: #60a5fa;--shadow: 0 1px 3px rgba(0, 0, 0, .3);--glass: rgba(42, 42, 42, .55);--blur: blur(24px) saturate(170%);--rim: inset 0 .5px 0 rgba(255, 255, 255, .2), inset 0 0 0 .5px rgba(255, 255, 255, .07);--drop: 0 10px 30px rgba(0, 0, 0, .32), 0 1px 3px rgba(0, 0, 0, .22);--hairline: rgba(255, 255, 255, .09);--fill: rgba(255, 255, 255, .08);--accent-glow: rgba(59, 130, 246, .3);--ring: rgba(59, 130, 246, .25);--danger-fill: rgba(248, 113, 113, .14);--danger-ink: #f87171;--toast-bg: rgba(58, 58, 62, .82);--toast-text: #ffffff;--wash: rgba(59, 130, 246, .09)}}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background:var(--bg);color:var(--text);line-height:1.5}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 600px at 15% -10%,var(--wash),transparent 60%),radial-gradient(800px 600px at 100% 110%,var(--wash),transparent 60%)}.container{max-width:720px;margin:0 auto;padding:16px;min-height:100vh;display:flex;flex-direction:column}header{position:sticky;top:12px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;margin-bottom:16px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--rim),var(--drop)}header h1{font-size:1.25rem;font-weight:650;letter-spacing:-.01em}.header-actions{display:flex;align-items:center;gap:8px}.room-badge{background:var(--fill);padding:5px 12px;border-radius:999px;font-family:ui-monospace,SF Mono,Fira Code,Menlo,monospace;font-size:.85rem;letter-spacing:.05em}button{background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:999px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:inset 0 .5px #ffffff73,0 4px 14px var(--accent-glow);transition:background .15s,transform .15s}button:hover{background:var(--accent-hover)}button:active{transform:scale(.97)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#clear-btn{background:var(--danger-fill);color:var(--danger-ink);box-shadow:none}#clear-btn:hover{background:var(--danger);color:#fff}main{flex:1;display:flex;flex-direction:column;gap:16px}textarea{width:100%;min-height:200px;flex:1;padding:14px 16px;border:0;border-radius:16px;background:var(--bg-secondary);box-shadow:inset 0 0 0 .5px var(--hairline);color:var(--text);font-family:inherit;font-size:.95rem;resize:vertical;outline:none;transition:box-shadow .15s}textarea:focus{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 4px var(--ring)}.drop-zone{border:1.5px dashed var(--border);border-radius:16px;padding:24px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:var(--ring)}.drop-zone p{color:var(--text-muted)}.drop-hint{font-size:.8rem;margin-top:4px}.image-preview{display:flex;flex-wrap:wrap;gap:12px}.image-preview .img-wrapper{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}.image-preview .img-wrapper:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px var(--hairline);pointer-events:none}.image-preview img{display:block;max-width:100%;max-height:300px;object-fit:contain;background:var(--bg-secondary)}.image-preview .img-wrapper .delete-img{position:absolute;top:8px;right:8px;z-index:1;background:#14141680;-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);box-shadow:inset 0 .5px #ffffff4d,0 2px 8px #00000040;color:#fff;border:none;border-radius:50%;width:28px;height:28px;font-size:16px;line-height:28px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.image-preview .img-wrapper .delete-img:hover{background:#dc2626cc}footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:.5px solid var(--hairline);margin-top:16px}#expiry-timer{font-size:.8rem;color:var(--text-muted)}.footer-actions{display:flex;gap:8px}.toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%) translateY(100px);width:max-content;max-width:calc(100% - 32px);background:var(--toast-bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 .5px #fff3,0 14px 40px #0000004d;color:var(--toast-text);padding:10px 20px;border-radius:20px;font-size:.85rem;font-weight:500;opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;pointer-events:none;z-index:100}.toast.show{transform:translate(-50%) translateY(0);opacity:1}.loading textarea,.loading .drop-zone{opacity:.5;pointer-events:none}.upload-progress{text-align:center;padding:8px;color:var(--text-muted);font-size:.85rem}@media (max-width: 480px){.container{padding:12px}header h1{font-size:1.1rem}textarea{min-height:150px;font-size:16px}header{top:8px;padding-left:16px}}@media (prefers-reduced-transparency: reduce){:root{--glass: var(--bg-secondary)}header,.toast,.image-preview .img-wrapper .delete-img{-webkit-backdrop-filter:none;backdrop-filter:none}.toast{background:var(--text);color:var(--bg)}}