.acc-page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-6) var(--gutter) var(--space-7);
}

.acc-intro {
    max-width: 70ch;
    margin: 0 0 var(--space-5);
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.55;
}




.acc-msg {
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
}

.acc-msg--ok {
    border-color: rgba(62, 224, 164, 0.45);
    background: var(--success-dim);
    color: var(--success);
}

.acc-msg--err {
    border-color: rgba(255, 112, 112, 0.45);
    background: var(--danger-dim);
    color: var(--danger);
}

 

.acc-forms {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.acc-card {
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass);
    box-shadow: var(--edge), var(--shadow-sm);
}

.acc-card__title {
    margin: 0 0 var(--space-4);
    color: var(--text-strong);
    font-size: var(--text-md);
    font-weight: 650;
}

.acc-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.acc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 0;
}

.acc-field--wide { flex: 1 1 200px; }

.acc-field__label {
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-transform: lowercase;
}



.acc-input {
    width: 110px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

.acc-field--wide .acc-input { width: 100%; }

.acc-input--select { width: 130px; }



.acc-arrow {
    align-self: center;
    padding-top: 14px;
    color: var(--text-muted);
    font-size: var(--text-md);
}

.acc-submit {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
}

.acc-note {
    margin: var(--space-4) 0 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.55;
}

 



.acc-list-block { margin-top: var(--space-6); }

.acc-list-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.acc-list-head .acc-card__title { margin: 0; }

.acc-counter {
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--glass-strong);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.acc-search {
    width: auto;
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 320px;
    margin-left: auto;
}

.acc-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.acc-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass);
    transition: border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.acc-item:hover {
    border-color: var(--glass-border-strong);
    background: var(--glass-strong);
}

.acc-item[hidden] { display: none; }



.acc-item__id {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 3px var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-sunken);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.acc-item__id:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.acc-item__primary {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.acc-plat { font-weight: 650; }
.acc-plat--twitch { color: var(--twitch-soft); }
.acc-plat--kick { color: var(--kick-soft); }
.acc-plat--none { color: var(--text-muted); }

.acc-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
}

.acc-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px var(--space-3) 3px 3px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-sunken);
    color: var(--text-primary);
    font-size: var(--text-xs);
}

.acc-tag--twitch { border-color: rgba(145, 70, 255, 0.45); }
.acc-tag--kick { border-color: rgba(83, 252, 24, 0.35); }

.acc-tag--empty {
    padding: 3px var(--space-3);
    color: var(--text-muted);
    font-style: italic;
}

button.acc-tag:hover {
    border-color: var(--accent);
    background: var(--glass-hover);
}

.acc-tag__ava {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--glass);
}



.acc-tag:not(:has(.acc-tag__ava)) { padding-left: var(--space-3); }

.acc-tag__plat { color: var(--text-muted); }
.acc-tag__name { font-weight: 600; }

.acc-empty {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    text-align: center;
}

.acc-empty[hidden] { display: none; }




@media (max-width: 700px) {
    .acc-page { padding: var(--space-4) var(--gutter) var(--space-6); }

    .acc-card { padding: var(--space-4); }

    

    .acc-card__body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: var(--space-3);
    }

    .acc-field,
    .acc-field--wide { min-width: 0; }

    .acc-input,
    .acc-input--select,
    .acc-field--wide .acc-input { width: 100%; }

    

    .acc-arrow { display: none; }

    .acc-submit { grid-column: 1 / -1; width: 100%; }

    .acc-search {
        max-width: none;
        margin-left: 0;
        flex-basis: 100%;
    }

    .acc-item {
        align-items: flex-start;
        gap: var(--space-2);
    }

    .acc-item__tags {
        margin-left: 0;
        flex-basis: 100%;
    }

    .acc-tag { max-width: 100%; }

    .acc-tag__name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}







button.acc-item {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.acc-seen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.acc-seen.is-online { color: var(--success); }



.acc-dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--success);
}

.acc-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--success);
    animation: acc-pulse 2s var(--ease) infinite;
}

@keyframes acc-pulse {
    0% { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(3.2); opacity: 0; }
}



@media (prefers-reduced-motion: reduce) {
    .acc-dot::after { animation: none; }
}






.acc-card-dialog {
    width: min(680px, calc(100vw - 2 * var(--gutter)));
    max-height: 82vh;
    padding: 0;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-xl);
    

    background: rgba(23, 26, 38, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    color: var(--text-primary);
    overflow: hidden;
}

.acc-card-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.acc-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--glass-border);
}

.acc-card-name {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-card-close {
    margin-left: auto;
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: var(--text-lg);
    line-height: 1;
    cursor: pointer;
}

.acc-card-close:hover { color: var(--text-strong); }



.acc-card-body {
    max-height: calc(82vh - 60px);
    padding: var(--space-4) var(--space-5) var(--space-5);
    overflow-y: auto;
}

.acc-card-label {
    margin: var(--space-5) 0 var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.acc-card-body > .acc-card-label:first-of-type { margin-top: var(--space-4); }



.acc-card-seen {
    font-size: var(--text-sm);
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 2px;
}



.acc-geonote {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.acc-card-dim { color: var(--text-muted); }



.acc-card-ip {
    color: var(--text-secondary);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.acc-card-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.acc-card-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass);
    font-size: var(--text-sm);
}

.acc-card-nick {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-card-spacer { flex: 1 1 auto; }

.acc-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.acc-card-note {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.acc-state {
    flex: 0 0 auto;
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.acc-state.is-on { background: var(--success-dim); color: var(--success); }
.acc-state.is-off { background: var(--glass-sunken); color: var(--text-muted); }

.acc-mini {
    flex: 0 0 auto;
    padding: 3px var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-sunken);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}

.acc-mini:hover { border-color: var(--accent); color: var(--accent); }

.acc-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--glass-border);
}




.acc-log {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-sunken);
}

.acc-log__row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: var(--space-2) var(--space-3);
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.acc-log__row:last-child { border-bottom: 0; }

.acc-log__time {
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.acc-log__src {
    

    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.acc-log__text { color: var(--text-secondary); }




.acc-geo {
    margin-left: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.acc-geo__mark {
    margin-right: 4px;
    font-size: var(--text-xs);
    cursor: help;
}



.acc-geo__flag {
    width: 1.15em;
    height: 1.15em;
    border-radius: 50%;
    vertical-align: -0.2em;
    flex: none;
    display: inline-block;
}




@media (max-width: 700px) {
    .acc-card-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .acc-card-body { max-height: calc(100dvh - 60px); }

    

    .acc-log__row {
        grid-template-columns: auto 1fr;
        gap: 2px var(--space-2);
    }

    .acc-log__text { grid-column: 1 / -1; }

    

    .acc-log {
        max-height: 45dvh;
        overscroll-behavior: contain;
    }

     
    .acc-seen { order: 1; }
    .acc-item__tags { order: 2; }
}









@media (max-width: 899.98px) {
    body#accounts-page .header #statslink,
    body#accounts-page .header #docslink { order: 10; }
}

body#accounts-page .header {
    background: rgba(15, 17, 24, 0.72);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}



.acc-card__body { align-items: end; }



.acc-field { margin-bottom: 0; }



.acc-field .acc-input,
.acc-field .acc-input--select { display: block; }



.acc-submit {
    height: 43px;
    line-height: 1;
}



.acc-item__id {
    min-width: 0;
    padding: 3px var(--space-4);
}

.acc-sort {
    width: auto;
    min-width: 150px;
    flex: 0 0 auto;
    margin-left: auto;
}



.acc-list-head .acc-search { margin-left: 0; }

 







html.acc-modal-open {
    overflow: hidden;
}




.acc-log__src--kick { color: var(--kick); }
.acc-log__src--twitch { color: var(--twitch-soft); }
.acc-log__src--none { color: var(--text-muted); }

@media (max-width: 700px) {
    .acc-sort {
        margin-left: 0;
        flex: 1 1 140px;
        min-width: 0;
    }
}








.acc-input,
.acc-input--select,
.acc-submit {
    height: 43px;
    box-sizing: border-box;
}



.acc-input--select {
    color-scheme: dark;
    padding-block: 0;
}



.acc-input--select option {
    background: #171a26;
    color: var(--text-primary);
}



.acc-search { height: 43px; }










.acc-suggest {
    position: absolute;
    z-index: 60;
    max-height: 320px;
    padding: var(--space-2);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-md);
    background: rgba(23, 26, 38, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

.acc-suggest[hidden] { display: none; }



.acc-suggest__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}



.acc-suggest__row:hover,
.acc-suggest__row.is-active {
    background: var(--glass-hover, rgba(255, 255, 255, 0.06));
}

.acc-suggest__ava {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--glass-strong);
}

.acc-suggest__nick {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.acc-suggest__id {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.acc-suggest__empty {
    padding: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

@media (max-width: 700px) {
    

    .acc-suggest { max-height: 220px; }
}




.acc-tabs {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    max-width: 1100px;
    margin: var(--space-6) auto 0;
}

.acc-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-sunken);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.acc-tab:hover { color: var(--text-primary); }

.acc-tab.is-active {
    border-color: var(--accent);
    color: var(--text-primary);
}

.acc-tab__num {
    font-size: var(--text-xs);
    color: var(--text-muted);
}



.acc-pane[hidden] { display: none; }

.acc-app {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.acc-app[hidden] { display: none; }

.acc-app__ava {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}



.acc-app__ava--none {
    display: inline-block;
    background: var(--glass-sunken);
    border: 1px solid var(--glass-border);
}

.acc-app__nick {
    font-weight: 600;
    

    color: var(--text-primary);
}

.acc-app__id {
    padding: 0 var(--space-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}

.acc-app__id:hover { color: var(--text-primary); }

 
.acc-app__id--none {
    cursor: default;
    opacity: 0.7;
}

.acc-app__num {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.acc-app__when,
.acc-app__installs {
    font-size: var(--text-xs);
    color: var(--text-muted);
}



.acc-guest {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.acc-guest[hidden] { display: none; }



.acc-guest.is-bad {
    border-color: var(--warning);
    background: var(--glass-sunken);
}

.acc-guest__ip {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    color: var(--text-strong);
}

.acc-guest__kind,
.acc-guest__geo,
.acc-guest__num,
.acc-guest__miss,
.acc-guest__when {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.acc-guest__miss { color: var(--warning); }

.acc-guest__when { margin-left: auto; }

.acc-guest__why {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.acc-guest__tag {
    padding: 1px 6px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--warning);
}



.acc-guest-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.acc-guest-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}

.acc-guest-kind:hover { color: var(--text-strong); }

.acc-guest-kind.is-active {
    border-color: var(--accent);
    color: var(--text-strong);
}



.acc-guest-kind.is-empty { opacity: 0.5; }

.acc-guest-kind__num {
    padding: 0 5px;
    border-radius: var(--radius-sm, 8px);
    background: var(--glass-sunken);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.acc-guest-kind__num.is-bad { color: var(--warning); }



.acc-guest__geo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}



.acc-guest.is-blocked {
    border-color: var(--glass-border);
    opacity: 0.6;
}

.acc-guest__closed {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.acc-guest__block {
    padding: 2px 8px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass);
    color: var(--warning);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}

.acc-guest__block:hover { color: var(--text-strong); }

.acc-guest__open {
    padding: 2px 8px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}

.acc-guest__open:hover { color: var(--text-strong); }



.acc-guest__log {
    flex-basis: 100%;
    max-height: 320px;
    overflow-y: auto;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--glass-sunken);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.acc-guest__line {
    display: flex;
    gap: var(--space-2);
    padding: 1px 0;
}

.acc-guest__time { flex: none; color: var(--text-muted); }



.acc-guest__path {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    color: var(--text-secondary);
}

.acc-guest__code { flex: none; color: var(--warning); }

.acc-guest-only {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
}

.acc-guest-only input { width: auto; margin: 0; }

.acc-guest-reload { flex: none; }

@media (max-width: 700px) {
    .acc-tabs { padding-inline: var(--space-4); }
    

    .acc-guest__when {
        margin-left: 0;
        flex-basis: 100%;
    }
    

    .acc-app__num {
        margin-left: 0;
        flex-basis: 100%;
    }
}