:root{
  --kingdoms-radius: 20px;
  --kingdoms-radius-sm: 12px;
  --kingdoms-gap: 12px;
  --kingdoms-accent: #c1121f;
  --kingdoms-blue: #1877f2;
  --kingdoms-text: #222;
  --kingdoms-muted: #666;
}
.nav-group{ grid-column: 1 / -1; margin: 12px 0 0 0; font-size: 14px; opacity: 0.8; }
*{box-sizing:border-box}body{margin:0;background:#0a0a0a;color:#f5f0f0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding-bottom:110px}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;border-radius:12px;padding:12px 14px;background:#c1121f;color:#fff;font-weight:700}button.secondary{background:#222;border:1px solid #444;color:#fff}button.ghost{background:transparent;border:1px solid #666;color:#ddd}button:disabled{opacity:.45;cursor:not-allowed}input,select,textarea{width:100%;padding:11px;border-radius:10px;border:1px solid #444;background:#171717;color:#fff;margin:6px 0 12px}label{font-size:.9rem;color:#ddd}.topbar{position:sticky;top:0;z-index:20;background:#000;border-bottom:3px solid #c1121f;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}.topbar h1{font-size:1.05rem;margin:0}.rolebanner{padding:10px 14px;font-weight:800;text-align:center}body[data-role="Dominant"] .rolebanner{background:#c1121f;color:#fff}body[data-role="submissive"] .rolebanner{background:#3d0005;color:#ffd166;border:1px solid #ffd166}body[data-role="Dominant"] .topbar{border-bottom-color:#c1121f}body[data-role="submissive"] .topbar{border-bottom-color:#ffd166}.demobanner{background:#ffd166;color:#111;padding:9px 14px;text-align:center;font-weight:800}.wrap{max-width:680px;margin:0 auto;padding:14px}.card{background:#171717;border:1px solid #333;border-radius:16px;padding:16px;margin:12px 0}.card h2,.card h3{margin:0 0 8px}body[data-role="Dominant"] .card{border-color:#5a1016}body[data-role="submissive"] .card{border-color:#5a4a1a}.muted{color:#bbb}.small{font-size:.85rem}.pill{display:inline-block;background:#c1121f;color:#fff;border-radius:999px;padding:4px 10px;font-size:.8rem;margin:2px}.pill.gold{background:#ffd166;color:#111}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.daybtn{background:#222;color:#fff;border:1px solid #444;padding:12px 4px;border-radius:12px}.daybtn.approved{background:#1f7a3a;border-color:#2ea84b}.daybtn.awaiting{background:#c1121f}.daybtn.blocked{background:#333;color:#999;text-decoration:line-through}.daybtn.current{outline:3px solid #ffd166}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#000;border-top:2px solid #c1121f;display:flex;overflow-x:auto}.tabbar button{flex:1;background:transparent;color:#ddd;border-radius:0;white-space:nowrap;min-width:72px}.tabbar button.active{background:#c1121f;color:#fff}.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1}.hidden{display:none!important}.hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}.hearts span{position:absolute;bottom:-30px;font-size:22px;opacity:.25;animation:drift 12s linear infinite}.hearts span:nth-child(2){left:20%;animation-delay:3s}.hearts span:nth-child(3){left:55%;animation-delay:6s}.hearts span:nth-child(4){left:80%;animation-delay:9s}@keyframes drift{to{transform:translateY(-110vh) rotate(20deg)}}.warn{background:#3d0005;border:1px solid #c1121f;border-radius:12px;padding:12px;margin:12px 0}.ok{background:#123d22;border:1px solid #2ea84b;border-radius:12px;padding:12px;margin:12px 0}.countdown{font-size:2rem;font-weight:900;text-align:center;margin:8px 0}.private-note{background:#1a1200;border:1px solid #ffd166;border-radius:12px;padding:12px;margin:12px 0}@media(prefers-reduced-motion:reduce){.hearts span{animation:none!important}}

body[data-theme="light"]{background:#fdf6f0;color:#2b1a1a}
body[data-theme="light"] .topbar{background:#fff;border-bottom-color:#c1121f}
body[data-theme="light"] .card{background:#fff;border-color:#e8c9c9}
body[data-theme="light"] input,body[data-theme="light"] select,body[data-theme="light"] textarea{background:#fff;color:#222;border-color:#d9b8b8}
body[data-theme="light"] label{color:#5a3a3a}
body[data-theme="light"] .muted{color:#6b4a4a}
body[data-theme="light"] button.secondary{background:#f3e2e2;border-color:#d9a8a8;color:#7a1016}
body[data-theme="light"] button.ghost{border-color:#c99;color:#7a1016}
body[data-theme="light"] .tabbar{background:#fff;border-top-color:#c1121f}
body[data-theme="light"] .tabbar button{color:#5a3a3a}
body[data-theme="light"] .tabbar button.active{background:#c1121f;color:#fff}
body[data-theme="light"] .daybtn{background:#fff;color:#222;border-color:#d9b8b8}
body[data-theme="light"] .daybtn.blocked{background:#eee;color:#999}
body[data-theme="light"] .warn{background:#fff0f0;border-color:#c1121f;color:#5a1016}
body[data-theme="light"] .ok{background:#e8f5ec;border-color:#2ea84b;color:#123d22}
body[data-theme="light"] .private-note{background:#fff8e6;border-color:#d4af37;color:#5a3a00}

.profile-photo{width:170px;height:170px;object-fit:cover;border-radius:50%;border:3px solid #c1121f;display:block;margin:8px 0}
.profile-photo-small{width:40px;height:40px;object-fit:cover;border-radius:50%;border:2px solid #c1121f;flex:0 0 auto}

body[data-theme="rose"]{background:#fdeef2;color:#2b1a1a}
body[data-theme="rose"] .topbar{background:#fff;border-bottom:3px solid #c05a6e}
body[data-theme="rose"] .card{background:#fff;border-color:#f0c4cd}
body[data-theme="rose"] input,body[data-theme="rose"] select,body[data-theme="rose"] textarea{background:#fff;color:#222;border-color:#f0c4cd}
body[data-theme="rose"] label{color:#5a3a3a}
body[data-theme="rose"] .muted{color:#6b4a4a}
body[data-theme="rose"] button{background:#c05a6e}
body[data-theme="rose"] button.secondary{background:#fff;border-color:#f0c4cd;color:#333}
body[data-theme="rose"] button.ghost{border-color:#f0c4cd;color:#333}
body[data-theme="rose"] .tabbar{background:#fff;border-top:3px solid #c05a6e}
body[data-theme="rose"] .tabbar button{background:transparent;color:#5a3a3a}
body[data-theme="rose"] .tabbar button.active{background:#c05a6e;color:#fff}
body[data-theme="rose"] .daybtn{background:#fff;color:#222;border-color:#f0c4cd}
body[data-theme="rose"] .daybtn.blocked{background:#eee;color:#999}
body[data-theme="rose"] .warn{background:#fff;border-color:#c05a6e}
body[data-theme="rose"] .ok{background:#e8f5ec;border-color:#2ea84b}
body[data-theme="rose"] .private-note{background:#fff8e6;border-color:#d4af37}
body[data-theme="rose"] .profile-photo{border-color:#c05a6e}
body[data-theme="rose"] .profile-photo-small{border-color:#c05a6e}

body[data-theme="lavender"]{background:#f1eefb;color:#2b1a1a}
body[data-theme="lavender"] .topbar{background:#fff;border-bottom:3px solid #7a6bb5}
body[data-theme="lavender"] .card{background:#fff;border-color:#d5cdf0}
body[data-theme="lavender"] input,body[data-theme="lavender"] select,body[data-theme="lavender"] textarea{background:#fff;color:#222;border-color:#d5cdf0}
body[data-theme="lavender"] label{color:#5a3a3a}
body[data-theme="lavender"] .muted{color:#6b4a4a}
body[data-theme="lavender"] button{background:#7a6bb5}
body[data-theme="lavender"] button.secondary{background:#fff;border-color:#d5cdf0;color:#333}
body[data-theme="lavender"] button.ghost{border-color:#d5cdf0;color:#333}
body[data-theme="lavender"] .tabbar{background:#fff;border-top:3px solid #7a6bb5}
body[data-theme="lavender"] .tabbar button{background:transparent;color:#5a3a3a}
body[data-theme="lavender"] .tabbar button.active{background:#7a6bb5;color:#fff}
body[data-theme="lavender"] .daybtn{background:#fff;color:#222;border-color:#d5cdf0}
body[data-theme="lavender"] .daybtn.blocked{background:#eee;color:#999}
body[data-theme="lavender"] .warn{background:#fff;border-color:#7a6bb5}
body[data-theme="lavender"] .ok{background:#e8f5ec;border-color:#2ea84b}
body[data-theme="lavender"] .private-note{background:#fff8e6;border-color:#d4af37}
body[data-theme="lavender"] .profile-photo{border-color:#7a6bb5}
body[data-theme="lavender"] .profile-photo-small{border-color:#7a6bb5}

body[data-theme="mint"]{background:#eef7f0;color:#2b1a1a}
body[data-theme="mint"] .topbar{background:#fff;border-bottom:3px solid #3a9a7a}
body[data-theme="mint"] .card{background:#fff;border-color:#c2e6d3}
body[data-theme="mint"] input,body[data-theme="mint"] select,body[data-theme="mint"] textarea{background:#fff;color:#222;border-color:#c2e6d3}
body[data-theme="mint"] label{color:#5a3a3a}
body[data-theme="mint"] .muted{color:#6b4a4a}
body[data-theme="mint"] button{background:#3a9a7a}
body[data-theme="mint"] button.secondary{background:#fff;border-color:#c2e6d3;color:#333}
body[data-theme="mint"] button.ghost{border-color:#c2e6d3;color:#333}
body[data-theme="mint"] .tabbar{background:#fff;border-top:3px solid #3a9a7a}
body[data-theme="mint"] .tabbar button{background:transparent;color:#5a3a3a}
body[data-theme="mint"] .tabbar button.active{background:#3a9a7a;color:#fff}
body[data-theme="mint"] .daybtn{background:#fff;color:#222;border-color:#c2e6d3}
body[data-theme="mint"] .daybtn.blocked{background:#eee;color:#999}
body[data-theme="mint"] .warn{background:#fff;border-color:#3a9a7a}
body[data-theme="mint"] .ok{background:#e8f5ec;border-color:#2ea84b}
body[data-theme="mint"] .private-note{background:#fff8e6;border-color:#d4af37}
body[data-theme="mint"] .profile-photo{border-color:#3a9a7a}
body[data-theme="mint"] .profile-photo-small{border-color:#3a9a7a}

body[data-theme="peach"]{background:#fdf1e7;color:#2b1a1a}
body[data-theme="peach"] .topbar{background:#fff;border-bottom:3px solid #d67a4a}
body[data-theme="peach"] .card{background:#fff;border-color:#f2d0b8}
body[data-theme="peach"] input,body[data-theme="peach"] select,body[data-theme="peach"] textarea{background:#fff;color:#222;border-color:#f2d0b8}
body[data-theme="peach"] label{color:#5a3a3a}
body[data-theme="peach"] .muted{color:#6b4a4a}
body[data-theme="peach"] button{background:#d67a4a}
body[data-theme="peach"] button.secondary{background:#fff;border-color:#f2d0b8;color:#333}
body[data-theme="peach"] button.ghost{border-color:#f2d0b8;color:#333}
body[data-theme="peach"] .tabbar{background:#fff;border-top:3px solid #d67a4a}
body[data-theme="peach"] .tabbar button{background:transparent;color:#5a3a3a}
body[data-theme="peach"] .tabbar button.active{background:#d67a4a;color:#fff}
body[data-theme="peach"] .daybtn{background:#fff;color:#222;border-color:#f2d0b8}
body[data-theme="peach"] .daybtn.blocked{background:#eee;color:#999}
body[data-theme="peach"] .warn{background:#fff;border-color:#d67a4a}
body[data-theme="peach"] .ok{background:#e8f5ec;border-color:#2ea84b}
body[data-theme="peach"] .private-note{background:#fff8e6;border-color:#d4af37}
body[data-theme="peach"] .profile-photo{border-color:#d67a4a}
body[data-theme="peach"] .profile-photo-small{border-color:#d67a4a}

body[data-theme="sky"]{background:#eef5fb;color:#2b1a1a}
body[data-theme="sky"] .topbar{background:#fff;border-bottom:3px solid #4a8ab5}
body[data-theme="sky"] .card{background:#fff;border-color:#c2d9ea}
body[data-theme="sky"] input,body[data-theme="sky"] select,body[data-theme="sky"] textarea{background:#fff;color:#222;border-color:#c2d9ea}
body[data-theme="sky"] label{color:#5a3a3a}
body[data-theme="sky"] .muted{color:#6b4a4a}
body[data-theme="sky"] button{background:#4a8ab5}
body[data-theme="sky"] button.secondary{background:#fff;border-color:#c2d9ea;color:#333}
body[data-theme="sky"] button.ghost{border-color:#c2d9ea;color:#333}
body[data-theme="sky"] .tabbar{background:#fff;border-top:3px solid #4a8ab5}
body[data-theme="sky"] .tabbar button{background:transparent;color:#5a3a3a}
body[data-theme="sky"] .tabbar button.active{background:#4a8ab5;color:#fff}
body[data-theme="sky"] .daybtn{background:#fff;color:#222;border-color:#c2d9ea}
body[data-theme="sky"] .daybtn.blocked{background:#eee;color:#999}
body[data-theme="sky"] .warn{background:#fff;border-color:#4a8ab5}
body[data-theme="sky"] .ok{background:#e8f5ec;border-color:#2ea84b}
body[data-theme="sky"] .private-note{background:#fff8e6;border-color:#d4af37}
body[data-theme="sky"] .profile-photo{border-color:#4a8ab5}
body[data-theme="sky"] .profile-photo-small{border-color:#4a8ab5}

body[data-theme="butter"]{background:#fdf8e3;color:#2b1a1a}
body[data-theme="butter"] .topbar{background:#fff;border-bottom:3px solid #a88a1a}
body[data-theme="butter"] .card{background:#fff;border-color:#eadfa8}
body[data-theme="butter"] input,body[data-theme="butter"] select,body[data-theme="butter"] textarea{background:#fff;color:#222;border-color:#eadfa8}
body[data-theme="butter"] label{color:#5a3a3a}
body[data-theme="butter"] .muted{color:#6b4a4a}
body[data-theme="butter"] button{background:#a88a1a}
body[data-theme="butter"] button.secondary{background:#fff;border-color:#eadfa8;color:#333}
body[data-theme="butter"] button.ghost{border-color:#eadfa8;color:#333}
body[data-theme="butter"] .tabbar{background:#fff;border-top:3px solid #a88a1a}
body[data-theme="butter"] .tabbar button{background:transparent;color:#5a3a3a}
body[data-theme="butter"] .tabbar button.active{background:#a88a1a;color:#fff}
body[data-theme="butter"] .daybtn{background:#fff;color:#222;border-color:#eadfa8}
body[data-theme="butter"] .daybtn.blocked{background:#eee;color:#999}
body[data-theme="butter"] .warn{background:#fff;border-color:#a88a1a}
body[data-theme="butter"] .ok{background:#e8f5ec;border-color:#2ea84b}
body[data-theme="butter"] .private-note{background:#fff8e6;border-color:#d4af37}
body[data-theme="butter"] .profile-photo{border-color:#a88a1a}
body[data-theme="butter"] .profile-photo-small{border-color:#a88a1a}

.profile-photo-partner{width:80px;height:80px;object-fit:cover;border-radius:50%;border:2px solid #c1121f;display:block;margin:8px 0}

body[data-theme="facebook"]{background:#f0f2f5;color:#050505}
body[data-theme="facebook"] .topbar{background:#1877f2;border-bottom:0;box-shadow:0 1px 4px rgba(0,0,0,.2)}
body[data-theme="facebook"] .topbar h1{color:#fff}
body[data-theme="facebook"] .rolebanner{background:#fff;color:#050505;border-bottom:1px solid #ccd0d5}
body[data-theme="facebook"] .card{background:#fff;border:0;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.1)}
body[data-theme="facebook"] input,body[data-theme="facebook"] select,body[data-theme="facebook"] textarea{background:#f0f2f5;color:#050505;border:1px solid #ccd0d5;border-radius:6px}
body[data-theme="facebook"] label{color:#050505}
body[data-theme="facebook"] .muted{color:#65676b}
body[data-theme="facebook"] button{background:#1877f2;border-radius:6px}
body[data-theme="facebook"] button.secondary{background:#e4e6eb;border:0;color:#050505}
body[data-theme="facebook"] button.ghost{border:1px solid #ccd0d5;color:#050505}
body[data-theme="facebook"] .tabbar{background:#fff;border-top:1px solid #ccd0d5;box-shadow:0 -1px 4px rgba(0,0,0,.08)}
body[data-theme="facebook"] .tabbar button{background:transparent;color:#65676b}
body[data-theme="facebook"] .tabbar button.active{background:transparent;color:#1877f2;border-top:3px solid #1877f2}
body[data-theme="facebook"] .daybtn{background:#e4e6eb;color:#050505;border:0}
body[data-theme="facebook"] .daybtn.approved{background:#1877f2;color:#fff}
body[data-theme="facebook"] .daybtn.awaiting{background:#f02849;color:#fff}
body[data-theme="facebook"] .daybtn.blocked{background:#f0f2f5;color:#bcc0c4}
body[data-theme="facebook"] .daybtn.current{outline:3px solid #1877f2}
body[data-theme="facebook"] .warn{background:#fff;border:1px solid #f02849;color:#050505}
body[data-theme="facebook"] .ok{background:#e7f3ff;border:1px solid #1877f2;color:#050505}
body[data-theme="facebook"] .private-note{background:#fff8e6;border:1px solid #d4af37;color:#050505}
body[data-theme="facebook"] .profile-photo{border-color:#1877f2}
body[data-theme="facebook"] .profile-photo-small{border-color:#fff}
body[data-theme="facebook"] .profile-photo-partner{border-color:#1877f2}
body[data-theme="facebook"] .hearts{display:none}
body[data-theme="facebook"] .pill{background:#1877f2}
body[data-theme="facebook"] .pill.gold{background:#f5c33b;color:#050505}

.applock{position:fixed;inset:0;z-index:100;background:#f0f2f5;overflow-y:auto;padding:16px}
.applock-card{max-width:520px;margin:24px auto;background:#fff;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.15);padding:20px}
.applock-card h1{color:#1877f2;font-size:1.3rem;margin:0 0 8px}
body:not(.unlocked) .topbar,body:not(.unlocked) .tabbar,body:not(.unlocked) #pageNav,body:not(.unlocked) .rolebanner,body:not(.unlocked) .hearts{display:none!important}
body:not(.unlocked) .wrap{visibility:hidden}

body[data-theme="facebook"] .topbar{justify-content:space-between}
.fb-logo{font-size:1.4rem;font-weight:900;color:#fff;letter-spacing:-.5px}
.fb-top-right{display:flex;align-items:center;gap:10px}
.fb-bell{background:#e4e6eb!important;color:#050505!important;border-radius:50%!important;width:40px;height:40px;padding:0!important;position:relative;font-size:1.1rem}
.fb-badge{position:absolute;top:-4px;right:-4px;background:#f02849;color:#fff;border-radius:50%;font-size:.7rem;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.fb-top-name{color:#fff;font-weight:700;font-size:.95rem}
.fb-composer{display:flex;gap:10px;align-items:center}
.fb-composer img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.fb-composer input{border-radius:99px!important;background:#f0f2f5!important}
.fb-post-header{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.fb-post-header img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.fb-post-header .fb-name{font-weight:700}
.fb-post-header .fb-time{color:#65676b;font-size:.85rem}
.fb-actions{display:flex;border-top:1px solid #ccd0d5;margin-top:12px;padding-top:8px}
.fb-actions button{flex:1;background:transparent!important;color:#65676b!important;font-weight:600!important}
.fb-actions button:hover{background:#f0f2f5!important}
.profile-header{display:flex;gap:14px;align-items:center}
.profile-header img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid #1877f2}

.wrap{max-width:560px;margin:0 auto;padding:12px 16px 96px}
.card{border-radius:20px;padding:20px;margin:14px 0;box-shadow:0 2px 12px rgba(0,0,0,.06)}
button{border-radius:12px;padding:13px 16px;font-weight:600}
button.secondary,button.ghost{font-weight:600}
input,select,textarea{border-radius:12px;padding:12px 14px}
.topbar{height:60px;padding:0 16px}
.tabbar{height:68px;padding-bottom:env(safe-area-inset-bottom);align-items:stretch}
.tabbar button{flex:1;min-width:0;padding:6px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11px;line-height:1.2;white-space:normal;text-align:center}
.tabbar button .nav-icon{font-size:20px;line-height:1}
.grid{grid-template-columns:repeat(4,1fr);gap:10px}
@media(min-width:480px){.grid{grid-template-columns:repeat(5,1fr)}}
.daybtn{padding:14px 4px;border-radius:14px;font-size:.9rem}
.more-sheet{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:flex-end}
.more-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.more-panel{position:relative;background:#fff;border-radius:20px 20px 0 0;padding:16px 16px 84px;box-shadow:0 -4px 20px rgba(0,0,0,.15);max-height:70vh;overflow-y:auto}
.more-panel button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent!important;color:#050505!important;border-radius:12px;padding:14px 12px;font-size:1rem}
.more-panel button:hover{background:#f0f2f5!important}
.more-panel .more-title{font-weight:800;font-size:1.1rem;margin:4px 12px 12px}
body[data-theme="dark"] .more-panel{background:#171717}
body[data-theme="dark"] .more-panel button{color:#fff!important}
body[data-theme="dark"] .more-panel button:hover{background:#222!important}

.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0;text-align:center}
.quick-btn{background:transparent!important;border:0!important;padding:0!important;display:flex;flex-direction:column;align-items:center;gap:6px;color:inherit!important}
.quick-btn .circle{width:68px;height:68px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 6px 16px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9)}
.quick-btn:nth-child(1) .circle{background:#e7f3ff}
.quick-btn:nth-child(2) .circle{background:#fff0f0}
.quick-btn:nth-child(3) .circle{background:#eef7f0}
.quick-btn:nth-child(4) .circle{background:#fff8e6}
.quick-btn:nth-child(5) .circle{background:#f1eefb}
.quick-btn:nth-child(6) .circle{background:#fdf1e7}
.quick-btn span{font-size:.85rem;font-weight:600}
.curve-header{background:linear-gradient(135deg,#1877f2,#7a6bb5);color:#fff;border-radius:0 0 32px 32px;padding:24px 20px 28px;margin:-12px -16px 16px;text-align:left}
.curve-header h2{color:#fff;margin:0 0 6px}
.curve-header p{color:rgba(255,255,255,.85);margin:0}
.curve-header .progress-track{background:rgba(255,255,255,.3);height:10px;border-radius:99px;overflow:hidden;margin-top:12px}
.curve-header .progress-fill{background:#fff;height:10px;border-radius:99px}
.daybtn{border-radius:50%!important;aspect-ratio:1;width:100%;height:auto;padding:0!important;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.fab-btn{width:56px;height:56px;border-radius:50%!important;background:#1877f2!important;color:#fff!important;font-size:24px!important;margin-top:-28px!important;box-shadow:0 8px 20px rgba(24,119,242,.4);flex:0 0 auto!important}

.cal-nav{display:flex;align-items:center;gap:8px;margin:12px 0}
.cal-nav h3{flex:1;text-align:center;margin:0}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-weight:700;color:#65676b;font-size:.85rem;margin-bottom:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{background:#fff;border:1px solid #e4e6eb;border-radius:14px;padding:8px 2px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cal-cell .cal-date{font-weight:700}
.cal-cell .cal-day{font-size:.7rem;color:#65676b}
.cal-cell.journey{background:#e7f3ff;border-color:#1877f2}
.cal-cell.approved{background:#e7f3e7;border-color:#2ea84b}
.cal-cell.awaiting{background:#ffe7e7;border-color:#f02849}
.cal-cell.current{outline:3px solid #f5c33b}
.cal-cell.today{box-shadow:0 0 0 2px #1877f2 inset}
.cal-cell.blocked{color:#bcc0c4;text-decoration:line-through}
.cal-cell.empty{background:transparent;border:0}

/* ===== Modern & Dynamic UI: bold gradients, glass chrome, layered card shadows ===== */
body{background:linear-gradient(180deg,#2a0a0e 0%,#0a0a0a 420px),#0a0a0a}
.topbar{background:linear-gradient(135deg,rgba(224,30,55,.95),rgba(122,16,22,.95));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:0;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.topbar h1{color:#fff}
.card{background:rgba(23,23,23,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 6px rgba(0,0,0,.35),0 16px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
button{background:linear-gradient(135deg,#e01e37,#7a1016);box-shadow:0 8px 20px rgba(224,30,55,.35)}
.tabbar{background:rgba(0,0,0,.68);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
.tabbar button.active{background:transparent;color:#ff6b7a;box-shadow:inset 0 3px 0 #e01e37}
.more-panel{background:rgba(23,23,23,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -12px 32px rgba(0,0,0,.4)}
.fab-btn{background:linear-gradient(135deg,#e01e37,#7a1016)!important;box-shadow:0 12px 26px rgba(224,30,55,.5)!important}
.curve-header{background:linear-gradient(120deg,#e01e37,#7a1016,#c1121f);background-size:220% 220%;animation:modernShift 14s ease-in-out infinite alternate;box-shadow:0 14px 30px rgba(0,0,0,.35)}
@keyframes modernShift{from{background-position:0% 50%}to{background-position:100% 50%}}
.daybtn{box-shadow:0 2px 8px rgba(0,0,0,.3)}
.applock{background:linear-gradient(160deg,#3d0a12,#0a0a0a)}
.applock-card{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 48px rgba(0,0,0,.5)}
.applock-card h1{color:#c1121f}
@media(prefers-reduced-motion:reduce){.curve-header{animation:none!important}}
body[data-theme="facebook"]{background:linear-gradient(180deg,#dbe9fd 0%,#f0f2f5 420px),#f0f2f5}
body[data-theme="facebook"] .topbar{background:linear-gradient(135deg,rgba(24,119,242,.95),rgba(122,107,181,.95));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:0;box-shadow:0 8px 24px rgba(24,119,242,.35)}
body[data-theme="facebook"] .card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 32px rgba(24,119,242,.12)}
body[data-theme="facebook"] button{background:linear-gradient(135deg,#1877f2,#7a6bb5);box-shadow:0 8px 20px rgba(24,119,242,.35)}
body[data-theme="facebook"] .tabbar{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
body[data-theme="facebook"] .tabbar button.active{background:transparent;color:#1877f2;box-shadow:inset 0 3px 0 #1877f2}
body[data-theme="facebook"] .more-panel{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -12px 32px rgba(0,0,0,.15)}
body[data-theme="facebook"] .fab-btn{background:linear-gradient(135deg,#1877f2,#7a6bb5)!important;box-shadow:0 12px 26px rgba(24,119,242,.45)!important}
body[data-theme="facebook"] .curve-header{background:linear-gradient(120deg,#1877f2,#7a6bb5,#1877f2);background-size:220% 220%;animation:modernShift 14s ease-in-out infinite alternate;box-shadow:0 14px 30px rgba(24,119,242,.3)}
body[data-theme="facebook"] .applock{background:linear-gradient(160deg,#1877f2,#7a6bb5)}
body[data-theme="facebook"] .applock-card{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 48px rgba(24,119,242,.35)}
body[data-theme="light"]{background:linear-gradient(180deg,#fdeef0 0%,#fdf6f0 420px),#fdf6f0}
body[data-theme="light"] .topbar{background:linear-gradient(135deg,rgba(193,18,31,.95),rgba(168,15,30,.95));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:0;box-shadow:0 8px 24px rgba(193,18,31,.3)}
body[data-theme="light"] .topbar h1{color:#fff}
body[data-theme="light"] .card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 32px rgba(193,18,31,.1)}
body[data-theme="light"] button{background:linear-gradient(135deg,#c1121f,#a80f1e);box-shadow:0 8px 20px rgba(193,18,31,.3)}
body[data-theme="light"] .tabbar{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
body[data-theme="light"] .tabbar button.active{background:transparent;color:#c1121f;box-shadow:inset 0 3px 0 #c1121f}
body[data-theme="light"] .more-panel{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -12px 32px rgba(0,0,0,.15)}
body[data-theme="light"] .fab-btn{background:linear-gradient(135deg,#c1121f,#a80f1e)!important;box-shadow:0 12px 26px rgba(193,18,31,.4)!important}
body[data-theme="light"] .curve-header{background:linear-gradient(120deg,#c1121f,#a80f1e,#e01e37);background-size:220% 220%;animation:modernShift 14s ease-in-out infinite alternate;box-shadow:0 14px 30px rgba(193,18,31,.3)}
body[data-theme="light"] .applock{background:linear-gradient(160deg,#c1121f,#7a1016)}
body[data-theme="light"] .applock-card{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 48px rgba(193,18,31,.3)}
body[data-theme="rose"]{background:linear-gradient(180deg,#f9dbe2 0%,#fdeef2 420px),#fdeef2}
body[data-theme="rose"] .topbar{background:linear-gradient(135deg,rgba(192,90,110,.95),rgba(168,58,82,.95));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:0;box-shadow:0 8px 24px rgba(192,90,110,.3)}
body[data-theme="rose"] .topbar h1{color:#fff}
body[data-theme="rose"] .card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 32px rgba(192,90,110,.12)}
body[data-theme="rose"] button{background:linear-gradient(135deg,#c05a6e,#a83a52);box-shadow:0 8px 20px rgba(192,90,110,.3)}
body[data-theme="rose"] .tabbar{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
body[data-theme="rose"] .tabbar button.active{background:transparent;color:#c05a6e;box-shadow:inset 0 3px 0 #c05a6e}
body[data-theme="rose"] .more-panel{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -12px 32px rgba(0,0,0,.15)}
body[data-theme="rose"] .fab-btn{background:linear-gradient(135deg,#c05a6e,#a83a52)!important;box-shadow:0 12px 26px rgba(192,90,110,.4)!important}
body[data-theme="rose"] .curve-header{background:linear-gradient(120deg,#c05a6e,#a83a52,#c05a6e);background-size:220% 220%;animation:modernShift 14s ease-in-out infinite alternate;box-shadow:0 14px 30px rgba(192,90,110,.3)}
body[data-theme="rose"] .applock{background:linear-gradient(160deg,#c05a6e,#a83a52)}
body[data-theme="rose"] .applock-card{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 48px rgba(192,90,110,.3)}
body[data-theme="rose"] .applock-card h1{color:#c05a6e}
body[data-theme="lavender"]{background:linear-gradient(180deg,#e9e5f8 0%,#f1eefb 420px),#f1eefb}
body[data-theme="lavender"] .topbar{background:linear-gradient(135deg,rgba(122,107,181,.95),rgba(106,90,168,.95));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:0;box-shadow:0 8px 24px rgba(122,107,181,.3)}
body[data-theme="lavender"] .topbar h1{color:#fff}
body[data-theme="lavender"] .card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 32px rgba(122,107,181,.12)}
body[data-theme="lavender"] button{background:linear-gradient(135deg,#7a6bb5,#6a5aa8);box-shadow:0 8px 20px rgba(122,107,181,.3)}
body[data-theme="lavender"] .tabbar{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
body[data-theme="lavender"] .tabbar button.active{background:transparent;color:#7a6bb5;box-shadow:inset 0 3px 0 #7a6bb5}
body[data-theme="lavender"] .more-panel{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -12px 32px rgba(0,0,0,.15)}
body[data-theme="lavender"] .fab-btn{background:linear-gradient(135deg,#7a6bb5,#6a5aa8)!important;box-shadow:0 12px 26px rgba(122,107,181,.4)!important}
body[data-theme="lavender"] .curve-header{background:linear-gradient(120deg,#7a6bb5,#6a5aa8,#7a6bb5);background-size:220% 220%;animation:modernShift 14s ease-in-out infinite alternate;box-shadow:0 14px 30px rgba(122,107,181,.3)}
body[data-theme="lavender"] .applock{background:linear-gradient(160deg,#7a6bb5,#6a5aa8)}
body[data-theme="lavender"] .applock-card{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 48px rgba(122,107,181,.3)}
body[data-theme="lavender"] .applock-card h1{color:#7a6bb5}
body[data-theme="mint"]{background:linear-gradient(180deg,#ddf0e6 0%,#eef7f0 420px),#eef7f0}
body[data-theme="mint"] .topbar{background:linear-gradient(135deg,rgba(58,154,122,.95),rgba(46,125,98,.95));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:0;box-shadow:0 8px 24px rgba(58,154,122,.3)}
body[data-theme="mint"] .topbar h1{color:#fff}
body[data-theme="mint"] .card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 32px rgba(58,154,122,.12)}
body[data-theme="mint"] button{background:linear-gradient(135deg,#3a9a7a,#2e7d62);box-shadow:0 8px 20px rgba(58,154,122,.3)}
body[data-theme="mint"] .tabbar{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
body[data-theme="mint"] .tabbar button.active{background:transparent;color:#3a9a7a;box-shadow:inset 0 3px 0 #3a9a7a}
body[data-theme="mint"] .more-panel{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -12px 32px rgba(0,0,0,.15)}
body[data-theme="mint"] .fab-btn{background:linear-gradient(135deg,#3a9a7a,#2e7d62)!important;box-shadow:0 12px 26px rgba(58,154,122,.4)!important}
body[data-theme="mint"] .curve-header{background:linear-gradient(120deg,#3a9a7a,#2e7d62,#3a9a7a);background-size:220% 220%;animation:modernShift 14s ease-in-out infinite alternate;box-shadow:0 14px 30px rgba(58,154,122,.3)}
body[data-theme="mint"] .applock{background:linear-gradient(160deg,#3a9a7a,#2e7d62)}
body[data-theme="mint"] .applock-card{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 48px rgba(58,154,122,.3)}
body[data-theme="mint"] .applock-card h1{color:#3a9a7a}
body[data-theme="peach"]{background:linear-gradient(180deg,#fae3d2 0%,#fdf1e7 420px),#fdf1e7}
body[data-theme="peach"] .topbar{background:linear-gradient(135deg,rgba(214,122,74,.95),rgba(184,90,46,.95));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:0;box-shadow:0 8px 24px rgba(214,122,74,.3)}
body[data-theme="peach"] .topbar h1{color:#fff}
body[data-theme="peach"] .card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 32px rgba(214,122,74,.12)}
body[data-theme="peach"] button{background:linear-gradient(135deg,#d67a4a,#b85a2e);box-shadow:0 8px 20px rgba(214,122,74,.3)}
body[data-theme="peach"] .tabbar{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
body[data-theme="peach"] .tabbar button.active{background:transparent;color:#d67a4a;box-shadow:inset 0 3px 0 #d67a4a}
body[data-theme="peach"] .more-panel{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -12px 32px rgba(0,0,0,.15)}
body[data-theme="peach"] .fab-btn{background:linear-gradient(135deg,#d67a4a,#b85a2e)!important;box-shadow:0 12px 26px rgba(214,122,74,.4)!important}
body[data-theme="peach"] .curve-header{background:linear-gradient(120deg,#d67a4a,#b85a2e,#d67a4a);background-size:220% 220%;animation:modernShift 14s ease-in-out infinite alternate;box-shadow:0 14px 30px rgba(214,122,74,.3)}
body[data-theme="peach"] .applock{background:linear-gradient(160deg,#d67a4a,#b85a2e)}
body[data-theme="peach"] .applock-card{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 48px rgba(214,122,74,.3)}
body[data-theme="peach"] .applock-card h1{color:#d67a4a}
body[data-theme="sky"]{background:linear-gradient(180deg,#ddebf5 0%,#eef5fb 420px),#eef5fb}
body[data-theme="sky"] .topbar{background:linear-gradient(135deg,rgba(74,138,181,.95),rgba(53,112,156,.95));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:0;box-shadow:0 8px 24px rgba(74,138,181,.3)}
body[data-theme="sky"] .topbar h1{color:#fff}
body[data-theme="sky"] .card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 32px rgba(74,138,181,.12)}
body[data-theme="sky"] button{background:linear-gradient(135deg,#4a8ab5,#35709c);box-shadow:0 8px 20px rgba(74,138,181,.3)}
body[data-theme="sky"] .tabbar{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
body[data-theme="sky"] .tabbar button.active{background:transparent;color:#4a8ab5;box-shadow:inset 0 3px 0 #4a8ab5}
body[data-theme="sky"] .more-panel{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -12px 32px rgba(0,0,0,.15)}
body[data-theme="sky"] .fab-btn{background:linear-gradient(135deg,#4a8ab5,#35709c)!important;box-shadow:0 12px 26px rgba(74,138,181,.4)!important}
body[data-theme="sky"] .curve-header{background:linear-gradient(120deg,#4a8ab5,#35709c,#4a8ab5);background-size:220% 220%;animation:modernShift 14s ease-in-out infinite alternate;box-shadow:0 14px 30px rgba(74,138,181,.3)}
body[data-theme="sky"] .applock{background:linear-gradient(160deg,#4a8ab5,#35709c)}
body[data-theme="sky"] .applock-card{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 48px rgba(74,138,181,.3)}
body[data-theme="sky"] .applock-card h1{color:#4a8ab5}
body[data-theme="butter"]{background:linear-gradient(180deg,#f6eec6 0%,#fdf8e3 420px),#fdf8e3}
body[data-theme="butter"] .topbar{background:linear-gradient(135deg,rgba(168,138,26,.95),rgba(138,109,16,.95));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:0;box-shadow:0 8px 24px rgba(168,138,26,.3)}
body[data-theme="butter"] .topbar h1{color:#fff}
body[data-theme="butter"] .card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 32px rgba(168,138,26,.12)}
body[data-theme="butter"] button{background:linear-gradient(135deg,#a88a1a,#8a6d10);box-shadow:0 8px 20px rgba(168,138,26,.3)}
body[data-theme="butter"] .tabbar{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
body[data-theme="butter"] .tabbar button.active{background:transparent;color:#a88a1a;box-shadow:inset 0 3px 0 #a88a1a}
body[data-theme="butter"] .more-panel{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -12px 32px rgba(0,0,0,.15)}
body[data-theme="butter"] .fab-btn{background:linear-gradient(135deg,#a88a1a,#8a6d10)!important;box-shadow:0 12px 26px rgba(168,138,26,.4)!important}
body[data-theme="butter"] .curve-header{background:linear-gradient(120deg,#a88a1a,#8a6d10,#a88a1a);background-size:220% 220%;animation:modernShift 14s ease-in-out infinite alternate;box-shadow:0 14px 30px rgba(168,138,26,.3)}
body[data-theme="butter"] .applock{background:linear-gradient(160deg,#a88a1a,#8a6d10)}
body[data-theme="butter"] .applock-card{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 48px rgba(168,138,26,.3)}
body[data-theme="butter"] .applock-card h1{color:#a88a1a}
body[data-theme="dark"] .more-panel{background:rgba(23,23,23,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -12px 32px rgba(0,0,0,.4)}

/* ===== Menu bar improvements: floating gradient active pills, clearer active state ===== */
.tabbar{padding:6px 8px env(safe-area-inset-bottom)}
.tabbar button:not(.fab-btn){margin:2px 4px;border-radius:18px;transition:transform .15s ease,background .2s ease,box-shadow .2s ease}
.tabbar button:not(.fab-btn):active{transform:scale(.96)}
.tabbar button:not(.fab-btn).active{background:linear-gradient(135deg,#e01e37,#7a1016);color:#fff;font-weight:800;box-shadow:0 8px 18px rgba(224,30,55,.4)}
.tabbar button:not(.fab-btn).active .nav-icon{transform:scale(1.18);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.tabbar button:not(.fab-btn) .nav-icon{transition:transform .2s ease}
body[data-theme="facebook"] .tabbar button:not(.fab-btn).active{background:linear-gradient(135deg,#1877f2,#7a6bb5);box-shadow:0 8px 18px rgba(24,119,242,.4)}
body[data-theme="light"] .tabbar button:not(.fab-btn).active{background:linear-gradient(135deg,#c1121f,#a80f1e);box-shadow:0 8px 18px rgba(193,18,31,.4)}
body[data-theme="rose"] .tabbar button:not(.fab-btn).active{background:linear-gradient(135deg,#c05a6e,#a83a52);box-shadow:0 8px 18px rgba(192,90,110,.4)}
body[data-theme="lavender"] .tabbar button:not(.fab-btn).active{background:linear-gradient(135deg,#7a6bb5,#6a5aa8);box-shadow:0 8px 18px rgba(122,107,181,.4)}
body[data-theme="mint"] .tabbar button:not(.fab-btn).active{background:linear-gradient(135deg,#3a9a7a,#2e7d62);box-shadow:0 8px 18px rgba(58,154,122,.4)}
body[data-theme="peach"] .tabbar button:not(.fab-btn).active{background:linear-gradient(135deg,#d67a4a,#b85a2e);box-shadow:0 8px 18px rgba(214,122,74,.4)}
body[data-theme="sky"] .tabbar button:not(.fab-btn).active{background:linear-gradient(135deg,#4a8ab5,#35709c);box-shadow:0 8px 18px rgba(74,138,181,.4)}
body[data-theme="butter"] .tabbar button:not(.fab-btn).active{background:linear-gradient(135deg,#a88a1a,#8a6d10);box-shadow:0 8px 18px rgba(168,138,26,.4)}

/* ===== Minimal Pastel theme: flat, single sans-serif, clear hierarchy ===== */
body[data-theme="minimal"]{background:#f6f4f1;color:#2d2a26;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body[data-theme="minimal"] .topbar{background:#fff;border-bottom:1px solid #e5e1dc;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-theme="minimal"] .topbar h1{color:#2d2a26}
body[data-theme="minimal"] .fb-top-name{color:#2d2a26}
body[data-theme="minimal"] .fb-bell{background:#f0ede8!important;color:#2d2a26!important}
body[data-theme="minimal"][data-role="Dominant"] .rolebanner{background:#e8eef5;color:#3d5a80}
body[data-theme="minimal"][data-role="submissive"] .rolebanner{background:#f7ecd9;color:#8a6d3b;border:0}
body[data-theme="minimal"] .card{background:#fff;border:1px solid #e5e1dc;border-radius:12px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-theme="minimal"] .muted{color:#8a837c}
body[data-theme="minimal"] label{color:#6b655c}
body[data-theme="minimal"] input,body[data-theme="minimal"] select,body[data-theme="minimal"] textarea{background:#fff;color:#2d2a26;border:1px solid #e0dbd3;border-radius:10px}
body[data-theme="minimal"] button{background:#5b7fa6;color:#fff;border-radius:10px;box-shadow:none;font-weight:600}
body[data-theme="minimal"] button.secondary{background:#f0ede8;border:1px solid #e0dbd3;color:#2d2a26}
body[data-theme="minimal"] button.ghost{background:transparent;border:1px solid #d8d2c9;color:#2d2a26}
body[data-theme="minimal"] .pill{background:#e8eef5;color:#3d5a80}
body[data-theme="minimal"] .pill.gold{background:#f7ecd9;color:#8a6d3b}
body[data-theme="minimal"] .daybtn{background:#fff;color:#2d2a26;border:1px solid #e5e1dc;border-radius:12px!important;box-shadow:none}
body[data-theme="minimal"] .daybtn.approved{background:#d9e8d0;border-color:#b9d2ae;color:#3a5a34}
body[data-theme="minimal"] .daybtn.awaiting{background:#f6d9d9;border-color:#e8bcbc;color:#8a3a3a}
body[data-theme="minimal"] .daybtn.blocked{background:#f0efec;color:#b0aa9f}
body[data-theme="minimal"] .daybtn.current{outline:2px solid #5b7fa6}
body[data-theme="minimal"] .tabbar{background:#fff;border-top:1px solid #e5e1dc;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 4px env(safe-area-inset-bottom)}
body[data-theme="minimal"] .tabbar button{color:#8a837c}
body[data-theme="minimal"] .tabbar button:not(.fab-btn){margin:6px 4px;border-radius:12px;transition:background .15s ease}
body[data-theme="minimal"] .tabbar button:not(.fab-btn):active{transform:none}
body[data-theme="minimal"] .tabbar button:not(.fab-btn).active{background:#e8eef5;color:#5b7fa6;font-weight:700;box-shadow:none}
body[data-theme="minimal"] .tabbar button:not(.fab-btn).active .nav-icon{transform:none;filter:none}
body[data-theme="minimal"] .tabbar button:not(.fab-btn) .nav-icon{transition:none}
body[data-theme="minimal"] .fab-btn{background:#5b7fa6!important;box-shadow:none!important}
body[data-theme="minimal"] .more-panel{background:#fff;border-radius:16px 16px 0 0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-theme="minimal"] .more-panel button{color:#2d2a26!important}
body[data-theme="minimal"] .more-panel button:hover{background:#f6f4f1!important}
body[data-theme="minimal"] .curve-header{background:#e8eef5;border-radius:0 0 16px 16px;box-shadow:none;animation:none}
body[data-theme="minimal"] .curve-header h2{color:#3d5a80}
body[data-theme="minimal"] .curve-header p{color:#6b7d94}
body[data-theme="minimal"] .curve-header .progress-track{background:#d5dee8}
body[data-theme="minimal"] .curve-header .progress-fill{background:#5b7fa6}
body[data-theme="minimal"] .quick-btn .circle{box-shadow:none;border:1px solid #e5e1dc}
body[data-theme="minimal"] .cal-cell{background:#fff;border:1px solid #e8e4de;border-radius:12px}
body[data-theme="minimal"] .cal-cell.journey{background:#e8eef5;border-color:#b9cbe0}
body[data-theme="minimal"] .cal-cell.approved{background:#e6f0e2;border-color:#b9d2ae}
body[data-theme="minimal"] .cal-cell.awaiting{background:#fbeeee;border-color:#e8bcbc}
body[data-theme="minimal"] .cal-cell.current{outline:2px solid #5b7fa6}
body[data-theme="minimal"] .cal-cell.today{box-shadow:none;border-color:#5b7fa6}
body[data-theme="minimal"] .warn{background:#fbeeee;border:1px solid #e8bcbc;color:#8a3a3a}
body[data-theme="minimal"] .ok{background:#e6f0e2;border:1px solid #b9d2ae;color:#3a5a34}
body[data-theme="minimal"] .private-note{background:#f7ecd9;border:1px solid #e8d9b0;color:#8a6d3b}
body[data-theme="minimal"] .profile-photo{border-color:#5b7fa6}
body[data-theme="minimal"] .profile-photo-small{border-color:#5b7fa6}
body[data-theme="minimal"] .profile-photo-partner{border-color:#5b7fa6}
body[data-theme="minimal"] .profile-header img{border-color:#5b7fa6}
body[data-theme="minimal"] .hearts{display:none}
body[data-theme="minimal"] .fb-composer input{background:#f6f4f1!important}
body[data-theme="minimal"] .fb-actions button{color:#8a837c!important}
body[data-theme="minimal"] .fb-actions button:hover{background:#f6f4f1!important}
body[data-theme="minimal"] .fb-post-header .fb-time{color:#8a837c}
body[data-theme="minimal"] .applock{background:#f6f4f1}
body[data-theme="minimal"] .applock-card{background:#fff;border:1px solid #e5e1dc;border-radius:16px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-theme="minimal"] .applock-card h1{color:#5b7fa6}

/* ===== Card navigation: no bottom bar, Home is a card dashboard ===== */
body{padding-bottom:24px}
.wrap{padding:12px 16px 24px}
.fb-logo{cursor:pointer}
.nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.nav-card{margin:0;padding:16px;color:inherit;text-align:left;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.nav-card:active{transform:scale(.97)}
.nav-card .nav-icon{font-size:1.6rem;line-height:1}
.nav-card .nav-title{font-weight:700;font-size:1rem}
.nav-card.nav-featured{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
.nav-card .nav-stack{display:flex;flex-direction:column;gap:2px}

/* Bottom navigation menu: fixed bar on every page except Home and the lock screen. */
#pageNav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);border-top:2px solid #c1121f;padding-bottom:env(safe-area-inset-bottom)}
#pageNav button{flex:1;background:transparent;color:#ddd;border-radius:0;padding:8px 2px 10px;font-size:.68rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px}
#pageNav button .nav-ic{font-size:1.15rem;line-height:1}
#pageNav button.active{background:#c1121f;color:#fff}
body[data-theme="facebook"] #pageNav{background:rgba(24,119,242,.96);border-top:0}
body[data-theme="facebook"] #pageNav button{color:#dbe7ff}
body[data-theme="facebook"] #pageNav button.active{background:#0d5fc4;color:#fff}
body.pagenav-on{padding-bottom:84px}

/* Social-style profile page: hero header + My/Partner tabs. */
.profile-hero-top{display:flex;gap:14px;align-items:center}
.profile-tabs{display:flex;gap:8px;margin-top:12px}
.profile-tabs button{flex:1}

/* Topbar partner shortcut. */
.topbar-icon-btn{background:#e4e6eb!important;border:0!important;padding:0!important;width:40px;height:40px;border-radius:50%!important;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.topbar-icon-btn img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.topbar-icon-btn span{font-size:1.3rem;line-height:1}
body[data-theme="minimal"] .topbar-icon-btn{background:#f0ede8!important}
#topbarPhoto{cursor:pointer}
#profileHeaderPhoto2{cursor:pointer}
/* Social profile: cover banner + stats. */
.profile-cover{height:90px;margin:-16px -16px 0;border-radius:16px 16px 0 0;background:linear-gradient(135deg,#c1121f,#7a1016)}
body[data-theme="facebook"] .profile-cover{background:linear-gradient(135deg,#1877f2,#7a6bb5)}
body[data-theme="minimal"] .profile-cover{background:#5b7fa6}
.profile-hero-top{margin-top:-56px;position:relative}
.profile-stats{display:flex;gap:8px;margin-top:14px}
.profile-stats div{flex:1;text-align:center;padding:8px 4px;background:#222;border:1px solid #444;border-radius:12px}
.profile-stats strong{display:block;font-size:1.1rem}
.profile-stats span{font-size:.75rem;color:#bbb}
/* Post cards with avatars. */
.post-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.post-head strong{display:block}
.post-avatar{width:40px;height:40px;border-radius:50%;background:#c1121f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}
.post-avatar-img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* Modern chat: bubbles, day dividers, sticky pill composer. */
.chat-list{max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px}
.chat-day{text-align:center;font-size:.75rem;color:#bbb;margin:8px 0 2px}
.chat-row{display:flex;gap:8px;align-items:flex-end;animation:msgIn .25s ease}
.chat-row.mine{justify-content:flex-end}
.chat-msg{max-width:75%;padding:10px 14px;border-radius:18px;line-height:1.4}
.chat-msg p{margin:0;white-space:pre-wrap;word-break:break-word}
.chat-row.theirs .chat-msg{background:#2a2a2a;color:#fff;border-bottom-left-radius:6px}
.chat-row.mine .chat-msg{background:linear-gradient(135deg,#c1121f,#7a1016);color:#fff;border-bottom-right-radius:6px}
.chat-time{display:block;font-size:.7rem;opacity:.7;margin-top:4px;text-align:right}
.chat-row.theirs .chat-time{text-align:left}
.chat-avatar{width:32px;height:32px;border-radius:50%;background:#c1121f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}
.chat-avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.chat-composer{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;background:#171717;border:1px solid #333;border-radius:99px;padding:6px 6px 6px 16px;margin-top:12px;z-index:5}
.chat-composer textarea{margin:0!important;border:0!important;background:transparent!important;resize:none;flex:1;padding:8px 0!important}
.chat-send{width:44px;height:44px;border-radius:50%!important;flex:0 0 auto;padding:0!important;font-size:1.1rem}
body[data-theme="facebook"] .chat-row.mine .chat-msg{background:linear-gradient(135deg,#1877f2,#0d5fc4)}
body[data-theme="minimal"] .chat-row.mine .chat-msg{background:#5b7fa6}
body[data-theme="minimal"] .chat-row.theirs .chat-msg{background:#fff;color:#222;border:1px solid #e5e1dc}
body[data-theme="light"] .chat-row.theirs .chat-msg{background:#f0f2f5;color:#222}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.chat-row{animation:none!important}}

/* Celebration burst: hearts and roses fly out and fade when a dare or decision completes. */
.burst-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:100}
.burst-bit{position:absolute;transform:translate(-50%,-50%);animation:burstFly 1.2s ease-out forwards}
@keyframes burstFly{0%{opacity:1;transform:translate(-50%,-50%) scale(.6) rotate(0deg)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15) rotate(var(--rot))}}
@media(prefers-reduced-motion:reduce){.burst-bit{animation:none!important}}

/* Topbar alert badges live on each person's profile image. */
.topbar-icon-btn{position:relative}
.topbar-pic-wrap{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.topbar-my-fallback{width:40px;height:40px;border-radius:50%;background:#e4e6eb;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:0 0 auto}
.topbar-badge{position:absolute;top:-4px;right:-6px;background:#c1121f;color:#fff;border-radius:999px;min-width:18px;height:18px;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid #000;pointer-events:none;z-index:2}

/* ===== Readability fix: containers that were dark in every theme now match the text-box color ===== */
/* Profile stat boxes + chat composer pill: light themes get the light text-box background, so dark text shows. */
body[data-theme="facebook"] .profile-stats div{background:#f0f2f5;border-color:#ccd0d5}
body[data-theme="facebook"] .profile-stats span{color:#65676b}
body[data-theme="facebook"] .chat-composer{background:#f0f2f5;border-color:#ccd0d5}
body[data-theme="facebook"] .chat-day{color:#65676b}
body[data-theme="light"] .profile-stats div,body[data-theme="rose"] .profile-stats div,body[data-theme="lavender"] .profile-stats div,body[data-theme="mint"] .profile-stats div,body[data-theme="peach"] .profile-stats div,body[data-theme="sky"] .profile-stats div,body[data-theme="butter"] .profile-stats div{background:#fff}
body[data-theme="light"] .profile-stats div{border-color:#d9b8b8}
body[data-theme="rose"] .profile-stats div{border-color:#f0c4cd}
body[data-theme="lavender"] .profile-stats div{border-color:#d5cdf0}
body[data-theme="mint"] .profile-stats div{border-color:#c2e6d3}
body[data-theme="peach"] .profile-stats div{border-color:#f2d0b8}
body[data-theme="sky"] .profile-stats div{border-color:#c2d9ea}
body[data-theme="butter"] .profile-stats div{border-color:#eadfa8}
body[data-theme="light"] .profile-stats span,body[data-theme="rose"] .profile-stats span,body[data-theme="lavender"] .profile-stats span,body[data-theme="mint"] .profile-stats span,body[data-theme="peach"] .profile-stats span,body[data-theme="sky"] .profile-stats span,body[data-theme="butter"] .profile-stats span{color:#6b4a4a}
body[data-theme="light"] .chat-composer,body[data-theme="rose"] .chat-composer,body[data-theme="lavender"] .chat-composer,body[data-theme="mint"] .chat-composer,body[data-theme="peach"] .chat-composer,body[data-theme="sky"] .chat-composer,body[data-theme="butter"] .chat-composer{background:#fff}
body[data-theme="light"] .chat-composer{border-color:#d9b8b8}
body[data-theme="rose"] .chat-composer{border-color:#f0c4cd}
body[data-theme="lavender"] .chat-composer{border-color:#d5cdf0}
body[data-theme="mint"] .chat-composer{border-color:#c2e6d3}
body[data-theme="peach"] .chat-composer{border-color:#f2d0b8}
body[data-theme="sky"] .chat-composer{border-color:#c2d9ea}
body[data-theme="butter"] .chat-composer{border-color:#eadfa8}
body[data-theme="light"] .chat-day,body[data-theme="rose"] .chat-day,body[data-theme="lavender"] .chat-day,body[data-theme="mint"] .chat-day,body[data-theme="peach"] .chat-day,body[data-theme="sky"] .chat-day,body[data-theme="butter"] .chat-day{color:#6b4a4a}
body[data-theme="minimal"] .profile-stats div{background:#fff;border-color:#e5e1dc}
body[data-theme="minimal"] .profile-stats span{color:#8a837c}
body[data-theme="minimal"] .chat-composer{background:#fff;border-color:#e0dbd3}
body[data-theme="minimal"] .chat-day{color:#8a837c}
/* Dark theme reversals: the status-composer pill was light with white text, and the lock card was white with light text. */
body[data-theme="dark"] .fb-composer input{background:#171717!important}
body[data-theme="dark"] .applock-card{background:rgba(23,23,23,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 48px rgba(0,0,0,.5)}
