:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --ink: #12233a;
  --muted: #596a7f;
  --line: #d7e1ee;
  --accent: #1d63aa;
  --accent-soft: #e0ecfb;
  --warn: #8a5800;
  --warn-soft: #fff2d8;
  --reference: #5b6e87;
  --published: #6852a1;
  --published-soft: #ece8fb;
  --official: #12647b;
  --official-soft: #dff2f7;
  --library: #79552a;
  --library-soft: #f5eadc;
  --danger: #913a43;
  --radius: 18px;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e1520; --surface: #172334; --ink: #eff5fc; --muted: #b6c4d5; --line: #304359; --accent: #78b9ff; --accent-soft: #193858; --warn: #ffbf6b; --warn-soft: #402d11; --reference: #b9c8dd; --published: #d5bbff; --published-soft: #31264a; --official: #96dbea; --official-soft: #173e48; --library: #f1c98c; --library-soft: #493618; --danger: #ffa3aa; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input { font: inherit; }
button { cursor: pointer; }
#portal { width: min(100%, 860px); margin: 0 auto; padding: 14px 14px 44px; }
.portal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(calc(100% - 28px), 832px);
  margin: -28px auto 22px;
  padding: 13px 4px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .72rem;
}
.portal-footer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  color: var(--accent);
  background: transparent;
  font-weight: 800;
}
.portal-footer button:hover { background: var(--accent-soft); }
.portal-footer button:focus-visible,
.cookie-banner button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 2px;
}
.hero { position: relative; overflow: hidden; padding: 17px 16px 19px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 36%), linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--surface) 90%, var(--accent-soft)) 64%, var(--surface)); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 11%, transparent); }
.hero::after { content: ''; position: absolute; width: 210px; height: 210px; right: -118px; top: -122px; border: 28px solid color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 50%; pointer-events: none; }
.hero::before { content: ''; position: absolute; width: 130px; height: 130px; left: 13%; bottom: -105px; border: 18px solid color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 50%; pointer-events: none; }
.hero-masthead { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 17px; }
.hero-actions { display: grid; gap: 18px; }
.hero-language { display: flex; align-items: center; justify-content: flex-end; }
.hero-social-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.language-switcher { display: flex; justify-content: flex-end; gap: 4px; width: fit-content; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 3px 9px color-mix(in srgb, var(--ink) 7%, transparent); }
.language-switcher button { display: flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .68rem; }
.language-switcher button > span { font-size: 1rem; line-height: 1; }
.language-switcher button.active { background: var(--accent); color: #fff; box-shadow: 0 2px 5px color-mix(in srgb, var(--accent) 25%, transparent); }
.language-switcher button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.language-switcher.compact { margin: 0; box-shadow: none; }
.language-switcher.compact button { min-height: 27px; padding: 3px 7px; }
.brand-lockup { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark { position: relative; display: grid; width: 82px; height: 91px; padding: 9px 10px; place-items: center; border-radius: 22px; background: linear-gradient(145deg, #fff, #edf5fd); border: 1px solid rgb(255 255 255 / .78); box-shadow: 0 12px 25px color-mix(in srgb, var(--accent) 21%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 13%, transparent); flex: 0 0 auto; isolation: isolate; }
.brand-mark-glow { position: absolute; z-index: -1; inset: 14px -8px -8px 10px; border-radius: 22px; background: color-mix(in srgb, var(--accent) 28%, transparent); filter: blur(13px); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-copy { min-width: 0; }
.brand-name { display: flex; flex-direction: column; color: var(--ink); font-size: clamp(1.48rem, 6vw, 2rem); font-weight: 900; letter-spacing: -.045em; line-height: .9; text-transform: uppercase; }
.brand-name span { display: block; font: inherit; letter-spacing: inherit; }
.brand-rule { width: 48px; height: 3px; margin: 10px 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 18%, transparent)); }
.instagram-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid transparent; border-radius: 12px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #f9ce34, #ee2a7b 48%, #6228d7) border-box; color: var(--ink); box-shadow: 0 4px 10px color-mix(in srgb, #a83bc8 13%, transparent); font-size: .74rem; font-weight: 800; line-height: 1; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.instagram-link:hover { transform: translateY(-1px); box-shadow: 0 6px 14px color-mix(in srgb, #a83bc8 20%, transparent); }
.instagram-link:focus-visible { outline: 3px solid color-mix(in srgb, #d62976 35%, transparent); outline-offset: 3px; }
.instagram-icon { position: relative; display: block; width: 20px; height: 20px; flex: 0 0 20px; border: 2px solid #fff; border-radius: 6px; background: linear-gradient(145deg, #f9ce34, #ee2a7b 52%, #6228d7); box-shadow: 0 2px 5px rgb(81 36 125 / .24); }
.instagram-icon::before { content: ''; position: absolute; width: 6px; height: 6px; left: 50%; top: 50%; translate: -50% -50%; border: 1.8px solid #fff; border-radius: 50%; }
.instagram-icon::after { content: ''; position: absolute; width: 2.5px; height: 2.5px; right: 3px; top: 3px; border-radius: 50%; background: #fff; }
.instagram-arrow { color: var(--muted); font-size: .8rem; }
.paypal-support-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, #0070ba 34%, var(--line));
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #0079c1, #003087);
  box-shadow: 0 5px 13px rgb(0 48 135 / 20%);
  font-size: .74rem;
  font-weight: 900;
  line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease;
}
.paypal-support-link:hover { transform: translateY(-1px); box-shadow: 0 7px 17px rgb(0 48 135 / 29%); }
.paypal-support-link:focus-visible { outline: 3px solid color-mix(in srgb, #009cde 42%, transparent); outline-offset: 3px; }
.paypal-mark { position: relative; display: block; width: 20px; height: 21px; flex: 0 0 20px; }
.paypal-mark i { position: absolute; inset: 0; color: #fff; font: italic 900 1.25rem/1 ui-sans-serif, system-ui, sans-serif; }
.paypal-mark i:first-child { translate: -1px 0; opacity: .95; }
.paypal-mark i:last-child { translate: 3px 2px; color: #65c7f0; opacity: .88; }
.paypal-mark.large { width: 42px; height: 45px; flex-basis: 42px; }
.paypal-mark.large i { font-size: 2.7rem; }
.paypal-mark.large i:first-child { color: #003087; }
.paypal-mark.large i:last-child { color: #009cde; }
.paypal-heart { color: #ffc439; font-size: .78rem; }
.eyebrow { color: var(--accent); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.9rem, 8vw, 2.7rem); letter-spacing: -.045em; margin: 3px 0 5px; }
h2 { font-size: 1.38rem; margin-bottom: 0; letter-spacing: -.025em; }
h3 { font-size: 1.08rem; margin-bottom: 5px; }
p { line-height: 1.5; color: var(--muted); }
.hero-intro { position: relative; z-index: 1; margin-top: 8px; padding-top: 15px; border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); }
.hero-intro p { max-width: 620px; margin-bottom: 0; }
.notice { margin-top: 13px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); background: var(--accent-soft); border-radius: 11px; font-size: .82rem; line-height: 1.4; }
.notice summary { color: var(--accent); cursor: pointer; font-weight: 800; }
.ui-icon { display: inline-grid; width: 1.2em; place-items: center; margin-right: 3px; font-weight: 900; }
.notice p { margin: 8px 0 0; font-size: .8rem; }
.toolbar { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--bg) 94%, transparent); padding: 12px 0 10px; backdrop-filter: blur(10px); }
.search-wrap { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 0 13px; }
.search-wrap span { color: var(--muted); font-size: 1.35rem; }
.search-wrap input { width: 100%; border: 0; outline: 0; padding: 13px 0; color: var(--ink); background: transparent; }
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 1px; scrollbar-width: none; }
.filter, .text-button, .close-button, .project-link { border: 1px solid var(--line); color: var(--ink); background: var(--surface); border-radius: 999px; padding: 8px 12px; white-space: nowrap; text-decoration: none; }
.filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter > span[aria-hidden] { display: inline-grid; width: 1.1em; place-items: center; margin-right: 3px; font-weight: 900; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 10px 2px 12px; }
.text-button { color: var(--accent); font-weight: 700; background: transparent; padding: 7px 0; border: 0; }
.material-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.material { position: relative; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 15px; padding: 14px 44px 13px 14px; color: var(--ink); min-height: 0; box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 4%, transparent); }
.material::after { content: '›'; position: absolute; right: 15px; top: 50%; translate: 0 -50%; color: var(--accent); font-size: 1.7rem; font-weight: 400; }
.material:hover, .material:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.material-row { display: flex; align-items: flex-start; gap: 12px; }
.material-copy { min-width: 0; flex: 1 1 auto; }
.material-avatar { position: relative; display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 15px; background: var(--accent-soft); box-shadow: inset 0 1px 0 rgb(255 255 255 / .58), 0 4px 9px color-mix(in srgb, var(--ink) 10%, transparent); isolation: isolate; }
.material-avatar::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .72; background: linear-gradient(118deg, transparent 15%, rgb(255 255 255 / .5) 42%, transparent 58%); }
.material-avatar::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 -10px 18px rgb(0 0 0 / .12); }
.avatar-label { padding: 3px 5px; border: 1px solid rgb(255 255 255 / .26); border-radius: 6px; background: rgb(12 27 42 / .58); color: #fff; font-size: .54rem; font-weight: 900; letter-spacing: .045em; line-height: 1; text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.material-avatar-large { flex-basis: 56px; width: 56px; height: 56px; border-radius: 17px; }
.material-avatar-large .avatar-label { font-size: .6rem; }
.avatar-stainless { background: repeating-linear-gradient(0deg, #e9edf0 0 2px, #b7c0c8 2px 3px, #dce2e6 3px 5px); }
.avatar-steel { background: repeating-linear-gradient(135deg, #27313a 0 3px, #56626c 3px 4px, #303c45 4px 7px); }
.avatar-aluminum { background: linear-gradient(140deg, #8f9ba4, #f3f6f7 38%, #aeb8bf 58%, #e9edef 76%, #8e9aa2); }
.avatar-titanium { background: conic-gradient(from 210deg, #34404f, #5b91bd, #8d63a6, #c99a4b, #4b8294, #34404f); }
.avatar-copper { background: linear-gradient(135deg, #65311e, #d7824f 34%, #f0b17e 50%, #a64f2d 69%, #5a2b1d); }
.avatar-brass, .avatar-gold { background: linear-gradient(135deg, #7d5a13, #e8c65c 34%, #fff0a0 50%, #b38424 70%, #62440a); }
.avatar-bronze { background: linear-gradient(135deg, #49301d, #aa7441 35%, #d6a367 50%, #744324 72%, #38251a); }
.avatar-silver { background: linear-gradient(140deg, #68747e, #f7f9fa 38%, #a8b2b9 57%, #f1f3f4 72%, #6d7881); }
.avatar-zinc { background-color: #aab5b9; background-image: radial-gradient(circle at 20% 25%, #eef2f1 0 8%, transparent 9%), radial-gradient(circle at 72% 65%, #737f83 0 9%, transparent 10%), radial-gradient(circle at 76% 18%, #dbe2e2 0 7%, transparent 8%), radial-gradient(circle at 32% 76%, #7e8a8f 0 8%, transparent 9%); }
.avatar-tungsten { background: linear-gradient(145deg, #12181e, #5c6770 41%, #222b32 62%, #77818a); }
.avatar-wood { background-color: #9b673f; background-image: repeating-linear-gradient(7deg, transparent 0 6px, rgb(70 35 17 / .34) 7px 9px), radial-gradient(ellipse at 75% 30%, transparent 0 8%, #5d351f 9% 13%, transparent 14%); }
.avatar-leather { background-color: #74452e; background-image: radial-gradient(circle, rgb(255 255 255 / .12) 0 1px, transparent 1.4px); background-size: 5px 5px; }
.avatar-stone { background-color: #73777b; background-image: radial-gradient(circle at 20% 30%, #d5d4cf 0 3%, transparent 4%), radial-gradient(circle at 74% 68%, #34383b 0 4%, transparent 5%), radial-gradient(circle at 62% 22%, #aaa8a2 0 3%, transparent 4%), radial-gradient(circle at 28% 78%, #404447 0 3%, transparent 4%); }
.avatar-ceramic { background: radial-gradient(circle at 32% 25%, #fff 0 9%, transparent 10%), linear-gradient(135deg, #c8d5d9, #fff 45%, #d8e6e9 72%, #a9bcc1); }
.avatar-glass { background: linear-gradient(145deg, rgb(103 187 224 / .5), rgb(233 251 255 / .92) 44%, rgb(79 153 195 / .62)); box-shadow: inset 0 0 0 5px rgb(255 255 255 / .25), inset 0 -10px 18px rgb(28 101 139 / .16), 0 4px 9px color-mix(in srgb, var(--ink) 10%, transparent); }
.avatar-acrylic { background: linear-gradient(140deg, #070a0d 0 32%, #4a5660 42%, #0a0e12 55% 100%); }
.avatar-polymer { background-color: #303942; background-image: linear-gradient(45deg, rgb(255 255 255 / .06) 25%, transparent 25% 75%, rgb(255 255 255 / .06) 75%), linear-gradient(45deg, rgb(255 255 255 / .06) 25%, transparent 25% 75%, rgb(255 255 255 / .06) 75%); background-position: 0 0, 4px 4px; background-size: 8px 8px; }
.avatar-paper { background: repeating-linear-gradient(0deg, #f2e8cd 0 4px, #ddcfaa 5px 6px); }
.avatar-coating { background: linear-gradient(140deg, #173d64, #3f82bf 44%, #1a527f 58%, #7ca9d1); }
.avatar-cerakote { background: conic-gradient(from 35deg, #737d63, #c3a77c, #486857, #26384a, #b9b9b2, #737d63); }
.avatar-graphite { background: repeating-linear-gradient(145deg, #11161b 0 3px, #3e474f 3px 4px, #20272d 4px 7px); }
.avatar-generic { background: linear-gradient(135deg, #275f96, #8ab7df 48%, #244f7a); }
.material .family { color: var(--muted); font-size: .78rem; }
.material h3 { margin: 3px 0 4px; }
.material .effect { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .83rem; line-height: 1.35; color: var(--muted); margin: 4px 0 10px; }
.material .tag { display: none; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag, .status { border-radius: 999px; padding: 4px 7px; font-size: .7rem; font-weight: 700; }
.tag { background: color-mix(in srgb, var(--line) 58%, transparent); color: var(--muted); }
.status.predictive { color: var(--warn); background: var(--warn-soft); }
.status.compatible { color: var(--accent); background: var(--accent-soft); }
.status.reference { color: var(--reference); background: color-mix(in srgb, var(--reference) 14%, transparent); }
.status.verified { color: var(--accent); background: var(--accent-soft); }
.status.published { color: var(--published); background: var(--published-soft); }
.status.official { color: var(--official); background: var(--official-soft); }
.status.library { color: var(--library); background: var(--library-soft); }
.status.community { color: #08795f; background: color-mix(in srgb, #10b98a 17%, var(--surface)); }

.community-actions {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.community-action {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 72px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 5%, transparent);
}
.community-action:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
.community-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 2px; }
.community-action.contribution { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 68%, var(--surface)), var(--surface)); }
.community-action.admin { background: linear-gradient(135deg, color-mix(in srgb, var(--published-soft) 58%, var(--surface)), var(--surface)); }
.community-action-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #fff;
  background: var(--accent);
  font-size: 1.45rem;
  box-shadow: 0 6px 12px color-mix(in srgb, var(--accent) 25%, transparent);
}
.community-action.admin .community-action-icon { background: var(--published); }
.community-action > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.community-action strong { font-size: .98rem; }
.community-action small { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.community-action-arrow { color: var(--accent); font-size: 1.2rem; }
.notification-badge {
  position: absolute;
  top: -8px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 27px;
  height: 27px;
  padding: 0 7px;
  border: 3px solid var(--bg);
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: .74rem;
  font-weight: 900;
  box-shadow: 0 4px 9px rgb(229 72 77 / 28%);
}

.portal-dialog {
  width: min(920px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  margin: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 24px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 80px rgb(0 0 0 / 35%);
}
.portal-dialog::backdrop { background: rgb(5 15 29 / 72%); backdrop-filter: blur(5px); }
.dialog-shell { max-height: calc(100dvh - 22px); overflow-y: auto; overscroll-behavior: contain; }
.dialog-header {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
}
.dialog-header h2 { margin: 3px 0 4px; font-size: clamp(1.25rem, 4vw, 1.75rem); line-height: 1.08; }
.dialog-header p { max-width: 650px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.dialog-eyebrow { color: var(--accent); font-size: .67rem; font-weight: 900; letter-spacing: .14em; }
.dialog-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--bg);
  font-size: 1.65rem;
  line-height: 1;
}
.paypal-dialog { width: min(610px, calc(100vw - 20px)); }
.paypal-dialog-header { position: static; }
.cookie-policy-dialog { width: min(780px, calc(100vw - 20px)); }
.cookie-policy-body { display: grid; gap: 18px; padding: 20px; }
.cookie-policy-body section { min-width: 0; }
.cookie-policy-body h3 { margin: 0 0 7px; font-size: .96rem; }
.cookie-policy-body p { margin: 0; font-size: .79rem; }
.cookie-policy-summary {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, #08795f 28%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, #10b98a 9%, var(--surface));
}
.cookie-policy-shield {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: #08795f;
  font-weight: 900;
}
.cookie-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.cookie-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.cookie-table th,
.cookie-table td { padding: 10px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cookie-table th { color: var(--muted); background: var(--bg); font-size: .64rem; text-transform: uppercase; letter-spacing: .055em; }
.cookie-table tr:last-child td { border-bottom: 0; }
.cookie-table code { color: var(--accent); font-size: .69rem; font-weight: 800; overflow-wrap: anywhere; }
.cookie-policy-note { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.cookie-policy-note a { color: var(--accent); font-weight: 800; }
.cookie-banner {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: min(calc(100% - 24px), 820px);
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 18px 55px rgb(0 0 0 / 30%);
  backdrop-filter: blur(18px);
  translate: -50% 0;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 68%, #10253f));
  box-shadow: 0 7px 16px color-mix(in srgb, var(--accent) 25%, transparent);
  font-size: 1.1rem;
}
.cookie-banner-copy { min-width: 0; }
.cookie-banner-copy strong { display: block; margin-bottom: 3px; font-size: .88rem; }
.cookie-banner-copy p { margin: 0; font-size: .72rem; line-height: 1.4; }
.cookie-banner-actions { display: flex; align-items: center; gap: 7px; }
.cookie-banner-actions button {
  min-height: 39px;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 850;
  white-space: nowrap;
}
.cookie-secondary { border: 1px solid var(--line); color: var(--accent); background: var(--surface); }
.cookie-primary { border: 0; color: #fff; background: var(--accent); }
.paypal-title-lockup { display: flex; align-items: center; gap: 15px; min-width: 0; }
.paypal-support-body { display: grid; gap: 14px; padding: 20px; }
.paypal-recipient-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: center;
  padding: 15px;
  border: 1px solid color-mix(in srgb, #0070ba 24%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, #e8f5ff 66%, var(--surface));
}
.paypal-recipient-label { grid-column: 1 / -1; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.paypal-recipient-card strong { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: clamp(.95rem, 4vw, 1.15rem); }
.paypal-open-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 17px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #0079c1, #003087);
  box-shadow: 0 9px 20px rgb(0 48 135 / 22%);
  font-weight: 900;
  text-decoration: none;
}
.paypal-open-button:hover { background: linear-gradient(135deg, #008bd3, #003b9d); }
.paypal-open-button:focus-visible { outline: 3px solid color-mix(in srgb, #009cde 42%, transparent); outline-offset: 3px; }
.paypal-payment-note {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}
.paypal-payment-note > span:first-child { flex: 0 0 auto; color: var(--accent); font-weight: 900; }
.paypal-thanks { margin: 0; text-align: center; font-size: .82rem; }
.contribution-form { display: grid; gap: 13px; padding: 16px; }
.contribution-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: color-mix(in srgb, var(--bg) 48%, var(--surface));
}
.contribution-form legend { padding: 0 7px; color: var(--accent); font-size: .83rem; font-weight: 850; }
.form-grid { display: grid; gap: 12px; }
.form-grid label, .admin-auth-card label, .admin-note-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 750;
}
.form-grid input, .form-grid select, .form-grid textarea,
.admin-auth-card input, .admin-note-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: .9rem;
  font-weight: 550;
}
.form-grid textarea, .admin-note-field textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.admin-auth-card input:focus, .admin-note-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.form-grid label > small { color: var(--muted); font-weight: 500; }
.confirmation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  color: var(--ink);
  background: var(--accent-soft);
  font-size: .82rem;
  font-weight: 720;
  line-height: 1.4;
}
.confirmation input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.submission-sublayers { display: grid; gap: 10px; margin-top: 14px; }
.submission-sublayer { overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 14px; background: var(--surface); }
.submission-sublayer > header { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.submission-sublayer > header strong { flex: 1; font-size: .8rem; }
.submission-sublayer > header button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); font-size: 1.2rem; }
.submission-sublayer > .form-grid { padding: 12px; }
.add-sublayer-button { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; margin-top: 11px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 11px; color: var(--accent); background: var(--surface); font-size: .78rem; font-weight: 850; }
.sublayer-help { margin: 7px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.primary-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  padding: 11px 18px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: var(--accent);
  font-weight: 850;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--accent) 25%, transparent);
}
.primary-submit:disabled, .review-actions button:disabled { cursor: wait; opacity: .58; }
.form-status { min-height: 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.form-status:not(:empty) { padding: 10px 12px; border-radius: 11px; background: var(--bg); }
.form-status.success { color: #08795f; background: color-mix(in srgb, #10b98a 14%, var(--surface)); }
.form-status.error { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, var(--surface)); }
.turnstile-shell {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.turnstile-shell[hidden] { display: none; }
.turnstile-copy { display: flex; align-items: center; gap: 10px; }
.turnstile-copy > span:last-child { display: grid; gap: 2px; }
.turnstile-copy strong { color: var(--text); font-size: .86rem; }
.turnstile-copy small { color: var(--muted); font-size: .76rem; }
.turnstile-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #062a24;
  background: #62e6c7;
  font-weight: 900;
}
.turnstile-widget { min-height: 65px; }
.turnstile-widget iframe { max-width: 100%; }

.admin-content { min-height: 290px; padding: 16px; }
.admin-loading { display: flex; justify-content: center; gap: 7px; padding: 110px 20px; }
.admin-loading span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: admin-loading 1s infinite alternate; }
.admin-loading span:nth-child(2) { animation-delay: .2s; }
.admin-loading span:nth-child(3) { animation-delay: .4s; }
@keyframes admin-loading { to { opacity: .2; transform: translateY(-7px); } }
.admin-unavailable, .empty-admin {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 230px;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}
.admin-unavailable > span, .empty-admin > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 1.3rem; font-weight: 900; }
.admin-auth-card { max-width: 430px; margin: 28px auto; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); text-align: center; }
.admin-auth-card .admin-shield { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 19px; color: #fff; background: var(--published); font-size: 1.7rem; box-shadow: 0 8px 18px color-mix(in srgb, var(--published) 24%, transparent); }
.admin-auth-card .admin-shield.two-factor { background: linear-gradient(135deg, #08795f, #0db388); }
.admin-auth-card .admin-shield.recovery { background: linear-gradient(135deg, var(--accent), #53a8ff); }
.admin-auth-card h3 { margin: 0 0 6px; }
.admin-auth-card > p { margin: 0 0 18px; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.admin-auth-card form { display: grid; gap: 12px; text-align: left; }
.admin-auth-help { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.forgot-access-button {
  min-height: 39px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  color: var(--accent);
  background: transparent;
  font-size: .74rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 3px;
}
.forgot-access-button:hover { background: var(--accent-soft); }
.email-recovery-card { max-width: 480px; }
.recovery-destination {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: var(--surface);
  font-size: .78rem;
  font-weight: 850;
}
.two-factor-card { max-width: 520px; }
.two-factor-steps { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; color: var(--muted); font-size: .76rem; line-height: 1.45; list-style: none; text-align: left; }
.totp-secret { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 9px; margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); text-align: left; }
.totp-secret small { grid-column: 1 / -1; color: var(--muted); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.totp-secret code { align-self: center; overflow-wrap: anywhere; color: var(--ink); font-family: ui-monospace, "SFMono-Regular", monospace; font-size: .92rem; font-weight: 850; letter-spacing: .08em; }
.totp-secret button { min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--accent); background: var(--bg); font-size: .68rem; font-weight: 800; }
.authenticator-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin-bottom: 14px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 10px; color: var(--accent); background: var(--accent-soft); font-size: .74rem; font-weight: 850; text-decoration: none; }
.recovery-card { max-width: 560px; }
.recovery-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 16px 0; }
.recovery-code-grid code { padding: 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface); font-family: ui-monospace, "SFMono-Regular", monospace; font-size: .78rem; font-weight: 850; letter-spacing: .06em; }
.recovery-actions { display: grid; gap: 8px; }
.recovery-actions > button:first-child { min-height: 42px; border: 1px solid var(--line); border-radius: 11px; color: var(--accent); background: var(--surface); font-size: .76rem; font-weight: 850; }
.admin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.admin-panel-head > div { display: flex; align-items: center; gap: 9px; }
.admin-panel-head h3 { margin: 0; }
.pending-pill { padding: 5px 9px; border-radius: 999px; color: #fff; background: #e5484d; font-size: .7rem; font-weight: 850; }
.security-pill { padding: 5px 9px; border-radius: 999px; color: #08795f; background: color-mix(in srgb, #10b98a 16%, var(--surface)); font-size: .68rem; font-weight: 850; }
.admin-panel-head > button { min-height: 38px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); }
.admin-global-message { margin-bottom: 12px; }
.admin-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.admin-sections button { min-height: 42px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: .76rem; font-weight: 850; }
.admin-sections button.active { color: var(--accent); background: var(--surface); box-shadow: 0 3px 8px color-mix(in srgb, var(--ink) 7%, transparent); }
.admin-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; padding: 4px; border-radius: 13px; background: var(--bg); }
.admin-filters button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: .75rem; font-weight: 800; }
.admin-filters button span { min-width: 22px; padding: 2px 5px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 12%, transparent); font-size: .67rem; }
.admin-filters button.active { color: var(--accent); background: var(--surface); box-shadow: 0 3px 8px color-mix(in srgb, var(--ink) 7%, transparent); }
.review-list { display: grid; gap: 13px; }
.review-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 7px 20px color-mix(in srgb, var(--ink) 5%, transparent); }
.review-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 15px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.review-card > header h3 { margin: 6px 0 2px; font-size: 1.12rem; }
.review-card > header p { margin: 0; color: var(--muted); font-size: .8rem; }
.review-state { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.review-state.pending { color: var(--warn); background: var(--warn-soft); }
.review-state.approved { color: #08795f; background: color-mix(in srgb, #10b98a 15%, var(--surface)); }
.review-state.rejected { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, var(--surface)); }
.review-date { flex: 0 0 auto; display: grid; gap: 2px; color: var(--muted); font-size: .68rem; text-align: right; }
.review-date b { color: var(--ink); }
.review-facts { display: grid; gap: 8px; padding: 12px 15px; }
.review-facts > span { display: grid; gap: 2px; padding: 10px; border-radius: 11px; background: var(--bg); }
.review-facts small, .review-parameters small { color: var(--muted); font-size: .64rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.review-facts b { font-size: .82rem; }
.review-facts em { overflow-wrap: anywhere; color: var(--muted); font-size: .7rem; font-style: normal; }
.review-parameters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 15px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.review-parameters span { display: grid; gap: 2px; min-width: 0; padding: 9px; background: var(--surface); }
.review-parameters b { overflow-wrap: anywhere; font-size: .78rem; }
.review-layer-badge { display: inline-flex; margin-left: 4px; padding: 2px 5px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: .62rem; font-style: normal; font-weight: 850; }
.review-sublayers { margin: 0 15px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.review-sublayers summary { padding: 10px 12px; color: var(--accent); font-size: .73rem; font-weight: 850; cursor: pointer; }
.review-sublayers > div { display: grid; gap: 1px; background: var(--line); }
.review-sublayers section { padding: 10px 12px; background: var(--surface); }
.review-sublayers h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: .76rem; }
.review-sublayers p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.review-notes, .review-evidence, .admin-note-field, .reviewed-date { margin: 0 15px 12px; }
.review-notes > b, .review-evidence > b, .admin-note-field > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .7rem; }
.review-notes p { margin: 0; padding: 10px; border-radius: 10px; background: var(--bg); font-size: .78rem; line-height: 1.45; white-space: pre-wrap; }
.review-evidence > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.review-evidence a, .attachment-button { min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--accent); background: var(--surface); font-size: .72rem; font-weight: 800; text-decoration: none; }
.muted-inline { color: var(--muted); font-size: .72rem; }
.reviewed-date { color: var(--muted); font-size: .7rem; }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 15px 15px; }
.review-actions button { min-height: 44px; border-radius: 11px; font-size: .78rem; font-weight: 850; }
.approve-button { border: 0; color: #fff; background: #08795f; }
.reject-button { border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line)); color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.review-status:not(:empty) { margin: -4px 15px 15px; }
.visit-dashboard { display: grid; gap: 14px; }
.visit-dashboard-head { padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); }
.visit-dashboard-head h3 { margin: 4px 0; font-size: 1.18rem; }
.visit-dashboard-head p { max-width: 600px; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.visit-geo-note { margin: -5px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 11px; color: var(--muted); background: var(--accent-soft); font-size: .72rem; line-height: 1.4; }
.visit-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.visit-kpi { display: grid; gap: 3px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.visit-kpi > span { color: var(--accent); font-size: 1rem; }
.visit-kpi b { font-size: 1.45rem; line-height: 1; }
.visit-kpi small { color: var(--muted); font-size: .66rem; font-weight: 800; line-height: 1.25; }
.visit-charts { display: grid; gap: 10px; }
.visit-chart { padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.visit-chart h4, .visit-recent h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 11px; color: var(--ink); font-size: .82rem; }
.visit-chart h4 span { color: var(--accent); }
.visit-bar { display: grid; grid-template-columns: minmax(86px, .8fr) minmax(76px, 1.5fr) auto; align-items: center; gap: 8px; min-height: 27px; font-size: .7rem; }
.visit-bar > span { overflow: hidden; color: var(--muted); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.visit-bar > div { height: 7px; overflow: hidden; border-radius: 999px; background: var(--bg); }
.visit-bar i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--accent); }
.visit-bar b { min-width: 18px; color: var(--ink); font-size: .7rem; text-align: right; }
.visit-empty { margin: 0; color: var(--muted); }
.visit-recent { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.visit-recent h4 { padding: 14px 14px 0; }
.visit-list { display: grid; gap: 1px; background: var(--line); }
.visit-empty-detail { margin: 0; padding: 14px; color: var(--muted); background: var(--surface); font-size: .74rem; line-height: 1.4; }
.visit-row { display: grid; gap: 8px; align-items: start; padding: 12px 14px; background: var(--surface); }
.visit-row time { color: var(--muted); font-size: .68rem; line-height: 1.35; }
.visit-row div { display: grid; gap: 2px; min-width: 0; }
.visit-row small { color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.visit-row b { overflow-wrap: anywhere; color: var(--ink); font-size: .68rem; line-height: 1.35; }
.visit-row details { min-width: 0; color: var(--accent); font-size: .68rem; font-weight: 800; }
.visit-row summary { cursor: pointer; }
.visit-row code { display: block; max-height: 100px; margin-top: 6px; overflow: auto; color: var(--muted); font-family: ui-monospace, "SFMono-Regular", monospace; font-size: .61rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; white-space: normal; }

@media (min-width: 680px) {
  .community-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid .full { grid-column: 1 / -1; }
  .form-grid.three .wide { grid-column: span 2; }
  .contribution-form { padding: 20px; }
  .contribution-form fieldset { padding: 17px; }
  .review-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-parameters { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .visit-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .visit-row { grid-template-columns: minmax(130px, 1.15fr) repeat(5, minmax(80px, 1fr)) minmax(130px, 1.65fr); }
}

@media (max-width: 520px) {
  .portal-dialog { width: 100vw; max-width: none; max-height: 100dvh; border: 0; border-radius: 0; }
  .dialog-shell { max-height: 100dvh; }
  .dialog-header { padding: 14px; }
  .cookie-policy-body { padding: 14px; }
  .cookie-banner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }
  .cookie-banner-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .cookie-banner-actions button { width: 100%; }
  .admin-content, .contribution-form { padding: 12px; }
  .review-card > header { display: grid; }
  .review-date { text-align: left; }
  .admin-panel-head > div { align-items: flex-start; flex-direction: column; }
  .admin-filters button { font-size: .67rem; }
  .review-actions { grid-template-columns: 1fr; }
}
.detail { margin: 0; padding: 0; }
.detail.hidden, .safety.hidden { display: none; }
.detail-mode .hero, .detail-mode .toolbar, .detail-mode .section-head, .detail-mode .material-grid, .detail-mode .safety { display: none; }
.detail-top { position: sticky; top: 0; z-index: 4; display: grid; gap: 10px; padding: 5px 0 13px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.detail-utility { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.detail-top h2 { font-size: clamp(1.55rem, 7vw, 2.1rem); }
.detail-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.detail-heading > div { min-width: 0; }
.close-button { justify-self: start; padding: 7px 0; border: 0; background: transparent; color: var(--accent); font-weight: 800; }
.detail-effect { margin: 15px 2px 10px; font-size: .95rem; }
.material-info { margin: 0 0 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.material-info summary { color: var(--accent); cursor: pointer; font-size: .82rem; font-weight: 800; }
.material-info .detail-note { margin-top: 9px; }
.catalog-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 13px 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface)); color: var(--muted); font-size: .8rem; }
.catalog-summary > span:first-child { display: grid; width: 24px; height: 24px; place-items: center; margin-right: 2px; border-radius: 7px; background: var(--accent); color: #fff; }
.catalog-summary strong { color: var(--ink); }
.config-list { display: grid; gap: 16px; margin-top: 12px; }
.config-group { min-width: 0; }
.config-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 0 2px; }
.config-group-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 900; }
.config-group-head h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.config-group-head p { margin: 2px 0 0; font-size: .73rem; line-height: 1.25; }
.config-group-list { display: grid; gap: 9px; }
.config { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: clip; box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 4%, transparent); }
.config-summary { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface)); }
.config-heading { min-width: 0; flex: 1 1 auto; }
.config-heading strong, .config-heading small { display: block; overflow-wrap: anywhere; }
.config-heading strong { font-size: .92rem; }
.config-heading small { margin-top: 4px; color: var(--muted); font-size: .75rem; font-weight: 500; }
.layer-count { flex: 0 0 auto; border-radius: 999px; padding: 4px 7px; background: var(--official-soft); color: var(--official); font-size: .68rem; font-weight: 800; }
.config-summary .status { display: none; }
.config-mode-icon { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: .93rem; font-weight: 900; }
.config-body { padding: 11px 12px 12px; }
.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0 0 12px; }
.setting { background: color-mix(in srgb, var(--line) 43%, transparent); border-radius: 10px; padding: 8px; min-width: 0; }
.setting span { display: flex; align-items: center; color: var(--muted); font-size: .67rem; text-transform: uppercase; letter-spacing: .04em; }
.setting-icon { display: inline-grid; flex: 0 0 1.2em; width: 1.2em; place-items: center; margin-right: 4px; color: var(--accent); font-style: normal; font-weight: 900; }
.setting b { display: block; font-size: .82rem; margin-top: 2px; overflow-wrap: anywhere; }
.sub-layer-sequence { margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--official) 24%, var(--line)); border-radius: 12px; overflow: hidden; }
.sequence-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 11px; background: var(--official-soft); }
.sequence-head strong { color: var(--official); font-size: .8rem; }
.sequence-head span { color: var(--muted); font-size: .7rem; }
.sub-layer-stack { display: grid; gap: 8px; padding: 9px; }
.sub-layer-panel { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg) 50%, var(--surface)); }
.sub-layer-panel .settings { margin-bottom: 8px; }
.sub-layer-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--ink); font-size: .78rem; }
.sub-layer-number { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: var(--official); color: #fff; font-size: .72rem; font-weight: 900; }
.config-tools { margin-top: 4px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.config-tools > summary { padding: 10px 11px; color: var(--accent); cursor: pointer; font-size: .8rem; font-weight: 800; }
.config-tools > summary > span { display: inline-grid; width: 1.2em; place-items: center; margin-right: 4px; }
.config-tools-body { padding: 0 10px 10px; border-top: 1px solid var(--line); }
.project-actions { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin-top: 10px; }
.project-link { display: block; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); font-size: .82rem; color: var(--accent); font-weight: 800; text-align: center; text-decoration: none; }
.project-link > span, .convert-button > span { display: inline-block; margin-right: 4px; font-weight: 900; }
.project-help { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; }
.project-unavailable { display: block; margin-top: 5px; color: var(--muted); font-size: .73rem; font-style: italic; }
.lightburn-advanced { margin: 5px 0 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.lightburn-advanced summary { color: var(--accent); cursor: pointer; font-size: .78rem; font-weight: 700; }
.advanced-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 9px; }
.advanced-grid span { padding: 7px; border-radius: 8px; background: color-mix(in srgb, var(--line) 38%, transparent); color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.advanced-grid b { display: block; color: var(--ink); font-size: .68rem; }
.converter { margin-top: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.converter summary { color: var(--accent); cursor: pointer; font-size: .88rem; font-weight: 800; }
.converter-intro, .converter-footnote { margin: 9px 0; font-size: .79rem; line-height: 1.4; }
.converter-section { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 72%, var(--accent-soft)); }
.converter-section.target { background: var(--accent-soft); }
.converter-section h4 { margin: 0 0 8px; color: var(--ink); font-size: .79rem; text-transform: uppercase; letter-spacing: .05em; }
.origin-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.origin-summary span { padding: 8px; border-radius: 9px; background: var(--surface); color: var(--muted); font-size: .73rem; }
.origin-summary b { display: block; color: var(--ink); font-size: .84rem; }
.origin-label { margin: 8px 0 0; font-size: .72rem; }
.converter.unavailable summary { color: var(--muted); }
.converter-fields { display: grid; grid-template-columns: 1fr; gap: 8px; }
.converter-fields label { color: var(--muted); font-size: .69rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .03em; }
.converter-fields input { width: 100%; margin-top: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: .9rem; }
.convert-button { width: 100%; margin-top: 10px; border: 0; border-radius: 10px; padding: 11px 12px; background: var(--accent); color: #fff; font-weight: 800; }
.converter-result { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: .85rem; line-height: 1.45; }
.converter-result .project-link { display: block; width: fit-content; margin-top: 9px; }
.converted-layers { display: grid; gap: 5px; margin: 8px 0; }
.converted-layers span { display: flex; justify-content: space-between; gap: 10px; padding: 7px 8px; border-radius: 8px; background: var(--surface); color: var(--muted); font-size: .76rem; }
.converted-layers b { color: var(--ink); }
.converter-unchanged { display: block; margin-top: 4px; color: var(--muted); font-size: .76rem; }
.converter-alert { color: var(--warn); font-weight: 700; }
.converter-footnote a { color: var(--accent); font-weight: 700; }
.detail-note { font-size: .85rem; margin: 0; }
.source { margin: 10px 0 0; font-size: .82rem; }
.source a { color: var(--accent); font-weight: 700; }
.color-directory { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--surface); }
.color-directory summary { color: var(--accent); cursor: pointer; font-weight: 700; }
.color-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-top: 10px; }
.color-item { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.color-item b { color: var(--ink); }
.variant-directory { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--surface); }
.variant-directory summary { color: var(--accent); cursor: pointer; font-weight: 700; }
.material-info summary > span, .color-directory summary > span, .variant-directory summary > span, .lightburn-advanced summary > span, .converter summary > span { display: inline-grid; width: 1.2em; place-items: center; margin-right: 4px; font-weight: 900; }
.source a::after { content: ' ↗'; font-size: .85em; text-decoration: none; }
.variant-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-top: 10px; }
.variant-item { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.safety { margin-top: 18px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.safety li { color: var(--muted); line-height: 1.5; margin: 7px 0; }
.empty { grid-column: 1 / -1; color: var(--muted); padding: 30px 0; text-align: center; }
@media (min-width: 560px) {
  #portal { padding-inline: 20px; }
  .hero { padding: 20px 22px 21px; }
  .brand-lockup { gap: 18px; }
  .brand-mark { width: 106px; height: 116px; padding: 11px 13px; border-radius: 27px; }
  .brand-name { font-size: 2.35rem; }
  .brand-name { flex-direction: row; gap: .24em; line-height: 1; }
  .hero-masthead { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); align-items: stretch; gap: 24px; }
  .hero-actions { align-self: stretch; grid-template-rows: auto 1fr; gap: 18px; }
  .hero-social-actions { align-self: end; gap: 9px; margin-top: 0; }
  .hero-intro { margin-top: 8px; padding-top: 18px; }
  .filters { flex-wrap: wrap; overflow-x: visible; }
  .material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .advanced-grid, .converter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-actions { align-items: flex-start; }
  .project-link { width: auto; }
  .config-summary .status { display: inline-block; }
}

/* Rediseño local: ficha técnica industrial. Mantiene la estructura y los controles existentes. */
:root {
  --bg: #e8e8e1;
  --surface: #f8f8f3;
  --ink: #15242a;
  --muted: #5c696a;
  --line: #c5cbc7;
  --accent: #075f83;
  --accent-soft: #dbeaf0;
  --warn: #8b560d;
  --warn-soft: #f5ead5;
  --reference: #526777;
  --published: #654d83;
  --published-soft: #ebe5f0;
  --official: #17677a;
  --official-soft: #dceef0;
  --library: #77562b;
  --library-soft: #f2e8d9;
  --danger: #963c43;
  --radius: 7px;
  font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgb(21 36 42 / .038) 1px, transparent 1px),
    linear-gradient(90deg, rgb(21 36 42 / .038) 1px, transparent 1px),
    radial-gradient(circle at 87% 6%, rgb(7 95 131 / .12), transparent 27rem);
  background-size: 24px 24px, 24px 24px, auto;
}

#portal {
  width: min(100%, 1160px);
  padding: 24px 18px 58px;
}

.hero {
  padding: 0;
  overflow: visible;
  border: 1px solid #14252b;
  border-radius: 0;
  background: #15252b;
  box-shadow: 8px 8px 0 rgb(21 36 42 / .16);
}

.hero::before,
.hero::after { display: none; }

.hero-masthead {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 20px;
}

.brand-lockup { gap: 13px; }

.brand-mark {
  width: 62px;
  height: 70px;
  padding: 7px 8px;
  border: 1px solid rgb(243 246 240 / .55);
  border-radius: 0;
  background: #f4f3ed;
  box-shadow: 4px 4px 0 rgb(3 13 17 / .3);
}

.brand-mark::after {
  position: absolute;
  inset: 4px;
  border: 1px solid rgb(7 95 131 / .32);
  content: '';
  pointer-events: none;
}

.brand-mark-glow { display: none; }

.brand-name {
  flex-direction: row;
  gap: .22em;
  color: #f4f4ee;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1.45rem, 5.4vw, 2.45rem);
  font-weight: 760;
  letter-spacing: .035em;
  line-height: 1;
}

.brand-rule {
  width: 100%;
  height: 1px;
  margin-top: 10px;
  border-radius: 0;
  background: linear-gradient(90deg, #5eb9d5, rgb(94 185 213 / 0));
}

.hero-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px 17px;
  border-top: 1px solid rgb(244 244 238 / .16);
}

.hero-language { align-self: flex-start; }

.language-switcher {
  gap: 0;
  padding: 0;
  border: 1px solid rgb(244 244 238 / .3);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.language-switcher button {
  min-height: 29px;
  padding: 4px 7px;
  border-radius: 0;
  color: rgb(244 244 238 / .75);
}

.language-switcher button.active {
  background: #f4f4ee;
  color: #15252b;
  box-shadow: none;
}

.hero-social-actions {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  width: auto;
  margin: 0;
}

.instagram-link,
.paypal-support-link {
  width: auto;
  min-height: 31px;
  padding: 6px 8px;
  border-radius: 0;
  box-shadow: none;
  font-size: .68rem;
}

.instagram-link {
  border-color: rgb(244 244 238 / .3);
  color: #f4f4ee;
  background: transparent;
}

.paypal-support-link {
  border-color: #e8b63f;
  background: #e8b63f;
  color: #15252b;
}

.paypal-mark { display: block; width: 22px; height: 22px; flex-basis: 22px; }
.paypal-mark i:first-child { color: #003087; }
.paypal-mark i:last-child { color: #009cde; }
.paypal-heart { color: #15252b; }

.hero-intro {
  margin: 0;
  padding: 24px 20px 26px;
  border-top: 1px solid rgb(244 244 238 / .16);
}

.hero-intro h1 {
  max-width: 740px;
  margin: 0 0 7px;
  color: #f4f4ee;
  font-size: clamp(2.1rem, 7.2vw, 4.2rem);
  font-weight: 720;
  letter-spacing: -.055em;
  line-height: .98;
}

.hero-intro p { max-width: 660px; color: #b7cacd; font-size: 1rem; }

.notice {
  margin: 0;
  border: 0;
  border-top: 1px solid rgb(244 244 238 / .16);
  border-radius: 0;
  background: #0f1d22;
  color: #d4e3e2;
}

.notice summary { color: #85cee0; letter-spacing: .02em; }
.notice p { color: #bdcece; }

.community-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 25px;
}

.community-action {
  min-height: 82px;
  grid-template-columns: 37px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid #aeb7b4;
  border-radius: 0;
  background: rgb(248 248 243 / .88);
  box-shadow: 4px 4px 0 rgb(21 36 42 / .12);
}

.community-action.contribution,
.community-action.admin { background: rgb(248 248 243 / .88); }
.community-action:hover { border-color: var(--accent); transform: translate(-1px, -1px); }

.community-action-icon {
  width: 37px;
  height: 37px;
  border-radius: 0;
  background: #15252b;
  box-shadow: none;
  font-size: 1.18rem;
}

.community-action.admin .community-action-icon { background: #654d83; }
.community-action strong { font-size: .89rem; }
.community-action small { font-size: .71rem; }
.community-action-arrow { color: var(--accent); }
.notification-badge { border-color: var(--surface); }

.toolbar {
  top: 0;
  padding: 13px 0 11px;
  border-top: 1px solid #afb7b4;
  border-bottom: 1px solid #afb7b4;
  background: rgb(232 232 225 / .91);
  backdrop-filter: blur(14px);
}

.search-wrap {
  border: 1px solid #8e9a98;
  border-radius: 0;
  background: #f8f8f3;
  box-shadow: inset 3px 0 0 var(--accent);
}

.search-wrap input { padding: 12px 0; }

.filters {
  gap: 0;
  padding: 11px 0 0;
  border-bottom: 1px solid #c5cbc7;
}

.filter {
  margin: 0;
  padding: 8px 9px 9px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-size: .75rem;
}

.filter.active {
  border-color: var(--accent);
  background: transparent;
  color: var(--ink);
}

.section-head { padding: 28px 0 15px; border-bottom: 2px solid #15252b; }
.eyebrow { color: var(--accent); font-size: .69rem; font-weight: 850; letter-spacing: .14em; }
.section-head h2 { margin-top: 3px; font-size: clamp(1.55rem, 4vw, 2.2rem); letter-spacing: -.045em; }
.text-button { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

.material-grid { gap: 0; border-left: 1px solid #c5cbc7; }

.material {
  min-height: 148px;
  padding: 17px 42px 15px 15px;
  border: 0;
  border-right: 1px solid #c5cbc7;
  border-bottom: 1px solid #c5cbc7;
  border-radius: 0;
  background: rgb(248 248 243 / .83);
  box-shadow: none;
}

.material:first-child { border-top: 1px solid #c5cbc7; }
.material::after { right: 13px; color: var(--accent); font-size: 1.9rem; }
.material:hover,
.material:focus-visible {
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: #fffefa;
}

.material-row { gap: 12px; }

.material-avatar {
  width: 46px;
  height: 52px;
  flex-basis: 46px;
  border: 1px solid #26353a;
  border-radius: 0;
  box-shadow: none;
}

.material-avatar::before { opacity: .42; }
.material-avatar::after { border-radius: 0; }
.avatar-label { border-radius: 0; background: rgb(10 24 30 / .76); }
.material h3 { font-size: 1rem; letter-spacing: -.02em; }
.material .family { color: var(--accent); font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.material .effect { margin: 6px 0 12px; font-size: .78rem; }
.tag, .status { border-radius: 0; font-size: .66rem; }

.portal-footer {
  width: min(calc(100% - 36px), 1124px);
  margin-top: -28px;
  padding-top: 15px;
  border-top-color: #aeb7b4;
}

.portal-footer button { border-radius: 0; }

.detail,
.safety { border-radius: 0; box-shadow: 5px 5px 0 rgb(21 36 42 / .1); }

.portal-dialog {
  border-radius: 0;
  box-shadow: 10px 10px 0 rgb(0 0 0 / .25), 0 24px 80px rgb(0 0 0 / .35%);
}

.cookie-banner { border-radius: 0; }

@media (min-width: 560px) {
  #portal { padding-inline: 26px; }
  .hero-masthead { grid-template-columns: minmax(0, 1fr) minmax(302px, 370px); align-items: center; padding: 25px 28px; }
  .hero-actions { flex-direction: column; align-items: flex-end; justify-content: space-between; min-height: 86px; padding: 0; border: 0; }
  .hero-social-actions { gap: 8px; }
  .hero-intro { padding: 28px; }
  .notice { margin: 0; padding: 13px 28px; }
  .community-actions { margin-top: 31px; }
  .material-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .material:nth-child(-n + 3) { border-top: 1px solid #c5cbc7; }
  .material:first-child { border-top: 1px solid #c5cbc7; }
}

@media (max-width: 559px) {
  .community-actions { grid-template-columns: 1fr; }
  .instagram-link span:not(.instagram-icon):not(.instagram-arrow) { display: none; }
  .instagram-link, .paypal-support-link { min-width: 34px; padding-inline: 7px; }
  .hero-social-actions { gap: 6px; }
}

/* Ajuste de cabecera y vista de material: lectura de receta antes que de formulario. */
.hero-language {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.hero-actions { justify-content: flex-end; }

.detail {
  margin-top: 4px;
  padding-bottom: 28px;
}

.detail-top {
  position: sticky;
  top: 0;
  z-index: 4;
  gap: 16px;
  margin: 0;
  padding: 17px 18px 18px;
  border: 1px solid #18292f;
  border-left: 7px solid var(--accent);
  background: #f8f8f3;
  box-shadow: 5px 5px 0 rgb(21 36 42 / .13);
  backdrop-filter: blur(14px);
}

.detail-utility {
  min-height: 27px;
  padding-bottom: 11px;
  border-bottom: 1px solid #c5cbc7;
}

.detail-top .language-switcher {
  border-color: #9aa7a6;
  background: #f8f8f3;
}

.detail-top .language-switcher button { color: var(--muted); }
.detail-top .language-switcher button.active { background: #15252b; color: #f8f8f3; }

.close-button {
  padding: 0;
  color: #15252b;
  font-size: .78rem;
  letter-spacing: .025em;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 5px;
}

.detail-heading { gap: 14px; }
.detail-heading .material-avatar-large {
  width: 60px;
  height: 66px;
  flex-basis: 60px;
  border-radius: 0;
  box-shadow: 3px 3px 0 rgb(21 36 42 / .2);
}

.detail-top h2 {
  margin: 1px 0 0;
  color: #15252b;
  font-size: clamp(1.7rem, 6.2vw, 2.75rem);
  font-weight: 760;
  letter-spacing: -.055em;
}

.detail-effect {
  position: relative;
  margin: 21px 0 13px;
  padding: 18px 19px 18px 23px;
  border: 1px solid #bdc6c2;
  background: rgb(248 248 243 / .75);
  box-shadow: 4px 4px 0 rgb(21 36 42 / .08);
  color: #35474a;
  font-size: clamp(.96rem, 2.8vw, 1.1rem);
  line-height: 1.55;
}

.detail-effect::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--accent);
  content: '';
}

.material-info,
.color-directory,
.variant-directory {
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid #c5cbc7;
  border-radius: 0;
  background: rgb(248 248 243 / .85);
  box-shadow: none;
}

.material-info summary,
.color-directory summary,
.variant-directory summary {
  padding: 12px 14px;
  color: #263c41;
  font-size: .8rem;
}

.material-info[open] summary,
.color-directory[open] summary,
.variant-directory[open] summary {
  border-bottom: 1px solid #c5cbc7;
  background: #edf2ef;
}

.material-info .detail-note,
.material-info .source { margin-inline: 14px; }
.material-info .detail-note { margin-bottom: 11px; }
.material-info .source { margin-bottom: 13px; }
.color-list, .variant-list { padding: 12px 14px; }

.catalog-summary {
  gap: 8px;
  margin: 22px 0 0;
  padding: 12px 14px;
  border: 0;
  border-top: 2px solid #15252b;
  border-bottom: 1px solid #aeb7b4;
  border-radius: 0;
  background: transparent;
  color: #536366;
}

.catalog-summary > span:first-child {
  width: 27px;
  height: 27px;
  border-radius: 0;
  background: #15252b;
}

.config-list { gap: 18px; margin-top: 16px; }

.config-group {
  padding: 14px;
  border: 1px solid #c5cbc7;
  border-top: 3px solid #15252b;
  background: rgb(241 243 238 / .72);
}

.config-group-head {
  gap: 11px;
  margin: 0 0 13px;
  padding: 0 0 12px;
  border-bottom: 1px solid #c5cbc7;
}

.config-group-icon {
  width: 37px;
  height: 37px;
  flex-basis: 37px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 2px 2px 0 rgb(7 95 131 / .2);
}

.config-group-head h3 { font-size: 1.08rem; letter-spacing: -.025em; }
.config-group-head p { color: var(--muted); font-size: .72rem; }

.config-group-list { gap: 11px; }

.config {
  position: relative;
  border: 1px solid #b9c3bf;
  border-radius: 0;
  background: #fffefa;
  box-shadow: 3px 3px 0 rgb(21 36 42 / .1);
}

.config-summary {
  gap: 11px;
  padding: 13px 13px 12px;
  border-bottom: 0;
  background: #fffefa;
}

.config-summary::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), rgb(7 95 131 / .14));
  content: '';
}

.config-mode-icon {
  width: 37px;
  height: 37px;
  flex-basis: 37px;
  border-radius: 50%;
  background: #15252b;
  color: #f8f8f3;
}

.config-heading strong { font-size: .98rem; letter-spacing: -.015em; }
.config-heading small { color: var(--accent); font-size: .73rem; font-weight: 750; }
.layer-count { border-radius: 999px; background: #e3eef0; }

.config-body { padding: 15px 13px 13px; }

.settings {
  gap: 0;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #d1d8d4;
  border-radius: 0;
}

.setting {
  padding: 9px 8px;
  border-right: 1px solid #d1d8d4;
  border-bottom: 1px solid #d1d8d4;
  border-radius: 0;
  background: #f4f5f0;
}

.setting:nth-last-child(-n + 2) { border-bottom: 0; }
.setting:nth-child(2n) { border-right: 0; }
.setting span { font-size: .61rem; letter-spacing: .065em; }
.setting-icon { color: var(--accent); }
.setting b { margin-top: 4px; color: #15252b; font-size: .91rem; }

.hatch-profile {
  margin: -1px 0 14px;
  border: 1px solid #b9ccd0;
  background: #edf4f4;
}

.hatch-profile-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border-bottom: 1px solid #c4d4d6;
  color: #1b5d69;
  font-size: .71rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.hatch-profile-head > span { font-size: 1rem; font-weight: 900; }

.hatch-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hatch-profile-grid > span {
  min-width: 0;
  padding: 9px 10px;
  border-right: 1px solid #c4d4d6;
  border-bottom: 1px solid #c4d4d6;
  color: #253a3e;
  font-size: .79rem;
  overflow-wrap: anywhere;
}

.hatch-profile-grid > span:nth-child(2n) { border-right: 0; }
.hatch-profile-grid > span:last-child { border-bottom: 0; }
.hatch-profile-grid > span:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

.hatch-profile-grid b {
  display: block;
  margin-bottom: 3px;
  color: #5b6c6d;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sub-layer-sequence {
  position: relative;
  margin-bottom: 14px;
  border: 1px solid #b9ccd0;
  border-left: 5px solid var(--official);
  border-radius: 0;
}

.sequence-head {
  padding: 12px;
  background: #e6f0f1;
}

.sequence-head strong { font-size: .84rem; }
.sub-layer-stack { gap: 10px; padding: 11px; background: #fbfcf9; }

.sub-layer-panel {
  padding: 11px;
  border: 1px solid #d1d8d4;
  border-radius: 0;
  background: #f4f5f0;
}

.sub-layer-heading { gap: 9px; padding-bottom: 9px; border-bottom: 1px solid #d1d8d4; }
.sub-layer-number { border-radius: 50%; }

.config-tools {
  margin-top: 0;
  border: 1px solid #c5cbc7;
  border-radius: 0;
  background: #f4f5f0;
}

.config-tools > summary {
  padding: 11px;
  color: #263c41;
  font-size: .76rem;
}

.config-tools[open] > summary { border-bottom: 1px solid #c5cbc7; background: #e9efeb; }
.config-tools-body { padding: 0 11px 11px; border-top: 0; }
.project-link, .convert-button { border-radius: 0; }
.project-link { border-color: #9ca9a6; background: #fffefa; }

.lightburn-advanced,
.converter {
  border-radius: 0;
  background: #fffefa;
}

.converter-section,
.converter-section.target,
.origin-summary span,
.converter-result,
.converted-layers span { border-radius: 0; }

@media (min-width: 720px) {
  .detail-top { padding: 22px 24px; }
  .detail-effect { padding: 22px 25px 22px 30px; }
  .config-group { padding: 18px; }
  .config-group-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .config-group-list > .config:only-child { max-width: 670px; }
  .config-body .settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .config-body .setting:nth-child(2n) { border-right: 1px solid #d1d8d4; }
  .config-body .setting:nth-child(3n) { border-right: 0; }
  .config-body .setting:nth-last-child(-n + 3) { border-bottom: 0; }
  .hatch-profile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hatch-profile-grid > span,
  .hatch-profile-grid > span:nth-child(2n),
  .hatch-profile-grid > span:nth-last-child(2):nth-child(odd) { border-right: 1px solid #c4d4d6; border-bottom: 0; }
  .hatch-profile-grid > span:last-child { border-right: 0; }
}