@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;600;700&display=swap";:root{--sidebar-width: 260px;--navbar-height: 70px;--bg-color: #f8fafc;--surface-color: #ffffff;--sidebar-color: #ffffff;--border-color: #e2e8f0;--text-primary: #1e293b;--text-secondary: #64748b;--accent-color: #3b82f6;--accent-light: #eff6ff;--danger-color: #ef4444;--success-color: #10b981;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--bg-color);color:var(--text-primary);height:100vh;overflow:hidden}#root{display:flex;height:100vh}.sidebar{width:var(--sidebar-width);background-color:var(--sidebar-color);border-right:1px solid var(--border-color);display:flex;flex-direction:column;z-index:10}.sidebar-header{height:var(--navbar-height);display:flex;align-items:center;padding:0 1.5rem;border-bottom:1px solid var(--border-color)}.logo{display:flex;align-items:center;gap:.75rem;font-family:Outfit,sans-serif;font-weight:700;font-size:1.25rem;color:var(--accent-color)}.sidebar-nav{padding:1.5rem .75rem;flex-grow:1}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.5rem;color:var(--text-secondary);text-decoration:none;font-weight:500;transition:all .2s ease;cursor:pointer;margin-bottom:.25rem}.nav-item:hover,.nav-item.active{background-color:var(--accent-light);color:var(--accent-color)}.main-wrapper{flex-grow:1;display:flex;flex-direction:column;overflow:hidden}.navbar{height:var(--navbar-height);background-color:var(--surface-color);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;z-index:5}.page-title{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:600}.content{flex-grow:1;padding:2rem;overflow-y:auto}.card{background-color:var(--surface-color);border-radius:.75rem;border:1px solid var(--border-color);box-shadow:var(--shadow-sm);overflow:hidden}.card-header{padding:1.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}table{width:100%;border-collapse:collapse;text-align:left}th{background-color:#f1f5f9;padding:1rem 1.5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-weight:600}td{padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);font-size:.875rem}tr:hover td{background-color:#f8fafc}.font-preview-cell{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.1rem}.btn{padding:.5rem 1rem;border-radius:.375rem;font-weight:500;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s;border:1px solid transparent}.btn-primary{background-color:var(--accent-color);color:#fff}.btn-primary:hover{background-color:#2563eb}.btn-secondary{background-color:transparent;border-color:var(--border-color);color:var(--text-primary)}.btn-secondary:hover{background-color:var(--accent-light)}.btn-icon{padding:.4rem;border-radius:.375rem;background:transparent;border:1px solid transparent;cursor:pointer;color:var(--text-secondary)}.btn-icon:hover{background-color:var(--bg-color);color:var(--accent-color)}.btn-icon.delete:hover{background-color:#fee2e2;color:var(--danger-color)}.modal-overlay{position:fixed;inset:0;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background-color:var(--surface-color);width:100%;max-width:500px;border-radius:1rem;box-shadow:var(--shadow-md);overflow:hidden;animation:modalPop .3s cubic-bezier(.34,1.56,.64,1)}.copy-modal{max-width:860px}@keyframes modalPop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.modal-header{padding:1.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.modal-body{padding:1.5rem}.copy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-height:70vh;overflow-y:auto}.copy-card{border:1px solid var(--border-color);border-radius:.75rem;padding:1rem;background-color:#f8fafc}.copy-card-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.copy-label{font-weight:600;font-size:.9rem}.btn-copy-inline{flex-shrink:0}.snippet-preview{background-color:#0f172a;color:#e2e8f0;border-radius:.75rem;padding:.9rem;white-space:pre-wrap;word-break:break-word;font-size:.78rem;line-height:1.5;max-height:220px;overflow:auto}.form-group{margin-bottom:1.25rem}label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--text-primary)}input,textarea{width:100%;padding:.625rem;border:1px solid var(--border-color);border-radius:.5rem;font-family:inherit;font-size:.875rem;outline:none;transition:border-color .2s}input:focus,textarea:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-light)}.uploader-box{border:2px dashed var(--border-color);border-radius:.5rem;padding:2rem;text-align:center;cursor:pointer;transition:all .2s}.uploader-box:hover{border-color:var(--accent-color);background-color:var(--accent-light)}.modal-footer{padding:1rem 1.5rem;background-color:#f8fafc;display:flex;justify-content:flex-end;gap:.75rem}.toast{position:fixed;top:1.5rem;right:1.5rem;background-color:var(--text-primary);color:#fff;padding:1rem 1.5rem;border-radius:.5rem;box-shadow:var(--shadow-md);z-index:1000;display:flex;align-items:center;gap:.75rem;animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.preview-sidebar{width:480px;min-width:480px;background-color:var(--surface-color);border-left:1px solid var(--border-color);display:flex;flex-direction:column;z-index:5;box-shadow:-4px 0 15px #00000008;animation:slideInRight .3s ease-out}.preview-header{padding:1.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.preview-body{padding:1.5rem;overflow-y:auto;flex-grow:1}.preview-output{margin-top:1.5rem;padding:1.5rem;background-color:var(--bg-color);border-radius:.5rem;min-height:150px;font-size:1.5rem;word-wrap:break-word;white-space:pre-wrap;border:1px solid var(--border-color)}.preview-meta{margin-top:2rem;font-size:.85rem;color:var(--text-secondary);background:var(--bg-color);padding:1rem;border-radius:.5rem}.preview-meta p{margin-bottom:.5rem;word-break:break-all}.preview-meta p:last-child{margin-bottom:0}.preview-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem;padding:.5rem;background:var(--bg-color);border-radius:.5rem;border:1px solid var(--border-color)}.control-group{display:flex;align-items:center;gap:.25rem}.style-btn.active{background-color:var(--accent-light);color:var(--accent-color)}.preset-select{padding:.25rem .5rem;border:1px solid var(--border-color);border-radius:.25rem;outline:none;background:var(--surface-color);font-family:inherit}.preset-select:focus{border-color:var(--accent-color)}@media(max-width:900px){.copy-grid{grid-template-columns:1fr}}