/* Telas do iPad (Safari 12). */
body { margin: 0; font: 17px -apple-system, Helvetica, Arial, sans-serif; background: #f2f2f7; color: #111; }
.screen { display: none; max-width: 420px; margin: 80px auto 0; padding: 24px; background: #fff; border-radius: 12px; }
.screen.on { display: block; }
h1 { font-size: 22px; margin: 0 0 16px; }
input, button { font-size: 17px; width: 100%; box-sizing: border-box; padding: 12px; margin: 6px 0; border-radius: 8px; border: 1px solid #ccc; }
button { background: #007aff; color: #fff; border: 0; }
button.link { background: none; color: #007aff; padding: 8px 0; }
.code { font-size: 44px; letter-spacing: 8px; text-align: center; margin: 16px 0; font-family: Menlo, monospace; }
.msg { min-height: 22px; color: #c00; }
.msg.ok { color: #080; }
.info { color: #555; }

/* Navegador */
#s-browser { max-width: none; margin: 0; padding: 0; border-radius: 0; background: #000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
#bar { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; background: #f2f2f7; border-bottom: 1px solid #ccc; box-sizing: border-box; padding: 0 4px; }
#bar button { width: 44px; height: 40px; margin: 0 1px; padding: 0; flex: none; background: none; color: #007aff; font-size: 22px; border-radius: 6px; }
#bar button:disabled { color: #bbb; }
#b-tabs { font-size: 15px !important; font-weight: 600; }
#url-form { flex: 1; margin: 0 4px; }
#url { height: 32px; margin: 0; padding: 0 8px; font-size: 16px; border: 0; background: #e3e3e8; }
#screen { position: absolute; top: 44px; left: 0; display: block; -webkit-user-select: none; -webkit-touch-callout: none; }
#kbd-input { position: absolute; top: 44px; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; }
.panel { display: none; position: absolute; top: 44px; right: 0; width: 360px; max-height: 70%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.panel.on { display: block; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { display: flex; align-items: center; border-bottom: 1px solid #eee; }
.panel li.active { background: #e8f0fe; }
.panel li span { flex: 1; padding: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel li button { width: 44px; margin: 0; padding: 12px 0; background: none; color: #c00; }
.panel .empty { padding: 12px; color: #888; }
#tab-new { margin: 0; border-radius: 0; }
#b-change { margin: 0; padding: 12px; border-radius: 0; font-size: 15px; }
#notice { display: none; position: absolute; top: 60px; left: 50%; width: 320px; margin-left: -160px; padding: 12px; text-align: center; background: rgba(0,0,0,.75); color: #fff; border-radius: 8px; }
#notice.on { display: block; }