.age-shell {
    width: min(1180px, calc(100vw - 2rem));
    margin: 0 auto;
    padding-left: var(--booklet-content-offset, 0px);
}

/* Homepage 2026 */
.age-home {
    --home-ink: #132238;
    --home-muted: #66758a;
    --home-line: #dce3ea;
    --home-panel: #fff;
    --home-soft: #f4f6f8;
    --home-gold: #b77a25;
    --home-gold-strong: #8f5914;
    --home-teal: #147d79;
    overflow: hidden;
    background: #f8f9fa;
    color: var(--home-ink);
}

.dark .age-home {
    --home-ink: #edf2f6;
    --home-muted: #8e9aa9;
    --home-line: rgba(255, 255, 255, .1);
    --home-panel: #171b20;
    --home-soft: #12161a;
    --home-gold: #d5a75e;
    --home-gold-strong: #f0c77f;
    --home-teal: #5dbab4;
    background: #0d1013;
}

.age-home a { text-decoration: none; }

.age-home-hero {
    position: relative;
    isolation: isolate;
    border-bottom: 1px solid var(--home-line);
    background: #eef2f3;
}

.dark .age-home-hero { background: #10151a; }

.age-home-hero::before,
.age-home-hero::after {
    position: absolute;
    border: 1px solid rgba(183, 122, 37, .18);
    border-radius: 50%;
    content: '';
    pointer-events: none;
}

.age-home-hero::before { width: 440px; height: 440px; top: -260px; right: 8%; }
.age-home-hero::after { width: 220px; height: 220px; bottom: -150px; left: 3%; }

.age-home-hero-wordmark {
    position: absolute;
    z-index: -1;
    right: -24px;
    bottom: -20px;
    overflow: hidden;
    max-width: 72vw;
    color: rgba(19, 34, 56, .035);
    font-size: clamp(110px, 16vw, 290px);
    font-weight: 950;
    line-height: .8;
    letter-spacing: -.07em;
    pointer-events: none;
    white-space: nowrap;
}

.dark .age-home-hero-wordmark { color: rgba(255, 255, 255, .018); }

.age-home-hero-axis {
    position: absolute;
    z-index: 0;
    color: var(--home-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .22em;
    opacity: .6;
    pointer-events: none;
}

.age-home-hero-axis::before { position: absolute; background: var(--home-line); content: ''; }
.age-home-hero-axis-top { top: 28px; right: 6%; width: 160px; text-align: right; }
.age-home-hero-axis-top::before { top: 50%; right: 48px; width: 112px; height: 1px; }
.age-home-hero-axis-side { top: 50%; left: 25px; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
.age-home-hero-axis-side::before { top: 50%; left: 88px; width: 74px; height: 1px; }

.age-home-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    min-height: 560px;
    padding-top: 54px;
    padding-bottom: 54px;
}

.age-home-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--home-gold-strong);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.age-home-kicker span {
    width: 32px;
    height: 2px;
    background: var(--home-gold);
}

.age-home-hero-copy h1 {
    max-width: none;
    margin: 18px 0 20px;
    color: var(--home-ink);
    font-size: clamp(50px, 5.15vw, 68px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.055em;
    white-space: nowrap;
}

.age-home-hero-copy h1 em { color: var(--home-gold); font-style: normal; }
.age-home-hero-copy h1 br { display: none; }
.age-home-title-separator { margin: 0 .16em; color: var(--home-muted); font-size: .56em; vertical-align: .2em; }

.age-home-hero-copy > p {
    max-width: 670px;
    margin: 0;
    color: var(--home-muted);
    font-size: 16px;
    line-height: 1.85;
}

.age-home-hero-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 23px;
    color: var(--home-muted);
    font-size: 11px;
    font-weight: 700;
}

.age-home-hero-signals span { display: inline-flex; align-items: center; gap: 7px; }
.age-home-hero-signals i { color: var(--home-gold); font-size: 9px; font-style: normal; letter-spacing: .08em; }

.age-home-search {
    display: flex;
    align-items: center;
    max-width: 720px;
    height: 62px;
    margin-top: 25px;
    border: 1px solid var(--home-line);
    border-radius: 10px;
    background: var(--home-panel);
    box-shadow: 0 14px 40px rgba(16, 24, 32, .09);
    padding: 6px;
}

.dark .age-home-search { box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }

.age-home-search-icon {
    padding: 0 12px 0 14px;
    color: var(--home-gold);
    font-size: 27px;
    line-height: 1;
}

.age-home-search input {
    min-width: 0;
    height: 100%;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--home-ink);
    font-size: 15px;
    outline: 0;
}

.age-home-search input::placeholder { color: var(--home-muted); }

.age-home-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 48px;
    border: 0;
    border-radius: 7px;
    background: #21344a;
    padding: 0 22px;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.dark .age-home-search button { background: #d5a75e; color: #17120a; }
.age-home-search button:hover { background: var(--home-gold-strong); }

.age-home-quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 17px;
    color: var(--home-muted);
    font-size: 12px;
}

.age-home-quick-links a {
    border-bottom: 1px solid transparent;
    color: var(--home-ink);
    font-weight: 700;
}

.age-home-quick-links a:hover { border-color: var(--home-gold); color: var(--home-gold-strong); }

.age-home-index-card {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    background: #172432;
    box-shadow: 17px 18px 0 rgba(183, 122, 37, .11), 0 30px 70px rgba(0, 0, 0, .16);
    padding: 24px;
    color: #e8edf2;
}

.age-home-index-card::before,
.age-home-index-card::after {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: rgba(213, 167, 94, .65);
    content: '';
    pointer-events: none;
}

.age-home-index-card::before { top: 12px; left: 12px; border-top: 1px solid; border-left: 1px solid; }
.age-home-index-card::after { right: 12px; bottom: 12px; border-right: 1px solid; border-bottom: 1px solid; }

.dark .age-home-index-card { background: #16202a; }

.age-home-index-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #91a0af;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.age-home-index-head i { color: #76c6ae; font-style: normal; letter-spacing: 0; }
.age-home-index-head i::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #60c49f; }

.age-home-total { margin-top: 24px; }
.age-home-total strong { display: block; color: #fff; font-size: 42px; line-height: 1; letter-spacing: -.04em; }
.age-home-total span { display: block; margin-top: 7px; color: #91a0af; font-size: 12px; }

.age-home-index-domain {
    position: absolute;
    top: 138px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #728497;
}

.age-home-index-domain b { color: #d5a75e; font-size: 18px; }
.age-home-index-domain span { border-left: 1px solid rgba(255,255,255,.12); padding-left: 8px; font-size: 7px; font-weight: 800; line-height: 1.3; letter-spacing: .12em; }

.age-home-orbit {
    position: absolute;
    top: 68px;
    right: -22px;
    display: grid;
    width: 220px;
    height: 220px;
    place-items: center;
    border: 1px solid rgba(213, 167, 94, .22);
    border-radius: 50%;
}

.age-home-orbit::before { width: 142px; height: 142px; border: 1px solid rgba(213, 167, 94, .18); border-radius: 50%; content: ''; }
.age-home-orbit-core { position: absolute; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: #d5a75e; color: #172432; font-weight: 900; }
.age-home-orbit-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #d5a75e; }
.age-home-orbit-dot.dot-one { top: 20px; left: 43px; }
.age-home-orbit-dot.dot-two { right: 29px; bottom: 34px; background: #59aaa5; }
.age-home-orbit-dot.dot-three { left: 17px; bottom: 68px; width: 5px; height: 5px; background: #748da5; }

.age-home-index-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 150px; background: rgba(255,255,255,.08); }
.age-home-index-stats a { display: flex; flex-direction: column; gap: 5px; background: #172432; padding: 16px 13px; color: #91a0af; font-size: 11px; }
.dark .age-home-index-stats a { background: #16202a; }
.age-home-index-stats strong { color: #f7f8f9; font-size: 16px; }
.age-home-index-stats a:hover strong { color: #e1b66e; }

.age-home-stats { border-bottom: 1px solid var(--home-line); background: var(--home-panel); box-shadow: 0 12px 32px rgba(20, 30, 40, .035); }
.age-home-stats-inner { display: grid; grid-template-columns: repeat(6, 1fr); padding-top: 0; padding-bottom: 0; }
.age-home-stats a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-right: 1px solid var(--home-line); padding: 21px 18px; color: var(--home-muted); font-size: 12px; }
.age-home-stats a:first-child { border-left: 1px solid var(--home-line); }
.age-home-stats a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--home-gold); content: ''; opacity: 0; transform: scaleX(.45); transition: opacity .18s ease, transform .18s ease; }
.age-home-stats a:hover::after { opacity: 1; transform: scaleX(1); }
.age-home-stats span { display: inline-flex; align-items: center; gap: 8px; }
.age-home-stats span i { color: var(--home-gold); font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .08em; }
.age-home-stats strong { color: var(--home-ink); font-size: 14px; }
.age-home-stats a:hover strong { color: var(--home-gold-strong); }

.age-home-section { padding-top: 72px; padding-bottom: 72px; }
.age-home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.age-home-section-head > div { position: relative; }
.age-home-section-no { position: absolute; top: 5px; left: -48px; color: var(--home-gold); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.age-home-section-head h2 { margin: 0; color: var(--home-ink); font-size: 30px; font-weight: 900; letter-spacing: -.03em; }
.age-home-section-head p { margin: 8px 0 0; color: var(--home-muted); font-size: 13px; }
.age-home-search-shortcut { display: inline-flex; align-items: center; gap: 8px; height: 38px; border: 1px solid var(--home-line); border-radius: 7px; background: var(--home-panel); padding: 0 11px; color: var(--home-muted); font-size: 12px; cursor: pointer; }
.age-home-search-shortcut > span { color: var(--home-gold); font-size: 18px; }
.age-home-search-shortcut kbd { border: 1px solid var(--home-line); border-radius: 4px; background: var(--home-soft); padding: 3px 6px; color: var(--home-ink); font-family: inherit; font-size: 10px; }

.age-home-featured-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: repeat(2, 170px); gap: 12px; }
.age-home-feature-card { position: relative; display: flex; min-width: 0; overflow: hidden; border: 1px solid var(--home-line); border-radius: 10px; background: var(--home-panel); padding: 24px; color: var(--home-ink); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.age-home-feature-card:hover { border-color: rgba(183,122,37,.55); box-shadow: 0 14px 28px rgba(20,30,40,.08); transform: translateY(-2px); }
.age-home-feature-1 { grid-row: 1 / 3; flex-direction: column; justify-content: flex-end; background: #203348; color: #fff; }
.dark .age-home-feature-1 { background: #1c2d3e; }
.age-home-feature-4 { grid-column: 2 / 4; }
.age-fluent-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask-image: var(--age-fluent-svg);
    mask-image: var(--age-fluent-svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.age-fluent-box-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.591 2.513a3.75 3.75 0 0 1 2.818 0l7.498 3.04A1.75 1.75 0 0 1 22 7.175v9.653a1.75 1.75 0 0 1-1.093 1.621l-7.498 3.04a3.75 3.75 0 0 1-2.818 0l-7.498-3.04A1.75 1.75 0 0 1 2 16.827V7.176a1.75 1.75 0 0 1 1.093-1.622zm2.254 1.39a2.25 2.25 0 0 0-1.69 0L9.24 4.68l7.527 2.927l2.669-1.03zm1.846 4.505L7.215 5.5L4.59 6.564l7.411 2.882zM3.5 16.828a.25.25 0 0 0 .156.231l7.499 3.04q.047.02.095.036v-9.371L3.5 7.75zm9.345 3.271l7.499-3.04a.25.25 0 0 0 .156-.232V7.774l-7.75 2.992v9.37z'/%3E%3C/svg%3E"); }
.age-fluent-sparkle-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.665 15.735c.245.173.537.265.836.264a1.44 1.44 0 0 0 1.327-.876l.613-1.864a2.87 2.87 0 0 1 1.817-1.812l1.778-.578a1.442 1.442 0 0 0-.052-2.74l-1.755-.57a2.88 2.88 0 0 1-1.822-1.823l-.578-1.777a1.446 1.446 0 0 0-2.732.022l-.583 1.792a2.88 2.88 0 0 1-1.77 1.786l-1.777.57a1.444 1.444 0 0 0 .017 2.735l1.754.569a2.89 2.89 0 0 1 1.822 1.826l.578 1.775c.099.283.283.527.527.7M4.61 9.5l1.612-.523a4.4 4.4 0 0 0 2.731-2.773l.515-1.582l.516 1.587a4.38 4.38 0 0 0 2.781 2.773l1.62.522l-1.59.515a4.38 4.38 0 0 0-2.774 2.775l-.515 1.582l-.515-1.585A4.4 4.4 0 0 0 6.21 10.01zm10.69 7.499A2.8 2.8 0 0 1 17 18.708a2.8 2.8 0 0 1 1.7-1.7a2.81 2.81 0 0 1-1.718-1.708A2.8 2.8 0 0 1 15.3 17'/%3E%3C/svg%3E"); }
.age-fluent-document-list-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.25a.75.75 0 1 1 1.5 0a.75.75 0 0 1-1.5 0m.75 2.25a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5M7 18.25a.75.75 0 1 1 1.5 0a.75.75 0 0 1-1.5 0m3.75-6.75a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5zM10 15.25a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75m.75 2.25a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5zm8.664-9.086l-5.829-5.828A2.05 2.05 0 0 0 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414M18.5 20a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); }
.age-fluent-person-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.755 14a2.25 2.25 0 0 1 2.248 2.25v.575c0 .894-.32 1.759-.9 2.438c-1.57 1.833-3.957 2.738-7.103 2.738s-5.532-.905-7.098-2.74a3.75 3.75 0 0 1-.898-2.434v-.578A2.25 2.25 0 0 1 6.253 14zm0 1.5H6.252a.75.75 0 0 0-.75.75v.577c0 .535.192 1.053.54 1.46c1.253 1.469 3.22 2.214 5.957 2.214c2.739 0 4.706-.745 5.963-2.213a2.25 2.25 0 0 0 .54-1.463v-.576a.75.75 0 0 0-.748-.749M12 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10m0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7'/%3E%3C/svg%3E"); }
.age-fluent-map-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.203 4l.047-.002l.046.001l.068.007q.144.02.266.096l5.123 3.599l5.067-3.56a.75.75 0 0 1 1.174.51l.007.104v10.632a.75.75 0 0 1-.318.614l-5.5 3.866a.74.74 0 0 1-.828.023L9.25 16.297l-5.07 3.565a.75.75 0 0 1-1.174-.51l-.007-.104V8.616a.75.75 0 0 1 .318-.614l5.5-3.866a.8.8 0 0 1 .323-.129zm10.298 2.197l-4 2.812v8.799l4-2.812zM8.5 6.193l-4 2.812v8.8l4-2.813zm1.502 0v8.8l4 2.811V9.005z'/%3E%3C/svg%3E"); }
.age-fluent-shield-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.75A.75.75 0 0 1 3.75 5c2.663 0 5.258-.943 7.8-2.85a.75.75 0 0 1 .9 0C14.992 4.057 17.587 5 20.25 5a.75.75 0 0 1 .75.75V11c0 5.001-2.958 8.676-8.725 10.948a.75.75 0 0 1-.55 0C5.958 19.676 3 16 3 11zm1.5.728V11c0 4.256 2.453 7.379 7.5 9.442c5.047-2.063 7.5-5.186 7.5-9.442V6.478c-2.577-.152-5.08-1.09-7.5-2.8c-2.42 1.71-4.923 2.648-7.5 2.8'/%3E%3C/svg%3E"); }
.age-fluent-wrench-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7.5a5.5 5.5 0 0 1 7.664-5.058a.75.75 0 0 1 .235 1.22L16.311 6.25l1.44 1.44l2.587-2.59a.75.75 0 0 1 1.22.236a5.5 5.5 0 0 1-6.344 7.512L6.902 21.16A2.871 2.871 0 1 1 2.84 17.1l8.311-8.312A5.5 5.5 0 0 1 11 7.5m5.5-4a4 4 0 0 0-3.794 5.27a.75.75 0 0 1-.181.768L3.902 18.16A1.371 1.371 0 0 0 5.84 20.1l8.624-8.625a.75.75 0 0 1 .768-.18a4 4 0 0 0 5.246-4.213l-1.845 1.844a1.25 1.25 0 0 1-1.767 0l-1.793-1.793a1.25 1.25 0 0 1 0-1.768l1.844-1.844A4 4 0 0 0 16.5 3.5'/%3E%3C/svg%3E"); }
.age-fluent-trophy-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.254 2a2.25 2.25 0 0 1 2.236 2h1.268a1.75 1.75 0 0 1 1.75 1.75v3a3.25 3.25 0 0 1-3.276 3.251a5.76 5.76 0 0 1-4.731 3.95V17.5h1.753a3.25 3.25 0 0 1 3.25 3.25v.5a.75.75 0 0 1-.75.75H6.75a.75.75 0 0 1-.75-.75v-.5a3.25 3.25 0 0 1 3.25-3.25H11v-1.549a5.76 5.76 0 0 1-4.729-3.95A3.25 3.25 0 0 1 2.996 8.75v-3c0-.966.784-1.75 1.75-1.75h1.268A2.25 2.25 0 0 1 8.251 2zm-1 17H9.25a1.75 1.75 0 0 0-1.733 1.5h8.468A1.75 1.75 0 0 0 14.254 19m1-15.5H8.25a.75.75 0 0 0-.75.75v5.999a4.252 4.252 0 0 0 8.503 0V4.25a.75.75 0 0 0-.75-.75m3.504 2h-1.254v4.983A1.75 1.75 0 0 0 19 8.75v-3a.25.25 0 0 0-.242-.25M6 5.5H4.746a.25.25 0 0 0-.25.25v3a1.75 1.75 0 0 0 1.505 1.733z'/%3E%3C/svg%3E"); }
.age-fluent-tag-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.004-4.596l8.5-8.51a3.25 3.25 0 0 1 2.3-.953zm0 1.5h-5.466c-.464 0-.91.185-1.238.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75M17 5.502a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3'/%3E%3C/svg%3E"); }
.age-fluent-calendar-clock-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.75 3A3.25 3.25 0 0 1 21 6.25v5.772a6.5 6.5 0 0 0-1.5-.709V8.5h-15v9.25c0 .966.784 1.75 1.75 1.75h5.063c.173.534.412 1.037.709 1.5H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3zm0 1.5H6.25A1.75 1.75 0 0 0 4.5 6.25V7h15v-.75a1.75 1.75 0 0 0-1.75-1.75m5.25 13a5.5 5.5 0 1 0-11 0a5.5 5.5 0 0 0 11 0M17.5 14a.5.5 0 0 1 .5.5V17h2a.5.5 0 0 1 0 1h-2.5a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E"); }
.age-fluent-calculator-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2zm2-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V7a.5.5 0 0 0-.5-.5zm-.75 8a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5m1.25 2.75a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0m6.25-2.75a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5M17 17.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0m-5-2.75a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5m1.25 2.75a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M7.25 2A3.25 3.25 0 0 0 4 5.25v13.5A3.25 3.25 0 0 0 7.25 22h9.5A3.25 3.25 0 0 0 20 18.75V5.25A3.25 3.25 0 0 0 16.75 2zM5.5 5.25c0-.966.784-1.75 1.75-1.75h9.5c.966 0 1.75.784 1.75 1.75v13.5a1.75 1.75 0 0 1-1.75 1.75h-9.5a1.75 1.75 0 0 1-1.75-1.75z'/%3E%3C/svg%3E"); }
.age-fluent-bug-regular { --age-fluent-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 2.752a.75.75 0 0 0-1.5 0v.752c0 .633.196 1.22.53 1.703a3.75 3.75 0 0 0-2.52 3.284h-.257a2.25 2.25 0 0 1-2.24-2.26l.006-1.485a.75.75 0 1 0-1.5-.006l-.007 1.485a3.75 3.75 0 0 0 3.735 3.766H7v1.51H2.75a.75.75 0 0 0 0 1.5H7v1.992h-.253a3.75 3.75 0 0 0-3.735 3.765l.007 1.486a.75.75 0 0 0 1.5-.006l-.007-1.486a2.25 2.25 0 0 1 2.241-2.26h.473a5.002 5.002 0 0 0 9.548 0h.473a2.25 2.25 0 0 1 2.24 2.26l-.006 1.486a.75.75 0 0 0 1.5.006l.006-1.486a3.75 3.75 0 0 0-3.734-3.765H17V13h4.251a.75.75 0 0 0 0-1.5H17V9.99h.253a3.75 3.75 0 0 0 3.735-3.766L20.98 4.74a.75.75 0 1 0-1.5.006l.006 1.486a2.25 2.25 0 0 1-2.24 2.259h-.256a3.75 3.75 0 0 0-2.52-3.284c.333-.484.529-1.07.529-1.703v-.752a.75.75 0 0 0-1.5 0v.752a1.5 1.5 0 0 1-3 0zm-2 6.002a2.25 2.25 0 0 1 2.25-2.25h2.5a2.25 2.25 0 0 1 2.25 2.25v6.247a3.5 3.5 0 1 1-7 0z'/%3E%3C/svg%3E"); }

.age-home-feature-icon { position: absolute; top: 22px; left: 24px; display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid var(--home-line); border-radius: 12px; color: var(--home-gold); font-size: 29px; }
.age-home-feature-1 .age-home-feature-icon { width: 78px; height: 78px; border-color: rgba(255,255,255,.15); border-radius: 15px; color: #e1b66e; font-size: 40px; }
.age-home-feature-content { display: flex; min-width: 0; flex-direction: column; align-self: end; }
.age-home-feature-content small { color: var(--home-muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.age-home-feature-content strong { margin-top: 5px; color: inherit; font-size: 22px; font-weight: 900; }
.age-home-feature-content > span { margin-top: 7px; color: var(--home-muted); font-size: 12px; }
.age-home-feature-1 .age-home-feature-content small, .age-home-feature-1 .age-home-feature-content > span { color: #a7b3bf; }
.age-home-feature-1 .age-home-feature-content strong { font-size: 34px; }
.age-home-feature-count { position: absolute; top: 24px; right: 46px; color: var(--home-muted); font-size: 11px; font-weight: 800; }
.age-home-feature-count i { font-style: normal; font-weight: 400; }
.age-home-feature-1 .age-home-feature-count { top: auto; right: auto; bottom: 126px; left: 24px; color: #d8e0e7; font-size: 20px; }
.age-home-feature-arrow { position: absolute; top: 20px; right: 22px; color: var(--home-gold); font-size: 16px; }

.age-home-secondary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.age-home-secondary-grid a { display: flex; align-items: center; min-width: 0; gap: 12px; border: 1px solid var(--home-line); border-radius: 8px; background: var(--home-panel); padding: 15px; color: var(--home-ink); }
.age-home-secondary-grid a:hover { border-color: rgba(183,122,37,.55); }
.age-home-secondary-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 1px solid var(--home-line); border-radius: 10px; background: var(--home-soft); color: var(--home-gold-strong); font-size: 24px; }
.age-home-secondary-grid a > span:nth-child(2) { min-width: 0; flex: 1; }
.age-home-secondary-grid strong, .age-home-secondary-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.age-home-secondary-grid strong { color: var(--home-ink); font-size: 13px; }
.age-home-secondary-grid small { margin-top: 3px; color: var(--home-muted); font-size: 10px; }
.age-home-secondary-grid i { color: var(--home-muted); font-style: normal; }

.age-home-tools-wrap { border-top: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); background: var(--home-soft); }
.age-home-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.age-home-tool { position: relative; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 20px; min-height: 190px; overflow: hidden; border-radius: 11px; padding: 30px; color: #fff; }
.age-home-tool-map { background: #176e6b; }
.age-home-tool-build { background: #4b405e; }
.age-home-tool::after { position: absolute; right: -48px; bottom: -76px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; content: ''; }
.age-home-tool-mark { display: grid; width: 70px; height: 70px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(255,255,255,.08); font-size: 34px; }
.age-home-tool-copy { display: flex; min-width: 0; flex-direction: column; }
.age-home-tool-copy small { color: rgba(255,255,255,.58); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.age-home-tool-copy strong { margin-top: 4px; font-size: 25px; font-weight: 900; }
.age-home-tool-copy > span { margin-top: 8px; color: rgba(255,255,255,.7); font-size: 12px; }
.age-home-tool b { position: relative; z-index: 1; align-self: end; color: #fff; font-size: 11px; }

.age-home-more { color: var(--home-muted); font-size: 12px; font-weight: 700; }
.age-home-more span { margin-left: 7px; color: var(--home-gold); }
.age-home-latest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.age-home-latest-card { display: flex; align-items: center; min-width: 0; gap: 14px; border: 1px solid var(--home-line); border-radius: 9px; background: var(--home-panel); padding: 13px; color: var(--home-ink); }
.age-home-latest-card:hover { border-color: rgba(183,122,37,.55); }
.age-home-latest-icon { display: grid; width: 52px; height: 52px; flex: 0 0 auto; overflow: hidden; place-items: center; border: 1px solid var(--home-line); border-radius: 8px; background: var(--home-soft); color: var(--home-gold); font-weight: 900; }
.age-home-latest-icon img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.age-home-latest-copy { min-width: 0; flex: 1; }
.age-home-latest-copy small, .age-home-latest-copy strong, .age-home-latest-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.age-home-latest-copy small { color: var(--home-gold-strong); font-size: 9px; font-weight: 800; }
.age-home-latest-copy strong { margin-top: 4px; color: var(--home-ink); font-size: 14px; }
.age-home-latest-copy > span { margin-top: 4px; color: var(--home-muted); font-size: 11px; }
.age-home-latest-card > i { color: var(--home-muted); font-size: 13px; font-style: normal; }

@media (max-width: 1180px) {
    .age-home-section-no { position: static; display: block; margin-bottom: 7px; }
}

@media (max-width: 980px) {
    .age-home-hero-layout { grid-template-columns: 1fr; padding-top: 50px; padding-bottom: 50px; }
    .age-home-hero-copy h1 { font-size: clamp(48px, 9vw, 70px); }
    .age-home-index-card { min-height: 360px; }
    .age-home-index-stats { margin-top: 115px; }
    .age-home-stats-inner { grid-template-columns: repeat(3, 1fr); }
    .age-home-stats a:nth-child(4) { border-left: 1px solid var(--home-line); }
    .age-home-featured-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 230px repeat(2, 170px); }
    .age-home-feature-1 { grid-column: 1 / 3; grid-row: auto; }
    .age-home-feature-4 { grid-column: 1 / 3; }
    .age-home-feature-1 .age-home-feature-count { bottom: auto; top: 26px; left: auto; right: 48px; }
    .age-home-secondary-grid { grid-template-columns: repeat(2, 1fr); }
    .age-home-tools-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .age-home-hero-layout { min-height: 0; gap: 36px; padding-top: 38px; padding-bottom: 38px; }
    .age-home-hero-copy h1 { margin-top: 14px; font-size: clamp(42px, 14vw, 58px); white-space: normal; }
    .age-home-hero-copy h1 br { display: block; }
    .age-home-title-separator { display: none; }
    .age-home-hero-copy > p { font-size: 14px; line-height: 1.75; }
    .age-home-hero-wordmark { right: -6px; bottom: 2px; max-width: 96vw; font-size: 104px; }
    .age-home-hero-axis { display: none; }
    .age-home-hero-signals { gap: 10px 16px; margin-top: 18px; }
    .age-home-search { height: auto; padding: 5px; }
    .age-home-search-icon { padding: 0 8px; }
    .age-home-search input { height: 46px; font-size: 13px; }
    .age-home-search button { width: 48px; height: 46px; padding: 0; font-size: 0; }
    .age-home-search button span { font-size: 18px; }
    .age-home-index-card { min-height: 362px; padding: 20px; box-shadow: 10px 12px 0 rgba(183,122,37,.1); }
    .age-home-index-domain { top: 132px; left: 20px; }
    .age-home-orbit { right: -64px; }
    .age-home-index-stats { margin-top: 130px; }
    .age-home-stats-inner { grid-template-columns: repeat(2, 1fr); }
    .age-home-stats a, .age-home-stats a:nth-child(4) { border-left: 0; }
    .age-home-stats a:nth-child(odd) { border-left: 1px solid var(--home-line); }
    .age-home-section { padding-top: 50px; padding-bottom: 50px; }
    .age-home-section-head { align-items: start; flex-direction: column; margin-bottom: 22px; }
    .age-home-section-head h2 { font-size: 27px; }
    .age-home-search-shortcut { width: 100%; justify-content: center; }
    .age-home-featured-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: none; }
    .age-home-feature-card, .age-home-feature-1, .age-home-feature-4 { grid-column: auto; grid-row: auto; min-height: 168px; }
    .age-home-feature-1 { min-height: 230px; }
    .age-home-feature-1 .age-home-feature-count { top: 24px; right: 42px; }
    .age-home-secondary-grid { grid-template-columns: 1fr; }
    .age-home-tool { grid-template-columns: 54px 1fr; gap: 14px; min-height: 210px; padding: 24px 20px; }
    .age-home-tool-mark { width: 52px; height: 52px; font-size: 27px; }
    .age-home-tool b { grid-column: 2; }
    .age-home-latest-grid { grid-template-columns: 1fr; }
    .age-home-latest-section .age-home-section-head { flex-direction: row; }
    .age-home-latest-section .age-home-section-head p { display: none; }
}

.age-hero {
    border-bottom: 1px solid rgb(226 232 240);
    background: linear-gradient(180deg, rgba(15, 23, 42, .04), transparent);
}

.dark .age-hero {
    border-color: rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(15, 23, 42, .72), rgba(15, 23, 42, .18));
}

.age-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.age-eyebrow {
    color: rgb(2 132 199);
    font-size: .8125rem;
    font-weight: 700;
}

.dark .age-eyebrow {
    color: rgb(125 211 252);
}

.age-title {
    margin: .45rem 0 .75rem;
    color: rgb(15 23 42);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.dark .age-title {
    color: #fff;
}

.age-lead {
    max-width: 760px;
    color: rgb(71 85 105);
    font-size: 1rem;
    line-height: 1.8;
}

.dark .age-lead {
    color: rgb(203 213 225);
}

.age-search {
    display: flex;
    max-width: 620px;
    margin-top: 1.25rem;
    overflow: hidden;
    border: 1px solid rgb(203 213 225);
    border-radius: .5rem;
    background: #fff;
}

.dark .age-search {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(15, 23, 42, .76);
}

.age-search input {
    min-width: 0;
    flex: 1;
    height: 3rem;
    border: 0;
    padding: 0 1rem;
    background: transparent;
    color: inherit;
    outline: 0;
}

.age-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.75rem;
    height: 3rem;
    border: 0;
    background: rgb(37 99 235);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.age-panel,
.age-card,
.age-filter {
    border: 1px solid rgb(226 232 240);
    border-radius: .5rem;
    background: #fff;
}

.dark .age-panel,
.dark .age-card,
.dark .age-filter {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(24, 24, 27, .92);
}

.age-panel {
    padding: 1rem;
}

.age-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    color: rgb(100 116 139);
}

.dark .age-stat-row {
    color: rgb(148 163 184);
}

.age-stat-row strong {
    color: rgb(15 23 42);
}

.dark .age-stat-row strong {
    color: #fff;
}

.age-section {
    padding: 1.75rem 0;
}

.age-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .875rem;
}

.age-section-head h2,
.age-panel h2 {
    margin: 0;
    color: rgb(15 23 42);
    font-size: 1.25rem;
    font-weight: 800;
}

.dark .age-section-head h2,
.dark .age-panel h2 {
    color: #fff;
}

.age-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

.age-entry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.age-list-table {
    display: grid;
    gap: .5rem;
}

.age-list-row {
    display: grid;
    grid-template-columns: 3rem minmax(220px, 1fr) minmax(420px, 1.15fr);
    align-items: center;
    gap: .85rem;
    border: 1px solid rgb(226 232 240);
    border-radius: .5rem;
    background: #fff;
    padding: .72rem .85rem;
    transition: border-color .16s ease, background .16s ease;
}

.age-list-row:hover {
    border-color: rgba(245, 158, 11, .55);
    background: #fffaf0;
}

.dark .age-list-row {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(24, 24, 27, .92);
}

.age-list-icon {
    width: 2.75rem;
    height: 2.75rem;
}

.age-list-main {
    min-width: 0;
}

.age-list-main strong,
.age-list-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.age-list-main strong {
    color: rgb(15 23 42);
    font-size: .98rem;
}

.dark .age-list-main strong {
    color: #fff;
}

.age-list-main small {
    margin-top: .18rem;
    color: rgb(100 116 139);
    font-size: .78rem;
}

.age-list-meta {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .4rem;
}

.age-list-meta span {
    min-width: 0;
    border-left: 1px solid rgb(226 232 240);
    padding-left: .55rem;
}

.dark .age-list-meta span {
    border-color: rgba(255, 255, 255, .1);
}

.age-list-meta em,
.age-list-meta b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.age-list-meta em {
    color: rgb(100 116 139);
    font-size: .72rem;
    font-style: normal;
}

.age-list-meta b {
    margin-top: .12rem;
    color: rgb(15 23 42);
    font-size: .82rem;
    font-weight: 700;
}

.dark .age-list-meta b {
    color: #f8fafc;
}

.age-card {
    min-height: 7.25rem;
    padding: .875rem;
    transition: border-color .16s ease, transform .16s ease;
}

.age-card:hover {
    border-color: rgb(59 130 246);
    transform: translateY(-1px);
}

.age-entry {
    display: flex;
    gap: .75rem;
}

.age-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: .45rem;
    background: rgb(239 246 255);
    color: rgb(37 99 235);
    font-weight: 800;
}

.dark .age-icon {
    background: rgba(14, 165, 233, .14);
    color: rgb(125 211 252);
}

.age-card h3 {
    margin: .75rem 0 .35rem;
    color: rgb(15 23 42);
    font-size: 1rem;
    font-weight: 800;
}

.age-entry h3 {
    margin-top: 0;
}

.dark .age-card h3 {
    color: #fff;
}

.age-muted,
.age-card p {
    margin: 0;
    color: rgb(100 116 139);
    line-height: 1.55;
}

.dark .age-muted,
.dark .age-card p {
    color: rgb(148 163 184);
}

.age-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .65rem;
}

.age-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    border-radius: 999px;
    background: rgb(241 245 249);
    padding: 0 .55rem;
    color: rgb(71 85 105);
    font-size: .75rem;
}

.dark .age-badge {
    background: rgba(255, 255, 255, .08);
    color: rgb(203 213 225);
}

.age-page-title {
    padding: 1.8rem 0 1.2rem;
}

.age-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .875rem;
    padding: .75rem;
}

.age-filter form {
    display: flex;
    gap: .5rem;
}

.age-filter input {
    height: 2.4rem;
    border: 1px solid rgb(203 213 225);
    border-radius: .375rem;
    padding: 0 .75rem;
    background: #fff;
    color: inherit;
}

.dark .age-filter input {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(15, 23, 42, .72);
}

.age-empty {
    border: 1px dashed rgb(203 213 225);
    border-radius: .5rem;
    padding: 1.75rem;
    color: rgb(100 116 139);
    text-align: center;
}

.dark .age-empty {
    border-color: rgba(255, 255, 255, .16);
    color: rgb(148 163 184);
}

.age-pagination {
    display: flex;
    justify-content: center;
    gap: .45rem;
    padding: 1.5rem 0;
}

.age-pagination a,
.age-pagination span {
    display: grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.15rem;
    border: 1px solid rgb(226 232 240);
    border-radius: .375rem;
    background: #fff;
}

.dark .age-pagination a,
.dark .age-pagination span {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(24, 24, 27, .92);
}

.age-pagination .active {
    background: rgb(37 99 235);
    color: #fff;
}

.age-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

.age-item-tooltip {
    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 18px 42px rgba(91, 64, 20, .08);
    padding: 1.1rem;
}

.dark .age-item-tooltip {
    border-color: rgba(255, 198, 82, .16);
    background: rgba(24, 24, 27, .92);
}

.age-item-head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgb(226 232 240);
}

.dark .age-item-head {
    border-color: rgba(255, 255, 255, .1);
}

.age-item-icon {
    width: 3.25rem;
    height: 3.25rem;
}

.age-item-title {
    min-width: 0;
}

.age-item-kind {
    display: block;
    color: #e89a00;
    font-size: .82rem;
    font-weight: 700;
}

.age-item-title h1 {
    margin: .22rem 0 .45rem;
    color: rgb(15 23 42);
    font-size: 1.65rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.dark .age-item-title h1 {
    color: #fff;
}

.age-item-grade {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    border-radius: 999px;
    background: #fff3cf;
    padding: 0 .65rem;
    color: #9a6a00;
    font-size: .78rem;
    font-weight: 800;
}

.age-item-description {
    margin-top: 1rem;
}

.age-item-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(226 232 240);
}

.dark .age-item-section {
    border-color: rgba(255, 255, 255, .1);
}

.age-item-section h2 {
    margin: 0 0 .65rem;
    color: rgb(15 23 42);
    font-size: 1rem;
    font-weight: 800;
}

.dark .age-item-section h2 {
    color: #fff;
}

.age-stat-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem .85rem;
}

.age-stat-line {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
    border-bottom: 1px dashed rgb(226 232 240);
    padding: .45rem 0;
}

.dark .age-stat-line {
    border-color: rgba(255, 255, 255, .1);
}

.age-stat-line span {
    flex: 0 0 auto;
    color: rgb(100 116 139);
}

.age-stat-line strong {
    min-width: 0;
    color: rgb(15 23 42);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-align: right;
}

.dark .age-stat-line strong {
    color: #f8fafc;
}

.age-grade-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .4rem;
}

.age-grade-chip {
    display: grid;
    gap: .1rem;
    border: 1px solid rgb(226 232 240);
    border-radius: .4rem;
    background: #fff;
    padding: .42rem .5rem;
}

.age-grade-chip:hover,
.age-grade-chip.is-active {
    border-color: rgba(245, 158, 11, .55);
    background: #fff3cf;
}

.age-grade-chip span {
    color: rgb(100 116 139);
    font-size: .7rem;
}

.age-grade-chip b {
    color: rgb(15 23 42);
    font-size: .82rem;
}

.age-detail-side {
    align-self: start;
}

.age-codex-shell {
    padding-bottom: 2rem;
}

.age-codex-title {
    padding-bottom: .65rem;
}

.age-codex-layout {
    display: grid;
    grid-template-columns: minmax(0, 400px) 230px;
    gap: 1.25rem;
    align-items: start;
}

.age-info-codex-layout {
    grid-template-columns: minmax(0, 560px) 320px;
}

.age-codex-card,
.age-codex-grade-panel,
.age-codex-raw {
    border: 1px solid #1e3b2b;
    background: #071b10;
    color: #f7fff4;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .45), 0 14px 28px rgba(0, 0, 0, .12);
}

.age-codex-card {
    padding: 12px;
    font-size: 14px;
    line-height: 1.45;
}

.age-codex-id {
    margin-bottom: 2px;
    color: #fff;
}

.age-codex-head {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.age-codex-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 2px solid var(--item-grade-color, #52614f);
    background: #172418;
    color: var(--item-grade-color, #f6cf65);
    font-size: 12px;
    font-weight: 800;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .62),
        0 0 7px color-mix(in srgb, var(--item-grade-color, #f6cf65) 72%, transparent);
}

.age-codex-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    image-rendering: auto;
}

.age-codex-kind,
.age-codex-grade,
.age-codex-head h1 {
    display: block;
}

.age-codex-kind {
    color: #ffffff;
}

.age-codex-head h1 {
    margin: 0;
    color: var(--item-grade-color, #ffb000);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.age-codex-grade {
    color: var(--item-grade-color, #ffb000);
}

.age-codex-sep {
    height: 1px;
    margin: 12px 0;
    background: rgba(116, 146, 110, .22);
}

.age-codex-lines {
    display: grid;
    gap: 2px;
}

.age-codex-stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 145px;
    gap: 10px;
    min-height: 20px;
}

.age-codex-stat strong {
    color: #fff;
    font-weight: 700;
}

.age-codex-stat strong .age-relation-link {
    color: #9cc4ff;
}

.age-info-codex-card .age-codex-stat {
    grid-template-columns: minmax(120px, .62fr) minmax(0, 1fr);
}

.age-info-codex-card .age-codex-lines {
    gap: 4px;
}

.age-info-codex-card .age-codex-effect-title {
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(116, 146, 110, .18);
}

.age-info-codex-card .age-codex-stat span {
    color: #bdd2ba;
}

.age-info-codex-card .age-codex-stat strong {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.age-info-codex-card .age-codex-stat:has(strong .age-relation-link) strong {
    color: #9cc4ff;
}

.age-codex-warn,
.age-codex-effect-title {
    color: #ffb000;
    font-weight: 700;
}

.age-codex-effect {
    color: #5de7ff;
}

.age-codex-socket-title {
    color: #36c65f;
}

.age-codex-sockets {
    display: grid;
    gap: 4px;
    margin-top: 5px;
    width: max-content;
}

.age-codex-sockets span {
    width: 16px;
    height: 16px;
    border: 1px solid #495343;
    background: #4d4a3c;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .22);
}

.age-codex-grade-panel {
    padding: 18px 16px;
    text-align: center;
}

.age-codex-grade-panel h2 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.age-codex-grade-link {
    display: block;
    padding: 1px 0;
    font-size: 13px;
    line-height: 1.55;
}

.age-codex-grade-link.is-active {
    color: #fff !important;
    font-weight: 900;
    text-shadow: 0 0 8px currentColor;
}

.age-codex-raw {
    margin-top: 1rem;
    padding: .85rem;
}

.age-codex-raw summary {
    color: #f6cf65;
}

.age-grade-0 { color: #949293; }
.age-grade-1 { color: #ba976d; }
.age-grade-2 { color: #77b064; }
.age-grade-3 { color: #558fd7; }
.age-grade-4 { color: #cb72d8; }
.age-grade-5 { color: #d78b06; }
.age-grade-6 { color: #e17853; }
.age-grade-7 { color: #f95252; }
.age-grade-8 { color: #cf7d5d; }
.age-grade-9 { color: #8fa5ca; }
.age-grade-10 { color: #bf7900; }
.age-grade-11 { color: #c90b0b; }
.age-grade-12 { color: #ae98fe; }

.age-description {
    white-space: pre-line;
    line-height: 1.8;
}

.age-kv {
    width: 100%;
    border-collapse: collapse;
}

.age-kv th,
.age-kv td {
    border-top: 1px solid rgb(226 232 240);
    padding: .55rem 0;
    text-align: left;
    vertical-align: top;
}

.dark .age-kv th,
.dark .age-kv td {
    border-color: rgba(255, 255, 255, .1);
}

.age-kv th {
    width: 7rem;
    color: rgb(100 116 139);
}

.age-raw-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1rem;
}

.age-raw-details {
    margin-top: 1rem;
    border-top: 1px solid rgb(226 232 240);
    padding-top: .9rem;
}

.age-raw-details summary {
    cursor: pointer;
    color: #e89a00;
    font-weight: 800;
}

.age-raw-details .age-raw-grid {
    grid-template-columns: 1fr;
    margin-top: .75rem;
}

.age-raw-item {
    min-width: 0;
    border-bottom: 1px solid rgb(226 232 240);
    padding: .45rem 0;
}

.dark .age-raw-item {
    border-color: rgba(255, 255, 255, .1);
}

.age-raw-key {
    color: rgb(100 116 139);
    font-size: .75rem;
}

.age-raw-value {
    overflow-wrap: anywhere;
    margin-top: .2rem;
}

@media (max-width: 1180px) {
    .age-shell {
        padding-left: 0;
    }
}

@media (max-width: 980px) {
    .age-hero-inner,
    .age-detail-layout,
    .age-codex-layout,
    .age-generic-detail-layout {
        grid-template-columns: 1fr;
    }

    .age-grid,
    .age-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .age-list-row {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .age-list-meta {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .age-codex-grade-panel {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .25rem .5rem;
        text-align: left;
    }

    .age-codex-grade-panel h2 {
        grid-column: 1 / -1;
    }

    .age-codex-filter-grid,
    .age-codex-filter-grid.is-simple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .age-shell {
        width: min(100vw - 1.25rem, 1180px);
    }

    .age-grid,
    .age-entry-grid,
    .age-raw-grid {
        grid-template-columns: 1fr;
    }

    .age-filter,
    .age-filter form {
        align-items: stretch;
        flex-direction: column;
    }

    .age-list-row {
        align-items: start;
    }

    .age-list-meta,
    .age-stat-lines,
    .age-grade-grid {
        grid-template-columns: 1fr;
    }

    .age-codex-card {
        font-size: 13px;
    }

    .age-codex-stat {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .age-codex-grade-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .age-codex-filter-grid,
    .age-codex-filter-grid.is-simple,
    .age-detail-kv div {
        grid-template-columns: 1fr;
    }

    .age-detail-head {
        display: grid;
    }
}

/* Buff database */
.age-buff-catalog { padding-top: 16px; padding-bottom: 38px; }
.age-buff-hero .age-item-hero-icon { background: rgba(63, 194, 125, .14); color: #72dfa5; }
.age-buff-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.age-buff-kinds a { display: grid; min-width: 0; min-height: 64px; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--age-dark-line); border-radius: 7px; background: #17191e; padding: 10px 12px; color: #9ba1ab; transition: border-color .15s, background .15s, transform .15s; }
.age-buff-kinds a > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 6px; background: #22252c; color: #84bfff; font-size: 18px; }
.age-buff-kinds a b { overflow: hidden; color: #d9dce2; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.age-buff-kinds a em { color: #737985; font-size: 10px; font-style: normal; }
.age-buff-kinds a:hover { border-color: rgba(119, 184, 255, .42); transform: translateY(-1px); }
.age-buff-kinds a.is-active { border-color: rgba(119, 184, 255, .6); background: rgba(55, 112, 176, .16); box-shadow: inset 0 -2px #65aef5; }
.age-buff-kinds a.is-positive > span { background: rgba(54, 181, 112, .13); color: #69d99d; }
.age-buff-kinds a.is-negative > span { background: rgba(218, 82, 82, .14); color: #ff8582; }
.age-buff-kinds a.is-special > span { background: rgba(147, 112, 219, .14); color: #b89cff; }
.age-buff-results { overflow: hidden; border: 1px solid var(--age-dark-line); border-radius: 7px; background: var(--age-dark-panel); }
.age-buff-filter { display: grid; grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(145px, auto)) 100px auto; gap: 8px; border-bottom: 1px solid var(--age-dark-line); padding: 12px; }
.age-buff-filter select { height: 36px; border: 1px solid var(--age-dark-line-strong); border-radius: 5px; background: #15161b; padding: 0 28px 0 10px; color: #e4e6eb; font-size: 11px; outline: 0; }
.age-buff-filter select:focus { border-color: rgba(119, 184, 255, .62); box-shadow: 0 0 0 2px rgba(74, 153, 255, .09); }
.age-buff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
.age-buff-card { position: relative; display: flex; min-width: 0; min-height: 168px; gap: 11px; border: 1px solid var(--age-dark-line); border-radius: 7px; background: linear-gradient(145deg, #1a1c22, #17191e); padding: 11px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.age-buff-card::before { position: absolute; inset: 0 auto 0 0; width: 2px; border-radius: 7px 0 0 7px; background: #6b7480; content: ''; }
.age-buff-card.is-positive::before { background: #51cb8a; }
.age-buff-card.is-negative::before { background: #ef6c68; }
.age-buff-card.is-special::before { background: #9d7fe6; }
.age-buff-card:hover { border-color: rgba(119, 184, 255, .48); box-shadow: 0 9px 20px rgba(0, 0, 0, .2); transform: translateY(-1px); }
.age-buff-card > em { position: absolute; top: 9px; right: 10px; color: #626873; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-style: normal; }
.age-buff-icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; overflow: hidden; border: 1px solid rgba(104, 213, 153, .34); border-radius: 7px; background: radial-gradient(circle at 50% 30%, rgba(71, 180, 121, .24), #191c1d 70%); color: #6ed99f; font-size: 24px; }
.age-buff-card.is-negative .age-buff-icon { border-color: rgba(239, 108, 104, .34); background: radial-gradient(circle at 50% 30%, rgba(199, 64, 61, .22), #1d191a 70%); color: #ff8582; }
.age-buff-card.is-special .age-buff-icon { border-color: rgba(157, 127, 230, .35); background: radial-gradient(circle at 50% 30%, rgba(127, 88, 207, .23), #1b1920 70%); color: #b89cff; }
.age-buff-icon img { width: 100%; height: 100%; object-fit: contain; }
.age-buff-card-body { min-width: 0; flex: 1; }
.age-buff-label { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding-right: 47px; color: #65d49a; font-size: 9px; }
.age-buff-card.is-negative .age-buff-label { color: #ff8582; }
.age-buff-card.is-special .age-buff-label { color: #b89cff; }
.age-buff-label i { overflow: hidden; color: #858b96; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.age-buff-card h2 { overflow: hidden; margin: 5px 0 0; color: #e7e9ed; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.age-buff-card h2:hover { color: #84bfff; }
.age-buff-card-body > p { display: -webkit-box; min-height: 38px; overflow: hidden; margin: 5px 0 7px; color: #8e949e; font-size: 10px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.age-buff-traits { display: flex; min-height: 22px; flex-wrap: wrap; gap: 4px; }
.age-buff-traits span { display: inline-flex; align-items: center; gap: 3px; border-radius: 3px; background: #24272d; padding: 3px 5px; color: #aab0b9; font-size: 9px; }
.age-buff-traits i { color: #79baf6; font-size: 11px; }
.age-buff-stats { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .05); padding-top: 7px; color: #747b86; font-size: 9px; }

.age-buff-detail-identity.is-positive { background-image: radial-gradient(circle at 18% 20%, rgba(44, 142, 90, .13), transparent 34%); }
.age-buff-detail-identity.is-negative { background-image: radial-gradient(circle at 18% 20%, rgba(168, 58, 58, .13), transparent 34%); }
.age-buff-detail-identity.is-special { background-image: radial-gradient(circle at 18% 20%, rgba(112, 72, 180, .15), transparent 34%); }
.age-buff-tip { overflow: hidden; border: 1px solid rgba(81, 203, 138, .42); border-radius: 7px; background: linear-gradient(160deg, #10271b, #091a11); color: #dceee4; }
.age-buff-tip.is-negative { border-color: rgba(239, 108, 104, .4); background: linear-gradient(160deg, #2a1516, #1b0d0e); }
.age-buff-tip.is-special { border-color: rgba(157, 127, 230, .4); background: linear-gradient(160deg, #20182d, #120e19); }
.age-buff-tip > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(111, 219, 158, .22); padding: 10px 13px; color: #75dba4; font-size: 11px; font-weight: 800; }
.age-buff-tip > header > span { display: flex; align-items: center; gap: 6px; }
.age-buff-tip > header i { color: rgba(196, 227, 208, .56); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-style: normal; font-weight: 400; }
.age-buff-tip.is-negative > header { border-color: rgba(239, 108, 104, .23); color: #ff918e; }
.age-buff-tip.is-special > header { border-color: rgba(157, 127, 230, .23); color: #c3aaff; }
.age-buff-tip-main { display: flex; align-items: center; gap: 11px; padding: 13px; }
.age-buff-tip-icon { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; overflow: hidden; border: 1px solid #76dca5; border-radius: 5px; background: rgba(255, 255, 255, .07); color: #76dca5; font-size: 25px; box-shadow: 0 0 16px rgba(75, 203, 132, .16); }
.age-buff-tip.is-negative .age-buff-tip-icon { border-color: #ef7471; color: #ff8582; box-shadow: 0 0 16px rgba(239, 108, 104, .14); }
.age-buff-tip.is-special .age-buff-tip-icon { border-color: #a88bea; color: #b89cff; box-shadow: 0 0 16px rgba(157, 127, 230, .14); }
.age-buff-tip-icon img { width: 100%; height: 100%; object-fit: contain; }
.age-buff-tip-main > div { min-width: 0; }
.age-buff-tip-main small { color: #77dba5; font-size: 10px; }
.age-buff-tip.is-negative .age-buff-tip-main small { color: #ff8582; }
.age-buff-tip.is-special .age-buff-tip-main small { color: #b89cff; }
.age-buff-tip-main h2 { margin: 3px 0; color: #d7f5e3; font-size: 18px; line-height: 1.25; }
.age-buff-tip.is-negative .age-buff-tip-main h2 { color: #ffe1df; }
.age-buff-tip.is-special .age-buff-tip-main h2 { color: #eee7ff; }
.age-buff-tip-main p { margin: 0; color: #9eb7a7; font-size: 10px; }
.age-buff-tip-description { border-top: 1px solid rgba(125, 214, 163, .17); padding: 13px; color: #d4e5da; font-size: 12px; line-height: 1.7; }
.age-buff-tip-tags { display: flex; flex-wrap: wrap; gap: 5px; border-top: 1px solid rgba(125, 214, 163, .17); padding: 10px 13px 13px; }
.age-buff-tip-tags span { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(105, 217, 157, .22); border-radius: 3px; background: rgba(105, 217, 157, .07); padding: 4px 6px; color: #9fe4bd; font-size: 9px; }
.age-buff-tip-tags span.is-control { border-color: rgba(255, 125, 120, .25); background: rgba(255, 125, 120, .08); color: #ff9b97; }
.age-buff-relation-hero .age-item-source-hero-icon { background: rgba(66, 180, 116, .14); color: #70dda2; }

@media (max-width: 1060px) {
    .age-buff-filter { grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(130px, auto)); }
    .age-buff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .age-buff-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .age-buff-filter { grid-template-columns: 1fr 1fr; }
    .age-buff-filter .age-item-search-control { grid-column: 1 / -1; }
    .age-buff-grid { grid-template-columns: 1fr; padding: 0 8px 8px; }
}
@media (max-width: 480px) {
    .age-buff-kinds { grid-template-columns: 1fr; }
    .age-buff-filter { grid-template-columns: 1fr; }
    .age-buff-filter .age-item-search-control { grid-column: auto; }
}

/* Skill database */
.age-skill-catalog { padding-top: 20px; padding-bottom: 36px; }
.age-skill-hero .age-item-hero-icon { background: rgba(139, 92, 246, .14); color: #b79aff; }
.age-skill-abilities { display: flex; gap: 7px; margin-bottom: 12px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.age-skill-abilities a { display: grid; min-width: 106px; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 6px; border: 1px solid var(--age-dark-line); border-radius: 6px; background: #191a1f; padding: 10px; color: #a5a9b2; font-size: 11px; white-space: nowrap; }
.age-skill-abilities a > span { color: #8f7bd9; font-size: 16px; }
.age-skill-abilities a b { color: #dedfe4; font-weight: 700; }
.age-skill-abilities a em { color: #777d88; font-size: 9px; font-style: normal; }
.age-skill-abilities a:hover,.age-skill-abilities a.is-active { border-color: rgba(139, 92, 246, .5); background: rgba(139, 92, 246, .11); }
.age-skill-abilities a.is-active b,.age-skill-abilities a.is-active > span { color: #c4b5fd; }
.age-skill-results { overflow: hidden; border: 1px solid var(--age-dark-line); border-radius: 7px; background: var(--age-dark-panel); }
.age-skill-filter { display: grid; grid-template-columns: minmax(240px,1fr) repeat(2,minmax(145px,auto)) minmax(155px,auto) minmax(130px,auto) 92px auto; gap: 8px; border-bottom: 1px solid var(--age-dark-line); padding: 12px; }
.age-skill-filter > select,.age-skill-level input { height: 36px; border: 1px solid var(--age-dark-line-strong); border-radius: 5px; background: #15161b; padding: 0 10px; color: #e6e7eb; font-size: 11px; outline: 0; }
.age-skill-filter > select:focus,.age-skill-level input:focus { border-color: rgba(139,92,246,.65); box-shadow: 0 0 0 2px rgba(139,92,246,.1); }
.age-skill-level { display: grid; grid-template-columns: minmax(70px,1fr) auto minmax(70px,1fr); align-items: center; gap: 5px; }
.age-skill-level input { min-width: 0; width: 100%; }
.age-skill-level i { color: #747983; font-style: normal; }
.age-skill-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0 12px 12px; }
.age-skill-card { position: relative; display: flex; min-width: 0; min-height: 138px; gap: 11px; border: 1px solid var(--age-dark-line); border-radius: 6px; background: #18191e; padding: 11px; transition: border-color .15s,transform .15s,box-shadow .15s; }
.age-skill-card:hover { border-color: rgba(139,92,246,.52); box-shadow: 0 8px 18px rgba(0,0,0,.2); transform: translateY(-1px); }
.age-skill-card > em { position: absolute; right: 9px; bottom: 8px; color: #626773; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-style: normal; }
.age-skill-icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; overflow: hidden; border: 1px solid rgba(139,92,246,.4); border-radius: 6px; background: linear-gradient(145deg,rgba(91,67,148,.38),#17191f); color: #b79aff; font-size: 22px; }
.age-skill-icon img { width: 100%; height: 100%; object-fit: contain; }
.age-skill-card-body { min-width: 0; flex: 1; }
.age-skill-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #9f8ee0; font-size: 9px; }
.age-skill-label i { margin-right: 34px; color: #797f89; font-style: normal; }
.age-skill-card h2 { overflow: hidden; margin: 4px 0 0; color: #e8e9ed; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.age-skill-card h2:hover { color: #c4b5fd; }
.age-skill-card-body > p { display: -webkit-box; min-height: 29px; overflow: hidden; margin: 5px 0; color: #898e98; font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.age-skill-stats { display: flex; flex-wrap: wrap; gap: 4px; padding-right: 34px; }
.age-skill-stats span { border-radius: 3px; background: #23242a; padding: 2px 5px; color: #a4a8b0; font-size: 9px; }

.age-skill-detail-identity .age-item-detail-identity-icon { border-color: rgba(139,92,246,.55); background: linear-gradient(145deg,rgba(91,67,148,.42),#17191f); color: #b79aff; }
.age-skill-tip { overflow: hidden; border: 1px solid rgba(126,95,200,.5); border-radius: 3px; background: linear-gradient(145deg,#18152a,#0e1019 65%); color: #eae7f3; box-shadow: 0 12px 28px rgba(0,0,0,.34); }
.age-skill-tip > header { border-bottom: 1px solid rgba(175,147,238,.2); padding: 12px; }
.age-skill-tip > header > span { color: #a996dd; font-size: 10px; font-weight: 800; }
.age-skill-tip > header > i { float: right; color: #77718c; font-size: 9px; font-style: normal; }
.age-skill-tip > header > div { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.age-skill-tip > header img,.age-skill-tip > header > div > span { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border: 1px solid rgba(185,153,255,.65); border-radius: 3px; background: #242036; object-fit: contain; color: #c4b5fd; font-size: 24px; box-shadow: inset 0 0 12px rgba(139,92,246,.18); }
.age-skill-tip h2 { margin: 0; color: #d7c8ff; font-size: 17px; font-weight: 800; }
.age-skill-tip header p { margin: 4px 0 0; color: #938ba9; font-size: 10px; }
.age-skill-tip-body { padding: 12px; }
.age-skill-tip-costs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.age-skill-tip-costs span { display: flex; align-items: baseline; justify-content: space-between; border: 1px solid rgba(255,255,255,.07); border-radius: 4px; background: rgba(255,255,255,.025); padding: 8px; }
.age-skill-tip-costs i { color: #858091; font-size: 9px; font-style: normal; }
.age-skill-tip-costs b { color: #83bff7; font-size: 13px; }
.age-skill-tip dl { display: grid; gap: 5px; margin: 0; }
.age-skill-tip dl > div { display: flex; justify-content: space-between; gap: 12px; color: #9d98a8; font-size: 10px; }
.age-skill-tip dd { margin: 0; color: #e4e1ea; font-weight: 700; text-align: right; }
.age-skill-tip-description { margin-top: 11px; border-top: 1px solid rgba(255,255,255,.09); padding-top: 11px; color: #cbc6d3; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.age-skill-relation-hero .age-item-source-hero-icon { background: rgba(139,92,246,.14); color: #b79aff; }
.age-item-source-panel[data-source-kind="effect"] > header > span,.age-item-source-panel[data-source-kind="effect"] .age-item-source-mark { color: #b79aff; }
.age-item-source-panel[data-source-kind="buff"] > header > span,.age-item-source-panel[data-source-kind="buff"] .age-item-source-mark { color: #74d3a0; }

@media (max-width: 1100px) {
    .age-skill-filter { grid-template-columns: minmax(230px,1fr) repeat(3,minmax(130px,auto)); }
    .age-skill-filter .age-item-search-control { grid-column: span 2; }
    .age-skill-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .age-skill-catalog { width: min(100vw - 1rem,1180px); padding-top: 10px; }
    .age-skill-filter { grid-template-columns: 1fr 1fr; padding: 9px; }
    .age-skill-filter .age-item-search-control { grid-column: 1 / -1; }
    .age-skill-grid { grid-template-columns: 1fr; padding: 0 8px 8px; }
    .age-skill-card { min-height: 128px; }
}

/* Appellation database */
.age-appellation-catalog { padding-top: 20px; padding-bottom: 36px; }
.age-appellation-hero .age-item-hero-icon { background: rgba(245,158,11,.14); color: #f4bd58; }
.age-appellation-routes { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; margin-bottom: 12px; }
.age-appellation-routes a { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 6px; border: 1px solid var(--age-dark-line); border-radius: 6px; background: #191a1f; padding: 10px; color: #a5a9b2; font-size: 11px; }
.age-appellation-routes a > span { color: #d9a548; font-size: 16px; }
.age-appellation-routes a b { overflow: hidden; color: #dedfe4; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.age-appellation-routes a em { color: #777d88; font-size: 9px; font-style: normal; }
.age-appellation-routes a:hover,.age-appellation-routes a.is-active { border-color: rgba(245,158,11,.48); background: rgba(245,158,11,.1); }
.age-appellation-routes a.is-active b,.age-appellation-routes a.is-active > span { color: #f8c96d; }
.age-appellation-results { overflow: hidden; border: 1px solid var(--age-dark-line); border-radius: 7px; background: var(--age-dark-panel); }
.age-appellation-filter { display: grid; grid-template-columns: minmax(250px,1fr) repeat(4,minmax(135px,auto)) 92px auto; gap: 8px; border-bottom: 1px solid var(--age-dark-line); padding: 12px; }
.age-appellation-filter > select { height: 36px; border: 1px solid var(--age-dark-line-strong); border-radius: 5px; background: #15161b; padding: 0 10px; color: #e6e7eb; font-size: 11px; outline: 0; }
.age-appellation-filter > select:focus { border-color: rgba(245,158,11,.6); box-shadow: 0 0 0 2px rgba(245,158,11,.08); }
.age-appellation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0 12px 12px; }
.age-appellation-card { position: relative; display: flex; min-width: 0; min-height: 138px; gap: 11px; border: 1px solid var(--age-dark-line); border-radius: 6px; background: #18191e; padding: 11px; transition: border-color .15s,transform .15s,box-shadow .15s; }
.age-appellation-card:hover { border-color: color-mix(in srgb,var(--title-grade-color) 55%,transparent); box-shadow: 0 8px 18px rgba(0,0,0,.2); transform: translateY(-1px); }
.age-appellation-icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb,var(--title-grade-color) 48%,#30333b); border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.07),#17191f 70%); color: var(--title-grade-color); font-size: 23px; }
.age-appellation-icon img { width: 100%; height: 100%; object-fit: contain; }
.age-appellation-card-body { min-width: 0; flex: 1; }
.age-appellation-label { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #a28d64; font-size: 9px; }
.age-appellation-label i { margin-right: 33px; color: var(--title-grade-color); font-style: normal; }
.age-appellation-card h2 { overflow: hidden; margin: 4px 0 0; color: var(--title-grade-color); font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.age-appellation-card-body > p { display: -webkit-box; min-height: 29px; overflow: hidden; margin: 5px 0; color: #8c919a; font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.age-appellation-bonus { display: flex; align-items: center; gap: 5px; overflow: hidden; border-radius: 3px; background: #23242a; padding: 3px 6px; color: #777d87; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.age-appellation-bonus.has-bonus { background: rgba(79,176,119,.09); color: #72c995; }
.age-appellation-card > em { position: absolute; right: 9px; bottom: 8px; color: #626773; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-style: normal; }
.age-appellation-status { position: absolute; top: 9px; right: 8px; border-radius: 3px; background: rgba(239,68,68,.1); padding: 2px 5px; color: #e58989; font-size: 8px; }

.age-appellation-detail-identity .age-item-detail-identity-icon { border-color: color-mix(in srgb,var(--item-grade-color) 58%,#30333b); background: radial-gradient(circle,rgba(255,255,255,.07),#17191f 72%); color: var(--item-grade-color); }
.age-appellation-tip { overflow: hidden; border: 1px solid color-mix(in srgb,var(--title-grade-color) 55%,#34363d); border-radius: 4px; background: linear-gradient(145deg,#211d17,#111216 68%); color: #eae7e1; box-shadow: 0 12px 28px rgba(0,0,0,.34); }
.age-appellation-tip > header { border-bottom: 1px solid rgba(255,255,255,.09); padding: 12px; }
.age-appellation-tip > header > span { color: #d1ae6f; font-size: 10px; font-weight: 800; }
.age-appellation-tip > header > i { float: right; color: #77736c; font-size: 9px; font-style: normal; }
.age-appellation-tip > header > div { display: flex; align-items: center; gap: 11px; margin-top: 10px; }
.age-appellation-tip-icon { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb,var(--title-grade-color) 82%,#34363d); border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,.025) 68%); color: var(--title-grade-color); box-shadow: inset 0 0 15px color-mix(in srgb,var(--title-grade-color) 15%,transparent),0 0 12px color-mix(in srgb,var(--title-grade-color) 12%,transparent); }
.age-appellation-tip-icon > span { color: var(--title-grade-color); font-size: 27px; filter: brightness(1.18) drop-shadow(0 0 4px color-mix(in srgb,var(--title-grade-color) 48%,transparent)); }
.age-appellation-tip-icon img { width: 48px; height: 48px; object-fit: contain; filter: brightness(1.3) saturate(1.15) contrast(1.08); }
.age-appellation-tip header small { color: #8d887f; font-size: 9px; }
.age-appellation-tip h2 { margin: 2px 0 0; color: var(--title-grade-color); font-size: 19px; font-weight: 800; }
.age-appellation-tip-body { padding: 12px; }
.age-appellation-tip-bonus { display: flex; gap: 9px; border: 1px solid rgba(86,184,122,.18); border-radius: 5px; background: rgba(86,184,122,.06); padding: 10px; }
.age-appellation-tip-bonus > span { flex: 0 0 auto; color: #70cd94; font-size: 19px; }
.age-appellation-tip-bonus strong { color: #8ed9aa; font-size: 11px; }
.age-appellation-tip-bonus p { margin: 3px 0 0; color: #aaa6a0; font-size: 10px; line-height: 1.55; }
.age-appellation-tip-bonus.is-empty { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.age-appellation-tip-bonus.is-empty > span,.age-appellation-tip-bonus.is-empty strong { color: #9a958e; }
.age-appellation-tip dl { display: grid; gap: 8px; margin: 11px 0 0; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.age-appellation-tip dl > div { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 10px; color: #88847d; font-size: 10px; }
.age-appellation-tip dd { margin: 0; color: #d3cfc7; line-height: 1.55; }
.age-appellation-relation-hero .age-item-source-hero-icon { background: rgba(245,158,11,.14); color: #f4bd58; }
.age-appellation-route-copy { display: flex; align-items: center; gap: 11px; margin: 10px; border: 1px solid var(--age-dark-line); border-radius: 6px; background: #18191e; padding: 12px; }
.age-appellation-route-copy > span { flex: 0 0 auto; color: #e8ad48; font-size: 22px; }
.age-appellation-route-copy > div { min-width: 0; flex: 1; }
.age-appellation-route-copy strong { display: block; color: #e5e6ea; font-size: 12px; line-height: 1.5; }
.age-appellation-route-copy small { display: block; margin-top: 3px; color: #858a94; font-size: 9px; }
.age-appellation-route-copy em { border-radius: 3px; background: rgba(239,68,68,.1); padding: 3px 6px; color: #e58989; font-size: 9px; font-style: normal; }
.age-item-source-panel[data-source-kind="route"] > header > span { color: #e8ad48; }
.age-item-source-panel[data-source-kind="relation"] > header > span { color: #70b8ef; }

@media (max-width: 1050px) {
    .age-appellation-routes { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .age-appellation-filter { grid-template-columns: minmax(240px,1fr) repeat(3,minmax(130px,auto)); }
    .age-appellation-filter .age-item-search-control { grid-column: span 2; }
    .age-appellation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
    .age-appellation-catalog { width: min(100vw - 1rem,1180px); padding-top: 10px; }
    .age-appellation-routes { display: flex; overflow-x: auto; padding-bottom: 5px; }
    .age-appellation-routes a { min-width: 150px; }
    .age-appellation-filter { grid-template-columns: 1fr 1fr; padding: 9px; }
    .age-appellation-filter .age-item-search-control { grid-column: 1 / -1; }
    .age-appellation-grid { grid-template-columns: 1fr; padding: 0 8px 8px; }
}

/* Zone and map database */
.age-zone-catalog { padding-top: 20px; padding-bottom: 36px; }
.age-zone-hero .age-item-hero-icon { background: rgba(14,165,233,.14); color: #66c4ee; }
.age-zone-continents { display: flex; gap: 7px; margin-bottom: 12px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.age-zone-continents a { display: grid; min-width: 142px; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 6px; border: 1px solid var(--age-dark-line); border-radius: 6px; background: #191a1f; padding: 10px; color: #a5a9b2; font-size: 11px; white-space: nowrap; }
.age-zone-continents a > span { color: #68bce7; font-size: 16px; }
.age-zone-continents a b { overflow: hidden; color: #dedfe4; font-weight: 700; text-overflow: ellipsis; }
.age-zone-continents a em { color: #777d88; font-size: 9px; font-style: normal; }
.age-zone-continents a:hover,.age-zone-continents a.is-active { border-color: rgba(14,165,233,.5); background: rgba(14,165,233,.1); }
.age-zone-continents a.is-active b,.age-zone-continents a.is-active > span { color: #7dd3fc; }
.age-zone-results { overflow: hidden; border: 1px solid var(--age-dark-line); border-radius: 7px; background: var(--age-dark-panel); }
.age-zone-filter { display: grid; grid-template-columns: minmax(245px,1fr) repeat(2,minmax(135px,auto)) minmax(170px,auto) repeat(2,minmax(140px,auto)) 92px auto; gap: 8px; border-bottom: 1px solid var(--age-dark-line); padding: 12px; }
.age-zone-filter > select,.age-zone-level input { height: 36px; border: 1px solid var(--age-dark-line-strong); border-radius: 5px; background: #15161b; padding: 0 10px; color: #e6e7eb; font-size: 11px; outline: 0; }
.age-zone-filter > select:focus,.age-zone-level input:focus { border-color: rgba(14,165,233,.6); box-shadow: 0 0 0 2px rgba(14,165,233,.08); }
.age-zone-level { display: grid; grid-template-columns: minmax(68px,1fr) auto minmax(68px,1fr); align-items: center; gap: 5px; }
.age-zone-level input { min-width: 0; width: 100%; }
.age-zone-level i { color: #747983; font-style: normal; }
.age-zone-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0 12px 12px; }
.age-zone-card { position: relative; display: flex; min-width: 0; min-height: 144px; gap: 11px; border: 1px solid var(--age-dark-line); border-radius: 6px; background: #18191e; padding: 10px; transition: border-color .15s,transform .15s,box-shadow .15s; }
.age-zone-card:hover { border-color: rgba(14,165,233,.5); box-shadow: 0 8px 18px rgba(0,0,0,.2); transform: translateY(-1px); }
.age-zone-map-thumb { position: relative; width: 92px; min-height: 91px; flex: 0 0 92px; overflow: hidden; border: 1px solid rgba(58,142,182,.34); border-radius: 5px; background: linear-gradient(145deg,#16313c,#11191e); }
.age-zone-map-thumb::before,.age-zone-map-thumb::after { position: absolute; content: ''; border: 1px solid rgba(108,196,235,.12); border-radius: 46% 54% 60% 40%; }
.age-zone-map-thumb::before { inset: 14px 8px 27px 19px; transform: rotate(-17deg); }
.age-zone-map-thumb::after { inset: 26px 20px 16px 7px; transform: rotate(19deg); }
.age-zone-map-line { position: absolute; width: 120px; height: 1px; background: rgba(109,194,234,.09); transform-origin: left; }
.age-zone-map-line.one { top: 29px; left: 4px; transform: rotate(32deg); }
.age-zone-map-line.two { top: 65px; left: -8px; transform: rotate(-21deg); }
.age-zone-map-marker { position: absolute; top: 37px; left: 36px; z-index: 2; color: #70c9f1; font-size: 21px; filter: drop-shadow(0 0 5px rgba(55,182,239,.5)); }
.age-zone-map-thumb small { position: absolute; right: 5px; bottom: 4px; left: 5px; z-index: 2; overflow: hidden; color: #7e9ba8; font-size: 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.age-zone-card-body { min-width: 0; flex: 1; }
.age-zone-label { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #68bce7; font-size: 9px; }
.age-zone-label i { margin-right: 31px; color: #969ca5; font-style: normal; }
.age-zone-card h2 { overflow: hidden; margin: 5px 0 0; color: #e7e8ec; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.age-zone-card h2:hover { color: #7dd3fc; }
.age-zone-card-body > p { margin: 5px 0 8px; color: #858b95; font-size: 10px; }
.age-zone-stats { display: flex; flex-wrap: wrap; gap: 4px; padding-right: 30px; }
.age-zone-stats span { border-radius: 3px; background: #23242a; padding: 3px 5px; color: #8f949d; font-size: 8px; }
.age-zone-stats b { color: #72c8ee; }
.age-zone-card > em { position: absolute; right: 9px; bottom: 8px; color: #626773; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-style: normal; }

.age-zone-detail-identity .age-item-detail-identity-icon { border-color: rgba(14,165,233,.5); background: linear-gradient(145deg,rgba(14,165,233,.2),#17191f); color: #72c9ef; }
.age-zone-map-panel { overflow: hidden; border: 1px solid rgba(65,157,200,.4); border-radius: 5px; background: #12191d; }
.age-zone-map-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px 12px; color: #75c8ee; font-size: 10px; font-weight: 800; }
.age-zone-map-panel > header i { color: #71838c; font-size: 9px; font-style: normal; font-weight: 500; }
.age-zone-coordinate-map { position: relative; height: 275px; overflow: hidden; background: radial-gradient(circle at 46% 47%,rgba(31,115,150,.2),transparent 42%),linear-gradient(145deg,#10242c,#101417); }
.age-zone-coordinate-map::before { position: absolute; inset: 18px; content: ''; border: 1px solid rgba(110,199,238,.12); border-radius: 44% 56% 46% 54%; transform: rotate(-7deg); }
.age-zone-map-grid { position: absolute; inset: 0; opacity: .18; }
.age-zone-map-grid.horizontal { background: repeating-linear-gradient(0deg,transparent 0,transparent 34px,rgba(120,190,220,.14) 35px); }
.age-zone-map-grid.vertical { background: repeating-linear-gradient(90deg,transparent 0,transparent 44px,rgba(120,190,220,.12) 45px); }
.age-zone-node { position: absolute; z-index: 2; width: 9px; height: 9px; transform: translate(-50%,-50%); }
.age-zone-node > span { display: block; width: 7px; height: 7px; border: 1px solid rgba(111,190,226,.6); border-radius: 50%; background: #1b526b; box-shadow: 0 0 0 3px rgba(37,143,190,.08); }
.age-zone-node:hover > span { border-color: #9eddfa; background: #4cb3e1; }
.age-zone-node.is-current { z-index: 4; width: 16px; height: 16px; }
.age-zone-node.is-current > span { width: 13px; height: 13px; border: 2px solid #d8f3ff; background: #27a7df; box-shadow: 0 0 0 5px rgba(39,167,223,.18),0 0 14px rgba(54,190,248,.75); }
.age-zone-node b { position: absolute; top: 18px; left: 50%; width: max-content; max-width: 145px; transform: translateX(-50%); border-radius: 3px; background: rgba(9,19,24,.9); padding: 3px 6px; color: #d8f3ff; font-size: 9px; white-space: nowrap; }
.age-zone-map-caption { position: absolute; right: 10px; bottom: 9px; z-index: 3; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; background: rgba(10,18,22,.76); padding: 6px 8px; text-align: right; }
.age-zone-map-caption strong { display: block; color: #d8f3ff; font-size: 10px; }
.age-zone-map-caption small { color: #6e8792; font-size: 8px; }
.age-zone-map-unavailable { display: grid; min-height: 245px; place-items: center; align-content: center; gap: 7px; padding: 22px; background: radial-gradient(circle,rgba(14,165,233,.12),transparent 58%); text-align: center; }
.age-zone-map-unavailable > span { color: #68c5ee; font-size: 38px; }
.age-zone-map-unavailable strong { color: #dff4fd; font-size: 15px; }
.age-zone-map-unavailable p { max-width: 250px; margin: 0; color: #788b94; font-size: 10px; line-height: 1.55; }
.age-zone-relation-hero .age-item-source-hero-icon { background: rgba(14,165,233,.14); color: #67c7ef; }
.age-item-source-panel[data-source-kind="feature"] > header > span { color: #d7aa55; }
.age-item-source-panel[data-source-kind="subzone"] > header > span,.age-item-source-panel[data-source-kind="nearby"] > header > span { color: #67c7ef; }
.age-zone-subzone-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 10px; }
.age-zone-subzone-list > span { display: flex; min-width: 0; align-items: center; gap: 6px; overflow: hidden; border: 1px solid var(--age-dark-line); border-radius: 5px; background: #18191e; padding: 8px; color: #aeb2b9; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.age-zone-subzone-list i { flex: 0 0 auto; color: #60bde8; }

@media (max-width: 1100px) {
    .age-zone-filter { grid-template-columns: minmax(235px,1fr) repeat(3,minmax(130px,auto)); }
    .age-zone-filter .age-item-search-control { grid-column: span 2; }
    .age-zone-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .age-zone-catalog { width: min(100vw - 1rem,1180px); padding-top: 10px; }
    .age-zone-filter { grid-template-columns: 1fr 1fr; padding: 9px; }
    .age-zone-filter .age-item-search-control { grid-column: 1 / -1; }
    .age-zone-grid { grid-template-columns: 1fr; padding: 0 8px 8px; }
    .age-zone-map-thumb { width: 82px; flex-basis: 82px; }
    .age-zone-subzone-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Keep the site footer plain, matching the solid Lost Ark booklet footer. */
.booklet-footer,
html.dark .booklet-footer,
html.tw-dark .booklet-footer {
    border-top-color: #2a2a2a;
    background: #171717;
}

.booklet-footer::before,
.booklet-footer::after {
    display: none;
    content: none;
}

/* Item detail: client TIP on the left, fully resolved acquisition data on the right. */
.age-item-detail-page { width: min(100% - 28px, 1280px); padding: 14px 0 48px; }
.age-item-detail-identity { position: relative; overflow: hidden; margin-bottom: 16px; border: 1px solid #2d343d; border-left: 3px solid var(--item-grade-color); border-radius: 8px; background: linear-gradient(112deg, color-mix(in srgb, var(--item-grade-color) 9%, #1b1f25), #191c21 56%, #1c222a); padding: 12px 16px 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, .15); }
.age-item-detail-identity::after { position: absolute; top: -90px; right: 10%; width: 270px; height: 190px; border-radius: 50%; background: color-mix(in srgb, var(--item-grade-color) 8%, transparent); filter: blur(35px); content: ''; pointer-events: none; }
.age-item-detail-breadcrumb { position: relative; z-index: 1; display: flex; min-width: 0; align-items: center; gap: 7px; margin-bottom: 11px; color: #687380; font-size: 10px; }
.age-item-detail-breadcrumb a { color: #8aaed6; }
.age-item-detail-breadcrumb a:hover { color: #b9d8fb; }
.age-item-detail-breadcrumb em { overflow: hidden; color: #aeb6c2; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.age-item-detail-identity-main { position: relative; z-index: 1; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 15px; }
.age-item-detail-identity-icon { display: grid; width: 68px; height: 68px; place-items: center; overflow: hidden; border: 2px solid var(--item-grade-color); border-radius: 7px; background: #151a18; color: var(--item-grade-color); font-size: 28px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65), 0 0 16px color-mix(in srgb, var(--item-grade-color) 24%, transparent); }
.age-item-detail-identity-icon img { width: 64px; height: 64px; object-fit: contain; }
.age-item-detail-identity-copy { min-width: 0; }
.age-item-detail-identity-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.age-item-detail-identity-kicker span { color: #6faaf0; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.age-item-detail-identity-kicker i,
.age-item-detail-identity-kicker b { border-radius: 3px; background: rgba(255, 255, 255, .045); padding: 2px 5px; font-size: 9px; font-style: normal; font-weight: 500; }
.age-item-detail-identity-kicker i { color: #778391; }
.age-item-detail-identity-kicker b { color: var(--item-grade-color); }
.age-item-detail-identity h1 { overflow: hidden; margin: 4px 0 0; color: #f2f5f8; font-size: 23px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.age-item-detail-identity-copy > p { overflow: hidden; margin: 3px 0 0; color: #737d89; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.age-item-detail-identity-facts { display: flex; flex-wrap: wrap; gap: 5px 15px; margin-top: 9px; }
.age-item-detail-identity-facts span { display: inline-flex; align-items: center; gap: 5px; color: #b7c0ca; font-size: 10px; }
.age-item-detail-identity-facts i { color: #687381; font-style: normal; }
.age-item-detail-back { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #333b46; border-radius: 5px; background: rgba(13, 15, 18, .38); padding: 8px 10px; color: #909ba8; font-size: 10px; }
.age-item-detail-back:hover { border-color: color-mix(in srgb, var(--item-grade-color) 50%, #333b46); color: #d5dde6; }
.age-item-detail-layout { display: grid; grid-template-columns: 390px minmax(0, 1fr); align-items: start; gap: 16px; }
.age-item-detail-aside { display: grid; min-width: 0; gap: 12px; }
.age-item-tip-frame { overflow: hidden; border: 1px solid #2c3430; border-radius: 7px; background: #111411; box-shadow: 0 12px 28px rgba(0, 0, 0, .24); }
.age-item-tip-frame .age-client-tip { max-height: none; overflow: visible; border: 0; box-shadow: none; }
.age-item-tip-frame .age-client-tip-more { display: none; }
.age-item-detail-panel { overflow: hidden; border: 1px solid #292e35; border-radius: 7px; background: #191c21; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.age-item-detail-panel > header { display: flex; min-height: 42px; align-items: center; gap: 8px; border-bottom: 1px solid #292e35; background: #1c2026; padding: 0 13px; }
.age-item-detail-panel > header > span { color: #75b5ff; font-size: 16px; }
.age-item-detail-panel h2 { margin: 0; color: #dce2ea; font-size: 13px; }
.age-item-grade-selector > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 10px; }
.age-item-grade-selector a { display: grid; height: 29px; place-items: center; border: 1px solid #303640; border-radius: 4px; background: #20242a; font-size: 11px; font-weight: 700; }
.age-item-grade-selector a:hover { border-color: currentColor; background: #252a31; }
.age-item-grade-selector a.is-active { border-color: currentColor; background: #292e36; box-shadow: inset 0 0 0 1px currentColor, 0 0 9px color-mix(in srgb, currentColor 20%, transparent); }
.age-item-basic-panel dl { margin: 0; padding: 5px 12px 8px; }
.age-item-basic-panel dl > div { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #272c32; }
.age-item-basic-panel dl > div:last-child { border-bottom: 0; }
.age-item-basic-panel dt { color: #7f8996; font-size: 11px; }
.age-item-basic-panel dd { margin: 0; color: #d7dce3; font-size: 11px; font-weight: 500; text-align: right; }
.age-item-source-column { display: grid; min-width: 0; gap: 12px; }
.age-item-source-hero { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 13px; overflow: hidden; border: 1px solid #2c3540; border-radius: 7px; background: linear-gradient(110deg, #1b2027, #191d22 64%, #1d242d); padding: 17px 18px; }
.age-item-source-hero-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 9px; background: rgba(75, 143, 224, .13); color: #77b8ff; font-size: 24px; }
.age-item-source-hero > div:nth-child(2) > span { color: #6499d7; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.age-item-source-hero h2 { margin: 2px 0 0; color: #edf2f8; font-size: 18px; }
.age-item-source-hero p { margin: 4px 0 0; color: #7f8996; font-size: 11px; line-height: 1.55; }
.age-item-source-hero > strong { min-width: 62px; text-align: center; }
.age-item-source-hero > strong b { display: block; color: #7cb9ff; font-size: 24px; line-height: 1; }
.age-item-source-hero > strong span { color: #737d8a; font-size: 9px; font-weight: 400; }
.age-item-source-panel { --source-accent: #72b3ff; overflow: hidden; border: 1px solid #292f37; border-radius: 7px; background: #191c21; }
.age-item-source-panel[data-source-kind="craft"] { --source-accent: #e8ae5b; }
.age-item-source-panel[data-source-kind="drop"] { --source-accent: #69c78b; }
.age-item-source-panel[data-source-kind="merchant"] { --source-accent: #d79cf0; }
.age-item-source-panel[data-source-kind="quest"] { --source-accent: #73aef5; }
.age-item-source-panel[data-source-kind="related"] { --source-accent: #ed8d72; }
.age-item-source-panel[data-source-kind="other"] { --source-accent: #a99ae9; }
.age-item-source-panel[data-source-kind="route"] { --source-accent: #62b7f2; }
.age-item-source-panel[data-source-kind="objective"] { --source-accent: #e0ad59; }
.age-item-source-panel[data-source-kind="reward"] { --source-accent: #74cf91; }
.age-item-source-panel[data-source-kind="chain"] { --source-accent: #b49aef; }
.age-item-source-panel > header { display: flex; min-height: 50px; align-items: center; gap: 10px; border-bottom: 1px solid #292f37; background: #1d2127; padding: 7px 13px; }
.age-item-source-panel > header > span { color: var(--source-accent); font-size: 20px; }
.age-item-source-panel > header h3 { margin: 0; color: #e1e6ed; font-size: 13px; }
.age-item-source-panel > header p { margin: 2px 0 0; color: #717b88; font-size: 9px; }
.age-item-source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 9px; }
.age-item-source-panel:not(.is-expanded) .age-item-source-list > .age-item-source-card:nth-child(n+13) { display: none; }
.age-item-source-card { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; min-width: 0; min-height: 66px; align-items: center; gap: 9px; border: 1px solid #282e35; border-radius: 5px; background: #1d2025; padding: 9px; color: inherit; transition: border-color .15s, background .15s, transform .15s; }
a.age-item-source-card { padding-right: 29px; }
a.age-item-source-card:hover { border-color: color-mix(in srgb, var(--source-accent) 55%, #282e35); background: #22262c; transform: translateY(-1px); }
.age-item-source-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--source-accent) 11%, #22262c); color: var(--source-accent); font-size: 18px; }
.age-item-source-body { display: block; min-width: 0; }
.age-item-source-body > strong { display: block; overflow: hidden; color: #dce2e9; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.age-item-source-body > strong a { color: #dce2e9; }
.age-item-source-body > strong a:hover { color: var(--source-accent); }
.age-item-source-body > small { display: -webkit-box; overflow: hidden; margin-top: 2px; color: #77818d; font-size: 9px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.age-item-source-card > em { max-width: 126px; color: var(--source-accent); font-size: 9px; font-style: normal; line-height: 1.45; text-align: right; }
.age-item-source-arrow { position: absolute; top: 50%; right: 9px; color: #66717e; font-size: 12px; transform: translateY(-50%); }
a.age-item-source-card:hover .age-item-source-arrow { color: var(--source-accent); }
.age-item-source-ingredients { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.age-item-source-ingredients a,
.age-item-source-ingredients > span { display: inline-flex; align-items: center; gap: 4px; border-radius: 3px; background: #252a30; padding: 3px 5px; color: #aeb7c2; font-size: 9px; }
.age-item-source-ingredients a:hover { background: #2b3138; color: var(--source-accent); }
.age-item-source-ingredients b { color: var(--source-accent); font-weight: 500; }
.age-item-source-card:has(.age-item-source-ingredients) { grid-template-columns: 38px minmax(0, 1fr) auto; }
.age-item-source-card:has(.age-item-source-ingredients) .age-item-source-body { grid-column: 2 / -1; }
.age-item-source-card:has(.age-item-source-ingredients) > em { grid-column: 2 / -1; max-width: none; text-align: left; }
.age-item-source-state { display: grid; min-height: 310px; place-content: center; justify-items: center; gap: 7px; border: 1px dashed #343b45; border-radius: 7px; background: #191c21; color: #74808d; text-align: center; }
.age-item-source-state > span { color: #6aa9f2; font-size: 30px; }
.age-item-source-state strong { color: #cbd2dc; font-size: 13px; }
.age-item-source-state p { max-width: 420px; margin: 0; font-size: 10px; line-height: 1.6; }
.age-item-source-state.is-error > span { color: #e59768; }
.age-item-source-more { display: flex; width: calc(100% - 18px); min-height: 34px; align-items: center; justify-content: center; gap: 6px; margin: 0 9px 9px; border: 1px solid #2d343d; border-radius: 5px; background: #20242a; color: #84909d; font-size: 10px; cursor: pointer; }
.age-item-source-more:hover { border-color: color-mix(in srgb, var(--source-accent) 45%, #2d343d); color: var(--source-accent); }
.age-item-source-more > span { transition: transform .15s; }
.age-item-source-panel.is-expanded .age-item-source-more > span { transform: rotate(180deg); }

.age-quest-detail-identity .age-item-detail-identity-icon { background: linear-gradient(145deg, #1e3247, #17212d); font-size: 32px; }
.age-quest-tip { overflow: hidden; border: 1px solid #33404d; border-radius: 7px; background: #101419; box-shadow: 0 10px 26px rgba(0, 0, 0, .2); color: #dce4ed; }
.age-quest-tip-head { position: relative; border-bottom: 1px solid #34404b; background: linear-gradient(135deg, rgba(91, 154, 221, .17), rgba(255, 255, 255, .025)); padding: 14px 15px 13px; }
.age-quest-tip-head > span { color: #8bbcef; font-size: 10px; }
.age-quest-tip-head > i { position: absolute; top: 14px; right: 15px; color: #687787; font-size: 9px; font-style: normal; }
.age-quest-tip-head h2 { margin: 6px 42px 0 0; color: #f3f6f9; font-size: 19px; font-weight: 600; line-height: 1.3; }
.age-quest-tip-head p { margin: 4px 0 0; color: #8896a5; font-size: 11px; }
.age-quest-tip-body { display: grid; gap: 12px; padding: 14px 15px 16px; }
.age-quest-tip-body dl { display: grid; gap: 6px; margin: 0; }
.age-quest-tip-body dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.age-quest-tip-body dt { color: #7e8d9c; }
.age-quest-tip-body dd { margin: 0; color: #e8edf3; font-weight: 600; }
.age-quest-tip-copy { border-top: 1px solid #2b343e; border-bottom: 1px solid #2b343e; padding: 11px 0; color: #bec8d2; font-size: 11px; line-height: 1.7; }
.age-quest-tip-body section h3 { margin: 0 0 7px; color: #8dbff2; font-size: 11px; }
.age-quest-tip-objective { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: start; gap: 7px; padding: 5px 0; font-size: 11px; }
.age-quest-tip-objective > span { margin-top: 1px; color: #6688aa; }
.age-quest-tip-objective b { color: #dce4ec; font-weight: 500; }
.age-quest-tip-objective em { color: #e0ad59; font-style: normal; }
.age-quest-relation-panel .age-item-source-body small { line-height: 1.55; white-space: normal; }

/* Achievement database */
.age-achievement-catalog { display: grid; gap: 14px; }
.age-achievement-hero .age-item-hero-icon { display: grid; place-items: center; color: #edbd6c; font-size: 27px; }
.age-achievement-categories { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.age-achievement-categories a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; min-height: 48px; align-items: center; gap: 8px; border: 1px solid #29313a; border-radius: 6px; background: #191d22; padding: 7px 10px; color: #929eaa; }
.age-achievement-categories a:hover { border-color: #56616c; background: #1d2228; }
.age-achievement-categories a.is-active { border-color: #936f39; background: linear-gradient(120deg, rgba(190, 137, 61, .18), #1b1f24); color: #efc476; box-shadow: inset 0 -2px #c58a38; }
.age-achievement-categories a > span { font-size: 19px; }
.age-achievement-categories b { overflow: hidden; color: #d7dde4; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.age-achievement-categories em { color: #697582; font-size: 9px; font-style: normal; }
.age-achievement-results { overflow: hidden; border: 1px solid #293038; border-radius: 7px; background: #15181c; }
.age-achievement-filter { display: grid; grid-template-columns: minmax(260px, 1fr) repeat(4, minmax(125px, auto)) 92px 72px; gap: 7px; border-bottom: 1px solid #293038; background: #1b1f24; padding: 11px; }
.age-achievement-filter select { min-width: 0; border: 1px solid #303842; border-radius: 5px; background: #171b20; padding: 0 9px; color: #c7cfd8; font-size: 11px; }
.age-achievement-filter .age-item-submit { min-height: 38px; }
.age-achievement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.age-achievement-card { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 130px; gap: 11px; overflow: hidden; border: 1px solid #293039; border-radius: 6px; background: linear-gradient(135deg, #1c2025, #181b1f); padding: 12px; transition: border-color .15s, transform .15s, background .15s; }
.age-achievement-card::after { position: absolute; right: -25px; bottom: -40px; width: 100px; height: 100px; border-radius: 50%; background: rgba(205, 148, 66, .045); content: ''; }
.age-achievement-card:hover { border-color: #735a37; background: linear-gradient(135deg, #20252a, #191d21); transform: translateY(-1px); }
.age-achievement-card-icon { position: relative; z-index: 1; display: grid; width: 56px; height: 56px; place-items: center; overflow: hidden; border: 1px solid #665336; border-radius: 7px; background: #242018; color: #e3b461; font-size: 27px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.age-achievement-card-icon img { width: 54px; height: 54px; object-fit: contain; }
.age-achievement-card-body { position: relative; z-index: 1; min-width: 0; }
.age-achievement-card-label { display: flex; flex-wrap: wrap; gap: 5px; color: #d0a252; font-size: 9px; }
.age-achievement-card-label i { color: #707c88; font-style: normal; }
.age-achievement-card h2 { overflow: hidden; margin: 5px 38px 0 0; color: #e8edf2; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.age-achievement-card p { display: -webkit-box; overflow: hidden; min-height: 31px; margin: 5px 0 0; color: #87929e; font-size: 10px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.age-achievement-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.age-achievement-card-tags span { overflow: hidden; max-width: 100%; border-radius: 3px; background: #252b31; padding: 3px 6px; color: #95a1ae; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.age-achievement-card-tags .is-reward { background: rgba(71, 151, 101, .13); color: #78c895; }
.age-achievement-card-tags .is-title { background: rgba(142, 104, 181, .14); color: #c49ae9; }
.age-achievement-card-id { position: absolute; top: 11px; right: 11px; color: #5e6873; font-size: 9px; }
.age-achievement-detail-identity .age-item-detail-identity-icon { background: linear-gradient(145deg, #3a2b17, #211b13); color: #edbd6c; font-size: 32px; }
.age-achievement-tip { overflow: hidden; border: 1px solid #4a4030; border-radius: 7px; background: #15130f; box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.age-achievement-tip > header { position: relative; border-bottom: 1px solid #463b2b; background: linear-gradient(135deg, rgba(202,145,62,.2), rgba(255,255,255,.025)); padding: 14px; }
.age-achievement-tip > header > span { color: #d9aa5f; font-size: 10px; }
.age-achievement-tip > header > i { position: absolute; top: 14px; right: 14px; color: #776c5d; font-size: 9px; font-style: normal; }
.age-achievement-tip > header > div { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 11px; margin-top: 10px; }
.age-achievement-tip > header img { width: 52px; height: 52px; border: 1px solid #725b37; border-radius: 6px; background: #241e15; object-fit: contain; }
.age-achievement-tip > header div > span { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid #725b37; border-radius: 6px; color: #e2b362; font-size: 28px; }
.age-achievement-tip h2 { margin: 0; color: #f0e9dd; font-size: 18px; font-weight: 600; line-height: 1.35; }
.age-achievement-tip-body { padding: 15px; }
.age-achievement-tip-body > strong { color: #d8aa5e; font-size: 11px; }
.age-achievement-tip-body > p { margin: 7px 0 0; color: #c5bcae; font-size: 11px; line-height: 1.75; }
.age-achievement-progress { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; border-top: 1px solid #3c3327; padding-top: 12px; color: #8e8374; font-size: 10px; }
.age-achievement-progress b { color: #edbd6c; font-size: 20px; }

@media (max-width: 1180px) {
    .age-achievement-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .age-achievement-filter { grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(120px, auto)); }
    .age-achievement-filter .age-item-submit { min-height: 36px; }
    .age-achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .age-achievement-categories { display: flex; overflow-x: auto; padding-bottom: 3px; }
    .age-achievement-categories a { min-width: 130px; }
    .age-achievement-filter { grid-template-columns: 1fr 1fr; }
    .age-achievement-filter .age-item-search-control { grid-column: 1 / -1; }
    .age-achievement-grid { grid-template-columns: 1fr; padding: 7px; }
    .age-achievement-card { min-height: 116px; }
}

/* NPC database */
.age-npc-catalog { display: grid; gap: 14px; }
.age-npc-hero .age-item-hero-icon { display: grid; place-items: center; color: #72bedf; font-size: 27px; }
.age-npc-results { overflow: hidden; border: 1px solid #293139; border-radius: 7px; background: #15191d; }
.age-npc-filter { display: grid; grid-template-columns: minmax(250px,1fr) repeat(3,minmax(118px,auto)) minmax(190px,auto) minmax(120px,auto) 90px 70px; gap: 7px; border-bottom: 1px solid #293139; background: #1b2025; padding: 11px; }
.age-npc-filter select { min-width: 0; border: 1px solid #303a43; border-radius: 5px; background: #171c20; padding: 0 9px; color: #c7d0d8; font-size: 11px; }
.age-npc-level { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5px; }
.age-npc-level input { min-width: 0; border: 1px solid #303a43; border-radius: 5px; background: #171c20; padding: 0 8px; color: #c7d0d8; font-size: 11px; }
.age-npc-level i { color: #67737e; font-size: 10px; font-style: normal; }
.age-npc-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 10px; }
.age-npc-card { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); min-height: 116px; gap: 11px; overflow: hidden; border: 1px solid #29323a; border-radius: 6px; background: linear-gradient(135deg,#1b2025,#181c20); padding: 12px; transition: border-color .15s,background .15s,transform .15s; }
.age-npc-card::after { position: absolute; right: -30px; bottom: -50px; width: 120px; height: 120px; border-radius: 50%; background: rgba(78,157,195,.045); content: ''; }
.age-npc-card:hover { border-color: #3d7188; background: linear-gradient(135deg,#20272c,#191e22); transform: translateY(-1px); }
.age-npc-avatar { position: relative; z-index: 1; display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid #375f72; border-radius: 50%; background: linear-gradient(145deg,#1c3440,#18242b); color: #78c2e3; font-size: 29px; box-shadow: inset 0 0 0 3px rgba(0,0,0,.2); }
.age-npc-avatar b { position: absolute; right: -4px; bottom: -5px; border: 1px solid #33434c; border-radius: 9px; background: #161b1f; padding: 2px 5px; color: #a8bac5; font-size: 8px; font-weight: 600; }
.age-npc-card-body { position: relative; z-index: 1; min-width: 0; }
.age-npc-card-label { display: flex; gap: 6px; color: #68b6d8; font-size: 9px; }
.age-npc-card-label i { color: #6e7b85; font-style: normal; }
.age-npc-card h2 { overflow: hidden; margin: 5px 34px 0 0; color: #e7edf1; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.age-npc-card p { overflow: hidden; margin: 5px 0 0; color: #84919a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.age-npc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.age-npc-tags span { border-radius: 3px; background: rgba(69,139,171,.12); padding: 3px 6px; color: #77b8d5; font-size: 9px; }
.age-npc-card > em { position: absolute; top: 11px; right: 11px; color: #5d6972; font-size: 9px; font-style: normal; }
.age-npc-detail-identity .age-item-detail-identity-icon { border-radius: 50%; background: linear-gradient(145deg,#1e3a47,#19262d); color: #79c4e5; font-size: 34px; }
.age-npc-tip { overflow: hidden; border: 1px solid #304551; border-radius: 7px; background: #11171a; box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.age-npc-tip > header { position: relative; border-bottom: 1px solid #30434d; background: linear-gradient(135deg,rgba(75,157,196,.18),rgba(255,255,255,.025)); padding: 14px; }
.age-npc-tip > header > span { color: #77bad8; font-size: 10px; }
.age-npc-tip > header > i { position: absolute; top: 14px; right: 14px; color: #667681; font-size: 9px; font-style: normal; }
.age-npc-tip > header > div { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 11px; margin-top: 10px; }
.age-npc-tip > header > div > span { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid #3f7188; border-radius: 50%; background: #182a32; color: #7ac4e4; font-size: 30px; }
.age-npc-tip h2 { margin: 0; color: #edf3f6; font-size: 18px; font-weight: 600; line-height: 1.3; }
.age-npc-tip header p { margin: 4px 0 0; color: #82929c; font-size: 10px; }
.age-npc-tip-body { padding: 14px; }
.age-npc-tip-level { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: end; gap: 8px; border-bottom: 1px solid #2b3b43; padding-bottom: 12px; }
.age-npc-tip-level span { color: #82939e; font-size: 10px; }
.age-npc-tip-level b { color: #e7f2f6; font-size: 25px; line-height: 1; }
.age-npc-tip-level em { color: #75bddd; font-size: 10px; font-style: normal; }
.age-npc-tip-body dl { display: grid; gap: 7px; margin: 12px 0 0; }
.age-npc-tip-body dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.age-npc-tip-body dt { color: #788994; }
.age-npc-tip-body dd { margin: 0; color: #d5e0e5; }
.age-npc-tip-functions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; border-top: 1px solid #2b3b43; padding-top: 11px; }
.age-npc-tip-functions span { border-radius: 3px; background: rgba(71,153,190,.13); padding: 4px 7px; color: #7dbeda; font-size: 9px; }
.age-item-source-panel[data-source-kind="function"] { --source-accent:#6dbbdc; }
.age-npc-relation-panel .age-item-source-body small { white-space: normal; }
@media (max-width:1180px){.age-npc-filter{grid-template-columns:minmax(220px,1fr) repeat(3,minmax(115px,auto));}.age-npc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:760px){.age-npc-filter{grid-template-columns:1fr 1fr;}.age-npc-filter .age-item-search-control,.age-npc-level{grid-column:1/-1;}.age-npc-grid{grid-template-columns:1fr;padding:7px;}}

/* Craft database */
.age-craft-catalog{display:grid;gap:14px}.age-craft-hero .age-item-hero-icon{display:grid;place-items:center;color:#e8ad59;font-size:27px}.age-craft-categories{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px}.age-craft-categories a{display:grid;grid-template-columns:22px minmax(80px,1fr) auto;min-width:140px;min-height:46px;align-items:center;gap:7px;border:1px solid #34312c;border-radius:6px;background:#1b1d20;padding:7px 10px;color:#8e9399}.age-craft-categories a.is-active{border-color:#8b6836;background:linear-gradient(120deg,rgba(196,139,59,.17),#1d1f22);color:#eab666;box-shadow:inset 0 -2px #c78a37}.age-craft-categories b{overflow:hidden;color:#d8dde2;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.age-craft-categories em{color:#696f76;font-size:9px;font-style:normal}.age-craft-results{overflow:hidden;border:1px solid #2d3034;border-radius:7px;background:#17191c}.age-craft-filter{display:grid;grid-template-columns:minmax(260px,1fr) minmax(170px,auto) minmax(210px,auto) minmax(145px,auto) 90px 70px;gap:7px;border-bottom:1px solid #2d3034;background:#1d2023;padding:11px}.age-craft-filter select{min-width:0;border:1px solid #363a3f;border-radius:5px;background:#191b1e;padding:0 9px;color:#c9ced3;font-size:11px}.age-craft-level{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:5px}.age-craft-level input{min-width:0;border:1px solid #363a3f;border-radius:5px;background:#191b1e;padding:0 8px;color:#c9ced3;font-size:11px}.age-craft-level i{color:#71767c;font-size:10px;font-style:normal}.age-craft-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}.age-craft-card{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);min-height:122px;gap:11px;overflow:hidden;border:1px solid #303238;border-radius:6px;background:linear-gradient(135deg,#1e2023,#191b1e);padding:12px;transition:border-color .15s,background .15s,transform .15s}.age-craft-card:hover{border-color:#745a36;background:linear-gradient(135deg,#232529,#1b1d20);transform:translateY(-1px)}.age-craft-product-icon{display:grid;width:56px;height:56px;place-items:center;overflow:hidden;border:1px solid #695333;border-radius:7px;background:#272119;color:#e4ad59;font-size:27px}.age-craft-product-icon img{width:54px;height:54px;object-fit:contain}.age-craft-card-body{min-width:0}.age-craft-label{display:flex;gap:6px;color:#dc9f48;font-size:9px}.age-craft-label i{color:#747a81;font-style:normal}.age-craft-card h2{overflow:hidden;margin:5px 36px 0 0;color:#e9ecef;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.age-craft-card p{overflow:hidden;margin:5px 0 0;color:#8a9097;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.age-craft-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}.age-craft-tags span{border-radius:3px;background:rgba(184,126,48,.1);padding:3px 6px;color:#c49a60;font-size:9px}.age-craft-card>em{position:absolute;top:11px;right:11px;color:#62676c;font-size:9px;font-style:normal}.age-craft-detail-identity .age-item-detail-identity-icon{background:linear-gradient(145deg,#3a2d1a,#221d15);color:#ebb05c;font-size:31px}.age-craft-tip{overflow:hidden;border:1px solid #4b3f2e;border-radius:7px;background:#16130f;box-shadow:0 10px 26px rgba(0,0,0,.2)}.age-craft-tip>header{position:relative;border-bottom:1px solid #493d2c;background:linear-gradient(135deg,rgba(203,145,61,.2),rgba(255,255,255,.025));padding:14px}.age-craft-tip>header>span{color:#d9a65c;font-size:10px}.age-craft-tip>header>i{position:absolute;top:14px;right:14px;color:#776b5b;font-size:9px;font-style:normal}.age-craft-tip>header>div{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:11px;margin-top:10px}.age-craft-tip>header img,.age-craft-tip>header>div>span{width:56px;height:56px;border:1px solid #745b36;border-radius:6px;background:#282016;object-fit:contain}.age-craft-tip>header>div>span{display:grid;place-items:center;color:#e8af5b;font-size:28px}.age-craft-tip h2{margin:0;color:#f1ece4;font-size:17px;font-weight:600;line-height:1.35}.age-craft-tip header p{margin:4px 0 0;color:#9c8f7d;font-size:10px}.age-craft-tip-body{padding:14px}.age-craft-tip-body dl{display:grid;gap:7px;margin:0}.age-craft-tip-body dl div{display:flex;justify-content:space-between;gap:10px;font-size:11px}.age-craft-tip-body dt{color:#8c8172}.age-craft-tip-body dd{margin:0;color:#e0d8cc}.age-craft-tip-materials{display:grid;gap:6px;margin-top:13px;border-top:1px solid #403527;padding-top:11px}.age-craft-tip-materials>strong{color:#d6a358;font-size:10px}.age-craft-tip-materials>span{display:flex;justify-content:space-between;gap:10px;color:#c3baad;font-size:10px}.age-craft-tip-materials em{color:#e5ad5c;font-style:normal}.age-item-source-panel[data-source-kind="product"]{--source-accent:#70c78a}.age-item-source-panel[data-source-kind="material"]{--source-accent:#e0a957}.age-item-source-panel[data-source-kind="station"]{--source-accent:#7eb3dd}.age-item-source-mark img{width:34px;height:34px;border-radius:4px;object-fit:contain}
@media(max-width:1180px){.age-craft-filter{grid-template-columns:minmax(220px,1fr) repeat(3,minmax(130px,auto))}.age-craft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.age-craft-filter{grid-template-columns:1fr 1fr}.age-craft-filter .age-item-search-control,.age-craft-level{grid-column:1/-1}.age-craft-grid{grid-template-columns:1fr;padding:7px}}
.age-item-source-more b { font-weight: 500; }

@media (max-width: 1050px) {
    .age-item-detail-layout { grid-template-columns: 350px minmax(0, 1fr); }
    .age-item-source-list { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .age-item-detail-layout { grid-template-columns: 1fr; }
    .age-item-detail-aside { grid-template-columns: 1fr 1fr; align-items: start; }
    .age-item-tip-frame { grid-row: span 2; }
}

@media (max-width: 620px) {
    .age-item-detail-page { width: min(100% - 18px, 1280px); padding-top: 9px; }
    .age-item-detail-identity { padding: 10px 11px 12px; }
    .age-item-detail-breadcrumb { margin-bottom: 9px; }
    .age-item-detail-identity-main { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
    .age-item-detail-identity-icon { width: 50px; height: 50px; border-width: 1px; }
    .age-item-detail-identity-icon img { width: 48px; height: 48px; }
    .age-item-detail-identity h1 { font-size: 18px; }
    .age-item-detail-identity-facts { gap: 4px 10px; margin-top: 6px; }
    .age-item-detail-identity-facts span:nth-child(n+3) { display: none; }
    .age-item-detail-back { padding: 8px; }
    .age-item-detail-back > span:last-child { display: none; }
    .age-item-detail-aside { grid-template-columns: 1fr; }
    .age-item-tip-frame { grid-row: auto; }
    .age-item-source-hero { grid-template-columns: 42px minmax(0, 1fr); padding: 13px; }
    .age-item-source-hero-icon { width: 40px; height: 40px; font-size: 20px; }
    .age-item-source-hero > strong { display: none; }
    .age-item-source-list { grid-template-columns: 1fr; padding: 7px; }
    .age-item-source-card { grid-template-columns: 34px minmax(0, 1fr); }
    .age-item-source-mark { width: 32px; height: 32px; }
    .age-item-source-card > em { grid-column: 2; max-width: none; text-align: left; }
}

/* ArcheAge client-style ItemTip, loaded through the reusable UIV8 ItemTip contract. */
.age-client-tip-layer {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .46));
}

.age-client-tip {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(78vh, 680px);
    border: 1px solid #34513c;
    background:
        linear-gradient(145deg, rgba(24, 58, 34, .28), transparent 45%),
        linear-gradient(180deg, #102b19 0%, #07180e 100%);
    padding: 12px;
    color: #eaf5e8;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .48), inset 0 0 24px rgba(27, 85, 43, .16);
    scrollbar-color: rgba(126, 153, 124, .56) transparent;
    scrollbar-width: thin;
}

.age-client-tip-id {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #7f9b82;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}

.age-client-tip-head { display: flex; min-height: 58px; align-items: flex-start; gap: 10px; padding-right: 64px; }
.age-client-tip-icon {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--tip-grade-color, #d8c6a3);
    background: #172418;
    color: var(--tip-grade-color, #d8c6a3);
    font-size: 24px;
    box-shadow: inset 0 0 0 1px #050a06, 0 0 9px color-mix(in srgb, var(--tip-grade-color, #d8c6a3) 52%, transparent);
}
.age-client-tip-icon img { width: 50px; height: 50px; object-fit: contain; }
.age-client-tip-heading { display: block; min-width: 0; padding-top: 1px; }
.age-client-tip-heading > * { display: block; }
.age-client-tip-category { color: #d8e4d6; font-size: 11px; }
.age-client-tip-heading strong { margin-top: 2px; color: var(--tip-grade-color, #d8c6a3); font-size: 16px; font-weight: 800; line-height: 1.25; text-shadow: 0 0 8px rgba(255, 255, 255, .08); }
.age-client-tip-grade { margin-top: 2px; color: var(--tip-grade-color, #d8c6a3); font-weight: 700; }
.age-client-tip-heading small { overflow: hidden; margin-top: 2px; color: #78917c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.age-client-tip-separator { height: 1px; margin: 10px 0; background: linear-gradient(90deg, transparent, rgba(127, 163, 123, .38) 12%, rgba(127, 163, 123, .22) 88%, transparent); }
.age-client-tip-lines { display: grid; gap: 3px; }
.age-client-tip-lines > div,
.age-client-tip-prices > div { display: flex; min-height: 18px; align-items: baseline; justify-content: space-between; gap: 16px; }
.age-client-tip-lines span,
.age-client-tip-prices span { color: #aac1a8; }
.age-client-tip-lines b,
.age-client-tip-prices b { color: #f5fbf3; font-weight: 700; text-align: right; }
.age-client-tip-lines b small { color: #b8cbb6; font-size: 10px; font-weight: 500; }
.age-client-tip-lines .is-primary span { color: #dae9d8; }
.age-client-tip-lines .is-primary b { color: #fff3b0; font-size: 13px; }
.age-client-tip-lines.is-compact { margin-top: 6px; border-left: 2px solid rgba(229, 180, 47, .32); padding-left: 8px; }
.age-client-tip-section-title { margin-bottom: 4px; color: #ffffff; font-weight: 800; }
.age-client-tip-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; border: 1px solid rgba(229, 180, 47, .2); background: rgba(229, 180, 47, .07); padding: 6px 8px; color: #d9c87b; }
.age-client-tip-notice strong { color: #f4cf55; }
.age-client-tip-notice span { color: #c4b66e; font-size: 10px; }
.age-client-tip-description { color: #d0dfce; line-height: 1.65; white-space: normal; }
.age-client-tip-socket-title { color: #5ee67b; font-weight: 700; }
.age-client-tip-sockets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.age-client-tip-sockets i { width: 17px; height: 17px; border: 1px solid #68735d; background: linear-gradient(135deg, #565141, #292d25); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .28); }
.age-client-tip-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.age-client-tip-tags span { border: 1px solid rgba(135, 166, 131, .2); background: rgba(135, 166, 131, .08); padding: 2px 6px; color: #9fb49e; font-size: 10px; }
.age-client-tip-prices { display: grid; gap: 2px; margin-top: 7px; }
.age-client-tip-more { display: block; margin: 10px -12px -12px; border-top: 1px solid rgba(127, 163, 123, .18); background: rgba(0, 0, 0, .16); padding: 7px 12px; color: #7da485; font-size: 10px; text-align: right; }

@media (max-width: 640px) {
    .age-client-tip { max-height: min(72vh, 620px); overflow-y: auto; }
}

/* DVGnew color skin: keep the booklet framework structure, replace the FFCLI palette. */
:root {
    --dvg-logo-gold: #f59e0b;
    --dvg-logo-gold-soft: #fff3cf;
    --dvg-logo-gold-softer: #fff5d8;
    --dvg-ink: #151515;
    --dvg-text: #202124;
    --dvg-panel: #ffffff;
    --dvg-shell: #f3f3f3;
    --dvg-line: #edf0f4;
}

body {
    background: var(--dvg-shell);
    color: var(--dvg-ink);
}

#header-box.nav-surface,
#header-box.nav-surface-default,
#header-box.nav-surface-ink,
#header-box.nav-surface-ember {
    top: 0 !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.14) !important;
    box-shadow: 0 8px 26px rgba(148, 106, 20, 0.06) !important;
    color: #24211d !important;
    backdrop-filter: blur(14px);
}

#header-box .nav-brand,
#header-box .nav-brand a,
#header-box .nav-link,
#header-box .icon-btn,
#header-box .search-box {
    color: var(--dvg-text) !important;
}

#header-box .age-brand-logo {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: #edf2f6;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(30, 64, 45, 0.14), 0 3px 10px rgba(15, 23, 42, 0.12);
}

#header-box .nav-link {
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-weight: 500;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

#header-box .nav-link:hover,
#header-box [data-dropdown-trigger].is-open,
#header-box .icon-btn:hover {
    border-color: rgba(37, 99, 235, 0.18) !important;
    background: rgba(37, 99, 235, 0.07) !important;
    color: #2563eb !important;
}

#header-box .nav-link:hover > span,
#header-box [data-dropdown-trigger].is-open > span {
    color: inherit !important;
}

#header-box .nav-link.nav-link-active {
    position: relative;
    border-color: rgba(37, 99, 235, 0.24) !important;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.13), rgba(37, 99, 235, 0.07)) !important;
    color: #1d4ed8 !important;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.05) !important;
}

#header-box .nav-link.nav-link-active > span {
    color: inherit !important;
}

#header-box .nav-link.nav-link-active::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 3px;
    left: 12px;
    width: auto;
    height: 2px;
    border-radius: 999px;
    background: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.28);
}

#header-box .nav-drop,
#header-box .control-menu,
#header-box .cascade-subpanel {
    border-color: rgba(245, 158, 11, 0.14) !important;
    background: var(--dvg-panel) !important;
    color: #24211d !important;
    box-shadow: 0 18px 38px rgba(91, 64, 20, 0.12) !important;
}

#header-box .nav-drop-item,
#header-box .nav-drop-line,
#header-box .nav-drop-caret,
#header-box .dropdown-cascade-tab {
    color: var(--dvg-text) !important;
}

#header-box .nav-drop-item:hover,
#header-box .dropdown-cascade-tab.is-active,
#header-box .dropdown-trigger.is-open {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #2563eb !important;
}

#header-box .dropdown-cascade-tab {
    position: relative;
    border-radius: 6px !important;
}

#header-box .dropdown-cascade-tab.is-active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 5px;
    width: 2px;
    border-radius: 999px;
    background: #3b82f6;
}

#header-box .search-box {
    border-color: var(--dvg-logo-gold) !important;
    background: rgba(255, 255, 255, 0.92) !important;
}

#header-box .search-box span {
    color: #6b655d !important;
}

#header-box .search-box span:last-child {
    background: #fff5d8 !important;
    color: #9a6a00 !important;
}

#header-box .member-nav-btn,
#header-box .member-nav-avatar {
    border-color: rgba(203, 213, 225, 0.88) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #172033 !important;
}

#header-box .member-nav-btn:hover,
#header-box .member-nav-avatar:hover {
    background: var(--dvg-logo-gold-soft) !important;
    color: var(--dvg-ink) !important;
}

#header-box .top-badge {
    background: var(--dvg-logo-gold) !important;
    color: #fff !important;
}

.side-panel {
    border-color: var(--dvg-line) !important;
    background: #fff !important;
    color: var(--dvg-text) !important;
}

.side-link,
.side-child-link,
.side-grandchild-link {
    color: var(--dvg-text) !important;
}

.side-link:hover,
.side-child-link:hover,
.side-grandchild-link:hover,
.side-cascade-trigger[aria-expanded="true"] {
    background: rgba(37, 99, 235, 0.07) !important;
    color: #2563eb !important;
}

.side-link.is-active {
    position: relative;
    background: rgba(37, 99, 235, 0.1) !important;
    color: #1d4ed8 !important;
}

.side-link.is-active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 4px;
    width: 2px;
    border-radius: 999px;
    background: #3b82f6;
}

.booklet-switcher-panel {
    border-color: var(--dvg-line) !important;
    background: #fff !important;
    color: var(--dvg-text) !important;
}

.booklet-switcher-home-link {
    background: var(--dvg-logo-gold-softer) !important;
    color: var(--dvg-logo-gold) !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.01) !important;
}

.booklet-switcher-home-link:hover {
    background: #ffefbd !important;
    color: #e89a00 !important;
}

.booklet-switcher-home-link .booklet-switcher-text {
    color: var(--dvg-ink) !important;
    font-weight: 700 !important;
}

.booklet-switcher-home-icon {
    border: 0 !important;
    background: transparent !important;
    color: var(--dvg-logo-gold) !important;
    box-shadow: none !important;
}

.booklet-switcher-link:hover {
    background: var(--dvg-logo-gold-softer) !important;
    color: #e89a00 !important;
}

.booklet-switcher-item-link.is-active,
html[class*="booklet-switcher-saved-collapsed-"] [data-booklet-switcher] .booklet-switcher-item-link.is-active,
[data-booklet-switcher].is-collapsed .booklet-switcher-item-link.is-active {
    background: #fff4d6 !important;
    color: #e89a00 !important;
}

html[class*="booklet-switcher-saved-collapsed-"] [data-booklet-switcher] .booklet-switcher-item-link.is-active::before,
[data-booklet-switcher].is-collapsed .booklet-switcher-item-link.is-active::before {
    background: #f9a602 !important;
}

.booklet-switcher-collapse-btn {
    border-color: rgba(249, 166, 2, 0.34) !important;
    background: #fff !important;
    color: var(--dvg-logo-gold) !important;
    box-shadow: 0 10px 24px rgba(249, 166, 2, 0.16) !important;
}

.booklet-switcher-collapse-btn:hover {
    border-color: #f9a602 !important;
    background: #f9a602 !important;
    color: #fff !important;
}

.age-hero {
    border-bottom-color: rgba(245, 158, 11, 0.14);
    background: linear-gradient(180deg, rgba(255, 245, 216, 0.62), rgba(243, 243, 243, 0));
}

.age-filter-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.age-filter-tag,
.age-filter-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    border-radius: 999px;
    padding: 0 .72rem;
    font-size: .8rem;
    font-weight: 700;
}

.age-filter-tag {
    background: #fff3cf;
    color: #9a6a00;
}

.age-filter-tags a {
    border: 1px solid rgba(245, 158, 11, .22);
    background: #fff;
    color: #6b655d;
}

.age-list-title {
    padding-bottom: .9rem;
}

.age-codex-filter {
    margin-bottom: .85rem;
    border: 1px solid rgba(245, 158, 11, .16);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(91, 64, 20, .06);
    padding: .85rem;
}

.age-codex-filter-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: .7rem;
}

.age-codex-filter-head strong {
    color: #151515;
    font-size: .95rem;
}

.age-codex-filter-head span {
    color: #64748b;
    font-size: .78rem;
}

.age-codex-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.8fr) repeat(4, minmax(110px, .8fr)) auto auto auto;
    gap: .55rem;
    align-items: end;
}

.age-codex-filter-grid.is-simple {
    grid-template-columns: minmax(260px, 1fr) auto;
}

.age-codex-filter-grid label {
    display: grid;
    gap: .24rem;
    min-width: 0;
}

.age-codex-filter-grid label span {
    color: #64748b;
    font-size: .74rem;
}

.age-codex-filter-grid input:not([type="checkbox"]) {
    width: 100%;
    height: 2.35rem;
    border: 1px solid #dbe2ea;
    border-radius: 4px;
    background: #fff;
    padding: 0 .65rem;
    color: #151515;
}

.age-codex-check {
    display: inline-flex !important;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    border: 1px solid #dbe2ea;
    border-radius: 4px;
    background: #fffaf0;
    padding: 0 .7rem;
}

.age-codex-check input {
    margin: 0 .35rem 0 0;
}

.age-codex-check span {
    color: #151515 !important;
    font-weight: 700;
}

.age-codex-table-wrap {
    overflow-x: auto;
    border: 1px solid #dfe7ef;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(91, 64, 20, .05);
}

.age-codex-list-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    color: #172033;
    font-size: 13px;
}

.age-codex-list-table th {
    border-bottom: 1px solid #dfe7ef;
    background: #f8fafc;
    color: #475569;
    padding: .58rem .62rem;
    text-align: left;
    white-space: nowrap;
    font-weight: 800;
}

.age-codex-list-table td {
    border-bottom: 1px solid #edf0f4;
    padding: .48rem .62rem;
    vertical-align: middle;
}

.age-codex-list-table tbody tr:hover {
    background: #fff8e6;
}

.age-codex-list-table tbody tr:last-child td {
    border-bottom: 0;
}

.age-col-id {
    width: 82px;
    color: #334155;
    font-weight: 800;
}

.age-col-icon {
    width: 52px;
}

.age-table-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #b7c0ca;
    border-radius: 3px;
    background: #172418;
    color: #f6cf65;
    font-size: 11px;
    font-weight: 800;
}

.age-table-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.age-col-name {
    min-width: 260px;
}

.age-col-name a,
.age-col-name strong {
    color: #0f3f8f;
    font-weight: 800;
}

.age-col-name small {
    display: block;
    margin-top: .08rem;
    color: #64748b;
    font-size: 12px;
}

.age-col-desc {
    min-width: 320px;
    color: #475569;
    line-height: 1.55;
}

.age-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.age-detail-main-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border: 1px solid #d9e1ea;
    border-radius: 6px;
    background: #172418;
    color: #f6cf65;
    font-size: 13px;
    font-weight: 800;
}

.age-detail-main-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.age-generic-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
    padding-bottom: 2rem;
}

.age-generic-detail,
.age-detail-section {
    min-width: 0;
}

.age-detail-section {
    margin-bottom: .85rem;
    border: 1px solid #dfe7ef;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(91, 64, 20, .05);
}

.age-detail-section h2 {
    margin: 0;
    border-bottom: 1px solid #edf0f4;
    padding: .7rem .85rem;
    color: #151515;
    font-size: .95rem;
    font-weight: 800;
}

.age-detail-kv {
    margin: 0;
}

.age-detail-kv div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    border-bottom: 1px solid #edf0f4;
}

.age-detail-kv div:last-child {
    border-bottom: 0;
}

.age-detail-kv dt,
.age-detail-kv dd {
    margin: 0;
    padding: .62rem .85rem;
    min-width: 0;
}

.age-detail-kv dt {
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
}

.age-detail-kv dd {
    color: #172033;
    overflow-wrap: anywhere;
    line-height: 1.65;
}

.age-relation-link {
    color: #0f3f8f;
    font-weight: 800;
}

.age-relation-link:hover {
    text-decoration: underline;
}

html.dark .age-codex-filter,
html.tw-dark .age-codex-filter,
html.dark .age-codex-table-wrap,
html.tw-dark .age-codex-table-wrap {
    border-color: rgba(255, 198, 82, .13);
    background: #191a1f;
}

html.dark .age-codex-filter-head strong,
html.tw-dark .age-codex-filter-head strong,
html.dark .age-codex-list-table,
html.tw-dark .age-codex-list-table {
    color: #ddd6ca;
}

html.dark .age-codex-filter-grid input:not([type="checkbox"]),
html.tw-dark .age-codex-filter-grid input:not([type="checkbox"]),
html.dark .age-codex-check,
html.tw-dark .age-codex-check {
    border-color: rgba(255, 255, 255, .12);
    background: #111217;
    color: #f2f2f2;
}

html.dark .age-codex-check span,
html.tw-dark .age-codex-check span {
    color: #f2f2f2 !important;
}

html.dark .age-codex-list-table th,
html.tw-dark .age-codex-list-table th {
    border-color: rgba(255, 255, 255, .1);
    background: #101114;
    color: #c9c1b5;
}

html.dark .age-codex-list-table td,
html.tw-dark .age-codex-list-table td {
    border-color: rgba(255, 255, 255, .08);
}

html.dark .age-codex-list-table tbody tr:hover,
html.tw-dark .age-codex-list-table tbody tr:hover {
    background: rgba(248, 181, 37, .08);
}

html.dark .age-col-name a,
html.dark .age-col-name strong,
html.tw-dark .age-col-name a,
html.tw-dark .age-col-name strong {
    color: #8ab4ff;
}

html.dark .age-col-desc,
html.tw-dark .age-col-desc {
    color: #c9c1b5;
}

html.dark .age-detail-section,
html.tw-dark .age-detail-section {
    border-color: rgba(255, 198, 82, .13);
    background: #191a1f;
}

html.dark .age-detail-section h2,
html.tw-dark .age-detail-section h2,
html.dark .age-detail-kv dd,
html.tw-dark .age-detail-kv dd {
    color: #ddd6ca;
}

html.dark .age-detail-section h2,
html.tw-dark .age-detail-section h2,
html.dark .age-detail-kv div,
html.tw-dark .age-detail-kv div {
    border-color: rgba(255, 255, 255, .08);
}

html.dark .age-relation-link,
html.tw-dark .age-relation-link {
    color: #8ab4ff;
}

.age-eyebrow,
.age-section-head a {
    color: #e89a00;
}

.age-button,
.age-pagination .active {
    background: var(--dvg-logo-gold);
    color: #fff;
}

.age-card:hover {
    border-color: rgba(245, 158, 11, 0.55);
}

.age-icon {
    background: #fff5d8;
    color: #e89a00;
}

html.dark body,
html.tw-dark body {
    background: #101114;
    color: #f2f2f2;
}

html.dark #header-box.nav-surface,
html.tw-dark #header-box.nav-surface,
html.dark #header-box.nav-surface-default,
html.tw-dark #header-box.nav-surface-default,
html.dark #header-box.nav-surface-ink,
html.tw-dark #header-box.nav-surface-ink,
html.dark #header-box.nav-surface-ember,
html.tw-dark #header-box.nav-surface-ember {
    background: rgba(18, 19, 22, 0.88) !important;
    border-bottom-color: rgba(255, 198, 82, 0.13) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28) !important;
}

html.dark #header-box .nav-brand,
html.dark #header-box .nav-brand a,
html.dark #header-box .nav-link,
html.dark #header-box .icon-btn,
html.dark #header-box .search-box,
html.tw-dark #header-box .nav-brand,
html.tw-dark #header-box .nav-brand a,
html.tw-dark #header-box .nav-link,
html.tw-dark #header-box .icon-btn,
html.tw-dark #header-box .search-box {
    color: #d9d3c9 !important;
}

html.dark #header-box .nav-link:hover,
html.dark #header-box [data-dropdown-trigger].is-open,
html.dark #header-box .icon-btn:hover,
html.tw-dark #header-box .nav-link:hover,
html.tw-dark #header-box [data-dropdown-trigger].is-open,
html.tw-dark #header-box .icon-btn:hover {
    border-color: rgba(96, 165, 250, 0.18) !important;
    background: rgba(59, 130, 246, 0.09) !important;
    color: #93c5fd !important;
}

html.dark #header-box .nav-link.nav-link-active,
html.tw-dark #header-box .nav-link.nav-link-active {
    border-color: rgba(96, 165, 250, 0.28) !important;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.09)) !important;
    color: #93c5fd !important;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.04) !important;
}

html.dark #header-box .nav-link.nav-link-active::after,
html.tw-dark #header-box .nav-link.nav-link-active::after {
    background: #60a5fa;
    box-shadow: 0 0 9px rgba(96, 165, 250, 0.36);
}

html.dark #header-box .nav-drop-item:hover,
html.dark #header-box .dropdown-cascade-tab.is-active,
html.dark #header-box .dropdown-trigger.is-open,
html.tw-dark #header-box .nav-drop-item:hover,
html.tw-dark #header-box .dropdown-cascade-tab.is-active,
html.tw-dark #header-box .dropdown-trigger.is-open {
    background: rgba(59, 130, 246, 0.11) !important;
    color: #93c5fd !important;
}

html.dark #header-box .dropdown-cascade-tab.is-active::before,
html.tw-dark #header-box .dropdown-cascade-tab.is-active::before {
    background: #60a5fa;
}

html.dark #header-box .nav-drop,
html.dark #header-box .control-menu,
html.dark #header-box .cascade-subpanel,
html.tw-dark #header-box .nav-drop,
html.tw-dark #header-box .control-menu,
html.tw-dark #header-box .cascade-subpanel {
    border-color: rgba(255, 198, 82, 0.13) !important;
    background: #191a1f !important;
    color: #ddd6ca !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38) !important;
}

html.dark #header-box .nav-drop-item,
html.dark #header-box .nav-drop-line,
html.dark #header-box .nav-drop-caret,
html.dark #header-box .dropdown-cascade-tab,
html.tw-dark #header-box .nav-drop-item,
html.tw-dark #header-box .nav-drop-line,
html.tw-dark #header-box .nav-drop-caret,
html.tw-dark #header-box .dropdown-cascade-tab {
    color: #ddd6ca !important;
}

html.dark #header-box .search-box,
html.dark #header-box .member-nav-btn,
html.dark #header-box .member-nav-avatar,
html.tw-dark #header-box .search-box,
html.tw-dark #header-box .member-nav-btn,
html.tw-dark #header-box .member-nav-avatar {
    border-color: rgba(255, 198, 82, 0.18) !important;
    background: rgba(25, 26, 31, 0.94) !important;
    color: #d9d3c9 !important;
}

html.dark #header-box .search-box span,
html.tw-dark #header-box .search-box span {
    color: #d9d3c9 !important;
}

html.dark #header-box .search-box span:last-child,
html.tw-dark #header-box .search-box span:last-child {
    background: rgba(248, 181, 37, 0.16) !important;
    color: #ffc75b !important;
}

/* 2026 dark catalogue refresh: align the ArcheAge booklet with the Lost Ark database shell. */
:root {
    color-scheme: dark;
    --age-dark-bg: #101010;
    --age-dark-panel: #191a1f;
    --age-dark-panel-2: #202127;
    --age-dark-line: rgba(255, 255, 255, .09);
    --age-dark-line-strong: rgba(255, 255, 255, .15);
    --age-dark-text: #f2f2f2;
    --age-dark-muted: #9da1aa;
    --age-dark-gold: #f4b942;
    --age-dark-gold-soft: rgba(244, 185, 66, .13);
}

html.dark body,
html.tw-dark body {
    background: var(--age-dark-bg) !important;
    color: var(--age-dark-text) !important;
}

html.dark .side-panel,
html.tw-dark .side-panel,
html.dark .booklet-switcher-panel,
html.tw-dark .booklet-switcher-panel {
    border-color: var(--age-dark-line) !important;
    background: #15161a !important;
    color: var(--age-dark-text) !important;
}

html.dark .booklet-switcher-home-link,
html.tw-dark .booklet-switcher-home-link {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #7dd3fc !important;
    box-shadow: none !important;
}

html.dark .booklet-switcher-home-link:hover,
html.tw-dark .booklet-switcher-home-link:hover {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #bae6fd !important;
}

html.dark .booklet-switcher-home-link .booklet-switcher-text,
html.tw-dark .booklet-switcher-home-link .booklet-switcher-text {
    color: var(--age-dark-text) !important;
}

html.dark .booklet-switcher-home-icon,
html.tw-dark .booklet-switcher-home-icon {
    background: transparent !important;
    color: #38bdf8 !important;
    box-shadow: none !important;
}

html.dark .booklet-switcher-collapse-btn,
html.tw-dark .booklet-switcher-collapse-btn {
    border-color: var(--age-dark-line) !important;
    background: #181818 !important;
    color: #7dd3fc !important;
    box-shadow: 0 0 0 4px #111 !important;
}

html.dark .booklet-switcher-collapse-btn:hover,
html.tw-dark .booklet-switcher-collapse-btn:hover {
    border-color: #38bdf8 !important;
    background: #38bdf8 !important;
    color: #082f49 !important;
    box-shadow: 0 0 0 4px #111 !important;
}

html.dark .booklet-switcher-link:hover,
html.tw-dark .booklet-switcher-link:hover,
html.dark .side-link:hover,
html.tw-dark .side-link:hover,
html.dark .side-child-link:hover,
html.tw-dark .side-child-link:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #93c5fd !important;
}

html.dark .side-link.is-active,
html.tw-dark .side-link.is-active {
    background: rgba(59, 130, 246, 0.14) !important;
    color: #93c5fd !important;
}

html.dark .side-link.is-active::before,
html.tw-dark .side-link.is-active::before {
    background: #60a5fa;
}

.age-item-catalog {
    padding-top: 20px;
    padding-bottom: 36px;
}

.age-item-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--age-dark-line);
    border-radius: 7px;
    background: #151619;
    padding: 16px 18px;
}

.age-item-hero-main,
.age-item-title-line,
.age-item-mobile-filter-row,
.age-item-results-toolbar,
.age-item-level-filter,
.age-item-result-title-row,
.age-item-result-meta,
.age-item-result-id {
    display: flex;
    align-items: center;
}

.age-item-hero-main { min-width: 0; gap: 13px; }
.age-item-hero-icon {
    display: grid;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    place-items: center;
    border-radius: 6px;
    background: rgba(74, 153, 255, .14);
    color: #77b8ff;
    font-size: 24px;
}
.age-item-title-line { flex-wrap: wrap; gap: 9px; }
.age-item-title-line h1 { margin: 0; color: var(--age-dark-text); font-size: 24px; font-weight: 800; line-height: 1.2; }
.age-item-hero p { margin: 6px 0 0; color: var(--age-dark-muted); font-size: 13px; }
.age-item-region { display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; background: rgba(52, 211, 153, .13); padding: 3px 7px; color: #70e5b8; font-size: 11px; font-weight: 800; }

.age-item-control-button,
.age-item-submit {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--age-dark-line-strong);
    border-radius: 5px;
    background: var(--age-dark-panel-2);
    padding: 0 12px;
    color: #d7d9df;
    font-size: 12px;
    font-weight: 700;
}
.age-item-control-button:hover { border-color: rgba(244, 185, 66, .42); color: #ffd57d; }

.age-item-layout { display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: 12px; align-items: start; }
.age-item-category-panel,
.age-item-results-panel { border: 1px solid var(--age-dark-line); border-radius: 7px; background: var(--age-dark-panel); }
.age-item-category-panel { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding: 12px; scrollbar-color: #55575f transparent; scrollbar-width: thin; }
.age-item-category-head { display: flex; align-items: center; justify-content: space-between; padding: 1px 4px 8px; }
.age-item-category-head div { display: grid; gap: 2px; }
.age-item-category-head small { color: #777c87; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.age-item-category-head strong { color: var(--age-dark-text); font-size: 13px; }
.age-item-category-head button { display: none; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 5px; color: var(--age-dark-muted); }
.age-item-tree-section { padding-top: 9px; }
.age-item-tree-section-title { padding: 6px 8px 4px; color: #777c87; font-size: 10px; font-weight: 800; }
.age-item-tree-group > summary { list-style: none; }
.age-item-tree-group > summary::-webkit-details-marker { display: none; }
.age-item-tree-row { display: grid; min-height: 34px; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px; border-radius: 5px; padding: 0 8px; color: var(--age-dark-muted); font-size: 11px; }
.age-item-tree-row > span:first-child { color: #868b95; font-size: 15px; }
.age-item-tree-row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.age-item-tree-row small { color: #737987; font-size: 9px; font-variant-numeric: tabular-nums; }
.age-item-tree-row:hover,
.age-item-tree-row.is-active { background: rgba(70, 144, 229, .14); color: #84bfff; }
.age-item-tree-row.is-active { font-weight: 800; }
.age-item-tree-root { color: #d8dae0; font-weight: 700; }
.age-item-tree-root i { grid-column: 4; font-size: 12px; transition: transform .15s; }
.age-item-tree-group[open] > summary i { transform: rotate(90deg); }
.age-item-tree-children { display: grid; gap: 1px; padding-left: 13px; }

.age-item-filter-panel { display: grid; gap: 10px; border-bottom: 1px solid var(--age-dark-line); padding: 12px; }
.age-item-mobile-filter-row { display: none; justify-content: space-between; gap: 10px; color: var(--age-dark-muted); font-size: 11px; }
.age-item-filter-grid { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(125px, auto)) 105px auto; gap: 8px; }
.age-quest-filter-grid { grid-template-columns: minmax(220px, 1fr) minmax(150px, .85fr) repeat(2, minmax(112px, auto)) 96px auto; }
.age-item-filter-grid select,
.age-item-search-control,
.age-item-level-filter input {
    height: 36px;
    border: 1px solid var(--age-dark-line-strong);
    border-radius: 5px;
    background: #15161b;
    color: #e6e7eb;
    font-size: 12px;
    outline: 0;
}
.age-item-filter-grid select { padding: 0 30px 0 10px; }
.age-item-search-control { display: flex; align-items: center; gap: 7px; padding: 0 10px; }
.age-item-search-control > span { color: #737987; }
.age-item-search-control input { min-width: 0; flex: 1; border: 0; background: transparent; outline: 0; }
.age-item-search-control a { color: #777c87; }
.age-item-filter-grid select:focus,
.age-item-search-control:focus-within,
.age-item-level-filter input:focus { border-color: rgba(119, 184, 255, .65); box-shadow: 0 0 0 2px rgba(74, 153, 255, .1); }
.age-item-submit { border-color: #d89c28; background: #d89c28; color: #16130d; }
.age-item-submit:hover { background: #efb43d; }
.age-item-level-filter { flex-wrap: wrap; gap: 7px; color: #777c87; font-size: 11px; }
.age-item-level-filter > span { margin-right: 3px; color: #d7d9df; font-weight: 700; }
.age-item-level-filter input { width: 112px; padding: 0 9px; }
.age-item-level-filter label { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; border-radius: 4px; background: #15161b; padding: 0 8px; color: #b9bdc5; }
.age-item-level-filter label input { width: auto; height: auto; accent-color: #d89c28; }

.age-item-results-toolbar { min-height: 47px; justify-content: space-between; gap: 12px; padding: 8px 12px; color: var(--age-dark-muted); font-size: 12px; }
.age-item-results-toolbar strong { color: var(--age-dark-text); font-size: 14px; }
.age-item-view-switch { display: flex; overflow: hidden; border: 1px solid var(--age-dark-line-strong); border-radius: 5px; }
.age-item-view-switch button,
.age-item-view-switch a { display: grid; width: 34px; height: 30px; place-items: center; border-right: 1px solid var(--age-dark-line); color: #878c96; }
.age-item-view-switch button:last-child,
.age-item-view-switch a:last-child { border-right: 0; }
.age-item-view-switch button.is-active,
.age-item-view-switch a.is-active { background: rgba(70, 144, 229, .15); color: #84bfff; }
.age-item-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
.age-item-result-card { display: flex; min-width: 0; min-height: 112px; gap: 10px; border: 1px solid var(--age-dark-line); border-radius: 6px; background: #18191e; padding: 10px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.age-item-result-card:hover { border-color: rgba(119, 184, 255, .52); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); transform: translateY(-1px); }
.age-item-result-icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; overflow: hidden; border: 1px solid #464954; border-radius: 5px; background: linear-gradient(145deg, #252731, #17191f); color: #d9ad58; font-size: 22px; }
.age-item-result-icon img { width: 100%; height: 100%; object-fit: contain; }
.age-quest-result-card .age-item-result-icon {
    border-color: rgba(77, 145, 218, .3);
    background: linear-gradient(145deg, rgba(43, 91, 143, .38), #17191f);
    color: #78b8f6;
}
.age-quest-result-card .age-item-grade-label { color: #78aee5; }
.age-item-result-body { min-width: 0; flex: 1; }
.age-item-result-title-row { min-width: 0; align-items: flex-start; gap: 6px; }
.age-item-result-title { min-width: 0; flex: 1; overflow: hidden; color: #e6e7eb; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.age-item-result-title:hover { color: #84bfff; }
.age-item-grade-label { flex: 0 0 auto; color: #858b96; font-size: 9px; }
.age-item-result-body > p { display: -webkit-box; overflow: hidden; margin: 4px 0; color: #898e98; font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.age-item-result-body > .age-item-ko { color: #777d88; }
.age-item-result-meta { min-width: 0; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.age-item-result-meta span { max-width: 100%; overflow: hidden; border-radius: 3px; background: #23252b; padding: 2px 5px; color: #a2a6ae; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.age-item-result-id { gap: 7px; margin-top: 6px; color: #717782; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.age-item-result-id span { border-left: 1px solid #3a3d45; padding-left: 7px; }
.age-item-result-card .age-item-result-title { color: var(--item-grade-color, #e6e7eb); }
.age-item-result-card .age-item-result-title:hover { color: #84bfff; }

[data-age-item-catalog][data-view="list"] .age-item-result-grid { grid-template-columns: 1fr; }
[data-age-item-catalog][data-view="list"] .age-item-result-card { min-height: 76px; align-items: center; }
[data-age-item-catalog][data-view="list"] .age-item-result-body { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(220px, 1fr) 140px; align-items: center; gap: 12px; }
[data-age-item-catalog][data-view="list"] .age-item-result-body > p { display: none; }
[data-age-item-catalog][data-view="list"] .age-item-result-meta,
[data-age-item-catalog][data-view="list"] .age-item-result-id { margin-top: 0; }

.age-item-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; border-top: 1px solid var(--age-dark-line); padding: 14px 12px; }
.age-item-pagination a,
.age-item-pagination span { display: inline-flex; min-width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--age-dark-line); border-radius: 5px; padding: 0 8px; color: #9ba0aa; font-size: 11px; }
.age-item-pagination a:hover,
.age-item-pagination a.is-active { border-color: rgba(74, 153, 255, .45); background: rgba(74, 153, 255, .14); color: #84bfff; }
.age-item-pagination a.is-active { font-weight: 800; }
.age-item-pagination .is-disabled { pointer-events: none; opacity: .4; }
.age-item-empty { display: grid; min-height: 340px; place-items: center; align-content: center; gap: 7px; margin: 0 12px 12px; border: 1px dashed var(--age-dark-line-strong); border-radius: 6px; color: var(--age-dark-muted); text-align: center; }
.age-item-empty > span { color: #77b8ff; font-size: 34px; }
.age-item-empty strong { color: var(--age-dark-text); }
.age-item-empty p { margin: 0; font-size: 12px; }
.age-item-filter-overlay { display: none; }

@media (max-width: 1180px) {
    .age-item-layout { grid-template-columns: 1fr; }
    .age-item-category-panel { position: fixed; top: 0; left: 0; z-index: 1190; width: min(330px, 86vw); height: 100%; max-height: none; border-radius: 0; transform: translateX(-100%); transition: transform .2s; }
    .age-item-category-panel.is-open { transform: translateX(0); }
    .age-item-category-head button { display: grid; }
    .age-item-filter-overlay { position: fixed; inset: 0; z-index: 1180; display: block; pointer-events: none; background: rgba(0, 0, 0, .64); opacity: 0; transition: opacity .2s; }
    .age-item-filter-overlay.is-open { pointer-events: auto; opacity: 1; }
    body.age-item-filter-open { overflow: hidden; }
    .age-item-mobile-filter-row { display: flex; }
}

@media (max-width: 900px) {
    .age-item-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .age-item-filter-grid { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(115px, auto)); }
    .age-item-filter-grid select[name="page_size"], .age-item-submit { grid-row: 2; }
    .age-quest-filter-grid { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(115px, auto)); }
}

@media (max-width: 640px) {
    .age-item-catalog { width: min(100vw - 1rem, 1180px); padding-top: 10px; }
    .age-item-hero { align-items: flex-start; padding: 13px; }
    .age-item-hero .age-item-control-button { font-size: 0; padding: 0 10px; }
    .age-item-hero .age-item-control-button span { font-size: 16px; }
    .age-item-title-line h1 { font-size: 21px; }
    .age-item-hero p { font-size: 11px; line-height: 1.5; }
    .age-item-filter-grid { grid-template-columns: 1fr 1fr; }
    .age-item-search-control { grid-column: 1 / -1; }
    .age-item-filter-grid select[name="page_size"], .age-item-submit { grid-row: auto; }
    .age-item-result-grid { grid-template-columns: 1fr; padding: 0 8px 8px; }
    .age-item-filter-panel { padding: 9px; }
    .age-item-level-filter > span { width: 100%; }
    .age-item-level-filter input { min-width: 0; flex: 1 1 100px; }
    .age-item-level-filter i { display: none; }
    [data-age-item-catalog][data-view="list"] .age-item-result-body { display: block; }
    [data-age-item-catalog][data-view="list"] .age-item-result-meta,
    [data-age-item-catalog][data-view="list"] .age-item-result-id { margin-top: 5px; }
    .age-item-page-nav { font-size: 0 !important; }
    .age-item-page-nav:first-child::before { content: '‹'; font-size: 18px; }
    .age-item-page-nav:last-child::before { content: '›'; font-size: 18px; }
}