/* ============================================================
   Piccabee couple dashboard — implements the "Piccabee Customer
   Dashboard" Claude Design. Warm/wedding palette + candlelit dark.
   Scoped to .cd-app; the React app (pinv-dashboard.jsx) supplies
   the inline-styled markup that references these tokens.
   ============================================================ */
.cd-app {
	--page:#FBF4E6; --card:#FFFDF7; --sec:#F3E4C6; --line:rgba(154,119,41,.32); --line2:rgba(154,119,41,.55);
	--ink:#3A1620; --ink2:#6E4436; --ink3:#96745E;
	--gold:#C6A15B; --goldD:#9A7729; --goldL:#E7CE8B; --maroon:#6E1524; --maroon2:#A83A28; --accent:#6E1524;
	--yes:#2E7048; --no:#A83A28; --pending:#9A7729; --wa:#1EA860; --field:#FFFDF7;
	--shadow:0 1px 2px rgba(110,68,54,.06),0 16px 36px -20px rgba(110,68,54,.3);
	min-height:100vh; background:var(--page); color:var(--ink);
	font-family:'Catamaran','Noto Serif Tamil',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
.cd-app[data-pk="candlelit"] {
	--page:#160E0A; --card:#241812; --sec:#2E2016; --line:rgba(231,206,139,.16); --line2:rgba(231,206,139,.3);
	--ink:#F4E9D2; --ink2:#D8C6A8; --ink3:#A89575;
	--gold:#C6A15B; --goldD:#E7CE8B; --goldL:#F2E2A8; --maroon:#7C1B2A; --maroon2:#B0472F; --accent:#E7CE8B;
	--yes:#5BA877; --no:#E08A6A; --pending:#E7CE8B; --wa:#1EA860; --field:#160E0A;
	--shadow:0 1px 2px rgba(0,0,0,.4),0 20px 44px -20px rgba(0,0,0,.7);
}
.cd-app *{ box-sizing:border-box; }
.cd-serif{ font-family:'Cormorant Garamond',serif; }
.cd-caps{ font-family:'Cinzel',serif; }
.cd-app a{ color:var(--accent); text-decoration:none; }
.cd-app a:hover{ color:var(--goldD); }
.cd-app input::placeholder{ color:var(--ink3); }

.cd-navc{ transition:background .12s,color .12s; }
.cd-navc:hover{ background:var(--sec); }
.cd-navc[data-active="true"]{ background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 26%,transparent),transparent)!important; color:var(--accent)!important; }
.cd-navc[data-active="true"] svg{ color:var(--goldD)!important; opacity:1!important; }
.cd-crow{ transition:background .12s; }
.cd-crow:hover{ background:var(--sec); }
.cd-ghost{ transition:border-color .15s,color .15s; }
.cd-ghost:hover{ border-color:var(--goldD); color:var(--goldD); }
.cd-primary{ transition:filter .15s; }
.cd-primary:hover{ filter:brightness(1.06); }
.cd-wa:hover{ filter:brightness(1.08); }
.cd-input:focus{ border-color:var(--goldD); outline:none; }

.cd-mobtheme{ display:none; }
@media (max-width:900px){
	.cd-col2{ grid-template-columns:1fr !important; }
	.cd-ginvite{ grid-template-columns:1fr !important; justify-items:center; }
}
@media (max-width:640px){
	.cd-shell{ flex-direction:column !important; }
	.cd-side{ position:fixed !important; top:auto !important; bottom:0; left:0; right:0; height:auto !important; width:auto !important;
		flex-direction:row !important; border-right:none !important; border-top:1px solid var(--line) !important;
		padding:6px 6px calc(6px + env(safe-area-inset-bottom)) !important; z-index:60; box-shadow:0 -8px 24px -14px rgba(0,0,0,.3); }
	.cd-brand,.cd-sidefoot{ display:none !important; }
	.cd-nav{ flex-direction:row !important; gap:2px !important; width:100%; }
	.cd-navc{ flex:1; min-width:0; flex-direction:column !important; gap:4px !important; font-size:0 !important; padding:6px 2px !important; border-radius:10px !important; }
	.cd-navc svg{ width:21px; height:21px; opacity:.85; }
	.cd-navc::after{ content:attr(data-short); font-size:9.5px; font-weight:600; }
	.cd-navc[data-active="true"]{ background:var(--sec) !important; }
	.cd-navtext{ display:none !important; }
	.cd-main{ padding-bottom:72px !important; }
	.cd-body{ padding:16px 14px 40px !important; }
	.cd-top{ padding:12px 16px !important; }
	.cd-mobtheme{ display:flex !important; }
	.cd-kpigrid{ grid-template-columns:1fr 1fr !important; }
}