:root {
    --bg:#111315;
    --glass:rgba(20,22,24,.72);
    --glass2:rgba(29,31,33,.62);
    --glass3:rgba(38,40,42,.52);
    --line:rgba(255,255,255,.14);
    --line2:rgba(255,146,61,.42);
    --text:#f1f7ff;
    --muted:#a9aaac;
    --blue:#ff8a2a;
    --blue2:#ffb05e;
    --orange:#ff8a2a;
    --danger:#ff6b6b;
    --ok:#59e0aa;
    --shadow:0 22px 60px rgba(0,0,0,.34);
    --blur:blur(22px)
}

* {
    box-sizing:border-box
}

html,
body {
    margin:0;
    min-height:100%;
    color:var(--text);
    font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif
}

body {
    background:#111315 url('/assets/wildlanders/img/background.png') center/cover fixed no-repeat
}

body:before {
    content:"";
    position:fixed;
    inset:0;
    background:linear-gradient(115deg,rgba(10,10,10,.82),rgba(18,18,18,.42) 48%,rgba(45,20,8,.28));
    pointer-events:none;
    z-index:-1
}

a {
    color:inherit;
    text-decoration:none
}

button,
input,
select,
textarea {
    font:inherit;
    color:inherit
}

button {
    cursor:pointer
}

.app-shell {
    display:grid;
    grid-template-columns:278px minmax(0,1fr);
    gap:14px;
    min-height:100vh;
    padding:18px
}

.sidebar,
.topbar,
.mail-list,
.message-card,
.panel,
.compose-card,
.search,
.bulkbar {
    background:linear-gradient(145deg,var(--glass),rgba(7,22,37,.48));
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    backdrop-filter:var(--blur);
    -webkit-backdrop-filter:var(--blur)
}

.sidebar {
    position:sticky;
    top:18px;
    height:calc(100vh - 36px);
    border-radius:20px;
    padding:18px 14px;
    display:flex;
    flex-direction:column;
    overflow:hidden
}

.sidebar:after {
    content:"";
    position:absolute;
    right:-60px;
    bottom:-60px;
    width:180px;
    height:180px;
    background:radial-gradient(circle,rgba(255,128,31,.22),transparent 68%);
    pointer-events:none
}

.brand {
    display:flex;
    gap:14px;
    align-items:center;
    padding:4px 8px 20px
}

.brand-mark {
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:16px;
    background:linear-gradient(145deg,rgba(255,138,42,.18),rgba(40,31,24,.48));
    border:1px solid rgba(255,170,91,.38);
    box-shadow:0 0 30px rgba(255,122,31,.16),inset 0 0 18px rgba(255,255,255,.03);
    overflow:hidden
}

.brand-mark img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    padding:5px
}

.login-logo {
    display:grid;
    place-items:center;
    width:104px;
    height:104px;
    margin:0 auto 22px;
    border-radius:24px;
    background:linear-gradient(145deg,rgba(255,138,42,.16),rgba(40,31,24,.48));
    border:1px solid rgba(255,170,91,.38);
    box-shadow:0 0 42px rgba(255,122,31,.20),inset 0 0 22px rgba(255,255,255,.035);
    overflow:hidden
}

.login-logo img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    padding:8px
}

.brand b {
    display:block;
    font-size:18px;
    letter-spacing:.08em
}

.brand small {
    display:block;
    color:#ff9b46;
    font-size:9px;
    letter-spacing:.16em;
    margin-top:1px
}

.compose-btn {
    padding:13px 14px;
    background:linear-gradient(135deg,#d86616,#ff922f);
    border:1px solid rgba(255,184,116,.52);
    box-shadow:0 8px 28px rgba(255,112,20,.20);
    border-radius:12px;
    font-weight:750;
    text-align:center;
    margin-bottom:17px
}

.compose-btn span {
    margin-right:7px
}

.side-nav {
    display:grid;
    gap:4px
}

.side-nav a {
    padding:10px 12px;
    border-radius:10px;
    color:#d5e2ee;
    display:flex;
    gap:11px;
    align-items:center;
    border:1px solid transparent;
    transition:.18s
}

.side-nav a span {
    width:19px;
    text-align:center;
    color:#ffd2ad
}

.side-nav a:hover {
    background:rgba(88,55,32,.25);
    border-color:rgba(255,163,85,.18)
}

.side-nav a.active {
    background:linear-gradient(90deg,rgba(221,102,20,.56),rgba(91,55,31,.24));
    border-color:rgba(255,153,71,.45);
    box-shadow:inset 3px 0 #ff8a2a,0 0 24px rgba(255,122,31,.10);
    color:#fff
}

.nav-section {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:#7c9bb5;
    margin:21px 12px 8px
}

.sidebar-user {
    margin-top:auto;
    padding:14px 8px 5px;
    display:flex;
    gap:10px;
    align-items:center;
    border-top:1px solid rgba(128,190,232,.18)
}

.sidebar-user b {
    display:block;
    font-size:11px;
    max-width:175px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.sidebar-user small {
    display:block;
    color:#78a2c0;
    font-size:10px
}

.avatar {
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#352a22,#72513a);
    border:1px solid rgba(255,181,115,.28);
    font-weight:800
}

.wild-tagline {
    font-size:9px;
    letter-spacing:.18em;
    color:#718ca4;
    padding:13px 10px 2px;
    font-style:italic
}

.wild-tagline b {
    color:#9db2c5
}

.content-shell {
    min-width:0
}

.topbar {
    height:74px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    position:sticky;
    top:18px;
    z-index:20
}

.topbar:after {
    content:"";
    position:absolute;
    right:0;
    bottom:-1px;
    width:160px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--orange));
    box-shadow:0 0 12px var(--orange)
}

.top-title h1 {
    font-size:19px;
    margin:0
}

.top-title small {
    display:block;
    color:#6f93ad;
    font-size:9px;
    letter-spacing:.16em;
    margin-top:2px
}

.top-actions {
    display:flex;
    align-items:center;
    gap:17px;
    color:#b6c7d6
}

.status-dot {
    font-size:10px;
    color:#63d7ac;
    letter-spacing:.08em
}

.clock {
    font-size:21px;
    font-weight:300;
    min-width:58px
}

.top-actions>a {
    padding:8px 10px;
    border-radius:9px
}

.top-actions>a:hover {
    background:rgba(255,255,255,.06)
}

.menu-btn,
.mobile-compose {
    display:none
}

.content {
    padding:14px 0 30px;
    max-width:none
}

.flash {
    padding:12px 15px;
    border-radius:12px;
    margin-bottom:12px;
    background:rgba(62,47,36,.76);
    border:1px solid rgba(255,151,69,.35);
    backdrop-filter:var(--blur)
}

.flash.error {
    background:rgba(78,24,30,.78);
    border-color:rgba(255,107,107,.38)
}

.flash.success {
    background:rgba(15,70,49,.72);
    border-color:rgba(86,211,155,.35)
}

/* inbox / split workspace */
.wl-workspace {
    display:grid;
    grid-template-columns:minmax(360px,42%) minmax(430px,58%);
    gap:14px;
    min-height:calc(100vh - 124px)
}

.wl-list-pane,
.wl-preview-pane {
    min-width:0
}

.wl-preview-pane {
    border:1px solid var(--line);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(22,22,22,.72),rgba(29,25,22,.54));
    box-shadow:var(--shadow);
    backdrop-filter:var(--blur);
    overflow:hidden;
    position:relative
}

.wl-preview-pane:after {
    content:"EXPLORE  ·  BUILD  ·  DEFEND  ·  TOGETHER";
    position:absolute;
    right:30px;
    bottom:25px;
    color:rgba(148,192,220,.27);
    font-size:10px;
    letter-spacing:.35em
}

.wl-preview-empty {
    height:100%;
    min-height:500px;
    display:grid;
    place-items:center;
    text-align:center;
    color:#7391a8;
    padding:40px
}

.wl-preview-empty .big {
    font-size:44px;
    opacity:.35
}

.wl-preview-empty b {
    display:block;
    color:#c9d9e7;
    font-size:17px;
    margin:10px
}

.toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:10px
}

.search {
    display:flex;
    max-width:none;
    width:100%;
    border-radius:13px;
    overflow:hidden;
    box-shadow:none
}

.search input {
    flex:1;
    background:transparent;
    border:0;
    padding:12px 14px;
    outline:none
}

.search input::placeholder {
    color:#7d9bb1
}

.search button {
    width:48px;
    background:transparent;
    border:0;
    color:#a9c5d8
}

.mail-count {
    color:#8da7bb;
    white-space:nowrap;
    font-size:11px
}

.bulkbar {
    display:flex;
    gap:7px;
    align-items:center;
    margin-bottom:10px;
    padding:7px;
    border-radius:12px;
    box-shadow:none
}

.bulkbar label,
.bulkbar button,
.message-actions a,
.message-actions button,
.compose-actions button,
.compose-actions a,
.admin-actions button {
    background:rgba(34,31,29,.62);
    border:1px solid rgba(255,174,103,.18);
    padding:8px 10px;
    border-radius:9px
}

.bulkbar button:hover,
.message-actions a:hover,
.message-actions button:hover {
    border-color:rgba(255,151,69,.55);
    background:rgba(94,56,30,.42)
}

.mail-list {
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow)
}

.mail-row {
    display:grid;
    grid-template-columns:38px 1fr;
    border-bottom:1px solid rgba(119,185,230,.13);
    min-height:76px;
    transition:.15s
}

.mail-row:last-child {
    border-bottom:0
}

.mail-row:hover {
    background:rgba(83,54,34,.28)
}

.mail-row.unread {
    background:linear-gradient(90deg,rgba(197,88,18,.26),rgba(70,48,34,.16))
}

.check {
    display:grid;
    place-items:center
}

.check input {
    accent-color:#ff8a2a
}

.mail-link {
    display:grid;
    grid-template-columns:minmax(115px,180px) 1fr 92px;
    gap:12px;
    align-items:center;
    padding:12px 12px 12px 0;
    min-width:0
}

.sender,
.subject {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.sender {
    font-weight:650
}

.subject b {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis
}

.subject span {
    color:#7898af;
    font-size:10px;
    margin:2px 0 0
}

.mail-row:not(.unread) .sender,
.mail-row:not(.unread) .subject b {
    font-weight:500;
    color:#c2d1de
}

.mail-link time {
    color:#8ba4b8;
    text-align:right;
    font-size:11px
}

.empty {
    padding:64px 20px;
    display:grid;
    gap:6px;
    place-items:center;
    color:#7894aa
}

.empty b {
    font-size:17px;
    color:var(--text)
}

.pager {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin:16px
}

.pager a {
    color:#ffae69
}

.message-actions {
    display:flex;
    gap:7px;
    align-items:center;
    flex-wrap:wrap;
    margin:0 0 10px
}

.message-actions form {
    display:flex;
    gap:7px
}

.danger-text {
    color:var(--danger)!important
}

.message-card {
    border-radius:18px;
    padding:30px;
    min-height:calc(100vh - 176px);
    position:relative;
    overflow:hidden
}

.message-card:before {
    content:"W";
    position:absolute;
    right:8%;
    top:25%;
    font-size:280px;
    font-weight:900;
    color:rgba(108,183,229,.035);
    transform:rotate(-8deg);
    pointer-events:none
}

.message-card h2 {
    font-size:27px;
    margin:0 0 22px;
    position:relative
}

.message-meta {
    display:grid;
    grid-template-columns:1fr auto;
    gap:5px 20px;
    color:#9bb2c5;
    padding-bottom:20px;
    border-bottom:1px solid rgba(120,187,230,.18);
    position:relative
}

.message-meta b {
    color:#d8e6f2
}

.message-meta time {
    grid-column:2;
    grid-row:1/4
}

.message-body {
    font:14px/1.75 Inter,system-ui,sans-serif;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    margin:25px 0;
    min-height:180px;
    position:relative
}

.attachments {
    border-top:1px solid rgba(120,187,230,.18);
    padding-top:17px;
    position:relative
}

.attachments a {
    display:inline-flex;
    gap:8px;
    align-items:center;
    background:rgba(42,35,30,.62);
    border:1px solid rgba(255,174,103,.20);
    padding:11px 13px;
    border-radius:10px;
    margin:4px
}

.attachments small {
    color:#8ea9bc
}

.panel,
.compose-card {
    border-radius:17px;
    padding:24px
}

.compose-card {
    max-width:1100px;
    display:grid;
    gap:15px
}

.compose-card label,
.admin-create label,
.login-card label {
    display:grid;
    gap:7px;
    color:#cad9e5
}

.compose-card input,
.compose-card textarea,
.admin-create input,
.admin-create select,
.admin-actions input,
.login-card input,
.inline-form input {
    width:100%;
    background:rgba(18,18,18,.62);
    border:1px solid rgba(255,174,103,.20);
    border-radius:10px;
    padding:11px 12px;
    outline:none
}

.compose-card input:focus,
.compose-card textarea:focus,
.login-card input:focus {
    border-color:#ff922f;
    box-shadow:0 0 0 3px rgba(255,138,42,.10)
}

.compose-card textarea {
    resize:vertical;
    min-height:300px
}

.compose-two {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}

.compose-actions {
    display:flex;
    gap:9px;
    align-items:center
}

.primary {
    background:linear-gradient(135deg,#d86616,#ff922f)!important;
    border:1px solid rgba(255,188,126,.55)!important;
    color:#fff!important;
    padding:10px 14px;
    border-radius:9px;
    font-weight:750;
    box-shadow:0 8px 25px rgba(255,112,20,.18)
}

.panel {
    margin-bottom:14px
}

.panel h2 {
    margin:0
}

.panel-head {
    margin-bottom:18px
}

.panel-head p {
    color:var(--muted);
    margin:5px 0 0
}

.admin-create {
    display:grid;
    grid-template-columns:2fr 1.3fr .8fr auto;
    gap:12px;
    align-items:end
}

.address-build {
    display:grid;
    grid-template-columns:1fr auto 1.4fr;
    gap:8px;
    align-items:center
}

.admin-table-wrap {
    overflow:auto
}

.admin-table {
    width:100%;
    border-collapse:collapse;
    min-width:850px
}

.admin-table th,
.admin-table td {
    text-align:left;
    padding:13px 10px;
    border-bottom:1px solid rgba(120,187,230,.16);
    vertical-align:top
}

.admin-table th {
    color:#84a2b9;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em
}

.status {
    display:inline-flex;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(74,99,123,.35);
    color:#c3d3df;
    font-size:10px
}

.status.ok {
    background:rgba(28,121,81,.35);
    color:#8ef0c2
}

.status.off {
    background:rgba(135,48,56,.35);
    color:#ff9ea7
}

.status.admin {
    background:rgba(42,105,166,.4);
    color:#9fd3ff
}

details summary {
    cursor:pointer;
    color:#ffa75c
}

.admin-actions {
    display:grid;
    gap:8px;
    margin-top:10px;
    min-width:300px
}

.admin-actions form {
    display:flex;
    gap:7px
}

.danger {
    background:rgba(113,38,47,.72)!important;
    border-color:rgba(255,104,118,.35)!important
}

.folder-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:9px;
    margin:18px 0
}

.folder-grid a {
    padding:12px;
    background:rgba(35,31,28,.58);
    border:1px solid var(--line);
    border-radius:10px
}

.inline-form {
    display:flex;
    gap:8px;
    max-width:480px
}

/* login */
.login-body {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px;
    background:#111315 url('/assets/wildlanders/img/background.png') center/cover fixed no-repeat
}

.login-card {
    width:min(450px,100%);
    background:rgba(18,18,18,.72);
    border:1px solid rgba(255,154,73,.28);
    border-radius:22px;
    padding:36px;
    box-shadow:0 35px 100px rgba(0,0,0,.5);
    backdrop-filter:blur(25px)
}

.login-card h1 {
    text-align:center;
    margin:0;
    font-size:27px
}

.login-card>p {
    text-align:center;
    color:#aaa7a3;
    margin:8px 0 24px
}

.login-card form {
    display:grid;
    gap:15px
}

.login-card button {
    width:100%;
    margin-top:4px
}

.login-domains {
    text-align:center;
    color:#8d8985;
    font-size:10px;
    margin-top:22px
}

@media (max-width:1100px) {

    .wl-workspace {
        grid-template-columns:1fr
    }

    .wl-preview-pane {
        display:none
    }

    .mail-link {
        grid-template-columns:minmax(120px,220px) 1fr 90px
    }

}

@media (max-width:900px) {

    .app-shell {
        display:block;
        padding:10px
    }

    .sidebar {
        position:fixed;
        left:-300px;
        top:10px;
        width:278px;
        height:calc(100vh - 20px);
        transition:left .2s;
        z-index:40
    }

    .menu-open .sidebar {
        left:10px
    }

    .content {
        padding-top:10px
    }

    .topbar {
        top:10px;
        padding:0 14px
    }

    .menu-btn,
    .mobile-compose {
        display:inline-grid;
        background:transparent;
        border:0;
        color:var(--text);
        font-size:20px
    }

    .clock,
    .status-dot,
    .top-title small {
        display:none
    }

    .mail-link {
        grid-template-columns:1fr 86px
    }

    .sender {
        grid-column:1
    }

    .subject {
        grid-column:1
    }

    .mail-link time {
        grid-column:2;
        grid-row:1/3
    }

    .admin-create {
        grid-template-columns:1fr 1fr
    }

    .admin-create .primary {
        grid-column:1/-1
    }

    .toolbar {
        align-items:stretch;
        flex-direction:column
    }

    .mail-count {
        display:none
    }

}

@media (max-width:600px) {

    .app-shell {
        padding:6px
    }

    .topbar {
        top:6px;
        height:64px
    }

    .sidebar {
        top:6px;
        height:calc(100vh - 12px)
    }

    .mail-row {
        grid-template-columns:32px 1fr
    }

    .mail-link {
        grid-template-columns:1fr;
        padding-right:10px;
        gap:4px
    }

    .mail-link time {
        grid-column:1;
        grid-row:auto;
        text-align:left
    }

    .compose-two,
    .admin-create {
        grid-template-columns:1fr
    }

    .message-card,
    .panel,
    .compose-card {
        padding:17px
    }

    .message-card h2 {
        font-size:21px
    }

    .message-meta {
        grid-template-columns:1fr
    }

    .message-meta time {
        grid-column:1;
        grid-row:auto
    }

    .top-actions {
        gap:7px
    }

    .bulkbar {
        overflow:auto
    }

    .login-card {
        padding:25px
    }

}

/* Mail notifications */
.side-nav-label {
    flex:1;
    min-width:0;
}
.side-nav a .folder-unread-badge {
    width:auto;
    min-width:22px;
    height:20px;
    padding:0 6px;
    margin-left:auto;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#d86616,#ff922f);
    border:1px solid rgba(255,190,128,.5);
    color:#fff;
    font-size:10px;
    line-height:1;
    font-weight:800;
    box-shadow:0 0 16px rgba(255,122,31,.18);
}
.folder-unread-badge.is-zero {
    display:none !important;
}
.mail-notification {
    position:relative;
}
.mail-notification-btn {
    position:relative;
    width:38px;
    height:38px;
    padding:0;
    display:grid;
    place-items:center;
    border-radius:10px;
    border:1px solid rgba(255,163,85,.18);
    background:rgba(255,255,255,.035);
    color:#f7d1af;
}
.mail-notification-btn:hover,
.mail-notification.open .mail-notification-btn {
    background:rgba(122,67,31,.28);
    border-color:rgba(255,151,69,.42);
}
.mail-notification-icon {
    font-size:17px;
}
.mail-notification-count {
    position:absolute;
    top:-7px;
    right:-8px;
    min-width:21px;
    height:21px;
    padding:0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#ef7a25;
    border:2px solid #16120f;
    color:#fff;
    font-size:10px;
    font-weight:900;
    box-shadow:0 4px 16px rgba(0,0,0,.32);
}
.mail-notification-count.is-zero {
    display:none;
}
.mail-notification-menu {
    position:absolute;
    top:48px;
    right:0;
    width:min(330px,calc(100vw - 28px));
    padding:10px;
    border-radius:14px;
    border:1px solid rgba(255,151,69,.28);
    background:rgba(19,16,14,.98);
    box-shadow:0 22px 55px rgba(0,0,0,.48);
    backdrop-filter:blur(16px);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:.16s ease;
    z-index:90;
}
.mail-notification.open .mail-notification-menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.mail-notification-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:7px 8px 11px;
    border-bottom:1px solid rgba(255,151,69,.16);
}
.mail-notification-head b {
    color:#fff;
    font-size:13px;
}
.mail-notification-head span {
    color:#d58a4c;
    font-size:11px;
    white-space:nowrap;
}
.mail-notification-folders {
    display:grid;
    gap:5px;
    padding-top:8px;
}
.mail-notification-folders a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 11px;
    border-radius:9px;
    color:#e5d7ca;
    background:rgba(255,255,255,.025);
    border:1px solid transparent;
}
.mail-notification-folders a:hover {
    background:rgba(122,67,31,.28);
    border-color:rgba(255,151,69,.2);
}
.mail-notification-folders a b {
    min-width:24px;
    padding:3px 7px;
    border-radius:999px;
    text-align:center;
    background:#d86616;
    color:#fff;
    font-size:10px;
}
.mail-notification-empty {
    padding:17px 10px;
    text-align:center;
    color:#8297aa;
    font-size:12px;
}
.mail-toast {
    position:fixed;
    right:22px;
    bottom:22px;
    max-width:min(390px,calc(100vw - 28px));
    padding:13px 16px;
    border-radius:12px;
    border:1px solid rgba(255,151,69,.38);
    background:rgba(24,18,14,.97);
    color:#fff;
    box-shadow:0 18px 48px rgba(0,0,0,.44);
    opacity:0;
    pointer-events:none;
    transform:translateY(14px);
    transition:.2s ease;
    z-index:140;
}
.mail-toast.show {
    opacity:1;
    transform:translateY(0);
}
@media(max-width:600px) {
    .mail-notification-menu { right:-54px; }
    .mail-toast { right:14px; bottom:14px; }
}

/* Fix: unread counter must never overlap folder text */
.side-nav a:has(.folder-unread-badge) {
    display:grid;
    grid-template-columns:19px minmax(0,1fr) max-content;
    column-gap:11px;
    align-items:center;
}
.side-nav a:has(.folder-unread-badge) > span:first-child {
    width:19px;
    min-width:19px;
}
.side-nav a .side-nav-label {
    width:auto;
    min-width:0;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.side-nav a .folder-unread-badge {
    position:static;
    flex:none;
    width:auto;
    min-width:22px;
    margin-left:0;
    white-space:nowrap;
    justify-self:end;
}

/* KI-Uebersetzer */
.ai-translate-bar{margin:0 0 14px;padding:14px 16px;border:1px solid rgba(89,163,255,.28);border-radius:12px;background:linear-gradient(135deg,rgba(23,33,48,.96),rgba(14,21,31,.96));box-shadow:0 10px 30px rgba(0,0,0,.16)}
.ai-translate-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px}.ai-translate-title b{font-size:14px;color:#fff}.ai-translate-title span,.ai-translate-status{font-size:12px;color:var(--muted)}
.ai-translate-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ai-translate-controls select,.ai-translate-controls button,.ai-result-head button{background:#0d131d;border:1px solid var(--line);border-radius:8px;padding:8px 11px;color:var(--text)}.ai-translate-controls select{min-width:165px}.ai-translate-controls button:disabled{opacity:.55;cursor:wait}
.ai-translate-status{min-height:18px;margin-top:8px}.ai-translation-result{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}.ai-result-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}.ai-result-head>div{display:flex;gap:7px;flex-wrap:wrap}.ai-translation-result pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.7 Inter,system-ui,sans-serif;background:rgba(6,10,16,.5);border:1px solid var(--line);border-radius:9px;padding:14px;max-height:460px;overflow:auto}.compose-ai{margin:0}
@media(max-width:600px){.ai-translate-controls{align-items:stretch}.ai-translate-controls select,.ai-translate-controls button{width:100%}.ai-result-head{align-items:flex-start;flex-direction:column}}