:root{
    --black:#050505;
    --black2:#0b0908;
    --panel:#11100f;
    --gold:#c9a24d;
    --gold2:#f3d27a;
    --rose:#5b1f2e;
    --wine:#2a0711;
    --text:#f4ead2;
    --muted:#b7a98a;
    --line:rgba(201,162,77,.34);
    --danger:#9f1239;
    --good:#15803d;
}
*{box-sizing:border-box}
html{background:#050505}
body{
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    color:var(--text);
    min-height:100vh;
    background-color:#050505;
    background-image:
        radial-gradient(circle at 12% 4%,rgba(91,31,46,.38),transparent 34%),
        radial-gradient(circle at 89% 96%,rgba(201,162,77,.15),transparent 32%),
        url("data:image/svg+xml,%3Csvg width='144' height='144' viewBox='0 0 144 144' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpolygon points='52,14 92,14 130,52 130,92 92,130 52,130 14,92 14,52' stroke='%23c9a24d' stroke-opacity='0.17' stroke-width='1.35'/%3E%3Cpolygon points='60,34 84,34 110,60 110,84 84,110 60,110 34,84 34,60' stroke='%23f3d27a' stroke-opacity='0.055' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='144' height='144' viewBox='0 0 144 144' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpolygon points='52,14 92,14 130,52 130,92 92,130 52,130 14,92 14,52' stroke='%23c9a24d' stroke-opacity='0.105' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E");
    background-size:auto,auto,144px 144px,144px 144px;
    background-position:0 0,0 0,0 0,72px 72px;
    background-attachment:fixed;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at center,transparent 36%,rgba(0,0,0,.74) 100%),
        linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.58));
    z-index:0;
}
body:after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.58;
    background-image:
        radial-gradient(circle at 9% 18%,rgba(243,210,122,.80) 0 1.2px,rgba(243,210,122,.18) 2.8px,transparent 6px),
        radial-gradient(circle at 17% 73%,rgba(201,162,77,.50) 0 1px,rgba(201,162,77,.13) 2.5px,transparent 5px),
        radial-gradient(circle at 29% 37%,rgba(255,238,180,.38) 0 .9px,rgba(255,238,180,.12) 2.2px,transparent 5px),
        radial-gradient(circle at 43% 91%,rgba(243,210,122,.62) 0 1px,rgba(243,210,122,.14) 2.5px,transparent 6px),
        radial-gradient(circle at 54% 24%,rgba(201,162,77,.44) 0 .9px,rgba(201,162,77,.12) 2.2px,transparent 5px),
        radial-gradient(circle at 68% 62%,rgba(255,238,180,.46) 0 1px,rgba(255,238,180,.13) 2.5px,transparent 6px),
        radial-gradient(circle at 83% 8%,rgba(243,210,122,.58) 0 1px,rgba(243,210,122,.12) 2.3px,transparent 5px),
        radial-gradient(circle at 93% 79%,rgba(201,162,77,.48) 0 .9px,rgba(201,162,77,.12) 2.4px,transparent 5px);
    background-size:573px 431px, 719px 593px, 887px 677px, 641px 811px, 997px 743px, 761px 521px, 883px 997px, 1019px 661px;
    filter:drop-shadow(0 0 6px rgba(243,210,122,.35));
    animation: goldDustFloat 95s ease-in-out infinite alternate;
}
@keyframes goldDustFloat{
    0%{transform:translate3d(0,0,0) rotate(0deg); opacity:.24;}
    30%{transform:translate3d(-17px,22px,0) rotate(.2deg); opacity:.38;}
    62%{transform:translate3d(27px,-15px,0) rotate(-.15deg); opacity:.29;}
    100%{transform:translate3d(-11px,34px,0) rotate(.1deg); opacity:.42;}
}
.topnav,.container,.footer{position:relative;z-index:1}
a{color:var(--gold2)}
.topnav{
    background:
        linear-gradient(90deg,rgba(5,5,5,.98),rgba(40,26,8,.92),rgba(5,5,5,.98)),
        url("data:image/svg+xml,%3Csvg width='88' height='44' viewBox='0 0 88 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='18 4 34 4 44 18 34 40 18 40 8 18' fill='none' stroke='%23c9a24d' stroke-opacity='.12'/%3E%3Cpolygon points='62 4 78 4 88 18 78 40 62 40 52 18' fill='none' stroke='%23c9a24d' stroke-opacity='.08'/%3E%3C/svg%3E");
    border-bottom:1px solid var(--line);
    padding:14px 34px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:10;
    backdrop-filter:blur(8px);
    box-shadow:0 14px 42px rgba(0,0,0,.38);
}
.topnav:before{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-1px;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold2),var(--gold),transparent);
    opacity:.85;
}
.topnav:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-13px;
    width:76px;
    height:26px;
    transform:translateX(-50%);
    background:linear-gradient(135deg,var(--gold2),var(--gold));
    clip-path:polygon(18% 0,82% 0,100% 50%,82% 100%,18% 100%,0 50%);
    opacity:.22;
}
.topnav a{
    color:var(--text);
    text-decoration:none;
    margin-left:18px;
    letter-spacing:.04em;
}
.topnav a:hover{color:var(--gold2)}
.brand{
    color:var(--gold2)!important;
    font-size:23px;
    font-weight:bold;
    margin-left:0!important;
    text-transform:uppercase;
    letter-spacing:.12em!important;
    display:inline-flex;
    align-items:center;
    gap:12px;
}
.octo-mark{
    width:42px;height:42px;
    display:inline-flex;align-items:center;justify-content:center;
    color:#090909;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:900;
    background:linear-gradient(135deg,var(--gold2),var(--gold));
    clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);
    box-shadow:0 0 24px rgba(201,162,77,.35);
}
.notification-link{position:relative;display:inline-flex;align-items:center;gap:6px}
.octo-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:28px;height:28px;padding:0 8px;
    background:linear-gradient(135deg,var(--gold2),var(--gold));
    color:#090909;font-weight:bold;
    clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);
    font-family:Arial,Helvetica,sans-serif;
}
.container{max-width:1180px;margin:auto;padding:38px 22px}
.hero{
    min-height:520px;display:flex;align-items:center;
    background:linear-gradient(135deg,rgba(5,5,5,.84),rgba(42,7,17,.78)),radial-gradient(circle at center,rgba(201,162,77,.18),transparent 42%);
    border:1px solid var(--line);border-radius:28px;padding:70px 48px;box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.hero-inner{max-width:760px}
.kicker{color:var(--gold2);letter-spacing:.22em;text-transform:uppercase;font-size:13px}
.hero h1{font-size:58px;line-height:1.02;margin:16px 0}
.quote{font-size:26px;color:var(--gold2);font-style:italic;line-height:1.45;margin:28px 0}
.subtle{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:28px}
.card{
    background:linear-gradient(180deg,rgba(17,16,15,.96),rgba(10,9,8,.96));
    border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 18px 45px rgba(0,0,0,.28);margin-bottom:20px;
}
.card h1,.card h2,.card h3{color:var(--gold2)}
.btn{
    display:inline-block;background:linear-gradient(135deg,var(--gold),#8a6928);color:#130f08!important;
    padding:12px 18px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-weight:bold;font-family:Arial,Helvetica,sans-serif;
}
.btn-danger{background:linear-gradient(135deg,#be123c,#7f1d1d);color:white!important}
.btn-good{background:linear-gradient(135deg,#16a34a,#14532d);color:white!important}
.btn-dark{background:#171717;color:var(--gold2)!important;border:1px solid var(--line)}
input,textarea,select{
    width:100%;padding:13px;margin:8px 0 17px;border:1px solid var(--line);background:#090909;color:var(--text);border-radius:10px;
}
textarea{min-height:140px}
table{width:100%;border-collapse:collapse;background:rgba(17,16,15,.96);border:1px solid var(--line);border-radius:14px;overflow:hidden}
th,td{text-align:left;padding:13px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:rgba(201,162,77,.13);color:var(--gold2)}
.alert{background:rgba(201,162,77,.14);border-left:5px solid var(--gold);padding:15px;border-radius:10px}
.message{padding:14px;border-radius:14px;margin:12px 0;background:#15110f;border:1px solid var(--line)}
.message.admin-bubble{background:linear-gradient(135deg,rgba(201,162,77,.95),rgba(138,105,40,.95));color:#090909}
.message.user-bubble{color:white}
.badge{display:inline-block;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--gold2);font-size:12px}
.footer{text-align:center;color:var(--muted);padding:36px}
.small{color:var(--muted);font-size:13px}
.admin-tabs-wrap{background:rgba(7,7,7,.72);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:14px 14px 0;margin-bottom:0}
.admin-tabs{display:flex;flex-wrap:wrap;gap:0;align-items:flex-end}
.admin-tabs a{text-decoration:none;padding:13px 16px;border:1px solid var(--line);border-bottom:none;border-radius:14px 14px 0 0;background:rgba(12,12,12,.86);color:var(--muted);margin-right:4px;position:relative;bottom:-1px}
.admin-tabs a:hover{color:var(--gold2);background:rgba(201,162,77,.10)}
.admin-tabs a.active{color:var(--gold2);background:linear-gradient(180deg,rgba(38,31,17,.96),rgba(17,16,15,.98));border-color:var(--gold);box-shadow:0 -8px 20px rgba(201,162,77,.08)}
.admin-panel-body{border:1px solid var(--line);border-radius:0 0 18px 18px;padding:24px;background:rgba(8,8,8,.38)}
.option-panel{border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0;background:rgba(201,162,77,.05)}
.option-panel label{display:block;font-weight:bold;color:var(--gold2);margin-bottom:8px}
.upload-help{background:rgba(91,31,46,.25);border:1px solid rgba(201,162,77,.22);border-radius:12px;padding:12px;color:var(--muted)}
img.post-img{max-width:100%;border-radius:14px;margin:12px 0;border:1px solid var(--line)}
.message-image{width:96px;height:96px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.25);cursor:zoom-in;transition:transform .18s ease;display:block;margin-top:8px}
.message-image:hover{transform:scale(1.02)}
.image-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:9999;display:flex;align-items:center;justify-content:center;padding:28px}
.image-lightbox img{max-width:95vw;max-height:92vh;border-radius:18px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.comment-list{margin-top:16px}
.comment-form.is-loading{opacity:.55;pointer-events:none}
.job-card{border-left:4px solid var(--gold)}
@media(max-width:760px){
    .topnav{display:block}.topnav div{margin-top:12px}.topnav a{display:inline-block;margin:6px 10px 6px 0}
    .hero h1{font-size:38px}.admin-tabs a{border-radius:999px;border-bottom:1px solid var(--line);margin-bottom:6px}.admin-tabs a.active{bottom:0}
}




.comment-modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.78);
    z-index:9998;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.comment-modal{
    max-width:520px;
    background:linear-gradient(180deg,rgba(17,16,15,.98),rgba(8,7,6,.98));
    border:1px solid var(--line);
    border-radius:20px;
    padding:26px;
    box-shadow:0 30px 90px rgba(0,0,0,.72);
}

.comment-modal h2{
    color:var(--gold2);
    margin-top:0;
}

.comment-modal-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}


.reaction-line{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0 8px;
}

.reaction-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:1px solid rgba(201,162,77,.22);
    background:rgba(201,162,77,.06);
    color:var(--muted);
    border-radius:999px;
    padding:4px 9px;
    font-size:13px;
    line-height:1;
    position:relative;
}

.reaction-chip.admin-hover{
    cursor:help;
}

.reaction-chip.admin-hover:hover{
    color:var(--gold2);
    border-color:rgba(201,162,77,.55);
    background:rgba(201,162,77,.12);
}

.reaction-tooltip{
    display:none;
    position:absolute;
    left:0;
    bottom:135%;
    min-width:190px;
    max-width:280px;
    background:#080706;
    color:var(--text);
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px;
    box-shadow:0 18px 45px rgba(0,0,0,.45);
    z-index:30;
    white-space:normal;
    font-size:13px;
    line-height:1.45;
}

.reaction-chip.admin-hover:hover .reaction-tooltip{
    display:block;
}

.reaction-actions{
    display:inline-flex;
    gap:6px;
    flex-wrap:wrap;
    margin:4px 0 14px;
}

.reaction-actions .btn{
    padding:7px 10px;
    font-size:13px;
}

.reaction-status{
    min-width:80px;
}


/* V14 compact reactions */
.journal-reactions{
    margin:10px 0 8px;
}

.reaction-counts{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    margin-bottom:8px;
}

.reaction-pill{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-height:24px;
    padding:3px 8px;
    border-radius:999px;
    border:1px solid rgba(201,162,77,.24);
    background:rgba(201,162,77,.055);
    color:var(--muted);
    font-size:12px;
    line-height:1;
    font-family:Arial,Helvetica,sans-serif;
}

.reaction-pill.is-admin{
    cursor:help;
}

.reaction-pill.is-admin:hover{
    color:var(--gold2);
    border-color:rgba(201,162,77,.70);
    background:rgba(201,162,77,.14);
}

.reaction-popover{
    display:none;
    position:absolute;
    left:0;
    bottom:calc(100% + 9px);
    min-width:210px;
    max-width:320px;
    background:#070605;
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px;
    color:var(--text);
    box-shadow:0 18px 45px rgba(0,0,0,.60);
    z-index:99;
    white-space:normal;
    font-size:12px;
    line-height:1.45;
    font-family:Georgia,"Times New Roman",serif;
}

.reaction-popover:after{
    content:"";
    position:absolute;
    left:18px;
    top:100%;
    border-width:7px 7px 0 7px;
    border-style:solid;
    border-color:var(--line) transparent transparent transparent;
}

.reaction-pill.is-admin:hover .reaction-popover{
    display:block;
}

.reaction-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    align-items:center;
}

.reaction-buttons .btn{
    padding:6px 9px;
    font-size:12px;
    line-height:1;
    border-radius:999px;
}

.reaction-status{
    font-size:12px;
    color:var(--muted);
}


/* V15 single reaction buttons */
.reaction-bar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    margin:10px 0 14px;
}

.reaction-button{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:28px;
    padding:5px 10px;
    border-radius:999px;
    border:1px solid rgba(201,162,77,.28);
    background:rgba(201,162,77,.065);
    color:var(--muted);
    font-size:13px;
    line-height:1;
    font-family:Arial,Helvetica,sans-serif;
    cursor:pointer;
}

.reaction-button:hover{
    color:var(--gold2);
    border-color:rgba(201,162,77,.70);
    background:rgba(201,162,77,.14);
}

.reaction-icon{
    font-size:14px;
}

.reaction-number{
    font-weight:700;
}

.reaction-button.is-admin{
    cursor:help;
}

.reaction-button .reaction-popover{
    display:none;
    position:absolute;
    left:0;
    bottom:calc(100% + 9px);
    min-width:210px;
    max-width:320px;
    background:#070605;
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px;
    color:var(--text);
    box-shadow:0 18px 45px rgba(0,0,0,.60);
    z-index:99;
    white-space:normal;
    font-size:12px;
    line-height:1.45;
    font-family:Georgia,"Times New Roman",serif;
}

.reaction-button.is-admin:hover .reaction-popover{
    display:block;
}

.reaction-button.is-loading{
    opacity:.55;
    pointer-events:none;
}


/* V16 visual identity: luxury octagon field + randomized moving gold stars */
body{
    background-color:#040404!important;
    background-image:
        radial-gradient(circle at 12% 8%,rgba(91,31,46,.34),transparent 32%),
        radial-gradient(circle at 90% 92%,rgba(201,162,77,.15),transparent 34%),
        url("data:image/svg+xml,%3Csvg width='180' height='156' viewBox='0 0 180 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpolygon points='54,10 126,10 170,54 170,102 126,146 54,146 10,102 10,54' stroke='%23c9a24d' stroke-opacity='0.16' stroke-width='1.4'/%3E%3Cpolygon points='72,34 108,34 138,64 138,92 108,122 72,122 42,92 42,64' stroke='%23f3d27a' stroke-opacity='0.055' stroke-width='1'/%3E%3Cpath d='M54 10 L72 34 M126 10 L108 34 M170 54 L138 64 M170 102 L138 92 M126 146 L108 122 M54 146 L72 122 M10 102 L42 92 M10 54 L42 64' stroke='%23c9a24d' stroke-opacity='0.045'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='180' height='156' viewBox='0 0 180 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpolygon points='54,10 126,10 170,54 170,102 126,146 54,146 10,102 10,54' stroke='%23c9a24d' stroke-opacity='0.095' stroke-width='1.1'/%3E%3Ccircle cx='90' cy='78' r='2' fill='%23c9a24d' fill-opacity='0.12'/%3E%3C/g%3E%3C/svg%3E")!important;
    background-size:auto,auto,180px 156px,180px 156px!important;
    background-position:0 0,0 0,0 0,90px 78px!important;
    background-attachment:fixed!important;
}

body:before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    pointer-events:none!important;
    z-index:0!important;
    background:
        radial-gradient(circle at center,transparent 34%,rgba(0,0,0,.75) 100%),
        linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.62))!important;
}

body:after{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    pointer-events:none!important;
    z-index:0!important;
    opacity:.70!important;
    background-image:
        radial-gradient(circle at 8% 18%,rgba(243,210,122,.95) 0 1px,rgba(243,210,122,.38) 2.5px,transparent 7px),
        radial-gradient(circle at 23% 71%,rgba(201,162,77,.78) 0 1px,rgba(201,162,77,.22) 2.8px,transparent 8px),
        radial-gradient(circle at 37% 41%,rgba(255,238,180,.60) 0 .9px,rgba(255,238,180,.20) 2.4px,transparent 7px),
        radial-gradient(circle at 51% 88%,rgba(243,210,122,.75) 0 1.1px,rgba(243,210,122,.22) 2.9px,transparent 8px),
        radial-gradient(circle at 64% 27%,rgba(201,162,77,.70) 0 .9px,rgba(201,162,77,.18) 2.4px,transparent 7px),
        radial-gradient(circle at 78% 61%,rgba(255,238,180,.68) 0 1px,rgba(255,238,180,.20) 2.7px,transparent 8px),
        radial-gradient(circle at 89% 13%,rgba(243,210,122,.78) 0 1px,rgba(243,210,122,.18) 2.7px,transparent 7px),
        radial-gradient(circle at 96% 83%,rgba(201,162,77,.70) 0 .9px,rgba(201,162,77,.18) 2.5px,transparent 7px)!important;
    background-size:631px 487px, 823px 691px, 977px 739px, 701px 863px, 1081px 797px, 859px 557px, 941px 1051px, 1123px 719px!important;
    filter:drop-shadow(0 0 5px rgba(243,210,122,.75)) drop-shadow(0 0 12px rgba(201,162,77,.35))!important;
    animation: v16GoldStars 38s ease-in-out infinite alternate!important;
}

@keyframes v16GoldStars{
    0%{
        transform:translate3d(0,0,0) scale(1);
        opacity:.36;
        background-position:0 0, 60px 80px, 120px 30px, 40px 220px, 300px 90px, 180px 300px, 440px 20px, 260px 420px;
    }
    23%{
        transform:translate3d(-18px,14px,0) scale(1.004);
        opacity:.75;
        background-position:90px 40px, 30px 170px, 210px 140px, 120px 300px, 410px 170px, 260px 370px, 520px 90px, 340px 500px;
    }
    51%{
        transform:translate3d(26px,-19px,0) scale(.998);
        opacity:.45;
        background-position:150px 110px, 150px 250px, 310px 80px, 220px 410px, 500px 260px, 380px 470px, 610px 210px, 460px 590px;
    }
    77%{
        transform:translate3d(-7px,28px,0) scale(1.006);
        opacity:.82;
        background-position:260px 160px, 230px 330px, 390px 210px, 310px 490px, 620px 350px, 470px 560px, 730px 310px, 580px 660px;
    }
    100%{
        transform:translate3d(14px,-8px,0) scale(1);
        opacity:.54;
        background-position:340px 230px, 330px 440px, 510px 310px, 430px 610px, 740px 460px, 590px 690px, 860px 430px, 700px 780px;
    }
}

/* V16 header and emblem */
.topnav{
    background:
        linear-gradient(90deg,rgba(3,3,3,.98),rgba(39,26,8,.95),rgba(3,3,3,.98)),
        url("data:image/svg+xml,%3Csvg width='156' height='52' viewBox='0 0 156 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c9a24d' stroke-opacity='.12'%3E%3Cpolygon points='22 4 42 4 56 18 56 34 42 48 22 48 8 34 8 18'/%3E%3Cpolygon points='100 4 120 4 134 18 134 34 120 48 100 48 86 34 86 18'/%3E%3C/g%3E%3C/svg%3E")!important;
}

.brand{
    gap:14px!important;
}

.octo-mark{
    width:54px!important;
    height:54px!important;
    background:none!important;
    color:transparent!important;
    clip-path:none!important;
    box-shadow:none!important;
    position:relative!important;
    flex:0 0 54px!important;
}

.octo-mark:before,
.octo-mark:after{
    content:""!important;
    position:absolute!important;
    inset:4px!important;
    border:2px solid rgba(243,210,122,.95)!important;
    clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%)!important;
    background:radial-gradient(circle at center,rgba(243,210,122,.26),rgba(201,162,77,.08) 45%,transparent 65%)!important;
    filter:drop-shadow(0 0 8px rgba(243,210,122,.72)) drop-shadow(0 0 18px rgba(201,162,77,.38))!important;
}

.octo-mark:after{
    inset:14px!important;
    border-color:rgba(201,162,77,.75)!important;
    transform:rotate(22.5deg)!important;
    background:rgba(201,162,77,.10)!important;
}

.brand span:last-child{
    text-shadow:0 0 10px rgba(243,210,122,.28),0 0 22px rgba(201,162,77,.16)!important;
}


/* V17 brighter octagon field + hollow gold honeycomb emblem */
body{
    background-image:
        radial-gradient(circle at 12% 8%,rgba(91,31,46,.34),transparent 32%),
        radial-gradient(circle at 90% 92%,rgba(201,162,77,.16),transparent 34%),
        url("data:image/svg+xml,%3Csvg width='180' height='156' viewBox='0 0 180 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpolygon points='54,10 126,10 170,54 170,102 126,146 54,146 10,102 10,54' stroke='%23c9a24d' stroke-opacity='0.30' stroke-width='1.55'/%3E%3Cpolygon points='72,34 108,34 138,64 138,92 108,122 72,122 42,92 42,64' stroke='%23f3d27a' stroke-opacity='0.12' stroke-width='1.1'/%3E%3Cpath d='M54 10 L72 34 M126 10 L108 34 M170 54 L138 64 M170 102 L138 92 M126 146 L108 122 M54 146 L72 122 M10 102 L42 92 M10 54 L42 64' stroke='%23c9a24d' stroke-opacity='0.10'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='180' height='156' viewBox='0 0 180 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpolygon points='54,10 126,10 170,54 170,102 126,146 54,146 10,102 10,54' stroke='%23c9a24d' stroke-opacity='0.18' stroke-width='1.25'/%3E%3Ccircle cx='90' cy='78' r='2' fill='%23c9a24d' fill-opacity='0.18'/%3E%3C/g%3E%3C/svg%3E")!important;
}

/* Logo is a small hollow honeycomb cluster, inspired by the uploaded image */
.octo-mark{
    width:76px!important;
    height:46px!important;
    background:none!important;
    color:transparent!important;
    clip-path:none!important;
    box-shadow:none!important;
    position:relative!important;
    flex:0 0 76px!important;
    filter:drop-shadow(0 0 7px rgba(243,210,122,.65)) drop-shadow(0 0 18px rgba(201,162,77,.32))!important;
}

.octo-mark:before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:74px 44px!important;
    background-image:url("data:image/svg+xml,%3Csvg width='148' height='88' viewBox='0 0 148 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23fff0b0'/%3E%3Cstop offset='.48' stop-color='%23c9a24d'/%3E%3Cstop offset='1' stop-color='%237a5818'/%3E%3C/linearGradient%3E%3Cfilter id='s'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2.2' flood-color='%23f3d27a' flood-opacity='.55'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='rgba(201,162,77,.06)' stroke='url(%23g)' stroke-width='4' filter='url(%23s)' stroke-linejoin='round'%3E%3Cpolygon points='26,4 46,4 58,22 46,40 26,40 14,22'/%3E%3Cpolygon points='66,4 86,4 98,22 86,40 66,40 54,22'/%3E%3Cpolygon points='106,4 126,4 138,22 126,40 106,40 94,22'/%3E%3Cpolygon points='46,42 66,42 78,60 66,78 46,78 34,60'/%3E%3Cpolygon points='86,42 106,42 118,60 106,78 86,78 74,60'/%3E%3C/g%3E%3C/svg%3E")!important;
}

.octo-mark:after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:radial-gradient(circle at 50% 45%,rgba(243,210,122,.22),transparent 62%)!important;
    border:0!important;
    transform:none!important;
    clip-path:none!important;
}

.brand span:last-child{
    padding-left:2px!important;
}


/* V18 final logo: gold connected octagon/hexagon network */
.octo-mark{
    width:118px!important;
    height:58px!important;
    background:none!important;
    color:transparent!important;
    clip-path:none!important;
    box-shadow:none!important;
    position:relative!important;
    flex:0 0 118px!important;
    filter:
        drop-shadow(0 0 7px rgba(243,210,122,.70))
        drop-shadow(0 0 22px rgba(201,162,77,.36))!important;
}

.octo-mark:before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:116px 56px!important;
    background-image:url("data:image/svg+xml,%3Csvg width='232' height='112' viewBox='0 0 232 112' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gold' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23fff3bd'/%3E%3Cstop offset='.34' stop-color='%23f3d27a'/%3E%3Cstop offset='.66' stop-color='%23c9a24d'/%3E%3Cstop offset='1' stop-color='%236f4d12'/%3E%3C/linearGradient%3E%3CradialGradient id='fill' cx='.45' cy='.38' r='.7'%3E%3Cstop stop-color='%23f3d27a' stop-opacity='.28'/%3E%3Cstop offset='.55' stop-color='%23c9a24d' stop-opacity='.08'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='glow'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2.2' flood-color='%23f3d27a' flood-opacity='.72'/%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='6' flood-color='%23c9a24d' flood-opacity='.28'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23glow)'%3E%3Cg stroke='url(%23gold)' stroke-width='3.2' fill='url(%23fill)' stroke-linejoin='round'%3E%3Cpolygon points='34,10 54,10 68,24 68,44 54,58 34,58 20,44 20,24'/%3E%3Cpolygon points='78,6 104,6 122,24 122,50 104,68 78,68 60,50 60,24'/%3E%3Cpolygon points='132,16 152,16 166,30 166,50 152,64 132,64 118,50 118,30'/%3E%3Cpolygon points='174,6 202,6 222,26 222,54 202,74 174,74 154,54 154,26'/%3E%3Cpolygon points='48,58 70,58 86,74 86,96 70,112 48,112 32,96 32,74' opacity='.82'/%3E%3Cpolygon points='106,64 130,64 148,82 148,106 130,124 106,124 88,106 88,82' transform='translate(0 -18)' opacity='.62'/%3E%3C/g%3E%3Cg stroke='%23f8e6a0' stroke-opacity='.42' stroke-width='1.2' fill='none'%3E%3Cpath d='M68 34 L60 34'/%3E%3Cpath d='M122 36 L118 40'/%3E%3Cpath d='M166 40 L154 40'/%3E%3Cpath d='M70 58 L88 74'/%3E%3C/g%3E%3Cg fill='%23fff1b8' fill-opacity='.92'%3E%3Ccircle cx='68' cy='34' r='2.2'/%3E%3Ccircle cx='122' cy='36' r='1.8'/%3E%3Ccircle cx='166' cy='40' r='2'/%3E%3Ccircle cx='88' cy='74' r='1.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")!important;
    animation: networkLogoGlow 7s ease-in-out infinite alternate!important;
}

.octo-mark:after{
    content:""!important;
    position:absolute!important;
    inset:-8px!important;
    background:
        radial-gradient(circle at 58% 42%,rgba(243,210,122,.20),transparent 58%),
        radial-gradient(circle at 78% 36%,rgba(201,162,77,.13),transparent 52%)!important;
    border:0!important;
    transform:none!important;
    clip-path:none!important;
    pointer-events:none!important;
}

@keyframes networkLogoGlow{
    0%{opacity:.78; transform:translateY(0);}
    45%{opacity:1; transform:translateY(-1px);}
    100%{opacity:.86; transform:translateY(0);}
}

.brand span:last-child{
    margin-left:2px!important;
}


/* V19: use actual gold network image pattern as site background */
body{
    background-color:#050505!important;
    background-image:
        linear-gradient(90deg,rgba(0,0,0,.50),rgba(0,0,0,.18),rgba(0,0,0,.46)),
        radial-gradient(circle at 15% 12%,rgba(91,31,46,.18),transparent 32%),
        url("/assets/img/gold-network-background.png")!important;
    background-size:cover,cover,cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-attachment:fixed!important;
}

body:before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    pointer-events:none!important;
    z-index:0!important;
    background:
        radial-gradient(circle at center,transparent 42%,rgba(0,0,0,.70) 100%),
        linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.58))!important;
}

body:after{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    pointer-events:none!important;
    z-index:0!important;
    opacity:.24!important;
    background-image:
        radial-gradient(circle at 8% 18%,rgba(243,210,122,.80) 0 1px,rgba(243,210,122,.20) 2.5px,transparent 7px),
        radial-gradient(circle at 23% 71%,rgba(201,162,77,.62) 0 1px,rgba(201,162,77,.15) 2.8px,transparent 8px),
        radial-gradient(circle at 78% 61%,rgba(255,238,180,.50) 0 1px,rgba(255,238,180,.12) 2.7px,transparent 8px);
    background-size:631px 487px,823px 691px,859px 557px!important;
    filter:drop-shadow(0 0 5px rgba(243,210,122,.55))!important;
    animation:v16GoldStars 42s ease-in-out infinite alternate!important;
}

/* Make cards readable over the image background */
.card,
.admin-panel-body,
table{
    background:linear-gradient(180deg,rgba(12,11,10,.94),rgba(5,5,5,.92))!important;
    backdrop-filter:blur(3px);
}

.topnav{
    background:
        linear-gradient(90deg,rgba(3,3,3,.98),rgba(39,26,8,.94),rgba(3,3,3,.98))!important;
}


/* V20 actual image logo in header */
.brand-with-logo{
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    text-decoration:none!important;
    letter-spacing:normal!important;
}

.network-logo{
    width:132px;
    height:54px;
    object-fit:contain;
    display:block;
    filter:
        drop-shadow(0 0 8px rgba(243,210,122,.72))
        drop-shadow(0 0 22px rgba(201,162,77,.38));
}

.brand-copy{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.brand-title{
    color:#f3d27a;
    font-size:22px;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:bold;
    text-shadow:0 0 12px rgba(243,210,122,.30);
}

.brand-subtitle{
    margin-top:5px;
    color:#a88b47;
    font-size:10px;
    letter-spacing:.20em;
    text-transform:uppercase;
    font-family:Arial,Helvetica,sans-serif;
}

.octo-mark{
    display:none!important;
}

@media(max-width:760px){
    .network-logo{
        width:104px;
        height:44px;
    }
    .brand-title{
        font-size:18px;
    }
    .brand-subtitle{
        font-size:9px;
    }
}


/* V21: softer wide logo + slow pulsing background */
body{
    background-image:
        linear-gradient(90deg,rgba(0,0,0,.56),rgba(0,0,0,.22),rgba(0,0,0,.48)),
        radial-gradient(circle at 15% 12%,rgba(91,31,46,.16),transparent 32%),
        url("/assets/img/gold-network-background.png")!important;
    background-size:cover,cover,cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-attachment:fixed!important;
    
}

50%{
        filter:brightness(1.10) saturate(1.12);
    }
}

body:before{
    
}

50%{
        opacity:.74;
        background:
            radial-gradient(circle at center,transparent 46%,rgba(0,0,0,.60) 100%),
            linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.48))!important;
    }
}

/* Remove the square cropped image logo */
.network-logo,
.octo-mark{
    display:none!important;
}

/* Wide connected gold network mark; transparent, no square crop */
.network-logo-css{
    width:154px;
    height:58px;
    flex:0 0 154px;
    display:block;
    position:relative;
    background-repeat:no-repeat;
    background-position:center;
    background-size:154px 58px;
    filter:
        drop-shadow(0 0 8px rgba(243,210,122,.75))
        drop-shadow(0 0 20px rgba(201,162,77,.42));
    animation: networkMarkPulse 7s ease-in-out infinite alternate;
    background-image:url("data:image/svg+xml,%3Csvg width='308' height='116' viewBox='0 0 308 116' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gold' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23fff5bf'/%3E%3Cstop offset='.42' stop-color='%23f3d27a'/%3E%3Cstop offset='.72' stop-color='%23c9a24d'/%3E%3Cstop offset='1' stop-color='%237a5818'/%3E%3C/linearGradient%3E%3CradialGradient id='soft' cx='.5' cy='.5' r='.65'%3E%3Cstop stop-color='%23f3d27a' stop-opacity='.20'/%3E%3Cstop offset='.62' stop-color='%23c9a24d' stop-opacity='.06'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='glow'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2.2' flood-color='%23f3d27a' flood-opacity='.72'/%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='5.5' flood-color='%23c9a24d' flood-opacity='.30'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23glow)' fill='url(%23soft)' stroke='url(%23gold)' stroke-width='3' stroke-linejoin='round'%3E%3Cpolygon points='32,18 52,18 66,32 66,52 52,66 32,66 18,52 18,32' opacity='.68'/%3E%3Cpolygon points='82,10 110,10 130,30 130,58 110,78 82,78 62,58 62,30'/%3E%3Cpolygon points='142,24 164,24 180,40 180,62 164,78 142,78 126,62 126,40' opacity='.82'/%3E%3Cpolygon points='194,8 226,8 250,32 250,64 226,88 194,88 170,64 170,32'/%3E%3Cpolygon points='252,34 276,34 292,50 292,74 276,90 252,90 236,74 236,50' opacity='.76'/%3E%3Cpolygon points='54,70 76,70 92,86 92,108 76,124 54,124 38,108 38,86' transform='translate(0 -18)' opacity='.55'/%3E%3Cpolygon points='126,78 146,78 160,92 160,112 146,126 126,126 112,112 112,92' transform='translate(0 -24)' opacity='.50'/%3E%3C/g%3E%3Cg stroke='%23f8e6a0' stroke-width='1.4' stroke-opacity='.48' fill='none'%3E%3Cpath d='M66 42 L62 42'/%3E%3Cpath d='M130 48 L126 51'/%3E%3Cpath d='M180 51 L170 48'/%3E%3Cpath d='M250 52 L236 62'/%3E%3Cpath d='M92 82 L112 78'/%3E%3C/g%3E%3Cg fill='%23fff1b8' fill-opacity='.96'%3E%3Ccircle cx='66' cy='42' r='2.5'/%3E%3Ccircle cx='130' cy='48' r='2.1'/%3E%3Ccircle cx='180' cy='51' r='2.1'/%3E%3Ccircle cx='250' cy='52' r='2.4'/%3E%3Ccircle cx='92' cy='82' r='1.9'/%3E%3Ccircle cx='112' cy='78' r='1.9'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes networkMarkPulse{
    0%{
        opacity:.82;
        transform:translateY(0) scale(.985);
        filter:
            drop-shadow(0 0 6px rgba(243,210,122,.55))
            drop-shadow(0 0 16px rgba(201,162,77,.25));
    }
    100%{
        opacity:1;
        transform:translateY(-1px) scale(1);
        filter:
            drop-shadow(0 0 10px rgba(243,210,122,.82))
            drop-shadow(0 0 26px rgba(201,162,77,.45));
    }
}

.brand-with-logo{
    display:flex!important;
    align-items:center!important;
    gap:16px!important;
}

.brand-copy{
    display:flex!important;
    flex-direction:column!important;
    line-height:1.05!important;
}

.brand-title{
    color:#f3d27a!important;
    font-size:22px!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    font-weight:bold!important;
    text-shadow:0 0 12px rgba(243,210,122,.30)!important;
}

.brand-subtitle{
    margin-top:5px!important;
    color:#a88b47!important;
    font-size:10px!important;
    letter-spacing:.20em!important;
    text-transform:uppercase!important;
    font-family:Arial,Helvetica,sans-serif!important;
}

@media(max-width:760px){
    .network-logo-css{
        width:118px;
        height:46px;
        flex-basis:118px;
        background-size:118px 46px;
    }
}


/* V23 language switcher */
.language-switcher{
    display:inline-flex;
    gap:6px;
    margin-left:18px;
    vertical-align:middle;
}

.language-switcher a{
    margin-left:0!important;
    text-decoration:none;
    font-size:20px;
    line-height:1;
    opacity:.55;
    padding:5px 6px;
    border-radius:999px;
    border:1px solid transparent;
}

.language-switcher a:hover,
.language-switcher a.active-lang{
    opacity:1;
    border-color:rgba(201,162,77,.45);
    background:rgba(201,162,77,.10);
}