:root{--bg-color: #0c090b;--panel-bg: #0c090b;--text-color: #c9d1d9;--accent-color: #d11270;--accent-hover: #fa1988;--border-color: #30363d;--error-color: #f85149;--success-color: #2ea043;--font-mono: "Fira Code", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-mono);line-height:1.5;display:flex;justify-content:center;padding:2rem 1rem;min-height:100vh}.app{width:100%;max-width:800px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color);view-transition-name:header}h1{font-size:1.5rem;color:var(--accent-color);display:flex;align-items:center;gap:.5rem}.logo-icon{width:28px;height:28px;display:inline-block;filter:drop-shadow(0 0 8px rgba(245,0,87,.4))}.tabs{display:flex;gap:.5rem;background:#0003;padding:.25rem;border-radius:6px;border:1px solid var(--border-color)}.tab{background:transparent;border:none;color:#a78ea9;font-family:var(--font-mono);font-size:1rem;padding:.5rem 1.2rem;cursor:pointer;border-radius:4px;transition:all .3s cubic-bezier(.4,0,.2,1)}.tab:hover{color:var(--text-color);background:#ffffff0d}.tab.active{background:var(--accent-color);color:#fff;box-shadow:0 4px 12px #f500574d}.view{display:none;animation:fadeIn .3s ease}.view.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}textarea{width:100%;height:300px;background:var(--panel-bg);color:var(--text-color);border:1px solid var(--border-color);border-radius:6px;padding:1rem;font-family:var(--font-mono);font-size:1rem;resize:vertical;outline:none;white-space:pre;overflow-wrap:normal;overflow-x:auto}textarea:focus{border-color:var(--accent-color)}.hidden{display:none!important}#file-dropzone{width:100%;height:300px;border:2px dashed var(--border-color);border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;background:#2d133180;transition:all .3s ease}#file-dropzone:hover,#file-dropzone.dragover{border-color:var(--accent-color);background:#f500570d;box-shadow:0 0 15px #f500571a inset}.options{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}select{background:var(--panel-bg);color:var(--text-color);border:1px solid var(--border-color);padding:.5rem;border-radius:4px;font-family:var(--font-mono);font-size:1rem;outline:none}.btn,.btn-primary,.btn-secondary{font-family:var(--font-mono);font-size:1rem;padding:.6rem 1.2rem;border-radius:4px;cursor:pointer;border:1px solid var(--border-color);background:var(--panel-bg);color:var(--text-color);transition:all .3s ease;text-decoration:none;display:inline-block;font-weight:500}.btn:hover,.btn-secondary:hover{border-color:var(--accent-color);background:#f500570d}.btn-primary{background:var(--accent-color);color:#fff;border:none;box-shadow:0 4px 12px #f500574d}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 6px 16px #f5005766;transform:translateY(-1px)}.btn:disabled,.btn-primary:disabled{opacity:.5;cursor:not-allowed}.share-box{display:flex;gap:.5rem;margin:1.5rem 0}.share-box input{flex:1;background:var(--panel-bg);color:var(--text-color);border:1px solid var(--border-color);padding:.5rem 1rem;border-radius:4px;font-family:var(--font-mono);font-size:1rem}#qrcode{margin:1.5rem 0;padding:1rem;background:#fff;display:inline-block;border-radius:4px}#toast-container{position:fixed;bottom:2rem;right:2rem;display:flex;flex-direction:column;gap:.5rem;z-index:1000}.toast{background:var(--panel-bg);border:1px solid var(--border-color);padding:1rem;border-radius:4px;box-shadow:0 4px 12px #00000080;animation:slideIn .3s ease,fadeOut .3s ease 2.7s forwards;display:flex;align-items:center;gap:.5rem;font-size:.9rem}.toast.error{border-left:4px solid var(--error-color)}.toast.success{border-left:4px solid var(--success-color)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.read-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}#read-content-container{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:6px;padding:1rem;overflow-x:auto}pre{margin:0;counter-reset:line}code{font-family:var(--font-mono)}.line{display:block}.line:before{counter-increment:line;content:counter(line);display:inline-block;width:2rem;margin-right:1rem;color:#484f58;text-align:right;-webkit-user-select:none;user-select:none}.mt{margin-top:1rem}