/* =========================================================================
   apps.schiri.dev — "Release Console"
   Dark, terminal-grade build registry. Monospace, phosphor accent, CRT grain.
   ========================================================================= */

/* ----------------------------------------------------------------- fonts */
@font-face { font-family:"Plex Mono"; src:url("/fonts/plexmono-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("/fonts/plexmono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("/fonts/plexmono-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("/fonts/plexmono-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Martian Mono"; src:url("/fonts/martianmono-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Martian Mono"; src:url("/fonts/martianmono-800.woff2") format("woff2"); font-weight:800; font-display:swap; }

/* --------------------------------------------------------------- tokens */
:root{
  --bg:#0a0b0e;
  --bg-elev:#101218;
  --bg-elev-2:#151823;
  --bg-input:#0c0e13;
  --line:#222634;
  --line-soft:#191c26;
  --text:#d9dde6;
  --text-dim:#8b93a4;
  --text-faint:#5a6273;
  --accent:#5cf2a0;          /* phosphor mint — global accent */
  --accent-ink:#06140d;
  --accent-glow:rgba(92,242,160,.18);
  --amber:#ffb000;
  --danger:#ff5d6c;
  --mono:"Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display:"Martian Mono", "Plex Mono", ui-monospace, monospace;
  --radius:4px;
  --maxw:1120px;
  --bar-h:60px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.6;
  letter-spacing:.01em;
  font-feature-settings:"ss01","zero";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* --------------------------------------------------- atmospheric layers */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.fx-grid{
  background-image:
    linear-gradient(to right, rgba(122,142,176,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122,142,176,.07) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 135% 105% at 50% 0%, #000 52%, transparent 94%);
  opacity:1;
}
.fx-glow{
  background:
    radial-gradient(72% 46% at 50% -10%, var(--accent-glow), transparent 72%),
    radial-gradient(44% 32% at 93% 1%, rgba(124,196,255,.10), transparent 70%),
    radial-gradient(80% 60% at 50% 116%, rgba(0,0,0,.55), transparent 62%);
}
.fx-scan{
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.5;
}
.fx-noise{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.035; mix-blend-mode:screen;
}

/* ------------------------------------------------------------ top bar */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  height:var(--bar-h); padding:0 22px;
  border-bottom:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px) saturate(120%);
}
.bar__brand{ display:inline-flex; align-items:baseline; gap:8px; }
.bar__sigil{ color:var(--accent); font-weight:700; transform:translateY(1px); }
.bar__wordmark{
  font-family:var(--display); font-weight:800; font-size:15px;
  letter-spacing:.02em; color:var(--text);
}
.bar__wordmark .dot{ color:var(--accent); }
.bar__cursor{ width:8px; height:15px; background:var(--accent); display:inline-block; transform:translateY(2px);
  animation:blink 1.1s steps(1) infinite; box-shadow:0 0 8px var(--accent-glow); }
@keyframes blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
.bar__spacer{ flex:1; }
.bar__auth{ display:flex; align-items:center; gap:12px; font-size:12.5px; }

.who{ color:var(--text-dim); white-space:nowrap; }
.who b{ color:var(--accent); font-weight:600; }
.who .at{ color:var(--text-faint); }

/* ---------------------------------------------------------- buttons */
.btn{
  --b:var(--line);
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border:1px solid var(--b); border-radius:var(--radius);
  background:var(--bg-elev); color:var(--text);
  font-size:12.5px; font-weight:500; letter-spacing:.03em; white-space:nowrap;
  transition:border-color .14s, background .14s, color .14s, box-shadow .14s, transform .08s;
}
.btn:hover{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-glow), 0 0 18px -6px var(--accent-glow); }
.btn:active{ transform:translateY(1px); }
.btn__bracket{ color:var(--accent); font-weight:700; }
.btn--ghost{ background:transparent; }
.btn--accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.btn--accent .btn__bracket{ color:var(--accent-ink); }
.btn--accent:hover{ filter:brightness(1.08); box-shadow:0 0 22px -4px var(--accent-glow); }
.btn--block{ width:100%; justify-content:center; padding:11px; }
.btn--sm{ padding:5px 10px; font-size:11.5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; border-color:var(--line); }

/* ------------------------------------------------------------- shell */
.shell{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw);
  margin:0 auto; padding:46px 22px 70px;
  flex:1;
}

/* section heading like a comment line */
.kicker{
  display:flex; align-items:center; gap:12px;
  color:var(--text-faint); font-size:12px; letter-spacing:.08em; text-transform:lowercase;
  margin:0 0 4px;
}
.kicker::after{ content:""; flex:1; height:1px; background:linear-gradient(to right,var(--line),transparent); }
.kicker b{ color:var(--accent); font-weight:600; }

/* hero / intro line on home */
.intro{ margin-bottom:34px; }
.intro__line{ color:var(--text-dim); font-size:13px; }
.intro__line .p{ color:var(--accent); }
.intro h1{
  font-family:var(--display); font-weight:800; font-size:clamp(26px,4.4vw,40px);
  line-height:1.1; letter-spacing:.005em; margin:10px 0 0; color:var(--text);
}
.intro h1 .accent{ color:var(--accent); }
.intro__sub{ color:var(--text-dim); margin-top:12px; max-width:62ch; font-size:13.5px; }

/* ------------------------------------------------------- catalog grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; margin-top:8px; }

.card{
  --acc:var(--accent);
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:20px 20px 16px; min-height:178px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2));
  overflow:hidden; isolation:isolate;
  transition:border-color .16s, transform .16s, box-shadow .16s;
}
.card::before{ /* corner accent tick */
  content:""; position:absolute; top:0; left:0; width:34px; height:2px; background:var(--acc);
  box-shadow:0 0 14px -1px var(--acc); opacity:.85;
}
.card::after{ /* hover sheen */
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .18s;
  background:radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--acc) 14%, transparent), transparent 60%);
}
.card:hover{ border-color:color-mix(in oklab,var(--acc) 60%, var(--line)); transform:translateY(-3px);
  box-shadow:0 14px 40px -22px var(--acc); }
.card:hover::after{ opacity:1; }

.card__top{ display:flex; align-items:flex-start; gap:14px; }
.card__icon{
  width:46px; height:46px; flex:none; border-radius:9px; border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden;
  background:color-mix(in oklab, var(--acc) 12%, var(--bg-input)); color:var(--acc);
  font-family:var(--display); font-weight:800; font-size:19px;
}
.card__icon img{ width:100%; height:100%; object-fit:cover; }
.card__id{ min-width:0; }
.card__name{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.01em;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card__slug{ color:var(--text-faint); font-size:11.5px; }
.card__slug::before{ content:"~/"; color:color-mix(in oklab,var(--acc) 70%, var(--text-faint)); }
.card__tag{ color:var(--text-dim); font-size:13px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__meta{
  margin-top:auto; display:flex; align-items:center; gap:0; flex-wrap:wrap;
  padding-top:13px; border-top:1px dashed var(--line-soft);
  color:var(--text-faint); font-size:11.5px; letter-spacing:.02em;
}
.card__meta .v{ color:var(--acc); font-weight:600; }
.card__meta .seg+.seg::before{ content:"·"; margin:0 8px; color:var(--line); }
.card__go{ margin-left:auto; color:var(--text-faint); transition:color .16s, transform .16s; }
.card:hover .card__go{ color:var(--acc); transform:translateX(3px); }
.card__none{ color:var(--text-faint); }
.card__none b{ color:var(--amber); }

/* ----------------------------------------------------- app detail page */
.back{ display:inline-flex; align-items:center; gap:8px; color:var(--text-dim); font-size:12.5px; margin-bottom:26px; }
.back:hover{ color:var(--accent); }
.back .arr{ color:var(--accent); }

.apphead{ --acc:var(--accent); display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;
  padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:30px; }
.apphead__icon{
  width:72px; height:72px; flex:none; border-radius:14px; border:1px solid var(--line); overflow:hidden;
  display:grid; place-items:center; background:color-mix(in oklab,var(--acc) 14%, var(--bg-input));
  color:var(--acc); font-family:var(--display); font-weight:800; font-size:30px;
  box-shadow:0 0 0 1px var(--bg), 0 14px 36px -24px var(--acc);
}
.apphead__icon img{ width:100%; height:100%; object-fit:cover; }
.apphead__main{ min-width:240px; flex:1; }
.apphead__name{ font-family:var(--display); font-weight:800; font-size:clamp(24px,3.6vw,32px);
  letter-spacing:.01em; margin:0; color:var(--text); }
.apphead__tag{ color:var(--text-dim); margin:8px 0 0; font-size:14px; }
.apphead__desc{ color:var(--text-dim); margin-top:14px; max-width:72ch; font-size:13.5px; }
.apphead__stat{ display:flex; gap:18px; margin-top:16px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; gap:1px; }
.stat__n{ color:var(--acc); font-weight:700; font-size:18px; font-family:var(--display); }
.stat__l{ color:var(--text-faint); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }

/* releases list */
.rel{ --acc:var(--accent); border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,var(--bg-elev),var(--bg-elev-2)); margin-bottom:14px; overflow:hidden; }
.rel.is-latest{ border-color:color-mix(in oklab,var(--acc) 45%, var(--line)); }
.rel__head{ display:flex; align-items:center; gap:14px; padding:15px 18px; flex-wrap:wrap; }
.rel__ver{ font-family:var(--display); font-weight:700; font-size:17px; color:var(--text); }
.rel__ver .vp{ color:var(--acc); }
.tagpill{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:2.5px 8px; border-radius:100px;
  border:1px solid var(--line); color:var(--text-dim); }
.tagpill--latest{ color:var(--accent-ink); background:var(--acc); border-color:var(--acc); font-weight:700; }
.tagpill--beta{ color:var(--amber); border-color:color-mix(in oklab,var(--amber) 50%, var(--line)); }
.rel__spacer{ flex:1; }
.rel__meta{ color:var(--text-faint); font-size:11.5px; }
.rel__meta .seg+.seg::before{ content:"·"; margin:0 8px; color:var(--line); }
.rel__body{ padding:0 18px 18px; }
.rel__cl{ border-top:1px dashed var(--line-soft); padding-top:14px; }

/* changelog markdown */
.changelog{ color:var(--text-dim); font-size:13px; }
.changelog>*:first-child{ margin-top:0; }
.changelog>*:last-child{ margin-bottom:0; }
.changelog h1,.changelog h2,.changelog h3,.changelog h4{
  font-family:var(--display); font-weight:700; color:var(--text); letter-spacing:.02em;
  font-size:12px; text-transform:uppercase; margin:18px 0 8px; }
.changelog h1::before,.changelog h2::before,.changelog h3::before,.changelog h4::before{
  content:"# "; color:var(--acc); }
.changelog p{ margin:8px 0; }
.changelog ul,.changelog ol{ margin:8px 0; padding-left:4px; list-style:none; }
.changelog li{ position:relative; padding-left:20px; margin:5px 0; }
.changelog ul>li::before{ content:"+"; position:absolute; left:2px; color:var(--acc); font-weight:700; }
.changelog ol{ counter-reset:i; }
.changelog ol>li{ counter-increment:i; }
.changelog ol>li::before{ content:counter(i)"."; position:absolute; left:0; color:var(--acc); }
.changelog a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.changelog code{ background:var(--bg-input); border:1px solid var(--line-soft); border-radius:3px;
  padding:1px 5px; font-size:12px; color:var(--text); }
.changelog pre{ background:var(--bg-input); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; overflow:auto; }
.changelog pre code{ border:0; padding:0; background:none; }
.changelog blockquote{ border-left:2px solid var(--acc); margin:8px 0; padding:2px 0 2px 14px; color:var(--text-faint); }
.changelog strong{ color:var(--text); font-weight:600; }
.changelog hr{ border:0; border-top:1px dashed var(--line); margin:14px 0; }

.rel__actions{ margin-top:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rel__lock{ color:var(--text-faint); font-size:11.5px; display:inline-flex; align-items:center; gap:6px; }
.rel__lock .k{ color:var(--amber); }

/* ------------------------------------------------------------- states */
.empty{ border:1px dashed var(--line); border-radius:var(--radius); padding:34px; text-align:center;
  color:var(--text-faint); background:var(--bg-elev); }
.empty b{ color:var(--amber); }
.loading{ color:var(--text-faint); padding:40px 0; font-size:13px; }
.loading::after{ content:"_"; color:var(--accent); animation:blink 1s steps(1) infinite; }
.error{ color:var(--danger); border:1px solid color-mix(in oklab,var(--danger) 40%,var(--line));
  border-radius:var(--radius); padding:16px 18px; background:color-mix(in oklab,var(--danger) 7%, var(--bg-elev)); }

/* --------------------------------------------------------------- modal */
.modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__scrim{ position:absolute; inset:0; background:rgba(4,5,8,.74); backdrop-filter:blur(3px);
  animation:fade .18s ease; }
.modal__panel{ position:relative; width:min(420px,100%); border:1px solid var(--line); border-radius:6px;
  background:linear-gradient(180deg,var(--bg-elev),var(--bg-elev-2));
  box-shadow:0 30px 80px -30px #000, 0 0 0 1px var(--accent-glow);
  animation:pop .2s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
.modal__panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right,var(--accent),transparent 60%); box-shadow:0 0 12px var(--accent-glow); }
.modal__head{ display:flex; align-items:center; gap:10px; padding:16px 18px 4px; }
.modal__prompt{ color:var(--accent); font-size:12px; }
.modal__prompt::before{ content:"~ $ "; color:var(--text-faint); }
.modal__title{ font-family:var(--display); font-weight:700; font-size:15px; margin:0; letter-spacing:.02em; }
.modal__x{ margin-left:auto; background:none; border:0; color:var(--text-faint); font-size:14px; padding:4px; }
.modal__x:hover{ color:var(--danger); }
.modal__hint{ color:var(--text-faint); font-size:12px; padding:0 18px; margin:4px 0 14px; }
.form{ padding:0 18px 20px; display:flex; flex-direction:column; gap:13px; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field__label{ color:var(--text-faint); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.field__wrap{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-input); padding:0 11px; transition:border-color .14s, box-shadow .14s; }
.field__wrap:focus-within{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-glow); }
.field__sigil{ color:var(--accent); font-weight:700; }
.field__input{ flex:1; background:none; border:0; outline:0; color:var(--text); font:inherit; padding:10px 0; }
.field__input::placeholder{ color:var(--text-faint); }
.form__msg{ min-height:0; color:var(--danger); font-size:12px; }
.form__msg:not(:empty){ min-height:1.2em; }

/* --------------------------------------------------------------- toast */
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
  z-index:80; padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-elev-2); color:var(--text); font-size:12.5px; white-space:nowrap;
  box-shadow:0 18px 50px -20px #000; opacity:0; transition:opacity .2s, transform .2s; }
.toast[hidden]{ display:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .ic{ color:var(--accent); }
.toast.err{ border-color:color-mix(in oklab,var(--danger) 50%,var(--line)); }
.toast.err .ic{ color:var(--danger); }

/* --------------------------------------------------------------- foot */
.foot{ position:relative; z-index:1; border-top:1px solid var(--line); padding:18px 22px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  color:var(--text-faint); font-size:11.5px; max-width:var(--maxw); margin:0 auto; width:100%; }
.foot__tag{ color:var(--text-dim); }
.foot__sep{ color:var(--line); }
.foot__link:hover{ color:var(--accent); }

/* ---------------------------------------------------------- animations */
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none} }
@keyframes rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.reveal{ animation:rise .5s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .bar__cursor{ opacity:1; }
}

/* ------------------------------------------------------- responsive */
@media (max-width:560px){
  .shell{ padding:32px 16px 56px; }
  .bar{ padding:0 14px; }
  .bar__wordmark{ font-size:13px; }
  .grid{ grid-template-columns:1fr; }
  .rel__head{ gap:8px; }
  .apphead__stat{ gap:14px; }
}