:root{--card: #ffffff;--text: #16212f;--primary: #ec4899;--primary-hover: #db2777;--secondary: #3b82f6;--secondary-hover: #2563eb;--success: #22c55e;--success-hover: #16a34a;--danger: #ef4444;--danger-hover: #dc2626;--warning: #fbbf24;--warning-hover: #f59e0b;--border: #2d3748;--shadow: 6px 6px 0 rgba(0, 0, 0, .15)}.app,.app *{box-sizing:border-box}.app{max-width:980px;margin:0 auto;background:var(--card);border:3px solid var(--border);border-radius:1.5rem;padding:25px;overflow-x:clip;box-shadow:var(--shadow)}.dark .app{--card: #1f2937;--text: #e5e7eb;--border: #4b5563;background:var(--card);color:var(--text);border-color:var(--border);box-shadow:6px 6px #00000059}.page-container{display:flex;flex-direction:column;gap:20px}.image-area{position:relative;min-height:220px;border:3px dashed #cbd5e1;border-radius:1.25rem;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .2s ease,background .2s ease}.dark .image-area{background:#111827;border-color:#4b5563}.image-area:has(img[src]:not([src=""])){border-color:transparent;background:transparent}.image-area img{display:none;max-width:100%;max-height:70vh;height:auto;object-fit:contain;border-radius:.75rem}.empty-tip{position:absolute;color:#94a3b8;font-size:1rem;font-weight:700;pointer-events:none;display:none}.dark .empty-tip{color:#6b7280}.image-area:has(img[src]:not([src=""])) .empty-tip{display:none}.processing-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;backdrop-filter:blur(2px);z-index:10}.dark .processing-overlay{background:#111827b3}.processing-overlay[hidden]{display:none}.processing-toast{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:9999px;background:var(--card);border:3px solid var(--border);box-shadow:var(--shadow);font-weight:700;color:var(--text)}.processing-spinner{display:inline-block;width:20px;height:20px;border:3px solid #e5e7eb;border-top-color:var(--primary);border-radius:50%;animation:img-spin .8s linear infinite}@keyframes img-spin{to{transform:rotate(360deg)}}.controls{display:flex;justify-content:center}.controls-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}.upload-button,.btn-enc,.btn-dec,.btn-re{display:inline-flex;align-items:center;justify-content:center;height:48px;min-width:120px;padding:0 18px;border:2px solid var(--border);border-radius:9999px;font-size:15px;font-weight:700;line-height:1;cursor:pointer;transition:transform .12s ease,background .18s ease,border-color .18s ease;user-select:none;position:relative;overflow:hidden;white-space:nowrap}.upload-button:hover,.btn-enc:hover,.btn-dec:hover,.btn-re:hover{transform:translateY(-2px)}.upload-button:active,.btn-enc:active,.btn-dec:active,.btn-re:active{transform:translateY(0)}.upload-button{background:var(--primary);color:#fff;position:relative}.upload-button:hover{background:var(--primary-hover)}.upload-button .ipt-btn{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.btn-enc{background:var(--secondary);color:#fff}.btn-enc:hover{background:var(--secondary-hover)}.btn-dec{background:var(--success);color:#fff}.btn-dec:hover{background:var(--success-hover)}.btn-re{background:var(--warning);color:#2d3748}.btn-re:hover{background:var(--warning-hover)}.dark .upload-button{background:var(--primary);color:#fff}.dark .upload-button:hover{background:var(--primary-hover)}.dark .btn-enc{background:var(--secondary);color:#fff}.dark .btn-enc:hover{background:var(--secondary-hover)}.dark .btn-dec{background:var(--success);color:#fff}.dark .btn-dec:hover{background:var(--success-hover)}.dark .btn-re{background:var(--warning);color:#2d3748}.dark .btn-re:hover{background:var(--warning-hover)}.toast-wrap{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}.toast{width:max-content;max-width:min(92vw,420px);padding:20px 30px;border-radius:10px;background:#000c;color:#fff;font-size:14px;line-height:1.5;box-shadow:0 8px 22px #02061733;display:flex;align-items:center;gap:8px;transform:translateY(-8px);opacity:0;animation:toast-in .2s ease forwards}.toast.hide{animation:toast-out .2s ease forwards}@keyframes toast-in{to{transform:translateY(0);opacity:1}}@keyframes toast-out{to{transform:translateY(-8px);opacity:0}}@media(max-width:640px){.app{padding:15px}.upload-button,.btn-enc,.btn-dec,.btn-re{min-width:84px;flex:1 1 0;padding:0 12px;font-size:14px;height:44px}.controls-row{gap:8px}.image-area{min-height:180px}}