[hidden] {
  display: none !important;
}

:root {
  color-scheme: dark;
  --background: #030101;
  --foreground: #fff8f3;
  --card: #120605;
  --card-foreground: #fff8f3;
  --popover: #120605;
  --popover-foreground: #fff8f3;
  --primary: #ff4717;
  --primary-foreground: #fff;
  --secondary: #29100b;
  --secondary-foreground: #fff3eb;
  --muted: #21100d;
  --muted-foreground: #bda9a0;
  --accent: #39120a;
  --accent-foreground: #fff;
  --destructive: #ff4231;
  --border: rgba(255, 90, 34, .34);
  --input: rgba(255, 255, 255, .1);
  --ring: #ff692f;
  --radius: .9rem;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 280px; min-height: 100%; background: #030101; }
body { margin: 0; min-height: 100svh; overflow-x: hidden; background: #030101; color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, input { border-radius: 10px; border: 1px solid transparent; }
button { padding: 0 16px; cursor: pointer; }
button:disabled { cursor: wait; opacity: .66; }
input { width: 100%; padding: 0 14px; outline: none; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gate-badge svg { width: 26px; height: 26px; }

.fire-page {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 31%, rgba(158, 24, 4, .31), transparent 35%),
    radial-gradient(circle at 4% 19%, rgba(117, 14, 2, .21), transparent 28%),
    radial-gradient(circle at 96% 24%, rgba(117, 14, 2, .21), transparent 28%),
    radial-gradient(ellipse at 50% 112%, rgba(255, 50, 10, .23), transparent 56%),
    linear-gradient(180deg, #050101 0%, #020101 57%, #070100 100%);
}

.fire-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .52;
  background-image:
    radial-gradient(circle at 7% 23%, rgba(255, 66, 15, .16), transparent 21%),
    radial-gradient(circle at 92% 31%, rgba(255, 45, 7, .14), transparent 23%),
    radial-gradient(circle at 16% 89%, rgba(255, 67, 12, .12), transparent 25%),
    radial-gradient(circle at 84% 91%, rgba(255, 67, 12, .13), transparent 24%),
    linear-gradient(rgba(255, 73, 25, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 73, 25, .035) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 48px 48px, 48px 48px;
}

.fire-page::after {
  content: "";
  position: fixed;
  width: min(70vw, 900px);
  height: min(70vw, 900px);
  top: -34vw;
  left: 50%;
  z-index: -1;
  pointer-events: none;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(207, 37, 4, .12);
  filter: blur(90px);
  animation: breathe 5s ease-in-out infinite;
}

.embers { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

.site-shell {
  position: relative;
  z-index: 1;
  width: min(1160px, calc(100% - 32px));
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(30px, 5vh, 62px) 0 max(26px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.brand-mark {
  position: relative;
  width: clamp(235px, 27vw, 370px);
  margin-bottom: clamp(30px, 5vh, 54px);
  isolation: isolate;
  animation: arrive .9s cubic-bezier(.16, 1, .3, 1) both;
}
.brand-mark::before { content: ""; position: absolute; inset: 12% 8% 3%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255,92,17,.3), rgba(121,17,0,.13) 42%, transparent 71%); filter: blur(23px); animation: logoGlow 3.4s ease-in-out infinite; }
.brand-mark img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 13px rgba(255,52,7,.46)) drop-shadow(0 16px 34px rgba(0,0,0,.82)); user-select: none; }

.resource-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(13px, 1.6vw, 20px); animation: cardsIn .8s .18s cubic-bezier(.16,1,.3,1) both; }
.resource-card {
  position: relative;
  min-height: 174px;
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,85,28,.48);
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  text-align: center;
  background: linear-gradient(145deg, rgba(42,11,6,.86), rgba(12,4,3,.78));
  box-shadow: inset 0 1px 0 rgba(255,190,129,.09), inset 0 0 30px rgba(255,42,6,.035), 0 18px 45px rgba(0,0,0,.4);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  -webkit-tap-highlight-color: transparent;
}
.resource-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0, rgba(255,80,20,.18), transparent 46%), linear-gradient(115deg, transparent 20%, rgba(255,150,80,.14) 48%, transparent 72%); transform: translateX(-105%); transition: transform .62s ease; }
.resource-card::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, #ff7a18, transparent); box-shadow: 0 0 18px 3px rgba(255,63,12,.58); }
.resource-card:hover, .resource-card:focus-visible { transform: translateY(-6px); border-color: rgba(255,118,49,.95); box-shadow: inset 0 1px 0 rgba(255,214,171,.14), 0 0 0 1px rgba(255,58,10,.18), 0 21px 54px rgba(121,16,0,.3), 0 0 32px rgba(255,55,7,.14); outline: none; }
.resource-card:hover::before, .resource-card:focus-visible::before { transform: translateX(105%); }
.resource-card:active { transform: translateY(-1px) scale(.985); }
.icon-orbit { position: relative; width: 66px; height: 66px; display: grid; place-items: center; color: #ff7a18; border: 1px solid rgba(255,105,36,.34); border-radius: 18px; background: radial-gradient(circle, rgba(255,79,19,.2), rgba(31,6,3,.72) 68%); box-shadow: inset 0 0 18px rgba(255,54,8,.12), 0 0 24px rgba(255,55,7,.13); filter: drop-shadow(0 0 8px rgba(255,68,12,.42)); transition: color .25s ease, transform .25s ease, box-shadow .25s ease; }
.icon-orbit svg { width: 39px; height: 39px; }
.resource-card:hover .icon-orbit { color: #ffc247; transform: translateY(-2px) scale(1.04); box-shadow: inset 0 0 21px rgba(255,76,12,.17), 0 0 29px rgba(255,55,7,.2); }
.resource-copy { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.resource-copy strong { font-size: clamp(1.02rem, 1.45vw, 1.17rem); font-weight: 790; line-height: 1.08; letter-spacing: .055em; text-transform: uppercase; }
.resource-copy small { max-width: 23ch; color: #9f8980; font-size: .69rem; font-weight: 520; line-height: 1.35; letter-spacing: .055em; text-transform: uppercase; }
.site-footer { margin-top: clamp(24px, 4vh, 40px); color: #765f56; font-size: .72rem; letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.link-toast { position: fixed; z-index: 10; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); max-width: calc(100% - 32px); padding: 12px 16px; border: 1px solid rgba(255,91,29,.44); border-radius: 12px; color: #fff3ec; background: rgba(18,5,3,.96); box-shadow: 0 12px 35px rgba(0,0,0,.5), 0 0 24px rgba(255,53,8,.14); font-size: .88rem; opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .22s ease, transform .22s ease; }
.link-toast.visible { opacity: 1; transform: translate(-50%, 0); }

.gate-page, .admin-page { display: grid; place-items: center; padding: 24px; }
.gate-card, .admin-card { position: relative; z-index: 2; width: min(100%, 520px); padding: clamp(25px, 5vw, 40px); border: 1px solid rgba(255,88,27,.45); border-radius: 24px; background: linear-gradient(150deg, rgba(31,8,5,.95), rgba(8,3,2,.94)); box-shadow: inset 0 1px 0 rgba(255,202,161,.09), 0 30px 90px rgba(0,0,0,.62), 0 0 55px rgba(255,45,5,.12); backdrop-filter: blur(16px); text-align: center; animation: arrive .7s cubic-bezier(.16,1,.3,1) both; }
.gate-badge { width: 55px; height: 55px; margin: 0 auto 17px; display: grid; place-items: center; color: #ff9a37; border: 1px solid rgba(255,105,31,.45); border-radius: 17px; background: rgba(255,58,10,.09); box-shadow: 0 0 28px rgba(255,57,7,.14); }
.eyebrow { margin: 0 0 9px; color: #ff7130; font-size: .69rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.gate-card h1, .admin-card h1 { margin: 0; color: #fff8f3; font-size: clamp(1.42rem, 4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; }
.gate-copy { margin: 12px auto 23px; max-width: 43ch; color: #aa958c; font-size: .9rem; line-height: 1.55; }
.captcha-frame { width: 100%; aspect-ratio: 320/112; overflow: hidden; border: 1px solid rgba(255,95,35,.38); border-radius: 13px; background: #090302; box-shadow: inset 0 0 22px rgba(0,0,0,.7), 0 0 22px rgba(255,49,6,.09); }
.captcha-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.captcha-loading { height: 100%; display: grid; place-items: center; color: #88736a; font-size: .85rem; }
.gate-form, .admin-login-form { margin-top: 17px; display: grid; gap: 12px; }
.captcha-input-row { display: grid; grid-template-columns: 1fr 48px; gap: 10px; }
.captcha-input, .admin-input { height: 48px; border-color: rgba(255,91,31,.35) !important; color: #fff !important; background: rgba(255,255,255,.045) !important; box-shadow: inset 0 1px 9px rgba(0,0,0,.28); }
.captcha-input { text-align: center; font-size: 1.25rem; font-weight: 750; letter-spacing: .36em; padding-left: calc(.36em + .75rem); }
.captcha-input::placeholder, .admin-input::placeholder { color: #725e55; }
.captcha-input:focus-visible, .admin-input:focus-visible { border-color: rgba(255,116,49,.8) !important; box-shadow: 0 0 0 3px rgba(255,63,12,.13) !important; }
.refresh-button, .admin-secondary { height: 48px !important; border-color: rgba(255,91,31,.35) !important; color: #d8b9a9 !important; background: rgba(255,255,255,.035) !important; }
.refresh-button:hover, .admin-secondary:hover { color: #fff !important; border-color: rgba(255,111,43,.68) !important; background: rgba(255,64,12,.1) !important; }
.fire-button { width: 100%; min-height: 48px; color: #fff !important; font-weight: 760 !important; letter-spacing: .025em; background: linear-gradient(135deg, #d52e08, #ff6319) !important; border: 1px solid rgba(255,159,84,.45) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 10px 28px rgba(206,35,3,.25), 0 0 22px rgba(255,66,10,.12); }
.fire-button:hover { background: linear-gradient(135deg, #ec370a, #ff7a27) !important; transform: translateY(-1px); }
.form-error, .form-success { margin: 0; font-size: .82rem; line-height: 1.4; text-align: left; }
.form-error { color: #ff8e7e; }
.form-success { color: #9de0ad; }

.admin-card { width: min(100%, 760px); text-align: left; }
.admin-card.compact { width: min(100%, 450px); text-align: center; }
.admin-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid rgba(255,86,26,.18); }
.admin-header h1 { display: flex; align-items: center; gap: 10px; }
.admin-header > div > p:last-child { margin: 8px 0 0; color: #9d887f; font-size: .86rem; }
.admin-form, .admin-login-form { display: grid; gap: 12px; margin-top: 23px; }
.back-link, .preview-link { color: #bfa298; font-size: .84rem; text-decoration: none; }
.back-link { display: inline-block; margin-top: 20px; }
.back-link:hover, .preview-link:hover { color: #ff8b50; }
.links-form { display: grid; gap: 15px; margin-top: 24px; }
.link-field { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 16px; }
.link-field > span { display: flex; flex-direction: column; gap: 4px; }
.link-field strong { color: #fff5ee; font-size: .91rem; }
.link-field small { color: #806d65; font-size: .72rem; }
.link-input-wrap { position: relative; }
.link-input-wrap a { position: absolute; top: 50%; right: 13px; display: grid; place-items: center; color: #a8887a; transform: translateY(-50%); }
.link-input-wrap a:hover { color: #ff8b50; }
.link-input-wrap:has(a) .admin-input { padding-right: 44px; }
.admin-actions { display: flex; align-items: center; gap: 18px; margin-top: 5px; }
.admin-actions .fire-button { width: auto; min-width: 210px; }

@keyframes breathe { 50% { opacity: .58; transform: translateX(-50%) scale(1.08); } }
@keyframes logoGlow { 50% { opacity: .66; transform: scale(1.075); } }
@keyframes arrive { from { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes cardsIn { from { opacity: 0; transform: translateY(22px); } }

@media (max-width: 760px) {
  .site-shell { width: min(620px, calc(100% - 24px)); padding-top: 25px; }
  .brand-mark { width: clamp(210px, 61vw, 286px); margin-bottom: 26px; }
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .resource-card { min-height: 153px; padding: 16px 11px 14px; gap: 11px; border-radius: 16px; }
  .icon-orbit { width: 55px; height: 55px; border-radius: 15px; }
  .icon-orbit svg { width: 34px; height: 34px; }
  .resource-copy strong { font-size: .9rem; }
  .resource-copy small { font-size: .6rem; line-height: 1.35; }
  .site-footer { margin-top: 23px; font-size: .63rem; }
  .admin-page, .gate-page { padding: 14px; }
  .gate-card, .admin-card { padding: 24px 18px; border-radius: 20px; }
  .admin-header { flex-direction: column; }
  .link-field { grid-template-columns: 1fr; gap: 8px; }
  .admin-actions { align-items: flex-start; flex-direction: column; }
  .admin-actions .fire-button { width: 100%; }
}

@media (max-width: 340px) {
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: 138px; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .site-shell { padding-top: 20px; padding-bottom: 20px; }
  .brand-mark { width: 245px; margin-bottom: 23px; }
  .resource-card { min-height: 150px; }
  .site-footer { margin-top: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .embers { display: none; }
}
