:root{--ink:#1d1a63;--deep:#5b2a8c;--sea:#f5ecfc;--card:#fff;--rose:#8053A6;--rose2:#5b2a8c;--mute:#6b5f86;--line:#e1d3f0;--r:14px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sea);color:var(--ink);font:16px/1.55 'Nunito Sans',system-ui,sans-serif;padding-bottom:74px}
html[lang=dv] body{font-family:'Noto Sans Thaana','Nunito Sans',sans-serif;line-height:1.9}
h1,h2,h3{font-family:Lora,serif;margin:.2em 0 .5em;line-height:1.25}html[lang=dv] h1,html[lang=dv] h2,html[lang=dv] h3{font-family:'Noto Sans Thaana',serif}
h1{font-size:1.7rem}h2{font-size:1.3rem}h3{font-size:1.05rem}
#top{background:var(--deep);color:#fff;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:5}
.brand{font:700 1.15rem Lora,serif;color:#fff;text-decoration:none}html[lang=dv] .brand{font-family:'Noto Sans Thaana'}
#app{max-width:760px;margin:0 auto;padding:16px}
#nav{position:fixed;bottom:0;inset-inline:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:4px 0 max(4px,env(safe-area-inset-bottom));z-index:5}
#nav a{flex:1;text-align:center;padding:10px 2px;color:var(--mute);text-decoration:none;font-size:.82rem;font-weight:600;position:relative}
#nav a.on{color:var(--rose);box-shadow:inset 0 3px var(--rose)}
.badge{background:var(--rose);color:#fff;border-radius:9px;font-size:.7rem;padding:0 6px;margin-inline-start:3px}
@media(min-width:760px){#nav{top:48px;bottom:auto;position:sticky;border:0;border-bottom:1px solid var(--line);padding:0}body{padding-bottom:20px}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 12px}
.row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.grid{display:grid;gap:12px}@media(min-width:600px){.grid.two{grid-template-columns:1fr 1fr}}
a.card{display:block;color:inherit;text-decoration:none}a.card:hover{border-color:var(--deep)}
.av{width:54px;height:54px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font:700 1.3rem Lora,serif;flex:none}
.av.f{background:var(--rose)}.who{display:flex;gap:12px;align-items:center}
.m{color:var(--mute);font-size:.9rem}
label{display:block;font-weight:700;font-size:.92rem;margin:12px 0 4px}
input,select,textarea{width:100%;font:inherit;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input[type=checkbox]{width:auto;margin-inline-end:8px;transform:scale(1.2)}label.ck{font-weight:400;display:flex;align-items:flex-start;gap:4px}
textarea{min-height:96px}
:focus-visible{outline:3px solid #c9a8e6;outline-offset:2px}
button,.btn{font:inherit;font-weight:700;border:0;border-radius:10px;padding:11px 18px;background:var(--rose);color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
button:hover{background:var(--rose2)}button.alt{background:#fff;color:var(--ink);border:1.5px solid var(--line)}button.dng{background:#7a1f1f}
button.sm{padding:6px 12px;font-size:.88rem}.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tag{display:inline-block;background:var(--sea);border-radius:20px;padding:2px 10px;font-size:.82rem;margin:2px 4px 2px 0;font-weight:600}
.st-pending{background:#ffe9b8}.st-approved{background:#c9efd8}.st-rejected{background:#f7c9c9}
.hero{background:var(--deep);color:#fff;border-radius:var(--r);padding:26px 20px;margin-bottom:14px}.hero p{opacity:.9}
.chat{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto;padding:4px}
.b{max-width:80%;padding:8px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
.b.me{align-self:flex-end;background:var(--deep);color:#fff;border-color:var(--deep)}
.lang{background:transparent;border:1.5px solid #ffffff88;padding:5px 12px;font-size:.9rem}
#toast{position:fixed;inset-inline:16px;bottom:90px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9;text-align:center}
#toast.on{opacity:1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.stats div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}.stats b{display:block;font:700 1.6rem Lora,serif}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* ---- v2 additions ---- */
.tag{margin:2px 0;margin-inline-end:4px}
.tag.married{background:#ffd9a8;color:#5a3000}
.badge-demo{display:inline-block;background:#fff3c4;color:#6b4e00;border:1px solid #e6c85c;border-radius:6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;padding:1px 8px;margin-inline-end:6px}
.card.demo{border-style:dashed;background:#fffdf3}
.av svg{width:60%;height:60%;fill:currentColor}
.av.demo{background:#b8a24a}
.pill{display:inline-block;background:#fff;color:var(--deep);border-radius:20px;padding:4px 14px;font-weight:800;font-size:.9rem;margin-bottom:10px}
.hero h1{margin-top:4px}.hero .sub{font-size:1.05rem}.hero .dv{font:700 1.4rem 'Noto Sans Thaana',serif;margin:0 0 6px}
.hero .acts a.btn.alt{background:transparent;border:1.5px solid #ffffff99;color:#fff}
.notice{border-inline-start:5px solid var(--rose);background:#f6efff;padding:10px 14px;border-radius:10px;margin:10px 0}
.notice.info{border-color:var(--deep);background:var(--sea)}
.steps{display:grid;gap:10px}@media(min-width:600px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps .card{margin:0}.steps b.n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--rose);color:#fff;margin-bottom:6px}
.foot{margin:22px 0 8px;text-align:center;font-size:.9rem}.foot a{margin:0 8px;white-space:nowrap}
.hscroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}.hscroll .card{min-width:240px;margin:0}
.bell{position:relative;background:transparent;border:1.5px solid #ffffff88;padding:5px 10px;font-size:.9rem}
.hdr-r{display:flex;gap:8px;align-items:center}
.grow{flex:1}.acts.tight{margin:-4px 0 14px}
.empty{text-align:center;padding:26px 16px}.empty h3{margin-top:0}
.ni{border-inline-start:4px solid var(--line)}.ni.new{border-color:var(--rose);background:#f8f2ff}
.reveal{background:#eaf7ef;border:1px solid #b6e0c5;border-radius:10px;padding:10px 14px;margin:8px 0}
.sect{margin-top:18px}
.prose p{margin:.4em 0 1em}.prose h3{margin-top:1.2em}
details.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 8px}details.faq summary{cursor:pointer;font-weight:700}

/* footer = header colour */
#nav{background:var(--deep);border-top:0}
#nav a{color:#e1d3f0}#nav a.on{color:#fff;box-shadow:inset 0 3px #fff}
@media(min-width:760px){#nav{border-bottom:0}}
.foot{background:var(--deep);color:#fff;border-radius:var(--r);padding:16px 12px;line-height:2}.foot a{color:#fff}
/* popup */
.modal-bg{position:fixed;inset:0;background:#1d1a63b3;display:grid;place-items:center;padding:20px;z-index:20}
.modal{background:#fff;border-radius:var(--r);padding:22px 20px;max-width:420px;width:100%;text-align:center;box-shadow:0 10px 40px #0006}
.modal p{font-size:1.05rem;margin:0 0 16px}

/* Dhivehi font: Magey Huseynu. The Thaana face applies to Thaana text in either language; digits only in Dhivehi mode. */
@font-face{font-family:'MV A Waheed';src:url('/MVAWaheed-Bold.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0780-07BF,U+200C-200F,U+FDF2}
@font-face{font-family:'MV A Waheed Num';src:url('/MVAWaheed-Bold.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:'Magey Huseynu';src:url('/MageyHuseynu-Regular.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0780-07BF,U+200C-200F,U+FDF2}
@font-face{font-family:'Magey Num';src:url('/MageyHuseynu-Regular.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0030-0039}
body{font-family:'MV A Waheed','Magey Huseynu','Nunito Sans',system-ui,sans-serif}
h1,h2,h3,.brand,.stats b,.av{font-family:'MV A Waheed','Magey Huseynu',Lora,serif}
html[lang=dv] body,html[lang=dv] h1,html[lang=dv] h2,html[lang=dv] h3,html[lang=dv] .brand,html[lang=dv] .stats b,html[lang=dv] .av,html[lang=dv] .hero .dv,html[lang=dv] .badge-demo,html[lang=dv] .pill,.hero .dv{font-family:'MV A Waheed','Magey Huseynu','MV A Waheed Num','Magey Num','Noto Sans Thaana','Nunito Sans',sans-serif}

/* app-style bottom tab bar */
#nav{background:var(--deep);border:0;border-radius:20px 20px 0 0;box-shadow:0 -6px 24px #1d1a6333;padding:6px 6px max(8px,env(safe-area-inset-bottom));gap:2px}
#nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 5px;border-radius:14px;color:#cbb8e4;box-shadow:none;transition:background .25s,color .25s,transform .15s;-webkit-tap-highlight-color:transparent}
#nav a:active{transform:scale(.92)}
#nav .ic{position:relative;display:grid;place-items:center;width:44px;height:28px;border-radius:14px;transition:background .25s}
#nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
#nav a.on{color:#fff;box-shadow:none}#nav a.on .ic{background:#ffffff26}#nav a.on svg{transform:translateY(-1px) scale(1.08)}
#nav .lb{font-size:.7rem;font-weight:700;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nav .badge{position:absolute;top:-4px;inset-inline-end:2px;margin:0;min-width:17px;height:17px;line-height:17px;padding:0 4px;text-align:center;border:2px solid var(--deep);box-sizing:content-box;font-size:.62rem;font-weight:800}
@media(min-width:760px){#nav{border-radius:0;box-shadow:none;padding:4px 8px;justify-content:center;gap:6px}#nav a{flex:0 1 auto;flex-direction:row;gap:8px;padding:4px 14px 4px 8px}#nav .ic{width:30px}#nav .lb{font-size:.9rem}}

/* floating pill tab bar (blush white, maroon active tab) */
body{padding-bottom:108px}
#toast{bottom:112px}
#nav{inset-inline:12px;bottom:max(12px,env(safe-area-inset-bottom));background:#faf5ff;border:1px solid #e6d6f4;border-radius:34px;box-shadow:0 10px 32px #3a166640;padding:7px;gap:2px}
#nav a{color:#6b5f86;border-radius:26px;padding:10px 2px 8px;gap:4px;background:transparent}
#nav .ic{width:auto;height:auto;background:none}
#nav svg{width:26px;height:26px;stroke-width:1.7}
#nav a.on{color:#5b2a8c;background:linear-gradient(145deg,#f1e6fa,#e6d3f4);box-shadow:inset 0 0 0 1px #d9c3ee70}
#nav a.on .ic{background:none}#nav a.on svg{transform:none}
#nav .lb{font-size:.72rem;font-weight:600}
#nav .badge{border-color:#faf5ff;top:-6px;inset-inline-end:-8px}
@media(min-width:760px){body{padding-bottom:20px}#nav{position:sticky;top:56px;bottom:auto;inset-inline:auto;width:min(720px,calc(100% - 24px));margin:8px auto;padding:5px;justify-content:center}#nav a{flex-direction:row;gap:8px;padding:8px 16px}#nav svg{width:22px;height:22px}#nav .lb{font-size:.9rem}}

/* gender colours for profile posts: men #2878C8 (blue), women #8053A6 (purple) */
.g-m{--gc:#2878C8;--gct:#e7f0fa}.g-f{--gc:#8053A6;--gct:#f0eaf6}
.av.g-m,.av.g-f{background:var(--gc)}
.card.g-m,.card.g-f{border-top:4px solid var(--gc)}
a.card.g-m:hover,a.card.g-f:hover{border-color:var(--gc)}
.card.g-m .who,.card.g-f .who{background:var(--gct);margin:-16px -16px 12px;padding:14px 16px;border-radius:10px 10px 0 0}
.g-m h2,.g-m h3,.g-f h2,.g-f h3,.g-m h3 a,.g-f h3 a{color:var(--gc)}
.g-m .tag:not(.married):not([class*="st-"]),.g-f .tag:not(.married):not([class*="st-"]){background:var(--gct);color:var(--gc)}
.card.g-m .who .tag:not(.married):not([class*="st-"]),.card.g-f .who .tag:not(.married):not([class*="st-"]){background:#fff}
.g-m button:not(.alt):not(.dng),.g-f button:not(.alt):not(.dng),.g-m .btn:not(.alt),.g-f .btn:not(.alt){background:var(--gc)}
.g-m button.alt,.g-f button.alt,.g-m .btn.alt,.g-f .btn.alt{color:var(--gc);border-color:var(--gc)}
.g-m a:not(.card):not(.btn),.g-f a:not(.card):not(.btn){color:var(--gc)}
.card.demo.g-m,.card.demo.g-f{background:#fff}
a{color:var(--deep)}

/* ---- landing page (visitors) ---- */
body.home #top{display:none}
.land{position:relative;margin:-16px -16px 14px;min-height:min(100svh,760px);padding:18px 18px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;color:#1d1a63;background:#e7d6f6 url('/hero.webp') 84% 100%/auto 68% no-repeat;overflow:hidden;border-radius:0 0 28px 28px}
.land::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#f8f0ff 0%,#f8f0ff 34%,#f8f0ffa6 48%,#f8f0ff00 64%),linear-gradient(0deg,#2a104a80 0%,#2a104a00 24%)}
.land>*{position:relative;z-index:1}
.land-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lg{display:flex;align-items:center;gap:10px}.logo{width:52px;height:52px;flex:none}
.nm{font:italic 700 1.55rem/1.1 Lora,serif;background:linear-gradient(90deg,#1d1a63,#8053A6);-webkit-background-clip:text;background-clip:text;color:transparent}
.st{color:#8053A6;font-weight:700;letter-spacing:.05em;font-size:.8rem}
html[lang=dv] .nm{font-family:'MV A Waheed','Magey Huseynu',serif;font-style:normal}
.hb{width:48px;height:48px;border-radius:50%;padding:0;background:#ffffffbf;color:#1d1a63;display:grid;place-items:center;backdrop-filter:blur(6px);border:0}
.hb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hb:hover{background:#fff}
.land-mid .pill{background:#ffffffd9;color:#5b2a8c;box-shadow:0 2px 10px #5b2a8c22}
.land h1{font:800 2.55rem/1.1 'Nunito Sans',system-ui,sans-serif;color:#14124f;margin:6px 0 2px;max-width:11ch}
.land h1 em{font:600 1.2em 'Dancing Script',cursive;font-style:normal;color:#8053A6;display:inline-block;line-height:1}
html[lang=dv] .land h1{font-family:'MV A Waheed','Magey Huseynu',sans-serif;max-width:none;line-height:1.5}
html[lang=dv] .land h1 em{font-family:'MV A Waheed','Magey Huseynu',sans-serif;font-size:1em}
.swoosh{display:block;width:230px;height:28px;margin:2px 0 8px}
html[lang=dv] .swoosh{transform:scaleX(-1)}
.land .sub{font-size:1.08rem;max-width:24ch;margin:6px 0 18px;color:#1d1a63;opacity:1}
html[lang=dv] .land .sub{max-width:none;line-height:1.9}
.land .acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,#8053A6,#5b2a8c);color:#fff;font-weight:700;font-size:1.05rem;padding:14px 26px;border-radius:999px;box-shadow:0 8px 22px #5b2a8c59;text-decoration:none;transition:transform .15s,box-shadow .2s}
.cta:active{transform:scale(.97)}
.lnk{color:#1d1a63;font-weight:700;text-decoration:underline}
.land-ft{display:flex;justify-content:space-around;align-items:flex-start;gap:8px}
.fi{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-weight:700;font-size:.82rem;text-align:center;max-width:110px;text-shadow:0 1px 6px #0008}
.fc{width:54px;height:54px;border-radius:50%;background:#ffffffd9;color:#1d1a63;display:grid;place-items:center;text-shadow:none}
.fc svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.welcome{margin:0;text-align:center;font-size:1.02rem}
@media(min-width:760px){.land{margin:0 0 14px;border-radius:28px;min-height:660px;padding:26px 30px}.land h1{font-size:3.1rem}}
.menu-bg{position:fixed;inset:0;background:#1d1a63a6;z-index:30;display:flex;justify-content:flex-end;animation:fade .2s}
.menu{position:relative;background:#fff;width:min(320px,84%);height:100%;padding:64px 20px 24px;display:flex;flex-direction:column;gap:2px;box-shadow:-10px 0 40px #0004;animation:slide .25s}
.menu a{padding:14px 10px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700}
.menu a.reg{background:linear-gradient(90deg,#8053A6,#5b2a8c);color:#fff;border:0;border-radius:12px;text-align:center;margin:12px 0 8px}
.menu .x{position:absolute;top:12px;inset-inline-end:14px;width:42px;height:42px;padding:0;border-radius:50%;background:#f0eaf6;color:#5b2a8c;font-size:1.6rem;line-height:1}
.menu .alt{margin-top:auto}
@keyframes fade{from{opacity:0}}@keyframes slide{from{transform:translateX(30px);opacity:0}}

#nav:empty{display:none}body.nonav{padding-bottom:20px}
@media(min-width:760px){.land{background-size:auto 80%;background-position:85% 100%}}
.land .sub,.land h1{text-shadow:0 0 10px #f8f0ffcc}

/* landing tweaks: photo sits lower-right and fades into the pale sky so text stays readable */
.land{background:linear-gradient(180deg,#f7eeff 0%,#efe0fa 100%)}
.land::before{background:url('/hero.webp') 100% 100%/auto 68% no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%);mask-image:linear-gradient(180deg,transparent 0%,#000 26%)}
.land::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#2a104a80 0%,#2a104a00 24%)}
.land>*{z-index:2}
html[lang=dv] .land::before{background-position:0 100%}
.land h1,.land .sub{text-shadow:0 0 14px #f7eeffcc}
.land .sub{max-width:21ch}
@media(min-width:760px){.land::before{background-size:auto 80%}}

/* landing v3: text on pale sky above, couple photo as a faded band below */
.land{min-height:820px}
.land::before{inset:auto 0 0 0;top:auto;height:360px;background:url('/hero.webp') 72% 100%/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}
html[lang=dv] .land::before{background-position:72% 100%}
.land .sub{max-width:none}
@media(min-width:760px){.land{min-height:720px}.land::before{height:400px;background-size:cover}}
.land{justify-content:flex-start}.land-mid{margin-top:34px}.land-ft{margin-top:auto}
.lnk{background:#ffffffc7;padding:8px 14px;border-radius:999px;text-decoration:none}
@media(min-width:760px){.land::before{-webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 22%,#000 58%);mask-image:linear-gradient(180deg,transparent 0%,transparent 22%,#000 58%)}}

/* ---- app-wide theme = landing page colours (purple / navy / lavender) ---- */
#top{background:linear-gradient(90deg,#5b2a8c,#8053A6)}
.hero{background:linear-gradient(135deg,#8053A6,#5b2a8c)}
.pill{color:#5b2a8c}
a{color:#5b2a8c}
.notice{border-color:#8053A6}.notice.info{border-color:#5b2a8c;background:#efe3fa}
.stats b{color:#5b2a8c}

/* browse: match filter chips + per-card quick action */
.seg{display:flex;gap:8px;margin:0 0 12px}.chip{flex:1;text-align:center;padding:9px 12px;border:1.5px solid var(--line);border-radius:999px;font-weight:700;text-decoration:none;color:inherit;background:var(--card)}.chip.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.cw{min-width:0}.cw>a.card{margin-bottom:0}.cw>.acts.tight{margin:8px 0 14px;min-height:34px}