:root{
  --bg:#0f172a;--panel:#111827;--muted:#94a3b8;--accent:#22d3ee;
  --ok:#10b981;--warn:#f59e0b;--bad:#ef4444;
  --card:#0b1220;--chip:#1f2937;--radius:18px;
}
*{box-sizing: border-box;}
body{
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(180deg,#0b1020,#0f172a 40%) ;
    color:#e5e7eb
}
.wrap{max-width: 1040px; margin:32px auto; padding:0 16px}
header{
    display:flex; gap:16px;align-items: center;
    justify-content: space-between; margin-bottom: 20px; flex-wrap:wrap
}
.brand{display:flex; align-items: center; gap:12px; flex:1}
.logo{
    width: 40px; height:40px; border-radius:12px;
    background: conic-gradient(from 140deg at 50% 50%, #22d3ee, #38bdf8,#6366f1);
    box-shadow: 0 0 40px #22d3ee33 insert
}
h1{font-size:clamp(18px,3vw,22px); margin:0;font-weight: 700;letter-spacing: .2px;}
.muted{color:var(--muted)}
.row{display:flex;gap:16px; flex-wrap:wrap}
.panel{
    background: var(--panel); border:1px solid #1f2937; border-radius: var(--radius);
    padding: 14px 14px; box-shadow: 0 10px rgba(0,0,0,.25); width: 100%;
}
.search{flex:1; display:flex;gap:10px; align-items: center; min-width: 220px;}
input[type="text"]{
    flex:1; background:#0b1020; border:1px solid #1f2937; color: #e5e7eb;
    padding: 12px 14px; border-radius:12px ; outline:none; min-width:0
}
button{
    background: linear-gradient(190deg,#22d3ee,#06b6d4);color: #06202b;
    border:none; padding:12px 14px; border-radius: 12px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
}
button:disabled{opacity: .6;cursor: not-allowed;}
.suggest{position: relative; width: 100%;}
.suggest-list{
    position: absolute; z-index: 10; left:0; right:0; top:42px; background: #0b1020;
    border: 1px solid #1f2937; border-radius: 12px; overflow: hidden; display: none;
    max-height: 260px; overflow-y: auto;
}
.suggest-item{padding: 10px 12px; border-top: 1px solid #111827; cursor: pointer;}
.suggest-item:hover{background:#0e1426}
.cards{
    display: grid; grid-template-columns: repeat(auto-fit,minmax(260px, 1fr));
    gap: 16px; margin-top: 16px
}
.card{
    background: var(--card); border: 1px solid #1f2937;
    border-radius: var(--radius); padding: 16px; min-width: 0;
}
.title{font-size: 14px; color: var(--muted); letter-spacing: .3px;}
.big{
    font-size: 42px; font-weight: 800; display: flex; align-items: flex-end;
    gap: 8px; flex-wrap: wrap;
}
.chip{
    background: var(--chip); padding: 6px 10px; border-radius: 999px;
    font-size: 12px; border: 1px solid #263245; white-space: nowrap;
}
.kvs{display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;}
.kv{
    background: #0b1020; border: 1px solid #1f2937; padding: 10px;
    border-radius: 12px; font-size: 13px;
}
.grid-7{
    display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
    gap: 10px; margin-top: 10px;
}
.dcell{
    background: #0b1020; border: 1px solid #1f2937; padding: 10px;
    border-radius: 12px; text-align: center;
}
.dcell .t{font-size:12px; color: var(--muted);}
.dcell .hi{font-weight: 700;}
.footer{
    margin-top: 18px; color: #9ca3af; font-size: 12px; display: flex;
    gap: 10px; align-items: center; flex-wrap: wrap;
}
.src{background: #0b1020 ; border: 1px dashed #1f2937;
padding: 6px 10px; border-radius: 999px;
}
.err{color: #fecaca;}
.sep{opacity: .2;}

@media(max-width: 600px){
    .big{font-size: 32px;}
    .grid-7{grid-template-columns: repeat(auto-fit,minmax(80px,1fr));}
}