:root{
  --ams-bg: #f3f6fb;
  --ams-card: #ffffff;
  --ams-border: #e7ecf3;
  --ams-text: #1f2a37;
  --ams-muted: #6b7280;
  --ams-blue: #1a73e8;      /* dashboard-ish blue */
  --ams-blue-2: #0f5fd6;
  --ams-shadow: 0 12px 30px rgba(16, 24, 40, 0.10);
  --ams-radius: 14px;
}

.ams-bg{
  background: var(--ams-bg);
  color: var(--ams-text);
  min-height: 100vh;
}

/* Topbar */
.ams-topbar{
  height: 64px;
  background: #fff;
  border-bottom: 1px solid var(--ams-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
}

.ams-brand{
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 18px;
}

.ams-topbar-right{
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ams-muted);
}

.ams-link{
  color: var(--ams-muted);
  text-decoration: none;
}
.ams-link:hover{ color: var(--ams-text); }

.ams-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ams-border);
}

.ams-user{
  font-weight: 600;
}

/* Shell layout */
.ams-shell{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  padding: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Side panel */
.ams-side{
  background: #fff;
  border: 1px solid var(--ams-border);
  border-radius: var(--ams-radius);
  box-shadow: var(--ams-shadow);
  padding: 18px;
  height: fit-content;
}

.ams-side-brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.ams-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.ams-side-title{
  font-weight: 700;
  color: var(--ams-blue);
  line-height: 1.1;
}

.ams-side-sub{
  font-size: 13px;
  color: var(--ams-muted);
}

.ams-side-note{
  margin-top: 14px;
  font-size: 14px;
  color: var(--ams-muted);
}

/* Main card */
.ams-main{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ams-card{
  background: var(--ams-card);
  border: 1px solid var(--ams-border);
  border-radius: var(--ams-radius);
  box-shadow: var(--ams-shadow);
  overflow: hidden;
}

.ams-card-head{
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ams-border);
}

.ams-card-head h3{
  font-size: 22px;
  font-weight: 800;
}

.ams-card-body{
  padding: 18px;
}

.ams-label{
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.ams-input{
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--ams-border);
}

.ams-input:focus{
  border-color: rgba(26,115,232,.55);
  box-shadow: 0 0 0 0.2rem rgba(26,115,232,.12);
}

.ams-btn{
  height: 48px;
  border-radius: 10px;
  background: var(--ams-blue);
  color: #fff;
  font-weight: 700;
  border: none;
}

.ams-btn:hover{
  background: var(--ams-blue-2);
  color: #fff;
}

.ams-small-link{
  color: var(--ams-blue);
  font-weight: 600;
  text-decoration: none;
}
.ams-small-link:hover{ text-decoration: underline; }

/* Footer */
.ams-footer{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  color: var(--ams-muted);
  font-size: 13px;
}

.ams-footer-links{
  display: flex;
  gap: 10px;
  align-items: center;
}
.ams-footer a{
  color: var(--ams-muted);
  text-decoration: none;
}
.ams-footer a:hover{ color: var(--ams-text); }

/* Responsive */
@media (max-width: 992px){
  .ams-shell{ grid-template-columns: 1fr; }
  .ams-side{ order: 2; }
}