/* ============================================================
   STUDENT PORTAL — UNIFIED DESIGN SYSTEM v3
   Aesthetic: Dark-first, editorial, brutalist-refined
   Fonts: Clash Display + DM Sans + Space Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Space+Mono:wght@400;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');

:root {
  --bg:           #0a0a0f;
  --bg-surface:   #111118;
  --bg-raised:    #18181f;
  --bg-glass:     rgba(255,255,255,0.04);
  --bg-glass-hv:  rgba(255,255,255,0.07);
  --border:       rgba(255,255,255,0.08);
  --border-hv:    rgba(255,255,255,0.16);
  --txt:          #f0f0f5;
  --txt-muted:    #7a7a8c;
  --txt-dim:      #4a4a5a;
  --accent:       #6c63ff;
  --accent-glow:  rgba(108,99,255,0.35);
  --accent-soft:  rgba(108,99,255,0.12);
  --accent-2:     #00e5b4;
  --accent-2g:    rgba(0,229,180,0.15);
  --danger:       #ff4d6d;
  --danger-soft:  rgba(255,77,109,0.12);
  --success:      #00e5b4;
  --success-soft: rgba(0,229,180,0.10);
  --warn:         #ffbe0b;
  --warn-soft:    rgba(255,190,11,0.12);
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
  --font-display: 'Clash Display', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --transition: 200ms cubic-bezier(0.4,0,0.2,1);
  --spring:     400ms cubic-bezier(0.34,1.56,0.64,1);
  --sidebar-w: 280px;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--txt);
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9999; opacity: 0.5;
}

/* TYPOGRAPHY */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--txt); margin-top: 0; }
h1 { font-size: clamp(1.8rem,4vw,2.8rem); }
h2 { font-size: clamp(1.4rem,3vw,2rem); }
h3 { font-size: clamp(1rem,2vw,1.2rem); }
p  { color: var(--txt-muted); margin-top: 0; }
strong { color: var(--txt); font-weight: 600; }
a  { color: inherit; text-decoration: none; }
code { font-family: var(--font-mono); font-size: 0.82em; background: var(--bg-raised); padding: 2px 7px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--accent); }

/* TOP ACCENT */
.page-accent { height: 3px; background: linear-gradient(90deg,var(--accent),var(--accent-2)); width: 100%; position: fixed; top: 0; left: 0; z-index: 200; }

/* LOGO BAR — top-left on all public/auth/admin pages */
.public-logo-bar {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 300;
  display: flex;
  align-items: center;
  width: min(clamp(160px, 22vw, 260px), calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: rgba(10, 10, 15, 0.72);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
.public-logo-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
  background: transparent;
}

/* ─── AUTH ─── */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 120px 20px 40px; position: relative;
}
.auth-wrap::after {
  content:''; position:fixed; top:-200px; left:50%; transform:translateX(-50%);
  width:700px; height:700px;
  background: radial-gradient(circle,var(--accent-glow) 0%,transparent 65%);
  pointer-events:none; z-index:0;
}
.auth-card {
  position:relative; z-index:1;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:44px; width:100%; max-width:480px;
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(108,99,255,0.06);
  animation:slideUp .5s var(--spring) both;
}
.auth-card-wide { max-width:800px; }
@keyframes slideUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* ─── APP SHELL ─── */
.app-shell { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }

/* ─── SIDEBAR ─── */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 0 0 0 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 0;
}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border-hv);border-radius:2px}

/* ── SIDEBAR LOGO BLOCK — replaces old red-box header ── */
.sidebar-logo-block {
  padding: 18px 16px 12px 18px;
  border-bottom: none;
  background: transparent;
  display: flex;
  align-items: center;
  min-height: 64px;
  overflow: hidden;
}
.sidebar-logo-img {
  width: auto;
  max-width: 165px;
  height: auto;
  max-height: 36px;
  object-fit: contain;
  object-position: left center;
  display: block;
  border-radius: 0;
  background: transparent;
}

/* Sidebar inner sections */
.sidebar-section {
  padding: 14px 14px 0;
}
.sidebar-nav-section {
  flex: 1;
  padding: 10px 14px 0;
}

.progress-panel { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-md); padding:14px; }
.progress-track { width:100%; height:5px; border-radius:100px; background:rgba(255,255,255,0.08); overflow:hidden; }
.progress-bar { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px var(--accent-glow); transition:width 1s cubic-bezier(0.4,0,0.2,1); }
.progress-meta { display:flex; justify-content:space-between; margin-top:7px; font-size:.76rem; color:var(--txt-muted); }
.progress-meta strong { color:var(--accent); font-family:var(--font-mono); }

.sidebar nav { display:flex; flex-direction:column; gap:3px; }
.sidebar nav a {
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:9px 12px; border-radius:var(--r-md);
  border:1px solid transparent; font-size:.8rem; color:var(--txt-muted);
  transition:all var(--transition);
}
.sidebar nav a:hover,.sidebar nav a.active { background:var(--bg-glass-hv); border-color:var(--border-hv); color:var(--txt); }
.sidebar nav a.active { border-color:rgba(108,99,255,.3); color:var(--accent); }

.sidebar-logout { padding: 12px 14px 20px; border-top:1px solid var(--border); margin-top:auto; }
.sidebar-logout a { display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--r-md); font-size:.82rem; color:var(--txt-dim); border:1px solid var(--border); transition:all var(--transition); font-weight:600; }
.sidebar-logout a:hover { color:var(--danger); border-color:var(--danger); background:var(--danger-soft); }

/* CONTENT */
.content { padding:48px 40px 40px; max-width:960px; width:100%; }

/* Content header — name/email on RIGHT, title on LEFT */
.content-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:18px; margin-bottom:22px;
}
.content-header-left { flex:1; }
.content-header-left h1 { margin-bottom:4px; }

.profile-pill {
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:13px 16px; min-width:210px; max-width:260px; flex-shrink:0;
}
.profile-pill strong { display:block; font-size:.88rem; margin-bottom:2px; }
.profile-pill span,.profile-pill small { display:block; font-size:.76rem; color:var(--txt-muted); }

/* ADMIN SHELL */
.admin-shell { max-width:1200px; margin:0 auto; padding:52px 32px 48px; }
.admin-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:24px; }
.admin-header h1 { margin-bottom:6px; }

/* CARDS */
.card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; transition:border-color var(--transition); }
.card + .card { margin-top:14px; }
.card:hover { border-color:var(--border-hv); }
.hero-card { background:var(--bg-raised); border-color:rgba(108,99,255,.2); position:relative; overflow:hidden; }
.hero-card::before { content:''; position:absolute; top:-80px; right:-80px; width:280px; height:280px; background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%); pointer-events:none; }
.hero-card p,.hero-card .section-copy { color:var(--txt-muted); }

.eyebrow { font-family:var(--font-mono); font-size:.67rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; }
.section-copy { font-size:.9rem; color:var(--txt-muted); line-height:1.7; margin:8px 0 16px; max-width:560px; }
.muted { color:var(--txt-muted); font-size:.875rem; }

/* GRID */
.grid { display:grid; gap:14px; }
.grid.two   { grid-template-columns:repeat(2,1fr); }
.grid.three { grid-template-columns:repeat(3,1fr); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dashboard-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:14px; margin-top:14px; }

/* STATS */
.stat,.stat-card,.info-tile { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-md); padding:18px; transition:transform var(--spring),border-color var(--transition); }
.stat:hover,.stat-card:hover,.info-tile:hover { transform:translateY(-3px); border-color:var(--accent); }
.stat-card.danger-ring { border-color:var(--danger); box-shadow:0 0 0 1px var(--danger-soft); }
.stat-card.danger-ring:hover { border-color:var(--danger); box-shadow:0 0 0 1px var(--danger); }
.stat h3,.stat-card h3 { font-size:1.9rem; background:linear-gradient(135deg,var(--txt),var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1.1; margin-bottom:4px; }
.stat p,.stat-card p { font-size:.78rem; color:var(--txt-muted); }
.info-tile h3 { font-size:.93rem; margin-bottom:6px; }
.info-tile p  { font-size:.8rem; color:var(--txt-muted); line-height:1.5; }

/* STEPS */
.step-list { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.step-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none; color:inherit; transition:background var(--transition),border-color var(--transition),transform var(--spring); }
.step-row:hover { background:var(--bg-glass-hv); border-color:var(--border-hv); transform:translateX(4px); }
.step-row strong { font-size:.85rem; font-weight:600; display:block; margin-bottom:2px; }
.step-row p { font-size:.75rem; color:var(--txt-muted); margin:0; }
.step-num { font-family:var(--font-mono); font-size:.66rem; color:var(--txt-dim); min-width:20px; }

/* CHIPS */
.chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:100px; font-family:var(--font-mono); font-size:.63rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
.chip.done { background:var(--success-soft); color:var(--accent-2); border:1px solid rgba(0,229,180,.2); }
.chip.done::before { content:'✓ '; }
.chip.todo { background:rgba(255,255,255,.04); color:var(--txt-dim); border:1px solid var(--border); }

/* PROGRESS BAR inline */
.progress-bar-wrap { background:var(--bg-raised); border-radius:100px; height:5px; overflow:hidden; margin-top:7px; }
.progress-bar-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px var(--accent-glow); transition:width 1s cubic-bezier(0.4,0,0.2,1); }

/* BUTTONS */
.btn,button[type="submit"],button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border-radius:var(--r-md); font-family:var(--font-body); font-size:.875rem; font-weight:600; cursor:pointer; transition:all var(--transition); border:1px solid transparent; text-decoration:none; white-space:nowrap; position:relative; overflow:hidden; }
.btn,button[type="submit"] { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn:hover,button[type="submit"]:hover { background:#7d75ff; border-color:#7d75ff; box-shadow:0 0 20px var(--accent-glow); transform:translateY(-1px); }
button:active,.btn:active { transform:translateY(0); }
.btn.secondary { background:transparent; color:var(--txt); border-color:var(--border-hv); }
.btn.secondary:hover { background:var(--bg-glass-hv); box-shadow:none; transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--txt-muted); border-color:var(--border); }
.btn.ghost:hover { color:var(--danger); border-color:var(--danger); background:var(--danger-soft); transform:none; box-shadow:none; }
.btn.sm { padding:7px 13px; font-size:.78rem; }
.btn.lg { padding:13px 26px; font-size:.95rem; }
.actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* ── FORMS — CENTERED INPUT FIELDS ── */
form { display:flex; flex-direction:column; gap:16px; }

label {
  display:flex; flex-direction:column; gap:6px;
  font-size:.78rem; font-weight:600; color:var(--txt-muted); letter-spacing:.01em;
}

input[type="text"],input[type="email"],input[type="password"],
input[type="tel"],input[type="date"],input[type="url"],
input[type="number"],input[type="file"],select,textarea {
  width:100%;
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:11px 16px;
  font-family:var(--font-body); font-size:.9rem; color:var(--txt);
  outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
  -webkit-appearance:none;
  margin:0;
  text-align: left;
}
input:focus,select:focus,textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
input::placeholder { color:var(--txt-dim); }
input[type="file"] { padding:9px 12px; cursor:pointer; color:var(--txt-muted); }
textarea { resize:vertical; min-height:120px; }
select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a8c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }

/* Centered form wrapper for pages */
.form-center {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

/* Radio options */
.radio-group { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.radio-option { display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--bg-raised); font-size:.83rem; color:var(--txt-muted); cursor:pointer; transition:all var(--transition); font-weight:500; width:auto; }
.radio-option:hover { border-color:var(--accent); color:var(--txt); }
.radio-option input { width:auto; accent-color:var(--accent); cursor:pointer; }
.field-hint { font-size:.73rem; color:var(--txt-dim); margin-top:3px; }

/* ALERTS */
.alert { border-radius:var(--r-md); padding:12px 15px; font-size:.875rem; font-weight:500; display:flex; align-items:flex-start; gap:10px; border:1px solid transparent; animation:alertIn .3s ease both; margin-bottom:14px; }
@keyframes alertIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
.alert-error   { background:var(--danger-soft);  color:#ff8fa3;      border-color:rgba(255,77,109,.2); }
.alert-success { background:var(--success-soft); color:var(--accent-2); border-color:rgba(0,229,180,.2); }
.alert-info    { background:var(--accent-soft);  color:#a09cff;      border-color:rgba(108,99,255,.2); }
.alert-error::before   { content:'⚠ '; flex-shrink:0; }
.alert-success::before { content:'✓ '; flex-shrink:0; }

/* TABLE */
.table-wrap { overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--border); margin-top:14px; }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
th,td { padding:11px 13px; text-align:left; border-bottom:1px solid var(--border); }
th { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-dim); background:var(--bg-raised); font-weight:700; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg-glass); }
.table-actions { display:flex; flex-wrap:wrap; gap:10px; }
.table-actions a { font-size:.8rem; font-weight:600; color:var(--accent); transition:color var(--transition); }
.table-actions a:hover { color:var(--accent-2); }
.table-actions a.danger { color:var(--danger); }

/* Status badges */
.status-badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:100px; font-family:var(--font-mono); font-size:.63rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.status-badge.approved { background:var(--success-soft); color:var(--accent-2); border:1px solid rgba(0,229,180,.2); }
.status-badge.pending  { background:var(--warn-soft); color:var(--warn); border:1px solid rgba(255,190,11,.2); }
.status-badge.waiting  { background:var(--bg-raised); color:var(--txt-dim); border:1px solid var(--border); }

/* NAV */
.nav { position:sticky; top:0; z-index:100; background:rgba(10,10,15,.88); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:0 28px; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.admin-nav-logo { display:block; width:auto; height:clamp(32px, 4vw, 44px); max-width:min(220px, 42vw); object-fit:contain; border-radius:4px; }
.nav-brand { font-family:var(--font-display); font-size:.98rem; font-weight:700; display:flex; align-items:center; gap:10px; }
.nav-brand-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 6px var(--accent)} 50%{box-shadow:0 0 16px var(--accent),0 0 32px var(--accent-glow)} }
.nav-avatar { width:36px; height:36px; border-radius:var(--r-md); background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.78rem; font-weight:700; color:white; flex-shrink:0; }

.main { flex:1; padding:40px 32px; max-width:1200px; margin:0 auto; width:100%; }

/* PUBLIC PROFILE */
.detail-row { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:.875rem; }
.detail-row:last-child { border-bottom:none; }
.detail-label { color:var(--txt-muted); font-weight:500; min-width:150px; flex-shrink:0; }
.detail-value { color:var(--txt); }
.blog-body { font-size:.92rem; line-height:1.8; color:var(--txt-muted); white-space:pre-line; }
.link-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--r-md); font-size:.82rem; font-weight:600; border:1px solid var(--border-hv); color:var(--txt-muted); transition:all var(--transition); }
.link-btn:hover { background:var(--bg-glass-hv); color:var(--txt); border-color:var(--accent); }

.showcase-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; transition:all var(--transition); position:relative; overflow:hidden; }
.showcase-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); opacity:0; transition:opacity var(--transition); }
.showcase-card:hover { border-color:var(--border-hv); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.showcase-card:hover::before { opacity:1; }

.index-hero { padding:80px 0 56px; text-align:center; }
.index-hero h1 { font-size:clamp(2.5rem,7vw,5rem); background:linear-gradient(135deg,var(--txt) 30%,var(--accent) 80%,var(--accent-2) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:16px; }
.index-hero .sub { font-size:clamp(1rem,2vw,1.15rem); color:var(--txt-muted); max-width:500px; margin:0 auto 28px; }

.footer { border-top:1px solid var(--border); padding:20px 32px; display:flex; align-items:center; justify-content:space-between; font-size:.76rem; color:var(--txt-dim); }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:100px; font-size:.66rem; font-weight:700; font-family:var(--font-mono); background:var(--accent); color:white; }
hr { border:none; border-top:1px solid var(--border); margin:20px 0; }
.scroll-top { position:fixed; bottom:24px; right:24px; width:38px; height:38px; border-radius:50%; background:var(--bg-raised); border:1px solid var(--border-hv); display:flex; align-items:center; justify-content:center; color:var(--txt-muted); cursor:pointer; font-size:.95rem; transition:all var(--transition); z-index:50; padding:0; }
.scroll-top:hover { background:var(--accent); color:white; border-color:var(--accent); box-shadow:0 0 18px var(--accent-glow); }

/* TAGS */
.tag-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.tag { display:inline-block; padding:3px 9px; border-radius:100px; font-size:.74rem; font-weight:600; background:var(--accent-soft); color:#a09cff; border:1px solid rgba(108,99,255,.2); }
.tag.tool { background:var(--accent-2g); color:var(--accent-2); border-color:rgba(0,229,180,.25); }

/* SKILL TAGS */
.skill-tag { padding:6px 12px; border-radius:100px; font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:7px; transition:all var(--transition); }
.skill-tag.technical { background:var(--accent-soft); color:#a09cff; border:1px solid rgba(108,99,255,.25); }
.skill-tag.tool { background:var(--accent-2g); color:var(--accent-2); border:1px solid rgba(0,229,180,.25); }
.skill-tag button { background:transparent; border:none; cursor:pointer; color:inherit; font-size:.72rem; padding:0; min-height:auto; border-radius:0; font-weight:700; }
.skill-tag button:hover { background:transparent; transform:none; box-shadow:none; }

/* CERT ENTRIES */
.certification-entry,.accomplishment-entry { background:var(--bg-raised) !important; margin-bottom:12px !important; }

/* STAGGER */
.stagger>* { animation:fadeSlideIn .4s var(--spring) both; }
.stagger>*:nth-child(1){animation-delay:.05s}
.stagger>*:nth-child(2){animation-delay:.1s}
.stagger>*:nth-child(3){animation-delay:.15s}
.stagger>*:nth-child(4){animation-delay:.2s}
.stagger>*:nth-child(5){animation-delay:.25s}
.stagger>*:nth-child(6){animation-delay:.3s}
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(13px)} to{opacity:1;transform:translateY(0)} }

/* RESPONSIVE */
@media(max-width:1100px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;border-right:none;border-bottom:1px solid var(--border)}
  .content{padding:24px 20px; max-width:100%}
  .content-header{flex-direction:column}
  .profile-pill{max-width:100%}
  .dashboard-grid{grid-template-columns:1fr}
  .grid.three,.stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .public-logo-bar{
    top:12px;
    left:12px;
    width:min(clamp(150px, 56vw, 220px), calc(100vw - 24px));
    padding:8px 12px;
  }
  .public-logo-img{max-height:60px}
  .admin-nav-logo{height:34px; max-width:56vw}
  .admin-shell{padding:48px 16px 40px}
  .admin-header{flex-direction:column}
  .grid.two{grid-template-columns:1fr}
  .auth-card{padding:28px 18px}
  .nav{padding:10px 16px; min-height:auto}
  .main{padding:24px 16px}
  .grid.three,.stats-grid{grid-template-columns:1fr}
  .content{padding:20px 14px}
}
@media(max-width:480px){
  .public-logo-bar{
    width:min(200px, calc(100vw - 20px));
    padding:8px 10px;
  }
  .public-logo-img{max-height:52px}
  .auth-card{padding:22px 14px}
  .step-row{flex-direction:column;align-items:flex-start}
}