*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5}.app-container{display:flex;flex-direction:column;height:100vh}.header{background:#fdfdfd;color:#333;padding:6px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e0e0}.header-brand{display:flex;align-items:center;gap:10px}.header-logo{height:45px;width:auto}.header h1{font-size:18px;font-weight:600;color:#cd181e}.header-right{display:flex;align-items:center;gap:16px}.header-time{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;line-height:1.4}.header-time-utc{color:#1a3a6e;font-weight:500}.header-time-local{color:#666;font-size:11px}.btn-signout{background:#14244d;color:#fff;border:none;border-radius:4px;padding:8px 16px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s}.btn-signout:hover{background:#1a3060}.main-content{flex:1;display:flex;overflow:hidden}.toolbar{width:280px;background:#fff;border-right:1px solid #e0e0e0;padding:16px;overflow-y:auto}.pdf-container{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px}.btn{padding:5px 10px;border:none;border-radius:3px;cursor:pointer;font-size:11px;transition:background .2s;width:100%}.btn-primary{background:#cd181e;color:#fff}.btn-primary:hover{background:#a81419}.btn-primary:disabled{background:#ccc;cursor:not-allowed}.btn-secondary{background:#f0f0f0;color:#333}.btn-secondary:hover{background:#e0e0e0}.btn-success{background:#107c10;color:#fff}.btn-success:hover{background:#0e6b0e}.btn-success:disabled{background:#ccc;cursor:not-allowed}.toolbar-section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #e0e0e0}.toolbar-section:last-child{border-bottom:none}.toolbar-section h3{font-size:14px;margin-bottom:10px;color:#cd181e;font-weight:600}.section-divider{display:flex;align-items:center;text-align:center;margin:4px 0}.section-divider:before,.section-divider:after{content:"";flex:1;border-bottom:1px solid #ddd}.section-divider span{padding:0 10px;color:#999;font-size:12px}.signature-preview{border:1px dashed #ccc;padding:10px;text-align:center;margin-bottom:10px;min-height:80px;display:flex;align-items:center;justify-content:center;background:#fff}.signature-preview img{max-width:100%;max-height:60px}.page-nav{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:10px}.input-group{margin-bottom:4px}.input-group label{display:block;font-size:10px;margin-bottom:2px;color:#666}.input-group input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:16px;font-size:16px;color:#666}.loading .spinner{width:40px;height:40px;border-width:4px}.spinner{width:24px;height:24px;border:3px solid #f0f0f0;border-top-color:#cd181e;border-radius:50%;animation:spin .8s linear infinite}.spinner.spinner-sm{width:16px;height:16px;border-width:2px}.spinner.spinner-lg{width:40px;height:40px;border-width:4px}@keyframes spin{to{transform:rotate(360deg)}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;color:#666;font-size:12px}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:16px}.login-container h1{margin:0;font-size:24px;color:#333;font-weight:600}.login-logo{height:80px;margin-bottom:8px}.btn-microsoft{display:flex;align-items:center;gap:12px;padding:12px 24px;background:#fff;border:1px solid #8c8c8c;border-radius:4px;font-size:15px;font-weight:600;color:#5e5e5e;cursor:pointer;transition:all .2s;margin-top:8px}.btn-microsoft:hover{background:#f5f5f5;border-color:#666}.btn-microsoft svg{flex-shrink:0}.error-message{color:#d32f2f;padding:10px;background:#ffebee;border-radius:4px;margin:10px 0;font-size:12px}.page-wrapper{box-shadow:0 2px 8px #00000026;background:#fff}.signature-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px;min-height:60px}.signature-item{position:relative;border:2px solid #e0e0e0;border-radius:4px;padding:6px;cursor:pointer;background:#fff;transition:border-color .2s,box-shadow .2s}.signature-item:hover{border-color:#0078d4}.signature-item.selected{border-color:#0078d4;box-shadow:0 0 0 2px #0078d433}.signature-item img{width:100%;height:40px;object-fit:contain}.signature-item .delete-btn{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;background:#d32f2f;color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.signature-item:hover .delete-btn{opacity:1}.signature-item .delete-btn:hover{background:#b71c1c}.no-signatures{grid-column:span 2;text-align:center;color:#999;font-size:12px;padding:15px}.signatures-error{text-align:center;color:#d32f2f;font-size:11px;padding:12px;background:#ffebee;border-radius:4px}.signature-gallery-draggable{display:flex;flex-direction:column;gap:8px}.signature-item-draggable{position:relative;border:1px solid #e0e0e0;border-radius:3px;padding:2px;cursor:grab;background:#fff;transition:all .2s;display:flex;align-items:center;justify-content:center;min-height:25px}.signature-item-draggable:hover{border-color:#cd181e;background:#fff5f5;box-shadow:0 2px 8px #cd181e26}.signature-item-draggable:active{cursor:grabbing}.signature-item-draggable img{max-width:100%;max-height:40px;pointer-events:none}.signature-item-draggable .delete-btn{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;border:none;background:#d32f2f;color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.signature-item-draggable:hover .delete-btn{opacity:1}.signature-item-draggable .delete-btn:hover{background:#b71c1c}.font-selector{display:flex;flex-direction:column;gap:2px}.font-option{padding:3px 6px;border:1px solid #ddd;border-radius:2px;background:#fff;cursor:pointer;text-align:left;font-size:12px;transition:all .2s}.font-option:hover{border-color:#999;background:#f9f9f9}.font-option.selected{border-color:#cd181e;background:#fff5f5;box-shadow:0 0 0 1px #cd181e}