/* APKTrack product surface — intentionally calm, direct and high contrast. */

:root {
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wide: 1280px;
  --bg: #f5f5f0;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --panel-3: #efefe9;
  --sunken: #ecece5;
  --hair: #17191414;
  --hair-2: #1719142b;
  --hair-top: #ffffff;
  --ink: #151713;
  --ink-2: #55594e;
  --ink-3: #7d8175;
  --brand: #151713;
  --brand-2: #151713;
  --brand-3: #b7f23d;
  --brand-grad: #151713;
  --brand-soft: #e6f7bd;
  --on-brand: #ffffff;
  --ok: #247a49;
  --ok-2: #b7f23d;
  --warn: #9a5e0c;
  --warn-2: #ffc66e;
  --bad: #bf3838;
  --bad-2: #ff8a8a;
  --sh-sm: 0 1px 2px #1719140a;
  --sh: 0 12px 32px #1719140d;
  --sh-lg: 0 24px 80px #17191414;
  --sh-brand: none;
  --sh-inset: none;
  --r-xs: 7px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11120f;
    --panel: #191a17;
    --panel-2: #191a17;
    --panel-3: #20211d;
    --sunken: #0c0d0b;
    --hair: #ffffff12;
    --hair-2: #ffffff24;
    --hair-top: #ffffff12;
    --ink: #f5f6ef;
    --ink-2: #b0b4a7;
    --ink-3: #82877b;
    --brand: #b7f23d;
    --brand-2: #b7f23d;
    --brand-3: #b7f23d;
    --brand-grad: #b7f23d;
    --brand-soft: #b7f23d1a;
    --on-brand: #11120f;
    --ok: #8bddad;
    --ok-2: #b7f23d;
    --warn: #ffc66e;
    --bad: #ff8a8a;
    --seal-ring: #11120f;
    --sh-sm: 0 1px 2px #00000033;
    --sh: 0 16px 40px #00000033;
    --sh-lg: 0 30px 90px #00000066;
  }
}

:root[data-theme="dark"] {
  --bg: #11120f;
  --panel: #191a17;
  --panel-2: #191a17;
  --panel-3: #20211d;
  --sunken: #0c0d0b;
  --hair: #ffffff12;
  --hair-2: #ffffff24;
  --hair-top: #ffffff12;
  --ink: #f5f6ef;
  --ink-2: #b0b4a7;
  --ink-3: #82877b;
  --brand: #b7f23d;
  --brand-2: #b7f23d;
  --brand-3: #b7f23d;
  --brand-grad: #b7f23d;
  --brand-soft: #b7f23d1a;
  --on-brand: #11120f;
  --ok: #8bddad;
  --ok-2: #b7f23d;
  --warn: #ffc66e;
  --bad: #ff8a8a;
  --seal-ring: #11120f;
  --sh-sm: 0 1px 2px #00000033;
  --sh: 0 16px 40px #00000033;
  --sh-lg: 0 30px 90px #00000066;
}

html { scroll-behavior: smooth }
body { background: var(--bg); font-size: 15px; letter-spacing: -.005em }
.aura, .grain { display: none }
h1, h2, h3 { font-weight: 720; letter-spacing: -.045em }

/* Chrome */
.topbar { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--hair); backdrop-filter: blur(16px) }
.topbar::before { display: none }
.topbar-inner { height: 68px; padding-inline: clamp(1rem, 4vw, 2.5rem) }
.brand { gap: .7rem }
.brand-chip { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--bg); box-shadow: none }
.brand-chip svg { width: 18px; height: 18px }
.brand-name { font-size: 1rem; font-weight: 760; letter-spacing: -.035em }
.nav { gap: .2rem; margin-left: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none }
.nav button { height: 38px; padding: 0 .9rem; border-radius: 9px; color: var(--ink-2); font-size: .82rem; font-weight: 630 }
.nav button:hover { background: var(--panel-3) }
.nav button.active { background: var(--ink); color: var(--bg); box-shadow: none }
.nav button.active .ico { color: inherit }
.themeswitch { width: 38px; height: 38px; margin-left: .25rem; border-color: var(--hair); border-radius: 10px; background: transparent; box-shadow: none }
main { padding: 0 clamp(1rem, 4vw, 2.5rem) 7rem }

.sitefoot { border-top-color: var(--hair); background: transparent }
.sitefoot-inner { display: grid; grid-template-columns: 1fr auto; gap: 1rem 3rem; padding: 2.25rem clamp(1rem, 4vw, 2.5rem) 3rem }
.sitefoot-brand { font-size: .9rem }
.sitefoot-note { margin: 0; text-align: right }
.sitefoot-facts { grid-column: 1 / -1; margin-top: 0 }

/* Controls */
.btn { height: 44px; border-radius: 10px; font-weight: 680; box-shadow: none }
.btn.primary { background: var(--ink); color: var(--bg); box-shadow: none }
.btn.primary:hover:not(:disabled) { transform: translateY(-1px); filter: none; box-shadow: 0 8px 22px #15171324 }
.btn.ghost { border-color: var(--hair-2); background: transparent }
.btn.ghost:hover:not(:disabled) { border-color: var(--ink); background: var(--panel-3); transform: none }
.btn.block { height: 52px; font-size: .95rem }
input, select, textarea { height: 48px; padding-inline: .95rem; border-color: var(--hair-2); border-radius: 10px; background: var(--panel); font-size: .9rem; box-shadow: inset 0 1px 0 var(--hair-top) }
textarea { height: auto; padding-block: .75rem }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent) }
label { font-size: .78rem; font-weight: 680 }
.hint { line-height: 1.45 }
.pill { height: 34px; border-radius: 9px; background: transparent }
.pill[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); box-shadow: none }
.check input:checked + .check-box { border-color: var(--ink); background: var(--ink); box-shadow: none }

/* Directory */
.masthead { display: block; margin-top: 2rem; min-height: 500px; padding: clamp(2rem, 7vw, 5.6rem); border: 0; border-radius: 24px; background: #171914; color: #f7f8f1; box-shadow: none }
.masthead::before { inset: auto 0 0 auto; width: 44%; height: 100%; background: repeating-linear-gradient(135deg, transparent 0 18px, #b7f23d10 18px 19px); opacity: 1 }
.masthead-copy { max-width: 820px }
.masthead h1 { max-width: 15ch; font-size: clamp(2.6rem, 6.5vw, 5.6rem); line-height: .96; letter-spacing: -.072em }
.masthead h1 em { color: #b7f23d; font-style: normal }
.masthead-lead { max-width: 58ch; margin-top: 1.5rem; color: #c4c8bc; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.6 }
.proofrow { margin-top: 1.5rem }
.proof { padding: .45rem .7rem; border-color: #ffffff1f; border-radius: 8px; background: #ffffff0b; color: #dfe2d8 }
.proof .ico { color: #b7f23d }
.searchrow { max-width: 680px; margin-top: 2.4rem }
.searchbox input { height: 56px; border: 0; border-radius: 12px; background: #f7f8f1; color: #171914; box-shadow: none }
.searchbox input::placeholder { color: #6b6f65 }
.searchbox .ico, .searchbox:focus-within .ico { color: #55594e }
.searchrow .btn { height: 56px; padding-inline: 1.35rem; background: #b7f23d; color: #171914 }
.art { display: none }
.browse { margin-top: 3.25rem }
.browse-head { margin-top: 2rem }
.browse-head h2 { font-size: 1.55rem; letter-spacing: -.045em }
.cardgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem }
.pcard { min-height: 240px; padding: 1.4rem; border-color: var(--hair-2); border-radius: 16px; background: var(--panel); box-shadow: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease }
.pcard::before, .pcard-sheen { display: none }
.pcard:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--sh) }
.mono { border-radius: 12px; background: var(--ink) !important; color: var(--bg); box-shadow: none }
.pcard-name { font-size: 1rem }
.pcard-desc { font-size: .88rem; line-height: 1.6 }
.chansum-lead, .tag { border-radius: 7px }
.empty { min-height: 280px; border: 1px dashed var(--hair-2); border-radius: 16px; background: transparent }
.empty-badge { border: 0; border-radius: 12px; background: var(--ink); color: var(--bg) }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: 1rem }

/* Project */
.backlink { margin-top: 2rem }
.applayout { grid-template-columns: minmax(0, 1fr) 390px; gap: 2rem; margin-top: 1.25rem }
.appmain { gap: 1rem }
.apphero { min-height: 360px; padding: clamp(1.7rem, 5vw, 3.5rem); border: 1px solid var(--hair-2); border-radius: 20px; background: var(--panel); box-shadow: none }
.apphero-wash { inset: auto 0 0 auto; width: 55%; height: 100%; background: repeating-linear-gradient(135deg, transparent 0 20px, color-mix(in srgb, var(--ink) 4%, transparent) 20px 21px); opacity: 1 }
.mono.large { width: 88px; height: 88px; border-radius: 22px }
.mono.large .mono-letters { font-size: 1.8rem }
.apphero h1 { font-size: clamp(2.25rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.065em }
.apphero-desc { max-width: 55ch; margin-top: 2rem; font-size: 1.02rem }
.maintainer { border-radius: 8px; background: var(--panel-3) }
.statusboard { gap: .65rem }
.statustile { min-height: 125px; padding: 1rem; border-color: var(--hair); border-radius: 14px; background: transparent; box-shadow: none }
.comparecard, .disclosure { border-color: var(--hair-2); border-radius: 16px; background: var(--panel); box-shadow: none }
.comparerow { border-radius: 10px }
.comparerow.active { border-color: var(--ink); background: var(--panel-3) }
.getpanel { top: 88px }
.getcard { border: 0; border-radius: 20px; background: #171914; color: #f7f8f1; box-shadow: var(--sh-lg) }
.getcard-glow { display: none }
.getcard-head { border-color: #ffffff14 }
.getcard-sub, .versionfacts, .getcard-caveat { color: #aeb3a7 }
.switcher { border-color: #ffffff1a; background: #0e0f0d }
.switch { color: #aeb3a7 }
.switch.active { color: #171914 }
.switcher-thumb { background: #b7f23d; box-shadow: none }
.switch-dot { background: currentColor }
.getcard .btn.primary { background: #b7f23d; color: #171914 }
.getcard-links { border-color: #ffffff14 }
.getcard .textlink, .getcard .compat { color: #d9ddd2 }
.qrdevice { margin-top: 1.2rem; border: 0; border-radius: 14px; background: #f7f8f1 }
.qrscreen { border: 0; background: #fff }
.qrhint { color: #55594e }
.disclosure summary:hover { background: var(--panel-3) }

/* Trust */
.trusthead { margin-top: 4rem }
.trusthead h1 { max-width: 14ch; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1; letter-spacing: -.065em }
.stagecard, .chain, .closing { border-color: var(--hair-2); background: var(--panel); box-shadow: none }

/* Setup */
.view-setup { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2rem; align-items: start; padding-top: 2rem }
.stepper { position: sticky; top: 92px; margin: 0; padding: .75rem; border: 1px solid var(--hair-2); border-radius: 16px; background: var(--panel); box-shadow: none }
.phases { display: grid; grid-template-columns: 1fr; gap: .3rem }
.phase { padding: .55rem }
.phase + .phase { border-top: 1px solid var(--hair) }
.phase-label { margin: 0 0 .35rem .45rem; font-size: .62rem; letter-spacing: .12em }
.phase.current .phase-label { background: none; color: var(--ink) }
.phase-nodes { display: grid; grid-template-columns: 1fr; gap: .12rem }
.phase-nodes::before { display: none }
.node { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: .6rem; padding: .42rem; border-radius: 9px; text-align: left }
.node-dot { width: 26px; height: 26px; border-radius: 8px; background: transparent }
.node-name { font-size: .78rem; text-align: left }
.node.done .node-dot { border-color: var(--hair-2); background: var(--panel-3); color: var(--ink) }
.node.active { background: var(--ink) }
.node.active .node-dot { border-color: #ffffff2b; background: #b7f23d; color: #171914; box-shadow: none; transform: none }
.node.active .node-name { color: var(--bg) }
.setuplayout { grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem }
.setuppanel { padding: clamp(1.4rem, 4vw, 2.5rem); border-color: var(--hair-2); border-radius: 18px; background: var(--panel); box-shadow: none }
.setuphead { padding-bottom: 1.6rem }
.setuphead h1 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.06em }
.setuphead-lead { max-width: 52ch; margin-top: .8rem; font-size: .94rem; line-height: 1.6 }
.eyebrow { color: var(--ink-3); font-size: .68rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase }
.group { padding-block: 1.65rem }
.group-head h2 { font-size: 1.08rem }
.group-head p { margin-top: .35rem; line-height: 1.55 }
.scope, .rolecard, .note, .terminal, .completion { border-color: var(--hair-2); border-radius: 14px; background: var(--panel-3); box-shadow: none }
.scope::before { height: 2px; background: var(--ink) }
.scope.prod, .scope.dev { --dot: var(--ink) }
.rolecard-icon, .note-badge { border: 0; background: var(--ink); color: var(--bg) }
.previewpanel { top: 92px }
.preview { border-color: var(--hair-2); border-radius: 16px; background: var(--panel); box-shadow: none }
.preview .pcard { min-height: 0; background: var(--panel-3) }
.setupfoot { position: sticky; bottom: 0; z-index: 5; margin: 2rem -1rem -1rem; padding: 1rem; border: 1px solid var(--hair); border-radius: 12px; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(14px) }
.setupfoot .btn.primary { min-width: 126px }

@media (max-width: 1080px) {
  .view-setup { grid-template-columns: 190px minmax(0, 1fr); gap: 1rem }
  .setuplayout { grid-template-columns: minmax(0, 1fr) }
  .previewpanel { position: static }
  .preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem }
  .preview-title, .preview-note { grid-column: 1 / -1 }
}

@media (max-width: 820px) {
  .topbar-inner { height: 60px }
  .nav { position: static; display: flex; margin-left: auto; border: 0; background: transparent; backdrop-filter: none; box-shadow: none }
  .nav button { flex-direction: row; height: 36px; padding-inline: .65rem }
  .nav button .ico { --ico-w: 15px }
  .nav-label { font-size: .75rem }
  .sitefoot-inner { display: block }
  .sitefoot-note { margin-top: .7rem; text-align: left }
  .masthead { min-height: 0; padding: 2.2rem 1.4rem }
  .masthead h1 { font-size: clamp(2.4rem, 12vw, 4.2rem) }
  .proofrow { display: none }
  .applayout { grid-template-columns: 1fr }
  .getpanel { position: static }
  .view-setup { display: block; padding-top: 1rem }
  .stepper { position: static; margin-bottom: 1rem; padding: .7rem }
  .phases { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none }
  .phase, .phase.current { display: block; flex: 0 0 auto; padding: .25rem }
  .phase + .phase { border-top: 0 }
  .phase-label { display: none }
  .phase-nodes { display: flex }
  .node { grid-template-columns: 26px; padding: .3rem }
  .node-name { display: none }
}

@media (max-width: 600px) {
  main { padding-inline: .8rem; padding-bottom: 5rem }
  .brand-name { display: none }
  .nav { gap: 0 }
  .nav button { padding-inline: .5rem }
  .themeswitch { width: 34px; height: 34px }
  .masthead { margin-top: .8rem; border-radius: 18px }
  .masthead h1 { font-size: 2.55rem }
  .masthead-lead { font-size: .92rem }
  .searchrow { flex-direction: column }
  .searchrow .btn { width: 100% }
  .browse { margin-top: 2.25rem }
  .browse-controls { align-items: stretch }
  .browse-controls .pillgroup { width: 100% }
  .browse-controls .pill { flex: 1 }
  .pcard { min-height: 220px }
  .apphero { min-height: 0; padding: 1.35rem }
  .apphero-row { align-items: flex-start }
  .mono.large { width: 64px; height: 64px; border-radius: 16px }
  .apphero h1 { font-size: 2.25rem }
  .getcard { border-radius: 16px }
  .setuppanel { padding: 1.2rem; border-radius: 16px }
  .setuphead h1 { font-size: 2.15rem }
  .preview { grid-template-columns: 1fr }
  .pair, .scopes, .rolegrid { grid-template-columns: 1fr }
  .setupfoot { position: static; margin-inline: 0; margin-bottom: 0; padding: 1rem 0 0; border-width: 1px 0 0; border-radius: 0; background: transparent; backdrop-filter: none }
  .setupfoot .btn { flex: 1 }
}