/* Direction 04 applied to the existing app. All controls, routes, and data flows
   remain in public/index.html; these rules affect presentation only. */
body:has(#appContent:not(.hidden)){background:#f5f7fa;color:#172b40;font-family:'DM Sans',sans-serif}
body:has(#appContent:not(.hidden)) .ct-header>.container{min-height:68px;padding-top:14px;padding-bottom:14px;max-width:1190px}
body:has(#appContent:not(.hidden)) .ct-header nav a[href^="#"]{display:none}
#appContent{max-width:1190px;padding:28px 24px 48px}
:is(#appContent, .ct-static-card) .ct-card-heading{gap:20px;margin-bottom:24px;align-items:center}
:is(#appContent, .ct-static-card) #cardTitle,:is(#appContent, .ct-static-card) #cardTitleInput{font-family:'DM Sans',sans-serif;font-size:clamp(30px,3.4vw,44px);line-height:1.18;letter-spacing:-1.3px;color:#285db6}
:is(#appContent, .ct-static-card) #cardTitleInput{border-color:#91abd0}
.ct-card-summary{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:12px;color:#596b7c;min-height:32px}
.ct-contributors{display:flex;padding-left:7px}
.ct-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:30px;height:30px;flex-shrink:0;background:#e8dff4;color:#594273;font-size:11px;font-weight:600}
.ct-contributors .ct-avatar{margin-left:-7px;border:3px solid #f5f7fa;width:35px;height:35px}
.ct-contributors .ct-avatar:nth-child(even){background:#f7dfcb;color:#704626}
:is(#appContent, .ct-static-card) #daysRemaining{font-size:12px;color:#596b7c;line-height:1.6}
:is(#appContent, .ct-static-card) #downloadPdf{display:inline-flex;align-items:center;margin-top:8px;padding:9px 14px;border:1px solid #cbd6e4;border-radius:8px;background:white;color:#285db6;font-weight:600;white-space:nowrap;text-decoration:none}
:is(#appContent, .ct-static-card) #downloadPdf:hover{background:#edf2fb}
:is(#appContent, .ct-static-card) #cardView{background:transparent;border:0;box-shadow:none;padding:0;margin-top:24px}
:is(#appContent, .ct-static-card) #messages{gap:22px}
:is(#appContent, .ct-static-card) #messages>div{gap:22px}
:is(#appContent, .ct-static-card) .ct-message{background:#fff;border:1px solid #dde3eb;border-radius:14px;padding:0;margin:0;overflow:hidden;box-shadow:0 3px 10px #172b4006;color:#172b40;font-size:16px;line-height:1.75;overflow-wrap:anywhere}
:is(#appContent, .ct-static-card) .ct-message>img{width:100%;height:auto;border-radius:0;margin:0;border-bottom:1px solid #edf0f4}
.ct-message-copy{padding:24px}
.ct-message-copy>p{white-space:pre-wrap;margin:0 0 24px}
.ct-message-sender{display:flex;align-items:center;gap:10px;font-size:12px}
:is(#appContent, .ct-static-card) .ct-message-sender strong{color:#172b40;font-weight:600}
:is(#appContent, .ct-static-card) .ct-message>button{margin:0 24px 18px;font-size:12px}
:is(#appContent, .ct-static-card) #cardInfo,:is(#appContent, .ct-static-card) #ownerMessageSection,:is(#appContent, .ct-static-card) #editCardInfo,:is(#appContent, .ct-static-card) #editMessageView>.grid>div,:is(#appContent, .ct-static-card) #messageForm,:is(#appContent, .ct-static-card) #viewPageCta{border:1px solid #dde3eb;border-radius:14px;box-shadow:0 3px 10px #172b4006;background:white}
:is(#appContent, .ct-static-card) #messageForm{max-width:720px;margin:0 auto 28px}
:is(#appContent, .ct-static-card) h2{font-size:22px;letter-spacing:-.5px;color:#172b40}
:is(#appContent, .ct-static-card) input:not([type=hidden]),:is(#appContent, .ct-static-card) textarea{border-color:#9caebf;border-radius:8px;font-family:inherit;color:#172b40}
:is(#appContent, .ct-static-card) input:focus,:is(#appContent, .ct-static-card) textarea:focus{outline:2px solid #285db6;outline-offset:2px}
:is(#appContent, .ct-static-card) .bg-primary{background:#285db6}
:is(#appContent, .ct-static-card) .bg-primary:hover{background:#204b93}
:is(#appContent, .ct-static-card) .text-primary{color:#285db6}
:is(#appContent, .ct-static-card) .border-primary{border-color:#285db6}
:is(#appContent, .ct-static-card) .bg-secondary,:is(#appContent, .ct-static-card) [class~="bg-secondary/40"]{background:#f0f4fa}
:is(#appContent, .ct-static-card) button{border-radius:7px}
:is(#appContent, .ct-static-card) button:focus-visible,:is(#appContent, .ct-static-card) a:focus-visible{outline:3px solid #285db6;outline-offset:3px}
:is(#appContent, .ct-static-card) #ownerGifResults button,:is(#appContent, .ct-static-card) #contributorGifResults button{border-radius:8px}
:is(#appContent, .ct-static-card) #ownerGifResults img,:is(#appContent, .ct-static-card) #contributorGifResults img{display:block}
@media(max-width:639px){#appContent{padding:22px 16px 36px}:is(#appContent, .ct-static-card) .ct-card-heading{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:18px}:is(#appContent, .ct-static-card) #cardTitle,:is(#appContent, .ct-static-card) #cardTitleInput{font-size:30px;letter-spacing:-.8px}:is(#appContent, .ct-static-card) #daysRemaining{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}:is(#appContent, .ct-static-card) #downloadPdf{margin-top:0;padding:7px 10px}.ct-card-summary{margin-top:10px}:is(#appContent, .ct-static-card) #cardView{margin-top:18px}:is(#appContent, .ct-static-card) #messages,:is(#appContent, .ct-static-card) #messages>div{gap:16px}.ct-message-copy{padding:22px}:is(#appContent, .ct-static-card) #cardInfo,:is(#appContent, .ct-static-card) #ownerMessageSection,:is(#appContent, .ct-static-card) #editCardInfo,:is(#appContent, .ct-static-card) #messageForm{padding:20px}}
:is(#appContent, .ct-static-card) .ct-message.bg-secondary{background:#fff}