/* theme.css
 * Shared base styles used on every page - variables, body, brand/logo
 * header, buttons, auth bar, footer. Previously duplicated verbatim in
 * a <style> block on all 13 pages; each page now keeps only its own
 * page-specific rules inline and links this file for the rest.
 */
:root { --pink:#ff6f91; --peach:#ffc371; --cyan:#7fdbda; --dusk:#2b1055; --cream:#fff5f0; }
body { font-family: -apple-system, Arial, sans-serif; background:linear-gradient(180deg, var(--dusk) 0%, var(--pink) 60%, var(--peach) 100%); background-attachment:fixed; color:var(--cream); text-align:center; padding:20px; margin:0; min-height:100vh; font-size:18px; line-height:1.6; }
.brand { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.logo-img { width:56px; height:56px; }
h1 { color:var(--peach); letter-spacing:1px; }
a { color: var(--cyan); }
.empty-note { color: rgba(255,245,240,0.7); }
.auth-bar { font-size: 16px; margin-top: 6px; }
.btn { display: inline-block; padding: 14px 26px; font-size: 19px; margin: 5px; cursor: pointer; border: none; border-radius: 6px; background: linear-gradient(135deg, var(--pink), var(--peach)); color: var(--dusk); font-weight: bold; text-decoration: none; }
.btn:hover { filter: brightness(1.1); }
.btn-sm { display: inline-block; padding: 8px 18px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background: linear-gradient(135deg, var(--pink), var(--peach)); color: var(--dusk); font-weight: bold; text-decoration: none; }
.btn-sm:hover { filter: brightness(1.1); }
.site-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,245,240,0.2); font-size: 15px; color: rgba(255,245,240,0.7); }
.site-footer a { color: var(--cyan); margin: 0 8px; }