/* --- Modern minimal tech theme (responsive) --- */
:root{
  --bg:#0b0f19;
  --bg-elev:#0c1222;
  --panel:#10182c;
  --card:#0f172a;
  --muted:#9aa4b2;
  --text:#e8edf2;
  --border:#1e293b;
  --accent:#60a5fa;
  --accent2:#34d399;
  --danger:#f87171;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --radius:16px;
  --radius-lg:22px;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-7:2rem; --sp-8:3rem;
  --maxw:1100px;
  --focus:0 0 0 2px rgba(96,165,250,.55);
  --grad: radial-gradient(900px 600px at 10% -10%, rgba(96,165,250,.18), transparent 55%) ,
          radial-gradient(700px 420px at 120% 10%, rgba(52,211,153,.12), transparent 55%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background: var(--grad), var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size: clamp(15px, 1.2vw + 10px, 18px);
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none; box-shadow:var(--focus)}

.container{max-width:var(--maxw); margin:0 auto; padding: var(--sp-5) var(--sp-5)}

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,15,25,.55); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4)}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px}
.logo-dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(120deg,var(--accent),var(--accent2)); box-shadow:0 0 20px rgba(96,165,250,.6)}
.brand-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55vw}

.site-nav{display:flex; align-items:center; gap:var(--sp-5)}
.site-nav a{padding:.45rem .7rem; border-radius:10px}
.site-nav a.login{border:1px solid var(--border)}

.menu-toggle{
  display:none; border:1px solid var(--border); background:var(--card);
  border-radius:12px; padding:.55rem .65rem; cursor:pointer
}
.menu-toggle .bar{display:block; width:22px; height:2px; background:var(--text); margin:4px 0; border-radius:2px}

@media (max-width: 820px){
  .menu-toggle{display:inline-block}
  .site-nav{position:fixed; right:var(--sp-5); top:64px; background:var(--panel);
    border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-5);
    flex-direction:column; gap:var(--sp-4); box-shadow:var(--shadow); transform:translateY(-10px) scale(.98);
    opacity:0; pointer-events:none; transition:.2s ease}
  .site-nav.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
}

.site-footer{
  border-top:1px solid var(--border); margin-top:var(--sp-8);
  padding: var(--sp-6) 0; color:var(--muted); background:#0b0f19
}

/* --- Layouts --- */
.grid-two{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-7)}
@media (max-width: 980px){ .grid-two{grid-template-columns:1fr} }

.profile{align-self:start; position:sticky; top:92px}
.profile img{width:100%; max-width:360px; border-radius:18px; border:1px solid var(--border); box-shadow:var(--shadow)}

.lead{font-size: clamp(1rem, 1vw + .8rem, 1.25rem); color:#d4d9e1; margin-top:0}
.meta{padding-left:1rem; color:var(--muted)}
.meta li{margin:.25rem 0}

/* --- Components --- */
.cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap:var(--sp-5)}
.card{
  background: linear-gradient(180deg, rgba(16,24,44,.85), rgba(12,18,34,.85));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--sp-5);
  box-shadow: var(--shadow);
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform: translateY(-3px); border-color:#2b3a55; box-shadow:0 26px 80px rgba(0,0,0,.45)}
.card.compact{padding:var(--sp-4)}
.card h3{margin-top:.25rem}
.card-meta{display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.9rem}

.tag{display:inline-block; padding:.15rem .5rem; border:1px solid var(--border); border-radius:999px; font-size:.85rem; color:var(--muted)}

/* Checklist with progress line */
.checklist{list-style:none; padding:0; margin:0}
.checklist li{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  background:var(--card);
  border:1px solid var(--border); border-radius:14px; padding:var(--sp-4) var(--sp-5);
  margin: .6rem 0; overflow:hidden;
}
.checklist li::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background: linear-gradient(90deg, var(--accent2), transparent);
  opacity:.4
}
.checklist li.done{border-color:rgba(52,211,153,.45); box-shadow: inset 0 0 0 1px rgba(52,211,153,.25)}
.check{color:var(--accent2); font-weight:700}

.skills{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:.6rem; margin-top:.5rem; padding-left:1rem}
.skills li::marker{color:var(--accent2)}

/* Forms */
input, select, textarea, button{
  width:100%; padding:.75rem .9rem; background:#0f172a; color:var(--text);
  border:1px solid var(--border); border-radius:12px; transition:border-color .2s ease, box-shadow .2s ease
}
textarea{resize:vertical}
button{cursor:pointer; background:linear-gradient(180deg,#1b2a44,#0f172a)}
button:hover{border-color:#31415f}
label{display:block; margin:.6rem 0}

/* Admin chrome */
.auth-card, .card{backdrop-filter:saturate(1.1) blur(0px)}
.admin-bar{position:sticky; top:0; z-index:45; background: rgba(11,15,25,.6); backdrop-filter: blur(10px); border-bottom:1px solid var(--border)}
.admin-bar .container{display:flex; align-items:center; justify-content:space-between}
.admin-main{margin-top:var(--sp-4)}
.notice{background:#0f1a10; border:1px solid rgba(52,211,153,.35); padding:.7rem .9rem; border-radius:12px}
.error{color:var(--danger)}

/* Filters */
.filter{margin:.5rem 0 1.1rem; display:inline-flex; gap:.6rem; align-items:center; background:var(--card); border:1px solid var(--border); padding:.45rem .6rem; border-radius:12px}
.filter select{width:auto}

/* Animations */
[data-animate]{opacity:0; transform: translateY(8px); transition: .35s ease}
[data-animate].in{opacity:1; transform:none}

/* === Overrides per request === */

/* 1) Solid, fixed background (no gradients) */
body{
  background: var(--bg) !important;
  background-attachment: fixed; /* keeps background visually fixed */
}

/* 2) About section: show profile photo first on mobile */
.grid-two{
  grid-template-areas: "content profile";
}
.grid-two > :first-child{ grid-area: content; }
.grid-two .profile{ grid-area: profile; }

@media (max-width: 980px){
  .grid-two{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "profile"
      "content";
  }
  .profile{ position: static; } /* avoid sticky behavior on small screens */
}

/* === Borderless overrides + mobile centered circular photo === */

/* Make design borderless on key components */
.site-header,
.site-footer,
.admin-bar,
.auth-card,
.card,
.filter,
.checklist li,
.profile img,
.site-nav a.login,
.tag,
.profile-upload img,
.list li,
input, select, textarea, button {
  border: none !important;
}

/* Remove dashed separators in lists */
.list li { border-bottom: none !important; }

/* Mobile: center profile photo and show as circle */
@media (max-width: 980px){
  .profile{
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
  }
  .profile img{
    width: 220px;
    height: 220px;
    border-radius: 9999px;
    object-fit: cover;
    margin: 0 auto;
  }
}