:root{
  --bg:#0b0f14; --panel:#101823; --line:#1f2a3a; --text:#e6edf6; --muted:#9bb0c8;
  --accent:#7dd3fc; --ok:#86efac; --warn:#fde047;
  --ngcp-profile:#3b82f6; --ngcp-exit:#ef4444; --ngcp-home-ico:#fcd34d;
  --ngcp-pad:8px; --ngcp-gap:8px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:var(--sans); color:var(--text); background:linear-gradient(180deg,#070a0f, var(--bg));}
.ng-topbar{ background:rgba(16,24,35,.92); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; margin:var(--ngcp-pad); box-shadow:0 8px 30px rgba(0,0,0,.35); }
.ng-layout{ display:grid; grid-template-columns:260px 1fr; gap:var(--ngcp-gap); margin:0 var(--ngcp-pad) var(--ngcp-pad) var(--ngcp-pad); min-height:calc(100vh - 100px); }
.ng-nav, .ng-work{ background:rgba(16,24,35,.92); border:1px solid var(--line); border-radius:14px; padding:16px; overflow:auto; }
.ng-brand{display:flex; gap:10px; align-items:center; font-weight:700;}
.ng-brand__mark{ width:10px; height:10px; border-radius:999px; background:var(--ok); box-shadow:0 0 18px rgba(134,239,172,.45); }
.item{ display:flex; align-items:center; padding:10px; border-radius:10px; color:var(--text); text-decoration:none; margin-bottom:4px; border:1px solid transparent; }
.item:hover{ background:rgba(125,211,252,.08); border-color:rgba(125,211,252,.22); }
.ico{ width:20px; height:20px; display:inline-block; background-color:var(--muted); -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain; mask-repeat:no-repeat; mask-position:center; mask-size:contain; margin-right:10px; }
.ng-topicon{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; }
.ng-topicon::before{ content:""; width:22px; height:22px; background-color:#2563eb; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain; mask-repeat:no-repeat; mask-position:center; mask-size:contain; }

/* Интегриране на твоите икони от CSS файла */
.ico.is-home{ -webkit-mask-image:url("/ui/images/ico/home.svg"); mask-image:url("/ui/images/ico/home.svg"); background-color:var(--ngcp-home-ico) !important; }
.ico.is-profile{ -webkit-mask-image:url("/ui/images/ico/profile.svg"); mask-image:url("/ui/images/ico/profile.svg"); background-color:var(--ngcp-profile) !important; }
.ng-topicon.is-profile::before{ -webkit-mask-image:url("/ui/images/ico/profile.svg"); mask-image:url("/ui/images/ico/profile.svg"); background-color:var(--ngcp-profile) !important; }
.ng-topicon.is-exit::before{ -webkit-mask-image:url("/ui/images/ico/exit.svg"); mask-image:url("/ui/images/ico/exit.svg"); background-color:var(--ngcp-exit) !important; }

/* Дизайн на Tooltip според изискванията */
#ng-tip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px; /* Леко заоблени ръбове */
    white-space: nowrap;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line); /* Красива рамка */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.1s ease;
    display: none;
}
.ng-topicon.is-settings::before {
    -webkit-mask-image: url("/ui/images/ico/settings.svg");
    mask-image: url("/ui/images/ico/settings.svg");
    background-color: var(--muted);
}
.ng-topicon.is-settings:hover::before {
    background-color: var(--text);
}

/* Стил за заглавията в навигацията */
.ng-nav__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin: 20px 0 10px 10px;
    opacity: 0.7;
}

/* Стил за езиковия превключвател */
.lang-switcher { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.lang-item { 
    display: block; 
    padding: 8px 10px; 
    color: var(--muted); 
    text-decoration: none; 
    font-size: 13px; 
    transition: 0.2s;
}
.lang-item:hover, .lang-item.active { color: var(--text); background: rgba(255,255,255,0.05); border-radius: 6px; }

/* Цвят за Settings иконата */
.ng-topicon.is-settings::before {
    -webkit-mask-image: url("/ui/images/ico/settings.svg");
    mask-image: url("/ui/images/ico/settings.svg");
    background-color: var(--muted);
}
.ng-topicon.is-settings:hover::before {
    background-color: var(--text);
}

/* Стил за системната капсула (Clock & Status) */
.ng-status__time { color: var(--accent); font-weight: bold; }
.ng-status__date { border-left: 1px solid var(--line); padding-left: 12px; }


.ng-status__time { 
    font-size: 13px; /* Същият размер като текста */
    font-weight: 700; /* Само по-плътен шрифт за акцент */
    color: var(--accent);
}



/* Пълно и окончателно фиксиране на статуса */

.ng-status__time, .ng-status__date {
    font-size: 13px;
    display: flex;
    align-items: center;
}

.ng-status__time {
    color: var(--accent);
    font-weight: 700;
}
.ng-status__node { color: var(--ok) !important; font-weight: 700; font-size: 10px; text-transform: uppercase; }
.ng-status__time { color: var(--accent); font-weight: 700; font-size: 13px; }
.ng-status__date { color: var(--muted); font-size: 13px; border-left: 1px solid var(--line); padding-left: 12px; }


.ng-status__node {
    padding-right: 12px;
    border-right: 1px solid var(--line); /* Първата вертикална линия */
}

.ng-status__time {
    padding: 0 12px;
    font-weight: 700;
    color: var(--accent);
    border-right: 1px solid var(--line); /* Втората вертикална линия */
}

.ng-status__date {
    padding-left: 12px;
    border-left: none; /* Премахваме стария бордър */
    font-family: var(--mono);
    font-size: 13px;
}
.ng-status {
    height: 38px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    background: rgba(31, 42, 58, 0.4);
    border: 1px solid var(--line);
    border-radius: 20px;
    font-family: var(--mono);
}