:root{
  --bg:#060a08;
  --bg-alt:#0a100c;
  --surface:#0d1512;
  --surface-hi:#101c16;

  --border:#163326;
  --border-hi:#1f4a34;

  --green:#00ff9d;
  --green-dim:#00b377;
  --green-glow:rgba(0,255,157,.35);

  --cyan:#38e0ff;
  --red:#ff4d6d;
  --amber:#ffbe3d;

  --text:#d9f5e6;
  --text-dim:#7fa392;
  --text-faint:#4c6459;

  --mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  --sans:'Inter',system-ui,sans-serif;

  --radius:10px;
  --maxw:1180px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

::selection{
  background:var(--green);
  color:#04140c;
}

:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(
      rgba(0,255,157,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,255,157,.035) 1px,
      transparent 1px
    );
  background-size:38px 38px;
  mask-image:
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      #000 40%,
      transparent 85%
    );
}

main,
footer{
  position:relative;
  z-index:1;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}

.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,10,8,.90);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-weight:700;
  letter-spacing:.5px;
  font-size:16px;
}

.brand-mark{
  width:30px;
  height:30px;
  border:1px solid var(--border-hi);
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  box-shadow:
    0 0 14px var(--green-glow) inset;
}

.bracket{
  color:var(--green);
}

.navlinks{
  display:flex;
  gap:2px;
  align-items:center;
}

.navlinks a{
  font-family:var(--mono);
  font-size:13px;
  color:var(--text-dim);
  padding:9px 13px;
  border-radius:6px;
  transition:.15s;
}

.navlinks a:hover{
  color:var(--green);
  background:rgba(0,255,157,.06);
}

.navlinks a.active{
  color:var(--green);
}

.navtoggle{
  display:none;
  background:none;
  border:1px solid var(--border-hi);
  color:var(--green);
  border-radius:6px;
  padding:8px 10px;
  font-family:var(--mono);
}

.btn{
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  padding:9px 16px;
  border-radius:6px;
  border:1px solid var(--border-hi);
  cursor:pointer;
  transition:.15s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  color:var(--text);
}

.btn:hover{
  border-color:var(--green);
  color:var(--green);
}

.btn-primary{
  background:var(--green);
  color:#03130b;
  border-color:var(--green);
}

section{
  padding:70px 0;
}

.section-alt{
  background:var(--bg-alt);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.section-head{
  text-align:center;
  margin:0 0 40px;
}

.section-head .tag{
  font-family:var(--mono);
  color:var(--cyan);
  font-size:13px;
  letter-spacing:2px;
}

.section-head .tag::before{
  content:"[ ";
}

.section-head .tag::after{
  content:" ]";
}

.section-head h2{
  font-family:var(--mono);
  font-size:clamp(24px,3.4vw,34px);
  margin:10px 0 8px;
}

.section-head p{
  color:var(--text-dim);
  max-width:560px;
  margin:0 auto;
}

.cv-hero{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:55px;
  align-items:center;
  margin-bottom:60px;
}

.cv-hero > div:last-child{
  min-width:0;
}

.cv-hero .avatar{
  width:360px;
  height:360px;
  margin:0;
  padding:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border-hi);
  background:var(--surface);
  box-shadow:
    0 0 45px rgba(0,255,157,.10),
    0 0 80px rgba(0,255,157,.04) inset;
}

.cv-hero .avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 35%;
}

.cv-role{
  font-family:var(--mono);
  color:var(--cyan);
  font-size:14px;
  letter-spacing:1px;
  margin-bottom:12px;
}

.cv-name{
  font-family:var(--mono);
  font-size:clamp(28px,4vw,42px);
  margin:0 0 18px;
}

.cv-summary{
  color:var(--text-dim);
  max-width:720px;
  margin:0 0 14px;
}

.cv-summary strong{
  color:var(--green);
}

.social-row{
  display:flex;
  gap:10px;
  margin-top:20px;
  flex-wrap:wrap;
}

.term{
  width:100%;
  max-width:760px;
  margin:20px auto 0;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.18);
  overflow:hidden;
}

.term-bar{
  height:32px;
  padding:0 11px;
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
}

.term-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
}

.term-title{
  margin-left:5px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-faint);
}

.term-body{
  min-height:0;
  padding:10px 13px 11px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  overflow-x:auto;
}

.term-line{
  color:var(--text-dim);
  margin:0 0 5px;
  font-size:11px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

.term-line .p{
  color:var(--green);
  font-weight:600;
}

.term-line .out{
  color:var(--text);
}

.term-input-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  min-height:18px;
}

.term-input-row .p{
  color:var(--green);
  font-weight:600;
  flex-shrink:0;
}

.term-input{
  background:none;
  border:none;
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  line-height:18px;
  height:18px;
  flex:1;
  min-width:100px;
  outline:none;
}

.cursor{
  display:inline-block;
  width:6px;
  height:12px;
  background:var(--green);
  animation:blink 1s steps(1) infinite;
  vertical-align:middle;
}

@keyframes blink{
  50%{
    opacity:0;
  }
}

.grid{
  display:grid;
  gap:20px;
}

.grid-2{
  grid-template-columns:repeat(2,1fr);
}

.grid-3{
  grid-template-columns:repeat(3,1fr);
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  transition:.18s;
}

.card:hover{
  border-color:var(--border-hi);
  transform:translateY(-3px);
  box-shadow:
    0 20px 40px -24px rgba(0,255,157,.18);
}

.card-icon{
  width:42px;
  height:42px;
  border-radius:8px;
  background:rgba(0,255,157,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  margin-bottom:16px;
  font-family:var(--mono);
  font-size:16px;
}

.card h3{
  margin:0 0 18px;
  font-family:var(--mono);
  font-size:17px;
}

.skill-bars{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:18px;
}

.skill{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  transition:
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.skill:hover{
  border-color:var(--border-hi);
  transform:translateY(-3px);
  box-shadow:
    0 15px 35px rgba(0,255,157,.08);
}

.skill-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:9px;
  font-family:var(--mono);
  font-size:12px;
}

.skill-top span:first-child{
  color:var(--text);
}

.skill-top span:last-child{
  color:var(--green);
  font-weight:700;
  white-space:nowrap;
}

.skill-track{
  height:7px;
  border-radius:5px;
  background:var(--surface-hi);
  overflow:hidden;
  border:1px solid var(--border);
}

.skill-fill{
  height:100%;
  border-radius:4px;
  background:
    linear-gradient(
      90deg,
      var(--green-dim),
      var(--green)
    );
  box-shadow:
    0 0 10px rgba(0,255,157,.20);
}

.skill:nth-child(1) .skill-fill{
  background:
    linear-gradient(
      90deg,
      #00b377,
      #00ff9d
    );
}

.skill:nth-child(2) .skill-fill{
  background:
    linear-gradient(
      90deg,
      #00b8d4,
      #38e0ff
    );
}

.skill:nth-child(3) .skill-fill{
  background:
    linear-gradient(
      90deg,
      #7c4dff,
      #b388ff
    );
}

.skill:nth-child(4) .skill-fill{
  background:
    linear-gradient(
      90deg,
      #ff9800,
      #ffbe3d
    );
}

.skill:nth-child(5) .skill-fill{
  background:
    linear-gradient(
      90deg,
      #3776ab,
      #ffd43b
    );
}

.skill:nth-child(6) .skill-fill{
  background:
    linear-gradient(
      90deg,
      #ff4d6d,
      #ff758f
    );
}

.cert-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:18px;
}

.cert-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:
    linear-gradient(
      145deg,
      rgba(16,28,22,.96),
      rgba(8,15,11,.96)
    );
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.cert-card:hover{
  transform:translateY(-5px);
  border-color:var(--green);
  box-shadow:
    0 18px 45px rgba(0,255,157,.10),
    0 0 25px rgba(0,255,157,.06);
}

.cert-image-wrap{
  position:relative;
  width:100%;
  height:190px;
  overflow:hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(0,255,157,.08),
      transparent 70%
    );
  border-bottom:1px solid var(--border);
}

.cert-image-wrap > a{
  display:block;
  width:100%;
  height:100%;
  position:relative;
}

.cert-thumb{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:
    transform .35s ease,
    filter .35s ease;
}

.cert-card:hover .cert-thumb{
  transform:scale(1.035);
  filter:
    brightness(1.08)
    saturate(1.05);
}

.cert-image-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:14px;
  background:
    linear-gradient(
      transparent 45%,
      rgba(0,0,0,.75)
    );
  opacity:0;
  transition:.2s;
}

.cert-image-overlay span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1px;
  color:var(--green);
  border:1px solid rgba(0,255,157,.4);
  background:rgba(0,0,0,.55);
  padding:6px 10px;
  border-radius:5px;
}

.cert-card:hover .cert-image-overlay{
  opacity:1;
}

.cert-image-fallback{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--surface-hi);
  color:var(--text-faint);
  font-family:var(--mono);
  pointer-events:none;
}

.cert-image-wrap.image-error
.cert-image-fallback{
  display:flex;
}

.cert-image-wrap.image-error
.cert-thumb{
  display:none;
}

.cert-thumb-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--text-faint);
}

.cert-thumb-placeholder span{
  font-size:32px;
  color:var(--green);
  opacity:.6;
}

.cert-thumb-placeholder small{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:1px;
}

.cert-info{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:17px 18px 0;
  min-width:0;
}

.cert-status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  color:var(--green);
  padding:3px 7px;
  border:1px solid rgba(0,255,157,.25);
  border-radius:4px;
  background:rgba(0,255,157,.045);
}

.cert-name{
  display:block;
  color:var(--text);
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.cert-issuer{
  display:block;
  color:var(--text-dim);
  font-size:12.5px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.cert-date{
  display:block;
  margin-top:5px;
  padding-top:9px;
  border-top:1px solid rgba(22,51,38,.7);
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.4;
}

.cert-open{
  display:block;
  margin-top:5px;
  padding:9px 16px;
  border-top:1px solid var(--border);
  background:rgba(0,255,157,.025);
  color:var(--green);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:1px;
  opacity:.75;
  transition:.15s;
  margin-left:-18px;
  margin-right:-18px;
}

.cert-card:hover .cert-open{
  opacity:1;
  background:rgba(0,255,157,.06);
}

.state-msg{
  grid-column:1 / -1;
  font-family:var(--mono);
  color:var(--text-faint);
  text-align:center;
  padding:40px 0;
  font-size:13px;
}

.state-msg.error{
  color:var(--red);
}

.chip{
  font-family:var(--mono);
  font-size:11px;
  color:var(--text-dim);
  border:1px solid var(--border-hi);
  padding:3px 9px;
  border-radius:20px;
}

.chip.sev-low{
  color:var(--green);
  border-color:rgba(0,255,157,.35);
  background:rgba(0,255,157,.06);
}

.rows{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.row{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  display:flex;
  gap:20px;
  align-items:flex-start;
  justify-content:space-between;
  transition:.15s;
}

.row:hover{
  border-color:var(--border-hi);
  transform:translateX(2px);
}

.row-main{
  flex:1;
  min-width:0;
}

.row-title{
  font-family:var(--mono);
  font-size:16px;
  margin:8px 0;
}

.row-meta{
  font-family:var(--mono);
  font-size:11px;
  color:var(--text-faint);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.row-desc{
  color:var(--text-dim);
  font-size:14px;
  margin:0;
}

.row-side{
  flex-shrink:0;
  text-align:right;
}

.source-pill{
  font-family:var(--mono);
  font-size:10px;
  color:var(--cyan);
  border:1px solid rgba(56,224,255,.3);
  padding:4px 10px;
  border-radius:20px;
  white-space:nowrap;
}

.contact-links{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:25px;
}

.contact-links .btn{
  min-width:150px;
  justify-content:center;
}

.contact-links .btn:nth-child(1){
  color:var(--green);
}

.contact-links .btn:nth-child(2){
  color:var(--cyan);
}

.contact-links .btn:nth-child(3){
  color:#ff5f7a;
}

.contact-links .btn:nth-child(4){
  color:#c9d6ff;
}

.contact-links .btn:hover{
  color:var(--green);
  border-color:var(--green);
}

.contact-terminal{
  padding-bottom:18px;
}

.contact-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:16px 0;
}

.contact-item{
  display:grid;
  grid-template-columns:100px 30px 1fr;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:6px;
  transition:.15s;
}

.contact-item:hover{
  background:rgba(0,255,157,.045);
  border-color:var(--border);
}

.contact-label{
  color:var(--text);
  font-family:var(--mono);
}

.contact-arrow{
  color:var(--green);
}

.contact-value{
  color:var(--cyan);
  font-family:var(--mono);
  font-size:12px;
  overflow-wrap:anywhere;
}

.contact-prompt{
  margin-top:18px;
}

footer{
  margin-top:0;
  padding:30px 0;
  background:var(--bg);
  border-top:1px solid var(--border);
}

.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.footer-brand{
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-faint);
}

.footer-links{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-dim);
}

.footer-links a{
  transition:.15s;
}

.footer-links a:hover{
  color:var(--green);
}

.search-box,
.search-container,
.search-form{
  display:flex;
  align-items:center;
  gap:10px;
}

.search-box input,
.search-container input,
.search-form input,
.search-input,
input.search-input,
input[type="search"],
input[type="text"].search-input{
  appearance:none;
  -webkit-appearance:none;
  background:var(--surface) !important;
  background-color:var(--surface) !important;
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
  border:1px solid var(--border-hi) !important;
  border-radius:6px;
  outline:none;
  font-family:var(--mono);
  font-size:12px;
  padding:9px 12px;
  min-height:38px;
  box-shadow:none !important;
  caret-color:var(--green);
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.search-box input::placeholder,
.search-container input::placeholder,
.search-form input::placeholder,
.search-input::placeholder,
input[type="search"]::placeholder{
  color:var(--text-faint) !important;
  opacity:1 !important;
}

.search-box input:focus,
.search-container input:focus,
.search-form input:focus,
.search-input:focus,
input[type="search"]:focus,
input[type="text"].search-input:focus{
  background:var(--surface-hi) !important;
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
  border-color:var(--green) !important;
  box-shadow:
    0 0 0 2px rgba(0,255,157,.08),
    0 0 18px rgba(0,255,157,.04) !important;
}

.search-box input:-webkit-autofill,
.search-container input:-webkit-autofill,
.search-form input:-webkit-autofill,
.search-input:-webkit-autofill,
input[type="search"]:-webkit-autofill{
  -webkit-text-fill-color:var(--text) !important;
  -webkit-box-shadow:
    0 0 0 1000px var(--surface) inset !important;
  box-shadow:
    0 0 0 1000px var(--surface) inset !important;
  caret-color:var(--green);
}

.search-box button,
.search-container button,
.search-form button,
.search-btn{
  appearance:none;
  -webkit-appearance:none;
  background:var(--green) !important;
  color:#03130b !important;
  border:1px solid var(--green) !important;
  border-radius:6px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  padding:9px 15px;
  min-height:38px;
  cursor:pointer;
  transition:.15s;
}

.search-box button:hover,
.search-container button:hover,
.search-form button:hover,
.search-btn:hover{
  background:transparent !important;
  color:var(--green) !important;
  border-color:var(--green) !important;
}

.search-box select,
.search-container select,
.search-form select,
.filter-select,
select{
  appearance:none;
  -webkit-appearance:none;
  background-color:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--border-hi) !important;
  border-radius:6px;
  outline:none;
  font-family:var(--mono);
  font-size:12px;
  padding:9px 32px 9px 12px;
  min-height:38px;
  cursor:pointer;
}

.search-box select:focus,
.search-container select:focus,
.search-form select:focus,
.filter-select:focus,
select:focus{
  background-color:var(--surface-hi) !important;
  color:var(--text) !important;
  border-color:var(--green) !important;
  box-shadow:0 0 0 2px rgba(0,255,157,.08) !important;
}

.search-box select option,
.search-container select option,
.search-form select option,
.filter-select option,
select option{
  background:var(--surface) !important;
  color:var(--text) !important;
}

input,
textarea,
select,
button{
  font-family:var(--sans);
}

input:not(.term-input),
textarea,
select{
  color-scheme:dark;
}

.news-search input,
.news-search select,
.cve-search input,
.cve-search select,
.tools-search input,
.tools-search select,
.tool-search input,
.tool-search select,
.filter-bar input,
.filter-bar select,
.filters input,
.filters select{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border-hi) !important;
}

.news-search input::placeholder,
.cve-search input::placeholder,
.tools-search input::placeholder,
.tool-search input::placeholder,
.filter-bar input::placeholder,
.filters input::placeholder{
  color:var(--text-faint) !important;
  opacity:1;
}

.news-search input:focus,
.news-search select:focus,
.cve-search input:focus,
.cve-search select:focus,
.tools-search input:focus,
.tools-search select:focus,
.tool-search input:focus,
.tool-search select:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.filters input:focus,
.filters select:focus{
  background:var(--surface-hi) !important;
  color:var(--text) !important;
  border-color:var(--green) !important;
  box-shadow:0 0 0 2px rgba(0,255,157,.08) !important;
}

.toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0 30px;
}

.toolbar input[type="text"],
.toolbar input[type="search"],
.toolbar input:not([type]){
  appearance:none;
  -webkit-appearance:none;
  background:var(--surface) !important;
  background-color:var(--surface) !important;
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
  border:1px solid var(--border-hi) !important;
  border-radius:6px;
  outline:none;
  font-family:var(--mono);
  font-size:12px;
  padding:9px 12px;
  min-height:38px;
  min-width:220px;
  flex:1 1 220px;
  box-shadow:none !important;
  caret-color:var(--green);
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.toolbar input[type="text"]::placeholder,
.toolbar input[type="search"]::placeholder,
.toolbar input:not([type])::placeholder{
  color:var(--text-faint) !important;
  opacity:1 !important;
}

.toolbar input[type="text"]:focus,
.toolbar input[type="search"]:focus,
.toolbar input:not([type]):focus{
  background:var(--surface-hi) !important;
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
  border-color:var(--green) !important;
  box-shadow:
    0 0 0 2px rgba(0,255,157,.08),
    0 0 18px rgba(0,255,157,.04) !important;
}

.toolbar input[type="text"]:-webkit-autofill,
.toolbar input[type="search"]:-webkit-autofill,
.toolbar input:not([type]):-webkit-autofill{
  -webkit-text-fill-color:var(--text) !important;
  -webkit-box-shadow:
    0 0 0 1000px var(--surface) inset !important;
  box-shadow:
    0 0 0 1000px var(--surface) inset !important;
  caret-color:var(--green);
}

.toolbar select{
  appearance:none;
  -webkit-appearance:none;
  background-color:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--border-hi) !important;
  border-radius:6px;
  outline:none;
  font-family:var(--mono);
  font-size:12px;
  padding:9px 32px 9px 12px;
  min-height:38px;
  cursor:pointer;
}

.toolbar select:focus{
  background-color:var(--surface-hi) !important;
  color:var(--text) !important;
  border-color:var(--green) !important;
  box-shadow:0 0 0 2px rgba(0,255,157,.08) !important;
}

.toolbar select option{
  background:var(--surface) !important;
  color:var(--text) !important;
}

.toolbar button{
  appearance:none;
  -webkit-appearance:none;
  background:var(--surface) !important;
  color:var(--text-dim) !important;
  border:1px solid var(--border-hi) !important;
  border-radius:20px;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:600;
  padding:8px 14px;
  min-height:34px;
  cursor:pointer;
  white-space:nowrap;
  transition:.15s;
}

.toolbar button:hover{
  border-color:var(--green) !important;
  color:var(--green) !important;
  background:rgba(0,255,157,.06) !important;
}

.toolbar button.active,
.toolbar button[aria-pressed="true"],
.toolbar button[aria-selected="true"]{
  background:var(--green) !important;
  color:#03130b !important;
  border-color:var(--green) !important;
}

@media(max-width:600px){

  .toolbar{
    flex-direction:column;
    align-items:stretch;
  }

  .toolbar input[type="text"],
  .toolbar input[type="search"],
  .toolbar input:not([type]),
  .toolbar select{
    width:100%;
    min-width:0;
  }
}

@media(max-width:900px){

  .navlinks{
    display:none;
  }

  .navtoggle{
    display:block;
  }

  .nav.open .navlinks{
    display:flex;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    background:var(--bg);
    flex-direction:column;
    padding:12px;
    border-bottom:1px solid var(--border);
  }

  .grid-2,
  .grid-3{
    grid-template-columns:1fr;
  }

  .cert-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .cv-hero{
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;
  }

  .cv-hero .avatar{
    width:280px;
    height:280px;
    margin:0 auto;
  }

  .cv-summary{
    margin-left:auto;
    margin-right:auto;
  }

  .social-row{
    justify-content:center;
  }
}

@media(max-width:700px){

  .skill-bars{
    grid-template-columns:1fr;
  }

  .row{
    flex-direction:column;
  }

  .row-side{
    text-align:left;
  }

  .contact-item{
    grid-template-columns:90px 20px 1fr;
  }
}

@media(max-width:600px){

  .wrap{
    padding:0 18px;
  }

  section{
    padding:55px 0;
  }

  .cert-grid{
    grid-template-columns:1fr;
  }

  .cert-image-wrap{
    height:200px;
  }

  .term{
    max-width:100%;
  }

  .term-body{
    padding:9px 11px 10px;
    font-size:10px;
  }

  .term-line{
    font-size:10px;
  }

  .term-input{
    font-size:10px;
  }

  .footer-row{
    flex-direction:column;
    text-align:center;
    justify-content:center;
  }

  .search-box,
  .search-container,
  .search-form{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

  .search-box input,
  .search-container input,
  .search-form input,
  .search-input,
  .search-box select,
  .search-container select,
  .search-form select,
  .filter-select{
    width:100%;
  }

  .search-box button,
  .search-container button,
  .search-form button,
  .search-btn{
    width:100%;
  }
}

@media(max-width:420px){

  .cv-hero .avatar{
    width:240px;
    height:240px;
  }

  .cert-image-wrap{
    height:180px;
  }

  .contact-item{
    grid-template-columns:1fr;
    gap:3px;
  }

  .contact-arrow{
    display:none;
  }

  .contact-links{
    flex-direction:column;
  }

  .contact-links .btn{
    width:100%;
    max-width:300px;
  }
}