/* ── Browser mock window ─────────────────────────────────────────────────── */
.browser-mock {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--bulma-border);
}

.browser-mock-bar {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--bulma-scheme-main-bis);
    border-bottom: 1px solid var(--bulma-border);
}

.browser-mock-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.browser-mock-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: filter 0.15s, transform 0.15s;
}

.browser-mock-dot:hover {
    filter: brightness(1.2);
    transform: scale(1.15);
}

.browser-mock-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.15s;
}

.browser-mock-dot:hover::after {
    opacity: 1;
}

.browser-mock-dot--red    { background: #ff5f57; }
.browser-mock-dot--yellow { background: #ffbd2e; }
.browser-mock-dot--green  { background: #28c840; }

.browser-mock-dot--red::after    { content: '✕'; }
.browser-mock-dot--yellow::after { content: '−'; }
.browser-mock-dot--green::after  { content: '+'; }

.browser-mock-url {
    flex: 1;
    background: var(--bulma-scheme-main);
    border: 1px solid var(--bulma-border);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--bulma-text-weak);
    margin: 0 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    cursor: text;
    user-select: text;
}

/* ── Keyboard key ────────────────────────────────────────────────────────── */
kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    font-size: 11px;
    font-family: inherit;
    line-height: 1;
    color: var(--bulma-text-weak);
    background: transparent;
    border: 1px solid var(--bulma-border);
    border-radius: 5px;
    box-shadow: 0 1px 0 var(--bulma-border);
}

/* ── Hero label ──────────────────────────────────────────────────────────── */
.hero-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--bulma-primary);
    margin-bottom: 1rem;
}

.hero-label::before,
.hero-label::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--bulma-primary);
    opacity: .45;
}

/* ── Step number ─────────────────────────────────────────────────────────── */
.step-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--bulma-primary);
    opacity: .2;
    line-height: 1;
    margin-bottom: .75rem;
    user-select: none;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */
/* Base: muted pill. Add .badge-outlined + a color class for a bordered variant. */
.badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--bulma-border) 60%, transparent);
    color: var(--bulma-text-weak);
    white-space: nowrap;
}

.badge-outlined {
    border-color: currentColor;
}

.badge.is-primary { background: color-mix(in srgb, var(--bulma-primary) 12%, transparent); color: var(--bulma-primary); }
.badge.is-info    { background: color-mix(in srgb, var(--bulma-info)    12%, transparent); color: var(--bulma-info); }
.badge.is-warning { background: color-mix(in srgb, var(--bulma-warning) 12%, transparent); color: var(--bulma-warning); }
.badge.is-danger  { background: color-mix(in srgb, var(--bulma-danger)  12%, transparent); color: var(--bulma-danger); }

/* ── Rank colors (use with .badge.badge-outlined) ────────────────────────── */
.rank-iron        { color: #8e8e8e; }
.rank-bronze      { color: #a3714a; }
.rank-silver      { color: #8fa0a8; }
.rank-gold        { color: #c8963a; }
.rank-platinum    { color: #3fa9a0; }
.rank-emerald     { color: #2ecc71; }
.rank-diamond     { color: #5b9dd9; }
.rank-master      { color: #a855f7; }
.rank-grandmaster { color: #e84057; }
.rank-challenger  { color: #f4c874; }

/* ── Search input box ────────────────────────────────────────────────────── */
.search-box {
    display: flex;
    align-items: center;
    background: var(--bulma-scheme-main);
    border: 1px solid var(--bulma-border);
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s;
    overflow: visible;
    position: relative;
}

.search-box:focus-within {
    border-color: var(--bulma-link);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bulma-link) 18%, transparent);
}

.search-box-icon {
    flex-shrink: 0;
    font-size: 15px;
    width: 20px;
    text-align: center;
    margin-left: 16px;
    color: var(--bulma-text-weak);
    transition: color .2s;
    pointer-events: none;
}

.search-box:focus-within .search-box-icon {
    color: var(--bulma-link);
}

.search-box-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 16px;
    color: var(--bulma-text);
    padding: 16px 10px;
    min-width: 0;
    caret-color: var(--bulma-text);
}

.search-box-input::placeholder {
    color: var(--bulma-text-weak);
}

.search-box-btn {
    flex-shrink: 0;
    margin: 7px;
    border-radius: 9px !important;
    white-space: nowrap;
    min-width: 90px;
}

/* ── Autocomplete dropdown ───────────────────────────────────────────────── */
.autocomplete {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bulma-scheme-main);
    border: 1px solid var(--bulma-border);
    border-radius: 12px;
    overflow: hidden;
    z-index: 200;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .45);
    display: none;
    text-align: left;
}

.autocomplete.is-open {
    display: block;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background .1s;
    border-top: 1px solid color-mix(in srgb, var(--bulma-border) 50%, transparent);
}

.autocomplete-item:first-of-type {
    border-top: none;
}

.autocomplete-item:hover,
.autocomplete-item.is-focused {
    background: var(--bulma-scheme-main-bis);
}

.autocomplete-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bulma-scheme-main-bis);
    border: 1.5px solid var(--bulma-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--bulma-link);
    text-transform: uppercase;
    overflow: hidden;
}

.autocomplete-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.autocomplete-info {
    flex: 1;
    min-width: 0;
}

.autocomplete-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--bulma-text-strong);
    line-height: 1.2;
}

.autocomplete-name em {
    color: var(--bulma-primary);
    font-style: normal;
}

.autocomplete-tag {
    color: var(--bulma-text-weak);
    font-weight: 400;
}

.autocomplete-meta {
    font-size: 12px;
    color: var(--bulma-text-weak);
}

.autocomplete-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}