/* Panel8 app kit - visual install tutorial. Brand color comes from --p8app-accent / --p8app-ink. */
:root { --a: var(--p8app-accent, #d83c1d); --ai: var(--p8app-ink, #fff); --bg: #faf7f4; --fg: #1d1b1a; --mut: #6b6663; --card: #fff; --line: rgba(0, 0, 0, .08); }
@media (prefers-color-scheme: dark) { :root { --bg: #14110f; --fg: #f4f0ec; --mut: #b9b2ac; --card: #201c1a; --line: rgba(255, 255, 255, .1); } }
* { box-sizing: border-box; }
body.p8t-body { margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
#p8t { max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 18px calc(36px + env(safe-area-inset-bottom)); text-align: center; }
.p8t-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.p8t-hl { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.p8t-logo-fb { display: grid; place-items: center; background: var(--a); color: var(--ai); font-weight: 800; }
.p8t-lang { border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 999px; padding: 8px 14px; font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; }
#p8t h1 { font-size: 30px; line-height: 1.1; margin: 4px 0 6px; letter-spacing: -.02em; }
.p8t-sub { margin: 0 0 18px; color: var(--mut); font-size: 16px; }
.p8t-tabs { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--line); padding: 4px; border-radius: 999px; margin-bottom: 14px; }
.p8t-tabs button { border: 0; background: transparent; color: var(--mut); padding: 10px 16px; border-radius: 999px; font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; }
.p8t-tabs button[aria-selected="true"] { background: var(--a); color: var(--ai); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.p8t-warn { background: #fff4d6; border: 1px solid #f0d27a; color: #5b4300; padding: 10px 14px; border-radius: 14px; font-size: 14px; margin: 0 0 14px; }
.p8t-go, .p8t-homebtn { display: block; width: 100%; max-width: 360px; margin: 0 auto 14px; min-height: 52px; border-radius: 16px; border: 0; background: var(--a); color: var(--ai); font: 700 17px/52px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.p8t-homebtn { background: var(--card); color: var(--fg); border: 1px solid var(--line); box-shadow: none; font-size: 15px; }

.p8t-stage { display: grid; gap: 18px; justify-items: center; margin: 6px 0 18px; }
@media (min-width: 640px) { #p8t { max-width: 760px; } .p8t-stage { grid-template-columns: auto 1fr; align-items: center; text-align: left; gap: 36px; justify-items: stretch; } .p8t-stage > :first-child { justify-self: center; } }

/* steps */
.p8t-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 360px; }
.p8t-steps li { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; font-size: 17px; font-weight: 700; cursor: pointer; opacity: .55; transition: opacity .25s, transform .25s, border-color .25s; text-align: left; }
.p8t-steps li b { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--line); display: grid; place-items: center; font-size: 15px; }
.p8t-steps li.on { opacity: 1; border-color: var(--a); transform: scale(1.02); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.p8t-steps li.on b { background: var(--a); color: var(--ai); }

.p8t-know { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.p8t-know li { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; }
.p8t-know svg { width: 16px; height: 16px; color: var(--a); }
.p8t-foot { margin-top: 22px; font-size: 14px; } .p8t-foot a { color: var(--mut); }

/* ---------- device frames ---------- */
.p8t-phone { width: 250px; aspect-ratio: 9 / 18.6; background: #0d0d0f; border-radius: 40px; padding: 9px; box-shadow: 0 26px 60px rgba(0, 0, 0, .35), inset 0 0 0 2px #2a2a2e; position: relative; flex: none; }
.p8t-screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #fff; color: #111; text-align: left; font-size: 11px; }
.p8t-scene { position: absolute; inset: 0; display: none; }
.p8t-scene.on { display: block; }
.p8t-st { position: absolute; top: 0; left: 0; right: 0; height: 7%; display: flex; justify-content: space-between; align-items: center; padding: 0 9%; font-size: 9.5px; font-weight: 700; z-index: 5; color: #111; }
.p8t-st.dk { color: #fff; }
.p8t-isl { position: absolute; left: 50%; top: 22%; width: 30%; height: 62%; transform: translateX(-50%); background: #000; border-radius: 99px; }
.p8t-desk { width: min(380px, 100vw - 36px); } .p8t-dscreen { position: relative; aspect-ratio: 16 / 10.5; background: #fff; border-radius: 12px 12px 4px 4px; border: 7px solid #2b2b2f; border-bottom-width: 9px; overflow: hidden; text-align: left; font-size: 9px; color: #111; box-shadow: 0 22px 50px rgba(0, 0, 0, .3); }
.p8t-dstand { height: 12px; background: linear-gradient(#cfcfd4, #9a9aa1); border-radius: 0 0 14px 14px; width: 60%; margin: 0 auto; }

/* mini website */
.p8t-page { position: absolute; inset: 7% 0 0; padding: 4% 6%; background: #fbf8f4; }
.p8t-ph { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-bottom: 8px; }
.p8t-pl { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.p8t-hero { height: 22%; border-radius: 10px; background: linear-gradient(135deg, var(--a), #f5a25d); margin-bottom: 8px; opacity: .9; }
.p8t-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; } .p8t-row i { height: 44px; border-radius: 8px; background: #ece5dd; }
.p8t-wpage { position: absolute; inset: 9% 0 0; } .p8t-wpage .p8t-page { inset: 0; }

/* safari / chrome / browser bars */
.p8t-safari { position: absolute; left: 0; right: 0; bottom: 0; height: 9.5%; background: #f2f2f4; border-top: 1px solid #dcdce0; display: flex; justify-content: space-around; align-items: center; color: #0a7cff; }
.p8t-safari span { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 6px; } .p8t-safari svg, .p8t-chrome svg { width: 100%; height: 100%; }
.p8t-chrome { position: absolute; top: 7%; left: 0; right: 0; height: 8%; background: #f1f3f4; display: flex; align-items: center; gap: 6px; padding: 0 5%; }
.p8t-url { flex: 1; background: #fff; border-radius: 99px; padding: 4px 10px; font-size: 9.5px; color: #555; }
.p8t-chrome > span:last-child { width: 15px; height: 15px; color: #444; border-radius: 50%; }
.p8t-bar { position: absolute; top: 0; left: 0; right: 0; height: 9%; background: #eceef0; display: flex; align-items: center; gap: 4px; padding: 0 3%; }
.p8t-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c7c9cc; }
.p8t-addr { flex: 1; margin-left: 6px; background: #fff; border-radius: 99px; padding: 3px 8px; font-size: 8.5px; color: #555; display: flex; justify-content: space-between; align-items: center; }
.p8t-addr em { width: 13px; height: 13px; display: grid; place-items: center; color: #444; border-radius: 4px; font-style: normal; } .p8t-addr em svg { width: 100%; height: 100%; }

/* share sheet / modal / menu / dialog */
.p8t-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .38); z-index: 2; } .p8t-dim.d2 { background: #d9dadd; }
.p8t-sheet { position: absolute; left: 3%; right: 3%; bottom: 2%; z-index: 3; background: #f4f4f6; border-radius: 18px; padding: 10px 8px 6px; }
.p8t-scene.on .p8t-sheet { animation: p8t-up .45s cubic-bezier(.2, .8, .2, 1) both; }
.p8t-sh { display: flex; align-items: center; gap: 8px; padding: 2px 6px 8px; border-bottom: 1px solid #dcdce0; margin-bottom: 4px; } .p8t-sh small { display: block; color: #777; font-size: 9px; } .p8t-sh b { font-weight: 700; } .p8t-sl { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.p8t-li { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 9px 10px; margin: 3px 0; border-radius: 10px; font-size: 11px; } .p8t-li svg { width: 15px; height: 15px; }
.p8t-modal { position: absolute; left: 0; right: 0; bottom: 0; top: 7%; background: #f2f2f6; border-radius: 22px 22px 0 0; z-index: 3; padding: 4%; }
.p8t-scene.on .p8t-modal { animation: p8t-up .45s cubic-bezier(.2, .8, .2, 1) both; }
.p8t-mh { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin-bottom: 14px; } .p8t-mh span { color: #0a7cff; } .p8t-add { font-weight: 700; padding: 3px 7px; border-radius: 8px; }
.p8t-mb { display: flex; align-items: center; gap: 10px; background: #fff; padding: 10px; border-radius: 12px; } .p8t-mb small { display: block; color: #777; font-size: 9px; } .p8t-ml { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.p8t-menu { position: absolute; top: 14%; right: 4%; width: 74%; z-index: 3; background: #fff; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); padding: 5px; }
.p8t-scene.on .p8t-menu { animation: p8t-pop .3s ease both; } .p8t-menu .p8t-li { background: transparent; margin: 0; }
.p8t-dlg, .p8t-pop { position: absolute; z-index: 3; background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.p8t-dlg { left: 8%; right: 8%; top: 36%; } .p8t-pop { right: 3%; top: 12%; width: 52%; }
.p8t-scene.on .p8t-dlg, .p8t-scene.on .p8t-pop { animation: p8t-pop .3s ease both; }
.p8t-dh { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; } .p8t-dlg small { color: #666; display: block; margin: 0 0 12px 48px; }
.p8t-db { display: flex; justify-content: flex-end; gap: 10px; align-items: center; margin-top: 10px; color: #1a73e8; font-weight: 600; font-size: 11px; } .p8t-btn { background: #1a73e8; color: #fff; padding: 6px 12px; border-radius: 99px; }

/* home screen */
.p8t-home { position: absolute; inset: 0; background: linear-gradient(160deg, #3b3a63, #c4577a 60%, #f0a56a); padding: 16% 8% 4%; }
.p8t-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; justify-items: center; }
.p8t-ap { display: grid; place-items: center; width: 100%; }
.p8t-app { display: block; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .55); } .p8t-app.c1 { background: rgba(255, 255, 255, .4); } .p8t-app.c2 { background: rgba(255, 255, 255, .62); } .p8t-app.c3 { background: rgba(255, 255, 255, .3); } .p8t-app.c4 { background: rgba(255, 255, 255, .48); }
.p8t-me { display: grid; justify-items: center; gap: 3px; color: #fff; font-size: 7.5px; font-weight: 600; text-align: center; line-height: 1.1; }
.p8t-mel { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.p8t-scene.on .p8t-me { animation: p8t-drop .7s cubic-bezier(.2, 1.4, .4, 1) .2s both; }
.p8t-dock { position: absolute; left: 6%; right: 6%; bottom: 3%; height: 11%; border-radius: 22px; background: rgba(255, 255, 255, .28); display: flex; justify-content: space-around; align-items: center; } .p8t-dock i { width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .6); }
.p8t-win { position: absolute; inset: 6% 8% 6%; background: #fff; border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); overflow: hidden; border: 1px solid #ccc; } .p8t-wt { height: 12%; background: #f1f3f4; display: flex; align-items: center; gap: 6px; padding: 0 6px; font-weight: 600; } .p8t-wl { width: 14px; height: 14px; border-radius: 4px; object-fit: cover; }
.p8t-done { position: absolute; right: 4%; bottom: 6%; background: #12a150; color: #fff; padding: 5px 9px; border-radius: 99px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 9px; } .p8t-done svg { width: 12px; height: 12px; }
.p8t-scene.on .p8t-done { animation: p8t-pop .4s ease .5s both; }

/* touch indicator + highlight */
.p8t-finger { position: absolute; z-index: 9; left: var(--fx); top: var(--fy); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(25, 25, 28, .5); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 6px 14px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; }
.p8t-scene.on .p8t-finger { animation: p8t-tap 3.4s ease .5s both; }
.p8t-finger::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--a); opacity: 0; }
.p8t-scene.on .p8t-finger::after { animation: p8t-ring 3.4s ease .5s both; }
.p8t-scene.on .hl { animation: p8t-hl 1.1s ease .2s 3; }
@keyframes p8t-tap { 0% { opacity: 0; transform: translate(70px, 110px) scale(1); } 22% { opacity: 1; transform: translate(0, 0) scale(1); } 34% { transform: translate(0, 0) scale(.78); } 44% { transform: translate(0, 0) scale(1); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes p8t-ring { 0%, 32% { opacity: 0; transform: scale(.6); } 38% { opacity: 1; } 60%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes p8t-hl { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 0, 0); outline: 2px solid transparent; } 50% { box-shadow: 0 0 0 5px rgba(255, 190, 0, .5); outline: 2px solid #ffb800; } }
@keyframes p8t-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes p8t-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes p8t-drop { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .p8t-scene.on * { animation: none !important; } .p8t-scene.on .p8t-finger { opacity: 1; } }