/* Base */
:root{
  --bg: #0B1220;
  --bg-alt: #0E1626;
  --text: #E5E7EB;
  --muted: #A5B4FC;
  --accent: #2563EB;
  --card: #121A2B;
  --border: #1F2A44;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

.container{width:min(1100px, 92%); margin-inline:auto}

h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
h1{font-size: clamp(2rem, 2.2rem + 1.5vw, 3.2rem); font-weight:800}
h2{font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); font-weight:700}
h3{font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); font-weight:600}

.lead{color:#C7D2FE; font-size:clamp(1rem, .95rem + .5vw, 1.2rem)}

.btn{
  display:inline-block; border:1px solid var(--border);
  padding:.75rem 1rem; border-radius:.75rem; text-decoration:none;
  color:var(--text); box-shadow: var(--shadow);
}
.btn.primary{background:var(--accent); border-color:transparent; color:white; font-weight:600}
.btn.ghost{background:transparent}
.btn.small{padding:.5rem .75rem; font-size:.95rem}

.section{padding: clamp(48px, 5vw, 96px) 0}
.section.alt{background: var(--bg-alt)}

.list{padding-left:1.1rem}
.list li{margin:.4rem 0}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
}
@media (max-width: 900px){ .grid{grid-template-columns: repeat(2, minmax(0,1fr));}}
@media (max-width: 640px){ .grid{grid-template-columns: 1fr;}}

.card{
  background: var(--card);
  border:1px solid var(--border);
  padding:1rem;
  border-radius:1rem;
  box-shadow: var(--shadow);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem max(4%, 16px);
  background: rgba(11, 18, 32, .8); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:700}
.brand img{width:28px; height:28px; display:block}

.site-nav{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.site-nav a{color:var(--text); text-decoration:none}
.nav-toggle{display:none}

@media (max-width: 900px){
  .nav-toggle{display:inline-flex; border:1px solid var(--border); background:transparent; color:var(--text);
    padding:.5rem .75rem; border-radius:.5rem}
  .site-nav{position:absolute; right:16px; top:64px; background:var(--bg);
    border:1px solid var(--border); border-radius:.75rem; padding:.6rem; flex-direction:column; display:none}
  .site-nav.open{display:flex}
}

/* Hero */
.hero{
  padding: clamp(64px, 10vw, 140px) 0;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(700px 360px at 90% 40%, rgba(99,102,241,.12), transparent 60%);
  border-bottom:1px solid var(--border);
  text-align: center;
  background: linear-gradient(180deg, #0b0b0b 0%, #111 100%);
  color: #fff;
}
.hero-logo {
  margin-bottom: 1rem;
}
.hero h1 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.hero-details {
  list-style: none;
  margin: 0 auto 2rem;
  padding: 0;
  max-width: 700px;
  line-height: 1.6;
}
.hero-details li {
  margin-bottom: 0.8rem;
  color: #fff;
}

.hero-content{width:min(1000px, 92%); margin:auto; text-align:center}
.metrics{
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center;
  margin:1rem 0 1.5rem; padding:0; list-style:none;
}
.metrics li{
  background:var(--card); border:1px solid var(--border);
  padding:.65rem .9rem; border-radius:.6rem;
  display:flex; align-items:center; gap:.5rem;
}
.metrics strong{color:white; font-weight:800}
.metrics span{color:#C7D2FE; font-size:.95rem}
.metrics {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2.5rem;
  list-style: none;
  padding: 0;
}
.metrics li {
  font-size: 1.1rem;
}
.metrics strong {
  display: block;
  font-size: 1.8rem;
  color: #00c6ff;
}

/* Timeline */
.timeline{
  margin:1rem 0 0; padding:0; list-style:none; position:relative;
  border-left:2px solid var(--border);
}
.timeline li{position:relative; padding:0 0 1.25rem 1.25rem}
.timeline .t-dot{
  width:.85rem; height:.85rem; background:var(--accent); border-radius:50%;
  position:absolute; left:-.46rem; top:.2rem; box-shadow: var(--shadow);
}
.timeline .t-content h3{margin-bottom:.25rem}

/* Skills */
.skills-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){ .skills-grid{grid-template-columns: 1fr;}}
.tags{display:flex; flex-wrap:wrap; gap:.5rem; padding:0; list-style:none; margin:.5rem 0 0}
.tags li{
  background:var(--card); border:1px solid var(--border);
  padding:.35rem .6rem; border-radius:.6rem; font-size:.95rem
}

/* Contact */
.contact-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr));
}
.contact-item{
  display:flex; flex-direction:column; gap:.2rem;
  padding:1rem; background: var(--card); border:1px solid var(--border); border-radius:.75rem; text-decoration:none; color:var(--text)
}
.contact-item .label{color:#9CA3AF; font-size:.9rem}
.contact-item .value{font-weight:600}
@media (max-width: 900px){ .contact-grid{grid-template-columns: 1fr;}}

.site-footer{padding:2rem 0; border-top:1px solid var(--border); background: #0A1120}

/* About profile image */
.about-profile{
  width: 140px; height: 140px; object-fit: cover;
  border-radius: 999px; border:2px solid var(--border);
  display:block; margin: 0 auto 1rem;
  box-shadow: var(--shadow);
}

/* Achievements figure */
.achv-figure{margin:1rem 0 0}
.achv-figure img{width:100%; height:auto; border:1px solid var(--border); border-radius:.75rem; box-shadow: var(--shadow)}
.achv-figure figcaption{color:#9CA3AF; font-size:.9rem; margin-top:.4rem}


/* Quick section navigation (chips) */
.quick-nav{border-bottom:1px solid var(--border); background:transparent}
.quick-nav-inner{
  width:min(1000px,92%); margin:0 auto; display:flex; gap:.5rem;
  padding:.5rem 0 .75rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.quick-nav .chip{
  display:inline-block; white-space:nowrap;
  padding:.5rem .75rem; border:1px solid var(--border);
  border-radius:999px; background:var(--card); color:var(--text);
  text-decoration:none; font-weight:600; box-shadow: var(--shadow);
}
.quick-nav .chip:hover,.quick-nav .chip:focus{border-color:#3B82F6; outline:none}
@media (max-width:520px){
  .cta-row .btn{flex:1 1 auto; min-width: calc(50% - .6rem); text-align:center}
  .metrics li{width:100%; justify-content:center}
}


/* ========== New Sections Navigation (chips) ========== */
.sections-nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(15, 23, 42, 0.72); /* translucent dark to match theme */
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.sn-inner{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem 0; }
.sn-brand{ display:flex; align-items:center; gap:.5rem; color:var(--text, #e5e7eb); text-decoration:none; font-weight:700; }
.sn-logo{ border-radius:8px; display:block; }
.sn-name{ font-size: .98rem; }

.sn-links{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:center; }
.sn-links .chip{
  display:inline-block; padding:.5rem .75rem; line-height:1;
  border-radius:999px; border:1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04); color: var(--text, #e5e7eb);
  text-decoration:none; white-space:nowrap; font-weight:600; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.sn-links .chip:hover, .sn-links .chip:focus{ outline: none; border-color: rgba(59,130,246,.8); }

.sn-contact.btn.primary{ margin-left:auto; }

@media (max-width: 780px){
  .sn-inner{ flex-wrap:wrap; }
  .sn-contact{ order: 3; width: 100%; text-align: center; margin-top:.25rem; }
  .sn-links{ order:2; width:100%; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.25rem; }
}

/* ========== Hero tweaks: title color to accent & goal line spacing ========== */
.hero h1{ color: var(--accent, #3B82F6); }
.hero .hero-goal{ margin:.2rem 0 .55rem; color: var(--muted, #9CA3AF); font-weight:600; }

/* ========== Floating FAB to reveal nav when scrolled below About ========== */
.nav-fab{
  position: fixed; right: 14px; bottom: 16px; z-index: 60;
  width: 52px; height: 52px; border-radius: 26px;
  border:1px solid var(--border, rgba(255,255,255,0.10));
  background: var(--accent, #3B82F6); color: #fff; font-size: 20px; font-weight:700;
  box-shadow: 0 12px 28px rgba(0,0,0,.28); cursor:pointer; display:none; align-items:center; justify-content:center;
}
.nav-fab.show{ display:flex; }

/* ensure hero CTAs wrap nicely on small screens */
.cta-row{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; }
@media (max-width:520px){
  .cta-row .btn{ flex:1 1 auto; min-width: calc(50% - .6rem); }
}

/* Added: user-provided hero / metrics / cta / btn styles (will override previous rules where specific) */
.hero {
  text-align: center;
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #0b0b0b 0%, #111 100%);
  color: #fff;
}

.hero-logo {
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.hero-details {
  list-style: none;
  margin: 0 auto 2rem;
  padding: 0;
  max-width: 700px;
  line-height: 1.6;
}

.hero-details li {
  margin-bottom: 0.8rem;
  color: #fff;
}

.metrics {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2.5rem;
  list-style: none;
  padding: 0;
}

.metrics li {
  font-size: 1.1rem;
}

.metrics strong {
  display: block;
  font-size: 1.8rem;
  color: #00c6ff;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.btn {
  padding: 0.8rem 1.4rem;
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid #fff;
  transition: background 0.3s ease;
}

.btn.primary {
  background: #00c6ff;
  border-color: #00c6ff;
  color: #000;
}

.btn.ghost {
  background: transparent;
  color: #fff;
}

.btn:hover {
  background: #fff;
  color: #000;
}
/* End added styles */

/* --- Fix brand spelling + nav responsiveness + chip/primary sizing --- */
.sections-nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(10px);background:rgba(15,23,42,.72);border-bottom:1px solid var(--border,rgba(255,255,255,.08));}
.sn-inner{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;flex-wrap:wrap;}
.sn-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;}
.sn-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;flex:1 1 320px;min-width:260px;}
.sn-links .chip{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 .9rem;border-radius:999px;border:1px solid var(--border,rgba(255,255,255,.08));background:rgba(255,255,255,.04);white-space:nowrap;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.sn-links .chip:hover,.sn-links .chip:focus{outline:none;border-color:rgba(59,130,246,.8);}
.sn-contact{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 1rem;border-radius:999px;}
@media (max-width:780px){.sn-links{overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;padding-bottom:.25rem;} .sn-contact{order:3;width:100%;}}
/* Hero title colour and goal line */
:root{--accent:#3B82F6;}
.hero h1{color:var(--accent) !important;}
.hero .hero-goal{margin:.25rem 0 .55rem;color:var(--muted,#9CA3AF);font-weight:600;}
/* Ensure hero CTAs behave well on small screens */
.cta-row{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;}
@media (max-width:520px){.cta-row .btn{flex:1 1 auto;min-width:calc(50% - .6rem);}}


/* Harbah embedded chatbot GUI */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.eyebrow{
  margin:0 0 .6rem;
  color:#60A5FA;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  font-weight:800;
}

.harbah-shell{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(320px, 1.1fr);
  gap:1.25rem;
  align-items:stretch;
}

.harbah-copy,
.harbah-chat{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1.25rem;
  box-shadow:var(--shadow);
}

.harbah-copy{
  padding:1.25rem;
}

.harbah-points{
  margin:1rem 0 0;
  padding-left:1.15rem;
  color:#D1D5DB;
}

.harbah-points li{
  margin:.45rem 0;
}

.harbah-chat{
  display:flex;
  flex-direction:column;
  min-height:520px;
  overflow:hidden;
}

.harbah-chat-header{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:1rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, rgba(37,99,235,.18), rgba(14,22,38,.65));
}

.harbah-avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#00c6ff;
  color:#020617;
  font-weight:900;
  box-shadow:0 10px 24px rgba(0,198,255,.18);
}

.harbah-chat-header h3{
  margin:0;
}

.harbah-chat-header p{
  margin:.15rem 0 0;
  color:#C7D2FE;
  font-size:.9rem;
}

.harbah-messages{
  flex:1;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  overflow-y:auto;
  max-height:360px;
  background:radial-gradient(600px 260px at 100% 0%, rgba(59,130,246,.09), transparent 55%);
}

.harbah-message{
  max-width:88%;
  padding:.8rem .9rem;
  border:1px solid var(--border);
  border-radius:1rem;
  background:rgba(255,255,255,.04);
}

.harbah-message.user{
  align-self:flex-end;
  background:rgba(0,198,255,.12);
  border-color:rgba(0,198,255,.42);
}

.harbah-message.bot{
  align-self:flex-start;
}

.message-label{
  display:block;
  margin-bottom:.25rem;
  color:#93C5FD;
  font-size:.8rem;
  font-weight:800;
}

.harbah-message p{
  margin:0;
}

.harbah-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  padding:0 1rem 1rem;
  border-top:1px solid rgba(31,42,68,.65);
}

.harbah-suggestions button{
  cursor:pointer;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:.45rem .7rem;
  font:inherit;
  font-size:.9rem;
  font-weight:700;
}

.harbah-suggestions button:hover,
.harbah-suggestions button:focus{
  outline:none;
  border-color:#60A5FA;
  background:rgba(96,165,250,.16);
}

.harbah-form{
  display:flex;
  gap:.6rem;
  padding:1rem;
  border-top:1px solid var(--border);
}

.harbah-form input{
  flex:1;
  min-width:0;
  border:1px solid var(--border);
  border-radius:.75rem;
  background:#0B1220;
  color:var(--text);
  padding:.85rem 1rem;
  font:inherit;
}

.harbah-form input:focus{
  outline:none;
  border-color:#60A5FA;
  box-shadow:0 0 0 3px rgba(96,165,250,.18);
}

.harbah-form .btn{
  box-shadow:none;
  white-space:nowrap;
}

@media (max-width:900px){
  .harbah-shell{
    grid-template-columns:1fr;
  }
}

@media (max-width:520px){
  .harbah-chat{
    min-height:560px;
  }

  .harbah-form{
    flex-direction:column;
  }

  .harbah-form .btn{
    width:100%;
  }

  .harbah-message{
    max-width:100%;
  }
}

/* --- 2026 polish: hero action area, vertical Harbah demo, and CV timeline --- */
.metrics{
  width:min(980px, 100%);
  margin:1.75rem auto 1.25rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}
.metrics li{
  justify-content:center;
  min-height:72px;
  padding:1rem 1.25rem;
  border-radius:.85rem;
  background:linear-gradient(135deg, rgba(18,26,43,.96), rgba(15,23,42,.9));
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.metrics strong{
  display:inline-block;
  color:#00c6ff;
  line-height:1;
}
.metrics span{
  color:#E5E7EB;
}
.cta-row{
  width:min(820px, 100%);
  margin:1.25rem auto 0;
  padding:.85rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.7rem;
  background:rgba(18,26,43,.58);
  border:1px solid rgba(31,42,68,.95);
  border-radius:1.15rem;
  box-shadow:0 18px 42px rgba(0,0,0,.32);
}
.cta-row .btn{
  box-shadow:none;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cta-row .btn.primary{
  min-width:150px;
  background:#00c6ff;
  border-color:#00c6ff;
  color:#020617;
}
.cta-row .btn.ghost{
  border-color:rgba(255,255,255,.76);
  background:rgba(255,255,255,.02);
}
.cta-row .btn.ghost:hover,
.cta-row .btn.ghost:focus{
  background:rgba(255,255,255,.95);
  color:#020617;
}

.harbah-section{
  background:linear-gradient(180deg, #0B1220 0%, #0E1626 100%);
  border-top:1px solid rgba(31,42,68,.6);
  border-bottom:1px solid rgba(31,42,68,.6);
}
.harbah-container{
  width:min(920px, 92%);
}
.section-kicker{
  margin:0 0 .55rem;
  color:#60A5FA;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:800;
}
.section-lead{
  max-width:760px;
  margin:.25rem 0 1.5rem;
  color:#C7D2FE;
  font-size:1.05rem;
}
.harbah-demo{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.harbah-shell{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.harbah-overview-card{
  position:relative;
  overflow:hidden;
  min-height:auto;
  padding:1.35rem;
  background:
    radial-gradient(720px 240px at 100% 0%, rgba(0,198,255,.12), transparent 55%),
    linear-gradient(135deg, rgba(18,26,43,.98), rgba(10,17,32,.96));
}
.harbah-overview-card::after{
  content:"";
  position:absolute;
  inset:auto -80px -120px auto;
  width:240px;
  height:240px;
  border-radius:999px;
  background:rgba(59,130,246,.10);
  filter:blur(4px);
  pointer-events:none;
}
.harbah-overview-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:.8rem;
}
.harbah-overview-header h3{
  margin:0;
  max-width:560px;
}
.status-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius:999px;
  padding:.42rem .7rem;
  font-size:.82rem;
  font-weight:800;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.status-dot{
  width:.65rem;
  height:.65rem;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}
.status-badge.online{
  color:#22C55E;
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.10);
}
.status-badge.down{
  color:#EF4444;
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
}
.harbah-chat{
  min-height:560px;
  border-radius:1.25rem;
}
.harbah-messages{
  max-height:410px;
}
.timeline{
  margin-top:1.4rem;
  border-left:1px solid rgba(96,165,250,.38);
}
.timeline li{
  padding:0 0 1.65rem 1.45rem;
}
.timeline .t-dot{
  width:.95rem;
  height:.95rem;
  left:-.52rem;
  background:#60A5FA;
  box-shadow:0 0 0 5px rgba(96,165,250,.12), 0 12px 28px rgba(0,0,0,.32);
}
.timeline .t-content{
  background:rgba(18,26,43,.55);
  border:1px solid rgba(31,42,68,.72);
  border-radius:1rem;
  padding:1rem 1.1rem;
}
.timeline .t-content h3{
  margin-bottom:.25rem;
}
.t-date{
  margin:.1rem 0 .65rem;
  color:#60A5FA;
  font-weight:800;
  font-size:.95rem;
}
@media (max-width:900px){
  .metrics{grid-template-columns:1fr; gap:.75rem;}
  .cta-row{align-items:stretch;}
  .cta-row .btn{flex:1 1 calc(50% - .7rem);}
  .harbah-overview-header{flex-direction:column;}
}
@media (max-width:520px){
  .cta-row{padding:.7rem;}
  .cta-row .btn{min-width:100%;}
  .harbah-chat{min-height:600px;}
}

/* Harbah icon integration */
.harbah-branding{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
}
.harbah-icon{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:16px;
  padding:.35rem;
  display:block;
  object-fit:contain;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 32px rgba(0,198,255,.16);
}
.harbah-avatar{
  overflow:hidden;
  background:rgba(255,255,255,.96);
}
.harbah-avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:.24rem;
  display:block;
}
@media (max-width:640px){
  .harbah-branding{
    align-items:flex-start;
  }
  .harbah-icon{
    width:50px;
    height:50px;
    flex-basis:50px;
  }
}

/* Harbah secure backend integration states */
.status-badge.degraded{
  color:#F59E0B;
  border-color:rgba(245,158,11,.38);
  background:rgba(245,158,11,.12);
}
.status-badge.offline,
.status-badge.down{
  color:#EF4444;
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
}
.harbah-form .btn:disabled,
.harbah-suggestions button:disabled,
.harbah-feedback button:disabled{
  cursor:not-allowed;
  opacity:.62;
}
.harbah-feedback{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  margin-top:.7rem;
  padding-top:.65rem;
  border-top:1px solid rgba(31,42,68,.62);
}
.harbah-feedback button{
  cursor:pointer;
  border:1px solid rgba(96,165,250,.42);
  border-radius:999px;
  background:rgba(96,165,250,.10);
  color:var(--text);
  padding:.32rem .6rem;
  font:inherit;
  font-size:.78rem;
  font-weight:800;
}
.harbah-feedback button:hover,
.harbah-feedback button:focus{
  outline:none;
  background:rgba(96,165,250,.20);
}
.harbah-feedback-status{
  color:#9CA3AF;
  font-size:.78rem;
}