ape-claw 0.1.0

package/ui/css/skills.css

@@ -0,0 +1,689 @@
+    :root{
+      --bg:#0c0c0c;
+      --panel:#1a1a1a;
+      --panel-2:#212121;
+      --panel-hover:#2a2a2a;
+      --panel-border:rgba(207,255,4,.75);
+      --panel-border-soft:rgba(207,255,4,.35);
+      --glow:rgba(207,255,4,.22);
+      --muted:#a6a6a6;
+      --text:#e6e6e6;
+      --amber:#cfff04;
+      --amber-soft:rgba(207,255,4,.75);
+      --green:#00ff00;
+      --cyan:#63d7ff;
+      --danger:#ff3333;
+      --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+      --font-display:'Outfit','Inter','Segoe UI',sans-serif;
+      --terminal-gray:#474546;
+      --terminal-lightgray:#9e9e9e;
+      --accent:#cfff04;
+      --accent-soft:rgba(207,255,4,.75);
+      --gray:#474546;
+      --lightgray:#aaa;
+    }
+    *{box-sizing:border-box;margin:0;padding:0}
+    html{scroll-behavior:smooth}
+    body{
+      min-height:100vh;
+      font-family:'Outfit','Inter','Segoe UI',sans-serif;
+      background:var(--bg);
+      color:var(--text);
+      position:relative;
+      overflow-x:hidden;
+      -webkit-font-smoothing:antialiased;
+      letter-spacing:.02em;
+    }
+    body::before{
+      content:"";
+      position:fixed;
+      inset:0;
+      pointer-events:none;
+      z-index:0;
+      background:
+        radial-gradient(900px 500px at 20% 10%, rgba(207,255,4,0.10) 0%, transparent 60%),
+        radial-gradient(700px 380px at 85% 75%, rgba(0,255,0,0.06) 0%, transparent 55%),
+        linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.85));
+    }
+    .noise{
+      position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0.07;mix-blend-mode:overlay;
+      background-image:
+        repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
+        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 6px);
+    }
+    .scanlines{overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}
+    .scanlines:before,.scanlines:after{display:block;pointer-events:none;content:"";position:absolute}
+    .scanlines:before{width:100%;height:2px;z-index:2147483649;background:rgba(0,0,0,0.3);opacity:0.75;animation:scanline 6s linear infinite}
+    .scanlines:after{top:0;right:0;bottom:0;left:0;z-index:2147483648;background:linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.3) 51%);background-size:100% 4px;animation:scanlines 1s steps(60) infinite}
+    @keyframes scanline{0%{transform:translate3d(0,200000%,0)}}
+    @keyframes scanlines{0%{background-position:0 200000%}}
+    :focus-visible{outline:2px dashed var(--accent);outline-offset:3px}
+
+    /* Disable the older collage background (previous iteration). */
+    .bg-collage, .bg-fade{display:none !important}
+    .bg-collage{
+      position:fixed;
+      inset:0;
+      z-index:0;
+      opacity:0.12;
+      pointer-events:none;
+      display:grid;
+      grid-template-columns:repeat(10,1fr);
+      gap:5px;
+      padding:5px;
+    }
+    .bg-collage img{
+      width:100%;
+      aspect-ratio:1/1;
+      object-fit:cover;
+      border-radius:3px;
+      image-rendering:pixelated;
+      filter:saturate(0.7) contrast(0.85) brightness(0.9);
+      transform:rotate(var(--r));
+    }
+    .bg-fade{
+      position:fixed;inset:0;z-index:1;pointer-events:none;
+      background:
+        radial-gradient(ellipse 90% 50% at 50% 0%, rgba(2,3,5,0.15) 0%, rgba(2,3,5,0.95) 100%),
+        linear-gradient(180deg, rgba(2,3,5,0.1) 0%, rgba(2,3,5,0.7) 40%, rgba(2,3,5,1) 100%);
+    }
+    a{color:inherit;text-decoration:none}
+    a:hover{text-decoration:underline}
+
+    .wrap{position:relative;z-index:3;max-width:1180px;margin:0 auto;padding:20px 20px 28px}
+
+    .hero{position:relative;overflow:hidden;padding:64px 24px 48px;text-align:center}
+    @media(min-width:640px){.hero{padding:80px 40px 56px}}
+    .orb{position:absolute;border-radius:50%;pointer-events:none;opacity:.15}
+    .orb.o1{width:300px;height:300px;top:-80px;left:-60px;background:radial-gradient(circle,rgba(207,255,4,.3),transparent 70%);animation:drift1 20s ease-in-out infinite}
+    .orb.o2{width:200px;height:200px;bottom:-40px;right:-30px;background:radial-gradient(circle,rgba(0,255,255,.2),transparent 70%);animation:drift2 25s ease-in-out infinite}
+    .orb.o3{width:150px;height:150px;top:40%;left:60%;background:radial-gradient(circle,rgba(207,255,4,.15),transparent 70%);animation:drift3 18s ease-in-out infinite}
+    @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,20px)}}
+    @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,-15px)}}
+    @keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-25px)}}
+    .hero-title{font-size:clamp(28px,6vw,52px);font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;max-width:900px;margin:0 auto}
+    .hero-title .glow{color:var(--accent);text-shadow:0 0 24px rgba(207,255,4,.2)}
+    .hero-sub{margin:20px auto 0;max-width:620px;color:var(--lightgray);font-size:14px;line-height:1.7}
+    .hero-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:32px}
+    @media(min-width:480px){.hero-cta{flex-direction:row;justify-content:center;flex-wrap:wrap}}
+    .eyebrow{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
+    .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
+    .btn{
+      display:inline-flex;align-items:center;justify-content:center;gap:8px;
+      padding:10px 18px;border-radius:6px;border:1px solid rgba(207,255,4,.15);
+      background:rgba(14,20,30,.8);color:#f4f7fc;font-weight:700;font-size:13px;
+      letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
+      transition:all .3s ease;white-space:nowrap;
+    }
+    .btn:hover{border-color:var(--accent-soft);background:rgba(207,255,4,.06);text-decoration:none;box-shadow:0 0 20px rgba(207,255,4,.06)}
+    .btn.primary{
+      border-color:#8a5b12;background:linear-gradient(180deg,#ffb64a 0%,#ff9f1a 100%);
+      color:#1b1204;box-shadow:inset 0 0 0 1px rgba(255,231,191,0.28);
+    }
+    .btn.primary:hover{background:linear-gradient(180deg,#ffc168 0%,#ffa92f 100%);box-shadow:inset 0 0 0 1px rgba(255,240,210,0.34)}
+
+    .pill{
+      display:inline-flex;align-items:center;gap:8px;
+      padding:7px 10px;
+      border-radius:999px;
+      border:1px solid rgba(207,255,4,.22);
+      background:rgba(9,13,18,0.6);
+      color:var(--muted);
+      font-size:12px;
+      letter-spacing:.02em;
+    }
+    .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(207,255,4,.35)}
+    .scroll{margin-top:14px;color:var(--muted);font-size:12px;display:inline-flex;align-items:center;gap:8px;letter-spacing:.04em;text-transform:uppercase}
+    .scroll:hover{text-decoration:none;color:var(--text)}
+    .scroll .chev{color:var(--accent-soft)}
+
+    .stats{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
+    @media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
+    .stat{
+      background:linear-gradient(145deg,rgba(28,28,28,.7) 0%,rgba(14,14,14,.85) 100%);
+      border:1px solid rgba(207,255,4,.1);
+      border-radius:8px;
+      padding:18px 16px 14px;
+      min-height:86px;
+      transition:border-color .3s,transform .3s;
+    }
+    .stat:hover{border-color:rgba(207,255,4,.3);transform:translateY(-2px)}
+    .stat .num{font-weight:900;font-size:28px;color:#fff;letter-spacing:-.01em;font-family:var(--mono)}
+    .stat .label{margin-top:6px;color:var(--accent);font-size:12px;line-height:1.4;text-transform:uppercase;letter-spacing:.15em}
+
+    .section{margin-top:22px}
+    .section h2{margin:0 0 16px;font-size:22px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:-.01em;text-align:center}
+    .grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
+    @media(min-width:860px){.grid{grid-template-columns:1fr 1fr}}
+    .card{
+      background:linear-gradient(145deg,rgba(28,28,28,.85) 0%,rgba(14,14,14,.95) 100%);
+      border:1px solid rgba(207,255,4,.1);
+      border-radius:8px;
+      padding:22px 22px 18px;
+      transition:border-color .35s,box-shadow .35s,transform .35s;
+    }
+    .card:hover{border-color:rgba(207,255,4,.35);box-shadow:0 0 30px rgba(207,255,4,.06),0 8px 24px rgba(0,0,0,.3);transform:translateY(-3px)}
+    .card[data-risk="low"],.card.risk-low{border-left:3px solid #4caf50}
+    .card[data-risk="medium"],.card.risk-med{border-left:3px solid #ff9800}
+    .card[data-risk="high"],.card.risk-high{border-left:3px solid #f44336}
+    .card[data-risk="unknown"],.card.risk-unknown{border-left:3px solid #666}
+    .cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
+    .card h3{margin:0;font-size:13px;font-weight:700;color:var(--accent-soft);text-transform:uppercase;letter-spacing:.06em}
+    .badge{
+      font-size:10px;padding:5px 10px;border-radius:5px;border:1px solid rgba(207,255,4,.15);
+      color:var(--muted);background:rgba(9,13,18,0.7);white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
+    }
+    .badge.alpha{border-color:rgba(207,255,4,.25);color:var(--accent-soft)}
+    .badge.live{border-color:rgba(0,255,0,.25);color:rgba(0,255,0,.8)}
+    .badge.found{border-color:rgba(99,215,255,.28);color:rgba(99,215,255,.85)}
+    .card p{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
+    .code{
+      margin-top:12px;padding:14px 14px;border-radius:6px;
+      border:1px solid rgba(207,255,4,.08);background:rgba(8,16,26,.85);
+      font-family:var(--mono);font-size:12px;color:#d4e6fa;overflow:auto;line-height:1.55;
+      white-space:pre-wrap;word-break:break-word;
+    }
+    .k{color:var(--cyan)}
+
+    .list{margin-top:10px;display:flex;flex-direction:column;gap:10px}
+    .item{
+      border:1px solid #2a4056;background:#0b1622;border-radius:2px;
+      padding:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
+    }
+    .item strong{font-size:13px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--accent-soft)}
+    .item .meta{color:var(--muted);font-size:12px;line-height:1.4;margin-top:6px}
+    .item .links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
+    .pill{
+      font-size:11px;padding:6px 8px;border-radius:2px;border:1px solid #2a4056;
+      color:#d4e6fa;background:rgba(9,13,18,0.5);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;
+    }
+    .pill.low{border-color:rgba(99,215,255,.35)}
+    .pill.med{border-color:rgba(207,255,4,.22)}
+    .pill.high{border-color:rgba(255,51,51,.28);color:#ffd1d1}
+    .tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
+    .tools input{
+      background:rgba(11,22,34,.8);border:1px solid rgba(207,255,4,.12);color:#d4e6fa;padding:10px 14px;border-radius:6px;
+      font-size:13px;min-width:260px;outline:none;transition:border-color .3s,box-shadow .3s;
+      font-family:var(--mono);
+    }
+    .tools input:focus{border-color:var(--accent-soft);box-shadow:0 0 16px rgba(207,255,4,.08),0 0 0 3px rgba(207,255,4,.04)}
+    .tools input::placeholder{color:rgba(166,166,166,.7)}
+    .tools textarea{
+      width:100%;
+      background:rgba(11,22,34,.8);
+      border:1px solid rgba(207,255,4,.12);
+      color:#d4e6fa;
+      padding:9px 12px;
+      border-radius:6px;
+      font-size:13px;
+      outline:none;
+      font-family:var(--mono);
+      line-height:1.5;
+      min-height:160px;
+      resize:vertical;
+      transition:border-color .3s,box-shadow .3s;
+    }
+    .tools textarea:focus{border-color:var(--accent-soft);box-shadow:0 0 16px rgba(207,255,4,.08)}
+    .tools .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;width:100%}
+    .note{
+      margin-top:10px;
+      color:var(--muted);
+      font-size:12px;
+      line-height:1.55;
+    }
+    .note code{font-family:var(--mono);font-size:12px;color:#d4e6fa}
+    .danger-note{
+      margin-top:12px;
+      border:1px solid rgba(255,51,51,.25);
+      background:rgba(255,51,51,.06);
+      border-radius:2px;
+      padding:12px;
+      color:#ffd1d1;
+      font-size:12.5px;
+      line-height:1.65;
+    }
+    .toast{
+      position:fixed;
+      left:12px;
+      right:12px;
+      bottom:12px;
+      z-index:50;
+      display:none;
+      border:1px solid var(--panel-border);
+      background:rgba(9,13,18,0.92);
+      border-radius:2px;
+      padding:10px 12px;
+      color:#d4e6fa;
+      font-size:12.5px;
+      line-height:1.4;
+      box-shadow:0 10px 36px rgba(0,0,0,0.45);
+    }
+    .toast.show{display:block}
+    .toast.err{border-color:rgba(255,51,51,.35);color:#ffd1d1}
+
+    .modal-backdrop{
+      position:fixed;inset:0;z-index:60;
+      background:rgba(0,0,0,0.65);
+      display:none;
+      padding:18px;
+    }
+    .modal-backdrop.show{display:flex;align-items:center;justify-content:center}
+    .modal{
+      width:min(720px, 100%);
+      border:1px solid rgba(207,255,4,.2);
+      background:linear-gradient(145deg,rgba(28,28,28,.97) 0%,rgba(14,14,14,.99) 100%);
+      border-radius:10px;
+      box-shadow:0 30px 80px rgba(0,0,0,0.7),0 0 60px rgba(207,255,4,.04);
+      padding:20px;
+      backdrop-filter:blur(12px);
+    }
+    .modal h3{
+      margin:0;
+      font-size:13px;
+      font-weight:900;
+      letter-spacing:.06em;
+      text-transform:uppercase;
+      color:var(--accent-soft);
+    }
+    .modal .body{margin-top:12px}
+    .modal .body .note{margin-top:8px}
+    .modal .footer{margin-top:14px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
+    .modal input{
+      width:100%;
+      background:#0b1622;border:1px solid #2a4056;color:#d4e6fa;
+      padding:9px 10px;border-radius:2px;font-size:13px;outline:none;
+    }
+    .modal input:focus{border-color:var(--cyan)}
+    .modal label{
+      display:block;
+      margin-top:10px;
+      font-size:11px;
+      color:var(--muted);
+      letter-spacing:.04em;
+      text-transform:uppercase;
+    }
+    .tools select{
+      background:rgba(11,22,34,.8);border:1px solid rgba(207,255,4,.12);color:#d4e6fa;padding:9px 12px;border-radius:6px;
+      font-size:13px;outline:none;transition:border-color .3s;
+    }
+    .tools select:focus{border-color:var(--accent-soft)}
+    .tools label{
+      display:inline-flex;align-items:center;gap:8px;
+      border:1px solid #2a4056;background:rgba(9,13,18,0.5);
+      padding:7px 9px;border-radius:2px;
+      font-size:12px;color:#d4e6fa;text-transform:uppercase;letter-spacing:.04em;
+      user-select:none;
+    }
+    .tools input[type="checkbox"]{width:14px;height:14px;min-width:0;accent-color:var(--accent)}
+
+    /* ── Add Tab step flow ── */
+    .step-flow{display:flex;flex-direction:column;gap:0;margin-top:16px}
+    .step-card{
+      background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 100%);
+      border:1px solid rgba(207,255,4,.15);
+      border-radius:8px;
+      padding:0;
+      overflow:hidden;
+      margin-bottom:14px;
+      transition:border-color .3s;
+    }
+    .step-card:hover{border-color:rgba(207,255,4,.35)}
+    .step-header{
+      display:flex;align-items:center;gap:14px;
+      padding:18px 20px;
+      cursor:pointer;
+      user-select:none;
+    }
+    .step-num{
+      width:32px;height:32px;border-radius:50%;
+      display:grid;place-items:center;
+      border:2px solid var(--accent);
+      color:var(--accent);
+      font-weight:900;font-size:14px;
+      flex-shrink:0;
+      transition:background .3s,color .3s;
+    }
+    .step-card.active .step-num{background:var(--accent);color:#111}
+    .step-title{font-size:14px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.04em;flex:1}
+    .step-badge{font-size:10px;padding:4px 8px;border-radius:999px;border:1px solid rgba(207,255,4,.2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
+    .step-badge.done{border-color:rgba(0,255,0,.3);color:rgba(0,255,0,.8)}
+    .step-chevron{color:var(--muted);font-size:18px;transition:transform .3s}
+    .step-card.open .step-chevron{transform:rotate(180deg)}
+    .step-body{
+      display:none;
+      padding:0 20px 20px;
+    }
+    .step-card.open .step-body{display:block}
+
+    .template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
+    @media(max-width:640px){.template-grid{grid-template-columns:1fr}}
+    .template-btn{
+      background:rgba(11,22,34,.6);
+      border:1px solid rgba(207,255,4,.12);
+      border-radius:8px;
+      padding:16px;
+      cursor:pointer;
+      text-align:left;
+      transition:all .25s;
+    }
+    .template-btn:hover{border-color:rgba(207,255,4,.4);background:rgba(207,255,4,.04);transform:translateY(-2px)}
+    .template-btn.selected{border-color:var(--accent);background:rgba(207,255,4,.08);box-shadow:0 0 20px rgba(207,255,4,.1)}
+    .template-btn .t-risk{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
+    .template-btn .t-risk.low{color:#4caf50}
+    .template-btn .t-risk.med{color:#ff9800}
+    .template-btn .t-risk.high{color:#f44336}
+    .template-btn .t-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
+    .template-btn .t-desc{font-size:11px;color:var(--muted);line-height:1.5}
+
+    .collapsible-toggle{
+      display:inline-flex;align-items:center;gap:6px;
+      background:none;border:1px solid rgba(207,255,4,.12);
+      color:var(--muted);font-size:11px;padding:6px 12px;
+      border-radius:4px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;
+      transition:all .2s;margin-top:8px;
+    }
+    .collapsible-toggle:hover{border-color:rgba(207,255,4,.3);color:var(--text)}
+    .collapsible-content{display:none;margin-top:10px}
+    .collapsible-content.show{display:block}
+
+    /* ── 3D Holographic Skill Cards ── */
+    .cards{
+      margin-top:16px;
+      display:grid;
+      grid-template-columns:1fr;
+      gap:20px;
+      perspective:1200px;
+    }
+    @media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
+    @media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
+    @media(min-width:1000px){
+      .cards .skill-card:last-child:nth-child(3n+1){grid-column:1 / -1}
+    }
+    @media(min-width:640px) and (max-width:999px){
+      .cards .skill-card:last-child:nth-child(2n+1){grid-column:1 / -1}
+    }
+
+    .skill-card{
+      --glow-color:207,255,4;
+      --glow-a:.12;
+      position:relative;
+      background:
+        linear-gradient(168deg,rgba(22,26,30,.96) 0%,rgba(12,12,14,.98) 55%,rgba(16,20,24,.97) 100%);
+      border:1px solid rgba(var(--glow-color),.10);
+      border-radius:14px;
+      padding:0;
+      overflow:hidden;
+      display:flex;
+      flex-direction:column;
+      min-height:290px;
+      transition:
+        transform .5s cubic-bezier(.22,.68,0,1.2),
+        box-shadow .5s cubic-bezier(.22,.68,0,1),
+        border-color .4s ease;
+      transform-style:preserve-3d;
+      will-change:transform,box-shadow;
+      box-shadow:
+        0 2px 8px rgba(0,0,0,.4),
+        0 0 1px rgba(var(--glow-color),.15),
+        inset 0 1px 0 rgba(255,255,255,.03);
+    }
+
+    .skill-card::before{
+      content:'';position:absolute;inset:-1px;border-radius:15px;
+      background:conic-gradient(
+        from var(--border-angle,0deg),
+        transparent 0%,
+        rgba(var(--glow-color),.4) 8%,
+        transparent 16%,
+        rgba(99,215,255,.3) 25%,
+        transparent 33%,
+        rgba(var(--glow-color),.2) 50%,
+        transparent 58%,
+        rgba(99,215,255,.15) 66%,
+        transparent 75%,
+        rgba(var(--glow-color),.3) 90%,
+        transparent 100%
+      );
+      opacity:0;
+      transition:opacity .5s ease;
+      pointer-events:none;
+      z-index:-1;
+      animation:borderSpin 6s linear infinite;
+    }
+    .skill-card:hover::before{opacity:1}
+    @property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
+    @keyframes borderSpin{to{--border-angle:360deg}}
+
+    .skill-card::after{
+      content:'';position:absolute;inset:0;border-radius:14px;
+      background:linear-gradient(
+        135deg,
+        rgba(var(--glow-color),.06) 0%,
+        transparent 35%,
+        transparent 65%,
+        rgba(99,215,255,.04) 100%
+      );
+      opacity:0;
+      transition:opacity .4s ease;
+      pointer-events:none;z-index:1;
+    }
+    .skill-card:hover::after{opacity:1}
+
+    .skill-card:hover{
+      transform:translateY(-12px) scale(1.02);
+      border-color:rgba(var(--glow-color),.35);
+      box-shadow:
+        0 30px 60px -10px rgba(0,0,0,.6),
+        0 0 40px -5px rgba(var(--glow-color),.12),
+        0 0 80px -10px rgba(var(--glow-color),.06),
+        0 0 0 1px rgba(var(--glow-color),.08),
+        inset 0 1px 0 rgba(255,255,255,.06);
+    }
+    .skill-card.onchain-card{--glow-color:0,255,100;--glow-a:.15}
+    .skill-card.risk-high{--glow-color:255,60,60;--glow-a:.12}
+
+    .skill-card .card-shine{
+      position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:14px;
+      background:radial-gradient(
+        600px circle at var(--mx,50%) var(--my,50%),
+        rgba(255,255,255,.045) 0%,
+        transparent 50%
+      );
+      opacity:0;transition:opacity .35s;
+    }
+    .skill-card:hover .card-shine{opacity:1}
+
+    .skill-card .card-scanline{
+      position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:14px;overflow:hidden;
+      opacity:0;transition:opacity .5s;
+    }
+    .skill-card:hover .card-scanline{opacity:1}
+    .skill-card .card-scanline::after{
+      content:'';position:absolute;left:0;right:0;height:1px;top:-10%;
+      background:linear-gradient(90deg,transparent 5%,rgba(var(--glow-color),.2) 30%,rgba(var(--glow-color),.35) 50%,rgba(var(--glow-color),.2) 70%,transparent 95%);
+      animation:scanDrop 3.5s ease-in-out infinite;
+      box-shadow:0 0 12px 2px rgba(var(--glow-color),.08);
+    }
+    @keyframes scanDrop{0%{top:-10%}100%{top:110%}}
+
+    .skill-card{
+      animation:cardEnter .6s cubic-bezier(.22,.68,0,1.1) both;
+      animation-delay:calc(var(--i,0) * 60ms);
+    }
+    @keyframes cardEnter{
+      from{opacity:0;transform:translateY(30px) scale(.95) rotateX(4deg)}
+      to{opacity:1;transform:translateY(0) scale(1) rotateX(0)}
+    }
+
+    .skill-tier-bar{
+      height:3px;width:100%;flex-shrink:0;
+      background:linear-gradient(90deg,var(--tier-color,#333) 0%,rgba(var(--glow-color),.15) 60%,transparent 100%);
+      box-shadow:0 0 8px var(--tier-color,transparent);
+      transition:box-shadow .4s;
+    }
+    .skill-card:hover .skill-tier-bar{box-shadow:0 0 16px var(--tier-color,transparent)}
+    .skill-tier-bar[data-tier="low"]{--tier-color:#4caf50}
+    .skill-tier-bar[data-tier="med"]{--tier-color:#ff9800}
+    .skill-tier-bar[data-tier="high"]{--tier-color:#f44336}
+
+    .skill-card-inner{
+      position:relative;z-index:4;
+      padding:20px 22px 18px;
+      display:flex;flex-direction:column;flex:1;
+    }
+
+    .skill-nft-badge{
+      display:inline-flex;align-items:center;gap:5px;
+      padding:4px 10px;border-radius:6px;
+      font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
+      backdrop-filter:blur(4px);
+    }
+    .skill-nft-badge.onchain{
+      background:linear-gradient(135deg,rgba(0,255,100,.16),rgba(0,255,100,.04));
+      border:1px solid rgba(0,255,100,.4);color:rgba(0,255,100,.95);
+      box-shadow:0 0 18px rgba(0,255,100,.12),inset 0 0 8px rgba(0,255,100,.04);
+    }
+    a.skill-nft-badge{text-decoration:none}
+    a.skill-nft-badge:hover{filter:brightness(1.3);box-shadow:0 0 24px rgba(0,255,100,.2)}
+    .skill-nft-badge.offchain{
+      background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.35);
+    }
+    .nft-pulse{
+      width:6px;height:6px;border-radius:50%;background:currentColor;
+      box-shadow:0 0 8px currentColor,0 0 16px currentColor;
+      animation:nftPulse 2s ease-in-out infinite;
+    }
+    @keyframes nftPulse{0%,100%{opacity:1;box-shadow:0 0 8px currentColor,0 0 16px currentColor}50%{opacity:.3;box-shadow:0 0 4px currentColor}}
+
+    .skill-risk{
+      display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:800;
+      letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:5px;
+      border:1px solid;backdrop-filter:blur(4px);
+    }
+    .skill-risk.low{border-color:rgba(76,175,80,.35);color:#4caf50;background:rgba(76,175,80,.08)}
+    .skill-risk.med{border-color:rgba(255,152,0,.35);color:#ff9800;background:rgba(255,152,0,.08)}
+    .skill-risk.high{border-color:rgba(244,67,54,.35);color:#f44336;background:rgba(244,67,54,.08)}
+    .skill-risk.unknown{border-color:rgba(102,102,102,.3);color:#888;background:rgba(102,102,102,.06)}
+
+    .skill-title{
+      margin:0;font-size:15px;font-weight:900;letter-spacing:.02em;
+      text-transform:uppercase;color:#fff;line-height:1.35;
+      transition:color .3s,text-shadow .3s;
+      font-family:var(--font-display);
+    }
+    .skill-card:hover .skill-title{
+      color:rgba(var(--glow-color),1);
+      text-shadow:0 0 20px rgba(var(--glow-color),.2);
+    }
+    .skill-slug{
+      margin-top:4px;font-family:var(--mono);font-size:10px;
+      color:rgba(255,255,255,.3);letter-spacing:.02em;
+    }
+
+    .skill-desc{
+      margin-top:12px;color:rgba(255,255,255,.5);font-size:12px;line-height:1.7;flex:1;
+      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
+    }
+
+    .skill-chain-data{
+      margin-top:auto;padding-top:12px;
+      border-top:1px solid rgba(var(--glow-color),.06);
+      display:flex;flex-direction:column;gap:4px;
+    }
+    .skill-tx{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;color:var(--muted)}
+    .skill-tx-label{font-weight:700;color:rgba(var(--glow-color),.7);text-transform:uppercase;letter-spacing:.06em;min-width:52px;font-size:8px}
+    .skill-tx-hash{
+      color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+      cursor:pointer;transition:color .2s,text-shadow .2s;max-width:160px;display:inline-block;text-decoration:none;
+    }
+    .skill-tx-hash:hover{color:#fff;text-shadow:0 0 8px rgba(99,215,255,.4)}
+
+    .skill-foot{
+      margin-top:14px;padding-top:12px;
+      border-top:1px solid rgba(var(--glow-color),.06);
+      display:flex;gap:6px;flex-wrap:wrap;align-items:center;
+    }
+    .skill-foot .pill{
+      font-size:9px;padding:5px 10px;border-radius:5px;
+      transition:all .25s cubic-bezier(.22,.68,0,1);
+      border:1px solid rgba(99,215,255,.12);color:rgba(99,215,255,.8);
+      background:rgba(99,215,255,.03);text-decoration:none;
+    }
+    .skill-foot .pill:hover{
+      border-color:rgba(var(--glow-color),.5);
+      background:rgba(var(--glow-color),.1);
+      color:#fff;text-decoration:none;
+      box-shadow:0 0 16px rgba(var(--glow-color),.08);
+      transform:translateY(-1px);
+    }
+    .skill-foot .pill.install-btn{
+      border-color:rgba(var(--glow-color),.4);color:rgba(var(--glow-color),.95);
+      background:rgba(var(--glow-color),.08);font-weight:800;
+      box-shadow:0 0 8px rgba(var(--glow-color),.06);
+    }
+    .skill-foot .pill.install-btn:hover{
+      border-color:rgba(var(--glow-color),.7);
+      background:rgba(var(--glow-color),.18);color:#fff;
+      box-shadow:0 0 20px rgba(var(--glow-color),.15),0 0 40px rgba(var(--glow-color),.06);
+    }
+    .skill-foot .pill.nft{border-color:rgba(0,255,0,.25);color:rgba(0,255,0,.85);background:rgba(0,255,0,.05)}
+    .skill-foot .pill.nft:hover{border-color:rgba(0,255,0,.5);background:rgba(0,255,0,.12);color:#fff}
+
+    .pagination-bar{
+      display:flex;align-items:center;justify-content:center;gap:16px;
+      margin:28px auto 8px;padding:14px 20px;
+      background:rgba(11,22,34,.6);
+      border:1px solid rgba(207,255,4,.1);border-radius:8px;
+      max-width:400px;backdrop-filter:blur(4px);
+    }
+    .pg-btn{
+      padding:8px 18px;border-radius:6px;border:1px solid rgba(207,255,4,.2);
+      background:rgba(207,255,4,.04);color:var(--accent);
+      font-size:13px;font-weight:700;cursor:pointer;
+      transition:all .25s cubic-bezier(.22,.68,0,1);font-family:var(--font-display);
+    }
+    .pg-btn:hover:not(:disabled){border-color:var(--accent);background:rgba(207,255,4,.1);color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(207,255,4,.08)}
+    .pg-btn:active:not(:disabled){transform:translateY(0) scale(0.97)}
+    .pg-btn:disabled{opacity:.3;cursor:default}
+    .pg-info{
+      font-size:12px;color:var(--muted);font-weight:600;
+      letter-spacing:.04em;min-width:120px;text-align:center;
+    }
+
+    #importedList{
+      display:grid;
+      grid-template-columns:1fr;
+      gap:24px;
+      perspective:1000px;
+    }
+    @media(min-width:580px){#importedList{grid-template-columns:repeat(2,1fr);gap:26px}}
+    @media(min-width:960px){#importedList{grid-template-columns:repeat(3,1fr);gap:28px}}
+
+    .skill-source-tag{
+      font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
+      padding:2px 6px;border-radius:3px;border:1px solid rgba(99,215,255,.18);
+      color:var(--cyan);background:rgba(99,215,255,.04);margin-left:auto;
+    }
+
+    .skill-meta{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+    .pill.nft{border-color:rgba(0,255,0,.25);color:rgba(0,255,0,.8)}
+    .pill.off{border-color:rgba(207,255,4,.22);color:var(--accent-soft)}
+    .skill-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+    .sec-label{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px}
+    .sec-label .dash{height:1px;width:0;background:rgba(207,255,4,.3);transition:width .7s cubic-bezier(.16,1,.3,1)}
+    .ac-visible .sec-label .dash{width:32px}
+    .sec-label span{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:.2em;text-transform:uppercase}
+    .sec-heading{font-size:24px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:-.02em;text-align:center;margin:4px 0 0;font-family:var(--font-display)}
+    @media(min-width:640px){.sec-heading{font-size:32px}}
+    .sec-sub{color:var(--lightgray);font-size:13px;text-align:center;max-width:520px;margin:12px auto 0;line-height:1.65}
+    .sep{height:1px;background:linear-gradient(90deg,transparent,rgba(207,255,4,.3),transparent);transition:all 1s;transform:scaleX(0)}
+    .sep.show,.ac-visible .sep{transform:scaleX(1)}
+    .foot{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.04em}
+    .online{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--gray);background:rgba(9,13,18,.7);color:var(--muted);font-size:11px}
+    .tab-bar{display:flex;gap:3px;margin:24px 0 20px;border:1px solid rgba(207,255,4,.15);border-radius:8px;overflow:hidden;background:rgba(0,0,0,.3);padding:3px}
+    .tab-btn{flex:1;padding:11px 18px;border:none;background:transparent;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .25s;border-radius:6px;font-family:var(--font-display);position:relative}
+    .tab-btn:hover{background:rgba(207,255,4,.04);color:var(--text)}
+    .tab-btn:active{transform:scale(0.97)}
+    .tab-btn.active{background:rgba(207,255,4,.1);color:var(--accent);box-shadow:0 0 12px rgba(207,255,4,.06),inset 0 0 0 1px rgba(207,255,4,.15)}
+    .tab-panel{display:none}
+    .tab-panel.active{display:block}