:root{/* Brand palette (editable) */ 
      --bg: #0B1220;           /* deep navy */
      --surface: #0F1B33;      /* card/nav surface */
      --surface-2: #101F3B;    /* slightly brighter surface */
      --text: #EAF0FF;         /* primary text */
      --muted: #A8B3D6;        /* secondary text */
      --border: rgba(255,255,255,.10);
      --accent: #7C3AED;       /* violet */
      --accent-2: #22C55E;     /* green */
      --accent-3: #38BDF8;     /* cyan */
      --warning: #F59E0B;      /* amber */
      --shadow: 0 12px 40px rgba(0,0,0,.35);
      --radius: 18px;}

body{background: radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.18), transparent 60%),
                 radial-gradient(900px 500px at 95% 10%, rgba(124,58,237,.18), transparent 55%),
                 radial-gradient(800px 450px at 40% 120%, rgba(34,197,94,.10), transparent 60%),
                 var(--bg); color: var(--text); padding-top: 5px; /* space for fixed navbar */    }
a{color: #a8b3d6; text-decoration:none; }
a:hover{ color: var(--text); text-decoration:underline; }
p{color: #a8b3d6;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {color: #a8b3d6;}
.card-header {color: #a8b3d6;}
.metismenu.mod-menu .mm-collapse {background: rgba(15,27,51,.72);}

.navbar{background: rgba(15,27,51,.72); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);}

    .brand-badge{
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      font-weight:700;
      letter-spacing:.2px;
      color: var(--text);
      text-decoration:none;
    }
    .brand-dot{
      width: 12px; height: 12px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      box-shadow: 0 0 0 6px rgba(124,58,237,.12);
    }

    .nav-link{ color: rgba(234,240,255,.85) !important; }
    .nav-link:hover{ color: var(--text) !important; }

    .btn-accent{
      background: linear-gradient(135deg, var(--accent), #5B21B6);
      border: 1px solid rgba(124,58,237,.35);
      color: white;
      box-shadow: 0 12px 25px rgba(124,58,237,.20);
    }
    .btn-accent:hover{ filter: brightness(1.05); }

    .btn-ghost{
      border: 1px solid var(--border);
      color: var(--text);
      background: rgba(255,255,255,.04);
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.07); }

    .hero{
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(16,31,59,.75), rgba(15,27,51,.55));
      border-radius: calc(var(--radius) + 6px);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      min-height: 420px;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(800px 380px at 12% 18%, rgba(56,189,248,.20), transparent 60%),
        radial-gradient(720px 380px at 85% 20%, rgba(124,58,237,.18), transparent 55%),
        radial-gradient(700px 420px at 40% 120%, rgba(34,197,94,.12), transparent 60%);
      pointer-events:none;
    }
    .hero-content{
      position:relative;
      padding: 44px 36px;
    }
    .hero-kicker{
      display:inline-flex;
      gap:.6rem;
      align-items:center;
      padding: .35rem .75rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-size: .9rem;
    }
    .hero-title{
      font-size: clamp(2rem, 3.6vw, 3.1rem);
      line-height: 1.08;
      margin-top: 14px;
      margin-bottom: 10px;
      letter-spacing: -.6px;
      font-weight: 800;
    }
    .hero-sub{
      color: var(--muted);
      font-size: 1.05rem;
      max-width: 56ch;
    }
    .hero-metric{
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      border-radius: var(--radius);
      padding: 14px 14px;
    }
    .metric-label{ color: var(--muted); font-size: .85rem; }
    .metric-value{ font-size: 1.1rem; font-weight: 700; }

    .breadcrumbs-wrap{
      margin-top: 18px;
      margin-bottom: 6px;
    }
    .breadcrumb{
      --bs-breadcrumb-divider: "›";
      margin-bottom: 0;
    }
    .breadcrumb a{ color: rgba(234,240,255,.85); text-decoration:none; }
    .breadcrumb a:hover{ color: var(--text); text-decoration:underline; }
    .breadcrumb .active{ color: var(--muted); }

    .surface{
      border: 1px solid var(--border);
      background: rgba(16,31,59,.55);
      border-radius: var(--radius);
      box-shadow: 0 14px 45px rgba(0,0,0,.26);
    }

    .section-title{
      font-weight: 800;
      letter-spacing: -.3px;
    }
    .text-muted-2{ color: var(--muted) !important; }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding: .35rem .6rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      color: rgba(234,240,255,.88);
      font-size: .86rem;
      white-space: nowrap;
    }

    .card-dark{
      border: 1px solid var(--border);
      background: rgba(15,27,51,.55);
      border-radius: var(--radius);
      overflow:hidden;
      height: 100%;
    }
    .card-dark:hover{
      transform: translateY(-2px);
      transition: transform .15s ease;
      border-color: rgba(56,189,248,.22);
    }
    .card-icon{
      width: 42px; height: 42px;
      border-radius: 14px;
      display:grid;
      place-items:center;
      background: rgba(56,189,248,.10);
      border: 1px solid rgba(56,189,248,.18);
      color: #BEEBFF;
    }
    .card-icon.purple{
      background: rgba(124,58,237,.12);
      border-color: rgba(124,58,237,.22);
      color: #E6D6FF;
    }
    .card-icon.green{
      background: rgba(34,197,94,.10);
      border-color: rgba(34,197,94,.18);
      color: #CFF7DF;
    }

    .sidebar .list-group-item{
      background: rgba(15,27,51,.45);
      border-color: var(--border);
      color: rgba(234,240,255,.88);
    }
    .sidebar .list-group-item:hover{
      background: rgba(255,255,255,.04);
      color: var(--text);    }
/* Подвал */
.footer{margin-top: 42px; border-top: 1px solid var(--border); background: rgba(10,16,30,.55);}
.footer a{ color: rgba(234,240,255,.80); text-decoration:none; }
.footer a:hover{ color: var(--text); text-decoration:underline; }
.footer hr{border-color: var(--border); opacity: 1;}

/* Small helpers */
.divider-line{height:1px; background: var(--border); margin: 18px 0;}
/* Таблица в брендовых цветах, Брендовый цвет для заголовков */
.brand-table th {background-color: #132956; color: white; font-weight: 500; border-color: #132956;}
/* Информация о категории в блоге */
.category-name {color: #fff;}

.form-control {background-color: #ccc; color: #fff;}