:root {
    --paper: #f3f0e8;
    --surface: #fffdf8;
    --ink: #232323;
    --muted: #6e6a61;
    --line: #c9c2b5;
    --header: #434343;
    --header-2: #2f2f2f;
    --tank: #dd7e6b;
    --tank-head: #cc4125;
    --melee: #ffe599;
    --melee-head: #f6b26b;
    --range: #a4c2f4;
    --range-head: #76a5af;
    --support: #93c47d;
    --support-head: #34a853;
    --collector: #d9d2e9;
    --collector-head: #8e7cc3;
    --ok: #2f6b3e;
    --danger: #9e2f24;
    --link: #315f8d;
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body {
    margin: 0;
    font-family: Tahoma, Verdana, sans-serif;
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
}
a { color: var(--link); }
.site-header {
    background: var(--header-2);
    color: #fff;
    border-bottom: 4px solid #b69b57;
}
.site-header .inner, .page {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 18px;
}
.site-header .inner {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
}
.brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}
.brand strong {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 25px;
    letter-spacing: .2px;
}
.brand small { color: #d7d0c4; }
.topnav { display: flex; gap: 6px; flex-wrap: wrap; }
.topnav a {
    color: #efefef;
    text-decoration: none;
    padding: 8px 10px;
    border: 1px solid #666;
    border-radius: 3px;
}
.topnav a:hover, .topnav a.active { background: #555; }
.page { padding-top: 18px; padding-bottom: 40px; }
.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.btn, button, input[type=submit] {
    appearance: none;
    border: 1px solid #777064;
    background: #f8f5ee;
    color: #262626;
    padding: 8px 11px;
    border-radius: 3px;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover, button:hover, input[type=submit]:hover { background: #e9e3d8; }
.btn.primary, button.primary, input.primary { background: #373737; color: white; border-color: #262626; }
.btn.danger, button.danger { color: white; background: var(--danger); border-color: #7d2119; }
.btn.small, button.small { padding: 4px 7px; font-size: 12px; }
.raid-tabs { display: flex; gap: 0; margin-right: 12px; }
.raid-tabs a {
    background: #e2ddd2;
    border: 1px solid #a9a194;
    color: #333;
    text-decoration: none;
    padding: 8px 13px;
}
.raid-tabs a + a { border-left: 0; }
.raid-tabs a.active { background: #434343; color: white; }
.date-nav {
    display: grid;
    grid-template-columns: 44px minmax(240px, 1fr) 44px;
    align-items: center;
    border: 1px solid #8b8478;
    background: var(--surface);
    margin-bottom: 14px;
}
.date-nav a {
    text-align: center;
    font-size: 22px;
    color: #333;
    text-decoration: none;
    padding: 10px;
}
.date-nav .date-title { text-align: center; padding: 9px; }
.date-nav .date-title strong { font-family: Georgia, serif; font-size: 20px; }
.date-nav .date-title span { display: block; color: var(--muted); margin-top: 2px; font-size: 12px; }
.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}
.card {
    background: var(--surface);
    border: 1px solid #aaa397;
    border-radius: 3px;
}
.card h2, .card h3 {
    margin: 0;
    padding: 10px 12px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    border-bottom: 1px solid #aaa397;
    background: #e9e4d9;
}
.raid-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.raid-table th, .raid-table td {
    border-bottom: 1px solid #d4cec2;
    padding: 7px 9px;
    vertical-align: middle;
}
.raid-table .col-role { width: 150px; }
.raid-table .col-name { width: 260px; }
.raid-table thead th {
    background: var(--header);
    color: white;
    text-align: left;
    font-size: 12px;
    letter-spacing: .05em;
}
.section-row th {
    color: #222;
    font-weight: bold;
    text-align: left;
    border-top: 2px solid #777;
}
.section-row.tank th { background: var(--tank-head); color:#fff; }
.section-row.melee th { background: var(--melee-head); }
.section-row.range th { background: var(--range-head); }
.section-row.support th { background: var(--support-head); color:#fff; }
.slot.tank td.role, .slot.tank td.name { background: #f3c2b8; }
.slot.melee td.role, .slot.melee td.name { background: #fff0b7; }
.slot.range td.role, .slot.range td.name { background: #cbdcf7; }
.slot.support td.role, .slot.support td.name { background: #c2ddb5; }
.player-name { font-weight: bold; }
.loot-list { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; }
.loot-item {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    white-space: normal;
}
.loot-item.from-strili::after {
    content: 'SL';
    display: inline-block;
    font-size: 9px;
    color: #5f594e;
    border: 1px solid #a9a194;
    padding: 1px 3px;
    margin-left: 4px;
    border-radius: 2px;
}
.collector-card h2 { background: var(--collector-head); color: #fff; }
.collector-list { list-style: none; padding: 0; margin: 0; }
.collector-list li {
    padding: 9px 11px;
    border-bottom: 1px solid #cfc7d9;
    background: #eeeaf5;
}
.collector-list li:last-child { border-bottom: 0; }
.side-block { margin-bottom: 14px; }
.side-block .body { padding: 11px; }
.muted { color: var(--muted); }
.count { float: right; font-weight: normal; opacity: .9; }
.flash {
    border: 1px solid #82937d;
    background: #edf5e9;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.flash.error { border-color:#c27a73; background:#fae9e7; }
.admin-form input[type=text], .admin-form input[type=password], .admin-form textarea, .admin-form select {
    width: 100%;
    border: 1px solid #a49d90;
    background: #fff;
    padding: 7px 8px;
    border-radius: 2px;
    font: inherit;
}
.admin-form textarea { min-height: 160px; resize: vertical; }
.admin-form .raid-table input[type=text] { min-width: 0; }
.admin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px;
    border-top: 1px solid #c9c2b5;
    background:#f0ece3;
}
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form input[type=text], .inline-form select { width: auto; min-width: 110px; }
.loot-admin {
    border-top: 1px solid #d4cec2;
    padding: 10px;
}
.loot-edit-row {
    display: grid;
    grid-template-columns: minmax(130px,1.1fr) 100px minmax(180px,1.7fr) auto auto;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.login-box {
    max-width: 420px;
    margin: 60px auto;
    padding: 18px;
}
.login-box label { display:block; margin: 12px 0 5px; }
.update-row {
    padding: 12px;
    border-bottom: 1px solid #d4cec2;
}
.update-row:last-child { border-bottom:0; }
.update-row strong { font-size: 16px; }
.code {
    font-family: Consolas, Menlo, monospace;
    background:#eee9df;
    border:1px solid #c8c0b3;
    padding:8px;
    overflow:auto;
    word-break:break-all;
}
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .raid-table .col-role { width: 110px; }
    .raid-table .col-name { width: 180px; }
}
@media (max-width: 640px) {
    body { font-size: 13px; }
    .site-header .inner { align-items:flex-start; padding-top:12px; padding-bottom:12px; flex-direction:column; gap:10px; }
    .page { padding-left:8px; padding-right:8px; }
    .raid-table { table-layout: auto; }
    .raid-table th, .raid-table td { padding: 6px; }
    .raid-table .col-role, .raid-table .col-name { width:auto; }
    .loot-edit-row { grid-template-columns: 1fr; }
}




/* v0.3: Ingame-Name unaufdringlich + kompakter Admin */
.admin-roster-table .col-role { width: 190px; }
.admin-roster-table .col-name { width: 275px; }

.role-editor {
    display: grid;
    gap: 5px;
}
.role-editor select,
.role-editor input {
    width: 100%;
}
.role-editor input[hidden] { display: none !important; }

.player-editor {
    display: grid;
    gap: 5px;
}
.ingame-editor {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 5px;
    align-items: center;
}
.ingame-editor > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: bold;
}
.ingame-editor input {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 12px !important;
    color: #555;
    background: #faf8f3 !important;
}

.system-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    border: 1px solid var(--line);
    margin-bottom: 14px;
}
.system-status > div {
    padding: 10px;
    border-right: 1px solid var(--line);
}
.system-status > div:last-child { border-right: 0; }
.system-status span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
.system-status strong { font-size: 16px; }

.update-note {
    border: 1px solid #c9c2b5;
    background: #f5f1e8;
    padding: 9px 10px;
    margin-top: 12px;
}
.changelog {
    margin: 0;
    padding: 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font: 13px/1.5 Consolas, Menlo, monospace;
    background: #fffdf8;
    max-height: 620px;
    overflow: auto;
}
.mini-changelog {
    margin: 7px 0;
    font-size: 12px;
    line-height: 1.4;
}
.compact-list {
    margin: 0;
    padding-left: 20px;
}
.compact-list li { margin: 5px 0; }

@media (max-width: 900px) {
    .admin-roster-table .col-role,
    .admin-roster-table .col-name { width: auto; }
    .system-status { grid-template-columns: 1fr; }
    .system-status > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .system-status > div:last-child { border-bottom: 0; }
}


/* v0.4.0 */
.topnav a.active{background:rgba(255,255,255,.08);border-radius:999px;padding:8px 12px}
.loot-helper{font-size:.85rem;color:#9fb0c6;min-width:260px}
.loot-page{display:flex;flex-direction:column;gap:20px}
.hero-card.loot-hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:#9db5d9;margin:0 0 6px}
.hero-copy{max-width:780px}
.loot-summary{display:flex;flex-wrap:wrap;gap:12px}
.summary-pill{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 16px;min-width:160px}
.summary-pill strong,.drop-pill{display:block}
.summary-pill span{display:block;color:#9fb0c6;font-size:.9rem}
.boss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.boss-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:16px}
.boss-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.boss-head h3{margin:0 0 4px}
.drop-pill{font-size:.85rem;background:rgba(92,125,191,.18);border:1px solid rgba(117,150,224,.24);padding:8px 10px;border-radius:999px;white-space:nowrap}
.table-wrap{overflow:auto}
.loot-table{width:100%;border-collapse:collapse}
.loot-table th,.loot-table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;vertical-align:top}
.loot-table th{font-size:.85rem;color:#a7b6cd;text-transform:uppercase;letter-spacing:.04em}
.loot-table code{font-size:.92rem;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:8px}
.loot-footnote{padding:14px 18px}



/* v0.4.4: ICC-Bossübersicht ohne Karte */
.boss-index-card .section-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-end;
    flex-wrap:wrap;
}
.boss-index{
    display:grid;
    gap:12px;
}
.boss-index-wing{
    display:grid;
    grid-template-columns:minmax(150px, 210px) minmax(0, 1fr);
    gap:14px;
    align-items:start;
    padding:12px 0;
    border-top:1px solid rgba(255,255,255,.07);
}
.boss-index-wing:first-child{
    border-top:0;
}
.boss-index-wing > strong{
    color:#dbe7f7;
    font-size:.92rem;
    padding-top:7px;
}
.boss-index-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.boss-index-links a{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.035);
    border-radius:10px;
    color:#dbe7f7;
    text-decoration:none;
    font-size:.9rem;
}
.boss-index-links a:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.15);
}
.boss-card{
    scroll-margin-top:18px;
}
@media (max-width: 700px){
    .boss-index-wing{
        grid-template-columns:1fr;
        gap:7px;
    }
}


/* ==========================================================================
   ICC Loot Browser v0.5.0
   ========================================================================== */
.icc-v5 {
    max-width: 1420px;
    padding-top: 22px;
}
.icc-pagehead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 28px;
    align-items: end;
    margin: 0 0 18px;
    padding-bottom: 17px;
    border-bottom: 2px solid #514c43;
}
.icc-kicker {
    color: #756d60;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.icc-pagehead h1 {
    font: bold 31px/1.1 Georgia, 'Times New Roman', serif;
    margin: 0 0 6px;
    color: #202020;
}
.icc-pagehead p {
    margin: 0;
    color: #5f5a51;
    line-height: 1.45;
}
.icc-search {
    display: grid;
    gap: 5px;
}
.icc-search span {
    color: #5f5a51;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.icc-search input {
    width: 100%;
    height: 40px;
    border: 1px solid #8e877a;
    border-radius: 2px;
    background: #fffdf8;
    color: #232323;
    padding: 0 11px;
    font: inherit;
}
.icc-search input:focus {
    outline: 2px solid #786944;
    outline-offset: 1px;
}

.icc-browser {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.icc-nav {
    position: sticky;
    top: 12px;
    border: 1px solid #aaa397;
    background: #fffdf8;
}
.icc-nav-title {
    padding: 10px 12px;
    background: #353535;
    color: #fff;
    font: bold 15px Georgia, 'Times New Roman', serif;
    border-bottom: 1px solid #222;
}
.icc-nav-wing {
    border-bottom: 1px solid #d4cec2;
    padding: 7px 0;
}
.icc-nav-wingname {
    padding: 4px 11px 5px;
    color: #716a5f;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.icc-nav a {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    color: #303030;
    text-decoration: none;
    min-height: 31px;
    padding: 4px 8px 4px 10px;
    border-left: 3px solid transparent;
}
.icc-nav a:hover {
    background: #eee9df;
    border-left-color: #8b7545;
}
.icc-nav-num {
    color: #9a9285;
    font: 11px Consolas, Menlo, monospace;
}
.icc-nav a small,
.icc-mode {
    display: inline-block;
    border: 1px solid #aaa397;
    background: #ede8de;
    color: #575149;
    padding: 2px 5px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
}
.icc-nav a small.hc,
.icc-mode.hc {
    background: #333;
    border-color: #333;
    color: #f0d89a;
}
.icc-nav-note {
    padding: 10px 11px;
    font-size: 11px;
    line-height: 1.4;
    color: #756f65;
}
.icc-nav-note strong {
    display: block;
    color: #333;
    margin-bottom: 2px;
}

.icc-content {
    min-width: 0;
}
.icc-wing {
    margin: 0 0 25px;
}
.icc-wing > h2 {
    margin: 0 0 8px;
    padding: 0 0 7px;
    border-bottom: 1px solid #9c9488;
    color: #4c473f;
    font: bold 14px/1.2 Tahoma, Verdana, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.icc-boss {
    background: #fffdf8;
    border: 1px solid #aaa397;
    margin-bottom: 12px;
    scroll-margin-top: 14px;
}
.icc-boss-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 118px;
    align-items: stretch;
    min-height: 62px;
    border-bottom: 1px solid #aaa397;
    background: #e9e4d9;
}
.icc-boss-number {
    display: grid;
    place-items: center;
    border-right: 1px solid #bdb5a9;
    color: #8a8174;
    font: bold 13px Consolas, Menlo, monospace;
}
.icc-boss-title {
    padding: 9px 12px 8px;
    min-width: 0;
}
.icc-boss-title h3 {
    margin: 0 0 5px;
    color: #222;
    font: bold 19px Georgia, 'Times New Roman', serif;
}
.icc-boss-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 12px;
    color: #6f685e;
    font-size: 11px;
}
.icc-boss-rate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 7px 11px;
    border-left: 1px solid #bdb5a9;
    text-align: right;
}
.icc-boss-rate span {
    color: #756e63;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.icc-boss-rate strong {
    margin-top: 2px;
    color: #2b2b2b;
    font-size: 16px;
}

.icc-table-wrap {
    overflow-x: auto;
}
.icc-loot-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.icc-loot-table th,
.icc-loot-table td {
    border-bottom: 1px solid #ddd7cb;
    padding: 7px 10px;
    vertical-align: middle;
    text-align: left;
}
.icc-loot-table tr:last-child td {
    border-bottom: 0;
}
.icc-loot-table thead th {
    background: #f4f0e8;
    color: #777064;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.icc-loot-table th:nth-child(1) { width: auto; }
.icc-loot-table th:nth-child(2) { width: 190px; }
.icc-loot-table th:nth-child(3) { width: 90px; }
.icc-loot-table th:nth-child(4) { width: 92px; text-align: right; }
.icc-loot-table td:nth-child(4) { text-align: right; }
.icc-loot-table tbody tr:hover {
    background: #f5f0e6;
}
.icc-item-name {
    font-weight: bold;
    min-width: 0;
}
.icc-item-link {
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.icc-slot {
    color: #655f56;
    font-size: 12px;
}
.icc-id code {
    padding: 2px 4px;
    background: transparent;
    color: #625c53;
    font: 12px Consolas, Menlo, monospace;
}
.icc-rate {
    color: #464139;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}
.icc-no-results {
    padding: 30px 15px;
    border: 1px solid #aaa397;
    background: #fffdf8;
    text-align: center;
    color: #6d665d;
}
.icc-source-note {
    margin-top: 18px;
    padding: 10px 12px;
    border-top: 1px solid #aaa397;
    color: #6a645b;
    font-size: 11px;
    line-height: 1.5;
}
.icc-source-note strong {
    color: #3c3832;
}
.icc-source-note code {
    font-family: Consolas, Menlo, monospace;
}

@media (max-width: 900px) {
    .icc-pagehead {
        grid-template-columns: 1fr;
        gap: 13px;
    }
    .icc-browser {
        grid-template-columns: 1fr;
    }
    .icc-nav {
        position: static;
    }
    .icc-nav-wing {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 5px;
    }
    .icc-nav-wingname {
        grid-column: 1 / -1;
    }
    .icc-nav-note {
        display: none;
    }
}
@media (max-width: 620px) {
    .icc-pagehead h1 {
        font-size: 26px;
    }
    .icc-nav-wing {
        grid-template-columns: 1fr;
    }
    .icc-boss-head {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .icc-boss-rate {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-left: 0;
        border-top: 1px solid #bdb5a9;
        padding: 5px 9px;
    }
    .icc-loot-table th:nth-child(2),
    .icc-loot-table td:nth-child(2) {
        display: none;
    }
    .icc-loot-table th:nth-child(3) { width: 78px; }
    .icc-loot-table th:nth-child(4) { width: 82px; }
    .icc-loot-table th,
    .icc-loot-table td {
        padding: 7px 7px;
    }
}


/* ==========================================================================
   ICC Lootbrowser v0.5.1 – Atlas-inspiriert
   ========================================================================== */
.atlas-page {
    max-width: 1400px;
    padding-top: 22px;
}
.atlas-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: end;
    margin-bottom: 14px;
}
.atlas-kicker {
    color: #837a69;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.atlas-page-head h1 {
    margin: 0 0 5px;
    font: 700 30px/1.1 Georgia, "Times New Roman", serif;
    color: #202020;
}
.atlas-page-head p {
    margin: 0;
    color: #625c52;
}
.atlas-search {
    display: grid;
    gap: 5px;
}
.atlas-search span,
.atlas-mobile-select label {
    color: #746c60;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.atlas-search input,
.atlas-mobile-select select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #6f6a61;
    border-radius: 2px;
    background: #1a1c1d;
    color: #f1eee7;
    padding: 0 10px;
    font: inherit;
}
.atlas-search input::placeholder {
    color: #99958c;
}

.atlas-browser {
    display: grid;
    grid-template-columns: 265px minmax(0, 1fr);
    border: 1px solid #615d55;
    background: #101213;
    min-height: 620px;
}
.atlas-bosslist {
    background: #17191a;
    border-right: 1px solid #4a4741;
}
.atlas-side-title {
    padding: 10px 12px;
    border-bottom: 1px solid #4a4741;
    color: #f4d55f;
    font: 700 13px Tahoma, Verdana, sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.atlas-wing-label {
    padding: 10px 11px 5px;
    color: #a8a296;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.atlas-boss-button {
    width: 100%;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 36px;
    padding: 5px 8px;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: #d9d5cc;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.atlas-boss-button:hover {
    background: #202324;
}
.atlas-boss-button.active {
    background: #272a2b;
    border-left-color: #d5a72d;
    color: #fff;
}
.atlas-boss-num {
    color: #77736a;
    font: 11px Consolas, Menlo, monospace;
}
.atlas-boss-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atlas-diff {
    display: inline-block;
    border: 1px solid #5f5b53;
    background: #262829;
    color: #bcb7ad;
    padding: 2px 5px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}
.atlas-diff.hc {
    color: #f2ce59;
    border-color: #8d742e;
}
.atlas-diff.big {
    font-size: 10px;
    padding: 3px 6px;
}
.atlas-side-note {
    margin: 10px;
    padding: 9px 10px;
    border-top: 1px solid #3c3934;
    color: #89847a;
    font-size: 10px;
    line-height: 1.45;
}
.atlas-side-note strong {
    display: block;
    color: #c4beb1;
}

.atlas-main {
    min-width: 0;
    background: #0d0f10;
}
.atlas-mobile-select {
    display: none;
}
.atlas-boss-panel {
    display: none;
}
.atlas-boss-panel.active {
    display: block;
}
.atlas-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    padding: 15px 18px 13px;
    border-bottom: 1px solid #4a4741;
    background: #151718;
}
.atlas-panel-wing {
    margin-bottom: 2px;
    color: #9f998e;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.atlas-panel-head h2 {
    margin: 0 0 7px;
    color: #f3f0e8;
    font: 700 22px/1.15 Georgia, "Times New Roman", serif;
}
.atlas-panel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 13px;
    align-items: center;
    color: #a9a398;
    font-size: 11px;
}
.atlas-rate-source {
    text-align: right;
    min-width: 130px;
}
.atlas-rate-source span {
    display: block;
    color: #777269;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.atlas-rate-source strong {
    color: #c8b77f;
    font-size: 12px;
}

.atlas-loot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    padding: 8px 14px 16px;
}
.atlas-loot-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 7px 6px;
    border-bottom: 1px solid #282a2b;
}
.atlas-loot-row:hover {
    background: #17191a;
}
.atlas-loot-main {
    min-width: 0;
}
.atlas-item-name {
    min-height: 36px;
    display: flex;
    align-items: center;
}
.atlas-item-link {
    font-weight: 700;
    text-decoration: none;
}
.atlas-item-link .iconsmall,
.atlas-item-link .iconmedium,
.atlas-item-link .iconlarge {
    vertical-align: middle;
}
.atlas-item-sub {
    margin-left: 45px;
    margin-top: -8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    color: #d8b84f;
    font-size: 11px;
    line-height: 1.25;
}
.atlas-item-sub .atlas-dot {
    color: #5b574f;
}
.atlas-item-sub span:last-child {
    color: #77736a;
}
.atlas-drop {
    display: grid;
    justify-items: end;
    gap: 3px;
}
.atlas-drop strong {
    color: #f0eadc;
    font-size: 12px;
    white-space: nowrap;
}
.atlas-drop a {
    color: #8d877b;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #47443f;
    padding: 1px 4px;
    border-radius: 2px;
}
.atlas-drop a:hover {
    color: #e1c65c;
    border-color: #85743d;
}
.atlas-no-results {
    padding: 24px 18px;
    color: #9a958b;
    text-align: center;
}
.atlas-footnote {
    padding: 10px 2px 0;
    color: #777064;
    font-size: 11px;
    line-height: 1.45;
}
.atlas-footnote strong {
    color: #49443d;
}

@media (max-width: 980px) {
    .atlas-page-head {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .atlas-browser {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    .atlas-loot-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .atlas-browser {
        display: block;
        min-height: 0;
    }
    .atlas-bosslist {
        display: none;
    }
    .atlas-mobile-select {
        display: grid;
        gap: 5px;
        padding: 11px;
        border-bottom: 1px solid #4a4741;
        background: #17191a;
    }
    .atlas-panel-head {
        padding: 12px;
    }
    .atlas-rate-source {
        display: none;
    }
    .atlas-loot-grid {
        padding: 5px 8px 12px;
    }
    .atlas-loot-row {
        grid-template-columns: minmax(0, 1fr) 70px;
        min-height: 62px;
    }
}


/* v0.5.2 – echte per-Item-Dropraten + Quellenbadge */
.atlas-side-note span {
    display: block;
}
.atlas-side-note b {
    color: #d4ba62;
}
.atlas-drop-low > strong {
    color: #e1b56a;
}
.atlas-drop a {
    min-width: 24px;
    text-align: center;
}
.atlas-footnote b {
    color: #514a3e;
}


/* v0.5.3 – StriLi Import-Abgleich + Backups */
.sync-intro textarea {
    min-height: 260px;
    font: 12px/1.45 Consolas, Menlo, monospace;
}
.sync-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}
.sync-summary > div {
    border: 1px solid var(--line);
    background: #fffdf8;
    padding: 10px 12px;
}
.sync-summary strong {
    display: block;
    font-size: 17px;
}
.sync-summary span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}
.sync-warning {
    border: 1px solid #b89a57;
    background: #f7f0df;
    padding: 11px 13px;
    margin-bottom: 14px;
    line-height: 1.45;
}
.sync-card {
    margin-bottom: 14px;
}
.sync-match-list {
    display: grid;
    gap: 4px;
}
.sync-match-list > div {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(160px, 1fr) 70px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}
.sync-match-list > div:last-child { border-bottom: 0; }
.sync-match-list span,
.sync-match-list small { color: var(--muted); }

.sync-unknown-list {
    display: grid;
    gap: 9px;
}
.sync-unknown-row {
    display: grid;
    grid-template-columns: minmax(150px, .75fr) minmax(260px, 1.45fr) minmax(230px, 1fr);
    gap: 12px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--line);
    background: #faf7f0;
}
.sync-unknown-row label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sync-unknown-name strong,
.sync-unknown-name span,
.sync-unknown-name small {
    display: block;
}
.sync-unknown-name span,
.sync-unknown-name small {
    color: var(--muted);
    margin-top: 2px;
}
.sync-new-player-options {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 6px;
}
.sync-remove-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
}
.sync-remove-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}
.sync-final {
    margin-bottom: 14px;
}
.sync-final .body > strong,
.sync-final .body > span {
    display: block;
}
.sync-final .body > span {
    color: var(--muted);
    margin-top: 4px;
}

.backup-intro {
    border-bottom: 1px solid var(--line);
}
.backup-list {
    display: grid;
}
.backup-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line);
}
.backup-row:last-child { border-bottom: 0; }
.backup-id {
    font: bold 12px Consolas, Menlo, monospace;
    color: var(--muted);
}
.backup-main strong,
.backup-main span,
.backup-main small {
    display: block;
}
.backup-main span {
    margin-top: 2px;
}
.backup-main small {
    margin-top: 3px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .sync-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sync-unknown-row { grid-template-columns: 1fr; }
    .sync-remove-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .sync-summary { grid-template-columns: 1fr 1fr; }
    .sync-match-list > div { grid-template-columns: 1fr; gap: 2px; }
    .backup-row { grid-template-columns: 45px minmax(0,1fr); }
    .backup-row form { grid-column: 2; }
}


/* v0.5.4 */
.atlas-drop-sources {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}
.atlas-source-badge {
    min-width: 24px;
    text-align: center;
    color: #b4ab98;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid #47443f;
    padding: 1px 4px;
    border-radius: 2px;
}
.atlas-source-badge.muted {
    min-width: 34px;
    color: #77736a;
}
.sync-summary small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}