/* Canonical dist stylesheet copied from app/src/static/styles.css */
:root{
  --bg: linear-gradient(180deg,#071028,#071827);
  --card:#07142988;
  --accent:#59bfff;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.04);
}

body{font-family:Inter,ui-sans-serif,system-ui,Arial;background:var(--bg);color:#e6eef6;margin:0}
.container{max-width:1100px;margin:28px auto;padding:24px}
.hero h1{font-size:2.2rem;letter-spacing:0.2px;text-align:center}
.subtitle{color:var(--muted);font-size:0.98rem;text-align:center}

.search{display:flex;justify-content:center;margin-top:12px}
.search input{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);width:260px;background:rgba(255,255,255,0.02);color:inherit}
.search button{padding:10px 14px;border-radius:10px;background:var(--accent);border:none;color:#05212b;font-weight:700;margin-left:8px;cursor:pointer}

.icons{margin-top:10px;display:flex;gap:8px;justify-content:center;align-items:center}
.icon{color:var(--muted);opacity:0.9}
.icon.devops{color: #9be564}

.hero{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center}
.hero .search{position:relative;z-index:11;width:100%;display:flex;justify-content:center}
.hero .icons{position:relative;z-index:11;display:flex;justify-content:center;margin-top:10px}

@media(max-width:900px){
  .hero .search{order:1}
  .hero .icons{order:2;margin-top:8px}
  .search{flex-direction:column;gap:8px}
  .search input{width:100%}
  .search button{width:100%}
}

/* Card layout and visual polish */
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6);backdrop-filter: blur(4px)}
.card.left{text-align:center}
.card.left img{width:130px;height:130px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.04)}
.metrics{display:flex;gap:12px;margin-bottom:8px}
.metric{flex:1;text-align:center;padding:8px;background:var(--glass);border-radius:8px}
.metric .value{font-size:1.6rem;font-weight:700}

.profile{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start;margin-top:18px}
.repos li{display:flex;justify-content:space-between;padding:8px 6px;border-bottom:1px dashed rgba(255,255,255,0.03)}
.repos a{color:var(--accent);text-decoration:none}

.footer{margin-top:20px;text-align:center;color:var(--muted)}

.watermark{position:fixed;right:14px;bottom:10px;color:rgba(255,255,255,0.06);font-size:12px;pointer-events:none}
.watermark{pointer-events:auto}
.watermark a{color:rgba(255,255,255,0.18);text-decoration:none;margin:0 6px;font-size:11px}
.watermark a:hover{color:var(--accent)}
.watermark .sep{color:rgba(255,255,255,0.06);margin:0 6px}

/* Avatar fallback visuals */
.card.left img{background:linear-gradient(135deg,#0b1220,#0f1724);}

@media(max-width:900px){
  .profile{grid-template-columns:1fr}
  .search{flex-direction:column;gap:8px}
  .search input{width:100%}
  .search button{width:100%}
}
/* Copy of canonical stylesheet from app/src/static/styles.css */
:root{
  --bg: linear-gradient(180deg,#071028,#071827);
  --card:#07142988;
  --accent:#59bfff;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.04);
}

body{font-family:Inter,ui-sans-serif,system-ui,Arial;background:var(--bg);color:#e6eef6;margin:0}
.container{max-width:1100px;margin:28px auto;padding:24px}
.hero h1{font-size:2.2rem;letter-spacing:0.2px;text-align:center}
.subtitle{color:var(--muted);font-size:0.98rem;text-align:center}

.search{display:flex;justify-content:center;margin-top:12px}
.search input{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);width:260px;background:rgba(255,255,255,0.02);color:inherit}
.search button{padding:10px 14px;border-radius:10px;background:var(--accent);border:none;color:#05212b;font-weight:700;margin-left:8px;cursor:pointer}

.icons{margin-top:10px;display:flex;gap:8px;justify-content:center;align-items:center}
.icon{color:var(--muted);opacity:0.9}
.icon.devops{color: #9be564}

.hero{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center}
.hero .search{position:relative;z-index:11;width:100%;display:flex;justify-content:center}
.hero .icons{position:relative;z-index:11;display:flex;justify-content:center;margin-top:10px}

@media(max-width:900px){
  .hero .search{order:1}
  .hero .icons{order:2;margin-top:8px}
  .search{flex-direction:column;gap:8px}
  .search input{width:100%}
  .search button{width:100%}
}

/* Card layout and visual polish */
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6);backdrop-filter: blur(4px)}
.card.left{text-align:center}
.card.left img{width:130px;height:130px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.04)}
.metrics{display:flex;gap:12px;margin-bottom:8px}
.metric{flex:1;text-align:center;padding:8px;background:var(--glass);border-radius:8px}
.metric .value{font-size:1.6rem;font-weight:700}

.watermark{position:fixed;right:14px;bottom:10px;color:rgba(255,255,255,0.06);font-size:12px;pointer-events:none}
.watermark{pointer-events:auto}
.watermark a{color:rgba(255,255,255,0.18);text-decoration:none;margin:0 6px;font-size:11px}
.watermark a:hover{color:var(--accent)}
.watermark .sep{color:rgba(255,255,255,0.06);margin:0 6px}

/* Avatar fallback visuals */
.card.left img{background:linear-gradient(135deg,#0b1220,#0f1724);}

@media(max-width:900px){
  .profile{grid-template-columns:1fr}
  .search{flex-direction:column;gap:8px}
  .search input{width:100%}
  .search button{width:100%}
}
/* Canonical SPA stylesheet used by app/src/static/styles.css (single copy) */
:root{
  --bg: linear-gradient(180deg,#071028,#071827);
  --card:#07142988;
  --accent:#59bfff;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.04);
}

body{font-family:Inter,ui-sans-serif,system-ui,Arial;background:var(--bg);color:#e6eef6;margin:0}
.container{max-width:1100px;margin:28px auto;padding:24px}
.hero h1{font-size:2.2rem;letter-spacing:0.2px;text-align:center}
.subtitle{color:var(--muted);font-size:0.98rem;text-align:center}

.search{display:flex;justify-content:center;margin-top:12px}
.search input{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);width:260px;background:rgba(255,255,255,0.02);color:inherit}
.search button{padding:10px 14px;border-radius:10px;background:var(--accent);border:none;color:#05212b;font-weight:700;margin-left:8px;cursor:pointer}

.icons{margin-top:10px;display:flex;gap:8px;justify-content:center;align-items:center}
.icon{color:var(--muted);opacity:0.9}
.icon.devops{color: #9be564}

.hero{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center}
.hero .search{position:relative;z-index:11;width:100%;display:flex;justify-content:center}
.hero .icons{position:relative;z-index:11;display:flex;justify-content:center;margin-top:10px}

@media(max-width:900px){
  .hero .search{order:1}
  .hero .icons{order:2;margin-top:8px}
  .search{flex-direction:column;gap:8px}
  .search input{width:100%}
  .search button{width:100%}
}

/* Reuse card styles from original CSS for a coherent look */
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6);backdrop-filter: blur(4px)}
.card.left{text-align:center}
.card.left img{width:130px;height:130px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.04)}
.metrics{display:flex;gap:12px;margin-bottom:8px}
.metric{flex:1;text-align:center;padding:8px;background:var(--glass);border-radius:8px}
.metric .value{font-size:1.6rem;font-weight:700}

.watermark{position:fixed;right:14px;bottom:10px;color:rgba(255,255,255,0.06);font-size:12px;pointer-events:none}
.watermark{pointer-events:auto}
.watermark a{color:rgba(255,255,255,0.18);text-decoration:none;margin:0 6px;font-size:11px}
.watermark a:hover{color:var(--accent)}
.watermark .sep{color:rgba(255,255,255,0.06);margin:0 6px}

/* Additional polished styles for the demo dashboard
   Keeps a minimalist, professional palette suitable for interviews.
   Comments are in English and explain intent for future maintainers. */

:root{
  --bg: linear-gradient(180deg,#071028,#071827);
  --card:#07142988;
  --accent:#59bfff;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.04);
}

body{font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:#e6eef6;}
.container{max-width:1100px;margin:28px auto;padding:24px}
.hero h1{font-size:2.2rem;letter-spacing:0.2px}
.subtitle{color:var(--muted);font-size:0.98rem}

.search{display:flex;justify-content:center;margin-top:12px}
.search input{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);width:260px;background:rgba(255,255,255,0.02);color:inherit}
.search button{padding:10px 14px;border-radius:10px;background:var(--accent);border:none;color:#05212b;font-weight:700;margin-left:8px;cursor:pointer}

.icons{margin-top:10px;display:flex;gap:8px;justify-content:center}
.icon{color:var(--muted);opacity:0.9}
.icon.devops{color: #9be564}

.profile{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start;margin-top:18px}
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6);backdrop-filter: blur(4px)}
.card.left{text-align:center}
.card.left img{width:130px;height:130px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.04)}
.metrics{display:flex;gap:12px;margin-bottom:8px}
.metric{flex:1;text-align:center;padding:8px;background:var(--glass);border-radius:8px}
.metric .value{font-size:1.6rem;font-weight:700}

.repos li{display:flex;justify-content:space-between;padding:8px 6px;border-bottom:1px dashed rgba(255,255,255,0.03)}
.repos a{color:var(--accent);text-decoration:none}

.footer{margin-top:20px;text-align:center;color:var(--muted)}

.watermark{position:fixed;right:14px;bottom:10px;color:rgba(255,255,255,0.06);font-size:12px;pointer-events:none}

/* Watermark link styling (clickable but subtle) */
.watermark{pointer-events:auto}
.watermark a{color:rgba(255,255,255,0.18);text-decoration:none;margin:0 6px;font-size:11px}
.watermark a:hover{color:var(--accent)}
.watermark .sep{color:rgba(255,255,255,0.06);margin:0 6px}

/* Avatar fallback ensure rounded and border */
.card.left img{background:linear-gradient(135deg,#0b1220,#0f1724);}

@media(max-width:900px){.profile{grid-template-columns:1fr}.search{flex-direction:column;gap:8px}.search input{width:100%}.search button{width:100%}}
./* Ensure search and icons do not overlap: keep header components stacked in flow */
.hero{position:relative;z-index:10}
.hero .search{position:relative;z-index:11}
.hero .icons{position:relative;z-index:11}

/* Small screens: stack search and icons vertically */
@media(max-width:900px){
  .hero .search{order:1}
  .hero .icons{order:2;margin-top:8px}
}

.profile{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start;margin-top:18px}
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6);backdrop-filter: blur(4px)}
.card.left{text-align:center}
.card.left img{width:130px;height:130px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.04)}
.metrics{display:flex;gap:12px;margin-bottom:8px}
.metric{flex:1;text-align:center;padding:8px;background:var(--glass);border-radius:8px}
.metric .value{font-size:1.6rem;font-weight:700}

.repos li{display:flex;justify-content:space-between;padding:8px 6px;border-bottom:1px dashed rgba(255,255,255,0.03)}
.repos a{color:var(--accent);text-decoration:none}

.footer{margin-top:20px;text-align:center;color:var(--muted)}

.watermark{position:fixed;right:14px;bottom:10px;color:rgba(255,255,255,0.06);font-size:12px;pointer-events:none}


/* Watermark link styling (clickable but subtle) */
.watermark{pointer-events:auto}
.watermark a{color:rgba(255,255,255,0.18);text-decoration:none;margin:0 6px;font-size:11px}
.watermark a:hover{color:var(--accent)}
.watermark .sep{color:rgba(255,255,255,0.06);margin:0 6px}

/* Avatar fallback ensure rounded and border */
.card.left img{background:linear-gradient(135deg,#0b1220,#0f1724);} 

@media(max-width:900px){.profile{grid-template-columns:1fr}.search{flex-direction:column;gap:8px}.search input{width:100%}.search button{width:100%}}
/* Polished secondary styles for the demo (dist bundle) */
:root{
  --bg: linear-gradient(180deg,#071028,#071827);
  --card:#07142988;
  --accent:#59bfff;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.04);
}

.container{max-width:1100px;margin:28px auto;padding:24px}
.hero h1{font-size:2.2rem;letter-spacing:0.2px}
.subtitle{color:var(--muted);font-size:0.98rem}

.search{display:flex;justify-content:center;margin-top:12px}
.search input{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);width:260px;background:rgba(255,255,255,0.02);color:inherit}
.search button{padding:10px 14px;border-radius:10px;background:var(--accent);border:none;color:#05212b;font-weight:700;margin-left:8px;cursor:pointer}
.icons{margin-top:10px;display:flex;gap:8px;justify-content:center;align-items:center}
.icon{color:var(--muted);opacity:0.9}
.icon.devops{color: #9be564}

/* Ensure search and icons do not overlap: keep header components stacked in flow */
.hero{position:relative;z-index:10}
.hero .search{position:relative;z-index:11}
.hero .icons{position:relative;z-index:11}

/* Small screens: stack search and icons vertically */
@media(max-width:900px){
  .hero .search{order:1}
  .hero .icons{order:2;margin-top:8px}
}

.profile{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start;margin-top:18px}
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6);backdrop-filter: blur(4px)}
.card.left{text-align:center}
.card.left img{width:130px;height:130px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.04)}
.metrics{display:flex;gap:12px;margin-bottom:8px}
.metric{flex:1;text-align:center;padding:8px;background:var(--glass);border-radius:8px}
.metric .value{font-size:1.6rem;font-weight:700}

.repos li{display:flex;justify-content:space-between;padding:8px 6px;border-bottom:1px dashed rgba(255,255,255,0.03)}
.repos a{color:var(--accent);text-decoration:none}

.footer{margin-top:20px;text-align:center;color:var(--muted)}

.watermark{position:fixed;right:14px;bottom:10px;color:rgba(255,255,255,0.06);font-size:12px;pointer-events:none}

/* Watermark link styling (clickable but subtle) */
.watermark{pointer-events:auto}
.watermark a{color:rgba(255,255,255,0.18);text-decoration:none;margin:0 6px;font-size:11px}
.watermark a:hover{color:var(--accent)}
.watermark .sep{color:rgba(255,255,255,0.06);margin:0 6px}

/* Avatar fallback ensure rounded and border */
.card.left img{background:linear-gradient(135deg,#0b1220,#0f1724);} 

@media(max-width:900px){.profile{grid-template-columns:1fr}.search{flex-direction:column;gap:8px}.search input{width:100%}.search button{width:100%}}