:root{--color-bg:#0f1115;--color-surface:#171a21;--color-border:#2a2e37;--color-text:#e8eaed;--color-muted:#9aa0a6;--color-mock:#22c55e;--color-live:#ef4444;--color-accent:#3b82f6}*{box-sizing:border-box}body,html{padding:0;margin:0}body{background:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}a{color:var(--color-accent)}.page{max-width:960px;margin:0 auto;padding:2rem 1.5rem}.muted{color:var(--color-muted)}.links{display:flex;gap:1rem;margin-top:1rem}.badge{display:flex;flex-direction:column;gap:.25rem;border:1px solid var(--color-border);border-radius:8px;padding:.75rem 1rem;margin:1.5rem 0;background:var(--color-surface)}.badge-mock strong{color:var(--color-mock)}.badge-live strong{color:var(--color-live)}.badge-detail{font-size:.85rem;color:var(--color-muted)}.placeholder{border:1px dashed var(--color-border);border-radius:8px;padding:1rem;color:var(--color-muted)}.phone-frame{width:320px;border:8px solid var(--color-surface);border-radius:32px;background:var(--color-surface);padding:.5rem;margin-top:1.5rem}.phone-notch{width:80px;height:16px;background:var(--color-border);border-radius:8px;margin:0 auto .5rem}.phone-screen{background:#000;border-radius:20px;min-height:480px;display:flex;flex-direction:column}.phone-header{padding:.75rem 1rem;border-bottom:1px solid var(--color-border);font-weight:600}.phone-body{flex:1 1;padding:1rem}.placeholder-text{color:var(--color-muted)}.phone-input{padding:.75rem 1rem;border-top:1px solid var(--color-border)}.phone-input-box{display:block;border:1px solid var(--color-border);border-radius:999px;padding:.5rem 1rem;color:var(--color-muted)}