/* Light, minimal university portal theme */
:root{
  --bg: #eef2f7;
  --paper: #ffffff;
  --text: #122033;
  --muted: #5a6b82;
  --line: rgba(18,32,51,0.14);

  --brand: #1e4f9a;      /* blue accent */
  --brand2: #2d6cdf;     /* link/hover blue */
  --danger: #b42318;

  --shadow: 0 10px 24px rgba(18,32,51,0.10);
}

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

/* Header */
.topbar{
  border-bottom: 1px solid var(--line);
}
.topbar--white{
  background: #fff;
}
.topbar__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color: var(--text);
  text-decoration:none;
  min-width: 0;
}
.brand__logo{
  width:44px;height:44px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  object-fit: contain;
  flex:0 0 auto;
}
.brand__text{min-width:0}
.brand__title{
  font-weight: 900;
  letter-spacing: 0.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand__subtitle{
  font-size: 12.5px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Layout */
.wrap{
  max-width: 980px;
  margin: 18px auto;
  padding: 0 14px 46px;
}

.panel{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.panel--compact{padding: 14px 16px;}

.panel__title{margin:0; font-size:20px;}
.panel__subtitle{margin:0; font-size:16px;}
.panel__hint{margin:6px 0 0; color: var(--muted);}

.form{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.input{
  flex: 1 1 auto;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  outline:none;
  background: #fff;
  color: var(--text);
  font-size:16px;
}
.input:focus{
  border-color: rgba(45,108,223,0.55);
  box-shadow: 0 0 0 3px rgba(45,108,223,0.12);
}
.btn{
  flex: 0 0 auto;
  padding: 12px 14px;
  border-radius:12px;
  border: 1px solid rgba(45,108,223,0.55);
  background: rgba(45,108,223,0.10);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
}
.btn:hover{background: rgba(45,108,223,0.16);}

.status{margin-top: 10px; color: var(--muted); font-size:14px;}
.status.error{color: var(--danger);}

.results{margin-top: 12px; display:grid; gap:10px;}

/* Result cards */
.result-item{
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.result-item--clickable{
  cursor: pointer;
  transition: transform .06s ease, box-shadow .06s ease, border-color .06s ease;
}
.result-item--clickable:hover{
  border-color: rgba(45,108,223,0.45);
  box-shadow: 0 12px 28px rgba(18,32,51,0.12);
  transform: translateY(-1px);
}

.result-top{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

.badge{
  font-size:12px;
  border: 1px solid var(--line);
  background: rgba(30,79,154,0.06);
  padding: 4px 8px;
  border-radius: 999px;
}

.result-title{font-weight: 900; margin: 6px 0 0;}
.result-meta{color: var(--muted); font-size: 13px; margin-top: 6px;}
.muted{color: var(--muted);}
.contacts{display:grid; gap:6px; margin-top: 8px;}

.footer{
  display:flex;
  justify-content:space-between;
  color: var(--muted);
  font-size: 13px;
  padding: 4px 2px;
}

/* Mobile: максимально просто */
@media (max-width: 640px){
  .form{flex-direction: column; align-items: stretch;}
  .btn{width:100%;}
  .brand__subtitle{display:none;}
}