/* ==========================================================================
   Chinnaraj's Prediction - EMERALD & GOLD  (same palette as the Astro Chinnaraj app)
   Self-contained: every class starts with  em-  so it can never clash with old CSS.
   Readability first: 16px+ text, 48px touch targets, strong contrast.
   ========================================================================== */
:root{
	--em-bg:#F3F7F3;
	--em-card:#FFFFFF;
	--em-ink:#10241D;
	--em-ink2:#2A3F36;
	--em-mut:#4F645A;
	--em-line:#D9E4DC;
	--em-tint:#EAF4EE;
	--em-em:#0E6B50;
	--em-em2:#0A3B2E;
	--em-em3:#12634A;
	--em-mint:#DDEFE6;
	--em-gold:#E8AC32;
	--em-gold2:#C98A12;
	--em-goldsoft:#FCEED0;
	--em-ongold:#2A1D00;
	--em-bad:#B3341B;
	--em-badbg:#FBE5DE;
	--em-ok:#1F7A4A;
	--em-okbg:#E1F2E8;
	--em-shadow:0 8px 24px rgba(8,46,36,.10);
	--em-shadow-s:0 2px 8px rgba(8,46,36,.08);
	--em-r:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.em{margin:0;background:var(--em-bg);color:var(--em-ink);
	font:16px/1.55 "Noto Sans Tamil","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
	-webkit-font-smoothing:antialiased}
.em a{color:var(--em-em)}
.em h1,.em h2,.em h3{margin:0;line-height:1.25;color:var(--em-ink)}
.em-muted{color:var(--em-mut)}
.em-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.em :focus-visible{outline:3px solid var(--em-gold);outline-offset:2px;border-radius:8px}

/* ---------- header ---------- */
.em-top{position:sticky;top:0;z-index:50;background:linear-gradient(100deg,#082E24,#0E6B50);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.em-top-in{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;row-gap:8px}
.em-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff!important;min-width:0}
.em-brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--em-gold);background:#fff;flex:none}
.em-brand b{display:block;font-size:17px;line-height:1.15;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-brand small{display:block;font-size:12.5px;color:var(--em-mint);white-space:nowrap}
.em-nav{order:3;display:flex;gap:6px;flex:1 0 100%;margin:0;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.em-nav a{color:#E9F5EE;text-decoration:none;padding:9px 14px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;border:1px solid transparent}
.em-nav a:hover{background:rgba(255,255,255,.12)}
.em-nav a.on{background:var(--em-gold);color:var(--em-ongold)}
.em-user{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none;order:2}
.em-user .em-mail{display:none;font-size:13.5px;color:var(--em-mint);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-user a.em-out{color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55)}
.em-user a.em-out:hover{background:rgba(255,255,255,.14)}
.em-home{color:#E9F5EE!important;text-decoration:none;font-weight:600;font-size:14px;padding:8px 10px;border-radius:999px}
.em-home:hover{background:rgba(255,255,255,.12)}
@media(max-width:1360px){
	.em-top-in{flex-wrap:wrap;row-gap:8px}
	.em-nav{order:3;flex:1 0 100%;margin:0;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
	.em-nav::-webkit-scrollbar{display:none}
	.em-home span{display:none}
	.em-brand small{display:none}
}

/* ---------- layout ---------- */
.em-wrap{max-width:1200px;margin:0 auto;padding:22px 16px 60px}
.em-page-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:18px}
.em-page-h h1{font-size:26px}
.em-page-h p{margin:4px 0 0;color:var(--em-mut)}
.em-grid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:22px;align-items:start}
.em-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.em-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.em-grid,.em-grid.two,.em-grid.three{grid-template-columns:minmax(0,1fr)}}
.em-card{background:var(--em-card);border:1px solid var(--em-line);border-radius:var(--em-r);box-shadow:var(--em-shadow-s);padding:20px}
.em-card.pad0{padding:0;overflow:hidden}
.em-card h2{font-size:19px;margin-bottom:4px}
.em-card .em-sub{margin:0 0 16px;color:var(--em-mut);font-size:15px}
.em-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:18px 20px 12px}
.em-card-h h2{margin:0}
.em-sticky{position:sticky;top:84px}
@media(max-width:980px){.em-sticky{position:static}}

/* ---------- forms ---------- */
.em-field{margin-bottom:15px}
.em-field>label,.em-label{display:block;font-weight:700;font-size:15px;margin-bottom:6px;color:var(--em-ink2)}
.em-input,.em-select,.em-textarea{width:100%;min-height:50px;padding:11px 14px;border:1.5px solid #B9CBBF;border-radius:12px;background:#fff;color:var(--em-ink);
	font:inherit;font-size:16px;appearance:none;-webkit-appearance:none}
.em-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%230E6B50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.em-textarea{min-height:110px;resize:vertical}
.em-input:focus,.em-select:focus,.em-textarea:focus{outline:none;border-color:var(--em-em);box-shadow:0 0 0 4px rgba(14,107,80,.16)}
.em-input::placeholder{color:#78897F}
.em-hint{font-size:13.5px;color:var(--em-mut);margin-top:5px}
.em-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.em-row2{grid-template-columns:1fr}}

.em-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.em-seg input{position:absolute;opacity:0;pointer-events:none}
.em-seg label{display:flex;align-items:center;justify-content:center;min-height:50px;border:1.5px solid #B9CBBF;border-radius:12px;font-weight:700;cursor:pointer;background:#fff;color:var(--em-ink2);margin:0}
.em-seg input:checked+label{background:var(--em-em);border-color:var(--em-em);color:#fff;box-shadow:inset 0 0 0 2px var(--em-gold)}
.em-seg input:focus-visible+label{outline:3px solid var(--em-gold);outline-offset:2px}

.em-place{position:relative}
.em-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1.5px solid var(--em-em);border-radius:12px;box-shadow:var(--em-shadow);max-height:280px;overflow:auto;display:none}
.em-suggest.on{display:block}
.em-suggest button{display:block;width:100%;text-align:left;border:0;background:none;padding:12px 14px;font:inherit;font-size:15.5px;cursor:pointer;color:var(--em-ink);border-bottom:1px solid var(--em-line)}
.em-suggest button:last-child{border-bottom:0}
.em-suggest button:hover,.em-suggest button.act{background:var(--em-tint)}
.em-suggest .em-none{padding:12px 14px;color:var(--em-mut)}

.em-geo{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:11px 13px;border-radius:12px;background:var(--em-tint);color:var(--em-em2);font-size:14.5px;line-height:1.45}
.em-geo.ok{background:var(--em-okbg);color:#0E4F33}
.em-geo.bad{background:var(--em-badbg);color:var(--em-bad)}
.em-geo.warn{background:var(--em-goldsoft);color:#6B4300}
.em-geo svg{flex:none;margin-top:2px}

/* ---------- buttons ---------- */
.em-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:12px;border:0;font:inherit;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none;
	background:var(--em-em);color:#fff!important;box-shadow:0 2px 0 rgba(0,0,0,.15);transition:transform .08s,background .15s}
.em-btn:hover{background:var(--em-em3)}
.em-btn:active{transform:translateY(1px)}
.em-btn.gold{background:var(--em-gold);color:var(--em-ongold)!important}
.em-btn.gold:hover{background:#F0B842}
.em-btn.ghost{background:#fff;color:var(--em-em)!important;border:1.5px solid var(--em-em);box-shadow:none}
.em-btn.ghost:hover{background:var(--em-tint)}
.em-btn.danger{background:#fff;color:var(--em-bad)!important;border:1.5px solid #E2A99B;box-shadow:none}
.em-btn.danger:hover{background:var(--em-badbg)}
.em-btn.sm{min-height:42px;padding:0 15px;font-size:14.5px;border-radius:10px}
.em-btn.block{width:100%}
.em-btn[disabled]{opacity:.55;cursor:not-allowed}
.em-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.em-actions .em-btn{flex:1 1 auto}

/* ---------- saved list ---------- */
.em-tools{display:flex;flex-wrap:wrap;gap:10px;padding:0 20px 14px;align-items:center}
.em-tools .em-input{flex:1 1 220px;min-height:46px}
.em-chip{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:999px;border:1.5px solid #B9CBBF;background:#fff;font:inherit;font-size:14.5px;font-weight:700;color:var(--em-ink2);cursor:pointer}
.em-chip.on{background:var(--em-em);border-color:var(--em-em);color:#fff;box-shadow:inset 0 0 0 2px var(--em-gold)}
.em-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--em-line)}
.em-prof{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--em-line)}
.em-prof:hover{background:#F8FBF8}
.em-prof.sel{background:var(--em-goldsoft)}
.em-av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:19px;color:#fff;background:linear-gradient(135deg,var(--em-em),var(--em-em3));border:2px solid var(--em-gold)}
.em-prof.f .em-av{background:linear-gradient(135deg,#8A3A5E,#B0587F)}
.em-p-name{font-weight:800;font-size:17px;line-height:1.3;word-break:break-word}
.em-p-meta{color:var(--em-mut);font-size:14.5px;margin-top:2px;line-height:1.45}
.em-p-meta b{color:var(--em-ink2);font-weight:700}
.em-p-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.em-badge{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:800;background:var(--em-goldsoft);color:#6B4300;vertical-align:middle}
.em-more{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;flex-wrap:wrap}
.em-empty{padding:40px 20px;text-align:center;color:var(--em-mut)}
.em-empty b{display:block;color:var(--em-ink);font-size:18px;margin-bottom:4px}
@media(max-width:640px){
	.em-prof{grid-template-columns:44px minmax(0,1fr);row-gap:10px;padding:14px 16px}
	.em-av{width:44px;height:44px;font-size:17px}
	.em-p-acts{grid-column:1 / -1;justify-content:stretch}
	.em-p-acts .em-btn{flex:1}
	.em-tools,.em-card-h,.em-more{padding-left:16px;padding-right:16px}
}

/* ---------- alerts / toast / modal ---------- */
.em-alert{padding:13px 16px;border-radius:12px;margin-bottom:14px;font-size:15.5px}
.em-alert.ok{background:var(--em-okbg);color:#0E4F33}
.em-alert.bad{background:var(--em-badbg);color:var(--em-bad)}
.em-alert.warn{background:var(--em-goldsoft);color:#6B4300}
.em-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--em-em2);color:#fff;padding:13px 20px;border-radius:12px;box-shadow:var(--em-shadow);z-index:200;max-width:92vw;font-weight:600;transition:.25s}
.em-toast.on{opacity:1;transform:translate(-50%,0)}
.em-toast.bad{background:var(--em-bad)}
.em-modal{position:fixed;inset:0;background:rgba(6,30,23,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:150}
.em-modal.on{display:flex}
.em-modal-box{background:#fff;border-radius:18px;max-width:900px;width:100%;max-height:90vh;overflow:auto;padding:22px;box-shadow:var(--em-shadow);position:relative}
.em-modal-x{position:absolute;right:12px;top:10px;border:0;background:var(--em-tint);width:42px;height:42px;border-radius:50%;font-size:22px;cursor:pointer;color:var(--em-em2)}
.em-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.em-plan{border:1.5px solid var(--em-line);border-radius:14px;padding:16px}
.em-plan h3{font-size:18px;margin-bottom:8px}
.em-plan .em-price{font-size:26px;font-weight:800;color:var(--em-em)}
.em-plan s{color:var(--em-mut)}

/* ---------- spinner ---------- */
.em-spin{width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:em-r .7s linear infinite;display:none}
.em-btn.busy .em-spin{display:inline-block}
.em-btn.ghost .em-spin{border-color:rgba(14,107,80,.25);border-top-color:var(--em-em)}
@keyframes em-r{to{transform:rotate(360deg)}}

/* ---------- sign-in page ---------- */
body.em-auth{min-height:100vh;display:grid;place-items:center;padding:18px;
	background:radial-gradient(1200px 600px at 20% -10%,#1E8F6C 0%,transparent 60%),linear-gradient(145deg,#082E24 0%,#0E6B50 60%,#23956F 100%);
	font:16px/1.55 "Noto Sans Tamil","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--em-ink)}
.em-auth-card{width:100%;max-width:440px;background:#fff;border-radius:22px;padding:34px 28px 28px;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center;position:relative;overflow:hidden}
.em-auth-card:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--em-gold),#F6CF72,var(--em-gold))}
.em-auth-logo{width:92px;height:92px;border-radius:50%;object-fit:cover;border:3px solid var(--em-gold);margin:0 auto 14px;display:block;background:#fff}
.em-auth h1{font-size:25px;color:var(--em-em2);margin-bottom:4px}
.em-auth p.lead{margin:0 0 22px;color:var(--em-mut)}
.em-gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;border-radius:14px;border:1.5px solid #B9CBBF;background:#fff;color:var(--em-ink);font:inherit;font-weight:700;font-size:17px;cursor:pointer;box-shadow:var(--em-shadow-s)}
.em-gbtn:hover{background:var(--em-tint);border-color:var(--em-em)}
.em-gbtn[disabled]{opacity:.6;cursor:wait}
.em-gbtn img{width:22px;height:22px}
.em-auth-msg{margin-top:16px;font-size:15px;min-height:22px}
.em-auth-msg.bad{color:var(--em-bad);background:var(--em-badbg);padding:10px 12px;border-radius:10px}
.em-auth-msg.ok{color:var(--em-ok)}
.em-auth-foot{margin-top:22px;font-size:13.5px;color:var(--em-mut)}
.em-auth-foot a{color:var(--em-em);font-weight:700}
.em-dots{display:inline-flex;gap:5px;vertical-align:middle;margin-right:8px}
.em-dots i{width:8px;height:8px;border-radius:50%;background:var(--em-em);animation:em-b 1s infinite ease-in-out both}
.em-dots i:nth-child(2){animation-delay:.15s}.em-dots i:nth-child(3){animation-delay:.3s}
@keyframes em-b{0%,80%,100%{transform:scale(.5);opacity:.5}40%{transform:scale(1);opacity:1}}

/* ---------- marriage match two-up ---------- */
.em-pick{border:1.5px dashed #B9CBBF;border-radius:14px;padding:16px;background:#FBFDFB}
.em-pick.f h3{color:#8A3A5E}
.em-pick.m h3{color:#1D5F8F}
.em-pick h3{font-size:17px;margin-bottom:10px}
.em-sum{margin-top:12px;border:1px solid var(--em-line);border-radius:12px;overflow:hidden;background:#fff}
.em-sum div{display:flex;justify-content:space-between;gap:12px;padding:9px 13px;border-bottom:1px solid var(--em-line);font-size:15px}
.em-sum div:last-child{border-bottom:0}
.em-sum span{color:var(--em-mut)}
.em-sum b{text-align:right;word-break:break-word}
.em-vs{display:grid;place-items:center;font-weight:800;color:var(--em-gold2);font-size:22px}

.em-foot{text-align:center;color:var(--em-mut);font-size:13.5px;padding:10px 16px 28px}
.em-foot a{color:var(--em-em);font-weight:700;text-decoration:none}

/* =======================================================================
   Pages that still use the old template: horoscope result, print sheets.
   (loaded by newstyle.css overrides in the same file)
   ======================================================================= */
@media print{.em-top,.em-toast,.em-modal{display:none!important}}
@media(min-width:1500px){.em-user .em-mail{display:block}}