:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: #000; overflow: hidden; }
body { display: grid; place-items: center; }
#app { width: min(100vw, 600px); height: min(100vh, 600px); padding: 24px 28px; background: #000; color: #fff; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 38px; border-bottom: 1px solid #28313a; }
.brand { font-size: 18px; font-weight: 800; letter-spacing: .08em; }
.smile { color: #00a8e1; font-size: 27px; margin-right: 4px; }
.clock { color: #b8c3cc; font-variant-numeric: tabular-nums; }
.screen { display: none; flex: 1; flex-direction: column; padding-top: 20px; min-height: 0; }
.screen.active { display: flex; }
.eyebrow { margin: 0 0 14px; color: #8fdfff; font-size: 14px; font-weight: 800; letter-spacing: .16em; }
.hero { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; margin-bottom: 24px; }
.poster { height: 170px; border: 2px solid #fff; border-radius: 20px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #12384a, #05080a 68%); }
.poster span { font-size: 54px; margin-left: 8px; }
h1 { font-size: 38px; line-height: 1; margin: 0 0 12px; }
.hero-copy p { color: #c5d0d8; font-size: 18px; line-height: 1.35; margin: 0 0 18px; }
.progress { height: 7px; background: #28313a; border-radius: 20px; overflow: hidden; }
.progress span { display: block; height: 100%; background: #00a8e1; }
.actions { display: grid; gap: 10px; }
button { width: 100%; min-height: 50px; padding: 11px 17px; border-radius: 15px; border: 2px solid #34414b; background: #11171c; color: #fff; font: inherit; font-size: 18px; font-weight: 750; text-align: left; }
button.primary { background: #063a51; border-color: #00a8e1; }
button:focus, button.focused { outline: none; border-color: #fff; background: #1c2a33; transform: scale(1.025); position: relative; z-index: 2; }
button.primary:focus, button.primary.focused { background: #006b91; }
.hint { margin-top: auto; color: #86949e; font-size: 13px; text-align: center; }
.search-screen { padding-top: 14px; }
.search-screen .eyebrow { margin-bottom: 9px; }
.search-box { min-height: 58px; display: flex; align-items: center; padding: 0 16px; border: 2px solid #00a8e1; border-radius: 14px; font-size: 23px; font-weight: 800; margin-bottom: 10px; overflow: hidden; white-space: nowrap; }
#query-text { overflow: hidden; text-overflow: ellipsis; }
#placeholder { color: #70808b; font-weight: 650; }
.cursor { width: 2px; height: 28px; background: #fff; margin: 0 2px; animation: blink 1s steps(1) infinite; flex: 0 0 auto; }
@keyframes blink { 50% { opacity: 0; } }
.keyboard { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 9px; }
.key { min-height: 39px; height: 39px; padding: 4px; border-radius: 10px; font-size: 15px; text-align: center; }
.key.wide { grid-column: span 2; }
.search-actions { display: grid; grid-template-columns: 1.45fr .8fr; gap: 8px; }
.search-actions button { min-height: 45px; height: 45px; font-size: 16px; text-align: center; }
.setting-row { display: flex; justify-content: space-between; gap: 20px; padding: 20px 4px; border-bottom: 1px solid #28313a; font-size: 18px; }
.setting-row strong { color: #8fdfff; text-align: right; }
#settings button { margin-top: auto; }
.message-screen { text-align: center; justify-content: center; align-items: center; }
.status-icon { width: 110px; height: 110px; border: 3px solid #00a8e1; border-radius: 50%; display: grid; place-items: center; font-size: 60px; margin-bottom: 20px; }
.message-screen h2 { font-size: 34px; margin: 0 0 10px; }
.message-screen p { color: #c5d0d8; max-width: 420px; font-size: 18px; line-height: 1.4; }
.message-screen button { margin-top: 26px; max-width: 340px; }
@media (max-width: 450px) { #app { padding: 16px; } .hero { grid-template-columns: 110px 1fr; } .poster { height: 130px; } h1 { font-size: 29px; } .key { min-height: 37px; height: 37px; } }

.status-icon.warning { border-color: #ffb347; color: #ffcf80; }
#settings button[data-action="back"] { margin-top: 0; }

.action-link { display:block; text-decoration:none; text-align:center; box-sizing:border-box; }