/* Component layer — glass UI, aligned with global.css tokens */

.app-header{
  position:sticky;
  top:0;
  z-index:100;
  padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid var(--border);
  background:var(--header-glass);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
}

.header-inner{
  width:min(100% - 32px,var(--content));
  min-height:68px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:800;
  letter-spacing:-.02em;
}

.brand-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.06));
  border:1px solid var(--accent-border);
  color:var(--text);
  font-weight:900;
  box-shadow:0 6px 22px rgba(var(--accent-rgb),.08);
}

.header-actions{display:flex;gap:8px}

.icon-btn,.nav-btn{
  min-width:42px;
  min-height:42px;
  padding:9px 12px;
  border-radius:12px;
  background:var(--surface-soft);
  color:var(--text);
  border:1px solid var(--border);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.icon-btn:hover,.nav-btn:hover{
  background:var(--surface-hover);
  border-color:var(--accent-border);
}

.hero{
  padding:clamp(30px,7vw,72px) 0 34px;
}

.eyebrow{
  color:var(--accent-color);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.hero h1{
  margin:8px 0 10px;
  font-size:clamp(2rem,6vw,4rem);
  line-height:1.02;
  letter-spacing:-.045em;
}

.hero p{
  max-width:680px;
  color:var(--text-soft);
  font-size:1.05rem;
}

.search-box{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:24px;
  padding:6px 8px 6px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
}

.search-box input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  min-height:44px;
}

.section{margin-top:34px}

.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.section-heading h2{font-size:1.25rem;letter-spacing:-.02em}
.muted{color:var(--muted)}

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

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
}

.subject-card{
  min-height:170px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .18s ease,border-color .18s ease;
}

.subject-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent-color) 55%,var(--border));
}

.subject-icon{font-size:30px}
.subject-card h3{margin-top:10px;font-size:1.05rem}
.subject-card p{margin-top:5px;color:var(--muted);font-size:.9rem}

.card-link{
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent-color);
  font-weight:750;
}

.empty-state{
  text-align:center;
  padding:45px 20px;
  border:1px dashed var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
}

.bottom-nav{
  position:fixed;
  z-index:120;
  left:50%;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  width:min(calc(100% - 24px),520px);
  display:flex;
  justify-content:space-around;
  gap:6px;
  padding:7px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--nav-glass);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-md);
}

.bottom-nav button{
  flex:1;
  min-height:46px;
  border-radius:14px;
  background:transparent;
  color:var(--muted);
}

.bottom-nav button.active{
  background:var(--accent-soft);
  color:var(--accent-color);
  box-shadow:0 5px 20px rgba(var(--accent-rgb),.045);
}

.toast{
  position:fixed;
  z-index:200;
  right:18px;
  bottom:84px;
  max-width:min(360px,calc(100% - 36px));
  padding:12px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--nav-glass);
  color:var(--text);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
}

.status-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.status-pill{
  padding:6px 10px;
  border-radius:999px;
  background:var(--surface-soft);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:.82rem;
}

.status-pill.active{
  color:var(--accent-color);
  background:var(--accent-soft);
  border-color:var(--accent-border);
}