body{margin:0;padding:0;overflow:hidden;font-family:Arial,sans-serif}#app-container{width:100%;height:100vh;position:relative}canvas{display:block;margin:0 auto}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#f5f5f5;color:#333}#app-container{width:100%;min-height:100vh;display:flex;flex-direction:column}.quick-share-header{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;padding:1rem 2rem;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.quick-share-header h1{font-size:1.5rem;font-weight:600;color:white}.quick-share-layout{display:flex;flex:1;overflow:hidden}.quick-share-sidebar{width:250px;background:white;border-right:1px solid #e0e0e0;overflow-y:auto;padding:1rem}.quick-share-sidebar.hidden{display:none}.tool-button{width:100%;padding:.75rem 1rem;margin-bottom:.5rem;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;text-align:left;font-size:.9rem;transition:all .2s;display:flex;align-items:center;gap:.5rem}.tool-button:hover{background:#e9ecef;border-color:#667eea}.tool-button.active{background:#667eea;color:white;border-color:#667eea}.tool-button-icon{font-size:1.2rem}.quick-share-content{flex:1;overflow-y:auto;padding:2rem;background:white}.quick-share-mobile-buttons{display:none;padding:1rem;background:white}.quick-share-mobile-buttons.show{display:block !important}.quick-share-mobile-buttons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.mobile-tool-button{width:100%;padding:1rem;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;text-align:center;font-size:.9rem;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.5rem}.mobile-tool-button:hover{background:#e9ecef;border-color:#667eea}.mobile-tool-button.active{background:#667eea;color:white;border-color:#667eea}.quick-share-mobile-view{display:none;flex-direction:column;height:100vh}.quick-share-mobile-view.show{display:flex}.mobile-header{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;padding:1rem;display:flex;align-items:center;gap:1rem}.mobile-back-button{background:0;border:0;color:white;font-size:1.5rem;cursor:pointer;padding:.25rem .5rem}.mobile-header-title{font-size:1.1rem;font-weight:600}.mobile-content{flex:1;overflow-y:auto;padding:1rem;background:white}.tool-view{max-width:800px;margin:0 auto}.tool-title{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;color:#333}.tool-section{margin-bottom:2rem}.tool-section-title{font-size:1.1rem;font-weight:600;margin-bottom:.75rem;color:#555}.tool-input-group{margin-bottom:1rem}.tool-label{display:block;margin-bottom:.5rem;font-weight:500;color:#666}.tool-input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;font-family:inherit}.tool-input:focus{outline:0;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1)}.tool-select{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;font-family:inherit;background:white}.tool-button-primary,.tool-button-secondary{padding:.75rem 1.5rem;border:0;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;display:inline-block}.tool-button-primary{background:#667eea;color:white}.tool-button-primary:hover{background:#5568d3}.tool-button-primary:active{transform:scale(0.98)}.tool-button-primary:disabled{background:#ccc;cursor:not-allowed;transform:none}.tool-button-secondary{background:#6c757d;color:white}.tool-button-secondary:hover{background:#5a6268}.tool-button-secondary:active{transform:scale(0.98)}.tool-button-secondary:disabled{background:#ccc;cursor:not-allowed;transform:none}.tool-button-group{display:flex;flex-direction:column;gap:.5rem}.tool-button-group .tool-button-primary,.tool-button-group .tool-button-secondary{margin:0}.tool-output{margin-top:1rem;padding:1rem;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:4px;font-family:'Courier New',monospace;word-break:break-all;white-space:pre-wrap}.tool-output.error{background:#fee;border-color:#fcc;color:#c33}.tool-copy-button{margin-top:.5rem;padding:.5rem 1rem;background:#28a745;color:white;border:0;border-radius:4px;font-size:.9rem;cursor:pointer}.tool-copy-button:hover{background:#218838}@media(max-width:768px){.quick-share-layout{flex-direction:column}.quick-share-sidebar{display:none !important}.quick-share-content{display:none !important}.quick-share-mobile-buttons{display:none}.quick-share-mobile-buttons.show{display:block !important}.quick-share-mobile-view{display:none}.quick-share-mobile-view.show{display:flex !important}}@media(min-width:769px){.quick-share-mobile-buttons{display:none !important}.quick-share-mobile-view{display:none !important}}