/* Content sections for the Security and Project pages (inside .win panels, so they use panel tokens) */
.devs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.walls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:6px}
.wall{border:1px solid var(--line);border-radius:var(--card-radius);padding:18px;background:var(--panel-soft);position:relative;overflow:hidden;box-shadow:var(--card-shadow)}
.wall .bricks{height:34px;margin:-18px -18px 14px;background:
  linear-gradient(90deg,#fff 2px,transparent 2px) 0 0/40px 17px,
  linear-gradient(90deg,#fff 2px,transparent 2px) 20px 17px/40px 17px,
  linear-gradient(180deg,transparent 15px,#fff 15px 17px,transparent 17px) 0 0/100% 17px,var(--c);opacity:.9}
.wall .tag{font-family:var(--f-pixel);font-size:13px;color:var(--accent)}
.wall h4{margin:2px 0 6px;font-size:17px;color:var(--panel-heading)}
.wall p{font-size:14px;margin:0}
.picto{margin-top:20px;display:flex;border:2px solid #8fb7da;border-radius:12px;overflow:hidden;background:#fff}
.picto .who{flex:0 0 auto;background:linear-gradient(180deg,#7fd3ff,var(--accent-2));color:#fff;font-family:var(--f-pixel);padding:10px 14px;display:flex;align-items:flex-start;border-right:2px solid #8fb7da}
.picto .msg{flex:1;padding:8px 16px;font-size:clamp(17px,2.2vw,21px);font-weight:800;color:var(--panel-heading);line-height:30px;background:repeating-linear-gradient(180deg,transparent 0 29px,#cfe3f4 29px 30px);background-position:0 8px}
html[data-look="graphite"] .picto{border-color:#2b2d33}
html[data-look="graphite"] .picto .who{background:#2b2d33;border-color:#2b2d33}
html[data-look="solitude"] .picto{border:0;border-radius:6px;box-shadow:4px 5px 0 rgba(0,0,0,.14),0 0 0 1px #e6e6e6}
html[data-look="solitude"] .picto .who{background:#4b1fa0;border:0;font-family:var(--f-display)}
html[data-look="solitude"] .picto .msg{font-family:var(--f-display);font-weight:400;background:none}

.pipe{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:10px 0 18px}
.pipe::before{content:"";position:absolute;left:10%;right:10%;top:30px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,#cfe3f4 0 10px,#e6f1fa 10px 20px);animation:flowbg 1s linear infinite}
@keyframes flowbg{to{background-position:20px 0}}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12.5px;font-weight:700;color:#7a8799;min-width:0}
.node .tile{width:60px;height:60px;border-radius:16px;--c:#9fb6cc;transition:transform .3s}
.node .tile svg{width:30px;height:30px}
.node.on{color:var(--panel-heading)}
.node.on .tile{--c:var(--accent-2);transform:scale(1.12)}
html[data-look="solitude"] .node.on .tile{box-shadow:0 0 0 3px var(--accent-2),3px 4px 0 rgba(0,0,0,.14)}
.packet{position:absolute;top:22px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 60%);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent),0 0 16px var(--accent);transition:left .7s cubic-bezier(.5,0,.3,1);z-index:2}
.audit{position:absolute;right:0;top:-10px;font-family:var(--f-pixel);font-size:12px;background:#ffb81a;color:#4a3200;border-radius:6px;padding:1px 8px;opacity:0;transform:translateY(6px);transition:all .3s}
.audit.on{opacity:1;transform:none}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.steps button{width:100%;text-align:left;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);background:var(--panel-soft);border-radius:12px;padding:9px 12px;font-size:14px;line-height:1.5;color:var(--panel-fg);transition:all .2s}
.steps button b{font-family:var(--f-pixel);font-weight:400;color:#7a8799;flex:0 0 auto}
.steps button.on{background:color-mix(in srgb,var(--accent-2) 12%,#fff);border-color:color-mix(in srgb,var(--accent-2) 50%,#fff);color:var(--panel-heading)}
.steps button.on b{color:var(--accent)}
html[data-look="solitude"] .steps button{border-radius:4px}
html[data-look="solitude"] .steps button.on{background:var(--accent-2);color:#fff;border-color:var(--accent-2)}
html[data-look="solitude"] .steps button.on b{color:#fff}

.threat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px}
.tlist{display:flex;flex-direction:column;gap:6px}
.tlist button{text-align:left;border:1px solid var(--line);background:var(--panel-soft);border-radius:12px;padding:9px 14px;font-size:14px;font-weight:700;color:var(--panel-heading);display:flex;justify-content:space-between;gap:10px;align-items:center}
.tlist button::after{content:"▶";font-size:10px;color:#7a8799}
.tlist button.on{background:linear-gradient(180deg,var(--hot-a),var(--hot-b));color:#fff;border-color:var(--hot-c)}
.tlist button.on::after{color:#fff}
html[data-look="solitude"] .tlist button{border-radius:4px;border-left:4px solid var(--accent);background:#fff}
html[data-look="solitude"] .tlist button.on{background:var(--accent-2);border-color:var(--accent-2);border-left-color:var(--accent)}
.result{position:relative;background:#fff;border:2px solid #8fb7da;border-radius:18px;padding:20px;align-self:start;box-shadow:0 6px 0 #dcebf7}
html[data-look="graphite"] .result{border-color:#2b2d33;box-shadow:5px 6px 0 rgba(0,0,0,.12)}
html[data-look="solitude"] .result{border:0;border-radius:6px;box-shadow:5px 6px 0 rgba(0,0,0,.14),0 0 0 1px #e6e6e6}
.result .lbl{font-family:var(--f-pixel);font-size:13px;color:var(--accent)}
.result .get{font-family:var(--f-display);font-size:clamp(17px,2.2vw,21px);color:var(--panel-heading);margin:2px 0 14px;line-height:1.35}
.result p{font-size:14.5px;margin:0}
.result.swap2{animation:sw2 .3s both}
@keyframes sw2{from{opacity:0;transform:translateY(6px)}}

.save{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{padding:14px 16px}
.stat b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(22px,3vw,30px);color:var(--panel-heading);line-height:1.2;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--f-pixel);font-size:13px;color:#6b7a8f}
.stat.pass b{color:#2d8a12}
.ba{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;margin-top:18px}
.ba th{font-family:var(--f-pixel);font-weight:400;text-align:left;color:#6b7a8f;padding:6px 10px;border-bottom:2px solid var(--line)}
.ba td{padding:9px 10px;border-bottom:1px dashed var(--line);vertical-align:top}
.ba td:first-child{font-weight:800;color:var(--panel-heading);white-space:nowrap}
.ba td:nth-child(2){color:#9a5a6a}
.ba td:nth-child(3){color:#245c12}
.tscroll{overflow-x:auto}

.carts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.cart{position:relative;background:linear-gradient(180deg,#4b5563,#2f3743);border-radius:8px 8px 10px 10px;padding:22px 10px 10px;color:#fff;clip-path:polygon(0 0,82% 0,100% 12%,100% 100%,0 100%);transition:transform .25s cubic-bezier(.2,.9,.3,1.4);min-width:0}
.cart::before{content:"";position:absolute;left:10px;right:24%;top:7px;height:8px;background:repeating-linear-gradient(90deg,#5f6a79 0 3px,transparent 3px 6px);border-radius:2px}
.cart:hover{transform:translateY(-6px) rotate(-1.5deg)}
.cart .lab{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 45%,#fff),var(--c));border-radius:5px;padding:10px;min-height:150px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.cart .lab::after{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent)}
.cart b{font-family:var(--f-display);font-weight:400;font-size:12.5px;line-height:1.3;text-shadow:0 1px 0 rgba(0,0,0,.25);position:relative}
.cart span{font-size:12px;line-height:1.4;position:relative;color:rgba(255,255,255,.95);text-shadow:0 1px 0 rgba(0,0,0,.2)}
.cart .soon{position:absolute;right:8px;bottom:8px;font-family:var(--f-pixel);font-size:11px;background:#fff;color:#13325b;border-radius:4px;padding:0 6px;text-shadow:none}
.cart a{color:#fff!important}
html[data-look="solitude"] .cart{clip-path:none;background:#fff;border-radius:8px;padding:0;box-shadow:4px 5px 0 rgba(0,0,0,.14),0 0 0 1px #e6e6e6;color:#111}
html[data-look="solitude"] .cart::before{display:none}
html[data-look="solitude"] .cart .lab{background:#fff;border-top:6px solid var(--c);border-radius:8px}
html[data-look="solitude"] .cart .lab::after{display:none}
html[data-look="solitude"] .cart b,html[data-look="solitude"] .cart span{color:#111;text-shadow:none}
html[data-look="solitude"] .cart a{color:#111!important}

.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nx{display:flex;gap:12px;align-items:flex-start;padding:12px 14px}
.nx .chip{flex:0 0 auto;font-family:var(--f-pixel);font-size:12px;border-radius:6px;padding:1px 8px;background:#ffb81a;color:#4a3200;margin-top:2px}
.nx .chip.up{background:var(--accent);color:#fff}
.nx b{color:var(--panel-heading);display:block;font-size:14.5px}
.nx span{font-size:13.5px;color:#6b7a8f;line-height:1.5}
.ldbar{height:14px;border-radius:7px;background:#e3eef8;border:1px solid var(--line);overflow:hidden;margin:4px 0 18px;position:relative}
.ldbar i{position:absolute;inset:0;width:72%;background:repeating-linear-gradient(-45deg,var(--accent-2) 0 10px,color-mix(in srgb,var(--accent-2) 55%,#fff) 10px 20px);animation:barber 1s linear infinite}
@keyframes barber{to{background-position:28px 0}}
.friends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fc{display:flex;gap:14px;align-items:center;padding:14px}
.fc .tile{flex:0 0 64px;height:64px;border-radius:16px;font-family:var(--f-display);color:#fff;font-size:18px;text-shadow:0 1px 0 rgba(0,0,0,.25)}
html[data-look="solitude"] .fc .tile{color:#111;text-shadow:none}
.fc .tile span{position:relative}
.fc b{font-size:16px;color:var(--panel-heading);display:block}
.fc .role{font-family:var(--f-pixel);font-size:12px;color:var(--accent)}
.fc q{display:block;font-size:14px;margin:2px 0 4px}
.fc .links{font-size:13px;display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:860px){.threat{grid-template-columns:1fr}}
@media (max-width:720px){.walls,.save{grid-template-columns:1fr 1fr}.next,.friends{grid-template-columns:1fr}.walls .wall:last-child{grid-column:1/-1}}
@media (max-width:520px){.walls{grid-template-columns:1fr}.pipe .node{font-size:10.5px}.node .tile{width:46px;height:46px;border-radius:12px}.node .tile svg{width:22px;height:22px}.pipe::before{top:23px}.packet{top:15px;width:18px;height:18px;margin-left:-9px}}

button.cart{border:0;font:inherit;text-align:left;cursor:pointer;width:100%}
button.cart .lab{display:flex}
button.cart:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button.cart:active{transform:translateY(2px) scale(.98)}
.cartdlg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(30,20,50,.35);backdrop-filter:blur(3px)}
.cartdlg[hidden]{display:none}
.cbox{width:min(460px,100%);background:#fff;border-radius:22px;padding:22px;box-shadow:0 0 0 1px #e8ecf1,0 24px 60px rgba(20,40,80,.25);position:relative;overflow:hidden}
.cartdlg.in .cbox{animation:cin .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes cin{from{transform:translateY(30px) scale(.94);opacity:0}}
.cslot{height:62px;margin:-22px -22px 16px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 45%,#fff),var(--c));position:relative}
.cchip{position:absolute;left:22px;bottom:-14px;width:120px;height:28px;border-radius:6px;background:repeating-linear-gradient(90deg,#d9c58a 0 6px,#b89b4c 6px 9px);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.cartdlg.in .cchip{animation:cslide .6s .1s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes cslide{from{transform:translateY(-40px)}}
.cbox h3{margin:10px 0 4px!important;font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--panel-heading)}
.cbox .cd{font-weight:800;color:var(--panel-heading);margin:0 0 8px}
.cbox p{margin:0 0 10px;color:var(--panel-fg)}
.crow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}