:root{
/* Palette inspired by Phantom (violet/teal) + Blockchain (clarity blues/greens) */
--bg-0: #0f1724;            /* very dark background */
--bg-1: linear-gradient(180deg, rgba(15,23,36,1) 0%, rgba(8,12,20,1) 100%);
--card-bg: rgba(255,255,255,0.02);
--glass: rgba(255,255,255,0.04);
--muted: rgba(255,255,255,0.55);
--text: #e6eef8;
--subtle: #9fb7d8;
--accent-1: #7c5cff;        /* purple */
--accent-2: #00d1b2;        /* teal */
--accent-gradient: linear-gradient(135deg,var(--accent-1),var(--accent-2));
--success: #2ee6a6;
--danger: #ff6b6b;
--glass-border: rgba(255,255,255,0.06);
--shadow-strong: 0 20px 40px rgba(2,6,23,0.6);
--shadow-soft: 0 8px 20px rgba(2,6,23,0.45);
--radius: 12px;
--ui-gap: 18px;
--mono: 'Montserrat', sans-serif;
--glass-blur: 8px;
--max-width: 1400px;
--nav-height: 68px;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:var(--mono);
background: var(--bg-1);
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
padding:28px;
display:flex;
justify-content:center;
}

/* page wrapper */
.container{
width:100%;
max-width:var(--max-width);
margin:0 auto;
display:flex;
flex-direction:column;
gap:calc(var(--ui-gap) * 1.4);
}

/* header */
.header{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
padding:28px;
border-radius:18px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border:1px solid var(--glass-border);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(var(--glass-blur));
}

/* title with gradient text */
.header h1{
font-size: clamp(20px, 3.2vw, 34px);
font-weight:700;
letter-spacing: -0.6px;
background: var(--accent-gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:6px;
text-align:center;
}

.header p{
color:var(--subtle);
font-size:14px;
max-width:900px;
text-align:center;
line-height:1.5;
}

/* controls row */
.controls{
display:flex;
gap:12px;
align-items:center;
justify-content:center;
flex-wrap:wrap;
width:100%;
}

/* search box */
.search-box{
display:flex;
gap:10px;
align-items:center;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border-radius: 14px;
padding:8px;
border:1px solid rgba(255,255,255,0.04);
box-shadow: 0 6px 18px rgba(2,6,23,0.4);
}

.search-box input{
min-width:260px;
width: clamp(240px, 50vw, 680px);
background: transparent;
border: none;
padding:14px 18px;
color:var(--text);
font-size:14px;
outline:none;
caret-color:var(--accent-2);
-webkit-appearance:none;
}

/* primary action (Investigation Profonde) */
.search-box button{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 16px;
border-radius:10px;
border: none;
cursor:pointer;
font-weight:700;
color: #071028;
background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
box-shadow: 0 8px 30px rgba(124,92,255,0.14), 0 6px 18px rgba(0,209,178,0.06);
transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s;
transform: translateZ(0);
font-size:13px;
}

/* secondary controls */
.control-btn{
padding:10px 14px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.04);
background: transparent;
color:var(--text);
cursor:pointer;
font-weight:700;
box-shadow: none;
transition: all .18s ease;
display:inline-flex;
gap:10px;
align-items:center;
}

/* hover/focus effects */
.search-box button:hover,
.control-btn:hover,
.action-btn:hover{
transform: translateY(-4px);
}

/* icons */
.fa-icon{opacity:0.95}

/* stats grid */
.stats-grid{
display:grid;
grid-template-columns: repeat(4,1fr);
gap:16px;
margin-top:4px;
}

/* stat-card */
.stat-card{
background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.01));
border-radius:14px;
padding:18px;
border:1px solid rgba(255,255,255,0.04);
box-shadow: 0 8px 30px rgba(2,6,23,0.45);
display:flex;
flex-direction:column;
gap:10px;
align-items:flex-start;
min-height:86px;
}

.stat-card h3{
font-size:13px;
color:var(--subtle);
margin:0;
display:flex;
align-items:center;
gap:8px;
font-weight:600;
}

.stat-card div{
font-size:20px;
margin-top:6px;
font-weight:800;
color:var(--text);
}

/* dashboard layout */
.dashboard{
display:grid;
grid-template-columns: 1fr 420px;
gap:22px;
align-items:start;
}

/* network container */
.network-container{
border-radius:16px;
padding:18px;
height:780px;
background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
border:1px solid rgba(255,255,255,0.04);
box-shadow: var(--shadow-strong);
position:relative;
overflow:hidden;
}

/* top-right controls inside network */
.network-controls{
position:absolute;
top:18px;
right:18px;
background: rgba(3,7,14,0.55);
border-radius:12px;
padding:10px;
display:flex;
gap:8px;
border:1px solid rgba(255,255,255,0.03);
backdrop-filter: blur(6px);
z-index:40;
}

/* network canvas */
#network{
width:100%;
height:100%;
border-radius:12px;
background: linear-gradient(180deg, rgba(8,12,20,0.66), rgba(8,12,20,0.82));
border: 1px dashed rgba(255,255,255,0.025);
overflow:hidden;
position:relative;
}

/* info panel (right column) */
.info-panel{
border-radius:14px;
padding:14px;
background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.01));
border:1px solid rgba(255,255,255,0.04);
height:780px;
overflow:auto;
box-shadow: var(--shadow-soft);
}

/* tabs */
.tabs{
display:flex;
gap:8px;
padding:6px;
border-radius:12px;
background: linear-gradient(180deg, rgba(8,12,20,0.5), rgba(8,12,20,0.35));
border:1px solid rgba(255,255,255,0.02);
}

.tab{
flex:1;
padding:10px;
border-radius:10px;
text-align:center;
cursor:pointer;
font-weight:700;
color:var(--subtle);
font-size:13px;
transition: all .18s ease;
display:inline-flex;
gap:8px;
align-items:center;
justify-content:center;
border:1px solid transparent;
}

.tab:hover{ transform: translateY(-3px); color:var(--text) }

.tab.active{
background: linear-gradient(90deg, rgba(124,92,255,0.14), rgba(0,209,178,0.08));
color:var(--text);
box-shadow: 0 8px 26px rgba(124,92,255,0.08);
border: 1px solid rgba(124,92,255,0.12);
}

/* tab contents */
.tab-content{ display:none; padding-top:14px }
.tab-content.active{ display:block }

/* lists */
.transaction-list, .address-list{
display:flex;
flex-direction:column;
gap:12px;
margin-top:8px;
}

/* items */
.transaction-item, .address-item, .investigation-path, .node-details{
background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.01));
border-radius:12px;
padding:12px;
border:1px solid rgba(255,255,255,0.03);
box-shadow: 0 8px 18px rgba(2,6,23,0.35);
transition: transform .16s ease, box-shadow .16s ease, background .16s;
cursor:pointer;
}

.transaction-item:hover, .address-item:hover{
transform: translateX(8px);
box-shadow: 0 16px 36px rgba(2,6,23,0.55);
}

/* accent border for transaction vs address */
.transaction-item{ border-left:4px solid rgba(124,92,255,0.85) }
.address-item{ border-left:4px solid rgba(0,209,178,0.85) }

/* risk badges */
.risk-badge{
padding:6px 10px;
border-radius:999px;
font-weight:800;
font-size:12px;
display:inline-flex;
align-items:center;
gap:8px;
color:#071028;
background: linear-gradient(90deg,var(--accent-2),var(--accent-1));
box-shadow: 0 6px 16px rgba(124,92,255,0.12);
}

.risk-high{ background: linear-gradient(90deg,#ff6b6b,#ff8a7a); color:#071028 }
.risk-medium{ background: linear-gradient(90deg,#f6c759,#f29d55); color:#071028 }
.risk-low{ background: linear-gradient(90deg,#2ee6a6,#1fd394); color:#071028 }

/* node details style */
.node-details{
font-family:var(--mono);
font-size:13px;
line-height:1.5;
}

/* action buttons cluster */
.action-buttons{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }

.action-btn{
background: transparent;
color:var(--text);
border:1px solid rgba(255,255,255,0.04);
padding:8px 12px;
border-radius:10px;
font-weight:700;
cursor:pointer;
transition: all .14s ease;
display:inline-flex;
gap:8px;
align-items:center;
}

/* hover accent */
.action-btn:hover{
background: linear-gradient(90deg, rgba(124,92,255,0.12), rgba(0,209,178,0.06));
border-color: rgba(124,92,255,0.16);
color:var(--text);
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(2,6,23,0.45);
}

/* investigation path steps */
.path-step{
display:flex;
align-items:center;
gap:12px;
padding:10px;
border-radius:10px;
background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));
border:1px solid rgba(255,255,255,0.03);
}

/* small helper */
.path-arrow{ color:var(--accent-1); font-weight:900 }

/* loading shimmer */
.loading{
text-align:center;
padding:34px;
color:var(--subtle);
position:relative;
overflow:hidden;
border-radius:10px;
background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
border:1px solid rgba(255,255,255,0.02);
}

.loading::after{
content:'';
position:absolute;
left:-120%;
top:0;
height:100%;
width:120%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer{
to{ left:120% }
}

/* navbar (fixed bottom) */
.navbar{
position:fixed;
left:0;
bottom:0;
width:100%;
height:var(--nav-height);
display:flex;
justify-content:space-around;
align-items:center;
gap:6px;
background: linear-gradient(180deg, rgba(6,10,16,0.45), rgba(6,10,16,0.35));
border-top:1px solid rgba(255,255,255,0.02);
backdrop-filter: blur(6px);
z-index:9999;
padding:0 18px;
box-shadow: 0 -8px 40px rgba(2,6,23,0.6);
}

/* navbar links */
.navbar a{
text-decoration:none;
color:var(--subtle);
font-size:12px;
display:flex;
align-items:center;
gap:8px;
flex-direction:column;
transition: all .12s ease;
opacity:0.95;
padding:6px 8px;
border-radius:8px;
}

.navbar a span{ font-size:16px; color:var(--subtle) }

.navbar a:hover{
transform: translateY(-6px);
color:var(--text);
}

/* error box */
.error{
background: linear-gradient(90deg, rgba(255,107,107,0.12), rgba(255,70,70,0.06));
color:var(--text);
padding:12px;
border-radius:10px;
border:1px solid rgba(255,70,70,0.08);
}

/* small devices responsive adjustments */
@media (max-width:1100px){
.dashboard{ grid-template-columns: 1fr 360px }
.network-container{ height:640px }
.info-panel{ height:640px }
.stats-grid{ grid-template-columns: repeat(2,1fr) }
}

@media (max-width:820px){
body{ padding:16px }
.dashboard{ grid-template-columns: 1fr }
.network-container, .info-panel{ height:600px }
.stats-grid{ grid-template-columns: 1fr 1fr }
.header{ padding:18px }
.search-box input{ width: 100% }
}

/* very small screens */
@media (max-width:480px){
.stats-grid{ grid-template-columns: 1fr }
.network-container, .info-panel{ height:520px }
.search-box{ flex-direction:column; gap:8px; padding:10px }
.controls{ gap:8px }
.navbar{ height:76px }
}

/* focus accessibility */
button:focus, .tab:focus, .search-box input:focus, .action-btn:focus{
outline: 3px solid rgba(124,92,255,0.16);
outline-offset:4px;
}

/* subtle animated nodes background (decorate #network) */
#network::before{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background-image:
radial-gradient(circle at 10% 20%, rgba(124,92,255,0.06) 0 1px, transparent 2px),
radial-gradient(circle at 80% 70%, rgba(0,209,178,0.04) 0 1px, transparent 2px);
mix-blend-mode: screen;
opacity:0.9;
}

/* small helpers to keep original class names compatibility */
.tab.active{ /* ensures existing JS toggles still match new look */ }

/* lower-priority tweaks for existing icons spacing */
.fa-icon{ opacity:0.95; }

/* keep pixel tracking invisible but not affecting layout */
img[width="1"][height="1"]{ display:none !important }

/* end of stylesheet */