*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
#app{min-height:100vh}
#app-loader{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a855f7 100%);color:#fff;transition:opacity .3s,visibility .3s}
#app-loader.hide{opacity:0;visibility:hidden;pointer-events:none}
#app-loader .loader-icon{width:64px;height:64px;margin-bottom:1rem;animation:pulse 1.5s ease-in-out infinite}
#app-loader .loader-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem;letter-spacing:0}
#app-loader .loader-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin:1rem 0}
#app-loader .loader-text{font-size:.875rem;opacity:.9}
#app-loader .loader-offline{display:none;margin-top:1rem;padding:.75rem 1rem;background:rgba(0,0,0,.2);border-radius:.5rem;font-size:.8rem}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}
.offline #app-loader .loader-offline{display:block}
.offline #app-loader .loader-text{display:none}

@font-face {
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/courgette-400.woff2') format('woff2'),
       url('/fonts/courgette-400.woff') format('woff');
}

:root {
  --wedding-title-font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --wedding-script-font: 'Courgette', cursive;
}