/* QR Memories — Wedding App v4 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{min-height:100vh;min-height:100dvh}
body{font-family:var(--app-font),"Inter",-apple-system,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center}

#app-wrap{width:100%;max-width:480px;padding:40px 24px;text-align:center}

/* Logo */
.app-logo{width:80px;height:80px;border-radius:50%;object-fit:contain;margin:0 auto 20px;display:block;border:2px solid rgba(255,255,255,.2);box-shadow:0 4px 20px rgba(0,0,0,.15)}

/* Title */
.app-title{font-size:var(--app-title-size,32px);font-weight:800;color:var(--app-text);letter-spacing:-.02em;margin-bottom:12px;text-shadow:0 2px 16px rgba(0,0,0,.3);line-height:1.2}

/* Subtitle / welcome text */
.app-subtitle{font-size:var(--app-body-size,16px);color:var(--app-text);opacity:.85;margin-bottom:32px;line-height:1.7;white-space:pre-line}

/* Form wrapper must be full width in flex layouts */
.app-content form{width:100%}

/* All buttons — FULL WIDTH, use config colors and radius */
.app-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 28px;border-radius:var(--app-btn-radius,8px);font-size:var(--app-btn-size,16px);font-weight:700;font-family:var(--app-font),"Inter",sans-serif;text-decoration:none;cursor:pointer;transition:all .3s;border:none;width:100%;margin-bottom:12px;min-height:56px}
.app-btn i,.app-btn .fa-solid,.app-btn .fa-regular{font-style:normal;font-size:1.2em}

/* Primary button — hero CTA, slightly bigger */
.app-btn-primary{background:var(--app-primary);color:var(--app-text);box-shadow:0 6px 24px rgba(0,0,0,.2);padding:20px 28px;min-height:60px}
.app-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.3)}
.app-btn-primary:active{transform:translateY(0);box-shadow:0 4px 16px rgba(0,0,0,.2)}

/* Secondary button — uses secondary color */
.app-btn-secondary{background:var(--app-secondary);color:var(--app-text);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.app-btn-secondary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.app-btn-secondary:active{transform:translateY(0)}

/* Outline button — transparent with border */
.app-btn-outline{background:transparent;color:var(--app-text);border:1.5px dashed rgba(255,255,255,.3);opacity:.8;min-height:52px}
.app-btn-outline:hover{opacity:1;border-color:rgba(255,255,255,.5)}

/* Upload list */
#upload-list{list-style:none;margin-top:20px;text-align:left;width:100%}
#upload-list li{background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:var(--app-btn-radius,12px);padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;gap:12px;color:var(--app-text);font-size:14px;position:relative}
#upload-list li.working{opacity:.8}
#upload-list li p{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
#upload-list li p i{font-style:normal;font-size:12px;opacity:.6}
#upload-list li span{cursor:pointer;opacity:.5;transition:opacity .2s;font-size:18px;line-height:1}
#upload-list li span:hover{opacity:1}
#upload-list li span::after{content:"\2715"}
#upload-list li input[type="text"]{width:48px;height:48px}

/* Processing popup */
#processing-popup{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px}
#processing-popup p{color:#fff;font-size:16px;max-width:300px;text-align:center;line-height:1.6}
.popup-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--app-primary,#b76b8a);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Layout variants */
.app-content.layout-centered{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center}
.app-content.layout-top{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:48px;text-align:center}
.app-content.layout-split{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:85vh;padding-bottom:32px;text-align:center}

canvas{display:block}

@media(max-width:480px){
  #app-wrap{padding:32px 16px}
  .app-btn{padding:16px 20px}
  .app-btn-primary{padding:18px 24px}
}