:root{--ink:#1d1b20;--muted:#6b6670;--line:#e2dfe6;--pink:#d8329a;--bg:#f6f4f1;--panel:#fff}
@media (prefers-color-scheme:dark){:root{--ink:#f1eef4;--muted:#a49fab;--line:#37323d;--bg:#141217;--panel:#1d1a21}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Poppins,system-ui,Arial,sans-serif;line-height:1.5}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
header strong{font-size:18px}header span{color:var(--muted);font-size:13px}
main{display:grid;grid-template-columns:minmax(300px,480px) 1fr;gap:22px;padding:22px;max-width:1100px;margin:0 auto}
@media(max-width:820px){main{grid-template-columns:1fr;padding:14px}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
h1{font-size:20px;margin:0 0 14px}
.field{display:block;font-size:13px;font-weight:500;margin-bottom:12px;color:var(--ink)}
.field small{color:var(--muted);font-weight:400}
input[type=text],input[type=password],textarea,select,input[type=file]{display:block;width:100%;margin-top:5px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:14px}
textarea{resize:vertical}
input[type=color]{display:block;width:100%;height:38px;margin-top:5px;border:1px solid var(--line);border-radius:8px;background:transparent;padding:2px}
input[type=range]{display:block;width:100%;margin-top:14px;accent-color:var(--pink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.actions .primary{grid-column:1/-1}
button{font:inherit;font-weight:600;font-size:14px;padding:12px;border-radius:10px;border:1px solid var(--line);cursor:pointer;color:var(--ink);background:transparent}
button.primary{background:var(--pink);border-color:var(--pink);color:#fff}
button:disabled{opacity:.5;cursor:wait}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.progress{height:6px;background:var(--line);border-radius:6px;margin-top:14px;overflow:hidden}
.progress div{height:100%;width:0;background:var(--pink);transition:width .2s}
.status{margin:12px 0 0;font-size:14px}.sync-info{margin:4px 0 0;font-size:12px;color:var(--muted)}
.preview-panel{display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{height:min(78vh,720px);aspect-ratio:9/16;max-width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000}
.phone canvas{width:100%;height:100%;display:block}
audio{width:min(100%,420px)}
.download{display:inline-block;background:var(--pink);color:#fff;text-decoration:none;font-weight:600;padding:12px 20px;border-radius:10px}
footer{text-align:center;color:var(--muted);font-size:12px;padding:6px 16px 26px}

.tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:16px;padding:4px;background:var(--bg);border-radius:12px}
.tab{padding:10px 8px;border:0;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted)}
.tab.on{background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.hint{margin:0 0 14px;font-size:13px;color:var(--muted)}
[hidden]{display:none!important}