.app-shell {
    display:grid;
    grid-template-columns:minmax(280px,350px) 1fr;
    gap:18px;
    padding:18px;
    max-width:1800px;
    margin:auto
}

.sidebar {
    height:calc(100vh - 112px);
    position:sticky;
    top:94px;
    overflow:hidden
}

.search-wrap {
    margin:14px;
    position:relative
}

.search-wrap input {
    width:100%;
    border:1px solid var(--line);
    background:#050a0f;
    color:var(--text);
    border-radius:8px;
    padding:11px 42px 11px 12px;
    outline:none
}

.search-wrap input:focus {
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(66,217,255,.08)
}

kbd {
    position:absolute;
    right:10px;
    top:9px;
    border:1px solid var(--line);
    border-radius:4px;
    padding:1px 6px;
    color:var(--muted)
}

.category-tree {
    overflow:auto;
    height:calc(100% - 112px);
    padding:0 8px 16px
}

.category {
    border-bottom:1px solid rgba(28,52,66,.65)
}

.category summary {
    cursor:pointer;
    list-style:none;
    padding:12px 8px;
    color:#cbe4ec;
    display:flex;
    justify-content:space-between;
    gap:10px
}

.category summary::-webkit-details-marker {
    display:none
}

.category summary b {
    color:var(--green);
    font-size:10px;
    border:1px solid rgba(82,255,154,.25);
    padding:2px 6px;
    border-radius:999px
}

.endpoint-list {
    padding:0 0 10px 8px
}

.endpoint {
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    text-align:left;
    border:0;
    border-left:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    padding:8px 10px;
    cursor:pointer
}

.endpoint:hover,.endpoint.active {
    color:#fff;
    background:linear-gradient(90deg,rgba(66,217,255,.12),transparent);
    border-left-color:var(--cyan)
}

.node-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#31505f
}

.endpoint:hover .node-dot,.endpoint.active .node-dot {
    background:var(--cyan);
    box-shadow:0 0 10px var(--cyan)
}

.workspace {
    display:grid;
    gap:18px;
    min-width:0
}

.hero {
    min-height:210px;
    padding:30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    position:relative
}

.hero h1 {
    max-width:760px;
    font-size:clamp(27px,4vw,52px);
    line-height:1.05;
    margin:8px 0 14px
}

.hero p {
    max-width:800px;
    color:var(--muted);
    font-size:15px
}

.eyebrow {
    color:var(--green);
    font-size:11px;
    letter-spacing:.18em
}

.radar {
    width:170px;
    height:170px;
    border:1px solid rgba(66,217,255,.35);
    border-radius:50%;
    position:relative;
    background:repeating-radial-gradient(circle,transparent 0 24px,rgba(66,217,255,.12) 25px 26px)
}

.radar:before,.radar:after {
    content:"";
    position:absolute;
    background:rgba(66,217,255,.25)
}

.radar:before {
    width:1px;
    height:100%;
    left:50%
}

.radar:after {
    height:1px;
    width:100%;
    top:50%
}

.radar span {
    position:absolute;
    inset:50%;
    width:50%;
    height:1px;
    background:linear-gradient(90deg,var(--green),transparent);
    transform-origin:left;
    animation:sweep 4s linear infinite
}

.radar i {
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    left:66%;
    top:29%;
    box-shadow:0 0 18px var(--green)
}

@keyframes sweep {
    to{transform:rotate(360deg)
}

}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(6,minmax(100px,1fr));
    gap:10px
}

.stat {
    padding:14px
}

.stat strong {
    font-size:25px;
    color:#fff
}

.stat span {
    display:block;
    color:var(--muted);
    font-size:9px;
    letter-spacing:.12em
}

.intel {
    min-height:390px;
    padding:22px
}

.empty-state {
    text-align:center;
    padding:70px 20px;
    color:var(--muted)
}

.target-icon {
    font-size:54px;
    color:var(--cyan)
}

.intel-head {
    display:flex;
    justify-content:space-between;
    gap:15px;
    border-bottom:1px solid var(--line);
    padding-bottom:18px
}

.intel h2 {
    font-size:28px;
    margin:0
}

.badge {
    display:inline-flex;
    border:1px solid rgba(82,255,154,.3);
    color:var(--green);
    border-radius:999px;
    padding:4px 9px;
    font-size:10px
}

.intel-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:14px;
    margin-top:18px
}

.intel-block {
    background:rgba(3,8,12,.55);
    border:1px solid var(--line);
    border-radius:8px;
    padding:15px
}

.intel-block h3 {
    margin:0 0 9px;
    color:var(--cyan);
    font-size:12px;
    letter-spacing:.1em
}

.intel-block p {
    color:var(--muted)
}

.tag-list {
    display:flex;
    flex-wrap:wrap;
    gap:7px
}

.tag {
    border:1px solid var(--line);
    background:#091119;
    padding:5px 8px;
    border-radius:5px;
    color:#b7cbd5;
    font-size:11px
}

.brand-record {
    padding:10px 0;
    border-bottom:1px solid rgba(28,52,66,.6)
}

.brand-record:last-child {
    border:0
}

.brand-record strong {
    color:#fff
}

.brand-record small {
    display:block;
    color:var(--green)
}

.company-section {
    overflow:hidden
}

.company-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:12px;
    padding:14px
}

.company-card {
    border:1px solid var(--line);
    border-radius:8px;
    padding:14px;
    background:#071017
}

.company-card h3 {
    margin:0 0 4px
}

.company-card .ticker {
    color:var(--green);
    font-size:10px
}

.company-card p {
    color:var(--muted);
    font-size:12px;
    min-height:55px
}

.meter {
    height:5px;
    background:#14232d;
    border-radius:9px;
    overflow:hidden
}

.meter i {
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--cyan),var(--green))
}

.company-card .owned {
    font-size:10px;
    color:#91a8b4;
    margin-top:9px
}

.search-results {
    position:absolute;
    z-index:100;
    top:47px;
    left:0;
    right:0;
    background:#071017;
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:var(--shadow);
    max-height:340px;
    overflow:auto
}

.search-result {
    padding:10px;
    border-bottom:1px solid var(--line);
    cursor:pointer
}

.search-result:hover {
    background:#0d1b25
}

.search-result small {
    display:block;
    color:var(--cyan)
}

@media(max-width:1000px) {
    .app-shell{grid-template-columns:1fr
}

.sidebar {
    position:relative;
    top:0;
    height:auto;
    max-height:620px
}

.stats-grid {
    grid-template-columns:repeat(3,1fr)
}

.intel-grid {
    grid-template-columns:1fr
}

.radar {
    display:none
}

}
@media(max-width:600px) {
    .topbar{padding:0 12px
}

.system-status span:first-child {
    display:none
}

.app-shell {
    padding:8px;
    gap:10px
}

.hero {
    padding:20px
}

.stats-grid {
    grid-template-columns:repeat(2,1fr)
}

.footer {
    display:block
}

.footer div+div {
    margin-top:8px
}

}


/* ==================================================
   DarkMatter Button
================================================== */

.dm-btn {
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:14px 22px;
    background:linear-gradient(180deg,#202020,#111);
    border:1px solid #3a3a3a;
    border-radius:12px;
    color:#e8e8e8;
    text-decoration:none;
    transition:.2s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 18px rgba(0,0,0,.35)
}

.dm-btn:hover {
    background:linear-gradient(180deg,#8b0000,#550000);
    border-color:#bb2222;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:
        0 0 18px rgba(180,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08)
}

.dm-btn-icon {
    font-size:28px;
    line-height:1
}

.dm-btn-text {
    display:flex;
    flex-direction:column;
    line-height:1.2
}

.dm-btn-text strong {
    font-size:15px;
    font-weight:700
}

.dm-btn-text small {
    margin-top:2px;
    font-size:11px;
    letter-spacing:1px;
    color:#999;
    text-transform:uppercase
}

.dm-btn:hover .dm-btn-text small {
    color:#ddd
}

/* ==================================================
   Harvester Status Indicators
================================================== */

.dm-btn-status {
    display:block;
    width:12px;
    height:12px;
    flex:0 0 12px;
    border-radius:50%;
    background:#777;
    box-shadow:0 0 10px rgba(255,255,255,.18)
}

.dm-btn-idle .dm-btn-status {
    background:#52ff9a;
    box-shadow:0 0 12px rgba(82,255,154,.85)
}

.dm-btn-pending .dm-btn-status {
    background:#ffc857;
    box-shadow:0 0 12px rgba(255,200,87,.85)
}

.dm-btn-running .dm-btn-status {
    background:#42d9ff;
    box-shadow:0 0 12px rgba(66,217,255,.95);
    animation:harvester-pulse 1.2s ease-in-out infinite
}

.dm-btn-review .dm-btn-status {
    background:#ff5252;
    box-shadow:0 0 12px rgba(255,82,82,.95)
}

.dm-btn-pending {
    border-color:rgba(255,200,87,.55)
}

.dm-btn-running {
    border-color:rgba(66,217,255,.65)
}

.dm-btn-review {
    border-color:rgba(255,82,82,.65)
}

@keyframes harvester-pulse {
    0%,
    100% {
        opacity:.45;
        transform:scale(.8)
    }

    50% {
        opacity:1;
        transform:scale(1.3)
    }
}