:root{--bg:#fafafa;--fg:#0a0a0a;--accent:#0066ff}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,sans-serif;color:var(--fg);background:var(--bg)}
.hero-search{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}
.search-wrapper{display:flex;gap:8px;padding:16px 24px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.12);transition:all 0.5s;background:#fff}
.search-wrapper.is-searching{animation:flip-down 0.6s forwards}
@keyframes flip-down{0%{transform:rotateX(0deg)}40%{transform:rotateX(-12deg) translateY(6px)}100%{transform:translateY(12px)}}
#hero-search-input{flex:1;border:none;background:transparent;font-size:18px;outline:none}
#search-results{position:absolute;top:calc(100% + 16px);left:0;right:0;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.12);max-height:450px;overflow-y:auto;opacity:0;transition:opacity 0.4s}
#search-results:not([hidden]){opacity:1}
.result-item{display:flex;align-items:center;gap:16px;padding:16px;cursor:pointer;border-bottom:1px solid rgba(0,0,0,0.05)}
.result-item:hover{background:rgba(0,102,255,0.05)}
.result-flag{font-size:36px}
.result-content strong{display:block;font-weight:600;margin-bottom:4px}
.result-meta{font-size:14px;color:#999}
.country-details-panel{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity 0.3s}
.country-details-panel.is-visible{opacity:1;pointer-events:auto}
.panel-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6)}
.panel-content{position:relative;width:100%;max-width:600px;background:#fff;border-radius:24px 24px 0 0;padding:2rem;max-height:80vh;overflow-y:auto;transform:translateY(100%);transition:transform 0.4s}
.country-details-panel.is-visible .panel-content{transform:translateY(0)}
.panel-close{position:absolute;top:1rem;right:1rem;background:none;border:none;cursor:pointer;padding:8px;font-size:20px}