:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  --background: #f2f2f7;
  --group: #ffffff;
  --field: #f2f2f7;
  --label: #000000;
  --secondary-label: #646469;
  --placeholder: #76767b;
  --separator: rgba(60, 60, 67, .18);
  --blue: #007aff;
  --button-blue: #007aff;
  --tint: rgba(0, 122, 255, .1);
  --green: #248a3d;
  --red: #d70015;
  background: var(--background);
  color: var(--label);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
main {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding: max(32px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
header { padding: 10px 16px 28px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--secondary-label); }
.badge svg { width: 13px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1 { margin: 12px 0 8px; font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.8px; }
h1 span { color: inherit; }
header p { margin: 0; color: var(--secondary-label); font-size: 15px; line-height: 1.45; letter-spacing: -.2px; }
form { margin: 0; }
.group-heading { margin: 0 16px 7px; color: var(--secondary-label); font-size: 13px; line-height: 1.4; font-weight: 400; text-transform: uppercase; letter-spacing: .1px; }
.settings-group { overflow: hidden; background: var(--group); border-radius: 10px; }
.file-row { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 14px 16px 12px; }
.file-row + .file-row::before { position: absolute; content: ""; top: 0; left: 58px; right: 0; height: .5px; background: var(--separator); }
.row-icon { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 7px; color: #fff; }
.row-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.app-icon { background: #007aff; }
.app-icon svg { fill: currentColor; stroke: none; width: 20px; height: 20px; }
.certificate-icon { background: #ff9500; }
.profile-icon { background: #af52de; }
label { font-size: 17px; font-weight: 400; letter-spacing: -.3px; }
.file-row label { grid-column: 2; align-self: center; }
small { display: block; margin-top: 2px; color: var(--secondary-label); font-size: 13px; line-height: 1.4; letter-spacing: 0; }
input { min-width: 0; max-width: 100%; font: inherit; font-size: 17px; color: var(--label); caret-color: var(--blue); }
input[type="file"] { grid-column: 2; width: 100%; min-height: 44px; margin-top: 6px; padding-block: 4px; overflow: hidden; color: var(--secondary-label); font-size: 15px; line-height: 1.4; background: transparent; border: 0; border-radius: 0; }
input::file-selector-button { min-height: 36px; padding: 6px 12px; margin-right: 9px; border: 0; border-radius: 7px; font: inherit; font-weight: 500; background: var(--field); color: var(--blue); cursor: pointer; }
input::placeholder { color: var(--placeholder); opacity: 1; }
input[type="password"] { width: 100%; min-height: 48px; padding: 12px 0; border: 0; border-radius: 0; outline-offset: -3px; background: transparent; appearance: none; -webkit-appearance: none; }
.password-row { display: flex; align-items: center; gap: 12px; padding-inline: 16px; margin-top: 23px; }
.password-row label { flex-shrink: 0; }
.password-row input { flex: 1; text-align: right; }
.profile-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; margin-top: 23px; padding: 12px 16px; cursor: pointer; }
.profile-option > span { flex: 1; }
.profile-option input { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 51px; width: 51px; height: 31px; margin: 0; border: 0; border-radius: 20px; background: var(--separator); cursor: pointer; transition: background-color .15s ease; }
.profile-option input::before { content: ""; position: absolute; width: 27px; height: 27px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .15s ease; }
.profile-option input:checked { background: #34c759; }
.profile-option input:checked::before { transform: translateX(20px); }
#bundle-id-note { margin: -8px 0 16px; overflow-wrap: anywhere; }
.group-footer { margin: 7px 16px 0; color: var(--secondary-label); font-size: 13px; line-height: 1.4; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
button, .button { display: flex; align-items: center; justify-content: center; min-height: 50px; width: 100%; padding: 13px 16px; border: 0; border-radius: 12px; background: var(--button-blue); color: #fff; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.3px; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity .15s ease, background-color .15s ease; }
button:active, .button:active { opacity: .65; }
button:disabled { background: var(--separator); color: var(--secondary-label); cursor: default; opacity: .7; }
button:disabled:active { opacity: .7; }
.secondary { background: var(--group); color: var(--blue); font-weight: 400; }
.destructive { color: var(--red); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.status { min-height: 20px; margin: 10px 16px 0; color: var(--secondary-label); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.error { color: var(--red); }
#result { margin-top: 28px; padding: 20px 16px 16px; background: var(--group); border-radius: 10px; }
.result-heading { display: flex; align-items: center; gap: 8px; }
.success-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: white; font-size: 14px; font-weight: 700; }
h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.4px; margin: 0; font-weight: 600; }
h3 { font-size: 17px; margin: 0; font-weight: 600; letter-spacing: -.3px; }
#app-name { margin: 8px 0 18px; color: var(--secondary-label); font-size: 13px; overflow-wrap: anywhere; }
#result .secondary { background: var(--field); }
#result .actions { margin-top: 18px; }
#result .destructive { background: transparent; }
hr { height: .5px; margin: 24px 0 20px; background: var(--separator); border: 0; }
.hint { margin: 7px 0 0; color: var(--secondary-label); font-size: 13px; line-height: 1.45; }
.hint:empty { display: none; }
.hosting-key { margin-top: 20px; }
.hosting-key label { font-size: 13px; color: var(--secondary-label); }
.hosting-key input { display: block; margin-top: 7px; padding-inline: 12px; border-radius: 8px; background: var(--field); }
#hosting-note { margin-top: 12px; }
details { margin-top: 30px; background: var(--group); border-radius: 10px; }
summary { position: relative; display: block; list-style: none; min-height: 48px; padding: 13px 36px 13px 16px; color: var(--label); font-size: 17px; letter-spacing: -.3px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 18px; top: 20px; width: 7px; height: 7px; border-top: 2px solid var(--placeholder); border-right: 2px solid var(--placeholder); transform: rotate(45deg); transition: transform .15s ease; }
details[open] summary::after { transform: translateY(-2px) rotate(135deg); }
details ul { margin: 0 16px; padding: 14px 0 16px 18px; border-top: .5px solid var(--separator); color: var(--secondary-label); font-size: 13px; line-height: 1.5; }
li + li { margin-top: 12px; }
footer { margin: 22px 16px 0; color: var(--secondary-label); font-size: 12px; line-height: 1.5; text-align: center; }
footer a { display: block; width: fit-content; min-height: 44px; margin-inline: auto; padding-block: 12px; color: var(--blue); text-decoration: none; }
[hidden] { display: none !important; }

@media (min-width: 700px) { main { padding-top: 56px; padding-bottom: 56px; } }
@media (max-width: 359px) { main { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); } .file-row { column-gap: 10px; padding-inline: 12px; } .file-row + .file-row::before { left: 52px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --group: #1c1c1e;
    --field: #2c2c2e;
    --label: #ffffff;
    --secondary-label: #ababaf;
    --placeholder: #98989f;
    --separator: rgba(84, 84, 88, .65);
    --blue: #0a84ff;
    --tint: rgba(10, 132, 255, .15);
    --green: #30d158;
    --red: #ff453a;
  }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media (prefers-contrast: more) {
  :root { --secondary-label: #48484a; --placeholder: #48484a; --separator: #8e8e93; --blue: #005ec4; --button-blue: #005ec4; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --secondary-label: #d1d1d6; --placeholder: #bcbcc0; --separator: #8e8e93; --blue: #78b9ff; }
}