:root {
    --bg:#0b0d0f;
    --panel:#15191d;
    --panel2:#1a1f24;
    --border:#252b31;
    --text:#f0f2f4;
    --muted:#8f989f;
    --accent:#d7ff3f;
    --max:1180px;
    --r:14px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    overflow-y:scroll;
    scrollbar-gutter:stable
}
body {
    margin:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:radial-gradient(circle at 70% 0%,rgba(215,255,63,.08),transparent 35%),var(--bg);
    color:var(--text);
    font:14px/1.5 Arial,Helvetica,sans-serif
}
a {
    text-decoration:none;
    color:inherit
}
button,input,select {
    font:inherit
}
button {
    cursor:pointer
}
.site-header {
    flex:0 0 auto;
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(11,13,15,.92);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(14px)
}
.header-inner,.page {
    width:min(calc(100% - 32px),var(--max));
    margin:auto
}
.header-inner {
    min-height:72px;
    display:flex;
    align-items:center;
    gap:28px
}
.brand {
    display:flex;
    align-items:center;
    gap:10px
}
.brand-logo {
    width:42px;
    height:42px;
    object-fit:contain
}
.brand span {
    display:flex;
    flex-direction:column;
    line-height:1
}
.brand b {
    font-size:15px;
    letter-spacing:.08em
}
.brand small {
    margin-top:5px;
    color:var(--muted);
    font-size:9px;
    letter-spacing:.18em
}
.main-nav {
    display:flex;
    gap:6px;
    flex:1
}
.nav-link {
    display:inline-flex;
    gap:5px;
    padding:9px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    font-size:14px
}
.nav-link:hover,.nav-link.active {
    background:var(--panel);
    color:var(--text)
}
.nav-dropdown {
    position:relative
}
.dropdown-menu {
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:230px;
    padding:7px;
    background:#111417;
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 16px 40px #0008;
    opacity:0;
    visibility:hidden;
    transform:translateY(-5px);
    transition:.15s
}
.nav-dropdown:hover .dropdown-menu {
    opacity:1;
    visibility:visible;
    transform:none
}
.dropdown-menu a {
    display:flex;
    justify-content:space-between;
    padding:9px 10px;
    border-radius:7px;
    color:var(--muted);
    font-size:13px
}
.dropdown-menu a:hover {
    background:var(--panel2);
    color:var(--text)
}
.dropdown-menu small {
    color:var(--accent)
}
.header-actions {
    display:flex;
    gap:8px
}
.icon-button {
    width:40px;
    height:40px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--panel);
    color:var(--muted)
}
.account-button {
    padding:9px 13px;
    border:1px solid var(--accent);
    border-radius:9px;
    background:transparent;
    color:var(--accent);
    font-weight:700;
    font-size:13px
}
.account-button:hover {
    background:var(--accent);
    color:#101308
}
main {
    flex:1 0 auto;
    position:relative;
    z-index:1
}
.hero {
    min-height:520px;
    padding:92px 0 75px;
    display:grid;
    grid-template-columns:1fr 330px;
    align-items:center;
    gap:70px
}
.eyebrow,.section-label,.tool-category {
    color:var(--accent);
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em
}
.hero h1 {
    margin:14px 0 18px;
    font-size:clamp(38px,5vw,64px);
    line-height:1.02;
    letter-spacing:-.045em
}
.hero p {
    max-width:650px;
    margin:0;
    color:var(--muted);
    font-size:17px
}
.hero-actions {
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    gap:10px
}
.primary-button,.secondary-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border-radius:9px;
    font-weight:700;
    font-size:13px
}
.primary-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--accent);
    background:var(--accent);
    color:#111509
}
.primary-button:hover {
    background:#e1ff66
}
.secondary-button {
    border:1px solid var(--border);
    background:var(--panel);
    color:var(--text)
}
.secondary-button:hover {
    background:var(--panel2)
}
.primary-button:disabled,.secondary-button:disabled {
    opacity:.45;
    cursor:not-allowed
}
.hero-card {
    min-height:210px;
    padding:25px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    border:1px solid var(--border);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(215,255,63,.08),transparent 60%),var(--panel);
    box-shadow:0 20px 60px #0004
}
.hero-card i {
    width:9px;
    height:9px;
    margin-bottom:auto;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 15px #d7ff3f99
}
.hero-card span {
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.15em
}
.hero-card strong {
    margin-top:7px;
    font-size:24px
}
.hero-card small {
    margin-top:5px;
    color:var(--muted)
}
.section {
    padding:55px 0
}
.section-heading {
    margin-bottom:22px;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px
}
.section-heading h2,.info-card h2 {
    margin:7px 0 0;
    font-size:28px;
    letter-spacing:-.025em
}
.section-heading p {
    max-width:420px;
    margin:0;
    color:var(--muted);
    font-size:13px
}
.tool-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
}
.tool-card {
    min-height:190px;
    padding:22px;
    position:relative;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:var(--r);
    background:var(--panel);
    transition:.15s
}
.tool-card:hover {
    transform:translateY(-2px);
    border-color:#3a424a;
    background:var(--panel2)
}
.tool-card.featured {
    border-color:#d7ff3f52;
    background:linear-gradient(135deg,rgba(215,255,63,.09),transparent 55%),var(--panel)
}
.tool-icon {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--accent);
    font-size:20px
}
.tool-card>div:nth-child(2) {
    margin-top:auto
}
.tool-category {
    display:block;
    margin-bottom:4px;
    font-size:9px
}
.tool-card h3 {
    margin:0;
    font-size:20px
}
.tool-card p {
    max-width:450px;
    margin:6px 0 0;
    color:var(--muted);
    font-size:13px
}
.tool-arrow {
    position:absolute;
    right:20px;
    bottom:20px;
    color:var(--muted);
    font-size:18px
}
.tool-card em {
    display:inline-block;
    margin-top:12px;
    padding:4px 7px;
    border-radius:5px;
    background:#20252a;
    color:var(--muted);
    font-size:9px;
    font-style:normal;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase
}
.tool-card em.oauth {
    background:#d7ff3f1a;
    color:var(--accent)
}
.two-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.info-card {
    padding:28px;
    border:1px solid var(--border);
    border-radius:var(--r);
    background:var(--panel)
}
.info-card p {
    max-width:600px;
    color:var(--muted);
    font-size:14px
}
#siteFooter {
    width:100%;
    margin-top:auto;
    flex:0 0 auto
}
.site-footer {
    width:100%;
    margin:0;
    padding:25px 0 35px;
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:11px
}
.site-footer .footer-inner {
    width:min(calc(100% - 32px),var(--max));
    margin:auto
}
.modal-backdrop {
    position:fixed;
    inset:0;
    z-index:100;
    display:grid;
    place-items:center;
    padding:20px;
    background:#000b;
    backdrop-filter:blur(5px)
}
.modal {
    width:min(100%,480px);
    position:relative;
    padding:28px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#111417;
    box-shadow:0 30px 90px #0008
}
.modal h2 {
    margin:8px 0;
    font-size:25px
}
.modal p {
    color:var(--muted);
    font-size:14px
}
.modal-close {
    position:absolute;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    font-size:22px
}
.modal-close:hover {
    background:var(--panel);
    color:var(--text)
}
.modal label {
    margin-top:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.modal select {
    min-width:180px;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--panel);
    color:var(--text)
}
.note {
    margin-top:18px;
    padding:12px;
    border-radius:8px;
    background:#0c0f11;
    font-size:11px!important
}
.full {
    width:100%;
    margin-top:12px
}
.hidden {
    display:none!important
}
@media(max-width:800px) {
    .header-inner {
        min-height:64px;
        gap:10px
    }
    .main-nav {
        display:none
    }
    .account-button {
        padding:8px 10px
    }
    .hero {
        min-height:auto;
        padding:65px 0 40px;
        grid-template-columns:1fr;
        gap:35px
    }
    .hero h1 {
        font-size:42px
    }
    .section-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:8px
    }
    .tool-grid,.two-columns {
        grid-template-columns:1fr
    }
    .site-footer {
        flex-direction:column
    }
}
@media(max-width:480px) {
    .header-inner,.page,.site-footer {
        width:min(calc(100% - 20px),var(--max))
    }
    .hero h1 {
        font-size:34px
    }
    .header-actions {
        margin-left:auto
    }
    .account-button {
        max-width:120px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
}
/* ===== v2: common header, clan finder, animation ===== */
.site-header {
    flex:0 0 auto;
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(9,11,13,.92);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(14px)
}
.header-inner {
    width:min(calc(100% - 32px),var(--max));
    min-height:72px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:28px
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:12px
}
.brand-logo {
    width:42px;
    height:42px;
    object-fit:contain
}
.brand-text {
    display:flex;
    flex-direction:column;
    line-height:1
}
.brand-text strong {
    font-size:15px;
    letter-spacing:.08em
}
.brand-text small {
    margin-top:5px;
    color:var(--muted);
    font-size:9px;
    letter-spacing:.18em
}
.main-nav {
    display:flex;
    align-items:center;
    gap:6px;
    flex:1
}
.nav-link {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:9px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    font-size:14px
}
.nav-link:hover,.nav-link.active {
    background:var(--panel);
    color:var(--text)
}
.nav-dropdown {
    position:relative
}
.dropdown-menu {
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:240px;
    padding:7px;
    background:#111417;
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
    opacity:0;
    visibility:hidden;
    transform:translateY(-5px);
    transition:.15s
}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}
.dropdown-menu a {
    display:flex;
    justify-content:space-between;
    padding:9px 10px;
    border-radius:7px;
    color:var(--muted);
    font-size:13px
}
.dropdown-menu a:hover {
    background:var(--panel2);
    color:var(--text)
}
.dropdown-menu small {
    color:var(--accent)
}
.header-actions {
    display:flex;
    align-items:center;
    gap:8px
}
.icon-button {
    width:40px;
    height:40px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--panel);
    color:var(--muted)
}
.account-button {
    min-height:40px;
    padding:0 13px;
    border:1px solid var(--accent);
    border-radius:9px;
    background:transparent;
    color:var(--accent);
    font-size:13px;
    font-weight:700
}
.account-button:hover {
    background:var(--accent);
    color:#101308
}
.animated-background {
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    opacity:.32;
    z-index:0
}
.animated-background:after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center,transparent,rgba(9,11,13,.9))
}
.background-disabled {
    opacity:0
}
.floating-item {
    position:absolute;
    left:var(--item-x);
    bottom:-80px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border:1px solid rgba(215,255,63,.12);
    border-radius:8px;
    background:rgba(20,24,28,.45);
    color:rgba(240,244,245,.65);
    font-size:10px;
    white-space:nowrap;
    animation:floating-item var(--item-duration) linear infinite;
    animation-delay:var(--item-delay)
}
.floating-symbol {
    color:var(--accent);
    font-size:15px
}
@keyframes floating-item {
    0% {
        transform:translate3d(0,100px,0) rotate(-7deg);
        opacity:0
    }
    8% {
        opacity:.7
    }
    50% {
        transform:translate3d(45px,-55vh,0) rotate(8deg)
    }
    92% {
        opacity:.4
    }
    100% {
        transform:translate3d(-35px,-115vh,0) rotate(-5deg);
        opacity:0
    }
}
.tool-page {
    padding-top:65px;
    padding-bottom:70px
}
.tool-hero {
    margin-bottom:28px;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:25px
}
.tool-hero h1 {
    margin:8px 0 6px;
    font-size:clamp(32px,4vw,48px);
    line-height:1.05
}
.tool-hero p {
    margin:0;
    color:var(--muted)
}
.finder-panel,.finder-status,.result {
    border:1px solid var(--border);
    border-radius:var(--r);
    background:rgba(19,23,27,.9)
}
.finder-panel {
    padding:22px
}
.finder-panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px
}
.finder-panel-heading h2 {
    margin:6px 0 0;
    font-size:22px
}
.finder-api-badge {
    flex-shrink:0;
    padding:6px 10px;
    border:1px solid rgba(215,255,63,.25);
    border-radius:7px;
    color:var(--accent);
    font-size:10px;
    font-weight:700
}
.form-grid {
    display:grid;
    grid-template-columns:180px 1fr;
    gap:18px
}
.form-field {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:7px
}
.form-field label {
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase
}
.form-field input,.form-field select {
    width:100%;
    min-height:45px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:9px;
    outline:none;
    background:#0d1012;
    color:var(--text)
}
.form-field input:focus,.form-field select:focus {
    border-color:rgba(215,255,63,.55);
    box-shadow:0 0 0 3px rgba(215,255,63,.07)
}
.hint {
    color:var(--muted);
    font-size:11px
}
.finder-actions {
    margin-top:18px;
    display:flex;
    flex-wrap:wrap;
    gap:9px
}
.finder-status {
    margin-top:12px;
    padding:20px
}
#statusTitle {
    font-size:16px
}
#statusSubtitle {
    margin:5px 0 0;
    color:var(--muted);
    overflow-wrap:anywhere
}
.counter {
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px
}
.counter-box {
    padding:14px;
    border:1px solid var(--border);
    border-radius:9px;
    background:#0d1012
}
.counter-number {
    font-size:22px;
    font-weight:800
}
.counter-label {
    color:var(--muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em
}
.counter-found .counter-number {
    color:var(--accent)
}
.progress-background {
    height:6px;
    margin-top:18px;
    overflow:hidden;
    border-radius:99px;
    background:#0a0d0f
}
.progress-bar {
    width:0;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    transition:width .2s
}
.results-area {
    display:grid;
    gap:16px;
    margin-top:20px
}
.results-area:empty {
    margin-top:0
}
.result {
    min-width:0;
    padding:24px
}
.result h2 {
    margin:0 0 18px;
    font-size:clamp(20px,3vw,26px);
    line-height:1.3;
    overflow-wrap:anywhere
}
.result p {
    margin:0;
    color:var(--muted);
    overflow-wrap:anywhere
}
.field {
    padding:10px 0;
    display:grid;
    grid-template-columns:180px 1fr;
    gap:20px;
    border-top:1px solid rgba(255,255,255,.05)
}
.field-name {
    color:var(--muted);
    font-size:12px
}
.field-value {
    min-width:0;
    color:var(--text);
    font-size:13px;
    overflow-wrap:anywhere
}
.modal-backdrop {
    position:fixed;
    inset:0;
    z-index:100;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(5px)
}
.modal {
    width:min(100%,480px);
    position:relative;
    padding:28px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#111417;
    box-shadow:0 30px 90px rgba(0,0,0,.5)
}
.modal-close {
    position:absolute;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    font-size:22px
}
.setting-row {
    margin-top:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.setting-row select {
    min-width:180px;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--panel);
    color:var(--text)
}
.checkbox-row input {
    width:18px;
    height:18px;
    accent-color:var(--accent)
}
.settings-note {
    margin-top:18px;
    padding:12px;
    border-radius:8px;
    background:#0c0f11;
    color:var(--muted);
    font-size:11px
}
.full-button {
    width:100%;
    margin-top:12px
}
.field-value-description {
    white-space:pre-wrap
}
.maintenance-page,.error-page {
    min-height:100vh;
    padding:20px;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at center,rgba(215,255,63,.07),transparent 45%),var(--bg)
}
.maintenance-card,.error-card {
    width:min(100%,650px);
    padding:45px;
    text-align:center;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--panel);
    box-shadow:0 30px 100px rgba(0,0,0,.4)
}
.maintenance-icon {
    margin:20px 0 8px;
    font-size:54px
}
.maintenance-card h1,.error-card h1 {
    margin:0;
    font-size:clamp(30px,5vw,48px);
    line-height:1.05
}
.maintenance-card p,.error-card p {
    max-width:520px;
    margin:16px auto;
    color:var(--muted)
}
.error-code {
    display:block;
    margin:12px 0;
    color:var(--accent);
    font-size:clamp(64px,14vw,100px);
    line-height:1
}
@media(max-width:800px) {
    .header-inner {
        min-height:64px;
        gap:10px
    }
    .main-nav {
        display:none
    }
    .form-grid {
        grid-template-columns:1fr
    }
    .counter {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .field {
        grid-template-columns:1fr;
        gap:4px
    }
    .tool-hero {
        align-items:flex-start;
        flex-direction:column
    }
}
@media(max-width:480px) {
    .tool-page {
        padding-top:32px;
        padding-bottom:40px
    }
    .finder-panel,.finder-status,.result {
        padding:16px
    }
    .finder-panel-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:10px
    }
    .maintenance-card,.error-card {
        padding:24px
    }
    .header-inner {
        width:calc(100% - 20px)
    }
}
@media(prefers-reduced-motion:reduce) {
    .floating-item {
        display:none
    }
}
:root{--notification-accent:#d7ff3f}
.emission-status{font-size:10px;color:var(--muted,#a9b2b9);white-space:nowrap}.emission-status.active-emission{color:#ff901a}.message-shortcut{position:relative;text-decoration:none}.unread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;background:var(--notification-accent);color:#111;border-radius:10px;font:10px Arial;font-weight:700}.unread-badge[hidden]{display:none}.message-shortcut .unread-badge{position:absolute;right:-3px;top:-3px}.global-toasts{position:fixed;right:20px;bottom:20px;z-index:2000;display:grid;gap:10px;max-width:min(380px,calc(100vw - 28px))}.global-toast{display:flex;gap:15px;align-items:center;padding:16px;border-radius:12px;background:#1c2529;box-shadow:0 8px 35px #0008;border:1px solid #d7ff3f66;color:#f4f7ef;font-size:13px}.global-toast a{color:inherit}.global-toast button{margin-left:auto;flex-shrink:0;background:transparent;border:0;color:#cbd4d7;font-size:22px;cursor:pointer}@media(max-width:900px){.emission-status{max-width:150px;white-space:normal;text-align:right}}@media(max-width:540px){.emission-status{font-size:9px;max-width:98px}.header-actions{gap:6px}.global-toasts{right:14px;bottom:14px}}
.message-shortcut{display:inline-flex;align-items:center;justify-content:center}

/* Keep the status and action controls readable without squeezing the account. */
.header-inner{gap:20px}
.header-inner .brand{flex-shrink:0}
.header-actions{margin-left:auto;flex-shrink:0}
.header-actions .icon-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px}
.emission-status{display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;border:1px solid var(--border);border-radius:9px;background:var(--panel);font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums;max-width:none;white-space:nowrap;text-align:center}
.emission-status.active-emission{border-color:#ff901a66;background:#ff901a0c}
@media(max-width:1100px){
    .header-inner{flex-wrap:wrap;gap:8px 16px;padding:12px 0}
    .header-inner .main-nav{flex:1}
    .header-actions{flex:1;justify-content:flex-end}
}
@media(max-width:800px){
    .header-inner{display:grid;grid-template-columns:1fr}
    .header-inner .brand{grid-column:1;grid-row:1;justify-self:start;margin:0}
    .header-actions{display:contents}
    .header-actions .account-button{grid-column:1;grid-row:1;justify-self:end;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .header-actions .emission-status{grid-column:1;grid-row:2;justify-content:flex-start;min-width:0;min-height:36px;font-size:12px;margin-right:88px}
    .header-actions .message-shortcut{grid-column:1;grid-row:2;justify-self:end;margin-right:44px;width:36px;height:36px}
    .header-actions #settingsButton{grid-column:1;grid-row:2;justify-self:end;width:36px;height:36px}
}