:root {
    --bg:#0a0806;
    --panel:rgba(12,11,10,.91);
    --panel2:rgba(20,16,12,.88);
    --panel3:rgba(31,21,14,.78);
    --line:rgba(182,113,51,.34);
    --line-soft:rgba(231,168,93,.16);
    --text:#eee7dc;
    --muted:#a49a8c;
    --bronze:#b57635;
    --gold:#d59a53;
    --ember:#e7651d;
    --ember2:#ff8a2f;
    --danger:#ef5d51;
    --ok:#64d38d;
    --shadow:0 28px 70px rgba(0,0,0,.58);
    --blur:blur(18px)
}

* {
    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:
        linear-gradient(rgba(5,4,3,.70),rgba(5,4,3,.76)),
        url('/assets/eldrvarn/img/fjord-bg.jpg') center/cover fixed no-repeat;
    background-attachment:fixed
}

body:before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;
    opacity:.58;
    background:
        repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 92px),
        repeating-linear-gradient(0deg,rgba(255,255,255,.01) 0 1px,transparent 1px 92px)
}

body:after {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        linear-gradient(90deg,rgba(0,0,0,.45),transparent 24%,transparent 76%,rgba(0,0,0,.48)),
        linear-gradient(180deg,rgba(0,0,0,.3),transparent 18%,rgba(0,0,0,.34))
}

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

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

button {
    cursor:pointer
}

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

.sidebar {
    position:sticky;
    top:0;
    height:100vh;
    padding:18px 14px 16px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:
        linear-gradient(rgba(10,7,5,.82),rgba(10,7,5,.90)),
        url('/assets/eldrvarn/img/hall-bg.jpg') center/cover no-repeat;
    border-right:1px solid rgba(181,103,41,.44);
    box-shadow:18px 0 50px rgba(0,0,0,.38);
    z-index:30
}

.sidebar:before,
.sidebar:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:120px;
    pointer-events:none
}

.sidebar:before {
    top:0;
    background:radial-gradient(circle at 50% -30%,rgba(230,104,24,.19),transparent 65%)
}

.sidebar:after {
    bottom:0;
    background:radial-gradient(circle at 50% 120%,rgba(233,91,14,.28),transparent 60%)
}

.brand {
    position:relative;
    z-index:2;
    display:grid;
    place-items:center;
    text-align:center;
    padding:2px 8px 18px;
    border-bottom:1px solid rgba(197,123,57,.22);
    margin-bottom:14px
}

.brand-mark {
    width:132px;
    height:132px;
    display:grid;
    place-items:center;
    margin-bottom:2px;
    filter:drop-shadow(0 12px 26px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(206,113,36,.13))
}

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

.brand-copy b {
    display:block;
    font-family:Georgia,"Times New Roman",serif;
    font-size:23px;
    letter-spacing:.09em;
    color:#e7bd87;
    text-shadow:0 1px 0 #3a2112,0 0 14px rgba(213,134,55,.16)
}

.brand-copy small {
    display:block;
    margin-top:2px;
    color:#d27b32;
    font-size:9px;
    letter-spacing:.24em
}

.compose-btn {
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    padding:12px 13px;
    margin-bottom:12px;
    border-radius:6px;
    color:#fff6eb;
    font-weight:750;
    background:linear-gradient(180deg,#b75a18,#7f350d);
    border:1px solid rgba(255,163,74,.56);
    box-shadow:
        0 0 0 1px rgba(91,36,7,.7) inset,
        0 9px 24px rgba(210,85,11,.18)
}

.compose-btn:hover {
    background:linear-gradient(180deg,#d56a1d,#963d0d)
}

.side-nav {
    position:relative;
    z-index:2;
    display:grid;
    gap:3px
}

.side-nav a {
    display:flex;
    align-items:center;
    gap:11px;
    min-height:38px;
    padding:9px 11px;
    border-radius:7px;
    color:#dfd7cb;
    border:1px solid transparent;
    transition:.17s ease
}

.side-nav a span {
    width:20px;
    text-align:center;
    color:#df8a3d;
    font-size:15px
}

.side-nav a:hover {
    color:#fff;
    background:rgba(118,63,23,.24);
    border-color:rgba(205,125,54,.16)
}

.side-nav a.active {
    color:#fff;
    background:linear-gradient(90deg,rgba(184,78,16,.75),rgba(75,40,19,.3));
    border-color:rgba(237,138,51,.43);
    box-shadow:inset 3px 0 #f17b21,0 0 24px rgba(218,82,12,.12)
}

.nav-section {
    position:relative;
    z-index:2;
    margin:16px 10px 6px;
    color:#c67e3e;
    font-family:Georgia,"Times New Roman",serif;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.22em
}

.nav-section:before,
.nav-section:after {
    content:"";
    display:inline-block;
    vertical-align:middle;
    width:22px;
    height:1px;
    margin:0 7px;
    background:linear-gradient(90deg,transparent,#9f5b2a)
}

.sidebar-user {
    position:relative;
    z-index:2;
    margin-top:auto;
    padding:12px 7px 4px;
    display:flex;
    align-items:center;
    gap:10px;
    border-top:1px solid rgba(191,123,58,.19)
}

.avatar {
    width:37px;
    height:37px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#26201b,#59402d);
    border:1px solid rgba(215,145,77,.31);
    font-weight:800
}

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

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

.eldrvarn-tagline {
    position:relative;
    z-index:2;
    padding:10px 6px 0;
    text-align:center;
    color:#916640;
    font-family:Georgia,"Times New Roman",serif;
    font-size:8px;
    letter-spacing:.12em;
    line-height:1.65
}

.content-shell {
    min-width:0;
    background:
        linear-gradient(rgba(5,5,5,.72),rgba(5,5,5,.78)),
        url('/assets/eldrvarn/img/fjord-bg.jpg') center/cover fixed no-repeat
}

.topbar {
    position:sticky;
    top:0;
    z-index:20;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 22px;
    background:rgba(10,10,9,.92);
    border-bottom:1px solid rgba(174,104,46,.32);
    box-shadow:0 14px 34px rgba(0,0,0,.28);
    backdrop-filter:var(--blur)
}

.topbar:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(226,121,37,.25),transparent)
}

.top-title h1 {
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:21px;
    font-weight:600;
    color:#e7c098
}

.top-title small {
    display:block;
    margin-top:2px;
    color:#b7743b;
    font-size:8px;
    letter-spacing:.2em
}

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

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

.clock {
    font-size:19px;
    min-width:55px
}

.top-actions>a {
    padding:7px 10px;
    border-radius:7px;
    border:1px solid transparent
}

.top-actions>a:hover {
    color:#fff;
    border-color:rgba(213,127,56,.23);
    background:rgba(115,61,24,.18)
}

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

.content {
    padding:12px 14px 28px
}

.flash {
    margin-bottom:10px;
    padding:11px 14px;
    border-radius:6px;
    background:rgba(66,42,25,.85);
    border:1px solid rgba(196,116,53,.35)
}

.flash.error {
    background:rgba(74,25,23,.82);
    border-color:rgba(235,92,80,.38)
}

.flash.success {
    background:rgba(21,62,41,.78);
    border-color:rgba(90,201,132,.33)
}

.wl-workspace {
    display:grid;
    grid-template-columns:minmax(370px,42%) minmax(440px,58%);
    gap:12px;
    min-height:calc(100vh - 104px)
}

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

.wl-preview-pane,
.mail-list,
.message-card,
.panel,
.compose-card,
.search,
.bulkbar {
    background:linear-gradient(155deg,var(--panel),rgba(16,14,12,.84));
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    backdrop-filter:var(--blur)
}

.wl-preview-pane {
    position:relative;
    overflow:hidden;
    border-radius:6px
}

.wl-preview-pane:after {
    content:"ᛉ  EIN WOLF KÄMPFT NICHT ALLEIN  ᛉ";
    position:absolute;
    right:25px;
    bottom:19px;
    color:rgba(204,133,67,.26);
    font-family:Georgia,"Times New Roman",serif;
    font-size:9px;
    letter-spacing:.22em
}

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

.wl-preview-empty .big {
    color:#aa682f;
    font-size:48px;
    opacity:.48
}

.wl-preview-empty b {
    display:block;
    margin:10px;
    color:#ddd1c4;
    font-family:Georgia,"Times New Roman",serif;
    font-size:18px
}

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

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

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

.search input::placeholder {
    color:#756d66
}

.search button {
    width:46px;
    border:0;
    background:transparent;
    color:#bb7b42
}

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

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

.bulkbar label,
.bulkbar button,
.message-actions a,
.message-actions button,
.compose-actions button,
.compose-actions a,
.admin-actions button {
    padding:8px 10px;
    border-radius:7px;
    color:#ddd3c7;
    background:rgba(33,27,23,.76);
    border:1px solid rgba(183,116,57,.22)
}

.bulkbar button:hover,
.message-actions a:hover,
.message-actions button:hover {
    color:#fff;
    background:rgba(110,55,21,.35);
    border-color:rgba(224,133,54,.48)
}

.mail-list {
    overflow:hidden;
    border-radius:6px
}

.mail-row {
    display:grid;
    grid-template-columns:38px 1fr;
    min-height:72px;
    border-bottom:1px solid rgba(190,128,67,.13);
    transition:.15s
}

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

.mail-row:hover {
    background:rgba(92,48,20,.23)
}

.mail-row.unread {
    background:linear-gradient(90deg,rgba(150,66,16,.35),rgba(55,34,21,.12))
}

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

.check input {
    accent-color:#d66d21
}

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

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

.sender {
    font-weight:650
}

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

.subject span {
    display:block;
    margin-top:2px;
    color:#7c7269;
    font-size:10px
}

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

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

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

.empty b {
    color:#e3d6c9;
    font-size:17px
}

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

.pager a {
    color:#d98a45
}

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

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

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

.message-card {
    position:relative;
    overflow:hidden;
    min-height:calc(100vh - 151px);
    padding:28px;
    border-radius:6px
}

.message-card:before {
    content:"ᛉ";
    position:absolute;
    right:9%;
    top:25%;
    color:rgba(187,112,48,.035);
    font-family:Georgia,"Times New Roman",serif;
    font-size:260px;
    pointer-events:none
}

.message-card h2 {
    position:relative;
    margin:0 0 21px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:26px;
    color:#f0e5d7
}

.message-meta {
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    gap:5px 20px;
    padding-bottom:19px;
    color:#a99d91;
    border-bottom:1px solid rgba(190,126,62,.18)
}

.message-meta b {
    color:#dfd3c5
}

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

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

.attachments {
    position:relative;
    padding-top:17px;
    border-top:1px solid rgba(190,126,62,.18)
}

.attachments a {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:4px;
    padding:10px 12px;
    border-radius:7px;
    background:rgba(44,34,26,.72);
    border:1px solid rgba(193,122,61,.24)
}

.attachments small {
    color:#9b8d80
}

.panel,
.compose-card {
    padding:23px;
    border-radius:6px
}

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

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

.compose-card input,
.compose-card textarea,
.admin-create input,
.admin-create select,
.admin-actions input,
.login-card input,
.inline-form input {
    width:100%;
    padding:11px 12px;
    outline:none;
    color:#eee6dc;
    background:rgba(10,10,9,.82);
    border:1px solid rgba(182,113,51,.27);
    border-radius:7px
}

.compose-card input:focus,
.compose-card textarea:focus,
.login-card input:focus {
    border-color:#d7772b;
    box-shadow:0 0 0 3px rgba(220,105,29,.1)
}

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

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

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

.primary {
    padding:10px 14px!important;
    border-radius:7px!important;
    color:#fff!important;
    font-weight:750;
    background:linear-gradient(180deg,#ca631a,#913b0c)!important;
    border:1px solid rgba(255,164,78,.55)!important;
    box-shadow:0 8px 24px rgba(184,66,7,.2)
}

.panel {
    margin-bottom:14px
}

.panel h2 {
    margin:0;
    font-family:Georgia,"Times New Roman",serif
}

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

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

.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%;
    min-width:850px;
    border-collapse:collapse
}

.admin-table th,
.admin-table td {
    padding:13px 10px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid rgba(190,126,62,.15)
}

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

.status {
    display:inline-flex;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(74,63,54,.45);
    color:#c9bcaf;
    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(141,75,31,.44);
    color:#e7b47e
}

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

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

.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;
    border-radius:7px;
    background:rgba(43,33,25,.64);
    border:1px solid var(--line)
}

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

/* LOGIN */
.login-body {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        linear-gradient(rgba(5,4,3,.34),rgba(5,4,3,.48)),
        url('/assets/eldrvarn/img/login-bg.jpg') center/cover fixed no-repeat;
    overflow:hidden
}

.login-body:before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(0,0,0,.45),transparent 25%,transparent 75%,rgba(0,0,0,.52)),
        radial-gradient(circle at 24% 82%,rgba(255,102,12,.11),transparent 18%)
}

.login-scene {
    position:relative;
    z-index:2;
    width:min(980px,100%);
    min-height:620px;
    display:grid;
    place-items:center
}

.login-scene:before,
.login-scene:after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:32%;
    opacity:.82;
    pointer-events:none
}

.login-scene:before {
    left:0;
    background:
        radial-gradient(circle at 35% 76%,rgba(255,106,15,.18),transparent 18%),
        linear-gradient(90deg,rgba(37,19,9,.54),transparent)
}

.login-scene:after {
    right:0;
    background:
        radial-gradient(circle at 70% 22%,rgba(214,118,44,.10),transparent 20%),
        linear-gradient(270deg,rgba(34,24,16,.48),transparent)
}

.login-card {
    position:relative;
    z-index:3;
    width:min(390px,100%);
    padding:30px 34px 28px;
    text-align:center;
    color:#eee5db;
    background:
        linear-gradient(165deg,rgba(17,14,12,.97),rgba(8,8,7,.97)),
        repeating-linear-gradient(90deg,rgba(190,119,51,.03) 0 1px,transparent 1px 8px);
    border:1px solid rgba(183,109,47,.42);
    border-radius:6px;
    box-shadow:
        0 38px 110px rgba(0,0,0,.68),
        inset 0 0 45px rgba(135,64,18,.07)
}

.login-card:before {
    content:"";
    position:absolute;
    inset:8px;
    pointer-events:none;
    border:1px solid rgba(190,116,52,.12);
    border-radius:5px
}

.login-logo {
    position:relative;
    z-index:2;
    width:180px;
    height:180px;
    margin:0 auto 2px;
    display:grid;
    place-items:center;
    filter:drop-shadow(0 15px 30px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(204,105,29,.12))
}

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

.login-card h1 {
    position:relative;
    z-index:2;
    margin:-8px 0 0;
    color:#e8bc89;
    font-family:Georgia,"Times New Roman",serif;
    font-size:29px;
    letter-spacing:.08em
}

.login-card>p {
    position:relative;
    z-index:2;
    margin:4px 0 22px;
    color:#d27c32;
    font-family:Georgia,"Times New Roman",serif;
    font-size:9px;
    letter-spacing:.23em
}

.login-card form {
    position:relative;
    z-index:2;
    display:grid;
    gap:13px;
    text-align:left
}

.login-card label {
    font-size:11px;
    color:#a99c90
}

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

.login-domains {
    position:relative;
    z-index:2;
    margin-top:20px;
    padding-top:15px;
    color:#b47740;
    border-top:1px solid rgba(184,111,49,.18);
    font-family:Georgia,"Times New Roman",serif;
    font-size:8px;
    letter-spacing:.16em
}

@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
    }

    .sidebar {
        position:fixed;
        left:-290px;
        top:0;
        width:258px;
        height:100vh;
        transition:left .2s;
        z-index:40
    }

    .menu-open .sidebar {
        left:0
    }

    .topbar {
        padding:0 14px
    }

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

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

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

    .sender,
    .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) {
    .content {
        padding:8px 7px 24px
    }

    .topbar {
        height:60px
    }

    .brand-mark {
        width:116px;
        height:116px
    }

    .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-body {
        padding:12px
    }

    .login-scene {
        min-height:auto
    }

    .login-card {
        padding:24px 20px
    }

    .login-logo {
        width:150px;
        height:150px
    }
}


/* ===== ELDRVARN V2 – closer to approved visual mockup ===== */
.theme-eldrvarn .sidebar {
    border-right:1px solid rgba(210,121,46,.55);
}

.theme-eldrvarn .topbar {
    background:rgba(8,8,7,.94);
    border-bottom:1px solid rgba(213,122,48,.40);
}

.theme-eldrvarn .mail-list,
.theme-eldrvarn .message-card,
.theme-eldrvarn .wl-preview-pane,
.theme-eldrvarn .panel,
.theme-eldrvarn .compose-card {
    background:linear-gradient(160deg,rgba(8,9,9,.94),rgba(13,12,10,.91));
    border:1px solid rgba(177,101,42,.35);
    box-shadow:0 18px 55px rgba(0,0,0,.48);
}

.theme-eldrvarn .mail-row.unread {
    background:linear-gradient(90deg,rgba(154,65,13,.52),rgba(42,27,18,.18));
    box-shadow:inset 3px 0 #ef7c24;
}

.theme-eldrvarn .brand-mark {
    width:154px;
    height:154px;
    margin-bottom:-4px;
}

.theme-eldrvarn .brand-copy b {
    font-size:25px;
    letter-spacing:.08em;
}

.theme-eldrvarn .login-card {
    width:min(420px,100%);
    border:1px solid rgba(214,126,54,.48);
    background:
        linear-gradient(165deg,rgba(15,12,10,.95),rgba(7,7,7,.96));
    box-shadow:
        0 42px 120px rgba(0,0,0,.75),
        inset 0 0 55px rgba(123,58,17,.08);
}

.theme-eldrvarn .login-logo {
    width:210px;
    height:210px;
    margin-bottom:-8px;
}

.theme-eldrvarn .login-card h1 {
    font-size:31px;
    color:#e6b27d;
}

.theme-eldrvarn .compose-btn,
.theme-eldrvarn .primary {
    background:linear-gradient(180deg,#c4631c,#87350b)!important;
    border-color:rgba(255,153,66,.58)!important;
}

.theme-eldrvarn .side-nav a.active {
    background:linear-gradient(90deg,rgba(179,73,13,.82),rgba(68,34,18,.34));
    border-color:rgba(239,132,41,.48);
}

.theme-eldrvarn .top-title h1,
.theme-eldrvarn .brand-copy b,
.theme-eldrvarn .login-card h1 {
    text-shadow:0 1px 0 #2a160b,0 0 18px rgba(213,118,37,.14);
}

/* 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(180deg,#b75a18,#7f350d);
    border:1px solid rgba(255,163,74,.56);
    color:#fff4e8;
    font-size:10px;
    line-height:1;
    font-weight:800;
    box-shadow:0 0 16px rgba(218,82,12,.16);
}
.folder-unread-badge.is-zero {
    display:none !important;
}
.mail-notification {
    position:relative;
}
.mail-notification-btn {
    position:relative;
    width:36px;
    height:36px;
    padding:0;
    display:grid;
    place-items:center;
    border-radius:7px;
    border:1px solid rgba(213,127,56,.22);
    background:rgba(91,49,21,.16);
    color:#e7b27e;
}
.mail-notification-btn:hover,
.mail-notification.open .mail-notification-btn {
    color:#fff;
    background:rgba(115,61,24,.3);
    border-color:rgba(226,134,57,.44);
}
.mail-notification-icon {
    font-size:16px;
}
.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:#bc5716;
    border:2px solid #0b0a09;
    color:#fff8f0;
    font-size:10px;
    font-weight:900;
    box-shadow:0 4px 16px rgba(0,0,0,.42);
}
.mail-notification-count.is-zero {
    display:none;
}
.mail-notification-menu {
    position:absolute;
    top:46px;
    right:0;
    width:min(330px,calc(100vw - 28px));
    padding:10px;
    border-radius:8px;
    border:1px solid rgba(190,112,49,.36);
    background:rgba(13,12,11,.98);
    box-shadow:0 22px 55px rgba(0,0,0,.55);
    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(191,123,58,.19);
}
.mail-notification-head b {
    color:#e7c098;
    font-family:Georgia,"Times New Roman",serif;
    font-size:13px;
}
.mail-notification-head span {
    color:#b7743b;
    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:6px;
    color:#ded4c8;
    background:rgba(255,255,255,.018);
    border:1px solid transparent;
}
.mail-notification-folders a:hover {
    background:rgba(115,61,24,.24);
    border-color:rgba(213,127,56,.18);
}
.mail-notification-folders a b {
    min-width:24px;
    padding:3px 7px;
    border-radius:999px;
    text-align:center;
    background:#963d0d;
    color:#fff5eb;
    font-size:10px;
}
.mail-notification-empty {
    padding:17px 10px;
    text-align:center;
    color:#8e8173;
    font-size:12px;
}
.mail-toast {
    position:fixed;
    right:22px;
    bottom:22px;
    max-width:min(390px,calc(100vw - 28px));
    padding:13px 16px;
    border-radius:7px;
    border:1px solid rgba(196,116,53,.4);
    background:rgba(18,14,11,.98);
    color:#ead0b5;
    box-shadow:0 18px 48px rgba(0,0,0,.55);
    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(205,180,120,.28);border-radius:12px;background:linear-gradient(135deg,rgba(31,29,27,.96),rgba(18,17,16,.96));box-shadow:0 10px 30px rgba(0,0,0,.18)}
.ai-translate-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px}.ai-translate-title b{font-size:14px;color:#f4ead2}.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:rgba(12,12,12,.72);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 Georgia,serif;background:rgba(0,0,0,.24);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}}