:root{
    --desk: #efe7d3;
    --sheet: #fdfaf1;
    --sheet2: #f7f0dd;
    --kraft: #e6d9bc;
    --edge: #ddd0b1;
    --ink: #43392b;
    --ink-soft: #857a63;
    --pencil: #b3a686;
    --blue: #aecbe4;
    --blue-deep: #5c86ad;
    --mint: #b9d9c2;
    --mint-deep: #5a9271;
    --peach: #f1cda9;
    --peach-deep: #c07e46;
    --rose: #e9bab3;
    --rose-deep: #b26058;
    --lav: #d3c4e3;
    --lav-deep: #8a72ad;
    --butter: #efdfab;
    --buter-deep: #a9883a;
    --stamp-shadow: 6px 6px 0 rgba(110, 92, 58, .22);
    --stamp-shadow-sm: 3px 3px 0 rgba(110, 92, 58, .19);
     --stamp-shadow-2: 8px 8px 0 rgba(110, 92, 58, .26);
    --stamp-shadow-sm-2: 5px 5px 0 rgba(110, 92, 58, .23);
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospape;
    --serif: Gorgia, "Iowan Old Style", "Palatino Linotype", serif;
    --sans: -apple-system, "Segoe UI", "Avenir Next", "Trebuchet MS", sans-serif;
}
*{margin: 0; padding: 0; box-sizing: border-box; }
html, body{height:100%}
body{
    background: var(--desk);
    color: var(--ink);
    font-family: var(--sans);
    overflow: hidden;
    background-image: 
    radial-gradient(ellipse 800px 500px at 12% -5%, rgba(174,2203,228,.25), transparent),
    radial-gradient(ellipse 800px 500px at 95% 105%, rgba(211,196,227,.22), transparent);
}
.hidden{display: none !important;}
.thin{font-weight: 300; opacity: .65; }
::selection{background: var(--butter);}

#topbar{
    height:56px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0, 20px;
    background: var(--sheet);
    border-bottom: 1.5px solid var(--edge);
    box-shadow: 0 2px 0  rgba(110, 92, 58, .07);
}
.brand{
    font-family:var(--serif);
    font-weight: 700;
    letter-spacing: 2px; font-size: 17px;
}
.logo-mark{
    color: var(--blue-deep);
    margin-right:5px;
}
#mainnav{
    display: flex;
    gap: 5px;
}
.nav-btn{
    background: none;
    border: none;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .12s;
}
.nav-btn:hover{
    color: var(--ink);
    background: var(--kraft);
    transform: translateY(-1px);
}
.nav-btn:active{
    color: var(--ink);
    background: var(--butter);
    box-shadow: var(--stamp-shadow-sm);
    font-weight: 700;
}
.topbar-right{
    margin-left: auto;
    display: flex;
    align-items:center;
    gap:14px;
}
.kbd-hint{
    font-size: 11px;
    color: var(--ink-soft);
    font-family: var(--mono);
    opacity: .8;
}
.privacy-tag{
    font-size: 11px;
    color: var(--mint-deep);
    font-family: var(--mono);
    background: var(--sheet2);
    border: 1.5px dashed var(--pencil);
    padding: 5px 11px;
    border-radius: 7px;
    box-shadow: var(--stamp-shadow-sm);
}
#landing{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.landing-inner{
    text-align: center;
    max-width: 660px;
    padding:24px;
    position: relative;
    z-index: 2;
}
.mega{
    font-family: var(--serif);
    font-size:68px;
    font-weight:800;
    letter-spacing: 9px;
    color: var(--ink);
    text-shadow: 2px 2px 0 rgba(174,203,228,.55);
}
.tagline{
    font-family: var(--mono);
    letter-spacing:7px;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top:8px;
}
.pitch{
    font-family: var(--serif);
    font-style: italic;
    font-size: 21px;
    margin: 28px 0 24px;
}
.feature-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 28px;
    text-align: left;
    margin: 0 auto 34px;
    max-width: 550px;
    color: var(--ink-soft);
    font-size: 13.5px;
}
.feat span{
    color: var(--mint-deep);
    margin-right: 9px;
    font-family: var(--mono);
    font-weight: 700;
}
.scrap{
    position: absolute;
    border-radius: 3px;
    opacity: .5;
    box-shadow: var(--stamp-shadow-sm);
}
.s1{
    width: 130px;
    height: 170px;
    background: var(--blue);
    top: 8%;
    left: 7%;
    transform: rotate(-9deg);
    border: 2px dotted var(--blue-deep);
    box-shadow: var(--stamp-shadow-2);
}
.s2{
    width: 100px;
    height: 130px;
    background: var(--peach);
    top: 62%;
    left: 12px;
    transform: rotate(7deg);
    border: 2px dashed var(--peach-deep);
    box-shadow: var(--stamp-shadow-2);
}
.s3{
    width: 150px;
    height: 110px;
    background: var(--mint);
    top: 12%;
    right: 8%;
    transform: rotate(11deg);
    border: 2px dashed var(--mint-deep);
    box-shadow: var(--stamp-shadow-2);
}
.s4{
    width: 90px;
    height: 120px;
    background: var(--lav);
    top: 66%;
    right: 13%;
    transform: rotate(-6deg);
    border: 2px dotted var(--lav-deep);
    box-shadow: var(--stamp-shadow-2);
}
.s5{
    width: 70px;
    height: 90px;
    background: var(--butter);
    bottom: 6%; 
    left:44%;
    transform: rotate(14deg);
    border: 2px dashed var(--buter-deep);
    box-shadow: var(--stamp-shadow-2);
}
.s1:hover{
    box-shadow: var(--stamp-shadow-sm-2);
}
.s2:hover{
    box-shadow: var(--stamp-shadow-sm-2);
}
.s3:hover{
    box-shadow: var(--stamp-shadow-sm-2);
}
.s4:hover{
    box-shadow: var(--stamp-shadow-sm-2);
}
.s5:hover{
    box-shadow: var(--stamp-shadow-sm-2);
}
#dropzone{
    position: relative;
    background: color-mix(in srgb, var(--sheet)63%, transparent);
    padding: 36px 26px;
    transition: all .2s;
    box-shadow: var(--stamp-shadow);

    background-image:
    linear-gradient(90deg, var(--pencil)50%, transparent 50%),
    linear-gradient(180deg, var(--pencil)50%, transparent 50%),
    linear-gradient(270deg, var(--pencil)50%, transparent 50%),
    linear-gradient(360deg, var(--pencil)50%, transparent 50%);

    background-size:
    20px 2px,
    2px 20px,
    20px 2px,
    2px 20px;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-position:
    0 0,
    100% 0,
    100% 100%,
    0 100%;
    animation: rotateDashes 0.8s linear infinite;
}
@keyframes rotateDashes{
    to{
        background-position:
        40px 0,
        100% 40px,
        350px 100%,
        0 120px;
    }
}
#dropzone.over{
    border-color: var(--blue-deep); background: #f3f8f8;
    transform: rotate(-.5deg) scale(1.015);
}
.tape {
    position: absolute;
    top: -10px;
    left: 5%;
    transform: translateX(-50%) rotate(-28deg);
    width: 110px;
    height:26px;
    background: color-mix(in srgb, var(--butter)80%, transparent);
    border-left:1.5px dashed rgba(255,255,255,.7);
    border-right: 1.5px dashed rgba(255,255,255,.7);
}
.tape2 {
    position: absolute;
    bottom:-5px;
    right: -22%;
    transform: translateX(-50%) rotate(-28deg);
    width:110px;
    height: 26px;
    background: color-mix(in srgb, var(--butter)80%, transparent);
    border-left: 1.5px dashed rgba(255,255,255,.7);
    border-right: 1.5px dashed rgba(255,255,255,.7);
}
.dz-title{
    font-size: 17px;
    font-weight: 700;
    font-family: var(--serif);
}
.dz-or{
    color: var(--ink-soft);
    font-size: 12px;
    margin: 10px 0;
    font-style: italic;
}
.dz-buttons{
    display: flex;
    gap: 12px;
    justify-content: center;
}
.dz-note{
    margin-top: 17px;
    font-size: 11.5px; 
    color: var(--ink-soft);
    font-family: var(--mono);
}
.btn{
    font-family: var(--sans);
    font-size: 14px;
    padding: 11px 26px;
    border-radius: 9px 9px 9px 4px; 
    cursor: pointer;
    border: 1.5px solid rgba(110,92,58,.35);
    font-weight: 700;
    color: var(--ink);
    box-shadow: var(--stamp-shadow);
    background: var(--sheet);
    transition: transform .1s, box-shadow .1s, filter .1s;
}
.btn.primary{
    background:  var(--blue);
}
.btn.primary:hover{
    filter:brightness(1.06);
    transform: translate(-1px, -1px);
    box-shadow: 3.8px 3.8px 0 rgba(110,92,58,.18);
}
.btn.ghost:hover{
    background: var(--sheet2);
    box-shadow: var(--stamp-shadow-sm);
}
.btn.small{
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 7px 7px 7px 3px;
}
.btn:active{
    transform: translate(2px,2px);
    box-shadow: var(--stamp-shadow-sm);
}
.btn.on{
    background: var(--butter);
}
#scan-screen{
    height: 100vh;
    display: flex;
    align-items:center;
    justify-content: center;
}
.scan-box{
    width: 490px;
    background: var(--sheet);
    border-radius: 1 3px 13px 13px 5px;
    border: 1.5px solid var(--edge);
    box-shadow: var(--stamp-shadow-2);
    padding: 30px 32px;
    transform: rotate(-.3deg);
}
.scan-box:hover{
    box-shadow: var(--stamp-shadow-sm);
    cursor: progress;
}
.scan-box h2 {
  font-family: var(--sans); 
  letter-spacing: 4px; 
  font-size: 20px;
  color: var(--ink-soft); 
  margin-bottom: 22px; 
  text-transform: uppercase;
}
#scan-stages{
    list-style: none;
}
#scan-stages li{
    font-family: var(--mono);
    font-size: 13.5px;
    padding: 9px 0;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 11px;
}
#scan-stages li:last-child{
    border: none;
}
#scan-staages li .st{
    width: 18px;
    height: 18px;
    text-align: center;
    flex-shrink: 0;
    border-radius: 50%;
    line-height: 17px;
    font-size: 11px;
}
#scan-stages li.done{
    color: var(--mint-deep);
}
#scan-stagees li.done .st{
    background: var(--mint);
    color: #fff;
    box-shadow: var(--stamp-shadow-sm);
}
#scan-stages li.active{
    color: var(--blue-deep);
}
#scan-stages li.active .st{
    border:1.5px solid var(--blue-deep);
}
#scan-stages li .spin{
    animation: spin 1s linear infinite;
    display: inline-block;
    font-size: 12px;
}
@keyframes spin{
    to{
        transform: rotate(360deg);
    }
}
.scan-note{
    margin-top: 14px;
    font-size: 11px;
    color: var(--pencil);
    font-family: var(--mono);
    font-style: italic;
}
#app{
    display: flex;
    height: calc(100vh - 56px);
}
#sidebar{
    width: 285px;
    min-width: 285px;
    background: var(--sheet2);
    border-right: 1.5px solid var(--edge);
    display: flex;
    flex-direction: column;
}
#search{
    margin: 13px;
    padding: 9px 13px;
    background: var(--sheet);
    color: var(--ink);
    border: 1.5px solid var(--edge);
    border-radius: 9px 9px 9px 4px;
    font-size: 13px;
    outline: none;
    font-family: var(--sans);
}
#search:focus{
    border-color: var(--blue-deep);
    box-shadow: 0 0 0 3px rgba(174,203,228,.45);
}
.tree{
    flex:1;
    overflow: auto;
    padding: 0 8px 12px;
    font-family: var(--mono);
    font-size: 12.5px;
}
.tree .dir{
    color: var(--blue-deep);
    user-select: none;
    font-weight: 700;
}
.tree .dir > .row:hover,.tree .file>.row:hover{
    background: var(--kraft);
}
.tree .row{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;
    border-radius: 7px 7px 7px 3px;
    cursor: pointer;
    white-space: nowrap;
}
.tree .children{
    margin-left: 15px;
    border-left: 1.5px dashed var(--edge);
    padding-left: 5px;
}
.tree .caret{
    width: 13px;
    color: var(--pencil);
    font-size: 10px;
    flex-shrink: 0;
}
.tree .file .name { 
    color: var(--ink);
     overflow: hidden; 
     text-overflow: ellipsis;
}
.tree .file.asset .name{
    color: var(--ink-soft);
}
.tree .file.hl .row{
    background: var(--butter);
    outline: 1.5px solid var(--buter-deep);
}
.tree .badge{
    margin-left: auto;
    font-size: 9px;
    color: #fff;
    font-weight: 700;
    border-radius: 6px 6px 6px 2px;
    padding: 1px 7px;
}
.tree .badge.big{
    background: var(--peach-deep);
}
.tree .badgee.cyc{
    background: var(--rose-deep);
}
.sidebar-foot{
    padding: 9px 15px; 
    border-top: 1.5px solid var(--edge);
    font-size: 11px;
    color: var(--ink-soft);
    font-family: var(--mono);
}
#content{
    flex: 1;
    overflow: auto;
    padding: 24px 28px;
}
.view{
    display: none;
    animation: fadein .25s ease;
}
.view.active{
    display: block;
}
@keyframes fadein{
    from{
        opacity: 0;
        transform: translateY(6px);
    }
    to{
        opacity: 1;
    }
}
.proj-head h2{
    font-family: var(--serif);
    letter-spacing: 1px;
    font-size: 30px;
}
.proj-type{
    color: var(--lav-deep);
    font-family: var(--mono);
    font-size: 12.5px;
    margin-top: 5px;
}
.stat-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 13px;
    margin: 24px 0;
}
.stat-card{
    background: var(--sheet);
    border: 1.5px solid var(--edge);
    border-radius: 12px 12px 12px 4px;
    padding: 17px;
    text-align: center;
    box-shadow: var(--stamp-shadow-sm);
    transition: transform .12s;
}
.stat-card:hover{
    transform: translateY(-2px) rotate(-.4deg);
}
.stat-card .num{
    font-size: 27px;
    font-weight: 700;
    font-family: var(--mono);
}
.stat-card .lbl{
    font-size: 10px;
    letter-spacing: 2.5px;
    color: var(--ink-soft);
    margin-top: 5px;
    font-weight: 700;
}
.stat-card.c1 .num {
    color: var(--blue-deep); 
} 
.stat-card.c2 .num { 
    color: var(--mint-deep); 
} 
.stat-card.c3 .num { 
    color: var(--peach-deep); 
} 
.stat-card.c4 .num { 
    color: var(--lav-deep); 
} 
.stat-card.c5 .num { 
    font-size: 14px; 
    line-height: 1.6; 
}  
.two-col { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-bottom: 15px; 
} 
@media (max-width: 1050px) { 
    .two-col { 
        grid-template-columns: 1fr; 
    } 
}  
.panel {   
    position: relative; 
    background: var(--sheet); 
    border: 1.5px solid var(--edge);   
    border-radius: 12px 12px 12px 4px; 
    padding: 18px 20px; 
    margin-bottom: 15px;   
    box-shadow: var(--stamp-shadow-sm-2); 
} 
.panel:hover{
    box-shadow: var(--stamp-shadow-2);
}
.taped::before {   
    content: ""; 
    position: absolute; 
    top: -11px; 
    left: 10px; 
    transform: rotate(-15deg);   
    width: 74px; 
    height: 22px; 
    background: rgba(160, 187, 115, 0.471);   
    border-left: 1px dashed rgba(255,255,255,.8); 
    border-right: 1px dashed rgba(255,255,255,.8); 
} 
.tape3{
     content: ""; 
    position: absolute; 
    top: -11px; 
    left: 116px; 
    transform: rotate(8deg);   
    width: 74px; 
    height: 22px; 
    background: rgba(250, 30, 74, 0.23);   
    border-left: 1px dashed rgba(255,255,255,.8); 
    border-right: 1px dashed rgba(255,255,255,.8); 
}
.tape4{
     content: ""; 
    position: absolute; 
    top: -11px; 
    left: 56px; 
    transform: rotate(-12deg);   
    width: 74px; 
    height: 22px; 
    background: rgba(239,223,171,.7);   
    border-left: 1px dashed rgba(255,255,255,.8); 
    border-right: 1px dashed rgba(255,255,255,.8); 
}
.tape5{
     content: ""; 
    position: absolute; 
    top: -14px; 
    left: 156px; 
    transform: rotate(12deg);   
    width: 74px; 
    height: 22px; 
    background: rgba(227, 216, 206, 0.751);   
    border-left: 1px dashed rgba(255,255,255,.8); 
    border-right: 1px dashed rgba(255,255,255,.8); 
}
.panel h3 {  
    font-size: 11px; 
    letter-spacing: 2.5px; 
    color: var(--ink-soft);   
    margin-bottom: 15px; 
    font-family: var(--mono); 
    font-weight: 700; 
} 
.panel-foot { 
    margin-top: 10px; 
    font-size: 11px; 
    color: var(--pencil); 
    font-style: italic; 
}  
.start-list { 
    list-style: none; 
    counter-reset: s; 
} 
.start-list li {   
    counter-increment: s; 
    display: flex; 
    gap: 13px; 
    padding: 10px 0;   
    border-bottom: 1px dashed var(--edge); 
    cursor: pointer; 
} 
.start-list li:last-child { 
    border-bottom: none; 
} 
.start-list li::before {   
    content: counter(s); 
    flex-shrink: 0; 
    width: 25px; 
    height: 25px; 
    border-radius: 50%;   
    border: 1.5px solid var(--blue-deep); 
    color: var(--blue-deep);   
    font-family: var(--mono); 
    display: flex; 
    align-items: center; 
    justify-content: center;   
    font-size: 12px; 
    background: var(--sheet2); 
    box-shadow: var(--stamp-shadow-sm); 
} 
.start-list li:nth-child(1)::before { 
    background: var(--butter); 
    border-color: var(--butter-deep); 
    color: var(--butter-deep);
    font-weight: 700;
}
.start-list .sp-name{
    font-family:  var(--mono);
    font-size:13px; 
    font-weight: 700;
}
.start-list .sp-role{
    font-size: 10.5px;
    color: var(--lav-deep);
    font-family: var(--mono);
    margin: 2px 0;
}
.start-list .sp-why{
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.45;
}
.start-list li:hover .sp-name{
    color: var(--blue-deep);
    text-decoration: underline;
}
.health-num{
    float: right;
    font-size: 25px;
    color: var(--mint-deep);
    font-family: var(--mono);
    font-weight: 700;
}
.hbar{
    margin-bottom: 11px;
}
.hbar .hlabel{
    display:flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--ink-soft);
    font-family: var(--mono);
    margin-bottom: 5px;
}
.hbar .track{
    height: 9px;
    background: var(--kraft);
    border-radius: 6px;
    overflow: hidden;
}
.hbar .fill{
    height: 100%;
    border-radius: 6px;
    background: var(--mint-deep);
    transition: width .7s cubic-bezie(.2,.8,.3,1);
}
.hbar .fill.mid{
    background: var(--buter-deep);
}
.hbar .fill.low{
    background: var(--rose-deep);
}
#arch-view{
    font-family:var(--mono);
    font-size: 12.5;
    line-height: 2;
}
#arch-view .arch-cat{
    color: var(--peach-deep);
    font-weight: 700;
    margin-top: 4px;
}
#arch-view .arch-dir{
    color: var(--ink-soft);
    margin-left: 20px;
}
#arch-view .arch-dir b{
    color: var(--ink);
    font-weight: 700;
}
#manifest-list{
    font-family: var(--mono);
    font-size: 12.5px;
}
#manifest-list .mf{
    display: flex; 
    gap:11px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--edge);
}
#manifest-list .mf:last-child{
    border: none;
}
#manifest-list .mf .mf-tag{
    color: var(--mint-deep);
    font-weight: 700;
}
#manifest-list .mf .mf-missing{
    color: var(--peach-deep);
}
.graph-toolbar{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    flex-wrap: wrap;
}
.graph-toolbar input[type=search]{
    padding: 8px 13px;
    background: var(--sheet);
    color: var(--ink);
    border:1.5px solid var(--edge);
    border-radius: 9px 9px 9px 4px;
    font-size: 13px;
    outline: non;
    width: 260px;
    font-family: var(--sans);
}
.graph-toolbar input[type=search]:focus { 
    border-color: var(--blue-deep); 
} 
.chk { 
    font-size: 12px; 
    color: var(--ink-soft); 
    display: flex; 
    align-items: center; 
    gap: 7px; 
} 
#graph-wrap {   
    background: var(--sheet); 
    border: 1.5px solid var(--edge);   
    border-radius: 12px 12px 12px 4px;   
    height: calc(100vh - 220px); 
    overflow: hidden; 
    position: relative;   
    box-shadow: var(--stamp-shadow-sm);   
    background-image: radial-gradient(circle, var(--edge) 1.2px, transparent 1.2px);   
    background-size: 24px 24px; 
}
#graph{
    width: 100%;
    height: 100%;
    cursor: grab;
}
#graph:active{
    cursor: grabbing;
}
#graph .edge{
    stroke: var(--pencil);
    stroke-width: 1.7;
    fill: none;
}
#graph .edge.hl{
    stroke: var(--blue-deep);
    stroke-width: 2.7;
}
#graph .edge.ext{
    stroke-dasharray: 4 4;
    opacity: .55;
}
#graph .node rect{
    fill: var(--sheet2);
    stroke: var(--pencil);
    stroke-width: 1.3;
    rx: 8;
}
#graph .node text{
    fill: var(--ink);
    font-family: var(--mono);
    font-size: 10.5px;
}
#graph .node{
    cursor: pointer;
}
#graph .node:hover rect{
    stroke: var(--blue-deep);
}
#graph .node.hl rect{
    stroke: var(--blue-deep);
    stroke-width: 2.2;
    fill:#dcebf6;
}
#graph .node.extnode rect { 
    stroke-dasharray: 3 3; 
} 
#graph .node.extnode text { 
    fill: var(--ink-soft); 
    font-style: italic; 
} 
.empty-note{   
    position: absolute; 
    inset: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center;   
    color: var(--ink-soft); 
    font-family: var(--mono); 
} 
.hint { 
    margin-top: 11px; 
    font-size: 11.5px; 
    color: var(--ink-soft); 
    font-family: var(--mono); 
}
.wcard {   
    background: var(--sheet); 
    border: 1.5px solid var(--edge);   
    border-left: 5px solid var(--butter-deep);   
    border-radius: 10px 10px 10px 4px; 
    padding: 15px 18px; 
    margin-bottom: 13px;   
    box-shadow: var(--stamp-shadow-sm); 
} 
.wcard.bad { 
    border-left-color: var(--rose-deep); 
} 
.wcard.ok { 
    border-left-color: var(--mint-deep); 
} 
.wcard .w-title {   
    font-family: var(--mono); 
    font-size: 12px; 
    letter-spacing: 1px;   
    color: var(--butter-deep); 
    margin-bottom: 7px; 
    font-weight: 700; 
} 
.wcard.bad .w-title{ 
    color: var(--rose-deep); 
} 
.wcard.ok .w-title{ 
    color: var(--mint-deep); 
} 
.wcard .w-body{ 
    font-size: 13px; 
    color: var(--ink-soft); 
    line-height: 1.7; 
} 
.wcard .w-body code{   
    font-family: var(--mono); 
    color: var(--ink); 
    background: var(--kraft);   
    padding: 1px 7px; 
    border-radius: 5px 5px 5px 2px; 
    font-size: 12px; cursor: pointer;   
    box-shadow: 1px 1px 0 rgba(110,92,58,.12); 
} 
.wcard .w-body code:hover{ 
    color: var(--blue-deep); 
    background: var(--butter); 
} 
.no-warn{ 
    color: var(--mint-deep); 
    font-family: var(--mono); 
    padding: 34px; 
    text-align: center; 
    font-size: 14px; 
}
#git-summary { 
    font-family: var(--mono); 
    font-size: 12.5px; 
    color: var(--ink-soft); 
    line-height: 1.8; 
} 
#git-summary b { 
    color: var(--ink); 
} 
.git-note { 
    margin-top: 8px; 
    font-size: 11px; 
    color: var(--peach-deep); 
    font-style: italic; 
} 
.commit {   
    background: var(--sheet); 
    border: 1.5px solid var(--edge);   
    border-radius: 10px 10px 10px 4px; 
    margin-bottom: 0; 
    position: relative;   
    padding: 13px 18px 13px 42px; 
    cursor: pointer; box-shadow: none;   
    border-bottom: none; 
} 
.commit:last-child { 
    border-bottom: 1.5px solid var(--edge); 
    box-shadow: var(--stamp-shadow-sm); 
    border-radius: 0 0 10px 4px; 
    margin-bottom: 14px; 
} 
.commit:first-child { 
    border-radius: 10px 10px 0 0; 
} 
.commit::before {   
    content: ""; 
    position: absolute; 
    left: 17px; 
    top: 18px;   
    width: 9px; 
    height: 9px; 
    border-radius: 50%; 
    background: var(--blue);   
    border: 1.5px solid var(--blue-deep); 
} 
.commit::after {   
    content: ""; 
    position: absolute; 
    left: 21px; 
    top: 30px; 
    bottom: -14px;   
    width: 1.5px; 
    background: var(--edge); 
} 
.commit:last-child::after { 
    display: none; 
} 
.commit:hover { 
    background: var(--sheet2); 
} 
.commit .c-msg { 
    font-weight: 600; 
    font-size: 13.5px; 
} 
.commit .c-meta { 
    font-family: var(--mono); 
    font-size: 11px; 
    color: var(--ink-soft); 
    margin-top: 3px; 
} 
.commit .c-files { 
    display: none; 
    margin-top: 10px; 
    font-family: var(--mono); 
    font-size: 11.5px; 
    flex-wrap: wrap; 
    gap: 6px; 
} 
.commit.open 
.c-files { 
    display: flex; 
} 
.fchip {   
    padding: 2px 9px; 
    border-radius: 6px 6px 6px 2px; 
    cursor: pointer;   
    border: 1px solid transparent; 
} 
.fchip:hover { 
    filter: brightness(.95); 
} .fchip.add { 
    background: var(--mint); 
    color: #2c5941; 
} 
.fchip.del { 
    background: var(--rose); 
    color: #6d332d; 
    text-decoration: line-through; } 
.fchip.mod { 
    background: var(--butter); 
    color: #6d5620;
}
#inspector{
    width: 390px;
    min-width: 390px;
    background: var(--sheet2);
    border-left: 1.5px solid var(--edge);
    overflow: auto;
    padding: 22px;
    position:relative;
    animation: slidein .2s ease;
}
@keyframes slidein{
    from{
        transform: translateX(30px);
        opacity: 0;
    }
    to{
        transfform: none;
        opacity: 1;
    }
}
#insp-close{
    position: absolute;
    top: 9px;
    right: 14px;
    background: none;
    border: none;
    color: var(--ink-soft);
    font-size: 23px;
    cursor: pointer;
}
#insp-clllose:hover{
    color: var(--rose-deep);
}
.insp-name{
    font-family: var(--mono);
    font-size: 16px;
    word-break: break-all;
    padding-right: 22px;
    font-weight: 700;
}
.insp-path{
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 4px;
    word-break: break-all;
}
.insp-meta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 16px 0;
}
.insp-meta .m{
    background: var(--sheet);
    border: 1.5px solid var(--edge);
    border-radius: 8px 8px 8px 3px;
    padding: 9px 11px;
    box-shadow: var(--stamp-shadow-sm);
}
.insp-meta .m .k{
    font-size: 9.5px;
    letter-spacing: 1.5px;
    color: var(--ink-soft);
    font-weight: 700;
}
.insp-meta .m .v{
    font-size: 12.5px;
    font-family: var(--mono);
    margin-top: 3px;
}
.insp-h{
    font-size: 10.5px;
    letter-spacing: 2px;
    color: var(--ink-soft);
    font-family: var(--mono);
    margin: 17px 0 9px;
    font-weight: 700;
}
.insp-actions{
    display: flex;
    gap: 8px;
    margin: 12px 0 4px;
    flex-wrap: wrap;
}
.rel-list{
    font-family: var(--mono);
    font-size: 12px;
}
.rel-list .r{
    padding: 4px 9px;
    border-radius: 7px 7px 7px 3px;
    cursor: pointer;
    color: var(--ink);
}
.rel-list .r:hover{
    background: var(--kraft);
    color: var(--blue-deep);
}
.rel-list .r .arrow{
    color: var(--mint-deep);
    margin-right: 7px;
}
.rel-list .r.dep .arrow{
    color: var(--peach-deep);
}
.rel-empty{
    color: var(--ink-soft);
    font-size: 12px;
    font-style: italic;
}
.impact-box{
    background: var(--sheet);
    border: 1.5px solid var(--edge);
    border-radius: 9px 9px 9px 3px;
    padding: 13px;
    margin-top: 6px;
    box-shadow: var(--stamp-shadow-sm);
}
.impact-box .irow{
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 12px;
    padding: 4px 0;
    color: var(--ink-soft);
}
.impact-box .irow b{
    color: var(--ink);
}
.impact-lvl{
    font-weight: 700;
}
.impact-lvl.HIGH{
    color: var(--rose-deep);
}
.impact-lvl.MEDIUM{
    color: var(--butter-deep);
}
.impact-lvl.LOW{
    color: var(--mint-deep);
}
.code-prev{
    background: var(--sheet);
    border: 1.5px solid var(--edge);
    border-radius: 9px 9px 9px 3px;
    padding: 10px 0;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.75;
    overflow: auto;
    max-height: 300px;
    box-shadow: var(--stamp-shadow-sm);
}
.code-prev .ln{
    display: flex;
}
.code-prev .ln .no{
    width: 36px;
    text-align: right;
    padding-right: 11px;
    color: var(--pencil);
    user-select: none;
    flex-shrink: 0;
}
.code-prev .ln .lc{
    white-space: pre;
    color: var(--ink-soft);
}
.code-prev .ln.impline .lc{
    color: var(--blue-deep);
    background: rgba(174,203,228,.22);
}
.why-box{
    background: rgba(239,223,171,.4);
    border: 1.5px dashed var(--butter-deep);
    border-radius: 9px 9px 9px 3px;
    padding: 11px 13px;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.65;
    margin-top: 8px;
}
.why-box b{
    color: var(--peach-deep);
}
.git-box{
    background: rgba(185,217,194,.28);
    border: 1.5px dashed var(--mint-deep);
    border-radius: 9px 9px 9px 3px;
    padding: 11px 13px;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.65;
    margin-top: 8px;
}
.git-box b{
    color: var(--mint-deep);
}
.git-box .g-msg{
    font-family: var(--mono);
    font-size: 11.5px;
    margin-top: 3px;
}
#palette{
    position: fixed;
    inset: 0;
    background: rgba(67,57,43,.28);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    z-index: 50;
    backdrop-filter: blur(2px);
}
.palette-card{
    width: 520px;
    background: var(--sheet);
    border-radius: 13px 13px 13px 5px;
    border: 1.5px solid var(--edge);
    box-shadow: 6px 6px 0 rgba(67,57,43,.2);
    overflow: hidden;
    animation: fadein .15s ease;
}
#palette-input {
    width: 100%;
    padding: 15px 18px;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: var(--sans);
    background: var(--sheet);
    color: var(--ink);
    border-bottom: 1.5px dashed var(--edge);
}
#palette-results{
    max-height: 320px;
    overflow: auto;
}
.pal-item{
    padding: 9px 18px;
    font-family: var(--mono);
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.pal-item .p-path{
    color: var(--ink-soft);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;   
}
.pal-item.sel{
    background: var(--butter);
}
.palette-foot{
    padding: 8px 18px;
    border-top: 1.5px dashed var(--edge);
    font-size: 10.5px;
    color: var(--ink-soft);
    font-family: var(--mono);
}
.kbd{
    background: var(--kraft);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--mono);
    font-size: 10px;
    box-shadow: 1px 1px 0 rgba(110,92,58,.2);
}
::-webkit-scrollbar { 
    width: 12px; 
    height: 12px; 
}
::-webkit-scrollbar-thumb { 
    background: var(--kraft); 
    border-radius: 7px; 
    border: 3px solid var(--desk); 
}
::-webkit-scrollbar-track { 
    background: transparent; 
}