/* ===== Form Inputs ===== */
::placeholder { 
  opacity: 0.85; 
  font-style: italic; 
  transition: color 0.3s ease;
}
body.light ::placeholder { color: #6c63ff; }
body.dark  ::placeholder { color: #9aa0ff; }

/* ===== Survey Chips ===== */
.sr-scale { font-size: 0.9rem; color: #6c757d; }
.sr-pill { display:inline-block; padding:2px 8px; margin-right:6px; border-radius:999px; background:#f1f3f5; transition:background .2s ease,color .2s ease; }
.sr-pill:hover { background:#e0e0e0; cursor:pointer; }

/* ===== Layout & Footer ===== */
html,body{height:100%;}
body{display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;transition:background .3s ease,color .3s ease;}
main{flex:1 0 auto;}
footer{flex-shrink:0;border-top:1px solid #eef2f6;font-size:.85rem;padding:.75rem;text-align:center;background:#fff;color:#6c757d;transition:background .3s ease,color .3s ease;}

/* ===== Light Theme ===== */
body.light{background:#f8f9fa;color:#212529;}
body.light .card{background:#fff;color:#212529;}
body.light .navbar{background:#ffffff !important;border-bottom:1px solid #eef2f6;}
body.light .sr-pill{background:#f1f3f5;color:#212529;}

/* ===== Dark Theme ===== */
body.dark{background:#121212;color:#e9ecef;}
body.dark .card{background:#1e1e1e;color:#e9ecef;}
body.dark .navbar{background:#1a1a1a !important;border-bottom:1px solid #333;}
body.dark footer{background:#1a1a1a;color:#aaa;}
body.dark .sr-pill{background:#2a2a2a;color:#e9ecef;}
body.dark .sr-pill:hover{background:#3a3a3a;}

/* ===== Mobile Brand Title Improvements ===== */
.brand-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;}
@media (max-width:420px){.brand-title{font-size:.95rem;}}

/* ===== Hero Panel Styling ===== */
.app-hero .hero-panel{background:#eef7ff40;border:1px solid #e9eef7;border-radius:12px;}

/* ===== Mobile Card & Buttons ===== */
@media (max-width:576px){.card{border-radius:14px;}.btn{width:100%;}.app-hero h1{font-size:1.25rem;line-height:1.35;}.app-hero p{font-size:.95rem;}}

/* ===== Tap Target Improvements ===== */
input.form-control,select.form-select,button.btn{min-height:44px;}