*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f5f5f5;padding:20px;color:#333;margin:0}.container{max-width:1400px;margin:0 auto;height:calc(100vh - 40px);display:flex;flex-direction:column}h1{margin-bottom:20px;font-size:28px;color:#222}.view{display:none;flex:1;overflow:auto}.view.active{display:flex}.books-view,.create-view{flex-direction:column}.create-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #eee}.create-header h1{font-size:20px;margin:0;color:#222}.create-content{display:flex;gap:16px;flex:1}.panel{background:#fff;border-radius:8px;padding:12px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column}.create-view .panel:first-child{flex:0 0 320px;overflow-y:auto}.create-view .panel:last-child{flex:1;min-width:0}.section{margin-bottom:12px}.section h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#666;margin-bottom:6px;border-bottom:1px solid #eee;padding-bottom:4px}.form-group{margin-bottom:8px}label{display:block;font-size:12px;font-weight:500;color:#555;margin-bottom:3px}input[type=file],input[type=text],input[type=number],input[type=range],select{width:100%;padding:6px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;font-family:inherit}input[type=range]{padding:0;height:6px;cursor:pointer}input[type=checkbox]{margin-right:8px;cursor:pointer}.value-display{font-size:11px;color:#999;margin-top:2px}button{width:100%;padding:6px 8px;background:#06c;color:#fff;border:none;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s;margin-bottom:4px}button:hover{background:#0052a3}button:disabled{background:#ccc;cursor:not-allowed}button.secondary{background:#f0f0f0;color:#333;border:1px solid #ddd}button.secondary:hover{background:#e8e8e8}.canvas-wrapper{display:flex;justify-content:center;align-items:center;background:#f9f9f9;border:2px dashed #ddd;border-radius:4px;flex:1;position:relative;overflow:auto}canvas{display:block;background:#fff;box-shadow:0 2px 8px #0000001a;cursor:move;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.info-box{background:#e3f2fd;border-left:4px solid #2196F3;padding:8px;border-radius:4px;font-size:11px;color:#1565c0;margin:6px 0;line-height:1.4}.book-list{width:100%;border-collapse:collapse;background:#fff;border:1px solid #ddd;border-radius:6px;overflow:hidden}.book-list thead{background:#f5f5f5;border-bottom:2px solid #ddd}.book-list th{padding:12px 16px;text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;color:#666;letter-spacing:.5px}.book-list tbody tr{border-bottom:1px solid #eee;transition:background-color .15s ease}.book-list tbody tr:hover{background-color:#fafafa}.book-list tbody tr.selected{background-color:#e3f2fd}.book-list td{padding:14px 16px;font-size:14px;color:#333;vertical-align:middle}.book-list input[type=checkbox]{width:18px;height:18px;cursor:pointer;margin:0}.book-name{font-weight:500;display:block}.book-dims{font-size:12px;color:#999;margin-top:2px}.book-actions{display:flex;gap:6px;white-space:nowrap}.book-actions button{width:auto;padding:8px 16px;margin:0;font-size:13px;font-weight:500;border:1px solid #2196F3;background:#2196f3;color:#fff;border-radius:4px;cursor:pointer;transition:all .15s ease}.book-actions button:hover{background:#1976d2;border-color:#1976d2}.book-actions button.secondary{background:#f5f5f5;color:#d32f2f;border-color:#d32f2f}.book-actions button.secondary:hover{background:#ffebee;border-color:#c62828}.dimensions-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11px;background:#f9f9f9;padding:8px;border-radius:4px;margin:6px 0}.dimension-item{display:flex;justify-content:space-between}.dimension-label{color:#666}.dimension-value{font-weight:600;color:#333;font-family:Monaco,Menlo,monospace}.books-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.books-header h2{font-size:20px;margin:0}.books-actions{display:flex;gap:10px}.books-actions button{width:auto;padding:10px 20px;margin:0}.create-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.create-header h2{font-size:20px;margin:0}.create-header button{width:auto;padding:10px 20px;margin:0}@media print{body{background:#fff;padding:0}.container{height:auto}.panel{display:none!important}.canvas-wrapper{border:none;background:#fff;min-height:auto}}.modal-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:1000;justify-content:center;align-items:center}.modal-overlay.show{display:flex}.modal-dialog{background:#fff;border-radius:12px;padding:24px;box-shadow:0 20px 60px #0000004d;max-width:400px;width:90%}.modal-dialog h2{font-size:18px;margin-bottom:12px;color:#222}.modal-dialog p{font-size:14px;color:#666;margin-bottom:24px;line-height:1.5}.modal-buttons{display:flex;gap:12px;justify-content:flex-end}.modal-buttons button{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-buttons .btn-primary{background:#06c;color:#fff}.modal-buttons .btn-primary:hover{background:#0052a3}.modal-buttons .btn-danger{background:#dc3545;color:#fff}.modal-buttons .btn-danger:hover{background:#c82333}.modal-buttons .btn-secondary{background:#f0f0f0;color:#333;border:1px solid #ddd}.modal-buttons .btn-secondary:hover{background:#e8e8e8}.toast{position:fixed;bottom:20px;right:20px;background:#10b981;color:#fff;padding:14px 20px;border-radius:8px;box-shadow:0 8px 24px #00000026;font-size:14px;font-weight:500;z-index:999;animation:slideIn .3s ease-out,slideOut .3s ease-out 2.7s forwards;max-width:300px;word-wrap:break-word}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(400px);opacity:0}}.toast.error{background:#ef4444}.toast.success{background:#10b981}.app-hidden{display:none!important}.boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#f5f5f5;z-index:2000;color:#999;font-size:14px}.spinner{width:18px;height:18px;border:2px solid #ddd;border-top-color:#06c;border-radius:50%;animation:spin .7s linear infinite;margin-right:10px}@keyframes spin{to{transform:rotate(360deg)}}.auth-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#f5f5f5;padding:20px;z-index:1500;overflow:auto}.auth-card{background:#fff;border-radius:10px;padding:28px;box-shadow:0 4px 20px #00000014;width:100%;max-width:380px}.auth-card h1{font-size:20px;margin-bottom:4px}.auth-card .auth-sub{font-size:13px;color:#888;margin-bottom:20px;line-height:1.5}.auth-card .form-group{margin-bottom:12px}.auth-card input[type=email],.auth-card input[type=password],.auth-card input[type=text]{width:100%;padding:9px 10px;border:1px solid #ddd;border-radius:4px;font-size:14px;font-family:inherit}.auth-card input:focus{outline:none;border-color:#06c;box-shadow:0 0 0 3px #0066cc1f}.auth-card button{padding:10px;font-size:14px;margin-top:6px}.auth-error{background:#ffebee;border-left:4px solid #d32f2f;color:#c62828;padding:9px 10px;border-radius:4px;font-size:12.5px;line-height:1.45;margin-bottom:14px}.auth-note{background:#e3f2fd;border-left:4px solid #2196F3;color:#1565c0;padding:9px 10px;border-radius:4px;font-size:12.5px;line-height:1.45;margin-bottom:14px}.auth-link{background:none;border:none;color:#06c;font-size:12.5px;font-weight:500;cursor:pointer;padding:8px 0 0;width:auto;margin:0}.auth-link:hover{background:none;text-decoration:underline}.auth-footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.app-header h1{margin:0}.user-chip{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.user-chip button{width:auto;padding:6px 12px;margin:0;background:#f0f0f0;color:#333;border:1px solid #ddd}.user-chip button:hover{background:#e8e8e8}.list-state{text-align:center;color:#999;padding:30px}.saving-overlay{position:fixed;inset:0;background:#ffffffb3;display:flex;align-items:center;justify-content:center;z-index:1400;font-size:14px;color:#555}.book-thumb{width:56px;height:32px;object-fit:cover;border-radius:3px;border:1px solid #eee;background:#fafafa;display:block}.create-content{min-height:0}.create-view .panel:last-child{min-height:0}.app-footer{font-size:11px;color:#aaa;text-align:right;margin-top:10px}.app-footer a{color:#888}