/* cosmopolis_site/css/main.css — Часть 1 */
:root {
--bg-dark: #05050d;
--panel-dark: #0b0b16;
--accent-blue: #caa684; /* ИСПРАВЛЕНО: Премиальный ржаво-красный цвет Марса */
--accent-purple: #9980fa;
--text-light: #ffffff;
--text-muted: #a4a4c1;
--border-color: #1a1a3a;
}
body {
background-color: var(--bg-dark);
/* ИСПРАВЛЕНО: Абсолютный путь / для ЧПУ и облегченная маска для проявления SVG-панорамы 
*/
background-image: 
linear-gradient(to bottom, rgba(5, 5, 13, 0.4) 0%, rgba(5, 5, 13, 0.6) 100%),
url('/images/syrtis_major.svg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; /* Эффект скольжения контента над Марсом */
color: var(--text-light);
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: rgba(11, 11, 22, 0.6);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(15px); /* Размытие марсианского фона под шапкой */
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}
.brand-zone .studio {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 4px;
color: var(--text-muted);
display: block;
}
.brand-zone .title {
font-size: 20px;
font-weight: normal !important;
letter-spacing: 2px;
color: var(--text-light);
text-decoration: none !important;
outline: none;
}
nav a {
color: var(--text-muted);
text-decoration: none;
margin-left: 20px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.5px;
transition: color 0.3s;
}
nav a:hover, nav a.active {
color: var(--accent-blue);
}
.wrapper {
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}
footer {
background-color: rgba(2, 2, 6, 0.7); /* Полупрозрачный подвал */
border-top: 1px solid var(--border-color);
padding: 40px 20px;
margin-top: 80px;
text-align: left !important;
backdrop-filter: blur(10px);
}
.footer-credits {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 15px;
}
.footer-copy {
font-size: 12px;
color: #555570;
line-height: 1.8;
}
.footer-line {
width: 100% !important;
max-width: 1200px;
height: 1px;
background: var(--border-color) !important;
margin: 0 auto 30px auto !important;
}
.footer-docs {
margin: 0 0 20px 0 !important;
}
.footer-docs a {
margin: 0 30px 0 0 !important;
color: var(--text-muted) !important;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
transition: color 0.3s;
}
.footer-docs a:hover {
color: var(--accent-blue) !important;
text-decoration: underline !important;
}
.footer-menu-grid {
max-width: 1200px;
margin: 0 auto 40px auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
text-align: left;
}
.footer-menu-col h3 {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent-blue);
margin-bottom: 20px;
font-weight: bold;
text-shadow: 0 0 10px rgba(202, 166, 132, 0.3);
}
.footer-menu-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-menu-col ul li {
margin-bottom: 12px;
}
.footer-menu-col ul li a {
font-size: 13px;
color: var(--text-muted);
text-decoration: none;
letter-spacing: 1px;
transition: color 0.3s, text-shadow 0.3s;
}
.footer-menu-col ul li a:hover {
color: var(--text-light) !important;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
.hero-epic-title {
font-size: 54px;
font-weight: bold;
letter-spacing: 6px;
text-transform: uppercase;
text-align: center;
margin: 40px 0 10px 0;
background: linear-gradient(to right, #fff 30%, var(--accent-blue) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
text-align: center;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 4px;
color: var(--text-muted);
margin-bottom: 50px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 70px;
}
.feature-card {
background: linear-gradient(145deg, rgba(14, 14, 31, 0.6) 0%, rgba(11, 11, 22, 0.8) 100%);
border: 1px solid var(--border-color);
padding: 30px;
border-radius: 4px;
backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
.feature-card:hover {
border-color: var(--accent-blue);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 210, 211, 0.1);
}
.feature-num {
font-family: monospace;
font-size: 32px;
color: var(--accent-blue);
opacity: 0.9;
margin-bottom: 10px;
}
.feature-card h3 { margin: 0 0 15px 0; font-size: 18px; letter-spacing: 1px; }
.feature-card p { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.7; }
.cta-banner { border: 1px solid var(--accent-purple); background: rgba(153, 128, 250, 0.04); padding: 
50px; text-align: center; border-radius: 4px; margin-top: 60px; backdrop-filter: blur(8px); }
.cta-btn { display: inline-block; padding: 15px 40px; background: var(--accent-blue); color: var(--bg-dark); 
text-decoration: none; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; 
border-radius: 4px; margin-top: 20px; transition: all 0.3s; }
.cta-btn:hover { box-shadow: 0 0 20px var(--accent-blue); transform: scale(1.02); }
.teaser-section { background: rgba(11, 11, 22, 0.7); border: 1px solid var(--border-color); padding: 40px; 
text-align: center; border-radius: 4px; margin-bottom: 50px; backdrop-filter: blur(5px); }
.teaser-title { font-size: 11px; text-transform: uppercase; letter-spacing: 6px; color: var(--accent-blue); 
margin-bottom: 20px; }
.teaser-text { font-family: 'Courier New', monospace; font-size: 18px; color: var(--text-light); max-width: 
800px; margin: 0 auto; line-height: 1.8; }
.teaser-text span { display: block; margin-bottom: 15px; opacity: 0.9; }
.timeline-title { text-align: center; font-size: 28px; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 40px; }
.timeline-container { position: relative; border-left: 2px solid var(--border-color); margin-left: 20px; padding-left: 30px; }
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-item::before { content: ''; position: absolute; left: -36px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--bg-dark); border: 2px solid var(--accent-purple); }
.volume-tag { font-size: 10px; text-transform: uppercase; color: var(--accent-blue); letter-spacing: 2px; font-weight: bold; }
.volume-title { font-size: 18px; margin: 5px 0 10px 0; letter-spacing: 1px; }
.volume-desc { color: var(--text-muted); font-size: 14px; }
.lore-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; margin-top: 20px; }
.patent-sidebar { background: var(--panel-dark); border: 1px solid var(--border-color); padding: 20px; border-radius: 4px; backdrop-filter: blur(5px); }
.patent-tab { display: block; width: 100%; padding: 15px; background: transparent; border: none; border-left: 3px solid transparent; color: var(--text-muted); text-align: left; font-size: 14px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; }
.patent-tab:hover, .patent-tab.active { background: rgba(0, 210, 211, 0.05); color: var(--accent-blue); border-left-color: var(--accent-blue); }
.patent-content { background: var(--panel-dark); border: 1px solid var(--border-color); padding: 30px; border-radius: 4px; min-height: 300px; backdrop-filter: blur(5px); }
.patent-spec { font-family: 'Courier New', monospace; color: var(--accent-purple); font-size: 13px; margin-bottom: 20px; border-bottom: 1px dashed var(--border-color); padding-bottom: 10px; }
.bank-banner-container { width: 100%; margin-bottom: 40px; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; }
.bank-banner-container img { display: block; width: 100%; height: auto; }
.bank-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.calc-card { background: var(--panel-dark); border: 1px solid var(--border-color); padding: 30px; border-radius: 4px; backdrop-filter: blur(5px); }
.calc-group { margin-bottom: 20px; }
.calc-group label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 8px; }
.calc-input { width: 100%; padding: 12px; background: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-light); font-family: monospace; font-size: 16px; border-radius: 4px; box-sizing: border-box; }
.calc-input:focus { border-color: var(--accent-blue); outline: none; }
.rate-display { font-size: 24px; font-weight: bold; color: var(--accent-blue); font-family: monospace; margin-top: 10px; }
.map-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.map-canvas { background: rgba(2, 2, 6, 0.6); border: 1px solid var(--border-color); border-radius: 4px; position: relative; aspect-ratio: 4 / 3; overflow: hidden; backdrop-filter: blur(5px); }
.map-svg { width: 100%; height: 100%; }
.map-poi { cursor: pointer; transition: transform 0.3s; }
.map-poi:hover, .map-poi.active { transform: scale(1.1); transform-origin: center; }
.map-details-card { background: var(--panel-dark); border: 1px solid var(--border-color); padding: 30px; border-radius: 4px; backdrop-filter: blur(5px); }
.poi-description { display: none; }
.poi-description.active { display: block; }
.reader-layout { display: grid; grid-template-columns: 300px 1fr; gap: 30px; margin-top: 20px; }
.reader-sidebar { background: var(--panel-dark); border: 1px solid var(--border-color); padding: 20px; border-radius: 4px; max-height: 70vh; overflow-y: auto; backdrop-filter: blur(5px); }
.volume-select { width: 100%; padding: 10px; background: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 4px; margin-bottom: 20px; font-size: 14px; }
.chapter-list { list-style: none; padding: 0; margin: 0; }
.chapter-item { padding: 10px; border-bottom: 1px solid #111126; cursor: pointer; font-size: 13px; color: var(--text-muted); }
.chapter-item:hover, .chapter-item.active { color: var(--accent-blue); background: rgba(0, 210, 211, 0.03); }
.reader-viewport { background: var(--panel-dark); border: 1px solid var(--border-color); padding: 40px; border-radius: 4px; font-family: 'Georgia', serif; font-size: 18px; line-height: 1.8; color: #e2e2e2; backdrop-filter: blur(5px); }
.audio-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 20px; }
.audio-card { background: var(--panel-dark); border: 1px solid var(--border-color); padding: 30px; border-radius: 4px; text-align: center; backdrop-filter: blur(5px); }
.audio-player-ui { background: rgba(5, 5, 13, 0.5); border: 1px solid var(--border-color); border-radius: 4px; padding: 20px; margin-top: 20px; }
.player-controls { display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; }
.player-btn { background: transparent; border: 1px solid var(--accent-purple); color: var(--text-light); padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.player-btn:hover { background: var(--accent-purple); color: var(--bg-dark); }
.progress-bar-container { background: #111126; height: 6px; border-radius: 3px; width: 100%; overflow: hidden; position: relative; }
.progress-fill { background: var(--accent-blue); height: 100%; width: 0%; }
.theater-container { width: 100%; background: rgba(2, 2, 6, 0.6); border: 1px solid var(--border-color); border-radius: 4px; margin-bottom: 40px; aspect-ratio: 16 / 9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.video-placeholder-hud { text-align: center; padding: 20px; }
.play-icon-btn { width: 80px; height: 80px; border: 2px solid var(--accent-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; cursor: pointer; background: rgba(0, 210, 211, 0.05); }
.play-icon-btn:hover { background: var(--accent-blue); }
.play-icon-btn svg { fill: var(--text-light); margin-left: 5px; }
.play-icon-btn:hover svg { fill: var(--bg-dark); }
.episodes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.episode-card { background: var(--panel-dark); border: 1px solid var(--border-color); border-radius: 4px; padding: 20px; cursor: pointer; backdrop-filter: blur(5px); }
.episode-card:hover { border-color: var(--accent-purple); }
@media (max-width: 768px) {
body, html { overflow-x: hidden !important; width: 100% !important; position: relative !important; }
.wrapper { margin: 10px auto !important; padding: 0 10px !important; overflow-x: hidden !important; width: 100% !important; box-sizing: border-box !important; }
.hero-epic-title { font-size: 26px !important; letter-spacing: 2px !important; text-align: center !important; margin: 20px 0 10px 0 !important; }
.hero-subtitle { font-size: 11px !important; letter-spacing: 1px !important; text-align: center !important; margin-bottom: 30px !important; }
.nav-container { flex-direction: column !important; align-items: flex-start !important; flex-wrap: wrap !important; gap: 15px !important; padding: 15px !important; }
nav { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; width: 100% !important; }
nav a { margin-left: 0 !important; padding: 6px 0 !important; font-size: 13px !important; width: 100% !important; border-bottom: 1px dashed rgba(202, 166, 132, 0.2) !important; }
.features-grid, .bank-grid, .audio-layout, .map-layout, .reader-layout { grid-template-columns: 1fr !important; gap: 25px !important; }
.calc-card { text-align: left !important; padding: 20px !important; }
.calc-card div[style="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 15px !important; }
.calc-input { font-size: 15px !important; padding: 10px !important; }
.rate-display { font-size: 20px !important; }
.reader-viewport { padding: 25px 15px !important; font-size: 16.5px !important; text-align: left !important; }
footer { margin-top: 60px !important; padding: 30px 15px !important; text-align: left !important; }
.footer-line { margin: 0 0 20px 0 !important; }
.footer-docs { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
.footer-docs a { margin: 0 !important; }
.footer-menu-grid { grid-template-columns: 1fr !important; gap: 25px !important; }
nav a:hover, nav a.active { color: #caa684 !important; text-shadow: 0 0 10px rgba(202, 166, 132, 0.5) !important; }
.lore-grid { grid-template-columns: 1fr !important; gap: 20px !important; width: 100% !important; margin-top: 10px !important; overflow-x: hidden !important; }
.patent-sidebar { max-height: none !important; overflow: visible !important; padding: 12px !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; }
.patent-sidebar .patent-tab { margin-bottom: 0 !important; font-size: 11px !important; padding: 10px 8px !important; width: 100% !important; box-sizing: border-box !important; }
.patent-sidebar .patent-info-block { grid-column: span 2 !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px dashed var(--border-color) !important; text-align: center !important; }
.patent-content { margin: 0 !important; width: 100% !important; box-sizing: border-box !important; padding: 15px !important; min-height: auto !important; overflow-x: hidden !important; }
.patent-content * { max-width: 100% !important; box-sizing: border-box !important; }
#lore-welcome-screen { width: 100% !important; padding: 0 !important; margin: 0 !important; }
}
@media (min-width: 769px) {
.lore-grid { display: grid !important; grid-template-columns: 320px 1fr !important; gap: 30px !important; }
.patent-content { background: rgba(11, 11, 22, 0.7) !important; border: 1px solid var(--border-color) !important; padding: 35px !important; border-radius: 4px !important; backdrop-filter: blur(10px) !important; min-height: 480px !important; position: relative !important; }
}
.patent-sidebar .patent-tab[onclick*="node_suit"].active { color: #00f2ff !important; border-left-color: #00f2ff !important; background: rgba(0, 242, 255, 0.05) !important; }
.patent-sidebar .patent-tab[onclick*="node_suit"].active span { color: #00f2ff !important; text-shadow: 0 0 8px rgba(0, 242, 255, 0.6) !important; }

/* ==========================================================================
   ЭКОСИСТЕМА БАНКА ПОЛИС-КАПИТАЛ (ДОПОЛНЕНИЕ ДЛЯ АДАПТИВНОСТИ)
   ========================================================================== */

/* Общие контейнеры банка */
.bank-banner-outer {
    background: radial-gradient(circle at center, #121432 0%, #05050d 100%); 
    padding: 45px 40px; 
    text-align: center; 
    border-radius: 4px; 
    border: 1px solid var(--border-color); 
    box-shadow: 0 20px 50px rgba(0,0,0,0.85); 
    position: relative; 
    overflow: hidden;
}

.bank-grid-calc {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

.calc-card-right {
    background: rgba(11, 11, 22, 0.4); 
    text-align: left; 
    color: var(--text-muted); 
    width: 100%; 
    box-sizing: border-box;
}

.currency-grid-three {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; 
    margin-top: 20px; 
    text-align: left;
}

/* Крафтовый бланк финансового аудита */
.bank-document-blank {
    width: 100%; 
    max-width: 100%; 
    box-sizing: border-box; 
    background: #FFFFFF; 
    border: 1px solid #a68465; 
    padding: 50px 40px; 
    border-radius: 2px; 
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.15), 0 15px 35px rgba(0, 0, 0, 0.6); 
    position: relative; 
    color: #2c1d11; 
    font-family: 'Georgia', 'Times New Roman', serif; 
    overflow: hidden;
}

.bank-document-blank .watermark {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) rotate(-25deg); 
    font-family: 'Arial', sans-serif; 
    font-size: 8vw; 
    color: rgba(44, 29, 17, 0.03); 
    font-weight: bold; 
    pointer-events: none; 
    white-space: nowrap; 
    user-select: none;
}

/* Блок подписей и печати */
.signatures-container {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center; 
    gap: 30px; 
    border-top: 1px solid rgba(44, 29, 17, 0.3); 
    padding-top: 30px; 
    margin-top: 40px; 
    position: relative; 
    z-index: 10;
}

.sig-block {
    text-align: left; 
    min-width: 200px; 
    flex: 1;
}

.sig-block.right {
    text-align: right; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end;
}

.seal-block {
    width: 180px; 
    height: 180px; 
    flex-shrink: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    user-select: none; 
    margin: 10px auto;
}

/* Контейнер для скролла таблицы на мобильных */
.table-responsive-box {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 25px;
}

/* АДАПТИВНОСТЬ ПОД ТЕЛЕФОНЫ (Синхронизировано с вашим @media на 768px) */
@media (max-width: 768px) {
    .bank-banner-outer {
        padding: 30px 15px;
    }
    
    .bank-banner-outer h1 {
        font-size: 1.5rem !important;
        letter-spacing: 2px !important;
    }
    
    .bank-grid-calc {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .currency-grid-three {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .bank-document-blank {
        padding: 30px 15px !important;
    }
    
    .bank-document-blank .doc-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    
    .bank-document-blank .doc-header-meta {
        text-align: center !important;
        width: 100% !important;
    }
    
    .signatures-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 25px !important;
    }
    
    .sig-block, .sig-block.right {
        text-align: center !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .bank-document-blank .watermark {
        font-size: 12vw !important;
    }
}

/* Адаптивные стили для таблицы DePIN */
.adaptive-table {
    width: 100%;
    border-collapse: collapse;
    border-color: #a4a4c1;
}
.adaptive-table th, .adaptive-table td {
    padding: 10px;
    border: 1px solid #a4a4c1;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    color: #a4a4c1;
    text-align: left;
}
.adaptive-table th {
    background: rgba(11, 11, 22, 0.6);
    text-align: center;
}

@media (max-width: 768px) {
    .adaptive-table, .adaptive-table thead, .adaptive-table tbody, .adaptive-table th, .adaptive-table td, .adaptive-table tr {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .adaptive-table thead {
        display: none !important; /* Прячем шапку на смартфонах */
    }
    .adaptive-table tr {
        margin-bottom: 15px;
        border: 1px solid #a4a4c1;
        background: rgba(11, 11, 22, 0.4);
        padding: 5px;
    }
    .adaptive-table td {
        border: none !important;
        border-bottom: 1px dashed rgba(164, 164, 193, 0.2) !important;
        position: relative;
        padding-left: 45% !important;
        text-align: right !important;
        white-space: normal;
    }
    .adaptive-table td:last-child {
        border-bottom: none !important;
    }
    .adaptive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 40%;
        text-align: left;
        font-weight: bold;
        font-size: 11px;
        color: var(--accent-blue);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Новая независимая блочная сетка для DePIN-паритета */
.depin-container {
    width: 100%;
    margin: 20px 0;
    box-sizing: border-box;
}
.depin-header {
    display: flex;
    background: rgba(11, 11, 22, 0.6);
    border: 1px solid #A4A4C1;
    border-bottom: none;
}
.depin-col {
    flex: 1;
    padding: 10px;
    color: #A4A4C1;
    font-size: 13px;
    text-align: center;
    border-right: 1px solid #A4A4C1;
}
.depin-col:last-child { border-right: none; }
.depin-row {
    display: flex;
    border: 1px solid #A4A4C1;
    border-top: none;
    background: rgba(11, 11, 22, 0.2);
}
.depin-cell {
    flex: 1;
    padding: 12px;
    color: #A4A4C1;
    font-size: 13px;
    line-height: 1.5;
    border-right: 1px solid #A4A4C1;
}
.depin-cell:last-child { border-right: none; }
.depin-cell.cell-title { font-weight: bold; color: #ffffff; }

/* Полная адаптация под мобильные дисплеи */
@media (max-width: 768px) {
    .depin-header { display: none !important; }
    .depin-row {
        display: block !important;
        margin-bottom: 20px;
        border: 1px solid #A4A4C1 !important;
        border-radius: 4px;
        background: rgba(11, 11, 22, 0.5) !important;
        padding: 10px;
    }
    .depin-cell {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 8px 5px !important;
        text-align: left !important;
        box-sizing: border-box;
    }
    .depin-cell.cell-title {
        font-size: 14px;
        color: var(--accent-blue) !important;
        border-bottom: 1px dashed rgba(164, 164, 193, 0.3) !important;
        padding-bottom: 8px !important;
        margin-bottom: 5px;
    }
    .depin-cell[data-title]::before {
        content: attr(data-title);
        display: block;
        font-weight: bold;
        font-size: 11px;
        color: #ffffff;
        margin-bottom: 3px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
}