*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0;padding:0}body{color:#222;background:#f5f6f8;font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}.page-container{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:#fff;border-radius:16px;width:100%;max-width:420px;padding:30px;box-shadow:0 4px 20px #00000014}.login-card h1{text-align:center;margin-top:0;margin-bottom:8px}.subtitle{text-align:center;color:#666;margin-bottom:30px}label{margin-bottom:8px;font-weight:600;display:block}input,select{border:1px solid #ccc;border-radius:8px;outline:none;width:100%;margin-bottom:15px;padding:14px}input:focus,select:focus{border-color:#333}button{cursor:pointer;color:#fff;background:#222;border:none;border-radius:8px;width:100%;padding:14px;font-weight:600}button:disabled{opacity:.6;cursor:not-allowed}.secondary-button{color:#222;background:#e9eaec;margin-top:12px}.error-message{color:#b00020;background:#ffe8e8;border-radius:8px;margin-bottom:15px;padding:10px}.app-container{min-height:100vh}.app-header{background:#fff;border-bottom:1px solid #ddd;justify-content:space-between;align-items:center;padding:20px;display:flex}.app-header h1{margin:0;font-size:22px}.app-header p{color:#666;margin:5px 0 0}.online-status{font-size:13px;font-weight:600}.home-content{width:100%;max-width:600px;margin:0 auto;padding:20px}.info-card,.sync-card{background:#fff;border-radius:12px;margin-bottom:15px;padding:20px}.info-card h2{margin-top:0}.record-button{min-height:100px;margin-bottom:15px;font-size:20px}.sync-card{justify-content:space-between;align-items:center;display:flex}.sync-card div{flex-direction:column;gap:5px;display:flex}.sync-card span{font-size:24px;font-weight:700}.sync-card .secondary-button{width:auto;margin:0}.full-width{width:100%}.recording-card{max-width:480px}.timer-box{text-align:center;background:#f2f4f7;border-radius:10px;margin:15px 0;padding:18px;font-size:32px;font-weight:700}.status-text{color:#555;text-align:center;margin-bottom:18px}.recording-list{flex-direction:column;gap:16px;margin-bottom:20px;display:flex}.recording-item{background:#fafafa;border:1px solid #e1e3e8;border-radius:12px;padding:14px}.recording-item p,.recording-item small{color:#555;margin:6px 0}.recording-item audio{width:100%;margin-top:10px}.empty-state{text-align:center;color:#666;margin-bottom:18px}@media (width<=600px){.page-container{padding:15px}.login-card{padding:22px}.app-header{padding:15px}.app-header h1{font-size:18px}.home-content{padding:15px}.sync-card{flex-direction:column;align-items:stretch;gap:15px}.sync-card .secondary-button{width:100%}}.sync-modal-overlay{z-index:9999;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sync-modal{text-align:center;background:#fff;border-radius:12px;width:90%;max-width:400px;padding:24px;box-shadow:0 4px 20px #0000004d}.sync-modal-icon{margin-bottom:16px;font-size:48px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.sync-modal h2{color:#333;margin:0 0 16px;font-size:18px}.sync-progress-container{margin:20px 0}.sync-progress-bar{background:#e0e0e0;border-radius:4px;width:100%;height:8px;margin-bottom:12px;overflow:hidden}.sync-progress-fill{background:linear-gradient(90deg,#1a7f3d,#2ecc71);height:100%;transition:width .3s}.sync-progress-text{color:#666;margin:0;font-size:14px;font-weight:500}.sync-error-message{color:#856404;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;margin:12px 0;padding:12px;font-size:13px}.sync-status-text{color:#999;margin:12px 0 0;font-size:13px}